/mesp をPCで開くと真っ白になる：ホームのウィジェットは0件

ServiceNow のポータル定義（sp_portal）を眺めていると、名前に「Mobile」と付いた1件が目に留まります。Mobile Employee Service Portal（url_suffix=mesp） です。この記事は、その /mesp を PC（デスクトップ）のブラウザで開いたときに何が起きるかを扱います。あわせて、画面が空白でも REST（sp_portal / sp_page / sp_instance / sp_theme）からは構成を実測できる、という点も扱います。PDI（Personal Developer Instance）の OOTB（初期設定）で確認した範囲にしぼって示します。

先に結論を2つ挙げます。ひとつ、このポータルは PC の通常ビューポートで開いてもほぼ何も表示されません。もうひとつ、その一方で ポータル設定・テーマ・メニュー・遷移先ページ・ウィジェット配置は REST から数値として読めます。「見た目はモバイルでしか出ないが、構成は実測で分かる」。本記事はその構成側を、開発者リファレンスとして並べます。

このポータルは何か

Mobile Employee Service Portal は、名前のとおり スマートフォンから従業員セルフサービスを使うための入口 として登録されているポータルです。申請状況の確認やナレッジの検索といった「従業員が自分でやりたいこと」を、スマホの画面からたどる位置づけになります。

同じ PDI で既定（default=true）だったのは Employee Center（/esc）のほうでした。mesp は default=false で、名前・テーマ・そして「classic のウィジェット層を使わないホーム構成」から、従業員ポータルのモバイル向けの側 にあたると読めます。同じ「従業員向けの入口」でも、PC 向けと想定されるもの（esc）とモバイル向けと想定されるもの（mesp）で、ポータルのレコードが分かれている、という整理です。Employee Center の見た目は、/esc の記事で扱っています。

そのため /mesp を PC で開くと、想定された利用環境から外れた見方になります。次の節で、実際の見た目を先に押さえておきます。

見た目：PC で開くとほぼ空白

PC のブラウザ（通常サイズの画面）で /mesp を開いたのが次の画面です。

見てのとおり、画面のほぼ全体が白い余白 でした。Employee Center や Service Portal のような検索ボックス・カード・ヘッダメニューは表示されず、左下に小さなアイコンが1つ見えるだけです。ページ自体は開けていて（エラー画面ではない）、けれど中身が描かれていない、という状態でした。

この見た目が何を反映しているのかは、以降の節で実測した設定・テーマ・ウィジェット配置と突き合わせていきます。結論だけ先に言えば、空白は不具合ではなく、モバイル前提の設計がデスクトップに出ていないだけ、と読めます。

基本設定：Mobile テーマと homepage=mesp_index

/mesp の挙動を決めているのは sp_portal レコードの設定値です。REST で読み取れた項目（空フィールドは省略）を、意味とあわせて並べます。

押さえどころは次のとおりです。

• 入口とページ差し替え：homepage＝mesp_index、login_page＝landing、notfound_page＝404。それぞれ別の sp_page を指し、ページを丸ごと差し替えるときはここを変えます。

• テーマ：theme＝Mobile Employee Next Experience Theme。名前のとおりモバイル向けのテーマが割り当たっています。/sp の Coral とは別物で、この差が見た目の描画経路に効いていると考えられます（詳細は後述）。

• メニュー：sp_rectangle_menu＝SP Header Menu。これは /sp と共通のヘッダメニュー定義への参照でした。mesp 専用のメニューを持つのではなく、既存のメニューを流用している形です。

• 検索とお気に入り：enable_ais＝false（AI Search を使わない）、enable_favorites＝true（お気に入り有効）。/sp は逆に enable_ais=true / enable_favorites=false だったので、この2項目は mesp と sp で反転しています。

• その他：rtl_enabled＝false（右横書き非対応）、hide_portal_name＝false、enable_embeddables＝false。css_variables にはポータル単位で上書きする SCSS 変数（$grid-gutter-width: 15px !default;）が入っていました。quick_start_config にはガイド付き設定でつなぐ要素（tagline / hero_background / favorite など）の JSON が入っていました。

表に出てこない（空だった）フィールドは、REST で値が読めなかったものです。空でも動くのは、ServiceNow 側が既定のページや挙動にフォールバックするためで、明示的に指定したいときにだけ値を入れる、という位置づけになります。

画面遷移：/mesp からどこへつながるか

/mesp の Mobile Employee Service Portal は、sp_portal の設定とヘッダメニューを通じて、いくつものページへ枝分かれします。どの設定・どのメニューから、どのページへ到達するかを一枚にまとめました。ここに並ぶページ名・遷移先はすべて REST で読み取った実測値です。

読み方は次のとおりです。

• ポータル本体（sp_portal）が直接指すページは3つ。homepage＝mesp_index（ホーム）、login_page＝landing（ログイン）、notfound_page＝404（Not Found）です。

• それ以外の遷移先は、ヘッダの sp_rectangle_menu（SP Header Menu）から枝分かれします。Knowledge はナレッジ表示ページ（kb_view2）、Catalog はサービスカタログへつながっていました。Requests は申請状況ページ（my_requests）、My Favorites はお気に入りページ（favorites_list）へつながっていました。

• 図の中で mesp_index だけ点線にしてあります。これは後述のとおり、ホームページとして指定されているのに sp_instance のウィジェット配置が0件 だったことを表します。PC で空白に見える理由は、この0件と対応します。

この関係図の要点は、mesp が参照するメニューと遷移先ページの多くが、従来の Service Portal（/sp）と同じレコードを共有していることです。メニューは SP Header Menu、ログインは landing、404 は 404、ナレッジは kb_view2。いずれも /sp でも使われるページでした。mesp 固有なのは、ホームページ（mesp_index）とテーマ（Mobile 向け）の部分に絞られます。

デザイン設定の詳細：Mobile Employee Next Experience Theme

デスクトップで空白になる根拠は、テーマ側の設定にも表れています。sp_portal が参照するテーマ Mobile Employee Next Experience Theme を sp_theme から実測しました。

読みどころは次のとおりです。

• テーマ名：name＝Mobile Employee Next Experience Theme。/sp の Coral とも Employee Center の Coral 系とも別の、mesp 専用テーマです。

• 固定表示：navbar_fixed＝true、footer_fixed＝true。ナビゲーションバーとフッタを固定表示にするレイアウト指定が入っていました。スクロールしても上下の帯が残る、モバイルらしい画面設計に向いた値です。

• css_variables：先頭に // MESP Variables とコメントが付いています。$mesp-input-text や $mesp-input-border など、MESP 専用の SCSS 変数群が定義されていました。入力部品・境界線・配色といったモバイルUIのスタイルを、テーマ側で持っている形です。ポータル側の css_variables（$grid-gutter-width: 15px）とは別レイヤで、テーマがUIの見た目の大枠を担っています。

• 空・未設定の項目：header / footer / matching_now_experience_theme は空でした。logo / icon は無く、dark_theme は未設定でした。追加テンプレートやロゴを持たず、変数中心でスタイルを与えるテーマ、という構成です。

ここまでを空白の見た目と突き合わせると、実測できた事実は3点に整理できます。ひとつ、テーマは Mobile Employee Next Experience Theme で、モバイル向けの変数群を抱えている。ふたつ、後述するホーム mesp_index の sp_instance 配置が0件で、classic のウィジェット層には中身が無い。みっつ、PC の通常ビューポートで開くとコンテンツがほぼ描画されない。

この3点を素直につなげると、「モバイル前提のポータル（ウィジェット層を使わない構成）を、PC の通常サイズで開いたために、想定された画面が出てこなかった」という観察になります。実際の UI はモバイル向けテーマ側が描画していると考えられます。ただし、どの条件で完全な画面が出るのか（画面幅・ユーザーエージェント・専用アプリのいずれか）は、今回の PC からの確認では特定できていません。断定は避けます。テーマがモバイル向けの変数を持ち、ホームがウィジェット層を使わない、という設計の輪郭までが実測範囲です。

関連するウィジェット

ポータルのホームページとして指定されている mesp_index を sp_instance（ウィジェット配置テーブル）から実測したところ、ウィジェットの配置は0件 でした。参考までに、mesp から到達するページごとの配置数を並べます。

表のとおり、遷移先の landing・404・kb_view2・my_requests・favorites_list には、それぞれ2〜6個のウィジェットが載っています。ところが、ホームページの mesp_index だけ0件です。これが、PC の通常ビューポートで /mesp を開いたときに 中身が描かれない ことと素直に対応します。従来型 Service Portal の描画はページ上のウィジェット配置（sp_instance）を描く仕組みなので、配置が空なら classic の経路では描くものがない、という関係です。

言い換えると、mesp のホーム画面は classic Service Portal のウィジェット層では組まれていないことが REST から読み取れます。実際の画面（モバイル向けの UI）は、theme に割り当たった Mobile Employee Next Experience Theme 側の描画経路が担っていると考えるのが自然です。「空白＝壊れている」ではなく、配置0件は「ウィジェット層を使わない設計」の現れと読める、というのがここでの実測です。

一方、ホーム以外の遷移先ページには、それぞれウィジェットが載っています。これらは classic Service Portal と共有されるページで、PC のビューポートでも（そのページを直接開けば）ウィジェットは存在します。

ページごとに性格がはっきり出ています。

• landing（ログイン）：HTML・Login・Typeahead Search・Language Switch の4つ。ログインフォームと言語切替が中心です。

• 404（Not Found）：HTML と Breakout Game の2つ。OOTB の 404 ページには、ブロック崩し風のミニゲームウィジェットが載っていました。

• kb_view2（Knowledge Base）：ウィジェットは6つです。breadcrumbs・Typeahead Search・KB Knowledge Bases・KB Categories - KBv3・KB Top Rated・KB Most Viewed。ナレッジの入口一式です。

• my_requests（Requests）：My Requests と SC Scroll to top の2つ。自分の申請状況を出す最小構成でした。

• favorites_list（My favorites）：breadcrumbs と Favorites の2つ。

Typeahead Search は landing・kb_view2 に使われています。SC Scroll to top は my_requests に使われています。このように、共通ウィジェットが複数ページで使い回されている点も見て取れます。ホームだけが0件で、機能ページは共有のウィジェットで成り立っている、という対比が分かります。

ヘッダーメニュー：/sp と共有する SP Header Menu

/mesp が参照する SP Header Menu の中身も実測しました。各項目は sp_rectangle_menu_item に入っていて、ラベル・リンク種別・遷移先・並び順・表示条件を order 順に読み取っています。

type（リンク種別）は、そのメニューが何につながるかを表します。

• Knowledge：ナレッジベースへ直接

• Catalog：サービスカタログへ直接

• Requests / My Favorites：特定のページ

• Approvals：スクリプトで生成される一覧（Scripted List）

• System Status：URL へのリンク

表示条件（condition） にも触れておきます。項目ごとの条件は次のとおりです。

• 多くの項目：GlideSPScriptable.canSeePage(...)（そのユーザーが遷移先ページを見られるか）

• Approvals：gs.isLoggedIn()（ログイン中のみ）

• My Favorites：$sp.getValue('enable_favorites')（お気に入り機能が有効なポータルのときだけ）

ここが /sp との差になります。mesp は enable_favorites=true なので、条件上は My Favorites メニューが有効化される 側の設定です。実際の見た目はモバイル未検証のため、条件成立までを実測範囲とします。

なお、このメニューは mesp と sp で共有されているため、内容は /sp と同じでした。mesp 固有の性格はメニューではなく、ホームの構成とテーマの側に表れています。

周辺機能：描画モデルと依存

最後に、これまでの実測を「何が描画を担っているか」という視点でまとめ直します。ホーム mesp_index のウィジェットは0件でしたが、テーマ側の変数やレイアウト指定、共有ページのウィジェットまで含めて、取得できた範囲の依存を一覧にしました。

この表から読める描画モデルは次のとおりです。ホーム側は classic のウィジェット層が空なので、そこには描画の中身が無い。代わりに、テーマ（sp_theme）の css_variables がモバイルUIの配色や入力部品を持ちます。navbar_fixed / footer_fixed が固定レイアウトを与えます。機能ページ（landing / kb_view2 / my_requests など）は、共有の classic ウィジェットで組まれていました。ホームはテーマ主導、機能ページはウィジェット主導、という二層に分かれている構図です。

一方で、各ウィジェットの client script / server script や依存関係の中身は、本記事の取得範囲には含めていません。今回読めたのは配置（どのページに何のウィジェットが載るか）と、テーマ・ポータルの変数までです。ウィジェット単体の内部ロジックや、モバイルテーマが mesp_index を具体的にどう描くかは、追加の調査が必要な範囲として残しておきます。

まとめ・検証範囲・参考

• /mesp の Mobile Employee Service Portal は sp_portal に登録されています（REST 実測）。

• 主な実測値は title=Mobile Employee Service Portal / url_suffix=mesp / default=false。

• テーマは theme=Mobile Employee Next Experience Theme、ホームは homepage=mesp_index でした。

• 参照するメニュー（SP Header Menu）は、従来型 Service Portal（/sp）と共有です。

• 遷移先ページ（landing / 404 / kb_view2 / my_requests / favorites_list）も、多くは /sp と共有しています。

• enable_ais＝false、enable_favorites＝true、rtl_enabled＝false は /sp と反転しています。

• テーマ Mobile Employee Next Experience Theme は navbar_fixed=true / footer_fixed=true でした。

• css_variables に MESP 専用の SCSS 変数群（$mesp-input-text ほか）を持ちます。logo / icon / dark_theme は未設定でした。

• ホームページ mesp_index の sp_instance ウィジェット配置は0件。遷移先ページ（landing=4 / 404=2 / kb_view2=6 / my_requests=2 / favorites_list=2）には配置があった。

• PC の通常ビューポートで開くとほぼ空白。これはホームのウィジェット配置0件と符合し、モバイル向けテーマ側が描画を担う設計の反映と読める（描画経路の断定は範囲外）。

関連記事

• ServiceNow Service Portalはどこを直せば画面が変わる？ 構成7テーブルを実機で追う — ホームのウィジェットが0件だったmespの構成も、この7テーブル構造から見通せます

検証範囲とおことわり

• 見た目の確認は PC（デスクトップの通常ビューポート）でのみ 行いました。スマートフォン実機・モバイルサイズでの実際の表示は未検証 です。どの条件（画面幅／ユーザーエージェント／専用アプリ）で本来の画面が出るかは特定できていません。

• モバイルテーマ（Mobile Employee Next Experience Theme）の内部構造や、各ウィジェットのスクリプト／依存は、本記事では扱っていません。

• ACL やロールによる可視範囲、mesp_index を描画する具体的な経路も、本記事の範囲外です。

• 数値・状態はこのPDIの実測値であり、環境によって異なります。断定できるのは「設定値」「テーマの設定」「ページ構成」「ウィジェット配置数」と「PC での見た目」までです。

参考リンク（ServiceNow 公式ドキュメント・Zurich）

• Employee Center … 従業員向け総合ポータル（mesp が対応するデスクトップ側の Employee Center）の概要

• Service Portal … mesp が共有するメニュー・ページの土台となる Service Portal の概要

• Service Portal themes … sp_theme（テーマ）と css_variables の位置づけの概要