カテゴリー内の他の記事

ガルーンポータル活用 Tips #5 社内報ポータル

中堅・大規模組織向けグループウェア「サイボウズ ガルーン」のポータル活用企画第5弾。一歩先の社内報の作り方をご紹介します。

<こんなときに便利です>

  • 社内の各部署の最新情報をまとめて表示したいが、見た目もできるだけかっこよくしたい!
  • 社内報をもっと作業コストをかけずに作りたい!

こちらのポータルで簡単に実現できます。

※このポートレットはIEでは動作しません。それ以外のブラウザでご利用ください。

完成イメージ

 
HTMLポートレットを使った社内報ポータルです。下の方だけ見ると、ガルーンポータルと気づかないかもしれないくらいのメイクアップですね。
各記事の内容は、Garoonの掲示板や、kintoneアプリから抽出しているので、ポータルの管理権限がない人でも直接記事を書くことができます。
 

ポータルの構成

今回は次の構成で作りました。

  • 上段のメイン記事、下段のサブ記事1 :ガルーン掲示板の本文

  • 下段のサブ記事中央  :ガルーン掲示板のフォローコメント

  • 下段のサブ記事右  :kintoneアプリ

 

各部の記事をまとめて掲載するポートレットの作成

データ取得元の準備 

データを取得したいガルーンの掲示板や、kintoneアプリを用意します。

データ取得プログラムの修正時のために必要なIDを控えます。

使いたい掲示板のタイトルをクリックした時に、URL内に含まれるaid(掲示ID)を確認しておきます。

(例:aid →〇〇〇の時 https://example.cybozu.com/g/bulletin/view.csp?cid=XXX&aid=〇〇〇)

kintoneアプリをURL内に含まれるアプリIDをブラウザで確認しておきます。

(例:アプリID →△△△の時 https://example.cybozu.com/k/〇〇〇)

kintoneアプリのフィールドは以下のように配置していきます。

フィールド名 フィールドコード フィールドタイプ 備考
作成日時 作成日時 作成日時 自動入力
タイトル title 文字列(1行)  
内容 content リッチエディター  


リソースの準備

今回使う画像ファイルおよびライブラリファイル (magagine.css)は以下からダウンロードできます。

garoon-portal5.zip

ファイルの説明

ファイル名 説明 修正が必要か 配置先
magagine.css レイアウト調整用ファイル 不要  ファイル管理
bg_line01.png 見出しの背景装飾用画像 不要  ファイル管理


ガルーンの「ファイル管理」を使って次の手順でリソースの準備をしていきます。

(1)カスタマイズファイルとして、「house_magagine.js」を作成します(文字コードは「UTF-8」で保存してください)。
このとき以下を書き換えます。

  • 13行目:メインに表示する掲示板のID(aid)
  • 14行目:サブに表示する掲示板のID(aid)
  • 15行目:フォローコメントを表示する掲示板のID(aid)
  • 16行目:「データ取得元の準備」で確認したitnoneアプリID

ポイント

  • 掲示板本文は getArticle()で、掲示板フォローコメントは getNewestFollow()で、kintone アプリは getKintoneData()でそれ ぞれ最新のデータを取得しています。

(2) ガルーンの「ファイル管理」で今回のポートレット用にフォルダを作成します。

(3) フォルダを選択した状態で「ファイルを追加する」をクリックし、以下のファイルを追加します。

  • house_magagine.js (修正済み)
  • bg_line01.png

(4) ファイルのタイトルをクリックした時に、URL内に含まれるhid(フォルダID),fid(ファイルID)を確認しておきます。

png ファイルの ID は css ファイルの修正時に、js ファイルの ID はポートレット作成時に使います。(例: hid →△△△,fid →◇◇◇の 時 https://example.cybozu.com/g/cabinet/view.csp?hid=△△△&fid=◇◇◇)

(5) 「magazine.css」を作成します(文字コードは「UTF-8」で保存してください)。ここで、67 行目を(4)で確認した ID に書き換えます。

(6) 修正した magazine.css もファイル管理に追加します。同様に ID を確認しておきます。

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

今回使うポートレットを作成していきます。

11, 14 行目の「house_magazine.js」「magagine.css」のダウンロードリンクをリソースの準備で生成したリンクにそれぞれ書き換えます。

 

新規にHTMLポートレットを作成し、「ポートレットの内容」に記述します。 

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

動作確認

  • 上段のメイン記事 :ガルーン掲示板の本文と、ポートレットの内容が一致しているか確認します。
  • 下段のサブ記事1  :同上
  • 下段のサブ記事2  :ガルーン掲示板の最新のフォローと、ポートレットの内容が一致しているか確認します。
  • 下段のサブ記事3  :kintone アプリにレコードを追加し、最新レコードとポートレットの内容が一致しているか確認します。

おわりに

ガルーン掲示板の本文、ガルーン掲示板のフォロー、kintoneアプリと、各種データを取得する総まとめのようなポートレットを作りました。ご参考ください。今後もガルーンポータル活用シリーズは続きます。

更新履歴

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

シリーズの他の回を見る

 

 

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

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

Avatar
chiho

はじめまして。
この例を始めとする、Garoon掲示板と連携するHTMLポートレットには、
「IE、Edgeでは動作しません」という注意書きがあるようですが、
理由対処法をお教えいただけないでしょうか。(詳細だと大変助かります)

以上、よろしくお願いいたします。

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

chiho 様

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

返事が大変遅くなりまして申し訳ございませんでした。

こちらで確認したところ、IEだけ正しく表示できないようです。記事を修正しました。
IEで表示できない理由としては、このサンプルソースコードにいくつかIEで対応していないメソッドやイベントを使っている為です。

IEでも表示させるには、次のソースコードを書き換える必要があります。

「house_magagine.js」の

1.85行目のgetArticle()と115行目のgetNewestFollow()中のXMLHTTPにリクエストヘッダーを指定します。

  例:xhrForArticle.setRequestHeader("Content-Type","text/xml"); を追加

2.104行目と132行目の.onloadはIE対応していない為、別のイベントを使います
  例:
 xhrForArticle.onload  ->   xhrForArticle.onreadystatechange

3.105行目と133行目で返ってくるレスポンスに対してDOM操作するにはレスポンスをDOMParser()で変換します。

  例:var parser = new DOMParser();
    var xmlDoc = parser.parseFromString(xhrForArticle.responseText, "application/xml");

4.168、169、194行目の.childrenはIEの不具合で使えない為、
 代替用のものを使うか.childrenを使えるように処理を追加するか検討いただければと思います

 

また、こちらは記事に対するフィードバックの欄となっておりますため、
技術関連のご質問は、大変お手数ですがcybozu developer コミュニティにお願いできますでしょうか。

コミュニティのほうが多くの方がご覧になっているため、アドバイスも得やすいかと思います

cybozu Development teamにより編集されました
サインインしてコメントを残してください。