20140511 bing api (held in digitalhollywooduniversitygraduateschool)
TRANSCRIPT
HTML5時代とWebAPI
「 Bing API 」
〜 これからの時代に必要なスキルセット 〜
サンプルURL:
http://www.venezia-works.com/bing.zip
自己紹介
Microsoft MVP 2013, 2014
(BingMapsDevelopment)
MicrosoftMVPって?マイクロソフトが個人の活動を評価する、特別な賞。MVP (Most Valuable Professional) アワードプログラムは、
マイクロソフトの製品やテクノロジーに関する豊富な知識と経験を持ち、オンラインまたはオフラインのコミュニティや、メディアなどを通して、その優れた能力を幅広いユーザーと共有している個人を表彰するものです。
Daisuke Yamazaki ( Tokyo )
自己紹介
・デジタルハリウッド大学院 : スマートフォン(モバイル)制作演習
・デジタルハリウッド: スマフォ&レスポンシブWebデザイン講座、Webアプリ講座、PHP講座
・inop : WebApplicationDeveloper
・WebAPI勉強会: ☆彡WebApi Research Society (☆彡WARS)
・html5j (HTML5ビギナーズ)
・ヒカ☆ラボ、パソナテック、企業研修…イベント セミナー
※自称:HTML5界の革命派(過激派、保守派など沢山いますよ)クリエイター(制作者、開発者とは違う立場と思ってる)
3
寄稿:
@IT「HTML5アプリ作ろうぜ!」※超人気!!
日経ソフトウエア、ITPro…
日経BP、SoftwareDesign…
自己紹介
代表的な著書:
レスポンシブWebデザイン
「超」実践デザイン集中講義
このセッションの目標
・ WebAPIって、こんなことできるのか!・ 面白い!・ やってみたい!・ もっと勉強しなきゃ!・ この機能使ってみたい!
1つでも何かを感じてほしい。
やる気につながる何かを感じて持って帰ってほしい。
自己紹介
山崎さん、
この仕事は長いの?
本日の案内役!!マイクです!!
1.最初は別の業界からスタート
2.パソコン触ったことが無かった
3.もともとは言語大好きエンジニアだった…
僕は、
皆さん〜ちょっと質問!
1.Webデザイナーの方?
2.Webエンジニアの方?
3.MS大好きな方?
4.夢もってますか?
5.夢に近ずく行動してますか?手を上げてね
夢は「意志・行動」で叶える
・意志(どうなりたいのか!)
・短期/長期の目標を自分何に考える
・行動(恥ずかしくても、無駄でもやってみる)
・耐える時期も必要
・直向き(努力し続ける)
・アピールも必要(目標によっては)
・意志(どうなりたいのか!)
・短期/長期の目標を自分何に考える
・行動(恥ずかしくても、無駄でもやってみる)
・耐える時期も必要
・直向き(努力し続ける)
・アピールも必要(目標によっては)
夢は「意志・行動」で叶える
気づいた時に行動!人生に遅いはない!
なぜそう言えるのか?
だって・・・
僕が28歳からパソコン始めて、
やれてますから (^^ゞ
気づいた時に行動!人生に遅いはない!
僕を救ったのはWebAPI
WebAPIで作ったアプリがヒット!※いまはオクラ入り(WindowsXP時代からメンテしてなかった)
お天気API、翻訳API、文章構成API
WebAPIとは
• Webサイト,Webアプリケーション開発のためにインターネット経由で利
用できるAPIのことです。
• メリット
・個人や中小企業では開発できる機能に限界がある。
Web APIを利用すれば
「自分一人では作れないデータベースや機能を使える」
・ 高機能なコンテンツを「より短期間・低コスト」で開発
BingAPI
YahooAPI
GoogleAPI
皆さん知ってるものばかりですね!
Twitter API
Yahoo! Webサービス
ロケタッチ API
ぐるなび
Amazon Webサービス
はてなWebサービス
Facebook API
WebAPIを利用することで
可能性が広がります!
1人でも
Webアプリが作れる
アイデア
企画
WebAPI+HTML5
ーDEMOー
• Map Webアプリ( BingAPI)
• 翻訳 Webアプリ( BingAPI)
17
http://www.bing.com/maps/
Bing Maps API
18
DEMOBingMapsAPI
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アプリ作ろうぜでも解説を載せてます。
19
自分だったら!?どんな機能つけますか?
このDEMO見て、次にどんな機能つけると、公開したり使えそうなアプリになりますか?
「 BingMaps API 」を考える
20
よくある意見
MAPを使ってるので、・ 店舗検索・ 経路検索・ NAVI機能
または、SNSと連携できたり、そんなの良さそうだよね!?できるの・・・
「 BingMaps API 」を考える
21
変更サンプルファイルhttp://localhost/bmap/twitter_fb/index.php
「 BingMaps API 」を考える
22
http://www.bing.com/translator
Bing Translator API
23
他の翻訳APIとの違い
音声
24
・ AUDIO タグ (HTML5)
・ Transrator API (Microsoft)
・ WebSpeech API(HTML5)
翻訳アプリ仕様 (DEMO2)
25
DEMO2翻訳アプリ
記事解説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)
26
発想、アイデア、行動、まずやってみる!!
そこから別なアイディアがでたりします!1.まず試す、DEMO/モックを作る!2.実際に動かしてみる!3.足りない部分に気づく!・・・スパイラル(繰り返し)→リリース・・・
その蓄積が新しい技術・知識・分野を開拓します!
27
DEMOを見てきて、いかがでしょうか?
驚きや面白さを何か感じました?
皆さんには、
「沢山のアイデア」
「とんでもないアイデア」
が眠ってます!
「こんなのあればいいな・・・」作ればいい!!
28
会社の環境もあるでしょう
会社はベンチャーでも!!
※ 危険な冒険、危険な試み・・・
マインドは
アドベンチャーでいきましょう
!
今までのWebの業務は・・・
・ Webデザイナー(IE6,7,8対応、負の遺産対応 … HTML5時代に不要)
→Webデザインナー
スクリプトは・・・
HTML5 CSS3Java
ScriptjQuary
できませんよ!
今までのWeb系と呼ばれてた人は・・・、
・Webデザイナー
・Webスクリプター
→クライアントアプリ?私はWebの人ですから
HTML5 CSS3Java
ScriptjQuary
できませんよ!
31
これからはだめ!!
今求められるスキル
• これからのデザイナーはスクリプトを理解できて
ることが大事。
※JSのif分岐、WebAPIくらいは理解しよう
• これからのプログラマーはデザインを理解できて
ることが大事。
※CSSくらい書けないと。
※UI,UXも知ってたほうがいい。
3333
WebAPIはアプリ作成としてもWebアプリでも生かせる時代!
34
フリーランス、小さい会社でもアプリで勝負することができる時代!!
自分で道を切り拓きましょう!!create one's own future.
1人でもできる
35
枠にハマらるな!
そんな奴らが生き残る時代!
・ いつ頑張るんですか!?・ いつ自分の時代にするんですか!?
●●でしょ!!
では、いつ行動するのか!?
常にチャレンジと努力!!
チャンスだと思ったら飛びつけ!!
待ってても何もこない!!
自分を信じろ!!
楽しめ!
いつでも皆さん次第で人生を変えられる
Thank You.
サンプルhttp://www.venezia-works.com/bing.zip
信じてがんばれる人に奇跡は起きる