Download as PDF, PPTX
Recommended
More Related Content
What's hot
Viewers also liked
Similar to HTML5 / Web APIの上手な使い方
HTML5 / Web APIの上手な使い方
- 1.Webクリエイターから見た HTML5 API/Webサービスの上手な使い方2014.10.30
- 2.小菅達矢（コスゲタツヤ）の自己紹介 【経歴】 大学卒業→音楽家目指して活動するも挫折 →コールセンターのSV（途中お好み焼き屋とWワーク） →SVやめて、デジハリ通う →卒業後、何故かデジハリSTUDIO渋谷（STUDIO新宿） の中の人になり、スタッフトレーナーとして９割以上 運営業務に従事。 →デジハリトレーナーになる。 ちなみにデジハリ入学したのは２９歳と９ヶ月の時。
- 3.WEB（主にフロントエンド）暦 ■興味をもったきっかけ 2014年初頭にUNIQLOCKを参考にしたサイト作成→あまりに重すぎて、WindowsXPとか低スペックマシンで、ろくに動かないとい う大失態をおかす。 （この時点ではjQueryプラグイン使える＝JS使えると勘違いしてたレベル） ■スキルアップしたきっかけ 今年５月末〜７月頭に、本日登壇される山崎先生に師事する機会があり、そこ で修行し、ある程度JSできるようになる。 なのでスペックあげたのは、ほぼこの半年。
- 4.
- 5.今日の目標（僕のお話は、本当導入編） 主に（HTML5）APIに焦点をあてて、HTML5 APIってなんだ？っていう方にも楽しんで頂き、 「こんなことが出来るのか！」 「もしかしたらこんなこともできるのかも？」 といったワクワクやアイデアを持ち帰ってもらうこと！
- 6.HTML5 2014/10/28HTML5正式勧告。 （なんてタイミングのいい！）HTML→Webサイト制作の際に使用される言語。 ・文書の構造を明確にし、情報整理。 ・文書にテキストや画像を配置。 などなど。
- 7.
- 8.（HTML5）APIって？ プログラミングで何か実現したいことがあるときに、それを実現するために、世の中にある 各サービスが提供している手段、命令法、情報群のこと。HTML5により ・音楽や動画の活用 ・グラフィック描画 ・位置情報の取得 などなど、今までより広範囲なことが可能に！
- 9.【自分と特定の友達が共通で「いいね！」をしているFaceBookページを表示す るアプリを作るのでFaceBook APIを使う。】→これを作るには、自分と特定の友達の「いいね！」をしているFaceBookペー ジが何なのか？という情報が必要。 →「いいね！」情報を持っているのはfacebook。 -faceBookから「いいね！」情報を取って使うために、 -facebookが提供する決まりごとに従ってプログラミングし、 -facebookが提供する情報の力を借りること。
- 10.■コードベースでの実例（Canvas） var canvas= document.getElementById('c1'); if ( ! canvas || ! canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.fillRect(0, 0, 80, 40); Canvasが決めている決まりごと（特に赤字の部分）に従って、上記のように記 述するとブラウザ上に図形を描くことが出来る。 ※上記の場合、幅80px、高さ40pxの図形を描くことが出来る。
- 11.（HTML5）APIの代表例 ■Canvas API→ 画像に頼らずともプログラミングで描画ができる。 （例：http://www.itsumokawaii.jp/） ■Geolocation API→位置情報を扱って色々なことが出来る。 （例：http://html5demos.com/geo） ■Drop API→色々な要素をドラック&ドロップで扱えるようになる （例：http://www.metropolband.com/） ■WebGL →ブラウザ上で３D表現が出来る。 （例：http://tsuyoshi.in/）
- 12.
- 13.
- 14.Microsoft Bing MapsAPI×Instagram API
- 15.その名も「インスタントラーメングラム」 【おいしそうな写真でお昼ご飯（ラーメン）を選ぶ！！アプリ】 ①GeolocationAPIで現在地を取得！ ②Instagramで現在地周辺で撮影されたラーメンの写真をBingMaps上に設置。 ③写真を選んだら、現在地からのルートを表示（ナビつき）
- 16.
- 17.・例えば、ラーメンの写真は、「ラーメン」というハッシュタグがつく写真を引っ張 るというやり方で可能だが、その場合「現在地周辺で撮影された写真」という 条件を付けることが仕様上、不可。・現在地周辺で最近（あるいは特定の期間）撮影された写真を引っ張るという ことは可能でしたが、その場合条件に特定のタグをつけることが、仕様上不可 。
- 18.「これできないかな？」って思うことがあったら... ↓ たいてい出来ると信じる！！これがワクワクのコツ！！
- 19.実例に学ぶ、APIの注意点 ①今回の実例のように、使おうと思っているAPIに自分が臨む機能が実装され ていないこともある。（でもAPIの量が豊富なので大丈夫！）②APIの仕様が変わった時に、場合によっては大幅な実装のやり直しが必要 になるケースがある。 （例：Twitter API 1.0→1.1に変更時）
- 20.Webクリエイターの方へ ・まずは、簡単なものでいいので、とにかく作ってみる。 ・どうしてもアイデアが思いつかない場合は、何かをマネしてみる。・そして、それを続ける。 小さな「できた」という体験が、 更にアイデアや夢を膨らませてくれます！
- 21.Webクリエイターではない方へ 自分で作れなくても、素敵なアイデアは重宝されます！ 「こんなことできるのかなー」とか、「こういうのあったら楽しいよねー」とか、 そんな夢のある会話を友人・知人とすることから始めてみませんか？ いいアイデアの種を思いついたら、開発できる人に提案し てみたり、「アイデアソン」に出てみるのもいいかもしれませ ん！
- 22.
- 23.【jQueryレッスンブック】 山崎大助著 http://www.socym.co.jp/book/947■ポイント ・jQueryを楽しんで学べる！ ・１冊目の本として最適！ ・ajax（今回APIを扱うのに使用している技術）を わかりやすく、楽しく学べる！
- 24.