tkNotes :: 俺式4.0 サイトコンセプト

Created: 2012-02-01
Modified: 2012-03-01
Written by Tatsuya Koyama

何を作る

2010年の4月に社会人になってから、仕事ばかりやっていたように思う。 プライベートでも色々勉強したりゲームやサイトを作り続けたいと思いながら、 2012年2月現在、何も世に出せないままここまで来た。 自分のオリジナリティをこれ以上失わないために、僕は 自分のサイトを今の技術とセンスで作り直す ことを決意した。

学生時代に作っていたサイトは これ (俺式3.0)だ。 それなりに手をかけてはいたのだろう、だけど今見ると少々ぎこちない デザインであると思う。サイトを作り直すにあたって、 社会人になった自分がこれから必要とする個人サイトとは何か、まずは要件から洗い出そう。 幸い、ものごとを設計するための考え方は、仕事の経験によって学生時代の頃よりも身についている。

  • 自分の作品の公開場所とする(自分のポートフォリオを置く)
  • 自分が勉強したことをまとめていく
  • 自分が経験して気に入っているものを世の中にシェアする

  • 機能的で閲覧しやすいものにする
  • もう今更1ページごとに HTML のタグを打ったりしたくない
  • サイトのオーナーは自分1人だけでよい

閲覧しやすいようにするには、デザインに一貫性 を持たせる必要がある。 ところが僕は 勉強ノートポートフォリオ といった体裁が大きく異なるものを 1つのサイトにまとめようとしている。 カテゴリの異なるものが同じ場所に混在していると閲覧性は下がる。 旧サイトのデザインではメニューのリンクが並びすぎていた。 恐らくゲームをダウンロードしたい人が来てくれたとしても、 パッと見て迷ってしまうことだろう。

そこで僕は、まず コンテンツの入り口の数を少なくする ことにした。 人間が一望できる項目の数は、せいぜい3つか4つくらいじゃないだろうか。 僕は自分がサイトで公開したいコンテンツを、以下の3つに大きく分けた。

  • tkNotes (入力:学んだこと、知識)
  • tkWorks (出力:作ったもの)
  • tkLog (内部状態:思ったこと、または雑多な体験)

この3つに、僕のすべてのアウトプットを集約していこう。

どう作る

ここは結構重要なところだ。仕事を経験して僕は効率化の重要性を学んでしまったから、 もう今更 地道に HTML のタグを打ってページを作る、 というようなことはできない。 結論から言うと、僕は

  • コードジェネレータ を作り、独自の構文を HTML に変換する

という方法を選んだ。コードジェネレータは Python で書き、tkgen と名付けた。 tkgen での変換ルールは、正規表現と yaml と Python のコードを書くことで作れる。 サイトづくりの土台を組み立てるために、僕は Python正規表現yamlHTMLCSS の全てと 戦う必要があったが、クリエイターを目指す前にプログラマーである僕は、 後で楽をするための苦労を惜しまない。

最終的に、

と書くことで

以上のようなコードが生み出され、

Link to Home

  • hoge
    • fuga
      • piyo
item1 item2 item3
item4 item5 item6 is multiline text
item7 item8 is long text item9
item10 item11 item12

このような見た目を作り出せる環境を僕は手に入れた。 自分が書きやすい、自分だけの構文をお気に入りのエディタで書くだけで、 サイトを作っていけるようになったのだ。

ジェネレータには各ページで行いたいような 横断的な実装を1箇所にまとめる という効果もある。 それなら Wiki のような CMS を使えばいいんじゃないかという話もあるが、 コンテンツを制作するのが僕1人でよい場合、サーバサイドで動く CMS は必ずしも必要ではない。 Wiki などのシステムと比べて、このやり方なら以下のような恩恵を受けられる。

  • ネットワークがなくても作業ができる
    • ローカルサーバを立てたりしなくて済む
    • サーバとローカルのバージョンとかを気にしなくて済む
    • 画像とかいちいちアップロードしなくて済む

  • 自動生成的な処理をローカルで事前に済ますことができる
    • サーバは静的ファイルを返せばいいだけなので処理コストが低く、エコ

  • アップロードするまで公開しなくてすむ
    • 作業中と公開状態の切り替えが楽

  • Web ブラウザのしょぼいテキストエリアを使わなくて済む
    • 使い慣れた Emacs の機能を使って心地よく書ける (重要)

さあ始めよう。 もう誰も僕を止めることはできない。