ユーザーインターフェイスをスタイリングする

ここまで、ユーザーインターフェイスのデザインに時間をかけてきませんでした。プロのようにスタイリングするために、 AssetMapper をベースにしたモダンなスタックを使用します。AssetMapper は、この書籍の最初のステップからアセットを管理してきた Symfony コンポーネントです。

AssetMapper は、モダンな Web 標準を採用しています。JavaScript ファイルと CSS ファイルはそのまま配信され、 importmap によって相互に連携されるので、ブラウザはネイティブの ES モジュール を直接ロードできます。バンドラーも、ビルドステップも、Node.js も不要です。

プロジェクトのルートディレクトリにある importmap.php ファイルを見てみてください。アプリケーションで使用される JavaScript パッケージが記述されています。 templates/base.html.twig で呼ばれている Twig の importmap() ファンクションが、これらをブラウザに公開します。

Bootstrap を活用する

良いデフォルト値で始めて、レスポンシブな Web サイトを構築するためには、 Bootstrap のような CSS フレームワークが大いに役立ちます。importmap パッケージとしてインストールしてください:

        1
        $ symfony console importmap:require bootstrap bootstrap/dist/css/bootstrap.min.css
    

このコマンドは、パッケージを importmap.php に登録し、（依存パッケージの @popperjs/core と一緒に） assets/vendor/ にダウンロードします。アプリケーションは実行時に CDN に依存しません。

JavaScript のメインエントリーポイントで Bootstrap をインポートしてください（合わせてデフォルトのウェルカムメッセージも削除しています）:

        1
2
3
4
5
6
7
8
9
10
11
        --- i/assets/app.js
+++ w/assets/app.js
@@ -5,6 +5,6 @@ import './stimulus_bootstrap.js';
  * This file will be included onto the page via the importmap() Twig function,
  * which should already be in your base.html.twig.
  */
+import 'bootstrap';
+import 'bootstrap/dist/css/bootstrap.min.css';
 import './styles/app.css';
-
-console.log('This log comes from assets/app.js - welcome to AssetMapper! 🎉');
    

app.css は Bootstrap のスタイルの後にインポートされていることに注意してください。こうすることで、私たちのカスタマイズが優先されます。

Symfony のフォームシステムは、特別なテーマでBootstrap をネイティブでサポートしていますので、有効にしてください:

config/packages/twig.yaml

        1
2
        twig:
    form_themes: ['bootstrap_5_layout.html.twig']
    

HTML をスタイリングする

アプリケーションをスタイリングする準備ができましたので、アーカイブをダウンロードし、プロジェクトのルートディレクトリに展開してください:

        1
2
3
        $ php -r "copy('https://symfony.com/uploads/assets/guestbook-8.1.zip', 'guestbook-8.1.zip');"
$ unzip -o guestbook-8.1.zip
$ rm guestbook-8.1.zip
    

テンプレートを見てみてください。Twig のトリックを 1 つや 2 つ学べるかもしれません。