ひtoりgoと

= ひとりごと to go

zumuya の人による机の上系情報サイト

記事はなくとも

  • サイト

最近は記事を書く頻度がずいぶんと落ちていたけど、決してこのサイトを放置しているわけではない。一区切りついたのでこれまで加えた変更をメモしておこう。

レスポンシブデザインになった

このサイトのスマートフォン対応といえば、iPhone をユーザエージェントで判別して分岐した CSS で、PC 用のページ幅のまま -webkit-text-size-adjust と transform: scale() を組み合わせて必要な部分を無理やり拡大するというあまりにひどい状態だったけど、今はもうレスポンシブ。ウインドウをリサイズするとポコポコと変化するのが楽しい。

広くても
狭くても

特にアナウンスはしていなかったけど、これはもう 1 年ぐらい前に加えた変更である。

SCSS を使い始めた

以前バージョン 2.0 を紹介したけど（→ 2011.9.30）その後長年放置されていたコードエディタ Espresso が今年からまたアップデートされ始めたので、それを機に購入してこのサイトのコードを編集するのに使い始めた。今回の目玉は Dynamo と呼ばれる新機能。

Dynamo provides the flexibility of a dynamic website with the speed and security of statically hosted files. You can use it for something as simple as generating CSS from SCSS, or as complex as generating a blog from Markdown files.

HTML の中に外部 Markdown ファイルの内容を埋め込んだものを生成したり、SCSS を CSS にコンパイルしたりしてくれたりする機能なのだ。

SCSS なんて専用のツールを入れれば簡単に自動コンパイルぐらいできるものだけど、Mac に常駐ソフトを増やしたくないので使ってこなかった。ファイルの変更を監視するのって負荷になりそうだし。それがスタイルシートを編集するときに絶対使うエディタに統合されているなら使わない手はない。

...劇的に効率が上がりました。CSS を手打ちするのがどれほど効率が悪いことか実感。みんなこんなに便利なものを使っていたのね。ひどい周回遅れである。

常時 SSL

正直なところこのサイトに採用するメリットがよくわからないけれども常時 SSL に対応。URL が https で始まるよ。

Markdown で記事を書けるようにした

外部リンクを張るたびに target="_blank" などと書くのが辛くなってきた。そういうことは単純に正規表現でタグの中身を置き換えてから出力するようにして対処してきたのだけど、そんな処理をいくつも増やしているうちに「どうせやるならもっと高機能なパーサで楽したい」と思うようになったのだ。

狭いエディタ画面の中で HTML タグを書くのも面倒に感じてきたし、Markdown で記事を書くことに。PHP Markdown という PHP 用のパーサライブラリを使用しよう。

インストールに使った Composer というツールは最初「何者？」と思ったけど、Cocoa でいうところの CocoaPods だと理解。

“ひ to り go と”で効率よく記事を書くために色々と調整したかったのでソースコードをよく読んだら、サブクラスを作って簡単に挙動の変更や機能の拡張をできることがわかった。

やはりパース機能の大部分は正規表現による置換でできているんだけど、パースが終わった要素をハッシュ化していく部分など「パーサってこうやって作るのか」と勉強になる。

拡張した内容を挙げていくと：

  • "->" と書いてリンクのリストを作成（通常のリストと違って先頭の・がない代わりにリンク内に → をつけている。）
  • リンクが相対パスでなければ target="_blank" をつける
  • イメージの URL を番号だけで指定（記事ごとの場所に変換される。）
  • 標準ではイメージが p の中に入るけど、代わりに figure に入れる
  • イメージに title をつける代わりに figcaption を生成
  • イメージの URL が youtube: で始まる場合は YouTube ビデオを埋め込む
  • イメージの URL の拡張子が mp4 や m4v の場合は video を生成
  • <> で囲んで生成されるリンクの表示文字列から http(s):// を削除
  • 記事 ID を <> で囲むだけで日付を表示しつつリンク
  • --- 続きを読む --- と書いてパーマリンクにする

などなど。

あまり独自の文法で拡張をすると通常の Markdown を書けない体になってしまいそうなので、できるだけもとの雰囲気を壊さないようにしたつもり。

ページを表示するたびにパースすると負荷が大きいのでキャッシュするようにもした。このサイトの読者数からいくと必要なさそうではあるが...

記事編集画面を改良、Mac App も

PHP と JavaScript で動く記事編集画面（→ 2015.3.14）を改良。

やはり CodeMirror はよくできてる。Markdown 用の mode を指定するだけでカラーリングしてくれるし、オプションを有効にすると見出しで折りたためるようになった。

さらに、これまで保存のタイミングで更新していたプレビューを、入力と同時に非同期で更新するようにした。自分は実際にページで表示される雰囲気を見ながら書いていきたい派なのでプレビューは必要なのだ。
これまでは HTML タグを書いていたから、完全にタグを閉じるまえの中途半端な状態でプレビューされると悲惨なことになるので手動更新だった。

記事リストも表示できる。

もう一つ。ネイティブアプリケーション派なので Web ブラウザの中でテキストを入力し続けるのってなんか嫌だったから、ついに念願の記事編集用 Mac アプリケーションを作った！

Mac アプリケーションとは言っても簡単に書くと記事編集画面を Web View で表示して Cocoa の皮をかぶせただけなのだけど、Mac ネイティブにこだわりたい人間としては、メニューから取り消し／やり直しができてかつその選択可能状態が変化するようにしたり、ウインドウの閉じるボタンの変化で未保存かどうかわかるようにしたり、シートでアラートが表示されたりと割とこだわって作っている。自分しか使わないのにね。

バージョン？

“ひ to り go と”もこれだけ長く続くのだったらほかの方々のサイトみたいにシステムにバージョン番号をつけておけばよかったと少し後悔している。

（『独自 CMS で動く個人 Web サイトまとめ』みたいなものがあったら読んでみたいと思うのは自分だけだろうか。）

---

とにかく、これで記事を書く効率が上がる！ まるで機材を買って「これで動画を作る効率が上がる」と主張する内容ばかりの YouTuber みたいだけど、やっぱり環境を整えるのって楽しい。
Classic Mac OS 時代や初期の OS X でデスクトップカスタマイズに燃えていた気持ちがこういうところで蘇っているのかもしれない。

Share

リンクも共有もお気軽に。記事を書くモチベーションの向上に役立てます。