Skip to content

Template(テンプレート)

オープンソース・ワークショップ 永原 篤 edited this page Apr 21, 2020 · 18 revisions

プラグイン・テンプレート

  • プラグイン・テンプレートとは
    各プラグインは、画面用のプログラムとしてテンプレートを持ちます。
    プラグインのテンプレートは以下の場所になります。
    resources/views/plugins/user/{plugin_name}/
    例)メニュープラグインの場合
    resources/views/plugins/user/menu/

  • テンプレートのフォルダ
    プラグインは、複数のテンプレートを持つことができます。 これにより、配置した場所ごとに、レイアウトを変えることが可能になります。

  • デフォルトのテンプレートのフォルダ
    プラグイン・テンプレートのデフォルトは default フォルダです。
    例)メニュープラグインの場合
    resources/views/plugins/user/menu/default

  • テンプレートのフォルダを追加する
    テンプレートのフォルダを追加して、新しいテンプレートを作成することができます。

  • template.ini
    テンプレート・フォルダにはtemplate.ini を記載してください。
    template.ini は以下のようにテンプレート名とプラグイン編集で選択する際の順番を記載します。
    テンプレート名を日本語で記載する場合は、文字コードをUTF-8 にしてください。  

[base]
template_name = default
display_sequence = 1
  • テンプレート内ファイルの参照関係
    各テンプレート・フォルダに必要な画面用ファイルがない場合は、default テンプレートのファイルが参照されます。
    メニューテンプレートの breadcrumbs(パンくず)を見てください。
    resources/views/plugins/user/menus/breadcrumbs
    default テンプレートにある menus_select.blade.php などがありません。
    多くの場合、テンプレートの作成やカスタマイズは、一般ユーザの見た目を変更するためのものでしょう。
    そのため、プラグインの編集画面などは追加したテンプレート・フォルダにはコピーせず、default のものを参照するようにすることで、システムのメンテナンス性が向上するように設計されています。

一般ユーザ向けテンプレート

  • 継承(最初に指定)
    @extends('core.cms_frame_base')

  • 画面内容を@section で囲む。セクション指定は "plugin_contents_$frame->id"
    @section("plugin_contents_$frame->id")
    ※ 画面内容
    @endsection

設定画面用テンプレート

  • 継承(最初に指定)
    @extends('core.cms_frame_base_setting')

  • 設定メニューを@section で囲む。セクション指定は "core.cms_frame_edit_tab_$frame->id"
    @section("core.cms_frame_edit_tab_$frame->id")
    {{-- プラグイン側のフレームメニュー --}}
    @include('plugins.user.._frame_edit_tab') <-- ****** はプラグイン名
    @endsection

  • 画面内容を@section で囲む。セクション指定は "plugin_setting_$frame->id"
    @section("plugin_setting_$frame->id")
    画面内容
    @endsection

設定画面イメージ

  • PCでの広い画面表示
     設定画面の基本形として、項目のキャプションを左に配置、右に入力項目としています。
     col 設定がbootstrap4 のグリッドを利用したものだけでは、幅が狭いプラグインでも、ブラウザ幅が大きい場合に、設定メニューがハンバーガーメニューにならない問題があるため、CSS のcol 定義に関しては、$frame のメソッドを呼び、そのフレームに応じたCSS を取得しています。
     使用例としてはサイト内検索プラグイン(search)がわかりやすいかと思います。
    Connect-CMS logo
  • 狭い幅での画面表示  PCでブラウザ幅を狭くした場合 or フレーム幅を小さく設定した場合 or 左もしくは右エリアに配置した場合
     bootstrap グリッドシステムでPC(広い幅)と同じタグでキャプションと項目を縦に並べ替えるようになっています。
     設定メニューはbootstrap4 のnavbar を使用し、ハンバーガーメニューで項目を選択するようにし、狭い画面での操作性を確保します。
     以下のサンプルはハンバーガーメニューを展開したところです。
Clone this wiki locally