アプリ構築

Tulipでアプリを作るのは、最初は敷居が高く感じるかもしれませんが、核となる要素を分解して理解すれば、それほど複雑ではありません。アプリケーションは、以下の原則を組み合わせて新しいソフトウェアを作成します：UIデザイン、条件ロジックと関数、データとデータベース、分析、そして他のシステム、デバイス、マシンとの接続です。このガイドでは、アプリケーションをうまく構築するために必要なキーコンセプトとインターフェースツールについて説明します。Tulipはコーディング不要のプラットフォームなので、コーディング経験の有無にかかわらず、制作可能なアプリケーションを設計するために必要な機能に焦点を当てます。

まずは、アプリを表示するためのメインインターフェイスから説明します。

アプリの作成と整理

インスタンス内のすべてのアプリを表示するには、Tulipインスタンスのアプリページに移動します：[your-instance].tulip.co/group。また、上部ナビゲーションバーのAppsタブにカーソルを合わせ、Appsをクリックすることもできます。

このページでは、インスタンスにビルドしたアプリを、アプリのコレクションを整理するためのフォルダであるアプリグループに分類して表示します。また、左側のナビゲーション・パネルで、アプリ・グループ内の各アプリや、最近のアプリやお気に入りのアプリなどの他のフォルダを表示することもできます。

グループ内の既存のアプリを選択すると、そのアプリの情報を表示および編集できます。また、以下のアプリデータを表示することもできます：

• ステップ
• 分析
• バージョン
• 完了
• Permissions
• {用語集.承認}}s

アプリを編集するには、右上の青い「編集」ボタンをクリックするか、ステップを直接クリックします。

新しいアプリを作成するには、アプリ画面に移動し、右上の青い「アプリ作成」ボタンをクリックします。ボタンの横にある小さな矢印をクリックして、新しいアプリグループを作成することもできます。

空白のテンプレートまたはあらかじめデザインされた注目のアプリを選択し、ウィンドウの左下にある「作成」をクリックします。これらの注目のテンプレートは、Tulipユーザーによってデザインされたもので、ゼロからアプリを作りたくない場合に、他のユーザーが素早く問題を解決できるようになっています。また、これらのテンプレートを編集して、自分のニーズに合わせてカスタマイズすることもできます。

アプリ情報画面に移動したら、アプリの名前と説明を入力してください。この情報にラベルを付けると、プロセスのどの段階にいてもアプリを追跡できるので便利です。

右上の青い "Edit "ボタンをクリックし、App Editorインターフェイスに移動します。

アプリエディタ

App Editorは、アプリの作成と編集を行う場所です。以下の図は、アプリエディタを構成する様々な部分を示しています：

1. Add Step/Step Group（ステップ/ステップグループの追加） - 新しいステップまたはステップグループを追加します。
2. Step/Records Panel（ステップ/レコードパネル） - ステップタブでステップを表示したり、レコードタブに切り替えて使用されているテーブルを表示します。
3. Workspace - アプリのインターフェイスを作成するスペースです。
4. アセットウィジェットの追加 - シェイプ、アイコン、ロゴをアプリに追加します。
5. ボタンウィジェットの追加 - アプリにボタンを追加します。
6. 入力ウィジェットの追加 - アプリに入力フィールドを追加します。
7. テキストウィジェットの追加 - アプリにテキストボックスを追加します。
8. ウィジェットを埋め込む - 画像、分析、機械属性など様々なウィジェットを埋め込むことができます。
9. カメラウィジェットの追加 - 通常のカメラまたはバーコードカメラのスナップショットを追加します。
10. 翻訳 - Tulip Playerは、Tulipプロファイルを介して選択した言語にアプリを自動的に翻訳します。
11. スナップショットの作成 - アプリの現在のバージョンを保存し、複製を作成します。
12. テスト - 開発者モードでアプリをテストします。
13. Run - Tulip Playerでアプリを実行します。
14. 公開 - アプリを公開します。
15. Forward/Back - ワークスペース内のエレメントを前方または後方に移動します。
16. Trigger Panel - トリガー、スタイル要素、アプリレベル情報を設定します。

アプリエディターの詳細については、Tulipアプリエディター入門をご覧ください。

ステップ

ステップはアプリの「ページ」であり、コンテンツを表示する様々な画面です。ステップを追加するには、"Add Step "ボタンをクリックします：

• ステップ - 通常のステップで、ニーズに合わせてカスタマイズしたり、ウィジェットを使用することができます。
• フォームステップと署名フォーム - これらのオプションはr235以降の新しいインスタンスでは無効になりました。
• ステップグループ - アプリの整理や、ステップの並べ替え/複製などの一括操作に役立つステップのフォルダです。

ステップはリニアまたはノンリニアにすることができ、並べた順番に連続して続く必要はありません。アプリに追加するロジックによって、ステップの遷移が決まります。

ステップの詳細については、こちらの記事をご覧ください：ステップ

ベースレイアウト

ベースレイアウトは、作成する各ステップに適用されるテンプレートです。ベースレイアウトを作成すると、各ステップに基礎となる要素が自動的に追加されるため、アプリの構築が容易になり、アプリ全体のまとまったスタイルが保証されます。

ベースレイアウトに移動するには、ステップ／レコードパネルの下部にある "ベースレイアウト "ボタンをクリックしてください。

ベースレイアウトでは、ワークスペース内に配置したものが、すべてのステップに表示されます。このプロセスにより、アプリのレイアウトを素早く簡単に設定でき、各ステップを一から構築する手間が省けます。

ベースレイアウトの構築に関する詳しいガイドは、ベースレイアウトの使い方をご覧ください。

ウィジェット

ウィジェットはアプリの構成要素です。情報を表示したり、データを収集したり、トリガー・ロジックを実行したりすることができます。

アイコンウィジェット

ワークスペース内に図形、アイコン、ロゴを配置し、ロジックを設定してアプリの外観とブランディングをデザインします。

ボタンウィジェット

あらかじめロジックがプログラムされたものや、空白のカスタムボタンなど、さまざまなボタンからアプリで使用するものを選択できます。

ボタンウィジェットについて詳しくはこちらをご覧ください。

入力ウィジェット

入力の種類ごとに異なるデータの変数を表すInput Widgetを使って、アプリのユーザーからデータを収集できます。

入力ウィジェットの詳細はこちら。

テキストウィジェット

変数の値、プレーンな静的テキスト、レコードプレースホルダ全体を含む静的または動的テキストを表示します。

埋め込みウィジェット

ビデオ、画像、CAD、ドキュメント、バーコードスキャナなどをアプリに埋め込みます。

埋め込みウィジェットの詳細はこちらをご覧ください。

カメラウィジェット

Tulip Visionのカメラフィードを表示したり、バーコードをスキャンしたりできます。

カメラウィジェットの詳細はこちら。

カスタムウィジェット

上記のウィジェットがどれもニーズに合わない場合、HTML、CSS、Javascriptを使って独自のウィジェットを作成し、プラットフォームの機能を拡張することができます。

カスタムウィジェットの詳細はこちら。

トリガー

トリガーを使うと、アプリにロジックを追加することができます。

トリガーがなければ、アプリは平坦な画面です。トリガーはアプリに何かをさせます。トリガーは、ウィジェットだけでなく、ステップ（ステップレベルトリガー）やアプリ（アプリレベルトリガー）にも追加できます。ウィジェットの場合、トリガーを追加したいウィジェットを選択し、トリガーパネルで "Trigger "の隣にあるプラス記号をクリックします。

ステップにトリガーを追加するには、トリガーを追加したいステップにいることを確認します。トリガーパネルの "ステップ "タブに移動し、プラス記号をクリックして、オプションリストから1つを選択する。

アクションが発生したら **、**次のアクションやトランジションを実行する。トリガーは必要なだけシンプルにも複雑にもでき、複数のアクションを追加することもできます。また、実行されるアクションに条件を追加する if ステートメントを追加することもできます。

Ifステートメントでは、アクションが実行される条件を設定します。

**そして、**ステートメントはアクションかトランジションになります。アクションは、ステップの変更とは関係のないアプリの変更です。トランジションとは、ステップを変更するか、アプリを完了することです。

最後に、if文と同じように、else if文があり、if文が偽であることが証明されたときに取るべき代替アクションを決定します。

トリガーの詳細については、トリガーを参照してください。

変数

変数は、Tulip Cloudに保存されるデータの種類で、テーブルやアナリティクスを作成するときに使用されます。Tulipには多くのデータ型があり、それぞれに目的があります：

• ブール値 - はい/いいえ
• Color - ウィジェットのステータスを設定するダイナミックカラー
• Datetime - 日付と時刻のタイムスタンプ
• File - Tulipに保存されたファイルへのリンク
• Image - Tulipに保存された画像へのリンク
• 整数 - 整数
• Interval - 秒単位で表示される時間
• Machine - チューリップのマシンオブジェクト
• Number - 実数
• オブジェクト - 独自のデータ型を持つ子属性を持つ設定可能なオブジェクト構造
• ステーション - チューリップのショップフロアのステーションオブジェクト
• テキスト - 連続した文字
• User - Account/Workspace設定にあるTulipのUserオブジェクト

アプリに変数を追加するには、トリガーパネルのアプリタブに移動し、"変数 "の横にあるXを選択します。

変数ウィンドウが開き、アプリで使用されているすべての変数が表示されます。新しい変数を作成するには、右上の青い "Create Variable" ボタンをクリックします。

ポップアップボックスから、変数名とデータ型を入力し、アプリ完了時に変数をクリアするかどうか、分析用に変数を保存できるかどうかの2つのスイッチを切り替えます。

変数を作成すると、変数ウィンドウにリストされます。

トリガーエディタから変数を作成することもできます。例えば、Submit ボタンをクリックした時に新しいエントリを作成したい場合、トリガを追加するボタンをクリックし、トリガエディタを開きます。

上記のロジックに従った新しいアクションを追加し、識別できるように変数名を付け、書き込むテーブルを選択します。これで、指定したテーブルに保存する変数を介してレコードが作成されます。テーブルについては別のガイドで詳しく説明しますが、今はテーブルがデータを保持することを覚えておいてください。

変数について詳しくは、変数を参照してください。

Tulipでアプリを作る

Tulipのメンバーを使って、シンプルなHello Worldアプリを作りましょう。このコースはTulip Universityでも提供されています。

UIデザインのベストプラクティス

アプリをデザインするとき、ナビゲータビリティとアクセシビリティは、心に留めておくべき2つの重要な概念です。アプリのユーザーが迷うことなくアプリ内をナビゲートでき、インタラクティブなウィジェットの使い方が明確であることが重要です。アプリを作るのが初めてであれば、ユーザビリティのためにユーザインタフェースをどのように最適化できるのか、疑問に思うかもしれません。アプリのインターフェイス設計に関するガイドについては、アプリの設計を参照してください。

その他のリソース

チューリップ大学

Tulip Universityは、Tulipを学ぶための無料のオンデマンドリソースです。Tulipユニバーシティには、アプリ開発を次のレベルに引き上げるためのコース、認定資格、アプリ開発課題が多数用意されています。Tulipエッセンシャルズに登録して最初の一歩を踏み出し、Tulipチャレンジでスキルを練習し、Tulip認定アプリビルダーになって成果を共有しましょう。

チューリップ・ライブラリ

Tulipライブラリーは、Tulipのエキスパートが開発したすぐに使えるコンテンツのコレクションです。完全なアプリケーションやアプリ・スイートから、テンプレート、カスタムウィジェット、コネクタまで、すぐに使えるコンテンツがたくさんあります。

Tulipコミュニティ

ナレッジベースやユニバーシティで解決できない疑問がありますか？あなたの生活を100倍便利にする機能のアイデアがありますか？Tulipの最新情報を知りたいですか？チューリップ・コミュニティをご覧ください。

Tulip Communityは、ユーザーが質問を投稿したり、ディスカッションをしたり、お互いにTulipを使って問題を解決するための活発なオンラインフォーラムです。