Laravel Jetstream 1.0 インストール

Jetstreamのインストール

Laravelインストーラを使用している場合は、--jetオプションを付けて、Jetstreamで動作するLaravelアプリケーションを生成できます。

laravel new project-name --jet

LaravelインストーラでJetstreamをインストールしたら、データベースをマイグレートしてください。

php artisan migrate

Composerによるインストール

もしくは、新しいLaravelプロジェクトへJetstreamをインストールするために、Composerを使う方法もあります。

composer require laravel/jetstream

Composerを使用するインストールを選んだ場合は、jetstream:install Artisanコマンドを実行してください。このコマンドは好みのスタック名を引数で指定します。(livewireかinertia)Jetstreamプロジェクトを開始する前にLivewireInertiaのドキュメント全体を読んでおくことを強くおすすめします。付け加えて、チームサポートを有効にする場合は、--teamsスイッチを使ってください。

Livewireと同時にJetstreamをインストール

php artisan jetstream:install livewire --teams

Inertiaと同時にJetstreamをインストール

php artisan jetstream:install inertia --teams

インストールを完了する

Jetstreamがインストールできたら、NPM依存をインストール・構築し、データベースをマイグレートしてください。

npm install && npm run dev

php artisan migrate

Jetstreamの構造

ビュー/ページ

インストールにより、Jetstreamはアプリケーションへ様々なビューやクラスをリソース公開します。Livewireを使う場合、ビューはresources/viewsディレクトリへリソース公開されます。Inertiaを使用する場合、「ページ」はresources/js/Pagesディレクトリへリソース公開されます。これらのビューやページはJetstreamがサポートする機能をすべて含んでおり、必要に応じて自由にカスタマイズできます。Jetstreamはアプリケーションの開始地点だと考えてください。Jetstreamをインストールしたら、なんでも好きなように自由にカスタマイズできます。

ダッシュボード

アプリケーションの「メイン」となるビューは、Livewireを使う場合はresources/views/dashboard.blade.php、Inertiaを使う場合は、resources/js/Pages/Dashboard.vueへリソース公開されます。アプリケーションのメインのビューを作成するスタートポイントとしてこれを自由に使ってください。

アクション

さらに、「アクション」クラスは、アプリケーションのapp/Actionsディレクトリへリソース公開されます。これらのアクションクラスは、たとえばチームを作成するとかユーザーを削除するとか、通常Jetstreamの単一機能に対応した、単一のアクションを実行します。Jetstreamのバックエンドの動作を調整したい場合、これらのクラスを自由にカスタマイズしてください。

Tailwind

インストールにより、JetstreamはTailwind CSSフレームワークを使用しアプリケーションと統合したスカフォールドを提供します。アプリケーションのCSSコンパイル済み出力を構築するために、以降の2ファイルを使用します。アプリケーションの必要に合わせ、これらのファイルは自由に変更してください。

それに付け加え、選択したJetstreamスタックに合わせ、適切な指定関連ディレクトリでPurgeCSSをサポートするように、tailwind.config.jsファイルを事前設定しています。

アプリケーションのpackage.jsonファイルはアセットコンパイルに使用するNPMコマンドをはじめから準備しています。

npm run dev

npm run prod

npm run watch

Livewireのコンポーネント

JetstreamはLivewireスタックを活用するために、ボタンやモーダルなど様々なBladeコンポーネントを使用しています。Livewireスタックを使っており、Jetstreamをインストールした後にこれらのコンポーネントをリソース公開したい場合は、vendor:publish Artisanコマンドを使います。

php artisan vendor:publish --tag=jetstream-views

アプリケーションのロゴ

Jetstreamのロゴが最上部のナビと同様に認証ページでも利用されていることに、皆さんお気づきでしょう。Jetstreamの2コンポーネントを変更すれば、ロゴのカスタマイズは簡単です。

Livewire

Livewire使用の場合、最初にLivewireスタックのBladeコンポーネントをリソース公開します。

php artisan vendor:publish --tag=jetstream-views

次に、resources/views/vendor/jetstream/components/application-logo.blade.phpresources/views/vendor/jetstream/components/authentication-card-logo.blade.phpresources/views/vendor/jetstream/components/application-mark.blade.phpにあるSVGをカスタマイズします。

Inertia

Inertiaスタック使用の場合、最初にJetstreamのBladeコンポーネントをリソース公開します。これらのコンポーネントは、認証テンプレートで使用されています。

php artisan vendor:publish --tag=jetstream-views

次に、resources/views/vendor/jetstream/components/authentication-card-logo.blade.phpresources/js/Jetstream/ApplicationLogo.vueresources/js/Jetstream/ApplicationMark.vueの中のSVGをカスタマイズしてください。コンポーネントをカスタマイズしたら、最後にアセットを再ビルドします。

npm run dev

ドキュメント章別ページ

スタック

ヘッダー項目移動

注目:アイコン:ページ内リンク設置(リンクがないヘッダーへの移動では、リンクがある以前のヘッダーのハッシュをURLへ付加します。

移動

クリックで即時移動します。

バージョン

設定

適用ボタンクリック後に、全項目まとめて適用されます。

カラーテーマ
和文指定 Pagination
和文指定 Scaffold
Largeスクリーン表示幅
インデント
本文フォント
コードフォント
フォント適用確認

フォントの指定フィールドから、フォーカスが外れると、当ブロックの内容に反映されます。EnglishのDisplayもPreviewしてください。

フォント設定時、表示に不具合が出た場合、当サイトのクッキーを削除してください。

バックスラッシュを含むインライン\Code\Blockの例です。

以下はコードブロックの例です。

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class User extends Model
{
    /**
     * ユーザに関連する電話レコードを取得
     */
    public function phone()
    {
        return $this->hasOne('App\Phone');
    }
}

設定を保存する前に、表示が乱れないか必ず確認してください。CSSによるフォントファミリー指定の知識がない場合は、フォントを変更しないほうが良いでしょう。

キーボード・ショートカット

オープン操作

PDC

ページ(章)移動の左オフキャンバスオープン

HA

ヘッダー移動モーダルオープン

MS

移動/設定の右オフキャンバスオープン

ヘッダー移動

T

最初のヘッダーへ移動

E

最後のヘッダーへ移動

NJ

次ヘッダー(H2〜H4)へ移動

BK

前ヘッダー(H2〜H4)へ移動

その他

?

このヘルプページ表示
閉じる