Laravel、Sail、TailwindCSSを使用してレスポンシブなAboutMeページを作成する方法
序章
Laravel Sail は、バージョン8以降のLaravelにデフォルトで含まれているDocker開発環境です。 これにより、NPM /ノードのサポートが組み込まれたLaravelアプリケーションの実行に合わせて調整された、PHP開発環境をすばやく稼働させることができます。
このガイドでは、新しいLaravelアプリケーションをLaravel Sailでブートストラップし、 Taiwind CSS を使用してスタイル付きの「自己紹介」ランディングページを作成します。これは、迅速に設計されたユーティリティファーストのCSSフレームワークです。カスタムユーザーインターフェイスの構築。 最後に、フロントエンドにTailwind CSSを使用し、開発環境にSailを使用して、Laravelアプリケーションをさらに開発するために使用できるベースを用意します。
プロジェクトを最初から作成するのではなく、既存のコードベースからフォローしたい場合は、GitHubの do-community /laravel-tailwind-starterで完成したデモアプリケーションコードにアクセスできます。
前提条件
このガイドで共有されているコードは、複数の環境とシステム間でシームレスに機能するはずですが、ここで説明する手順は、DockerとDockerComposeを実行しているUbuntu20.04ローカルシステム内でテストされています。 基本オペレーティングシステムに関係なく、開始するには次の設定が必要です。
- ローカルマシンにインストールされたDocker。 Ubuntu 20.04を実行している場合は、 Ubuntu20.04にDockerをインストールして使用する方法のステップ1および2に従ってセットアップできます。 WindowsおよびMacOSユーザーは、代わりに DockerDesktopをインストールする必要があります。
- ローカルマシンにインストールされたDockerCompose。 DockerComposeはWindowsとMacOSシステムの両方のDockerDesktopにデフォルトで含まれていますが、Linuxユーザーは Ubuntu20.04[にDockerComposeをインストールして使用する方法]のステップ1に従ってCompose実行可能ファイルをインストールする必要があります。 X239X]。
- PHP用のコードエディタ（オプション）。 コードエディタは、コードの読み取りとフォーマットを容易にするのに役立ち、コードを実行する前に問題を指摘することで生産性を向上させることができます。 PHPプロジェクト用のVisualStudioCodeをセットアップする方法のガイドに従って、ローカル開発環境内で無料のコードエディターであるVSCodeをセットアップできます。
ステップ1—LaravelBuilderスクリプトを使用して新しいLaravelアプリケーションを作成する
開始するには、公式のLaravelビルダースクリプトをダウンロードして実行します。このスクリプトは、必要なDockerコンテナーイメージをプルして開発環境を構築し、現在のフォルダーに新しいアプリケーションをブートストラップします。 このインストール方法では、システムにPHPをインストールする必要はありません。必要なのは、実際のLaravelインストーラーを実行できるDocker環境をセットアップするビルダースクリプトをダウンロードして実行することだけです。
最後に、スクリプトはsudoパスワードを要求して、アプリケーションフォルダーにシステムユーザーに対する正しいアクセス許可があることを確認します。 次のコマンドを実行する前に、ブラウザからスクリプトURL にアクセスして、その内容を確認できます。 この例では、 myapp という名前を使用していますが、これを別の名前に自由に置き換えることができます。
curl -s https://laravel.build/myapp | bash
OutputUnable to find image 'laravelsail/php80-composer:latest' locally latest: Pulling from laravelsail/php80-composer 852e50cd189d: Pull complete 0266fc315b01: Pull complete … Application ready! Build something amazing. Sail scaffolding installed successfully. Please provide your password so we can make some final adjustments to your application's permissions. [sudo] password for sammy: Thank you! We hope you build something incredible. Dive in with: cd myapp && ./vendor/bin/sail up
インストールが完了したら、新しいアプリケーションディレクトリにアクセスし、Sail環境を次のように起動します。
cd myapp ./vendor/bin/sail up
これにより、環境がフォアグラウンドモードで起動するため、実行中のすべてのコンテナからのログをフォローアップできます。 さまざまなポートを使用して相互に通信する、いくつかのさまざまなサービスが開始されます。
Output... mailhog_1 | [HTTP] Binding to address: 0.0.0.0:8025 ... laravel.test_1 | Starting Laravel development server: http://0.0.0.0:80 ... meilisearch_1 | Server listening on: "http://0.0.0.0:7700" ... mysql_1 | 2021-06-23T01:15:24.327234Z 0 [System] [MY-010931] [Server] /usr/sbin/mysqld: ready for connections. Version: '8.0.25' socket: '/var/run/mysqld/mysqld.sock' port: 3306 MySQL Community Server - GPL. ... selenium_1 | 01:14:57.417 INFO [SeleniumServer.boot] - Selenium Server is up and running on port 4444 ... redis_1 | 1:M 23 Jun 2021 01:14:54.243 * Running mode=standalone, port=6379. …
これらは、Sail環境内でデフォルトで構成されているサービスです。 それぞれの詳細については、公式の帆のドキュメントを参照してください。
次に、次のブラウザからアプリケーションにアクセスします。
http://localhost
すべての手順が成功すると、次のようなページが表示されます。
これで、アプリケーションがブートストラップされました。
これで、CTRL+Cと入力して、端末で実行されているSail環境を停止できます。
ステップ2—LaravelSailを使用する
Laravel Sailは、開発環境を管理するためのいくつかのショートカットを提供します。 ほとんどのコマンドと引数は、デフォルトのDockerComposeAPIに基づいています。
環境の制御
環境をバックグラウンドモードで起動するには、次のコマンドを実行できます。
./vendor/bin/sail up -d
以前にバックグラウンドモードで開始されたSail環境を停止するには、次のコマンドを実行します。
./vendor/bin/sail stop
これにより、接続されているネットワークまたはボリュームは削除されません。
sail stopコマンドで以前に停止した環境を元に戻すには、次を使用できます。
./vendor/bin/sail start
環境を停止し、ボリュームやネットワークなどの関連するすべてのリソースを削除するには、sail downコマンドを使用できます。 このコマンドは、データベースに保存されているレコードなど、以前に作成され、コンテナ内でのみ使用可能なデータを削除することに注意してください。
./vendor/bin/sail down
OutputStopping laravel-tailwind-starter_laravel.test_1 ... done Stopping laravel-tailwind-starter_redis_1 ... done Stopping laravel-tailwind-starter_selenium_1 ... done Stopping laravel-tailwind-starter_mysql_1 ... done Stopping laravel-tailwind-starter_mailhog_1 ... done Stopping laravel-tailwind-starter_meilisearch_1 ... done Removing laravel-tailwind-starter_laravel.test_1 ... done Removing laravel-tailwind-starter_redis_1 ... done Removing laravel-tailwind-starter_selenium_1 ... done Removing laravel-tailwind-starter_mysql_1 ... done Removing laravel-tailwind-starter_mailhog_1 ... done Removing laravel-tailwind-starter_meilisearch_1 ... done Removing network laravel-tailwind-starter_sail
ステータスとログの確認
環境がダウンしている場合は、次の方法で環境を復旧します。
./vendor/bin/sail up -d
環境が稼働しているときは、次の方法ですべてのアクティブなコンテナのステータスを確認できます。
./vendor/bin/sail ps
Output Name Command State Ports
---------------------------------------------------------------------------------------------------------------------------------
myapp_laravel.test_1 start-container Up 0.0.0.0:80->80/tcp,:::80->80/tcp, 8000/tcp
myapp_mailhog_1 MailHog Up 0.0.0.0:1025->1025/tcp,:::1025->1025/tcp,
0.0.0.0:8025->8025/tcp,:::8025->8025/tcp
myapp_meilisearch_1 tini -- /bin/sh -c ./meili ... Up (healthy) 0.0.0.0:7700->7700/tcp,:::7700->7700/tcp
myapp_mysql_1 docker-entrypoint.sh mysqld Up (healthy) 0.0.0.0:3306->3306/tcp,:::3306->3306/tcp, 33060/tcp
myapp_redis_1 docker-entrypoint.sh redis ... Up (healthy) 0.0.0.0:6379->6379/tcp,:::6379->6379/tcp
myapp_selenium_1 /opt/bin/entry_point.sh Up 4444/tcp
sail psコマンドからの出力は、その特定の環境に関連するどのコンテナーが現在アクティブであり、どのポートがリダイレクトされているか、そしてさらに重要なことに、各コンテナーがどの状態にあるかを示します。 前の出力例では、すべてのサービスが稼働しています。
環境をバックグラウンドモードで実行しているときにコンテナログを確認するには、次のコマンドを使用できます。
./vendor/bin/sail logs
これにより、すべてのサービスからの最新のログが表示されます。
Attaching to laravel-tailwind-starter_laravel.test_1, laravel-tailwind-starter_mailhog_1, laravel-tailwind-starter_mysql_1, laravel-tailwind-starter_redis_1, laravel-tailwind-starter_selenium_1, laravel-tailwind-starter_meilisearch_1 ... mysql_1 | 2021-06-24T15:08:06.435530Z 0 [System] [MY-010931] [Server] /usr/sbin/mysqld: ready for connections. Version: '8.0.25' socket: '/var/run/mysqld/mysqld.sock' port: 3306 MySQL Community Server - GPL. ... meilisearch_1 | [2021-06-24T15:16:38Z INFO actix_web::middleware::logger] 127.0.0.1:60874 "GET /health HTTP/1.1" 200 22 "-" "Wget" 0.000056 ... laravel.test_1 | [Thu Jun 24 15:08:07 2021] PHP 8.0.7 Development Server (http://0.0.0.0:80) started ... selenium_1 | 15:08:06.864 INFO [SeleniumServer.boot] - Selenium Server is up and running on port 4444 ... redis_1 | 1:M 24 Jun 2021 15:08:05.280 * Ready to accept connections ... mailhog_1 | 2021/06/24 15:08:05 Serving under http://0.0.0.0:8025/
コマンド呼び出しに追加の引数を指定することで、サービスごとのログを表示することもできます。
./vendor/bin/sail logs redis
OutputAttaching to laravel-tailwind-starter_redis_1 redis_1 | 1:C 24 Jun 2021 15:08:05.278 # oO0OoO0OoO0Oo Redis is starting oO0OoO0OoO0Oo redis_1 | 1:C 24 Jun 2021 15:08:05.278 # Redis version=6.2.4, bits=64, commit=00000000, modified=0, pid=1, just started ... redis_1 | 1:M 24 Jun 2021 15:08:05.280 * RDB memory usage when created 0.77 Mb redis_1 | 1:M 24 Jun 2021 15:08:05.280 * DB loaded from disk: 0.000 seconds redis_1 | 1:M 24 Jun 2021 15:08:05.280 * Ready to accept connections
職人と作曲家の実行
Laravelアプリケーションで作業している間、アプリケーションをビルド、テスト、および管理するためにartisanコマンドを実行する必要があることがよくあります。 PHPの依存関係を管理するには、composerコマンドも実行する必要があります。 デフォルトのDockerComposeAPIに加えて、Sailは、アプリケーションコンテナでこれらのコマンドを実行するための便利なショートカットを提供します（出力例ではmyapp_laravel.test_1）。 通常のDockerComposeセットアップでは、Artisanの実行は次のようになります。
DockerComposeのみを使用
docker-compose exec app php artisan
Sailを使用すると、同等の呼び出しは次のように短縮されます。
帆で職人を実行します
./vendor/bin/sail artisan
同様の方法でComposerを実行できます。
帆でComposerを実行する
./vendor/bin/sail composer
利用可能なすべての機能とコマンドの詳細については、公式のLaravelSailドキュメントをご覧ください。
これで、Sail開発環境を管理する方法と、アプリケーションコンテナでコマンドを実行する方法を理解できました。 次のステップでは、ランディングページをデザインおよびスタイル設定するためにTailwindCSSを設定します。
ステップ3—LaravelでTailwindCSSを設定する
次に、Tailwind CSSをインストールして設定し、ランディングページを作成します。
Sail環境が稼働していることを確認してから、JavaScriptパッケージのダウンロードと管理に使用されるnpmコマンドを使用してLaravelのフロントエンド依存関係をインストールします。
./vendor/bin/sail npm install
Output... added 1327 packages, and audited 1328 packages in 20s 99 packages are looking for funding run `npm fund` for details ...
次に、Tailwindとその依存関係を次のコマンドでインストールします。
./vendor/bin/sail npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
Output... added 9 packages, removed 22 packages, changed 7 packages, and audited 1315 packages in 5s 99 packages are looking for funding run `npm fund` for details ...
次に、Tailwindの構成ファイルを作成する必要があります。 これを行うには、npxを使用します。これは、 Node package executer の略で、Nodeパッケージを実行できます。 次のnpxコマンドは、アプリケーションの新しいデフォルトのTailwind構成を生成します。
./vendor/bin/sail npx tailwindcss init
これにより、プロジェクトのルートディレクトリにtailwind.config.jsという名前の新しい構成ファイルが次の内容で作成されます。
tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
プロジェクト内でTailwindを設定する方法はいくつかありますが、このガイドでは、 LaravelMixとwebpackを使用してTailwindを構成します。 両方のライブラリは、フロントエンドリソースのコンパイルと出力に使用されます。
コードエディタを使用してファイルwebpack.mix.jsを開きます。 次のようになります。
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
//
]);
Laravel Mixは、PostCSSを使用してCSSリソースをコンパイルします。 //文字を削除し、次の強調表示された行を含めます。これにより、処理するCSSリソースのリストにTailwindCSSが追加されます。
//文字を削除し、次の強調表示された行を含めます。これには、PostCSSプラグインとしてTailwindが必要です。
webpack.mix.js
mix.js("resources/js/app.js", "public/js")
.postCss("resources/css/app.css", "public/css", [
require("tailwindcss"),
]);
この変更を行った後、ファイルを保存します。
次に、アプリケーションのメインCSSファイルにTailwindを含めます。 コードエディタでresources/css/app.cssを開き、このファイルに次の3行を追加します。
resources / css / app.css
@tailwind base; @tailwind components; @tailwind utilities;
終了したら保存します。
次に、NPMを使用してフロントエンドアセットを構築する必要があります。
./vendor/bin/sail npm run dev
次のような出力が表示されます。強調表示されたCompiled Successfully部分のような行は、すべてのコンポーネントをSail環境に統合したことを示します。
Output
Laravel Mix v6.0.24
✔ Compiled Successfully in 5515ms
┌───────────────────────────────────────────────────────────────────┬──────────┐
│ File │ Size │
├───────────────────────────────────────────────────────────────────┼──────────┤
│ /js/app.js │ 597 KiB │
│ css/app.css │ 3.81 MiB │
└───────────────────────────────────────────────────────────────────┴──────────┘
webpack compiled successfully
これでTailwindが構成され、サイトのフロントエンドアセットが作成されました…次のステップでは、アプリケーションの新しいランディングページを作成します。
ステップ4—ランディングページを作成する
Tailwindの構成が整ったら、アプリケーションのフロントエンドビューの構築を開始できます。 Laravelでは、テンプレートは通常resources/viewsディレクトリに保存されます。 ブラウザからアプリケーションを開いたときに前に見たページ（http://localhost）は、そのディレクトリのwelcome.blade.phpという単一のテンプレートで定義されています。
コードエディタで、resources/viewsディレクトリにあるindex.blade.phpという新しいファイルを開きます。
次のテンプレート例は、スタイルが設定されていない要素をいくつか含む「自己紹介」HTMLページを定義しています。 アバター画像の例を使用していますが、独自の画像に置き換えることができます。
パブリックアプリケーションフォルダに新しいimgディレクトリを作成します。
mkdir public/img
profile_image.pngという名前でこの新しいディレクトリに好みの画像を保存します。
次の例では、強調表示されたテンプレート:Asset…ヘルパー行を使用して、CSSファイルと画像ファイルの両方のパスを定義していることに注意してください。 この関数は、publicディレクトリにあるアプリケーションリソースの正しいパブリックパスを出力します。
このコンテンツを自分のindex.blade.phpにコピーします。
resources / views / index.blade.php
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sammy the Shark - About Page</title>
<meta name="description" content="My Application Description">
<meta name="author" content="Sammy">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div>
<img src="{{ asset('img/profile_image.png') }}" width="200" alt="avatar"/>
<h1>Sammy the Shark</h1>
<p>Content Creator</p>
<p>Hello, I'm Sammy. I am a friendly shark interested in Linux, coding, and community.
You can find out more about me in the following links:</p>
<div>
<div><a href="https://twitter.com/digitalocean">Twitter</a></div>
<div><a href="https://www.linkedin.com/company/digitalocean">LinkedIn</a></div>
<div><a href="https://instagram.com/thedigitalocean">Instagram</a></div>
</div>
</div>
</body>
</html>
内容の編集が終了したら、ファイルを保存します。
次に、routes/web.phpファイルを編集して、新しく作成されたテンプレートを使用するようにメインルートを変更します。 コードエディタを使用してそのファイルを開き、welcomeをindexに置き換えて、メインアプリケーションエンドポイントで使用されるビューを変更します。 終了すると、更新されたルート宣言は次のようになります。
ルート/web.php
Route::get('/', function () {
return view('index');
});
ファイルを保存します。 これで、ブラウザでアプリケーションページをリロードして、新しいインデックスページを表示できます。 次のようなページが表示されます。
デフォルトでは、Tailwindは要素からすべてのスタイルを削除します。これにより、TailwindCSSユーティリティクラスを組み合わせて混合することでビューを自由に構築できます。 次のセクションでは、応答性の高い「自己紹介」ページを作成するために、これらのユーティリティクラスのいくつかを組み合わせる方法を学習します。
ステップ5—TailwindCSSを使用したランディングページのスタイリング
ユーザーは、画面サイズが異なるさまざまなデバイスからWebサイトやアプリケーションにアクセスする可能性があるため、応答性の高いページを作成することは、フロントエンドの重要な開発要件です。
Tailwindは、画面サイズごとにスタイルを適用できるセレクターを提供しています。 このように、デフォルトとして最小幅を設定し、より大きな画面に追加のレスポンシブサイズを追加することで、レスポンシブコンテナを作成できます。 たとえば、class="w-3/4 lg:w-1/2"で設定された要素は、親要素の幅の4分の3のデフォルト幅を設定します。これは、小さい画面では有効ですが、大きい画面では有効です（lg:セレクター）。親要素の半分の幅を使用します。
要素のサイズに関連付けられているものだけでなく、レスポンシブセレクターを任意のユーティリティクラスと組み合わせることができることに注意してください。 たとえば、特定のブレークポイントで要素を非表示にしたり、色を変更したり、列数が可変のグリッドに変換したりすることができます。
利用可能なすべてのレスポンシブセレクターとそれに相当するブレークポイントは、公式のTailwindドキュメントにあります。
次のテンプレートは、背景のグラデーションとアバター画像の例を使用して、ページの中央にレスポンシブコンテンツ領域を設定します。 ボタンには、グリッドフローシステムを使用して、中画面からコンテナを3列に分割しますが、小さい画面からページにアクセスすると、ボタンがコンテナのフルサイズを占めるようになります。
前の手順で作成したresources/views/index.blade.phpファイルをコードエディタで開き、内容を次のテンプレートに置き換えます。
resources / views / index.blade.php
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sammy the Shark - About Page</title>
<meta name="description" content="My Application Description">
<meta name="author" content="Sammy">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body class="bg-gradient-to-r from-blue-400 via-purple-600 to-blue-700">
<div class="w-3/4 lg:w-1/2 mx-auto rounded-md bg-gray-200 shadow-lg m-20 p-10 text-center">
<img src="{{ asset('img/profile_image.png') }}" class="w-32 lg:w-1/6 bg-blue-600 mx-auto rounded-lg mb-4" alt="avatar"/>
<h1 class="text-3xl">Sammy the Shark</h1>
<p class="text-gray-500 pb-4">Content Creator</p>
<p class="text-gray-700 mb-6">Hello, I'm Sammy. I am a friendly shark interested in Linux, coding, and community.
You can find out more about me in the following links:</p>
<div class="grid grid-cols-1 md:grid-cols-3 grid-flow-row gap-6">
<div class="px-4 py-2 bg-blue-600 text-gray-100 rounded-md mr-4 hover:bg-blue-700"><a href="https://twitter.com/digitalocean">Twitter</a></div>
<div class="px-4 py-2 bg-blue-600 text-gray-100 rounded-md mr-4 hover:bg-blue-700"><a href="https://www.linkedin.com/company/digitalocean">LinkedIn</a></div>
<div class="px-4 py-2 bg-blue-600 text-gray-100 rounded-md mr-4 hover:bg-blue-700"><a href="https://instagram.com/thedigitalocean">Instagram</a></div>
</div>
</div>
</body>
</html>
このテンプレートは、次のページを生成します。
そして、これはページがさまざまな画面サイズに適応する方法です。
更新されたテンプレートでは、各HTML要素に多数のTailwindクラスとセレクターが適用されています。 Tailwindは、ユーティリティクラスに特定の命名法を使用して、応答性の高いレイアウトを作成します。 サンプルテンプレートでは、次のそれぞれを使用して最終結果を作成します。
bg-gradient-to-r：指定された色を使用して、左から rightにグラデーションを作成します。w-1/3：要素の幅を親の要素幅の3分の1（ 1/3 ）に設定します。 Tailwind内で要素の幅を設定するには、さまざまな方法があります。mx-auto：要素を中央に配置します。rounded-md：丸みを帯びた角、「中」（md）のサイズを作成します。shadow-lg：シャドウ効果、サイズが「大きい」（lg）を作成します。mr-*およびその他のmバリアント：要素のマージンを設定するために使用されます。pb-*およびその他のpバリアント：要素のパディングを設定するために使用されます。hover:bg-blue-700：マウスホバーで選択した要素の背景色を変更します。
利用可能なすべてのユーティリティクラスの完全なリファレンスについては、Tailwindの公式ドキュメントを確認してください。
結論
このチュートリアルでは、LaravelSailとTailwindCSSを使用して新しいLaravelアプリケーションをブートストラップしました。 また、Tailwindの強力なユーティリティクラスを使用して、応答性の高い「自己紹介」ランディングページを作成しました。
より複雑なランディングページを作成し、その過程でTailwindについて詳しく知りたい場合は、 Tailwind CSSを使用してスタイル付きランディングページを作成する方法のガイドに従って、作成方法の詳細な手順を確認できます。このフレームワークを備えた完全なWebサイトページ。
プロジェクトベースのガイドでLaravelの詳細を知りたい場合は、Laravelを使用してPHPでリンクランディングページを作成する方法シリーズを参照してください。 その他のPHPコンテンツについては、PHPタグを確認してください。
