読者です 読者をやめる 読者になる 読者になる

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 }

で、出来たのがこんな感じ。

f:id:south37:20141221021112p:plain

うん、なんか良さげな気がする!!!!

ここから発展させるとすると、XMLHTTPRequestで追加で画像取得してどんどん下に伸びていけばさらにそれっぽくなると思う。

まとめ

サクッとそれっぽいviewが作れて楽しかった。Masonry既にめちゃめちゃ有名だけどやっぱり良さげだった。

あと、ワールドトリガー週刊少年ジャンプで好評連載中でめちゃめちゃ面白いので読むと良いと思う。