この記事では、次のことを学びます：
- Tulip App Editorのさまざまな部分
- アプリに追加できる基本的なビジュアル要素（ウィジェットとも呼ばれる）
- ボタンを使って基本的なロジックを追加する方法
- データを記録するアプリを完成させる方法
This topic is featured in the Introduction to app building course in Tulip University.
まだTulip App Editorに慣れていない方は、この記事をご覧ください。作業指示書アプリを例に、アプリエディタの主なツールを説明します。
アプリ・エディターでは、コードを書くことなくオペレーター用のアプリを作成できます。
こんな感じです：
アプリ・エディタでは、プロセスの視覚的な要素である一連のステップを作成できます。
紹介ビデオ
We're constantly improving the applications that come in new instances. If you joined Tulip recently, the apps in your instance might look different than what you see in images in this article. No worries, the ideas are the still same even if the content is a little different.
アプリ・エディタの概要
アプリ・エディタは、アプリを作成・編集する場所です。次の図は、アプリ・エディタを構成するさまざまなパーツを示しています：
{height="" width=""}.
- ステップ/ステップグループの追加 - 新しいステップまたはステップグループを追加します。
- ステップ/レコードパネル - ステップタブでステップを表示したり、レコードタブに切り替えて使用されているテーブルを表示します。
- ワークスペース - アプリのインターフェイスを作成するスペースです。
- アセットウィジェットの追加 - シェイプ、アイコン、ロゴをアプリに追加します。
- ボタンウィジェットの追加 - アプリにボタンを追加します。
- Input Widgetの追加 - アプリに入力フィールドを追加します。
- テキストウィジェットの追加 - アプリにテキストボックスを追加します。
- ウィジェットを埋め込む - 画像、分析、機械属性など様々なウィジェットを埋め込むことができます。
- カメラウィジェットの追加 - 通常のカメラまたはバーコードカメラのスナップショットを追加します。
- 翻訳 - Tulip Playerは、Tulipプロファイルを介して選択した言語にアプリを自動的に翻訳します。
- Create Snapshot - アプリの現在のバージョンを保存し、複製を作成します。
- テスト - 開発者モードでアプリをテストします。
- Run - Tulip Playerでアプリを実行します。
- 公開 - アプリを公開します。
- Forward/Back - ワークスペース内のエレメントを前方または後方に移動します。
- サイドペイン - ウィジェットタブ、ステップタブ、アプリタブでトリガーとスタイルコンポーネントを設定します。
パンとズーム ツールを使用すると、次のことができます：
- アプリケーションの編集サーフェスを移動する
- ズームインまたはズームアウト
左側のステップ リストには、ベース レイアウトを含むステップのリストが表示されます。
{高さ="" 幅="300"}。
ベースレイアウト
ベースレイアウトに加えたフォーマットやレイアウトの編集は、アプリ内の各ステップに自動的に適用されます。
{height="" width="300"} ベースレイアウトを変更することができます。
右側のコンテキストペインで個々の要素を「アンロック」することで、1つのステップのベースレイアウトを変更することができます。
{高さ="" 幅="500"}。
ベースレイアウトの詳細については、こちらをご覧ください。
ステップ
ステップをクリックすると、そのステップに含まれる要素が表示されます。
{高さ="" 幅="300"}。
ステップを右クリックすると、ステップを複製、グループ化、削除することができます。
{高さ="" 幅="300"}。
ステップの詳細については、こちらをご覧ください。
ツールバー
画面上部のツールバーには、アプリに追加できるビジュアル要素が含まれています。これらは図形、写真、テキスト、ビデオ、ボタンなどの要素です。 アプリに新しいビジュアル要素を追加するには、クリックして希望の場所にドラッグするだけです。
ツールバーの右側には、Tulipアプリエディタのオブジェクトをレイヤーするための追加ツールがあります。
コンテキストペイン
画面右側の「コンテキストペイン」は、アプリ内のフォーマットやロジックをすべて扱う場所です。ウィジェット設定については、こちらをご覧ください。
3つのタブがあります：
- ステップタブ
- アプリタブ
- ウィジェットタブ
ステップタブ
ステップ・タブには以下が表示されます：
- ステップ全体のフォーマットオプション
- このステップの目標サイクルタイムを指定できます。
- ベースレイアウトで指定されたレイアウトにリセットできます。
- 現在のステップを削除できます。
- このステップがオープンまたはクローズされるたびに実行されるロジックを構築できます。
{トリガーについては後で詳しく説明します。｝
アプリタブ
Appタブ：
- アプリ内のステップを印刷できます。
- アプリ全体のサイクルタイマーを調整できます。
- このアプリに関連するすべての変数のリストを表示します。
- 意図したインターフェイスに合わせてアプリの解像度を指定できます。
- 複数の管理者が変更を確認する場合、コメントを追加できます。
- このアプリが開始、完了、またはキャンセルされるたびに実行されるロジックを構築できます。
{height="" width="300"} ウィジェットタブ
ウィジェットタブ
アプリ内の要素をクリックすると、サイドペインに「ウィジェットタブ」という別のタブが表示されます。ここで、アプリの様々なビジュアルエレメントのフォーマットや、インタラクション時の動作を調整します。
{高さ="" 幅="300"}。
アプリにロジックを追加する
まず始めに、トリガー付きのシンプルなボタンを使って、ステップからステップに移動してみましょう。
- ツールバーの[ボタン]をクリックし、[**ボタン]**を選択します。
- ボタンを好きな場所にドラッグします。
- ボタンにラベルを追加し、右側のコンテキスト・ペインを使用して、フォーマット／カラーオプションを調整します。
{高さ="" 幅="300"}。
- ボタンにロジックを追加するには、サイドペインの**「トリガー」の横にある「+」を**クリックします。
{高さ="" 幅="300"}。
トリガーを使えば、コードを使わずにアプリケーションにロジックを追加できます。トリガーは、when、if、then、elseのシーケンスを使用します。
ここで作るトリガーは、以下のようなロジックです：
とき： ボタンが押された
その後 現在時刻が変数に保存される。
遷移する： ステップへ → 次へ
{高さ="" 幅="1000"}。
- 保存をクリックします。
このボタンは、ユーザを次のステップに移動させます。通常、ユーザーが前のステップに移動できるボタンも追加したいでしょう。
アプリケーションの基本ロジックを構築したら、右上のTestをクリックします。開発者モードでアプリケーションが起動するので、アプリをテストすることができます。
アプリを完成させてデータを記録する
Completeボタンをクリックすると、Tulipが各オペレーターに関連するすべてのアプリデータを記録します。
この例では、アプリの最後のステップに別のボタンを追加します。
- アプリの最後のステップを選択します。
- Buttons（ボタン）］をクリックし、［Complete（完了）］を選択します。
- 新しいボタンを希望の位置にドラッグします。
{height="" width="450"}.
さらに読む
以下のステップバイステップのガイドを使用して、これらのコンセプトを使用して完全なアプリを構築します：
お探しのものは見つかりましたか？
community.tulip.coで質問を投稿したり、他の人が同じような質問に直面していないか確認することもできます！