ガルーンポータル活用Tips #3「電光掲示板ポータル(kintone連携編)」
に則り、作成し動作までは確認したのですが、これを実装すると「ポータルメニュー」が
開かなくなってしまいます。
上に見えない何かが被ってるのかと思いましたが、click自体は出来るので別の理由の様です。
JavaScript / CSSによるカスタマイズのbulletinsignage.jsを削除すると「ポータルメニュー」が
動作するようになるため、このあたりに原因がありそうなのですがよくわかりません。
ちなみにコードはこのようになっています(一部ダミーです)
(($) => {
‘use strict’;
// 情報を取得するアプリを設定する
const APPID = アプリ番号三桁;
const APPNAME = ‘お知らせ’;
const TITLECODE = ‘title’;
const CONTENTCODE = ‘content’;
const VIEWID = 一覧の番号;
// generate randum numbers
const generateRandomx = (count) => {
const generated = ;
let generatedCount = generated.length;
for (let i = 0; i < count; i++) {
let candidate = Math.floor(Math.random() * count);
for (let j = 0; j < generatedCount; j++) {
if (candidate === generated[j]) {
candidate = Math.floor(Math.random() * count);
j = -1;
}
}
generated[i] = candidate;
generatedCount++;
}
return generated;
};
// HTML作成する
const makeSignageHtml = (records) => {
let text = ‘【’ + APPNAME + ‘】’;
const randomArray = generateRandomx(records.length);
if (records.length > 0) {
for (let i = 0; i < records.length; i++) {
text += records[randomArray[i]][TITLECODE].value + ’ - ‘;
text += records[randomArray[i]][CONTENTCODE].value;
if (i !== records.length - 1) {
text += ’ / ‘;
}
}
}
const url = ‘/k/’ + APPID + ‘/?view=’ + VIEWID;
const div = document.createElement(‘div’);
div.className = ‘marquee ledText01’;
const a = document.createElement(‘a’);
a.href = url;
a.target = ‘_blank’;
const p = document.createElement(‘p’);
p.textContent = text;
a.appendChild(div);
div.appendChild(p);
return a;
};
// HTML出力する
const showSignage = (records) => {
if (records.length > 0) {
const signageElement = document.getElementById(‘signage’);
signageElement.appendChild(makeSignageHtml(records));
const marqueeElement = document.querySelector(’.marquee p’);
$(marqueeElement).marquee(); // Keeping the marquee jQuery plugin
}
};
// 対象のアプリから、対象のレコードを取得する
const fetchApprovingRecords = () => {
const path = ‘/k/v1/records.json’;
const query = ‘ステータス = “公開” and 公開開始日 <= TODAY() and 公開終了日 >= TODAY() order by 更新日時’;
const pathWithQuery = ${path}?app=${APPID}&query=${encodeURIComponent(query)}&fields[0]=${encodeURIComponent('$id')}&fields[1]=${encodeURIComponent('title')}&fields[2]=${encodeURIComponent('content')}
;
return fetch(pathWithQuery, {
method: 'GET',
headers: {
'X-Requested-With': 'XMLHttpRequest'
}
}).then(response => {
return response.json();
}).then(json => {
return json.records;
});
};
fetchApprovingRecords().then(records => {
// 電光掲示板風のテロップを表示する
showSignage(records);
});
})(jQuery.noConflict(true));
もし原因が分かればご教示ください