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

2014.10.30

小菅達矢（コスゲタツヤ）の自己紹介

【経歴】

大学卒業

→音楽家目指して活動するも挫折

→コールセンターのSV（途中お好み焼き屋とWワーク）

→SVやめて、デジハリ通う

→卒業後、何故かデジハリSTUDIO渋谷（STUDIO新宿）

の中の人になり、スタッフトレーナーとして９割以上

運営業務に従事。

→デジハリトレーナーになる。

ちなみにデジハリ入学したのは２９歳と９ヶ月の時。

WEB（主にフロントエンド）暦

■興味をもったきっかけ

2014年初頭にUNIQLOCKを参考にしたサイト作成

→あまりに重すぎて、WindowsXPとか低スペックマシンで、ろくに動かないという大失態をおかす。（この時点ではjQueryプラグイン使える＝JS使えると勘違いしてたレベル）

■スキルアップしたきっかけ

今年５月末〜７月頭に、本日登壇される山崎先生に師事する機会があり、そこで修行し、ある程度JSできるようになる。

なのでスペックあげたのは、ほぼこの半年。

最近ここで色々投稿してアウトプット継続中

http://jsdo.it/castero

これからはWEBサービスをどんどん作っていきたいと考えてます。

今日の目標（僕のお話は、本当導入編）

主に（HTML5） APIに焦点をあてて、HTML5 APIってなんだ？っていう方にも楽しんで頂き、

「こんなことが出来るのか！」「もしかしたらこんなこともできるのかも？」

といったワクワクやアイデアを持ち帰ってもらうこと！

HTML5

2014/10/28 HTML5正式勧告。（なんてタイミングのいい！）

HTML→Webサイト制作の際に使用される言語。

・文書の構造を明確にし、情報整理。

・文書にテキストや画像を配置。

などなど。

HTML5 API !!!

（HTML5） APIって？

プログラミングで何か実現したいことがあるときに、それを実現するために、世の中にある各サービスが提供している手段、命令法、情報群のこと。

HTML5により

・音楽や動画の活用

・グラフィック描画

・位置情報の取得

などなど、今までより広範囲なことが可能に！

【自分と特定の友達が共通で「いいね！」をしているFaceBookページを表示するアプリを作るのでFaceBook APIを使う。】

→これを作るには、自分と特定の友達の「いいね！」をしているFaceBookページが何なのか？という情報が必要。

→「いいね！」情報を持っているのはfacebook。

- faceBookから「いいね！」情報を取って使うために、

- facebookが提供する決まりごとに従ってプログラミングし、

- facebookが提供する情報の力を借りること。

■コードベースでの実例（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の図形を描くことが出来る。

（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/）

APIは、夢が広がる宝石箱や〜！

私も、APIを使ってどんなことが出来るか考えてみました！

API×API

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

Microsoft Bing Maps API×

Instagram API

その名も「インスタントラーメングラム」

【おいしそうな写真でお昼ご飯（ラーメン）を選ぶ！！アプリ】

①Geolocation APIで現在地を取得！

②Instagramで現在地周辺で撮影されたラーメンの写真をBingMaps上に設置。

③写真を選んだら、現在地からのルートを表示（ナビつき）

本当は、このインスタントラーメングラムを実装したかったのですが

私が調べた限り、Instagram APIの仕様上、

前述の内容を、完璧に実装することはできませんでした。

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

・現在地周辺で最近（あるいは特定の期間）撮影された写真を引っ張るということは可能でしたが、その場合条件に特定のタグをつけることが、仕様上不可。

「これできないかな？」って思うことがあったら...

↓

たいてい出来ると信じる！！

これがワクワクのコツ！！

実例に学ぶ、APIの注意点

①今回の実例のように、使おうと思っているAPIに自分が臨む機能が実装されていないこともある。（でもAPIの量が豊富なので大丈夫！）

②APIの仕様が変わった時に、場合によっては大幅な実装のやり直しが必要になるケースがある。

（例：Twitter API 1.0→1.1に変更時）

Webクリエイターの方へ

・まずは、簡単なものでいいので、とにかく作ってみる。

・どうしてもアイデアが思いつかない場合は、何かをマネしてみる。

・そして、それを続ける。

小さな「できた」という体験が、

更にアイデアや夢を膨らませてくれます！

Webクリエイターではない方へ

自分で作れなくても、素敵なアイデアは重宝されます！

「こんなことできるのかなー」とか、

「こういうのあったら楽しいよねー」とか、

そんな夢のある会話を友人・知人とすることから始めてみませんか？

いいアイデアの種を思いついたら、開発できる人に提案し

てみたり、「アイデアソン」に出てみるのもいいかもしれませ

ん！

私もAPIを扱えるようになりたいと思ったあなた！

そんな方はぜひこちらを！

（※基本的なHTMLとCSSをわかっている必要有）

【jQueryレッスンブック】

山崎大助 著

http://www.socym.co.jp/book/947

■ポイント

・jQueryを楽しんで学べる！

・１冊目の本として最適！

・ajax（今回APIを扱うのに使用している技術）を

わかりやすく、楽しく学べる！

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