Firefoxosハンズオン

Firefox OS ハンズオン 2014 / 2 / 16 @kassy_kz 2014年2月16日日曜日

自己紹介名前 • かっしー • @kassy_kz 特徴 • 健全 • エンジニア（得意技：葬式UI） 2014年2月16日日曜日

今日の進行対象者 • Firefox OS初心者 • Firefox OS 初心者本日の内容 • Firefox OSと仲良くなる • Firefox OSでTwitterClientをつくる • アプリを公開する本日のハッシュタグ： #fxos 2014年2月16日日曜日

本日の頼れるチューター陣 • • • • • • • • @meco300 @rkisato @masawada @ﬂatbird @chikoski @chan_gami @unsoluble_sugar(星影) @aoi_nagatsuki アプリが動かなくなったらすぐにチューターを呼ぼう 2014年2月16日日曜日

事前準備は大丈夫ですか？ • Twitterアカウントを取得しておく • キャリアメール使えるようにしておく • Firefoxブラウザのインストール • FirefoxOS Simulatorのインストール • エディタのインストール（自動整形機能のあるやつがオススメ） 2014年2月16日日曜日

シミュレーターをインストール • Firefoxブラウザのメニューからツール-> Web開発 -> アプリマネージャ 2014年2月16日日曜日

シミュレーターをインストール • 2014年2月16日日曜日シミュレータを起動-> 追加

シミュレーターをインストール 2014年2月16日日曜日

Firefox OSシミュレーター起動 • 2014年2月16日日曜日 Firefox OS 1.3を起動してください

1. Firefox OSと仲良くなる • HTMLで Hello World • JavaScriptで Hello JS • cssを使う • Firefox OSらしいUIにする • 画面遷移を実装する • アプリ連携を体験する 2014年2月16日日曜日

HTMLで Hello World • フォルダを作ります HelloFirefox • テキストファイルを作ります HelloFirefox 2014年2月16日日曜日 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> 2014年2月16日日曜日

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> 2014年2月16日日曜日

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" } } 2014年2月16日日曜日

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" } アプリに関する情報アイコンのパス } 2014年2月16日日曜日

HTMLで Hello World シミュレーターへのアプリインストールパッケージアプリを追加 2014年2月16日日曜日 HelloFirefox を選択更新ボタンを押す

アプリインストール 2014年2月16日日曜日

以降、アプリ更新するときは.... 一旦アンインストールして更新ボタン長押しちょっとめんどい 2014年2月16日日曜日

JavaScriptで Hello World • 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> 2014年2月16日日曜日

JavaScriptで Hello JS • index.htmlに以下の記述を... HelloFirefox スクリプトのパスボタンとdiv追加 2014年2月16日日曜日 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> id重要！後で出てきます！ </html>

JavaScriptで Hello JS • jsフォルダ、app.jsファイルを追加する HelloFirefox js app.js window.onload = function() { document.getElementById("firstButton").onclick = function() { document.getElementById("firstDiv").innerHTML = "JSは最高だぜ"; }; }; ※コメントは"//" に続けて... 2014年2月16日日曜日

JavaScriptで Hello JS • jsフォルダ、app.jsファイルを追加する HelloFirefox js app.js window.onload = function() { document.getElementById("firstButton").onclick = function() { ボタン要素参照 document.getElementById("firstDiv").innerHTML = "JSは最高だぜ"; div要素参照 }; }; さっきのidで参照してる ※コメントは"//" に続けて... 2014年2月16日日曜日

JavaScriptで Hello JS • app.jsを追加する関数名 = function() { }; がJSで関数書くときの書き方 HelloFirefox js app.js function 関数名() { } でも可 window.onload = function() { document.getElementById("firstButton").onclick = function() { ボタンクリック時の document.getElementById("firstDiv").innerHTML = "JSは最高だぜ"; イベントを記述 }; }; ※コメントは"//" に続けて... 2014年2月16日日曜日

アプリ更新 2014年2月16日日曜日

ライブラリを使う ∼JSとの健全なお付き合いを∼ jQueryを落とす • http://jquery.com/download/ HelloFirefox 2014年2月16日日曜日 js lib jquery-2.1.0.js

ライブラリを使う ∼JSとの健全なお付き合いを∼ • 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.0.js"></script> <script src="js/app.js"></script> </head> <body> ... 2014年2月16日日曜日

ライブラリを使う ∼JSとの健全なお付き合いを∼ • index.htmlに以下の記述を... HelloFirefox ライブラリのパスライブラリは先に読み込むこと（順番重要） 2014年2月16日日曜日 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello Firefox OS</title> <script src="js/lib/jquery-2.1.0.js"></script> <script src="js/app.js"></script> </head> <body> ...

ライブラリを使う ∼JSとの健全なお付き合いを∼ • app.jsを編集する HelloFirefox js app.js window.onload = function() { $("#firstButton").click(function() { $("#firstDiv").text("JSは最高だぜ"); }); }; 2014年2月16日日曜日

ライブラリを使う ∼JSとの健全なお付き合いを∼ • app.jsを編集する HelloFirefox js app.js <button id="firstButton">Click</button> <div id="firstDiv"></div> window.onload = function() { ボタン要素参照 $("#firstButton").click(function() { div要素参照 $("#firstDiv").text("JSは最高だぜ"); }); }; jQueryでは、#(要素id名) もしくは .(要素クラス名)で参照する 2014年2月16日日曜日

cssで装飾する • index.htmlに以下の記述を... HelloFirefox index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello Firefox OS</title> <script src="js/app.js"></script> <link rel="stylesheet" href="css/app.css"/> </head> <body> （省略） 2014年2月16日日曜日

cssで装飾する • index.htmlに以下の記述を... HelloFirefox cssのパス 2014年2月16日日曜日 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello Firefox OS</title> <script src="js/app.js"></script> <link rel="stylesheet" href="css/app.css"/> </head> <body> （省略）

cssで装飾する • cssフォルダ、app.cssファイルを追加する HelloFirefox css app.css #firstDiv { margin-top:10px; font-size:32px; color:#ff0000; } 2014年2月16日日曜日

cssで装飾する • cssフォルダ、app.cssファイルを追加する HelloFirefox div要素参照（idで参照） css app.css #firstDiv { margin-top:10px; font-size:32px; color:#ff0000; } ※cssでぐぐっていろんなパラメータをいじって下さい 2014年2月16日日曜日

開発ツールを使ってみる 2014年2月16日日曜日

開発ツールを使ってみるインスペクタ部品の配置を確認できますスタイルエディタ cssのパラメータを変更できますデバッガ JavaScriptのデバッグができます 2014年2月16日日曜日

Firefox OSらしいUIとは Building Blocksのページ http://buildingﬁrefoxos.com/ サンプルアプリをインストールしてみよう ※シミュレーターで https://marketplace.ﬁrefox.com/app/building-blocks 2014年2月16日日曜日

Building Blocksライブラリを入手 2014年2月16日日曜日

コピペの時間 style, style_unsatable, icons, *cssをすべて直下にコピーする HelloFirefox コピー 2014年2月16日日曜日

俺がコピペプログラマだ app.htmlの下記部分を、コピー <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, userscalable=no" /> <title>Building blocks demo</title>  <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> 2014年2月16日日曜日コピー

俺がコピペプログラマだコピーしたテキストをにペースト HelloFirefox index.html <head> <meta charset="utf-8" /> <title>Hello Firefox OS</title> <script src="js/lib/jquery-2.1.0.js"></script> <script src="js/app.js"></script>  <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> 2014年2月16日日曜日

アプリに手を加える 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> 2014年2月16日日曜日

アプリに手を加える HelloFirefox index.html <body> <section role="region">  <header class="fixed"> <h1>Hello Building Blocks</h1> Firefoxらしいヘッダ </header> <article class="content scrollable header"> <button class="recommend" id="firstButton">click</button> <div id="firstDiv"></div> Firefoxらしいボタン </article> </section> </body> 2014年2月16日日曜日

アプリ更新 Firefoxらしいヘッダ Firefoxらしいボタン 2014年2月16日日曜日

画面遷移ってどうやるの 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> （リンク貼りゃいいんだよ） 2014年2月16日日曜日

画面遷移成功？！ 2014年2月16日日曜日

あれ. . . （戻れない） 2014年2月16日日曜日

絶望が俺たちのゴールだ 2014年2月16日日曜日

一体どうすればいいんだ... • Building Blocksの画面遷移を参考にさせていただく！ 2014年2月16日日曜日

まるパクする HelloFirefox index.html <section role="region" data-position="current">  <header class="fixed"> <h1>Hello Building Blocks</h1> </header> <article class="content scrollable header"> <h1>１番目のページ</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>２番めのページ</h1> </article> </section> 2014年2月16日日曜日

まるパクその２ HelloFirefox js app.js window.onload = function() { $("#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'; }); }; 2014年2月16日日曜日

ページ遷移無事成功 2014年2月16日日曜日

アプリ連携とは... 連携先アプリとは... ・ブラウザ・電話・カメラ等... 2014年2月16日日曜日

アプリ連携（ブラウザ）を体験してみる HelloFirefox app.js js window.onload = function() { $("#firstButton").click(function() { var myUrl = "(好きなURL)" var activity = new MozActivity({ name:"view", data:{ type:"url", url:myUrl } }); }); } 2014年2月16日日曜日

アプリ連携（ブラウザ）を体験してみる HelloFirefox app.js js window.onload = function() { $("#firstButton").click(function() { var myUrl = "(好きなURL)" var activity = new MozActivity({ name:"view", data:{ type:"url", url:myUrl } }); ブラウザ呼び出し }); } 2014年2月16日日曜日

アプリ更新ブラウザ呼び出し成功 2014年2月16日日曜日

番外編アプリジェネレータを使う • 環境準備 • アプリひな形をダウンロード • ライブラリを追加 • アプリ実装 • アプリデプロイ ※本番外編はコマンド操作が必要になります 2014年2月16日日曜日

http://nodejs.org/ • voloのインストール（コマンドラインから） $ npm install -g volo 2014年2月16日日曜日編外 • node.jsのインストール番環境準備

• （任意の場所にcdしてから） $ volo create myproject mozilla/mortar-app-stub • 2014年2月16日日曜日 Firefox OSアプリ一式がダウンロードされる（アプリ本体はwww配下）編外番アプリひな形ダウンロード

$ cd myproject $ volo add jquery • 2014年2月16日日曜日 www/js/lib 配下に自動的にライブラリがインストールされる編外番ライブラリを追加

編外 • 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特有の書き位置に注意 2014年2月16日日曜日

編外 • 番アプリデプロイ myproject配下で $ volo serve • シミュレータのブラウザで http://localhost:8008 にアクセスアプリ更新の際、いちいちアンインストールすることなく更新ボタン一つで動作確認が出来るようになります 2014年2月16日日曜日

2. Firefox OSでTwitter Clientを作る • Twitter Developers に登録 • OAuth関連処理を実装する • ツイッタークライアントぽいUIを作る • タイムラインを取得する • ツイート機能を実装する • 画像付きツイート機能を実装する 2014年2月16日日曜日

新規プロジェクトで開始 • 新規フォルダを作ります HelloFirefox をまるコピします HelloFirefox 2014年2月16日日曜日コピー FirefoxTwitter

アプリ情報を書き換えとく • manifest.webappのアプリ情報を適当に書き換えて下さい（自由） "name": "FirefoxTwitter", "description": "My First twitter client", • index.htmlのヘッダ情報を適当に書き換えて下さい（自由） <header class="fixed"> <h1>Hello Twitter</h1> </header> 2014年2月16日日曜日

Twitter Developersに登録 https://dev.twitter.com/ サインイン 2014年2月16日日曜日

Twitter Developersに登録 My Applications create a new application 2014年2月16日日曜日

アプリ情報を入力アプリ名アプリの説明サイトURL （空白）チェック確定 2014年2月16日日曜日

！！？ 2014年2月16日日曜日

このエラーがでたら、キャリアメール認証をするしかない.. • キャリアメールで verify@twtr.jp に空メール送信 • 返信が帰ってくるのでそこのURLをクリック • そこでTwitterにログイン 2014年2月16日日曜日

APIキー発行後でつかいます他人には教えない 2014年2月16日日曜日

設定変更しておく Read and Writeに 2014年2月16日日曜日

OAuthについてさらっとおさらい Twitter ユーザーアプリ 2014年2月16日日曜日

OAuthについてさらっとおさらい Twitter 認証パスワードアプリ使用許可ユーザー認証使う（パスワード教えない）アプリ 2014年2月16日日曜日機能呼び出し

OAuthのワークフローユーザーアプリ Twitter 時系列 2014年2月16日日曜日

OAuthのワークフローユーザーアプリ Twitter 1. 2014年2月16日日曜日 Consumer Keyを使って、リクエストトークンを取得

OAuthのワークフローユーザーアプリ Twitter 1. 2. 2014年2月16日日曜日 Consumer Keyを使って、リクエストトークンを取得リクエストトークンからユーザー許可を求めるURLを生成してブラウザで表示

OAuthのワークフローユーザーアプリ Twitter 1. Consumer Keyを使って、リクエストトークンを取得 2. リクエストトークンからユーザー許可を求めるURLを生成してブラウザで表示 3. ユーザーがアプリ使用を許可、 TwitterはPINを表示（ユーザー認証あり） 2014年2月16日日曜日

OAuthのワークフローユーザーアプリ Twitter 1. Consumer Keyを使って、リクエストトークンを取得 2. リクエストトークンからユーザー許可を求めるURLを生成してブラウザで表示 3. ユーザーがアプリ使用を許可、 TwitterはPINを表示（ユーザー認証あり） 4. 2014年2月16日日曜日ユーザーがアプリにPINを入力

OAuthのワークフローユーザーアプリ Twitter 1. Consumer Keyを使って、リクエストトークンを取得 2. リクエストトークンからユーザー許可を求めるURLを生成してブラウザで表示 3. ユーザーがアプリ使用を許可、 TwitterはPINを表示（ユーザー認証あり） 4. 5. 2014年2月16日日曜日ユーザーがアプリにPINを入力 Consumer Key, リクエストトークン、 PINを使ってアクセストークンを取得

OAuthのワークフローユーザーアプリ Twitter 1. Consumer Keyを使って、リクエストトークンを取得 2. リクエストトークンからユーザー許可を求めるURLを生成してブラウザで表示 3. ユーザーがアプリ使用を許可、 TwitterはPINを表示（ユーザー認証あり） 4. ユーザーがアプリにPINを入力 5. Consumer Key, リクエストトークン、 PINを使ってアクセストークンを取得 6. 以後、アクセストークンを使って Twitterの各種機能を呼び出す 2014年2月16日日曜日

絶望が俺たちのゴールだ 2014年2月16日日曜日

ライブラリがないと死ぬ • 今回は jsOAuth を使わせていただく https://github.com/bytespider/jsOAuth 2014年2月16日日曜日

ライブラリダウンロード https://github.com/bytespider/jsOAuth/tree/master/dist HelloFirefox 2014年2月16日日曜日 js lib jsOAuth-1.3.6.js

index.htmlに追記... FirefoxTwitter index.html <head> <meta charset="utf-8" /> <title>Hello Firefox OS</title> <script src="js/lib/jquery-2.1.0.js"></script> <script src="js/lib/jsOAuth-1.3.6.js"></script> <script src="js/app.js"></script> 2014年2月16日日曜日

このライブラリ、そのままでは使えない • 理由 XmlHttpRequestのクロスドメイン通信制約による 2014年2月16日日曜日

クロスドメイン制約とは Twitter ユーザー両方と同時に通信できない（やや語弊あり、正確には調べて下さい）アプリ 2014年2月16日日曜日

クロスドメイン制約回避方法 • XmlHttpRequestオブジェクト作成時に引数を追加 XMLHttpRequest({mozSystem: true}); • manifestにパーミッションを追記 "type": "privileged", "permissions": { "systemXHR": { "description": "for OAuth" } } 2014年2月16日日曜日

Firefox OS アプリ種別について標準アプリ特権アプリ (privileged) 公認アプリ (certiﬁed) 特別な権限を必要としない特権アプリはFirefox 認定アプリ作成にはOEM、標準のアプリです。 Marketplaceによる通常よりキャリアの承認が必要となるも厳格なレビューを経て承認ため、一般のアプリ開発者はされる必要があります。本アプリを作成することはできません。（つまり絶望） 2014年2月16日日曜日

XmlHttpRequestに引数追加 FirefoxTwitter 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 2014年2月16日日曜日 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."; }

Manifestにパーミッション追記 FirefoxTwitter { } 2014年2月16日日曜日 manifest.webapp "name": "HelloFirefox", "description": "My First app", "launch_path": "/index.html", "icons": { "128": "/img/icons/icon_128.png" }, "type": "privileged", "permissions": { "systemXHR": { "description": "for OAuth" } }

これからが本当の地獄だ 2014年2月16日日曜日

OAuth関連処理を実装するその１ FirefoxTwitter app.js js var oauth; window.onload = function () { (中略)・・・ // OAuth関連の処理を開始する }; firstOAuthFunc(); /** * 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 を使って、リクエストトークンを取得する }; 2014年2月16日日曜日 oauth.fetchRequestToken(successFetchRequestToken, failureHandler);

OAuth関連処理を実装するその１ FirefoxTwitter app.js js var oauth; window.onload = function () { (中略)・・・ // OAuth関連の処理を開始する }; firstOAuthFunc(); /** * 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オブジェクト生成 oauth = new OAuth(config); // 1. consumer key と consumer secret を使って、リクエストトークンを取得する（さっきの1∼6までの） 1の処理 }; 2014年2月16日日曜日わせる値たち oauth.fetchRequestToken(successFetchRequestToken, failureHandler);

OAuth関連処理を実装するその１ FirefoxTwitter app.js js var oauth; window.onload = function () { (中略)・・・ // OAuth関連の処理を開始する }; firstOAuthFunc(); /** * 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 を使って、リクエストトークンを取得する }; 2014年2月16日日曜日 oauth.fetchRequestToken(successFetchRequestToken, failureHandler);

コールバック関数とは第一引数：処理成功時のハンドラ（関数オブジェクト）第二引数：処理失敗時のハンドラ（関数オブジェクト） oauth.fetchRequestToken(successFetchRequestToken, failureHandler); var successFetchRequstToken = function() { // 成功した時の処理 } var failureFetchRequstToken = function() { // 失敗した時の処理 } あなたのプログラムライブラリ fetchRequestToken 呼ぶライブラリが処理 successFetchRequestToken を呼んでくれる 2014年2月16日日曜日

OAuth関連処理を実装するその２ 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 を使って、アクセストークンを取得する }; 2014年2月16日日曜日 oauth.fetchAccessToken(successFetchAccessToken, failureHandler);

OAuth関連処理を実装するその２ 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 を使って、アクセストークンを取得する }; 2014年2月16日日曜日 oauth.fetchAccessToken(successFetchAccessToken, failureHandler);

OAuth関連処理を実装するその２ FirefoxTwitter js app.js /** * 1の処理の成功時のコールバック関数 */ var successFetchRequestToken = function (authUrl) { // 2. リクエストトークンを使い、ユーザにアクセス許可を求めるURLを生成してブラウザを起動 // 3. ブラウザで認証を行い、ユーザーにPINが表示される var activity = new MozActivity({ name:"view", data:{ type:"url", url:authUrl } }); 2∼5までの処理 // 4. アプリで用意したダイアログにPIN を入力してもらう var pin = prompt("Please enter your PIN", ""); // oauthオブジェクトにPINをセット oauth.setVerifier(pin); // 5. consumer key, consumer secret, リクエストトークン, PIN を使って、アクセストークンを取得する }; 2014年2月16日日曜日 oauth.fetchAccessToken(successFetchAccessToken, failureHandler);

OAuth関連処理を実装するその２ FirefoxTwitter js app.js /** * 1の処理の成功時のコールバック関数 */ var successFetchRequestToken = function (authUrl) { // 2. リクエストトークンを使い、ユーザにアクセス許可を求めるURLを生成してブラウザを起動 // 3. ブラウザで認証を行い、ユーザーにPINが表示される var activity = new MozActivity({ name:"view", data:{ type:"url", url:authUrl } }); WebActivitiesでブラウザ呼び出し // 4. アプリで用意したダイアログにPIN を入力してもらう var pin = prompt("Please enter your PIN", ""); // oauthオブジェクトにPINをセット oauth.setVerifier(pin); // 5. consumer key, consumer secret, リクエストトークン, PIN を使って、アクセストークンを取得する }; 2014年2月16日日曜日 oauth.fetchAccessToken(successFetchAccessToken, failureHandler);

OAuth関連処理を実装するその２ 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 を使って、アクセストークンを取得する }; 2014年2月16日日曜日 oauth.fetchAccessToken(successFetchAccessToken, failureHandler);

OAuth関連処理を実装するその３ FirefoxTwitter js app.js /** * 5の処理の成功時のコールバック関数 */ var successFetchAccessToken = function () { alert("success oauth"); }; /** * 各処理失敗時のコールバック関数 */ var failureHandler = function (data) { alert("failure"); }; successFetchAccessToken関数がよばれれば、アクセストークンが取得できています 2014年2月16日日曜日

アプリ更新アプリ起動ブラウザ起動アプリ切替こんな画面になれば成功 2014年2月16日日曜日

お疲れ様でした ※もう少しだけ続きます 2014年2月16日日曜日

このままだと... （一回目）（二回目）（三回目）（毎回認証操作が. . .） 2014年2月16日日曜日

取得したアクセストークンを保存する 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); （中略） var successFetchAccessToken = function () { // 取得したアクセストークンをWebStorageで保存する（次回以降のため） }; 2014年2月16日日曜日 localStorage.setItem("accessTokenKey", oauth.getAccessTokenKey()); localStorage.setItem("accessTokenSecret", oauth.getAccessTokenSecret()); alert("success oauth");

取得したアクセストークンを保存する var firstOAuthFunc = function () { (中略) // OAuthのオブジェクトを作成 oauth = new OAuth(config); // 保存してあるアクセストークンがあればそれをロードする WebStorageで値呼び出し 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); （中略） var successFetchAccessToken = function () { // 取得したアクセストークンをWebStorageで保存する（次回以降のため） WebStorageで値を保存 }; 2014年2月16日日曜日 localStorage.setItem("accessTokenKey", oauth.getAccessTokenKey()); localStorage.setItem("accessTokenSecret", oauth.getAccessTokenSecret()); alert("success oauth");

ツイッタークライアントぽいUIを作るタイムライン画面投稿画面投稿画面へ続き取得 TL画面へ TL更新 ※UI部品はすべてBuilding Blocksの流用です 2014年2月16日日曜日投稿

実装例 html 1/2 HelloFirefox index.html <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> 2014年2月16日日曜日あくまで例だからな

実装例 html 1/2 HelloFirefox ヘッダー（上部帯）ツールバー（下部帯）本体部 2014年2月16日日曜日 index.html <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> あくまで例だからな

実装例 html 1/2 HelloFirefox index.html 新規投稿画面へ行くボタン追加取得ボタン更新ボタン <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> 2014年2月16日日曜日あくまで例だからな

実装例 html 2/2 HelloFirefox 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> 2014年2月16日日曜日

実装例 html 2/2 HelloFirefox 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> 2014年2月16日日曜日

画面遷移の実装例 FirefoxTwitter js app.js /** * 画面を開いた時に最初に処理される部分 */ window.onload = function () { (中略) }; 2014年2月16日日曜日 $("#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'; });

アプリ更新タイムライン画面投稿画面投稿画面へ 2014年2月16日日曜日 TL画面へ

つぶやきを取得するには • TwitterのAPI情報を見てみよう • 2014年2月16日日曜日 https://dev.twitter.com/docs/api/1.1/get/statuses/home_timeline

タイムラインを取得する FirefoxTwitter js app.js window.onload = function() { （中略） /** * 更新ボタンをおした時のハンドラ */ $("#updateButton").click(function () { // TweetBoxの中身を空にする clearTweetDom(); // HomeTimelineを取得する }); } getHomeTimeline(); firstOAuthFunc(); /** * 表示したTweetをすべて消す */ var clearTweetDom = function () { var parent = $("#tweetBox"); parent.empty(); }; 2014年2月16日日曜日

タイムラインを取得する FirefoxTwitter js app.js window.onload = function() { （中略） /** * 更新ボタンをおした時のハンドラ */ $("#updateButton").click(function () { // TweetBoxの中身を空にする clearTweetDom(); // HomeTimelineを取得する }); } getHomeTimeline(); firstOAuthFunc(); /** * 表示したTweetをすべて消す tweetBoxの中身を空にする 2014年2月16日日曜日 */ var clearTweetDom = function () { var parent = $("#tweetBox"); parent.empty(); };

タイムラインを取得する 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); }; 2014年2月16日日曜日

タイムラインを取得する FirefoxTwitter js app.js （続き） /** * Home_timelineを取得する APIのURLにアクセス */ 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); }; 2014年2月16日日曜日

タイムラインを取得する 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を画面に表示する tweetBoxの中身に dataを表示する 2014年2月16日日曜日 */ var successGetHomeTimeline = function (data) { var parent = $("#tweetBox"); parent.text(data.text); };

ResponseはJSONフォーマットで帰ってくる ↓↓これがJSONフォーマット var successGetHomeTimeline = function (data) { var parent = $("#tweetBox"); parent.text(data.text); }; 2014年2月16日日曜日 ←これの data に格納されてるのがJSONデータ

JSONとは. . . • JavaScript Object Notationの略 • JavaScriptでお手軽にパースできるデータ記述言語 sample {person:[{ "name": "kassy_kz", "feature" : "健全" },{ "name": "androidsola", "feature" : "変態" }]} プロパティ名：値をカンマ区切りで記述していく 2014年2月16日日曜日

JSONデータをパースしてみる FirefoxTwitter js app.js /** * 取得したTweetsを画面に表示する */ var successGetHomeTimeline = function (data) { // JSON形式のデータをオブジェクトに格納する var tweetList = JSON.parse(data.text); // tweetListを１つずつ取り出して表示する }; 2014年2月16日日曜日 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); }

JSONデータをパースしてみる FirefoxTwitter js app.js /** * 取得したTweetsを画面に表示する */ var successGetHomeTimeline = function (data) { // JSON形式のデータをオブジェクトに格納する var tweetList = JSON.parse(data.text); // tweetListを１つずつ取り出して表示する JSONをパース JSONをオブジェクトから値を取り出して表示（コンソールに） }; 2014年2月16日日曜日 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); }

アプリ更新コンソールにTwitterタイムラインのつぶやきが表示 2014年2月16日日曜日

画面に表示するには... FirefoxTwitter js app.js var successGetHomeTimeline = function (data) { （中略） }; for (var i = 0; i < tweetList.length; i++) { var tweet = tweetList[i]; addTweetToDom(tweet); } /** * Tweet(単体)をDisplayに表示する */ 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 var var var $parent = $("#tweetBox"); $li = $("<li>").appendTo($parent); $div = $("<div>").addClass("tweet").appendTo($li); $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); }; 2014年2月16日日曜日

画面に表示するには... FirefoxTwitter js app.js var successGetHomeTimeline = function (data) { （中略） }; for (var i = 0; i < tweetList.length; i++) { var tweet = tweetList[i]; addTweetToDom(tweet); } /** * Tweet(単体)をDisplayに表示する */ var addTweetToDom = function (tweet) { var screenName = tweet.user.screen_name; var name = tweet.user.name; JSONオブジェクトから var tweetText = tweet.text; 値取り出し var prof_img_url = tweet.user.profile_image_url; var var var var 新規HTML要素の追加 $("<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); }; 2014年2月16日日曜日 $parent = $("#tweetBox"); $li = $("<li>").appendTo($parent); $div = $("<div>").addClass("tweet").appendTo($li); $userDiv = $("<div>").appendTo($div);

画面に表示するには... FirefoxTwitter js app.js var successGetHomeTimeline = function (data) { （中略） }; for (var i = 0; i < tweetList.length; i++) { var tweet = tweetList[i]; addTweetToDom(tweet); } /** * Tweet(単体)をDisplayに表示する */ 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 var var var $("<要素名>") appendTo()で傘下に追加 $parent = $("#tweetBox"); 要素追加して... $li = $("<li>").appendTo($parent); $div = $("<div>").addClass("tweet").appendTo($li); $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); }; 2014年2月16日日曜日

スタイルシートのカスタマイズ... FirefoxTwitter css app.css .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; } ※あくまで一例です .fileArea{ overflow: hidden; } .chooseFile { .tweet { display: inline-block; margin-left: 58px; float: right; } overflow: hidden; position: relative; .tweetIcon { padding: .5em; float: left; border: 1px solid #999; margin-top: 3px; background-color: #eee; margin-left: -58px; } } .chooseFile input[type="file"] { opacity: 0; header h1 { position: absolute; padding-left: 10px; right: 0; } top: 0; section[role="region"] margin: 0; > .content{ font-size: 100px; padding: 0 5px !important; cursor: pointer; } } .fileName { #newTweetText { float: left; width: 100%; width: 70%; margin-top: 5px; height: 28px; margin-bottom: 5px; padding: 5px; border: 1px solid #bbb; border: 1px solid #bbb; background: #FFE; text-overflow: ellipsis; -moz-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } special thanks @meco300 2014年2月16日日曜日

ツイート機能を... • • 2014年2月16日日曜日 APIは以下のページから https://dev.twitter.com/docs/api/1.1/post/statuses/update

ツイート機能を... FirefoxTwitter app.js js window.onload = function() { （中略） $("#statusUpdateButton").click(function () { // 新規ツイート投稿を行う } }); newTweetPost(); /** * つぶやきを投稿する */ 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"); } 2014年2月16日日曜日

ツイート機能を... FirefoxTwitter app.js js window.onload = function() { （中略） $("#statusUpdateButton").click(function () { // 新規ツイート投稿を行う } }); newTweetPost(); /** * つぶやきを投稿する */ var newTweetPost = function () { var data; // テキストボックスの中身を取得 var statusText = document.getElementById("newTweetText").value; テキストボックスの中身を取得投稿 POSTメソッドでアクセス // dataオブジェクトに投稿内容を格納 data = { status:statusText }; // 投稿 } oauth.post('https://api.twitter.com/1.1/statuses/update.json', data, successHandler, failureHandler); var successHandler = function () { console.log("success"); } 2014年2月16日日曜日

アプリ更新つぶやき成功 2014年2月16日日曜日

画像付きツイート機能を... • • 2014年2月16日日曜日 APIは以下のページを参照 https://dev.twitter.com/docs/api/1.1/post/statuses/update_with_media

画像付きツイート FirefoxTwitter newTweetPostメソッドを編集 app.js 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に中身がある場合、画像つき投稿 } 2014年2月16日日曜日 } 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 newTweetPostメソッドを編集 app.js js var newTweetPost = function () { var data; // テキストボックスの中身を取得 var statusText = document.getElementById("newTweetText").value; // fileの中身を確認 formから画像情報を取得 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に中身がある場合、画像つき投稿画像つきツイート } 2014年2月16日日曜日 } else { data = { "status":statusText, "media[]":file }; oauth.request({ method:"POST", url:"https://api.twitter.com/1.1/statuses/update_with_media.json", data:data }); }

3. アプリを公開する 2014年2月16日日曜日

アプリ公開してみる • 公開方法 • 自前サーバーで公開（普通のWebと同じ） • • Firefox Marketplaceで公開 • • 2014年2月16日日曜日インストール＆ダウンロードさせることも可能 Host型（自前サーバーで提供） Package型（アプリを固めてMarketplaceに送る）

アプリ公開してみる ※ Firefox marketplaceでpackage公開の場合 zipで固めて... MarketPlaceでアップロード https://marketplace.ﬁrefox.com/developers/submit/ 2014年2月16日日曜日審査へ

お疲れ様でした今日のハンズオンは以上です。 2014年2月16日日曜日

今後の課題 • 足りない機能を実装する • • メンションラインの取得とかダイレクトメッセージの送受信とか • JavaScriptのコードをより洗練する • • 現在の実装はグローバルを汚染しまくりであまりよろしくない... githubに整形したコードを上げたので参考にして下さい https://github.com/kassy-kz/FirefoxOS_TwitterClient_Sample 2014年2月16日日曜日

ご静聴ありがとうございました 2014年2月16日日曜日

Firefoxosハンズオン

by Kazutoshi Kashimoto on Feb 16, 2014

Statistics

Views

Actions

2 Embeds 51

Accessibility

Categories

Upload Details

Usage Rights

Report content

Firefoxosハンズオン Presentation Transcript

https://twitter.com	33
http://www.kisato.net	23