##筆者の立ち位置
- php & Laravelの初学者
- 現場での開発経験なし
- 独学で地域活性化支援のアプリ制作を行うため、Laravelを学んでいる
##今回のやりたいこと
Laravel 8（Jetstream適用済み）のtailwindcssでGoogle Fontsを使いたい。
##きっかけ
明朝体で文章を書きたかったのですが、認証で使用する『Jetstream』でtailwindcssを使用しており、このCSSではデフォルトfont-familyに日本語対応のフォントが見当たらず。。。
追加しなくちゃなぁ、ということであれこれ調べました。
##今回の環境
Macのローカル環境
- macOS Big Sur(バージョン 11.2.3)
- MacBook Pro (Retina, 13-inch, Late 2013)
##事前準備
- すでにLaravel 8が利用できる環境になっていること
- パッケージ管理ツールであるnpmが使えること
まだの場合は後述の参考を参照のこと。
##導入
今回は２種類の導入方法について触れておきます。正直、どっちでもいい気がしますが、実際にLaravelで開発をされている方はどちらなのか、興味津々です。
###リンクタグによる導入
bladeファイルのヘッダにタグを挿入し、styleを設定する方法。
index.blade.phpのコメントアウト業に説明書きを付与しております。
Qiitaの仕様なのか、拡張子.blade.phpだと色が変わらないのでちょっと寂しい。
厳密に言えば、.bladeは拡張子じゃないけれど。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Google fontsで使いたいフォントを選択し、linkタグをコピー＆ペーストする。 -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap" rel="stylesheet">
<!-- スタイルを設定する -->
<style>
p {
font-family: 'Noto Serif JP';
}
</style>
<title>Document</title>
</head>
<body>
<p>pタグ全般にfont-family: 'Noto Serif JP'が適用されるよ！</p>
</body>
</html>
style部分をtemplete化すると、もうちょっと導入しやすいのかも。tailwindcssのお得感はなくなってしまうところがちょっと残念。
###importによる導入
tailwindcssで使用しているapp.cssファイルに組み込んで使用する方法。
####開発側のapp.cssにimportデータを記載する。
WebApp
├ resources
├ css
└ app.css
// 今回新たにGoogle fontsで取得したimportのurlをコピー＆ペースト
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap');
// app.cssにデフォルトでimportされている項目
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
####tailwind.config.jsファイルにfont-familyを宣言する。
(中略)
theme: {
extend: {
fontFamily: {
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
// theme - extend - fontfamily 配下に 『Notoserif』とクラス名をつけて宣言しました。
Notoserif: ['Noto Serif JP'],
},
},
},
####本番側のapp.cssに反映させる
開発環境のresources/css/app.cssに追記した内容を本番環境のpublic/css/app.cssへ反映させる。
WebApp
├ public
├ css
└ app.css
このファイルは直接いじらず、パッケージ管理で使用するnpmを使用して開発環境で設定した行を反映させる処理を行う。
% npm install && npm run dev
####blade.phpでタグを挿入し、css/app.cssを呼び出す。
VS Codeなどで新たにblade.phpを作成してhtml:5を展開した場合、リンクタグによるapp.cssの宣言が入っていないので、忘れずに書くこと。laravelでpublicフォルダ内のファイルを呼び出すときはasset()を使うのがおすすめ。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 本番環境のapp.cssを呼び出す -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<title>Document</title>
</head>
<body>
<!-- tailwind.config.jsで宣言したクラスを、適用したいタグに付与する。 -->
<p class="Notoserif">クラス名”Notoserif”のpタグに対してfont-family: 'Noto Serif JP'が適用されるよ！</p>
</body>
</html>
以上で、Google Fontsが使えるようになります。（いや、なったはず？！）
同じ操作をしてうまく行かなかった方、ぜひ情報交換したいです。
#駆け出しエンジニアと繋がりたい
##参考
###事前準備
####composerのインストール
####laravelのインストール
via composerの項目を参照（Docker使わないから）
####テストアプリケーションの作成
% laravel new WebApp
"WebApp"の部分は、お好きな名前をつけましょう。
####初期設定
- .envの更新
- config/app.phpの更新
- sqliteファイルの作成
- 動作確認
今回はローカル環境でのテストなのでDB_CONNECTION=sqliteに設定。
configフォルダ内のapp.phpには時刻設定（日本人ならtimezoneとlocaleを修正）。
databaseフォルダ内に新たなファイルdatabase.sqliteを作成。
この時点でmigrateしておくと、親切。
% php artisan migrate
あとは適宜、良きに計らってくんなまし。
tailwindcss Jetstreamの導入
そもそも認証機能を使いたくてJetstreamを入れたら、tailwindcss使ってたというのが今回のネタにたどり着いた原因でもあるので、tailwindcss単体の導入と言うよりは、認証機能の追加ということでJetstreamの導入について触れておきます。
% php artisan jetstream:install livewire --teams
% php artisan migrate
% npm install && npm run dev