Download free for 30 days
Sign in
Upload
Language (EN)
Support
Business
Mobile
Social Media
Marketing
Technology
Art & Photos
Career
Design
Education
Presentations & Public Speaking
Government & Nonprofit
Healthcare
Internet
Law
Leadership & Management
Automotive
Engineering
Software
Recruiting & HR
Retail
Sales
Services
Science
Small Business & Entrepreneurship
Food
Environment
Economy & Finance
Data & Analytics
Investor Relations
Sports
Spiritual
News & Politics
Travel
Self Improvement
Real Estate
Entertainment & Humor
Health & Medicine
Devices & Hardware
Lifestyle
Change Language
Language
English
Español
Português
Français
Deutsche
Cancel
Save
EN
Uploaded by
Masayuki Maekawa
PDF, PPTX
2,597 views
実践 大都会式 プロトタイピング&フロントエンド 2014
オープンセミナー2014@岡山 / 2014年5月17日(土) 久保木 博・前川 昌幸 スライド見てもわけわからないかもしれませんが。が。
Internet
◦
Read more
8
Save
Share
Embed
Embed presentation
Download
Download as PDF, PPTX
1
/ 94
2
/ 94
3
/ 94
4
/ 94
5
/ 94
6
/ 94
7
/ 94
8
/ 94
9
/ 94
10
/ 94
11
/ 94
12
/ 94
13
/ 94
14
/ 94
15
/ 94
16
/ 94
17
/ 94
18
/ 94
19
/ 94
20
/ 94
21
/ 94
22
/ 94
23
/ 94
24
/ 94
25
/ 94
26
/ 94
27
/ 94
28
/ 94
29
/ 94
30
/ 94
31
/ 94
32
/ 94
33
/ 94
34
/ 94
35
/ 94
36
/ 94
37
/ 94
38
/ 94
39
/ 94
40
/ 94
41
/ 94
42
/ 94
43
/ 94
44
/ 94
45
/ 94
46
/ 94
47
/ 94
48
/ 94
49
/ 94
50
/ 94
51
/ 94
52
/ 94
53
/ 94
54
/ 94
55
/ 94
56
/ 94
57
/ 94
58
/ 94
59
/ 94
60
/ 94
61
/ 94
62
/ 94
63
/ 94
64
/ 94
65
/ 94
66
/ 94
67
/ 94
68
/ 94
69
/ 94
70
/ 94
71
/ 94
72
/ 94
73
/ 94
74
/ 94
75
/ 94
76
/ 94
77
/ 94
78
/ 94
79
/ 94
80
/ 94
81
/ 94
82
/ 94
83
/ 94
84
/ 94
85
/ 94
86
/ 94
87
/ 94
88
/ 94
89
/ 94
90
/ 94
91
/ 94
92
/ 94
93
/ 94
94
/ 94
More Related Content
PDF
Cssアニメーションとその制御
by
Muyuu Fujita
PDF
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
by
schoowebcampus
PDF
Sketch VS Photoshop Webデザイン4番勝負 - WCAN 2015 Autumn
by
Risako Imai
PDF
Dreamweaver CS6で作るレスポンシブWebデザイン
by
yoshikawa_t
PDF
レスポンシブWebデザインのサイトを作る前に
by
Yuki Nakane
PDF
WooCommerce & AWS
by
Hidetaka Okamoto
PDF
レスポンシブ・ウェブデザイン基礎
by
masaaki komori
PDF
レスポンシブWebデザインの実践ワークフロー(WDS)
by
Hiroyuki Ogawa
Cssアニメーションとその制御
by
Muyuu Fujita
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
by
schoowebcampus
Sketch VS Photoshop Webデザイン4番勝負 - WCAN 2015 Autumn
by
Risako Imai
Dreamweaver CS6で作るレスポンシブWebデザイン
by
yoshikawa_t
レスポンシブWebデザインのサイトを作る前に
by
Yuki Nakane
WooCommerce & AWS
by
Hidetaka Okamoto
レスポンシブ・ウェブデザイン基礎
by
masaaki komori
レスポンシブWebデザインの実践ワークフロー(WDS)
by
Hiroyuki Ogawa
What's hot
PDF
知っておきたい「Web制作イマドキの注目ポイント」
by
Mori Kazue
PDF
WordBench京都9月号
by
Koji Asaga
PDF
プログラミングTipsサイトlt(town bash 201710)
by
Ryosuke Miyahara
PDF
Yat-wbnara201602
by
YAT blog
PDF
一歩踏み込むWordPress
by
正樹 平野
PDF
WordCamp Tokyo2016-WooCommerceのすすめ
by
Kei Tamura
PDF
Best of MAX「ベテランほど知らずに損してる IllustratorとPhotoshopの新常識(CCライブラリ編)」
by
swwwitch inc.
PDF
RailsのRailから解放される始めの一歩
by
Masato Noguchi
PDF
メニューは管理画面で設定できるようにしよう
by
Mayuko Moriyama
PDF
作品は誰かに見てもらった方が良い!
by
Makiko M
PDF
WordPressってこんなCMS
by
Kawakami Hiroko
PDF
地方フリーランスとして ゆるいチームで生き抜いてる話
by
Tomoe Sawai
PDF
僕はどうしてもLibsassが使いたかったんだ!
by
Masato Noguchi
PDF
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
by
文樹 高橋
PDF
request-specを利用していい感じにモックデータを作ってフロントエンド開発を楽にしたい!
by
Masato Noguchi
PDF
Director's Night 20130921
by
Yasufumi Nishiyama
PDF
Exbition slide
by
koukiurao
PPTX
NPOセミナー資料
by
亮 門屋
PDF
熊本地震支援Webサイトの実例紹介と支援のためのホームページを作りたい人に絶対知っていてほしいこと
by
Cherry Pie Web
PDF
20160124_GPL勉強会
by
rie05
知っておきたい「Web制作イマドキの注目ポイント」
by
Mori Kazue
WordBench京都9月号
by
Koji Asaga
プログラミングTipsサイトlt(town bash 201710)
by
Ryosuke Miyahara
Yat-wbnara201602
by
YAT blog
一歩踏み込むWordPress
by
正樹 平野
WordCamp Tokyo2016-WooCommerceのすすめ
by
Kei Tamura
Best of MAX「ベテランほど知らずに損してる IllustratorとPhotoshopの新常識(CCライブラリ編)」
by
swwwitch inc.
RailsのRailから解放される始めの一歩
by
Masato Noguchi
メニューは管理画面で設定できるようにしよう
by
Mayuko Moriyama
作品は誰かに見てもらった方が良い!
by
Makiko M
WordPressってこんなCMS
by
Kawakami Hiroko
地方フリーランスとして ゆるいチームで生き抜いてる話
by
Tomoe Sawai
僕はどうしてもLibsassが使いたかったんだ!
by
Masato Noguchi
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
by
文樹 高橋
request-specを利用していい感じにモックデータを作ってフロントエンド開発を楽にしたい!
by
Masato Noguchi
Director's Night 20130921
by
Yasufumi Nishiyama
Exbition slide
by
koukiurao
NPOセミナー資料
by
亮 門屋
熊本地震支援Webサイトの実例紹介と支援のためのホームページを作りたい人に絶対知っていてほしいこと
by
Cherry Pie Web
20160124_GPL勉強会
by
rie05
Viewers also liked
PDF
プロトタイピングでしあわせになろうよ
by
Yoshiki Kojima
PDF
スマートフォンアプリエンジニアのための最新プロトタイピング講座
by
HiroyukiHirota
PDF
The Way of the (Co-)Prototyping チームでUser Interfaceをプロトタイピングする
by
Mikihiro Fujii
PDF
ソフトウェアエンジニアの目指す道
by
Yoshihito Kuranuki
PDF
UI Crunch 03 『プロトタイピングの助走と飛躍』
by
Ryo Yoshitake
PDF
Creative insights 01 / 受託開発にプロトタイピングを導入した時のアレコレを語る
by
Ryo Yoshitake
PDF
UI Crunch#3:プロトタイピングにおける「段階」
by
Satoru MURAKOSHI
PDF
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
by
Naoki Yamada
PDF
ペーパープロトタイピング基本テクニック集
by
Tarumoto Tetsuya
PDF
Sketchで変わるワークフロー
by
Asami Yamamoto
PPTX
研修で使えるマシュマロチャレンジの運営スライド
by
Jun Chiba
PDF
人と向き合うプロトタイピング
by
wariemon
プロトタイピングでしあわせになろうよ
by
Yoshiki Kojima
スマートフォンアプリエンジニアのための最新プロトタイピング講座
by
HiroyukiHirota
The Way of the (Co-)Prototyping チームでUser Interfaceをプロトタイピングする
by
Mikihiro Fujii
ソフトウェアエンジニアの目指す道
by
Yoshihito Kuranuki
UI Crunch 03 『プロトタイピングの助走と飛躍』
by
Ryo Yoshitake
Creative insights 01 / 受託開発にプロトタイピングを導入した時のアレコレを語る
by
Ryo Yoshitake
UI Crunch#3:プロトタイピングにおける「段階」
by
Satoru MURAKOSHI
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
by
Naoki Yamada
ペーパープロトタイピング基本テクニック集
by
Tarumoto Tetsuya
Sketchで変わるワークフロー
by
Asami Yamamoto
研修で使えるマシュマロチャレンジの運営スライド
by
Jun Chiba
人と向き合うプロトタイピング
by
wariemon
Similar to 実践 大都会式 プロトタイピング&フロントエンド 2014
PDF
我が家のフロントエンド開発事情
by
Naoki Yamada
PDF
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
by
Naoya Ito
PDF
フロントエンド開発環境
by
Masaki Kawaguchi
KEY
Web App Framework at SwapSkills vol28
by
光一 原田
PDF
Nodejs beginner
by
SoheiUchino1
PPTX
Rootage.co.jp技術共有
by
rootage-inc
PPTX
HTML5 クロスプラットフォームアプリ開発の現実解
by
Monaca
PPTX
フロントエンドというカオスな世界について
by
mikakane
PPTX
Webアプリを公開するまで
by
SosukeYamada
PPTX
2016 03 05_yokohama_north
by
Ryo Tomidokoro
PDF
PhoneGapでWebアプリをスマホアプリ化
by
Takashi Okamoto
PDF
あなたも出来る!webエンジニアがSwiftでリリースするためにやったこと
by
Masaru Gushiken
PDF
「Webサービスのつくり方」 のつくり方
by
Yusuke Wada
PPTX
勉強会資料①
by
真亮 坂口
PPTX
フロントエンド技術の変遷
by
Ryo Higashigawa
KEY
スマートフォンアプリケーション開発の最新動向
by
Tsutomu Ogasawara
PPTX
新事業がどんどん出来て組織が拡大中のフェーズのランサーズがどんな感じでプロジェクトを回しているのかまとめてみました
by
Satoshi Yokoi
PPTX
企画者が押さえておきたいHtml5アプリ開発の要点
by
Monaca
PDF
グリーにおけるスマホアプリ開発~HTML5編
by
Mitsuhiro Tanda
PDF
Aiming study#6pdf
by
Koutaro Chikuba
我が家のフロントエンド開発事情
by
Naoki Yamada
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
by
Naoya Ito
フロントエンド開発環境
by
Masaki Kawaguchi
Web App Framework at SwapSkills vol28
by
光一 原田
Nodejs beginner
by
SoheiUchino1
Rootage.co.jp技術共有
by
rootage-inc
HTML5 クロスプラットフォームアプリ開発の現実解
by
Monaca
フロントエンドというカオスな世界について
by
mikakane
Webアプリを公開するまで
by
SosukeYamada
2016 03 05_yokohama_north
by
Ryo Tomidokoro
PhoneGapでWebアプリをスマホアプリ化
by
Takashi Okamoto
あなたも出来る!webエンジニアがSwiftでリリースするためにやったこと
by
Masaru Gushiken
「Webサービスのつくり方」 のつくり方
by
Yusuke Wada
勉強会資料①
by
真亮 坂口
フロントエンド技術の変遷
by
Ryo Higashigawa
スマートフォンアプリケーション開発の最新動向
by
Tsutomu Ogasawara
新事業がどんどん出来て組織が拡大中のフェーズのランサーズがどんな感じでプロジェクトを回しているのかまとめてみました
by
Satoshi Yokoi
企画者が押さえておきたいHtml5アプリ開発の要点
by
Monaca
グリーにおけるスマホアプリ開発~HTML5編
by
Mitsuhiro Tanda
Aiming study#6pdf
by
Koutaro Chikuba
More from Masayuki Maekawa
PDF
常時SSL化の事前確認・注意点・手順 〜WordPressとその周辺で必要なこと〜 #wctokyo
by
Masayuki Maekawa
PDF
自治体サイトのWordPressのメンテナンス
by
Masayuki Maekawa
PDF
VPSへの一発WordPressインストールスクリプト
by
Masayuki Maekawa
PDF
「セルフブランディング」という文脈で5年間を振り返ってみる5分間
by
Masayuki Maekawa
PDF
まえぽん式ダイエット
by
Masayuki Maekawa
PDF
早く家へ帰るための Grunt入門 [+gulp紹介]
by
Masayuki Maekawa
PDF
このところのWeb制作事情
by
Masayuki Maekawa
PDF
Bootstrapカスタマイズ&ビルド!
by
Masayuki Maekawa
PDF
マルチデバイス対応のコーディング・マークアップのポイント
by
Masayuki Maekawa
PPTX
Text editor anywhereでtextareaもsublime text 2
by
Masayuki Maekawa
PPTX
JavaScriptで『漫画カメラ』的画像加工
by
Masayuki Maekawa
PDF
Windowsユーザーむけのツール紹介
by
Masayuki Maekawa
常時SSL化の事前確認・注意点・手順 〜WordPressとその周辺で必要なこと〜 #wctokyo
by
Masayuki Maekawa
自治体サイトのWordPressのメンテナンス
by
Masayuki Maekawa
VPSへの一発WordPressインストールスクリプト
by
Masayuki Maekawa
「セルフブランディング」という文脈で5年間を振り返ってみる5分間
by
Masayuki Maekawa
まえぽん式ダイエット
by
Masayuki Maekawa
早く家へ帰るための Grunt入門 [+gulp紹介]
by
Masayuki Maekawa
このところのWeb制作事情
by
Masayuki Maekawa
Bootstrapカスタマイズ&ビルド!
by
Masayuki Maekawa
マルチデバイス対応のコーディング・マークアップのポイント
by
Masayuki Maekawa
Text editor anywhereでtextareaもsublime text 2
by
Masayuki Maekawa
JavaScriptで『漫画カメラ』的画像加工
by
Masayuki Maekawa
Windowsユーザーむけのツール紹介
by
Masayuki Maekawa
実践 大都会式 プロトタイピング&フロントエンド 2014
2.
アウトライン •自己紹介 •プロトタイピング •サーバサイド •UIデザイン •フロントエンド •まとめ
3.
自己紹介:前川 •Web制作会社勤務 (6月末まで以後未定) •マークアップ> フロントエンド> サーバーサイド
4.
最近は本書いたりしてます
5.
自己紹介:久保木 •某Sler勤務 •デザイン>マークアップ> フロントエンド これは私も参加してます→
6.
コトのはじめ こちら側 を知ってもらうには どうすればいいか 何かを作って その過程を紹介するのはどうか
7.
んじゃ、何か作ってみるか !
8.
アイデア出し
9.
実務ではあまりできないこと AngularJS Node.JS Sketch 3 Grunt nginx Express Jade Bootstrap-sass MongoDB Paper
Prototyping Github POPSVG Web Font
10.
流行ものをつかった何か •iPhone向け •ソーシャル連携 •ユーザー入力がある
11.
体重記録ウェブアプリ ソーシャルの アカウント連動して 体重を記録する
12.
ザックリフロー アイデア出し ペーパープロトタイピング サーバーサイド UIデザイン 実装
13.
ペーパープロトタイピング
14.
文字通り、紙を使った プロトタイピング
15.
•パッと書いて共有し、 修正もしやすい •イメージを共有するには最適 •いきなりExcelより省コスト
16.
ペーパープロトタイピングパッド
17.
ウェブアプリは動きがある 紙だけでは分かりづらい
18.
POPで紙芝居にしてみる •画面移動を シミュレート •動かして初めて 気付くこともある POP
19.
サーバーサイド
20.
nginx (エンジンエックス)
21.
•HTTPDサーバー •処理性能・並行性・ メモリ利用の 小ささに焦点
22.
nginxとApache •どちらでもいいかと •メモリ利用量の 小ささは魅力に見えるが、 ならサーバーを… •nginxは後発な分 設定はシンプル
23.
Node.js
24.
•サーバーサイドJavaScript •イベントベース •ノンブロッキングI/O
25.
•たまたまI/Oの 概念が無い 言語だったので JavaScriptを採用
26.
•JavaScriptしかも V8(Chromeのエンジン) ということで フロント系技術者の おもちゃ(?)に
27.
express
28.
•Node.js製 Webアプリケーション フレームワーク •最近4系がリリース •HTTPDの機能もあるので 今回はアプリケーション・ サーバーとして利用
29.
構成 静的ファイル Express アプリケーション リバースプロキシ
30.
Passport •Node.js製の OpenID/OAuthライブラリ
31.
Jade •Node.js製 テンプレートエンジン
32.
MongoDB •NoSQL •柔軟で高速 •結合などSQLで便利なことは 結構できない •インターフェースは Mongoose
33.
UIデザイン
34.
プロトをベースにデザイン
35.
今回はSketchを使用
36.
依頼する場合 •イメージしているモノが あれば事前に伝えておく •サンプルがあると 齟齬が少なくなる
37.
フロントエンド実装 •HTML5 / CSS3 •SVG
/ Web Font •AngularJS •フロント最適化
38.
HTML5
39.
http://www.slideshare.net/dynamis/toward-firefox-os/26# より
40.
•大人の事情で いろいろと解釈が…
41.
今回はHTML5 Formsだけ Range Number
42.
CSS3
43.
角丸 ドロップシャドウ 画像を使わず表現が豊かに
44.
Bootstrap-sass
45.
•Twitter社謹製の CSSフレームワーク •クラスを付与するだけで それなりのデザインに
46.
Sass (CSS Preprocessor)
47.
変数や構文などが使えるCSS @for $i from
1 through 3 { .item-#{$i} { width: 2em * $i; } }
48.
LESS Stylus
49.
SVG / Web
Font
50.
画面の高密度化 2倍のピクセルが必要 従来 これから
51.
SVGならスケーラブル
52.
大きさや色などの変更が CSSで可能に
53.
∠
54.
Font Awesome IcoMoon
55.
AngularJS
56.
•Googleが開発している フロントエンド JavaScript MVW フレームワーク
57.
MVWフレームワーク? •WはWhatever •MV※の※に議論するのも 無駄だからなんでも いいじゃん!の意
58.
•フロントエンドJavaScript フレームワークでは いま一番関心度が高い
59.
•いわゆるシングルページ Webアプリケーションに強い •インタラクションは弱め
60.
フロントの最適化
61.
•バックエンドに比べて 関心が低い領域
62.
•バックエンドの ミリセカンド単位の努力が 水の泡になりかねない
63.
フロントの最適化 •DNS問い合わせ •gzip圧縮転送 •リバースプロクシ
64.
DNS問い合わせ •TTLの調整 •上位への問い合わせが頻繁に →オーバーヘッド •短いままで放置しない
65.
gzip圧縮転送 •Apache/nginxでは モジュールあり •転送量が大幅に減少 •負荷には注意
66.
リバースプロクシ •静的ファイルのリクエストに アプリケーションサーバーの スレッド使わなくて良くね?
67.
フロントの最適化 •リクエスト数の削減 •キャッシュの活用 •ファイルのミニファイ
68.
リクエスト数の削減 •CSS/JavaScriptなどを なるべくまとめる •ページ単独の記述はHTMLに
69.
リクエスト数の削減 •CSS Sprites •DataURI
70.
CSS Sprites
71.
•複数の画像パーツを 一枚の画像に入れて CSSで表示する
72.
•リクエスト数の削減には有用 •アクセシビリティに問題
73.
•やり過ぎ注意、本当に注意 •見えなくても意味が 通るものなどが基本
74.
•一枚30KB以内に 収めるのが目安 •それ以上はリクエスト したほうがマシ
75.
DataURI
76.
•画像データ等を バイナリ文字列で •リクエスト発生しない
77.
•PC向けブラウザで 対応していない物があるので スマートフォン専用などで
78.
•データ量は約1.3倍 •gzip圧縮転送すれば画像時と データ量が変わらなくなる
79.
•管理は面倒に •レンダリングを ブロックするので 大きくても 数KB単位のもので
80.
キャッシュの活用 •CDNの利用 •Expiresヘッダで更新の無い ファイルのキャッシュを 長期に指定
81.
ファイルのミニファイ
82.
•画像は効果が大きい •CSS/JavaScriptは 「やったった」感でるけど 実は言うほどの…
83.
•ツールで自動化が基本 •ソースと成果物の分離 •コンパイルという考え方
84.
で、タスクランナー
85.
Gruntだと grunt-contrib-connect grunt-contrib-watch grunt-contrib-concat grunt-contrib-compass grunt-csso grunt-csscomb grunt-combine-media-queries grunt-autoprefixer grunt-contrib-jshint grunt-contrib-uglify grunt-contrib-imagemin
86.
あくまで 適材適所 ケースバイケース
87.
実際の作業
88.
•各自で適当に作業 •GitHubにPushして、 ある程度したらMerge
89.
•ルールを明確にしておく •HTMLのid/class属性の 使い方など •今回はng-*を消さないぐらいで緩め
90.
•スムーズにやるには、 お互いの領域の理解が必要
91.
まとめ (無理矢理)
92.
UI視点から •上流から参加できると、 いろいろと提案しやすい •デザインするために 経緯や過程を知りたい •方眼エクセルはデザイナーの やる気をそぎます
93.
システム視点から •少なくとも プロトタイピングの段階で 参加しておく •その段階で放置すると 大怪我が待ってる
94.
ありがとうございました !
Download