Your SlideShare is downloading. ×
0
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Firefoxosハンズオン
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Firefoxosハンズオン

10,928

Published on

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

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

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

No Downloads
Views
Total Views
10,928
On Slideshare
0
From Embeds
0
Number of Embeds
23
Actions
Shares
0
Downloads
55
Comments
0
Likes
31
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 4. 事前準備
  • 5. 事前準備は大丈夫ですか? • Firefoxブラウザのインストール • FirefoxOS Simulatorのインストール • Twitterのアカウントを取得しておく • エディタのインストール
  • 6. Firefox ブラウザをインストール • http://www.mozilla.jp/ からFirefoxをダウンロード
  • 7. シミュレーターをインストール • Firefoxを起動して メニュー -> 開発ツール-> アプリマネージャを選択
  • 8. シミュレーターをインストール • シミュレータを起動-> 追加
  • 9. シミュレーターをインストール
  • 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" } } アプリに関する 情報 アイコンのパス
  • 23. シミュレーターへのアプリインストール パッケージアプリを追加HelloFirefox を選択 更新ボタンを押す
  • 24. アプリ実行
  • 25. 以降、アプリ更新するときは.... アプリタブから更新ボタン ちょっとめんどい 端末タブから停止して
  • 26. アプリのアイコンを 設定しましょう • 自作するも良し • フリー素材を取ってきても良し • 本日は特別アイコンを贈呈 この位置に配置 こちらからDL HelloFirefox img icons icon_128.png
  • 27. アプリ更新 アイコンが 変わればOK
  • 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
  • 36. アプリ更新 クリックで 文字が表示
  • 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は最高だぜ"); }); };
  • 42. アプリ更新 同じ挙動をすればOK
  • 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でググって、いろんなパラメータをいじってみて下さい
  • 47. アプリ更新 表示スタイル が変われば 成功
  • 48. 開発ツールを使ってみる 「デバッグ」
  • 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
  • 52. Building Blocksライブラリを入手 http://buildingfirefoxos.com/
  • 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 ソースリンク
  • 56. コーディングのテク インデントぐちゃぐちゃコードを全選択してから [Edit]->[Line]->[Reindent]で整形
  • 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>
  • 59. アプリ更新 らしいヘッダ らしいボタン
  • 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> (リンク貼りゃいいんだよ)
  • 62. 画面遷移成功?!
  • 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'; }); };
  • 67. ページ遷移無事成功
  • 68. 1. Firefox OSと仲良くなる • HTMLで Hello World • JavaScriptで Hello JS • cssを使う • Firefox OSらしいUIにする • 画面遷移を実装する • アプリ連携を体験する
  • 69. アプリ連携とは... AndroidでいうIntentみたいなもの 連携先アプリとは... ・ブラウザ ・電話 ・カメラ  等...
  • 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 ブラウザを 呼び出す コード
  • 73. アプリ更新 ブラウザ呼び出し成功
  • 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] という文字列を含む名前
  • 87. APIキー発行 後でつかいます 他人には教えない
  • 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
  • 93. ライブラリダウンロード https://github.com/bytespider/jsOAuth/tree/master/dist この位置に配置 FirefoxTwitter js lib jsOAuth-1.3.6.js
  • 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の処理で共通)
  • 113. アプリ更新 アプリを切り替える Successとでれば成功 ブラウザ起動 アプリ起動
  • 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を作る • タイムラインを取得する • ツイート機能を実装する • 画像付きツイート機能を実装する
  • 120. ツイッタークライアントぽいUIの設計 タイムライン画面投稿画面 投稿画面へTL画面へ投稿 続き取得TL更新 UI部品はすべてBuilding Blocksの流用です
  • 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(); }; 画面遷移の 処理
  • 129. アプリ更新 タイムライン画面投稿画面 投稿画面へTL画面へ
  • 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で取ってき たデータが表示される (中身はぐちゃぐちゃ)
  • 137. レスポンスデータの解読 https://dev.twitter.com/docs/api/1.1/get/statuses/home_timeline レスポンスデータの フォーマットはJSON フォーマットの詳細
  • 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); } }; パースしてできたオブジェクト から値を取り出し 取り出したオブジェクトを表示 (コンソールに)
  • 141. アプリ更新 コンソールに つぶやきの主や内容 が表示される
  • 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” ツイート本文を格納
  • 146. 結果、HTML要素はこうなる
  • 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. アプリ更新 タイムラインが整形 されて表示される
  • 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叩く) 成功時のハンドラ
  • 155. アプリ更新 つぶやいてみましょう
  • 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を叩く
  • 160. アプリ更新 画像投稿成功
  • 161. 3. アプリを公開する
  • 162. アプリ公開してみる • 公開方法 • 自前サーバーで公開(普通のWebと同じ) • インストール&ダウンロードさせることも可能 • Firefox Marketplaceで公開 • Host型(自前サーバーで提供) • Package型(アプリを固めてMarketplaceに送る)
  • 163. アプリ公開してみる ※ Firefox marketplaceでpackage公開の場合 zipで固めて... MarketPlaceでアップロード審査へ https://marketplace.firefox.com/developers/submit/
  • 164. お疲れ様でした 今日のハンズオンは以上です。
  • 165. 今後の課題 • 足りない機能を実装する • メンションラインの取得とか • ダイレクトメッセージの送受信とか • JavaScriptのコードをより洗練する • 現在の実装はグローバルを汚染しまくりであまりよろしくない... • githubに整形したコードを上げたので参考にして下さい https://github.com/kassy-kz/FirefoxOS_TwitterClient_Sample
  • 166. ご静聴ありがとうございました

×