カテゴリー内の他の記事

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

Index

はじめに

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

完成図

portal.png

自由に必要な情報を配置できる「HTMLポートレット」ですが、配置しているリンクが年度ごとに変わったりする場合htmlを直接編集する手動のメンテナンスが発生します。

担当者が気づかずに放置してしまい、しまいには使われないゾンビポータルと化す前に、サクッと情報を更新できるポートレットを今回は作っていきます。

HTMLポートレット

バックエンドで使うのは…そう、kintoneです。
kintoneでリソースを管理することで、ガルーンのシステム管理権限をもっていなくても配置するリソースを変えることができます。

つまり、ポータルで発信したい情報を担当部署の担当者の作業だけで変更することができ、メンテナンスのコストを下げることができます。

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

kintoneを介せずGaroon完結で同様のポータルが作れる方法についてはこちらの記事を参照してください。

リソースの準備

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

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

画像の準備

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

garoon-portal1.zip

2.分りやすいようにポートレット用にファイル管理にフォルダを作成します。今回は「kinポータル用画像」とします。
3.ページのヘッダー用画像、各boxの吹き出し用画像、各boxのフッター用画像、ページのフッター用画像を「kinポータル用画像」に保存します。

CSSファイルの準備

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

1.「main.css」を作成(文字コードは「UTF-8」で保存してください)し、ファイル管理に保存します。

2.次に、ファイル管理の一覧画面で、先程保存した「bg_header.png」「bg_box_footer.png」「bg_lead_red.png」「bg_lead_yellow.png」「bg_green」「bg_purple」のダウンロードアイコンから画像のアドレス情報を一つずつコピーします。
3.main.cssファイルの/* 画像パスの変更 */部分のXXXを含むリンクをコピーしたリンク(「/g」以降の部分)で書き換えます。
4.ファイル保存後、main.cssを選択した時に、リンク内に含まれるhid(フォルダID),fid(ファイルID)を確認しておきます。これは、後程ポートレット作成時に使いますのでメモをしておきましょう。

JavaScriptファイル

最後にkintoneとの連携用のJavaScriptファイル「kinGrIntegration.js」を作成します。

1.「kinGrIntegration.js」を作成(文字コードは「UTF-8」で保存してください)し、ファイル管理に保存します。

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

2.ファイル保存後、ファイル一覧画面のダウンロードアイコンから「kinGrIntegration.js」のhidとfidを控えておきます。

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

サンプルリソースをダウンロードして一部変更

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

※main.cssとkinGrIntegration.jsのfid及びhidは、先の手順で控えたものに変更してください。

ポータルに配置

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

portret.png

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

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.com環境内からのアクセスであれば、セッション認証よりもAPIトークンが優先されるので、このアップデート以降はAPIトークンを発行して使いましょう。
*現状はセッション認証を利用しています。APIトークンによる認証に変更したい場合に、APIトークンを生成する必要があります。

レコードの登録

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

kintone.png

動作確認

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

portal.png

さいごに

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

更新履歴

  • 2020/02/19
    jQuery の追加手順および jQuery.noConflict(true) を使うようにコードを修正

 

シリーズの他の回を見る

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

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

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

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

Avatar
katsumata

迅速なご対応ありがとうございます。

参考にさせていただきます。

Avatar
katsumata

cybozu developer network 事務局 ご担当者様

お世話になっております。

昨日ご教示いただいたポートレットを使用して設定しましたが、以下のようなエラーが発生しています。

画像データの取得ができていないものかと思いますが、修正箇所が分かりません。

お手数ですが、ご教示いただけますでしょうか。

file_download.csp:1 GET https://gpex.cybozu.com/g/assets/file_download.csp?file_key=img_documents&v=1580276535 520 (Garoon Error)
Image (async)
(anonymous) @ view.csp?pid=6:538

よろしくお願いいたします。

Avatar
katsumata

ちなみに上記のエラーが5か所出ています。

Avatar
cybozu Development team

katsumata様

https://onlinedemo2.cybozu.info/scripts/garoon/grn.exe/assets/system/assets_list? に相当する画面に、画像を登録済でしょうか。

https://onlinedemo2.cybozu.info/scripts/garoon/grn.exe/portal/system/html_portlet_view?plid=168 の内容から

上記の画面と同様、「img_」で始まる画像を登録する必要があるように見受けられます。

※なおオンラインデモの内容については窓口が異なるため、今後は製品のサポート窓口にお問い合わせいただきますようお願いいたします。

Avatar
Hide

昨日まで、kintoneのリソース用フィールドに設定した添付画像がきちんと表示されていたのですが、突然表示されなくなってしまいました。
画像を添付しなおしてみたりするのですが、改善しません。

何か想定される原因が分かりませんでしょうか?

ご教示いただけたら幸いです。

Avatar
cybozu Development team

Hide 様

お世話になっております。 cybozu developer network 運営でございます。

弊社環境にて確認したところ、問題なく表示できていたため、
以下の記事を参考にデバッグしていただき、エラー内容を確認していただけないでしょうか。

https://developer.cybozu.io/hc/ja/articles/207613916

よろしくお願いいたします。

Avatar
Hide

無事、解決できました。
ありがとうございました。

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