JSONマークアップのみを使用してクロスプラットフォームアプリケーションを開発する方法

過去数か月にわたって、私はJasonetteと呼ばれるAndroidおよびiOS用のクロスプラットフォームアプリケーションを作成する新しい方法に取り組んできました。 JSONマークアップのみを使用して、最初から最後までアプリケーションを作成できます。











アプリケーションが完全にJSONマークアップで記述されている場合、他のデータと同様に処理し、クラウドからオンデマンドでリモートで提供できます。



デバイス上でアプリケーションをハードルート化する必要はなくなりました。サーバー側でJSONマークアップを更新することにより、アプリケーションを自由に更新できます。 アプリケーションを起動するたびに、サーバーからアプリケーションがリロードされます。



一般的なアイデアを得るためにビデオをご覧ください。



Jasonetteはさまざまな操作を実行できます。 JSONマークアップを使用して、関数、スタイルシートなどを規定できます 。 したがって、「 Model-Presentation-Controller 」スキームに従って、複雑なネイティブモバイルアプリケーションを作成することが可能になります 。



この記事では、[表示]リンクのみを公開します。

1. JasonetteがJSON形式でさまざまなクロスプラットフォームUIモデルを実装する方法。
2. JSONからネイティブへの移行を実装する方法。

基本構造

詳細に見ると、JasonetteはWebブラウザのように機能します。 ただし、HTMLマークアップを解釈してWebページのプレゼンテーションをレンダリングする代わりに、JasonetteはJSONマークアップを取得し、その場でネイティブビューを描画します。 マークアップは、 指定されたアルゴリズムに従う単なるJSONファイルです 。 まず第一に、それは2つの子を持つ頭の$ jasonで始まります：頭と体 次のようになります。

{ "$jason": { "head": { .. metadata about the document ... }, "body": { .. actual content to be displayed on the view .. } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

デザイン哲学

ネイティブ構造を表すJSON構文構造の開発を始めたとき、いくつかのハードルに遭遇しました。

1. ネイティブマークアップシステム。 iOSとAndroidは、独自のネイティブインターフェイスで誤って市場に参入することはありませんでした。 コンピュータの時代に作成されたレイアウトは、常にハンドヘルドデバイスに適応できるとは限りません。 構文は、ネイティブモバイルシステムと最も互換性のある形式でレイアウトを表示する必要があります。
2. クロスプラットフォーム。 同時に、クロスプラットフォームでなければなりません。 たとえば、iOS製品の場合、 autolayoutのようなものや、Androidに適合しない形式の視覚的言語があります。つまり、ソリューションとしては適切ではありません。
3. 書きやすい。 アプリケーションは簡単なJSONマークアップに簡単に変換でき、また複雑な構造に簡単に変換できる必要があります。

ほとんどのモバイルアプリケーションがどのように構築されているかを見ると、それらはすべて同じインターフェイスデザインパターンに従って作成されていることがわかります。

1. 垂直にスクロール可能なリスト
2. 水平方向にスクロール可能なリスト
3. 絶対位置決め
4. メッシュ

最初の3つのポイントは、最も広く使用されているため、詳しく見ていきましょう。

1.セクション-スクロールリストの作成

最も一般的に使用されるユーザーインターフェイステンプレートは、スクロール可能なリストです。 Jasonetteでは、これらのテンプレートはセクションと呼ばれます。 それらは、水平と垂直の2種類で、それぞれ水平と垂直にスクロールします。







実装-垂直セクション



このUIテンプレートは、おそらく最も頻繁にモバイルデバイスにデータを表示するために使用されます。 iOSのJasonetteでは、 UITableViewを使用して実装されます 。 Androidでは、 RecyclerViewを使用します。

 { "body": { "sections": [{ "items": [ {"type": "label", "text": "Item 1"}, {"type": "label", "text": "Item 2"}, {"type": "label", "text": "Item 3"} ] }] } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

iOSでは、上記のJSONマークアップは3つのUITableViewCellsでUITableViewを作成します 。各UITableViewCellsには、対応するテキストパラメーターを持つUILabelが含まれます。



Androidでは、RecyclerViewは3つの要素で作成されます。各要素はTextViewであり、対応するテキストオプションを表示します。



これらはすべて、 ストーリーボード （iOS）またはXMLマークアップファイル （Android）を使用せずにコードで記述され、動的モードで各要素をプログラムする機能を提供します。



実装-水平セクション



構文に関しては、水平セクションは垂直セクションと変わりません。 必要なことは、「水平」タイプを設定することだけです。その後、すべての要素が水平に整列します。

 { "body": { "sections": [{ "type": "horizontal", "items": [ {"type": "label", "text": "Item 1"}, {"type": "label", "text": "Item 2"}, {"type": "label", "text": "Item 3"} ] }] } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

注：水平セクションの構文は十分に単純に見えますが、実際にはそうではありません。 iOSの水平セクションは、 UICollectionViewを使用して実装されます。 これはよく知られたメカニズムですが、基本的にUICollectionViewの水平スクロールは元のUITableViewに埋め込まれています（垂直スクロールを担当します）。 Androidでは、原則は同様の方法で実装され、コンポジットRecyclerViewsのみが使用されます。

2.要素-各スクロールコンポーネント内にマークアップを構築する

トップレベルの構築方法が明らかになったので、アイテムを見てみましょう。 各セクションは、スクロール可能なアイテムのいくつかのコンポーネントで構成されています。 各要素のサイズは固定されており、要素自体の中には何もスクロールしないことに注意してください。



各要素には次のものがあります。

• ラベル、画像、ボタン、テキストエリアなど、1つのコンポーネントのみ
• これらのコンポーネントのいずれかの組み合わせ

この部分の実装では、すべてがパーティションの実装ほど単純ではありませんでした。クロスプラットフォームで、ネイティブで、柔軟性があり、簡単な方法で超複雑なレイアウトを作成する必要があったからです。



幸いなことに、iOSとAndroidにはそれぞれ非常に類似したネイティブレイアウトシステム、 UIStackViewとLinearLayoutがあり、これらはCSS Flexboxに類似しています。 したがって、これをクロスプラットフォームの可能な限り最大の近似値と見なすことができます。



最後に、これらのマークアップシステムは無限に構成可能です。 以下に示すように、垂直レイアウト、水平レイアウトを作成したり、水平レイアウト内に垂直レイアウトを挿入したりできます。







垂直レイアウトを作成するには、適切なタイプを設定し、そのコンポーネントを取得する必要があります。

 { "items": [{ "type": "vertical", "components": [ { "type": "label", "text": "First" }, { "type": "label", "text": "Second" }, { "type": "label", "text": "Third" } ] }] }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

同じことが水平レイアウトにも当てはまります。 水平タイプを設定するだけです。

 { "items": [{ "type": "horizontal", "components": [ { "type": "image", "url": "http://i.giphy.com/LXONhtCmN32YU.gif" }, { "type": "label", "text": "Rick" } ] }] }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

あるマークアップを別のマークアップに埋め込むには、コンポーネントの1つとして登録するだけで十分です。

 { "items": [{ "type": "horizontal", "components": [ { "type": "image", "url": "http://i.giphy.com/LXONhtCmN32YU.gif" }, { "type": "vertical", "components": [{ "type": "label", "text": "User" }, { "type": "label", "text": "Rick" }] } ] }] }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

簡潔にするために、スタイルについては話しませんでした。 必要な外観を正確に提供するまで、各コンポーネントとレイアウト自体を個別に設計できます。 必要なのは、フォント、サイズ、幅、高さ、色、背景、corner_radius、不透明度などを記述するスタイルオブジェクトを追加することだけです。

3.レベル-「絶対配置」

コンポーネントをスクロールすることなく、画面の特定の部分にピン留めしたい場合があります。 CSSの用語では、これを「絶対配置」と呼びます。 Jasonetteは、レイヤーと呼ばれるツールを通じてこの機能をサポートしています。



現在、レイヤーは画像とラベルの2種類の子をサポートしています。 画面の任意の領域に配置できます。 以下に例を示します。









この例では、画面上に2つのラベル（温度と天気のメッセージ）と画像（カメラのアイコン）が表示され、スクロール中に座標が固定されるように座標が設定されています。 マークアップは次のようになります。

 { "$jason": { "body": { "style": { "background": "camera" }, "layers": [ { "type": "label", "text": "22°C", "style": { "font": "HelveticaNeue-Light", "size": "20", "top": "50", "left": "50%-100", "width": "200", "align": "center" } }, { "type": "label", "text": "few clouds", "style": { "font": "HelveticaNeue", "size": "15" } }, { "type": "image", "url": "https://s3.amazonaws.com/.../camera%402x.png", "style": { "bottom": "100", "width": "30", "color": "#ffffff", "right": "30" } } ] } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

驚くべきことに、これは、モバイルデバイスで想像できるパズルインターフェイスを作成するために知っておく必要があるすべてです。



主要なコンポーネントとレイアウトをさまざまな方法で構成して、複雑なインターフェイスを作成できます。このプロセスは、単純なレゴブロックから異なるデザインを構築することと比較できます。



上記のUI要素で100％構成されている例を次に示します。

• Instagram UI
• Twitter UI

見た後

この段階では、おそらく次の2つのうちの1つを考えるでしょう。

• 「すごい！ クラス！ 「または
• 「一部の玩具アプリケーションでは、これは良いかもしれませんが、この方法で機能する何かを構築しても機能しません。」

上で述べたように、ここでは「表示」部分のみを説明します-3つの中で最も単純です。 しかし、Jasonetteの強みは、さらに進んでJSONを使用して宣言型プログラムを完全に作成できることです。



UIエレメントを、タッチしたときに実行される特定のアクションに関連付けることができます。 成功または誤ったフィードバックの助けを借りて、それらを1つずつ実行することもできます。 特定のイベントをリッスンして、これらのアルゴリズムを自動的にアクティブにすることもできます。



JSONを使用して「ビュー」だけでなく「モデル」と「コントローラー」のロジックも記述できる場合、可能性は無限です。

特徴

必要なのは、JSONを送信するサーバーだけです。つまり、Jasonetteはどのプラットフォームとも互換性があります。 クローズドソーステクノロジーに依存する必要はありません。 十分なJSONマークアップ。



また、JSONは、ローカルデバイス、リモートサーバー、少なくともraspberry.piを使用して、どこからでもアクセスできます。

• Webアプリをお持ちですか？ 既にWebアプリケーションがある場合は、APIにリクエストを送信するだけで、Node.js、Rails、Django、PHP、またはその他のWebアプリケーション用のモバイルネイティブバージョンを即座に作成できます。
• サーバーも必要ありません 。Model-View-Controlコントローラー全体を単一のスタンドアロンJSONファイルに配置できるため、実際には、データを保存して操作する場所を選択できます。 PastebinまたはGithubで動作する静的JSONファイルを使用してアプリケーションを作成することもできます！
• HTML Webサイトをアプリケーションに変換します 。Jasonetteには、 cheerioライブラリでサポートされている強力なHTML-JSONパーサーがあります。これにより、HTMLオブジェクトをJSONオブジェクトに変換できます。 そして、この変換後にできることは、すでに知っています。変換されたJSONファイルからネイティブインターフェイスを作成します。 したがって、APIを持たないWebサイトをネイティブアプリケーションに変えることができます。 もちろん、可能な限りJSONを使用することをお勧めしますが、それでもクールです。

あなたは無限に行くことができます、ここにほんのいくつかの例があります：



1） 写真を投稿するためのアプリケーション。カメラを使用して写真を撮影し、それをS3にアップロードし、自分のサーバーで録画を公開して、Webフィードを作成できます。







2）Node.js上のiOSおよびAndroid用Eliza Chatbotアプリ









3）セッション管理を備えたマイクロブログアプリケーション







4） リモートSlackボット管理







5）WebページをJSONファイルに変換してから、ネイティブアプリケーションに変換するサンプルアプリケーション。

おわりに

Jasonetteは若いプロジェクトです。 2016年末にiOS用のバージョンをパブリックドメインに置き、1か月後にAndroid 用のバージョンを置きました。



しかし、彼はすでにその開発に積極的に関与しているユーザーのコミュニティを獲得しており、急速な成長の段階にあります。 この技術により、（開発者だけでなく）すべてのユーザーの機能が拡張され、多くの労力をかけずにアプリケーションを作成できるようになることを願っています。



魅力的に聞こえますか？ こちらのプロジェクトのウェブサイトをご覧ください 。 最後に、GithubリポジトリはiOSとAndroidにあります （プロジェクトへの寄付を希望する方は大歓迎です！）