Android用Facebookブラウザをわりとガチで Tizen に移植した感想など

この記事は Tizen Advent Calendar 2013 に参加予定の記事です。

どうもこんにちは。すっかり師走ですね。

Tizen関連で初めて来た方もいると思うので簡単に自己紹介すると、Android向けのSNS 専用ブラウザ *1を作って(主に広告収入で)生活しているフリーランスのおっさんです。おかげさまでフリーランスになって今月で丸2年が経ちました。

今回は Tizen 向けに Facebook 専用ブラウザを Android から移植した感想などをつらつらと書いていきたいと思います。無駄に長くなったのでさらっと流して読んでもらえればｗ

はじめに

今からおよそ1ヶ月前、それまで作っていたアプリ(TwitterクライアントTwitPane)がひとまず実用レベルになったので何か別のアプリを作ろうかと思っていたところで、ちょうど Tizen App Challenge の存在(と期限延長)を知りまして、にわかに(主にdisられて)知名度を上げているTizenプラットフォームに挑戦してみよう、と思ったのがきっかけでした。

Tizen App Challenge の期限は 2013/12/8(日) ということでほぼ1ヶ月ほどしかなかったわけで、Androidアプリを移植することにしました。

ターゲットとしては直近に作っていたのと同じTwitterクライアントも考えたんですが、どうせ世界中で山ほど量産されているであろうことは明らかなので、ここはあえてFacebookブラウザの移植にしました。

ちなみにFacebookのAPI(Facebook Graph API)はクソめんどくさいし、カジュアルに仕様変更するし、ドキュメントはすぐパーマリンク切れるし、このAPIをごにょごにょして専用ブラウザに仕上げるのは普通の精神の持ち主であれば容易に発狂する世界なので、・・・たぶん競合は少ないんじゃないかと思っています。APIの呼び方を実アプリのコードとして知ってるだけのアドバンテージはあるかと。。

Tizen Native or Web App

Tizen には大きく(C++でコーディングする)Native Appと(HTML5でコーディングする)Web Appがあるわけですが、今回は期間が1ヶ月ほどしかないということで Web App にしました*2。

最初の数日は Tizen Web UI Builder ベースで作っていたんですが、HTMLとかjsをXMLから生成する分かりにくい仕様で、いえ別にそれ自体は C#/Visual Studio とかで自動生成のcsファイルと開発者が弄るcsファイルに分かれてるようなよくあるフレームワークではあるんですけど、無駄にHTMLとjsファイルが大量に作られるしUI Builderで作れるウィジェットしかおけないようなので制限が強すぎてやめました。

というわけで Tizen Web UI Framework で作ることにしました。これは jQuery Mobile (jQM) ベースの Tizen カスタマイズ版フレームワークみたいな感じですかね。某掲示板曰く「jQMを魔改造」されてるフレームワークなので色々と予想外の挙動に苦労しました。

Facebook の認証について

Facebook の JavaScript API を使うんですが、Facebook の公式 JavaScript ライブラリは利用元HTMLファイルがWebサイト上にあることを要求する(そのドメイン名をFacebookの開発者コンソールで設定する)ので、実質的にlocalhostで動作する Tizen の Web App では利用できませんでした。

で、このあたりを参考にまぁ色々とごにょごにょして解決しました(別に面白くないので割愛します。。)

画面遷移とか複数ページ対応とか

jQuery Mobile 自体の画面遷移を学ぶとなかなかよく出来ていて、この制御に苦労しました。

というのも、Facebookアプリではリスト系一覧画面を「NewsFeed」とか「○○さんのフィード一覧」とか「通知一覧」とかで使い回したいので、いわば「自画面遷移」が必要になるんですが、ページにパラメータを渡してバリエーションを作るのに一工夫必要でした。

pagebeforeshow イベントで次のような感じでパラメータを取得して画面の種別を判定する感じですね(このあとにさらにcurrentUrlParams.searchをパースする処理も必要です)。

    onpagebeforeshow : function(e, d) {
        var currentUrl = $.mobile.activePage[0].baseURI;
        var currentUrlParams = $.mobile.path.parseUrl(currentUrl);
        ...

jQM の流儀なんだと思いますけど、こういうところだけでも丸1日ほど情報を探して試行錯誤してしまいました。
ほんと Tizen Web UI Framework の開発って、解決策が HTML5(JavaScript)/jQuery/jQuery Mobile/Tizen API のどのレイヤーになるのか調べるのが大変ですね。これに Type Script とか coffeescript とか、あるいは backbone.js のようなフレームワークを導入したらもっとレイヤーが深くなって、コーディング・デバッグが大変になると思うんですよね。でもまぁフレームワークってそういうもんなので、使いたい方は是非頑張ってくださいｗ

サイドメニューの話

Facebookの(iOS/Android)公式アプリが採用して広まったと言われるサイドメニュー(サイドナビゲーション)ですので、今回私が作成するFacebookアプリでも採用することにしました。

どうやらサイドメニューは jQM 1.3 で panel としてサポートされているらしいんですが、Tizen 2.2 は jQM 1.2 ベースなので利用できませんでした。しかも Tizen 2.2.1 は jQM 1.3 になったぜ *3って書いてあるけど、エミュレータで実ファイル調べてみても jQM 1.2 だったからまじ残念です。魔改造の本領発揮ですねぇ。。

というわけでサイドメニューを扱うライブラリを探すことになったんですが、スマートフォン向けページでサイドメニューを実装する方法比較を参考に比較した結果、Sidrを採用しました。

でも、そのまま普通に導入・実装するとタッチではスクロールしてくれないので CSS の "-webkit-overflow-scrolling: touch" を記述したりしてなんとかエミュレータではスクロールできるようになりました。が、シミュレータではスクロールバーが出るだけでなんだか微妙な感じです。シミュレータでもリスト部分はタッチスクロールできるんですけどね。早く jQM 1.3 ベースになってくれればいいのにねー。

戻るキー制御とか

Tizenには物理キーとして「Menu」「Home」「Back」「Power」「Volume Up」「Volume Down」が用意されるようです。このうち、MenuキーとBackキーについては後から(今年7月リリースのTizen 2.2で)追加されたキーだからか(参考記事)、フレームワークとしてのサポートが正直雑ですw

言ってみれば「JavaScriptのイベントだけ用意しておくので実装は適当にやってね」というレベルです。
なので何も記述しないとMenuもBackも無反応です。バグですね。なにこれっていう。

で、Menuキー押したらサイドメニュー出したり、Backキー押したらちゃんと前の画面に戻ったりする処理をコツコツ書きました。jQMの画面遷移制御がめんどくさかったです。

var commonBackLogic = function(e) {
    try {
        if ($.mobile.urlHistory.activeIndex <= 0) {
            // if first page, terminate app
            window.tizen.application.getCurrentApplication().exit();
        } else {
            // move previous page
            $.mobile.urlHistory.activeIndex -= 1;
            $.mobile.urlHistory.clearForward();
            window.history.back();
        }
    } catch (ex) {
        window.tizen.application.getCurrentApplication().exit();
    }
};
...
    /**
     * hwkey
     */
    onTizenhwkey : function(e) {
        
        var keyName = e.originalEvent.keyName;
        
        if (keyName === "menu") {
            var page = $(".ui-page-active");
            page.find("#footerMenuButon").click();
        }
        if (keyName === "back") {
            
            // sidr開いていたら閉じる
            if (main_page.sideMenuOpen) {
                $.sidr('close', 'sidr');
                return;
            }
            
            commonBackLogic(e);
        }
    },

Dynamic Box 対応

Tizen の記事を見るとよく出てくる Dynamic Box (Dropboxみたいだよねw) についても対応してみました。

Androidのウィジェット、WindowsPhoneのタイルのような感じですかね。普段はボックス型のアイコン(上記画面の上側の四角い部分)で、サイズを変更できたり、素早く下方向にスライドさせると詳細情報が表示される(上記画面の下側)ような UI です。

アプリとしては「ボックス」と「詳細情報(ドロップビュー)」を個別のHTMLとして作る感じで、アプリ本体とPreferenceやファイルなどで連携するようにしてみました。

某記事曰く、TizenのホームがDynamic Box対応になるらしいんですが、そんなホームアプリはSDKに存在しないので実機でどうなるのかすごく楽しみです。

Tizen Store について

まだ世界中で一台も商用端末が存在しないのになぜかストアが存在します。そしてTizen App Challengeはこのストアの審査に合格することが応募条件になっています。端末リリース時点でのアプリを充実させることを目的にしているわけですね。

審査はわりとゆるめですが、これまで8回申請して(同一アプリのアップデートが7回あったということ)、結果2回rejectされました。その理由は「(通信できない/ログインできない場合に)動作しない」「スクリーンショットに不適切な文言がある」というものでした。修正するのは簡単ですが、全部英語で説明しなきゃいけないのが若干めんどくさかったですね。Apple の App Store とは比べものにならないんでしょうけどｗ

審査自体は最短で当日〜数日(最長でも3営業日)で通りました。

で、Tizenどうよ？

ちまたの噂では docomo が Tizen 端末 SC-03F を発売するらしいので楽しみではあるんですが、エミュレータを触った限りではどこが使いやすいのかさっぱり分からないし、開発者としてもユーザーとしても正直ほとんど面白さを感じていません。むしろ商用端末でどれだけ進化するのか楽しみです。

iOSやAndroidは既に数年前からレッドオーシャンなので、開発者としてはブルーオーシャンに向かうのは当然なんですが、Tizenはむしろ「海かと思ったら湖だった」くらいの感覚だと思っています。サロマ湖のように海につながっているといいんですけどもー。

あと、「画面遷移とか〜」にも少し書きましたが、フレームワークの階層が深いので慣れるまでは案外大変だと思います。「Tizenアプリ開発はHTML5ベースだから簡単です」なんていう言葉にはだまされないようにしましょう。Chrome由来のデバッグツールは確かに強力ですし、HTML5への準拠度もすごく高いので開発効率が高いのは間違いないですが、「Web開発に不慣れなiOS/Android アプリ開発者」にとってはただただ迷子になるだけの辛い道のりです。ネットの情報も少ないですし。でもその分チャンスなのかもしれませんけどー？

ちなみに開発時には下記の本を参考にしました。