Firefox OS ハンズオン 
2014 / 5 / 31 
for 名古屋つ部 
! 
@kassy_kz
自己紹介 
名前 
• @kassy_kz (かっしー) 
• 横浜 Android PF部によく出没 
• Effective Android(共著) 
• 同人活動 (Tech-orz) 
- コミックマーケットC82, C84出展 
- ...
本日の進行 
対象者 
• Firefox OS初心者 
• Firefox OS初心者 
内容 
• Firefox OSと仲良くなる 
• Firefox OSでTwitterClientをつくる 
• アプリを公開する 
ハッシュタグ: ...
事前準備
事前準備は大丈夫ですか? 
• Firefoxブラウザのインストール 
• FirefoxOS Simulatorのインストール 
• Twitterのアカウントを取得しておく 
• エディタのインストール
Firefox ブラウザをインストール 
• http://www.mozilla.jp/ からFirefoxをダウンロード
シミュレーターをインストール 
• Firefoxを起動して 
メニュー -> 開発ツール-> アプリマネージャを選択
シミュレーターをインストール 
• シミュレータを起動-> 追加
シミュレーターをインストール
Firefox OSシミュレーター起動 
• Firefox OS を起動してください
Firefox OSシミュレーター起動 
• シミュレーターの起動が確認できればOK!
エディタについて 
以下の機能を備えたものを… 
• 入力コード補完機能 
• シンタックスハイライト機能 
• コード自動整形機能 
なにそれ?って思った人は問答無用です! 
大人しく Sublime Text 2 をインストールしてください...
Sublime Text2をパワーアップ 1/2 
package controlのインストール 
[View]->[Show Console] コンソールに文字列(これ)を貼り付け 
ここに貼り付け 
再起動
Sublime Text2をパワーアップ 2/2 
プラグインのインストール 
Ctrl+Shift+P (Win) 
Command+Shift+P (Mac) 
窓に[install]と打ち込み 
エンター 
窓に[andyjs]と打ち込み...
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" />...
コーディングのテク 
htmlとだけ打ち込んで 
※Sublime Text2の場合 
tabキー押下 
補完でひな形が!
ナニを書いたのか 
• <(要素名)>〜</(要素名)>で要素を囲む構造 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>Hello Firefox OS</...
HTMLで Hello World 
• manifest.webappを作成して以下の記述を... 
HelloFirefox manifest.webapp 
ソースリンク 
{ 
"name": "HelloFirefox", 
"des...
何を書いたのか 
• アプリに関する情報を記述 
HelloFirefox manifest.webapp 
{ 
"name": "HelloFirefox", 
"description": "My First app", 
"launch...
シミュレーターへのアプリインストール 
パッケージアプリを追加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-...
JavaScriptで Hello JS 
• index.htmlに追記 
HelloFirefox index.html 
スクリプトの 
パス追加 
ボタンと 
div要素追加 
id重要! 
後で出てきます 
<!DOCTYPE htm...
JavaScriptで Hello JS 
• jsフォルダ、app.jsファイルを追加する 
window.onload = function() { 
document.getElementById("firstButton").oncli...
コメントを書きましょう 
• htmlファイルの場合 
<!DOCTYPE html> 
<html> 
<body> 
• jsファイルの場合 
/* 
この部分はコメント 
*/ 
window.onload = function() { ...
何を書いたのか 
HelloFirefox js app.js 
div要素参照 
さっきのidを 
参照してる 
window.onload = function() { 
document.getElementById("firstButt...
window.onload = function() { 
ボタンクリック時の 
イベントを記述 
document.getElementById("firstButton").onclick = function() { 
document....
画面ロード時に 
実行する関数 
window.onload = function() { 
document.getElementById("firstButton").onclick = function() { 
document.get...
アプリ更新 
クリックで 
文字が表示
ライブラリを使う 
jQueryを落とすhttp://jquery.com/download/ 
Download the uncompressed, development jQuery 2.1.1 
ここに配置 
HelloFirefox ...
• index.htmlに追記 
HelloFirefox index.html 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>Hello Firefox ...
• index.htmlに追記 
HelloFirefox index.html 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>Hello Firefox ...
• app.jsを編集する 
HelloFirefox js app.js 
window.onload = function() { 
document.getElementById("firstButton").onclick = func...
何を書いたのか 
• app.jsを編集する 
HelloFirefox js app.js 
ボタン要素参照 
div要素参照 
jQueryを使う場合 
#(要素id名) 
.(要素クラス名) 
で参照する 
window.onload =...
アプリ更新 
同じ挙動をすれば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>H...
cssで装飾する 2/2 
• cssフォルダ、app.cssファイルを追加する 
HelloFirefox css app.css 
#firstDiv { 
margin-top:10px; 
font-size:32px; 
color:...
アプリ更新 
表示スタイル 
が変われば 
成功
開発ツールを使ってみる 
「デバッグ」
開発ツールを使ってみる 
インスペクタ 
部品の配置を確認できます 
スタイルエディタ 
cssのパラメータを変更 
デバッガ 
JavaScriptのデバッグ
1. Firefox OSと仲良くなる 
• HTMLで Hello World 
• JavaScriptで Hello JS 
• cssを使う 
• Firefox OSらしいUIにする 
• 画面遷移を実装する 
• アプリ連携を体験す...
Firefox OSらしいUIとは 
Building Blocksのページ 
http://buildingfirefoxos.com/ 
サンプルアプリを 
インストールしてみよう 
※シミュレーターで 
https://marketpla...
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=devic...
Building Blocks を取り込む 
コピーしたテキストを の<head>タグ内にペースト 
<head> 
<meta charset="utf-8" /> 
<title>Hello Firefox OS</title> 
<scr...
コーディングのテク 
インデントぐちゃぐちゃコードを全選択してから 
[Edit]->[Line]->[Reindent]で整形
アプリに手を加える 
HelloFirefox index.html 
<body> 
<section role="region"> 
<header class="fixed"> 
<h1>Hello Building Blocks</h1...
何を書いたのか 
HelloFirefox index.html 
らしいヘッダ 
らしいボタン 
<body> 
<section role="region"> 
<header class="fixed"> 
<h1>Hello Build...
アプリ更新 
らしいヘッダ 
らしいボタン
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>...
画面遷移成功?!
あれ. . . 
(戻れない)
一体どうすればいいんだ... 
• Building Blocksの画面遷移を真似する
<section role="region" data-position="current"> 
<header class="fixed"> 
<h1>Hello Building Blocks</h1> 
</header> 
<artic...
HelloFirefox js app.js 
ソースリンク 
まるパクする (2/2) 
window.onload = function() { 
$("#firstButton").click(function () { 
$("#fir...
ページ遷移無事成功
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"> 
<he...
アプリ連携(ブラウザ)を体験してみる 2/2 
ソースリンク 
HelloFirefox js app.js 
window.onload = function() { 
! 
! 
! 
$("#secondButton").click(fu...
window.onload = function() { 
! 
! 
$("#secondButton").click(function() { 
var myUrl = “(好きなURL)”; 
var activity = new Moz...
アプリ更新 
ブラウザ呼び出し成功
番外編 アプリジェネレータを使う 
• 環境準備 
• アプリひな形をダウンロード 
• ライブラリを追加 
• アプリ実装 
• アプリデプロイ 
※本番外編はコマンド操作が必要になります
環境準備 
• node.jsのインストール 
http://nodejs.org/ 
• voloのインストール(コマンドラインから) 
番外編 
$ npm install -g volo
アプリひな形ダウンロード 
番外編 
• (任意の場所にcdしてから) 
$ volo create myproject mozilla/mortar-app-stub 
• Firefox OSアプリ一式がダウンロードされる 
(アプリ本体は...
ライブラリを追加 
番外編 
$ 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...
アプリデプロイ 
番外編 
• 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 TwitterClie...
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を生成してブラウザで表示 
ユーザーがアプリ使用を許可、 
Twi...
ライブラリがないと死ぬ 
• 今回は 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> 
<scrip...
このライブラリ、 
そのままでは使えない 
• 理由 
XmlHttpRequestの 
クロスドメイン通信制約による
クロスドメイン制約とは 
ユーザー 
Twitter 
アプリ 
× 
両方と同時に通信できない 
! 
(やや語弊あり、正確には調べて下さい)
一般的なクロスドメイン回避はどうやってるか 
HTTP 
Request 
Http 
Response 
HTTPレスポンスのヘッダに 
特別な許可を含めることで 
同時通信を認める 
少なくともパッケージ型のアプリではこの手は使えない
クロスドメイン制約回避方法 
• XmlHttpRequestオブジェクト作成時 
に引数を追加 
XMLHttpRequest({mozSystem: true}); 
• manifestにパーミッションを追記 
"type": "priv...
Firefox OS アプリ種別について 
標準アプリ特権アプリ公認アプリ 
(privileged) (certified) 
特権アプリはFirefox 
Marketplaceによる通常 
よりも厳格なレビュー 
を経て承認される必要 
...
Firefox OS アプリ種別について 
標準アプリ特権アプリ公認アプリ 
(privileged) (certified) 
特権アプリはFirefox 
Marketplaceによる通常 
よりも厳格なレビュー 
を経て承認される必要 
...
XmlHttpRequestに引数追加 
FirefoxTwitter js lib jsOAuth-1.3.6.js 
} else if (typeof require !== 'undefined') { 
// CommonJS req...
Manifestにパーミッション追記 
FirefoxTwitter manifest.webapp 
{ 
"name": "FirefoxTwitter", 
"description": "My First Twitter Client"...
OAuth関連処理を実装する 1/4 
FirefoxTwitter js app.js ソースリンク 
// oauthオブジェクト 
var oauth; 
! 
window.onload = function () { 
! 
// O...
OAuth関連処理を実装する 2/4 
FirefoxTwitter js app.js 
/** 
* OAuth関連で最初に行う処理 
*/ 
var firstOAuthFunc = function () { 
! 
// 最初にOAu...
FirefoxTwitter js app.js 
/** 
* OAuth関連で最初に行う処理 
*/ 
var firstOAuthFunc = function () { 
! 
// 最初にOAuthオブジェクトに喰わせる値たち 
va...
/** 
* OAuth関連で最初に行う処理 
*/ 
var firstOAuthFunc = function () { 
! 
// 最初にOAuthオブジェクトに喰わせる値たち 
var config = { 
consumerKey:...
コールバック関数とは 
var successFetchRequstToken = function() {/* 成功した時の処理 */ } 
var failureFetchRequstToken = function() {/* 失敗した時...
OAuth関連処理を実装する 3/4 
FirefoxTwitter js app.js 
/** 
* 1の処理の成功時のコールバック関数 
*/ 
var successFetchRequestToken = function (authU...
何を書いたのか 
FirefoxTwitter js app.js 
/** 
* 1の処理の成功時のコールバック関数 
*/ 
var successFetchRequestToken = function (authUrl) { 
! 
/...
何を書いたのか 
FirefoxTwitter js app.js 
/** 
* 1の処理の成功時のコールバック関数 
*/ 
var successFetchRequestToken = function (authUrl) { 
! 
/...
/** 
* 5の処理の成功時のコールバック関数 
*/ 
var successFetchAccessToken = function () { 
alert("success oauth"); 
}; 
! 
/** 
* 各処理失敗時のコ...
何を書いたのか 
/** 
* 5の処理の成功時のコールバック関数 
*/ 
var successFetchAccessToken = function () { 
alert("success oauth"); 
}; 
! 
/** 
*...
アプリ更新 
アプリを切り替える 
Successとでれば成功 
ブラウザ起動 
アプリ起動
課題 
! 
このままでは毎回認証操作が必要 
1回目2回目3回目 
取得したアクセストークンを保存して 
2回目以降使えるようにしたい
var successFetchAccessToken = function () { 
// 取得したアクセストークンをWebStorageで保存する(次回以降のため) 
localStorage.setItem("accessTokenKe...
var successFetchAccessToken = function () { 
// 取得したアクセストークンをWebStorageで保存する(次回以降のため) 
localStorage.setItem("accessTokenKe...
アクセストークンを保存する処理を追加 2/2 
FirefoxTwitter js app.js 
var firstOAuthFunc = function () { 
! 
// OAuthのオブジェクトを作成 
oauth = new O...
アクセストークンを保存する処理を追加 2/2 
FirefoxTwitter js app.js 
var firstOAuthFunc = function () { 
! 
// OAuthのオブジェクトを作成 
oauth = new O...
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="ne...
何を書いたのか 
FirefoxTwitter index.html 
ソースリンク 
タイムラインページ<section role="region" data-position="current"> 
<header class="fixed...
何を書いたのか 
FirefoxTwitter index.html 
ソースリンク 
タイムラインページ<section role="region" data-position="current"> 
<header class="fixed...
<section role="region" id="newTweetSection" data-position="right"> 
<header class="fixed"> 
<a id="backButton" href="#"> 
...
FirefoxTwitter index.html 
<section role="region" id="newTweetSection" data-position="right"> 
<header class="fixed"> 
<a ...
FirefoxTwitter index.html 
<section role="region" id="newTweetSection" data-position="right"> 
<header class="fixed"> 
<a ...
画面遷移のスクリプトを実装 
FirefoxTwitter js app.js ソースリンク 
/** 
* 画面を開いた時に最初に処理される部分 
*/ 
window.onload = function () { 
// 画面遷移の処理 
...
何を書いたのか 
FirefoxTwitter js app.js 
/** 
* 画面を開いた時に最初に処理される部分 
*/ 
window.onload = function () { 
// 画面遷移の処理 
$("#newPostBu...
アプリ更新 
タイムライン画面投稿画面 
投稿画面へ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() { 
! 
! 
// 更新ボタンをおした時のハンドラ 
$("#updateButto...
何を書いたのか 
FirefoxTwitter js app.js 
window.onload = function() { 
! 
! 
// 更新ボタンをおした時のハンドラ 
$("#updateButton").click(functi...
/** 
* Home_timelineを取得する 
*/ 
var getHomeTimeline = function () { 
var url = "https://api.twitter.com/1.1/statuses/home_t...
/** 
* Home_timelineを取得する 
*/ 
var getHomeTimeline = function () { 
var url = "https://api.twitter.com/1.1/statuses/home_t...
アプリ更新 
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", 
"featur...
JSONデータをパースしてみる 
ソースリンクFirefoxTwitter js app.js 
/** 
* 取得したTweetsを画面に表示する 
*/ 
var successGetHomeTimeline = function (dat...
何を書いたのか 
FirefoxTwitter js app.js 
JSONフォーマットの 
データをパース 
/** 
* 取得したTweetsを画面に表示する 
*/ 
var successGetHomeTimeline = funct...
アプリ更新 
コンソールに 
つぶやきの主や内容 
が表示される
パースした結果を画面に表示 1/2 
ソースリンク 
FirefoxTwitter js app.js 
/** 
* 取得したTweetsを画面に表示する 
*/ 
var successGetHomeTimeline = function ...
パースした結果を画面に表示 2/2 
FirefoxTwitter js app.js 
var addTweetToDom = function (tweet) { 
var screenName = tweet.user.screen_na...
何を書いたのか 
FirefoxTwitter js app.js 
var addTweetToDom = function (tweet) { 
var screenName = tweet.user.screen_name; 
var n...
何を書いたのか 
FirefoxTwitter js app.js 
var $parent = $(“#tweetBox"); 
! 
var $li = $(“<li>").appendTo($parent); 
! 
var $div =...
結果、HTML要素はこうなる
スタイルシートのカスタマイズ例 
.name { 
margin-right: 5px; 
font-size: 16px; 
color: #333; 
} 
! 
.screenName { 
font-size: 12px; 
color...
アプリ更新 
タイムラインが整形 
されて表示される
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 () ...
何を書いたのか 
FirefoxTwitter js app.js 
window.onload = function () { 
!! 
$("#updateButton").click(function () { 
// TweetBoxの...
ツイート機能を実装 2/2 
var newTweetPost = function () { 
var data; 
! 
// テキストボックスの中身を取得 
var statusText = document.getElementById...
何を書いたのか 
FirefoxTwitter js app.js 
var newTweetPost = function () { 
var data; 
! 
// テキストボックスの中身を取得 
var statusText = doc...
アプリ更新 
つぶやいてみましょう
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("n...
何を書いたのか 
var newTweetPost = function () { 
var data; 
// テキストボックスの中身を取得 
var statusText = document.getElementById("newTwee...
アプリ更新 
画像投稿成功
3. アプリを公開する
アプリ公開してみる 
• 公開方法 
• 自前サーバーで公開(普通のWebと同じ) 
• インストール&ダウンロードさせることも可能 
• Firefox Marketplaceで公開 
• Host型(自前サーバーで提供) 
• Packag...
アプリ公開してみる 
※ Firefox marketplaceでpackage公開の場合 
zipで固めて... MarketPlaceでアップロード審査へ 
https://marketplace.firefox.com/developer...
お疲れ様でした 
今日のハンズオンは以上です。
今後の課題 
• 足りない機能を実装する 
• メンションラインの取得とか 
• ダイレクトメッセージの送受信とか 
• JavaScriptのコードをより洗練する 
• 現在の実装はグローバルを汚染しまくりであまりよろしくない... 
• g...
ご静聴ありがとうございました
Upcoming SlideShare
Loading in...5
×

Firefoxosハンズオン

11,637

Published on

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

Published in: Technology, News & Politics
0 Comments
30 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
11,637
On Slideshare
0
From Embeds
0
Number of Embeds
25
Actions
Shares
0
Downloads
55
Comments
0
Likes
30
Embeds 0
No embeds

No notes for slide

Firefoxosハンズオン

  1. 1. Firefox OS ハンズオン 2014 / 5 / 31 for 名古屋つ部 ! @kassy_kz
  2. 2. 自己紹介 名前 • @kassy_kz (かっしー) • 横浜 Android PF部によく出没 • Effective Android(共著) • 同人活動 (Tech-orz) - コミックマーケットC82, C84出展 - Maker Faire Tokyo 2013 出展 特徴
  3. 3. 本日の進行 対象者 • Firefox OS初心者 • Firefox OS初心者 内容 • Firefox OSと仲良くなる • Firefox OSでTwitterClientをつくる • アプリを公開する ハッシュタグ: #tsubufx
  4. 4. 事前準備
  5. 5. 事前準備は大丈夫ですか? • Firefoxブラウザのインストール • FirefoxOS Simulatorのインストール • Twitterのアカウントを取得しておく • エディタのインストール
  6. 6. Firefox ブラウザをインストール • http://www.mozilla.jp/ からFirefoxをダウンロード
  7. 7. シミュレーターをインストール • Firefoxを起動して メニュー -> 開発ツール-> アプリマネージャを選択
  8. 8. シミュレーターをインストール • シミュレータを起動-> 追加
  9. 9. シミュレーターをインストール
  10. 10. Firefox OSシミュレーター起動 • Firefox OS を起動してください
  11. 11. Firefox OSシミュレーター起動 • シミュレーターの起動が確認できればOK!
  12. 12. エディタについて 以下の機能を備えたものを… • 入力コード補完機能 • シンタックスハイライト機能 • コード自動整形機能 なにそれ?って思った人は問答無用です! 大人しく Sublime Text 2 をインストールしてください http://www.sublimetext.com/2
  13. 13. Sublime Text2をパワーアップ 1/2 package controlのインストール [View]->[Show Console] コンソールに文字列(これ)を貼り付け ここに貼り付け 再起動
  14. 14. Sublime Text2をパワーアップ 2/2 プラグインのインストール Ctrl+Shift+P (Win) Command+Shift+P (Mac) 窓に[install]と打ち込み エンター 窓に[andyjs]と打ち込み エンター これでandyjsプラグイン がインストールされる ※他にもjQueryプラグインとかも インストールすると便利
  15. 15. 1. Firefox OSと仲良くなる • HTMLで Hello World • JavaScriptで Hello JS • cssを使う • Firefox OSらしいUIにする • 画面遷移を実装する • アプリ連携を体験する
  16. 16. 1. Firefox OSと仲良くなる • HTMLで Hello World • JavaScriptで Hello JS • cssを使う • Firefox OSらしいUIにする • 画面遷移を実装する • アプリ連携を体験する
  17. 17. HTMLで Hello World • フォルダを作ります HelloFirefox • テキストファイルを作ります HelloFirefox index.html
  18. 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. 19. コーディングのテク htmlとだけ打ち込んで ※Sublime Text2の場合 tabキー押下 補完でひな形が!
  20. 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. 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. 22. 何を書いたのか • アプリに関する情報を記述 HelloFirefox manifest.webapp { "name": "HelloFirefox", "description": "My First app", "launch_path": "/index.html", "icons": { "128": "/img/icons/icon_128.png" } } アプリに関する 情報 アイコンのパス
  23. 23. シミュレーターへのアプリインストール パッケージアプリを追加HelloFirefox を選択 更新ボタンを押す
  24. 24. アプリ実行
  25. 25. 以降、アプリ更新するときは.... アプリタブから更新ボタン ちょっとめんどい 端末タブから停止して
  26. 26. アプリのアイコンを 設定しましょう • 自作するも良し • フリー素材を取ってきても良し • 本日は特別アイコンを贈呈 この位置に配置 こちらからDL HelloFirefox img icons icon_128.png
  27. 27. アプリ更新 アイコンが 変わればOK
  28. 28. 1. Firefox OSと仲良くなる • HTMLで Hello World • JavaScriptで Hello JS • cssを使う • Firefox OSらしいUIにする • 画面遷移を実装する • アプリ連携を体験する
  29. 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. 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. 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. 32. コメントを書きましょう • htmlファイルの場合 <!DOCTYPE html> <html> <body> • jsファイルの場合 /* この部分はコメント */ window.onload = function() { // この行はコメント document.getElementById(“**”).onclick = function() { document.getElementById(“**”).innerHTML = “**”; }; }; <!-- ここはコメント --> <h1>Hello Firefox</h1> </body> </html> <!— 〜 —>で 囲った部分はコメント /* 〜 */で 囲った部分はコメント // で始まる行は コメント
  33. 33. 何を書いたのか HelloFirefox js app.js div要素参照 さっきのidを 参照してる window.onload = function() { document.getElementById("firstButton").onclick = function() { document.getElementById("firstDiv").innerHTML = "JSは最高だぜ"; }; }; ボタン要素参照
  34. 34. window.onload = function() { ボタンクリック時の イベントを記述 document.getElementById("firstButton").onclick = function() { document.getElementById("firstDiv").innerHTML = "JSは最高だぜ"; }; }; 何を書いたのか HelloFirefox js app.js
  35. 35. 画面ロード時に 実行する関数 window.onload = function() { document.getElementById("firstButton").onclick = function() { document.getElementById("firstDiv").innerHTML = "JSは最高だぜ"; }; }; 何を書いたのか HelloFirefox js app.js
  36. 36. アプリ更新 クリックで 文字が表示
  37. 37. ライブラリを使う jQueryを落とすhttp://jquery.com/download/ Download the uncompressed, development jQuery 2.1.1 ここに配置 HelloFirefox js lib jquery-2.1.1.js
  38. 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. 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. 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. 41. 何を書いたのか • app.jsを編集する HelloFirefox js app.js ボタン要素参照 div要素参照 jQueryを使う場合 #(要素id名) .(要素クラス名) で参照する window.onload = function() { $("#firstButton").click(function() { $("#firstDiv").text("JSは最高だぜ"); }); };
  42. 42. アプリ更新 同じ挙動をすればOK
  43. 43. Sublime Text2の便利な使い方 フォルダを ドラッグ ファイル一覧が!
  44. 44. 1. Firefox OSと仲良くなる • HTMLで Hello World • JavaScriptで Hello JS • cssを使う • Firefox OSらしいUIにする • 画面遷移を実装する • アプリ連携を体験する
  45. 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. 46. cssで装飾する 2/2 • cssフォルダ、app.cssファイルを追加する HelloFirefox css app.css #firstDiv { margin-top:10px; font-size:32px; color:#ff0000; } ソースリンク div要素参照 (idで参照) ※cssでググって、いろんなパラメータをいじってみて下さい
  47. 47. アプリ更新 表示スタイル が変われば 成功
  48. 48. 開発ツールを使ってみる 「デバッグ」
  49. 49. 開発ツールを使ってみる インスペクタ 部品の配置を確認できます スタイルエディタ cssのパラメータを変更 デバッガ JavaScriptのデバッグ
  50. 50. 1. Firefox OSと仲良くなる • HTMLで Hello World • JavaScriptで Hello JS • cssを使う • Firefox OSらしいUIにする • 画面遷移を実装する • アプリ連携を体験する
  51. 51. Firefox OSらしいUIとは Building Blocksのページ http://buildingfirefoxos.com/ サンプルアプリを インストールしてみよう ※シミュレーターで https://marketplace.firefox.com/app/building-blocks
  52. 52. Building Blocksライブラリを入手 http://buildingfirefoxos.com/
  53. 53. Building Blocksを使う準備 style, style_unstable, icons, *cssを ! すべて 直下にコピーする コピー HelloFirefox
  54. 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. 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 ソースリンク
  56. 56. コーディングのテク インデントぐちゃぐちゃコードを全選択してから [Edit]->[Line]->[Reindent]で整形
  57. 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. 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>
  59. 59. アプリ更新 らしいヘッダ らしいボタン
  60. 60. 1. Firefox OSと仲良くなる • HTMLで Hello World • JavaScriptで Hello JS • cssを使う • Firefox OSらしいUIにする • 画面遷移を実装する • アプリ連携を体験する
  61. 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> (リンク貼りゃいいんだよ)
  62. 62. 画面遷移成功?!
  63. 63. あれ. . . (戻れない)
  64. 64. 一体どうすればいいんだ... • Building Blocksの画面遷移を真似する
  65. 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. 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'; }); };
  67. 67. ページ遷移無事成功
  68. 68. 1. Firefox OSと仲良くなる • HTMLで Hello World • JavaScriptで Hello JS • cssを使う • Firefox OSらしいUIにする • 画面遷移を実装する • アプリ連携を体験する
  69. 69. アプリ連携とは... AndroidでいうIntentみたいなもの 連携先アプリとは... ・ブラウザ ・電話 ・カメラ  等...
  70. 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. 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. 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 ブラウザを 呼び出す コード
  73. 73. アプリ更新 ブラウザ呼び出し成功
  74. 74. 番外編 アプリジェネレータを使う • 環境準備 • アプリひな形をダウンロード • ライブラリを追加 • アプリ実装 • アプリデプロイ ※本番外編はコマンド操作が必要になります
  75. 75. 環境準備 • node.jsのインストール http://nodejs.org/ • voloのインストール(コマンドラインから) 番外編 $ npm install -g volo
  76. 76. アプリひな形ダウンロード 番外編 • (任意の場所にcdしてから) $ volo create myproject mozilla/mortar-app-stub • Firefox OSアプリ一式がダウンロードされる (アプリ本体はwww配下)
  77. 77. ライブラリを追加 番外編 $ cd myproject $ volo add jquery • www/js/lib 配下に自動的にライブラリがインストールされる
  78. 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. 79. アプリデプロイ 番外編 • myproject配下で $ volo serve • シミュレータのブラウザで http://localhost:8008 にアクセス アプリ更新の際、いちいちアンインストールすることなく 更新ボタン一つで動作確認が出来るようになります
  80. 80. 2. Firefox OSでTwitter Clientを作る • Twitter Developers に登録 • OAuth関連処理を実装する • ツイッタークライアントぽいUIを作る • タイムラインを取得する • ツイート機能を実装する • 画像付きツイート機能を実装する
  81. 81. 新規プロジェクトで開始 • 新規フォルダを作ります  HelloFirefox をまるコピします HelloFirefox コピーFirefoxTwitter
  82. 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. 83. 2. Firefox OSでTwitter Clientを作る • Twitter Developers に登録 • OAuth関連処理を実装する • ツイッタークライアントぽいUIを作る • タイムラインを取得する • ツイート機能を実装する • 画像付きツイート機能を実装する
  84. 84. Twitter Developersにアプリを登録 https://apps.twitter.com/ Sign inをクリックCreate New Appをクリック
  85. 85. アプリ名 アプリの説明 サイトURL 持ってなければhttp://example.comとでも (空白でOK) チェック 確定 アプリ情報を入力 規約を読んで
  86. 86. アプリ名について注意 以下の名前は使えないので注意 • 既存のTwitterアプリと被る名前 • [Twitter] という文字列を含む名前
  87. 87. APIキー発行 後でつかいます 他人には教えない
  88. 88. 設定変更しておく Read and Writeに この変更をしないとWrite(つぶやき)ができない
  89. 89. 2. Firefox OSでTwitter Clientを作る • Twitter Developers に登録 • OAuth関連処理を実装する • ツイッタークライアントぽいUIを作る • タイムラインを取得する • ツイート機能を実装する • 画像付きツイート機能を実装する
  90. 90. OAuthについてさらっとおさらい ユーザー Twitter アプリ 認証 認証 パスワード アプリ使用許可 使う (パスワード教えない) 機能呼び出し
  91. 91. OAuthのワークフロー ユーザーアプリTwitter Consumer Keyを使って、 リクエストトークンを取得 リクエストトークンからユーザー許可を 求めるURLを生成してブラウザで表示 ユーザーがアプリ使用を許可、 TwitterはPINを表示(ユーザー認証あり) ユーザーがアプリにPINを入力 Consumer Key, リクエストトークン、 PINを使ってアクセストークンを取得 以後、アクセストークンを使って Twitterの各種機能を呼び出す 1. 2. 3. 4. 5. 6.
  92. 92. ライブラリがないと死ぬ • 今回は jsOAuth を使わせていただく https://github.com/bytespider/jsOAuth
  93. 93. ライブラリダウンロード https://github.com/bytespider/jsOAuth/tree/master/dist この位置に配置 FirefoxTwitter js lib jsOAuth-1.3.6.js
  94. 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. 95. このライブラリ、 そのままでは使えない • 理由 XmlHttpRequestの クロスドメイン通信制約による
  96. 96. クロスドメイン制約とは ユーザー Twitter アプリ × 両方と同時に通信できない ! (やや語弊あり、正確には調べて下さい)
  97. 97. 一般的なクロスドメイン回避はどうやってるか HTTP Request Http Response HTTPレスポンスのヘッダに 特別な許可を含めることで 同時通信を認める 少なくともパッケージ型のアプリではこの手は使えない
  98. 98. クロスドメイン制約回避方法 • XmlHttpRequestオブジェクト作成時 に引数を追加 XMLHttpRequest({mozSystem: true}); • manifestにパーミッションを追記 "type": "privileged", "permissions": { "systemXHR": { "description": "for OAuth" } } ※Firefox OSの場合
  99. 99. Firefox OS アプリ種別について 標準アプリ特権アプリ公認アプリ (privileged) (certified) 特権アプリはFirefox Marketplaceによる通常 よりも厳格なレビュー を経て承認される必要 があります。 認定アプリ作成にはOEM、 キャリアの承認が必要とな るため、一般のアプリ開発 者は本アプリを作成するこ とはできません。 特別な権限を必要と しない 標準のアプリです。 (つまり絶望)
  100. 100. Firefox OS アプリ種別について 標準アプリ特権アプリ公認アプリ (privileged) (certified) 特権アプリはFirefox Marketplaceによる通常 よりも厳格なレビュー を経て承認される必要 があります。 認定アプリ作成にはOEM、 キャリアの承認が必要とな るため、一般のアプリ開発 者は本アプリを作成するこ とはできません。 特別な権限を必要と しない 標準のアプリです。 (つまり絶望)
  101. 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. 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. 103. OAuth関連処理を実装する 1/4 FirefoxTwitter js app.js ソースリンク // oauthオブジェクト var oauth; ! window.onload = function () { ! // OAuth関連の処理を開始する firstOAuthFunc(); } ! OAuth処理を開始する関数 (すぐ後で実装)
  104. 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. 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. 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. 107. コールバック関数とは var successFetchRequstToken = function() {/* 成功した時の処理 */ } var failureFetchRequstToken = function() {/* 失敗した時の処理 */ } oauth.fetchRequestToken(successFetchRequestToken, failureHandler); あなたの プログラム ライブラリ ハンドラを渡す ライブラリが処理 ! ハンドラを呼び出す ハンドラ定義 ハンドラ渡す
  108. 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. 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. 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. 111. /** * 5の処理の成功時のコールバック関数 */ var successFetchAccessToken = function () { alert("success oauth"); }; ! /** * 各処理失敗時のコールバック関数 */ var failureHandler = function (data) { alert("failure"); }; OAuth関連処理を実装する 4/4 FirefoxTwitter js app.js
  112. 112. 何を書いたのか /** * 5の処理の成功時のコールバック関数 */ var successFetchAccessToken = function () { alert("success oauth"); }; ! /** * 各処理失敗時のコールバック関数 */ var failureHandler = function (data) { alert("failure"); }; FirefoxTwitter js app.js 5の処理が成功 したときのハンドラ アラートを出す処理 (引数は出力文字) 失敗ハンドラ (1,5の処理で共通)
  113. 113. アプリ更新 アプリを切り替える Successとでれば成功 ブラウザ起動 アプリ起動
  114. 114. 課題 ! このままでは毎回認証操作が必要 1回目2回目3回目 取得したアクセストークンを保存して 2回目以降使えるようにしたい
  115. 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. 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. 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. 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. 119. 2. Firefox OSでTwitter Clientを作る • Twitter Developers に登録 • OAuth関連処理を実装する • ツイッタークライアントぽいUIを作る • タイムラインを取得する • ツイート機能を実装する • 画像付きツイート機能を実装する
  120. 120. ツイッタークライアントぽいUIの設計 タイムライン画面投稿画面 投稿画面へTL画面へ投稿 続き取得TL更新 UI部品はすべてBuilding Blocksの流用です
  121. 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. 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. 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. 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. 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. 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. 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. 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(); }; 画面遷移の 処理
  129. 129. アプリ更新 タイムライン画面投稿画面 投稿画面へTL画面へ
  130. 130. 2. Firefox OSでTwitter Clientを作る • Twitter Developers に登録 • OAuth関連処理を実装する • ツイッタークライアントぽいUIを作る • タイムラインを取得する • ツイート機能を実装する • 画像付きツイート機能を実装する
  131. 131. タイムラインを取得するには • TwitterのAPI情報を確認 https://dev.twitter.com/docs/api/1.1/get/statuses/home_timeline
  132. 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. 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. 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. 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. 136. アプリ更新 Twitter APIで取ってき たデータが表示される (中身はぐちゃぐちゃ)
  137. 137. レスポンスデータの解読 https://dev.twitter.com/docs/api/1.1/get/statuses/home_timeline レスポンスデータの フォーマットはJSON フォーマットの詳細
  138. 138. JSONとは • JavaScript Object Notationの略 • JavaScriptでお手軽にパースできる データ記述言語 sample {person:[{ "name": "kassy_kz", "feature" : "健全" },{ "name": "androidsola", "feature" : "変態" }]} 名前:値 のセットをカンマ区切りで記述 { 〜 } で一つのオブジェクト [ 〜 ] で一つの配列
  139. 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. 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); } }; パースしてできたオブジェクト から値を取り出し 取り出したオブジェクトを表示 (コンソールに)
  141. 141. アプリ更新 コンソールに つぶやきの主や内容 が表示される
  142. 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. 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. 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. 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” ツイート本文を格納
  146. 146. 結果、HTML要素はこうなる
  147. 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
  148. 148. アプリ更新 タイムラインが整形 されて表示される
  149. 149. 2. Firefox OSでTwitter Clientを作る • Twitter Developers に登録 • OAuth関連処理を実装する • ツイッタークライアントぽいUIを作る • タイムラインを取得する • ツイート機能を実装する • 画像付きツイート機能を実装する
  150. 150. ツイート機能について • APIは以下のページから • https://dev.twitter.com/docs/api/1.1/post/statuses/update
  151. 151. ツイート機能を実装 1/2 FirefoxTwitter js app.js ソースリンク window.onload = function () { ! ! $("#updateButton").click(function () { // TweetBoxの中身を空にする clearTweetDom(); // HomeTimelineを取得する getHomeTimeline(); }); $("#statusUpdateButton").click(function () { // 新規ツイート投稿を行う newTweetPost(); }); firstOAuthFunc(); }
  152. 152. 何を書いたのか FirefoxTwitter js app.js window.onload = function () { !! $("#updateButton").click(function () { // TweetBoxの中身を空にする clearTweetDom(); // HomeTimelineを取得する getHomeTimeline(); }); $("#statusUpdateButton").click(function () { // 新規ツイート投稿を行う newTweetPost(); }); firstOAuthFunc(); } #statusUpdateButtonを おした時のハンドラ ツイートAPIを叩く関数 (すぐ後で実装)
  153. 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. 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叩く) 成功時のハンドラ
  155. 155. アプリ更新 つぶやいてみましょう
  156. 156. 2. Firefox OSでTwitter Clientを作る • Twitter Developers に登録 • OAuth関連処理を実装する • ツイッタークライアントぽいUIを作る • タイムラインを取得する • ツイート機能を実装する • 画像付きツイート機能を実装する
  157. 157. 画像付きツイート機能について • APIは以下のページを参照 • https://dev.twitter.com/docs/api/1.1/post/statuses/update_with_media
  158. 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. 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を叩く
  160. 160. アプリ更新 画像投稿成功
  161. 161. 3. アプリを公開する
  162. 162. アプリ公開してみる • 公開方法 • 自前サーバーで公開(普通のWebと同じ) • インストール&ダウンロードさせることも可能 • Firefox Marketplaceで公開 • Host型(自前サーバーで提供) • Package型(アプリを固めてMarketplaceに送る)
  163. 163. アプリ公開してみる ※ Firefox marketplaceでpackage公開の場合 zipで固めて... MarketPlaceでアップロード審査へ https://marketplace.firefox.com/developers/submit/
  164. 164. お疲れ様でした 今日のハンズオンは以上です。
  165. 165. 今後の課題 • 足りない機能を実装する • メンションラインの取得とか • ダイレクトメッセージの送受信とか • JavaScriptのコードをより洗練する • 現在の実装はグローバルを汚染しまくりであまりよろしくない... • githubに整形したコードを上げたので参考にして下さい https://github.com/kassy-kz/FirefoxOS_TwitterClient_Sample
  166. 166. ご静聴ありがとうございました

×