検索
連載

ローコードの醍醐味、カスタマイズ開発のメリットとリスクを考える――kintone API、スペースの基本kintoneで始めるローコード開発入門(5)

ローコード開発とはどのようなものか、kintoneを題材に具体的な開発手順を解説する連載。前回まででアプリを開発するために必要な機能は大方網羅できました。今回はそれらの個々のアプリを部署やチームに向けてまとめる「スペース」を紹介するとともに、kintone APIを活用したカスタマイズ開発についても解説していきます。

Share
Tweet
LINE
Hatena
「kintoneで始めるローコード開発入門」のインデックス

連載:kintoneで始めるローコード開発入門

スペース(ポータル機能)の設定

 ローコード開発とはどのようなものか、kintoneを題材に具体的な開発手順を解説する本連載「kintoneで始めるローコード開発入門」。これまでの回は、特定の業務に向けたアプリ単体の開発にフォーカスした内容でした。とはいえ、部署やプロジェクト全体を見渡すと、複数種類のデータ管理やさまざまな業務が含まれることが多いでしょう。そのような場合に、作成した各種アプリを部署やプロジェクトチームが利用しやすいようにまとめる場所が「スペース」です。前回までで作成したタスク管理や問い合わせ管理アプリをスペースにまとめて、システム部としてより業務が進めやすいように整備してみましょう。

スペースを新規作成する

 それでは、スペースを作成していきましょう。

1. 新規のスペースを作成する

 スペースを作成するには、kintoneのトップ画面右側のスペースの欄から[+]ボタンをクリックして、[スペースを作成]を選択します(図1)。

図1 kintoneトップ画面からスペースを新規作成
図1 kintoneトップ画面からスペースを新規作成

 [スぺースの作成]ダイアログが表示されるので、図2の要領で基本的な情報を入力していきます。

図2 スペース名や参加メンバーなどを設定
図2 スペース名や参加メンバーなどを設定

 ここでは、これまでの回で作成してきた情報システム部向けのアプリをまとめる場所にしたいので、名前は「情報システム部スペース」とし、また、情報システム部員のみがアクセスできるように「参加メンバーだけにこのスペースを公開する」にチェックを入れています。

 カバー画像はどのようなものでも構いませんが、ユーザーが情報システム部スペースにアクセスしていることが明確に区別できる(=他の場所とは違う領域にいることが認識しやすい)画像を選んでおくと、スペースが増えてきた際に役立ちます。

2. 参加メンバーを登録する

 [参加メンバー]のタブをクリックして、ユーザー検索ボタンから情報システム部に所属するメンバーを追加します(図3)。

図3 参加メンバー、管理者をユーザーや組織から指定
図3 参加メンバー、管理者をユーザーや組織から指定

 [保存]ボタンをクリックして設定を完了すると、まずスペースの箱が新規作成されます。ちなみに、スペースへの参加者は、図4のように組織、グループで指定することも可能です。

図4 スペース参加者は組織やグループで指定も可能
図4 スペース参加者は組織やグループで指定も可能

3. スペースにアクセスする

 kintoneトップ画面右側から、作成した情報システム部スペースをクリックすると、図5のように作成したスペースにアクセスできます。

図5 スペーストップ画面
図5 スペーストップ画面

 画面左側が[お知らせ]欄となっており、部門へのお知らせや「進捗グラフ」、各アプリへのリンクやアイコンなどを配置できます。ポータルとして使いやすいように工夫できる領域です。右側の[スレッド]はさまざまなトピックについてスレッドを切ってやりとりできる場所と、その下には、このスペースに設定されているスペース参加者が権限を持つアプリが表示されます。

4. アプリの所属スペースを変更する

 ちなみに、図5の画面からアプリの新規作成ボタンをクリックしてアプリを作成すると、自動的に現在のスペースに所属した形でアプリを作成できます。

 これまでの回で作成したアプリのように、スペースに所属していないアプリを特定のスペースに移動する場合には、アプリの管理画面から[アプリの所属するスペースを変更]を選択して、任意のスペースを選択してください。本連載では「チームのタスク管理」アプリと「問い合わせ管理]アプリも、作成した情報システム部スペースに所属先を変更したものとして話を進めます。

図6 アプリの所属するスペースを変更/指定
図6 アプリの所属するスペースを変更/指定

分かりやすいポータルとする

 次に[お知らせ]欄の機能を活用して、ポータルとしてより分かりやすく、使いやすくなるように整備していきましょう。

1. お知らせの本文を設定する

 今回は図7のような形で、アプリのアイコンを配置したり、グラフで進捗(しんちょく)を見ることができるように設定してみます。

図7 スペーストップ画面を分かりやすいポータルに整備
図7 スペーストップ画面を分かりやすいポータルに整備

 [お知らせ]欄の編集アイコンから編集画面を開きます(図8)。なお、編集操作が可能なのは、スペースの管理者に指定されているユーザーのみです。

図8 アイコンや画像などを配置してアプリURLをリンク
図8 アイコンや画像などを配置してアプリURLをリンク

 編集ボタンをクリックすると、[本文を編集]ダイアログが表示されるので、お知らせ欄に表示するコンテンツを編集していきましょう。

 リンクなどは、ユーザーに分かりやすいような画像をボタンに使うと見やすいので、社内のデザイナーに作成してもらったり、Microsoft PowerPointの図形などを作成したりするのもよいでしょう。今回は、アプリの管理画面からアイコン画像を取得して、編集画面に貼り付けました。少し大きめに表示して、ノート型PCなどを利用している人でも見やすいようにします。

 アイコンだけではリンク先が分かりにくいので、具体的に「どのような機能やデータにアクセスできるのか」をテキストでも補っておきましょう。ボタンの画像とテキスト両方にハイパーリンクを足すことができるので、それぞれボタンとテキストを選択状態にしてリンクのボタンからURLを追加します。

2. 問い合わせ対応の進捗グラフを追加する

 続いて、[本文を編集]ダイアログ上部の[アプリ貼り付け]のボタンから、問い合わせ対応の進捗グラフを追加します。アプリを貼り付けボタンをクリックすると、図9のように貼り付けたいアプリを選択して、レコード一覧を表示するのか、グラフを表示するのかを選択できます。

図9 一覧画面やグラフも配置可能
図9 一覧画面やグラフも配置可能

 ここでは、問い合わせ管理アプリのグラフから種別ごとの問い合わせ数推移を選択して、画面右下のOKボタンをクリックします(図10)。

図10 お知らせ欄の設定変更を保存
図10 お知らせ欄の設定変更を保存

 グラフが足せたので、[保存]をクリックして編集をスペースに反映させましょう(図11)。

図11 スペーストップ画面
図11 スペーストップ画面

 これで完成です。利用するアプリや情報が増えてくると、部署のメンバーもそれぞれのアプリをスムーズに使いこなせないことも出てくるかもしれません。そのような場合にも、このようにスペースにアクセスすれば、必要な情報が分かりやすくまとまっているというわけです。動線が分かりやすく、業務を円滑化する環境を、スペースの[お知らせ]欄を利用して整備してみてください。

スレッドを利用する

 アプリのレコードにはコメント欄があり、タスクや案件など個別のレコードに関わるやりとりができました。それ以外のコミュニケーションを進めたり、広くオープンに情報共有したりする場合には、スペースの[スレッド]機能を利用できます。スレッドでは、部署やプロジェクトのトピックごとにテーマを分けて、情報を整理しながら意見を交換できます(図12)。

図12 スペース画面右側にはスレッド欄
図12 スペース画面右側にはスレッド欄

 スレッド機能にアクセスすると、画面左側には追加されたスレッドごとのやりとりが記録されていて、それぞれさかのぼることもできるので、これまでのいきさつも把握しやすくなっています。新たにスレッドを追加したい場合には、左上の[スレッドを追加]リンクをクリックしてください(図13)。

図13 スレッドごとに情報を整理
図13 スレッドごとに情報を整理

 なお、スレッドの先頭には参照したい情報やアプリのデータも常に表示できます。各スレッドのトピックに関連する情報を見せるために活用するとよいでしょう。この部分を編集するには、スレッド画面右上の編集ボタンをクリックしてください(図14)。編集方法は、先ほどのお知らせ欄の場合と同じです。

図14 データやコミュニケーションがテーマごとにまとめられるスレッド
図14 データやコミュニケーションがテーマごとにまとめられるスレッド

 なお、スレッドはスペース参加者にはオープンになっています。よって、途中から議論に参加してほしい人に対しては、@メンションで意見を聞くこともできますし、特定の人に通知を送るためにメンションするといった使い方もできます。

【補足】オープンな情報共有と心理的安全性

 スペースやスレッドを活用して、情報のやりとりをなるべくオープンにしておくと、組織内での情報格差が自然と小さくなっていきます。「誰がどんなことを話していたか」「今どのプロジェクトがどこまで進んでいるか」といったことが、通知が来ていなくても“見に行けば見える”状態になっていると、関係者の納得感や心理的安全性が高まりやすくなります。こうしたスペースの活用は、チーム運営において非常に有効なのではないでしょうか。

検索機能を利用する

 スペースにスレッドやアプリなどの情報が蓄積され増えてくると、情報を簡単に探せることも重要になります。そのようなときは、スペース画面の右上の検索窓からキーワードを入力して検索してみましょう(図15)。アプリのレコードやスレッドの書き込み、その他添付されているファイルなどを横断して検索できます。

図15 スペース内に蓄積したデータを検索
図15 スペース内に蓄積したデータを検索

kintone APIについて

 ここまでで、画面上の操作で開発できる内容のほとんどをカバーし終えました。ここで、より技術的な面についても少し触れておきたいので、kintoneに搭載されているAPIについて概要を把握しておきましょう。

 API(Application Programming Interface)とは、複数プログラム間の呼び出し規約を仕様としてまとめたものです。kintoneの場合、APIとはkintone上に格納されているデータをプログラムで出し入れするなど、処理を記述(コーディング)するために用意された窓口ということになります。これを活用することで、これまで紹介したプラグインがkintoneに格納されているデータを活用して、さまざまな処理を追加したり、外部システムとの連携処理をユーザー企業で個別に開発したりすることが可能になります。営業管理や会計、人事システムなど、多数のシステムが社内で利用されている現代では、システムの連動性はより重要度が上がっており、ぜひ活用してほしい機能です。

APIの種類や利用できるイベント

 それでは、どのようなAPIが用意されているのか、もう少し理解を深めていきましょう。APIの種類や細かな仕様については、図16の開発者サイトに詳細なドキュメントがあります。

図16 kintone APIの種類(https://cybozu.dev/ja/kintone/docs/)
図16 kintone APIの種類(https://cybozu.dev/ja/kintone/docs/

 ドキュメントにあるように、レコードやファイル、アプリの設定情報などに対する、取得、登録、更新、削除などのAPIが用意されています。これらを組み合わせることで、例えば「任意のフィールドの値を取得&加工し、別のフィールドにデータを登録する」といった作業を自動化できます。

 また、レコード一覧画面の表示や、レコードの新規登録、編集、削除、保存など、任意のイベントで開発した処理を駆動させることもできるように、APIが整備されています(図17)。

図17 各画面で利用できるイベント
図17 各画面で利用できるイベント

 これらのイベントを利用することで、任意のタイミングでデータを取得したり、フィールドの値を書き換えたり、エラーをチェックするなどの処理が開発できるというわけです。その他にも、考えられる活用例を、以下にまとめます。

  1. 売上金額のフィールドの値が変更されたら、別のフィールドにも反映する
  2. レコードが編集モードになったときに、特定のフィールドの編集ができないようにグレーアウト制御する
  3. レコードの保存時に、指定のフィールドの値をチェックして、条件に合致しなければエラー表示して保存できないようにする

 例えばリスト1は、(2)のフィールドの制御に関するコード例です。レコードの編集画面と新規作成画面が表示されたとき(=app.record.edit.show、app.record.create.showイベントのタイミング)に、「タスク名」という項目を無効化しています。

kintone.events.on(['app.record.edit.show', 'app.record.create.show'], function (event) {
  event.record['タスク名'].disabled = true;
  return event;
});
リスト1 フィールドを編集できないようにグレーアウトする処理(sample.js)

 このように準備したファイルを保存しておけば、あとからその機能を任意のアプリに追加できるようになります。ここでは「sample.js」というファイル名で保存しています。

カスタマイズファイルを組み込む

 作成したプログラム(カスタマイズファイル)をアプリに設置する手順を見てみましょう。図18のように、チームのタスク管理アプリの管理画面から[JavaScript/CSSでカスタマイズ]をクリックします。

図18 カスタマイズファイルを設置
図18 カスタマイズファイルを設置

 図19の画面で、先ほど作成したファイルをアップロードして追加します(URLで読み込むファイルを指定することも可能です)。これにより、設定したプログラムが指定のアプリで読み込まれ実行されるようになります。[保存]−[アプリを更新]と選択して、変更を反映します。

図19 ファイルをアップロード/URL指定
図19 ファイルをアップロード/URL指定

 レコード編集画面を見てみると、図20のようにタスク名のフィールドがグレーアウトされています。追加したカスタマイズファイルが正しく動作していることが確認できます。

図20 カスタマイズファイルによりフィールドの制御を追加
図20 カスタマイズファイルによりフィールドの制御を追加

ビューをカスタマイズする

 さらに独自の画面を開発することができる機構も各アプリに用意されています。[カスタマイズビュー]という機能です。各アプリの一覧設定から図21のように表示形式をカスタマイズビューに選択するとHTMLを記述できます。

図21 カスタマイズビューを設定
図21 カスタマイズビューを設定

 APIと組み合わせて活用することで、kintoneの標準機能では実装できない、自由な画面表現や独自の機能を追加することができます。

図22 カスタマイズビューで独自の画面を作成した例(cybozu developer networkカスタマイズ例より引用。出典:cybozu developer network)
図22 カスタマイズビューで独自の画面を作成した例(cybozu developer networkカスタマイズ例より引用。出典:cybozu developer network

標準機能の利用とカスタマイズ開発のトレードオフについて

 このように、APIなどの活用によるカスタマイズで機能を拡張することで、kintoneの標準機能では満たせないユーザー企業固有の要件も満たすことができます。ただし、この自由度とトレードオフの関係にある部分もあり、企業でのシステム運営を考える場合にメンテナンス性や開発スピードに与える影響などとのバランスを見て、どこまでカスタマイズを行うかを検討するのが望ましいです。

 というのは、カスタマイズしていない部分は、kintoneの運営企業であるサイボウズが開発・運用保守を行ってくれます。APIに関しても仕様や品質は保証されているものではありますが、それらを使って開発されたプログラムに関しては、先述の保守される範囲には含まれません。ユーザー企業もしくはカスタマイズ開発を行ったベンダーで、保守する必要があります。kintoneは年数回アップデートされ、この反映タイミングはユーザー企業からは制御できません。kintoneサービス自体の機能は増えて改善されていくので良い面が大きいですが、カスタマイズ開発した部分はこれらに追従して問題ないようにしていく必要があるということです。

 kintoneのカスタマイズ活用には、メリットと同時にメンテナンス負荷の集中や、スピーディーな改修がしづらくなるといったリスクもあります。そのため、組織として「どこまでカスタマイズを許容するか」といった方針を定める企業が増えています。以下は代表的な考え方の例です。自社で方針を検討する際の参考にしてください。

・標準機能+プラグイン中心で活用

 社内に開発人材がいない場合は、基本的に標準機能とプラグインのみを利用する。カスタマイズでしか実現できない要件は可能な限り運用で対応し、カスタマイズ開発は行わない。短期的には現場の要望に応えられない部分もあるが、長期的には全体効率が高まる。

・積極的なカスタマイズ活用

 JavaScriptやHTMLによるカスタマイズが可能な人材が豊富にいる場合は、標準機能やプラグインで不足する部分も積極的にカスタマイズ開発する。ただし、カスタマイズ箇所の一覧化・仕様の記録・保守担当の明確化を行い、年1回の棚卸しを実施する。

・プラグイン活用による保守負担の軽減

 標準機能で不足する要件は、可能な限りプラグインで補い、保守はプラグインベンダーに委ねる。自社で独自のプログラム開発は行わない。

外部システムとの連携もノーコードに寄せる

 会計システムやERP(Enterprise Resource Planning)などとのデータ連携も重要ですが、ここでも「スピード」と「保守性」のトレードオフがあります。要件を精査した上で、メンテナンス性やコストを考慮した最適な方法を選択することが重要です。代表的な手段は以下の通りです。

  • CSV入出力による手動連携
  • ETL(Extract/Transform/Load)ツール/iPaaS(Integration Platform as a

Service)ツールの活用

  • APIを利用したバッチ処理プログラム開発

 特に近年は、ETLツールやiPaaS製品がクラウドサービスとして手頃な価格で提供されており、ノーコード/ローコードでシステム間のデータ連携や加工処理を実現できるバランスの良い選択肢となっています。代表例として、DataSpider、Asteria Warp、Yoom、Zapierなどがあります。

まとめ

 今回は、スペース機能とkintone APIについて解説しました。アプリ単体ではなく、それらの連動性やポータルを含めた利用のしやすさを考えてスペースを設計・活用してください。なお、kintone APIは機能拡張やシステム連携で恩恵が大きい半面、改修やメンテナンスのコストが増えてしまう側面があるので、その点を考慮して運用を検討していくのが理想です。

 次回は本連載の最終回の予定です。スペースの発展型であるゲストスペースや、その他知っておきたいkintoneのインフラやセキュリティに関わる事項について紹介します。

筆者紹介

WINGSプロジェクト 木戸裕一郎

米国で大学卒業後にサイボウズに入社し国内営業、海外ビジネス開発を経験し9年間勤務。その後TOKYO DIGITAL株式会社を設立、kintoneやHubSpot、Google Maps Platformなどを活用したシステム開発やコンサルティング業務に携わっている。

TOKYO DIGITAL株式会社(https://www.tokyodigital.net/

WINGSプロジェクト

有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティー(代表山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手掛ける。2021年10月時点での登録メンバーは55人で、現在も執筆メンバーを募集中。興味のある方は、どしどし応募頂きたい。著書、記事多数。

サーバーサイド技術の学び舎 - WINGS(https://wings.msn.to/
RSS(https://wings.msn.to/contents/rss.php
X: @WingsPro_info(https://x.com/WingsPro_info
Facebook(https://www.facebook.com/WINGSProject


Copyright © ITmedia, Inc. All Rights Reserved.

ページトップに戻る