2014年メディア工房勉強会　第3章「Webアプリ制作」

HTML5の制作環境
 ブラウザアプリ
 iPhone、Android アプリ
 Windows 8 アプリ
 Windows ガジェット、Mac ウィジェット
 その他いろいろ
 ここではブラウザで動くWebアプリを作ります！

Webアプリの例
メールYahooメール、Gmail、Active! mail、…
カレンダーYahooカレンダー、Googleカレンダー、
…
ファイル管理、オフィスソフトOneDrive、Dropbox、Googleドライブ、
…
コミュニケーション（SNS） Twitter、Facebook、mixi、…
ゲーム艦これ、モバマス、…
そのほか、画像編集や音楽制作、動画編集サービスまで現れる

Webアプリの利点
 環境を選ばない！
 WindowsでもMacOSでもLinuxでも
 InternetExplorerでもFirefoxでもGoogleChromeでも
 PCでもスマホでもタブレットでもテレビでも
 ブラウザさえあればどこでも動く
 制作のための知識習得が難しくない
 C言語のポインタやJava言語のクラスの概念がない
 文法規則が比較的ゆるい

LINEのダウンロード画面
Objective-C Java
XAML+JavaScri
pt
Java
C++、C#、VB
Java
C++、C#、VB、
HTML+JavaScri
「１つ」のアプリケーションのために「８つ」のプログラムを書く
pt
Objective-C

Web APIを使う
 Web API
 Webを通じて使えるAPI
 様々なWebサービスが持つデータを無償で使うことができる
 Webアプリケーションではよく使われる
 API
 Application Programing Interface
 アプリケーションプログラミングのための窓口
 こちらでコードを書かずともデータや処理が置いてある
 私たちはそれを使うことができる

Web APIを使う
 Web APIの例
 Twitter API
 多くの関連サービスを生んで成功したWeb API
 Google Maps API
 JavaScriptがすごい言語と言われたきっかけ
 Amazon API
 ビジネスモデルで成功したWeb API
そのほか、Yahoo!や楽天、はてな、Youtube、Facebook
など
多くのWebサービスがWeb APIを提供

マッシュアップ
 複数のWeb APIを組み合わせてアプリを作る
「マッシュアップ」っていうらしい
ツンデレサーチ
http://zapanet.info/tundere/
３つのWeb APIを組み合わせたサービ
ス
• はてなブックマークRSSフィード
• はてなキーワード連想語API
• Simple API サムネイル作成API

Ajax
 Web APIから情報を取得するときに使う技術
 Asynchronous JavaScript+XML
 操作不能状態にしないでJavaScriptを使ってXMLなどを取得す
る
 XML
 マークアップする（目印を付ける）ことでデータを記述
 プログラムでの処理が複雑
 JSON
 JavaScriptの文法でデータを記述
 プログラムでの処理が簡単
 最近はこちらが使われることが多い

Ajaxの例
var loader = new XMLHttpRequest();
loader.onreadystatechange = function (){
// 進捗があればこのメソッドを実行
if(loader.readyState == 4){
// 受信した本文
var response = loader.responseText;
}
}
loader.open("GET", "http://なんたら", true);
loader.send("送信する本文");

今回使うのは
 ニコニコ動画新検索API
 クロスドメイン対応、アカウント不要で簡単に利用できる
 利用方法
 http://api.search.nicovideo.jp/api/に検索クエリを送信
 検索結果が返ってくる

使ってみよう
 用意するもの
 テキストエディタ
 ブラウザ
 作るもの
 動画検索画面を作ってみよう

2014年メディア工房勉強会 第3章「Webアプリ制作」

More Related Content

Viewers also liked

Similar to 2014年メディア工房勉強会 第3章「Webアプリ制作」