カテゴリー内の他の記事

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

Index

はじめに

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. アクセストークン発行用に、以下の内容を入力します。入力が終わったら、[追加する]ボタンをクリックします。
    プロキシAPIの設定(アクセストークン発行用)
    項目
    ステータス 有効
    プロキシコード 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データ取得用に、以下の内容を入力します。入力が終わったら、[追加する]ボタンをクリックします。
    プロキシAPIの設定(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 は次のとおりです。

____.png

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

 

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

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

サインインしてコメントを残してください。