Foundation for Appsでザクザク作るモックアップ
13 likes2,491 views
2015/1/6のファンタラクティブ・オープンミーティングで使用したスライドです。
Foundation for Appsでザクザク作るモックアップ
- 3. 自己紹介 井村 圭介 K E I S U K E I M U R A ファンタラクティブ株式会社CEO WordPressが大好きです。 Python勉強中。 @imura_design
- 9. 使い方 & 初期設定
- 10. 必要なツールの準備 $ npm install -‐g foundation-‐cli bower gulp $ gem install bundler bundlerが入ってなければインストール foundation CLI, bower, gulpをインストール
- 11. コマンド一発で新規アプリの作成 $ foundation-‐apps new myApp myAppの部分はお好みで。
- 12. watchを開始してコードを書く $ cd myApp $ npm start コードを書く前に必ず行うコマンド（どちらでも同じ動作） できたフォルダの中に移動 $ foundation-‐apps watch
- 14. 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を監視
- 15. 初期設定用のscss myApp/client/assets/scss/_settings.scss • メディアクエリのブレークポイント • 読み込むCSSモジュール • font-size, font-family • グリッドの幅やpadding
- 17. 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
- 18. animationIn, animationOutを使ってアニメーション —-‐ name: about url: /about/ animationIn: slideInLeft —-‐ myApp/client/templates/*.html Motion UI で用意されているアニメーションが使えます。 ※ちなみに全てCSS Animation http://foundation.zurb.com/apps/docs/#!/motion-ui
- 19. <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/ で定義された コンポーネントが使えます。
- 21. 総括
- 22. GOOD • 全部入りなのでステートレスでレスポンシブなアプリケーショ ンのモックアップが爆速で作れる。 • メールやチャットなど、Resourcesで紹介されているアプ リケーションに近いものであれば特に相性最高。 • モックアップだけではなく、プロダクションまで使えるクオ リティ。 • Foundationのいいところ（グリッド、メディアクエリ、タ イポグラフィ）はしっかり維持。
- 23. BAD • Angularと密接すぎる。他のJSフレームワークではかなり 使いづらい。 • 基本パーツのデザインがTwitter Bootstrapと比べるとい まいち… • ニッチなところをターゲットにしていて、見極めを間違える とプロジェクトに合わなそう。 • 用意されたパーツがまだ少ない。ただモジュール化を前提と した設計になっているので拡張性は高い。