kintoneのポータルは、管理画面でエリアの表示と非表示を切り替えられますが、並び順の変更や部署ごとのお知らせの出し分けはJavaScriptで組む領域です。2026年10月時点では2枚目以降のポータルをウィジェットで作る機能もあり、JavaScriptが効く画面と効かない画面がはっきり分かれています。この記事では、ポータル表示イベントportal.showと上側の要素を取るAPIによるお知らせ枠の実装、スペースのポータルを対象スペースだけ拡張する方法、スペース本文の更新API、Portal Designer終了後の扱いまでを、cybozu developer networkとkintoneヘルプの一次情報とコピーして動かせるコードで解説します。
まとめ｜kintoneポータルは標準設定とJavaScriptの境界を先に決める
ポータルのカスタマイズは、最初に「標準設定で済むか」「2枚目以降のポータルのウィジェットで済むか」「JavaScriptが要るか」を切り分けるのが近道です。JavaScriptを使う場合は、kintone全体のカスタマイズに登録したファイルの中でportal.showを受け、kintone.portal.getContentSpaceElement()が返すヘッダー下の領域に要素を足す構成が基本になります。
注意したいのは、このイベントが1枚目のポータルでしか発生しないことです。お知らせ掲示板は全ユーザーへ同じ内容を出す仕組みなので、部署別の告知はお知らせ用アプリとJavaScriptの組み合わせで作ります。スペースはspace.portal.showとevent.spaceIdで対象を絞ります。設計を固めたうえで、管理者だけに適用する設定で動作を確かめてから全ユーザーへ広げてください。
kintoneのポータルを触る前に標準設定とJavaScriptの境界を確認する
ポータルの見た目に関する要望は、管理画面の設定で解決するものと、コードが要るものが混ざって届きます。kintone自体の機能やコース差から確認したい段階なら、親ガイドのkintoneでできること・料金・内製判断の解説で前提を揃えてから読み進めると迷いません。
1枚目のポータルで設定できる5エリアの表示・非表示と変えられない範囲
ポータルの設定／変更のヘルプによると、1枚目のポータルで切り替えられるのは「お知らせ掲示板」「通知」「未処理」「スペース」「アプリ」の5エリアの表示・非表示と、ポータル名、5MBまでのカバー画像です。設定できるのはkintoneシステム管理権限を持つユーザーかcybozu.com共通管理者に限られます。
一方で、各エリアの表示位置は変更できず、設定はユーザーごとではなくポータル全体に効きます。同じヘルプは、位置の変更やユーザーごとの出し分けをしたい場合、該当エリアを非表示にしたうえでJavaScriptのAPIでカスタマイズする方法を案内しています。つまり「並び替えたい」「人によって見せる内容を変えたい」という要望が出た時点で、コードの出番です。
なお、アプリの一覧画面に色分けやボタンを足す要望はポータルとは別の画面で、使うイベントも異なります。そちらはkintone一覧カスタマイズの実装手順で扱っています。
2枚目以降のポータルはウィジェットで組みportal.showが発生しない
2枚目以降のポータルを追加するヘルプでは、［ポータル管理］画面からポータルを作り、ウィジェットをドラッグして配置する手順が説明されています。作成できる枚数はスタンダードコースで3枚、ワイドコースで10枚（2026年8月の定期アップデート以降）です。ライトコースでは作れず、追加したポータルはPC版でのみ表示され、ゲストユーザーには出ません。
配置できるのは、ウィジェットの一覧にあるリッチテキスト、アプリ、指定したアプリ、スペース、指定したスペース、レコード一覧、グラフ、未処理、通知の9種類です。部署向けに「よく使うアプリとグラフを並べたい」程度の要件なら、コードを書かずにこちらで足ります。
実装者が押さえておくべきは、ポータル画面を表示した後のイベントのリファレンスに「2枚目以降のポータル画面では発生しない」と明記されている点です。上側の要素を取るAPIも2枚目以降ではnullを返します。JavaScriptで手を入れられるのは1枚目のポータルだけ、と割り切って設計してください。
kintone全体のカスタマイズへ登録する手順と適用範囲の3つの選択肢
ポータル用のJavaScriptは、アプリではなくkintone全体のカスタマイズに登録します。kintone全体のカスタマイズのヘルプに沿うと、手順は次のとおりです。
- ［kintoneシステム管理］画面を開き、［JavaScript / CSSでカスタマイズ］をクリックする
- 適用範囲を「すべてのユーザーに適用」「kintoneのシステム管理者だけに適用」「適用しない」から選ぶ
- PC用・モバイル用それぞれに「URL指定で追加」か「アップロードして追加」でファイルを取り込む
- 画面左上の［保存］をクリックする
ファイルは各30個まで取り込めて、上から順に読み込まれます。アプリ個別のJavaScript・CSS・プラグインより先に読み込まれ、ゲストユーザーには適用範囲にかかわらず反映されません。ライトコースではJavaScript／CSSのカスタマイズ自体が使えないため、ポータルを作り込む前提ならスタンダードコース以上が条件です。
ポータル上部の部署別お知らせ表示に使うイベントと要素取得APIの実装手順
ポータルで最も依頼が多いのは「全社向けと自部署向けのお知らせだけを上部に出したい」という要件です。ここでは、お知らせを管理するアプリを1つ用意し、ポータル表示時に掲載期間内のレコードを取得して並べる実装を作ります。
ポータル表示イベントの発火条件と上側要素が返す位置とnullの条件
portal.show（モバイルはmobile.portal.show）は、表示対象に設定されたウィジェットがすべて描画された後に発生し、Promiseに対応しています。イベントオブジェクトのプロパティはtypeだけで、アプリのイベントのようにレコード情報は持ちません。
ポータルの上側の要素を取得するAPIは、PC・モバイルともポータルのヘッダーとコンテンツの間の要素を返します。nullになるのは、ゲストユーザーが実行したとき、2枚目以降のポータル、対応画面以外で実行したときの3通りです。kintone全体のファイルはレコード画面やスレッドでも読み込まれるため、イベントの外でこのAPIを呼ばず、必ずportal.showの中で取得してnullを判定します。
掲載期間と所属組織でお知らせを絞り込みポータル上部に並べるコード
お知らせ用アプリには、文字列（1行）の「件名」、日付の「掲載開始」「掲載終了」、ドロップダウンの「掲載範囲」（全社／部署）、組織選択の「対象組織」を用意します。フィールドコードとアプリIDは自分の環境に合わせて置き換えてください。
(() => {
'use strict';
const NOTICE_APP_ID = 123; // お知らせ用アプリのアプリID
const BOX_ID = 'issoh-portal-notice';
kintone.events.on('portal.show', async (event) => {
const space = kintone.portal.getContentSpaceElement();
if (space === null || document.getElementById(BOX_ID) !== null) {
return event; // ゲスト・2枚目以降のポータル・二重表示を除外
}
const query = '掲載開始 <= TODAY() and 掲載終了 >= TODAY()'
+ ' and (掲載範囲 in ("全社") or 対象組織 in (PRIMARY_ORGANIZATION()))'
+ ' order by 掲載開始 desc limit 5';
const box = document.createElement('div');
box.id = BOX_ID;
try {
const resp = await kintone.api(kintone.api.url('/k/v1/records.json', true), 'GET', {
app: NOTICE_APP_ID,
query,
fields: ['$id', '件名', '掲載開始']
});
if (resp.records.length === 0) {
box.textContent = '掲載中のお知らせはありません';
}
resp.records.forEach((record) => {
const link = document.createElement('a');
link.href = `/k/${NOTICE_APP_ID}/show#record=${record.$id.value}`;
link.textContent = `${record['掲載開始'].value} ${record['件名'].value}`; // innerHTMLは使わない
const row = document.createElement('div');
row.appendChild(link);
box.appendChild(row);
});
} catch (e) {
console.error(e); // アプリの閲覧権限が無いユーザーではここに来る
return event;
}
space.appendChild(box);
return event;
});
})();絞り込みはクエリの書き方のリファレンスにある関数で組んでいます。TODAY()は日付フィールドで使え、PRIMARY_ORGANIZATION()は組織選択フィールドでログインユーザーの優先する組織に一致させる関数です。優先する組織が未設定のユーザーではその条件が無視されるので、運用開始前にユーザー情報の優先組織を埋めておきます。
kintone.api()はログイン中のユーザーとして実行されるため、お知らせ用アプリの閲覧権限が無い人には取得が通りません。全社員に見せる前提なら、アプリのアクセス権で「Everyone」に閲覧を許可し、編集は総務などの担当組織に絞っておくと運用が安定します。
お知らせ掲示板とお知らせ用アプリを掲載対象・編集者・掲載期間の条件で使い分ける判断基準
標準のお知らせ掲示板で済む場面も多くあります。お知らせ掲示板の編集のヘルプによると、編集できるのはkintoneシステム管理権限を持つユーザーかcybozu.com共通管理者のみで、宛先は指定できず、更新しても通知は飛びません。掲示した内容はkintoneの全ユーザーのポータルに表示されます。
| 比較項目 | お知らせ掲示板（標準） | お知らせ用アプリ＋JavaScript |
|---|---|---|
| 表示対象 | 全ユーザー共通 | 組織・掲載範囲で出し分け |
| 編集者 | システム管理者のみ | アプリのアクセス権で指定 |
| 掲載期間 | 手で書き換え | 日付フィールドで自動切替 |
| 保守 | 不要 | コードの管理が必要 |
判断は単純で、全社に同じ内容を出し、更新者がシステム管理者1人で回るなら掲示板のままにします。部署ごとに内容が違う、総務など複数の担当者が書き込む、掲載終了の消し忘れが起きている、のいずれかに当たったらアプリ化に進みます。掲示板とアプリの両方を出すと告知の置き場所が2つになるので、アプリ化したら掲示板エリアは標準設定で非表示にしてください。
スペースのポータルをspace.portal.showで対象スペースだけ拡張する手順
部署やプロジェクトごとのスペースに、よく使うアプリへの入口や手順書へのリンクを置きたいという要望には、スペースのポータル用のイベントを使います。
space.portal.showの発生条件とスレッド設定・ゲストスペースの制約
スペースのポータル画面を表示した後のイベントは、PCがspace.portal.show、モバイルがmobile.space.portal.showです。イベントオブジェクトはspaceId（文字列）とtypeを持ち、Promiseにも対応しています。
発生するのは「スペースのポータルと複数のスレッドを使用する」が有効なスペースだけで、ゲストスペースのポータルでは発生しません。スペースの上側の要素を取得するAPIも同じ条件で、ゲストスペースやゲストユーザーではnullを返します。シングルスレッドで作った古いスペースが対象に混ざっていると「一部のスペースでだけ動かない」という問い合わせになるので、最初に設定を確認しておきます。
event.spaceIdで対象スペースを絞り業務アプリへの入口を置くコード
kintone全体のファイルは全スペースで読み込まれます。冒頭でevent.spaceIdを比較し、対象外なら何もせず返すのが定石です。spaceIdは文字列なので、比較する値も文字列で持ちます。
(() => {
'use strict';
const TARGET_SPACE_IDS = ['12', '15']; // event.spaceIdは文字列
const NAV_ID = 'issoh-space-nav';
const LINKS = [
['日報を登録する', '/k/201/edit'],
['経費を申請する', '/k/202/edit']
];
kintone.events.on('space.portal.show', (event) => {
if (!TARGET_SPACE_IDS.includes(event.spaceId)) {
return event;
}
const el = kintone.space.portal.getContentSpaceElement();
if (el === null || document.getElementById(NAV_ID) !== null) {
return event;
}
const nav = document.createElement('div');
nav.id = NAV_ID;
LINKS.forEach(([label, href]) => {
const link = document.createElement('a');
link.href = href; // /k/アプリID/edit はレコード追加画面
link.textContent = label;
nav.appendChild(link);
});
el.appendChild(nav);
return event;
});
})();公式のスペースに出勤・退勤ボタンを置くTips（2025年7月版kintoneで動作確認）も同じ構造で、スペースIDの判定、上側の要素の取得、REST APIによるレコード登録を組み合わせています。ボタンからレコードを書き込む処理に広げる場合は、こちらのupsertの書き方が参考になります。
スペースの本文をREST APIで更新しお知らせを定期的に差し替える例
スペースのお知らせ欄にあたる本文は、スペースの本文を更新するAPI（PUT /k/v1/space/body.json）で書き換えられます。月初の締め日案内のように、決まった時期に同じ形式の告知を出す運用なら、手で編集するよりバッチから更新するほうが漏れません。
curl -X PUT 'https://example.cybozu.com/k/v1/space/body.json' \
-H 'X-Cybozu-Authorization: <ログイン名:パスワードをBase64にした値>' \
-H 'Content-Type: application/json' \
-d '{"id": 12, "body": "<b>11月の経費締め日</b>は25日です。"}'リファレンス上の条件は、スペース管理者の権限、パスワード認証かセッション認証であること、bodyがHTML文字列であることの3つです。APIトークンの記載は無いため、バッチ用に権限を絞った専用ユーザーを用意します。許可されていないタグや属性は保存時に削除され、HTMLで宛先を書いても通知は届きません。このAPIが更新できるのは複数スレッドのスペースの本文だけで、シングルスレッドのスペースではスレッドを更新する別のAPIを使います。
PCとモバイルの両方でkintoneのCSS変更に崩されない書き方
ポータルのカスタマイズは全社員が毎日開く画面に載るため、表示崩れの影響が一覧画面より広く出ます。PCとモバイルの扱いと、CSSの当て方を最初に決めておきます。
mobile.portal.showとモバイル用ファイルを別に登録する際の注意点
PC用に登録したファイルはモバイルでは読み込まれません。モバイルにも出したい場合は、kintone全体のカスタマイズのモバイル用にファイルを登録し、イベントをmobile.portal.show、要素取得をkintone.mobile.portal.getContentSpaceElement()に置き換えます。スペースも同様にmobile.space.portal.showとkintone.mobile.space.portal.getContentSpaceElement()の組です。
前述のとおり2枚目以降のポータルはPC版でしか表示されないので、モバイルの利用者が多い会社では、全社向けの告知を2枚目以降のポータルだけに置くと届かない人が出ます。全員に必ず届けたい告知は、1枚目のポータル上部かお知らせ掲示板に置く、という配置ルールにしておくと事故を防げます。
kintoneのCSSの影響とクラス名依存で表示が変わる失敗パターン
上側の要素を取得するAPIのリファレンスには、追加した要素がkintoneのCSSの影響を受け、アップデートで表示が変わる可能性があると注記されています。さらにkintoneコーディングガイドラインは、kintone内部のid・class属性やDOM構造が予告なく変わると明記しています。
よくある失敗は、開発者ツールで見つけた内部のclass名をセレクタにして、標準エリアを並べ替えたり非表示にしたりする書き方です。月例の定期メンテナンス後にポータル全体が崩れ、全社員から一斉に問い合わせが来る原因になります。エリアの非表示は標準設定で行い、CSSは自分で作った要素のidだけを対象にします。
#issoh-portal-notice {
margin: 16px 24px;
padding: 12px 16px;
border-left: 4px solid #1976d2;
background-color: #ffffff;
}
#issoh-portal-notice a {
display: inline-block;
line-height: 1.8;
}idにissoh-のような接頭辞を付けておけば、別の担当者が書いたカスタマイズや導入済みの製品とセレクタが衝突しにくくなります。
Kintone Portal Designer終了後のデザインを移すときの2つの選択肢
HTMLとCSSだけでポータルをデザインできたChrome拡張のKintone Portal Designerは、公式のポータルカスタマイズTipsで、2025年5月12日にセキュリティアップデートを含むすべての開発を終えたと案内されています。不具合や脆弱性が見つかっても修正されないため、これで作ったデザインを使い続けている環境は移行先を決めておく時期です。
移し方は2つです。部署別のアプリやグラフを並べる用途だったなら、2枚目以降のポータルのウィジェットへ置き換えるとコードが不要になります。1枚目のポータルの見た目を作り込んでいたなら、標準エリアを非表示にし、本記事のコードのように上側の要素へ自前の要素を足す形に書き直します。後者は全社員の画面に効くので、作り直しの工数と保守の担い手を先に確保してください。
ポータルのカスタマイズを自作で続けるかウィジェット移行・外注するかの判断基準
ポータルは1本のファイルが全社員の全画面に読み込まれる場所で、アプリの一覧カスタマイズより失敗時の影響範囲が広くなります。手段の全体像や費用相場から比べたい場合は、判断側のkintoneカスタマイズ・開発の手段と費用相場、内製外注の判断を併せて読むと位置づけが分かります。
全画面で読み込まれる全体カスタマイズの検証不足で起きる失敗パターン
JavaScript APIの共通仕様によると、kintone全体に取り込んだファイルはポータルだけでなく、レコード一覧・詳細・編集画面、スレッド、ピープル、メッセージ、検索画面などにも適用されます。イベントの外に処理を書いたり、即時関数で囲まずにグローバル変数を作ったりすると、ポータルとは無関係のアプリ画面で他のカスタマイズを壊すことがあります。
防ぎ方は3段階です。コードは即時関数で囲んでイベントの中だけで動かし、まず適用範囲を「kintoneのシステム管理者だけに適用」にして自分の画面で確かめ、問題が無ければ「すべてのユーザーに適用」へ切り替えます。本番とは別の検証環境を持てるなら、kintone開発者ライセンスで検証環境を分ける手順で用意してから試すほうが安全です。
自作を続ける条件とウィジェット移行・プラグイン化・外注へ切り替える目安
自作のJavaScriptで続けてよいのは、1枚目のポータル上部への追加が1〜2種類で、フィールドコードやスペースIDの差し替えが数分で済み、コードを読める担当者が社内に1人以上いる場合です。この条件なら、本記事のコードをkintone全体のカスタマイズに登録するだけで回ります。
要件の中身がアプリやグラフを並べることなら、コードを捨ててスタンダードコースの2枚目以降のポータルへ移すのが保守の軽い選択です。逆に、お知らせ用アプリに承認や掲載予約を足したい、複数のスペースで設定を変えたい、という方向に育ったら作り方を変えます。プラグインの入門チュートリアルにあるとおりプラグインはアプリで有効にする仕組みなので、ポータル側は全体カスタマイズのまま薄く保ち、お知らせ用アプリの側を設定画面付きのプラグインにする分担が現実的です。作り方はkintoneプラグイン開発のmanifest構成から配布までの手順で確認できます。社内に担い手がいない、またはポータルとスペースの要件が複数部署にまたがる場合は、一創のkintoneプラグイン開発で、既存カスタマイズの棚卸しから設計まで相談できます。
よくある質問
kintoneのポータルとスペースのカスタマイズについて、実装前によく出る疑問に答えます。
kintoneのポータルでエリアの並び順を変えられますか？
標準設定では変えられません。1枚目のポータルで設定できるのは5エリアの表示・非表示までで、表示位置は固定です。並びを変えたい場合は、該当エリアを非表示にして、portal.showの中で上側の要素へ必要な内容を自前で描画します。アプリやグラフを並べるだけなら、2枚目以降のポータルでウィジェットを好きな位置に配置する方法もあります。
お知らせ掲示板を部署ごとに出し分けられますか？
お知らせ掲示板は全ユーザーに同じ内容が表示され、宛先も指定できません。部署ごとに出し分けるには、お知らせ用のアプリを作り、組織選択フィールドとPRIMARY_ORGANIZATION()で絞り込んだレコードをポータル上部に表示するJavaScriptを組みます。各スペースの本文を部署向けの告知欄として使う方法も選択肢です。
ポータルのカスタマイズはゲストユーザーにも表示されますか？
表示されません。kintone全体のカスタマイズは適用範囲にかかわらずゲストユーザーには反映されず、portal.showもゲストユーザーのポータルでは発生しません。スペース側も、ゲストスペースではspace.portal.showが発生しない仕様です。社外の協力会社に告知を見せたい場合は、ゲストスペースの本文やスレッドで伝える運用にします。
スペースごとに違うカスタマイズを当てられますか？
当てられます。kintone全体のファイルは全スペースで読み込まれるため、space.portal.showのイベントオブジェクトにあるspaceIdで分岐します。スペースIDは文字列で渡されるので、数値と比較すると一致しません。対象が増えるとコード内の対応表が長くなるため、10スペースを超えるあたりでアプリに設定を持たせる構成を検討してください。
ライトコースでもポータルをカスタマイズできますか？
JavaScript／CSSによるカスタマイズはライトコースでは使えず、2枚目以降のポータルも作成できません。ライトコースでできるのは、1枚目のポータルのエリアの表示・非表示とカバー画像の変更、お知らせ掲示板の編集までです。kintoneヘルプは、部署ごとに入口を分けたい場合の代替として、複数のスペースを作ってスペースのポータルを使う方法を案内しています。
関連記事
- kintone一覧カスタマイズの実装手順｜JavaScriptで色分け・ボタン・独自ビューを作る：ポータルから開くアプリの一覧画面に色分けやボタンを足す実装手順
- kintoneプラグイン開発とは｜manifest構成から配布・内製外注の判断まで：お知らせ用アプリの機能を設定画面付きのプラグインへ移すときの手順
- kintone開発者ライセンスの取り方と開発環境の作り方｜cli-kintoneで検証環境を分ける手順：全体カスタマイズを本番前に試す検証環境の作り方
- kintoneカスタマイズ・開発とは？できること・手段・費用相場と内製外注の判断：ポータルを含むkintone拡張の手段と費用を比べる判断ガイド
- kintoneとは？できること・料金・プラグインからノーコードで内製する判断まで解説：kintoneの機能・料金・コース差を確認する親ガイド
