mixi engineer blog

*** 引っ越しました。最新の情報はこちら → https://medium.com/mixi-developers *** ミクシィ・グループで、実際に開発に携わっているエンジニア達が執筆している公式ブログです。様々なサービスの開発や運用を行っていく際に得た技術情報から採用情報まで、有益な情報を幅広く取り扱っています。

Titanium? いいえ、Triainaです。

どうも、5ヶ月ぶりのブログ投稿です、佐野です。僕は2012年8月よりメッセージユニットに加わり、主にiPhone公式クライアントにおけるメッセージ機能の改修に携わっておりました。

mixi Touch(スマートフォンブラウザ版)では2012年10月より一部のユーザに向けてmixiメッセージにおけるリアルタイムコミュニケーションを実現するための新UIを提供しておりました。この機能が近いうちに mixi の iPhone版、Android 版 公式クライアントでも利用できるようになります。

 
triaina1.png
(画面は開発中のイメージです)

この新機能は Triaina という自社製のフレームワークによって、iPhone版・Android版共に、WEB版と共通の HTML+JS コードを利用して作られています。


こういうと「Triaina? PhoneGap や Titanium と何が違うの?」とか「Facebook も HTML5 の採用を失敗と認めてたけど?」などといったツッコミを受けることになるだろうと思いますが、Triaina はこの辺りの技術が目指す「ネイティブコードを書かず、HTML+JS だけでクロスプラットフォームにコードを記述できること」を目標とはしていません。


Triaina は「ネイティブコードで書いた方が良いものはネイティブで書いて、それ以外は HTML+JS でできるだけコードを共通化しよう」という少し緩めなスタンスで、Web / Native 間の JSON-RPC ベースの通信プロトコルを提供します。


...実例を見てみましょう!


新UIにおけるメッセージスレッド画面は、スレッド表示部分が Web で、入力バーが Native で作られています。以下に画面表示からメッセージ送信までの Web / Native 間のやり取りを示します:


triaina3.png

(1) system.device.status {status: "opened"} ... Triaina準備完了を通知
(2) system.web.status {status: "available"} ... 通信経路の確立を通知
(3) jp.mixi.message.send {body: "メッセージ本文"} ... メッセージ本文を送信
(4) jp.mixi.message.notification.post {type: "message-sent"} ... メッセージ送信完了を通知


Native (iOS) と Web (HTML+JS) の実装も少し見てみましょう。
(3) 送信ボタン押下時の Native 側の実装はこんな感じです:

 
// 送信ボタン押下時のアクション
- (void)sendButtonTapped:(id)sender {

    // 入力内容を取得してパラメータを作る
    NSDictionary *params = @{@"text": _inputBar.textField.text};

    // Triaina 経由で Web にメッセージ送信
    [self.triainaAdapter 
     sendMessageToWebWithDest:@"jp.mixi.message.send" 
     params:params];
}


これを受ける Web 側では、この API コールを observe してコールバックを登録しています:

// メッセージ送信 API 呼び出し時の callback を登録
WebBridge.observe("jp.mixi.message.send", function(notify) {

    // サーバにメッセージを送信し、完了後にコールバックを呼ぶ
    sendMessage(notify.params.text, function() {

        // Native に送信完了を通知
        DeviceBridge.notify("jp.mixi.message.notification.post", {
            "type" : "message_sent"
        });
    });
});


メッセージ送信後のコールバックで(4)の通知が送られています。
それを受ける Native 側のハンドラはこんな感じになってます:

// jp.mixi.message.notification.post のハンドラ
- (void)handleJpMixiMessageNotificationPostRequestWithParams:(NSDictionary *)params bridgeId:(NSString *)bridgeId {

    // 画面更新処理など

}


ね、簡単でしょう?


このように Triaina がフレームワークとしてやっているのは、Web / Native 間の通信の仲立ちだけです。それだけで WebView を埋め込んだだけのアプリでは実現できないようなインタラクティブなUIが、共通の HTML+JS のコードの上で実現するようになります。そしてこれは Web版 に加えて、iPhone / Android のネイティブコードで同等の機能を開発するのに比べて、遥かに低コストで済みます。


もちろん、すべての機能をネイティブコードで完璧に実装したほうが品質の高いプロダクトは作れます。しかしウェブサービスの開発において大切なのは、限りなく多様で絶え間なく変化するユーザニーズに応えうるプロダクトをいかに迅速に提供できるかであり、それには TRY & ERROR による試行錯誤が不可欠です。


入力/選択系のUIをネイティブで用意しておけば多くの機能はウェブ側のアップデートだけで済むので、そうすれば各プラットフォームで同時に新機能をリリースできるようになり、大雑把に言えば 1/3 の開発期間で 3倍 のフィードバックが得られるようになります。A/B テストなんかもグッとやりやすくなるでしょう。


と、良いことだらけのように書きましたが、実際にこのフレームワークが有効かどうかはプロダクトの規模や開発体制などに大きく依ると思います。当社のように技術者の多くがウェブサイドのエンジニアで、規模の大きなサービスを各プラットフォームで提供している事業者にとっては、非常に強力なフレームワークの一つになるでしょう。


...というわけで!!!


Triaina、なんと一般公開です!


以下の github レポジトリに、JavaScript・iOS・Android のライブラリが入ってます。まだドキュメントも何もない状態ですが、興味のある方は手探りで使ってみて頂いて、ご意見など頂ければ幸いです。


https://github.com/mixi-inc/triaina


それでは、少し早いですが、良いお年を。
またお会いする日まで、ご機嫌よう、さようなら!