cmsの内部構造について見ていきます。事前準備として、このハンズオンの解説使用テーマ「beginner2018」のディレクトリに移動しましょう。まで移動してください。cms.ioから送られたメールアドレスにSFTP情報が記載されています。まで移動してください。基本のテンプレートファイルはテーマディレクトリ内直下に置かれています。その他CSS・JS・imagesなどのデータはフォルダで管理されています。それでは主要なフォルダについて確認していきましょう。admin管理ページのテンプレートが入っているフォルダです。エントリーの編集ページやカテゴリーの編集ページにオリジナルの入力項目を設置する際に作業する場所です。必要なパーツをインクルード(読み込んで)することでテンプレート管理をしています。includeフォルダはそのパーツを管理するフォルダです。詳しくは後述「インクルード」にて解説しています。contactお問い合わせフォームを管理するフォルダです。このようなフォームを管理するフォルダは、フォームを設置した分だけ準備する必要があります。beginner2018では、お問い合わせフォームのページをカテゴリーとしているため、カテゴリーコードである「contact」をフォルダ名としています。テーマ「beginner2018」では、「お知らせ」や「物件情報」のカテゴリーコード名と一致する「news」「realestate」といったフォルダが用意されています。設置することで、カテゴリーごとにデザインをかえることができます。cmsの記述のルールを見ていきます。headタグは以下のように書かれています。ここで使われているのが「インクルード機能」です。charset="UTF-8"></script></head>インクルードテンプレート内に外部ファイルを読み込む機能を「インクルード」といいます。複数のテンプレートに共通するパーツを1つのファイルから呼び出すことで、内容を編集した際に関係している全てのテンプレートへ一括して反映できるため、メンテナンス性を向上させることができます。headの例では、meta情報について以下のようにインクルードされています。ファイルを開くと、ここで読み込まれているHTMLコードを確認することができます。タグ内でヘッダーなどのパーツやモジュールをインクルードしています。このようにインクルード部分が多岐にわたる場合は、人の目で見ても分かりやすく管理するために、それぞれの役割についてコメント表記をしています。cmsでは、専用のスタイルガイド(CSSフレームワーク)を用意しています。このフレームワークを活用することで、クラス名の表記のみでデザインやレイアウトを素早く整え、サイト制作を効率化することができます。ここで使用するクラス名は、接頭辞にacms-がつく場合とacms-admin-がつく場合の2種類があります。cmsはVer.2.5より、管理画面で使うCSSファイル「acms-admin.css」と、CSSフレームワークとして使うCSSファイル「acms.css」を分けて管理し始めました。なるため、アップデートによるスタイル崩れの心配がなくなります。26〜35行目を見ていきましょう。-->@include("/include/check-seo.html")</main>mainタグ内のacms-col-lg-9は、デスクトップ画面で12カラム中9カラムの幅を使ってコンテンツを表示させるフレームワークです。cmsでは一般的に、サイトの表側のスタイルに関わるテンプレートでスタイルガイドを利用するときはacms-の接頭辞で記述します。読み込む必要がなくなり、サイトを軽量化することができます。developerにて確認できます。レスポンシブデザインにも対応し、種類も豊富に取り揃えているので、サイトを制作する際には是非ご活用ください。39〜62行目を見ると、接頭辞がjs-から始まるクラスが確認できます。cmsが用意する組み込みJSという機能を使用しています。組み込みJSHTMLにクラス属性を設定するだけで作動するJavaScriptライブラリを「組み込みJS」といいます。cmsでは、組み込みJSを活用することでJavaScriptの知識がなくともサイト内に様々な効果を加えることができます。href="#top">コンテンツに戻る</a></div>上記のソースでは、組み込みJSを使ってオフキャンバスを実装しています。オフャンバスとは、スマートフォンなどで画面全体を右もしくは左にスクロールさせ、画面外に隠れていたメニューを表示させる機能です。オフキャンバスが適応されるエリアにjs-offcanvasのクラスを、オフキャンバスを閉じるボタンにjs-offcanvas-closeのクラスを振ることで、JavaScriptを書かずとも該当エリアをオフキャンバスメニューに収めています。location」という組み込みJSを使用しています。モジュールの表示設定内にある「属性」の項目を見てみましょう。いうクラスが振られています。これらは、表示しているページのURLごとにナビゲーションのスタイルを区別する組み込みJSです。試しに「ホーム」にアクセスすると、ナビゲーションの項目に赤いボーダーがつくようになっています。現在表示しているページのURLがアンカーリンクのリンク先URL中に含まれている場合に作動するようになっています。developerをご覧ください。ここでご紹介した組み込みJSはほんの一例ですが、この他にもページ内の任意の場所へスクロールさせるものや、リンクのクリックエリアを拡大させるものなど様々なライブラリを取り揃えています。HTMLの作業だけで手軽にJavaScriptの効果を取り入れることができるので、是非色々なものを試してみてください。cmsの記述のルールを見ていきます。1行目と最終行には、下のようなコメントがあります。-->これらはモジュールの範囲を定める記述です。定められた範囲ごとにシステムが作動する仕組みになっています。テンプレートの23行目にはエントリーのタイトルを表す下の記述があります。2つの変数が使われています。エントリータイトルを自動で読み込み、画面に出力しています。cmsが用意している変数は膨大な数があります。これらを確認・利用するにあたっては、「変数表」を活用しましょう。変数表を確認するにはクイックサーチでの閲覧が便利です。クイックサーチを開きます。「:」と入力し、エントリーサマリーを選択すると、ここで使われているエントリーサマリーの変数表が確認できます。デベロッパーサイトにある「ビルトインモジュール」のページでも確認できます。変数表では、それぞれのシステムの中で利用できる変数が一覧でまとめられています。モジュールの構造は様々なシステムが入れ子で組み込まれ、少々複雑なため、不慣れなうちはテンプレートと変数表を照らし合わせて全体像を確認することもできます。テンプレートの24行目には、エントリー本文の要約を表す下のような変数が記述されています。この製品についての説明文です。この製品についての説明文です。この製品についての説明文です。校正オプション変数によって読み込まれた情報を適切な形に処理して出力する機能を校正オプションといいます。]内に表記され、これを利用することで、誕生日のデータを元に年齢を算出したり、登録された画像をリサイズして表示することができます。デフォルトで指定されます。その他に何か一つでもオプションを指定すると適応から外れるため、その場合には指定したいオプションと合わせて表記しなければなりません。利用することでクロスサイトスクリプティングを防止することができ、安全性の向上につながります。developerをご覧ください。