stonewall開発日記9

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

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

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

stonewall開発日記8 振り返り

すごく緩くではあったけど、今回は業務でやっているようなアジャイルっぽい感じで開発をしてみた。ここ数日はデイリースクラムっぽい形で

• やったこと
• これからやること
• 問題点

を挙げつつ進めてみたつもり。

今日は1週間に1度行っている「振り返り」を行ってみる。KPTと呼ばれるやつで、プロダクトの機能や開発スタイル(生活習慣含む)などのKeep = 良かったので続けていきたいこと、Problem = 改善したい問題点、Try = 挑戦したいことを挙げる。僕が所属しているチームではこれにZakkan = 雑感が加わって、新しく誰かが加わったとか、ゲームが面白いだとか、便利なツールとかについて話してる。

Keep

• このスタイルの開発。週末にまとめるよりリズムが出て良い。
• テストを書く。

Problem

• もっと簡単に使いたい。DOMの構築は良いとして、要素の高さの取得はこちら側で吸収したい。
• テストが重くなってきている。テストを面倒に感じると書いたり実行したりしなくなるのでよくない。

Try

• テスト自動化したい。jsTestDriverやSeleniumなども試してみたい。
• 現状だと単純にエントリ順に並べているだけ。順番が変わってもよいので高さが揃うように並べるとか、ちゃんとグリッドになってるとか、より見やすくて美しいレイアウトを目指す。
• うまく結合できるAutoPager系のスクリプトなども作りたい。

雑感的なことをまとめると、zshのconfigurationをoh-my-zshにした。テーマが可愛いのと、gitでどのブランチにいるかが表示されるので便利。あとSublime Text 2をようやくちゃんと使い出した。vimも頑張って使っているけど、こういうのも触っておきたい。あんまりHaskell勉強できなかった。最近浅草に引っ越したんだけど、今週末は祭りで忙しい。

stonewall開発日記7 Tumblr APIからJSONPを取得して画像を並べるサンプル

一通りできたので動作確認用にサンプルを作った。こういうグリッドで並べるようなレイアウトはtumblrやってる人ならだいたい好きだと思うからtumblrのAPIを使ってみた。動作確認していく上で細かなバグも見つかり、足りていないテストを追加したりした。JSONPのコールバック関数実行を待ってからレイアウト処理を実行しているからというのもあるけど、実際に使うと割とまだ面倒な感じで、今後どう改善するかを検討したい。

以下はTumblr APIをクライアント側のJavaScriptから利用する方法

Tumblrにアプリケーションを登録してOAuthキーを取得

ここでアプリケーションを登録。Application nameとApplication descriptionは何でもよい(後で変更もできます)。今回はローカルで試すのと、投稿を取得するだけなのでOAuthのConsumer Keyのみを使うのでApplication websiteもDefault callback URLも空でよいです。

TumblrのAPIからJSONPを取得

XMLHttpRequestを使いたいところだけど、異なるドメイン間での通信ができないので、JSONPを使う。JSONPを取得するには、

http://api.tumblr.com/v2/blog/{Tumblrアドレス}/posts[/投稿タイプ]?api_key={OAuth Comsumer Key}&jsonp=[コールバック関数名]

として、動的にスクリプトタグを生成してリクエストを飛ばす。今回は画像のみなので投稿タイプはphotoにする。

JSONPをパースして表示

コールバック関数の仮引数にJSONが入っているので、画像のURLを取り出しImageオブジェクトを生成してDOMに追加。要素の高さを取得するため全てがロードされるのを待ってbuildメソッドを実行している。読み込み部分が悪いのかも知れないけど、たまに全件表示されないのと、表示までに意識しなければならないことが多過ぎるのが課題。

通常のTumblrに組み込む方法はまた別の投稿で書こうと思う。

stonewall開発日記6

縦方向の並びもテスト書いて通した。element.style.heightで要素の高さを取得しようとしていたのが間違いで、element.offsetHeightが欲しかったのだった。

コミットログ

ひとまずこれでNNNNYのサイトでやっているような並べ方の基本の部分はできた。exampleで実際に動きを確かめてみたいのだけど、いい方法を考えている。

stonewall開発日記5

コンストラクタ関数を使ってStonewallオブジェクトとして利用できるように変更。設定をbuildに渡してるけどこれもコンストラクタの引数に移動するつもり。

#qunit-fixtureのスタイルはposition:absoluteでマイナス位置を指定している(display:noneにしていない)ので、子要素の幅や高さは指定できるはずなんだけど、どうも高さがうまく設定できない。試しに#qunit-fixtureのtopとleftを0にしてみたりして見た目を確認してみたのだけど、幅も変わっていない。しかしテストは通っているので、テストの正当性も含めて調査することにします。何となくCSSが怪しい気はしている。

ダミーのデータを作るのにFilleratiとPlacehold.itを使った。

Viewのテストは難しい。

コミットログ

stonewall開発日記4

buildという関数にレイアウト用のオブジェクトを渡すようにした。DOM操作が必要となるので、テストにダミーのHTMLが必要になるのだけど、QUnitではテストを実行するHTMLに#qunit-fixtureというdivが用意されているので、そこに書く。

地味に関数名を変えたりしたのだけど、そういう時もテストがあると修正漏れとか見つけやすくてよい。

Learning Haskell

関数型言語を何か覚えようと思いつつ全然手をつけられていなかったけど、ドキュメントが充実してきた感じがするのと、コンセプト的に新しいものがありそうなのでHaskellを勉強しようと思う。

何となくの先入観で、環境整えるのがめんどくさそうとか、Webアプリケーションとか作りにくそうと思っていたけど、インストールはThe Haskell Platformを使えば簡単だし、Webアプリケーションを作る場合はYesodのようなフレームワークもあり、それの導入もcabalというパッケージシステム(gemとかnpmみたいな)があるので簡単だった。

ターミナルでghciと入力すれば対話的に実行することもでき、想像よりかなり手軽だった。無料で読めるドキュメントも割とあるので、これらを読み進めながら何か作ろうと思う。

• Learn You a Haskell for Great Good!
• Real World Haskell
• Developing Web Applications with Haskell and Yesod

stonewall開発日記3

もたもたしているうちにVanilla MesonryというjQuery非依存のライブラリが出来てしまっていた。僕のは最終的なイメージがまだ固まっていないのだけど同じようなものにはしないつもり。

単純に要素がブロックになっていればよいという訳ではなく、行間や文字サイズが違っていてもベースラインを揃えたいだとか、そもそもグリッドは内容に合わせて引くものなので、テーマのように先にレイアウトがあってそこにコンテンツが流し込まれるのではなく、コンテンツに応じてレイアウトの方が決まっていくようなものにできればと思う。できるのかどうかはわからないけど。

グリッドレイアウトしたい要素の幅とコラムの幅からその隙間のマージンを計算する関数を追加。ここが割り切れない値になる可能性もあるのだけど、ひとまずは切り捨てる方向で考える。

コミットログはこちら

Responsiveな流れからすると単位を%にするのが良いのかもしれない。

Rolling Your Own Grid Layouts on the Fly Without a Framework | Design Shack