HouseTect, JavaScriptな情報をあなたに

TitaniumMobileのハマりポイントとお作法メモ

2012-04-02T07:30:46Z

ここ最近TitaniumMobileの主に検証を行なっております。そして先日Titanium meetup Tokyo #17 (五反田) : ATNDにおじゃまして@masuidriveをはじめとする多くのTitaniumMobileファンの方々とお話ができました。すごく楽しかったです！僕がTitaniumMobileに触り始めて約一ヶ月ほどたちますが、ハマったポイントをつらつらメモしてみました。使い方やTitaniumMobile自体のバグなど、まだ難しい部分は多々ありますが、4月に2.0がリリースされるようなので、今後が本当に期待できるフレームワークです。

スペック

簡単に今のぼくの環境をご紹介。

MacOS X: Lion
Java: 1.6.0_29
Titanium SDK: 1.8.2
Titanium Studio: 1.0.9

requireをAndroidで使えるようにするため、tiapp.xmlにfastdevを無効にするタグを追加

CommonJSでコーディングする際、requireで外部のJavaScriptファイルを読み込むことが非常に多くなりますが、このパスがfastdevを有効にしているとうまくいかない。 Titanium mobile -- Android でrequire()エラー - WEBサービス　情報局 Androidの場合だけですが、が「Resources/lib/lib/a.js」のようになってしまう。これは、Titanium1.6までのTi.includeと同じ現象かなーと思っています。 libの階層が一個多い！！ Titaniumのインクルードパスを指定する方法私案 - もぎゃろぐなので、以下のように非常に残念ですが、fastdevを無効にするタグをtiapp.xmlに入れましょう！ 1.8現在、まだこのバグが直っていないので、今後に期待ですね。とはいえ、Androidのデバッグは以下で紹介しますが、DDMSというツールを使って実機で行なっているので、 fastdevの恩恵はそもそも受けられなかったです。

アプリのバージョンを取得する方法

tiapp.xmlのに書いたのアプリバージョンになります。そして以下が取得コードアプリを段階的にリリースする際などに、このバージョンを見て処理を分けたりできますね。 [via] Office L テクニカルノート

JSSはプロジェクトをcleanしないと修正したものが反映されない問題！とかあといろいろ

以下が簡単なJSSサンプル。

app.js

app.jss

こちらのJSSファイルに記述したCSSっぽいものが、この場合はidに紐づいて反映されるが、プロジェクトのcleanをしないと反映がされない。つまり以下のredをblackにしてRunしなおしても反映されないのだ。 TitaniumのJSSという機能 | ひげろぐの記事を読むと1.6で修正されたとあるので、もしかしたら1.8で再度このバグが出たのかな？また、以下の記事を読むとやっぱりまだJSSを使うときじゃないのかなーと思っています。1.6の記事ではありますが。 Titanium Mobile でCSS的な、それJSS!!!!!! | MOL なので、Zaimで採用されているTitanium でつくろう！ iPhone/Android 両対応アプリのような方法よいかもしれません。（この方法すばらしいと思います！）

iPhoneの場合CommonJSのrequireで呼び出されたモジュール内でグローバル変数が見れる

以下のようなシンプルなサンプルでiPhone、Androidで試してみましたが、 iPhoneの場合にhogeがtestmodule内から見えてしまいました。一応node.jsで同じことをやってみましたが、hogeが見えなかったです。

app.js

testmodule.js

以下の和訳ページを見てみると、

TiにおけるCommonJSモジュールの仕様の実装はnode.jsのものに基づいています。
via: CommonJS Modules in Titanium - JP::HSJ::Junknews::HatenaSide

や

アプリケーション内のすべてのモジュールにわたって共有されるグローバル変数は存在してはいけません。
via: CommonJS Modules in Titanium - JP::HSJ::Junknews::HatenaSide

と書いてあることから、このパターンだとiPhoneの場合のrequireがヘンテコなことになっているのかな？なので、無名関数で囲ってあげる。

Androidのエラー内容

DDMS（↓のほうで解説）で調べた内容。

02-27 14:46:27.499: E/TiJSError(2137): (main) [311,706] ----- Titanium Javascript Runtime Error ----- 02-27 14:46:27.499: E/TiJSError(2137): (main) [1,707] - In testmodule.js:5,36 02-27 14:46:27.499: E/TiJSError(2137): (main) [0,707] - Message: Uncaught ReferenceError: hoge is not defined 02-27 14:46:27.499: E/TiJSError(2137): (main) [0,707] - Source: Ti.API.log('aaaaaaaaaaaaaaaa: ' + hoge); 02-27 14:46:27.539: E/V8Exception(2137): Exception occurred at testmodule.js:5: Uncaught ReferenceError: hoge is not defined

iPhoneのエラー内容

無名関数でapp.js内を囲うと以下のエラーが出た。

[ERROR] Script Error = Can't find variable: hoge (unknown file).

■参考リンク CommonJS Modules in Titanium - Documentation & Guides - Appcelerator Wiki 俺流コーディングスタイルにダメ出し - toweroflの日記 Titanium Mobile Best Practices - JP::HSJ::Junknews::HatenaSide

TextMate風なスニペットで楽々開発！

[via] 【Titanium Advent Calendar 2011：八日目】タイタにうもん第１話 - JP::HSJ::Junknews::HatenaSide このスニペットのおかげで、buttonと入れてtabを押せばビヨッと展開されるし、webviewって入れてもいいし、infoって入れてもいいしね。このコード補完は非常に強力です！（どうしてcreateWindowはないんだろう。）

.svnディレクトリが悪さするから、gitを使おう？

以下の記事によると、

私みたいに、会社の都合等で、gitが使えずにSVN使っている方いますよね。
なんと、TitaniumStudioにて、SVNチェックアウトしたAndroid用プロジェクトを、RunやDistributeしようとすると、失敗しちゃいます＞＜。
画像の生成のところで失敗しているみたいですね＞＜。
via: 【Titanium Advent Calendar 2011：十日目】

となっていて、svn exportしてからbuilder.pyを呼び出すということをされています。ちょっと僕のほうで確認ができていないのですが、確かにすべてのディレクトリに.svnがいるのはちょっといやだなーと思うので、思い切ってgitを採用しちゃうのもありですね。こちらSession01 - Android バットノウハウつめあわせ on Vimeoでも同じようにgitを使おうって話しになっていて面白かったです。

アプリ名の変更はプロジェクトの作り直しが楽？

Androidだと、

02-27 19:48:11.943: E/AndroidRuntime(6196): java.lang.RuntimeException: Unable to instantiate application com.hisasann.Hoge.HogeApplication: java.lang.ClassNotFoundException: com.hisasann.Hoge.HogeApplication in loader dalvik.system.PathClassLoader[/data/app/com.hisasann.Hoge-1.apk] 02-27 19:48:11.943: E/AndroidRuntime(6196): at android.app.LoadedApk.makeApplication(LoadedApk.java:466) 02-27 19:48:11.943: E/AndroidRuntime(6196): at android.app.ActivityThread.handleBindApplication(ActivityThread.java:3287) 02-27 19:48:11.943: E/AndroidRuntime(6196): at android.app.ActivityThread.access$2200(ActivityThread.java:121)

が出る。【Titanium Advent Calendar 2011：一日目】既にリリースしたアプリ名の変更（AppStore編） | MOL にあるリンク先に、

Because of generated files and complexity with renaming some of them, we decided against allowing editing. You can create a new project and just copy in your Resources to the new project (and then just delete old).
via: How can i rename my iphone app project? » Community Questions & Answers » Appcelerator Developer Center

と書いてあるので、たしかにへんなエラーで（ClassNotFoundException）で悩むぐらいなら、新しくプロジェクト作ってリソースコピーしちゃえ！

ファイル名にアンダースコアが付いているとAndroidの実機にインストールできない

Titaniumでアンダースコア付きのファイルはやめておいたほうがよいみたい。

[ERROR] /TitaniumStudioWorkspace/Sample-LocalJqm/Resources/jqm/js/jquery.mobile-1.0.1/demos/docs/_assets/js/_viewsource.js is an invalid filename. Android will not package assets whose filenames start with underscores. Fix and rebuild.

このようにjquery.mobile-1.0.1の下にあるdemoディレクトリ内にアンダースコア付きのファイルがあって、iPhoneだと実機にインストールできますが、Androidでは入らない。 [via] pd @ blogger: Titanium Mobile 1.8 からの変更点？ビルドが進まない。（こちらの記事のV8が速いという記事、ちょっとグッときました）

ローカルHTMLの場合historyが記録されないのでjQueryMobileの戻るボタンは反応しない

httpで読み込むなどした、外部のサイトならOK！ローカルHTMLの場合は、戻るボタンを押してもうんともすんともいってくれない。 [via] Titanium の WebView で HTML をホスト | アカベコマイリ

Ti.Media.showCamera（カメラ）を使ってみる

古いバージョンではAndroidの場合に、tiapp.xmlに以下のようにパーミッションを追記する必要があるかもしれません。現時点で検証している1.8.1と1.8.2では、デフォルトでAndroidのカメラパーミションがもれなく付いてきています。 iPhoneは特になんの設定もしなくても使えます。 ■カメラを使ったサンプルコード TitaniumMobileでカメラを使う方法 -- Gist ちなみにここで、カメラのパーミションを追記していますが、僕個人としては、のちのちのことを考えると次でご紹介するAndroidManifest.xmlに追記する方法をおすすめします。

Xperia arcでカメラを使うと予期せぬ強制終了が発生する

Androidのバージョンは2.3.2だが、何をどうしてもカメラを撮影したタイミングで落ちてしまう。具体的なコードは以下のとおり。至って普通のカメラ呼び出しだが、この引数に渡しているオブジェクトのプロパティをいろいろいじってみたが100%落ちる。 Xperia arcは比較的シェアが高めな端末なので、こうなるとカメラの機能は自前でモジュールとして作成するか、必要がないなら使わないなどの対策が必要が気がしています。 [#TIMOB-4899] Camera crashes Sony Ericsson Xperia Arc Android 2.3.2, 2.3.3 with all branches - Appcelerator JIRA

Androidが落ちた時のエラー

02-21 09:59:02.214: E/TiApplication(17570): (main) [681,31285] Sending event: exception on thread: main msg:java.lang.RuntimeException: Failure delivering result ResultInfo{who=null, request=1, result=-1, data=Intent { act=inline-data dat=file:///sdcard/dcim/Camera/tia-1288732183.jpg typ=image/jpeg (has extras) }} to activity {com.hisasann.Baruth/org.appcelerator.titanium.TiActivity}: java.lang.NullPointerException; Titanium 1.8.1,2012/01/27 17:31,a24502a 02-21 09:59:02.214: E/TiApplication(17570): java.lang.RuntimeException: Failure delivering result ResultInfo{who=null, request=1, result=-1, data=Intent { act=inline-data dat=file:///sdcard/dcim/Camera/tia-1288732183.jpg typ=image/jpeg (has extras) }} to activity {com.hisasann.Baruth/org.appcelerator.titanium.TiActivity}: java.lang.NullPointerException 02-21 09:59:02.214: E/TiApplication(17570): at android.app.ActivityThread.deliverResults(ActivityThread.java:2504)

どうもintentまわりでヌルポが発生しているように見える。なんとなくだが、

Sony Ericsson Xperia Arc has a branded Android version, and a special camera (also camera software).
via: [#TIMOB-4899] Camera crashes Sony Ericsson Xperia Arc Android 2.3.2, 2.3.3 with all branches - Appcelerator JIRA

と書いてあるとおり、もしかしたらarcはカメラのアプリが特殊なので、intentに失敗しているのかも？

AndroidManifest.xmlにAndroidの設定を追記してみる

Androidの設定は、AndroidManifest.xmlファイルに書き出されます。細かい部分は、a. AndroidManifest.xml ファイル - ソフトウェア技術ドキュメントを勝手に翻訳を参照ください。んで、このファイルがTitaniumの場合どこにあるかと言いますと、

/[プロジェクト名]/build/android/AndroidManifest.xml

になります。一度でもAndroidでビルドしているとこのファイルができていますので、試しに見てみましょう！下のほうにいくとと書かれていますね。つまり、TitaniumMobileの場合は、デフォルトでカメラが使える状態なのです。この場所に置かれているAndroidManifest.xmlはビルドするたびに作りなおされてしまいますので、プロジェクト内に配置して、うまいことマージしてもらいましょう。 TitaniumStudioから以下のディレクトリに↑のファイルをコピーする。

/[プロジェクト名]/platform/android/AndroidManifest.xml

これで、ビルド時にここのファイルを見に行ってくれるので、Android特有の設定はここに追記していく。 tiapp.xmlに書いていく方法もあるようなのですが、実はあんまりよく理解できませんでした。そして、最終的にこっちに書かないとうまくいかない設定があったりなどで、このスタイルに落ち着いています。

iPhoneとAndroidでwidthなどのサイズの指定をどうするか

これはまだ最終的な策が出ていませんが、現時点でこうかなーという感じで書いてみます。そもそもの話しですが、たとえばwidth:'320px'とこれは、400pxではなく300pxでもなく320pxです。つまりiPhoneでは横幅いっぱいですが、他のAndroidなどは画面の中央ぐらいまでの場合もあります。これだと各端末の場合はというif文が存在してしまい、とてつもなく大変なことになります。これをうまいこと吸収してくれる？のがdp（だと思います） Y.A.M の雑記帳: Android multi screen 対応を参考にさせていただいて、AndroidManifest.xmlに追記しました。そして、プログラム内でサイズを指定する箇所は「width : '320dp'」のようにdpと指定しています。 dpに関する内容は、以下が詳しかったです。

画面の物理的な密度に基づいた抽象的な単位。
この単位は 160 dpi の画面と対応していて、160 dpi の画面で 1 dp = 1 px になる。なので、dp-pixel 比は画面密度（解像度）に応じて変化するが、必ずしも正比例するわけではない。
via: Y.A.M の雑記帳: Android　Dimension 単位

dpiが160の場合は320dpは320pxなんですが、このdpiが変わって240になると320dpが480pxになったりします。ちょっとだけ厄介なのが、iPhoneのエミュレータは160dpiですが、iPhone4Sの実機で試したところ320dpiが返ってきました。なんというRetina Displayよ！

dp指定の場合のanimateはどうしよう

Titaniumのアニメーションは非常に便利で、以下のように書くだけで動いてくれます。 jQueryみたい！ここで問題なのが、heightやtopなどにはInt値しか渡せないことです。つまり、はエラーになります。これを回避するために、以下のようなコードを書きたいところですが、iPhone4Sだとdpiが320なので、320dpを渡すと640が返ってきてしまいます。現時点ではAndroidの場合に上記コードを実行するようにしていますが、果たしてiPadでうまいこといくのかどうか。今後、確認します。

アプリを縦向き固定（portrait）のみにする

iPhoneの場合は、tiapp.xmlに以下のように記述すればよいのですが、 Androidは、AndroidManifest.xmlに記述します。これは結構ネットでもいろんな記述されている方が多く、またそれらが古いバージョンでは動くが現バージョンでは動かないなどがあり結果このスタイルに落ち着きました。

■最終的なAndroidManifest.xml AndroidManifest.xmlのサンプル、縦固定などなど。 -- Gist ちなみにJavaScriptからもできるようです。ただ、気をつけることはTitanium.UI.createWindowするときには指定せず、そのあとにorientationModesをセットしないとダメのようです。むむっ！

存在しないオブジェクトプロパティの値がiPhoneとAndroidで異なる

以下のようなコードを書いたときにiPhoneとAndroidで結果が異なる。

iPhoneの結果

[INFO]

Androidの結果

03-05 09:23:05.243: I/TiAPI(5644): undefined

とはいえ、という書き方すれば大丈夫ですね。 [via] Session01 - Android バットノウハウつめあわせ on Vimeo

Androidの場合HttpClientとWebViewでcookieが共有されない

以下のようのPHPコードでCookieの共有検証をしてみました。クッキーにセットした値をカウントアップします。 -- Gist 結果、

iPhoneは共有される。ただし、アプリをkillするとCookieは消去される。
Androidは共有されない

Androidのほうの共有されない問題は、じつは結構でかい問題で、特にログイン機能を持っているアプリの場合に厳しいと思います。これみなさんどうしてるんですかね。なので、CookieよりはTi.App.Propertiesを使うほうが確かかもしれません。 [via] Session01 - Android バットノウハウつめあわせ on Vimeo

httpsなサイトをWebViewで開く場合は証明書が大事！

httpsなURLにアクセスする際にオレオレ証明書だとアクセスすることができません。その挙動がiPhoneとAndroidで違うので以下にメモ。

iPhoneで接続した場合

ちゃんとcertificateのエラーが出てくれる。

[ERROR] Error loading: https://hogehoge.com/, Error: Error Domain=NSURLErrorDomain Code=-1202 "The certificate for this server is invalid. You might be connecting to a server that is pretending to be "hogehoge.com" which could put your confidential information at risk." UserInfo=0xa812dd0 {NSErrorFailingURLStringKey=https://hogehoge.com/, NSLocalizedRecoverySuggestion=Would you like to connect to the server anyway?, NSErrorFailingURLKey=https://hogehoge.com/, NSLocalizedDescription=The certificate for this server is invalid. You might be connecting to a server that is pretending to be "hogehoge.com" which could put your confidential information at risk., NSUnderlyingError=0x8c315f0 "The certificate for this server is invalid. You might be connecting to a server that is pretending to be "hogehoge.com" which could put your confidential information at risk.", NSURLErrorFailingURLPeerTrustErrorKey=}

Androidの場合

何もエラーが出ず、画面にHTMLも表示されない。つまり一見するとハマる。

Ti.Network.createHTTPClientで証明書がないhttpsを開けるけども？

以下のようにTitanium.Network.HTTPClientのvalidatesSecureCertificateというプロパティをfalseにすると、証明書がないhttpsなURLでも通信することができる。ただし、

validatesSecureCertificateはシミュレータや実機テスト時はfalseだけど、リリース用の時は強制的にtrueなのかな？ / "Does titanium mobile supports SSL with htt..." htn.to/LX7tdC
via: Twitter / @hisasann: validatesSecureCertificate ...

なんか自分でもつぶやいていますが、 Does titanium mobile supports SSL with https URLs ? » Community Questions & Answers » Appcelerator Developer Center によると、デプロイするとデフォルトtrueで上書きができないんじゃないかなーって思っています。（未検証）アプリ開発ではこのhttpsなんだけど証明書がないケースでのテストができないこともあるので、ちょっとテストがしにくいですね。

WebViewとTitaniumの連携 - ローカルHTML（アプリ内HTML）からTitaniumのイベントをfire

app.jsの一部

WebViewで読み込まれたローカルHTMLの一部

ちなみにですが、リモートのHTMLをWebViewに読み込んだ場合は、上記コードは動かない。あたりまえですが、勝手にexternalなサイトからアプリ内のイベントを呼ばれちゃうのは困る。場当たり的にいろんな名前でイベントfireしまくれば、もしかしたら一個ぐらいは動くかも？

ただし、HTML 内から Titanium オブジェクトを呼び出すのは、ローカルに保存された HTML でないといけません。
via: MountPosition Inc. » TitaniumでWebView にイベントリスナを登録する

■参考リンク Titanium の WebView で HTML をホスト | アカベコマイリ addeventlistener - Trouble using Titanium's webview to fire an API event - Stack Overflow WebViweに表示されているHTMLからTitaniumの処理を実行する | ひげろぐ

WebViewとTitaniumの連携 - Titaniumから読み込んだHTMLを操作する

WebViewにロードしたHTMLをload後に書き換える方法

これはコードで見たほうが早いですね。

app.js

WebView.js

TitaniumMobileでWebViewを使う方法 -- Gist 上記の、で行なっています。ただし、まだ僕もよく分かっていませんが、構文にミスがあっても、うんともすんともエラーを出してくれません。よって、デバッグがかなり大変になります。なので、この処理はあくまでもヘッダー・フッターをdisplay:none;にしたいなど、そういった比較的軽めな対応にしておいたほうがよさそうです。また、このevalJSは複数行のコードを評価させると、1行目しか実行してくれません。（Androidの場合だけっ！）つまり、以下のコードを実行すると、 alertは出ますが、テキストボックスの値は変わりません。セミコロン1個までじゃないとダメなので、もし複数行のJavaScriptを実行する場合は、と書くようです。難しい！ [via] 【Titanium Advent Calendar 2011：二日目】evalJSの恐怖 - もぎゃろぐ

adbコマンドでAndroidデバイスを知る！

接続されているAndroidデバイスの確認は、

adb devices

ログは、

adb logcat

複数接続されている場合は、デバイス番号を指定する。

adb -s [デバイス番号] logcat

[via] 複数デバイスが動いているときにログを見る - ore*flow

AndroidのWebViewではlocalStorageが使えない

いろいろ試していてハマったんですが、AndroidのWebViewでlocalStorageがnullになってしまう。 WebViewではなくブラウザではOK。調べていくと、ネイティブだと以下のようなコードをWebViewを呼ぶ前にする必要があるみたい。 [via] Android WebView で HTML5 の Web Storage と Web SQL Database API を使う - nobnakの日記でも、この設定をできるコードがTitaniumに見つからない。以下のようにいろんな人たちがハマっていて、これは今後どうなるんだろう。 Localstorage failure in webview » Community Questions & Answers » Appcelerator Developer Center Webview - Enabling localStorage » Community Questions & Answers » Appcelerator Developer Center how to enable localStorage iun Android » Community Questions & Answers » Appcelerator Developer Center Twitter / @hisasann: AndroidのWebViewでlocalStora ... 外部サイトを読み込み、かつlocalStorageを使いたい場合は、Titanium.Platform.openURLでブラウザを開いてあげるしかないのかな。あとはTitanium.App.Properties.setStringを使ってなんとか、アプリ側に値を保持して、うまいことやる？ちょっとややこしいですな。

Titanium-Google-Analyticsでトラッキング

rogchap/Titanium-Google-Analyticsを使ってできるようです。（未検証）こちらの記事が参考になります。 Titanium MobileでGoogle Analyticsを利用する - box box box

Ti.Appにグローバルな変数を入れて共有する

引数で渡すよりもグローバル化したほうが効率的なシチュエーションがあるので、Ti.Appにいろいろぶらさげて管理したいところ。ただ、Ti.App配下にはすでにたくさんのプロパティやらメソッドがあるので、これらを壊さず、かつ、開発者が追加したというのが分かるようにしたい。ということで、みたいに、一つワンクッションを入れて、プロパティを管理しようと思いました。ところが、としても、hogeがnullのままになるという減少に悩まされました。なので、以下のコードで検証。なんだこれ。。。なので、function(){}を使って名前空間を作っています。ちなみにですが、名前空間を使わず、以下のように入れれるので、面倒な方は以下の方法ですかね。 [via] Ti.Appにオブジェクトをくっつけてグローバル変数的に使う | ひげろぐ

僕のiPhone、Androidのデバッグ環境

本来ならiPhoneもAndroidもエミュレータを起動して確認して、その後に実機に入れて確認という感じになるとは思うのですが、僕の環境ではAndroidエミュレータを起動した際（ランダム）にMacが強制的に落とさないといけない状況になります。具体的にどうなるかはInstagramこちらをご覧ください。（どうやらカーネルパニックのようです） Androidエミュレータを起動したときのMacのエラーログ -- Gist それに、↑のほうで解説したようにfastdevを使った状態だとrequire時のパスがヘンテコになります。もう、これだけ揃うとエミュレータで作業する意味があまりないので、実機でのデバッグになります。ちなみにですが、エミュレータの起動は死ぬほど重いですが、実機への転送は意外と速いです。

Androidのデバッグについて

会社の方に教えていただいたのが、このDDMSという付属ツール。以下の場所にあります。（Androidを触り始めて1週間でこのツールの存在を知りました！遅い！）

android-sdk-macosx/tools/ddms

僕は、しょっちゅう使うので、aliasにして.bash_profileに書いちゃいました。

alias ddms="~/_/dev/android-sdk-macosx/tools/ddms"

■参考リンク AndroidのDDMSの使用方法のドキュメントを翻訳しました - Android(アンドロイド)情報-ブリリアントサービス Androidの実機をMacに接続し、あとはRunのボタンのAndroid Deviceを選んでちょいとまちます。すると、

[INFO] Application installed. Launch from drawer on Home Screen

と出るので、Androidのアプリのところから自分のアプリを起動します。ここで、ちょっとしたことではなりますが、僕はTi.API.logではなくTi.API.errorを使ってログを吐くようにしています。 logほうでもいいんですが、流れるスピードが尋常じゃないので、errorで出力しておいて、 DDMS側のログレベルをerrorにしています。それかSaved FiltersのところでFilterを作っちゃうかですね。もっといい方法があるだろう。

iPhoneのデバッグについて

iPhone側はなんの問題もありません。エミュレータでガシガシ開発しています！しかもエミュレータ起動速い！いいね！

Jasmineを使ってテストをする

すでにあるguilhermechapiewski/titanium-jasmineこちらをCommonJS対応し、ディレクトリ構成を綺麗にした版 hisasann/titanium-jasmine を作ってみました。普通に起動したいなら、

make run-iphone

テストとして起動したいなら、

make test-iphone

クリーンしてから起動したいなら、

make clean && make run-ipad

TitaniumStudioから普通に起動しても問題ありません。

TitaniumMobileで作られたアプリ

Zaim
はてなカウンティング
積ん読本
Wunderlist
Nyars
そうしてあなたはさっていくのね
POPCORN S
NIFTY-Serve
Sptted
MogSmash（MogSnapって今動かないですよね？）

こちらにかなりまとまっています。 Titanium Mobileの開発事例 « Titanium BBS(JP unofficial)

是非読んでいただきたい記事やスライドや動画やコード！

小さな Titanium Mobile の読み物 JavaScriptを使って一週間でiPhoneアプリを作ってみた。 - おんがえしの日記

Titanium でつくろう！ iPhone/Android 両対応アプリ

View more presentations from Takako Kansai

Session06 - TitaniumでiOS/Android同時リリース：NIFTY-Serveの事例 from astronaughts on Vimeo.

Session07 - MogSnap 開発秘話＆すぐに使える Titanium アニメーションテク from astronaughts on Vimeo.

toru0325/TKAnimationSample toru0325/TiMetro - GitHub

まとめ

とにかくハマる！ハマる！ハマる！でも、ふと思ったんですが、そりゃiPhoneとAndroidの両方をJavaScriptで開発し、かつ同じコードでもそこそこ動く環境という時点で非常にありがたい。あとはUIを分けるなどして、分岐していくのかなーと思いますが、iPhoneではアニメーションすごくいい！Androidだとそこそこいい！なので、これから流行ってきそうですね。

Titanium Mobile 2.0リリース発表を東京でも行います！詳細は後日公開しますが4/20の予定となっています！参加しようかな？と思う方はFavを頂けるとうれしいです！ meetup.com/Appcelerator/L... #TitaniumJP
via: Twitter / @masuidrive: Titanium Mobile 2.0リリース発表を ...

TitaniumMobile2.0期待！

Titanium Mobileで開発するiPhone/Androidアプリ (Smart Mobile Developer)

posted with amazlet at 12.02.06

北尾雅人
翔泳社
売り上げランキング: 11403

Amazon.co.jp で詳細を見る

TortoiseGitとmsysgitではじめるWindowsGit生活

2012-03-09T06:24:40Z

Windowsにgitを入れたことがなかったので、比較的ラクに導入する方法をいろいろ調べてみたところ、TortoiseSVNならぬTortoiseGITがあったので、これの導入までをメモ。このTortoiseGITを使えば、コードとか書かないけどWindows上でgit使わないといけなくなってしまったPMさんとかデザイナーさんでも安心してgitを使うことができると思います。 TortoiseGitを使うには、msysgitというツールをインストールする必要があります。このmsysgitがgitの実体です。その昔、Cygwinを入れて、gitを使うという方法があったようですが、今はこのツールだけあればgitが使えます。（日本語が使えないですが）

msysgitのインストール

InstallMSysGit · msysgit/msysgit Wiki 以下から、msysGit-fullinstall-1.7.9-preview20120201.exeをダウンロードします。 Downloads - msysgit - Git for Windows - Google Project Hosting 展開先を「C:\msysgit」のままにして実行しました。もし他のパスがよい場合は適宜変更してください。すると、上の画像のようなコンソールが出てきます。これでインストールは完了だとは思うのですが、 InstallMSysGit · msysgit/msysgit Wikiに書いてある以下のシェルを実行しときました。

/share/msysGit/initialize.sh

このmsysgitの面白いところが、Unixコマンドが打てることです。 llとかpwdとかUnix上で使っていたコマンドが使えます。サイドこのプロンプトを開きたいときは、

C:\msysgit\msysgit\msys.bat

を実行します。なので、このファイルのショートカットを作っておくと便利かもしれません。あと、msysgitはssh-keygenが使えます！

gitの設定ファイル「.gitconfig」の場所

C:\Users\hoge\.gitconfig

ここにおいてあります。せっかくなので、コンソールからグローバルなユーザー名とメールアドレスを設定しちゃいましょう。 msys.batを起動して、以下のコマンドを打ちます。ユーザー名とメールアドレスは適宜読み替えてください。

git config --global user.name "hoge" git config --global user.email "hoge@hoge.com"

では環境設定を表示してみましょう。

git var -l

user.nameとuser.emailがちゃんと反映されています。

core.symlinks=false core.autocrlf=true color.diff=auto color.status=auto color.branch=auto color.interactive=true pack.packsizelimit=2g help.format=html http.sslcainfo=/mingw/bin/curl-ca-bundle.crt sendemail.smtpserver=/mingw/bin/msmtp.exe diff.astextplain.textconv=astextplain rebase.autosquash=true http.proxy= user.name=hoge user.email=hoge@hoge.com core.repositoryformatversion=0 core.filemode=false core.bare=false core.logallrefupdates=true core.symlinks=false core.ignorecase=true core.hidedotfiles=dotGitOnly remote.origin.fetch=+refs/heads/*:refs/remotes/origin/* remote.origin.url=c:/_/dev/gittestrepos/test.git/ branch.master.remote=origin branch.master.merge=refs/heads/master GIT_COMMITTER_IDENT=hoge hoge@hoge.com 1331271139 +0900 GIT_AUTHOR_IDENT=hoge hoge@hoge.com 1331271139 +0900 GIT_EDITOR=vi GIT_PAGER=less

TortoiseGITのインストール

tortoisegit - Porting TortoiseSVN to TortoiseGIT - Google Project Hosting 以下から、TortoiseGit-1.7.7.0-64bit.msiをダウンロードします。 32bitな方は、32bitのほうをダウンロードしてください。 Downloads - tortoisegit - Porting TortoiseSVN to TortoiseGIT - Google Project Hosting

TortoiseGitのインストール時には使用するSSHクライアントを設定するが、GUIメインで利用するなら「TortoisePLink」を利用する設定にすると使い勝手が良いだろう
via: 実用レベルに達したWindows向けGitクライアント「TortoiseGit」でGitを始めよう - SourceForge.JP Magazine : オープンソースの話題満載

これを呼んだので、特に何も迷わずに次へ次へと進んでみました。これでインストールは完了。すごく簡単！ちなみに、msysgitのコンソールから「git commit -m 'テスト'」のように日本語を入力することができません。ですが、TortoiseGITからのcommitでは日本語が通るので問題ありませんね。あとは、使って慣れる！ git - 簡単ガイドとか読んで慣れる！

番外編 - リモートリポジトリをローカルに配置してちょっとしたバージョン用にgitを使ってみる

僕はブログの記事（比較的長文）を書くときは、間違えてファイルを消したりしたとき用にgitを使ってバージョン管理しています。一般的にはローカルのリポジトリで作業して、リモート（別のサーバーや端末）に対してpushすると思うのですが、そこまでしないけどバージョンしたいときに以下のようにして使っています。

ローカルでリポジトリを作成する

% cd 適当なディレクトリ % mkdir gittest % cd gittest % git init % touch README % git add README % git commit -m 'first commit'

ローカルでリモートリポジトリを作成する

% mkdir /c/gittestrepos/gittest.git % cd /c/gittestrepos/gittest.git % git --bare init

ローカルからローカルにあるリモートリポジトリにpushする

% cd 適当なディレクトリ % git remote add localrepos /c/gittestrepos/gittest.git % git push localrepos master

上記ではmsysgitを使ってやってみました。 /c/というのがCドライブになります。このように別にリモートだからといって、別の端末になくてもいいんですよね。このあとに、もしgithubにコミットしたいと思ったときはremoteをaddすればよいので、楽チンかなーと思います。 ■参考リンク Git/一人で使ってみる（msysgit編） - 俺の基地 Git/インストール（WindowsXP編） - 俺の基地 msysgitインストール〜 sshでのgitリポジトリアクセスまで | Happy my life せっかちな人のための git 入門 - git をインストールし、共同で開発できる環境を整えるまで - 僕は発展途上技術者

Gitによるバージョン管理

posted with amazlet at 12.03.09

岩松信洋上川純一まえだこうへい小川伸一郎
オーム社
売り上げランキング: 24163

Amazon.co.jp で詳細を見る

githubのgh-pagesブランチを使って自作サイトを表示する方法

2012-02-24T06:03:47Z

こちらの30分、JavaScriptで作るWebサービスのモックアップ - ゆーすけべー日記記事を拝見して、僕もざっくりとしたInstagramAPIを使ったサイトを作ってみた。

ひたすらラーメンの写真を表示するInstagramサイト - Ramenstagram

Ramenstagram

ひたすらBlackMilの写真を表示するInstagramサイト - I Love BlackMilk!

I Love BlackMilk! またくだらないものを・・・

githubリポジトリを作る

ではではまずはgithubのリポジトリを作りましょう！ githubでリポジトリを作り、ローカルで以下のように実行する。基本的なgithubの手順ですね。

mkdir Ramenstagram cd Ramenstagram/ git init touch README git add README git commit -m 'first commit' git remote add origin git@github.com:hisasann/Ramenstagram.git git push -u origin master

gh-pagesブランチを作成する

GitHub Pages - Homeに書いてあるとおりですが、以下のようにコマンドを実行してブランチを作成します。

cd Ramenstagram/ git symbolic-ref HEAD refs/heads/gh-pages rm .git/index git clean -fdx echo "My GitHub Page" > index.html git add . git commit -a -m "First pages commit" git push origin gh-pages

これでgit branchしてみると、

* gh-pages master

となっているので、現在作業中のブランチは「gh-pages」ということになる。

githubサイトにて

adminボタンをクリック。すると以下の画像のように、すでにGitHub Pagesが作られていて、チェックボックスにチェックが入っている。これは、gh-pagesというブランチを作ると自動的にチェックが入るよう。逆にgitコマンドからではなく、adminページにて、チェックを入れても同じようにgh-pagesブランチが作られる。どっちが楽かはあなた次第！そして、 http://hisasann.github.com/Ramenstagram にアクセスしてみると、ちょっと待っててよ的な画面が。少し時間を置くと以下のようにindex.htmlの内容が表示された！あとは、このブランチに自分のサイト用のHTMLやらJavaScriptやらCSSやらを配置してコミットすれば自動的に反映される！便利！

InstagramのtagAPIを使ってJSONを返すnode.jsコード

ちなみにInstagramのJSONを取得しているのはnode.jsで作っています。

var url  = require('url'),
    https = require('https'),
    http = require('http'),
    express = require('express');

var recent = '';

var app = express.createServer();
app.set('view options', { layout: false });
app.get('/instagram_tag', function(req, res){
	var code = req.query.code;
	if (code) {
		return;
	}

var access_token = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXX';
    var u = url.parse('https://api.instagram.com/v1/tags/' + req.query.tag + '/media/recent');
    var param = "?access_token=" + access_token;
    var head = true;

https.get({
            host: u.hostname,
            port: u.port,
            path: u.pathname + param,
            method: 'POST'
    }, function(data) {
            var body = '';

data.on('data', function(chunk) {
                    if(head){
                            res.writeHead(200, {'Content-Type': 'text/plain'});
                            head = false;
                    }
                    body += chunk.toString();
            });

data.on('end', function() {
                    recent = JSON.parse(body);
                    res.write(JSON.stringify(recent));
                    res.end();
            });
    }).on('error', function(e) {
            res.writeHead(200, {'Content-Type': 'text/plain'});
            res.write(e);
            res.end();
    });
});
app.listen(8126);

var Log = require('log'),
        fs = require('fs'),
        stream = fs.createWriteStream(__dirname + '/instagram_tag.log'),
        log = new Log(Log.INFO, stream);

// catchされなかった例外の処理設定
process.on('uncaughtException', function (err) {
        log.info('$: uncaughtException => ' + err);
});

フロントのJavaScriptだけで完結したほうが綺麗なんですが、access_tokenをバレたくないので、いったんこのnodeがプロキシになってInstagramのtag情報から画像を返すようにしています。 InstagramのtagAPIを使ってJSONを返すnode.js版プロキシー -- Gist ■参考リンク実践GitHub Pages運用のユースケースとワークフローの詳細 | ゆっくりと... GithubのProject Pagesを作る手順を調べてみた。もしくはgitで空ブランチを作る方法を調べてみた。 - kanonjiの日記

入門git

posted with amazlet at 12.02.24

Travis Swicegood
オーム社
売り上げランキング: 10517

Amazon.co.jp で詳細を見る

クロスドメイン用のHTTPレスポンスヘッダー - Perlスクリプト版

2012-02-15T05:39:21Z

iPhoneのSafariとAndroidのブラウザ、PCのSafariとChromeでクロスドメインなAjaxを行う場合のレスポンスヘッダーで地味にハマったので、忘れないうちにメモしとく。たいていの場合、.htaccessファイルに「Access-Control-Allow-Origin: *」を含めておけばいけまっせー！的な感じで書かれている場合が多いが、CGIとして書く場合にはもう1個だけ重要なものがあります。それが、 Content-Length ！！ Content-Lengthが正しくないとAndroidのブラウザ、PCのChromeでAjax通信でレスポンスが返ってきてくれない。まぁ、あんまりCGIとして書くケースはないのかもしれないのですが、.htaccessを使えないときには有効かもしれません。

Perlのコード

大体こんな感じでJSONを返すCGIを書いたときに、「Access-Control-Allow-Origin: *」と「Content-Length」　を正確に返す必要がある。なので、以下コードでうまくいく。

Ajaxアクセス用のコード

こっちはこれだけ。 IEを考慮していないので、XDomainRequestは無視しています。また、ちょっと古い記事ですが、クロスドメインなAjaxに対応したブラウザをご覧になりたい場合は、XMLHttpRequest level2に対応しているブラウザまとめをば。

初めてのPerl 第5版

posted with amazlet at 12.02.15

Randal L. Schwartz Tom Phoenix brian d foy
オライリージャパン
売り上げランキング: 30529

Amazon.co.jp で詳細を見る

MacOSX LionにPhoneGapをインストールしたときのメモ（2012-02-09時点） - iPhone／Android対応

2012-02-09T05:51:18Z

iPhone版

PhoneGapもTitanium Mobile同様、結構ググると情報が古い。特にXCodeが3から4に上がったとこで、かなりUIも変わっているので、昔の情報はあんまり役に立たない。なので、PhoneGapのサイトにあるGet Started Guideを見ながらいろいろ試してみました。 Get Started Guide « PhoneGap

PhoneGapをダウンロードする

Download « PhoneGapよりDownloadボタンをクリックし、PhonGapをダウンロードします。現時点（2012-02-07）では1.4.1のようです。 zipファイルを解凍します。

PhoneGapをインストールする（iOS版）

以下のディレクトリのdmgファイルをダブルクリックします。

/phonegap-1.4.1/lib/ios/PhoneGap-1.4.1.dmg

すると、PhoneGap-1.4.1.pkgファイルが出現するので、次へ次へを押してインストールします。

XCodeでPhoneGapプロジェクトを作成する

XCodeのメニュー「File→New→New Project」を選択します。以下のようにPhoneGapプロジェクトを選択し、プロジェクトを作成します。 "Product Name"と"Company Identifier"を入力します。とりあえず、僕は以下の感じでやりました。 Company Identifierはご自分のBundle identifierを入力してくださいね。（ゆくゆく実機で動かすため）

何はともあれRunさせる

↑の画像ようにiPhoneのシミュレータでRunボタンをクリックしてみたところ、以下のエラーが出ちゃいました。確かに、

Next step is IMPORTANT! Drag the www folder into Xcode 4. You can't just drag the www folder into your app's folder. It needs to be dragged into Xcode 4!! In my case I would drag it and drop it on HiWorld shown below.
via: Get Started Guide « PhoneGap

と、どうやらwwwというフォルダがないからプロジェクトに追加してね的な話のようです。ここも、過去のPhoneGapでは、wwwフォルダがデフォルトであったりしてたようで、ググるとそっちが出てきてちょっと困ってしまいました。そしていろいろぐぐっているとドンピシャな記事が、

XCodeの左ペインのプロジェクトのアイコンを右クリック

Add files to プロジェクト名...を選択

作成したプロジェクトのフォルダの中にwwwというフォルダがあるので選択

表示されるダイアログの下の方に「Create folder references for any added folders」というのがあるので選択してAddボタンを押す

XCodeの左ペインの中に青い色でwwwフォルダが表示される

この状態でビルドすればSimulatorでindex.htmlの内容が表示されます
via: [PhoneGap] PhoneGapでwwwフォルダがない | スタックスリー開発奮闘ブログ

これで、wwwフォルダがXCode上に表示され、かつビルドが通るようになりました！（なんなんだ、このワンステップは。。。）

実機で動かす場合

プロビジョニングファイルの作成

ぶっちゃけこのステップが一番面倒なんですが、やらないとダメみたいなので、やるしかないですね。以下の記事を順番にやっていくと、いつのまにか終わっています。 ASCII.jp：JavaScriptでiPhoneアプリ開発！NimbleKit入門｜古籏一浩のJavaScriptラボそしてiPhoneをつないで、XCodeの「Window→Organizer→DEVICES」にて「Use for Development」をクリックすると、これまたいつの間にかiPhoneの認証が終わってる！イエス！

iPhoneの実機での動作確認

iPhoneが繋がっている状態なら、XCodeのシミュレータのところに自分のiPhoneの名前が出ているので、それを選択してRunするだけ。これで、自分のiPhoneでアプリが動き出す。

Android版

必要なものをセットアップ

Android版はXCodeは使いません。なので、eclipseのセットアップをする必要があります。 eclipseは3.7を使って、Mac版のAll in one eclipseはないので、以下の記事をもとに自力で作ります。 MacでPleiades All in One Eclipse - Archit!! そんなに難しくないので、手順通りに行なってください。（All in oneを求めていない方は、eclipse単体でOKです） eclipse以外に以下のものが必要になりますが、これはPhoneGapでAndroidアプリを作るための基礎知識（1/3） - ＠ITこの記事がすごく参考になります。セットアップしちゃいましょう！

Android SDK
ADT Plugin
PhoneGap（すでのiPhoneのほうでダウンロードしていますね）

Android Projectを作成し、PhoneGapに必要なファイルを配置する

eclipseの「File→New→Other」と選択し、Androidの配下にあるAndroid Projectを選択します。プロジェクトが作成されましたら、以下のようにphonegapの必要なファイルをコピーしてください。

assetsフォルダの下にwwwフォルダを作成「phonegap-1.4.1/lib/android/phonegap-1.4.1.js」をコピー index.htmlを作成

プロジェクト直下にlibsフォルダを作成「phonegap-1.4.1/lib/android/phonegap-1.4.1.jar」をコピー

resフォルダの下にxmlフォルダを作成「phonegap-1.4.1/lib/android/xml/plugins.xml」をコピー

あとは、phonegap-1.4.1.jarを右クリックしてBuild PathからAdd to Build Pathを選択します。最終的にこんな感じです。これでベースは整いました。

Android ProjectをPhoneGap仕様にする

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.hisasann"
    android:versionCode="1"
    android:versionName="1.0" >

<uses-sdk android:minSdkVersion="9" />

<supports-screens android:largeScreens="true"
    	              android:normalScreens="true"
        	          android:smallScreens="true"
        	          android:xlargeScreens="true"
            	      android:resizeable="true"
                	  android:anyDensity="true"
	/>

<uses-permission android:name="android.permission.CAMERA" />
	<uses-permission android:name="android.permission.VIBRATE" />
	<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
	<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
	<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
	<uses-permission android:name="android.permission.READ_PHONE_STATE" />
	<uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.RECEIVE_SMS" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.RECORD_VIDEO"/>
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <uses-permission android:name="android.permission.READ_CONTACTS" />
    <uses-permission android:name="android.permission.WRITE_CONTACTS" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.GET_ACCOUNTS" />
    <uses-permission android:name="android.permission.BROADCAST_STICKY" />

<uses-feature android:name="android.hardware.camera" />
    <uses-feature android:name="android.hardware.camera.autofocus" />

</manifest>

ここで一点注意ですが、uses-sdk android:minSdkVersionに9と入れていますが、これは2.3.2を意味しています。 Android SDK Managerでは2.3は2.3.3しかダウンロードできないため、ここで2.3.2を許容しておきます。（というかそもそもuses-sdk android:minSdkVersion書かなければいいのかな）

src/PhonegapActivity.java

assets/www/index.html

phonegap-1.4.1.jsファイルはjsというフォルダの中に配置しました。

何はともあれRunさせる

プロジェクトを右クリックして「Run As→Android Application」を選択します。ちょっと時間がかかります。ちょっといいなと思ったのが、一度シミュレータが起動したらそのまま閉じないでおいて、 index.htmlの修正をしても、もう一度「Run As→Android Application」をするだけです。これかなり速いです。なので、のっけのシミュレータの起動だけは結構重いですが、その後の修正点の反映は速いかもしれません。

Androidの実機での動作確認

Android端末の設定で、「アプリケーション→開発→USBデバックにチェックをつけるだけ。これで、プロジェクトを右クリックして「Run As→Android Application」を選択すると、実機側でアプリが起動する。簡単！ ■関連記事 MacOSX LionにTitanium Mobile（Studioも）をインストールしたときのメモ（2012-02-06時点） - iPhone／Android対応 ■参考リンク以下のリンク先から今回の記事のヒントを大量にいただきました。ありがとうございます！ PhoneGapでAndroidアプリを作るための基礎知識（1/3） - ＠IT PhoneGapを試してみる｜ Classmethod.dev() インストール方法(Android編) | PhoneGap Fan

PhoneGap 入門ガイド (Smart Mobile Developer)

posted with amazlet at 12.02.09

アシアル株式会社
翔泳社
売り上げランキング: 225899

Amazon.co.jp で詳細を見る

MacにGoogle日本語入力を入れている場合、VMwareFusion側のeclipseのCtrl+Shift+Rが効かない場合の対処

2012-02-07T04:20:51Z

非常に地味な話ですが、 Mac側にGoogle日本語入力をインストールしていて、かつVMwareFusion側のWIndowsにもGoogle日本語入力入れていて、 Windows上でeclipseを使う場合、Ctrl+Shift+RがGoogle日本語入力の再変換というキーボードショートカットに奪われてしまう場合の対応になります。（この需要あるのかな。。。）

VMware側のMac OS キーボードショートカットを無効にする

ちょっとこれしたくなかったのですが、eclipseでCtrl+Shift+Rが使えないのは、ラーメンを前にしてレンゲがないぐらいに大変なことなので、やるよ。僕やるよ。 VMwareFusionの環境設定→キーボードとマウスで、「Mac OS キーボードショートカットを有効にする」のチェックを外します。 Mac側の設定はこれだけ。

ソフト毎にIMEを切り替える「あいち」をWindowsに入れる

このソフトを使うと、ソフト毎にどのIMEを使うかを自動で切り替えてくれる。つまり、eclipseはMicrosoft IMEだけど、それ以外のソフトではGoogle日本語入力を使う。といったことが可能になる。 ■ダウンロードプログラミング研究所 - あいちどうやるかは以下の記事が非常に参考になる。窓の杜 - 【REVIEW】アプリケーションごとに利用するIMEを自動で切り替える「あいち」僕は、対象のソフトがアクティブになった場合に出る通知機能は無効かしました。これよりももっといい方法あるとは思うんですが、いまいちわからなかった。一個デメリットは、Windows側でCmd+Tabすると、エアロが起動してしまうこと。 Mac側のアプリ切り替えが動いて欲しいが、ショートカットを無効化してしまっているので、ここはしょうがないですね。

まとめ

VMwareFusionのMac OS キーボードショートカットを無効にする
あいちをWindowsにインストールする
eclipseの場合にMicrosoft IMEにするようにする

こんな感じですね。

VMware Fusion 4 プロモーション期間限定優待版

posted with amazlet at 12.02.07

アクト・ツー (2011-10-14)
売り上げランキング: 187

Amazon.co.jp で詳細を見る

MacOSX LionにTitanium Mobile（Studioも）をインストールしたときのメモ（2012-02-06時点） - iPhone／Android対応

2012-02-06T10:04:36Z

必要にせまられて、Titanium MobileとPhoneGapの調査が必要になったので、いろいろとメモを残しておきます。今回Titanium Mobileの解説になります。一応Titanium Mobileを入れた環境を以下に列挙しとく。

MacOS X: Lion
Java: 1.6.0_29
Titanium SDK: 1.8.1
Titanium Studio: 1.0.8

ちなみに、LionからデフォルトでJavaが入らないので、自分でSDKをインストールする必要があります。

Titanium Mobileのダウンロード（with Titanium Studio）

まずは、Titanium Studioをダウンロードします。こちらをダウンロードすると、自動的にTitanium Mobileもダウンロードされます。いろいろTitaniumのことでググるとTitanium Developerのことが検索されますが、今はもうTitanium Studioに統合されているようです。 Sign Up for an Appcelerator Developer Account にアクセスし必要な情報を入力しサインインする。あとは、Resources画面からOS X版をダウンロードする。

Titanium Studioを起動してみる

eclipseベースなので比較的見慣れたUIですが、デフォルトで背景が黒いが個人的には好き。起動すると、しばらく右下のあたりでゴニョゴニョアップデートに関する動作があるので、少し待ちましょう。すると、Titanium Studioのアップデートを促されるのでやっちゃいます。やっちゃいましょう！

何はともあれTitanium Mobile Projectを新規作成してみる

メニューの「File」→「New」→「Titanium Mobile Project」を選びます。そして以下のように必要な項目を入力していくんですが、ここで一つ問題が。 Androidのチェックボックスは、そもそもAndroidのSDKが入っていないとチェックができません。おそらくiPhoneも同様だと思います。（すでにXCodeを入れていたので未確認） iPhoneSDKに関しては目指せ！iPhoneアプリ開発エキスパート：第2回　iPhone SDKの入手と設定｜gihyo.jp ... 技術評論社の記事をご覧ください。なので、一旦プロジェクトの新規作成は置いておいて、AndroidのSDKをインストールします。

AndroidSDKをダウンロードする＋そしてSDKをインストールする

Android SDK | Android Developers からandroid-sdk_r16-macosx.zipを選びました。解凍後、/android-sdk-macosx/tools/andoroidをダブルクリックしてAndroid SDK Managerを起動します。ちなみにですが、この時点、つまりAndroidSDKはダウンロードしたけど、まだどのバージョンのSDKもインストールしていない状態で、Titanium Studioの設定で、/android-sdk-macosx/の場所を指定してもSDK自体がインストールされていないので以下のようなエラーがでます。

SDK at the given path has the following error: E...ion: No "android-8" or "android-2.2" in the Android SDK

（のちのちさらにこのメッセージの意味を知ることになるとは・・・）話をAndroid SDK Managerに戻します。今回はスマートフォンアプリの開発に使うので、2.3をインストールします。結構時間がかかりますが、気長に待ちましょう！あと僕はExtrasというところにある「Google〜〜」というのもほとんどインストールしておきました。

再度Titanium Mobile Projectを新規作成してみる

これで、ようやくiPhoneとAndroidにチェックを入れた状態でプロジェクトを作成することができます。

AndroidSDKのパスを通す（がしかし）

「Preferences→Aptana Studio→Titanium」でAndroidのパス「/android-sdk-macosx/」を指定します。このディレクトリは人によっては違うと思いますので、ご自分のパスを指定してください。ただし、これだけでは実はうまくいかない。

SDK at the given path has the following error: E...ion: No "android-8" or "android-2.2" in the Android SDK

相変わらずこのエラーが取れないのだ。まぁ、よく読むとandroidの2.2が必要だと言っているようです。とくに2.2が必要ではないんですが、このエラーを取り除くには2.2を入れるしかないので、もう一度Android SDK Managerからインストールしてください。ちなみにこの2.2というのは、最新のTitanium Studioのバージョン（2012-02-06）の場合なので、2.1を要求される場合もあるようです。

iPhone、AndroidのシミュレータでRunしてみる

やっとここまできました！では実際にシミュレータで動かしてみましょう。「Project Explorer」ペインの自分で作ったプロジェクトを右クリック→Run AsからiPhone Simulator選びます。続きまして、同じくRun AsからAndroid Emulatorを選びます。（iPhoneとは比べ物にならないくらい時間がかかります。本気です。） iPhoneではフッターにタブが表示されていますが、Androidのほうはヘッダーにタグが表示されています。（こうゆうもんなのかな？いずれわかるときが来るであろう）

いろいろサンプルが詰まっているKitchenSinkで遊んでみる

↑で試したのはたんなるタブがあるだけのサンプルですが、実際にどんなUIが出来上がるのかをいろいろ試せるKitchenSinkを使ってみましょう！なんとありがたいことに、Titanium Studioから直接このサンプルをダウンロードできます。あとは、KitchenSinkプロジェクトをRunさせるだけです。 ■KitchenSinkのgithub appcelerator/KitchenSink - GitHub KitchenSinkでだいたいのエッセンスが詰まっているので、あとはこれを応用する感じになるのかなーと思っています。（ほんといっぱいサンプルあるので、助かります）そして、実はこのプロジェクトをAndroidのEmulatorで実行すると以下のエラーが出ます。

[ERROR] Failed installing com.appcelerator.titanium: pkg: /data/local/tmp/app.apk

このエラーに悩まされて、断念された方も多々いるようですが、

結論として、Run Configuration で Android 2.2 じゃなくて、Google APIs Android 2.2 を使う。
via: 静電気日記@vg4.net : Titanium Studio for Windows 1.7.2で KitchenSink 起動させるプロジェクト。 - livedoor Blog（ブログ）

これで解決しました。とにかくTitanium Mobileでググると古い情報が上位に来てしまうので、今後この記事も同じように古くなってしまうとは思いますが、どなたかの手助けになれば幸いです。また、こちらの記事のように、初心者でも２週間でiPhoneアプリが作れちゃうTitanium Mobileがすごい件 | 株式会社インフィニットループ技術ブログ CoffeeScriptで組んでみるのも面白いかもしれません。

iPhoneの実機での動作確認

そっこうでエラーになって入らない。

[INFO] One moment, building ... Traceback (most recent call last): File "/Users/XXXX/Library/Application Support/Titanium/mobilesdk/osx/1.8.1/iphone/builder.py", line 1537, in main(sys.argv) File "/Users/XXXX/Library/Application Support/Titanium/mobilesdk/osx/1.8.1/iphone/builder.py", line 705, in main dist_name = dequote(args[7].decode("utf-8")) File "/System/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/encodings/utf_8.py", line 16, in decode return codecs.utf_8_decode(input, errors, True) UnicodeDecodeError: 'utf8' codec can't decode byte 0x97 in position 0: invalid start byte

TitaniumでiPhoneへの実機転送時にはまった件のまとめ - Titanium/Androidアプリ開発メモに書かれているように、

プロビジョニングプロファイルを指定したパスに日本語が入っている
プロビジョニングプロファイルを作るために必要な証明書に日本語が含まれている

僕はこの2個目のほうでハマった。そもそもAppleアカウントのfirstName、lastNameが日本語なのがまずかった。しかも、これはこちら側では変えられない項目なので、Developer Centerにメール（英語）で依頼する必要がある。（面倒！）そしてメールしてみた結果、

既に開発チームの一員でいらっしゃるので、氏名修正の手続きは長く、手間がかかる可能性がございます。なお、修正させて頂けることは保証できません。

ということなので、諦めてAppleIDの再取得をして、Apple Developer Programに追加してもらいました。そして再度同じことを実施して、プロビジョニングプロファイルを作成して同期してみたところ、iTunesが起動してAPPの同期でうまいことiPhoneにアプリが入りました！メモ： Titanium StudioでiPhone実機転送をする方法 | zaru blogを読むと、あまりiTunesのアップデートをおろそかにすると、エラーが出るケースがあるようです。

Androidの実機での動作確認

こっちもそっこうでエラーになって入らない。

[ERROR] Failed installing com.hisasann: pkg: /data/local/tmp/app.apk. INSTALL_PARSE_FAILED_INCONSISTENT_CERTIFICATES

いろいろ試してみたんですが、結局Application IDのところにドットを2つ使うようなIDにしたらうまくいきました。「com.hisasann.test」のように、「com.hisasann」は、なぜかダメでした。ただ、これは翌日になるとcom.hisasannでもうまいこと実機に転送されたので、いったいなんだったのか。。。とりあえず今後はドットを2つ使うようにします。 Titanium Studioで実機に転送できない at nought こちらでもドットについて言及されていました。

App Id:com.example.ti.blank
+ ドメイン名を逆さ＋適当
+ 必ずドット"."を含むこと（でないとandroidの時動かないよ）
via: Titanium Mobileセミナーに行ってきたのでそのメモ - I'm hungry

さらにちょっとややこしいのが、実機にアプリを転送しても勝手に起動してくれません。

アプリは勝手に立ち上がらないので、コンソールに「Application installed. Launch from drawer on Home Screen」と出たら、自分でアプリケーションメニューを開いて、インストールされているアプリを起動しなくては行けません。
via: Mobile Dev. (Android + Java) » Titanium Studioで作成したプロジェクトを実機にインストールする

やっとこの感覚になれてきましたが、はじめは分からないものですね。 ■参考リンク Titanium StudioでiPhoneアプリを作ろうその1 - n-channelの日記開発環境をつくるべし！ - Titanium StudioではじめるAndroidアプリ開発 yoo-s.com 今後はTitanium Studioで開発を。 | 備忘録的なブログ Titanium Studio をアップデートしたら Android SDK を認識しなくなった件 - モトクロスとプログラムと粉砕骨折と Sawalog » Titanium StudioでAndroid SDKを設定する方法 Titaniumで作るAndroidアプリ開発(Titaniumインストール～サンプルアプリ"Kitchen Sink"起動) - jitsu102の日記 Titanium Mobile 用に Android SDK をインストールする | Bowz::Notebook Titanium Mobile(with Titanium Studio)のサインアップとダウンロードの方法が変わっているようです。 - JP::HSJ::Junknews::HatenaSide

番外編 - Android開発を速くするfastdevを使ってみる

Androidのビルドはとにかく重いです。 iPhoneと比べると5倍くらい時間が掛かるような気がします。そんなAndroid開発ですが、Titanium Mobileの1.7.0からfastdevという機能がついたようです。では、それを使って何が速くなったのかを体感してみたいと思います。まずは、「.bash_profile」に以下のエイリアスを追加します。

alias titanium="~/Library/Application\ Support/Titanium/mobilesdk/osx/1.8.1/titanium.py"

そして、新規作成したプロジェクトまでターミナルで移動して、以下を打ちます。

$ titanium fastdev start & [1] 4194 $ Fastdev server already running for com.hisasann.test

なんか、すでに動いているよって言われた。。。 1.8からは自動でfastdevが動いているのかしら。なので、適当にapp.jsのコードをいじってみて、以下を打ってみました。

$ titanium fastdev restart-app Restarted app com.hisasann.test.

するとシミュレータを再起動せずにコードの修正ができました！このディレクトリに毎回移動してコマンドを打つのがちょっと面倒（ボタンがあればいいのに）ですが、これを使わない手はありません。 Titanium mobile Fastdevでアプリの変更をAndroidに即反映｜WEBデザイン Tips

追記：2012-02-16 - Adobe Unit Types.osaxエラー

/Library/ScriptingAdditions/Adobe Unit Types.osax

このような一体何に使っているか分からないスクリプトファイル？でエラーがでた場合は、 Error about unit type conversion occurs when running an AppleScript in Photoshop (Mac OS X 10.6) をもとにファイルを差し替えるとエラーが出なくなる。このワンステップも個人的には結構ハマりました。 [via] Titanium StudioでiPhone実機転送をする方法 | zaru blog

Titanium Mobileで開発するiPhone/Androidアプリ (Smart Mobile Developer)

posted with amazlet at 12.02.06

北尾雅人
翔泳社
売り上げランキング: 11403

Amazon.co.jp で詳細を見る

ブログをfacebookのOGP（Open Graph Protocol）に対応させる

2012-02-06T05:51:36Z

WordpressとMTについてですが、以下にメモしとく。そもそものOGPについてですが、ご存知のとおりいいね！ボタンを押されたときに、facebook側に対していろいろとサイトの情報を教えてあげるためのmetaタグ情報ですが、どうやらこれをちゃんとやっておかないと自分の友達のフィードに流れていかないよう。なので、これは積極的にBlogに導入するほうが無難かもしれませんね。

なぜなら『OGP』を設定しないで『いいね』ボタンをクリックすると、友人のニュースフィールドにその情報が表示されないからです。これではせっかく『いいね』ボタンをクリックされても他の人が見ることがないので広がりも少なくなってしまいます。
via: facebook いいねボタンの仕様変更?OGPの設定についてまとめました（ localeプロパティについて） | HTML5でサイトをつくろう

そんなに面倒なものでもないのでやっちゃいましょう！

OGPのmetaタグを追加する

以下はWordpress仕様で書いております。 AppIdの取得は以下の記事が参考になります。 facebook いいねボタンの仕様変更?OGPの設定についてまとめました（ localeプロパティについて） | HTML5でサイトをつくろう

OGPのmetaタグを追加する（MTに依存する箇所）

htmlタグに以下２つのxmlns名前空間を追加します

いいね！ボタンを配置する（HTML5バージョン）

今までiframe版を使っていたんですが、ここ最近HTML5版に切り替えたところすこぶる速くなりました。 HTML5版も結果的にiframeを作りますが、画面のロード後に実行されるのでレンダリングが邪魔されません。

body開始タグすぐに以下を

いいね！ボタンを設置したい場所に以下を（Wordpress版）

いいね！ボタンを設置したい場所に以下を（MT版）

この一手間でほんの少しでもPVを〜！ ■関連リンク・フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記

Facebook Perfect Guide Book

posted with amazlet at 12.02.06

森嶋良子鈴木麻里子田口和裕
ソーテック社
売り上げランキング: 448

Amazon.co.jp で詳細を見る

Vimをちゃんと使い始めてみる

2012-01-29T06:23:14Z

僕が大好きなTextMateのカラーテーマMonokai » Blog Archive » Textmate color themeのVim版があったので、もうこうなったらちゃんとやる！ Vimをちゃんとやる！ということで、とりあえずやった設定と.vimrcと.gvimrcをメモしておく。 Vimはちょいちょい使ってみてはいるんですが、すぐにTextMateやWebStormなんかに浮気して、すぐに使わなくなって、また使う頃にはコマンドほとんど覚えていない現象に陥っているので、今後は小さなtxtファイルの編集でもなるべくVimを使って行ってみようと思う。とはいえ、コーディングはTextMateになるんだとは思いますが...

vimのカラースキーマを変更する

僕はいっつもエディターをいじるときに色から入ります。色がうまいこといかないと、ヘコみます。 XXX.vimファイルをダウンロードし、以下のディレクトリに配置する。

カラースキーマの保存場所 - windowsの場合

$HOME/vimfiles/colors/

カラースキーマの保存場所 - macの場合

$HOME/.vim/colors/

colorschemeを選ぶ

新卒さんのための人気Vimカラースキーマランキング5+1(vim.org & github調べ) - 常識という迷信を参考に、molokai - A port of the monokai scheme for TextMate : vim onlineにしてみました。これはTextMateのほうで僕はこの色を使っているので、もうこれ以外考えられないです！（Monokai » Blog Archive » Textmate color theme） ■参考リンクカラースキーマの使い方 -- 名無しのvim使い

.gvimrcにcolorschemeの設定を書く

MacVim-KaoriYaでcolorschemeの設定 - 脳みそHack これ毎回ハマるんですが、MacVim-KaoriYaの設定ファイルの読み込みの順番が

MacVim.app/Contents/Resources/vim/vimrc

ホームフォルダ/.vimrc または _vimrc

MacVim.app/Contents/Resources/vim/gvimrc

ホームフォルダ/.gvimrc または _gvimrc
via: MacVim-KaoriYaでcolorschemeの設定 - 脳みそHack

なので、.vimrcに書いてもいまいちcolorschemeが反映されない。なので、.gvimrcをtouchにしてここに、

colorscheme molokai

と記載します。これでテーマがちゃんと反映されます。またカラースキーマ -- 名無しのvim使いにたくさんテーマがあるので、自分に合うのを探してみるのも楽しいかもしれません。

タブと全角スペースは色を変える

はじめ.vimrcのほうにいろいろと書いてためしてみたんですが、いっこうに全角スペースが可視化されなくてハマってて、どうやら.gvimrcに書くのがいいみたい。 Vim初心者的導入メモ 2/3 「vimrc設定」編 - ナレッジエースから

"全角スペースを視覚化 highlight ZenkakuSpace cterm=underline ctermfg=lightblue guibg=#666666 au BufNewFile,BufRead * match ZenkakuSpace /　/

を拝借。タブの表示に関しては、vimでスペースやTabなどの見えない文字を表示させる方法 - Life is Try and Errorを参考にさせていただいた。

"特殊文字(SpecialKey)の見える化。listcharsはlcsでも設定可能。 "trailは行末スペース。 set list set listchars=tab:>-,trail:-,nbsp:%,extends:>,precedes:<

上記2つを.gvimrcに追記すればOK！

Pluginを入れる

Zen-Coding

やっぱりZenがないと不便！ ZenCoding for Vim 導入方法（初心者さん向け） - sakurako_sの日記

vimのプロセス間でのコピペ

複数のvimプロセス間でコピペするためのplugin - while(1){die; respawn;} vimからTextMateへもペーストできるので便利！

vim-autocomplpop

autocomplpop.vimを入れてやったこと-vimプラグイン - rderaログを見ながら入れてみた。入力補完プラグイン。

C-pとかC-nで移動して、C-yで選択がデフォルトみたいだけど。

やはり、tabで移動したい。
via: autocomplpop.vimを入れてやったこと-vimプラグイン - rderaログ

のタブ切り替えは非常に便利。

便利機能

括弧とかダブルコート入力時に←に戻る

「もっと早く知りたかった」と思ったvimrc設定 - e2esound.com業務日誌この設定のおかげで今後のvimライフが大きく左右されるんだろうなー。を.vimrcに追記すればOK！

Esc以外でノーマルモードに戻る方法

Vimにおける Esc と Ctrl-cの違い。 - 備忘録 betaの記事を読むと、

Ctrl + c
Ctrl + [

とこの2つの方法があるようですが、Ctrl + cのほうは、ちょっとクセがありそうなので、Ctrl + [が今後活躍しそうです。でも、Escはちょっと遠いけど、慣れるとEscが一番速そう。

.vimrc

" 全般設定
" ---------------------
set nocompatible            " 必ず最初に書く
set viminfo='20,<50,s10,h,! " YankRing用に!を追加
set shellslash              " Windowsでディレクトリパスの区切り文字に / を使えるようにする
set lazyredraw              " マクロなどを実行中は描画を中断
set number
set ruler
set cmdheight=2
set laststatus=2
set statusline=%<%f\ %m%r%h%w%{'['.(&fenc!=''?&fenc:&enc).']['.&ff.']'}%=%l,%c%V%8P
set title
set linespace=0
set wildmenu
set showcmd

" コマンド補完
" ---------------------
set wildmenu           " コマンド補完を強化
set wildmode=list:full " リスト表示，最長マッチ

" syntax color
" ---------------------
syntax on
"colorscheme molokai	" .gvimrcに書かないと反映されないのでコメントアウト
highlight LineNr ctermfg=darkgrey

" search
" ----------------------
set ignorecase	" 大文字小文字無視
set smartcase	" 大文字ではじめたら大文字小文字無視しない
set wrapscan	" 最後まで検索したら先頭へ戻る
"set nowrapscan  " 検索をファイルの先頭へループしない
set hlsearch	" 検索文字をハイライト
"set incsearch

" edit
" ---------------------
set autoindent
set cindent
set showmatch			" 括弧の対応をハイライト
set backspace=indent,eol,start
set clipboard=unnamed
set pastetoggle=<F12>
set guioptions+=a

" tab
" --------------------
set tabstop=4		" tabstopはTab文字を画面上で何文字分に展開するか
"set expandtab		" タブを空白文字に展開
set smarttab
set shiftwidth=4
set shiftround
set nowrap

" backup
" --------------------
set backup
set backupdir=~/vim_backup
set swapfile
set directory=~/vim_swap
"set nobackup   " バックアップ取らない
"set autoread   " 他で書き換えられたら自動で読み直す
"set noswapfile " スワップファイル作らない
"set hidden     " 編集中でも他のファイルを開けるようにする

" doc
" --------------------
helptags ~/.vim/doc

" 文字コードの自動認識
if &encoding !=# 'utf-8'
  set encoding=japan
  set fileencoding=japan
endif
if has('iconv')
  let s:enc_euc = 'euc-jp'
  let s:enc_jis = 'iso-2022-jp'
  " iconvがeucJP-msに対応しているかをチェック
  if iconv("\x87\x64\x87\x6a", 'cp932', 'eucjp-ms') ==# "\xad\xc5\xad\xcb"
    let s:enc_euc = 'eucjp-ms'
    let s:enc_jis = 'iso-2022-jp-3'
  " iconvがJISX0213に対応しているかをチェック
  elseif iconv("\x87\x64\x87\x6a", 'cp932', 'euc-jisx0213') ==# "\xad\xc5\xad\xcb"
    let s:enc_euc = 'euc-jisx0213'
    let s:enc_jis = 'iso-2022-jp-3'
  endif
  " fileencodingsを構築
  if &encoding ==# 'utf-8'
    let s:fileencodings_default = &fileencodings
    let &fileencodings = s:enc_jis .','. s:enc_euc .',cp932'
    let &fileencodings = &fileencodings .','. s:fileencodings_default
    unlet s:fileencodings_default
  else
    let &fileencodings = &fileencodings .','. s:enc_jis
    set fileencodings+=utf-8,ucs-2le,ucs-2
    if &encoding =~# '^$euc-jp\|euc-jisx0213\|eucjp-ms$$'
      set fileencodings+=cp932
      set fileencodings-=euc-jp
      set fileencodings-=euc-jisx0213
      set fileencodings-=eucjp-ms
      let &encoding = s:enc_euc
      let &fileencoding = s:enc_euc
    else
      let &fileencodings = &fileencodings .','. s:enc_euc
    endif
  endif
  " 定数を処分
  unlet s:enc_euc
  unlet s:enc_jis
endif
" 日本語を含まない場合は fileencoding に encoding を使うようにする
if has('autocmd')
  function! AU_ReCheck_FENC()
    if &fileencoding =~# 'iso-2022-jp' && search("[^\x01-\x7e]", 'n') == 0
      let &fileencoding=&encoding
    endif
  endfunction
  autocmd BufReadPost * call AU_ReCheck_FENC()
endif
" 改行コードの自動認識
set fileformats=unix,dos,mac
" □とか○の文字があってもカーソル位置がずれないようにする
if exists('&ambiwidth')
  set ambiwidth=double
endif

" 括弧入力後に←に移動
imap {} {}<Left>
imap [] []<Left>
imap () ()<Left>
imap "" ""<Left>
imap '' ''<Left>
imap <> <><Left>

" plugin
" ---------------------
" yanktmp
map sy :call YanktmpYank()<CR>
map sp :call YanktmpPaste_p()<CR>
map sP :call YanktmpPaste_P()<CR>

" vim-autocomplpop
"<TAB>で補完
" {{{ Autocompletion using the TAB key
" This function determines, wether we are on the start of the line text (then tab indents) or
" if we want to try autocompletion
function! InsertTabWrapper()
        let col = col('.') - 1
        if !col || getline('.')[col - 1] !~ '\k'
                return "\<TAB>"
        else
                if pumvisible()
                        return "\<C-N>"
                else
                        return "\<C-N>\<C-P>"
                end
        endif
endfunction
" Remap the tab key to select action with InsertTabWrapper
inoremap <tab> <c-r>=InsertTabWrapper()<cr>
" }}} Autocompletion using the TAB key

.gvimrc

hisasann/vimrc - GitHub さぁて、Vimライフをおくりはじめますか！追伸：WindowsではPeggyというエディターをよく使っております！ ■関連リンク・vimに欠かせない３つのプラグイン | tech.kayac.com - KAYAC engineers' blog ・Vim初心者的導入メモ 2/3 「vimrc設定」編 - ナレッジエース・vimrcを晒してみる - Archiva ・ぼちぼち散歩おれの.vimrc

Vimテクニックバイブル　～作業効率をカイゼンする150の技

posted with amazlet at 12.01.29

Vimサポーターズ
技術評論社
売り上げランキング: 43182

Amazon.co.jp で詳細を見る

さくらVPSでnginxをインストールしたときのメモ

2012-01-26T17:09:48Z

極々メモ的な感じで、エントリーにしとく。

apacheのリバースプロキシ用にmod_rpafのインストール

のちのち必要になるのでまずはmod_rpafのインストールから。

wget http://stderr.net/apache/rpaf/download/mod_rpaf-0.6.tar.gz tar xvzf mod_rpaf-0.6.tar.gz cd mod_rpaf-0.6

Makefileをちょっと書き換える。

vi Makefile -APXS2=$(shell which apxs) +APXS2=/usr/sbin/apxs

makeしてみる。

make rpaf-2.0 sudo make install-2.0

apxsがないとエラーが出たので、httpd-develをインストール

httpd-develのインストール

sudo yum install httpd-devel

今度はhttpd-develを探しにいけなかったようなので、rpmを追加。

Loaded plugins: fastestmirror Loading mirror speeds from cached hostfile * base: ftp.nara.wide.ad.jp * extras: ftp.nara.wide.ad.jp * updates: ftp.nara.wide.ad.jp Setting up Install Process No package http-devel available. Nothing to do となったのでリポジトリを追加する

適当なディレクトリでwgetしてrpmファイルをダウンロードしとく。そしてrpmコマンドで登録します。

wget http://download.fedora.redhat.com/pub/epel/5/x86_64/epel-release-5-4.noarch.rpm wget http://rpms.famillecollet.com/el5.x86_64/remi-release-5-8.el5.remi.noarch.rpm wget http://packages.sw.be/rpmforge-release/rpmforge-release-0.5.2-2.el5.rf.x86_64.rpm rpm -Uvh epel-release-5-4.noarch.rpm remi-release-5-8.el5.remi.noarch.rpm rpmforge-release-0.5.2-2.el5.rf.x86_64.rpm

これで再度、

sudo yum install httpd-devel

実行したらうまく入った！

nginxのインストール

sudo yum install nginx

一応入ったことを確認しとく。

yum list installed | grep nginx

設定ファイルnginx.confの編集

nginx+apacheでちょっぴり快適なWebサーバーを目指してみる(CentOS さくらのVPS) ::ハブろぐからごっそり参考にさせていただいた！

バーチャルホストvirtual.confの編集

apacheのhttpd.confの編集

リバースプロキシを導入する際はmod_rpaf :: drk7jp mod_rpafを使ったIPアドレスのアクセス制限

apacheとnginxの再起動

sudo /etc/init.d/httpd restart sudo /etc/init.d/nginx restart

こんなこともあるみたい。

nginxを再起動させます。
注意:このとき、sudo /etc/init.d/nginx restartを使わないこと。再起動しないことがよくありました。
sudo /etc/init.d/nginx stop
sudo /etc/init.d/nginx start
via: nginx @ ウィキ - nginx　バーチャルホスト

実際にアクセスしてみる

アクセスしてみると、 /var/www/htmlに置いたhtmlはちゃんと表示されるのに、自分で作成した/home/hisasann/www/test2に置いたファイルを開こうとしても、 (13)Permission denied: access to /index.html となってしまった。原因は、途中のディレクトリのhisasannが700だったから！ apache を利用しての public_html が公開できない - 解 - いろきゅう.jp ～Programmable maiden～ Tech side [Linux]ApacheがPermission deniedを吐いてくる : うえちょこ＠ぼろぐ（結構これにハマッテいる人がいて、SELinuxというものが悪さしている場合もあるよう）これで静的ファイル「http://www28039u.sakura.ne.jp/sample.jpg」は/home/hisasann/www/test/にアクセスされ、動的ファイル「http://www28039u.sakura.ne.jp/test2.html」は/home/hisasann/www/test2/にアクセスされるようになった。まだ分からないことだらけですが、なかなか面白い！ ■参考リンクさくら VPS + CentOS のチューニングや高速化もっとこうすれば良かった作業まとめ | ウェブルさくら VPS で静的ファイルは nginx で動的ファイルは Apache で処理するための詳細設定 | ウェブル nginx+apacheでちょっぴり快適なWebサーバーを目指してみる(CentOS さくらのVPS) ::ハブろぐ軽量高速Webサーバのnginxで静的コンテンツ配信とキャッシュコントロール | KRAY Inc

ハイパフォーマンスHTTPサーバ Nginx入門

posted with amazlet at 12.01.27

Clement Nedelcu
アスキー・メディアワークス
売り上げランキング: 14072

Amazon.co.jp で詳細を見る

書評 - jQuery Mobileポケットリファレンス

2012-01-26T15:04:18Z

jQuery Mobile ポケットリファレンス

posted with amazlet at 12.01.27

森直彦
技術評論社
売り上げランキング: 6309

Amazon.co.jp で詳細を見る

技術評論社より献本いただきました。ありがとうございます！そして2012年一発目のエントリー！

この本の概要

スマートフォンやタブレットなどのモバイルデバイス向けWebフレームワークとして人気のjQuery Mobileの使い方を解説するリファレンスです。jQuery Mobileを利用すると，HTML5ベースのタグでページを記述するだけで，iPhone，iPadやAndroid，Windows Phoneなどの各種スマートフォン・タブレットに対応したサイトが構築できます。本書では，jQuery Mobileを使ったサイト制作の基本的な考え方と，jQuery Mobileが持つ，モバイルデバイスに最適化されたリッチな，各種部品の使い方をわかりやすく解説します。
via: 書籍案内：jQuery Mobileポケットリファレンス｜gihyo.jp ... 技術評論社

jQueryMobileのバージョン1がリリースされてまだ間もないですが、やっとこさ日本語の本が出始めて理解しやすくなってきたのかなと思います。 jQueryだけの知識だけでは、やはりjQueryMobileを使うこなすことは難しいので、こういったリファレンス的な書籍はありがたい。では、目次を。

Chapter 1: jQuery Mobile の基本
Chapter 2: サイトの基本設計
Chapter 3: リンク
Chapter 4: ダイアログボックス
Chapter 5: レイアウト
Chapter 6: ヘッダ
Chapter 7: フッタ
Chapter 8: ナビゲーションバー
Chapter 9: ボタン
Chapter 10: フォーム
Chapter 11: テキスト入力ボックス
Chapter 12: スライダー
Chapter 13: トグルスイッチ
Chapter 14: ラジオボタン
Chapter 15: チェックボックス
Chapter 16: セレクトメニュー
Chapter 17: カスタムメニュー
Chapter 18: リスト
Chapter 19: グローバル設定
Chapter 20: ページイベント
Chapter 21: タッチイベント
Chapter 22: 仮想マウスイベント
Chapter 23: 端末回転イベント
Chapter 24: スクロールイベント
Chapter 25: レイアウトイベント
付録 A: システム関数
付録 B: ボタンアイコン一覧
付録 C: テーマシステム

ここまで網羅してくれているとjQueryMobile全体の把握にそう時間は掛からない。

ありがたい点 - その1

$.mobile.changePage $.mobile.loadPage

といったシステム関数の引数を細かく解説してくれていること。 $.mobile.changePageの引数はアルファ時代から結構変わっているので、最新のバージョン1での解説は本当にありがたい。これ意外にも$.mobileにはたくさんの便利関数があるが、それらについても書かれている。というか知らないものも結構あったので、別ページを独自に取得したいという需要は実際かなりあるので、このリファレンスがあれば開発がしやすいだろう。

ありがたい点 - その2

拡張セレクタjqmDataについても書かれていること。これは、$.mobile.ns（ネームスペース）を加味したdata属性の取得に使うメソッドだが、これもちゃんと説明を受けないと理解できない。

ありがたい点 - その3

「自動的初期化を拒否する」というdata-role="none"や$.mobile.page.prototype.options.keepNativeについても細かく書かれています。これは、コントロール要素をjQueryMobileに装飾させないための設定です。独自デザインでサイトを設計する場合には、結構使います。

ありがたい点 - その4

仮想系のイベントについて書かれている。 vmousedownやvclickなど、一見するとなんのイベントなんのか分からないですが、こういったイベントについても細かく書かれている。また、vclickはclickイベントよりも反応が速いが、これについてのデメリットも記載されている。（これは知らなかった！） jQueryMobileを使ったことある方、まったく触ったことない方。このどちらにも本書は役にたつと思います。また著者である森直彦さんの以下のページには大変お世話になっている。 jQuery Mobile 1.0 日本語リファレンス ■関連記事 jQueryMobileのXSSに関する調査メモ jQueryMobileのかゆいところに手が届くお作法メモ jQueryMobileを使ってのスマートフォンサイトの構築メモ

iDance - Thank you Steve.

2011-10-07T01:53:51Z

webkitAudioContextを使って音とcanvasへの描画をシンクロさせてみました。あまり情報が多くなく、試行錯誤でしたがなんとかそれっぽくなったと思います。 canvasへの描画は、Paper.jsを使いました。これぐらいならライブラリを使う必要なかったのですが、Paper.jsが気になっていたのでとりあえず慣れるということで。また、今回のこのアプローチはken_c_loさんからアイデアをいただきました。画像の提供から配置までのデザインを担当してもらい、ありがとうございます！この作品をスティーブ・ジョブズ氏に捧げます。

iDance - Thank you Steve.

Chromeでご覧ください。（音が出ます） iDance - Thank you Steve. ■github hisasann/iDance - GitHub

AudioDance

こちらはiDanceの元となった作品です。スピーカー画像を使って表現してみました。是非こちらもご覧ください。 AudioDance ■github hisasann/AudioDance - GitHub

Steve Jobs

posted with amazlet at 12.01.27

Walter Isaacson
Simon & Schuster (2011-10-24)
売り上げランキング: 3

Amazon.co.jp で詳細を見る

さくらVPSにApacheをインストールする方法

2011-07-28T17:34:59Z

パッケージからインストールする

楽チン！

[root]$ yum -y install httpd [root]$ /etc/rc.d/init.d/httpd start Starting httpd: [ OK ]

自動起動にする

[root]$ chkconfig httpd on [root]$ chkconfig --list httpd httpd 0:off 1:off 2:on 3:on 4:on 5:on 6:off

3がonになっていればよい。

[root]$ chkconfig --list

これで自動起動の設定を確認できる

Apacheのバージョンを確認する

[root]$ rpm -qa httpd

あとはhttpでアクセスしてApacheの画面が表示されてばOK！ [via] 26.3. chkconfigコマンドによる自動起動の設定

さくらVPSを使うときの初期設定メモ

2011-07-28T17:29:54Z

むちゃくちゃザックリとして内容ですが、自分のために一応メモしとく。

何はともあれ接続する

パスワードはさくらインターネットから送られてくるメールに記載されている初期パスワードを入力する。

[makbook]$ ssh root@IPアドレス

真っ先にrootのパスワード変更する

[root]$ passwd Changing password for user root. New UNIX password: Retype new UNIX password: passwd: all authentication tokens updated successfully.

続いて今後メインに使っていくことになるユーザーを作成する

[root]$ useradd username[Enter] [root]$ passwd username[Enter] Changing password for user username. New UNIX password:[新しいパスワードを入力] Retype new UNIX password:[新しいパスワードを再入力] passwd: all authentication tokens updated successfully. [root]$ usermod -G wheel username

MacBookでSSH接続用のRSA鍵を作成する

[makbook]$ ssh-keygen [Enter] Generating public/private rsa key pair. Enter file in which to save the key (/Users/username/.ssh/id_rsa): [Enter] Enter passphrase (empty for no passphrase): [好きなパスワードを入力] Enter same passphrase again: [好きなパスワードを再入力] Your identification has been saved in /Users/username/.ssh/id_rsa. Your public key has been saved in /Users/username/.ssh/id_rsa.pub.

作成したRSA鍵をサーバーにSCPでコピーする

[macbook]$ cd .ssh [macbook .ssh]$ scp id_rsa.pub [username]@[IPアドレス]:~/ [username]$ mkdir .ssh [username]$ chmod 700 .ssh [username]$ cat id_rsa.pub >> authorized_keys [username]$ mv authorized_keys .ssh/ [username]$ cd .ssh [username .ssh]$ chmod 600 authorized_keys

MacBookからSSH接続の確認をする

ターミナルから、以下を入力する。

ssh username@IPアドレス

初回はRSA鍵を作成した時のパスワード入力を促されるけど、2回目からは聞かれない。

sudo設定の変更

作業用ユーザで sudo ができるよう設定を変更します。

[root]$ visudo %wheel ALL=(ALL) ALL //コメントアウトを外す

サーバーのSSH設定の変更

[root]$ vi /etc/ssh/sshd_config PermitRootLogin no # rootログイン禁止（一応明示的に） PasswordAuthentication no # パスワードでログイン禁止（公開鍵暗号オンリー） [root]$ /etc/init.d/sshd restart

sudoのログを取る

[root]$ touch /var/log/sudo [root]$ chmod 600 /var/log/sudo [root]$ visudo ### 末尾に以下を追記 Defaults syslog=local1 [root]$ vi /etc/syslog.conf local1.* /var/log/sudo # 追加 local7.* /var/log/boot.log #*.info;mail.none;authpriv.none;cron.none /var/log/messages # コメントアウト *.info;mail.none;authpriv.none;cron.none;local1.none /var/log/messages # 追加 [root]$ /etc/init.d/syslog restart [root]$ tail /var/log/sudo Apr 17 04:55:55 www28039u sudo: username : TTY=pts/0 ; PWD=/home/username ; USER=root ; COMMAND=/bin/su -

SSHポート番号を変更する

[username]$ sudo vi /etc/ssh/sshd_config #Port 22 Port 10022 [username]$ sudo /etc/init.d/sshd restart Stopping sshd: [ OK ] Starting sshd: [ OK ] [makbook]$ ssh username@IPアドレス -p 10022

文字コードを日本語にする

[root]$ vi /etc/sysconfig/i18n LANG="ja_JP.UTF-8"

に変更して、ログアウトしてログインする [via] さくらのVPS（CentOS）で文字コードを日本語にする方法（もしくはlessで文字化けさせない方法） | IDEA*IDEA

パッケージのアップデートをしとく

Cent OSをインストールした後、「yum update」を行う前に必ず「yum install yum-fastestmirror」すること - Future Insightに書かれているように、

yum install yum-fastestmirror

をやったらすでにインストールされてるって言われた。

[root]$ yum -y update

■参考リンクさくらのVPS を使いはじめる | アカベコマイリさくらVPSにMacでSSH接続する初期設定 @ Eyes of Bastet 「さくらのVPS」借りてみた（作業ユーザー作成，SSH設定） - Rubellum fly light myfinder's blog: さくらのVPSを借りたら真っ先にやるべきssh設定【syslog】sudoのログを分ける - nullpopopo AKIBE - さくらのVPS CentOSでサーバ構築 2 - User

jQueryMobileのXSSに関する調査メモ

2011-06-27T06:33:44Z

今回の原因

#1789: jQuery Mobile XSS Problem by jnlin for jquery/jquery-mobile - Pull Request - GitHubに書かれているXSSが今回の内容。これは以下のようなhash値をjQueryMobile側のhashchangeイベントがキャッチし、 $()関数にhash値を渡すところで発生するよう。 jQueryMobileの2488行目あたりの以下のコードがそれ。このコードは2360行あたりにも存在する。そして今回のjQueryのXSSに関する詳しい内容はmalaさんの記事を参考。 jQueryにおけるXSSを引き起こしやすい問題について - 金利0無利息キャッシング - キャッシングできます - subtech new XSS pattern with jQuery

jQueryMobileのXSSデモUrl

以下のURLを表示するとalertが表示されるのが分かる。 ■1.0a4.1 jQuery Mobile: Demos and Documentation またbeta1のほうでは、がなくなっており、hash値にimgタグを渡しても発生しない。 ■1.0b1 jQuery Mobile: Demos and Documentation

jQueryのバグチケットを見てみる

#9521 (XSS with $(location.hash) and $(#) is needed?) - jQuery Core - Bug Tracker ここに書いてある解決策である、はうまくいかなかった。これはコメント欄を読むと分かるが、「$("anychar")」こうゆうパターンのときにダメのよう。（何か他にも修正箇所が必要なのだろうか...）

malaさんのパッチを当てる！

ほんとありがたいことですが、こちらのパッチを使ってみたところうまくいきました！ quick patch script for jQuery http://bugs.jquery.com/ticket/9521 -- Gist こちらのPerlコードは、今回の問題になっているjQuery変数のquickExprの内容を書き換えるものになります。このパッチには過去古い時代のjQueryのquickExprも含まれているが、とりあえず以下に該当のバージョンのパッチを列挙してみました。 beta1のほうにバージョンアップできる場合は良いのですが、アルファ版とbeta版ではかなり動きや設定も違ってくるので、すぐに対応は難しいと思います。 jQuery MobileにXSSの脆弱性が見つかったのでアルファ版からベータ版に変更する際の注意点[to-R] とりあえずまだ他のXSSがあるかどうかや今回の件に関する不具合がすべて取り除かれたかの動作確認は出来ておりませんが、まずはjQuery側を修正し、動作検証をして様子を見てみようと思います。

jquery1.2.6時代のquickExpr用

jquery1.4.2時代のquickExpr用

jquery1.5時代のquickExpr用

いやはや、なかなか難しいもんですなー！ ■参考リンク・Twitter / @bulkneets: 冗談みたいな話ですけど旧バージョンのjQuery m ... ・Twitter / @bulkneets: jQuery mobileのbeta 1がリリースさ ... ・Twitter / @bulkneets: 旧バージョンのjQuery Mobileはじめ多くの ...