html5 / web apiの上手な使い方
DESCRIPTION
10・30の講演で使用したスライドのショートダイジェスト版です。TRANSCRIPT
![Page 1: HTML5 / Web APIの上手な使い方](https://reader035.vdocuments.site/reader035/viewer/2022062313/559449841a28ab150d8b47a4/html5/thumbnails/1.jpg)
Webクリエイターから見たHTML5 API/Webサービスの上手な使い方
2014.10.30
![Page 2: HTML5 / Web APIの上手な使い方](https://reader035.vdocuments.site/reader035/viewer/2022062313/559449841a28ab150d8b47a4/html5/thumbnails/2.jpg)
小菅達矢(コスゲタツヤ)の自己紹介
【経歴】
大学卒業
→音楽家目指して活動するも挫折
→コールセンターのSV(途中お好み焼き屋とWワーク)
→SVやめて、デジハリ通う
→卒業後、何故かデジハリSTUDIO渋谷(STUDIO新宿)
の中の人になり、スタッフトレーナーとして9割以上
運営業務に従事。
→デジハリトレーナーになる。
ちなみにデジハリ入学したのは29歳と9ヶ月の時。
![Page 3: HTML5 / Web APIの上手な使い方](https://reader035.vdocuments.site/reader035/viewer/2022062313/559449841a28ab150d8b47a4/html5/thumbnails/3.jpg)
WEB(主にフロントエンド)暦
■興味をもったきっかけ
2014年初頭にUNIQLOCKを参考にしたサイト作成
→あまりに重すぎて、WindowsXPとか低スペックマシンで、ろくに動かないという大失態をおかす。(この時点ではjQueryプラグイン使える=JS使えると勘違いしてたレベル)
■スキルアップしたきっかけ
今年5月末〜7月頭に、本日登壇される山崎先生に師事する機会があり、そこで修行し、ある程度JSできるようになる。
なのでスペックあげたのは、ほぼこの半年。
![Page 5: HTML5 / Web APIの上手な使い方](https://reader035.vdocuments.site/reader035/viewer/2022062313/559449841a28ab150d8b47a4/html5/thumbnails/5.jpg)
今日の目標(僕のお話は、本当導入編)
主に(HTML5) APIに焦点をあてて、HTML5 APIってなんだ?っていう方にも楽しんで頂き、
「こんなことが出来るのか!」「もしかしたらこんなこともできるのかも?」
といったワクワクやアイデアを持ち帰ってもらうこと!
![Page 6: HTML5 / Web APIの上手な使い方](https://reader035.vdocuments.site/reader035/viewer/2022062313/559449841a28ab150d8b47a4/html5/thumbnails/6.jpg)
HTML5
2014/10/28 HTML5正式勧告。(なんてタイミングのいい!)
HTML→Webサイト制作の際に使用される言語。
・文書の構造を明確にし、情報整理。
・文書にテキストや画像を配置。
などなど。
![Page 7: HTML5 / Web APIの上手な使い方](https://reader035.vdocuments.site/reader035/viewer/2022062313/559449841a28ab150d8b47a4/html5/thumbnails/7.jpg)
HTML5 API !!!
![Page 8: HTML5 / Web APIの上手な使い方](https://reader035.vdocuments.site/reader035/viewer/2022062313/559449841a28ab150d8b47a4/html5/thumbnails/8.jpg)
(HTML5) APIって?
プログラミングで何か実現したいことがあるときに、それを実現するために、世の中にある各サービスが提供している手段、命令法、情報群のこと。
HTML5により
・音楽や動画の活用
・グラフィック描画
・位置情報の取得
などなど、今までより広範囲なことが可能に!
![Page 9: HTML5 / Web APIの上手な使い方](https://reader035.vdocuments.site/reader035/viewer/2022062313/559449841a28ab150d8b47a4/html5/thumbnails/9.jpg)
【自分と特定の友達が共通で「いいね!」をしているFaceBookページを表示するアプリを作るのでFaceBook APIを使う。】
→これを作るには、自分と特定の友達の「いいね!」をしているFaceBookページが何なのか?という情報が必要。
→「いいね!」情報を持っているのはfacebook。
- faceBookから「いいね!」情報を取って使うために、
- facebookが提供する決まりごとに従ってプログラミングし、
- facebookが提供する情報の力を借りること。
![Page 10: HTML5 / Web APIの上手な使い方](https://reader035.vdocuments.site/reader035/viewer/2022062313/559449841a28ab150d8b47a4/html5/thumbnails/10.jpg)
■コードベースでの実例(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の図形を描くことが出来る。
![Page 11: HTML5 / Web APIの上手な使い方](https://reader035.vdocuments.site/reader035/viewer/2022062313/559449841a28ab150d8b47a4/html5/thumbnails/11.jpg)
(HTML5) APIの代表例
■Canvas API → 画像に頼らずともプログラミングで描画ができる。(例:http://www.itsumokawaii.jp/)
■Geolocation API→位置情報を扱って色々なことが出来る。(例:http://html5demos.com/geo)
■ Drop API→色々な要素をドラック&ドロップで扱えるようになる(例:http://www.metropolband.com/)
■ WebGL →ブラウザ上で3D表現が出来る。(例:http://tsuyoshi.in/)
![Page 12: HTML5 / Web APIの上手な使い方](https://reader035.vdocuments.site/reader035/viewer/2022062313/559449841a28ab150d8b47a4/html5/thumbnails/12.jpg)
APIは、夢が広がる宝石箱や〜!
私も、APIを使ってどんなことが出来るか考えてみました!
![Page 13: HTML5 / Web APIの上手な使い方](https://reader035.vdocuments.site/reader035/viewer/2022062313/559449841a28ab150d8b47a4/html5/thumbnails/13.jpg)
API×API
APIを組み合わせて、夢を2倍に広げる!?
![Page 14: HTML5 / Web APIの上手な使い方](https://reader035.vdocuments.site/reader035/viewer/2022062313/559449841a28ab150d8b47a4/html5/thumbnails/14.jpg)
Microsoft Bing Maps API×
Instagram API
![Page 15: HTML5 / Web APIの上手な使い方](https://reader035.vdocuments.site/reader035/viewer/2022062313/559449841a28ab150d8b47a4/html5/thumbnails/15.jpg)
その名も「インスタントラーメングラム」
【おいしそうな写真でお昼ご飯(ラーメン)を選ぶ!!アプリ】
①Geolocation APIで現在地を取得!
②Instagramで現在地周辺で撮影されたラーメンの写真をBingMaps上に設置。
③写真を選んだら、現在地からのルートを表示(ナビつき)
![Page 16: HTML5 / Web APIの上手な使い方](https://reader035.vdocuments.site/reader035/viewer/2022062313/559449841a28ab150d8b47a4/html5/thumbnails/16.jpg)
本当は、このインスタントラーメングラムを実装したかったのですが
私が調べた限り、Instagram APIの仕様上、
前述の内容を、完璧に実装することはできませんでした。
![Page 17: HTML5 / Web APIの上手な使い方](https://reader035.vdocuments.site/reader035/viewer/2022062313/559449841a28ab150d8b47a4/html5/thumbnails/17.jpg)
・例えば、ラーメンの写真は、「ラーメン」というハッシュタグがつく写真を引っ張るというやり方で可能だが、その場合「現在地周辺で撮影された写真」という条件を付けることが仕様上、不可。
・現在地周辺で最近(あるいは特定の期間)撮影された写真を引っ張るということは可能でしたが、その場合条件に特定のタグをつけることが、仕様上不可。
![Page 18: HTML5 / Web APIの上手な使い方](https://reader035.vdocuments.site/reader035/viewer/2022062313/559449841a28ab150d8b47a4/html5/thumbnails/18.jpg)
「これできないかな?」って思うことがあったら...
↓
たいてい出来ると信じる!!
これがワクワクのコツ!!
![Page 19: HTML5 / Web APIの上手な使い方](https://reader035.vdocuments.site/reader035/viewer/2022062313/559449841a28ab150d8b47a4/html5/thumbnails/19.jpg)
実例に学ぶ、APIの注意点
①今回の実例のように、使おうと思っているAPIに自分が臨む機能が実装されていないこともある。(でもAPIの量が豊富なので大丈夫!)
②APIの仕様が変わった時に、場合によっては大幅な実装のやり直しが必要になるケースがある。
(例:Twitter API 1.0→1.1に変更時)
![Page 20: HTML5 / Web APIの上手な使い方](https://reader035.vdocuments.site/reader035/viewer/2022062313/559449841a28ab150d8b47a4/html5/thumbnails/20.jpg)
Webクリエイターの方へ
・まずは、簡単なものでいいので、とにかく作ってみる。
・どうしてもアイデアが思いつかない場合は、何かをマネしてみる。
・そして、それを続ける。
小さな「できた」という体験が、
更にアイデアや夢を膨らませてくれます!
![Page 21: HTML5 / Web APIの上手な使い方](https://reader035.vdocuments.site/reader035/viewer/2022062313/559449841a28ab150d8b47a4/html5/thumbnails/21.jpg)
Webクリエイターではない方へ
自分で作れなくても、素敵なアイデアは重宝されます!
「こんなことできるのかなー」とか、
「こういうのあったら楽しいよねー」とか、
そんな夢のある会話を友人・知人とすることから始めてみませんか?
いいアイデアの種を思いついたら、開発できる人に提案し
てみたり、「アイデアソン」に出てみるのもいいかもしれませ
ん!
![Page 22: HTML5 / Web APIの上手な使い方](https://reader035.vdocuments.site/reader035/viewer/2022062313/559449841a28ab150d8b47a4/html5/thumbnails/22.jpg)
私もAPIを扱えるようになりたいと思ったあなた!
そんな方はぜひこちらを!
(※基本的なHTMLとCSSをわかっている必要有)
![Page 23: HTML5 / Web APIの上手な使い方](https://reader035.vdocuments.site/reader035/viewer/2022062313/559449841a28ab150d8b47a4/html5/thumbnails/23.jpg)
【jQueryレッスンブック】
山崎大助 著
http://www.socym.co.jp/book/947
■ポイント
・jQueryを楽しんで学べる!
・1冊目の本として最適!
・ajax(今回APIを扱うのに使用している技術)を
わかりやすく、楽しく学べる!
![Page 24: HTML5 / Web APIの上手な使い方](https://reader035.vdocuments.site/reader035/viewer/2022062313/559449841a28ab150d8b47a4/html5/thumbnails/24.jpg)
ご清聴ありがとうございました