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

目的

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

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

:::(Info) (注：）このトピックは、Tulip Universityの「アプリ構築入門」コースで紹介されています：

Tulip App Editorにまだ慣れていない方は、この記事をご覧ください。ビジュアル作業指示書アプリを例にして、アプリエディタの主要なツールについて説明します。

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

こんな感じです：

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

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

Tulipアプリエディタの概要

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

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

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

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

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

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

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

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

3つのタブがあります：

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

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

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

Appタブ：

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

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

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

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

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

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

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

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

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

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

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

ボタンにロジックを追加するには、コンテキストペインのTriggersの隣にある "+"記号をクリックします。

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

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

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

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

ボタンが押されたとき ボタンが押される

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

そして ステップへ → 次へ

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

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

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

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

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

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

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

さらに読む

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

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

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

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