stonewall開発日記10

リサイズイベントによって再度グリッドの引き直しをするためにコンストラクタから処理を分離した。で例によってTumblrから画像を引っ張ってくるサンプルをアップデートしたんだけど、これCSS3のMulti-Columnでよいのでは…と思って(このサンプルを思い出して)やってみたらやっぱそれでよかった(IEは10からじゃないと駄目だけど)。stonewallは左から右に要素を置いていくのに対し、Multi-Columnだと上から下なので全く同じという訳ではないが、タイル状に敷き詰めたいだけとか、上から下にレイアウトしていきたい場合にはCSSの方が良いだろうな。リサイズイベントを拾わなくても追従してくれるし。

前にも書いてたけど、やはりJavaScriptでしかできないレイアウトを実現するか、ベンダープレフィックスとかつけなきゃいけない現状のCSSよりは簡単で導入もしやすく古いブラウザの問題も解消する方向を検討したい。

グリッドデザインは単にグリッド状に並んでるだけじゃなくて垂直方向の間隔も揃ってないといけないんだけど、その辺までちゃんとやろうとするとすごく大変。
Preserving vertical rhythm with CSS and jQuery

レイアウトに関しては今回のMulti-ColumnやFlexible Boxとか色々遊べそうなので追っていきたい。

TumblrのAPIから画像を取得して表示するサンプルをアップデート

stonewallのexampleとしてTumblrからJSONPで画像URLを取得して表示するコードをgithubにアップしたけど、実際に動いているものもアップした。投稿順ではなく高さをなるべく揃えるように低いところに足していくモード。
http://hysysk.org/work/tumblr

今回のAPI KEYは別に見られても構わないのだけど、複数人でコードを共有する場合などでは望ましいことではないので、バージョン管理下に置くファイルと、動作確認用のファイルを分けている。

こんな感じのpythonスクリプトでtemp.htmlを作ってgitignoreに追加しておくと、いちいちAPI KEYを手で置き換えなくて良いし、間違ってキーが入った状態でコミットしたりしない。通常業務でやると大変です。

import re
input = open('index.html', 'r')
output = open('temp.html', 'w')
for line in input:
    output.write(line.replace("YOUR API KEY","PURkZinJvrZVtis5m8TxmEcAbM4dcgjlfvecnWJyEAIf5BpZVe"))
input.close()
output.close()

一応UglifyJSでミニファイしてサーバに置いてあるんだけど、「API KEYを置き換える→JSをミニファイする→サーバにアップ」まで自動化したいしするべき。

あと、基本的なことだけどAPIを叩いてパースしたり表示を確認するのは、レスポンスデータを保存したデータかAPIドキュメントを元に作成したダミーのデータで試すのがよい(実はTumblrのAPIドキュメントにはフルサイズの画像を取得するoriginal_sizeというキーが抜けていたりする)。

それにしても実際に動いているものを触っていると色々と対応したいことがでてくる。ウィンドウサイズの変化に追従するとか、オートページングとか。クリックでオリジナル画像が表示されるとか。

ちなみに以前の画像が1枚しか読まれない問題は読み込み時のコードに不具合があったからでした。この話題についてはまた別の投稿で掘り下げたい。

stonewall開発日記9

レイアウト方法を順番通りに並べるタイプと、高さが一番低いカラムに置くタイプの2種類にした。多少モデルとビューを意識してプロパティとして持った方がよいところは持たせるようにした。

exampleをオンラインで見せられるようにしたい。

そろそろ当初欲しかった機能は入ったのでクロスブラウザで確認してリリースタグを切りたい。