NRIネットコム Blog

NRIネットコム社員が様々な視点で、日々の気づきやナレッジを発信するメディアです

ローコード開発ツールのZohoCreatorをつかってみた。

本記事は NRIネットコム Advent Calendar 2022 22日目の記事です。
🎁 21日目 ▶▶本記事 ▶▶ 23日目 🎄

はじめに

はじめまして。こんにちは。こんばんは。お疲れ様です。
業務で一番触れる言語はCOBOL。システムエンジニアの若林です。

普段COBOLを眺めている私が、社内R&D活動の一環で「ローコード開発ツールとはどんなものか?」とZohoCreatorというツールを使って簡単なアプリを作ってみたので、その中で私が理解したZohoCreatorの仕組みと使ってみた感想を書いてみました。

※2022年11月末時点のZohoCreatorを使用しての記事になりますので、
 それ以降のアップデートで内容が変更されている可能性もあります。

1.ローコード(ノーコード)開発ツールとは

そもそもローコード(ノーコード)開発ってなんぞや?と思われる方もいらっしゃるかと思います。
Googleで検索していただければ、答えは見つかります。
「ローコード ノーコード」で検索していただいてどうぞ。

2.なぜZohoCreatorなのか

Googleで「ローコード ノーコード」について検索いただいた方は、ローコード開発ツールがこの世にたくさんある事をご存じかと思います(kintone , Claris FileMaker , Salesforce , intra-mart , Power Apps etc....)。
数ある中から、なぜ私がZohoCreatorを選んだのか?


見た目が気に入ったからです。使用者の気分って大事。


一応、他のローコード開発ツールと比較(体験版を使ったり営業の方に説明を聞いたり)して以下3点も選出の際のポイントにしました。

  • Android/iPhoneアプリの両方を作成可能である
  • 無償版をインストールしてから使い始めるまでの時間が短い
  • 公式ドキュメント数や開発者サイトでのQA数、YouTubeでの解説動画などが多そう

3.ローコード開発ツールで作ってみる

大学生向け時間割登録アプリを作る

ローコード開発ツールで今回作っていくアプリはこんな感じです。細かい仕様は割愛。

  • アプリの概要図
    • 利用イメージ:学期はじめに大学生が今期取る講義を選択し時間割を作成する
    • 作成するアプリ:教授用講義情報登録アプリ、学生用時間割作成アプリ
      図1:時間割アプリ概要

教授用講義情報登録アプリ

まずは教授による講義情報の登録画面を作成します。
教授用は講義の登録とその参照、編集、削除ができる画面を用意します。

3.1.教授用講義情報登録アプリ~登録画面を作る~

ZohoCreatorの操作画面はこのような感じです(図2)。
ZohoCreatorの世界では、入力画面の事を「フォーム」と呼びます。

図2:講義登録画面の作成

画面を作成したい場合は、左端の項目グループから必要なパーツを選択して、真ん中の余白部分にドラッグ&ドロップするだけ。右端の項目のプロパティグループから、各項目のプロパティ(入力の必須、初期値、プルダウンのリスト内容など)を設定可能です。
必要なものを設定出来たら右上の「完了」を押せば画面が完成(図3)。

図3:作成した講義登録画面

3.2.教授用講義情報登録アプリ~登録したデータについて~

画面で入力した内容をどこに保持するのかについてです。通常のアプリ開発であれば、DBを用意してテーブルを作成し、その中に格納するのが分かりやすいかと思います。
一方ZohoCreatorでは開発者がテーブル作成に関してすることは特にありません。
ZohoCreatorでは「フォーム」を作成したと同時に「レポート」なるものが作成されます(図4)。
このレポートが、テーブルに相当します。レポートの列(カラム)は、フォームで作成時に配置したパーツで決定します。
また、このレポートはアプリのユーザに見せることができる画面でもあり、一覧として参照するだけでなく、フィルタリングやレコードの追加、編集、削除もこのレポート画面から操作可能です。

図4:講義登録画面に対応したレポート画面

これにて教授側のアプリ作成は完了となります。

学生用時間割登録アプリ

続いては学生用アプリを作成していきます。学生用アプリは、講義を選択する「講義選択」画面と、選択した講義を時間割形式に見る「時間割」画面の2つを作成していきます。

3.3.学生用時間割登録アプリ~他アプリのレポートを参照する~

画面の基本的な作成方法については前述の教授アプリと同じなので割愛しますが
学生用アプリの講義選択画面では、「教授用アプリで登録された講義」を選択する必要があります。
フォーム」から「レポート」を参照するには、「ルックアップ」パーツを使います(図5-①)。

ルックアップはどこのレポートを参照するのかを指定します。今回は「教授アプリ(シラバス_教授)」の「講義マスタ登録画面(フォーム)」に対応するレポートから「講義名」を取得します(図5-②)。

さらに、今の状態のままだと登録された講義が全て表示されるので、講義マスタに登録された「講義曜日(class_weekday)」と「講義時間(class_time)」が、この画面で入力した「講義曜日(input.class_weekday)」と「講義時間(input.class_time)」と一致する講義名のみ表示するようにフィルタ条件を追加します(図5-③)。

図5:教授用アプリで登録した講義を参照する方法

3.4.学生用時間割登録アプリ~選択した講義を時間割で表示するための準備~

次に、前述の画面で選択した講義を時間割形式に表示していきます。
講義選択画面で登録した内容は、「講義選択レポート」に保存されています。そして、ZohoCreatorの「レポート」は前述の一覧表示だけでなくカレンダー形式で表示する事も出来ます。
しかしカレンダーで表示するには、その講義が何日から何日までという情報が必要なので「講義選択画面」で教授アプリで登録した「講義開始日付」「講義終了日付を取得」します。

3.4.1学生用時間割登録アプリ~日付形式の取得~

先ほど、「フォーム」から「レポート」を参照するには、「ルックアップ」パーツを使うと言いましたが、ルックアップで取得できるのはプルダウン形式のみのようでした。今回は日付形式(プルダウン以外)での取得がしたいです。その時に使うのが「ワークフロー」と「関数」です。
これらは、DelugeというZohoCreatorの独自スクリプト言語で記載します。

  • ワークフロー:フォームに紐づくスクリプト。
           フォームの読み込み時、送信時、ユーザ入力時のどれかのタイミングで実行可能
  • 関数:引数を渡すとスクリプトに記載した処理を実施し戻り値を返す。
       ワークフローと違い、フォーム以外(ワークフローなど)に紐づけ可能。

今回作成するワークフローと関数は下記の2つ。
 1)教授用アプリから講義の開始日付/終了日付を取得する関数
 2)学生用アプリの講義選択画面で講義名を選択したときに1)の関数を実行するワークフロー

  • 教授用アプリから講義の開始日付/終了日付を取得する関数
    これは、教授用アプリ側に作成します(図6)。
    関数の内容は、引数の講義名(arg_class_name)を使って、講義登録画面のレポート(register_class_master)から引数と一致する講義名(class_name)の講義終了日付(class_end_date)を戻り値(res_class_end_date)に格納しています。
    関数を全て自分で書くこともできますし、下図左端にある処理(if、add recordとか)をドラッグ&ドロップする事でスクラッチ的に作成する事も出来ます。
    講義開始日付取得の関数も同様に作成できます。

    図6:講義開始/終了日付取得関数

  • 関数を呼び出すワークフローの作成
    続いては、学生用アプリ側に作った講義選択画面を「講義名のユーザ入力がされた」タイミングで実行されるワークフローの作成です。
    入力の講義名項目(input.class_name)の講義名(class_name)がnullじゃなければ、前述の関数を呼び出して、 講義の開始/終了日付を取得して講義選択画面の講義開始日付(input.class_start_date)と終了日付(input.class_end_date)に値をセットします。

    図7:学生用アプリのワークフロー



長くなりましたが、これでやっと、選択した講義をスケジュールで表示できます・・・。長かった。

3.5.学生用時間割登録アプリ~選択した講義を時間割で表示する~

やっとここまで来ました。
さて、登録した講義をスケジュールで見てみましょう(図8)。

図8:登録した講義をカレンダー形式で表示

なんか、アドベントカレンダーみたいなの出てきた。
ここまで頑張ったのに、、、、しかも出てきたカレンダーは土日も講義がある鬼スケジュール。
月曜2限目だけだったのになぜ…。

理由は簡単で、スケジュールの開始/終了日付を講義の開始/終了日付としたためです。
そして、悲しい話ですが、ZohoCreatorには毎週●曜日など定期的なスケジュールを表示する機能はありません(今のところはです。いつか実装されるかも)。

ないものは実装するしかないです。ここまで来たら力技です。
という事で、これまでお話した関数、ワークフロー、フォームを駆使して下記を追加作成しました(ついでにデザインもちょっとだけいじりました)(図9)。

  • 講義明細レポート:選択した講義の開催期間の中で講義が開催される日付を持つレポートを新規に作成
  • 講義明細作成  :講義名を選択した際に、講義開始~終了日付と講義曜日から講義開催日付を算出して
             講義開催日付を講義明細レポートに登録するワークフローを新規作成

この2つを追加する事で、例えば講義の開始日付~終了日付が12/1~12/31で、月曜日開催の授業なら、
12/5、12/12、12/19、12/26の6レコードを講義明細レポートに登録することができます。
そして、講義明細レポートをスケジュール形式で表示すれば、各週の月曜日に予定があるように見せられます。

図9:力技の結果

よし、これでOKです。

最終的な完成形

今まで画面単位で照会をしてきたので最終的にどういったアプリになったのか少しお見せします。

まずは教授側アプリです。アプリを起動したら、アイコンをタップして、入力画面に遷移します。
(説明では登録画面とレポート画面を別々にしていましたが、下図では2つ合わせたページにしています)

図10:教授アプリ

続いては学生用アプリです。アプリを起動したら、講義選択か時間割のアイコンをタップして、画面遷移します(時間割画面は図9で記載しているため割愛)。

図11:学生アプリ

4.まとめ

最後にZohoCreatorでアプリを作る上で私が理解した概要図です。
内容的には前述の話をまとめて図解したものになります。
ZohoCreatorをこれから使う!という方がこれを見て理解が進むと幸いです(図12)。

図12:ZohoCreatorの概念図

5.アプリケーション作成にあたって参考にしたサイト

私がこのアプリケーションを作成するために参考/閲覧したサイトは下記になります。

  • Zoho公式のチュートリアル(全部英語ですが、わかります。2時間くらいで視聴可能。) www.zoho.com

  • ZohoCreatorのクリエイターコミュニティー(全部英語です。Google翻訳と共にどうぞ。) help.zoho.com

6.おわりに

今回作成した時間割アプリは触り始めてから大体8時間程度(学習2時間、その他は実装)で作成できました。開発も環境を整える必要はなくブラウザで全て行えます。その点からも学習/導入コストは結構低い方じゃないかと思います。
一方で、ZohoCreatorではまだできないという部分もありました。
例えば前述のカレンダーの隔週表示もそうですし、他にもDeluge言語のループ文がJavaやCOBOLと違い、ループに癖があり、ループの条件に使えるのが配列の要素数になるので、10回ループさせたければ要素数10の配列を作る必要がありした。そのため、自前で任意の要素を持つ配列を作る関数を組んでやったりました。

公式ドキュメントは日本語対応していますが、クリエイターコミュニティーなどは英語のものが圧倒的に多いので、ある程度の英語力を要求されます(私はTOEIC450点程度…)。

今回触れることはありませんでしたが、アプリケーションデプロイ関連の機能や、zmlというZoho独自言語でデザインの修正や独自コンポーネント作成ができたりもするようですし、ZohoCreator自体もアップデートを続けていますので今後のアップデートにも期待です!

ということで、お疲れ様でした。次回作にご期待下さい。