2019年7月のアップデートでポータルカスタマイズのAPIが実装された為、アプリだけではなくポータル画面でも自由にカスタマイズができるようになりました。
詳しくはdeveloper networkの記事を参照の事。
上記リンクにカスタマイズ例がいくつか記載されているように、よく使うアプリへのリンクやグラフの表示が行えるようになります。
わざわざアプリを開かなくてもポータルで必要な情報が確認できるので、非常に便利になるかと思います。
しかし、カスタマイズしたいのはポータルではなくスペースなんだけど・・・。
という方もいるのではないでしょうか。
私もその一人だったわけですが、スペースのカスタマイズがやや面倒だったのでシェアします。
やりたいこと
実際の動き
説明
スペースのポータルに表示される「お知らせ」ウィジェット（下図の赤枠内）に独自のカスタマイズを行う。
※ウィジェットが表示されていない場合、スペースの設定から「スペースのポータルと複数のスレッドを使用する」をチェックする。
※当然ながらAPIが提供されていない為、DOM操作で実現する。（アップデート時の不具合に注意）
全体JavaScriptでカスタマイズする
コード
実際に適用するコードは以下の通り。
jQuery.noConflict();
(function($) {
const SEARCH_LIMIT = 10; // 対象要素の検索回数
const SEARCH_INTERVAL = 100; // 検索インターバル（ms）
const TARGET_HASH = "#/space/96"; // カスタマイズ対象スペースのハッシュ
const WIDGET_AREA = "gaia-argoui-space-spacebodywidget"; // ウィジェットエリアのCSSクラス名
const WIDGET_BODY = "gaia-argoui-widget-body"; // ウィジェットのボディのCSSクラス名
var count = 0; // 検索回数
function setContents(id) {
count++;
// 上限まで検索しても見つからない場合、終了
if (count > SEARCH_LIMIT) {
clearInterval(id);
}
// 対象要素が見つかったらカスタマイズ実行
if ($("." + WIDGET_AREA + " ." + WIDGET_BODY).length > 0) {
$("." + WIDGET_AREA + " ." + WIDGET_BODY).html(
"全体JavaScriptからカスタマイズしてます。"
);
clearInterval(id);
}
}
function searchTargetElement() {
count = 0;
var set_interval_id;
set_interval_id = setInterval(function() {
setContents(set_interval_id)
}, SEARCH_INTERVAL);
}
window.addEventListener("load", function(e) {
if (this.location.hash === TARGET_HASH) {
searchTargetElement();
}
});
window.addEventListener("hashchange", function(e) {
if (this.location.hash === TARGET_HASH) {
searchTargetElement();
}
});
})(jQuery);
ポイント
過去何回かブログで書いていますが、setInterval()で対象要素が描画されるまで待つ、という所。
当初は単純に「全体JSで指定のスペースが表示されたら処理を実施」で問題ないかと想定していましたが、これでは期待したとおりに動きませんでした。
具体的には、ポータル⇒スペースに画面遷移した時に全体JSが発火しない、ということ。
これは恐らく、ポータルとスペース部分がSPA(Single Page Application)で実装されているからではないか・・・と推測。
SPAでは画面表示時に全てのJSを読み込む為、ポータル⇒スペースに画面遷移した時にJSが読み込まれず、発火しなかった・・・と考えています。
上記を回避する為、loadのイベントとhashchangeのイベントで対象要素を検索しています。
setInterval()についての説明は下記を参考にしました。
参考：setInterval()で要素が現れるまで待つ（Qiita）
おわりに
こねくり回せばできない事はなさそうですね（それが良いかは置いておいて・・・）
今度は実際にゴリゴリカスタマイズ（グラフ、表の表示とか）してみようかな。
