Firefoxosハンズオン

Firefox OS ハンズオン
2014 / 5 / 31
for 名古屋つ部
!
@kassy_kz

自己紹介
名前
• @kassy_kz （かっしー）
• 横浜 Android PF部によく出没
• Effective Android（共著）
• 同人活動 (Tech-orz)
- コミックマーケットC82, C84出展
- Maker Faire Tokyo 2013 出展
特徴

本日の進行
対象者
• Firefox OS初心者
• Firefox OS初心者
内容
• Firefox OSと仲良くなる
• Firefox OSでTwitterClientをつくる
• アプリを公開する
ハッシュタグ： #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

Sublime Text2をパワーアップ 1/2
package controlのインストール
[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にする
• 画面遷移を実装する
• アプリ連携を体験する

HTMLで Hello World
• フォルダを作ります
HelloFirefox
• テキストファイルを作ります
HelloFirefox index.html

HTMLで Hello World
• index.htmlに以下の記述を
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello Firefox OS</title>
</head>
<body>
<h1>Hello Firefox</h1>
</body>
</html>
ソースリンク

コーディングのテク
htmlとだけ打ち込んで
※Sublime Text2の場合
tabキー押下
補完でひな形が！

ナニを書いたのか
• <(要素名)>〜</(要素名)>で要素を囲む構造
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</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",
"icons": {
}
}
アプリに関する
情報
アイコンのパス

シミュレーターへのアプリインストール
パッケージアプリを追加HelloFirefox
を選択
更新ボタンを押す

以降、アプリ更新するときは....
アプリタブから更新ボタン
ちょっとめんどい
端末タブから停止して

アプリのアイコンを
設定しましょう
• 自作するも良し
• フリー素材を取ってきても良し
• 本日は特別アイコンを贈呈
この位置に配置
こちらからDL
HelloFirefox img icons icon_128.png

アプリ更新
アイコンが
変わればOK

JavaScriptで Hello JS
• index.htmlに追記（赤い部分）
<!DOCTYPE html>
<html>
<head>
<script src="js/app.js"></script>
</head>
<body>
<button id="firstButton">Click</button>
<div id="firstDiv"></div>
</body>
</html>
ソースリンク

• index.htmlに追記
スクリプトの
パス追加
ボタンと
div要素追加
id重要！
後で出てきます
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

• jsフォルダ、app.jsファイルを追加する
window.onload = function() {
document.getElementById("firstButton").onclick = function() {
document.getElementById("firstDiv").innerHTML = "JSは最高だぜ";
};
};
ソースリンク
HelloFirefox js app.js

コメントを書きましょう
• htmlファイルの場合
<!DOCTYPE html>
<html>
<body>
• jsファイルの場合
/*
この部分はコメント
*/
// この行はコメント
document.getElementById(“**”).onclick = function() {
document.getElementById(“**”).innerHTML = “**”;
};
};

</body>
</html>
<!— 〜 —>で
囲った部分はコメント
/* 〜 */で
囲った部分はコメント
// で始まる行は
コメント

div要素参照
さっきのidを
参照してる
};
};
ボタン要素参照

ボタンクリック時の
イベントを記述
};
};

画面ロード時に
実行する関数
};
};

アプリ更新
クリックで
文字が表示

ライブラリを使う
jQueryを落とすhttp://jquery.com/download/
Download the uncompressed, development jQuery 2.1.1
ここに配置
HelloFirefox js lib jquery-2.1.1.js

<!DOCTYPE html>
<html>
<head>
<script src="js/lib/jquery-2.1.1.js"></script>
</head>
<body>
...
ソースリンク

<!DOCTYPE html>
<html>
<head>
</head>
<body>
...
ライブラリの
パス追加
（順番重要）

• app.jsを編集する
};
$("#firstButton").click(function() {
$("#firstDiv").text("JSは最高だぜ");
});
};
ソースリンク

• app.jsを編集する
ボタン要素参照
div要素参照
jQueryを使う場合
#(要素id名)
.(要素クラス名)
で参照する
});
};

アプリ更新
同じ挙動をすればOK

Sublime Text2の便利な使い方
フォルダを
ドラッグ
ファイル一覧が！

cssで装飾する 1/2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
ソースリンク
cssのパス

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

アプリ更新
表示スタイル
が変われば
成功

開発ツールを使ってみる
「デバッグ」

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

Firefox OSらしいUIとは
Building Blocksのページ
http://buildingfirefoxos.com/
サンプルアプリを
インストールしてみよう
※シミュレーターで
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>

<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

Building Blocks を取り込む
コピーしたテキストをの<head>タグ内にペースト
<head>
!!

<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 ソースリンク

コーディングのテク
インデントぐちゃぐちゃコードを全選択してから
[Edit]->[Line]->[Reindent]で整形

アプリに手を加える
<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>
</article>
</section>
</body>
ソースリンク
index.htmlの<body>タグ内部を編集

らしいヘッダ
らしいボタン
<body>
</header>
</article>
</section>
!
</body>

アプリ更新
らしいヘッダ
らしいボタン

画面遷移ってどうやるの
<body>
<header>
</header>
<div>
</div>
<a href="index2.html">ページ遷移</a>
</section>
</body>
（リンク貼りゃいいんだよ）

あれ. . .
（戻れない）

一体どうすればいいんだ...
• Building Blocksの画面遷移を真似する

<section role="region" data-position="current">
</header>
<h1>１番目のページ</h1>
</article>
</section>
!
<section role="region" id="newSection" data-position="right">
<a id="backButton" href="#">
<span class="icon icon-back">back</span>
</a>
<h1>Next Page</h1>
</header>
<h1>２番めのページ</h1>
</article>
</section>
まるパクする (1/2)
ソースリンクHelloFirefox index.html

ソースリンク
まるパクする (2/2)
$("#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';
});
};

アプリ連携とは...
AndroidでいうIntentみたいなもの
連携先アプリとは...
・ブラウザ
・電話
・カメラ
　等...

アプリ連携（ブラウザ）を体験してみる 1/2
ソースリンク
!!!
<body>
</header>
<h1>１番目のページ</h1>
<button class="recommend" id="secondButton">web</button>
</article>
</section>
<section role="region" id="newSection" data-position="right">
</a>
<h1>Next Page</h1>
</header>
<h1>２番めのページ</h1>
</article>
</section>
ボタン追加

アプリ連携（ブラウザ）を体験してみる 2/2
ソースリンク
!
!
!
$("#secondButton").click(function() {
var myUrl = “(好きなURL)”;
var activity = new MozActivity({
name:"view",
data:{
type:"url",
url:myUrl
}
});
});
}

!
!
$("#secondButton").click(function() {
var myUrl = “(好きなURL)”;
name:"view",
data:{
type:"url",
url:myUrl
}
});
});
}
FirefoxTwitter js app.js
ブラウザを
呼び出す
コード

アプリ更新
ブラウザ呼び出し成功

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

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

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

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

アプリ実装
番外編
• index.html
<body>
<script type="text/javascript"
data-main="js/init.js"
src="js/lib/require.js"></script>
!
</body>
• app.js
define(function(require) {
　（中略）
!
});
});
※require.js特有の書き位置に注意

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

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

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

アプリ情報を書き換える
• manifest.webappのアプリ情報を
適当に書き換えて下さい（自由）
{
"name": "FirefoxTwitter",
"description": "My First TwitterClient",
!
• index.htmlのヘッダ情報を適当に
書き換えて下さい（自由）
<h1>Hello Twitter</h1>
</header>
FirefoxTwitter manifest.webapp
FirefoxTwitter index.html

Twitter Developersにアプリを登録
https://apps.twitter.com/
Sign inをクリックCreate New Appをクリック

アプリ名
アプリの説明
サイトURL
持ってなければhttp://example.comとでも
（空白でOK）
チェック
確定
アプリ情報を入力
規約を読んで

アプリ名について注意
以下の名前は使えないので注意
• 既存のTwitterアプリと被る名前
• [Twitter] という文字列を含む名前

APIキー発行
後でつかいます
他人には教えない

設定変更しておく
Read and Writeに
この変更をしないとWrite(つぶやき)ができない

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

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

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

ライブラリダウンロード
https://github.com/bytespider/jsOAuth/tree/master/dist
この位置に配置
FirefoxTwitter js lib jsOAuth-1.3.6.js

index.htmlに追記
FirefoxTwitter index.html ソースリンク
<head>
<script src="js/lib/jsOAuth-1.3.6.js"></script>
<script src=“js/app.js"></script>
!
!
!

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

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

一般的なクロスドメイン回避はどうやってるか
HTTP
Request
Http
Response
HTTPレスポンスのヘッダに
特別な許可を含めることで
同時通信を認める
少なくともパッケージ型のアプリではこの手は使えない

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

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

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
ソースリンク

Manifestにパーミッション追記
FirefoxTwitter manifest.webapp
{
"name": "FirefoxTwitter",
"description": "My First Twitter Client",
"icons": {
},
"type": "privileged",
"permissions": {
"systemXHR": {
"description": "for OAuth"
}
}
}
ソースリンク

OAuth関連処理を実装する 1/4
FirefoxTwitter js app.js ソースリンク
// oauthオブジェクト
var oauth;
!
window.onload = function () {
!
// OAuth関連の処理を開始する
firstOAuthFunc();
}
!
OAuth処理を開始する関数
（すぐ後で実装）

/**
* 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);
};

/**
*/
!
var config = {
};
!
!
// 1. consumer key と consumer secret を使って、リクエストトークンを取得
};
さっき取得したキー
OAuthオブジェクト
生成
（前記1～6のウチ）
1の処理
OAuthオブジェクト
に与える値

/**
*/
!
var config = {
};
!
!
};
失敗時のハンドラ
成功時のハンドラ
（すぐ後で出てきます）

コールバック関数とは
var successFetchRequstToken = function() {/* 成功した時の処理 */ }
var failureFetchRequstToken = function() {/* 失敗した時の処理 */ }
あなたの
プログラム
ライブラリ
ハンドラを渡す
ライブラリが処理
!
ハンドラを呼び出す
ハンドラ定義
ハンドラ渡す

/**
* 1の処理の成功時のコールバック関数
*/
var successFetchRequestToken = function (authUrl) {
!
// 2. リクエストトークンを使い、ユーザにアクセス許可を求めるURLを生成してブラウザを起動
// 3. ブラウザで認証を行い、ユーザーにPINが表示される
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);
};

/**
*/
!
// 2. リクエストトークンを使い、ブラウザを起動
name:"view",
data:{
type:"url",
url:authUrl
}
});
!
!
!
// 5. アクセストークンを取得する
};
1の処理成功時
のハンドラ関数
ブラウザで
認証画面を開く
PINを入力する
窓を用意
OAuthオブジェク
トにPINセット
アクセストークン
を取得しにいく

/**
*/
!
// 2. リクエストトークンを使い、ブラウザを起動
name:"view",
data:{
type:"url",
url:authUrl
}
});
!
!
!
// 5. アクセストークンを取得する
};
失敗時のハンドラ
（すぐ後で出てきます）

/**
*/
var successFetchAccessToken = function () {
alert("success oauth");
};
!
/**
* 各処理失敗時のコールバック関数
*/
var failureHandler = function (data) {
alert("failure");
};

/**
*/
};
!
/**
* 各処理失敗時のコールバック関数
*/
var failureHandler = function (data) {
alert("failure");
};
５の処理が成功
したときのハンドラ
アラートを出す処理
（引数は出力文字）
失敗ハンドラ
（1,5の処理で共通）

アプリ更新
アプリを切り替える
Successとでれば成功
ブラウザ起動
アプリ起動

課題
!
このままでは毎回認証操作が必要
１回目2回目3回目
取得したアクセストークンを保存して
２回目以降使えるようにしたい

// 取得したアクセストークンをWebStorageで保存する（次回以降のため）
localStorage.setItem("accessTokenKey", oauth.getAccessTokenKey());
localStorage.setItem("accessTokenSecret", oauth.getAccessTokenSecret());
};
アクセストークンを保存する処理を追加 1/2

// 取得したアクセストークンをWebStorageで保存する（次回以降のため）
localStorage.setItem("accessTokenKey", oauth.getAccessTokenKey());
localStorage.setItem("accessTokenSecret", oauth.getAccessTokenSecret());
};
第一引数：
保存する値の名前
第二引数：
保存する値
Webストレージ
機能で値を保存
（AccessTokenKeyと
AccessTokenSecret）

!
!
// 保存してあるアクセストークンがあればそれをロードする
var accessTokenKey = localStorage.getItem("accessTokenKey");
var accessTokenSecret = localStorage.getItem("accessTokenSecret");
!
// アクセストークンが保存されていた場合
if (accessTokenKey) {
// 保存していたアクセストークンをセットする
oauth.setAccessToken(accessTokenKey, accessTokenSecret);
!
// アクセストークンが保存されていなかった場合
} else {
// 1. consumer key と consumer secret を使って、リクエストトークンを取得する
}
};

!
!
// 保存してあるアクセストークンがあればそれをロードする
var accessTokenKey = localStorage.getItem("accessTokenKey");
var accessTokenSecret = localStorage.getItem("accessTokenSecret");
Webストレージで
値を取り出し
（AccessTokenと
AccessTokenSecret）
!
// アクセストークンが保存されていた場合
if (accessTokenKey) {
// 保存していたアクセストークンをセットする
oauth.setAccessToken(accessTokenKey, accessTokenSecret);
値の取り出しに成功
した場合、それを使う
!
// アクセストークンが保存されていなかった場合
} else {
}
};
失敗した場合、
OAuth認証処理

ツイッタークライアントぽいUIの設計
タイムライン画面投稿画面
投稿画面へTL画面へ投稿
続き取得TL更新
UI部品はすべてBuilding Blocksの流用です

<body>
<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
ソースリンク

ソースリンク
タイムラインページ<section role="region" data-position="current">
<a href="#" id=“newPostButton">
<span class="icon icon-compose”>edit</span>
</a>
</menu>
<h1>Timeline</h1>
</header>
<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>
<div>
<ul id="tweetBox">
</ul>
</div>
</article>
</section>
ヘッダ部（上部帯）
フッタ部（下部帯）
ヘッダ部（上部帯）

ソースリンク
タイムラインページ<section role="region" data-position="current">
<a href="#" id=“newPostButton">
<span class="icon icon-compose”>edit</span>
</a>
</menu>
<h1>Timeline</h1>
</header>
<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>
<div>
<ul id="tweetBox">
</ul>
</div>
</article>
</section>
新規作成ボタン
（画面遷移）
続きを取得ボタン
更新ボタン
取得したツイートを
表示する場
id重要！
後で出てきます

<section role="region" id="newTweetSection" data-position="right">
</a>
<a href="#" id="statusUpdateButton"><span class="icon icon-send">edit</span></a>
</menu>
<h1>New Tweet</h1>
</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

</a>
<a href="#" id=“statusUpdateButton">
<span class="icon icon-send”>edit</span>
</a>
</menu>
<h1>New Tweet</h1>
</header>
<div>
<form>
<p>
</textarea>
</p>
</form>
</div>
</div>
</div>
</form>
</article>
</section>
</body>
投稿のページ
ヘッダ
本体部

</a>
<a href="#" id=“statusUpdateButton">
<span class="icon icon-send”>edit</span>
</a>
</menu>
<h1>New Tweet</h1>
</header>
<div>
<form>
<p>
</textarea>
</p>
</form>
</div>
</div>
</div>
</form>
</article>
</section>
</body>
投稿のページ
戻るボタン
投稿ボタン
本文入力部
画像取得ボタン

画面遷移のスクリプトを実装
/**
* 画面を開いた時に最初に処理される部分
*/
// 画面遷移の処理
$("#newPostButton").click(function () {
document.querySelector('#newTweetSection').className = 'current';
});
$("#backButton").click(function () {
document.querySelector('#newTweetSection').className = 'right';
});
!
// OAuth処理を開始する
firstOAuthFunc();
};

/**
* 画面を開いた時に最初に処理される部分
*/
// 画面遷移の処理
$("#newPostButton").click(function () {
document.querySelector('#newTweetSection').className = 'current';
});
$("#backButton").click(function () {
document.querySelector('#newTweetSection').className = 'right';
});
!
// OAuth処理を開始する
firstOAuthFunc();
};
画面遷移の
処理

アプリ更新
タイムライン画面投稿画面
投稿画面へTL画面へ

タイムラインを取得するには
• TwitterのAPI情報を確認
https://dev.twitter.com/docs/api/1.1/get/statuses/home_timeline

タイムラインを取得する処理 1/2
ソースリンクFirefoxTwitter js app.js
!
!
// 更新ボタンをおした時のハンドラ
$("#updateButton").click(function () {
// TweetBoxの中身を空にする
clearTweetDom();
// HomeTimelineを取得する
getHomeTimeline();
});
!
firstOAuthFunc();
}
!
/**
* 表示したTweetをすべて消す
*/
var clearTweetDom = function () {
var parent = $("#tweetBox");
parent.empty();
};

!
!
// 更新ボタンをおした時のハンドラ
clearTweetDom();
getHomeTimeline();
});
!
firstOAuthFunc();
}
!
/**
* 表示したTweetをすべて消す
*/
var clearTweetDom = function () {
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) {
parent.text(data.text);
};
タイムラインを取得する処理 2/2

/**
* Home_timelineを取得する
*/
var getHomeTimeline = function () {
var url = "https://api.twitter.com/1.1/statuses/home_timeline.json";
oauth.get(url, successGetHomeTimeline, failureHandler);
};
!
/**
*/
};
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データをパースしてみる
/**
*/
// JSON形式のデータをオブジェクトに格納する
var tweetList = JSON.parse(data.text);
// tweetListを１つずつ取り出して表示する
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フォーマットの
データをパース
/**
*/
}
};
パースしてできたオブジェクト
から値を取り出し
取り出したオブジェクトを表示
（コンソールに）

アプリ更新
コンソールに
つぶやきの主や内容
が表示される

パースした結果を画面に表示 1/2
ソースリンク
/**
*/
addTweetToDom(tweet);
}
};
画面に表示する処理
（すぐ後で記述）

パースした結果を画面に表示 2/2
var addTweetToDom = function (tweet) {
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);
};

var addTweetToDom = function (tweet) {
var prof_img_url = tweet.user.profile_image_url;
var $parent = $("#tweetBox");
var $li = $("<li>").appendTo($parent);
var $div = $("<div>").addClass("tweet").appendTo($li);
$("<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);
};
値を取り出し
要素を追加
（表示）

var $parent = $(“#tweetBox");
!
var $li = $(“<li>").appendTo($parent);
!
var $div = $(“<div>”).addClass("tweet")
.appendTo($li);
!
$(“<img>").addClass("tweetIcon")
.attr('src', prof_img_url)
.appendTo($userDiv);
!
$(“<span>”).addClass("name")
.text(name)
!
$(“<span>").addClass("screenName")
.text("@" + screenName)
!
$(“<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;
}
.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;
box-sizing: border-box;
}
FirefoxTwitter css app.css

アプリ更新
タイムラインが整形
されて表示される

ツイート機能について
• APIは以下のページから
• https://dev.twitter.com/docs/api/1.1/post/statuses/update

ツイート機能を実装 1/2
!
!
clearTweetDom();
getHomeTimeline();
});
$("#statusUpdateButton").click(function () {
// 新規ツイート投稿を行う
newTweetPost();
});
firstOAuthFunc();
}

!!
clearTweetDom();
getHomeTimeline();
});
$("#statusUpdateButton").click(function () {
// 新規ツイート投稿を行う
newTweetPost();
});
firstOAuthFunc();
}
#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");
}

var data;
!
!
data = {
status:statusText
};
// 投稿
data, successHandler, failureHandler);
}
!
var successHandler = function () {
console.log("success");
}
ツイートAPIを叩く関数
テキストボックスの
中身を取得
dataオブジェクトに
投稿内容を格納
投稿（API叩く）

アプリ更新
つぶやいてみましょう

画像付きツイート機能について
• APIは以下のページを参照
• https://dev.twitter.com/docs/api/1.1/post/statuses/update_with_media

画像付きツイート機能を実装
var data;
// fileの中身を確認
var file = document.querySelector("#file").files[0];
// fileに中身がない場合、通常投稿
if (typeof file === "undefined") {
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
});
}
}
ソースリンク

var data;
// fileの中身を確認
var file = document.querySelector("#file").files[0];
// fileに中身がない場合、通常投稿
if (typeof file === "undefined") {
data = {
status:statusText
};
// 投稿
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
});
}
}
ソースリンク
ファイルの添付を確認
画像添付がない場合の
処理（従来と同じ処理）
画像添付がある場合の処理
dataオブジェクトに
投稿内容を格納
（文言とファイル）
画像投稿APIを叩く

アプリ更新
画像投稿成功

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

アプリ公開してみる
※ Firefox marketplaceでpackage公開の場合
zipで固めて... MarketPlaceでアップロード審査へ
https://marketplace.firefox.com/developers/submit/

お疲れ様でした
今日のハンズオンは以上です。

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

ご静聴ありがとうございました

Firefoxosハンズオン

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (18)

Destacado

Destacado (20)

Similar a Firefoxosハンズオン

Similar a Firefoxosハンズオン (20)

Último

Último (9)

Firefoxosハンズオン