Main Content

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

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\R2023b\resources\spfres\services\mdwas\home\customization

Linux® (sudo)

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

macOS (sudo)

/Applications/MATLAB/MATLAB_Web_App_Server/R2023b/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 accomodate 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 Colorsを参照してください。

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

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

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

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

関連するトピック

外部の Web サイト