Webアプリを作ってみよう

目次

1. はじめに
2. プロジェクトの作成
3. 動かしてみよう
4. どんな動きになるか見てみよう
5. アプリを公開しよう
6. まとめ

はじめに

2章でVisualizerの使い方について簡単に学んだので、
3章からは早速実際のアプリを作成しながら学んでいきましょう！

今回は、まずWebアプリを作成するところからスタートします！

プロジェクトの作成

まずはプロジェクトの作成を行います。

新しいプロジェクトを作成するので、
Project > New projectを選択してください。

次に、ダイアログが表示されるので、
今回は、「Web App」を選択しましょう。
（モバイルアプリを作成する際は、「Native App」を選択します。）

デバイスサイズを選択する画面が表示されるので、
「Desktop」を選択してください。
選択したデバイスサイズによって、ブレークポイントが設定されます。

プロジェクトの名前を設定し、「Create」をクリックしてください。

しばらくすると、作成したプロジェクトが開きます。

これでプロジェクトの作成ができました！

動かしてみよう

画面（Form)の作成

Viualizerでは、アプリの画面のことをFormという名前で表現します。
簡単に動くアプリを作成したいので、画面作成のため新しくFormを作成しましょう！

「Forms」を右クリックし、「New Form」をクリックすると、
Form1として画面が生成されます。

何の画面かわかるよう、名前をつけてあげましょう。
フォーム名は、前にfrmをつけて、「frmXXXX」等と命名することが多いです。

Widgetを配置してみよう

次に、2章で学んだWidgetの説明を参考にしながら、
好きなWidgetをFormに配置してみてください！

▶︎Widgetの機能について簡単にご紹介

Widgetの配置の仕方については、上記記事で紹介しておりますので、
忘れた方は見直してみましょう

今回は、Labelを配置しました。
表示する文字を変えたい場合は、右メニューの「Text」から変更が可能です。

色や背景、枠線など見た目の変更は、Lookタブで変更が可能です。

Label以外にも様々なWidgetを配置してみて、
色やレイアウトの変更をして見るなどたくさん触ってみましょう！

画面遷移してみよう

操作感にも慣れてきたと思いますので、
画面遷移のアクションを追加していきましょう！

Form内に、Button Widgetを配置してください。

今回はこのように配置しました。

Button Widgetを選択した状態で、
右メニューのPROPERTIES->Actionタブを見ると
「onClick」というイベント名が表示されていると思います。
onClickは、そのWidgetがクリックされた時に発生するイベント名となります。

クリックした時にどんなアクションを起こしたいか編集する場合は、
イベント名の横にある、「Edit」ボタンをクリックします。

アクションを設定するアクションエディタが表示されます。

左メニューに様々なアクションが並んでいますが、
今回は画面遷移をしたいので、画面遷移アクションの「Navigate to Form」を選択してください。

StartとEndの間に新しいアクションが追加されました。

このままだとどの画面に遷移するか定義できていないため、
右に表示されるFormの一覧から、遷移先のFormを選択しましょう。

他のフォームがない場合は、「Create New」をクリックすると新しいフォームが作成されます。
遷移先のFormを選択したら、「Save」で保存しましょう！

これで画面遷移の設定は完了です。
コーディングすることなく、画面遷移ロジックを作成できるので、とても簡単です！

Button WidgetのonClick以外のアクションについては、公式ドキュメントに記載があります。
今のうちから公式ドキュメントを見る癖もつけておきましょう！
▶︎Button Widget

どんな動きになるかみてみよう

作成した画面が実際どのような表示になっているか確認したいですよね？
次に、プレビューの見方をご紹介します！

ローカルで確認する

まず、ローカルで動作をチェックする方法を紹介します。

Visualizerの一番上にあるメニューから、
Build -> Live Preview Settingsをクリックしてください。

以下のようなポップアップが表示されますので、
「RESPONSIVE WEB」を選択し「Clean Preview」を選択後、
「Save & Run」をクリックしてください。

【補足】
Clean Previewにチェックを入れない場合、
キャッシュが残りうまく表示されない可能性があるため、
Clean Previewに毎度チェックを入れることを推奨しています。

しばらくすると、Visualizer Previewが開き、
作成した画面が開くと思います。

Visualizer Previewは、
Webアプリの表示確認で使えるプレビューアプリです。
Live Previewを実行すると自動的に開きます。
（モバイルの場合は、別のアプリで動作の確認ができます。
これについては次の回でご紹介します。）

Live Previewには、
プレビューを表示させた後、そのままVisualizer上で画面を編集し、
その編集した箇所をプレビューに瞬時に反映させる
ホットリロード機能というものがあります。

スピーディに作業ができる優秀な機能なので、
機能の詳細な説明については以下記事をご参考ください！
▶︎Visualizer Version9でのLive Previewの使い方とホットリロードの説明

簡単な画面のレイアウト確認などは、Live Previewを使うと
ぱっと確認できるので便利です。

ブラウザで確認する

また、先ほどのLive Previewを実行した場合、
VisualizerのConsoleを見ると、URLが発行されています。

こちらをクリックすると、ブラウザでの表示を確認することができます。

APIの通信が必要な動作の確認などの場合は、
Visualizer Previewでは動作しないため、ブラウザで確認するようにしましょう👀

動作確認してみるとどうでしょうか？
ボタンを押すと次の画面に遷移したことがわかりますね！

これで一通り動くアプリを作成できました。
次は、他の人もアプリにアクセスできるよう、アプリ公開手順をご紹介します！

アプリを公開しよう

1.Fabricにアプリを作成する

まずは、アプリを公開するため、
以下のFabricコンソールにアクセスし自身のアカウントでログインしてください。
https://manage.kony.com

アカウントがない方は、「Create Account」のリンクをクリックし、
下記手順に沿ってアカウントを作成後にアクセスを行ってください。
Fabric Consoleのアクセス方法

コンソールが表示されたら、
「ADD NEW」をクリックし、新しいAppを作成します。

（引用：User Guide: Create a Quantum Fabric Account）

しばらくすると、作成されたAppの画面が表示されます。

鉛筆マークをクリックするとFabricApp名の編集が可能ですので、
Visualizerで設定したApplicationIDとApp名と同じ名前を設定しましょう。

【注意】
この時Fabricの名前は、
VisualizerのApplication ID、App名と同じになるようにしましょう。

ここが一致していない場合、
アプリを公開した際に500エラーが発生しアプリが開けない可能性があります。

※下記3つの名前は一致するようにする

VisualizerのApp名	VisualizerのID	FabricのApp名

FabricサーバーにAppを作成できましたので、
次は、Visualizerに戻りアプリを公開するためのbinaryデータを作成します。

2.VisualizerとFabricの接続

Visualizerを開いたら、
左サイドメニューにある歯車のマークをクリックし、Project Settingsを開きます。

Fabricメニューを選択し、
アプリを公開する先のFabricサーバーを設定しましょう。

• Cloud Account : 所属している組織のクラウドアカウントを選択
• Environment: アプリを公開する環境を選択
  

1の手順で作成したFabricAppに接続するために、
右メニュー「DATA & SERVICES」タブ内にあるハンバーガーメニューをクリックし、
「Link to Existing App」をクリックしましょう。

ログイン中のクラウドアカウントに存在しているFabricAppが一覧表示されるので、
1の手順で作成したApp名を選択し「ASSOCIATE」をクリック。

右メニューのFabric Backendの値が、選択したFabricAppに変わったかと思います。

これでFabricとの接続が完了しました！

3.アプリのビルド

次に、Visualizerトップメニューから
Build -> Build and Publish Webをクリックします。

Post Build Actionsで「Generate Web App」を選択し
Environmentは、アプリを公開したい環境を選択、
他の値は画像の通りとなるように設定してください。
（※アプリのリリース時は、Build Mode: Releaseに変更します）

設定が完了したら、「Build」をクリックしましょう。

しばらくしたら、Consoleタブにbinaryデータが出力されるので、
リンクをクリックしてフォルダを開いておきましょう。

4.Publish（公開）しよう

Fabricを再び開きます。
1の手順で作成したFabricAppを開き、
Manage Client App Assets -> Webをクリックします。

「Upload」ボタンをクリックすると、ポップアップが表示されますので、
ドラック&ドロップエリアに先ほど出力されたbinaryをアップロードしましょう。
Versionは、初回なので「1.0.0」と入力し、Descriptionは何でも構いません。

設定が終わったら、「Upload」ボタンをクリックしてください。
一覧にアップロードしたデータが表示されたらOKです。

次にPublishタブに移動し、
アプリを公開する環境にチェックマークをつけましょう。


下にスクロールし、「CONFIGURE & PUBLISH」をクリックします。

Web Clientのプルダウンで、先ほどアップロードしたbinaryのバージョンを選択します。
右下の「SAVE & PUBLISH」をクリックします。

進行中のポップアップが表示されるので、このまましばらく待ちます..🕑

Publishされたら、ポップアップが表示されるので、
「Web Application URL」に表示されているURLをブラウザにコピペして見ましょう！

ブラウザで表示できましたね！

エラーが発生した場合
もし500エラーなどが発生する場合は、以下を確認して見てください。
・シークレットモードでアプリを開く
・ブラウザの履歴を削除して再度開く
・Visualzierでのビルド時に、Cleanにチェックをつけてビルドし直す
・VisualizerのAppID、AppName、FabricのFabricApp名が一致しているか、
またビルド時に出力されたbinary名を変更していないか確認する

まとめ

今回のまとめです
アプリを公開する手順は、今後よく使うのでたくさん手を動かしながら慣れていきましょう！

• アプリを作成するには、まずプロジェクトの作成をする
• 画面遷移などのアクションは、アクションエディタで設定ができる
• 簡単な画面の確認は、Live Previewでできる
• APIの通信など確認する場合は、ブラウザで確認する
• アプリの公開には、まずFabricにAppを作成しVisualizerでビルド後FabricでPublishを行う
• Fabricの名前は、VisualizerのApplication ID、App名と同じになるよう設定する

次の記事

今回はWebアプリの作成方法でしたが、いかがだったでしょうか？
最初は難しい点もあると思いますが、
慣れると簡単で、すぐにスムーズにできるようになります

早速、次はモバイルアプリの作成にいきましょう！
▶︎モバイルアプリ（iOS/Android）を作ってみよう

記事一覧：
https://qiita.com/Kony_Team/private/4c922fa016ce95c58406

最後に一言

より読みやすい記事にしていきたいので、
「ここがわからなかった！」
「ここがもっと知りたい」
など、コメントいただけると嬉しいです！

参考