今回、SAP AppGyver を使ったアプリ開発に初めてチャレンジしました。ここで得た経験はこれから同じく SAP AppGyver での開発を始める方にも有効かと思い、このブログを書くことにしました。
作成したのは、超簡単な「お使い計算」アプリです。初回はなんでもそうですが、思わぬところで躓くことがありますが、コミュニティでのブログや Q&A 、YouTubeでの豊富なチュートリアルビデオなどを参考にすることで、開発を効率良く進めたり、どうすればよいか思案する場面での指針を得ることができました。参照したサイトについては、本ブログの末尾をご覧ください。
SAP AppGyver は、Web、iOS、Android 用のアプリを視覚的に構築するノーコード/ローコードアプリケーション開発環境です。詳細については、SAP AppGyver の製品紹介サイトをご覧ください。
SAP AppGyverには、無償の Community edition と、有償の BTP edition があります。今回は、無償の Community editionを使っています。
URL: https://otukai.appgyverapp.com/
以下のステップをたどりながら、学習し、構築しました。
Sign Up for AppGyver Composer Pro のページで、E-mail や Password などを入力してフリーアカウントを作成します。
AppGyverドキュメンテーションサイト https://docs.appgyver.com/docs をオープンし、Quick startの章の説明文を読みました。次に、その下位ノードのVideos > Onboarding にあるビデオを観ました。ビデオのひとつひとつは、数十秒から長くても3分程度と、見やすい内容となっています。
類似のアプリ、あるいはその開発に関する既存情報は無いかと考え、「appgyver calculator」で google 検索したところ、まさにぴったりの YouTube 動画 How To Make A Basic Calculator App In Appgyver - Functions And Variables Basics (https://www.youtube.com/watch?v=siGztf4H6rg) を発見しました。この動画によって、AppGyver での電卓アプリの基本的な作りかたを学びました。
https://platform.appgyver.com で、フリーアカウントとして登録した EmailとPasswordでログインします。
ログオン後の画面 https://platform.appgyver.com/apps の CREATE NEW ボタンをクリックし、Project を作成します。今回のプロジェクト名は otukai としています。
初期画面の UI CANVAS（画面上部に青色でハイライト）で、画面左側のパネルから Container、Text、Input field、Button などの画面要素をドラッグ&ドロップで配置していきます。Text、Button に関しては、右側の PROPERTIES タブの Content と Label で、文字列を割り当てていきます。
Input field とその Text を水平方向に並べたいので、まず Container を配置して、その中に、Text、Input field を配置していくことがひとつのコツです。画面右下の TREE 領域を使って、Container を選択し、LAYOUT タブの LAYOUT を Horizontal にし、Align components を左から2番目のアイコンを選択することで垂直方向で中央に整列できます。
また、縦方向で Text と Input field の幅を一致させるために、Text の幅をピクセル数で指定しています。
また、Input Field の高さを調整するためには、やや分かりづらいですが、画面右下の TREE パネルで、斜めのペンアイコンをクリックします。
遷移先の画面右上の STYLE タブの PADDING で上下のパディングをピクセル単位で調整しています。元に戻るには、画面右上の EXIT アイコンをクリックします。
Input filed に入力した値や、計算結果を保持するための変数を定義していきます。
UI CANVAS の右上のスライダーを VIEW から VARIABLES へ移動し、画面左側のパネルの中の PAGE VARIABLES を選択し、ADD PAGE VARIABLES ボタンをクリックすることで、Page Variable を定義していきます。下図では、定義した expense1 という数値型の変数を参照しています。
スライダーを VIEW に戻し、Input field を選択し、PROPERTIES タブの Value ボタンで、直前で定義した Page Variable を割り当てていきます。
Label を「計算」としたボタンを選択し、画面右下の Add logic to ... をクリックすることで、LOGIC ウィンドウがオープンし、ボタンクリック時の動作を定義できます。
ここでは、画面左側のパネルから Set page variable アイコンを2回ドラッグ&ドロップで配置し、最初のボックスの EVENT から順に線でつないでいます。
最初の Set page variable で、使った金額の合計を算出し、その結果を合計を表す変数に割当てし、次の Set page variable で、もらった金額から使った金額の合計を引き算し、結果を残った金額の変数に割り当てます。そのためには、配置した Set page variable ボックスを選択し、PROPERTIES タブで Variable name ボタンで、宛先の変数を指定し、Assigned value ボタンで、計算式を割り当てます。
なお、変数の足し算においては NUMBER ファンクションでテキストを数値に変換する必要があります。これは、前述の「類似アプリの検索」で見つけたビデオの中で学習しました。
また、「計算」ボタンをクリックした際、すぐに iPhone のキーボードが消えるようにするために、Dismiss keyboard ロジックも使っています。Dismiss keyboard ロジックは、LOGIC ウィンドウの INSTALLED タブ、MARKETPLACE から検索し INSTALL することで利用可能になります。
画面上部の LAUNCH をクリックし、画面左側のパネルの PREVIEW を選択、左側の Web Apps エリアの OPEN APP PREVIEW PORTAL ボタンをクリックすると、ブラウザに新しいタブが追加され、プロジェクト一覧が表示されます。
画面上部の LAUNCH をクリックし、画面左側のパネルの DISTRIBUTE を選択、OPEN BUILD SERVICE ボタンをクリックします。
ブラウザに新しいタブが追加され、BUID ページ（下図）がオープンします。ここでは、Apple App Store および Google Play ストアに配布するためのアプリケーションのスタンドアロンビルドを作成できるほか、appgyverapp.com ドメインでホストされる Web アプリケーションを構築することができます。または、Web ビルドを zip ファイルとしてダウンロードし、独自にホストすることもできます。
私は、iOS アプリのビルド、そして、Apple App Store に配布の選択肢を最初に考えたのですが、ドキュメンテーション IOS builds 、およびその中のビデオを見て、有料の Apple Developer Program へのエンロール、Mac PC が必要であることを知り、今回のブログのためだけにこれを選択するまでの理由はないと考え、無償で可能な Web ビルドを選択しました。
そのために、まず、Web App の CONFIGURATION ボタンをクリックし、Domain タブで独自のホスト名を指定しました。ここでは、ホスト名は otukai としました。既に存在する名前と被らなければ自由に設定できます。他のタブでの設定についてはデフォルトのままです。
次に BUILD ボタンをクリックし、下図のように、Client runtime version では最新のバージョンを、Should the resulting app be deployed to: では YES を、Version に適当な値を入力し、BUILD ボタンをクリックします。これにより、otukai.appgyverapp.com でホストされる Web アプリケーションを構築が開始されます。
下図のように、History が追加され、最初は Status は created と表示され、次に queued、最後に delivered になります。これには、数分以上かかります。また、完了は、フリーアカウントで登録したメールアドレスにも通知されます。これで、ブログ冒頭にURLで示した通り、アプリにアクセスできるようになります。
SAP AppGyver のドキュメンテーション https://docs.appgyver.com/docs/home
SAP AppGyver のヘルプ https://help.sap.com/docs/APPGYVER
SAP AppGyver のコミュニティ（全般） https://community.sap.com/topics/appgyver
SAP AppGyver のコミュニティ（技術的な話題） https://forums.appgyver.com/
SAP Discovery Center での SAP AppGyver サービス（価格情報や関連ミッションを含む） https://discovery-center.cloud.sap/serviceCatalog/sap-appgyver
SAP Developer Tutorial でのチュートリアル（バーコード読み取りアプリ） https://developers.sap.com/mission.appgyver-low-code.html
SAP Learning での SAP AppGyver を含むローコード/ノーコード開発（市民開発者としてのひとつの視座を得ることができます） https://learning.sap.com/learning-journey/utilize-low-code-no-code-applications-and-automations-for-...
YouTube - Appgyver Absolute Beginner Tutorial（12回のシリーズで完結、Meetingの作成と評価アプリ） https://www.youtube.com/playlist?list=PLYWBKxY2jpP-UNGBpbwyocG-nlNt8NpIZ
YouTube - Appgyver Tutorials（現時点で40のビデオがあり、様々なトピックに渡る How To Guide、今回のブログ作成でも活用） https://www.youtube.com/playlist?list=PLd-L5s0e6eif0cu7kMuX2-mGeH7uB3QuV
YouTube - AppGyver YouTube Channel https://www.youtube.com/user/appgyverinc
今回のチャレンジでは、個人的に身近な課題に起因し、かつ、シンプルに実装できるアプリ、できれば、他にはないくらい簡単なものを、アプリ公開まで含めて、通しでやってみることを目的としていました。
皆さんも、日々の業務や生活における課題で、かつ、簡単に解決できそうな課題、から、SAP AppGyver を始めてみては如何でしょうか？
最後までお読みいただき、ありがとうございます。
作成したのは、超簡単な「お使い計算」アプリです。初回はなんでもそうですが、思わぬところで躓くことがありますが、コミュニティでのブログや Q&A 、YouTubeでの豊富なチュートリアルビデオなどを参考にすることで、開発を効率良く進めたり、どうすればよいか思案する場面での指針を得ることができました。参照したサイトについては、本ブログの末尾をご覧ください。
SAP AppGyverとは
SAP AppGyver は、Web、iOS、Android 用のアプリを視覚的に構築するノーコード/ローコードアプリケーション開発環境です。詳細については、SAP AppGyver の製品紹介サイトをご覧ください。
SAP AppGyverには、無償の Community edition と、有償の BTP edition があります。今回は、無償の Community editionを使っています。
開発アプリの概要
URL: https://otukai.appgyverapp.com/
私がたどったステップ
以下のステップをたどりながら、学習し、構築しました。
フリーアカウントの作成
Sign Up for AppGyver Composer Pro のページで、E-mail や Password などを入力してフリーアカウントを作成します。
基本機能の学習
AppGyverドキュメンテーションサイト https://docs.appgyver.com/docs をオープンし、Quick startの章の説明文を読みました。次に、その下位ノードのVideos > Onboarding にあるビデオを観ました。ビデオのひとつひとつは、数十秒から長くても3分程度と、見やすい内容となっています。
類似アプリの検索
類似のアプリ、あるいはその開発に関する既存情報は無いかと考え、「appgyver calculator」で google 検索したところ、まさにぴったりの YouTube 動画 How To Make A Basic Calculator App In Appgyver - Functions And Variables Basics (https://www.youtube.com/watch?v=siGztf4H6rg) を発見しました。この動画によって、AppGyver での電卓アプリの基本的な作りかたを学びました。
アプリ開発のステップ
ログオン
https://platform.appgyver.com で、フリーアカウントとして登録した EmailとPasswordでログインします。
開発（※全てのステップではなく、一部のポイントのみ記載しています）
ログオン後の画面 https://platform.appgyver.com/apps の CREATE NEW ボタンをクリックし、Project を作成します。今回のプロジェクト名は otukai としています。
画面の定義
初期画面の UI CANVAS（画面上部に青色でハイライト）で、画面左側のパネルから Container、Text、Input field、Button などの画面要素をドラッグ&ドロップで配置していきます。Text、Button に関しては、右側の PROPERTIES タブの Content と Label で、文字列を割り当てていきます。
Input field とその Text を水平方向に並べたいので、まず Container を配置して、その中に、Text、Input field を配置していくことがひとつのコツです。画面右下の TREE 領域を使って、Container を選択し、LAYOUT タブの LAYOUT を Horizontal にし、Align components を左から2番目のアイコンを選択することで垂直方向で中央に整列できます。
また、縦方向で Text と Input field の幅を一致させるために、Text の幅をピクセル数で指定しています。
また、Input Field の高さを調整するためには、やや分かりづらいですが、画面右下の TREE パネルで、斜めのペンアイコンをクリックします。
遷移先の画面右上の STYLE タブの PADDING で上下のパディングをピクセル単位で調整しています。元に戻るには、画面右上の EXIT アイコンをクリックします。
変数の定義と割当
Input filed に入力した値や、計算結果を保持するための変数を定義していきます。
UI CANVAS の右上のスライダーを VIEW から VARIABLES へ移動し、画面左側のパネルの中の PAGE VARIABLES を選択し、ADD PAGE VARIABLES ボタンをクリックすることで、Page Variable を定義していきます。下図では、定義した expense1 という数値型の変数を参照しています。
スライダーを VIEW に戻し、Input field を選択し、PROPERTIES タブの Value ボタンで、直前で定義した Page Variable を割り当てていきます。
ロジックの定義
Label を「計算」としたボタンを選択し、画面右下の Add logic to ... をクリックすることで、LOGIC ウィンドウがオープンし、ボタンクリック時の動作を定義できます。
ここでは、画面左側のパネルから Set page variable アイコンを2回ドラッグ&ドロップで配置し、最初のボックスの EVENT から順に線でつないでいます。
最初の Set page variable で、使った金額の合計を算出し、その結果を合計を表す変数に割当てし、次の Set page variable で、もらった金額から使った金額の合計を引き算し、結果を残った金額の変数に割り当てます。そのためには、配置した Set page variable ボックスを選択し、PROPERTIES タブで Variable name ボタンで、宛先の変数を指定し、Assigned value ボタンで、計算式を割り当てます。
なお、変数の足し算においては NUMBER ファンクションでテキストを数値に変換する必要があります。これは、前述の「類似アプリの検索」で見つけたビデオの中で学習しました。
また、「計算」ボタンをクリックした際、すぐに iPhone のキーボードが消えるようにするために、Dismiss keyboard ロジックも使っています。Dismiss keyboard ロジックは、LOGIC ウィンドウの INSTALLED タブ、MARKETPLACE から検索し INSTALL することで利用可能になります。
プレビュー
画面上部の LAUNCH をクリックし、画面左側のパネルの PREVIEW を選択、左側の Web Apps エリアの OPEN APP PREVIEW PORTAL ボタンをクリックすると、ブラウザに新しいタブが追加され、プロジェクト一覧が表示されます。
BUILDと配信
画面上部の LAUNCH をクリックし、画面左側のパネルの DISTRIBUTE を選択、OPEN BUILD SERVICE ボタンをクリックします。
ブラウザに新しいタブが追加され、BUID ページ（下図）がオープンします。ここでは、Apple App Store および Google Play ストアに配布するためのアプリケーションのスタンドアロンビルドを作成できるほか、appgyverapp.com ドメインでホストされる Web アプリケーションを構築することができます。または、Web ビルドを zip ファイルとしてダウンロードし、独自にホストすることもできます。
私は、iOS アプリのビルド、そして、Apple App Store に配布の選択肢を最初に考えたのですが、ドキュメンテーション IOS builds 、およびその中のビデオを見て、有料の Apple Developer Program へのエンロール、Mac PC が必要であることを知り、今回のブログのためだけにこれを選択するまでの理由はないと考え、無償で可能な Web ビルドを選択しました。
そのために、まず、Web App の CONFIGURATION ボタンをクリックし、Domain タブで独自のホスト名を指定しました。ここでは、ホスト名は otukai としました。既に存在する名前と被らなければ自由に設定できます。他のタブでの設定についてはデフォルトのままです。
次に BUILD ボタンをクリックし、下図のように、Client runtime version では最新のバージョンを、Should the resulting app be deployed to: では YES を、Version に適当な値を入力し、BUILD ボタンをクリックします。これにより、otukai.appgyverapp.com でホストされる Web アプリケーションを構築が開始されます。
下図のように、History が追加され、最初は Status は created と表示され、次に queued、最後に delivered になります。これには、数分以上かかります。また、完了は、フリーアカウントで登録したメールアドレスにも通知されます。これで、ブログ冒頭にURLで示した通り、アプリにアクセスできるようになります。
有益な情報サイト
SAP AppGyver のドキュメンテーション https://docs.appgyver.com/docs/home
SAP AppGyver のヘルプ https://help.sap.com/docs/APPGYVER
SAP AppGyver のコミュニティ（全般） https://community.sap.com/topics/appgyver
SAP AppGyver のコミュニティ（技術的な話題） https://forums.appgyver.com/
SAP Discovery Center での SAP AppGyver サービス（価格情報や関連ミッションを含む） https://discovery-center.cloud.sap/serviceCatalog/sap-appgyver
SAP Developer Tutorial でのチュートリアル（バーコード読み取りアプリ） https://developers.sap.com/mission.appgyver-low-code.html
SAP Learning での SAP AppGyver を含むローコード/ノーコード開発（市民開発者としてのひとつの視座を得ることができます） https://learning.sap.com/learning-journey/utilize-low-code-no-code-applications-and-automations-for-...
YouTube - Appgyver Absolute Beginner Tutorial（12回のシリーズで完結、Meetingの作成と評価アプリ） https://www.youtube.com/playlist?list=PLYWBKxY2jpP-UNGBpbwyocG-nlNt8NpIZ
YouTube - Appgyver Tutorials（現時点で40のビデオがあり、様々なトピックに渡る How To Guide、今回のブログ作成でも活用） https://www.youtube.com/playlist?list=PLd-L5s0e6eif0cu7kMuX2-mGeH7uB3QuV
YouTube - AppGyver YouTube Channel https://www.youtube.com/user/appgyverinc
さいごに
今回のチャレンジでは、個人的に身近な課題に起因し、かつ、シンプルに実装できるアプリ、できれば、他にはないくらい簡単なものを、アプリ公開まで含めて、通しでやってみることを目的としていました。
皆さんも、日々の業務や生活における課題で、かつ、簡単に解決できそうな課題、から、SAP AppGyver を始めてみては如何でしょうか？
最後までお読みいただき、ありがとうございます。
- SAP Managed Tags:
