foundation for appsでザクザク作るモックアップ
TRANSCRIPT
自己紹介
井村 圭介K E I S U K E I M U R A
ファンタラクティブ株式会社CEOWordPressが大好きです。Python勉強中。@imura_design
Foundationと何が違うの？
（ステートレスな） Webアプリケーションを 作るためのフレームワーク
What is Foundation for Apps?
こんなの作れますhttp://foundation.zurb.com/apps/resources.html
AngularJSをベースに魔改造
http://foundation.zurb.com/apps/docs/#!/compatibility
！ IE9以下 & Android2系は対象外 ！
使い方 & 初期設定
必要なツールの準備
$ npm install -‐g foundation-‐cli bower gulp
$ gem install bundler
bundlerが入ってなければインストール
foundation CLI, bower, gulpをインストール
コマンド一発で新規アプリの作成
$ foundation-‐apps new myApp
myAppの部分はお好みで。
watchを開始してコードを書く
$ cd myApp
$ npm start
コードを書く前に必ず行うコマンド（どちらでも同じ動作）
できたフォルダの中に移動
$ foundation-‐apps watch
foundation-apps watchでやっていること
• gulpを動かしているだけ。
• myApp/client/ 以下の内容をコンパイル、圧縮して myApp/build/ 以下にコピー。ブラウザから見えているのは myApp/build/ のファイル。
• myApp/client/templates/*.html のconfigデータを基に myApp/build/assets/routes.js を生成
• gulp-connect でローカルサーバの立ち上げ
• myApp/client/ 以下のhtml, scss, jsを監視
初期設定用のscss
myApp/client/assets/scss/_settings.scss
• メディアクエリのブレークポイント
• 読み込むCSSモジュール
• font-size, font-family
• グリッドの幅やpadding
Foundation for Appsならではの処理
ui-routerとtemplateによるルーティング
—-‐ name: about url: /about/ —-‐
→http://localhost:8080/#!/about/ でルーティングされる
<li><a ui-‐sref=“about”>About</a></li>
リンクを貼るにはui-sref属性を使用
myApp/client/templates/*.html
animationIn, animationOutを使ってアニメーション
—-‐ name: about url: /about/ animationIn: slideInLeft —-‐
myApp/client/templates/*.html
Motion UI で用意されているアニメーションが使えます。 ※ちなみに全てCSS Animationhttp://foundation.zurb.com/apps/docs/#!/motion-ui
<zf-*></zf-*>でコンポーネントを挿入
<zf-‐modal overlay="true" id=“compose"> <a zf-‐close="compose" href="#">Cancel</a> <h1>This is Modal!</h1></zf-‐modal>
myApp/client/templates/*.html
myApps/build/components/ で定義された コンポーネントが使えます。
詳しくはREADMEに書いてあります。
https://github.com/zurb/foundation-apps/blob/master/js/angular/README.md
総括
GOOD
• 全部入りなのでステートレスでレスポンシブなアプリケーションのモックアップが爆速で作れる。
• メールやチャットなど、Resourcesで紹介されているアプリケーションに近いものであれば特に相性最高。
• モックアップだけではなく、プロダクションまで使えるクオリティ。
• Foundationのいいところ（グリッド、メディアクエリ、タイポグラフィ）はしっかり維持。
BAD
• Angularと密接すぎる。他のJSフレームワークではかなり使いづらい。
• 基本パーツのデザインがTwitter Bootstrapと比べるといまいち…
• ニッチなところをターゲットにしていて、見極めを間違えるとプロジェクトに合わなそう。
• 用意されたパーツがまだ少ない。ただモジュール化を前提とした設計になっているので拡張性は高い。