Tulip App Editorの紹介

目的

この記事で、あなたは学びます。

• Tulipアプリエディタの各パーツ
• アプリに追加できる基本的なビジュアル要素（ウィジェットとも呼ばれる）。
• ボタンを使って基本的なロジックを追加する方法
• データを記録するアプリを完成させる方法

:::(Info) (注：）このトピックは、チューリップ・ユニバーシティの「アプリ構築入門」コースで紹介されています :::

まだTulip App Editorに慣れていない方は、この記事をご覧ください。視覚的な作業指示アプリを例にして、アプリエディタの主要なツールをすべて紹介します。

始める前に、ここで簡単に思い出してください。アプリ・エディタを使えば、コードを書かずにオペレーター用のアプリを作ることができます。

以下はその様子です。

App Editorでは、アプリの中でオペレーターが使用する一連のStep（画面）を作成することができます。また、Stepを Stepグループとして整理することで、より使いやすくすることができます。

:::(Warning) (注：）新しいインスタンスで提供されるアプリケーションは、常に改良されています。最近チューリップに参加された方は、インスタンスのアプリがこの記事の画像と違うかもしれません。ご安心ください。内容が多少違っても、考え方は同じです。

チューリップ・アプリケーション・エディターの簡単な概要

左側のSteps Listには、Base Layoutを含むステップのリストが表示されます。

{height="" width="300"}.

ベースレイアウトに加えたフォーマットやレイアウトの編集は、アプリ内の各ステップに自動的に適用されます。

{height="" width="300"} ベースレイアウトの編集は、アプリ内の各ステップに自動的に適用されます。

右側のコンテキストペインで個々の要素を「アンロック」することで、各ステップ内のベースレイアウトを変更することができます。

{height="" width="500"}.

右クリックで「複製」「ステップのグループ化」「削除」ができます。

{height="" width="300"} 右クリックで「ステップの複製」「ステップのグループ化」「削除」ができます。

ステップをクリックすると、そのステップに含まれる要素を表示することができます。

{height="" width="300"}.

画面上部のツールバーには、アプリに追加可能なビジュアル要素が含まれています。これらは、図形、写真、テキスト、ビデオ、ボタンなどの要素です。 アプリに新しいビジュアルエレメントを追加するには、クリックし、希望の場所にドラッグするだけです。

ツールバーの右側には、Tulip App Editorのオブジェクトをレイヤー化するために使用できる追加ツールもあります。

画面右側のコンテキストペインでは、アプリ内のすべてのフォーマットとロジックを処理します。Widgetの設定について詳しくは、こちらをご覧ください。

3つのタブがあります。

• ステップタブ
• アプリタブ
• ウィジェットタブ

ステップ]タブには、以下の内容が表示されます。

• ステップ全体のフォーマット・オプション
• このステップの目標サイクルタイムを指定できます。
• ベースレイアウトで指定されたレイアウトにリセットすることができます。
• 現在のステップを削除することができます。
• このステップが開いたり閉じたりするたびに実行されるロジックを構築することができます。

{height="" width="300"}.

アプリ]タブ。

• アプリ内のステップをプリントアウトできます。
• アプリ全体のサイクルタイマーを調整することができます。
• このアプリに関連する全ての変数のリストを表示します。
• アプリの解像度を意図したインターフェイスに合うように指定できます。
• 複数の管理者が変更を確認する場合、コメントを追加することができます。
• このアプリが開始、完了、またはキャンセルされるたびに実行されるロジックを構築することができます。

{height="" width="300"}.

アプリ内の要素をクリックすると、コンテキストペインに「Widget Tab」という別のタブが表示されます。このタブでは、アプリの様々なビジュアル要素のフォーマットや、インタラクション時の動作を調整することができます。

{height="" width="300"}.

パン＆ズームツールを使用すると、次のことができます。

• アプリケーションの編集面を移動する
• ズームイン、ズームアウト

アプリにステップを追加する

Tulipアプリに新しいステップを作成するには、アプリエディタの左側にあるAdd Stepオプションをクリックします。新しいステップのデザインは、Base Layoutが反映されます。

{height="" width="300"}.

補足：新しいステップでデザインやロジックを再利用したい場合は、歯車のアイコンをクリックして「Duplicate Step」を選択すれば、既存のステップを複製することも可能です。

{height="" width="300"}.

アプリにロジックを追加する

ここまでで、新しいStepを追加する方法を説明しましたが、オペレータがStepからStepに移動するための方法を提供する必要があります。このロジックは、TulipのTriggerを使って作成します。まずは、シンプルなボタンを使って、ステップからステップへ移動してみましょう。

App Editorの上部にあるツールバーから「Button」を選択すると、カスタムボタンを追加することができます。ボタンをドラッグして、好きな場所に配置します。

ボタンのラベルを追加し、右側のコンテキスト・ペインでフォーマットやカラーリングのオプションを調整します。

{height="" width="300"}.

ボタンにロジックを追加するには、コンテキストペインのトリガーの横にある「+」記号をクリックします。

{height="" width="300"} トリガーは、ボタンにロジックを追加することができます。

トリガーを使えば、when、if、then、elseのシンプルなシーケンスを使って、コードを書くことなくアプリケーションにロジックを追加することができます。をクリックすると表示されるTrigger Editorです。

アクションや トランジションは、Triggerが起動したときにアプリに起こる変化です。

ボタンが押されたときに実行できるActionや Transitionはたくさんあります。

{height="" width="350"} このトリガーは、シンプルです。

このトリガーはシンプルです。

いつ ボタンが押される

すると 現在の時刻が変数に保存される

そして、その後に Step → Next へ。

{高さ="" 幅="1000"}です。

このボタンで、次のStepに移動することができます。通常、ユーザーが前のステップに移動するためのボタンも追加したいと思うでしょう。

アプリケーションの基本的なロジックを構築したら、App Editor の右上にあるRunまたはTestオプションをクリックします。これにより、TTulip Playerでアプリケーションが起動し、リアルタイムでコンピュータ上でアプリをテストすることができます。

アプリを完成させ、データを記録する

Tulipがオペレータのアプリ使用によるすべてのデータを記録するために、Completeボタンを追加する必要があります。

この例では、アプリの最後のStepに別のボタンを追加して、完了を記録することにします。

ツールバーの「ボタン」オプションをクリックし、「完了」ボタンを選択します。このボタンをアプリの最後のステップにドラッグします。

{height="" width="450"}.

おめでとうございます。以上で、簡単な作業指示アプリケーションを作成することができました。

さらに読む

これらの概念を使用して完全なアプリを構築するには、次のステップバイステップガイドを使用してください。

• Tulipアプリを作成する
• 完全な不具合報告アプリを構築する
• 作業指示データを取得するアプリを構築する

お探しのものは見つかりましたか？

また、community.tulip.coに質問を投稿したり、他の人が同じような質問に直面していないかどうかを確認することができます。