Contenu connexe Similaire à Firefoxosハンズオン (20) Firefoxosハンズオン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
12. エディタについて
以下の機能を備えたものを…
• 入力コード補完機能
• シンタックスハイライト機能
• コード自動整形機能
なにそれ?って思った人は問答無用です!
大人しく Sublime Text 2 をインストールしてください
http://www.sublimetext.com/2
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>
ソースリンク
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"
}
}
アプリに関する
情報
アイコンのパス
26. アプリのアイコンを
設定しましょう
• 自作するも良し
• フリー素材を取ってきても良し
• 本日は特別アイコンを贈呈
この位置に配置
こちらからDL
HelloFirefox img icons icon_128.png
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
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は最高だぜ");
});
};
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でググって、いろんなパラメータをいじってみて下さい
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
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 ソースリンク
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>
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>
(リンク貼りゃいいんだよ)
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';
});
};
68. 1. Firefox OSと仲良くなる
• HTMLで Hello World
• JavaScriptで Hello JS
• cssを使う
• Firefox OSらしいUIにする
• 画面遷移を実装する
• アプリ連携を体験する
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
ブラウザを
呼び出す
コード
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を作る
• タイムラインを取得する
• ツイート機能を実装する
• 画像付きツイート機能を実装する
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を作る
• タイムラインを取得する
• ツイート機能を実装する
• 画像付きツイート機能を実装する
89. 2. Firefox OSでTwitter Clientを作る
• Twitter Developers に登録
• OAuth関連処理を実装する
• ツイッタークライアントぽいUIを作る
• タイムラインを取得する
• ツイート機能を実装する
• 画像付きツイート機能を実装する
91. OAuthのワークフロー
ユーザーアプリTwitter
Consumer Keyを使って、
リクエストトークンを取得
リクエストトークンからユーザー許可を
求めるURLを生成してブラウザで表示
ユーザーがアプリ使用を許可、
TwitterはPINを表示(ユーザー認証あり)
ユーザーがアプリにPINを入力
Consumer Key, リクエストトークン、
PINを使ってアクセストークンを取得
以後、アクセストークンを使って
Twitterの各種機能を呼び出す
1.
2.
3.
4.
5.
6.
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>
!
!
!
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の処理で共通)
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を作る
• タイムラインを取得する
• ツイート機能を実装する
• 画像付きツイート機能を実装する
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();
};
画面遷移の
処理
130. 2. Firefox OSでTwitter Clientを作る
• Twitter Developers に登録
• OAuth関連処理を実装する
• ツイッタークライアントぽいUIを作る
• タイムラインを取得する
• ツイート機能を実装する
• 画像付きツイート機能を実装する
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要素に
とってきた値を書込む
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);
}
};
パースしてできたオブジェクト
から値を取り出し
取り出したオブジェクトを表示
(コンソールに)
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”
ツイート本文を格納
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
149. 2. Firefox OSでTwitter Clientを作る
• Twitter Developers に登録
• OAuth関連処理を実装する
• ツイッタークライアントぽいUIを作る
• タイムラインを取得する
• ツイート機能を実装する
• 画像付きツイート機能を実装する
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叩く)
成功時のハンドラ
156. 2. Firefox OSでTwitter Clientを作る
• Twitter Developers に登録
• OAuth関連処理を実装する
• ツイッタークライアントぽいUIを作る
• タイムラインを取得する
• ツイート機能を実装する
• 画像付きツイート機能を実装する
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を叩く
162. アプリ公開してみる
• 公開方法
• 自前サーバーで公開(普通のWebと同じ)
• インストール&ダウンロードさせることも可能
• Firefox Marketplaceで公開
• Host型(自前サーバーで提供)
• Package型(アプリを固めてMarketplaceに送る)
163. アプリ公開してみる
※ Firefox marketplaceでpackage公開の場合
zipで固めて... MarketPlaceでアップロード審査へ
https://marketplace.firefox.com/developers/submit/
165. 今後の課題
• 足りない機能を実装する
• メンションラインの取得とか
• ダイレクトメッセージの送受信とか
• JavaScriptのコードをより洗練する
• 現在の実装はグローバルを汚染しまくりであまりよろしくない...
• githubに整形したコードを上げたので参考にして下さい
https://github.com/kassy-kz/FirefoxOS_TwitterClient_Sample