狠狠撸

狠狠撸Share a Scribd company logo
ずーるらんなー
2014/03/15
Ryoma Sasaki
 自己紹介
?株式会社ブリリアントサービス所属
?組み込みエンジニア
?マイコン、Linux 、Androidなど
?趣味:格闘技
    最近、柔術始めました
佐々木 良馬 / @s53forco
 
アジェンダ
?なぜGeckoなのか?
?XULRunnerの前に
?XULRunnerとは
?XULRunnerを使った
 デスクトップアプリケーションを作成しよう
 
なぜGeckoなのか?
 
説明するには、まずFirefox OSの
アーキテクチャを知る必要がある
Firefox OS アーキテクチャ
3つのレイヤーに分かれる
Gaia
UIを担当
JavaScript、HTML、CSSで記述されたWebアプリで構成
Gecko
Webアプリの実行環境
JavaScript、HTML、CSSなどを解釈して描画を行う
Gonk
下層レベルのOS
Linuxカーネル、HAL層で構成
Firefox OS アーキテクチャ
3つのレイヤーに分かれる
Gaia
ホーム画面、Settings画面などもGaiaで構成
GonkへのアクセスはWebAPIを介する
Gecko
アプリケーションランタイム
レイアウトエンジンなどで構成
アプリケーションのためのWebAPIも含まれる
Firefoxでも同じエンジンを使用
Gonk
Androidで使われているLinuxに近い
DalvicやWebkitなど不要なものを除外したもの
デバイスドライバはAndroidのものを流用
 
Geckoとは?
Firefox OSの中枢とも言える存在
プラットフォームの理解には不可欠
Geckoとは?
Firefox OSの中枢とも言える存在
Gecko
Geckoについて調べてみよう
なにか発表できることはないか??
Gecko
ピンチ!!!
Webで調べるが???
情報が少ない!
ディレクトリ構成
 B2G
 - gecko
 - chrome 外観や操作性を規定 語源は金属のメッキ
 - dom      WebAPIを提供
 - hal      HAL層
 - layout     レイアウト要素
 - xpcom    Mozillaのコンポーネント技術
 - XULRunner Mozilla製品共通のランタイムパッケージ
 ???など
ソースコードを落として中身を見てみる
 - storage    ストレージ管理
XULRunner
この中から直感で決めたのが
「XULRunner 」
      ※響きで決めました
 
XULRunnerの前に
 
XULRunnerに入る前に必要な知識がある
 XUL、XPCOMとは?
XUL
XML User Interface Language
MozillaアプリケーションのGUIをXMLで記述するための言語
Firefox本体や拡張機能のために使われている。
見た目はCSSで、動作はJSで作成される。
テキストやグラフィックス、レイアウトの変更が容易
Web系エンジニアは短期間で習得可能
XPCOM
Cross Platform Component Object Model
クロスプラットフォームなコンポーネント技術
Mozillaプロジェクトで開発
コンポーネント(機能を提供するクラス)を
プラットフォームに依存せずに呼び出すことができる
JSからはアクセスできないコンテンツがある場合に
利用したい機能をXPCOM形式でコンポーネントにして
おくことでJSから利用することができる
 
XULRunnerとは
XULRunner
XUL+XPCOMアプリケーションを
単独で起動するための
Mozillaランタイムパッケージ
?配布されるパッケージを組み込むことで利用可能
?Geckoレンダリングエンジンとして利用可能
?XPCOMコンポーネントを複数含み、JS、Pythonなど
 から呼び出すことができる。
XULRunner
XULRunner
XPCOMコンポーネント  1
XPCOMコンポーネント  2
XPCOMコンポーネント  3
クロスプラットフォーム
複数のOSへ対応
JavaScript Python Java
Windows MacOS X Linux
複数の言語から
相互呼び出し可能
XPConnect
を使用してアクセス
 
XULRunnerを使った
デスクトップアプリケーション
を作成しよう
 
出展元:
https://developer.mozilla.org/ja/docs/XULRunner
Let's do it
?Windows環境で実施
?XULRunnerをMozilla.orgからダウンロード
?設定ファイルの作成
?アプリケーションの実行
 
XULRunner のダウンロード
 
ここからダウンロード:
http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/
 
Latest配下には「runtimes」「sdk」「source」とあるが、
今回は「runtimes」をダウンロードする
Windows用を選択
 
設定ファイルの作成
フォルダ構成 
/Appフォルダ
/chrome
/content
- main.js
- main.xul
- chrome.manifest
/defaults
/preferences
- pref.js
- application.ini
/xulrunner
?XUL、HTMLファイルを
 content以下に配置
?メインウィンドウとして使用
?リソースのURI定義など
?プロファイルを指定
?ブート設定を記載
 
?xulrunnerパッケージ
XULの作成
main.xulへ記述
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="main" title="My App" width="300" height="300"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<caption label="Hello World"/>
</window>
chromeマニフェストの作成
chrome.manifestへ記述
content myapp file:content/
?contentパッケージを登録する
?URI chrome://パッケージ名/content/…によって
 参照された場合のファイルパスを指定する
プリファレンスの設定
pref.jsへ記述
pref("toolkit.defaultChromeURI", "chrome://myapp/content/main.xul");
?メインウィンドウであるXULファイルを指定する
?Firefoxのabout:configに相当する設定
  toolkit.defaultChromeURI  ?? アプリケーション実行時に開く
                 デフォルトのウィンドウを指定
  toolkit.defaultChromeFeatures ?? メインアプリケーションを開くときの
                  特性を指定
ブート設定
application.iniへ記述
[App]
Vendor=s53forco
Name=My App
Version=1.0
BuildID=20140315
Copyright=Copyright (c) 2014 s53forco
ID=myapp@s53forco.com
[Gecko]
MinVersion=27.0.1
MaxVersion=27.0.1
?アプリ名
?アプリVersion
?ID
?minimum Gecko Version
?maximum Gecko Version
?xulrunner起動時に引数として渡す
 
アプリケーションの実行
アプリケーションの実行
コマンドプロンプトから実行
..xulrunner/xulrunner.exe application.ini
アプリケーションの実行
タイトル、ラベル、Window設定が
反映されていることが確認できた
ただし、起動に失敗すると何も
起こらないためデバッグが大変??
まとめ
まとめ
?Geckoについて、まだWebに情報が少ない
?ひとりで勉強するのには限界がある
コミュニティや勉強会に
参加することは非常に大切!!
ご清聴ありがとうございました

More Related Content

ずーるらんなー