• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Firefoxosハンズオン
 

Firefoxosハンズオン

on

  • 7,587 views

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

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

Statistics

Views

Total Views
7,587
Views on SlideShare
4,727
Embed Views
2,860

Actions

Likes
23
Downloads
54
Comments
0

20 Embeds 2,860

http://www.kisato.net 634
http://kznote.blogspot.jp 519
http://www.plaything.jp 505
https://cybozulive.com 215
https://twitter.com 201
http://unsolublesugar.com 194
http://osyyare.blogspot.jp 188
http://sosukeblog.com 165
http://m-shige1979.hatenablog.com 118
https://afxncv4z3cayeha7gxzm.cybozu-dev.com 82
http://kznote.blogspot.com 22
http://feedly.com 5
http://digg.com 2
http://osyyare.blogspot.com 2
http://www.google.co.jp 2
http://webcache.googleusercontent.com 2
http://kznote.blogspot.de 1
http://b.hatena.ne.jp 1
http://kznote.blogspot.tw 1
http://translate.googleusercontent.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Firefoxosハンズオン Firefoxosハンズオン Presentation Transcript

    • Firefox OS ハンズオン 2014 / 5 / 31 for 名古屋つ部 ! @kassy_kz
    • 自己紹介 • 横浜 Android PF部によく出没 • Effective Android(共著) • 同人活動 (Tech-orz)
 - コミックマーケットC82, C84出展
 - Maker Faire Tokyo 2013 出展 名前 • @kassy_kz (かっしー) 特徴
    • 本日の進行 • Firefox OSと仲良くなる • Firefox OSでTwitterClientをつくる • アプリを公開する 対象者 • Firefox OS初心者 • Firefox OS初心者 内容 ハッシュタグ: #tsubufx
    • 事前準備
    • 事前準備は大丈夫ですか? • Firefoxブラウザのインストール • FirefoxOS Simulatorのインストール • Twitterのアカウントを取得しておく • エディタのインストール

    • Firefox ブラウザをインストール • http://www.mozilla.jp/ からFirefoxをダウンロード
    • シミュレーターをインストール • Firefoxを起動して
 メニュー -> 開発ツール-> アプリマネージャを選択
    • シミュレーターをインストール •シミュレータを起動-> 追加
    • シミュレーターをインストール
    • Firefox OSシミュレーター起動 • Firefox OS を起動してください
    • Firefox OSシミュレーター起動 • シミュレーターの起動が確認できればOK!
    • エディタについて • 入力コード補完機能 • シンタックスハイライト機能 • コード自動整形機能 以下の機能を備えたものを… なにそれ?って思った人は問答無用です! 大人しく Sublime Text 2 をインストールしてください http://www.sublimetext.com/2
    • package controlのインストール Sublime Text2をパワーアップ 1/2 [View]->[Show Console] コンソールに文字列(これ)を貼り付け ここに貼り付け 再起動
    • プラグインのインストール Sublime Text2をパワーアップ 2/2 Ctrl+Shift+P (Win) Command+Shift+P (Mac) 窓に[install]と打ち込み
 エンター 窓に[andyjs]と打ち込み
 エンター これでandyjsプラグイン がインストールされる ※他にもjQueryプラグインとかも
 インストールすると便利
    • 1. Firefox OSと仲良くなる • HTMLで Hello World • JavaScriptで Hello JS • cssを使う • Firefox OSらしいUIにする • 画面遷移を実装する • アプリ連携を体験する
    • 1. Firefox OSと仲良くなる • HTMLで Hello World • JavaScriptで Hello JS • cssを使う • Firefox OSらしいUIにする • 画面遷移を実装する • アプリ連携を体験する
    • HTMLで Hello World • フォルダを作ります
 HelloFirefox • テキストファイルを作ります
 HelloFirefox index.html
    • 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> ソースリンク
    • コーディングのテク htmlとだけ打ち込んで tabキー押下 補完でひな形が! ※Sublime Text2の場合
    • • <(要素名)>〜</(要素名)>で要素を囲む構造 <!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>
    • 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" } } ソースリンク
    • HelloFirefox manifest.webapp { "name": "HelloFirefox", "description": "My First app", "launch_path": "/index.html", "icons": { "128": "/img/icons/icon_128.png" } } • アプリに関する情報を記述 何を書いたのか アプリに関する
 情報 アイコンのパス
    • シミュレーターへのアプリインストール パッケージアプリを追加 HelloFirefox
 を選択 更新ボタンを押す
    • アプリ実行
    • 以降、アプリ更新するときは.... アプリタブから更新ボタン ちょっとめんどい 端末タブから停止して
    • アプリのアイコンを 設定しましょう • 自作するも良し • フリー素材を取ってきても良し • 本日は特別アイコンを贈呈 HelloFirefox img icon_128.pngicons この位置に配置 こちらからDL
    • アプリ更新 アイコンが
 変わればOK
    • 1. Firefox OSと仲良くなる • HTMLで Hello World • JavaScriptで Hello JS • cssを使う • Firefox OSらしいUIにする • 画面遷移を実装する • アプリ連携を体験する
    • 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> ソースリンク
    • 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>
    • JavaScriptで Hello JS • jsフォルダ、app.jsファイルを追加する
 window.onload = function() { document.getElementById("firstButton").onclick = function() { document.getElementById("firstDiv").innerHTML = "JSは最高だぜ"; }; }; ソースリンク HelloFirefox js app.js
    • コメントを書きましょう /* この部分はコメント */ window.onload = function() { // この行はコメント document.getElementById(“**”).onclick = function() { document.getElementById(“**”).innerHTML = “**”; }; }; <!DOCTYPE html> <html> <body> <!-- ここはコメント --> <h1>Hello Firefox</h1> </body> </html> <!— 〜 —>で
 囲った部分はコメント /* 〜 */で
 囲った部分はコメント • htmlファイルの場合 • jsファイルの場合 // で始まる行は
 コメント
    • 何を書いたのか div要素参照 さっきのidを
 参照してる window.onload = function() { document.getElementById("firstButton").onclick = function() { document.getElementById("firstDiv").innerHTML = "JSは最高だぜ"; }; }; ボタン要素参照 HelloFirefox js app.js
    • ボタンクリック時の イベントを記述 window.onload = function() { document.getElementById("firstButton").onclick = function() { document.getElementById("firstDiv").innerHTML = "JSは最高だぜ"; }; }; 何を書いたのか HelloFirefox js app.js
    • 画面ロード時に
 実行する関数 window.onload = function() { document.getElementById("firstButton").onclick = function() { document.getElementById("firstDiv").innerHTML = "JSは最高だぜ"; }; }; 何を書いたのか HelloFirefox js app.js
    • アプリ更新 クリックで
 文字が表示
    • ライブラリを使う http://jquery.com/download/jQueryを落とす ここに配置 HelloFirefox js jquery-2.1.1.jslib Download the uncompressed, development jQuery 2.1.1
    • • 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> ... ライブラリを使う ソースリンク
    • 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> ... ライブラリの
 パス追加 (順番重要) • index.htmlに追記 ライブラリを使う
    • • 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は最高だぜ"); }); }; ライブラリを使う ソースリンク
    • HelloFirefox js app.js 何を書いたのか ボタン要素参照 div要素参照 jQueryを使う場合
 #(要素id名) 
 .(要素クラス名) で参照する • app.jsを編集する
 window.onload = function() { $("#firstButton").click(function() { $("#firstDiv").text("JSは最高だぜ"); }); };
    • アプリ更新 同じ挙動をすればOK
    • Sublime Text2の便利な使い方 フォルダを
 ドラッグ ファイル一覧が!
    • 1. Firefox OSと仲良くなる • HTMLで Hello World • JavaScriptで Hello JS • cssを使う • Firefox OSらしいUIにする • 画面遷移を実装する • アプリ連携を体験する
    • 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のパス
    • cssで装飾する 2/2 HelloFirefox css app.css • cssフォルダ、app.cssファイルを追加する #firstDiv { margin-top:10px; font-size:32px; color:#ff0000; } ソースリンク div要素参照
 (idで参照) ※cssでググって、いろんなパラメータをいじってみて下さい
    • アプリ更新 表示スタイル が変われば
 成功
    • 開発ツールを使ってみる 「デバッグ」
    • インスペクタ 部品の配置を確認できます スタイルエディタ cssのパラメータを変更 デバッガ JavaScriptのデバッグ 開発ツールを使ってみる
    • 1. Firefox OSと仲良くなる • HTMLで Hello World • JavaScriptで Hello JS • cssを使う • Firefox OSらしいUIにする • 画面遷移を実装する • アプリ連携を体験する
    • Firefox OSらしいUIとは http://buildingfirefoxos.com/ Building Blocksのページ サンプルアプリを インストールしてみよう https://marketplace.firefox.com/app/building-blocks ※シミュレーターで
    • Building Blocksライブラリを入手 http://buildingfirefoxos.com/
    • Building Blocksを使う準備 コピー style, style_unstable, icons, *cssを ! すべて 直下にコピーする HelloFirefox
    • 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
    • <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> ペースト コピーしたテキストを の<head>タグ内にペーストHelloFirefox index.html ソースリンク Building Blocks を取り込む
    • コーディングのテク インデントぐちゃぐちゃ コードを全選択してから 
 [Edit]->[Line]->[Reindent]で整形
    • アプリに手を加える 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>タグ内部を編集
    • 何を書いたのか 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>
    • アプリ更新 らしいヘッダ らしいボタン
    • 1. Firefox OSと仲良くなる • HTMLで Hello World • JavaScriptで Hello JS • cssを使う • Firefox OSらしいUIにする • 画面遷移を実装する • アプリ連携を体験する
    • 画面遷移ってどうやるの <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> HelloFirefox index.html (リンク貼りゃいいんだよ)
    • 画面遷移成功?!
    • あれ. . . (戻れない)
    • 一体どうすればいいんだ... • Building Blocksの画面遷移を真似する
    • <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
    • 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'; }); };
    • ページ遷移無事成功
    • 1. Firefox OSと仲良くなる • HTMLで Hello World • JavaScriptで Hello JS • cssを使う • Firefox OSらしいUIにする • 画面遷移を実装する • アプリ連携を体験する
    • アプリ連携とは... 連携先アプリとは... ・ブラウザ ・電話 ・カメラ  等... AndroidでいうIntentみたいなもの
    • アプリ連携(ブラウザ)を体験してみる 1/2 ソースリンク ! ! ! <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> HelloFirefox index.html ボタン追加
    • アプリ連携(ブラウザ)を体験してみる 2/2 ソースリンク window.onload = function() { ! ! ! $("#secondButton").click(function() { var myUrl = “(好きなURL)”; var activity = new MozActivity({ name:"view", data:{ type:"url", url:myUrl } }); }); } HelloFirefox js app.js
    • window.onload = function() { ! ! $("#secondButton").click(function() { var myUrl = “(好きなURL)”; var activity = new MozActivity({ name:"view", data:{ type:"url", url:myUrl } }); }); } 何を書いたのか FirefoxTwitter js app.js ブラウザを
 呼び出す
 コード
    • アプリ更新 ブラウザ呼び出し成功
    • 番外編 アプリジェネレータを使う •環境準備 •アプリひな形をダウンロード •ライブラリを追加 •アプリ実装 •アプリデプロイ ※本番外編はコマンド操作が必要になります
    • 環境準備 •node.jsのインストール http://nodejs.org/ •voloのインストール(コマンドラインから) 番 外 編 $ npm install -g volo
    • アプリひな形ダウンロード 番 外 編 $ volo create myproject mozilla/mortar-app-stub • (任意の場所にcdしてから) • Firefox OSアプリ一式がダウンロードされる
 (アプリ本体はwww配下)
    • ライブラリを追加 番 外 編 $ cd myproject $ volo add jquery • www/js/lib 配下に自動的にライブラリがインストールされる

    • アプリ実装 番 外 編 <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> define(function(require) {  (中略) ! $("#firstButton").click(function() { $("#firstDiv").text("JSは最高だぜ"); }); }); • app.js
 • index.html
 ※require.js特有の書き位置に注意
    • アプリデプロイ 番 外 編 $ volo serve • シミュレータのブラウザで http://localhost:8008 にアクセス
 • myproject配下で アプリ更新の際、いちいちアンインストールすることなく
 更新ボタン一つで動作確認が出来るようになります

    • 2. Firefox OSでTwitter Clientを作る • Twitter Developers に登録 • OAuth関連処理を実装する • ツイッタークライアントぽいUIを作る • タイムラインを取得する • ツイート機能を実装する • 画像付きツイート機能を実装する
    • 新規プロジェクトで開始 • 新規フォルダを作ります
  HelloFirefox をまるコピします
 HelloFirefox FirefoxTwitterコピー
    • アプリ情報を書き換える • manifest.webappのアプリ情報を
 適当に書き換えて下さい(自由)
 • index.htmlのヘッダ情報を適当に
 書き換えて下さい(自由)
 { "name": "FirefoxTwitter", "description": "My First TwitterClient", ! <header class="fixed"> <h1>Hello Twitter</h1> </header> FirefoxTwitter manifest.webapp FirefoxTwitter index.html
    • 2. Firefox OSでTwitter Clientを作る • Twitter Developers に登録 • OAuth関連処理を実装する • ツイッタークライアントぽいUIを作る • タイムラインを取得する • ツイート機能を実装する • 画像付きツイート機能を実装する
    • Twitter Developersにアプリを登録 https://apps.twitter.com/ Sign inをクリック Create New Appをクリック
    • アプリ名 アプリの説明 サイトURL (空白でOK) 確定 チェック アプリ情報を入力 規約を読んで 持ってなければhttp://example.comとでも
    • アプリ名について注意 • 既存のTwitterアプリと被る名前 • [Twitter] という文字列を含む名前 以下の名前は使えないので注意
    • APIキー発行 後でつかいます 他人には教えない
    • 設定変更しておく Read and Writeに この変更をしないとWrite(つぶやき)ができない
    • 2. Firefox OSでTwitter Clientを作る • Twitter Developers に登録 • OAuth関連処理を実装する • ツイッタークライアントぽいUIを作る • タイムラインを取得する • ツイート機能を実装する • 画像付きツイート機能を実装する
    • OAuthについてさらっとおさらい ユーザー Twitter アプリ 認証 認証 パスワード アプリ使用許可 使う (パスワード教えない) 機能呼び出し
    • ユーザー アプリ Twitter Consumer Keyを使って、 リクエストトークンを取得 リクエストトークンからユーザー許可を 求めるURLを生成してブラウザで表示 ユーザーがアプリ使用を許可、 TwitterはPINを表示(ユーザー認証あり) ユーザーがアプリにPINを入力 Consumer Key, リクエストトークン、 PINを使ってアクセストークンを取得 以後、アクセストークンを使って Twitterの各種機能を呼び出す 1. 2. 3. 4. 5. 6. OAuthのワークフロー
    • ライブラリがないと死ぬ • 今回は jsOAuth を使わせていただく https://github.com/bytespider/jsOAuth
    • ライブラリダウンロード https://github.com/bytespider/jsOAuth/tree/master/dist FirefoxTwitter js jsOAuth-1.3.6.jslib この位置に配置
    • 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> ! ! ! FirefoxTwitter index.html ソースリンク
    • このライブラリ、 そのままでは使えない •理由
 XmlHttpRequestの
 クロスドメイン通信制約による
    • クロスドメイン制約とは ユーザー Twitter アプリ 両方と同時に通信できない ! (やや語弊あり、正確には調べて下さい)
    • 一般的なクロスドメイン回避はどうやってるか HTTP Request Http 
 Response HTTPレスポンスのヘッダに
 特別な許可を含めることで 同時通信を認める 少なくともパッケージ型のアプリではこの手は使えない
    • クロスドメイン制約回避方法 • XmlHttpRequestオブジェクト作成時 に引数を追加 "type": "privileged", "permissions": { "systemXHR": { "description": "for OAuth" } } XMLHttpRequest({mozSystem: true}); • manifestにパーミッションを追記 ※Firefox OSの場合
    • Firefox OS アプリ種別について 標準アプリ 特権アプリ 公認アプリ (privileged) (certified) 特権アプリはFirefox Marketplaceによる通常 よりも厳格なレビュー を経て承認される必要 があります。 認定アプリ作成にはOEM、 キャリアの承認が必要とな るため、一般のアプリ開発 者は本アプリを作成するこ とはできません。 特別な権限を必要と しない 標準のアプリです。 (つまり絶望)
    • Firefox OS アプリ種別について 標準アプリ 特権アプリ 公認アプリ (privileged) (certified) 特権アプリはFirefox Marketplaceによる通常 よりも厳格なレビュー を経て承認される必要 があります。 認定アプリ作成にはOEM、 キャリアの承認が必要とな るため、一般のアプリ開発 者は本アプリを作成するこ とはできません。 特別な権限を必要と しない 標準のアプリです。 (つまり絶望)
    • XmlHttpRequestに引数追加 FirefoxTwitter js jsOAuth-1.3.6.jslib } 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 ソースリンク
    • 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" } } } ソースリンク
    • OAuth関連処理を実装する 1/4 // oauthオブジェクト var oauth; ! window.onload = function () { ! // OAuth関連の処理を開始する firstOAuthFunc(); } ! ソースリンクFirefoxTwitter js app.js OAuth処理を開始する関数
 (すぐ後で実装)
    • OAuth関連処理を実装する 2/4 /** * 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
    • /** * 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オブジェクト
 に与える値 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); }; 何を書いたのか FirefoxTwitter js app.js 失敗時のハンドラ 成功時のハンドラ (すぐ後で出てきます)
    • var successFetchRequstToken = function() {/* 成功した時の処理 */ } var failureFetchRequstToken = function() {/* 失敗した時の処理 */ } oauth.fetchRequestToken(successFetchRequestToken, failureHandler); コールバック関数とは あなたの プログラム ライブラリ ハンドラを渡す ! ハンドラを呼び出す ライブラリが処理 ハンドラ定義 ハンドラ渡す
    • OAuth関連処理を実装する 3/4 /** * 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); }; 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); }; FirefoxTwitter js app.js 1の処理成功時
 のハンドラ関数 ブラウザで 認証画面を開く PINを入力する
 窓を用意 OAuthオブジェク トにPINセット アクセストークン を取得しにいく
    • 何を書いたのか /** * 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); }; FirefoxTwitter js app.js 失敗時のハンドラ 成功時のハンドラ (すぐ後で出てきます)
    • /** * 5の処理の成功時のコールバック関数 */ var successFetchAccessToken = function () { alert("success oauth"); }; ! /** * 各処理失敗時のコールバック関数 */ var failureHandler = function (data) { alert("failure"); }; OAuth関連処理を実装する 4/4 FirefoxTwitter js app.js
    • /** * 5の処理の成功時のコールバック関数 */ var successFetchAccessToken = function () { alert("success oauth"); }; ! /** * 各処理失敗時のコールバック関数 */ var failureHandler = function (data) { alert("failure"); }; 何を書いたのか FirefoxTwitter js app.js 失敗ハンドラ (1,5の処理で共通) アラートを出す処理 (引数は出力文字) 5の処理が成功
 したときのハンドラ
    • アプリ更新 アプリを切り替える Successとでれば成功 ブラウザ起動 アプリ起動
    • 課題 ! このままでは毎回認証操作が必要 取得したアクセストークンを保存して
 2回目以降使えるようにしたい 1回目 2回目 3回目
    • var successFetchAccessToken = function () { // 取得したアクセストークンをWebStorageで保存する(次回以降のため) localStorage.setItem("accessTokenKey", oauth.getAccessTokenKey()); localStorage.setItem("accessTokenSecret", oauth.getAccessTokenSecret()); alert("success oauth"); }; アクセストークンを保存する処理を追加 1/2 ソースリンクFirefoxTwitter js app.js
    • var successFetchAccessToken = function () { // 取得したアクセストークンをWebStorageで保存する(次回以降のため) localStorage.setItem("accessTokenKey", oauth.getAccessTokenKey()); localStorage.setItem("accessTokenSecret", oauth.getAccessTokenSecret()); alert("success oauth"); }; 何を書いたのか FirefoxTwitter js app.js 第一引数: 保存する値の名前 第二引数: 保存する値 Webストレージ 機能で値を保存 (AccessTokenKeyと AccessTokenSecret)
    • アクセストークンを保存する処理を追加 2/2 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); } }; FirefoxTwitter js app.js
    • アクセストークンを保存する処理を追加 2/2 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); } }; FirefoxTwitter js app.js Webストレージで 値を取り出し
 (AccessTokenと
 AccessTokenSecret) 値の取り出しに成功
 した場合、それを使う 失敗した場合、
 OAuth認証処理
    • 2. Firefox OSでTwitter Clientを作る • Twitter Developers に登録 • OAuth関連処理を実装する • ツイッタークライアントぽいUIを作る • タイムラインを取得する • ツイート機能を実装する • 画像付きツイート機能を実装する
    • ツイッタークライアントぽいUIの設計 タイムライン画面 投稿画面 投稿画面へ TL画面へ 投稿 TL更新続き取得 UI部品はすべてBuilding Blocksの流用です
    • <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 ソースリンク
    • 何を書いたのか 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> ヘッダ部(上部帯) フッタ部(下部帯) ヘッダ部(上部帯)
    • 何を書いたのか 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重要! 後で出てきます 更新ボタン
    • <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
    • 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> 投稿のページ ヘッダ 本体部 何を書いたのか
    • 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> 投稿のページ 戻るボタン 本文入力部 投稿ボタン 画像取得ボタン 何を書いたのか
    • 画面遷移のスクリプトを実装 /** * 画面を開いた時に最初に処理される部分 */ 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(); }; ソースリンク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(); }; FirefoxTwitter js app.js 画面遷移の 処理
    • アプリ更新 タイムライン画面 投稿画面 投稿画面へ TL画面へ
    • 2. Firefox OSでTwitter Clientを作る • Twitter Developers に登録 • OAuth関連処理を実装する • ツイッタークライアントぽいUIを作る • タイムラインを取得する • ツイート機能を実装する • 画像付きツイート機能を実装する
    • タイムラインを取得するには • TwitterのAPI情報を確認 https://dev.twitter.com/docs/api/1.1/get/statuses/home_timeline
    • タイムラインを取得する処理 1/2 window.onload = function() { ! ! // 更新ボタンをおした時のハンドラ $("#updateButton").click(function () { // TweetBoxの中身を空にする clearTweetDom(); // HomeTimelineを取得する getHomeTimeline(); }); ! firstOAuthFunc(); } ! /** * 表示したTweetをすべて消す */ var clearTweetDom = function () { var parent = $("#tweetBox"); parent.empty(); }; ソースリンク FirefoxTwitter js app.js
    • 何を書いたのか 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 要素の中身をすべて 消去
    • /** * 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
    • /** * 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要素に
 とってきた値を書込む
    • アプリ更新 Twitter APIで取ってき たデータが表示される (中身はぐちゃぐちゃ)
    • レスポンスデータの解読 https://dev.twitter.com/docs/api/1.1/get/statuses/home_timeline レスポンスデータの フォーマットはJSON フォーマットの詳細
    • JSONとは • JavaScript Object Notationの略 • JavaScriptでお手軽にパースできる
 データ記述言語 sample {person:[{ "name": "kassy_kz", "feature" : "健全"
 },{ "name": "androidsola", "feature" : "変態" }]} 名前:値 のセットをカンマ区切りで記述 { 〜 } で一つのオブジェクト [ 〜 ] で一つの配列
    • JSONデータをパースしてみる /** * 取得した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); } }; ソースリンク FirefoxTwitter js app.js
    • 何を書いたのか 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); } }; パースしてできたオブジェクト から値を取り出し 取り出したオブジェクトを表示 (コンソールに)
    • アプリ更新 コンソールに
 つぶやきの主や内容 が表示される
    • パースした結果を画面に表示 1/2 ソースリンク /** * 取得した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); } }; FirefoxTwitter js app.js 画面に表示する処理 (すぐ後で記述)
    • パースした結果を画面に表示 2/2 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); }; 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); }; FirefoxTwitter js app.js 値を取り出し 要素を追加 (表示)
    • 何を書いたのか 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” ツイート本文を格納
    • 結果、HTML要素はこうなる
    • スタイルシートのカスタマイズ例 .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
    • アプリ更新 タイムラインが整形
 されて表示される
    • 2. Firefox OSでTwitter Clientを作る • Twitter Developers に登録 • OAuth関連処理を実装する • ツイッタークライアントぽいUIを作る • タイムラインを取得する • ツイート機能を実装する • 画像付きツイート機能を実装する
    • ツイート機能について • APIは以下のページから • https://dev.twitter.com/docs/api/1.1/post/statuses/update
    • ツイート機能を実装 1/2 window.onload = function () { ! ! $("#updateButton").click(function () { // TweetBoxの中身を空にする clearTweetDom(); // HomeTimelineを取得する getHomeTimeline(); }); $("#statusUpdateButton").click(function () { // 新規ツイート投稿を行う newTweetPost(); }); firstOAuthFunc(); } ソースリンクFirefoxTwitter js app.js
    • 何を書いたのか window.onload = function () { ! ! $("#updateButton").click(function () { // TweetBoxの中身を空にする clearTweetDom(); // HomeTimelineを取得する getHomeTimeline(); }); $("#statusUpdateButton").click(function () { // 新規ツイート投稿を行う newTweetPost(); }); firstOAuthFunc(); } FirefoxTwitter js app.js #statusUpdateButtonを
 おした時のハンドラ ツイートAPIを叩く関数
 (すぐ後で実装)
    • ツイート機能を実装 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
    • 何を書いたのか 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 ツイートAPIを叩く関数 テキストボックスの
 中身を取得 dataオブジェクトに
 投稿内容を格納 投稿(API叩く) 成功時のハンドラ
    • アプリ更新 つぶやいてみましょう
    • 2. Firefox OSでTwitter Clientを作る • Twitter Developers に登録 • OAuth関連処理を実装する • ツイッタークライアントぽいUIを作る • タイムラインを取得する • ツイート機能を実装する • 画像付きツイート機能を実装する
    • 画像付きツイート機能について • APIは以下のページを参照 • https://dev.twitter.com/docs/api/1.1/post/statuses/update_with_media
    • 画像付きツイート機能を実装 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
    • 何を書いたのか 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を叩く
    • アプリ更新 画像投稿成功
    • 3. アプリを公開する
    • アプリ公開してみる • 公開方法 • 自前サーバーで公開(普通のWebと同じ) • インストール&ダウンロードさせることも可能 • Firefox Marketplaceで公開 • Host型(自前サーバーで提供) • Package型(アプリを固めてMarketplaceに送る)
    • アプリ公開してみる https://marketplace.firefox.com/developers/submit/ zipで固めて... MarketPlaceでアップロード 審査へ ※ Firefox marketplaceでpackage公開の場合
    • お疲れ様でした 今日のハンズオンは以上です。
    • 今後の課題 • 足りない機能を実装する • メンションラインの取得とか • ダイレクトメッセージの送受信とか • JavaScriptのコードをより洗練する • 現在の実装はグローバルを汚染しまくりであまりよろしくない... • githubに整形したコードを上げたので参考にして下さい https://github.com/kassy-kz/FirefoxOS_TwitterClient_Sample
    • ご静聴ありがとうございました