• Save
Firefoxosハンズオン
Upcoming SlideShare
Loading in...5
×
 

Firefoxosハンズオン

on

  • 8,726 views

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

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

Statistics

Views

Total Views
8,726
Views on SlideShare
5,348
Embed Views
3,378

Actions

Likes
24
Downloads
55
Comments
0

21 Embeds 3,378

http://kznote.blogspot.jp 793
http://www.kisato.net 729
http://www.plaything.jp 574
https://cybozulive.com 222
https://twitter.com 202
http://osyyare.blogspot.jp 197
http://unsolublesugar.com 196
http://sosukeblog.com 176
http://m-shige1979.hatenablog.com 120
https://afxncv4z3cayeha7gxzm.cybozu-dev.com 114
http://kznote.blogspot.com 35
http://feedly.com 5
http://digg.com 4
http://webcache.googleusercontent.com 2
http://osyyare.blogspot.com 2
http://www.google.co.jp 2
http://translate.googleusercontent.com 1
http://kznote.blogspot.de 1
http://b.hatena.ne.jp 1
http://kznote.blogspot.tw 1
http://s.deeeki.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Firefoxosハンズオン Firefoxosハンズオン Presentation Transcript

  • Firefox OS ハンズオン 2014 / 5 / 31 for 名古屋つ部 ! @kassy_kz
  • 自己紹介 • 横浜 Android PF部によく出没 • Effective Android(共著) • 同人活動 (Tech-orz)
 - コミックマーケットC82, C84出展
 - Maker Faire Tokyo 2013 出展 名前 • @kassy_kz (かっしー) 特徴
  • 本日の進行 • Firefox OSと仲良くなる • Firefox OSでTwitterClientをつくる • アプリを公開する 対象者 • Firefox OS初心者 • Firefox OS初心者 内容 ハッシュタグ: #tsubufx
  • 事前準備
  • 事前準備は大丈夫ですか? • Firefoxブラウザのインストール • FirefoxOS Simulatorのインストール • Twitterのアカウントを取得しておく • エディタのインストール

  • Firefox ブラウザをインストール • http://www.mozilla.jp/ からFirefoxをダウンロード
  • シミュレーターをインストール • Firefoxを起動して
 メニュー -> 開発ツール-> アプリマネージャを選択
  • シミュレーターをインストール •シミュレータを起動-> 追加
  • シミュレーターをインストール
  • Firefox OSシミュレーター起動 • Firefox OS を起動してください
  • Firefox OSシミュレーター起動 • シミュレーターの起動が確認できればOK!
  • エディタについて • 入力コード補完機能 • シンタックスハイライト機能 • コード自動整形機能 以下の機能を備えたものを… なにそれ?って思った人は問答無用です! 大人しく Sublime Text 2 をインストールしてください http://www.sublimetext.com/2
  • package controlのインストール Sublime Text2をパワーアップ 1/2 [View]->[Show Console] コンソールに文字列(これ)を貼り付け ここに貼り付け 再起動
  • プラグインのインストール Sublime Text2をパワーアップ 2/2 Ctrl+Shift+P (Win) Command+Shift+P (Mac) 窓に[install]と打ち込み
 エンター 窓に[andyjs]と打ち込み
 エンター これでandyjsプラグイン がインストールされる ※他にもjQueryプラグインとかも
 インストールすると便利
  • 1. Firefox OSと仲良くなる • HTMLで Hello World • JavaScriptで Hello JS • cssを使う • Firefox OSらしいUIにする • 画面遷移を実装する • アプリ連携を体験する
  • 1. Firefox OSと仲良くなる • HTMLで Hello World • JavaScriptで Hello JS • cssを使う • Firefox OSらしいUIにする • 画面遷移を実装する • アプリ連携を体験する
  • HTMLで Hello World • フォルダを作ります
 HelloFirefox • テキストファイルを作ります
 HelloFirefox index.html
  • HTMLで Hello World • index.htmlに以下の記述を
 HelloFirefox index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello Firefox OS</title> </head> <body>
 <h1>Hello Firefox</h1> </body> </html> ソースリンク
  • コーディングのテク htmlとだけ打ち込んで tabキー押下 補完でひな形が! ※Sublime Text2の場合
  • • <(要素名)>〜</(要素名)>で要素を囲む構造 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello Firefox OS</title> </head> <body>
 <h1>Hello Firefox</h1> </body> </html> HelloFirefox index.html ナニを書いたのか ヘッダ ボディ <html>
  • HTMLで Hello World • manifest.webappを作成して以下の記述を... 
 HelloFirefox manifest.webapp { "name": "HelloFirefox", "description": "My First app", "launch_path": "/index.html", "icons": { "128": "/img/icons/icon_128.png" } } ソースリンク
  • HelloFirefox manifest.webapp { "name": "HelloFirefox", "description": "My First app", "launch_path": "/index.html", "icons": { "128": "/img/icons/icon_128.png" } } • アプリに関する情報を記述 何を書いたのか アプリに関する
 情報 アイコンのパス
  • シミュレーターへのアプリインストール パッケージアプリを追加 HelloFirefox
 を選択 更新ボタンを押す
  • アプリ実行
  • 申し訳ありませんが、 Firefox OSの最新版に対応するため、 現在資料のメンテナンスしております。