中堅・大規模組織向けグループウェア「サイボウズGaroon」のポータル活用企画第8弾。
今回はGaroonのHTMLポートレットとkintoneを活用し、FAQを効率よく検索できるポータルを作成します。

kintoneの強みは、さまざまなデータを蓄積し、関係者と共有できる点です。
しかし、情報が増えるにつれて、目的の情報を迅速に見つけられないことがあります。

そんなとき、Garoonのポータルからkintoneアプリに蓄積されたマニュアルなどを簡単に検索できれば、ユーザーの利便性向上が期待できます。

この記事に紹介される内容は、Cybozu Days 2023の次のセッションで紹介されたシダックス社の事例の一部です。
発表資料もしくは掲載記事を併せて確認しておくと、よりイメージしやすくなります。
『ポータル管理をもっと楽に！クラウド版Garoonで実現する情シスのためのおてがる管理術』

• 大量の情報から必要なものをすばやく検索したい。
• 部分一致で検索したい。
  kintoneには、「部分検索ができない」などの制限があります。
  詳細は次のヘルプを参照してください。
  検索したいデータがヒットしません
• 同義語や表記揺れも含めて検索したい。
  たとえば、アプリに「パソコン」と「PC」といった用語が混在している場合、通常は「パソコン」というキーワードで検索しても、「PC」を含むレコードがヒットしません。
  なんと今回紹介するサンプルプログラムでは「PC」もヒットします。

次の動画のように、GaroonのポータルにFAQ検索パーツが配置されます。
検索窓にキーワードを入力すると、インクリメンタルサーチや部分一致検索に加え、同義語や表記揺れの検索ができます。
検索結果のリンクをクリックすると、該当ページに遷移します。

後述に掲載されている「Garoonポートレットkintone連携プログラム」（以下、本件著作物といいます）は、シダックス株式会社より提供されたものです。
本件著作物をご利用いただくことで、利用者は次のすべての事項に同意したものとみなされます。

1. 自社が契約する環境に対して導入し自己使用することを目的とする場合に限り、本件著作物の複製（ダウンロードを含む）、改変、翻訳、翻案を許諾します。
2. 本件著作物の取得者は、有償無償を問わず、本件著作物および本件著作物の二次的著作物について第三者に提供（頒布、公衆送信、送信化、貸与、譲渡、再使用許諾等を含みます）してはなりません。
3. 本件著作物は現状有姿で、何らの保証もなく提供されます。
4. 作者および著作権者は、本件著作物に起因して生じる一切の損害について何らの責任も負わないものとします。
5. 作者および著作権者は、本件著作物の利用方法に関するサポートは行いません。

Garoonのポータルからデータを参照させるためのkintoneアプリを作成していきます。
作成するアプリは、システム構成図に示した「FAQキーワード集」と「FAQリンク集」の2つです。
以下のリンク先から「Garoonポートレットkintone連携プログラム」をダウンロードして解凍します。
Garoonポートレットkintone連携プログラム

ダウンロードする前に、必ず「当記事のサンプルコードのライセンス」をお読みいただき、内容に同意のうえ利用してください。

解凍したファイル中のキーワード集 テンプレート.zipとリンク集 テンプレート.zipはアプリのテンプレートです。
それらを利用してアプリを作成します。
作成方法は次のヘルプを参考してください。
テンプレートファイルからアプリを作成する

作成したアプリのアプリIDは、のちほど使うので、メモしておきましょう。
たとえば、アプリのURLがhttps://sample.cybozu.com/k/100/の場合、アプリIDは100になります。

次は、GaroonのHTMLポートレットを利用して、検索機能を実装してきます。

まずは、HTMLポートレットで使用するファイルを準備しておきます。
先ほど解凍したファイルの中のindex.html、garoon-faq.js、garoon-faq.css、garoon-faq-fix-layout.cssを使用します。
それぞれの用途は以下のとおりです。

JavaScriptファイルの編集

garoon-faq.jsをテキストエディタで開き、次の項目を編集します。
「FAQリンク集アプリのアプリID」と「FAQキーワード集アプリのアプリID」はそれぞれ先ほど作成したkintoneアプリのアプリIDで書き換えてください。

1
2
3
4
5

/** リンク集のkintoneアプリID。 */
const LINKS_APP_ID = [FAQリンク集アプリのアプリID];

/** 代替表現のkintoneアプリID。 */
const ALTERNATIVES_APP_ID = [FAQキーワード集アプリのアプリID];

その他設定可能な項目

garoon-faq.jsの冒頭部分で設定可能なリストです。
必要に応じて値を変更してください。

以下の手順にしたがってポートレットを作成します。

1. 「Garronシステム管理」>「各アプリケーションの管理」>「ポータル」から「HTMLポートレット」を開きます。
2. [HTMLポートレットを追加する]をクリックします。
3. 次の項目を入力します。
   • ポートレット名
     名前は任意ですが、今回は「FAQポータル」とします。
   • Myポータル
     「Myポータルでの利用を許可する」にチェックを入れます。
   • ポートレットの内容
     index.htmlファイルの中身を貼り付けます。
4. [追加する]ボタンをクリックします。

1. 「HTMLポートレットの詳細」画面で、「JavaScript / CSSによるカスタマイズ」をクリックします。
2. 次の項目を設定します。
   • カスタマイズ
     「適用する」を選択します。
   • JavaScriptカスタマイズ
     「ファイルの追加」からgaroon-faq.jsを追加します。
   • CSSカスタマイズ
     「ファイルの追加」からgaroon-faq.cssを追加します。
     必要に応じて、garoon-faq-fix-layout.cssを追加してください。
3. [設定する]をクリックします。

cssは最初にgaroon-faq.cssのみを指定して動作確認してください。
もし、検索中に画面全体のレイアウトが動いてしまう場合は、garoon-faq-fix-layout.cssファイルをcssに追加してください。
なお、garoon-faq-fix-layout.cssはGaroon全体のスタイルを変更するため、検索ポートレット以外の部分でも表示に問題がないことを確認してください。

kintoneアプリに次のレコードを追加します。

FAQ リンク集

FAQ キーワード集

以下のリストに沿って検索結果を検証します。

正常に検索出来ればOKです。

以上、Garoonとkintoneを使ってFAQを簡単に検索できるカスタマイズを紹介しました。
ぜひ「誰でも使いやすい社内ポータル」を目指して試してみてください。

ガルーンポータル活用Tips

このTipsは、2024年10月版のGaroonとkintoneで動作を確認しています。