Download to read offline
Uploaded byTsuzurahara Tohru
WordPressといろんなAPIを組み合わせてWebアプリを作ろう
HTML5 Geolocation API×CSSフレームワーク×WordPressで作ったガイドマップWebアプリを例にそれぞれの技術の解説を行います。 こちらが続編です↓ http://www.slideshare.net/tomokababa/wordbench-miyazaki-vol9
WordPressといろんなAPIを組み合わせてWebアプリを作ろう
- 1.
- 2. 2015.4.25WordBenchMiyazaki,Vol.9 黒 原 道 （つづらはらとおる） eaterTohruTsuzurahara 大阪出身、宮崎在住 後藤修氏とのデザインユニット「eater」にて、 Webデザイン・構築 / グラフィックデザインを行っています。 http://29eater.com WordBench宮崎運営 セミナーイベント「Design Pledge」運営など CSS Nite LP, Disk 22「Webデザインで使うPhotoshop」 dot-Ai Vol.2「ネタ祭り2013」 CSS Nite LP, Disk 34「Webデザインで使うPhotoshop Pt.2」 CSS Nite @Co-Edo, Vol.19/Vol.20 『Webデザインの現場ですぐに役立つ Photoshop仕事術』 等に出演
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10. 2015.4.25WordBenchMiyazaki,Vol.9 HTML5 Geolocation API × GoogleMaps API × WordPress × CSSフレームワーク で作ったガイドマップWebアプリ
- 11.
- 12. 2015.4.25WordBenchMiyazaki,Vol.9 ディレクション デザイン マークアップ WordPress構築 黒 原 道馬場 大佳 WPプラグイン開発 サーバー構築 サーバー構築 児玉 秋二
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25. 2015.4.25WordBenchMiyazaki,Vol.9 Material is themetaphor 物質（マテリアル）は比喩（メタファー）です 「マテリアルデザイン」
- 26. 2015.4.25WordBenchMiyazaki,Vol.9 よく知られた触覚の特質を使用すると、ユーザが速くアフォーダンス （見た目から連想する機能）を理解する助けになります。 「マテリアルデザイン」 The use offamiliar tactile attributes helps users quickly understand affordances.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38. 2015.4.25WordBenchMiyazaki,Vol.9 <div class="col s12m6 l4"> col→カラムを表します s12→スマートフォンでの使用カラム数 m6→タブレットでの使用カラム数 l6→PCでの使用カラム数 ※カラムは全部で12本です。 「グリッドレイアウト」
- 39. 2015.4.25WordBenchMiyazaki,Vol.9 <div class="btn"> btn→ボタンのデザインが適用されます <div class="waves-effectwaves-light btn"> waves-effect →ボタンを押した時に動きをつける waves-light → エフェクトのカラーを定義 「ボタン」
- 40. 2015.4.25WordBenchMiyazaki,Vol.9 <div class="teal lighten-2"> teal→色相を表しています lighten-2→ 明度を表しています 「カラー」
- 41.
- 42.