Titanium Desktopを使えるようにして,PHPとかRubyを書いてみる(その2)

実際にコードを書いて動きを確認してみる

前回はインストールと初期状態のテスト起動しかしなかったので,今回は実際にプロジェクトのindex.htmlにPHPやRubyを書いてみます.

プロジェクトの場所

作成されてるところ : プロジェクト作成時に選択したディレクトリ/プロジェクト名

index.htmlの場所 : プロジェクト作成時に選択したディレクトリ/プロジェクト名/Resources/index.html

Resourcesの中にファイルを配置したりして,作っていけばよいみたいです.

下準備: WebStorm/PhpStormでTitaniumのAPIを自動補完できるように

Titaniumのコード補完をWebStromでを参考に,以下のような感じで補完用のファイルを作成.nodeやwgetはportsなりbrewなりyumなりで適当に.

% git clone git://github.com/appcelerator/titanium_mobile.git
% wget http://developer.appcelerator.com/apidoc/mobile/1.6.2/api.json
% node TiAutocomplete/tiDocs.js > Titanium.js

desktopのapi.jsonは見つからなかったので,とりあえずmobileので誤魔化します.手探りで調べてみた感じでは,api.jsonは1.6.2が新しそうです.

WebStorm/PhpStormでライブラリ設定

参考元では,Resourcesと同じ場所に作成したTitanium.jsを置いているようでしたが,自分はTitanium系をまとめて置いてる共有スペースにコピーして,PhpStorm側のライブラリ設定をしました.

  1. Preferencesを開く(Cmd+,)
  2. 左ペイン Project Settings内の"JavaScript Libraries"
  3. 右ペイン Libraries内の"Add..."
  4. Nameを入力,AttachでTitanium.jsのパスを指定,"OK"
  5. Librariesの一覧に,Type: GlobalでTitaniumが追加されていればおわり

PHPやRubyを埋め込んでみたindex.htmlサンプル

一部のコードを短くするのに,jqueryをindex.htmlと同じ場所に配置しています.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/php">
function hoge() {
    return 'from PHP!';
}
</script>
<script type="text/ruby">
def fuga
    return 'from Ruby!'
end
</script>
<script type="text/javascript">
jQuery(function()
{
    $('#fromPhp').text(hoge());
    $('#fromRuby').text(fuga());
});
</script>
<title>Sample</title>
</head>
<body>
<h1>Welcome!</h1>
<h2 id="fromPhp"></h2>
<h2 id="fromRuby"></h2>
</body>
</html>

PHPやRubyは,script要素にtype属性で言語を指定

type="text/php"のように,script要素にtype属性で言語を指定すれば,中のスクリプトは指定された言語で処理されます.src属性で外部ファイルを読み込むこともできます.

<script type="text/php" src="lib/test.php"></script>

ちなみに,PHPのおきまりの<?php ~ ?>のくだりは,基本的に書きません.むしろ書くとうまく動作しません.外部ファイルであっても同様です.

namespaceの中に,スクリプト文字列を直接展開して,関数や変数の名前を管理しているみたいなので,展開時に <?php ~ ?>が含まれるとおかしくなると思われる.

関数の名前空間は,言語をまたいで共有される

上のサンプルでは,JavaScriptからPHPで定義されたhoge関数と,Rubyで定義されたfuga関数を呼び出しています.この動作はPHPとRubyの間でも共通しているので,PHPからRubyの,RubyからPHPの,それぞれの関数を呼び出せます.(ここでは挙げてないけどPythonも)

変数も同じように振る舞うかと思ったんですが,PHPは事実そうでしたが,Rubyでfoo = 'bar'とか$foo = 'bar'した変数をJSから参照できず.Rubyの場合は,windowオブジェクトを介さないとダメかも.Pythonはしらない.

拡張子を.phpにして,<?php ~ ?>を書くとプリプロセスで処理される

前項で基本的に書かないといいましたが,拡張子がphpのファイル内で<?php ~ ?>があると,ビルド本編の前に動作します.

Using Titanium Desktop with PHPによれば,PHP単品で動作している状態なので,Titaniumオブジェクトの参照やDOMの操作はできないとのこと.

<?php
     echo("PHP preprocessed output!");
?>

という.phpファイルは,プリプロセスで処理された後,ビルド本編に至ったときには,

PHP preprocessed output!

というファイルになった状態で,処理されます.PHPで凝ったことをするんでなく,C言語のプリプロセッサ命令と同じように考えて扱った方が良さそう.

あれ,そうなるとPHPの定数とか環境変数にWIN32とかdarwinとかなんかそういう情報が入ってきてたりするのかな?おしえてえらいひと.

実行するとこんなかんじ

jQueryが起動して,#fromPhpと#fromRubyの要素にそれぞれ,関数から受け取った文字列をセットしています.良い感じ.


Launch Appしてみる

Launch Appしてみる


言語を混ぜれば混ぜるほど,ビルドの時間も余分にかかっているようなので,多用するのはやめたほうがよさそう.JS+いつもの言語1つ,ぐらいが適量ですかね.

ちなみに,起動したアプリでは,Windows -> Show Inspector で,Webkitのインスペクタを使用できます.デバッグも楽ちんですね.


Author

ahomuAyumu Sato

KINTOテクノロジーズ株式会社

Web 技術、組織開発、趣味など雑多なブログ。技術の話題は zenn、ご飯の話題はしずかなインターネットにも分散して投稿しています。

Bio: aho.mu
X: @ahomu
Zenn: ahomu
GitHub: ahomu
Sizu: ahomu

Related

Latest

Archives

Tags

Search