Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5 / Web APIの上手な使い方

1,529 views

Published on

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

Published in: Internet
  • Be the first to comment

HTML5 / Web APIの上手な使い方

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

×