iine!

iine!: The internet is full of iine!

Facebookとは全く関係ない。iine!は僕がウェブ上で気に入ったロゴやフォーム、ナビゲーションなどをスクリーンショットと短いコメント付きで並べていくサイト。元々ローカルでやってたのを公開するようにした。特にそれらのパクリ方作成方法を解説したりとかはない。よくあるCSSギャラリーのパーツ版みたいな感じ。いいね!

バックエンド

WordPressで作ろうかと思ったけどそんな大げさなものでもないので、blosxom v2.1.2 + mod_rewriteで作った。本体は403や404を吐くためにちょっとだけ改造。

使用したプラグインは、

  • back_and_forth
  • entry_index_tagged
  • entry_title
  • interpolate_fancy
  • meta
  • paginate_simple
  • push_if_first
  • redirectif_noflavour

の8つ。AutoPagerizeに対応するためにページング系のプラグインはいれておいた。検索機能とかはあとで考えるつもりだが、あまり意味ないと思うのでたぶん付けない。タグでカテゴリ分けは面倒くさい割に効果がなさそうなのでやめた。

コミュニケーション

各エントリに対しては、Facebookのいいね!ボタンはてなスターでポジティブなアクションが可能。ネガティブなアクションはモチベーションの低下を招くので付けない……のではなく、どうするか決めかねているだけ。DISQUSIntenseDebateはちょっとゴツいかなーと思っているので、コンパクトなFacebookのコメントにするかもしないかも。

はてなブックマークのボタンやTwitterのボタンは付ける気がない。

スクリーンショット

スクリーンショットは320x180のPNGで固定。あまり大きすぎるととか小さすぎるととか何か深い理由があるわけではなく、AdSenseのサイズに合わせただけ。幅500くらいの広告とか無い……。スクリーンショットの撮影はWinShotでPNGで撮影→pngcrush→指定フォルダに移動→そのフォルダを開くまでを自動で行うAutoHotkeyスクリプトでやっている。

WinShotは撮影後即終了とか細かくコマンドラインで制御できるので更新されなくなった今でも愛用。矩形範囲の縦横サイズを表示してくれる機能とか3分割くらいのグリッド表示機能とか欲しいので似たようなものを探しているが見つからない。そういうことができるライトウェイトな画像編集ソフトウェアと連携したりとかのが良さそうな気がしてきた。

WinShotのコマンドラインでPNGで撮影するには、

C:> winshot.exe -D -X -B -F test.png

と-Bオプションでビットマップ保存にして、保存ファイル名の拡張子を.pngにするだけ。

デザイン

真面目に文章を読ませるようなサイトではないので、幅336pxの1カラムにした。ギャラリーサイトとかでよくあるタイル状のサムネイルはあまり見やすいとは思わない(フィルムストリップとかのが好き)ので、ズラッと縦に並ぶようにした。いいね!ボタンやスターは画像の下だと押しづらそうなので、画像の横にくっつけた。

横並びにしようかなとはちょっと思ったが、横スクロール対応のポインティングデバイスの普及度を知らないので躊躇した。ノートPCにはほぼ100%搭載されていると思うのでかなりの普及度だとは思うのだけど。

エントリの数がたまったらランダムなスライドショーで見せるショーケース的なものやブラウザ画面をタイルして埋め尽くすみたいなのも作る。

AdSenseエリアにはadsというクラス名が振ってあるので消したい人はユーザースタイルシートでどうぞ。広告にはautopagerize_page_elementは振ってないのでAutoPagerizeで広告いっぱいジャマーにはならない。

ページめくりのリンクは画像にしようかと思ったけど72px弱まで拡大した»«で誤魔化した。


一週間あたり7以上の投稿と100エントリをとりあえずの目標にしている。それ以降は決めてない。パクリ方作成方法を書きたくなったらこっちに書くと思う。