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
すべての手順が成功すると、次のようなページが表示されます。
これで、アプリケーションがブートストラップされました。
これで、次のように入力して、端末で実行されているSail環境を停止できます。 CTRL+C
.
ステップ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
アプリケーションを構築、テスト、および管理するためのコマンド。 また、実行する必要があります composer
PHPの依存関係を管理するコマンド。 デフォルトのDockerComposeAPIに加えて、Sailは、アプリケーションコンテナでこれらのコマンドを実行するための便利なショートカットを提供します(myapp_laravel.test_1
出力例では)。 通常のDockerComposeセットアップでは、Artisanの実行は次のようになります。
docker-compose exec app php artisan
Sailを使用すると、同等の呼び出しは次のように短縮されます。
- ./vendor/bin/sail artisan
同様の方法でComposerを実行できます。
- ./vendor/bin/sail composer
利用可能なすべての機能とコマンドの詳細については、公式のLaravelSailドキュメントをご覧ください。
これで、Sail開発環境を管理する方法と、アプリケーションコンテナでコマンドを実行する方法を理解できました。 次のステップでは、ランディングページをデザインおよびスタイル設定するためにTailwindCSSを設定します。
ステップ3—LaravelでTailwindCSSを設定する
次に、Tailwind CSSをインストールして設定し、ランディングページを作成します。
Sail環境が稼働していることを確認してから、Laravelのフロントエンド依存関係をインストールします。 npm
JavaScriptパッケージのダウンロードと管理に使用されるコマンド:
- ./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
プロジェクトのルートディレクトリに次の内容が含まれています。
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が必要です。
mix.js("resources/js/app.js", "public/js")
.postCss("resources/css/app.css", "public/css", [
require("tailwindcss"),
]);
この変更を行った後、ファイルを保存します。
次に、アプリケーションのメインCSSファイルにTailwindを含めます。 開ける resources/css/app.css
コードエディタで、このファイルに次の3行を追加します。
@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
、そのディレクトリ内。
コードエディタで、という新しいファイルを開きます index.blade.php
の中に resources/views
ディレクトリ。
次のテンプレート例は、スタイルが設定されていない要素をいくつか含む「自己紹介」HTMLページを定義しています。 アバター画像の例を使用していますが、独自の画像に置き換えることができます。
新しいを作成します img
パブリックアプリケーションフォルダのディレクトリ:
- mkdir public/img
好みの画像をこの新しいディレクトリに名前を付けて保存します profile_image.png
.
次の例では、強調表示されたものの使用に注意してください {{ asset… }}
CSSファイルと画像ファイルの両方のパスを定義するヘルパー行。 この関数は、にあるアプリケーションリソースの正しいパブリックパスを出力します。 public
ディレクトリ。
このコンテンツを自分のコンテンツにコピーします 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
メインアプリケーションエンドポイントで使用されるビューを変更します。 終了すると、更新されたルート宣言は次のようになります。
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
コードエディタで前の手順で作成したファイルを作成し、その内容を次のテンプレートに置き換えます。
<!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タグを確認してください。