OKBIZ（FAQサービス）と連携して Garoon にFAQ 検索ポートレットを追加する

Index

• はじめに
• できること
• システム構成
• 必要なもの
• OKBIZ の設定
• Garoon の設定
• サンプルコード
• おわりに

はじめに

OKBIZ. for FAQ / Helpdesk Support はオウケイウェイヴ社の FAQ作成・評価・管理ソリューションサービスです。
この記事では、Garoon と OKBIZ. for FAQ / Helpdesk Support（以下、OKBIZ）を連携し、Garoon のポータルから OKBIZ の FAQ データを検索するカスタマイズを紹介します。

できること

[FAQを検索する]ボタンから、OKBIZ で作成した FAQ を検索できるポートレットです。

[FAQを検索する]ボタンをクリックすると、検索ダイアログが表示されます。検索キーワードを入力して、[検索]ボタンをクリックします。

OKBIZ の FAQ データの検索結果が表示されます。

システム構成

OKBIZ の FAQ データを検索する際の認証には、OAuth を用いています。

FAQ データの検索を行うとき、事前にアクセストークン発行 API を使って、アクセストークンを取得します。検索ではこのアクセストークンを認証情報として、FAQ データ検索 API を実行します。

必要なもの

• Garoon クラウド版アカウント
• OKBIZ アカウント

OKBIZ の設定

OKBIZ にログインし、OKBIZ の管理画面を開きます。

1. OAuth2.0アプリケーション設定を行います。
   このとき発行される「クライアントID」「クライアントSecret」をメモします。Garoon の設定で利用します。
2. 管理ダッシュボードで、検索対象となる FAQ の ID（数字）をメモします。Garoon の設定で利用します。

OKBIZ 側の設定の詳細は、オウケイウェイヴ社にお問い合わせください。

Garoon の設定

設定には、Garoon 管理者権限が必要です。

なお、このカスタマイズでは以下の外部ライブラリを利用しています。

• jQuery v3.4.1, ドキュメント
  https://js.cybozu.com/jquery/3.4.1/jquery.min.js
• SweetAlert2 v9.5.4, ドキュメント
  https://js.cybozu.com/sweetalert2/v9.5.4/sweetalert2.min.js
  https://js.cybozu.com/sweetalert2/v9.5.4/sweetalert2.min.css
• Garoon html/css/image-Kit for Customize, ドキュメント
  Garoon の見た目に調和するスタイルシートです。
• css for SweetAlert on Garoon, 参照
  Garoon で SweetAlert を利用するときに発生するレイアウト崩れを防ぐスタイルシートです。

手順1. プロキシ API の設定

アクセストークン発行用とFAQデータ取得用に、プロキシAPIを設定します。
手順の詳細は「プロキシAPIの設定」をご参照ください。

1. Garoon システム管理画面を開きます。
2. [基本システムの管理]タブをクリックし、[API] を選択します。
3. [プロキシAPIの設定]をクリックします。
4. [追加する]をクリックします。
5. アクセストークン発行用に、以下の内容を入力します。入力が終わったら、[追加する]ボタンをクリックします。
   
   

   項目

   値

   ステータス

   有効

   プロキシコード

   OKBIZ_AccessToken

   メソッド

   POST

   URL

   https://secure.okbiz.okwave.jp/{サイトID}/oauth/token?grant_type=client_credentials
   ※ {サイトID} は利用している OKBIZ のサイト ID です。

   パラメーター

   キー	値
   client_id	OKBIZ の設定で発行されたクライアント ID
   client_secret	OKBIZ の設定で発行されたクライアント Secret

   ヘッダー

   OKBIZ でベーシック認証を設定している場合、ヘッダーの設定を行ってください。
   

   キー	値
   Authorization	Basic {トークン}

   ※ {トークン} はベーシック認証の ID とパスワードを :（半角コロン）でつないだ文字列を Base64 エンコードした値です。
    ID が「cybozu」、パスワードが「password」の場合、「cybozu:password」をBase64 エンコードします。
6. FAQデータ取得用に、以下の内容を入力します。入力が終わったら、[追加する]ボタンをクリックします。
   
   

   項目

   値

   ステータス

   有効

   プロキシコード

   OKBIZ_Search

   メソッド

   GET

   URL

   https://secure.okbiz.okwave.jp/{サイトID}/api/faq/search
   ※ {サイトID} は利用している OKBIZ のサイト ID です。

   パラメーター

   キー	値
   site_id	管理ダッシュボードで確認した ID
   update_date_from	検索対象とする FAQの更新日時（From) YYYYMMDD HH:mm:ss のフォーマットで指定 例：20190101 00:00:00
   per_page	1ページの表示数
   sort_type	並び順 0: キーワード一致順 1: 最新順 2: 重要度順

   ヘッダー

   OKBIZ でベーシック認証を設定している場合、ヘッダーの設定を行ってください。
   

   キー	値
   Authorization	Basic {トークン}

   ※ {トークン} はベーシック認証の ID とパスワードを :（半角コロン）でつないだ文字列を Base64 エンコードした値です。
   ID が「cybozu」、パスワードが「password」の場合、「cybozu:password」をBase64 エンコードします。

手順2. ポートレットの作成・カスタマイズの適用

1. Garoon システム管理画面を開きます。
2. [各アプリケーションの管理]タブをクリックし、[ポータル]をクリックします。
3. [HTMLポートレット]をクリックします。
4. [HTMLポートレットを追加する]をクリックします。
5. 以下の内容を入力します。入力が終わったら、[追加する]をクリックします。
   
   

   項目	値
   ポートレット名	任意の値を入力してください。 この記事では「OKBIZ連携」とします。
   ポートレットの内容	「テキスト」を選択します。 「内容」には、下記のポートレット HTML を貼り付けます。

   
   ポートレットHTML
6. 追加した「HTML ポートレットの詳細」画面で、[JavaScript / CSSによるカスタマイズ]をクリックします。
7. 次のように入力します。入力が終わったら、[設定する]ボタンをクリックして設定します。
   
   

   項目	値
   カスタマイズ	「適用する」を選択します。
   JavaScript カスタマイズ	次の順で指定します。 https://js.cybozu.com/jquery/3.4.1/jquery.min.js https://js.cybozu.com/sweetalert2/v9.5.4/sweetalert2.min.js カスタマイズファイル（garoon_okbiz.js） 詳細は、後述の「サンプルコード（garoon_okbiz.js）」をご参照ください
   CSS カスタマイズ	次の順で指定します。 https://js.cybozu.com/sweetalert2/v9.5.4/sweetalert2.min.css Garoon html/css/image-Kit for Customize（grn_kit.css）※1 css for SweetAlert on Garoon（sweetalert_button_grn.css）※2 カスタマイズファイル（garoon_okbiz.css） 詳細は、後述の「サンプルコード（garoon_okbiz.css）」をご参照ください

※1 Garoon html/css/image-Kit for Customize の入手方法

1. GitHub リポジトリにアクセスします。
2. [Clone or download] ボタンをクリックして、「Download ZIP」を選択します。
3. ダウンロードした zip ファイルを解凍します。
4. 解凍したファイルの「css」フォルダー以下の「grn_kit.css」を利用します。

※2 css for SweetAlert on Garoon の入手方法

1. GitHub リポジトリにアクセスします。
2. [Clone or download] ボタンをクリックして、「Download ZIP」を選択します。
3. ダウンロードした zip ファイルを解凍します。
4. 解凍したファイルの「css」フォルダー以下の「sweetalert_button_grn.css」を利用します。

手順3. ポータルへの配置

手順の詳細は「ポートレットを配置する」をご参照ください。

1. Garoon システム管理画面を開きます。
2. [各アプリケーションの管理]タブをクリックし、[ポータル]をクリックします。
3. [ポータルの一覧]をクリックします。
4. 作成したポートレットを配置するポータル名をクリックします。ポータルを新規に作る場合は、「ポータルの追加」を参考に作成してください。
5. 左メニューのポートレット一覧から、作成したポートレット（OKBIZ連携）を、右側のレイアウトにドラッグして配置します。
6. 配置したポートレット右上の[未公開]ボタンをクリックして「公開中」に変更します。

サンプルコード

garoon_okbiz.js

12行目の OKBIZ_SITE_ID の値を、OKBIZ のサイト ID に変更してください。

garoon_okbiz.css

おわりに

この記事では、OKBIZ. for FAQ / Helpdesk Support で作成した FAQ を Garoon から検索できるカスタマイズを紹介しました。たとえば、Garoon で申請するワークフローに関する FAQ を OKBIZ で作成しておくと、総務への問い合わせも減りそうです。

この記事で利用した Garoon API は次のとおりです。

• 外部 API の実行

このカスタマイズは、サイボウズ オフィシャル SI パートナー クロス・ヘッド株式会社による有償サポートの対象カスタマイズです。
詳細はこちらをご参照ください。

このTipsは、2020年2月版 Garoon で確認したものになります。