何を実現したいのかを書きましょう
開発は素人で、見よう見まねでポータルを変更したいと思っています。
Kintone Portal Designerを使って、「advanced-3tabs」を５つのタブを設定しています。
また、「classic」も併用し、タブ毎に異なるアプリグループを表示させたいのですが、javascriptの書き方（タブ毎にレコードIDを設定するif構文の書き方）が分かりません。
そもそも、javascliptなのか、HTMLなのか、CSSなのかも理解しておりません。
どなたか、伝授ください。
発生した問題やエラーメッセージを具体的に書きましょう
タブ毎に表示させる 「 ポータルのアプリ管理」で設定しているレコード番号の取得方法
実行したコードをコピー＆ペーストしましょう
var buttonEls = Array.prototype.slice.call(document.querySelectorAll('.advanced-tab'));
var tabPanelEls = Array.prototype.slice.call(document.querySelectorAll('.advanced-panel-contents'));
var removeAllButtonActive = function () {
buttonEls.forEach(function (buttonEl) {
buttonEl.classList.remove('advanced-tab--active');
});
};
var removeAllButtonExpanded = function () {
buttonEls.forEach(function (buttonEl) {
buttonEl.setAttribute('aria-expanded', 'false');
});
};
var removeAllTabPanelActive = function () {
tabPanelEls.forEach(function (tabPanelEl) {
tabPanelEl.classList.remove('advanced-panel-contents--active');
});
};
var getTabNumber = function (buttonEl) {
var number = 0;
for (; number < buttonEls.length; number++) {
if (buttonEls[number] === buttonEl) {
break;
}
}
return number;
};
var handleClick = function (evt) {
removeAllButtonActive();
evt.target.classList.add('advanced-tab--active');
removeAllButtonExpanded();
evt.target.setAttribute('aria-expanded', 'true');
var tabNumber = getTabNumber(evt.target);
setCookie('portalTabNumber', tabNumber); //←追加：最後に開いていたボタンを次の初期画面にする
removeAllTabPanelActive();
tabPanelEls[tabNumber].classList.add('advanced-panel-contents--active');
};
buttonEls.forEach(function (buttonEl) {
buttonEl.addEventListener('click', handleClick);
});
//↓追加：40行の終了
var setCookie = function (key, value) {
document.cookie = key + '=' + value;
}
var getCookie = function (key) {
var cookie = document.cookie.split(';').map(function(cookie){
return cookie.split('=');
}).find(function(cookie){
return cookie[0] === key;
});
return cookie ? cookie[1] : null;
};
var defaultTabNumber = getCookie('portalTabNumber') || 0;
removeAllButtonActive();
buttonEls[defaultTabNumber].classList.add('advanced-tab--active');
removeAllButtonExpanded();
buttonEls[defaultTabNumber].setAttribute('aria-expanded', 'true');
removeAllTabPanelActive();
tabPanelEls[defaultTabNumber].classList.add('advanced-panel-contents--active');
var getCookie = function (key) {
var cookie = document.cookie.split(';').map(function(cookie){
return cookie.split('=');
}).find(function(cookie){
return cookie[0] === key;
});
return cookie ? cookie[1] : null;
};
(function () {
/**
* アプリIDをここに入力します
*/
const CONFIG_APP_ID = "732";
/**
* レコードIDをここに入力します
*/
const CONFIG_RECORD_ID = "1";
const JS_RENDER_URL = "https://js.cybozu.com/jsrender/1.0.7/jsrender.min.js";
const DEFAULT_SECTION_URL = "https://static.cybozu.com/contents/k/image/argo/uiparts/widget/apps_56.png";
const DEFAULT_LINK_URL = "https://static.cybozu.com/contents/k/image/icon/app/appTableBlue.png";
const loadScript = function (src) {
return new Promise(function (resolve) {
const scriptEl = document.createElement("script");
scriptEl.src = src;
document.body.appendChild(scriptEl);
scriptEl.onload = resolve;
});
}
const assertConfig = function () {
if (!CONFIG_APP_ID || !CONFIG_RECORD_ID) {
const containerEl = document.querySelector(".warning-wrapper");
if (kintone.getLoginUser().language === "ja") {
renderTemplate(containerEl, "warningTemplate-jp", null);
} else {
renderTemplate(containerEl, "warningTemplate-en", null);
}
throw Error("invalid CONFIG_APP_ID or CONFIG_RECORD_ID");
}
};
const assertJsRender = function () {
if (!window.jsrender) {
throw Error("JsRender cannot be loaded.");
}
};
const htmlStringToElement = function (htmlString) {
const temp = document.createElement("div");
temp.innerHTML = htmlString;
return temp.firstElementChild;
};
const getTemplateById = function (templateId) {
assertJsRender();
const $ = window.jsrender;
const markup = document.getElementById(templateId).innerHTML;
return $.templates(markup);
};
const generateElementFromTemplate = function (templateId, model) {
const htmlString = getTemplateById(templateId).render(model);
return htmlStringToElement(htmlString);
};
const renderTemplate = function (containerEl, templateId, templateModel) {
const element = generateElementFromTemplate(templateId, templateModel);
containerEl.appendChild(element);
return element;
};
//----------------------------------------------------------------------------
// fetch
const fetchKintoneRecord = function (appId, recordId) {
return kintone.api(kintone.api.url("/k/v1/record", true), "GET", { app: appId, id: recordId });
};
const fetchConfig = function (configAppId, configRecordId) {
return fetchKintoneRecord(CONFIG_APP_ID, CONFIG_RECORD_ID);
};
//----------------------------------------------------------------------------
// model
const filterByPosition = function (json, position) {
return json.record.sections.value.filter(function (jsonSection) {
return jsonSection.value.position.value === position;
});
};
const addSectionIconFileKey = function (jsonSection) {
const section = jsonSection.value;
const sectionIconUrl = jsonSection.value.sectionIcon.value;
section.sectionIconFileKey = sectionIconUrl.length !== 0 ? sectionIconUrl[0].fileKey : "";
return section;
};
const addLinkIconFileKey = function (jsonLink) {
const link = jsonLink.value;
const linkIconUrl = jsonLink.value.linkIconUrl.value;
link.linkIconFileKey = linkIconUrl.length !== 0 ? linkIconUrl[0].fileKey : "";
return link;
};
const convertToLinkModels = function (jsonLinks, sectionId) {
const filterBySectionId = function (jsonLink) {
return jsonLink.value.sectionIdRef.value === sectionId;
}
return jsonLinks.filter(filterBySectionId).map(addLinkIconFileKey);
};
const convertToModelList = function (jsonSections, jsonLinks) {
return jsonSections.map(function (jsonSection) {
const sectionId = jsonSection.value.sectionId.value;
const section = addSectionIconFileKey(jsonSection);
const links = convertToLinkModels(jsonLinks, sectionId);
return { section: section, links: links };
});
};
const convertToModel = function (json) {
const jsonLeftSection = filterByPosition(json, "left");
const jsonRightSection = filterByPosition(json, "right");
const jsonLinks = json.record.links.value;
return {
"left": convertToModelList(jsonLeftSection, jsonLinks),
"right": convertToModelList(jsonRightSection, jsonLinks)
};
};
//----------------------------------------------------------------------------
// render
const renderSections = function (modelSections, containerEl) {
modelSections.forEach(function (sectionModel) {
renderTemplate(containerEl, "sectionTemplate", sectionModel);
});
};
const render = function (model) {
renderSections(model.left, document.querySelector(".designportal-left"));
renderSections(model.right, document.querySelector(".designportal-right"));
};
const generateSrcFromFileKey = function (filekey) {
return new Promise(function (resolve) {
const apiurl = "/k/v1/file.json?fileKey=" + filekey;
const xhr = new XMLHttpRequest();
xhr.open("GET", apiurl, true);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhr.responseType = "blob";
xhr.onload = function () {
const blob = new Blob([xhr.response]);
const url = window.URL || window.webkitURL;
const src = url.createObjectURL(blob);
resolve(src);
};
xhr.send();
});
}
const loadImage = function (iconEl, defaultIconUrl) {
const fileKey = iconEl.getAttribute("data-fileKey");
if (!fileKey) {
iconEl.src = defaultIconUrl;
return;
}
return generateSrcFromFileKey(fileKey).then(function (src) {
iconEl.src = src;
});
};
const loadSectionImages = function() {
const iconEls = document.querySelectorAll(".classic-list_section");
Array.prototype.forEach.call(iconEls, function (iconEl) {
loadImage(iconEl, DEFAULT_SECTION_URL);
});
};
const loadLinkImages = function() {
const iconEls = document.querySelectorAll(".classic-list_icon");
Array.prototype.forEach.call(iconEls, function (iconEl) {
loadImage(iconEl, DEFAULT_LINK_URL);
});
};
loadScript(JS_RENDER_URL)
.then(assertConfig)
.then(fetchConfig)
.then(convertToModel)
.then(render)
.then(function() {
loadSectionImages();
loadLinkImages();
});
})();