Submit Search
Upload
Foundation for Appsでザクザク作るモックアップ
•
13 likes
•
2,487 views
Keisuke Imura
Follow
2015/1/6のファンタラクティブ・オープンミーティングで使用したスライドです。
Read less
Read more
Engineering
Report
Share
Report
Share
1 of 23
Download now
Download to read offline
Recommended
Spring Bootキャンプ @関ジャバ #kanjava_sbc
Spring Bootキャンプ @関ジャバ #kanjava_sbc
Toshiaki Maki
AngularJSで業務システムUI部品化
AngularJSで業務システムUI部品化
Toshio Ehara
Spring Boot + Doma + AngularJSで作るERP 〜JavaQneバージョン〜 #jqfk
Spring Boot + Doma + AngularJSで作るERP 〜JavaQneバージョン〜 #jqfk
学 松崎
UE4エンジンソースをMacでビルドしてみた
UE4エンジンソースをMacでビルドしてみた
Yuuki Ogino
laravel x モバイルアプリ
laravel x モバイルアプリ
Masaki Oshikawa
Google apps scriptを使って業務改善
Google apps scriptを使って業務改善
dcubeio
Mobile backend starterを使ってスマホアプリのバックエンドを構築する
Mobile backend starterを使ってスマホアプリのバックエンドを構築する
Ryosuke Takahashi
Grails 3.0先取り!? Spring Boot入門ハンズオン #jggug_boot
Grails 3.0先取り!? Spring Boot入門ハンズオン #jggug_boot
Toshiaki Maki
Recommended
Spring Bootキャンプ @関ジャバ #kanjava_sbc
Spring Bootキャンプ @関ジャバ #kanjava_sbc
Toshiaki Maki
AngularJSで業務システムUI部品化
AngularJSで業務システムUI部品化
Toshio Ehara
Spring Boot + Doma + AngularJSで作るERP 〜JavaQneバージョン〜 #jqfk
Spring Boot + Doma + AngularJSで作るERP 〜JavaQneバージョン〜 #jqfk
学 松崎
UE4エンジンソースをMacでビルドしてみた
UE4エンジンソースをMacでビルドしてみた
Yuuki Ogino
laravel x モバイルアプリ
laravel x モバイルアプリ
Masaki Oshikawa
Google apps scriptを使って業務改善
Google apps scriptを使って業務改善
dcubeio
Mobile backend starterを使ってスマホアプリのバックエンドを構築する
Mobile backend starterを使ってスマホアプリのバックエンドを構築する
Ryosuke Takahashi
Grails 3.0先取り!? Spring Boot入門ハンズオン #jggug_boot
Grails 3.0先取り!? Spring Boot入門ハンズオン #jggug_boot
Toshiaki Maki
Spring Boot + Doma + AngularJSで作るERP #jjug_ccc #ccc_r12
Spring Boot + Doma + AngularJSで作るERP #jjug_ccc #ccc_r12
学 松崎
新卒入社のみなさまへ30代が贈る20代のキャリア戦略入門
新卒入社のみなさまへ30代が贈る20代のキャリア戦略入門
PIXTA Inc.
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
tomonari takahashi
スマートスピーカーのバックエンドでAzure を使う方法
スマートスピーカーのバックエンドでAzure を使う方法
一希 大田
AngularJS入門の巻
AngularJS入門の巻
Toshio Ehara
One-time Binding & $digest
One-time Binding & $digest
Hayashi Yuichi
今後のWeb開発の未来を考えてangularJSにしました
今後のWeb開発の未来を考えてangularJSにしました
Mitsuru Ogawa
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
Mitsuru Ogawa
smartFXにおけるApache Cordovaの活用について
smartFXにおけるApache Cordovaの活用について
剛志 森田
chefからitamaeに乗り換えた話
chefからitamaeに乗り換えた話
Yoshiki Kobayashi
エンタープライヤーのためのWeb Componentsハンズオン
エンタープライヤーのためのWeb Componentsハンズオン
Mitsuru Ogawa
Ignite 2021 振り返り(DevOps)
Ignite 2021 振り返り(DevOps)
Kazushi Kamegawa
React meetup 3_eight
React meetup 3_eight
Hideharu Okuma
Java + React.jsでSever Side Rendering #reactjs_meetup
Java + React.jsでSever Side Rendering #reactjs_meetup
Toshiaki Maki
Selenium2(web driver) ide編
Selenium2(web driver) ide編
Tetsuya Hasegawa
Azure Web Apps とAzure Mobile Apps
Azure Web Apps とAzure Mobile Apps
Masaki Yamamoto
AngularJS入門の巻2
AngularJS入門の巻2
Toshio Ehara
デブサミ2015「実践!クロスプラットフォーム モバイルアプリ開発」
デブサミ2015「実践!クロスプラットフォーム モバイルアプリ開発」
アシアル株式会社
はじめてのDreamforce はじめてのLightning
はじめてのDreamforce はじめてのLightning
Taiki Yoshikawa
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
Shumpei Shiraishi
Crm flamework
Crm flamework
Engagement First inc.
FoundationのSassを使いはじめた人と使いたいと考えている人へ
FoundationのSassを使いはじめた人と使いたいと考えている人へ
Seiichiro Mishiba
More Related Content
What's hot
Spring Boot + Doma + AngularJSで作るERP #jjug_ccc #ccc_r12
Spring Boot + Doma + AngularJSで作るERP #jjug_ccc #ccc_r12
学 松崎
新卒入社のみなさまへ30代が贈る20代のキャリア戦略入門
新卒入社のみなさまへ30代が贈る20代のキャリア戦略入門
PIXTA Inc.
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
tomonari takahashi
スマートスピーカーのバックエンドでAzure を使う方法
スマートスピーカーのバックエンドでAzure を使う方法
一希 大田
AngularJS入門の巻
AngularJS入門の巻
Toshio Ehara
One-time Binding & $digest
One-time Binding & $digest
Hayashi Yuichi
今後のWeb開発の未来を考えてangularJSにしました
今後のWeb開発の未来を考えてangularJSにしました
Mitsuru Ogawa
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
Mitsuru Ogawa
smartFXにおけるApache Cordovaの活用について
smartFXにおけるApache Cordovaの活用について
剛志 森田
chefからitamaeに乗り換えた話
chefからitamaeに乗り換えた話
Yoshiki Kobayashi
エンタープライヤーのためのWeb Componentsハンズオン
エンタープライヤーのためのWeb Componentsハンズオン
Mitsuru Ogawa
Ignite 2021 振り返り(DevOps)
Ignite 2021 振り返り(DevOps)
Kazushi Kamegawa
React meetup 3_eight
React meetup 3_eight
Hideharu Okuma
Java + React.jsでSever Side Rendering #reactjs_meetup
Java + React.jsでSever Side Rendering #reactjs_meetup
Toshiaki Maki
Selenium2(web driver) ide編
Selenium2(web driver) ide編
Tetsuya Hasegawa
Azure Web Apps とAzure Mobile Apps
Azure Web Apps とAzure Mobile Apps
Masaki Yamamoto
AngularJS入門の巻2
AngularJS入門の巻2
Toshio Ehara
デブサミ2015「実践!クロスプラットフォーム モバイルアプリ開発」
デブサミ2015「実践!クロスプラットフォーム モバイルアプリ開発」
アシアル株式会社
はじめてのDreamforce はじめてのLightning
はじめてのDreamforce はじめてのLightning
Taiki Yoshikawa
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
Shumpei Shiraishi
What's hot
(20)
Spring Boot + Doma + AngularJSで作るERP #jjug_ccc #ccc_r12
Spring Boot + Doma + AngularJSで作るERP #jjug_ccc #ccc_r12
新卒入社のみなさまへ30代が贈る20代のキャリア戦略入門
新卒入社のみなさまへ30代が贈る20代のキャリア戦略入門
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
スマートスピーカーのバックエンドでAzure を使う方法
スマートスピーカーのバックエンドでAzure を使う方法
AngularJS入門の巻
AngularJS入門の巻
One-time Binding & $digest
One-time Binding & $digest
今後のWeb開発の未来を考えてangularJSにしました
今後のWeb開発の未来を考えてangularJSにしました
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
smartFXにおけるApache Cordovaの活用について
smartFXにおけるApache Cordovaの活用について
chefからitamaeに乗り換えた話
chefからitamaeに乗り換えた話
エンタープライヤーのためのWeb Componentsハンズオン
エンタープライヤーのためのWeb Componentsハンズオン
Ignite 2021 振り返り(DevOps)
Ignite 2021 振り返り(DevOps)
React meetup 3_eight
React meetup 3_eight
Java + React.jsでSever Side Rendering #reactjs_meetup
Java + React.jsでSever Side Rendering #reactjs_meetup
Selenium2(web driver) ide編
Selenium2(web driver) ide編
Azure Web Apps とAzure Mobile Apps
Azure Web Apps とAzure Mobile Apps
AngularJS入門の巻2
AngularJS入門の巻2
デブサミ2015「実践!クロスプラットフォーム モバイルアプリ開発」
デブサミ2015「実践!クロスプラットフォーム モバイルアプリ開発」
はじめてのDreamforce はじめてのLightning
はじめてのDreamforce はじめてのLightning
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
Viewers also liked
Crm flamework
Crm flamework
Engagement First inc.
FoundationのSassを使いはじめた人と使いたいと考えている人へ
FoundationのSassを使いはじめた人と使いたいと考えている人へ
Seiichiro Mishiba
イチから学ぶ パッケージマネージャーとLAMP環境
イチから学ぶ パッケージマネージャーとLAMP環境
Keisuke Imura
Sass + Foundation 5でレスポンシブペライチ制作
Sass + Foundation 5でレスポンシブペライチ制作
Keisuke Imura
Twenty Fourteen徹底解剖! ~デフォルトテーマに学ぶ今ドキテーマの作り方~
Twenty Fourteen徹底解剖! ~デフォルトテーマに学ぶ今ドキテーマの作り方~
Keisuke Imura
High Performance Gulp
High Performance Gulp
Keisuke Imura
Getting started with CSS frameworks using Zurb foundation
Getting started with CSS frameworks using Zurb foundation
Melanie Archer
デザイナーとエンジニアのコミュニケーションについて考えてみた
デザイナーとエンジニアのコミュニケーションについて考えてみた
Reimi Kuramochi Chiba
60点をとれるWebデザイン
60点をとれるWebデザイン
Keisuke Imura
テクニカルクリエイターの憂鬱
テクニカルクリエイターの憂鬱
Keisuke Imura
フリー3ヶ月目で思う、2年後稼げるWebデザイナー像
フリー3ヶ月目で思う、2年後稼げるWebデザイナー像
Keisuke Imura
Angular+Dart=より快適なSPA開発
Angular+Dart=より快適なSPA開発
Satoshi KOBAYASHI
イマドキWebメディアの制作手法
イマドキWebメディアの制作手法
Keisuke Imura
Angular2実践入門
Angular2実践入門
Shumpei Shiraishi
Angular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェスト
Masahiko Asai
The Most Famous Irishman Who Never Was
The Most Famous Irishman Who Never Was
Franklin Matters
Viewers also liked
(16)
Crm flamework
Crm flamework
FoundationのSassを使いはじめた人と使いたいと考えている人へ
FoundationのSassを使いはじめた人と使いたいと考えている人へ
イチから学ぶ パッケージマネージャーとLAMP環境
イチから学ぶ パッケージマネージャーとLAMP環境
Sass + Foundation 5でレスポンシブペライチ制作
Sass + Foundation 5でレスポンシブペライチ制作
Twenty Fourteen徹底解剖! ~デフォルトテーマに学ぶ今ドキテーマの作り方~
Twenty Fourteen徹底解剖! ~デフォルトテーマに学ぶ今ドキテーマの作り方~
High Performance Gulp
High Performance Gulp
Getting started with CSS frameworks using Zurb foundation
Getting started with CSS frameworks using Zurb foundation
デザイナーとエンジニアのコミュニケーションについて考えてみた
デザイナーとエンジニアのコミュニケーションについて考えてみた
60点をとれるWebデザイン
60点をとれるWebデザイン
テクニカルクリエイターの憂鬱
テクニカルクリエイターの憂鬱
フリー3ヶ月目で思う、2年後稼げるWebデザイナー像
フリー3ヶ月目で思う、2年後稼げるWebデザイナー像
Angular+Dart=より快適なSPA開発
Angular+Dart=より快適なSPA開発
イマドキWebメディアの制作手法
イマドキWebメディアの制作手法
Angular2実践入門
Angular2実践入門
Angular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェスト
The Most Famous Irishman Who Never Was
The Most Famous Irishman Who Never Was
Similar to Foundation for Appsでザクザク作るモックアップ
Mojoliciousでつくる! Webアプリ入門
Mojoliciousでつくる! Webアプリ入門
Yusuke Wada
今流行りのウェブアプリ開発環境Yeoman
今流行りのウェブアプリ開発環境Yeoman
tomo_masakura
Rubykaigi2010
Rubykaigi2010
masaki yamada
TestFlight自動化でらくらくチームテスト
TestFlight自動化でらくらくチームテスト
Yoichiro Sakurai
Pre react native0504
Pre react native0504
卓馬 三浦
PhoneGapの始め方
PhoneGapの始め方
akabana
これからのOpenShiftの話をしよう
これからのOpenShiftの話をしよう
Kazuto Kusama
2015年GMOペパボ新卒エンジニア研修 Webオペレーション研修イントロダクション
2015年GMOペパボ新卒エンジニア研修 Webオペレーション研修イントロダクション
Takahiro Okumura
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
Tsutomu Ogasawara
App inventorで想いを形に
App inventorで想いを形に
Takeaki Tada
Cordovaコトハジメ( Html5fun×senchUG )
Cordovaコトハジメ( Html5fun×senchUG )
Masayuki Abe
KANAZAWA アプリ開発塾 2015 アプリ制作マスターへの道
KANAZAWA アプリ開発塾 2015 アプリ制作マスターへの道
Masayuki KaToH
Single Command Deployのための gradle-aws-plugin講座
Single Command Deployのための gradle-aws-plugin講座
都元ダイスケ Miyamoto
Visual Studio App Centerを公式サンプルアプリから学ぼうiOS(swift),Android(java)
Visual Studio App Centerを公式サンプルアプリから学ぼうiOS(swift),Android(java)
Shinya Nakajima
Introduction to Visual Studio App Center
Introduction to Visual Studio App Center
Takeshi Fujimoto
WordPressサイトをスマホアプリにしちゃおう!
WordPressサイトをスマホアプリにしちゃおう!
Ryu Shindo
20131227_appium+rspec
20131227_appium+rspec
Kazuaki Matsuo
Appsody でnodejsのアプリを立ち上げよう!
Appsody でnodejsのアプリを立ち上げよう!
Daisuke Hiraoka
iアプリつくろうぜ!~20101020 DevLOVE Android勉強会~
iアプリつくろうぜ!~20101020 DevLOVE Android勉強会~
一法 山崎
PhoneGap勉強会 - 実践編 -
PhoneGap勉強会 - 実践編 -
Katsumi Onishi
Similar to Foundation for Appsでザクザク作るモックアップ
(20)
Mojoliciousでつくる! Webアプリ入門
Mojoliciousでつくる! Webアプリ入門
今流行りのウェブアプリ開発環境Yeoman
今流行りのウェブアプリ開発環境Yeoman
Rubykaigi2010
Rubykaigi2010
TestFlight自動化でらくらくチームテスト
TestFlight自動化でらくらくチームテスト
Pre react native0504
Pre react native0504
PhoneGapの始め方
PhoneGapの始め方
これからのOpenShiftの話をしよう
これからのOpenShiftの話をしよう
2015年GMOペパボ新卒エンジニア研修 Webオペレーション研修イントロダクション
2015年GMOペパボ新卒エンジニア研修 Webオペレーション研修イントロダクション
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
App inventorで想いを形に
App inventorで想いを形に
Cordovaコトハジメ( Html5fun×senchUG )
Cordovaコトハジメ( Html5fun×senchUG )
KANAZAWA アプリ開発塾 2015 アプリ制作マスターへの道
KANAZAWA アプリ開発塾 2015 アプリ制作マスターへの道
Single Command Deployのための gradle-aws-plugin講座
Single Command Deployのための gradle-aws-plugin講座
Visual Studio App Centerを公式サンプルアプリから学ぼうiOS(swift),Android(java)
Visual Studio App Centerを公式サンプルアプリから学ぼうiOS(swift),Android(java)
Introduction to Visual Studio App Center
Introduction to Visual Studio App Center
WordPressサイトをスマホアプリにしちゃおう!
WordPressサイトをスマホアプリにしちゃおう!
20131227_appium+rspec
20131227_appium+rspec
Appsody でnodejsのアプリを立ち上げよう!
Appsody でnodejsのアプリを立ち上げよう!
iアプリつくろうぜ!~20101020 DevLOVE Android勉強会~
iアプリつくろうぜ!~20101020 DevLOVE Android勉強会~
PhoneGap勉強会 - 実践編 -
PhoneGap勉強会 - 実践編 -
Foundation for Appsでザクザク作るモックアップ
1.
2.
https://funteractive.co.jp/
3.
自己紹介 井村 圭介 K E
I S U K E I M U R A ファンタラクティブ株式会社CEO WordPressが大好きです。 Python勉強中。 @imura_design
4.
Foundationと何が違うの?
5.
(ステートレスな) Webアプリケーションを 作るためのフレームワーク What is Foundation
for Apps?
6.
こんなの作れます http://foundation.zurb.com/apps/resources.html
7.
AngularJSをベースに魔改造
8.
http://foundation.zurb.com/apps/docs/#!/compatibility ! IE9以下 & Android2系は対象外 !
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
13.
http://localhost:8080 にアクセス
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
16.
Foundation for Appsならではの処理
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/ で定義された コンポーネントが使えます。
20.
詳しくはREADMEに書いてあります。 https://github.com/zurb/foundation-apps/blob/ master/js/angular/README.md
21.
総括
22.
GOOD • 全部入りなのでステートレスでレスポンシブなアプリケーショ ンのモックアップが爆速で作れる。 • メールやチャットなど、Resourcesで紹介されているアプ リケーションに近いものであれば特に相性最高。 •
モックアップだけではなく、プロダクションまで使えるクオ リティ。 • Foundationのいいところ(グリッド、メディアクエリ、タ イポグラフィ)はしっかり維持。
23.
BAD • Angularと密接すぎる。他のJSフレームワークではかなり 使いづらい。 • 基本パーツのデザインがTwitter
Bootstrapと比べるとい まいち… • ニッチなところをターゲットにしていて、見極めを間違える とプロジェクトに合わなそう。 • 用意されたパーツがまだ少ない。ただモジュール化を前提と した設計になっているので拡張性は高い。
Download now