SlideShare a Scribd company logo
1 of 166
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にする 
• 画面遷移を実装する 
• アプリ連携を体験する
1. Firefox OSと仲良くなる 
• HTMLで Hello World 
• JavaScriptで Hello JS 
• cssを使う 
• Firefox OSらしいUIにする 
• 画面遷移を実装する 
• アプリ連携を体験する
HTMLで Hello World 
• フォルダを作ります 
HelloFirefox 
• テキストファイルを作ります 
HelloFirefox index.html
HTMLで Hello World 
• index.htmlに以下の記述を 
HelloFirefox index.html 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>Hello Firefox OS</title> 
</head> 
<body> 
<h1>Hello Firefox</h1> 
</body> 
</html> 
ソースリンク
コーディングのテク 
htmlとだけ打ち込んで 
※Sublime Text2の場合 
tabキー押下 
補完でひな形が!
ナニを書いたのか 
• <(要素名)>〜</(要素名)>で要素を囲む構造 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>Hello Firefox OS</title> 
</head> 
<body> 
<h1>Hello Firefox</h1> 
</body> 
</html> 
HelloFirefox index.html 
<html> 
ヘッダ 
ボディ
HTMLで Hello World 
• manifest.webappを作成して以下の記述を... 
HelloFirefox manifest.webapp 
ソースリンク 
{ 
"name": "HelloFirefox", 
"description": "My First app", 
"launch_path": "/index.html", 
"icons": { 
"128": "/img/icons/icon_128.png" 
} 
}
何を書いたのか 
• アプリに関する情報を記述 
HelloFirefox manifest.webapp 
{ 
"name": "HelloFirefox", 
"description": "My First app", 
"launch_path": "/index.html", 
"icons": { 
"128": "/img/icons/icon_128.png" 
} 
} 
アプリに関する 
情報 
アイコンのパス
シミュレーターへのアプリインストール 
パッケージアプリを追加HelloFirefox 
を選択 
更新ボタンを押す
アプリ実行
以降、アプリ更新するときは.... 
アプリタブから更新ボタン 
ちょっとめんどい 
端末タブから停止して
アプリのアイコンを 
設定しましょう 
• 自作するも良し 
• フリー素材を取ってきても良し 
• 本日は特別アイコンを贈呈 
この位置に配置 
こちらからDL 
HelloFirefox img icons icon_128.png
アプリ更新 
アイコンが 
変わればOK
1. Firefox OSと仲良くなる 
• HTMLで Hello World 
• JavaScriptで Hello JS 
• cssを使う 
• Firefox OSらしいUIにする 
• 画面遷移を実装する 
• アプリ連携を体験する
JavaScriptで Hello JS 
• index.htmlに追記(赤い部分) 
HelloFirefox index.html 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>Hello Firefox OS</title> 
<script src="js/app.js"></script> 
</head> 
<body> 
<h1>Hello Firefox</h1> 
<button id="firstButton">Click</button> 
<div id="firstDiv"></div> 
</body> 
</html> 
ソースリンク
JavaScriptで Hello JS 
• index.htmlに追記 
HelloFirefox index.html 
スクリプトの 
パス追加 
ボタンと 
div要素追加 
id重要! 
後で出てきます 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>Hello Firefox OS</title> 
<script src="js/app.js"></script> 
</head> 
<body> 
<h1>Hello Firefox</h1> 
<button id="firstButton">Click</button> 
<div id="firstDiv"></div> 
</body> 
</html>
JavaScriptで Hello JS 
• jsフォルダ、app.jsファイルを追加する 
window.onload = function() { 
document.getElementById("firstButton").onclick = function() { 
document.getElementById("firstDiv").innerHTML = "JSは最高だぜ"; 
}; 
}; 
ソースリンク 
HelloFirefox js app.js
コメントを書きましょう 
• htmlファイルの場合 
<!DOCTYPE html> 
<html> 
<body> 
• jsファイルの場合 
/* 
この部分はコメント 
*/ 
window.onload = function() { 
// この行はコメント 
document.getElementById(“**”).onclick = function() { 
document.getElementById(“**”).innerHTML = “**”; 
}; 
}; 
<!-- ここはコメント --> 
<h1>Hello Firefox</h1> 
</body> 
</html> 
<!— 〜 —>で 
囲った部分はコメント 
/* 〜 */で 
囲った部分はコメント 
// で始まる行は 
コメント
何を書いたのか 
HelloFirefox js app.js 
div要素参照 
さっきのidを 
参照してる 
window.onload = function() { 
document.getElementById("firstButton").onclick = function() { 
document.getElementById("firstDiv").innerHTML = "JSは最高だぜ"; 
}; 
}; 
ボタン要素参照
window.onload = function() { 
ボタンクリック時の 
イベントを記述 
document.getElementById("firstButton").onclick = function() { 
document.getElementById("firstDiv").innerHTML = "JSは最高だぜ"; 
}; 
}; 
何を書いたのか 
HelloFirefox js app.js
画面ロード時に 
実行する関数 
window.onload = function() { 
document.getElementById("firstButton").onclick = function() { 
document.getElementById("firstDiv").innerHTML = "JSは最高だぜ"; 
}; 
}; 
何を書いたのか 
HelloFirefox js app.js
アプリ更新 
クリックで 
文字が表示
ライブラリを使う 
jQueryを落とすhttp://jquery.com/download/ 
Download the uncompressed, development jQuery 2.1.1 
ここに配置 
HelloFirefox js lib jquery-2.1.1.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.1.js"></script> 
<script src="js/app.js"></script> 
</head> 
<body> 
... 
ライブラリを使う 
ソースリンク
• 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> 
... 
ライブラリの 
パス追加 
(順番重要) 
ライブラリを使う
• 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は最高だぜ"); 
}); 
}; 
ライブラリを使う 
ソースリンク
何を書いたのか 
• app.jsを編集する 
HelloFirefox js app.js 
ボタン要素参照 
div要素参照 
jQueryを使う場合 
#(要素id名) 
.(要素クラス名) 
で参照する 
window.onload = function() { 
$("#firstButton").click(function() { 
$("#firstDiv").text("JSは最高だぜ"); 
}); 
};
アプリ更新 
同じ挙動をすればOK
Sublime Text2の便利な使い方 
フォルダを 
ドラッグ 
ファイル一覧が!
1. Firefox OSと仲良くなる 
• HTMLで Hello World 
• JavaScriptで Hello JS 
• cssを使う 
• Firefox OSらしいUIにする 
• 画面遷移を実装する 
• アプリ連携を体験する
cssで装飾する 1/2 
• index.htmlに追記 
HelloFirefox index.html 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"/> 
<title>Hello Firefox OS</title> 
<script src="js/lib/jquery-2.1.1.js"></script> 
<script src="js/app.js"></script> 
<link rel="stylesheet" href="css/app.css"/> 
</head> 
<body> 
ソースリンク 
cssのパス
cssで装飾する 2/2 
• cssフォルダ、app.cssファイルを追加する 
HelloFirefox css app.css 
#firstDiv { 
margin-top:10px; 
font-size:32px; 
color:#ff0000; 
} 
ソースリンク 
div要素参照 
(idで参照) 
※cssでググって、いろんなパラメータをいじってみて下さい
アプリ更新 
表示スタイル 
が変われば 
成功
開発ツールを使ってみる 
「デバッグ」
開発ツールを使ってみる 
インスペクタ 
部品の配置を確認できます 
スタイルエディタ 
cssのパラメータを変更 
デバッガ 
JavaScriptのデバッグ
1. Firefox OSと仲良くなる 
• HTMLで Hello World 
• JavaScriptで Hello JS 
• cssを使う 
• Firefox OSらしいUIにする 
• 画面遷移を実装する 
• アプリ連携を体験する
Firefox OSらしいUIとは 
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> 
<!-- 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
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 ソースリンク
コーディングのテク 
インデントぐちゃぐちゃコードを全選択してから 
[Edit]->[Line]->[Reindent]で整形
アプリに手を加える 
HelloFirefox index.html 
<body> 
<section role="region"> 
<header class="fixed"> 
<h1>Hello Building Blocks</h1> 
</header> 
<article class="content scrollable header"> 
<button class="recommend" id="firstButton">click</button> 
<div id="firstDiv"></div> 
</article> 
</section> 
</body> 
ソースリンク 
index.htmlの<body>タグ内部を編集
何を書いたのか 
HelloFirefox index.html 
らしいヘッダ 
らしいボタン 
<body> 
<section role="region"> 
<header class="fixed"> 
<h1>Hello Building Blocks</h1> 
</header> 
<article class="content scrollable header"> 
<button class="recommend" id="firstButton">click</button> 
<div id="firstDiv"></div> 
</article> 
</section> 
! 
</body>
アプリ更新 
らしいヘッダ 
らしいボタン
1. Firefox OSと仲良くなる 
• HTMLで Hello World 
• JavaScriptで Hello JS 
• cssを使う 
• Firefox OSらしいUIにする 
• 画面遷移を実装する 
• アプリ連携を体験する
画面遷移ってどうやるの 
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> 
(リンク貼りゃいいんだよ)
画面遷移成功?!
あれ. . . 
(戻れない)
一体どうすればいいんだ... 
• Building Blocksの画面遷移を真似する
<section role="region" data-position="current"> 
<header class="fixed"> 
<h1>Hello Building Blocks</h1> 
</header> 
<article class="content scrollable header"> 
<h1>1番目のページ</h1> 
<button class="recommend" id="firstButton">click</button> 
<div id="firstDiv"></div> 
</article> 
</section> 
! 
<section role="region" id="newSection" data-position="right"> 
<header class="fixed"> 
<a id="backButton" href="#"> 
<span class="icon icon-back">back</span> 
</a> 
<h1>Next Page</h1> 
</header> 
<article class="content scrollable header"> 
<h1>2番めのページ</h1> 
</article> 
</section> 
まるパクする (1/2) 
ソースリンクHelloFirefox index.html
HelloFirefox js app.js 
ソースリンク 
まるパクする (2/2) 
window.onload = function() { 
$("#firstButton").click(function () { 
$("#firstDiv").text("JSは最高だぜ"); 
}); 
$("#firstButton").click(function() { 
document.querySelector('#newSection').className = 'current'; 
document.querySelector('[data-position="current"]').className = 'left'; 
}); 
! 
$("#backButton").click(function() { 
document.querySelector('#newSection').className = 'right'; 
document.querySelector('[data-position="current"]').className = 'current'; 
}); 
};
ページ遷移無事成功
1. Firefox OSと仲良くなる 
• HTMLで Hello World 
• JavaScriptで Hello JS 
• cssを使う 
• Firefox OSらしいUIにする 
• 画面遷移を実装する 
• アプリ連携を体験する
アプリ連携とは... 
AndroidでいうIntentみたいなもの 
連携先アプリとは... 
・ブラウザ 
・電話 
・カメラ 
 等...
アプリ連携(ブラウザ)を体験してみる 1/2 
ソースリンク 
!!! 
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> 
ボタン追加
アプリ連携(ブラウザ)を体験してみる 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 
} 
}); 
}); 
}
window.onload = function() { 
! 
! 
$("#secondButton").click(function() { 
var myUrl = “(好きなURL)”; 
var activity = new MozActivity({ 
name:"view", 
data:{ 
type:"url", 
url:myUrl 
} 
}); 
}); 
} 
何を書いたのか 
FirefoxTwitter js app.js 
ブラウザを 
呼び出す 
コード
アプリ更新 
ブラウザ呼び出し成功
番外編 アプリジェネレータを使う 
• 環境準備 
• アプリひな形をダウンロード 
• ライブラリを追加 
• アプリ実装 
• アプリデプロイ 
※本番外編はコマンド操作が必要になります
環境準備 
• node.jsのインストール 
http://nodejs.org/ 
• voloのインストール(コマンドラインから) 
番外編 
$ npm install -g volo
アプリひな形ダウンロード 
番外編 
• (任意の場所に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> 
<button id="firstButton">Click</button> 
<div id="firstDiv"></div> 
! 
</body> 
• app.js 
define(function(require) { 
 (中略) 
! 
$("#firstButton").click(function() { 
$("#firstDiv").text("JSは最高だぜ"); 
}); 
}); 
※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のヘッダ情報を適当に 
書き換えて下さい(自由) 
<header class="fixed"> 
<h1>Hello Twitter</h1> 
</header> 
FirefoxTwitter manifest.webapp 
FirefoxTwitter index.html
2. Firefox OSでTwitter Clientを作る 
• Twitter Developers に登録 
• OAuth関連処理を実装する 
• ツイッタークライアントぽいUIを作る 
• タイムラインを取得する 
• ツイート機能を実装する 
• 画像付きツイート機能を実装する
Twitter Developersにアプリを登録 
https://apps.twitter.com/ 
Sign inをクリックCreate New Appをクリック
アプリ名 
アプリの説明 
サイトURL 
持ってなければhttp://example.comとでも 
(空白でOK) 
チェック 
確定 
アプリ情報を入力 
規約を読んで
アプリ名について注意 
以下の名前は使えないので注意 
• 既存のTwitterアプリと被る名前 
• [Twitter] という文字列を含む名前
APIキー発行 
後でつかいます 
他人には教えない
設定変更しておく 
Read and Writeに 
この変更をしないとWrite(つぶやき)ができない
2. Firefox OSでTwitter Clientを作る 
• Twitter Developers に登録 
• OAuth関連処理を実装する 
• ツイッタークライアントぽいUIを作る 
• タイムラインを取得する 
• ツイート機能を実装する 
• 画像付きツイート機能を実装する
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> 
<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> 
! 
! 
!
このライブラリ、 
そのままでは使えない 
• 理由 
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、 
キャリアの承認が必要とな 
るため、一般のアプリ開発 
者は本アプリを作成するこ 
とはできません。 
特別な権限を必要と 
しない 
標準のアプリです。 
(つまり絶望)
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", 
"launch_path": "/index.html", 
"icons": { 
"128": "/img/icons/icon_128.png" 
}, 
"type": "privileged", 
"permissions": { 
"systemXHR": { 
"description": "for OAuth" 
} 
} 
} 
ソースリンク
OAuth関連処理を実装する 1/4 
FirefoxTwitter js app.js ソースリンク 
// oauthオブジェクト 
var oauth; 
! 
window.onload = function () { 
! 
// OAuth関連の処理を開始する 
firstOAuthFunc(); 
} 
! 
OAuth処理を開始する関数 
(すぐ後で実装)
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); 
};
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オブジェクト 
に与える値
/** 
* OAuth関連で最初に行う処理 
*/ 
var firstOAuthFunc = function () { 
! 
// 最初にOAuthオブジェクトに喰わせる値たち 
var config = { 
consumerKey:"あなたのコンシューマーキー", 
consumerSecret:"あなたのコンシューマーシークレット", 
requestTokenUrl:"https://api.twitter.com/oauth/request_token", 
authorizationUrl:"https://api.twitter.com/oauth/authorize", 
accessTokenUrl:"https://api.twitter.com/oauth/access_token" 
}; 
! 
// OAuthのオブジェクトを作成 
oauth = new OAuth(config); 
! 
// 1. consumer key と consumer secret を使って、リクエストトークンを取得 
oauth.fetchRequestToken(successFetchRequestToken, failureHandler); 
}; 
何を書いたのか 
FirefoxTwitter js app.js 
失敗時のハンドラ 
成功時のハンドラ 
(すぐ後で出てきます)
コールバック関数とは 
var successFetchRequstToken = function() {/* 成功した時の処理 */ } 
var failureFetchRequstToken = function() {/* 失敗した時の処理 */ } 
oauth.fetchRequestToken(successFetchRequestToken, failureHandler); 
あなたの 
プログラム 
ライブラリ 
ハンドラを渡す 
ライブラリが処理 
! 
ハンドラを呼び出す 
ハンドラ定義 
ハンドラ渡す
OAuth関連処理を実装する 3/4 
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); 
};
何を書いたのか 
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セット 
アクセストークン 
を取得しにいく
何を書いたのか 
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); 
}; 
失敗時のハンドラ 
成功時のハンドラ 
(すぐ後で出てきます)
/** 
* 5の処理の成功時のコールバック関数 
*/ 
var successFetchAccessToken = function () { 
alert("success oauth"); 
}; 
! 
/** 
* 各処理失敗時のコールバック関数 
*/ 
var failureHandler = function (data) { 
alert("failure"); 
}; 
OAuth関連処理を実装する 4/4 
FirefoxTwitter js app.js
何を書いたのか 
/** 
* 5の処理の成功時のコールバック関数 
*/ 
var successFetchAccessToken = function () { 
alert("success oauth"); 
}; 
! 
/** 
* 各処理失敗時のコールバック関数 
*/ 
var failureHandler = function (data) { 
alert("failure"); 
}; 
FirefoxTwitter js app.js 
5の処理が成功 
したときのハンドラ 
アラートを出す処理 
(引数は出力文字) 
失敗ハンドラ 
(1,5の処理で共通)
アプリ更新 
アプリを切り替える 
Successとでれば成功 
ブラウザ起動 
アプリ起動
課題 
! 
このままでは毎回認証操作が必要 
1回目2回目3回目 
取得したアクセストークンを保存して 
2回目以降使えるようにしたい
var successFetchAccessToken = function () { 
// 取得したアクセストークンをWebStorageで保存する(次回以降のため) 
localStorage.setItem("accessTokenKey", oauth.getAccessTokenKey()); 
localStorage.setItem("accessTokenSecret", oauth.getAccessTokenSecret()); 
alert("success oauth"); 
}; 
アクセストークンを保存する処理を追加 1/2 
FirefoxTwitter js app.js ソースリンク
var successFetchAccessToken = function () { 
// 取得したアクセストークンをWebStorageで保存する(次回以降のため) 
localStorage.setItem("accessTokenKey", oauth.getAccessTokenKey()); 
localStorage.setItem("accessTokenSecret", oauth.getAccessTokenSecret()); 
alert("success oauth"); 
}; 
何を書いたのか 
FirefoxTwitter js app.js 
第一引数: 
保存する値の名前 
第二引数: 
保存する値 
Webストレージ 
機能で値を保存 
(AccessTokenKeyと 
AccessTokenSecret)
アクセストークンを保存する処理を追加 2/2 
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); 
} 
};
アクセストークンを保存する処理を追加 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認証処理
2. Firefox OSでTwitter Clientを作る 
• Twitter Developers に登録 
• OAuth関連処理を実装する 
• ツイッタークライアントぽいUIを作る 
• タイムラインを取得する 
• ツイート機能を実装する 
• 画像付きツイート機能を実装する
ツイッタークライアントぽいUIの設計 
タイムライン画面投稿画面 
投稿画面へTL画面へ投稿 
続き取得TL更新 
UI部品はすべてBuilding Blocksの流用です
<body> 
<section role="region" data-position="current"> 
<header class="fixed"> 
<menu type="toolbar"> 
<a href="#" id="newPostButton"> 
<span class="icon icon-compose">edit</span> 
</a> 
</menu> 
<h1>Timeline</h1> 
</header> 
<div role="toolbar"> 
<ul> 
<li> 
<button id="getMoreButton" class="action-icon download">getmore</button> 
</li> 
</ul> 
<ul> 
<li> 
<button id="updateButton" class="action-icon email-sync">update</button> 
</li> 
</ul> 
</div> 
<article class="scrollable header"> 
<div> 
<ul id="tweetBox"> 
</ul> 
</div> 
</article> 
</section> 
ツイッタークライアントぽいUIを作る 1/2 
FirefoxTwitter index.html 
ソースリンク
何を書いたのか 
FirefoxTwitter index.html 
ソースリンク 
タイムラインページ<section role="region" data-position="current"> 
<header class="fixed"> 
<menu type="toolbar"> 
<a href="#" id=“newPostButton"> 
<span class="icon icon-compose”>edit</span> 
</a> 
</menu> 
<h1>Timeline</h1> 
</header> 
<div role="toolbar"> 
<ul> 
<li> 
<button id="getMoreButton" class="action-icon download">getmore 
</button> 
</li> 
</ul> 
<ul> 
<li> 
<button id="updateButton" class="action-icon email-sync”>update 
</button> 
</li> 
</ul> 
</div> 
<article class="scrollable header"> 
<div> 
<ul id="tweetBox"> 
</ul> 
</div> 
</article> 
</section> 
ヘッダ部(上部帯) 
フッタ部(下部帯) 
ヘッダ部(上部帯)
何を書いたのか 
FirefoxTwitter index.html 
ソースリンク 
タイムラインページ<section role="region" data-position="current"> 
<header class="fixed"> 
<menu type="toolbar"> 
<a href="#" id=“newPostButton"> 
<span class="icon icon-compose”>edit</span> 
</a> 
</menu> 
<h1>Timeline</h1> 
</header> 
<div role="toolbar"> 
<ul> 
<li> 
<button id="getMoreButton" class="action-icon download">getmore 
</button> 
</li> 
</ul> 
<ul> 
<li> 
<button id="updateButton" class="action-icon email-sync”>update 
</button> 
</li> 
</ul> 
</div> 
<article class="scrollable header"> 
<div> 
<ul id="tweetBox"> 
</ul> 
</div> 
</article> 
</section> 
新規作成ボタン 
(画面遷移) 
続きを取得ボタン 
更新ボタン 
取得したツイートを 
表示する場 
id重要! 
後で出てきます
<section role="region" id="newTweetSection" data-position="right"> 
<header class="fixed"> 
<a id="backButton" href="#"> 
<span class="icon icon-back">back</span> 
</a> 
<menu type="toolbar"> 
<a href="#" id="statusUpdateButton"><span class="icon icon-send">edit</span></a> 
</menu> 
<h1>New Tweet</h1> 
</header> 
<article class="content scrollable header"> 
<div> 
<form> 
<p> 
<textarea id="newTweetText" placeholder="input tweet text" required> 
</textarea> 
</p> 
</form> 
</div> 
<form id="aaa" action="#" enctype="multipart/form-data" method="post"> 
<div class="fileArea"> 
<div class="fileName"></div> 
<div class="chooseFile"> 
画像を添付する 
<input type="file" id="file" name="my_file"> 
</div> 
</div> 
</form> 
</article> 
</section> 
</body> 
ツイッタークライアントぽいUIを作る 2/2 
FirefoxTwitter index.html
FirefoxTwitter index.html 
<section role="region" id="newTweetSection" data-position="right"> 
<header class="fixed"> 
<a id="backButton" href="#"> 
<span class="icon icon-back">back</span> 
</a> 
<menu type="toolbar"> 
<a href="#" id=“statusUpdateButton"> 
<span class="icon icon-send”>edit</span> 
</a> 
</menu> 
<h1>New Tweet</h1> 
</header> 
<article class="content scrollable header"> 
<div> 
<form> 
<p> 
<textarea id="newTweetText" placeholder="input tweet text" required> 
</textarea> 
</p> 
</form> 
</div> 
<form id="aaa" action="#" enctype="multipart/form-data" method="post"> 
<div class="fileArea"> 
<div class="fileName"></div> 
<div class="chooseFile"> 
画像を添付する 
<input type="file" id="file" name="my_file"> 
</div> 
</div> 
</form> 
</article> 
</section> 
</body> 
投稿のページ 
ヘッダ 
本体部 
何を書いたのか
FirefoxTwitter index.html 
<section role="region" id="newTweetSection" data-position="right"> 
<header class="fixed"> 
<a id="backButton" href="#"> 
<span class="icon icon-back">back</span> 
</a> 
<menu type="toolbar"> 
<a href="#" id=“statusUpdateButton"> 
<span class="icon icon-send”>edit</span> 
</a> 
</menu> 
<h1>New Tweet</h1> 
</header> 
<article class="content scrollable header"> 
<div> 
<form> 
<p> 
<textarea id="newTweetText" placeholder="input tweet text" required> 
</textarea> 
</p> 
</form> 
</div> 
<form id="aaa" action="#" enctype="multipart/form-data" method="post"> 
<div class="fileArea"> 
<div class="fileName"></div> 
<div class="chooseFile"> 
画像を添付する 
<input type="file" id="file" name="my_file"> 
</div> 
</div> 
</form> 
</article> 
</section> 
</body> 
投稿のページ 
戻るボタン 
投稿ボタン 
本文入力部 
画像取得ボタン 
何を書いたのか
画面遷移のスクリプトを実装 
FirefoxTwitter js app.js ソースリンク 
/** 
* 画面を開いた時に最初に処理される部分 
*/ 
window.onload = function () { 
// 画面遷移の処理 
$("#newPostButton").click(function () { 
document.querySelector('#newTweetSection').className = 'current'; 
document.querySelector('[data-position="current"]').className = 'left'; 
}); 
$("#backButton").click(function () { 
document.querySelector('#newTweetSection').className = 'right'; 
document.querySelector('[data-position="current"]').className = 'current'; 
}); 
! 
// OAuth処理を開始する 
firstOAuthFunc(); 
};
何を書いたのか 
FirefoxTwitter js app.js 
/** 
* 画面を開いた時に最初に処理される部分 
*/ 
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(); 
}; 
画面遷移の 
処理
アプリ更新 
タイムライン画面投稿画面 
投稿画面へTL画面へ
2. Firefox OSでTwitter Clientを作る 
• Twitter Developers に登録 
• OAuth関連処理を実装する 
• ツイッタークライアントぽいUIを作る 
• タイムラインを取得する 
• ツイート機能を実装する 
• 画像付きツイート機能を実装する
タイムラインを取得するには 
• TwitterのAPI情報を確認 
https://dev.twitter.com/docs/api/1.1/get/statuses/home_timeline
タイムラインを取得する処理 1/2 
ソースリンクFirefoxTwitter js app.js 
window.onload = function() { 
! 
! 
// 更新ボタンをおした時のハンドラ 
$("#updateButton").click(function () { 
// TweetBoxの中身を空にする 
clearTweetDom(); 
// HomeTimelineを取得する 
getHomeTimeline(); 
}); 
! 
firstOAuthFunc(); 
} 
! 
/** 
* 表示したTweetをすべて消す 
*/ 
var clearTweetDom = function () { 
var parent = $("#tweetBox"); 
parent.empty(); 
};
何を書いたのか 
FirefoxTwitter js app.js 
window.onload = function() { 
! 
! 
// 更新ボタンをおした時のハンドラ 
$("#updateButton").click(function () { 
// TweetBoxの中身を空にする 
clearTweetDom(); 
// HomeTimelineを取得する 
getHomeTimeline(); 
}); 
! 
firstOAuthFunc(); 
} 
! 
/** 
* 表示したTweetをすべて消す 
*/ 
var clearTweetDom = function () { 
var parent = $("#tweetBox"); 
parent.empty(); 
}; 
更新ボタンをおした時に呼ばれる関数 
一旦Tweetをすべて消す処理 
(すぐ下で実装) 
Tweetを取得して表示する関数 
(すぐ後で実装) 
Tweetを全て消す処理 
#tweetBox 要素の中身をすべて 
消去
/** 
* Home_timelineを取得する 
*/ 
var getHomeTimeline = function () { 
var url = "https://api.twitter.com/1.1/statuses/home_timeline.json"; 
oauth.get(url, successGetHomeTimeline, failureHandler); 
}; 
! 
/** 
* 取得したTweetsを画面に表示する 
*/ 
var successGetHomeTimeline = function (data) { 
var parent = $("#tweetBox"); 
parent.text(data.text); 
}; 
タイムラインを取得する処理 2/2 
FirefoxTwitter js app.js
/** 
* Home_timelineを取得する 
*/ 
var getHomeTimeline = function () { 
var url = "https://api.twitter.com/1.1/statuses/home_timeline.json"; 
oauth.get(url, successGetHomeTimeline, failureHandler); 
}; 
! 
/** 
* 取得したTweetsを画面に表示する 
*/ 
var successGetHomeTimeline = function (data) { 
var parent = $("#tweetBox"); 
parent.text(data.text); 
}; 
何を書いたのか 
FirefoxTwitter js app.js 
Tweetを取得して 
表示する関数 
Twitter APIに 
アクセス 
第二引数は成功時ハ 
ンドラ(すぐ下) 
TwitterAPIにアクセ 
ス成功時に呼ばれる 
#tweetBox要素に 
とってきた値を書込む
アプリ更新 
Twitter APIで取ってき 
たデータが表示される 
(中身はぐちゃぐちゃ)
レスポンスデータの解読 
https://dev.twitter.com/docs/api/1.1/get/statuses/home_timeline 
レスポンスデータの 
フォーマットはJSON 
フォーマットの詳細
JSONとは 
• JavaScript Object Notationの略 
• JavaScriptでお手軽にパースできる 
データ記述言語 
sample 
{person:[{ 
"name": "kassy_kz", 
"feature" : "健全" 
},{ 
"name": "androidsola", 
"feature" : "変態" 
}]} 
名前:値 のセットをカンマ区切りで記述 
{ 〜 } で一つのオブジェクト 
[ 〜 ] で一つの配列
JSONデータをパースしてみる 
ソースリンク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); 
} 
};
何を書いたのか 
FirefoxTwitter js app.js 
JSONフォーマットの 
データをパース 
/** 
* 取得したTweetsを画面に表示する 
*/ 
var successGetHomeTimeline = function (data) { 
// JSON形式のデータをオブジェクトに格納する 
var tweetList = JSON.parse(data.text); 
// tweetListを1つずつ取り出して表示する 
for (var i = 0; i < tweetList.length; i++) { 
var tweet = tweetList[i]; 
var screenName = tweet.user.screen_name; 
var name = tweet.user.name; 
var tweetText = tweet.text; 
console.log("screenName:" + screenName); 
console.log("name :" + name); 
console.log("tweetText :" + tweetText); 
} 
}; 
パースしてできたオブジェクト 
から値を取り出し 
取り出したオブジェクトを表示 
(コンソールに)
アプリ更新 
コンソールに 
つぶやきの主や内容 
が表示される
パースした結果を画面に表示 1/2 
ソースリンク 
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); 
} 
}; 
画面に表示する処理 
(すぐ後で記述)
パースした結果を画面に表示 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); 
};
何を書いたのか 
FirefoxTwitter js app.js 
var addTweetToDom = function (tweet) { 
var screenName = tweet.user.screen_name; 
var name = tweet.user.name; 
var tweetText = tweet.text; 
var prof_img_url = tweet.user.profile_image_url; 
var $parent = $("#tweetBox"); 
var $li = $("<li>").appendTo($parent); 
var $div = $("<div>").addClass("tweet").appendTo($li); 
var $userDiv = $("<div>").appendTo($div); 
$("<img>").addClass("tweetIcon").attr('src', prof_img_url).appendTo($userDiv); 
$("<span>").addClass("name").text(name).appendTo($userDiv); 
$("<span>").addClass("screenName").text("@" + screenName).appendTo($userDiv); 
$("<div>").addClass("tweetText").text(tweetText).appendTo($div); 
}; 
値を取り出し 
要素を追加 
(表示)
何を書いたのか 
FirefoxTwitter js app.js 
var $parent = $(“#tweetBox"); 
! 
var $li = $(“<li>").appendTo($parent); 
! 
var $div = $(“<div>”).addClass("tweet") 
.appendTo($li); 
! 
var $userDiv = $("<div>").appendTo($div); 
$(“<img>").addClass("tweetIcon") 
.attr('src', prof_img_url) 
.appendTo($userDiv); 
! 
$(“<span>”).addClass("name") 
.text(name) 
.appendTo($userDiv); 
! 
$(“<span>").addClass("screenName") 
.text("@" + screenName) 
.appendTo($userDiv); 
! 
$(“<div>").addClass("tweetText") 
.text(tweetText) 
.appendTo($div); 
#tweetBox要素を$parentという変数名に 
<li>要素を作成して$parent下に追加 
<div>要素を作成して”tweet”クラス名を 
付与して<li>の下に追加 
<div>要素を作成して↑の<div>の下に追加 
<img>要素を生成して<div>の下に追加 
アイコンイメージを格納 
<span>要素を生成して<div>の下に追加 
クラス名は”name” 
ユーザーのnameを格納 
<span>要素を生成して<div>の下に追加 
クラス名は”screenName” 
ユーザーのscreenNameを格納 
<div>要素を生成して<div>の下に追加 
クラス名は”tweetText” 
ツイート本文を格納
結果、HTML要素はこうなる
スタイルシートのカスタマイズ例 
.name { 
margin-right: 5px; 
font-size: 16px; 
color: #333; 
} 
! 
.screenName { 
font-size: 12px; 
color: #bbb; 
} 
! 
#tweetBox li{ 
width: 100%; 
min-height: 70px; 
padding: 5px 5px 10px; 
border-bottom: 1px solid 
gray; 
word-wrap: break-word; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
} 
! 
.tweetText { 
line-height: 1.4; 
font-size: 12px; 
color: #333; 
} 
ソースリンク 
special thanks @meco300 
.fileArea{ 
overflow: hidden; 
} 
.chooseFile { 
display: inline-block; 
float: right; 
overflow: hidden; 
position: relative; 
padding: .5em; 
border: 1px solid #999; 
background-color: #eee; 
} 
.chooseFile input[type="file"] { 
opacity: 0; 
position: absolute; 
right: 0; 
top: 0; 
margin: 0; 
font-size: 100px; 
cursor: pointer; 
} 
.fileName { 
float: left; 
width: 70%; 
height: 28px; 
padding: 5px; 
border: 1px solid #bbb; 
text-overflow: ellipsis; 
-moz-box-sizing: border-box; 
} 
.tweet { 
margin-left: 58px; 
} 
! 
.tweetIcon { 
float: left; 
margin-top: 3px; 
margin-left: -58px; 
} 
! 
header h1 { 
padding-left: 10px; 
} 
section[role="region"] > .content{ 
padding: 0 5px !important; 
} 
! 
#newTweetText { 
width: 100%; 
margin-top: 5px; 
margin-bottom: 5px; 
border: 1px solid #bbb; 
background: #FFE; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
} 
FirefoxTwitter css app.css
アプリ更新 
タイムラインが整形 
されて表示される
2. Firefox OSでTwitter Clientを作る 
• Twitter Developers に登録 
• OAuth関連処理を実装する 
• ツイッタークライアントぽいUIを作る 
• タイムラインを取得する 
• ツイート機能を実装する 
• 画像付きツイート機能を実装する
ツイート機能について 
• APIは以下のページから 
• https://dev.twitter.com/docs/api/1.1/post/statuses/update
ツイート機能を実装 1/2 
FirefoxTwitter js app.js ソースリンク 
window.onload = function () { 
! 
! 
$("#updateButton").click(function () { 
// TweetBoxの中身を空にする 
clearTweetDom(); 
// HomeTimelineを取得する 
getHomeTimeline(); 
}); 
$("#statusUpdateButton").click(function () { 
// 新規ツイート投稿を行う 
newTweetPost(); 
}); 
firstOAuthFunc(); 
}
何を書いたのか 
FirefoxTwitter js app.js 
window.onload = function () { 
!! 
$("#updateButton").click(function () { 
// TweetBoxの中身を空にする 
clearTweetDom(); 
// HomeTimelineを取得する 
getHomeTimeline(); 
}); 
$("#statusUpdateButton").click(function () { 
// 新規ツイート投稿を行う 
newTweetPost(); 
}); 
firstOAuthFunc(); 
} 
#statusUpdateButtonを 
おした時のハンドラ 
ツイートAPIを叩く関数 
(すぐ後で実装)
ツイート機能を実装 2/2 
var newTweetPost = function () { 
var data; 
! 
// テキストボックスの中身を取得 
var statusText = document.getElementById("newTweetText").value; 
! 
// dataオブジェクトに投稿内容を格納 
data = { 
status:statusText 
}; 
// 投稿 
oauth.post('https://api.twitter.com/1.1/statuses/update.json', 
data, successHandler, failureHandler); 
} 
! 
var successHandler = function () { 
console.log("success"); 
} 
ソースリンクFirefoxTwitter js app.js
何を書いたのか 
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叩く) 
成功時のハンドラ
アプリ更新 
つぶやいてみましょう
2. Firefox OSでTwitter Clientを作る 
• Twitter Developers に登録 
• OAuth関連処理を実装する 
• ツイッタークライアントぽいUIを作る 
• タイムラインを取得する 
• ツイート機能を実装する 
• 画像付きツイート機能を実装する
画像付きツイート機能について 
• APIは以下のページを参照 
• https://dev.twitter.com/docs/api/1.1/post/statuses/update_with_media
画像付きツイート機能を実装 
var newTweetPost = function () { 
var data; 
// テキストボックスの中身を取得 
var statusText = document.getElementById("newTweetText").value; 
// fileの中身を確認 
var file = document.querySelector("#file").files[0]; 
// fileに中身がない場合、通常投稿 
if (typeof file === "undefined") { 
// dataオブジェクトに投稿内容を格納 
data = { 
status:statusText 
}; 
// 投稿 
oauth.post('https://api.twitter.com/1.1/statuses/update.json', data, 
this.successHandler, this.failureHandler); 
! 
// fileに中身がある場合、画像つき投稿 
} else { 
data = { 
"status":statusText, 
"media[]":file 
}; 
oauth.request({ 
method:"POST", 
url:"https://api.twitter.com/1.1/statuses/update_with_media.json", 
data:data 
}); 
} 
} 
ソースリンク 
FirefoxTwitter js app.js
何を書いたのか 
var newTweetPost = function () { 
var data; 
// テキストボックスの中身を取得 
var statusText = document.getElementById("newTweetText").value; 
// fileの中身を確認 
var file = document.querySelector("#file").files[0]; 
// fileに中身がない場合、通常投稿 
if (typeof file === "undefined") { 
// dataオブジェクトに投稿内容を格納 
data = { 
status:statusText 
}; 
// 投稿 
oauth.post('https://api.twitter.com/1.1/statuses/update.json', 
data, this.successHandler, this.failureHandler); 
! 
// fileに中身がある場合、画像つき投稿 
} else { 
data = { 
"status":statusText, 
"media[]":file 
}; 
oauth.request({ 
method:"POST", 
url:"https://api.twitter.com/1.1/statuses/update_with_media.json", 
data:data 
}); 
} 
} 
ソースリンク 
FirefoxTwitter js app.js 
ファイルの添付を確認 
画像添付がない場合の 
処理(従来と同じ処理) 
画像添付がある場合の処理 
dataオブジェクトに 
投稿内容を格納 
(文言とファイル) 
画像投稿APIを叩く
アプリ更新 
画像投稿成功
3. アプリを公開する
アプリ公開してみる 
• 公開方法 
• 自前サーバーで公開(普通のWebと同じ) 
• インストール&ダウンロードさせることも可能 
• Firefox Marketplaceで公開 
• Host型(自前サーバーで提供) 
• Package型(アプリを固めてMarketplaceに送る)
アプリ公開してみる 
※ Firefox marketplaceでpackage公開の場合 
zipで固めて... MarketPlaceでアップロード審査へ 
https://marketplace.firefox.com/developers/submit/
お疲れ様でした 
今日のハンズオンは以上です。
今後の課題 
• 足りない機能を実装する 
• メンションラインの取得とか 
• ダイレクトメッセージの送受信とか 
• JavaScriptのコードをより洗練する 
• 現在の実装はグローバルを汚染しまくりであまりよろしくない... 
• githubに整形したコードを上げたので参考にして下さい 
https://github.com/kassy-kz/FirefoxOS_TwitterClient_Sample
ご静聴ありがとうございました

More Related Content

What's hot

Internet Explorer 11 の F12 開発者ツール
Internet Explorer 11 の F12 開発者ツールInternet Explorer 11 の F12 開発者ツール
Internet Explorer 11 の F12 開発者ツールYoshihisa Ozaki
 
Microsoft によるオープンなweb デバッグ環境 comm tech festival-
Microsoft によるオープンなweb デバッグ環境 comm tech festival-Microsoft によるオープンなweb デバッグ環境 comm tech festival-
Microsoft によるオープンなweb デバッグ環境 comm tech festival-Yoshihisa Ozaki
 
20141018 selenium appium_cookpad
20141018 selenium appium_cookpad20141018 selenium appium_cookpad
20141018 selenium appium_cookpadKazuaki Matsuo
 
Playframework1でSeleniumテスト
Playframework1でSeleniumテストPlayframework1でSeleniumテスト
Playframework1でSeleniumテストShunji Konishi
 
Play!30分クッキング
Play!30分クッキングPlay!30分クッキング
Play!30分クッキングShinichi Kozake
 
Angular2 rc.1 unit testing overview
Angular2 rc.1 unit testing overviewAngular2 rc.1 unit testing overview
Angular2 rc.1 unit testing overviewMitsuru Ogawa
 
Laravelの認証について
Laravelの認証についてLaravelの認証について
Laravelの認証についてTakeo Noda
 
Excel on OneDrive is not a file
Excel on OneDrive is not a fileExcel on OneDrive is not a file
Excel on OneDrive is not a fileTakao Tetsuro
 
Selenium2(web driver) ide編
Selenium2(web driver) ide編Selenium2(web driver) ide編
Selenium2(web driver) ide編Tetsuya Hasegawa
 
Transfer Learning & API Azure
Transfer Learning & API AzureTransfer Learning & API Azure
Transfer Learning & API AzureYuki Hattori
 
ローカル環境のテスト自動化【勉強会資料】
ローカル環境のテスト自動化【勉強会資料】ローカル環境のテスト自動化【勉強会資料】
ローカル環境のテスト自動化【勉強会資料】株式会社キャッチアップ
 
最近作ったもの
最近作ったもの最近作ったもの
最近作ったものonozaty
 
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframeworkSpring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframeworkToshiaki Maki
 
Javaデザインパターン入門【第2回】
Javaデザインパターン入門【第2回】Javaデザインパターン入門【第2回】
Javaデザインパターン入門【第2回】Yukiko Kato
 

What's hot (18)

Vue入門
Vue入門Vue入門
Vue入門
 
ぼく(たち)のかんがえた最新のJS開発環境 #scripty04
 ぼく(たち)のかんがえた最新のJS開発環境 #scripty04 ぼく(たち)のかんがえた最新のJS開発環境 #scripty04
ぼく(たち)のかんがえた最新のJS開発環境 #scripty04
 
Internet Explorer 11 の F12 開発者ツール
Internet Explorer 11 の F12 開発者ツールInternet Explorer 11 の F12 開発者ツール
Internet Explorer 11 の F12 開発者ツール
 
Microsoft によるオープンなweb デバッグ環境 comm tech festival-
Microsoft によるオープンなweb デバッグ環境 comm tech festival-Microsoft によるオープンなweb デバッグ環境 comm tech festival-
Microsoft によるオープンなweb デバッグ環境 comm tech festival-
 
20141018 selenium appium_cookpad
20141018 selenium appium_cookpad20141018 selenium appium_cookpad
20141018 selenium appium_cookpad
 
Playframework1でSeleniumテスト
Playframework1でSeleniumテストPlayframework1でSeleniumテスト
Playframework1でSeleniumテスト
 
Play!30分クッキング
Play!30分クッキングPlay!30分クッキング
Play!30分クッキング
 
Angular2 rc.1 unit testing overview
Angular2 rc.1 unit testing overviewAngular2 rc.1 unit testing overview
Angular2 rc.1 unit testing overview
 
Laravelの認証について
Laravelの認証についてLaravelの認証について
Laravelの認証について
 
Excel on OneDrive is not a file
Excel on OneDrive is not a fileExcel on OneDrive is not a file
Excel on OneDrive is not a file
 
Selenium2(web driver) ide編
Selenium2(web driver) ide編Selenium2(web driver) ide編
Selenium2(web driver) ide編
 
Service Workerとの戦い ~ 実装編 ~ #scripty03
Service Workerとの戦い ~ 実装編 ~ #scripty03Service Workerとの戦い ~ 実装編 ~ #scripty03
Service Workerとの戦い ~ 実装編 ~ #scripty03
 
Transfer Learning & API Azure
Transfer Learning & API AzureTransfer Learning & API Azure
Transfer Learning & API Azure
 
ローカル環境のテスト自動化【勉強会資料】
ローカル環境のテスト自動化【勉強会資料】ローカル環境のテスト自動化【勉強会資料】
ローカル環境のテスト自動化【勉強会資料】
 
最近作ったもの
最近作ったもの最近作ったもの
最近作ったもの
 
Selenium2(web driver)
Selenium2(web driver)Selenium2(web driver)
Selenium2(web driver)
 
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframeworkSpring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
 
Javaデザインパターン入門【第2回】
Javaデザインパターン入門【第2回】Javaデザインパターン入門【第2回】
Javaデザインパターン入門【第2回】
 

Viewers also liked

関東Firefox OS勉強会6th「Firefox OS」
関東Firefox OS勉強会6th「Firefox OS」関東Firefox OS勉強会6th「Firefox OS」
関東Firefox OS勉強会6th「Firefox OS」Noritada Shimizu
 
最速フォトグラファーによるカメラ講座
最速フォトグラファーによるカメラ講座最速フォトグラファーによるカメラ講座
最速フォトグラファーによるカメラ講座Kazutoshi Kashimoto
 
デジタル一眼レフでプロ並みの商品写真を撮る方法~デモ編~
デジタル一眼レフでプロ並みの商品写真を撮る方法~デモ編~デジタル一眼レフでプロ並みの商品写真を撮る方法~デモ編~
デジタル一眼レフでプロ並みの商品写真を撮る方法~デモ編~ec-campus
 
SONY Camera Remote API
SONY Camera Remote APISONY Camera Remote API
SONY Camera Remote APIGaprot
 
撮影のイロハ基礎編
撮影のイロハ基礎編撮影のイロハ基礎編
撮影のイロハ基礎編ec-campus
 
Manuscriptedit Japan Medical Services
Manuscriptedit Japan Medical ServicesManuscriptedit Japan Medical Services
Manuscriptedit Japan Medical ServicesTanmaya
 
Firefoxosハンズオン 環境構築
Firefoxosハンズオン 環境構築Firefoxosハンズオン 環境構築
Firefoxosハンズオン 環境構築Kazutoshi Kashimoto
 
2015 11 08_つ部ハッカソン
2015 11 08_つ部ハッカソン2015 11 08_つ部ハッカソン
2015 11 08_つ部ハッカソンKazutoshi Kashimoto
 
プレゼンテーション
プレゼンテーションプレゼンテーション
プレゼンテーションwebcampusschoo
 
レンズについて
レンズについてレンズについて
レンズについてfimpen
 
LT駆動開発08 多少やさしいデジイチの選び方
LT駆動開発08 多少やさしいデジイチの選び方LT駆動開発08 多少やさしいデジイチの選び方
LT駆動開発08 多少やさしいデジイチの選び方Kawakami Hiroko
 
披露宴に持ち込むαレンズ?
披露宴に持ち込むαレンズ?披露宴に持ち込むαレンズ?
披露宴に持ち込むαレンズ?tilandmark
 
FirefoxOSアプリ開発 JSとの健全な付き合い方
FirefoxOSアプリ開発 JSとの健全な付き合い方FirefoxOSアプリ開発 JSとの健全な付き合い方
FirefoxOSアプリ開発 JSとの健全な付き合い方Kazutoshi Kashimoto
 
大分大学を中心とした遠隔医療支援システム
大分大学を中心とした遠隔医療支援システム大分大学を中心とした遠隔医療支援システム
大分大学を中心とした遠隔医療支援システムplatinumhandbook
 
SEO ライティングガイドライン
SEO ライティングガイドラインSEO ライティングガイドライン
SEO ライティングガイドラインshnins
 
カメラ Introduction of Camera
カメラ Introduction of Cameraカメラ Introduction of Camera
カメラ Introduction of Camerakaraage0703
 

Viewers also liked (20)

関東Firefox OS勉強会6th「Firefox OS」
関東Firefox OS勉強会6th「Firefox OS」関東Firefox OS勉強会6th「Firefox OS」
関東Firefox OS勉強会6th「Firefox OS」
 
最速フォトグラファーによるカメラ講座
最速フォトグラファーによるカメラ講座最速フォトグラファーによるカメラ講座
最速フォトグラファーによるカメラ講座
 
デジタル一眼レフでプロ並みの商品写真を撮る方法~デモ編~
デジタル一眼レフでプロ並みの商品写真を撮る方法~デモ編~デジタル一眼レフでプロ並みの商品写真を撮る方法~デモ編~
デジタル一眼レフでプロ並みの商品写真を撮る方法~デモ編~
 
SONY Camera Remote API
SONY Camera Remote APISONY Camera Remote API
SONY Camera Remote API
 
撮影のイロハ基礎編
撮影のイロハ基礎編撮影のイロハ基礎編
撮影のイロハ基礎編
 
Manuscriptedit Japan Medical Services
Manuscriptedit Japan Medical ServicesManuscriptedit Japan Medical Services
Manuscriptedit Japan Medical Services
 
Firefoxosハンズオン 環境構築
Firefoxosハンズオン 環境構築Firefoxosハンズオン 環境構築
Firefoxosハンズオン 環境構築
 
2015 11 08_つ部ハッカソン
2015 11 08_つ部ハッカソン2015 11 08_つ部ハッカソン
2015 11 08_つ部ハッカソン
 
プレゼンテーション
プレゼンテーションプレゼンテーション
プレゼンテーション
 
レンズについて
レンズについてレンズについて
レンズについて
 
LT駆動開発08 多少やさしいデジイチの選び方
LT駆動開発08 多少やさしいデジイチの選び方LT駆動開発08 多少やさしいデジイチの選び方
LT駆動開発08 多少やさしいデジイチの選び方
 
俺がライダーだ
俺がライダーだ俺がライダーだ
俺がライダーだ
 
AVは3Dで観ろ!
AVは3Dで観ろ!AVは3Dで観ろ!
AVは3Dで観ろ!
 
披露宴に持ち込むαレンズ?
披露宴に持ち込むαレンズ?披露宴に持ち込むαレンズ?
披露宴に持ち込むαレンズ?
 
FirefoxOSアプリ開発 JSとの健全な付き合い方
FirefoxOSアプリ開発 JSとの健全な付き合い方FirefoxOSアプリ開発 JSとの健全な付き合い方
FirefoxOSアプリ開発 JSとの健全な付き合い方
 
ももちゃんおまかせ隊
ももちゃんおまかせ隊ももちゃんおまかせ隊
ももちゃんおまかせ隊
 
大分大学を中心とした遠隔医療支援システム
大分大学を中心とした遠隔医療支援システム大分大学を中心とした遠隔医療支援システム
大分大学を中心とした遠隔医療支援システム
 
SEO ライティングガイドライン
SEO ライティングガイドラインSEO ライティングガイドライン
SEO ライティングガイドライン
 
絶望しない! コミケ
絶望しない! コミケ絶望しない! コミケ
絶望しない! コミケ
 
カメラ Introduction of Camera
カメラ Introduction of Cameraカメラ Introduction of Camera
カメラ Introduction of Camera
 

Similar to Firefoxosハンズオン

Firefox OS アプリケーション チュートリアル
Firefox OS アプリケーション チュートリアルFirefox OS アプリケーション チュートリアル
Firefox OS アプリケーション チュートリアルfunakky
 
ぶっとびケータイ+Firefox OS Apps
ぶっとびケータイ+Firefox OS Appsぶっとびケータイ+Firefox OS Apps
ぶっとびケータイ+Firefox OS AppsEnsekiTT
 
Unity に於ける iOS ビルド自動化のおはなし - 20141030 第26回 Unity 勉強会
Unity に於ける iOS ビルド自動化のおはなし - 20141030 第26回 Unity 勉強会Unity に於ける iOS ビルド自動化のおはなし - 20141030 第26回 Unity 勉強会
Unity に於ける iOS ビルド自動化のおはなし - 20141030 第26回 Unity 勉強会Mori Tetsuya
 
Magento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for DesignMagento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for DesignMiho Nakano
 
jQuery Mobile(開発編)勉強会資料
jQuery Mobile(開発編)勉強会資料jQuery Mobile(開発編)勉強会資料
jQuery Mobile(開発編)勉強会資料Nobumasa Ura
 
はじめてのCodeIgniter
はじめてのCodeIgniterはじめてのCodeIgniter
はじめてのCodeIgniterYuya Matsushima
 
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイドXPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイドTetsuji Hayashi
 
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフラインWebフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフラインShumpei Shiraishi
 
CodeIgniterによるPhwittr
CodeIgniterによるPhwittrCodeIgniterによるPhwittr
CodeIgniterによるPhwittrkenjis
 
デブサミ2015「実践!クロスプラットフォーム モバイルアプリ開発」
デブサミ2015「実践!クロスプラットフォーム モバイルアプリ開発」デブサミ2015「実践!クロスプラットフォーム モバイルアプリ開発」
デブサミ2015「実践!クロスプラットフォーム モバイルアプリ開発」アシアル株式会社
 
20140523 jQuery基礎 (HTML5ビギナーズ)
20140523 jQuery基礎 (HTML5ビギナーズ)20140523 jQuery基礎 (HTML5ビギナーズ)
20140523 jQuery基礎 (HTML5ビギナーズ)Daisuke Yamazaki
 
ドキュメンテーションを加速するストレスフリーの作図ツール『blockdiag』 jus2011年6月勉強会
ドキュメンテーションを加速するストレスフリーの作図ツール『blockdiag』 jus2011年6月勉強会ドキュメンテーションを加速するストレスフリーの作図ツール『blockdiag』 jus2011年6月勉強会
ドキュメンテーションを加速するストレスフリーの作図ツール『blockdiag』 jus2011年6月勉強会Takayuki Shimizukawa
 
How to django at first
How to django at firstHow to django at first
How to django at firstMaito Kuwahara
 
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)Masanori Ishigami
 
Sencha touchのはじめかた
Sencha touchのはじめかたSencha touchのはじめかた
Sencha touchのはじめかたYuki Naotori
 
Apps for Web Platform
Apps for Web PlatformApps for Web Platform
Apps for Web Platformdynamis
 
Xoopsサイト制作セミナー 20120922
Xoopsサイト制作セミナー 20120922Xoopsサイト制作セミナー 20120922
Xoopsサイト制作セミナー 20120922Toshihiro Takehara
 

Similar to Firefoxosハンズオン (20)

Firefox OS アプリケーション チュートリアル
Firefox OS アプリケーション チュートリアルFirefox OS アプリケーション チュートリアル
Firefox OS アプリケーション チュートリアル
 
ぶっとびケータイ+Firefox OS Apps
ぶっとびケータイ+Firefox OS Appsぶっとびケータイ+Firefox OS Apps
ぶっとびケータイ+Firefox OS Apps
 
Unity に於ける iOS ビルド自動化のおはなし - 20141030 第26回 Unity 勉強会
Unity に於ける iOS ビルド自動化のおはなし - 20141030 第26回 Unity 勉強会Unity に於ける iOS ビルド自動化のおはなし - 20141030 第26回 Unity 勉強会
Unity に於ける iOS ビルド自動化のおはなし - 20141030 第26回 Unity 勉強会
 
Magento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for DesignMagento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for Design
 
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobile
 
jQuery Mobile(開発編)勉強会資料
jQuery Mobile(開発編)勉強会資料jQuery Mobile(開発編)勉強会資料
jQuery Mobile(開発編)勉強会資料
 
Firefox OS アプリ開発
Firefox OS アプリ開発Firefox OS アプリ開発
Firefox OS アプリ開発
 
20120118 titanium
20120118 titanium20120118 titanium
20120118 titanium
 
はじめてのCodeIgniter
はじめてのCodeIgniterはじめてのCodeIgniter
はじめてのCodeIgniter
 
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイドXPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
 
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフラインWebフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
 
CodeIgniterによるPhwittr
CodeIgniterによるPhwittrCodeIgniterによるPhwittr
CodeIgniterによるPhwittr
 
デブサミ2015「実践!クロスプラットフォーム モバイルアプリ開発」
デブサミ2015「実践!クロスプラットフォーム モバイルアプリ開発」デブサミ2015「実践!クロスプラットフォーム モバイルアプリ開発」
デブサミ2015「実践!クロスプラットフォーム モバイルアプリ開発」
 
20140523 jQuery基礎 (HTML5ビギナーズ)
20140523 jQuery基礎 (HTML5ビギナーズ)20140523 jQuery基礎 (HTML5ビギナーズ)
20140523 jQuery基礎 (HTML5ビギナーズ)
 
ドキュメンテーションを加速するストレスフリーの作図ツール『blockdiag』 jus2011年6月勉強会
ドキュメンテーションを加速するストレスフリーの作図ツール『blockdiag』 jus2011年6月勉強会ドキュメンテーションを加速するストレスフリーの作図ツール『blockdiag』 jus2011年6月勉強会
ドキュメンテーションを加速するストレスフリーの作図ツール『blockdiag』 jus2011年6月勉強会
 
How to django at first
How to django at firstHow to django at first
How to django at first
 
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
 
Sencha touchのはじめかた
Sencha touchのはじめかたSencha touchのはじめかた
Sencha touchのはじめかた
 
Apps for Web Platform
Apps for Web PlatformApps for Web Platform
Apps for Web Platform
 
Xoopsサイト制作セミナー 20120922
Xoopsサイト制作セミナー 20120922Xoopsサイト制作セミナー 20120922
Xoopsサイト制作セミナー 20120922
 

Recently uploaded

PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000Shota Ito
 
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By DanielPostman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Danieldanielhu54
 
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムスマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムsugiuralab
 
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxIoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxAtomu Hidaka
 
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略Ryo Sasaki
 
UPWARD_share_company_information_20240415.pdf
UPWARD_share_company_information_20240415.pdfUPWARD_share_company_information_20240415.pdf
UPWARD_share_company_information_20240415.pdffurutsuka
 
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。iPride Co., Ltd.
 
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directoryosamut
 
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ       2024/04/12の勉強会で発表されたものです。新人研修のまとめ       2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。iPride Co., Ltd.
 

Recently uploaded (9)

PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
 
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By DanielPostman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
 
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムスマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
 
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxIoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
 
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
 
UPWARD_share_company_information_20240415.pdf
UPWARD_share_company_information_20240415.pdfUPWARD_share_company_information_20240415.pdf
UPWARD_share_company_information_20240415.pdf
 
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
 
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
 
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ       2024/04/12の勉強会で発表されたものです。新人研修のまとめ       2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
 

Firefoxosハンズオン

  • 1. Firefox OS ハンズオン 2014 / 5 / 31 for 名古屋つ部 ! @kassy_kz
  • 2. 自己紹介 名前 • @kassy_kz (かっしー) • 横浜 Android PF部によく出没 • Effective Android(共著) • 同人活動 (Tech-orz) - コミックマーケットC82, C84出展 - Maker Faire Tokyo 2013 出展 特徴
  • 3. 本日の進行 対象者 • Firefox OS初心者 • Firefox OS初心者 内容 • Firefox OSと仲良くなる • Firefox OSでTwitterClientをつくる • アプリを公開する ハッシュタグ: #tsubufx
  • 5. 事前準備は大丈夫ですか? • Firefoxブラウザのインストール • FirefoxOS Simulatorのインストール • Twitterのアカウントを取得しておく • エディタのインストール
  • 6. Firefox ブラウザをインストール • http://www.mozilla.jp/ からFirefoxをダウンロード
  • 7. シミュレーターをインストール • Firefoxを起動して メニュー -> 開発ツール-> アプリマネージャを選択
  • 10. Firefox OSシミュレーター起動 • Firefox OS を起動してください
  • 11. Firefox OSシミュレーター起動 • シミュレーターの起動が確認できればOK!
  • 12. エディタについて 以下の機能を備えたものを… • 入力コード補完機能 • シンタックスハイライト機能 • コード自動整形機能 なにそれ?って思った人は問答無用です! 大人しく Sublime Text 2 をインストールしてください http://www.sublimetext.com/2
  • 13. Sublime Text2をパワーアップ 1/2 package controlのインストール [View]->[Show Console] コンソールに文字列(これ)を貼り付け ここに貼り付け 再起動
  • 14. Sublime Text2をパワーアップ 2/2 プラグインのインストール Ctrl+Shift+P (Win) Command+Shift+P (Mac) 窓に[install]と打ち込み エンター 窓に[andyjs]と打ち込み エンター これでandyjsプラグイン がインストールされる ※他にもjQueryプラグインとかも インストールすると便利
  • 15. 1. Firefox OSと仲良くなる • HTMLで Hello World • JavaScriptで Hello JS • cssを使う • Firefox OSらしいUIにする • 画面遷移を実装する • アプリ連携を体験する
  • 16. 1. Firefox OSと仲良くなる • HTMLで Hello World • JavaScriptで Hello JS • cssを使う • Firefox OSらしいUIにする • 画面遷移を実装する • アプリ連携を体験する
  • 17. HTMLで Hello World • フォルダを作ります HelloFirefox • テキストファイルを作ります HelloFirefox index.html
  • 18. HTMLで Hello World • index.htmlに以下の記述を HelloFirefox index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello Firefox OS</title> </head> <body> <h1>Hello Firefox</h1> </body> </html> ソースリンク
  • 19. コーディングのテク htmlとだけ打ち込んで ※Sublime Text2の場合 tabキー押下 補完でひな形が!
  • 20. ナニを書いたのか • <(要素名)>〜</(要素名)>で要素を囲む構造 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello Firefox OS</title> </head> <body> <h1>Hello Firefox</h1> </body> </html> HelloFirefox index.html <html> ヘッダ ボディ
  • 21. HTMLで Hello World • manifest.webappを作成して以下の記述を... HelloFirefox manifest.webapp ソースリンク { "name": "HelloFirefox", "description": "My First app", "launch_path": "/index.html", "icons": { "128": "/img/icons/icon_128.png" } }
  • 22. 何を書いたのか • アプリに関する情報を記述 HelloFirefox manifest.webapp { "name": "HelloFirefox", "description": "My First app", "launch_path": "/index.html", "icons": { "128": "/img/icons/icon_128.png" } } アプリに関する 情報 アイコンのパス
  • 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
  • 37. ライブラリを使う jQueryを落とすhttp://jquery.com/download/ Download the uncompressed, development jQuery 2.1.1 ここに配置 HelloFirefox js lib jquery-2.1.1.js
  • 38. • index.htmlに追記 HelloFirefox index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello Firefox OS</title> <script src="js/lib/jquery-2.1.1.js"></script> <script src="js/app.js"></script> </head> <body> ... ライブラリを使う ソースリンク
  • 39. • index.htmlに追記 HelloFirefox index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello Firefox OS</title> <script src="js/lib/jquery-2.1.1.js"></script> <script src="js/app.js"></script> </head> <body> ... ライブラリの パス追加 (順番重要) ライブラリを使う
  • 40. • app.jsを編集する HelloFirefox js app.js window.onload = function() { document.getElementById("firstButton").onclick = function() { document.getElementById("firstDiv").innerHTML = "JSは最高だぜ"; }; $("#firstButton").click(function() { $("#firstDiv").text("JSは最高だぜ"); }); }; ライブラリを使う ソースリンク
  • 41. 何を書いたのか • app.jsを編集する HelloFirefox js app.js ボタン要素参照 div要素参照 jQueryを使う場合 #(要素id名) .(要素クラス名) で参照する window.onload = function() { $("#firstButton").click(function() { $("#firstDiv").text("JSは最高だぜ"); }); };
  • 43. Sublime Text2の便利な使い方 フォルダを ドラッグ ファイル一覧が!
  • 44. 1. Firefox OSと仲良くなる • HTMLで Hello World • JavaScriptで Hello JS • cssを使う • Firefox OSらしいUIにする • 画面遷移を実装する • アプリ連携を体験する
  • 45. cssで装飾する 1/2 • index.htmlに追記 HelloFirefox index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Hello Firefox OS</title> <script src="js/lib/jquery-2.1.1.js"></script> <script src="js/app.js"></script> <link rel="stylesheet" href="css/app.css"/> </head> <body> ソースリンク cssのパス
  • 46. cssで装飾する 2/2 • cssフォルダ、app.cssファイルを追加する HelloFirefox css app.css #firstDiv { margin-top:10px; font-size:32px; color:#ff0000; } ソースリンク div要素参照 (idで参照) ※cssでググって、いろんなパラメータをいじってみて下さい
  • 49. 開発ツールを使ってみる インスペクタ 部品の配置を確認できます スタイルエディタ cssのパラメータを変更 デバッガ JavaScriptのデバッグ
  • 50. 1. Firefox OSと仲良くなる • HTMLで Hello World • JavaScriptで Hello JS • cssを使う • Firefox OSらしいUIにする • 画面遷移を実装する • アプリ連携を体験する
  • 51. Firefox OSらしいUIとは Building Blocksのページ http://buildingfirefoxos.com/ サンプルアプリを インストールしてみよう ※シミュレーターで https://marketplace.firefox.com/app/building-blocks
  • 53. Building Blocksを使う準備 style, style_unstable, icons, *cssを ! すべて 直下にコピーする コピー HelloFirefox
  • 54. Building Blocks を取り込む <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no" /> <title>Building blocks demo</title> <!-- Building blocks --> <link rel="stylesheet" href="style/action_menu.css"> <link rel="stylesheet" href="style/buttons.css"> <link rel="stylesheet" href="style/confirm.css"> !!! .landscape section[role="region"]#drawer > header:first-child { /* Whatever needs to be changed on landscape */ } </style> </head> <body> コピー (Building-Blocks) / app.htmlの下記部分を、コピー 1 2 3 4 5 6 7 8 9 10 11 199 200 201 202 203 204
  • 55. Building Blocks を取り込む コピーしたテキストを の<head>タグ内にペースト <head> <meta charset="utf-8" /> <title>Hello Firefox OS</title> <script src="js/lib/jquery-2.1.1.js"></script> <script src="js/app.js"></script> !! <!-- Building blocks --> <link rel="stylesheet" href="style/action_menu.css"> <link rel="stylesheet" href="style/buttons.css"> ! ! /* Whatever needs to be changed on landscape */ } </style> ! <link rel="stylesheet" href="css/app.css"/> ! </head> ペースト HelloFirefox index.html ソースリンク
  • 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> (リンク貼りゃいいんだよ)
  • 63. あれ. . . (戻れない)
  • 64. 一体どうすればいいんだ... • Building Blocksの画面遷移を真似する
  • 65. <section role="region" data-position="current"> <header class="fixed"> <h1>Hello Building Blocks</h1> </header> <article class="content scrollable header"> <h1>1番目のページ</h1> <button class="recommend" id="firstButton">click</button> <div id="firstDiv"></div> </article> </section> ! <section role="region" id="newSection" data-position="right"> <header class="fixed"> <a id="backButton" href="#"> <span class="icon icon-back">back</span> </a> <h1>Next Page</h1> </header> <article class="content scrollable header"> <h1>2番めのページ</h1> </article> </section> まるパクする (1/2) ソースリンクHelloFirefox index.html
  • 66. HelloFirefox js app.js ソースリンク まるパクする (2/2) window.onload = function() { $("#firstButton").click(function () { $("#firstDiv").text("JSは最高だぜ"); }); $("#firstButton").click(function() { document.querySelector('#newSection').className = 'current'; document.querySelector('[data-position="current"]').className = 'left'; }); ! $("#backButton").click(function() { document.querySelector('#newSection').className = 'right'; document.querySelector('[data-position="current"]').className = 'current'; }); };
  • 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 ブラウザを 呼び出す コード
  • 74. 番外編 アプリジェネレータを使う • 環境準備 • アプリひな形をダウンロード • ライブラリを追加 • アプリ実装 • アプリデプロイ ※本番外編はコマンド操作が必要になります
  • 75. 環境準備 • node.jsのインストール http://nodejs.org/ • voloのインストール(コマンドラインから) 番外編 $ npm install -g volo
  • 76. アプリひな形ダウンロード 番外編 • (任意の場所にcdしてから) $ volo create myproject mozilla/mortar-app-stub • Firefox OSアプリ一式がダウンロードされる (アプリ本体はwww配下)
  • 77. ライブラリを追加 番外編 $ cd myproject $ volo add jquery • www/js/lib 配下に自動的にライブラリがインストールされる
  • 78. アプリ実装 番外編 • index.html <body> <script type="text/javascript" data-main="js/init.js" src="js/lib/require.js"></script> <button id="firstButton">Click</button> <div id="firstDiv"></div> ! </body> • app.js define(function(require) {  (中略) ! $("#firstButton").click(function() { $("#firstDiv").text("JSは最高だぜ"); }); }); ※require.js特有の書き位置に注意
  • 79. アプリデプロイ 番外編 • myproject配下で $ volo serve • シミュレータのブラウザで http://localhost:8008 にアクセス アプリ更新の際、いちいちアンインストールすることなく 更新ボタン一つで動作確認が出来るようになります
  • 80. 2. Firefox OSでTwitter Clientを作る • Twitter Developers に登録 • OAuth関連処理を実装する • ツイッタークライアントぽいUIを作る • タイムラインを取得する • ツイート機能を実装する • 画像付きツイート機能を実装する
  • 81. 新規プロジェクトで開始 • 新規フォルダを作ります  HelloFirefox をまるコピします HelloFirefox コピーFirefoxTwitter
  • 82. アプリ情報を書き換える • manifest.webappのアプリ情報を 適当に書き換えて下さい(自由) { "name": "FirefoxTwitter", "description": "My First TwitterClient", ! • index.htmlのヘッダ情報を適当に 書き換えて下さい(自由) <header class="fixed"> <h1>Hello Twitter</h1> </header> FirefoxTwitter manifest.webapp FirefoxTwitter index.html
  • 83. 2. Firefox OSでTwitter Clientを作る • Twitter Developers に登録 • OAuth関連処理を実装する • ツイッタークライアントぽいUIを作る • タイムラインを取得する • ツイート機能を実装する • 画像付きツイート機能を実装する
  • 84. Twitter Developersにアプリを登録 https://apps.twitter.com/ Sign inをクリックCreate New Appをクリック
  • 85. アプリ名 アプリの説明 サイトURL 持ってなければhttp://example.comとでも (空白でOK) チェック 確定 アプリ情報を入力 規約を読んで
  • 86. アプリ名について注意 以下の名前は使えないので注意 • 既存のTwitterアプリと被る名前 • [Twitter] という文字列を含む名前
  • 88. 設定変更しておく Read and Writeに この変更をしないとWrite(つぶやき)ができない
  • 89. 2. Firefox OSでTwitter Clientを作る • Twitter Developers に登録 • OAuth関連処理を実装する • ツイッタークライアントぽいUIを作る • タイムラインを取得する • ツイート機能を実装する • 画像付きツイート機能を実装する
  • 90. OAuthについてさらっとおさらい ユーザー Twitter アプリ 認証 認証 パスワード アプリ使用許可 使う (パスワード教えない) 機能呼び出し
  • 91. OAuthのワークフロー ユーザーアプリTwitter Consumer Keyを使って、 リクエストトークンを取得 リクエストトークンからユーザー許可を 求めるURLを生成してブラウザで表示 ユーザーがアプリ使用を許可、 TwitterはPINを表示(ユーザー認証あり) ユーザーがアプリにPINを入力 Consumer Key, リクエストトークン、 PINを使ってアクセストークンを取得 以後、アクセストークンを使って Twitterの各種機能を呼び出す 1. 2. 3. 4. 5. 6.
  • 92. ライブラリがないと死ぬ • 今回は jsOAuth を使わせていただく https://github.com/bytespider/jsOAuth
  • 94. index.htmlに追記 FirefoxTwitter index.html ソースリンク <head> <meta charset="utf-8" /> <title>Hello Firefox OS</title> <script src="js/lib/jquery-2.1.1.js"></script> <script src="js/lib/jsOAuth-1.3.6.js"></script> <script src=“js/app.js"></script> ! ! !
  • 95. このライブラリ、 そのままでは使えない • 理由 XmlHttpRequestの クロスドメイン通信制約による
  • 96. クロスドメイン制約とは ユーザー Twitter アプリ × 両方と同時に通信できない ! (やや語弊あり、正確には調べて下さい)
  • 97. 一般的なクロスドメイン回避はどうやってるか HTTP Request Http Response HTTPレスポンスのヘッダに 特別な許可を含めることで 同時通信を認める 少なくともパッケージ型のアプリではこの手は使えない
  • 98. クロスドメイン制約回避方法 • XmlHttpRequestオブジェクト作成時 に引数を追加 XMLHttpRequest({mozSystem: true}); • manifestにパーミッションを追記 "type": "privileged", "permissions": { "systemXHR": { "description": "for OAuth" } } ※Firefox OSの場合
  • 99. Firefox OS アプリ種別について 標準アプリ特権アプリ公認アプリ (privileged) (certified) 特権アプリはFirefox Marketplaceによる通常 よりも厳格なレビュー を経て承認される必要 があります。 認定アプリ作成にはOEM、 キャリアの承認が必要とな るため、一般のアプリ開発 者は本アプリを作成するこ とはできません。 特別な権限を必要と しない 標準のアプリです。 (つまり絶望)
  • 100. Firefox OS アプリ種別について 標準アプリ特権アプリ公認アプリ (privileged) (certified) 特権アプリはFirefox Marketplaceによる通常 よりも厳格なレビュー を経て承認される必要 があります。 認定アプリ作成にはOEM、 キャリアの承認が必要とな るため、一般のアプリ開発 者は本アプリを作成するこ とはできません。 特別な権限を必要と しない 標準のアプリです。 (つまり絶望)
  • 101. XmlHttpRequestに引数追加 FirefoxTwitter js lib jsOAuth-1.3.6.js } else if (typeof require !== 'undefined') { // CommonJS require try { // XHR = new require("xhr").XMLHttpRequest(); XHR = new require("xhr").XMLHttpRequest({mozSystem: true}); } catch (e) { // module didn't expose correct API or doesn't exists if (typeof global.XMLHttpRequest !== "undefined") { // XHR = new global.XMLHttpRequest(); XHR = new global.XMLHttpRequest({mozSystem: true}); } else { throw "No valid request transport found."; } } } else if (typeof global.XMLHttpRequest !== "undefined") { // W3C //XHR = new global.XMLHttpRequest(); XHR = new global.XMLHttpRequest({mozSystem: true}); } else { throw "No valid request transport found."; } 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 ソースリンク
  • 102. Manifestにパーミッション追記 FirefoxTwitter manifest.webapp { "name": "FirefoxTwitter", "description": "My First Twitter Client", "launch_path": "/index.html", "icons": { "128": "/img/icons/icon_128.png" }, "type": "privileged", "permissions": { "systemXHR": { "description": "for OAuth" } } } ソースリンク
  • 103. OAuth関連処理を実装する 1/4 FirefoxTwitter js app.js ソースリンク // oauthオブジェクト var oauth; ! window.onload = function () { ! // OAuth関連の処理を開始する firstOAuthFunc(); } ! OAuth処理を開始する関数 (すぐ後で実装)
  • 104. OAuth関連処理を実装する 2/4 FirefoxTwitter js app.js /** * OAuth関連で最初に行う処理 */ var firstOAuthFunc = function () { ! // 最初にOAuthオブジェクトに喰わせる値たち var config = { consumerKey:"あなたのコンシューマーキー", consumerSecret:"あなたのコンシューマーシークレット", requestTokenUrl:"https://api.twitter.com/oauth/request_token", authorizationUrl:"https://api.twitter.com/oauth/authorize", accessTokenUrl:"https://api.twitter.com/oauth/access_token" }; ! // OAuthのオブジェクトを作成 oauth = new OAuth(config); ! // 1. consumer key と consumer secret を使って、リクエストトークンを取得する oauth.fetchRequestToken(successFetchRequestToken, failureHandler); };
  • 105. FirefoxTwitter js app.js /** * OAuth関連で最初に行う処理 */ var firstOAuthFunc = function () { ! // 最初にOAuthオブジェクトに喰わせる値たち var config = { consumerKey:"あなたのコンシューマーキー", consumerSecret:"あなたのコンシューマーシークレット", requestTokenUrl:"https://api.twitter.com/oauth/request_token", authorizationUrl:"https://api.twitter.com/oauth/authorize", accessTokenUrl:"https://api.twitter.com/oauth/access_token" }; ! // OAuthのオブジェクトを作成 oauth = new OAuth(config); ! // 1. consumer key と consumer secret を使って、リクエストトークンを取得 oauth.fetchRequestToken(successFetchRequestToken, failureHandler); }; さっき取得したキー OAuthオブジェクト 生成 (前記1~6のウチ) 1の処理 何を書いたのか OAuthオブジェクト に与える値
  • 106. /** * OAuth関連で最初に行う処理 */ var firstOAuthFunc = function () { ! // 最初にOAuthオブジェクトに喰わせる値たち var config = { consumerKey:"あなたのコンシューマーキー", consumerSecret:"あなたのコンシューマーシークレット", requestTokenUrl:"https://api.twitter.com/oauth/request_token", authorizationUrl:"https://api.twitter.com/oauth/authorize", accessTokenUrl:"https://api.twitter.com/oauth/access_token" }; ! // OAuthのオブジェクトを作成 oauth = new OAuth(config); ! // 1. consumer key と consumer secret を使って、リクエストトークンを取得 oauth.fetchRequestToken(successFetchRequestToken, failureHandler); }; 何を書いたのか FirefoxTwitter js app.js 失敗時のハンドラ 成功時のハンドラ (すぐ後で出てきます)
  • 107. コールバック関数とは var successFetchRequstToken = function() {/* 成功した時の処理 */ } var failureFetchRequstToken = function() {/* 失敗した時の処理 */ } oauth.fetchRequestToken(successFetchRequestToken, failureHandler); あなたの プログラム ライブラリ ハンドラを渡す ライブラリが処理 ! ハンドラを呼び出す ハンドラ定義 ハンドラ渡す
  • 108. OAuth関連処理を実装する 3/4 FirefoxTwitter js app.js /** * 1の処理の成功時のコールバック関数 */ var successFetchRequestToken = function (authUrl) { ! // 2. リクエストトークンを使い、ユーザにアクセス許可を求めるURLを生成して ブラウザを起動 // 3. ブラウザで認証を行い、ユーザーにPINが表示される var activity = new MozActivity({ name:"view", data:{ type:"url", url:authUrl } }); ! // 4. アプリで用意したダイアログにPIN を入力してもらう var pin = prompt("Please enter your PIN", ""); ! // oauthオブジェクトにPINをセット oauth.setVerifier(pin); ! // 5. consumer key, consumer secret, リクエストトークン, PIN を使って、アクセストークンを取得する oauth.fetchAccessToken(successFetchAccessToken, failureHandler); };
  • 109. 何を書いたのか FirefoxTwitter js app.js /** * 1の処理の成功時のコールバック関数 */ var successFetchRequestToken = function (authUrl) { ! // 2. リクエストトークンを使い、ブラウザを起動 // 3. ブラウザで認証を行い、ユーザーにPINが表示される var activity = new MozActivity({ name:"view", data:{ type:"url", url:authUrl } }); ! // 4. アプリで用意したダイアログにPIN を入力してもらう var pin = prompt("Please enter your PIN", ""); ! // oauthオブジェクトにPINをセット oauth.setVerifier(pin); ! // 5. アクセストークンを取得する oauth.fetchAccessToken(successFetchAccessToken, failureHandler); }; 1の処理成功時 のハンドラ関数 ブラウザで 認証画面を開く PINを入力する 窓を用意 OAuthオブジェク トにPINセット アクセストークン を取得しにいく
  • 110. 何を書いたのか FirefoxTwitter js app.js /** * 1の処理の成功時のコールバック関数 */ var successFetchRequestToken = function (authUrl) { ! // 2. リクエストトークンを使い、ブラウザを起動 // 3. ブラウザで認証を行い、ユーザーにPINが表示される var activity = new MozActivity({ name:"view", data:{ type:"url", url:authUrl } }); ! // 4. アプリで用意したダイアログにPIN を入力してもらう var pin = prompt("Please enter your PIN", ""); ! // oauthオブジェクトにPINをセット oauth.setVerifier(pin); ! // 5. アクセストークンを取得する oauth.fetchAccessToken(successFetchAccessToken, failureHandler); }; 失敗時のハンドラ 成功時のハンドラ (すぐ後で出てきます)
  • 111. /** * 5の処理の成功時のコールバック関数 */ var successFetchAccessToken = function () { alert("success oauth"); }; ! /** * 各処理失敗時のコールバック関数 */ var failureHandler = function (data) { alert("failure"); }; OAuth関連処理を実装する 4/4 FirefoxTwitter js app.js
  • 112. 何を書いたのか /** * 5の処理の成功時のコールバック関数 */ var successFetchAccessToken = function () { alert("success oauth"); }; ! /** * 各処理失敗時のコールバック関数 */ var failureHandler = function (data) { alert("failure"); }; FirefoxTwitter js app.js 5の処理が成功 したときのハンドラ アラートを出す処理 (引数は出力文字) 失敗ハンドラ (1,5の処理で共通)
  • 114. 課題 ! このままでは毎回認証操作が必要 1回目2回目3回目 取得したアクセストークンを保存して 2回目以降使えるようにしたい
  • 115. var successFetchAccessToken = function () { // 取得したアクセストークンをWebStorageで保存する(次回以降のため) localStorage.setItem("accessTokenKey", oauth.getAccessTokenKey()); localStorage.setItem("accessTokenSecret", oauth.getAccessTokenSecret()); alert("success oauth"); }; アクセストークンを保存する処理を追加 1/2 FirefoxTwitter js app.js ソースリンク
  • 116. var successFetchAccessToken = function () { // 取得したアクセストークンをWebStorageで保存する(次回以降のため) localStorage.setItem("accessTokenKey", oauth.getAccessTokenKey()); localStorage.setItem("accessTokenSecret", oauth.getAccessTokenSecret()); alert("success oauth"); }; 何を書いたのか FirefoxTwitter js app.js 第一引数: 保存する値の名前 第二引数: 保存する値 Webストレージ 機能で値を保存 (AccessTokenKeyと AccessTokenSecret)
  • 117. アクセストークンを保存する処理を追加 2/2 FirefoxTwitter js app.js var firstOAuthFunc = function () { ! // OAuthのオブジェクトを作成 oauth = new OAuth(config); ! // 保存してあるアクセストークンがあればそれをロードする var accessTokenKey = localStorage.getItem("accessTokenKey"); var accessTokenSecret = localStorage.getItem("accessTokenSecret"); ! // アクセストークンが保存されていた場合 if (accessTokenKey) { // 保存していたアクセストークンをセットする oauth.setAccessToken(accessTokenKey, accessTokenSecret); ! // アクセストークンが保存されていなかった場合 } else { // 1. consumer key と consumer secret を使って、リクエストトークンを取得する oauth.fetchRequestToken(successFetchRequestToken, failureHandler); } };
  • 118. アクセストークンを保存する処理を追加 2/2 FirefoxTwitter js app.js var firstOAuthFunc = function () { ! // OAuthのオブジェクトを作成 oauth = new OAuth(config); ! // 保存してあるアクセストークンがあればそれをロードする var accessTokenKey = localStorage.getItem("accessTokenKey"); var accessTokenSecret = localStorage.getItem("accessTokenSecret"); Webストレージで 値を取り出し (AccessTokenと AccessTokenSecret) ! // アクセストークンが保存されていた場合 if (accessTokenKey) { // 保存していたアクセストークンをセットする oauth.setAccessToken(accessTokenKey, accessTokenSecret); 値の取り出しに成功 した場合、それを使う ! // アクセストークンが保存されていなかった場合 } else { // 1. consumer key と consumer secret を使って、リクエストトークンを取得 oauth.fetchRequestToken(successFetchRequestToken, failureHandler); } }; 失敗した場合、 OAuth認証処理
  • 119. 2. Firefox OSでTwitter Clientを作る • Twitter Developers に登録 • OAuth関連処理を実装する • ツイッタークライアントぽいUIを作る • タイムラインを取得する • ツイート機能を実装する • 画像付きツイート機能を実装する
  • 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を作る • タイムラインを取得する • ツイート機能を実装する • 画像付きツイート機能を実装する
  • 131. タイムラインを取得するには • TwitterのAPI情報を確認 https://dev.twitter.com/docs/api/1.1/get/statuses/home_timeline
  • 132. タイムラインを取得する処理 1/2 ソースリンクFirefoxTwitter js app.js window.onload = function() { ! ! // 更新ボタンをおした時のハンドラ $("#updateButton").click(function () { // TweetBoxの中身を空にする clearTweetDom(); // HomeTimelineを取得する getHomeTimeline(); }); ! firstOAuthFunc(); } ! /** * 表示したTweetをすべて消す */ var clearTweetDom = function () { var parent = $("#tweetBox"); parent.empty(); };
  • 133. 何を書いたのか FirefoxTwitter js app.js window.onload = function() { ! ! // 更新ボタンをおした時のハンドラ $("#updateButton").click(function () { // TweetBoxの中身を空にする clearTweetDom(); // HomeTimelineを取得する getHomeTimeline(); }); ! firstOAuthFunc(); } ! /** * 表示したTweetをすべて消す */ var clearTweetDom = function () { var parent = $("#tweetBox"); parent.empty(); }; 更新ボタンをおした時に呼ばれる関数 一旦Tweetをすべて消す処理 (すぐ下で実装) Tweetを取得して表示する関数 (すぐ後で実装) Tweetを全て消す処理 #tweetBox 要素の中身をすべて 消去
  • 134. /** * Home_timelineを取得する */ var getHomeTimeline = function () { var url = "https://api.twitter.com/1.1/statuses/home_timeline.json"; oauth.get(url, successGetHomeTimeline, failureHandler); }; ! /** * 取得したTweetsを画面に表示する */ var successGetHomeTimeline = function (data) { var parent = $("#tweetBox"); parent.text(data.text); }; タイムラインを取得する処理 2/2 FirefoxTwitter js app.js
  • 135. /** * Home_timelineを取得する */ var getHomeTimeline = function () { var url = "https://api.twitter.com/1.1/statuses/home_timeline.json"; oauth.get(url, successGetHomeTimeline, failureHandler); }; ! /** * 取得したTweetsを画面に表示する */ var successGetHomeTimeline = function (data) { var parent = $("#tweetBox"); parent.text(data.text); }; 何を書いたのか FirefoxTwitter js app.js Tweetを取得して 表示する関数 Twitter APIに アクセス 第二引数は成功時ハ ンドラ(すぐ下) TwitterAPIにアクセ ス成功時に呼ばれる #tweetBox要素に とってきた値を書込む
  • 136. アプリ更新 Twitter APIで取ってき たデータが表示される (中身はぐちゃぐちゃ)
  • 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を作る • タイムラインを取得する • ツイート機能を実装する • 画像付きツイート機能を実装する
  • 150. ツイート機能について • APIは以下のページから • https://dev.twitter.com/docs/api/1.1/post/statuses/update
  • 151. ツイート機能を実装 1/2 FirefoxTwitter js app.js ソースリンク window.onload = function () { ! ! $("#updateButton").click(function () { // TweetBoxの中身を空にする clearTweetDom(); // HomeTimelineを取得する getHomeTimeline(); }); $("#statusUpdateButton").click(function () { // 新規ツイート投稿を行う newTweetPost(); }); firstOAuthFunc(); }
  • 152. 何を書いたのか FirefoxTwitter js app.js window.onload = function () { !! $("#updateButton").click(function () { // TweetBoxの中身を空にする clearTweetDom(); // HomeTimelineを取得する getHomeTimeline(); }); $("#statusUpdateButton").click(function () { // 新規ツイート投稿を行う newTweetPost(); }); firstOAuthFunc(); } #statusUpdateButtonを おした時のハンドラ ツイートAPIを叩く関数 (すぐ後で実装)
  • 153. ツイート機能を実装 2/2 var newTweetPost = function () { var data; ! // テキストボックスの中身を取得 var statusText = document.getElementById("newTweetText").value; ! // dataオブジェクトに投稿内容を格納 data = { status:statusText }; // 投稿 oauth.post('https://api.twitter.com/1.1/statuses/update.json', data, successHandler, failureHandler); } ! var successHandler = function () { console.log("success"); } ソースリンクFirefoxTwitter js app.js
  • 154. 何を書いたのか FirefoxTwitter js app.js var newTweetPost = function () { var data; ! // テキストボックスの中身を取得 var statusText = document.getElementById("newTweetText").value; ! // dataオブジェクトに投稿内容を格納 data = { status:statusText }; // 投稿 oauth.post('https://api.twitter.com/1.1/statuses/update.json', data, successHandler, failureHandler); } ! var successHandler = function () { console.log("success"); } ツイートAPIを叩く関数 テキストボックスの 中身を取得 dataオブジェクトに 投稿内容を格納 投稿(API叩く) 成功時のハンドラ
  • 156. 2. Firefox OSでTwitter Clientを作る • Twitter Developers に登録 • OAuth関連処理を実装する • ツイッタークライアントぽいUIを作る • タイムラインを取得する • ツイート機能を実装する • 画像付きツイート機能を実装する
  • 157. 画像付きツイート機能について • APIは以下のページを参照 • https://dev.twitter.com/docs/api/1.1/post/statuses/update_with_media
  • 158. 画像付きツイート機能を実装 var newTweetPost = function () { var data; // テキストボックスの中身を取得 var statusText = document.getElementById("newTweetText").value; // fileの中身を確認 var file = document.querySelector("#file").files[0]; // fileに中身がない場合、通常投稿 if (typeof file === "undefined") { // dataオブジェクトに投稿内容を格納 data = { status:statusText }; // 投稿 oauth.post('https://api.twitter.com/1.1/statuses/update.json', data, this.successHandler, this.failureHandler); ! // fileに中身がある場合、画像つき投稿 } else { data = { "status":statusText, "media[]":file }; oauth.request({ method:"POST", url:"https://api.twitter.com/1.1/statuses/update_with_media.json", data:data }); } } ソースリンク FirefoxTwitter js app.js
  • 159. 何を書いたのか var newTweetPost = function () { var data; // テキストボックスの中身を取得 var statusText = document.getElementById("newTweetText").value; // fileの中身を確認 var file = document.querySelector("#file").files[0]; // fileに中身がない場合、通常投稿 if (typeof file === "undefined") { // dataオブジェクトに投稿内容を格納 data = { status:statusText }; // 投稿 oauth.post('https://api.twitter.com/1.1/statuses/update.json', data, this.successHandler, this.failureHandler); ! // fileに中身がある場合、画像つき投稿 } else { data = { "status":statusText, "media[]":file }; oauth.request({ method:"POST", url:"https://api.twitter.com/1.1/statuses/update_with_media.json", data:data }); } } ソースリンク FirefoxTwitter js app.js ファイルの添付を確認 画像添付がない場合の 処理(従来と同じ処理) 画像添付がある場合の処理 dataオブジェクトに 投稿内容を格納 (文言とファイル) 画像投稿APIを叩く
  • 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