10・30の講演で使用したスライドのショートダイジェスト版です。

1. Webクリエイターから見た
HTML5 API/Webサービスの上手な使い方
2014.10.30

2. 小菅達矢（コスゲタツヤ）の自己紹介
【経歴】
大学卒業
→音楽家目指して活動するも挫折
→コールセンターのSV（途中お好み焼き屋とWワーク）
→SVやめて、デジハリ通う
→卒業後、何故かデジハリSTUDIO渋谷（STUDIO新宿）
の中の人になり、スタッフトレーナーとして９割以上
運営業務に従事。
→デジハリトレーナーになる。
ちなみにデジハリ入学したのは２９歳と９ヶ月の時。

3. WEB（主にフロントエンド）暦
■興味をもったきっかけ
2014年初頭にUNIQLOCKを参考にしたサイト作成
→あまりに重すぎて、WindowsXPとか低スペックマシンで、ろくに動かないとい う大失態をおかす。 （この時点ではjQueryプラグイン使える＝JS使えると勘違いしてたレベル）
■スキルアップしたきっかけ
今年５月末〜７月頭に、本日登壇される山崎先生に師事する機会があり、そこ で修行し、ある程度JSできるようになる。
なのでスペックあげたのは、ほぼこの半年。

4. 最近ここで色々投稿してアウトプット継続中 http://jsdo.it/castero
これからはWEBサービスをどんどん作っていきたいと考えてます。

5. 今日の目標（僕のお話は、本当導入編）
主に（HTML5）APIに焦点をあてて、HTML5 APIってなんだ？っていう方にも楽 しんで頂き、 「こんなことが出来るのか！」 「もしかしたらこんなこともできるのかも？」
といったワクワクやアイデアを持ち帰ってもらうこと！

6. HTML5
2014/10/28HTML5正式勧告。
（なんてタイミングのいい！）
HTML→Webサイト制作の際に使用される言語。
・文書の構造を明確にし、情報整理。
・文書にテキストや画像を配置。
などなど。

7. HTML5 API !!!

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. APIは、夢が広がる宝石箱や〜！ 私も、APIを使ってどんなことが出来るか考 えてみました！

13. API×APIAPIを組み合わせて、夢を２倍に広げる!?

14. Microsoft Bing Maps API×Instagram API

15. その名も「インスタントラーメングラム」
【おいしそうな写真でお昼ご飯（ラーメン）を選ぶ！！アプリ】
①Geolocation APIで現在地を取得！
②Instagramで現在地周辺で撮影されたラーメンの写真をBingMaps上に設置。
③写真を選んだら、現在地からのルートを表示（ナビつき）

16. 本当は、このインスタントラーメングラムを実装したかったのですが
私が調べた限り、InstagramAPIの仕様上、
前述の内容を、完璧に実装することはできませんでした。

17. ・例えば、ラーメンの写真は、「ラーメン」というハッシュタグがつく写真を引っ張 るというやり方で可能だが、その場合「現在地周辺で撮影された写真」という 条件を付けることが仕様上、不可。
・現在地周辺で最近（あるいは特定の期間）撮影された写真を引っ張るという ことは可能でしたが、その場合条件に特定のタグをつけることが、仕様上不可 。

18. 「これできないかな？」って思うことがあったら...
↓ たいてい出来ると信じる！！
これがワクワクのコツ！！

19. 実例に学ぶ、APIの注意点
①今回の実例のように、使おうと思っているAPIに自分が臨む機能が実装され ていないこともある。（でもAPIの量が豊富なので大丈夫！）
②APIの仕様が変わった時に、場合によっては大幅な実装のやり直しが必要 になるケースがある。
（例：Twitter API 1.0→1.1に変更時）

20. Webクリエイターの方へ
・まずは、簡単なものでいいので、とにかく作ってみる。
・どうしてもアイデアが思いつかない場合は、何かをマネしてみる。
・そして、それを続ける。
小さな「できた」という体験が、 更にアイデアや夢を膨らませてくれます！

21. Webクリエイターではない方へ
自分で作れなくても、素敵なアイデアは重宝されます！
「こんなことできるのかなー」とか、 「こういうのあったら楽しいよねー」とか、 そんな夢のある会話を友人・知人とすることから始めてみませんか？ いいアイデアの種を思いついたら、開発できる人に提案し てみたり、「アイデアソン」に出てみるのもいいかもしれませ ん！

22. 私もAPIを扱えるようになりたいと思ったあなた！ そんな方はぜひこちらを！
（※基本的なHTMLとCSSをわかっている必要有）

23. 【jQueryレッスンブック】
山崎大助著
http://www.socym.co.jp/book/947
■ポイント
・jQueryを楽しんで学べる！
・１冊目の本として最適！
・ajax（今回APIを扱うのに使用している技術）を
わかりやすく、楽しく学べる！

24. ご清聴ありがとうございました