ノーコード開発ツールでテレワーク中の週報アプリを作ってみた！
ノーコード開発ツールUnifinity（ユニフィニティー）を使ってテレワーク中の週報アプリを作ってみました。
内容は簡単、毎日今日やったこと、特記事項を書く、一週間溜まったら送信。
今回の送信先はオンラインツールのBOXを利用してみます。
1週間分のやったことがBOXに溜まるわけです。
テレワークしている皆さん、使ってみてください。もちろんこれをベースにカスタマイズを加えていってより使いやすくしてください。アプリや開発ソース（プロジェクト）は記事の最後にZIPファイルとして添付しています。
システム構成図
Unifinityで作る内容は以下
・画面１（入力画面）・・・日々の内容を登録します。
・テーブル１・・・画面１で記入した内容を1登録1レコードで保存していきます。
・処理１－１・・・画面１で登録をタップした際にテーブル１に書き込む処理
・処理１－２・・・日付を自動取得し表示させる処理
・処理１－３・・・アプリを終了させる処理（画面２でも利用）
・画面２（一覧画面）・・・入力した内容を一覧表示します。ここで送信ボタンを用意し、送信ボタンをタップすることで以下の処理を走らせます。
・処理２－１・・・テーブルに格納されている内容からCSVファイルを生成
・処理２－２・・・BOXへファイルを送信し、テーブルを削除
その他、細々とした処理（BOXとのセッション情報、ファイル名の生成など）は必要と考えられます。
また、BOXのアプリを事前に作成する必要もあります。
なんとなくですが、作成時間は2時間ってところでしょうか。ただし、バリデーションなどの細かい制御は抜きとします。実際には運用するにあたってもう少し練る必要もあるかと思います。
BOXのアプリ作成
まずはAPIを利用したBOXのアプリを作成する必要があります。
詳しくは以下にリファレンスがあります。
https://ja.developer.box.com/guides/
アカウントを作ってください。無料でいけます。
ログイン後、マイアプリから「アプリの新規作成」を選択
カスタムアプリ＞標準OAuth2.0を選び、アプリ名を任意で設定して完了です。
画面の作成
画面はふたつなのでさくっと作ってしまいます。
プロジェクトや画面の作り方については以下の記事を見てもらえるといいかと思います。
https://note.com/tokuyama/n/n965ea2007e2e
https://note.com/nif20/n/nf0a7a81558b9
https://note.com/nif20/n/n9736e1fd833b
作成した画面は以下のふたつ
左画面
設計の画面１に相当します。
「YYYY/MM/DD」と書いてあるラベルに「本日の作業内容」「特記事項」のテキストボックスを２つ、左上の「アプリ終了」右上の画面２への「遷移」画面下部の「登録」のボタンが３つです。
右画面
設計の画面2に相当します。
ヘッダー部分は画面1とほぼ同じ。表を置いて「送信」ボタンを配置しただけです。
両方合わせて5分以内といった感じです。
テーブルの作成
データベースにテーブルを作成します。
Unifintiyの特長はなんといってもSQLを知らなくてもDBを扱えてしまうこと。GUIから以下のようにテーブルを作成します。カラムは画面１で登録する内容です。
処理の作成
画面１に紐づく処理は全部で３つあります。だいたい10分もしないでこの３つは作成できます。そのうち１つの処理について記載します。
処理１－１・・・内容をテーブルに書き込む処理
＃1~＃3までが画面の情報を取得してくる処理です。
＃4でデータベースに書き込みます。（なんとも簡単＠画面右側）
＃5は「登録しました」というメッセージを表示させています。
処理の紐づけ
上記で作成した処理はボタンタップ時に起動したいので、「登録」ボタンを選択し、オブジェクト＞動作設定＞実行処理から対象の処理名を選択します。
また、「YYYY/MM/DD」のラベルには日付を表示したいので画面のオープン処理時に処理１－２を紐づけます。（処理１－２の作成については端折ってます。サンプルから確認ください。）
以上で、Unifinityアプリ単独の動作は終了です。
BOXに関連する処理
ここからはBOXにデータ送信をする処理を作っていきます。
BOXのマイアプリから「クライアントID」「クライアント機密コード」「リダイレクトURI」を取得します。※リダイレクトURIは任意のものを設定してください。
これら値をUnifinityのグローバル変数として登録します。画面上部のメニューから「プロパティー」＞「グローバル変数」を選び、任意の変数名を作成し、それぞれBOXから取得した値を入力し「OK」をクリックします。
BOXは認証が通ると、access_tokenとrefresh_tokenというのが発行されます。これを保持しておくと、都度認証をかける必要がありません。BOXに対してなんらかのリクエストを送るたびにこれらの情報が送られてくるので都度更新するのがおすすめです。
処理のBOX初回認証により環境変数refresh_tokenに値が入力されます。その後は環境変数refresh_tokenの文字数をカウントし（処理「BOXのrefreshトークンチェック」）、値が入っていれば処理の「BOXrefreshトークン更新」を走らせています。
また、BOXへのファイル送信は処理「BOXへのファイルアップロード」となります。ここではテーブルの内容を取得し、日付からファイル名を生成、そしてCSVのファイルを書き出しています。このファイルをBOXへアップロードし、テーブルの初期化を最後に行っています。
おまけの処理
refresh_tokenは環境変数に格納されており、これを削除するために「BOX認証用refreshトークン削除」を作っています。
その他
BOXの送信先はルートフォルダとなっています。フォルダの指定先を「0」としています。こちらをフォルダIDに変更し、フォルダのアクセス権を変更すれば別のフォルダにアップロードされます。
プロジェクトファイル
アプリのファイルは以下にZIPとして置いておきます。なお、本プロジェクトを開くにはUnifintiyStudioが必要です。また、スマートフォンでアプリを実行するにはUnifinityApplicationPlayerが必要です。
現在、期間限定で無料提供しています。（2020年5月末まで）また、トライアルもあります。
ユニフィニティーのHPはこちら
また、以下のアプリを利用する際には必ずBOXのアプリを作成し、プロパティ＞グローバル変数の3項目に値をいれてください。
ご不明点があればお気軽に。
この記事が気に入ったらサポートをしてみませんか？