iOS/Androidで フレームワークを使わない クロスプラットフォーム開発

!

@takaaki024

自己紹介• twitter: @takaaki024

• 024は苗字です

• 作ったアプリ

• choical etc.

• choical 開発時に採った方法がちょっと変わっているので今回紹介

• 普段は業務系？プログラマ

• アプリ開発は趣味でやってます

目次• 作ったアプリ

• choical について紹介

• クロスプラットフォーム開発

• どんな方法があるのか、どんな方法をとったのか

• コード例

• とった方法の利点

• コード的なこと

• テスト的なこと

choical• 日本語をパースして、予定登録をするアプリです

!

!

!

choical• 日本語をパースして、予定登録をするアプリです

!

!

!

クロスプラットフォーム開発！

• ・・・というのに憧れて、iOS版を作ったあと、Android版を作ってみました

• (たぶん) 一般的でないやり方なので、紹介してみたくなったしだいです

クロスプラットフォーム開発！といったら・・ (1)

• HTML5 ？

• PhoneGap ？

• Titanium Mobile ？

• Xamarin ？

クロスプラットフォーム開発！といったら・・ (2)

• HTML5 は・・・

• UI 作りこみが面倒そう

• PhoneGap, Titanium Mobile, Xamarin は・・

• フレームワーク覚えるのめんどい

• 各SDKのバージョンアップについてくるだろうか？

• お金かかる

• UI Kit も AndroidSDKもライブラリそのものがきれいだ。直接触りたい

選んだ方法

• ロジックを JavaScript で書いて、WebKitに実行させる

• カレンダー登録とかUI関連は各SDKを使う

iOS版のコード• UIWebView の stringByEvaluatingJavaScriptFromString

!

!

!

!

• 結果が戻り値で取れる。

• 同期

!// (1) クラス定義を読み込む [webview stringByEvaluatingJavaScriptFromString: @"....."]; !// (2) 入力をわたして結果を受け取る NSString* str = [webview stringByEvaluatingJavaScriptFromString: [NSString stringWithFormat: @"(new ChoicalEvent('%@')).toData()", eventStr]];

Android版のコード• WebView の loadUrl

!

!

!

!

!

• 結果は戻り値では取れなくて、Java側で続きを実行したいときは、JavaScriptからJavaを呼ぶ。非同期。

!// (1) JSから呼ばれるJava側の関数を定義 JsObject js = new JsObject();webview.addJavascriptInterface(js, "AndroidJS");!// (2) JavaからJSを呼ぶ String js1 = "...";String js2 = "var choi = new ChoicalEvent('" + eventStr + "');";String js3 = "AndroidJS.addEvent(...);"; // (3) JSからJavaを呼ぶ webview.loadUrl("javascript:" + js1 + js2 + js3);

余談：カレンダーAPI• iOS は、EventKit というライブラリを使って予定を登録

• Android は、intent という仕組みでカレンダーに予定を登録させた

• intent は iOSでいうURLスキームみたいなやつで、 他のアプリに仕事を依頼できる仕組み（という理解）です

余談2：他力本願型開発

• EventKit や AddressBook APIを使って、自分ではデータを持たずに、標準アプリに仕事をさせるという仕組みが好きです。

• どうでもいい話ですが。

JavaScript部分(1)• こんなかんじで1行で書いてます

!

!

!

!

JavaScript部分(2)• うそです。別ファイルで管理してます

• でスクリプトで1行に変換して Xcode と Eclipse に貼り付けてます

!

!

!

!

!

JavaScriptでやるメリット(1)

• ロジックと UI のコードが分離できる！

• UI 周りのコードに集中できて良い（というほどUIなにもやってないけど）

• 正規表現が簡単

• '20140428'.replace(/(....)(..)(..)/, '$1年$2月$3日');

• 日付処理でテキトウを許してくれる

• var d = new Date('2014/04/32'); // => 5/2 と認識される

JavaScriptでやるメリット(2)

• ブラウザでテストが出来る

• ということはWindowsで開発しても良い

• EmEditor が使えてうれしい

テストについて(1)• console.debug(), console.error() → いまどきのブラウザだとログが出せる（Safari, FireFox, Chrome）

!

!

!

!

テストについて(2)• console.error() の出力は赤く出て件数も出るので、テスト実施に良い

!

!

!

• 現在300ケースぐらい

• リグレッションテストが簡単

• テストケースに守られてる感じがいいですね

!assertEquals(new ChoicalEvent('9月9日から11日社員旅行', '2011/05/22 16:52'), '2011/09/09 (金) ～ 2011/09/11 (日) [終日] : 社員旅行'); assertEquals(new ChoicalEvent('なのかじゅうにじ歯医者', '2011/05/22 16:52', '2011/06/07 (火) 12:00:00 ～ 2011/06/07 (火) 13:00:00 : 歯医者'); assertEquals(new ChoicalEvent('あすあさ 荷物受け取り', '2011/05/22 16:52'), '2011/05/23 (月) 07:00:00 ～ 2011/05/23 (月) 08:00:00 : 荷物受け取り');

demo

テストについて(3)• Chrome だとJavaScriptプロファイラがついてる！

!

!

!

!

追記• 最近、新しいAndroid端末のひとから「動かない！」というレビューや問い合わせがくるなあと思ったら、、

!

!

追記• 最近、新しいAndroid端末のひとから「動かない！」というレビューや問い合わせがくるなあと思ったら、、

• 問い合わせの人が「Android4.4 から WebView のエンジンがWebKit から Chromium に変わったよ！」と教えてくれた・・=> 鋭意調査中・・

まとめ• クロスプラットフォーム開発のフレームワークのオススメは特にありません

• 調べてもないってだけです。どのフレームワークも否定してません

• 画面遷移が少なくて文字列処理が中心ならWebKit(とChromium) + JavaScript使用がオススメ！

• choical のような単機能アプリでしか恩恵にあずかれないかもしれません

• もしロジックを JavaScript で書いたならPC上でブラウザでのテストがオススメ！

• Chrome では profile もできる！