ガルーンポータル活用 Tips #1 「行き先案内板」

フォローする

今回は、大企業向けグループウェア「サイボウズ ガルーン」のポータル活用企画として、「行き先案内板」を作成していきたいと思います。

完成図

自由に必要な情報を配置できる「HTMLポートレット」ですが、配置しているリンクが年度ごとに変わったりする場合htmlを直接編集する手動のメンテナンスが発生します。担当者が気づかずに放置してしまい、しまいには使われないゾンビポータルと化す前に、サクッと情報を更新できるポートレットを今回は作っていきます。

HTMLポートレット

バックエンドで使うのは…そう、kintoneです。
kintoneでリソースを管理することで、ガルーンのシステム管理権限をもっていなくても配置するリソースを変えることができます。つまり、ポータルで発信したい情報を担当部署の担当者の作業だけで変更することができ、メンテナンスのコストを下げることができます。

それではkintoneに表示するリソースを保管して、ガルーンのポートレットに表示させる小技を披露していきたいと思います。

kintoneアプリの準備

Garoonのポータルに表示させるためのリソース保管用アプリを作成します。
kintoneアプリのフィールドは以下のように配置します。

リソース用のフィールドは全てテーブル化していきます。

フィールドタイプ フィールド名 フィールドコード 備考
文字列(1行) ポートレット名 port_name  ・任意 
※配置しなくても連携に影響しません
文字列(1行) タイトル gr_title  
文字列(1行) サブタイトル sub_title  
ドロップダウン ドロップダウン  color 

テーブル化(テーブルのフィールドコードはS_TABLE)
・項目と順番
 box-red
 box-yellow
 box-green
 box-purple
 box-blue
 box-turquoise

文字列(1行) 吹き出し comment  テーブル化 
文字列(1行) パーツタイトル title テーブル化 
文字列(1行) パーツフッター footer テーブル化 
文字列(複数行) パーツサブタイトル title_sub  テーブル化 
リンク リンク link テーブル化
・入力値の種類
 Webサイトのアドレス
添付ファイル 画像 img ・テーブル化

作成したアプリのキャプチャ

また2016年5月のアップデート後は、認証方式の評価順の変更によりcybozu環境内からのアクセスであれば、セッション認証よりもAPIトークンが優先されるので、このアップデート以降はAPIトークンを発行して使いましょう。

リソースの準備

ポートレットに動的に表示するコンテンツは、kintone側でレコードとして保存して使いますが、今回作成するサンプルでは、各パーツで静的に表示するファイルがいくつかあります。
今回静的ファイルの置き場として、ガルーンの「ファイル管理」にファイルを保存して使っていきたいと思います。

今回使う画像ファイル類は以下のzipファイルよりダウンロードしてください。

gr-integration-contents.zip

では、ファイル管理を使ってリソースの準備をしていきたいと思います。

 1.分りやすいようにポートレット用にフォルダを作成します。今回は「kinポータル用画像」とします。
 2.ページのヘッダー用画像、各boxの吹き出し用画像、各boxのフッター用画像、ページのフッター用画像をそれぞれ保存します。
 3.次に「bg_header.png」「bg_box_footer.png」「bg_lead_red.png」「bg_lead_yellow.png」「bg_green」「bg_purple」を選択した時に、リンク内に含まれるhid(フォルダID),fid(ファイルID)を確認しておきます。これは、後程ポートレット作成時に使いますのでメモをしておきましょう。

 例: hid →XXX,fid →〇〇〇の時https://example.cybozu.com/g/cabinet/view.csp?hid=XXX&fid=〇〇〇

 4.次にレイアウト調整用ファイル「main.css」を作成します。

main.css

※ファイル中のリンク内、XXX部分は環境に合わせて書き換えてください。

 5.main.cssをファイル管理に保存します。
 6.3の手順と同様にmain.cssのhidとfidを控えておきます。
 7.最後にkintoneとの連携用JavaScriptファイル「kinGrIntegration.js」を作成します。

kinGrIntegration.js

※今回のサンプルは、blobオブジェクトを取り扱っているためIE9では画像の取得をおこなえません。
※アプリ番号、レコード番号は環境によって書き換えてください。

 8.3の手順と同様に「kinGrIntegration.js」のhidとfidを控えておきます。

ガルーンポートレットの準備

今回使うポートレットを作成していきます。
以下のように、ヘッダー部分、kintoneからのデータ表示部分、フッター部分と作成します。

※各ファイルのfix及びhidは、環境によって変更してください。

ポートレットを作成したら、ポータルに配置しましょう。

ポータルに配置したら公開設定をおこないます。

動作確認

kintoneにレコードを登録します。

作成したガルーンポータルにkintoneに保存した情報が表示されたら成功です!

最後に

今回のガルーンポートレット活用はいかがでしょうか?是非、自社の環境で使えるかトライしてみてください。
まだまだ活用できるシーンがありそうなので、今後もTipsを定期的に公開していきたいと思います。

シリーズの他の回を見る

ガルーンポータル活用 Tips #2 「社員紹介ポータル」>>

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

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

Avatar
KH

ポータルの作成方法を参考にさせていただきました!

「kinGrIntegration.js」の作成の箇所で、

※アプリ番号、レコード番号は環境によって書き換えてください。

と注釈があるのですが、この場合、変わる箇所というのはどちらになるのでしょうか。

 

カスタマイズ初心者から、初歩的な質問出申し訳ないのですが、

ご教示いただければ幸いです。

 

KHにより編集されました
Avatar
cybozu Development team

KH様

「kinGrIntegration.js」の4行目、5行目のXXXの部分の書き換えをお願いいたします。

jQuery.noConflict();
jQuery(document).ready(function($) {
    "use strict";
    var APP_ID = XXX; //kintoneのアプリIDに書き換え
    var REC_ID = X; //kintoneのレコードID書き換え

アプリIDとレコードIDは、該当のkintoneレコードを表示した際のURLで確認できます。下の例ですと、アプリIDが123、レコードIDが4となります。

https://SUBDOMAIN.cybozu.com/k/123/show#record=4

ご確認をお願いいたします。

Avatar
KH

ご連絡遅くなり申し訳ないです。

初歩的な質問にも丁寧にいただきありがとうございます。

こちらの該当アプリのIDとレコードですが、このフロー中に作成した「リソース保管用アプリ」とは異なる別のものになるのでしょうか。

今一度初歩的な内容で申し訳ないのですが、おしえていただければ幸いです。

 

 

Avatar
cybozu Development team

KH様

ご連絡をありがとうございます。「リソース保管用アプリ」と同じものになります。

またご不明な点がございましたらご遠慮なくお知らせください。

Avatar
KH

先日はご丁寧にありがとうございました!

kintoneリソース用のアプリとポータルの連携はできたのですが、テーブル化したところのみ反映がされません。

1点確認ですが、アプリ内のテーブル化する項目の中で、下記については「ドロップダウン」で作成してよろしかったでしょうか。

文字列(1行) ドロップダウン  color 

テーブル化
・項目と順番
 box-red
 box-yellow
 box-green
 box-purple
 box-blue
 box-turquoise

お時間あるときにご回答いただければと存じます。

宜しくお願い致します。

 

Avatar
KH

すみません・・・アプリを公開設定していなかったので、見えなくなっていただけでした。

上記表示については自己解決しております。

ありがとうございました。

 

Avatar
cybozu Development team

KHさん

解決されたようでよかったです!

すみません。。そして、表記にミスがありましたね。文字列(1行)をドロップダウンに修正いたしました。

Avatar
KH

ドロップダウンの件、修正いただきありがとうございます。

再度すみません、やはり閲覧できない問題が発生してましたので、アプリの公開設定以外の要因がありそうです。

 

ヘッダーとフッターはgaroon上に表示されるのですが、

テーブル化した中にあるデータが反映されない状態になっております。

 

お時間あるときに、ご回答いただければ幸いです。

何卒、宜しくお願い致します。

Avatar
cybozu Development team

KHさん

エラー原因を特定できればと思うのですが、コンソールになにかエラーはでていますか?

Avatar
KH

コンソールで確認したところ、下記1件のエラーが有りました。

ご確認いただけますと幸いです。

 

kinGrIntegration.js:23 Uncaught TypeError: Cannot read property 'value' of undefined
at Object.<anonymous> (https://winwin.cybozu.com/g/cabinet/download.csp/-/kinGrIntegration.js?fid=12&ticket=&hid=4&.js:23:27)
at j (https://static.cybozu.com/g/F8.1.20_6.8/fw/jquery/jquery-2.1.4.min.js?20160813.text:2:26925)
at Object.fireWith [as resolveWith] (https://static.cybozu.com/g/F8.1.20_6.8/fw/jquery/jquery-2.1.4.min.js?20160813.text:2:27738)
at x (https://static.cybozu.com/g/F8.1.20_6.8/fw/jquery/jquery-2.1.4.min.js?20160813.text:4:11253)
at XMLHttpRequest.<anonymous> (https://static.cybozu.com/g/F8.1.20_6.8/fw/jquery/jquery-2.1.4.min.js?20160813.text:4:14765)

Avatar
cybozu Development team

KHさん

(本文のソースを分かり易く行数表示するように変更しました。)

エラーの通り23行目のkinGrIntegration.jsのvalueプロパティがとれていません。

        if (record.S_TABLE.value) {

kintone側で、テーブルのフィールドコードをS_TABLEとしていないなどの原因が考えられますがいかがでしょうか?

(本文にその説明がありませんでしたね・・・追記いたします。)

Avatar
KH

テーブルコードの指定の設定を漏れておりました。

いただいた箇所をkintoneのアプリ上で修正したところ、ポータル上でも閲覧・リンクするようになりました!

いろいろとお手数をお掛けし申し訳ありません。

ありがとうございました。

Avatar
nakamura

こちらの方法で作成したポータルですが、garoonのみのアカウントではうまく表示できませんでした。

具体的にはkintoneのレコード情報を参照する部分が表示されないといった具合でした。

このポータルはkintoneとgaroon両方が利用可能なアカウントでなければ使用できないのでしょうか。

kintoneのアカウントを追加する以外の回避方法が考えられる場合、ご教示いただければ幸いです。

 

Avatar
cybozu Development team

nakamura様

いつもお世話になっております。
cybozu.com developer network事務局です。

こちらの記事は、バックエンドとしてkintoneを使ってポータルを作成するという内容となっており、
Garoonのみで利用する場合については記載しておりませんでした。
申し訳ございません。

別の方法で、Garoonのみでも実現可能です。

Garoonのホームページにオンラインデモ環境で試すことができます。

・試用する(パッケージ版)
https://garoon.cybozu.co.jp/trial/package/

・オンラインデモ環境
http://onlinedemo2.cybozu.info/scripts/garoon/grn.exe

オンラインデモ環境の「社内手続き」というポータルはこちらの記事と同じような内容を実現しており、
kintoneは利用せず、ガルーン内で完結しております。

・「社内手続き」ポータル
http://onlinedemo2.cybozu.info/scripts/garoon/grn.exe/portal/index?pid=33

内容を簡単にご説明しますと、kintone側で管理していた画像などのリソースを、HTMLポートレットの
ポートレット内容に細かく記載し、画像はガルーンのファイル管理で管理するという方法です。

HTMLポートレットの詳細については、下記が設定画面になります。

・「[手続き]社内手続き」HTMLポートレットの詳細画面
http://onlinedemo2.cybozu.info/scripts/garoon/grn.exe/portal/system/html_portlet_view?plid=138

画像置き場として使っているファイル管理のURLは下記になります。

・ファイル管理(ルート) > Garoonポータル > 社内手続き
http://onlinedemo2.cybozu.info/scripts/garoon/grn.exe/cabinet/index?hid=17

 

ポートレット内容をコピーし、ファイル管理に追加した画像のリンクを設定していただくことで、
nakamura様の環境でもご利用可能ですので、是非お試しいただければと思います。

ご質問いただきありがとうございました。
今後ともよろしくお願い致します。

 

Avatar
nakamura

やはりHTMLポートレットを書いていくしかないようですね。

オンラインデモの話は初耳で、参考になります。

ありがとうございました。

ログインしてコメントを残してください。
Powered by Zendesk