アプリ制作を始める

チューリップへようこそ

この記事では、オンボーディングエクスペリエンスを説明し、あなたが素早く行動できるようにするためのリソースを共有します。

チューリップへようこそ

Tulipは、最前線のオペレーションに特有のニーズに合わせて構築されたコードレス・プラットフォームです。Tulipを利用することで、生産現場における最も困難な課題に対して、堅牢でコンポーザブルなソリューションを設計することができます。このガイドでは、Tulip プラットフォームの基本に焦点を当てます。主な機能、場所、コンセプトを確認し、シンプルな「Hello World」アプリケーションを一緒に作りましょう。

:::(情報)(注意:)
この記事は、あなたがTulipインスタンスにアクセスできることを前提にしています。もし、そうでなければ、無料トライアル{target="_blank"}を開始するか、あなたの組織のTulipアクセスを管理する個人またはグループに連絡することでアクセス権を得ることができます。
:::

学習を支援するリソース

Tulipを使いこなすために必要なリソースをご紹介します。

ナレッジベース{target="_blank"}(英語)

ナレッジベースは、Tulipの使い方を学ぶのに役立つ記事、ビデオ、ドキュメントを集めたものです。この記事を読んでいるあなたは、すでにそれを見つけています。いいですねぇ。

左側のナビにあるファイル構造に従ってください。また、検索バーを使って、より詳しい情報が必要なトピックに関連するコンテンツを探すこともできます。

チューリップ・ユニバーシティ{target="_blank"}について

チューリップ・ユニバーシティは、チューリップを学習するための無料のオンデマンド教材です。Tulip Universityには、アプリ開発を次のレベルに引き上げるためのコース、認定資格、アプリ開発チャレンジが多数含まれています。Tulip Essentials{target="_blank"}に登録して最初の一歩を踏み出し、Tulip Challengesでスキルを磨き、Tulip Certified App Builder{target="_blank"}になって成果をシェアしてください。

ライブラリ{target="_blank"}.

チューリップライブラリーは、チューリップの専門家が開発したすぐに使えるコンテンツの集合体です。アプリケーションやアプリスイート、テンプレート、カスタムウィジェット、コネクターなど、すぐに使えるコンテンツがたくさんあります。

コミュニティ{target="_blank"}.

ナレッジベースやユニバーシティで答えが見つからなかったら、コミュニティで質問してみましょう。あなたの生活を100倍簡単にする機能のアイデアをお持ちですか？Tuliverseの最新情報を知りたいですか？チューリップ・コミュニティをチェックしてみてください。

Tulip Communityは、ユーザーが質問を投稿し、議論し、お互いにTulipを使用して問題を解決するのを助けるための活発なオンライン・フォーラムです。

はじめに - インスタンスのクイックツアー

まず、あなたのインスタンスのクイックツアーを開始しましょう。この概要では、Tulipで見つける方法を知っておくべき5つの主要な場所があります。

• アプリケーションとアプリケーションエディタ
• テーブル
• ショップフロア
• ダッシュボード
• アカウント設定

それぞれを順番に見ていきましょう。

アプリケーションとアプリケーションエディター

アプリのページ

アカウントにログインすると、Appsのホーム画面が表示されます。ここでは、インスタンス内のすべてのアプリケーションを表示および管理できます。

{height="" width=""}.

このページを見つけるには、トップナビゲーションの「Apps」にカーソルを合わせ、ドロップダウンメニューから「Apps」をクリックします。

アプリのホーム画面とアプリエディタ

アプリケーションエディターは、アプリケーションを構築する作業を行う場所です。アプリケーションエディタに行くには、既存のアプリケーションを選択するか、新しいアプリケーションを作成します。アプリケーションをクリックします。この画面では、アプリケーションのCompletionデータの表示、アプリのPermissionやApprovalの管理、アプリのVersionの公開が可能です。

{height="" width=""} このメニューから任意のステップをクリックします。

このメニューのいずれかのStepをクリックすると、アプリのエディタが表示されます。

{height="" width=""} このメニューのいずれかのStepをクリックすると、アプリのエディタに移動します。

ここで、見ているものを整理してみましょう。いくつかの重要な領域で作業を行うことになります。

:::(情報)(注意:)
アプリケーション・エディタの詳細については、こちらの記事を参照してください。
:::

アプリエディタにある4つの主要なツールを見てみましょう。

• ドラッグ＆ドロップのインターフェイス
• ツールバー
• コンテキストペイン
• ステップと記録ペイン

ドラッグ＆ドロップのインターフェイス

画面の中央には、ドラッグ＆ドロップのインターフェイス、つまり白紙の状態になっています。

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

ここでユーザーインターフェイスをデザインします。ウィジェットを埋め込み、インタラクティブな要素を作成し、ユーザーがアプリケーションと対話するために必要なすべての情報と機能を整理します。

ツールバー

キャンバスの上には、ツールバーと呼ばれる一連のドロップダウンが表示されます。これらのメニューを使って、テキスト、入力、その他のウィジェットをアプリケーションに追加します。

{height="" width=""}.

コンテキストペイン

右側には、アプリケーション、ステップ、ウィジェットの詳細を設定する「コンテキストペイン」があります。ここでは、アプリケーションにロジックを追加したり、アプリレベルのデザイン設定を管理したり、アプリに追加するウィジェットを調整したりします。

{高さ="" 幅="" }.

ステップと記録ペイン

最後に、左側のペインでは、アプリケーションに新しいステップを追加したり、アプリが接続するテーブルを管理したりします。

{高さ="" width=""mm｝

テーブル

テーブルとは、アプリケーションで収集したデータを保存するために構築するカスタムデータベースです。

{height="" width=""} テーブルは、アプリケーションで収集したデータを保存するために構築するカスタムデータベースです。

テーブルは、Excelなどの表計算ツールと本格的なリレーショナルデータベースの中間的な存在で、シンプルでも複雑でも、自分の使いやすいようにデータモデルを構築することができます。

:::(情報)(注意)
テーブルを使ったアプリ構築の概要については、Universityの「Build a Simple Data Entry App{target="_blank"}」コースを試してみてください。また、テーブルについては、ナレッジベース{target="_blank"}の他の場所でも広く取り上げています。
:::

テーブルを見つけるには、トップナビの「Apps」タブに移動し、ドロップダウンから「Tables」を選択します。

テーブルのホーム画面では、既存のテーブルを表示したり、新しいテーブルを作成したりすることができます。

ショップフロア

ショップフロア]タブは、Tulipインスタンスに関連するステーションと物理デバイスを管理するために使用されます。ショップフロア]タブでは、ステーションの作成と管理、エッジデバイスの管理、マシン、Tulip Visionの管理などのオプションがあります。

{height="" width=""}.

ここでは、"Stations "に注目しましょう。ステーション "をクリックすると、ステーションを作成し、出版ワークフローの重要なステップであるアプリケーションの割り当てを行うページが表示されます。

:::(情報)(注意:)
ステーションについては、ナレッジベースと チューリップ大学{target="_blank"}で詳しく説明されています。
:::

このページは、完成したアプリケーションを本番に移行する準備の中で、より多く利用することになるでしょう。

ダッシュボード

アナリティクスを構築し始めると、インスタンスの "Dashboards" セクションに表示されるようになります。上部のナビにある "Dashboards" オプションをクリックすると、ここに移動します。

ダッシュボードは、Analyticsのコレクションと考えることができます。ダッシュボードは、任意のロジックに従って整理することができます。

{height="" width=""}.

重要なのは、ダッシュボードをURLとしてエクスポートし、Tulipのアカウントを持っているかどうかに関係なく、誰とでも共有できることです。

{height="480" width="640"}。

これにより、組織内の誰とでも結果や指標を共有することができます。

アカウント設定

Tulipインスタンスの右上にあるアイコンをクリックすることで、アカウント設定にアクセスすることができます。ここでアクセスできるオプションは、お客様の権限レベルに応じて異なります。

{height="" width=""}.

チューリップ・プレーヤー

Tulipの最も重要な部分の1つであるTulip Playerは、Webインスタンスに配置されているわけではありません。

Tulip Playerは、アプリケーションを実行するために特別に設計されたアプリケーションです。このアプリケーションは、さまざまなデバイス、さまざまなオペレーティング・システムで実行することができます。ただし、アプリケーションを実行するデバイスには、チューリップ・プレーヤーをダウンロードする必要があります。

Tulip Playerのダウンロードはこちらから。インストールと設定方法については、こちらをご覧ください。

アプリを作る

インスタンスの使い方がわかったら、次はアプリケーションの作り方を学びましょう。一緒にアプリケーションを構築するのが一番です。インスタンスを立ち上げて、"Hello World "アプリケーションを一緒に作りましょう。

新しいアプリケーションの作成

まず最初に、新しいアプリケーションを作成する必要があります。これを行うには、トップナビの「Apps」メニューを使用して、プラットフォームの「Apps」セクションに移動します。

右上の "create application "をクリックします。すると、新しいアプリケーションを作成するか、テンプレートから始めるかどうかを尋ねるモーダルが表示されます。さまざまなテンプレートで遊んでみることをお勧めしますが、ここでは、モーダルの右下にある「作成」をクリックして、空のアプリから始めてみましょう。

{height="" width=""}.

アプリのホーム画面が表示され、このアプリの設定を行うことができます。左上の「Untitled App」横の鉛筆をクリックして、アプリの名前を「Hello World」にします。次に、任意のステップをクリックすると、アプリのエディタが表示されます。

Hello World」アプリの作成

{height="1080" width="1920"}.

アプリの構築プロセスをいくつかの重要なステップに分けることができます。このステップは、Tulipを使用する過程で、規模や複雑さのレベルを変えて再現することができます。

• ユーザーインターフェースの設計
• ロジックの追加
• テスト

ここでは、できるだけシンプルに、基本的なインターフェースの設計、1行のロジックの追加、および開発者モードでのアプリのテストに焦点を当てます。

アプリケーションのUIをデザインする

ユーザーインターフェイスとは、アプリケーションの各ステップにおける、グラフィカルでインタラクティブな要素の配置のことです。優れたUIを設計することは、ユーザーがアプリケーションとうまく対話できるようにするために不可欠です。

:::(情報)(注意:)
ユーザーインターフェースデザインは、チューリップ大学{target="_blank"}で詳しく説明されています。
:::

とりあえず、基本的なことをやってみましょう。UIに4つの要素を追加していきます。

• ヘッダーバーを作成するためのシェイプ
• アプリケーション名を表示する変数
• メニューボタン
• クリックすると「Hello World」と表示されるボタン

ベースレイアウトの設計

ベースレイアウトは、アプリケーションの各ステップに適用されるデザインパターンです。

ここでは、アプリケーションのベースレイアウトとしてUIを設計します。

Base Layoutにアクセスするには、App Editorの左下にある「Base Layout」というテキストをクリックします。テキストの後ろの背景が水色にハイライトされると、Base Layoutを編集していることが分かります。

{height="" width=""}.

ヘッダーバーを追加するには、ツールバーの「Assets」メニューに移動して、「rectangle」オプションを選択します。すぐに表示されない場合は、検索バーで「rectangle」と検索してください。

rectangle」をクリックすると、アプリエディタのサンドボックス領域にシェイプが追加されていることが確認できます。シェイプをクリックして選択します。右側のペインに、アセットの設定を調整するためのオプションが表示されます。色をダークグレーに変更します。ウィジェットの設定を調整して、寸法を1920w x 100hにするか、アプリケーションの上部にまたがるようにドラッグして配置します。

トップナビゲーションにステップ名を追加する

ユーザーがアプリにアクセスしたとき、現在使用しているステップの名前をアプリに表示させたいと思います。この例では、作成したばかりのトップバーに「Hello World」と表示させたいのです。

そのためには、ツールバーの「テキスト」メニューをクリックし、ドロップダウンから「変数」を選択します。あるいは、キーボードショートカットの「V」キーを押すだけでもよいでしょう。

Tulipの変数は、値のプレースホルダーです。変数を表示するように選択すると、アプリケーションはその変数に現在格納されている値を表示します。

ステップの名前にアクセスするには、変数を設定する必要があります。

埋め込み変数が選択されていることを確認し、右パネルのウィジェット・ペインに移動します。Datasource」の下にある「App Info」を選択します。Select App Info "ドロップダウンから、"Step Name "を選択します。

変数をドラッグ＆ドロップして、トップバーの所定の位置に配置します。暗い背景で読みやすくするために、テキストの色を変更することもできます。

あるいは、ツールバーのテキストメニューから「ステップ名」を追加するだけでもかまいません。

最後に、ステップに名前を付けます。左のステップペインにある「Untitled Step」をダブルクリックし、ステップの名前を「Hello World」に変更します。

メニューボタンを追加する

ツールバーの「ボタン」メニューを使用して、アプリケーションに「メニュー」ボタンを追加します。トップバーの左上または右上にドラッグして配置します。

ユーザーがアプリケーションを変更したり、キャンセルしたり、一時停止したりできるように、アプリケーションの各ステップからメニューボタンにアクセスできるようにすることが重要です。

Hello Worldボタンを追加する

ツールバーの「Buttons」メニューを使って、アプリケーションにボタンを追加します。ボタンは、レイアウトの中央に配置してください。

このボタンには、次のセクションでロジックを追加します。

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

トリガーロジックは、アプリをスマートにするものです。スライドショーソフトと、Tulipで作るダイナミックでレスポンシブなアプリを区別するのは、このロジックです。

Tulipのロジックの構造

Tulipのロジック文は、同じパターンに従っています。When→If→Thenです。

{height="" width=""} となります。

あるイベントが発生したとき、ある条件を満たすか満たさないかで **、**アプリケーションは指定されたアクションを実行します。

Hello World」アプリケーションのトリガーは、これと同じ構造になります。

ユーザーがボタンを押すと、"Hello World "というメッセージを表示します。このトリガーには、条件文は入れません。

Tulipでトリガーを追加する場所

Tulipでは、ロジックはイベントに関連付けられます。ユーザーがボタンを押す、マシンの状態が変化する、バーコードをスキャンする、などはすべてイベントの例です。Tulipでトリガーを追加する場所はいくつかあります。

• ボタンやインタラクティブなテーブルのようなウィジェットに
• ステップに、"ステップオープン時"、"ステップクローズ時"、"デバイスファイア時 "などのアクションを追加する。
• アプリに、"when app opens "のようなアクションを追加する。
• 最初のトリガーを作成する

最初のトリガーを書きましょう。

このトリガーは、2つのことを行います。

1. テキスト文字列を変数に格納する
2. その変数を含むメッセージを表示する

完成したら、以下のようになります。

{height="" width=""}のようになります。

ユーザーインターフェースの真ん中に配置したボタンを選択します。ウィジェットを選択したら、コンテキスト・ペインで "triggers "と書かれたフォルダを探し、プラス記号をクリックしてトリガを追加します。これにより、トリガ・モーダルが表示されます。

トリガには、"Print Hello World "のような名前をつけてください。

このトリガはボタンにアタッチされているので、WHEN文は私たちのために用意されています。ボタンが押されたときです。

ですから、私たちの仕事は、アクション文、THENを書くことです。まず、文字列を変数に格納することから始めましょう。

"新しいアクションを追加 "をクリックします。ドロップダウンメニューから、"Data Manipulation "を選択し、"Store "を選択します。このアクションでは、保存するデータの種類と場所を指定する必要があります。Data:" の後にあるドロップダウンで "static value" を選択し、"Text" を選択します。この静的な値にメッセージを入れることにします。入力フィールドに、"Hello World "とメッセージを書き込んでください。

このトリガーの次の部分は、"location:"、つまりデータを保存する場所を決めることです。ドロップダウンから "Variable "を選択し、新しい変数を作成することを選択します。変数に "Hello World Variable "のような名前をつけて、緑色のチェックをクリックします。

ほぼ完了です。次に必要なのは、この変数をメッセージに表示することです。これを実現するために、トリガーに別のアクションを作成します。

add new action "をクリックし、ドロップダウンから "Show Message "を選択します。最後に、どのデータをMessageに入れるかを指定します。すでに変数を作成しているので、ドロップダウンから "Variable "を選択し、"Hello World "変数を選択します。

トリガーを保存します。これで、アプリをテストする準備ができました。

アプリのテスト

設計プロセスのどの時点でも、アプリ・エディタのツールバーの右側にある「Test」ボタンを使って、アプリケーションをテストすることができます。これはサンドボックス環境であり、本番データやシステムを危険にさらすことなくアプリケーションをテストすることができます。

{height="" width=""}.

デベロッパーモードが開いたら、アプリケーションをテストできます。begin "を押して、ボタンを押してください。画面の下に "Hello World" というメッセージが表示されるはずです。

アプリケーションを公開する

アプリケーションを本番環境に投入する前に、そのアプリケーションを公開する必要があります。これにより、Station でアクセス可能な読み取り専用のアプリケーションを作成します。

アプリケーションはバージョンとして公開されます。アプリケーションに変更を加えるたびに、プレイヤーで最新の変更にアクセスするために新しいバージョンを公開する必要があります。これは変更管理に役立ち、承認されたバージョンと修正のみが実運用に移行することを保証します。

{height="" width=""}.

アプリケーションを公開するには、アプリケーションエディタに戻ります。画面右上にある "publish "ボタンをクリックします。すると、このバージョンで何が変わったかについてのコメントを求めるモーダルが表示されます。好きなコメントを追加してください。コメントは、規模が大きくなればなるほど重要になりますが、今はシンプルにしておくとよいでしょう。そして、「Publish Version 1」をクリックします。

Tulipで構築するもの

Tulipは非常に柔軟なソリューションです。真のプラットフォームであるため、構築できるアプリケーションの種類に制限はありません。そこで、重要な疑問が生じます。チューリップで何を作ればいいのでしょうか？

{という疑問が湧いてきます。｝

もちろん、その答えはお客様の運用ニーズによって異なります。多くのユーザーは、次のような具体的な目的を持ってチューリップを利用しています。

• 手作業による組み立て作業でのミスを減らす
• 機械の稼働時間や停止時間の把握
• 生産状況の可視化
• 多品種生産環境における製品系譜の簡素化

このような具体的なビジネス目標は、簡単にアプリケーション（または一連のアプリケーション）に変換することができ、それによって望ましい結果を得ることができます。私たちは通常、このようなアプリケーション群をユースケースと呼び、特定の業務上の課題を解決するのに役立っています。上記の業務目標に対応するユースケースは、以下のようなものです。

• デジタル作業指示書
• 機械モニタリング
• 生産追跡
• トレーサビリティと家系図

これらのプロジェクトは、単一セル内の単一ステーションを対象とした品質検査アプリケーションから、医薬品製造オペレーション全体を対象とした大規模な電子バッチ記録ソリューションまで、幅広い範囲をカバーすることができます。多くの場合、チューリップのお客様は、シンプルなユースケースから小規模にスタートし、迅速な価値提供と機能構築を行い、チューリップの使い心地が良くなるにつれて、ソリューションを拡張しています。

:::(情報)(注意)
この{target="_blank"}コースで、最初のユースケースを選択する方法を学びます。チューリップ・ユニバーシティ・コース
:::

ここで重要なことは、チューリップの基本的な機能は、あなたが想像できるどんなアプリケーションでも、どんな運用上の課題でも、どんな規模でも設計することができるということです。

チューリップのいくつかの重要な機能を学ぶことで、あなたのチームは、今日、明日、来年の最も困難な課題に対するソフトウェアソリューションを設計する能力を得ることができるのです。