2017年12月4日 / 最終更新日 : 2017年12月4日 Shotaro Matsuda kintone業務改善道場

kintone サイボウズLive化作戦（イベントカレンダー編）

この記事の概要

★この記事は「kintone Advent Calendar 2017」の４日目の記事です。

みなさんこんにちは。プロジェクト・アスノート代表の松田です。無料で使えるグループウェアとして、多くの人に愛されていたサイボウズLiveが、残念ながら2019年4月１５日をもってサービス終了になることが決まりました。この発表を受けて、さまざまなサービスが移行受け入れ発表を行い、移行ユーザー獲得ブームが起こっています。

今回は、同じサイボウズのkintoneを使って、サイボウズLiveの機能を再現してみます。
kintoneはプログラムのコーディングをしないでも、マウスのドラッグアンドドロップ操作によって業務アプリを自分で作ることができます。

この記事では、kintoneの標準機能で、サイボウズLiveのイベント（カレンダー）の機能を再現したアプリを作るための手順と考え方を解説します。

★記事の最後で、今回作成したkintoneスペースのテンプレートおよび、アプリセットのテンプレートをダウンロードできます。kintoneアプリ作成初心者の人はぜひ参考にしてみてください。

▼関連記事：「kintone サイボウズLive化作戦」シリーズ

作成するkintoneアプリのイメージ

サイボウズLiveの画面を確認

それではまず、サイボウズLiveの画面を確認しながら、機能を洗い出してみます。
登録するデータ項目としては以下のものがありました。

日時（始まりと終わり）
タイトル種別（予定の種別：カテゴリのようなもの）
タイトル（テキスト）
メモ（テキスト複数行）
添付ファイル
この更新を通知するチェックボックス

kintoneアプリのフォームを作る

さっそくkintoneアプリでこれらのデータを取り込んだアプリを作ってみます。
設定のフォーム画面で、次のようなフィールドを配置していきます。各フィールドの配置はお好みで、使いやすいように配置していきます。

種別（ドロップダウン）
タイトル（文字列(１行)）
日時１（日時）・・・予定の始まり
日時２（日時）・・・予定の終わり
メモ（文字列（複数行））
添付ファイル
更新通知チェック（チェックボックス）

下図のようなアプリのフォームを作りました。

種別（ドロップダウンフィールド）の設定内容

ドロップダウンフィールドの設定は、フィールドを配置した後に、配置されたフィールドの右上にマウスを持っていくと表示される歯車アイコンから設定画面を開き、ドロップダウンの選択肢などを設定していきます。「項目と順番」のところに、選択肢を設定します。＋ボタンとーボタンで項目を追加・削除したり、左のアイコンをドラッグして並び順を変えたりすることができます。

更新通知チェックボックスの設定

サイボウズLiveには「この更新を通知する」というチェックボックスがありました。
このチェックを入れておくと、新規登録時や内容更新時にその変更があったことを、グループのメンバーに通知することができます。これもkintoneの通知機能を使って実現できそうです。

更新するかどうかを選択するために、何かスイッチとなるものが必要です。
そこで、チェックボックスフィールドを設置してみましょう。ここでは複数の選択肢ではなく、あえて項目は１つだけとしてみます。

ポイント

選択肢タイプのフィールド　ラジオボタンとチェックボックスの使い方の違い

複数ある選択肢から、必ずどれか１つを選択させる場合はラジオボタンを使います。
初期設定として、どれか１つが選択された状態になります。
チェックボックスは、選択肢の中で１つまたは複数の選択肢を選択させたい場合に使います。
何も選択しないことが可能です。

今回の場合、選択肢は１つでいいので、フィールド名の表示はさせなくていい（チェックボックスの内容でわかりますね）ので、「フィールド名を表示しない」チェックを入れる

これでアプリのフィールド設定はOKですね。
次に、予定を表示するためのカレンダー形式の画面を作っていきます。

カレンダー表示の設定

アプリ設定画面の「一覧」タブの＋ボタンをクリックして新規作成

カレンダー形式の画面も、一覧画面の１つの種類という考え方となっています。

一覧名を入力
レコード一覧の表示形式で、カレンダー形式を選択する

するとその下の設定画面がカレンダー表示に変わります

日付の選択で、アプリのどのフィールドの日付をカレンダーの表示日付にするかを設定します

ここでは、予定の始まり日時を設定した「日時１」を選択します

タイトル選択は、カレンダーに表示するタイトルのフィールドを設定します。
ここでは、「タイトル」フィールドを選択します

ここまで設定したら、一度どのように表示されるのかを確認してみましょう。確認用のレコードを１，２個登録しておきます。こんなふうに表示されました。

新しい予定の登録は、通常のレコード追加ボタン（右上の＋アイコン）からもできますが、カレンダー形式の場合はもう一つの手段があります。カレンダーの日付のところにマウスを持っていくと、日付枠の右上に「＋」ボタンが出現するのでこれをクリックして新規レコード登録画面を表示することができます。

カレンダー表示をちょっと工夫したい

サイボウズLiveのカレンダー表示を見ると、予定の開始時刻だけではなく、終了時刻も表示されています。

現状のkintoneアプリのカレンダー表示は、開始時刻だけしか表示されていません。そこで今回は、カレンダーに表示するデータを工夫することで、開始・終了時刻がカレンダー画面にも表示されるようにしてみます。

先ほどのカレンダーの設定で、タイトルの表示フィールドに「タイトル」フィールドを設定しました。このタイトルフィールドには、その予定のタイトルを入力するという使い方をします。開始時間はすでに表示されていますので、タイトルの前に終了時間が表示されれば、「開始時間-終了時間　タイトル」という表示を実現できそうです。

アプリに文字列（１行）フィールドを追加し、以下のように設定します。

「自動計算する」のチェックを入れる
表示されたボックスに次の計算式を入力します。
“ –” & DATE_FORMAT(日時２, “HH:mm”, “system”) & “ “ & タイトル

計算式の説明

自動計算では数値の計算以外に、文字列の結合もできます。

アプリのフィールドのデータを使う場合は、「フィールドコード」を入力する
※フィールドコードは、各フィールドの設定画面の一番下で設定します。デフォルトでも値が入っていますが、計算式を使う場合は自分で分かりやすいものに変更しておくといいと思います。

文字列と文字列の結合は、文字列１ & 文字列２のように、半角の&でつなげて表記する
日付や時刻は、フィールドコードをそのまま入力しただけでは、数値が表示されるだけなので、DATE_FORMATという関数を使って表示させたい形式になるように設定します。
- 今回は、DATE_FORMAT(日時２, “HH:mm”, “system”)　と設定します。
- これは、日時２フィールドのデータを、HH:mmという形式で表示する。タイムゾーンはkintoneのシステム設定で設定してある標準のタイムゾーンとする。という意味です。
- ※詳細はヘルプを参照　https://jp.cybozu.help/ja/k/user/date_format

自動計算に関するヘルプは、文字列（１行）フィールドの設定画面の「？」アイコンからも開くことができます。

さぁ、実際にどのように表示されるか確認してみましょう。
下の図のように、開始時間と終了時間、そしてタイトルが表示されるようになりました。

ここまでで、アプリの入力フォームとカレンダー表示の設定が終わりました。
最後に、通知機能を設定していきたいと思います。

通知の設定

フォームに作った「更新チェック」チェックボックスにチェックが入った予定が登録されると、このスペースのメンバーに通知されるように設定します。

アプリの設定＞レコードの条件通知で以下のように設定します。

「更新チェック」フィールドに対して、「次のいずれかを含む」条件
項目「この更新を通知する」にチェックを付けます
通知先はこのスペースに登録されたメンバー全員なので、「Everyone」とします。
- Everyoneの入力方法は、検索ボックスに何文字か入力すると検索結果として表示されるものを指定
- 次の図のように、グループとして登録されている「Everyone」を指定
通知内容には通知やメール（設定している場合）に記載されるメッセージを設定する。

今回は「新しい予定が登録されました」としておきます。

Everyoneの設定のしかた

通知内容をカスタマイズする

実際に通知するチェックを入れて新しい予定を登録してみたところ、ちゃんと通知が配信されていました。

ちょっと気になるところを手直ししながら、通知機能の調整をしていきます。
まず、通知のタイトルが「１」となっていて、どんな予定なのかがわかりません。

レコードのタイトルを設定する

通知のタイトルには、アプリの設定の中にある「レコードのタイトル」という設定が使われますが、ここのデフォルト設定が「レコード番号」となっているため、通知タイトルが「１」のような数字になってしまっています。

タイトルとして「レコード番号」ではなく「タイトル」と設定すれば、１の代わりに予定のタイトルが表示されるようになります。これで予定の内容はわかるようになりましたが、いつの予定なのかがわかりません。

レコードの条件通知で設定できるメッセージは固定で記入した内容だけです。なのでここに表示するべき内容を、アプリのフィールドとして用意してあげる必要があります。

ポイント：レコードのタイトル

レコードのタイトルが影響するところは以下の機能です。レコードタイトルの初期設定は「レコード番号」になっていますので、以下の機能を使う場合は忘れないように設定変更しておきましょう。詳細はヘルプ参照。

通知のタイトル
検索結果の一覧で表示されるタイトル
モバイル表示（ブラウザー、アプリ）での一覧画面

レコードタイトルに設定するためのフィールドを作る

今回は通知用のタイトルとして、「2017/11/8 10:00 -12:00 kintone基礎講座(松田正太郎)」と表示されるようにしてみましょう。

先ほどカレンダーの表示用のタイトルを作ったのと同じ要領で、今度は通知用タイトルを設定します。

アプリの設定＞フォーム　から、「文字列（１行）」フィールドを追加します。フィールドの設定は以下のようにします。

自動計算チェックを入れる
計算式の設定は以下のように設定しました

DATE_FORMAT(日時１, “YYYY/M/d HH:mm”, “system”) & ” -” & DATE_FORMAT(日時２, “HH:mm”, “system”) & ” ” & タイトル & “(” & 作成者 & “)”

※詳細はヘルプを参照　https://jp.cybozu.help/ja/k/user/date_format

フィールドの設定は下図のようになりました。

実際にレコードを登録して自動計算の結果を確かめてみると、ちゃんと目的の表示となっています。

ポイント：あとから計算フィールドを追加したときの注意

すでに登録されているレコードがあるアプリに、自動計算や計算フィールドを追加した場合、既存のレコードを開いた状態では計算結果は表示されていません。自動計算が処理されるタイミングは、アプリの編集画面でデータが入力・修正されたタイミングと、レコードが保存されるタイミングになりますので、「一度編集画面にして保存する」という作業が必要になります。

フィールドの準備ができたので、レコードタイトルの設定を変更します。
アプリの設定＞設定タブ＞その他の設定＞レコードのタイトル　で、先ほど作ったフィールドをタイトルに設定します。

実際に試してみたところ、通知のタイトルも設定されるようになりました。

kintone内の通知では、タイルの幅に入り切らないので右が切れてしまいましたが、メールの通知ではきちんと全文が表示されています。

この記事のまとめ

kintoneの標準機能で、サイボウズLiveのイベント（カレンダー）の機能を再現したアプリを作りました

アプリの入力フォームの作成と、カレンダー表示設定、通知の設定を行いました
カレンダーへの表示タイトルや、通知のタイトルに情報が不足する場合は、文字列結合を用いた自動計算を使うことで、表示用のフィールドを作ることができます

▼関連記事：「kintone サイボウズLive化作戦」シリーズ

★下のダウンロードボタンから、今回作成したkintoneスペースのテンプレートおよび、アプリセットのテンプレートをダウンロードできます。kintoneアプリ作成初心者の人はぜひ参考にしてみてください。

スペーステンプレートのダウンロードアプリテンプレートのダウンロード

※スペース（スペース内アプリやスレッドを含む）をまるごとテンプレートで再現したい場合は、スペーステンプレートをダウンロードしてください。アプリをスペース内ではなく通常のポータルに設置したい場合は、アプリテンプレートをダウンロードしてください。

次の記事：kintone サイボウズLive化作戦（ToDoリスト編）

kintone導入・活用のご相談はこちら！

こんな悩みを抱えていませんか？

◇ kintone導入がなかなか進まない
◇ アプリが思ったような動きをしてくれない・・・
◇ カスタマイズやプラグインをどう選んだらいいの？？
◇ 業務改善の進め方がよくわからない

サイボウズ公認 kintone エバンジェリストの松田正太郎があなたの相談相手になります。
保有しているkintone認定資格：
・kintone認定アソシエイト（2017）
・kintone認定アプリデザインスペシャリスト（2017）
・kintone認定カスタマイズスペシャリスト（2020）

★業務改善アドバイス、kintone構築支援
★連携サービス・プラグイン選定支援、カスタマイズ
★詳細ヒアリングの上、御社に最適なプランを提案します
★初回打合せ（2時間程度）は無料。まずはお問い合わせください！（WebミーティングOK）

お問い合わせはこちら！