「グループ」と「カテゴリー」で使いやすいアプリを実現

本連載では、『プログラミング言語恐怖症』の筆者が、サイボウズが提供するノーコード開発ツール「kintone(キントーン)」を使って気ままに業務アプリを作り、それを紹介している。

これまでに、広報担当者の情報を一元的に管理できる「プロフィール帳」や、思いついた取材ネタを記録する「取材ネタ帳」、報道用の素材を編集部内で共有できるアプリを作ってきた。

• 

  サイボウズが提供するノーコード開発ツール「kintone(キントーン)」

作成したアプリをブラッシュアップ

前回は、思いついた取材のネタを一覧で管理し、それを編集部内のメンバーで共有できるアプリ「取材ネタ帳」をブラッシュアップした。具体的には、「テーブル」機能を活用することで入力項目に柔軟性を持たせ、「通知」機能を使うことで他の編集部メンバーが積極的にレコードを登録したくなるような仕掛けを作った。

• 

  前回は、「テーブル」機能を活用して入力画面に柔軟性を持たせた

前回に引き続き、今回も作成したアプリのブラッシュアップをしていこう。何度も編集し、理想のアプリになるまでトライ&エラーを繰り返せる点はkintoneの魅力のひとつ。第3回目で作った報道用の素材を編集部内で共有できるアプリには改善の余地がありそうだ。

プロの視点や客観的な意見も取り入れたいと思ったので、kintoneのカスタマーサクセス部に所属するサイボウズの齋藤力輝さんに協力をお願いし、多くのアドバイスをもらった。

• 

  サイボウズ カスタマーサクセス部の齋藤力輝さん

第3回目で紹介したのは、個人が撮影した写真といった報道用の素材を編集部内で共有できるアプリだ。

• 

  第3回目で紹介した「報道用素材共有アプリ」のレコード一覧

マイナビニュースでは、「ワーク&ライフ」や「エンタメ」、「デジタル」、「テック」など、チャンネルが多岐にわたるため、すべての編集部が共通で使えるようなストックフォトサービスを利用している。報道用に特化したストックフォトサービスではないため、企業ロゴといった素材が少ない。

そこで同アプリを作成し、個人が取得した報道用の素材を一括で管理・共有できるようにした。「企業名」と「素材タイトル」、「素材の概要」などの項目の記入に加えて、写真やPDFといったファイルを添付できるようにしている。

• 

  「報道用素材共有アプリ」のレコード画面

同アプリを使い始めてから2カ月ほど経過したが、アプリの完成度にはまだ納得していない。さらに分かりやすくて使いやすいアプリを実現して、他の編集部のメンバーにももっと使ってもらいたいという思いがある。

筆者が課題に感じていることは大きく2つある。入力画面とレコードの一覧画面がごちゃごちゃしていて分かりづらいことと、レコードの検索性がイマイチなことだ。齋藤さんの知恵を借りて、これらの課題を解決していこう。

「グループ」と「ラベル」の合わせ技

まずは前回と同様、レコードの入力画面をすっきりとさせるために、「テーブル」機能を使ってみる。

このアプリでは、報道用の素材が多い場合にも対応できるように、「添付ファイル」を12個まで追加できるように設定しているが、そこまでの数を添付しない場合も少なくない。必要なかった項目は空欄のまま登録されるため、少々不格好だ。

• 

  改善点(1)添付ファイルのフィールドに柔軟性がない

テーブルは、フォーム画面に“表形式の入力”を作成できる機能。表の右端にある「＋」アイコンをクリックすれば、行が追加される。同様の操作を繰り返すことで、3行目、4行目……のデータを追加していくことができる。これで大量にあった添付ファイル問題は解決した。

• 

  「テーブル」内に「添付ファイル」を入れると……

• 

  フォーム画面がすっきりした

しかし、入力画面でもう一つ気になる点がある。初めてレコードを登録するメンバーのために、「素材の説明」でどういった内容を記入すべきかという例文を初期値として登録しているのだが、これが長くて不格好だと感じる。また、入力するためには例文を消さないといけないため、手間もかかる。

• 

  改善点(2)「素材の説明」の初期値が長文で不格好

些細なことだが、個人的にはとても気になることだ。そこで、齋藤さんに相談してみたところ、「グループ」と「ラベル」を組み合わせたテクニックを教わった。

グループフィールドは、他のフィールドをグループフィールド内に入れて、グループごとに折りたたんで非表示にしたり、展開して表示したりできる。フィールドの数が多い場合などに、フィールドをグループフィールドごとにまとめて整理できる。

• 

  「グループ」内に「ラベル」を追加

今回はこのグループフィールドと説明文を表示できるラベルを使って、アプリを初めて使うメンバー向けに「迷ったらココをクリック!」といった項目を作ってみた。グループフィールドに入れたラベルに素材の説明の例文などを記入することで、レコードの入力画面をさらにすっきりとさせることに成功した。

• 

  ラベルにアプリの説明文を入力

• 

  アプリの使い方に慣れていない人はグループをクリックすることで、説明文を読めるような仕様にした

煩雑なのはレコードの入力画面だけではない。レコードの一覧画面もごちゃごちゃしているので、こちらもすっきりとさせよう。

• 

  改善点(3)レコードの一覧画面に不必要な項目が多い

やり方は簡単だ。「フォーム」タブの隣にある「一覧」タブをクリックすると、一覧に関する設定画面が表示される。この画面で、一覧名や表示形式を変更したり、表示するフィールドを選択したりできる。

• 

  「フォーム」タブの隣にある「一覧」タブをクリックすると

• 

  一覧に関する設定画面が表示される

初期設定のままだと、すべてのフィールドが一覧で表示されるので、すっきりとさせるためには表示すべきフィールドだけを選択すればいい。今回は、一覧名を「全素材一覧」に変更し、表示するフィールドを「企業名」「素材タイトル」「素材一覧」「作成日時」の4つに絞った。一覧画面の情報量が必要最低限になったことで、一目で分かりやすい画面になった。

• 

  表示するフィールドを「企業名」「素材タイトル」「素材一覧」「作成日時」の4つに絞った

• 

  レコード一覧画面がすっきりした

「カテゴリー」で検索性を高める

レコードの検索性がイマイチなことも課題の1つだ。報道用の素材といっても、企業・サービスのロゴや人物、施設の写真や説明会資料など多岐にわたる。レコードの一覧画面の上部にある絞り込み機能を使えば検索することは可能だが、もっと簡単に必要な素材を探し出したい。

この問題を解決するのが「カテゴリー」だ。kintoneのカテゴリーでは、アプリに登録されたレコードを階層形式で分類、表示できる。設定タブ内にあるカテゴリーをクリックすると、レコードの分類(カテゴリー)の設定画面が表示された。

• 

  設定タブ内にあるカテゴリーをクリックすると

• 

  レコードの分類(カテゴリー)の設定画面が表示される

カテゴリーを設定して、有効化すると、レコード一覧画面の左側にカテゴリー表示エリアが現れ、カテゴリーが階層形式で表示された。クリック一つで選択したカテゴリーに絞り込んで素早く表示することができるから便利だ。また、レコードを登録する際も、カテゴリーを選択できるようになった。

• 

  階層形式でカテゴリーを設定して有効化

• 

  レコード一覧画面の左側にカテゴリー表示エリアが現れた

• 

  選択したカテゴリーに絞り込むことができる

• 

  レコードを登録する際も、カテゴリーを選択できるようになった

カテゴリー名は64文字以内で入力でき、親カテゴリーを含め5階層、合計1000個まで追加できるらしい。今はそこまで必要ないが、今後カテゴリー分けしたい項目が出てきたとしても安心だ。

今回は、アプリのUIと検索性を向上させた。自分が理想とするアプリにだんだんと近づいている気がする。次回は、齋藤さんから教わったkintoneでアプリ作成する上での時短術を紹介しようと思う。