第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 
「1つ」のアプリケーションのために「8つ」のプログラムを書く 
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/ 
3つの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アプリ制作」

  • 1.
  • 2.
    HTML5の制作環境  ブラウザアプリ  iPhone、Android アプリ  Windows 8 アプリ  Windows ガジェット、Mac ウィジェット  その他いろいろ  ここではブラウザで動くWebアプリを作ります!
  • 3.
    Webアプリの例 メールYahooメール、Gmail、Active! mail、… カレンダーYahooカレンダー、Googleカレンダー、 … ファイル管理、オフィスソフトOneDrive、Dropbox、Googleドライブ、 … コミュニケーション(SNS) Twitter、Facebook、mixi、… ゲーム艦これ、モバマス、… そのほか、画像編集や音楽制作、動画編集サービスまで現れる
  • 4.
    Webアプリの利点  環境を選ばない!  WindowsでもMacOSでもLinuxでも  InternetExplorerでもFirefoxでもGoogleChromeでも  PCでもスマホでもタブレットでもテレビでも  ブラウザさえあればどこでも動く  制作のための知識習得が難しくない  C言語のポインタやJava言語のクラスの概念がない  文法規則が比較的ゆるい
  • 5.
    LINEのダウンロード画面 Objective-C Java XAML+JavaScri pt Java C++、C#、VB Java C++、C#、VB、 HTML+JavaScri 「1つ」のアプリケーションのために「8つ」のプログラムを書く pt Objective-C
  • 6.
    Web APIを使う Web API  Webを通じて使えるAPI  様々なWebサービスが持つデータを無償で使うことができる  Webアプリケーションではよく使われる  API  Application Programing Interface  アプリケーションプログラミングのための窓口  こちらでコードを書かずともデータや処理が置いてある  私たちはそれを使うことができる
  • 7.
    Web APIを使う Web APIの例  Twitter API  多くの関連サービスを生んで成功したWeb API  Google Maps API  JavaScriptがすごい言語と言われたきっかけ  Amazon API  ビジネスモデルで成功したWeb API そのほか、Yahoo!や楽天、はてな、Youtube、Facebook など 多くのWebサービスがWeb APIを提供
  • 8.
    マッシュアップ  複数のWebAPIを組み合わせてアプリを作る 「マッシュアップ」っていうらしい ツンデレサーチ http://zapanet.info/tundere/ 3つのWeb APIを組み合わせたサービ ス • はてなブックマークRSSフィード • はてなキーワード連想語API • Simple API サムネイル作成API
  • 9.
    Ajax  WebAPIから情報を取得するときに使う技術  Asynchronous JavaScript+XML  操作不能状態にしないでJavaScriptを使ってXMLなどを取得す る  XML  マークアップする(目印を付ける)ことでデータを記述  プログラムでの処理が複雑  JSON  JavaScriptの文法でデータを記述  プログラムでの処理が簡単  最近はこちらが使われることが多い
  • 10.
    Ajaxの例 var loader= new XMLHttpRequest(); loader.onreadystatechange = function (){ // 進捗があればこのメソッドを実行 if(loader.readyState == 4){ // 受信した本文 var response = loader.responseText; } } loader.open("GET", "http://なんたら", true); loader.send("送信する本文");
  • 11.
    今回使うのは  ニコニコ動画新検索API  クロスドメイン対応、アカウント不要で簡単に利用できる  利用方法  http://api.search.nicovideo.jp/api/に検索クエリを送信  検索結果が返ってくる
  • 12.
    使ってみよう  用意するもの  テキストエディタ  ブラウザ  作るもの  動画検索画面を作ってみよう