Safari 5.1、Chrome 19b、Firefox 12、InternetExplorer 9 で動作することを確認しました。あとは気が向いたらテストします。まずは IE8 かな。

Opera でも確認してみたのですが、JavaScript がうまく動いてくれなくてフィルタが使えません。フォームのテキストボックスで Enter を押したとき、任意の関数を実行しつつ submit をキャンセルするにはどうすればいいのか、誰か教えてください。

• shBrushMarkdown.js

ここにも gist のコードを埋め込もうと思ったのですが、SyntaxHighlighter のためのコードを貼り付けるのに別の Syntax Highlight を使うというのもアレなのでやめておきました。ちなみに gist のほうは当然のように Markdown にも対応してたりします。

Markdown とは、シンプルなプレーンテキストで書けて、HTML に変換できるマークアップ言語です。簡単にいうと、はてな記法みたいなもんです。また、コンセプトとして “原文のままでも読みやすく” というのもあるみたいです。

文法など Markdown についての詳細は公式リソースなど他に譲るにして、僕はとりあえず Emacs で快適に Markdown を使えるようになるまでの作業ログとちょっとした tips を残しておきます。

$ brew install markdown
$ cd ~/.emacs.d/site-lisp
$ wget http://jblevins.org/git/markdown-mode.git/plain/markdown-mode.el
$ emacs ~/.emacs.d/init.el

;; markdown-mode
(autoload 'markdown-mode "markdown-mode.el"
  "Major mode for editing Markdonw files" t)
(setq auto-mode-alist
      (cons '("\\.mdwn$" . markdown-mode) auto-mode-alist))

<!-- <section> -->

# hoge

hogehoge

<!-- </section> -->

<!-- <section> -->

<h1>hoge</h1>

<p>hogehoge</p>

<!-- </section> -->

<section>

<h1>hoge</h1>

<p>hogehoge</p>

</section>

<!-- blockquote cite="http://example.com/" -->

> 引用

<!-- blockquote cite="http://example.com/" -->

<blockquote><p>引用</p></blockquote>

<blockquote cite="http://example.com/"><p>引用</p></blockquote>

具体的には、mod_rewrite ルールを変更して書き換え対象となる URI を WordPress で使うものに限定しました。正規表現なのでけっこう簡単です。以下はパーマリンク設定が “数字ベース” の場合。(“投稿名” の場合はかなり厳しいですね……)

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]

# 個別記事
RewriteCond %{REQUEST_URI} ^/archives/[0-9]+/?$ [OR]
# タグ・カテゴリー
RewriteCond %{REQUEST_URI} ^/archives/(tag|category)/[^/]+/?$ [OR]
# 月別・年別アーカイブ
RewriteCond %{REQUEST_URI} ^/archives/date/[0-9]{4}(/[0-9]{2})?/?$ [OR]
# インデックスやタグ、カテゴリー、月別・年別の2ページ目以降 (後方一致)
RewriteCond %{REQUEST_URI} /page/[0-9]+/?$ [OR]
# 各種フィード (後方一致)
RewriteCond %{REQUEST_URI} /feed(/rss2?|/atom)?/?$

RewriteCond %{DOCUMENT_ROOT}/%{REQUEST_URI} !-f
RewriteCond %{DOCUMENT_ROOT}/%{REQUEST_URI} !-d
RewriteRule . /index.php [L]
</IfModule>

# 静的なエラーページ
ErrorDocument 404 /404.html

RewriteCond は通常 AND で接続されますが、[OR] と明示することで OR で接続することもできます。この場合、明示された OR のほうが AND より強く、1 2 [OR] 3 4 は 1 and (2 or 3) and 4 という具合になります。

初期状態では %{REQEUST_FILENAME} となっているところが %{DOCUMENT_ROOT}/%{REQUEST_URI} になっているのは、僕の場合これらを <VirtualHost> ディレクティブの中に書いているからです。このような環境のとき、%{REQEUST_FILENAME} は %{REQUEST_URI} と同じになります。参考:

REQUEST_FILENAME

[...] such as when used in virtual host context, the same value as REQUEST_URI.

• mod_rewrite – Apache HTTP Server

ちなみに、僕がパーマリンク設定を “数字ベース” にしている理由は、僕が優柔不断で、記事を公開したあとも細かく変更したくなるタチだからです。パーマリンクがパーマリンクとしての用を成すためには僕に変更する余地を与えないことが大事なのです。

ただ、自動的に割り振られる番号だと記事を復元するときに問題があるというのをつい最近学んだところなので、そのうち変えるかも知れません。やるなら “/archives/YYYYMMDDhhmm” とかのタイムスタンプベースかなあ。

こっちは何もしなくても Shift + Space で全角になるみたいです。

ただ Windows で日本語の文章をガッツリ書くなんてことは滅多にないので、役に立つ機会はなさそうな感じ……。

shift+スペースバーの場合 は初期状態で 上記の逆 になっていたのですが、一度 常に半角 にしてからじゃないと有効になりませんでした。

ところで、冒頭のようなことを思いたったのは、最近わかち書きを使うようになったからです。アルファベットと日本語の間に半角スペースを入れるのをわかち書きというのが正しいのかどうかはわかりませんが、そういうことです。

この手のスペースを機械的に処理すべきかそうでないか、というのは何年も前から話題になっていて、実際に Microsoft は10年半前の牛乳で既に text-autospace という CSS プロパティをサポートしています。これは日本語や中国語などの表意文字の中に出現した非表意文字の前後をスペースで囲むというもので、現在の CSS 3 の草案では text-spacing (の一部) として議論されているようです。

ただ、相変わらず対応しているのは IE での text-autospace だけのようなので、とりあえず自分で半角入れることにしました。機械的にスペースを挿入することが可能であれば、機械的にスペースを取り除くことも可能でしょうから、このプロパティが多くのブラウザにサポートされるようになったら、またどうするか考えることにします。あと面倒くさくなったらやめます。実は前にもやろうとしたことがあったのですが、結局途中で面倒くさくなってやめちゃいました。また同じ結果になるか……？

画像は公式で配っているもの (Twitter/Facebook) を縮小して使ったので、Twitter Bird の色がけっこう違います。

<ul id="social_buttons">
  <li id="hatebu_button"><a href="http://b.hatena.ne.jp/entry/【"http://" 抜きの URL】"><span class="text">B!</span><span class="count">0</span></li>
  <li id="tweet_button"><a href="https://twitter.com/intent/tweet?text=【タイトル】&url=【URL】"><span class="text">ツイート</span></a><a href="http://twitter.com/search?q=【URL】"><span class="count">0</span></a></li>
  <li id="fblike_button"><a href="http://www.facebook.com/plugins/like.php?href=【URL】"><span class="text">いいね !</span></a></li>
</ul>

#social_buttons a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
}
#social_buttons a:after {
  display: table;
  clear: both;
  content: "";
}
#social_buttons span {
  display: block;
  float: left;
  font-family: sans-serif;
}

#hatebu_button span {
  height: 18px;
  line-height: 18px;
  border: 1px solid #2C6EBD;
  font-weight: bold;
  text-align: center;
}
#hatebu_button .text {
  width: 16px;
  background-color: #568BCA;
  background-image: -webkit-gradient(linear, left top, left bottom,
                                     from(#2C6EBD), to(#2C6EBD));
  background-image: -moz-linear-gradient(0deg, #2C6EBD, #2C6EBD);
  background-image: -o-linear-gradient(0deg, #2C6EBD, #2C6EBD);
  background-size: auto 9px;
  background-position: 0 100%;
  background-repeat: repeat-x;
  border-radius: 2px 0 0 2px;
  color: #FFF;
  font-size: 9px;
}
#hatebu_button .count {
  width: 32px;
  border-color: #ABC5E5;
  border-left-width: 0;
  border-radius: 0 2px 2px 0;
  background-color: #F7F9FC;
  color: #2C6EBD;
  font-size: 10px;
}

#tweet_button span {
  height: 18px;
  line-height: 18px;
  padding: 0 4px;
  border: 1px solid #CCC;
  border-radius: 3px;
  color: #333;
  font-size: 10px;
}
#tweet_button .text {
  margin-right: 5px;
  padding-left: 20px;
  background: #EEE url(./twitter_newbird_blue.png) scroll no-repeat 0 50%;
  background-image: url(./twitter_newbird_blue.png),
                    -webkit-gradient(linear, left top, left bottom,
                                     from(#FFF), to(#DDD));
  background-image: url(./twitter_newbird_blue.png),
                    -moz-linear-gradient(270deg, #FFF, #DDD);
  background-image: url(./twitter_newbird_blue.png),
                    -o-linear-gradient(270deg, #FFF, #DDD);
  background-repeat: no-repeat, no-repeat;
  background-position: 0 50%, 0 0;
  font-weight: bold;
}
#tweet_button a:hover .text {
  border-color: #BBB;
  background-image: url(./twitter_newbird_blue.png),
                    -webkit-gradient(linear, left top, left bottom,
                                     from(#F8F8F8), to(#D8D8D8));
  background-image: url(./twitter_newbird_blue.png),
                    -moz-linear-gradient(270deg, #F8F8F8, #D8D8D8);
  background-image: url(./twitter_newbird_blue.png),
                    -o-linear-gradient(270deg, #F8F8F8, #D8D8D8);
}
#tweet_button .count {
  position: relative;
  background-color: #FFF;
}
#tweet_button a:hover .count{
  text-decoration: underline;
}
#tweet_button .count:before,
#tweet_button .count:after {
  position: absolute;
  top: 6px;
  left: -3px;
  z-index: 3;
  border-style: solid;
  border-color: transparent #FFF;
  border-width: 3px 3px 3px 0;
  content: "";
}
#tweet_button .count:after {
  z-index: 2;
  top: 5px;
  left: -4px;
  border-width: 4px 4px 4px 0;
  border-color: transparent #CCC;
}

#fblike_button span {
  height: 18px;
  line-height: 18px;
  padding: 0 8px 0 21px;
  border: 1px solid #CAD4E7;
  border-radius: 3px;
  background-color: #ECEEF5;
  background: #ECEEF5 url(./f_logo.png) scroll no-repeat 5px 50%;
  color: #3B5998;
  font-size: 10px;
}
#fblike_button a:hover span{
  border-color: #9DACCE;
}

(function($) {
  $(function() {

    function hatebuCount(url) {
      $.getJSON(
        'http://api.b.st-hatena.com/entry.count?callback=?',
        {url: url},
        function(data) {
          $('#hatebu_button .count').html(data);
        }
      );
    }
    function tweetCount(url) {
      var text, tw_url;
      $.getJSON(
        'http://urls.api.twitter.com/1/urls/count.json?callback=?',
        {url: url},
        function(data) {
          $('#tweet_button .count').html(data.count);
        }
      );
    }

    hatebuCount(location.href);
    tweetCount(location.href);

  });
})(jQuery);

で、できたのがこんな感じ (Safari 5.1.3):

見た目はそれなりに似せられたと思いますが、いいね ボタンの動作がダサい……。もっといい方法ないのかしら。

まあそういうわけで新しいサーバーになりましたが、外から見る分にはあまりかわりませんね。普通の共用サーバーと違って他のユーザーの影響を受けにくい VPS なので、サーバーが落ちる頻度は下がると思いますが、僕が気づかないと落ちっぱなしですから、トータルではイーブンかもしれません。でもサーバーの知識を身につけられますし、なにより楽しいのでオールオッケー。

こんな感じ:

$ sips --getProperty pixelWidth ~/Pictures/wallpaper.jpg
/Users/kaz/Pictures/wallpaper.jpg
  pixelWidth: 1920
$ sips -g pixelHeight -g pixelWidth ~/Pictures/wallpaper.jpg ~/Pictures/icon.png
/Users/kaz/Pictures/wallpaper.jpg
  pixelHeight: 1920
  pixelWidth: 1080
/Users/kaz/Pictures/icon.png
  pixelHeight: 512
  pixelWidth: 512

長ったらしいので alias にしました:

alias imgsize='sips --getProperty pixelHeight --getProperty pixelWidth'

ちなみにこの sips は画像処理のライブラリなので、リサイズしたりタグを書き換えたりもできるみたいです。こんど使ってみよう。