BT

Tabris.js: JavaScriptでネイティブモバイルアプリを作る

| 作者: Sergio De Simone フォローする 17 人のフォロワー , 翻訳者 徳武 聡 フォローする 0 人のフォロワー 投稿日 2015年6月9日. 推定読書時間: 7 分 |

原文(投稿日:2015/05/26)へのリンク

Tabris.jsはネイティブのiOSとAndoroidアプリを完全にJavaScriptで開発するためのオープンソースモバイルフレームワークだ。EclipseSourceによれば、高性能、高速な開発サイクルを実現し、Cordovaのようなサードパーティのプラグインをサポートする。

Tabris.jsはProgressBar、CheckBox、Canvasのようなネイティブウィジェットのおかげで、ウェブビューを使う必要がなくなっている。このようなウィジェットはJavaScriptがネイティブブリッジに描画する。Tabris.jsはnodeのモジュールやCordovaのプラグインなど、既存のJavaScriptライブラリを使える。

InfoQはこのプロジェクトのリーダであるHolger Staudacher氏に話を聞いた。

この数年で、数多くのクロスプラットフォームモバイル開発を可能にするツール(Appcelerator、Xamarin、Tabris、Tabris.js、NativeScriptなど)が急成長しています。これらとTabris.jsとは何が違うのでしょうか。

約5年前、私たちはTabrisでモバイルマーケットに参入しました。TabrisはJavaを使ったクロスプラットフォームのアプリ開発フレームワークです。この5年で、私たちはユーザが望むもの、望まないものについてたくさんの経験をしました。ユーザとの対話から、ほとんどのユーザが現在マーケットにあるソリューションに満足していないことがわかりました。複雑なフレームワークにうんざりしていたのです。また、小さなアプリケーションでしかうまく動作しないソリューションもあります。そして、最悪なことにほとんどのクロスプラットフォーム開発フレームワークはユーザエクスペリエンスがひどいのです。これがTabris.jsで変えたいと思っていることです。

Tabris.jsは最初から、簡単に理解でき、ユーザにネイティブと同等のエクスペリエンスを提供する高速なフレームワークを提供することを目的にしていました。この目的を達成するためにはアーキテクチャが重要です。クロスコンパイルはしません。ウェブビューも使いません。ほかのフレームワークとの大きな違いは下記の通りです。

  • 高速な開発サイクル

Tabris.jsのアーキテクチャはJavaScriptのコードをパッケージ化することができます。また、実行時に動的に読み込みます。この特徴は"Tabris.js Developer App”を提供するのいん利用しています。このアプリはネイティブのものを一度にコンパイルせずに独自アプリの開発ができます。開発マシンのHTTPサーバを起動し、コーディングを始めればいいのです。開発アプリを搭載したコンピュータにURLを入力すれば、アプリの再コンパイルや再起動なしでコードを読み込むことができます。これによって開発スピードは劇的に向上します。ネイティブコードのコンパイルが必要なのは、アプリストアにリリースする時かCordova/Phonegapプラグインを追加する時だけです。

  • Cordova/Phonegapプラグイン

Tabris.jsはスタンドアロンのフレームワークです。サードパーティのライブラリを使う必要はありません。しかし、私たちは再開発よりも統合のほうが良いと考えています。独自のプラグインシステムを導入したり、独自のプラグインを数百も開発する理由があるでしょうか。すでに使えるものを再利用すればいいのではないのでしょうか。私たちはTabris.jsでApache Cordovaのサポートを追加しました。このサポートには、プラグインとともに、Cordova CLIを使ったアプリも含まれています。Cordovaのプラグインならなんでも使えます。Cordovaのウェブビュー(私たちはHTML5アプリを開発するのではなく、ネイティブアプリを開発するので)を使う必要がありません。Cordova CLIを使ってアプリを構築することができるのです。この統合を理解するには、Tabris.jsをネイティブUIのためのCordovaと見なせばいいかもしれません。

  • ウェブAPI

モバイルマーケットに参入する前、私たちはウェブでクロスプラットフォームソリューションを展開していました。ウェブアプリがパワフルなのは、既存のライブラリを活用できるからです。ウェブアプリでJavaScriptのライブラリを探し使うのは簡単です。これをモバイルアプリの世界でも実現したいと思っていました。Tabris.jsでこれを実現したのです。Tabris.jsは、window、XMLHttpRequest、HTML5 CanvasのようなJavaScriptのブラウザAPIを使います。ダイレクトに使うこともできますし、ライブラリ経由でも使えます。Chart.jsが良い例です。ブラウザ内でチャートを描画する優れたライブラリなのですが、Tabris.jsでも使えます。ブラウザ内で描画するのではなく、ネイティブウィジェットで描画します。既存のライブラリが使えるのはとても重要です。CommonJSモジュールシステムを使えるようにしたのもこのためです。Tabris.jsのJavaScript APIはモジュールとしても利用できますし、npmレジストリとして発行もできます。アプリをモジュールとして構造化し、既存のnpmモジュールを再利用することもできるのです。

JavaScriptからネイティブへのブリッジについて、そして、ウィジェットの動作についてもう少し詳しく教えてください。

Tabris.jsのアーキテクチャはとても簡単です。ふたつの部分でできています。JavaScriptサイドとネイティブサイドです。ユーザのアプリはJavaScriptで書かれています。そして実行時にコードからJSONのメッセージが発行されます。ネイティブの部分がそのメッセージを解釈し、それを元にUIを生成します。その後のユーザとUIのやりとりもコード実行を伴います(イベントのハンドリング)。コードはJSONメッセージを生成し、上記で説明した処理がまた恥めります。つまり、ネイテゥブウィジェットはJavaScriptのコードから“遠隔制御"されていると言えるでしょう。クロスコンパイルもウェブビューも不要です。JSONによる抽象によって複数のプラットフォームで動作するのです。現時点では、iOS、Androidで動きます。BlackBerryやWindows Phoneで使えるようにするに特にハードルはないです。将来はこれらのプラットフォームにも展開する予定です。

Tabris.jsを使ったアプリのUIの応答性や処理速度について詳しく教えてください。

性能は私たちにとって大きな目標です。ほかのクロスプラットフォーム開発フレームワークが提供する性能にユーザが満足していないのを知っているからです。正確にいえば、ユーザがネイティブアプリを使っているかTabris.jsアプリを使っているかわからないようにしたかったのです。パララックススクロールが良い例でしょう。あるフレームワークを使って十分な性能のパララックススクロールを実装するには、そのフレームワークがどうやって動いているかをしっかりとつかんでいなければなりません。Tabris.jsアプリをアプリストアから選んでダウンロードし、パララックススクロールのサンプルをクリックしてみてください。スクロールやページ遷移、アニメーションの目標は60fpsです。Tabris.jsを使えば、全く問題ありません。

Swiftが使える時代になぜJavaScriptなのでしょうか。

JavaScriptを使うという決定は私たちにとっては自明なものです。JavaScriptはブラウザの世界でよく知られており、node.jsなど、ほかのシステムでも活躍しています。githubで言語ごとの統計を見れば、JavaScriptが王者なのがわかるでしょう。また、プラットフォームに依存しないのも重要な要因です。Tabris.jsで開発するのにディスクトップコンピュータはいりません。タブレットで十分です。というのは、私たちはtabrisjs.com上でプラットフォームを提供しているからです。これにはオンラインのエディタがあり、どのブラウザでも使えます。Tabris.js開発者アプリとこのプラットフォームを繋いで、ブラウザで書いたコードをアプリで実行できます。また、ネイティブアプリもビルドできます。JavaScriptはプラットフォームから独立しているので、クロスプラットフォーム開発に最適です。また、大規模なコミュニティがあり、コードベースがあります。先ほど申し上げたように既存のライブラリが再利用できます。これによって、生産性が劇的に向上します。

Tabris.jsはiOSAndroid向けのアプリを提供し、EclipseSourceがGitHubリポジトリで公開しているいくつかのサンプルを試せるようにしている。

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

あなたの意見をお聞かせください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする
コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

ディスカッション

InfoQにログインし新機能を利用する


パスワードを忘れた方はこちらへ

Follow

お気に入りのトピックや著者をフォローする

業界やサイト内で一番重要な見出しを閲覧する

Like

より多いシグナル、より少ないノイズ

お気に入りのトピックと著者を選択して自分のフィードを作る

Notifications

最新情報をすぐ手に入れるようにしよう

通知設定をして、お気に入りコンテンツを見逃さないようにしよう!

BT