このページは機械翻訳を使用して翻訳されました。最新版の英語を参照するには、ここをクリックします。

MATLAB Web App Server アプリのホームページをカスタマイズする

MATLAB® Web App Server™ アプリのホームページをカスタマイズするには、customization フォルダーに移動し、CustomConstants.json ファイルと custom-css.css ファイルを編集します。次の機能をカスタマイズできます。

  • アプリのホームページのバナーのタイトル、背景色、フォントタイプ、フォントサイズ。 (R2021b 以降)

  • アプリのページ ヘッダーとブラウザー タブにカスタム ロゴ イメージを追加します。 (R2023b 以降)

アプリのホームページのバナーのタイトル、背景色、フォントタイプ、フォントサイズを変更するには、customization フォルダーに移動し、CustomConstants.json ファイルと custom-css.css ファイルを編集します。

オペレーティング システムコマンド ライン スクリプトの既定の場所

Windows® "(管理者)"

C:\Program Files\MATLAB\MATLAB Web App Server\R2025a\resources\spfres\services\mdwas\home\customization

Linux® "(sudo)"

/usr/local/MATLAB/MATLAB_Web_App_Server/R2025a/resources/spfres/services/mdwas/home/customization

macOS "(sudo)"

/Applications/MATLAB/MATLAB_Web_App_Server/R2025a/resources/spfres/services/mdwas/home/customization

バナータイトル、ヘッダー、ブラウザタブをカスタマイズする

  1. 設定ファイルを編集します。

    テキスト エディターで CustomConstants.json ファイルを開きます。このファイルには、アプリのホームページのさまざまなカスタマイズ可能なプロパティが含まれています。デフォルトのコンテンツは次のようになります。

    {
    "WEB_APPS_HEADER": "MATLAB Web Apps",
    "HEADER_LOGO_FILENAME": "header_logo.png",
    "TAB_TITLE": "",
    "TAB_LOGO_FILENAME": "favicon.png"
}

  2. バナーのタイトルを変更します。

    "MATLAB Web Apps" のデフォルトタイトルをカスタムタイトルに変更します。タイトルの最大長は、フォントの種類とサイズに応じて約 50 文字になります。

  3. ヘッダーにカスタム ロゴを追加します。

    JSON ファイルの "HEADER_LOGO_FILENAME" プロパティの値としてロゴ画像のファイル名を指定することで、ヘッダーにカスタム ロゴを追加できます。たとえば、ロゴ画像の名前が myLogo.png の場合、JSON ファイルには "HEADER_LOGO_FILENAME": "myLogo.png" を含める必要があります。画像ファイルは JSON ファイルと同じディレクトリに配置する必要があります。次の画像形式がサポートされています。JPG、JPEG、PNG、GIF、SVG、ICO。

  4. ブラウザタブをカスタマイズします。

    ヘッダーと同様に、ブラウザタブのタイトルをカスタマイズしたり、カスタムロゴを追加したりできます。これは、JSON ファイル内の "TAB_TITLE" プロパティと "TAB_LOGO_FILENAME" プロパティの値を指定することによって実行できます。たとえば、タブのロゴ画像の名前が myTabLogo.png で、タブのタイトルを Hello World Web App にしたい場合、JSON ファイルには "TAB_TITLE": "Hello World Web App" と "TAB_LOGO_FILENAME": "myTabLogo.png" が含まれます。タブ ロゴの画像ファイルは、JSON ファイルと同じディレクトリに配置する必要があります。次の画像形式がサポートされています。JPG、JPEG、PNG、GIF、SVG、ICO。

  5. ファイルを保存し、アプリのホームページを更新します。

    アプリのホームページに新しいタイトルが反映され、ヘッダーとブラウザタブにカスタムロゴが表示されます。

メモ

"WEB_APPS_HEADER" プロパティと "HEADER_LOGO_FILENAME" の両方が空のままになっている場合、ページにはデフォルトのタイトル "MATLAB Web Apps" が自動的に表示されます。

バナーの背景色、フォントの種類、フォントサイズを変更し、ヘッダーロゴのサイズを調整します

  1. テキスト エディターで custom-css.css ファイルを開きます。

    /*
-----------------------------------------------------------------
    CSS that can be customized to accommodate company branding
-----------------------------------------------------------------
*/

/* Banner Color */
.clientmdwas .headerBanner {
    background-color: rgb(32, 126, 178);

}

/* Banner Title Font and Font Size*/
/* Recommended default settings */
.clientmdwas .bannerTitle {
    font-family: Arial, cursive;
    font-size: 28px; /* Recommended range 20-30px, depending on font family used. */
}

/* Header Logo Size*/
/* Recommended default settings */
.clientmdwas .headerLogo {
    height: 1.2em; /* height scaled based on font size of document. */
    width: auto; /* width "auto" allows the browser to calculate the width.*/
}

  2. バナーの色を変更するには、background-color プロパティを有効な CSS 色に設定します。詳細については、CSS カラー を参照してください。

  3. フォント タイプを変更するには、font-family プロパティを有効な CSS フォント タイプに設定します。詳細については、CSS フォントを参照してください。

  4. フォント サイズを変更するには、font-size プロパティを有効な CSS フォント サイズに設定します。推奨範囲は20〜30ピクセルです。詳細については、CSS フォント サイズを参照してください。

  5. ヘッダー ロゴのサイズを設定するには、height および width プロパティを有効な CSS 値に設定します。

  6. ファイルを保存し、アプリのホームページを更新します。

参考

トピック

外部の Web サイト