Masonry試してみた
とある事情でPinterest的UI作ってみたいなーと思ってて、Masonryを試してみた。
環境構築
とりあえず、試すための環境構築をしてみる。久しぶりに、yeomanを使う。
yeoman
久しぶりでversionが古い気がしたので、npm updateしてnpmのモジュールを一気にupdateした。この時点で、yo, bower, gruntのversionはそれぞれ
$ yo -v 1.2.0 $ bower -v 1.3.12 $ grunt -V grunt-cli v0.1.13 grunt v0.4.5
みたいな感じになった。
yoで雛形を作る。
まず、webappという名前のgeneratorをinstallする。
npm install generator-webapp
これで、yo webappでwebapp generatorを使ってwebアプリケーションの雛形を作ることが出来る。どうでも良いかもだけど、npmコマンドでyo用のgeneratorをインストールするって忘れててちょっと戸惑ってしまった。
次に、yoでgeneratorを走らす。
$ yo webapp
_-----_
| | .--------------------------.
|--(o)--| | Welcome to Yeoman, |
`---------´ | ladies and gentlemen! |
( _´U`_ ) '--------------------------'
/___A___\
| ~ |
__'.___.'__
´ ` |° ´ Y `
Out of the box I include HTML5 Boilerplate, jQuery, and a Gruntfile.js to build your app.
[?] What more would you like? Bootstrap, Sass, Modernizr
[?] Would you like to use libsass? Read up more at
https://github.com/andrew/node-sass#node-sass: Yes
create Gruntfile.js
create package.json
create .gitignore
create .gitattributes
create .bowerrc
create bower.json
create .jshintrc
create .editorconfig
create app/styles/main.scss
create app/favicon.ico
create app/robots.txt
create app/index.html
create app/scripts/main.js
invoke mocha
.
.
.
この時、最初に
[?] What more would you like? (Press <space> to select) ❯⬢ Bootstrap ⬡ Sass ⬡ Modernizr
みたいな画面が出て、Bootstrap, Sass, Modernizrをそれぞれ使うかどうかを選べた。j, kで上下移動でspaceで切り替えが出来て、今回は3つともチェックをつけて実行した。
処理が終わるといろいろファイルが作られてた。
$ ls
Gruntfile.js app bower.json node_modules package.json test
ただ、bower.jsonに記載されてる類のjsファイルはまだインストールされてなかったので、bower installしてやる必要があった。
$ bower install bower modernizr#~2.8.2 cached git://github.com/Modernizr/Modernizr.git#2.8.3 bower modernizr#~2.8.2 validate 2.8.3 against git://github.com/Modernizr/Modernizr.git#~2.8.2 bower bootstrap-sass-official#~3.2.0 cached git://github.com/twbs/bootstrap-sass.git#3.2.0+2 bower bootstrap-sass-official#~3.2.0 validate 3.2.0+2 against git://github.com/twbs/bootstrap-sass.git#~3.2.0 bower jquery#>= 1.9.0 cached git://github.com/jquery/jquery.git#2.1.3 bower jquery#>= 1.9.0 validate 2.1.3 against git://github.com/jquery/jquery.git#>= 1.9.0 bower bootstrap-sass-official#~3.2.0 install bootstrap-sass-official#3.2.0+2 bower modernizr#~2.8.2 install modernizr#2.8.3 bower jquery#>= 1.9.0 install jquery#2.1.3 bootstrap-sass-official#3.2.0+2 bower_components/bootstrap-sass-official └── jquery#2.1.3 modernizr#2.8.3 bower_components/modernizr jquery#2.1.3 bower_components/jquery
これで、bower_componentsというディレクトリが生成され、そこにbootstrap, jquery, modernizrなどのライブラリがインストールされた。
$ cat bower.json
{
"name": "masonry-practice",
"private": true,
"dependencies": {
"bootstrap-sass-official": "~3.2.0",
"modernizr": "~2.8.2"
}
}%
$ ls bower_components
bootstrap-sass-official jquery modernizr
良い感じ
一度雛形のWebAppを動かしてみる
とりあえず、今generatorで作ったアプリケーションを動かしてみる。grunt serveコマンドを叩くとlocalhost:9000をlistenするサーバーが起動され、さらに勝手にブラウザの画面がたちあがる。
$ grunt serve // 注: grunt serverではない。serverコマンドは非推奨らしい。
// サーバーが立ち上がり、ブラウザにhttp://localhost:9000/が表示される。
ここまではうまくいった。
masonryを試す
次に、masonryを試してみる。bowerでmasonryをインストールする。
bower install masonry --save
割といろいろ依存してるみたいで、けっこうbower_componentsの中身が増えた。
$ ls bower_components bootstrap-sass-official eventEmitter get-size jquery matches-selector outlayer doc-ready eventie get-style-property masonry modernizr
あと、app/index.htmlにも勝手にscriptタグが追加されてた。
// app/index.htmlのscript読み込み部分
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
~ いろいろ ~
<script src="bower_components/get-style-property/get-style-property.js"></script>
<script src="bower_components/get-size/get-size.js"></script>
<script src="bower_components/eventie/eventie.js"></script>
<script src="bower_components/doc-ready/doc-ready.js"></script>
<script src="bower_components/eventEmitter/EventEmitter.js"></script>
<script src="bower_components/matches-selector/matches-selector.js"></script>
<script src="bower_components/outlayer/item.js"></script>
<script src="bower_components/outlayer/outlayer.js"></script>
<script src="bower_components/masonry/masonry.js"></script>
<!-- endbower -->
<!-- endbuild -->
ちょこちょこ修正
もともとあったdiv要素とか消してmasonryのGetting started見ながらdiv作ったり簡単なjsを書いたりした。
これがjs。ほぼドキュメントのまんま。
1 var container = document.querySelector('#container'); 2 3 imagesLoaded( container, function() { 4 var msnry = new Masonry( container, { 5 columnWidth: 340, 6 itemSelector: '.item' 7 }); 8 });
これがhtmlに追記した部分。
36 <div id="container"> 37 <div class="item"> 38 <img src="http://corp.toei-anim.co.jp/press/watori01.jpg" width="320px"> 39 <p>ワールドトリガー</p> 40 </div> 41 <div class="item"> 42 <img src="http://worldtrigger.info/images/cover.png" width="320px"> 43 <p>ワールドトリガー</p> 44 </div> 45 <div class="item"> 46 <img src="http://www.tv-asahi.co.jp/worldtrigger/intro/img/wt.jpg" width="320px"> 47 <p>ワールドトリガー</p> 48 </div> 49 <div class="item"> 50 <img src="http://livedoor.blogimg.jp/zakuzaku911/imgs/f/3/f39495e6.jpg" width="320px"> 51 <p>ワールドトリガー</p> 52 </div> 53 </div>
これがcss。丸みつけたり線引いたりした。
94 .item { 95 margin: 5px; 96 border: 1px solid #ccc; 97 box-shadow: 0 2px 1px #eee; 98 -webkit-border-radius: 4px; 99 }
で、出来たのがこんな感じ。
うん、なんか良さげな気がする!!!!
ここから発展させるとすると、XMLHTTPRequestで追加で画像取得してどんどん下に伸びていけばさらにそれっぽくなると思う。
まとめ
サクッとそれっぽいviewが作れて楽しかった。Masonry既にめちゃめちゃ有名だけどやっぱり良さげだった。
