Amazon Honeycode のチュートリアルを kintone でやってみた

Amazon Honeycode をご存じでしょうか。
AWSが今年突然出してきた(ただし、まだベータ版)ノーコードの Web/モバイルアプリ開発ツールです。

Amazon Honeycode を使えば、ソフトウェア技術者でなくとも誰でも簡単に、スプレッドシート感覚で(コーディング不要で)Webアプリを作れることを目指しているようです。
AWSJ の builders.flash✨ というウェブマガジンに入門記事が掲載されたのですが、この記事は非常に分かりやすく Amazon Honeycode の基本的な使い方や Honeycode を用いてどのようにアプリを作っていけば良いかを順序立てて丁寧に解説されているのでおススメです。

一方、弊社は サイボウズの kintone を活用したビジネスを展開しています。
近頃は 元祖ノーコード開発ツール? と言われることも増えてきた kintone を使って Amazon Honeycode と同様のアプリを作ろうとするとどうなるか、同じ題材をそれぞれで試してみれば各々の違いや特徴が浮き彫りになるのでないかと考え試してみることにしました。

この記事では 従業員が出社や社外訪問をする際に上司へ申請を行うアプリを作っています。
あれ? そういう話、このブログで見た ような・・

弊社内で実際に使用している出社申請アプリで どんなことをしているかは そちら で見ていただくとして、今回は Amazon Honeycode でアプリを作る流れに準じて進めていきます。

  1. サンプルデータ(CSV ファイル)を準備する
  2. CSVファイルから kintoneアプリを作成する
  3. 作成されたアプリの中身を見ていき、設定変更する
  4. プロセス管理(承認フロー)を設定する

では早速アプリケーションの作成を始めましょう !
あ、kintone環境を持っていない場合は 無料お試し することができます。

1. サンプルデータ (CSV ファイル) を準備する

まずはサンプルデータを CSV 形式のファイルとして準備します。

kintone は日本語に対応しているので CSVファイル内の項目名も日本語にしてみました。

「CSVを読み込んで作成」機能 を使用してアプリを作成していきます。

「CSVを読み込んで作成」機能を使用する

2. CSVファイルからkintoneアプリを作成する

「CSVファイルからkintoneアプリを作成する(1/3)」画面が出てきます。「作成を開始する」を押します。

確認項目が出てきます。

 ・1行目に項目名を入力します(1文字以上128文字以下)
 ・列数(項目数)は500列以内にします
 ・読み込むデータは10万件以内にします
 ・ファイルサイズは100MB以内です

慣れてくると少し煩わしいのですが、すべてにチェックを入れて「アップロードへ進む」を押します。

[参照]をクリックし、用意しておいた CSVファイルを選択します。

「フィールドタイプ」で日付を自動認識してくれるのは賢いのですが、ラジオボタンばっかりww
用意したデータ(レコード)件数が少なすぎましたかね。

フィールドタイプを以下のように変更します。

フィールドタイプの変更

「作成」を押すと CSVファイルの中身が実際に読み込まれ、kintoneアプリが作成されます。

良い感じにアプリを作成できました。簡単ですね!

3. 作成されたアプリの中身を見ていき、設定変更する

作成された kintone アプリの中身を見ていこうと思います。 歯車アイコンをクリックして設定画面へ行きます。

アプリの設定画面へ遷移するための歯車アイコン

まずは「申請日」フィールドの内容を確認します。
フィールドの右肩にカーソルを持っていくと歯車アイコンとメニューが現れるので「設定」をクリックします。

フィールドの設定を表示

「レコード登録時の日付を初期値にする」が設定されているのは良いのですが、Amazon Honeycode のように編集不可にするってのは kintone の標準機能だけではできないんだよなぁ・・

Javascript を書いてカスタマイズするか、コードを書きたくない(ノーコード)人は 弊社の gusuku Customine を使用してください。無料お試しはこちら から

次に「申請者」フィールドには 入力している人(ログインユーザー)が自動的に入るようにします。

こんな感じですかね。変更不可にするってのは標準機能ではできないので以下略

そもそも申請日や申請者をフィールドとして設置する必要はあるの? については後ほどやります。今回は Amazon Honeycode でアプリを作る場合の流れに沿って進めていきますので

「出社日」は「必須項目にする」にチェックを付け「レコード登録時の日付を初期値にする」のチェックを外します。

「行き先」は そうだなあ・・ 「必須項目にする」にチェックを付けて「本社」を初期値にしますか

Amazon Honeycode では 別テーブル(マスターテーブル)に切り出して Picklist(ROWLINK) という形式にする ということがカンタンに出来るのですが、kintone ではそうはいかないようです。

自分で別アプリに切り出して 「ルックアップ」フィールド にするか、選択肢の数が数個と限られているなら ドロップダウンフィールドの選択肢として埋め込んで済ませることも多いです。 この辺りは用途を踏まえて使い分けます。

「理由」欄は「必須項目にする」にチェックを付けて、最小文字数を設定して、初期値に「オフィスが好き過ぎて」でも入れておきますか。あと、入力欄の長さ(幅)を広げておきます。

「承認者」はカスタマイズを組めば自分の上司を取得して自動でセットするといったこともできるんですが、ここでは選択肢を「マネージャー」グループに所属する人に限定することだけにとどめましょう。
グループ(ロール)は事前に cybozu.com共通管理 画面で作っておく 必要があります。

最後に「承認結果」欄ですが、「CSVを読み込んで作成」 する際に正直ミスりました。
ラジオボタンとして作成してしまったので、マネージャーが決済する前の状態を示す値がありません。
ラジオボタンの選択肢に「未承認」を追加して初期値にするか、フィールドの種類をラジオボタンからドロップダウンに変えます。

が、kintone ってフィールドの種類を変更って、できないんですよね・・
新しいフィールドを追加して元のフィールドは削除します。元のフィールドに入っていたデータは失われてしまうため、データ移行が必要であれば新しいフィールドに入れ直してから元のフィールドを削除する必要があります。(入れ直しはデータのファイル書き出し読み込み機能を使うことが多いです。)この辺ちょっと面倒ですね。

そして、「承認結果」は マネージャーしか入力できないようにしないといけません。
「フィールドのアクセス権」で「マネージャー」グループに所属する人のみが編集できるようにします。

フィールドのアクセス権

「アプリを更新」ボタンをクリックして設定内容を反映します。
新しい設定のアプリがすぐに使えるようになるので、新規レコード追加画面を開きます。

新規レコードの追加と既存レコードの編集

また、既存レコードも編集できます。CSVで入れたレコードの「ユーザー選択」フィールドにちゃんとユーザーがセットされているのは kintoneの偉いところですね。

4. プロセス管理(ワークフロー)を設定する

本アプリケーションの利用者は出社申請を行う方と承認を行うマネージャーです。その間をつなぐフローに必要な以下の機能を作っていきます。

 ・申請者が出社申請を登録した際、マネージャーへ承認依頼メールを送信する
 ・マネージャーが承認を行った際、申請者へ結果通知メールを送信する

まずは不要なフィールドを削除します。
私が思うに「申請日」と「承認結果」は不要なので削除します。

削除する前に gusuku Deploit に アプリの設定情報を取り込んでおくと、以前の状態に戻したくなった時に戻すことができます。(アプリのデータについては別途バックアップしておく必要があります。)

gusuku Deploit は kintone における バージョン管理ツール(git)のようなものですね。ノーコードと言えど、バージョン管理の仕組みがないと色々試してみるのは怖くて困る気がします。

不要なフィールドを削除して、代わりにプロセス管理の設定を行います。こんな感じかな

プロセス管理の設定

申請内容を入力して保存した後「申請する」をクリックします。承認者には以下の通知メールが送られます。

承認者は通知メール内の「レコードを表示」をクリックして申請を開き、承認または却下します。
「申請日」と「承認結果」のフィールドを不要としたのは「ステータスの履歴」で確認できるからです。

ステータスの履歴
ステータス

結果を申請者に通知する設定を忘れてました。
これにはいくつかのやり方があると思いますが、今回は 「レコードの条件通知」機能 を使ってみました。

レコードの条件通知

Amazon Honeycode のように通知の文面を柔軟にカスタマイズできないのが残念です。 また、承認・却下のアクションをする際に理由を入力することができないんですよね。

kintone には別途、レコードにコメントを書き込み、通知する機能 があるので、これらの機能を用いて代替します。
kintone は単なるノーコード・アプリ開発ツールではなく、社内の情報共有を円滑にするコミュニケーション・ツール なのです。

コメントとメンションを送る機能

まとめ

いかがだったでしょうか。

Amazon Honeycode と kintone のそれぞれに できること・できないことの違いがあり、それぞれの特徴や得手・不得手を理解して、それぞれに合ったアプリを設計するのが良いのかなと思います。
kintone には既に長い歴史とエコシステムがあるので、標準機能ではできない・難しいことを解決するソリューションがきっとあります。

Amazon Honeycode を使われる方、kintone を試してみようと思われる方のいずれにも お役に立てると幸いです。

投稿者プロフィール

アバター画像
うっちー
kintone認定カイゼンマネジメントエキスパート(KME), アプリデザイン/カスタマイズ スペシャリスト