Index
はじめに
今回は、大企業向けグループウェア「サイボウズ ガルーン」のポータル活用企画として、「行き先案内板」を作成していきたいと思います。
完成図
自由に必要な情報を配置できる「HTMLポートレット」ですが、配置しているリンクが年度ごとに変わったりする場合htmlを直接編集する手動のメンテナンスが発生します。
担当者が気づかずに放置してしまい、しまいには使われないゾンビポータルと化す前に、サクッと情報を更新できるポートレットを今回は作っていきます。
HTMLポートレット
バックエンドで使うのは…そう、kintoneです。
kintoneでリソースを管理することで、ガルーンのシステム管理権限をもっていなくても配置するリソースを変えることができます。
つまり、ポータルで発信したい情報を担当部署の担当者の作業だけで変更することができ、メンテナンスのコストを下げることができます。
それではkintoneに表示するリソースを保管して、ガルーンのポートレットに表示させる小技を披露していきたいと思います。
リソースの準備
ポートレットに動的に表示するコンテンツは、kintone側でレコードとして保存して使いますが、今回作成するサンプルでは、各パーツで静的に表示するファイルがいくつかあります。
今回静的ファイルの置き場として、ガルーンの「ファイル管理」にファイルを保存して使っていきたいと思います。
では、ファイル管理を使ってリソースの準備をしていきたいと思います。
画像の準備
1.今回使う画像ファイル類は以下の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は、先の手順で控えたものに変更してください。
ポータルに配置
ポートレットを作成したら、ポータルに配置しましょう。
ポータルに配置したら公開設定をおこないます。
kintoneアプリの準備
リソース保管用アプリの作成
Garoonのポータルに表示させるためのリソース保管用アプリを作成します。
kintoneアプリのフィールドは以下のように配置します。
リソース用のフィールドは全てテーブル化していきます。
| フィールドタイプ | フィールド名 | フィールドコード | 備考 |
| 文字列(1行) | ポートレット名 | port_name | ・任意 ※配置しなくても連携に影響しません |
| 文字列(1行) | タイトル | gr_title | |
| 文字列(1行) | サブタイトル | sub_title | |
| ドロップダウン | 色 | color |
・テーブル化（テーブルのフィールドコードはS_TABLE） |
| 文字列(1行) | 吹き出し | comment | ・テーブル化 |
| 文字列(1行) | パーツタイトル | title | ・テーブル化 |
| 文字列(1行) | パーツフッター | footer | ・テーブル化 |
| 文字列(複数行) | パーツサブタイトル | title_sub | ・テーブル化 |
| リンク | リンク | link | ・テーブル化 ・入力値の種類 Webサイトのアドレス |
| 添付ファイル | 画像 | img | ・テーブル化 |
作成したアプリのキャプチャ
また2016年5月のアップデート後は、認証方式の評価順の変更によりcybozu.com環境内からのアクセスであれば、セッション認証よりもAPIトークンが優先されるので、このアップデート以降はAPIトークンを発行して使いましょう。
＊現状はセッション認証を利用しています。APIトークンによる認証に変更したい場合に、APIトークンを生成する必要があります。
レコードの登録
kintoneにレコードを登録します。
動作確認
作成したガルーンポータルにkintoneに保存した情報が表示されたら成功です！
さいごに
今回のガルーンポートレット活用はいかがでしょうか？是非、自社の環境で使えるかトライしてみてください。
まだまだ活用できるシーンがありそうなので、今後もTipsを定期的に公開していきたいと思います。
更新履歴
- 2020/02/19
jQuery の追加手順および jQuery.noConflict(true) を使うようにコードを修正
ガルーンポータル活用 Tips #2 「社員紹介ポータル」>>
このTipsは、2020年1月版 Garoonで確認したものになります。
ポータルの作成方法を参考にさせていただきました！
「kinGrIntegration.js」の作成の箇所で、
※アプリ番号、レコード番号は環境によって書き換えてください。
と注釈があるのですが、この場合、変わる箇所というのはどちらになるのでしょうか。
カスタマイズ初心者から、初歩的な質問出申し訳ないのですが、
ご教示いただければ幸いです。
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
ご確認をお願いいたします。
ご連絡遅くなり申し訳ないです。
初歩的な質問にも丁寧にいただきありがとうございます。
こちらの該当アプリのIDとレコードですが、このフロー中に作成した「リソース保管用アプリ」とは異なる別のものになるのでしょうか。
今一度初歩的な内容で申し訳ないのですが、おしえていただければ幸いです。
KH様
ご連絡をありがとうございます。「リソース保管用アプリ」と同じものになります。
またご不明な点がございましたらご遠慮なくお知らせください。
先日はご丁寧にありがとうございました！
kintoneリソース用のアプリとポータルの連携はできたのですが、テーブル化したところのみ反映がされません。
1点確認ですが、アプリ内のテーブル化する項目の中で、下記については「ドロップダウン」で作成してよろしかったでしょうか。
・テーブル化
・項目と順番
box-red
box-yellow
box-green
box-purple
box-blue
box-turquoise
お時間あるときにご回答いただければと存じます。
宜しくお願い致します。
すみません･･･アプリを公開設定していなかったので、見えなくなっていただけでした。
上記表示については自己解決しております。
ありがとうございました。
KHさん
解決されたようでよかったです！
すみません。。そして、表記にミスがありましたね。文字列(1行)をドロップダウンに修正いたしました。
ドロップダウンの件、修正いただきありがとうございます。
再度すみません、やはり閲覧できない問題が発生してましたので、アプリの公開設定以外の要因がありそうです。
ヘッダーとフッターはgaroon上に表示されるのですが、
テーブル化した中にあるデータが反映されない状態になっております。
お時間あるときに、ご回答いただければ幸いです。
何卒、宜しくお願い致します。
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)
KHさん
（本文のソースを分かり易く行数表示するように変更しました。）
エラーの通り23行目のkinGrIntegration.jsのvalueプロパティがとれていません。
if (record.S_TABLE.value) {kintone側で、テーブルのフィールドコードをS_TABLEとしていないなどの原因が考えられますがいかがでしょうか？
（本文にその説明がありませんでしたね・・・追記いたします。）
テーブルコードの指定の設定を漏れておりました。
いただいた箇所をkintoneのアプリ上で修正したところ、ポータル上でも閲覧・リンクするようになりました！
いろいろとお手数をお掛けし申し訳ありません。
ありがとうございました。
こちらの方法で作成したポータルですが、garoonのみのアカウントではうまく表示できませんでした。
具体的にはkintoneのレコード情報を参照する部分が表示されないといった具合でした。
このポータルはkintoneとgaroon両方が利用可能なアカウントでなければ使用できないのでしょうか。
kintoneのアカウントを追加する以外の回避方法が考えられる場合、ご教示いただければ幸いです。
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=168
画像置き場として使っているファイル管理のURLは下記になります。
・ファイル管理(ルート) > Garoonポータル > 社内手続き
http://onlinedemo2.cybozu.info/scripts/garoon/grn.exe/cabinet/index?hid=17
ポートレット内容をコピーし、ファイル管理に追加した画像のリンクを設定していただくことで、
nakamura様の環境でもご利用可能ですので、是非お試しいただければと思います。
ご質問いただきありがとうございました。
今後ともよろしくお願い致します。
やはりHTMLポートレットを書いていくしかないようですね。
オンラインデモの話は初耳で、参考になります。
ありがとうございました。
自社で上記の様なポータルを作成したく、参考にさせて頂きながら進めているんですが、
kintoneリソース用のアプリとポータルの連携が出来ずに困っております。
確認する項目や設定箇所をご教授頂けますでしょうか？
copin様
お世話になっております。cybozu developer network運営事務局です。
ご質問いただいている件ですが、連携用JavaScriptファイルでエラーが出ているということでしょうか？
確認のため、発生している現象やエラー内容について教えていただけますでしょうか。
お手数をおかけいたしますが、よろしくお願いいたします。
ご支援ありがとうございます。
Garoonのポートレットとポータルは、上記の画像と同様に表示出来ましたが、
kintoneリソース用のアプリに入力したものが、Garoonポータルに反映されないという現象です。
エラー等は特に画面上には表示されてはおりません。
どこか設定漏れやミスかとは思いますが、見当がつきません･･･｡
初心者なのでで申し訳ございませんが、詳しくご教授頂ければ幸いです。
宜しくお願い致します。
copin様
お世話になっております。cybozu developer network運営事務局です。
エラーの確認ついて説明が不足しており、申し訳ございません。
コンソールでエラーの有無をご確認いただけますでしょうか。コンソールにエラーが出ている場合にはメッセージに従って確認ができます。
参考：動かない？そんな時はデバッグをしてみよう！入門編
エラーの有無がわからない段階で確認するとしたら、以下の2点が考えれます。
よろしくお願いいたします。
丁寧なご説明ありがとうございます。
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.
copin様
cybozu developer network運営事務局です。
何度もお試しいただき、恐縮です。
MIMEtypeのエラーのようですので、こちらの回答を参考にGaroonにMIMEタイプを追加してみていただけますでしょうか。
よろしくお願いいたします。
GaroonにMIMEタイプを追加にて解決致しました！
ご支援ありがとうございました。
続けての質問で申し訳ありません、
Garoonのポータルに表示されたKintoneの情報のリンクに飛ぶ際に、
別窓で表示させるには何処にどのような記述を追加すれば宜しいでしょうか？
上にあるGaroonポータルの画像で言えば、「物品購入申請」や「業務交通費精算」をクリックした際に、
別窓で表示させたい場合という事です。
フッター部分の「座席表」等のリンクは、target="_blank"の追記にて別窓表示出来ました。
ご教授宜しくお願い致します。
copin様
cybozu developer network運営事務局です。
画像リンクを別窓で表示するためには、
kintGrIntegration.js の37行目部分、
var $linkDiv = $("<a></a>", {href: LINK}); の要素に『target: _brank』を追記して
var$linkDiv = $("<a></a>", {href: LINK, target: "_brank"});
と記述すれば別窓でリンクが開きます。
上記記述追記で別窓でリンク開きました！
アドバイスありがとうございました。
Google Chromeにて
GaroonPortlet.html
をインストールしようとすると別ページに遷移して文字化けした画面が表示されます。
現在では配信サービスが停止しているのか、あるいは私側の設定のミスであるのか、
ご教授頂いてもよろしいでしょうか。
teranaka様
お世話になっております。
cybozu developer network 事務局です。
「GaroonPortlet.html」ですが、
右クリックをして、「名前をつけてリンク先を保存」でファイルをダウンロードできます。
説明が分かりづらく、お手数おかけいたしました。
よろしくお願いいたします。
cybozu developer network 事務局 担当者様
お世話になっております。
ご回答いただき、ありがとうございました。
勉強不足で申し訳ございません、対応できました。
cybozu developer network 事務局 ご担当者様
お世話になっております。
kintoneのアカウントを持たず、Garoonのみで上記のポータルを使用したいと思っております。
2017/04/25にコメントされている
「「[手続き]社内手続き」HTMLポートレットの詳細画面」を参照したいのですが、
既に削除されているようなので、再度掲載していただくことは可能でしょうか？
何卒よろしくお願い申し上げます。
katsumata様
HTMLポートレットの設定画面のURLに誤りがありました。お手数をかけまして申し訳ございません。
正しいURLは下記になります。よろしくお願いいたします。
https://onlinedemo2.cybozu.info/scripts/garoon/grn.exe/portal/system/html_portlet_view?plid=168