💅🏽 🎰 📡 Tabris.js-お互いをすばやく知り、Hello Worldを作成する 😦 🍄 🎭

Tabris.jsは、別のクロスプラットフォーム（Android、IOS）モバイルフレームワークです。このようなツールの大部分とは異なり、標準またはChromeベースのWebViewのラッパーではありません。 Tabrisは、javascriptから利用可能な一連のネイティブコンポーネントを提供します。私が知っている最も近い類似物は、 Telerik Native Script 、 Appcelerator 、 React Nativeです。

そのため、Tabrisは低パフォーマンス（ただし非常に便利）のHTML5 + WebViewから離れ、iOSおよびAndroidプラットフォーム用の単一コードベースでアプリケーションを完全にJavaScriptで記述できるようになりました。同時に、JSライブラリ、npmモジュール、およびCordovaプラグインを完全に使用できます。ただし、アプリケーションにはないため、DOMで動作しないもののみです。

アプリケーションをコンパイルできます。

無料：GitHubの公開リポジトリから
$ 5 /月：GitHubのパブリック/プライベートリポジトリから
月額50ドル：GitHub +ローカルビルド

どの料金プランでも、機能は同じで、コードには影響せず、プロジェクトのアセンブリにのみ影響します。ローカルビルドの速さはわかりませんが、クラウドビルドは単純なアプリケーションで数分かかります。これは一般的には普通のことです。

企業向けの料金プランもあります（組織）-価格は年間5,000ドルからです。これらの計画では、ソースも取得するため、機能を変更できます。サポートされているソースコードの操作について詳しく学ぶ方が良いです。具体的な情報は見つかりませんでしたが、よくある質問では独自のプラグインの作成について説明しています。

開発とデバッグを高速化するために、 iOSまたはAndroid用のアプリケーションを使用できます。ログインにはGitHubを使用します。アプリケーションには簡単な例、リモートサーバーからアプリケーションを実行する機能（ローカル開発に便利）、およびTabris Webサイトのアカウントに追加されたスクリプトの同期が含まれます。さらに、アプリケーションには、カメラ、ダイアログ、デバイスモーション、バーコードスキャナーなど、いくつかの便利なCordovaプラグインが既に含まれています。したがって、インストールを心配することなく開発を開始できます-迅速な開始と検証に最適です。

はじめに

何かを書く前に- ドキュメントに精通してください。私たちの主な関心は、ネイティブに実装されたコンポーネントであるウィジェットです。ほとんどの場合、メインコンポーネントはページ（ページ）であり、残りはTextViewであるか、内部に多くの要素を含むScrollViewであるかに関係なく、残りは既にそれに接続されています。

サイトとアプリケーション内の両方に多くのよく文書化された例があるので、単に「Hello World !!」と出力するのは奇妙です。したがって、アプリケーションをもう少し複雑にし、もう少し効果的にすることで、HTML5ベースのアプリケーションとの違いを感じることができるようになります-Flickrでパブリックイメージを検索します。

アプリケーションの作成は、最小限のpackage.jsonから始まります。

{ "name": "flickr-search", "description": "Search Flickr public images by tag", "main": "app.js", "dependencies": { "tabris": "^1.2.0" } }

Flickr APIにリクエストを行う必要があります。TabrisにはカーネルにXMLHttpRequestが含まれていますが、より便利なフェッチモジュールを接続してPromiseを追加することで、余分なコード行を捨てることを好みます。したがって、 package.jsonは次の形式を取ります。

 { "name": "flickr-search", "description": "Search Flickr public images by tag", "main": "app.js", "dependencies": { "tabris": "^1.2.0", "promise": "^6.1.0", "whatwg-fetch": "^0.9.0" } }

その後、 npm installを実行すると、コードを作成する準備がほぼ整います。すぐにローカルサーバーを上げ、そのアドレスをTabrisアプリケーションのURLタブに入力することをお勧めします。したがって、コードを記述するとすぐにアプリケーションを表示できます。 ノードhttp-serverが既にインストールされている場合は、プロジェクトフォルダーで単純にhttp-serverをコマンドするか、プロジェクトにローカルでインストールできます。もちろん、Apacheなどを使用できます。

アプリケーションは単一ページになり、検索用の入力行が必要になります。その結果、画像と名前が表示されます。入力行に通常のTextInputを使用し、 CollectionViewを使用して結果を表示します。初期化時に、アプリケーションはFlickrからのランダムな結果を表示します（タグによる検索なし）。したがって、ユーザーが画像を更新できるように、 Pull-to-RefreshコンポーネントでCollectionViewを使用します。

モジュールを接続し、必要なレイアウトを作成します。

app.jsのスクラッチ

 Promise = require("promise"); require("whatwg-fetch"); var page = tabris.create("Page", { title: "Flickr Search", topLevel: true }); var tagInput = tabris.create("TextInput", { layoutData: { left: 8, right: 8, top: 8 }, message: "Search..." }).on("accept", loadItems).appendTo(page); var view = tabris.create("CollectionView", { layoutData: { left: 0, top: [tagInput, 8], right: 0, bottom: 0 }, itemHeight: 200, refreshEnabled: true, initializeCell: function(cell) { var imageView = tabris.create("ImageView", { layoutData: { top: 0, left: 0, right: 0, bottom: 0 }, scaleMode: 'fill' }).appendTo(cell); var titleComposite = tabris.create("Composite", { background: "rgba(0,0,0,0.8)", top: 0, right: 0, left: 0 }).appendTo(cell); var textView = tabris.create("TextView", { layoutData: { left: 30, top: 5, bottom: 5, right: 30 }, alignment: "center", font: "16px Roboto, sans-serif", textColor: "#fff" }).appendTo(titleComposite); cell.on("change:item", function(widget, item) { imageView.set("image", { src: item.media.m }); item.title ? textView.set("text", item.title) : textView.set("text", 'No Title'); }); } }).on("refresh", function() { loadItems(); }).appendTo(page); page.open(); function loadItems() { view.set({ refreshIndicator: true, refreshMessage: "loading..." }); }

すべてがコードから非常に透過的で明確です-ページ（ページ）を作成し、そのタイトルを付け、検索文字列を入力するためのテキスト入力を追加し、検索バーの下に配置してCollectionViewを初期化しました。

CollectionViewの各セルは高さに設定され、 Imageコンポーネント、 Composite、およびTextViewレイヤーがセルに「追加」されました。

ImageViewをセルの幅と高さ全体に拡張し（{left：0、right：0、top：0、bottom：0}を設定）、コンテナーを「塗りつぶし」モードに設定します（{scaleMode： 'fill'}）。

背景に画像の名前を表示するために、少し透明度のある合成レイヤー（{background： "rgba（0,0,0,0.8.8）"}）を作成し、このレイヤーに実際のテキストを配置して、色を設定し、サイズと中央揃え。

また、 変更：アイテムハンドラーで、空白を作成して、APIからのデータをセルに入力しました。

loadItems（）関数は、これまでにPull-to-Refresh要素の更新インジケーターを表示するだけなので、アプリケーションを開いて「スワイプ」すると次のように表示されます。

アプリケーションを「復活」させるために、Flickr APIにリクエストを行います。 Flickrはさまざまな形式でデータを送信でき、目的のライブラリに接続して、少なくともAtomフィード、少なくともCSVを解析できました。

ただし、JSONを使用する方がはるかに簡単であり、余分な依存関係をドラッグする必要はありません。悪いニュースは、FlickrがJSON-Pを提供していることです。ブラウザを使用していないため、実行のためにスクリプトを<head />に挿入することはできません。また、 eval（）を使用することも最適なオプションではありません。

特定のケースでは、 eval（）を使用することもできます-Flickrから「悪意のある」コードを受け取る可能性は低く、実行速度も著しく低下することはほとんどありません（さまざまな最適化なしでコード実行が行われることを忘れないでください）。

したがって、 Functionコンストラクターを使用して関数を動的に作成するのは良いフォームであるように思えます。大規模なプロジェクトでは、グローバル関数/変数を削除することもでき、 try..catchをプラスしてエラーを処理することができます -これにより、開発者のデバッグと生活が簡素化されます全体。この単純なアプリケーションでは、 loadItems（）関数の形式は次のとおりです。

 function loadItems() { view.set({ refreshIndicator: true, refreshMessage: "loading..." }); fetch("https://api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=JSON_CALLBACK&tags=" + tagInput.get('text')).then(function(response) { var dyn_function = new Function("JSON_CALLBACK", response._bodyInit); dyn_function(function(json) { if (json.items && json.items.length) { view.set({ items: json.items, refreshIndicator: false, refreshMessage: "refreshed" }); } else { navigator.notification.alert('Nothing found with tag: ' + tagInput.get('text'), null, 'Result'); view.set({ refreshIndicator: false, refreshMessage: "refreshed" }); } }) }).catch(function(error) { console.log('request failed:', error) }) }

Tabrisアプリケーションにはすでにorg.apache.cordova.dialogsが含まれていることがわかっているため、ここではnavigator.notification.alert（）を使用します。ビルド時には、依存するプラグインを追加する必要があります。

アプリケーションの初期化中にloadItems（）を起動すると、空のパラメーターで検索が実行され、ランダムな画像が取得されます（空のタグで更新するたびに）。

コレクションのすべての要素をアニメーション化しましょう。 HTML5でのこのような（特にページのスクロール時）動作は、「スムーズ」にあまり動作しません。これは明らかな違いです。同時に透明度を高めながら、右側にシンプルな外観効果を作成します。

 function animateFadeInFromRight(widget, delay) { widget.set({ opacity: 0.0, transform: { translationX: 150 } }); widget.animate({ opacity: 1.0, transform: { translationX: 0 } }, { duration: 500, delay: delay, easing: "ease-out" }); }

そして、 CollectionViewセルにエフェクトを追加します。

 cell.on("change:item", function(widget, item) { animateFadeInFromRight(widget, 500); imageView.set("image", { src: item.media.m }); item.title ? textView.set("text", item.title) : textView.set("text", 'No Title'); });

これで、おそらく終了します：

完全なリストapp.js

 Promise = require("promise"); require("whatwg-fetch"); var page = tabris.create("Page", { title: "Flickr Search", topLevel: true }); var tagInput = tabris.create("TextInput", { layoutData: { left: 8, right: 8, top: 8 }, message: "Search..." }).on("accept", loadItems).appendTo(page); var view = tabris.create("CollectionView", { layoutData: { left: 0, top: [tagInput, 8], right: 0, bottom: 0 }, itemHeight: 200, refreshEnabled: true, initializeCell: function(cell) { var imageView = tabris.create("ImageView", { layoutData: { top: 0, left: 0, right: 0, bottom: 0 }, scaleMode: 'fill' }).appendTo(cell); var titleComposite = tabris.create("Composite", { background: "rgba(0,0,0,0.8)", top: 0, right: 0, left: 0 }).appendTo(cell); var textView = tabris.create("TextView", { layoutData: { left: 30, top: 5, bottom: 5, right: 30 }, alignment: "center", font: "16px Roboto, sans-serif", textColor: "#fff" }).appendTo(titleComposite); cell.on("change:item", function(widget, item) { animateFadeInFromRight(widget, 500); imageView.set("image", { src: item.media.m }); item.title ? textView.set("text", item.title) : textView.set("text", 'No Title'); }); } }).on("refresh", function() { loadItems(); }).appendTo(page); function loadItems() { view.set({ refreshIndicator: true, refreshMessage: "loading..." }); fetch("https://api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=JSON_CALLBACK&tags=" + tagInput.get('text')).then(function(response) { var dyn_function = new Function("JSON_CALLBACK", response._bodyInit); dyn_function(function(json) { if (json.items && json.items.length) { view.set({ items: json.items, refreshIndicator: false, refreshMessage: "refreshed" }); } else { navigator.notification.alert('Nothing found with tag: ' + tagInput.get('text'), null, 'Result'); view.set({ refreshIndicator: false, refreshMessage: "refreshed" }); } }) }).catch(function(error) { console.log('request failed:', error) }) } function animateFadeInFromRight(widget, delay) { widget.set({ opacity: 0.0, transform: { translationX: 150 } }); widget.animate({ opacity: 1.0, transform: { translationX: 0 } }, { duration: 500, delay: delay, easing: "ease-out" }); } loadItems(); page.open();

ビルドには、典型的なCordova config.xmlを作成する必要があります。ここでは、必要なプラグインを簡単に指定できます（クラウドコレクターは必要なプラグイン自体をインストールし、npmモジュールはpackage.jsonから読み取られます）。

 <?xml version='1.0' encoding='utf-8'?> <widget id="my.flickr_search.app" version="1.0.0"> <name>Flickr Search</name> <description> Search Flickr public images by tag </description> <preference name="Fullscreen" value="true" /> <plugin name="cordova-plugin-dialogs" version="1.1.1" /> </widget>

プロジェクトをGithubにプッシュし、リポジトリを選択してTabris管理エリアにアプリケーションを作成した後：

アプリを作成

検証後、ビルド設定が利用可能になります。

ビルドアプリ

Githubコード

アプリケーションの.apkファイルは約10MBを消費します-裸のCordova（約2〜3MB）よりも多く、Chrome WebViewを使用したプロジェクト（約19MB）よりも少ないです。同時に、ネイティブコンポーネントでより生産的なアプリケーションを使用できます。

利点には、開発速度と、多数のjs-modulesおよびcordovaプラグインのサポートが含まれます 。たとえば、React Nativeには、ハードウェアを操作するためのプラグインがまだほとんどありません。 TabrisはCordovaプロジェクトと互換性があるため、たとえば大きなリストの場合など、ボトルネックで使用できます。

ローカルビルドの可能性のために50ドルを支払わなければならないのは残念ですが、1つのプロジェクトについて話していないのであれば、それは理にかなっていると思います。ただし、クラウドでは、同じ機能を備えたアプリケーションを簡単に構築できます。

Tabrisコミュニティはそれほど素晴らしいものではありませんが、需要があれば成長します。

一般に、モバイルアプリケーションとゲームを開発するためのかなり競争力のあるフレームワークがあり、優れたパフォーマンスを備えています。これは、少なくともデモやプロトタイプ、さらには本格的なアプリケーションの開発に推奨できます。

Tabris.js-お互いをすばやく知り、Hello Worldを作成する

はじめに

More articles: