カテゴリー内の他の記事

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

フォローする

Index

 

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

完成図

portal.png

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

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

HTMLポートレット

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

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

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

リソースの準備

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

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

画像の準備

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

gr-integration-contents.zip

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

CSSファイルの準備

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

1.まずは下記ファイルをダウンロードして、ファイル管理に保存します。

main.css

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

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

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

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

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

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

GaroonPortlet.html

※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を定期的に公開していきたいと思います。

シリーズの他の回を見る

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

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

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

直接的に記事と関連がないご質問は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ポートレットを書いていくしかないようですね。

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

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

Avatar
copin

自社で上記の様なポータルを作成したく、参考にさせて頂きながら進めているんですが、

kintoneリソース用のアプリとポータルの連携が出来ずに困っております。

 

確認する項目や設定箇所をご教授頂けますでしょうか?

Avatar
cybozu Development team

copin様

お世話になっております。cybozu developer network運営事務局です。

ご質問いただいている件ですが、連携用JavaScriptファイルでエラーが出ているということでしょうか?

確認のため、発生している現象やエラー内容について教えていただけますでしょうか。

お手数をおかけいたしますが、よろしくお願いいたします。

 

Avatar
copin

ご支援ありがとうございます。

Garoonのポートレットとポータルは、上記の画像と同様に表示出来ましたが、

kintoneリソース用のアプリに入力したものが、Garoonポータルに反映されないという現象です。

エラー等は特に画面上には表示されてはおりません。

どこか設定漏れやミスかとは思いますが、見当がつきません・・・。

初心者なのでで申し訳ございませんが、詳しくご教授頂ければ幸いです。

宜しくお願い致します。

Avatar
cybozu Development team

copin様

お世話になっております。cybozu developer network運営事務局です。

エラーの確認ついて説明が不足しており、申し訳ございません。

コンソールでエラーの有無をご確認いただけますでしょうか。コンソールにエラーが出ている場合にはメッセージに従って確認ができます。

参考:動かない?そんな時はデバッグをしてみよう!入門編

エラーの有無がわからない段階で確認するとしたら、以下の2点が考えれます。

  • kintoneアプリのフィールドコードに間違いがないか
  • 各サンプルプログラムでXXXになっている部分をcopin様の環境に合わせて変更しているか(変更漏れがないか)

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

Avatar
copin

丁寧なご説明ありがとうございます。

3度ほど最初から作り直して、特に上記の2点(フィールドコード、環境合わせ)に注意しながら作成してみましたが、

下記のエラーが出ていました。(ドメイン部分はXXXXXに書き換えました)

ご確認頂けますでしょうか?宜しくお願い致します。

 

index.csp?pid=222:1 Refused to execute script from 'https://XXXXX.cybozu.com/g/cabinet/download.csp/-/kinGrIntegration.js?fid=363&ticket=&hid=93&.js' because its MIME type ('application/octet-stream') is not executable, and strict MIME type checking is enabled.

Avatar
cybozu Development team

copin様

cybozu developer network運営事務局です。

何度もお試しいただき、恐縮です。

MIMEtypeのエラーのようですので、こちらの回答を参考にGaroonにMIMEタイプを追加してみていただけますでしょうか。

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

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

GaroonにMIMEタイプを追加にて解決致しました!

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

Avatar
copin

続けての質問で申し訳ありません、

Garoonのポータルに表示されたKintoneの情報のリンクに飛ぶ際に、

別窓で表示させるには何処にどのような記述を追加すれば宜しいでしょうか?

上にあるGaroonポータルの画像で言えば、「物品購入申請」や「業務交通費精算」をクリックした際に、

別窓で表示させたい場合という事です。

フッター部分の「座席表」等のリンクは、target="_blank"の追記にて別窓表示出来ました。

ご教授宜しくお願い致します。

Avatar
cybozu Development team

copin様

cybozu developer network運営事務局です。

 

画像リンクを別窓で表示するためには、

kintGrIntegration.js の37行目部分、

var $linkDiv = $("<a></a>", {href: LINK});  の要素に『target: _brank』を追記して
var$linkDiv = $("<a></a>", {href: LINK, target: "_brank"});

と記述すれば別窓でリンクが開きます。

Avatar
copin

上記記述追記で別窓でリンク開きました!

アドバイスありがとうございました。

 

Avatar
teranaka

Google Chromeにて

GaroonPortlet.html

をインストールしようとすると別ページに遷移して文字化けした画面が表示されます。

現在では配信サービスが停止しているのか、あるいは私側の設定のミスであるのか、

ご教授頂いてもよろしいでしょうか。

Avatar
cybozu Development team

teranaka様

お世話になっております。
cybozu developer network 事務局です。

「GaroonPortlet.html」ですが、
右クリックをして、「名前をつけてリンク先を保存」でファイルをダウンロードできます。
説明が分かりづらく、お手数おかけいたしました。

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

Avatar
teranaka

cybozu developer network 事務局 担当者様

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

ご回答いただき、ありがとうございました。

勉強不足で申し訳ございません、対応できました。

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