チューリップ・アプリ・エディター入門

目的

この記事では、次のことを学びます：

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

まだTulipアプリエディタに慣れていない方のための記事です。視覚的な作業指示アプリを例にして、アプリ・エディタの主要なツールについて説明します。

始める前に、簡単な注意事項があります：アプリ・エディターでは、コードを書くことなく、オペレーター用のアプリを作成することができます。

こんな感じです：

アプリ・エディターでは、オペレーターがアプリ内で使用できる一連のステップ（画面）を作成できます。また、操作性を向上させるために、ステップを ステップ・グループにまとめることもできます。

チューリップ・アプリ・エディターの概要

左側のステップリストには、ベースレイアウトを含むステップのリストが表示されます。

{高さ="" 幅="300"}。

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

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

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

{高さ="" 幅="500"}。

右クリック」を使って、ステップの複製、グループ化、削除ができます。

{高さ="" 幅="300"}。

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

{高さ="" 幅="300"}。

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

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

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

3つのタブがあります：

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

ステップタブには以下が表示されます：

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

{height=""幅="300"}。

アプリタブ：

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

{高さ="" 幅="300"}。

アプリ内の要素をクリックすると、サイドペインに「ウィジェット・タブ」という別のタブが表示されます。ここで、アプリの様々なビジュアルエレメントのフォーマットや、インタラクション時の動作を調整します。

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

パンとズームツールを使って、以下のことができます：

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

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

Tulip Appに新しいステップを作成するには、App Editorの左側にあるAdd Stepオプションをクリックします。新しいステップのデザインはベースレイアウトを反映します。

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

ヒント：新しいステップでデザインやロジックを再利用したい場合は、歯車のアイコンをクリックして「ステップの複製」を選択することで、既存のステップを複製することもできます。

{高さ="" 幅="300"}。

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

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

App Editorの上部にあるツールバーから "Button "を選択すると、カスタムボタンを追加できます。ボタンを好きな場所にドラッグしてください。

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

{height="" width="300"} ボタンをクリックします。

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

{高さ="" 幅="300"}。

トリガーを使用すると、単純なwhen, if, then, elseシーケンスを使用して、コードを使用せずにアプリケーションにロジックを追加できます。をクリックすると、トリガーエディターが開きます。

アクションまたはトランジションは、トリガーが起動したときにアプリで起こる変更です。

ボタンが押されたときに実行できるアクションや トランジションはたくさんあります。

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

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

このトリガーはシンプルです： ボタンが押される

そして 現在の時刻が変数に保存される。

そして ステップへ → 次へ

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

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

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

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

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

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

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

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

おめでとうございます！簡単な作業指示アプリケーションを作るのに必要な知識は以上です。

さらに読む

これらのコンセプトを使って完全なアプリを作成するには、以下のステップバイステップのガイドを使用してください。

• チューリップアプリの作成
• 完全な欠陥報告アプリを構築する
• 作業指示データを取得するアプリを構築する

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

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