Firefoxosハンズオン

  • 9,386 views
Uploaded on

2014/2/16の関東Firefox OS 勉強会6th ハンズオンで用いた資料です。

2014/2/16の関東Firefox OS 勉強会6th ハンズオンで用いた資料です。

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
9,386
On Slideshare
0
From Embeds
0
Number of Embeds
23

Actions

Shares
Downloads
55
Comments
0
Likes
27

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Firefox OS ハンズオン 2014 / 5 / 31 for 名古屋つ部 ! @kassy_kz
  • 2. 自己紹介 名前 • @kassy_kz (かっしー) • 横浜 Android PF部によく出没 • Effective Android(共著) • 同人活動 (Tech-orz) - コミックマーケットC82, C84出展 - Maker Faire Tokyo 2013 出展 特徴
  • 3. 本日の進行 対象者 • Firefox OS初心者 • Firefox OS初心者 内容 • Firefox OSと仲良くなる • Firefox OSでTwitterClientをつくる • アプリを公開する ハッシュタグ: #tsubufx
  • 4. 事前準備
  • 5. 事前準備は大丈夫ですか? • Firefoxブラウザのインストール • FirefoxOS Simulatorのインストール • Twitterのアカウントを取得しておく • エディタのインストール
  • 6. Firefox ブラウザをインストール • http://www.mozilla.jp/ からFirefoxをダウンロード
  • 7. シミュレーターをインストール • Firefoxを起動して メニュー -> 開発ツール-> アプリマネージャを選択
  • 8. シミュレーターをインストール • シミュレータを起動-> 追加
  • 9. シミュレーターをインストール
  • 10. Firefox OSシミュレーター起動 • Firefox OS を起動してください
  • 11. Firefox OSシミュレーター起動 • シミュレーターの起動が確認できればOK!
  • 12. エディタについて 以下の機能を備えたものを… • 入力コード補完機能 • シンタックスハイライト機能 • コード自動整形機能 なにそれ?って思った人は問答無用です! 大人しく Sublime Text 2 をインストールしてください http://www.sublimetext.com/2
  • 13. Sublime Text2をパワーアップ 1/2 package controlのインストール [View]->[Show Console] コンソールに文字列(これ)を貼り付け ここに貼り付け 再起動
  • 14. Sublime Text2をパワーアップ 2/2 プラグインのインストール Ctrl+Shift+P (Win) Command+Shift+P (Mac) 窓に[install]と打ち込み エンター 窓に[andyjs]と打ち込み エンター これでandyjsプラグイン がインストールされる ※他にもjQueryプラグインとかも インストールすると便利
  • 15. 1. Firefox OSと仲良くなる • HTMLで Hello World • JavaScriptで Hello JS • cssを使う • Firefox OSらしいUIにする • 画面遷移を実装する • アプリ連携を体験する
  • 16. 1. Firefox OSと仲良くなる • HTMLで Hello World • JavaScriptで Hello JS • cssを使う • Firefox OSらしいUIにする • 画面遷移を実装する • アプリ連携を体験する
  • 17. HTMLで Hello World • フォルダを作ります HelloFirefox • テキストファイルを作ります HelloFirefox index.html
  • 18. HTMLで Hello World • index.htmlに以下の記述を HelloFirefox index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello Firefox OS</title> </head> <body> <h1>Hello Firefox</h1> </body> </html> ソースリンク
  • 19. コーディングのテク htmlとだけ打ち込んで ※Sublime Text2の場合 tabキー押下 補完でひな形が!
  • 20. ナニを書いたのか • <(要素名)>〜</(要素名)>で要素を囲む構造 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello Firefox OS</title> </head> <body> <h1>Hello Firefox</h1> </body> </html> HelloFirefox index.html <html> ヘッダ ボディ
  • 21. HTMLで Hello World • manifest.webappを作成して以下の記述を... HelloFirefox manifest.webapp ソースリンク { "name": "HelloFirefox", "description": "My First app", "launch_path": "/index.html", "icons": { "128": "/img/icons/icon_128.png" } }
  • 22. 何を書いたのか • アプリに関する情報を記述 HelloFirefox manifest.webapp { "name": "HelloFirefox", "description": "My First app", "launch_path": "/index.html", "icons": { "128": "/img/icons/icon_128.png" } } アプリに関する 情報 アイコンのパス
  • 23. シミュレーターへのアプリインストール パッケージアプリを追加HelloFirefox を選択 更新ボタンを押す
  • 24. アプリ実行
  • 25. 以降、アプリ更新するときは.... アプリタブから更新ボタン ちょっとめんどい 端末タブから停止して
  • 26. アプリのアイコンを 設定しましょう • 自作するも良し • フリー素材を取ってきても良し • 本日は特別アイコンを贈呈 この位置に配置 こちらからDL HelloFirefox img icons icon_128.png
  • 27. アプリ更新 アイコンが 変わればOK
  • 28. 1. Firefox OSと仲良くなる • HTMLで Hello World • JavaScriptで Hello JS • cssを使う • Firefox OSらしいUIにする • 画面遷移を実装する • アプリ連携を体験する
  • 29. JavaScriptで Hello JS • index.htmlに追記(赤い部分) HelloFirefox index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello Firefox OS</title> <script src="js/app.js"></script> </head> <body> <h1>Hello Firefox</h1> <button id="firstButton">Click</button> <div id="firstDiv"></div> </body> </html> ソースリンク
  • 30. JavaScriptで Hello JS • index.htmlに追記 HelloFirefox index.html スクリプトの パス追加 ボタンと div要素追加 id重要! 後で出てきます <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello Firefox OS</title> <script src="js/app.js"></script> </head> <body> <h1>Hello Firefox</h1> <button id="firstButton">Click</button> <div id="firstDiv"></div> </body> </html>
  • 31. JavaScriptで Hello JS • jsフォルダ、app.jsファイルを追加する window.onload = function() { document.getElementById("firstButton").onclick = function() { document.getElementById("firstDiv").innerHTML = "JSは最高だぜ"; }; }; ソースリンク HelloFirefox js app.js
  • 32. コメントを書きましょう • htmlファイルの場合 <!DOCTYPE html> <html> <body> • jsファイルの場合 /* この部分はコメント */ window.onload = function() { // この行はコメント document.getElementById(“**”).onclick = function() { document.getElementById(“**”).innerHTML = “**”; }; }; <!-- ここはコメント --> <h1>Hello Firefox</h1> </body> </html> <!— 〜 —>で 囲った部分はコメント /* 〜 */で 囲った部分はコメント // で始まる行は コメント
  • 33. 何を書いたのか HelloFirefox js app.js div要素参照 さっきのidを 参照してる window.onload = function() { document.getElementById("firstButton").onclick = function() { document.getElementById("firstDiv").innerHTML = "JSは最高だぜ"; }; }; ボタン要素参照
  • 34. window.onload = function() { ボタンクリック時の イベントを記述 document.getElementById("firstButton").onclick = function() { document.getElementById("firstDiv").innerHTML = "JSは最高だぜ"; }; }; 何を書いたのか HelloFirefox js app.js
  • 35. 画面ロード時に 実行する関数 window.onload = function() { document.getElementById("firstButton").onclick = function() { document.getElementById("firstDiv").innerHTML = "JSは最高だぜ"; }; }; 何を書いたのか HelloFirefox js app.js
  • 36. アプリ更新 クリックで 文字が表示
  • 37. ライブラリを使う jQueryを落とすhttp://jquery.com/download/ Download the uncompressed, development jQuery 2.1.1 ここに配置 HelloFirefox js lib jquery-2.1.1.js
  • 38. • index.htmlに追記 HelloFirefox index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello Firefox OS</title> <script src="js/lib/jquery-2.1.1.js"></script> <script src="js/app.js"></script> </head> <body> ... ライブラリを使う ソースリンク
  • 39. • index.htmlに追記 HelloFirefox index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello Firefox OS</title> <script src="js/lib/jquery-2.1.1.js"></script> <script src="js/app.js"></script> </head> <body> ... ライブラリの パス追加 (順番重要) ライブラリを使う
  • 40. • app.jsを編集する HelloFirefox js app.js window.onload = function() { document.getElementById("firstButton").onclick = function() { document.getElementById("firstDiv").innerHTML = "JSは最高だぜ"; }; $("#firstButton").click(function() { $("#firstDiv").text("JSは最高だぜ"); }); }; ライブラリを使う ソースリンク
  • 41. 何を書いたのか • app.jsを編集する HelloFirefox js app.js ボタン要素参照 div要素参照 jQueryを使う場合 #(要素id名) .(要素クラス名) で参照する window.onload = function() { $("#firstButton").click(function() { $("#firstDiv").text("JSは最高だぜ"); }); };
  • 42. アプリ更新 同じ挙動をすればOK
  • 43. Sublime Text2の便利な使い方 フォルダを ドラッグ ファイル一覧が!
  • 44. 1. Firefox OSと仲良くなる • HTMLで Hello World • JavaScriptで Hello JS • cssを使う • Firefox OSらしいUIにする • 画面遷移を実装する • アプリ連携を体験する
  • 45. cssで装飾する 1/2 • index.htmlに追記 HelloFirefox index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Hello Firefox OS</title> <script src="js/lib/jquery-2.1.1.js"></script> <script src="js/app.js"></script> <link rel="stylesheet" href="css/app.css"/> </head> <body> ソースリンク cssのパス
  • 46. cssで装飾する 2/2 • cssフォルダ、app.cssファイルを追加する HelloFirefox css app.css #firstDiv { margin-top:10px; font-size:32px; color:#ff0000; } ソースリンク div要素参照 (idで参照) ※cssでググって、いろんなパラメータをいじってみて下さい
  • 47. アプリ更新 表示スタイル が変われば 成功
  • 48. 開発ツールを使ってみる 「デバッグ」
  • 49. 開発ツールを使ってみる インスペクタ 部品の配置を確認できます スタイルエディタ cssのパラメータを変更 デバッガ JavaScriptのデバッグ
  • 50. 1. Firefox OSと仲良くなる • HTMLで Hello World • JavaScriptで Hello JS • cssを使う • Firefox OSらしいUIにする • 画面遷移を実装する • アプリ連携を体験する
  • 51. Firefox OSらしいUIとは Building Blocksのページ http://buildingfirefoxos.com/ サンプルアプリを インストールしてみよう ※シミュレーターで https://marketplace.firefox.com/app/building-blocks
  • 52. Building Blocksライブラリを入手 http://buildingfirefoxos.com/
  • 53. Building Blocksを使う準備 style, style_unstable, icons, *cssを ! すべて 直下にコピーする コピー HelloFirefox
  • 54. Building Blocks を取り込む <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no" /> <title>Building blocks demo</title> <!-- Building blocks --> <link rel="stylesheet" href="style/action_menu.css"> <link rel="stylesheet" href="style/buttons.css"> <link rel="stylesheet" href="style/confirm.css"> !!! .landscape section[role="region"]#drawer > header:first-child { /* Whatever needs to be changed on landscape */ } </style> </head> <body> コピー (Building-Blocks) / app.htmlの下記部分を、コピー 1 2 3 4 5 6 7 8 9 10 11 199 200 201 202 203 204
  • 55. Building Blocks を取り込む コピーしたテキストを の<head>タグ内にペースト <head> <meta charset="utf-8" /> <title>Hello Firefox OS</title> <script src="js/lib/jquery-2.1.1.js"></script> <script src="js/app.js"></script> !! <!-- Building blocks --> <link rel="stylesheet" href="style/action_menu.css"> <link rel="stylesheet" href="style/buttons.css"> ! ! /* Whatever needs to be changed on landscape */ } </style> ! <link rel="stylesheet" href="css/app.css"/> ! </head> ペースト HelloFirefox index.html ソースリンク
  • 56. コーディングのテク インデントぐちゃぐちゃコードを全選択してから [Edit]->[Line]->[Reindent]で整形
  • 57. アプリに手を加える HelloFirefox index.html <body> <section role="region"> <header class="fixed"> <h1>Hello Building Blocks</h1> </header> <article class="content scrollable header"> <button class="recommend" id="firstButton">click</button> <div id="firstDiv"></div> </article> </section> </body> ソースリンク index.htmlの<body>タグ内部を編集
  • 58. 何を書いたのか HelloFirefox index.html らしいヘッダ らしいボタン <body> <section role="region"> <header class="fixed"> <h1>Hello Building Blocks</h1> </header> <article class="content scrollable header"> <button class="recommend" id="firstButton">click</button> <div id="firstDiv"></div> </article> </section> ! </body>
  • 59. アプリ更新 らしいヘッダ らしいボタン
  • 60. 1. Firefox OSと仲良くなる • HTMLで Hello World • JavaScriptで Hello JS • cssを使う • Firefox OSらしいUIにする • 画面遷移を実装する • アプリ連携を体験する
  • 61. 画面遷移ってどうやるの HelloFirefox index.html <body> <section role="region"> <header> <h1>Hello Building Blocks</h1> </header> <div> <button class="recommend" id="firstButton">click</button> </div> <div id="firstDiv"></div> <a href="index2.html">ページ遷移</a> </section> </body> (リンク貼りゃいいんだよ)
  • 62. 画面遷移成功?!
  • 63. あれ. . . (戻れない)
  • 64. 一体どうすればいいんだ... • Building Blocksの画面遷移を真似する
  • 65. <section role="region" data-position="current"> <header class="fixed"> <h1>Hello Building Blocks</h1> </header> <article class="content scrollable header"> <h1>1番目のページ</h1> <button class="recommend" id="firstButton">click</button> <div id="firstDiv"></div> </article> </section> ! <section role="region" id="newSection" data-position="right"> <header class="fixed"> <a id="backButton" href="#"> <span class="icon icon-back">back</span> </a> <h1>Next Page</h1> </header> <article class="content scrollable header"> <h1>2番めのページ</h1> </article> </section> まるパクする (1/2) ソースリンクHelloFirefox index.html
  • 66. HelloFirefox js app.js ソースリンク まるパクする (2/2) window.onload = function() { $("#firstButton").click(function () { $("#firstDiv").text("JSは最高だぜ"); }); $("#firstButton").click(function() { document.querySelector('#newSection').className = 'current'; document.querySelector('[data-position="current"]').className = 'left'; }); ! $("#backButton").click(function() { document.querySelector('#newSection').className = 'right'; document.querySelector('[data-position="current"]').className = 'current'; }); };
  • 67. ページ遷移無事成功
  • 68. 1. Firefox OSと仲良くなる • HTMLで Hello World • JavaScriptで Hello JS • cssを使う • Firefox OSらしいUIにする • 画面遷移を実装する • アプリ連携を体験する
  • 69. アプリ連携とは... AndroidでいうIntentみたいなもの 連携先アプリとは... ・ブラウザ ・電話 ・カメラ  等...
  • 70. アプリ連携(ブラウザ)を体験してみる 1/2 ソースリンク !!! HelloFirefox index.html <body> <section role="region" data-position="current"> <header class="fixed"> <h1>Hello Building Blocks</h1> </header> <article class="content scrollable header"> <h1>1番目のページ</h1> <button class="recommend" id="firstButton">click</button> <div id="firstDiv"></div> <button class="recommend" id="secondButton">web</button> </article> </section> <section role="region" id="newSection" data-position="right"> <header class="fixed"> <a id="backButton" href="#"> <span class="icon icon-back">back</span> </a> <h1>Next Page</h1> </header> <article class="content scrollable header"> <h1>2番めのページ</h1> </article> </section> ボタン追加
  • 71. アプリ連携(ブラウザ)を体験してみる 2/2 ソースリンク HelloFirefox js app.js window.onload = function() { ! ! ! $("#secondButton").click(function() { var myUrl = “(好きなURL)”; var activity = new MozActivity({ name:"view", data:{ type:"url", url:myUrl } }); }); }
  • 72. window.onload = function() { ! ! $("#secondButton").click(function() { var myUrl = “(好きなURL)”; var activity = new MozActivity({ name:"view", data:{ type:"url", url:myUrl } }); }); } 何を書いたのか FirefoxTwitter js app.js ブラウザを 呼び出す コード
  • 73. アプリ更新 ブラウザ呼び出し成功
  • 74. 番外編 アプリジェネレータを使う • 環境準備 • アプリひな形をダウンロード • ライブラリを追加 • アプリ実装 • アプリデプロイ ※本番外編はコマンド操作が必要になります
  • 75. 環境準備 • node.jsのインストール http://nodejs.org/ • voloのインストール(コマンドラインから) 番外編 $ npm install -g volo
  • 76. アプリひな形ダウンロード 番外編 • (任意の場所にcdしてから) $ volo create myproject mozilla/mortar-app-stub • Firefox OSアプリ一式がダウンロードされる (アプリ本体はwww配下)
  • 77. ライブラリを追加 番外編 $ cd myproject $ volo add jquery • www/js/lib 配下に自動的にライブラリがインストールされる
  • 78. アプリ実装 番外編 • index.html <body> <script type="text/javascript" data-main="js/init.js" src="js/lib/require.js"></script> <button id="firstButton">Click</button> <div id="firstDiv"></div> ! </body> • app.js define(function(require) {  (中略) ! $("#firstButton").click(function() { $("#firstDiv").text("JSは最高だぜ"); }); }); ※require.js特有の書き位置に注意
  • 79. アプリデプロイ 番外編 • myproject配下で $ volo serve • シミュレータのブラウザで http://localhost:8008 にアクセス アプリ更新の際、いちいちアンインストールすることなく 更新ボタン一つで動作確認が出来るようになります
  • 80. 2. Firefox OSでTwitter Clientを作る • Twitter Developers に登録 • OAuth関連処理を実装する • ツイッタークライアントぽいUIを作る • タイムラインを取得する • ツイート機能を実装する • 画像付きツイート機能を実装する
  • 81. 新規プロジェクトで開始 • 新規フォルダを作ります  HelloFirefox をまるコピします HelloFirefox コピーFirefoxTwitter
  • 82. アプリ情報を書き換える • manifest.webappのアプリ情報を 適当に書き換えて下さい(自由) { "name": "FirefoxTwitter", "description": "My First TwitterClient", ! • index.htmlのヘッダ情報を適当に 書き換えて下さい(自由) <header class="fixed"> <h1>Hello Twitter</h1> </header> FirefoxTwitter manifest.webapp FirefoxTwitter index.html
  • 83. 2. Firefox OSでTwitter Clientを作る • Twitter Developers に登録 • OAuth関連処理を実装する • ツイッタークライアントぽいUIを作る • タイムラインを取得する • ツイート機能を実装する • 画像付きツイート機能を実装する
  • 84. Twitter Developersにアプリを登録 https://apps.twitter.com/ Sign inをクリックCreate New Appをクリック
  • 85. アプリ名 アプリの説明 サイトURL 持ってなければhttp://example.comとでも (空白でOK) チェック 確定 アプリ情報を入力 規約を読んで
  • 86. アプリ名について注意 以下の名前は使えないので注意 • 既存のTwitterアプリと被る名前 • [Twitter] という文字列を含む名前
  • 87. APIキー発行 後でつかいます 他人には教えない
  • 88. 設定変更しておく Read and Writeに この変更をしないとWrite(つぶやき)ができない
  • 89. 2. Firefox OSでTwitter Clientを作る • Twitter Developers に登録 • OAuth関連処理を実装する • ツイッタークライアントぽいUIを作る • タイムラインを取得する • ツイート機能を実装する • 画像付きツイート機能を実装する
  • 90. OAuthについてさらっとおさらい ユーザー Twitter アプリ 認証 認証 パスワード アプリ使用許可 使う (パスワード教えない) 機能呼び出し
  • 91. OAuthのワークフロー ユーザーアプリTwitter Consumer Keyを使って、 リクエストトークンを取得 リクエストトークンからユーザー許可を 求めるURLを生成してブラウザで表示 ユーザーがアプリ使用を許可、 TwitterはPINを表示(ユーザー認証あり) ユーザーがアプリにPINを入力 Consumer Key, リクエストトークン、 PINを使ってアクセストークンを取得 以後、アクセストークンを使って Twitterの各種機能を呼び出す 1. 2. 3. 4. 5. 6.
  • 92. ライブラリがないと死ぬ • 今回は jsOAuth を使わせていただく https://github.com/bytespider/jsOAuth
  • 93. ライブラリダウンロード https://github.com/bytespider/jsOAuth/tree/master/dist この位置に配置 FirefoxTwitter js lib jsOAuth-1.3.6.js
  • 94. index.htmlに追記 FirefoxTwitter index.html ソースリンク <head> <meta charset="utf-8" /> <title>Hello Firefox OS</title> <script src="js/lib/jquery-2.1.1.js"></script> <script src="js/lib/jsOAuth-1.3.6.js"></script> <script src=“js/app.js"></script> ! ! !
  • 95. このライブラリ、 そのままでは使えない • 理由 XmlHttpRequestの クロスドメイン通信制約による
  • 96. クロスドメイン制約とは ユーザー Twitter アプリ × 両方と同時に通信できない ! (やや語弊あり、正確には調べて下さい)
  • 97. 一般的なクロスドメイン回避はどうやってるか HTTP Request Http Response HTTPレスポンスのヘッダに 特別な許可を含めることで 同時通信を認める 少なくともパッケージ型のアプリではこの手は使えない
  • 98. クロスドメイン制約回避方法 • XmlHttpRequestオブジェクト作成時 に引数を追加 XMLHttpRequest({mozSystem: true}); • manifestにパーミッションを追記 "type": "privileged", "permissions": { "systemXHR": { "description": "for OAuth" } } ※Firefox OSの場合
  • 99. Firefox OS アプリ種別について 標準アプリ特権アプリ公認アプリ (privileged) (certified) 特権アプリはFirefox Marketplaceによる通常 よりも厳格なレビュー を経て承認される必要 があります。 認定アプリ作成にはOEM、 キャリアの承認が必要とな るため、一般のアプリ開発 者は本アプリを作成するこ とはできません。 特別な権限を必要と しない 標準のアプリです。 (つまり絶望)
  • 100. Firefox OS アプリ種別について 標準アプリ特権アプリ公認アプリ (privileged) (certified) 特権アプリはFirefox Marketplaceによる通常 よりも厳格なレビュー を経て承認される必要 があります。 認定アプリ作成にはOEM、 キャリアの承認が必要とな るため、一般のアプリ開発 者は本アプリを作成するこ とはできません。 特別な権限を必要と しない 標準のアプリです。 (つまり絶望)
  • 101. XmlHttpRequestに引数追加 FirefoxTwitter js lib jsOAuth-1.3.6.js } else if (typeof require !== 'undefined') { // CommonJS require try { // XHR = new require("xhr").XMLHttpRequest(); XHR = new require("xhr").XMLHttpRequest({mozSystem: true}); } catch (e) { // module didn't expose correct API or doesn't exists if (typeof global.XMLHttpRequest !== "undefined") { // XHR = new global.XMLHttpRequest(); XHR = new global.XMLHttpRequest({mozSystem: true}); } else { throw "No valid request transport found."; } } } else if (typeof global.XMLHttpRequest !== "undefined") { // W3C //XHR = new global.XMLHttpRequest(); XHR = new global.XMLHttpRequest({mozSystem: true}); } else { throw "No valid request transport found."; } 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 ソースリンク
  • 102. Manifestにパーミッション追記 FirefoxTwitter manifest.webapp { "name": "FirefoxTwitter", "description": "My First Twitter Client", "launch_path": "/index.html", "icons": { "128": "/img/icons/icon_128.png" }, "type": "privileged", "permissions": { "systemXHR": { "description": "for OAuth" } } } ソースリンク
  • 103. OAuth関連処理を実装する 1/4 FirefoxTwitter js app.js ソースリンク // oauthオブジェクト var oauth; ! window.onload = function () { ! // OAuth関連の処理を開始する firstOAuthFunc(); } ! OAuth処理を開始する関数 (すぐ後で実装)
  • 104. OAuth関連処理を実装する 2/4 FirefoxTwitter js app.js /** * OAuth関連で最初に行う処理 */ var firstOAuthFunc = function () { ! // 最初にOAuthオブジェクトに喰わせる値たち var config = { consumerKey:"あなたのコンシューマーキー", consumerSecret:"あなたのコンシューマーシークレット", requestTokenUrl:"https://api.twitter.com/oauth/request_token", authorizationUrl:"https://api.twitter.com/oauth/authorize", accessTokenUrl:"https://api.twitter.com/oauth/access_token" }; ! // OAuthのオブジェクトを作成 oauth = new OAuth(config); ! // 1. consumer key と consumer secret を使って、リクエストトークンを取得する oauth.fetchRequestToken(successFetchRequestToken, failureHandler); };
  • 105. FirefoxTwitter js app.js /** * OAuth関連で最初に行う処理 */ var firstOAuthFunc = function () { ! // 最初にOAuthオブジェクトに喰わせる値たち var config = { consumerKey:"あなたのコンシューマーキー", consumerSecret:"あなたのコンシューマーシークレット", requestTokenUrl:"https://api.twitter.com/oauth/request_token", authorizationUrl:"https://api.twitter.com/oauth/authorize", accessTokenUrl:"https://api.twitter.com/oauth/access_token" }; ! // OAuthのオブジェクトを作成 oauth = new OAuth(config); ! // 1. consumer key と consumer secret を使って、リクエストトークンを取得 oauth.fetchRequestToken(successFetchRequestToken, failureHandler); }; さっき取得したキー OAuthオブジェクト 生成 (前記1~6のウチ) 1の処理 何を書いたのか OAuthオブジェクト に与える値
  • 106. /** * OAuth関連で最初に行う処理 */ var firstOAuthFunc = function () { ! // 最初にOAuthオブジェクトに喰わせる値たち var config = { consumerKey:"あなたのコンシューマーキー", consumerSecret:"あなたのコンシューマーシークレット", requestTokenUrl:"https://api.twitter.com/oauth/request_token", authorizationUrl:"https://api.twitter.com/oauth/authorize", accessTokenUrl:"https://api.twitter.com/oauth/access_token" }; ! // OAuthのオブジェクトを作成 oauth = new OAuth(config); ! // 1. consumer key と consumer secret を使って、リクエストトークンを取得 oauth.fetchRequestToken(successFetchRequestToken, failureHandler); }; 何を書いたのか FirefoxTwitter js app.js 失敗時のハンドラ 成功時のハンドラ (すぐ後で出てきます)
  • 107. コールバック関数とは var successFetchRequstToken = function() {/* 成功した時の処理 */ } var failureFetchRequstToken = function() {/* 失敗した時の処理 */ } oauth.fetchRequestToken(successFetchRequestToken, failureHandler); あなたの プログラム ライブラリ ハンドラを渡す ライブラリが処理 ! ハンドラを呼び出す ハンドラ定義 ハンドラ渡す
  • 108. OAuth関連処理を実装する 3/4 FirefoxTwitter js app.js /** * 1の処理の成功時のコールバック関数 */ var successFetchRequestToken = function (authUrl) { ! // 2. リクエストトークンを使い、ユーザにアクセス許可を求めるURLを生成して ブラウザを起動 // 3. ブラウザで認証を行い、ユーザーにPINが表示される var activity = new MozActivity({ name:"view", data:{ type:"url", url:authUrl } }); ! // 4. アプリで用意したダイアログにPIN を入力してもらう var pin = prompt("Please enter your PIN", ""); ! // oauthオブジェクトにPINをセット oauth.setVerifier(pin); ! // 5. consumer key, consumer secret, リクエストトークン, PIN を使って、アクセストークンを取得する oauth.fetchAccessToken(successFetchAccessToken, failureHandler); };
  • 109. 何を書いたのか FirefoxTwitter js app.js /** * 1の処理の成功時のコールバック関数 */ var successFetchRequestToken = function (authUrl) { ! // 2. リクエストトークンを使い、ブラウザを起動 // 3. ブラウザで認証を行い、ユーザーにPINが表示される var activity = new MozActivity({ name:"view", data:{ type:"url", url:authUrl } }); ! // 4. アプリで用意したダイアログにPIN を入力してもらう var pin = prompt("Please enter your PIN", ""); ! // oauthオブジェクトにPINをセット oauth.setVerifier(pin); ! // 5. アクセストークンを取得する oauth.fetchAccessToken(successFetchAccessToken, failureHandler); }; 1の処理成功時 のハンドラ関数 ブラウザで 認証画面を開く PINを入力する 窓を用意 OAuthオブジェク トにPINセット アクセストークン を取得しにいく
  • 110. 何を書いたのか FirefoxTwitter js app.js /** * 1の処理の成功時のコールバック関数 */ var successFetchRequestToken = function (authUrl) { ! // 2. リクエストトークンを使い、ブラウザを起動 // 3. ブラウザで認証を行い、ユーザーにPINが表示される var activity = new MozActivity({ name:"view", data:{ type:"url", url:authUrl } }); ! // 4. アプリで用意したダイアログにPIN を入力してもらう var pin = prompt("Please enter your PIN", ""); ! // oauthオブジェクトにPINをセット oauth.setVerifier(pin); ! // 5. アクセストークンを取得する oauth.fetchAccessToken(successFetchAccessToken, failureHandler); }; 失敗時のハンドラ 成功時のハンドラ (すぐ後で出てきます)
  • 111. /** * 5の処理の成功時のコールバック関数 */ var successFetchAccessToken = function () { alert("success oauth"); }; ! /** * 各処理失敗時のコールバック関数 */ var failureHandler = function (data) { alert("failure"); }; OAuth関連処理を実装する 4/4 FirefoxTwitter js app.js
  • 112. 何を書いたのか /** * 5の処理の成功時のコールバック関数 */ var successFetchAccessToken = function () { alert("success oauth"); }; ! /** * 各処理失敗時のコールバック関数 */ var failureHandler = function (data) { alert("failure"); }; FirefoxTwitter js app.js 5の処理が成功 したときのハンドラ アラートを出す処理 (引数は出力文字) 失敗ハンドラ (1,5の処理で共通)
  • 113. アプリ更新 アプリを切り替える Successとでれば成功 ブラウザ起動 アプリ起動
  • 114. 課題 ! このままでは毎回認証操作が必要 1回目2回目3回目 取得したアクセストークンを保存して 2回目以降使えるようにしたい
  • 115. var successFetchAccessToken = function () { // 取得したアクセストークンをWebStorageで保存する(次回以降のため) localStorage.setItem("accessTokenKey", oauth.getAccessTokenKey()); localStorage.setItem("accessTokenSecret", oauth.getAccessTokenSecret()); alert("success oauth"); }; アクセストークンを保存する処理を追加 1/2 FirefoxTwitter js app.js ソースリンク
  • 116. var successFetchAccessToken = function () { // 取得したアクセストークンをWebStorageで保存する(次回以降のため) localStorage.setItem("accessTokenKey", oauth.getAccessTokenKey()); localStorage.setItem("accessTokenSecret", oauth.getAccessTokenSecret()); alert("success oauth"); }; 何を書いたのか FirefoxTwitter js app.js 第一引数: 保存する値の名前 第二引数: 保存する値 Webストレージ 機能で値を保存 (AccessTokenKeyと AccessTokenSecret)
  • 117. アクセストークンを保存する処理を追加 2/2 FirefoxTwitter js app.js var firstOAuthFunc = function () { ! // OAuthのオブジェクトを作成 oauth = new OAuth(config); ! // 保存してあるアクセストークンがあればそれをロードする var accessTokenKey = localStorage.getItem("accessTokenKey"); var accessTokenSecret = localStorage.getItem("accessTokenSecret"); ! // アクセストークンが保存されていた場合 if (accessTokenKey) { // 保存していたアクセストークンをセットする oauth.setAccessToken(accessTokenKey, accessTokenSecret); ! // アクセストークンが保存されていなかった場合 } else { // 1. consumer key と consumer secret を使って、リクエストトークンを取得する oauth.fetchRequestToken(successFetchRequestToken, failureHandler); } };
  • 118. アクセストークンを保存する処理を追加 2/2 FirefoxTwitter js app.js var firstOAuthFunc = function () { ! // OAuthのオブジェクトを作成 oauth = new OAuth(config); ! // 保存してあるアクセストークンがあればそれをロードする var accessTokenKey = localStorage.getItem("accessTokenKey"); var accessTokenSecret = localStorage.getItem("accessTokenSecret"); Webストレージで 値を取り出し (AccessTokenと AccessTokenSecret) ! // アクセストークンが保存されていた場合 if (accessTokenKey) { // 保存していたアクセストークンをセットする oauth.setAccessToken(accessTokenKey, accessTokenSecret); 値の取り出しに成功 した場合、それを使う ! // アクセストークンが保存されていなかった場合 } else { // 1. consumer key と consumer secret を使って、リクエストトークンを取得 oauth.fetchRequestToken(successFetchRequestToken, failureHandler); } }; 失敗した場合、 OAuth認証処理
  • 119. 2. Firefox OSでTwitter Clientを作る • Twitter Developers に登録 • OAuth関連処理を実装する • ツイッタークライアントぽいUIを作る • タイムラインを取得する • ツイート機能を実装する • 画像付きツイート機能を実装する
  • 120. ツイッタークライアントぽいUIの設計 タイムライン画面投稿画面 投稿画面へTL画面へ投稿 続き取得TL更新 UI部品はすべてBuilding Blocksの流用です
  • 121. <body> <section role="region" data-position="current"> <header class="fixed"> <menu type="toolbar"> <a href="#" id="newPostButton"> <span class="icon icon-compose">edit</span> </a> </menu> <h1>Timeline</h1> </header> <div role="toolbar"> <ul> <li> <button id="getMoreButton" class="action-icon download">getmore</button> </li> </ul> <ul> <li> <button id="updateButton" class="action-icon email-sync">update</button> </li> </ul> </div> <article class="scrollable header"> <div> <ul id="tweetBox"> </ul> </div> </article> </section> ツイッタークライアントぽいUIを作る 1/2 FirefoxTwitter index.html ソースリンク
  • 122. 何を書いたのか FirefoxTwitter index.html ソースリンク タイムラインページ<section role="region" data-position="current"> <header class="fixed"> <menu type="toolbar"> <a href="#" id=“newPostButton"> <span class="icon icon-compose”>edit</span> </a> </menu> <h1>Timeline</h1> </header> <div role="toolbar"> <ul> <li> <button id="getMoreButton" class="action-icon download">getmore </button> </li> </ul> <ul> <li> <button id="updateButton" class="action-icon email-sync”>update </button> </li> </ul> </div> <article class="scrollable header"> <div> <ul id="tweetBox"> </ul> </div> </article> </section> ヘッダ部(上部帯) フッタ部(下部帯) ヘッダ部(上部帯)
  • 123. 何を書いたのか FirefoxTwitter index.html ソースリンク タイムラインページ<section role="region" data-position="current"> <header class="fixed"> <menu type="toolbar"> <a href="#" id=“newPostButton"> <span class="icon icon-compose”>edit</span> </a> </menu> <h1>Timeline</h1> </header> <div role="toolbar"> <ul> <li> <button id="getMoreButton" class="action-icon download">getmore </button> </li> </ul> <ul> <li> <button id="updateButton" class="action-icon email-sync”>update </button> </li> </ul> </div> <article class="scrollable header"> <div> <ul id="tweetBox"> </ul> </div> </article> </section> 新規作成ボタン (画面遷移) 続きを取得ボタン 更新ボタン 取得したツイートを 表示する場 id重要! 後で出てきます
  • 124. <section role="region" id="newTweetSection" data-position="right"> <header class="fixed"> <a id="backButton" href="#"> <span class="icon icon-back">back</span> </a> <menu type="toolbar"> <a href="#" id="statusUpdateButton"><span class="icon icon-send">edit</span></a> </menu> <h1>New Tweet</h1> </header> <article class="content scrollable header"> <div> <form> <p> <textarea id="newTweetText" placeholder="input tweet text" required> </textarea> </p> </form> </div> <form id="aaa" action="#" enctype="multipart/form-data" method="post"> <div class="fileArea"> <div class="fileName"></div> <div class="chooseFile"> 画像を添付する <input type="file" id="file" name="my_file"> </div> </div> </form> </article> </section> </body> ツイッタークライアントぽいUIを作る 2/2 FirefoxTwitter index.html
  • 125. FirefoxTwitter index.html <section role="region" id="newTweetSection" data-position="right"> <header class="fixed"> <a id="backButton" href="#"> <span class="icon icon-back">back</span> </a> <menu type="toolbar"> <a href="#" id=“statusUpdateButton"> <span class="icon icon-send”>edit</span> </a> </menu> <h1>New Tweet</h1> </header> <article class="content scrollable header"> <div> <form> <p> <textarea id="newTweetText" placeholder="input tweet text" required> </textarea> </p> </form> </div> <form id="aaa" action="#" enctype="multipart/form-data" method="post"> <div class="fileArea"> <div class="fileName"></div> <div class="chooseFile"> 画像を添付する <input type="file" id="file" name="my_file"> </div> </div> </form> </article> </section> </body> 投稿のページ ヘッダ 本体部 何を書いたのか
  • 126. FirefoxTwitter index.html <section role="region" id="newTweetSection" data-position="right"> <header class="fixed"> <a id="backButton" href="#"> <span class="icon icon-back">back</span> </a> <menu type="toolbar"> <a href="#" id=“statusUpdateButton"> <span class="icon icon-send”>edit</span> </a> </menu> <h1>New Tweet</h1> </header> <article class="content scrollable header"> <div> <form> <p> <textarea id="newTweetText" placeholder="input tweet text" required> </textarea> </p> </form> </div> <form id="aaa" action="#" enctype="multipart/form-data" method="post"> <div class="fileArea"> <div class="fileName"></div> <div class="chooseFile"> 画像を添付する <input type="file" id="file" name="my_file"> </div> </div> </form> </article> </section> </body> 投稿のページ 戻るボタン 投稿ボタン 本文入力部 画像取得ボタン 何を書いたのか
  • 127. 画面遷移のスクリプトを実装 FirefoxTwitter js app.js ソースリンク /** * 画面を開いた時に最初に処理される部分 */ window.onload = function () { // 画面遷移の処理 $("#newPostButton").click(function () { document.querySelector('#newTweetSection').className = 'current'; document.querySelector('[data-position="current"]').className = 'left'; }); $("#backButton").click(function () { document.querySelector('#newTweetSection').className = 'right'; document.querySelector('[data-position="current"]').className = 'current'; }); ! // OAuth処理を開始する firstOAuthFunc(); };
  • 128. 何を書いたのか FirefoxTwitter js app.js /** * 画面を開いた時に最初に処理される部分 */ window.onload = function () { // 画面遷移の処理 $("#newPostButton").click(function () { document.querySelector('#newTweetSection').className = 'current'; document.querySelector('[data-position="current"]').className = 'left'; }); $("#backButton").click(function () { document.querySelector('#newTweetSection').className = 'right'; document.querySelector('[data-position="current"]').className = 'current'; }); ! // OAuth処理を開始する firstOAuthFunc(); }; 画面遷移の 処理
  • 129. アプリ更新 タイムライン画面投稿画面 投稿画面へTL画面へ
  • 130. 2. Firefox OSでTwitter Clientを作る • Twitter Developers に登録 • OAuth関連処理を実装する • ツイッタークライアントぽいUIを作る • タイムラインを取得する • ツイート機能を実装する • 画像付きツイート機能を実装する
  • 131. タイムラインを取得するには • TwitterのAPI情報を確認 https://dev.twitter.com/docs/api/1.1/get/statuses/home_timeline
  • 132. タイムラインを取得する処理 1/2 ソースリンクFirefoxTwitter js app.js window.onload = function() { ! ! // 更新ボタンをおした時のハンドラ $("#updateButton").click(function () { // TweetBoxの中身を空にする clearTweetDom(); // HomeTimelineを取得する getHomeTimeline(); }); ! firstOAuthFunc(); } ! /** * 表示したTweetをすべて消す */ var clearTweetDom = function () { var parent = $("#tweetBox"); parent.empty(); };
  • 133. 何を書いたのか FirefoxTwitter js app.js window.onload = function() { ! ! // 更新ボタンをおした時のハンドラ $("#updateButton").click(function () { // TweetBoxの中身を空にする clearTweetDom(); // HomeTimelineを取得する getHomeTimeline(); }); ! firstOAuthFunc(); } ! /** * 表示したTweetをすべて消す */ var clearTweetDom = function () { var parent = $("#tweetBox"); parent.empty(); }; 更新ボタンをおした時に呼ばれる関数 一旦Tweetをすべて消す処理 (すぐ下で実装) Tweetを取得して表示する関数 (すぐ後で実装) Tweetを全て消す処理 #tweetBox 要素の中身をすべて 消去
  • 134. /** * Home_timelineを取得する */ var getHomeTimeline = function () { var url = "https://api.twitter.com/1.1/statuses/home_timeline.json"; oauth.get(url, successGetHomeTimeline, failureHandler); }; ! /** * 取得したTweetsを画面に表示する */ var successGetHomeTimeline = function (data) { var parent = $("#tweetBox"); parent.text(data.text); }; タイムラインを取得する処理 2/2 FirefoxTwitter js app.js
  • 135. /** * Home_timelineを取得する */ var getHomeTimeline = function () { var url = "https://api.twitter.com/1.1/statuses/home_timeline.json"; oauth.get(url, successGetHomeTimeline, failureHandler); }; ! /** * 取得したTweetsを画面に表示する */ var successGetHomeTimeline = function (data) { var parent = $("#tweetBox"); parent.text(data.text); }; 何を書いたのか FirefoxTwitter js app.js Tweetを取得して 表示する関数 Twitter APIに アクセス 第二引数は成功時ハ ンドラ(すぐ下) TwitterAPIにアクセ ス成功時に呼ばれる #tweetBox要素に とってきた値を書込む
  • 136. アプリ更新 Twitter APIで取ってき たデータが表示される (中身はぐちゃぐちゃ)
  • 137. レスポンスデータの解読 https://dev.twitter.com/docs/api/1.1/get/statuses/home_timeline レスポンスデータの フォーマットはJSON フォーマットの詳細
  • 138. JSONとは • JavaScript Object Notationの略 • JavaScriptでお手軽にパースできる データ記述言語 sample {person:[{ "name": "kassy_kz", "feature" : "健全" },{ "name": "androidsola", "feature" : "変態" }]} 名前:値 のセットをカンマ区切りで記述 { 〜 } で一つのオブジェクト [ 〜 ] で一つの配列
  • 139. JSONデータをパースしてみる ソースリンクFirefoxTwitter js app.js /** * 取得したTweetsを画面に表示する */ var successGetHomeTimeline = function (data) { var parent = $("#tweetBox"); parent.text(data.text); // JSON形式のデータをオブジェクトに格納する var tweetList = JSON.parse(data.text); // tweetListを1つずつ取り出して表示する for (var i = 0; i < tweetList.length; i++) { var tweet = tweetList[i]; var screenName = tweet.user.screen_name; var name = tweet.user.name; var tweetText = tweet.text; console.log("screenName:" + screenName); console.log("name :" + name); console.log("tweetText :" + tweetText); } };
  • 140. 何を書いたのか FirefoxTwitter js app.js JSONフォーマットの データをパース /** * 取得したTweetsを画面に表示する */ var successGetHomeTimeline = function (data) { // JSON形式のデータをオブジェクトに格納する var tweetList = JSON.parse(data.text); // tweetListを1つずつ取り出して表示する for (var i = 0; i < tweetList.length; i++) { var tweet = tweetList[i]; var screenName = tweet.user.screen_name; var name = tweet.user.name; var tweetText = tweet.text; console.log("screenName:" + screenName); console.log("name :" + name); console.log("tweetText :" + tweetText); } }; パースしてできたオブジェクト から値を取り出し 取り出したオブジェクトを表示 (コンソールに)
  • 141. アプリ更新 コンソールに つぶやきの主や内容 が表示される
  • 142. パースした結果を画面に表示 1/2 ソースリンク FirefoxTwitter js app.js /** * 取得したTweetsを画面に表示する */ var successGetHomeTimeline = function (data) { // JSON形式のデータをオブジェクトに格納する var tweetList = JSON.parse(data.text); // tweetListを1つずつ取り出して表示する for (var i = 0; i < tweetList.length; i++) { var tweet = tweetList[i]; var screenName = tweet.user.screen_name; var name = tweet.user.name; var tweetText = tweet.text; console.log("screenName:" + screenName); console.log("name :" + name); console.log("tweetText :" + tweetText); addTweetToDom(tweet); } }; 画面に表示する処理 (すぐ後で記述)
  • 143. パースした結果を画面に表示 2/2 FirefoxTwitter js app.js var addTweetToDom = function (tweet) { var screenName = tweet.user.screen_name; var name = tweet.user.name; var tweetText = tweet.text; var prof_img_url = tweet.user.profile_image_url; var $parent = $("#tweetBox"); var $li = $("<li>").appendTo($parent); var $div = $("<div>").addClass("tweet").appendTo($li); var $userDiv = $("<div>").appendTo($div); $("<img>").addClass("tweetIcon").attr('src', prof_img_url).appendTo($userDiv); $("<span>").addClass("name").text(name).appendTo($userDiv); $("<span>").addClass("screenName").text("@" + screenName).appendTo($userDiv); $("<div>").addClass("tweetText").text(tweetText).appendTo($div); };
  • 144. 何を書いたのか FirefoxTwitter js app.js var addTweetToDom = function (tweet) { var screenName = tweet.user.screen_name; var name = tweet.user.name; var tweetText = tweet.text; var prof_img_url = tweet.user.profile_image_url; var $parent = $("#tweetBox"); var $li = $("<li>").appendTo($parent); var $div = $("<div>").addClass("tweet").appendTo($li); var $userDiv = $("<div>").appendTo($div); $("<img>").addClass("tweetIcon").attr('src', prof_img_url).appendTo($userDiv); $("<span>").addClass("name").text(name).appendTo($userDiv); $("<span>").addClass("screenName").text("@" + screenName).appendTo($userDiv); $("<div>").addClass("tweetText").text(tweetText).appendTo($div); }; 値を取り出し 要素を追加 (表示)
  • 145. 何を書いたのか FirefoxTwitter js app.js var $parent = $(“#tweetBox"); ! var $li = $(“<li>").appendTo($parent); ! var $div = $(“<div>”).addClass("tweet") .appendTo($li); ! var $userDiv = $("<div>").appendTo($div); $(“<img>").addClass("tweetIcon") .attr('src', prof_img_url) .appendTo($userDiv); ! $(“<span>”).addClass("name") .text(name) .appendTo($userDiv); ! $(“<span>").addClass("screenName") .text("@" + screenName) .appendTo($userDiv); ! $(“<div>").addClass("tweetText") .text(tweetText) .appendTo($div); #tweetBox要素を$parentという変数名に <li>要素を作成して$parent下に追加 <div>要素を作成して”tweet”クラス名を 付与して<li>の下に追加 <div>要素を作成して↑の<div>の下に追加 <img>要素を生成して<div>の下に追加 アイコンイメージを格納 <span>要素を生成して<div>の下に追加 クラス名は”name” ユーザーのnameを格納 <span>要素を生成して<div>の下に追加 クラス名は”screenName” ユーザーのscreenNameを格納 <div>要素を生成して<div>の下に追加 クラス名は”tweetText” ツイート本文を格納
  • 146. 結果、HTML要素はこうなる
  • 147. スタイルシートのカスタマイズ例 .name { margin-right: 5px; font-size: 16px; color: #333; } ! .screenName { font-size: 12px; color: #bbb; } ! #tweetBox li{ width: 100%; min-height: 70px; padding: 5px 5px 10px; border-bottom: 1px solid gray; word-wrap: break-word; -moz-box-sizing: border-box; box-sizing: border-box; } ! .tweetText { line-height: 1.4; font-size: 12px; color: #333; } ソースリンク special thanks @meco300 .fileArea{ overflow: hidden; } .chooseFile { display: inline-block; float: right; overflow: hidden; position: relative; padding: .5em; border: 1px solid #999; background-color: #eee; } .chooseFile input[type="file"] { opacity: 0; position: absolute; right: 0; top: 0; margin: 0; font-size: 100px; cursor: pointer; } .fileName { float: left; width: 70%; height: 28px; padding: 5px; border: 1px solid #bbb; text-overflow: ellipsis; -moz-box-sizing: border-box; } .tweet { margin-left: 58px; } ! .tweetIcon { float: left; margin-top: 3px; margin-left: -58px; } ! header h1 { padding-left: 10px; } section[role="region"] > .content{ padding: 0 5px !important; } ! #newTweetText { width: 100%; margin-top: 5px; margin-bottom: 5px; border: 1px solid #bbb; background: #FFE; -moz-box-sizing: border-box; box-sizing: border-box; } FirefoxTwitter css app.css
  • 148. アプリ更新 タイムラインが整形 されて表示される
  • 149. 2. Firefox OSでTwitter Clientを作る • Twitter Developers に登録 • OAuth関連処理を実装する • ツイッタークライアントぽいUIを作る • タイムラインを取得する • ツイート機能を実装する • 画像付きツイート機能を実装する
  • 150. ツイート機能について • APIは以下のページから • https://dev.twitter.com/docs/api/1.1/post/statuses/update
  • 151. ツイート機能を実装 1/2 FirefoxTwitter js app.js ソースリンク window.onload = function () { ! ! $("#updateButton").click(function () { // TweetBoxの中身を空にする clearTweetDom(); // HomeTimelineを取得する getHomeTimeline(); }); $("#statusUpdateButton").click(function () { // 新規ツイート投稿を行う newTweetPost(); }); firstOAuthFunc(); }
  • 152. 何を書いたのか FirefoxTwitter js app.js window.onload = function () { !! $("#updateButton").click(function () { // TweetBoxの中身を空にする clearTweetDom(); // HomeTimelineを取得する getHomeTimeline(); }); $("#statusUpdateButton").click(function () { // 新規ツイート投稿を行う newTweetPost(); }); firstOAuthFunc(); } #statusUpdateButtonを おした時のハンドラ ツイートAPIを叩く関数 (すぐ後で実装)
  • 153. ツイート機能を実装 2/2 var newTweetPost = function () { var data; ! // テキストボックスの中身を取得 var statusText = document.getElementById("newTweetText").value; ! // dataオブジェクトに投稿内容を格納 data = { status:statusText }; // 投稿 oauth.post('https://api.twitter.com/1.1/statuses/update.json', data, successHandler, failureHandler); } ! var successHandler = function () { console.log("success"); } ソースリンクFirefoxTwitter js app.js
  • 154. 何を書いたのか FirefoxTwitter js app.js var newTweetPost = function () { var data; ! // テキストボックスの中身を取得 var statusText = document.getElementById("newTweetText").value; ! // dataオブジェクトに投稿内容を格納 data = { status:statusText }; // 投稿 oauth.post('https://api.twitter.com/1.1/statuses/update.json', data, successHandler, failureHandler); } ! var successHandler = function () { console.log("success"); } ツイートAPIを叩く関数 テキストボックスの 中身を取得 dataオブジェクトに 投稿内容を格納 投稿(API叩く) 成功時のハンドラ
  • 155. アプリ更新 つぶやいてみましょう
  • 156. 2. Firefox OSでTwitter Clientを作る • Twitter Developers に登録 • OAuth関連処理を実装する • ツイッタークライアントぽいUIを作る • タイムラインを取得する • ツイート機能を実装する • 画像付きツイート機能を実装する
  • 157. 画像付きツイート機能について • APIは以下のページを参照 • https://dev.twitter.com/docs/api/1.1/post/statuses/update_with_media
  • 158. 画像付きツイート機能を実装 var newTweetPost = function () { var data; // テキストボックスの中身を取得 var statusText = document.getElementById("newTweetText").value; // fileの中身を確認 var file = document.querySelector("#file").files[0]; // fileに中身がない場合、通常投稿 if (typeof file === "undefined") { // dataオブジェクトに投稿内容を格納 data = { status:statusText }; // 投稿 oauth.post('https://api.twitter.com/1.1/statuses/update.json', data, this.successHandler, this.failureHandler); ! // fileに中身がある場合、画像つき投稿 } else { data = { "status":statusText, "media[]":file }; oauth.request({ method:"POST", url:"https://api.twitter.com/1.1/statuses/update_with_media.json", data:data }); } } ソースリンク FirefoxTwitter js app.js
  • 159. 何を書いたのか var newTweetPost = function () { var data; // テキストボックスの中身を取得 var statusText = document.getElementById("newTweetText").value; // fileの中身を確認 var file = document.querySelector("#file").files[0]; // fileに中身がない場合、通常投稿 if (typeof file === "undefined") { // dataオブジェクトに投稿内容を格納 data = { status:statusText }; // 投稿 oauth.post('https://api.twitter.com/1.1/statuses/update.json', data, this.successHandler, this.failureHandler); ! // fileに中身がある場合、画像つき投稿 } else { data = { "status":statusText, "media[]":file }; oauth.request({ method:"POST", url:"https://api.twitter.com/1.1/statuses/update_with_media.json", data:data }); } } ソースリンク FirefoxTwitter js app.js ファイルの添付を確認 画像添付がない場合の 処理(従来と同じ処理) 画像添付がある場合の処理 dataオブジェクトに 投稿内容を格納 (文言とファイル) 画像投稿APIを叩く
  • 160. アプリ更新 画像投稿成功
  • 161. 3. アプリを公開する
  • 162. アプリ公開してみる • 公開方法 • 自前サーバーで公開(普通のWebと同じ) • インストール&ダウンロードさせることも可能 • Firefox Marketplaceで公開 • Host型(自前サーバーで提供) • Package型(アプリを固めてMarketplaceに送る)
  • 163. アプリ公開してみる ※ Firefox marketplaceでpackage公開の場合 zipで固めて... MarketPlaceでアップロード審査へ https://marketplace.firefox.com/developers/submit/
  • 164. お疲れ様でした 今日のハンズオンは以上です。
  • 165. 今後の課題 • 足りない機能を実装する • メンションラインの取得とか • ダイレクトメッセージの送受信とか • JavaScriptのコードをより洗練する • 現在の実装はグローバルを汚染しまくりであまりよろしくない... • githubに整形したコードを上げたので参考にして下さい https://github.com/kassy-kz/FirefoxOS_TwitterClient_Sample
  • 166. ご静聴ありがとうございました