狠狠撸

狠狠撸Share a Scribd company logo

2014年メディア工房勉强会　第3章「奥别产アプリ制作」

?Download as PPTX, PDF?
?
T
Takashi Endo
1 of 12
Download to read offline
第3章奥别产アプリ制作
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/に検索クエリを送信 ? 検索結果が返ってくる
使ってみよう ? 用意するもの ? テキストエディタ ? ブラウザ ? 作るもの ? 動画検索画面を作ってみよう

More Related Content

2014年メディア工房勉强会　第3章「奥别产アプリ制作」

  • 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 「１つ」のアプリケーションのために「８つ」のプログラムを書く 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. マッシュアップ ? 複数のWeb APIを組み合わせてアプリを作る 「マッシュアップ」っていうらしい ツンデレサーチ http://zapanet.info/tundere/ ３つのWeb APIを組み合わせたサービ ス ? はてなブックマークRSSフィード ? はてなキーワード連想語API ? Simple API サムネイル作成API
  • 9. Ajax ? Web APIから情報を取得するときに使う技術 ? 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. 使ってみよう ? 用意するもの ? テキストエディタ ? ブラウザ ? 作るもの ? 動画検索画面を作ってみよう