Successfully reported this slideshow.

ぶっとびケータイ+Firefox OS Apps

1,083 views

Published on

ぶっとびケータイでやったFirefoxOSアプリをとりあえず完成させるワークショップの資料

Published in: Self Improvement
  • Be the first to comment

ぶっとびケータイ+Firefox OS Apps

  1. 1. ぶっとびケータイ +Firefox OS Apps || ? EnsekiTT
  2. 2. GoalFirefox OSのアプリをケータイに入れてハック
  3. 3. なにそれ Firefox OSオープンソースWeb技術消費者の自由デバイスに依存しない
  4. 4. 必要なものFirefox OS ケータイ(Androidでもちょっと触れます)パソコン(Linux | OS X | Windows) 最新版のFirefoxを!WiFi(会場が用意しています)
  5. 5. では実機を…
  6. 6. 置いといて、まずシミュレータを使って開発しましょう
  7. 7. Firefox OS シミュレータ Firefox OS シミュレータ ? (r2d2b2g) Firefoxのアドオン Firefox OSのフリをしてくれる https://addons.mozilla.org/ja/ firefox/addon/firefox-os- simulator/
  8. 8. Firefoxでここをクリック
  9. 9. ダウンロードアドオンのインストールFirefox OS Simulator
  10. 10. シミュレータの起動Firefoxの「ツール→Web開発→Firefox OS Simulator」起動スイッチ起動しましょう!
  11. 11. 起動しました!引っ張りあげて色々触ってみましょう
  12. 12. シミュレータの 操作方法左クリック:タップ右クリック:タップ長押しPgUp・PgDn/alt+fn+↑・alt+fn+↓:音量Endキー/fn+→:スリープHomeキー/fn+←:タスク切り替え
  13. 13. では!アプリ開発を始めよう
  14. 14. アプリ置き場を作る新しいフォルダの作成Windows: C:¥fxapps/myfirstapp/osx/Linux...: ~/fxapps/myfirstapp/
  15. 15. 宣言しようエディタを開く Windows:notepad++, Mac:mi, etc...マニフェスト(宣言)ファイルを作る C:¥fxapps/myfirstapp/manifest.webapp ~/fxapps/myfirstapp/manifest.webapp**保存時の注意** ファイルの種類:すべてのファイル 文字コード: UTF-8
  16. 16. manifest.webapp に書き込む{        "name":  "マイアプリ",        "description":  "私の最初のアプリ",        "launch_path":  "/index.html",        "icons":  {                "128":  "/img/icon-­‐128.png"        },        "developer":  {                "name":  "私の名前",                "url":  "http://私のサイト.org"        },        "default_locale":  "jp"}
  17. 17. manifest.webapp コード 日本語訳{    "name":  "マイアプリ", {    "アプリの名前":  "マイアプリ",    "description":  "私の最初のアプリ",    "どんなアプリか":  "私の最初のアプリ",    "launch_path":  "/index.html",    "どこにあるのか":  "/index.html",    "icons":  {    "アイコンは":  {          "128":  "/img/icon-­‐128.png"        "128":  "/img/icon-­‐128.png"    },    },    "developer":  {    "誰が作ったの":  {        "name":  "私の名前",        "名前":  "私の名前",        "あなたのサイト":"http://私のサイト"        "url":  "http://私のサイト"    },    },    "どこの国か":  "jp"    "default_locale":  "jp" }}
  18. 18. アイコンを用意するアイコンをここに置きますC:¥fxapps/myfirstapp/img/icon-128.png~/fxapps/myfirstapp/img/icon-128.png 128 128pxの画像を用意しよう Windowsならペイント OSXならプレビュー で画像のサイズを調整できるよ
  19. 19. 中身を作ろうエディタを開くインデックスファイルを作る C:¥fxapps/myfirstapp/index.html ~/fxapps/myfirstapp/index.html**保存時の注意** ファイルの種類:すべてのファイル 文字コード: UTF-8
  20. 20. index.html<!DOCTYPE  html><html>        <head>                <meta  charset=UTF-­‐8>                <title>  アプリ名  </title>        </head>        <body>                My  First  App!!  It’s  Works!!!        </body></html>
  21. 21. index.html コード 日本語訳<!DOCTYPE  html> <ブラウザで見られるすごいテキストだよ><html> <すごいテキスト始まり>        <head>    <最初に言うべきこと始まり>                <meta  charset=UTF-­‐8>        <どんな言葉も表示するよ、日本語もね>                <title>  アプリ名  </title>        <題名始まり>  アプリ名  <題名終わり>        </head>    <最初に言うべきことは終わり>          <body>    <内容の始まり>        私の最初のアプリです.                私の最初のアプリです.        </body>    <内容の終わり></html> <すごいテキスト終わり>
  22. 22. シミュレータに読み込み ここをクリック
  23. 23. 自分のアプリのところからmanifest.webappを選択
  24. 24. 読み込まれたらシミュレータを起動しましょう! 確認 起動! Add Directoryでは自動で起動します 二回目以降はこの方法で…
  25. 25. シミュレータ起動引っ張りあげて
  26. 26. アプリを選んで起動 起動!
  27. 27. 感動の初アプリ起動 実は今みなさんここですよね
  28. 28. Finishここを押すと止まる
  29. 29. 少し変えたら… index.html<!DOCTYPE  html><html>        <head>                <meta  charset=UTF-­‐8>                <title>  アプリ名  </title>        </head>        <body>                私の最初のアプリですか?        </body></html>
  30. 30. 変わりましたね!
  31. 31. え、パソコンじゃんそうですね…ここはぶっとびケータイ!!じゃあケータイに入れてみよう
  32. 32. ぶっとびケータイ用の マーケットプレイスhttp://buttobi.y-misc.org @y_systemさんが一晩で作ってくれました
  33. 33. Future Work絵を表示してみたり…速さとかとってみたり…時計とかつけてみたり…電話をかけられたらもうそれはケータイ…
  34. 34. アプリが完成しましたね ☕Coffee Break
  35. 35. Advance Course
  36. 36. ぶっとび時計JavaScriptに挑戦!
  37. 37. JavaScript?Firefox(パソコンのブラウザ)で普段実はお世話になってるゲームだったり時計だったり…FirefoxOSのアプリはほとんどJavaScriptが使われる! すごいやつなんです!
  38. 38. では、始めましょう
  39. 39. アプリ置き場を作る新しいフォルダの作成Windows: C:¥fxapps/imatime/osx/Linux...: ~/fxapps/imatime/
  40. 40. 宣言しようエディタを開くマニフェスト(宣言)ファイルを作る C:¥fxapps/imatime/manifest.webapp ~/fxapps/imatime/manifest.webapp**保存時の注意** ファイルの種類:すべてのファイル 文字コード: UTF-8
  41. 41. manifest.webapp に書き込む{   "name":  "ぶっとび時計",   "description":  "ぶっとび、実はただの時計",   "launch_path":  "/index.html",   "icons":  {     "128":  "/img/icon-­‐128.png"   },   "developer":  {     "name":  "時計職人",     "url":  "http://clock.maker/"   },   "default_locale":  "jp"}
  42. 42. アイコンを用意するアイコンをここに置きます(今回は同じの)C:¥fxapps/imatime/img/icon-128.png~/fxapps/imatime/img/icon-128.png
  43. 43. 中身を作ろうエディタを開くインデックスファイルを作る C:¥fxapps/imatime/index.html ~/fxapps/imatime/index.html**保存時の注意** ファイルの種類:すべてのファイル 文字コード: UTF-8
  44. 44. index.html<!DOCTYPE  html><html  lang="ja">   <head>     <meta  charset=UTF-­‐8>     <title>ぶっとび時計</title>     <script  type="text/javascript"  src="time.js"></script>   </head>   <body>     <h1>ぶっとびただの時計</h1>     <div  id="content"></div>   </body></html>
  45. 45. 時計システムを作ろうエディタを開くJavaScriptファイルを作る C:¥fxapps/imatime/time.js ~/fxapps/imatime/time.js**保存時の注意** ファイルの種類:すべてのファイル 文字コード: UTF-8
  46. 46. time.jssetInterval  (  timeoutput(),1000  );  function  timeoutput(){        now  =  new  Date()  ;        h  =  now.getHours();        mi  =  now.getMinutes();        s  =  now.getSeconds();          document.getElementById("content").innerHTML  =     "<span  id="+  "time"  +">"  +  h  +  ":"  +  mi  +  ":"  +  s  +"</span>";}
  47. 47. time.js コード 日本語訳 何ミリ秒おきに仕事するか  setInterval  (  timeoutput(),1000  );   (  timeoutput(),1000  );function  timeoutput(){          now  =  new  Date()  ; 仕事  timeoutput(){        h  =  now.getHours();        now  に  新しく今の時間情報を追加  ;        mi  =  now.getMinutes();        h  に今の時間数を追加;        s  =  now.getSeconds();          mi  に今の分数を追加;        document.getElementById("content")        s  に今の秒数を追加;        .innerHTML  =       "<span  id="+  "time"  +">"        "content"に埋め込みます  =              +  h  +  ":"  +  mi  +  ":"  +  s  + "<span>要素に時間と分と秒を表示するよ";              "</span>";} }
  48. 48. シミュレータに読み込み ここをクリック
  49. 49. 1秒ずつ時間が更新されます
  50. 50. よくあるトラブルへのトラブルシューティングアプリの中身を変えたのに適用されないシミュレータを終了してupdateしてみる自分のアプリが複数出来ている可能性があるので探してみる(次のページにあったりする)
  51. 51. コードを間違えた時にそれに気づくための手順Console を有効にするシミュレータを起動するConsole のログを消す自分のアプリを起動するConsole のメッセージを確認して何行目の何が不味いのか確認する
  52. 52. ReferencesWebAPI https://wiki.mozilla.org/WebAPIFirefoxOSに関するWiki https://github.com/dynamis/firefoxos/wikiFirefoxOSシミュレータ https://github.com/dynamis/firefoxos/wiki/simulatorHTMLとかとか http://www.htmq.com/ ぶっとびケータイ+Firefox OS Apps by EnsekiTT is licensed under a Creative Commons 表示 - 継承 3.0 非移植 License.

×