1. HTML５時代とWebAPI
「 Bing API 」
〜 これからの時代に必要なスキルセット 〜
サンプルURL:
http://www.venezia-works.com/bing.zip

2. 自己紹介
Microsoft MVP 2013, 2014
（BingMapsDevelopment）
MicrosoftMVPって？
マイクロソフトが個人の活動を評価する、特別な賞。
MVP (Most Valuable Professional) アワード プログラムは、
マイクロソフトの製品やテクノロジーに関する豊富な知識と
経験を持ち、オンラインまたはオフラインのコミュニティや
、メディアなどを通して、その優れた能力を幅広いユーザー
と共有している個人を表彰するものです。
Daisuke Yamazaki ( Tokyo )

3. 自己紹介
・デジタルハリウッド大学院 ： スマートフォン（モバイル）制作演習
・デジタルハリウッド： スマフォ＆レスポンシブWebデザイン講座、
Webアプリ講座、PHP講座
・inop ： WebApplicationDeveloper
・WebAPI勉強会： ☆彡WebApi Research Society （☆彡WARS）
・html5j (HTML5ビギナーズ)
・ヒカ☆ラボ、パソナテック、企業研修…イベント セミナー
※自称：HTML5界の革命派（過激派、保守派など沢山いますよ）
クリエイター（制作者、開発者とは違う立場と思ってる）

4. 3
寄稿：
＠IT「HTML5アプリ作ろうぜ！」
※超人気！！
日経ソフトウエア、ITPro…
日経BP、SoftwareDesign…
自己紹介
代表的な著書：
レスポンシブWebデザイン
「超」実践デザイン集中講義

5. このセッションの目標
・ WebAPIって、こんなことできるのか
！
・ 面白い！
・ やってみたい！
・ もっと勉強しなきゃ！
・ この機能使ってみたい！
１つでも何かを感じてほしい。
やる気につながる何かを感じて持って帰ってほし
い。

6. 自己紹介
山崎さん、
この仕事は長いの？
本日の案内役！！
マイクです！！

7. １． 最初は別の業界からスタート
２． パソコン触ったことが無かった
３． もともとは言語大好きエンジニアだった…
僕は、

8. 皆さん〜ちょっと質問！
１．Webデザイナーの方？
２．Webエンジニアの方？
３．MS大好きな方？
４．夢もってますか？
５．夢に近ずく行動してますか？
手を上げてね

9. 夢は「意志・行動」で叶える
・意志（どうなりたいのか！）
・短期／長期の目標を自分何に考える
・行動（恥ずかしくても、無駄でもやってみる）
・耐える時期も必要
・直向き（努力し続ける）
・アピールも必要（目標によっては）

10. ・意志（どうなりたいのか！）
・短期／長期の目標を自分何に考える
・行動（恥ずかしくても、無駄でもやってみる）
・耐える時期も必要
・直向き（努力し続ける）
・アピールも必要（目標によっては）
夢は「意志・行動」で叶える
気づいた時に行動！
人生に遅いはない！
なぜそう言えるのか？

11. だって・・・
僕が２８歳からパソコン始めて、
やれてますから (^^ゞ
気づいた時に行動！
人生に遅いはない！

12. 僕を救ったのは
WebAPI

13. WebAPIで作ったアプリがヒット！
※いまはオクラ入り（WindowsXP時代からメンテしてなかった）
お天気API、翻訳API、文章構成API

14. WebAPIとは
• Webサイト,Webアプリケーション開発のためにインターネット経由で利
用できるAPIのことです。
• メリット
・個人や中小企業では開発できる機能に限界がある。
Web APIを利用すれば
「自分一人では作れないデータベースや機能を使える」
・ 高機能なコンテンツを「より短期間・低コスト」で開発

15. BingAPI
YahooAPI
GoogleAPI
皆さん知ってるもの
ばかりですね！
Twitter API
Yahoo! Webサービス
ロケタッチ API
Instagram
ぐるなび
Amazon Webサービス
はてなWebサービス
Facebook API

16. WebAPIを利用することで
可能性が広がります！
1人でも
Webアプリが作れる
アイデア
企画

17. WebAPI＋HTML5
ーDEMOー
• Map Webアプリ( BingAPI)
• 翻訳 Webアプリ( BingAPI)

18. 17
http://www.bing.com/maps/
Bing Maps API

19. 18
DEMO
BingMapsAPI
http://www.venezia-works.com/bing/sample01.html
http://www.venezia-works.com/bing/sample02.html
http://www.venezia-works.com/bing/sample03.html
※ @it HTML5アプリ作ろうぜでも解説を載せてます。

20. 19
自分だったら！？どんな機能つけますか
？
このDEMO見て、次にどんな機能つける
と、公開したり使えそうなアプリになり
ますか？
「 BingMaps API 」を考える

21. 20
よくある意見
MAPを使ってるので、
・ 店舗検索
・ 経路検索
・ NAVI機能
または、SNSと連携できたり、そんなの
良さそうだよね！？できるの・・・
「 BingMaps API 」を考える

22. 21
変更サンプルファイル
http://localhost/bmap/twitter_fb/index.php
「 BingMaps API 」を考える

23. 22
http://www.bing.com/translator
Bing Translator API

24. 23
他の翻訳APIとの違い
音声

25. 24
・ AUDIO タグ （HTML5）
・ Transrator API （Microsoft）
・ WebSpeech API（HTML5）
翻訳アプリ仕様 （DEMO2）

26. 25
DEMO２
翻訳アプリ
記事解説
http://www.atmarkit.co.jp/ait/articles/1309/11/news001.html
サンプルURL
http://www.venezia-works.com/comcamp2014/english/sample_base2.html
※Chromeの最新版で確認してください。
＋ AUDIO タグ （HTML5）
＋ Transrator API （Microsoft）
＋ WebSpeech API（HTML5）

27. 26
発想、アイデア、行動、まずやってみる
！！
そこから別なアイディアがでたりします
！１．まず試す、DEMO/モックを作る！
２．実際に動かしてみる！
３．足りない部分に気づく！
・・・
スパイラル（繰り返し）→リリース
・・・
その蓄積が新しい技術・知識・分野を開拓します！

28. 27
DEMOを見てきて、いかがでしょうか？
驚きや面白さを何か感じました？
皆さんには、
「沢山のアイデア」
「とんでもないアイデア」
が眠ってます！
「こんなのあればいいな・・・」作ればいい！！

29. 28
会社の環境もあるでしょう
会社はベンチャーでも！！
※ 危険な冒険、危険な試み・・・
マインドは
アドベンチャーでいきましょう

30. 今までのWebの業務は・・・
・ Webデザイナー
（IE6,7,8対応、負の遺産対応 … HTML5時代に不要）
→Webデザインナー
スクリプトは・・・
HTML5 CSS3
Java
Script jQuary
できませんよ！

31. 今までのWeb系と呼ばれてた人は・・・、
・Webデザイナー
・Webスクリプター
→クライアントアプリ？
私はWebの人ですから
HTML5 CSS3
Java
Script jQuary
できませんよ！

32. 31
これからはだめ！！

33. 今求められるスキル
• これからのデザイナーはスクリプトを理解できて
ることが大事。
※JSのif分岐、WebAPIくらいは理解しよう
• これからのプログラマーはデザインを理解できて
ることが大事。
※CSSくらい書けないと。
※UI,UXも知ってたほうがいい。

34. 3333
WebAPIはアプリ作成としても
Webアプリでも生かせる時代！

35. 34
フリーランス、小さい会社でもアプリで
勝負することができる時代！！
自分で道を切り拓きましょう！！
create one's own future.
１人でもできる

36. 35
枠にハマらるな！
そんな奴らが生き残る時代！
・ いつ頑張るんですか！？
・ いつ自分の時代にするんですか！？
●●でしょ!!
では、
いつ行動するのか！？

37. 常にチャレンジと努力！！
チャンスだと思ったら飛びつけ！！
待ってても何もこない！！
自分を信じろ！！
楽しめ！
いつでも皆さん次第で人生を変えられる

38. Thank You.
サンプル
http://www.venezia-works.com/bing.zip
信じてがんばれる人に奇跡は起きる