Laravel演習 01.PHP～Composerとlaravelのインストール

Laravelとは

Laravelを使いたいのでWin10上でセットアップを行いました。

LaravelはPHP用のフレームワーク。

PHPはWebアプリ分野で活躍している言語で、サーバー側で実行され、その結果をHTMLで容易に出力することができます。

WEBサーバーの定番ソフトウェアであるAppacheに標準で実装されています。

PHPでプログラムを書いていると、同種の機能、例えばデータベースへのアクセスなどに多様な命令を何度も書くことがあります。

PHPはこうした似たような命令文を皆が再利用できるように最大公約数的な形で外部に置くことができます。

これをクラスとかライブラリなどと呼びます。こうしたクラスやライブラリは代表的にはGitHubなどで世界中の開発者が利用できるように管理されています。

フレームワークはこうしたクラスやライブラリを自在に引用するツールです。

Laravelは特にWEBアプリの開発を念頭に置いて

①Model：データの処理を行う②View：ユーザーへのUI表示を行う③Controller：全体の制御を行う

３つの大カテゴリーを想定した開発と管理をサポートします。

Laravelを利用した開発環境をつくるためには、開発者のコンピューターに

・Xampp

・Composer

・Laravel

をインストールする必要があります。

Xamppのインストール

PHPは前述の通り、主にApacheを導入したサーバー側で実行されます。

その環境を開発者のコンピューター上に再現して開発を容易にするツールがXamppです。

公式サイト

https://www.apachefriends.org/jp/index.html

からインストールEXEをダウンロードして実行すればインストールと関連フォルダの展開が自動的に行われます。 まず最初にセットアップ項目の設定画面が表示されます。

「Next」でインストールするアイテムを選択します。

Xampp用のディレクトリを指定します。 ここではCドライブ直下「xampp」というフォルダを作りそこにxamppを展開します。

「Next」で次に進むと言語選択が表示されます。英語とドイツ語しかないので英語を選択します。

「Next」でインストーラーが起動します。さらに「Next」を押すとインストール準備完了殿インフォメーションウィンドウが立ち上がります。

インストールが始まります。

Windowsファイアウォールでインストールがブロックされるかもしれませんが「アクセスを許可する」で先に進みます。

インストールが完了します。

Do you want to start the Control Panel now? にチェックをいれて「Finish」を押します。 Xampp Control Panel が立ち上がります。 ここでApache と MySQL のStartボタンを押して起動させます。

Module列の「Apache」 と「MySQL」の背景色がグリーンになったらこの２つの主要サービスが稼働状態になります。

何も指定をしなければCドライブ直下に「xampp」というフォルダが出来上がっています。

その下にある「htdocs」フォルダ。（例　C:\xampp\htdocs）

この中に任意のphpファイルを置いてブラウザから実行してみてください。

http://localhost/xxxx.php/

CSSや関連ファイルがまだない状態だと不完全な表示になりますが、xxxx.phpがブラウザ上で実行されていることが分かるはずです。

Xampp Control Panel ウィンドウの「Quit」ボタンを押すことで終了します。 ただし、その前に「xampp」フォルダ内にある「xampp-control.ini」ファイルへのアクセス権限を変更させてください。

「xampp-control.ini」を右クリックしてプロファイルを選択し、開いたウィンドウにあるセキュリティタブを選択。

「編集」ボタンをおして「everyone」を選択した状態で下半分のアクセス許可欄のチェックボックスを全部「許可」にします。

この権限設定がなされていないとXampp Control Panelが終了できませんので注意してください。

Composerのインストール

次にComposerのインストールに移ります。

Composerはパッケージやライブラリの依存関係を管理するツールです。

PHPではバイキングのように利用できるパッケージやライブラリが豊富に用意されているのですが、一つの機能を実現させるために複数のパッケージやライブラリが必要になることがあります。

Composerはその組み合わせを自動的に行ってくれるのです。

インストールは簡単です。

公式サイト

から「DownLoad」ボタンを押すとダウンロード画面に遷移します。

その画面のWindows Installer の記述の中にある「Composer-Setup.exe」をクリックするとインストールEXEがダウンロードされますので、それを実行してください。

最初にインストールオプションを尋ねられます。 □Developer mode というのがあるようですが、無視して「Next」を押して次に移ります。

その次にセッティングチェックでPHP.exeのパスを尋ねられます。

Xamppのインストールが完了している場

この状態でComposerに実装されたcreate-project コマンドを叩きます。

C:\xampp\htdocs>composer create-project --prefer-dist laravel/laravel LaravelTest合はパスを自動的に探し出して表示してくれるようです。

正しいパスが入力されていることを確認して

□Add this PHP to your path? にチェックをいれ、「Next」で次に移ります。

次のプロキシ設定は注意してください。

インストール先のPCでプロキシを使用している場合は事前に

OSの環境変数の変更も必要です。

プロキシを使用していない場合はブランクのまま「Next」で進みます。

インストール条件がサマリになって表示されるので、正しいことを確認して「Install」ボタンを押します。

インストール完了前にインフォメーションウィンドウが表示されます。

インストール後、Composerを有効にするためにコマンド（プロンプト）を起動させろ、と。

あるいはPCを再起動せよ、と。

これを確認して「Next」を押します。

これでインストール完了。

この状態で、途中インフォメーションにあったようにコマンドプロンプトを立ち上げます。

どのディレクトリからでもいいので

C:\Users>composer とコマンドをたたくと

このような画面表示になるはずです。

これでインストールが正常に完了したことになります。

次にプロジェクトのルートディレクトリを作成します。

そしてそこにLaravelをインストールします。

ここでいう「プロジェクト」はXampp+Composer+Laravelの共同作業を行う作業場みたいなイメージでしょうか。

一般的にはxamppフォルダ配下、htdocsフォルダの中に任意のプロジェクト名をつけたフォルダを作ることが多いようです。

このフォルダ、手作業で作成する必要はありません。

上述したように例えばhtdocsフォルダの中に任意のプロジェクト名、ここではLaravelTest を作る場合。

まずはコマンドプロンプトでhtdocsディレクトリに移動します。

C:\Users>cd C:\xampp\htdocs

この状態でComposerに実装されたcreate-project コマンドを叩きます。

C:\xampp\htdocs>composer create-project --prefer-dist laravel/laravel LaravelTest

--prefer-dist は必須ではありませんが、このオプションが入ることでインストールが速くなるらしいです。

で、最後の「LaravelTest」がプロジェクト名。任意に決めた名前を入力します。

Returnを叩くとLaravelのインストールが始まります。

この手順でインストールを行うとcomposerのインストール情報が記述されたcomposer.json というファイルがLaravelTestフォルダ内に作成されます。

このcomposer.jsonが設計図となってインストールファイルやフォルダの展開がなされます。 なお、インストール完了後はcomposer.jsonはその役目を終え、その後のメンテナンスに際には新たに作成されるcomposer.lock というファイルがsの役目を引き継ぎます。

インストールが完了したら、アルチザン(artisan)が有効になっているか確認します。

artisan はLaravelで利用できるコマンドライン集のようなものです。

artisan はファイルとしてhtdocs→LaravelTestディレクトリにファイルとして実装されていますから

cmd上、cdで

C:\xampp\htdocs>cd C:\xampp\htdocs\LaravelTest とディレクトリを移動して、

C:\xampp\htdocs\LaravelTest>php artisan serve とコマンドを叩きます。

これでartisanサーバーが立ち上がります。

サーバーURLが表示されますので、ここでは「http://127.0.0.0:8000」をブラウザに入力して開きます。

このような画面が表示されたら、artisanが有効になったということです。

artisanサーバーを終了させる場合はcmdでctr+C を叩きます。

これでLaravel の導入は一段落です。

BootStrapについて

Bootstrap とは、米 ツイッター （Twitter）社が開発した オープンソース のWebアプリケーションフレームワークです。

Bootstrapにはフレームワークとして、Webデザインの際によく利用されるHTML／CSS／JavaScriptの構文があらかじめ定義されています。初心者の方であっても、Bootstrapに沿ってデザインするだけで、見栄えの良いWebページを作成することが可能です。

LaravelではVer6までこのBootstrapが標準で利用できました。

Ver7以降は個別にインストールする必要がありますので、ここでインストールを行います。

Bootstrapのインストールは以下の手順で行います。

①Node.js をダウンロードする

　　Node.js は本来ブラウザ上で動くJavaScriptをサーバーサイドで動かすためのツールです。

　　https://nodejs.org/ja/　にアクセスします。

　　推奨版とあるので14.17.3 LTS をダウンロードします。

②Node.js をインストールする

　　ダウンロードしたmsiファイルをクリックします。.msi拡張子のあるファイルはWindowsのソフトウェアのインストーラーです。

　　ウィザードに従いインストールを進めます。

　　Program Files フォルダにnodejsフォルダを作成し、そこに収容します。

ウィザードに従いインストールを進めます。

　　このウィザードは意味不明ですが、Nextを押して先に進みます。

　　Install ボタンを押します。

　　Install 完了　「Finish」を押します。

　　Programに追加されていることが確認できます。「Node.js command prompt」にも注目します。

③Node.js を環境変数に追加する

　　Node.js Command Prompt を立ち上げます。立ち上げるだけでNode.jsが環境変数に追加され、nodeコマンド、npm(Node Package Manager)コマンドが使えるようになります。

　　npm はNode Package Manager のことで、Node.jsのパッケージを管理するツールです。

　　node --version を叩いてみます。次いでnpm --version も。いずれもコマンドが有効であることが確認できます。

④LaravelにBootstrapを導入する

　　次いで、LaravelにBootstrapを導入します。アプリケーション（プロジェクト）の所定のディレクトリに合わせて

　　composer require laravel/ui と叩きます。

　　bootstrap関連のファイルがプロジェクト内に展開されます。

　　次いでこれらのファイルに対してLaravel側からインターフェースを設営します。

　　php artisan ui bootstrap と叩きます。

　　Bootstrap scaffolding installed successfully. と表示されインターフェースの設営が完了したことを確認します。

④LaravelにBootstrapを導入する

　　次いで npm install && npm run dev を叩きます。

　　ただし、Power Shell では'&&'という区切り文字が有効ではないようなので、このコマンドはCMDから打ちます。

　　変なERR! が最後でてきますが、Finished. Please run Mix again. と出てくるのでnpmのインストールは完了しているとみなします。

以上でBootstrapのインストールからLaravelへの導入は完了です。

以降、時期をみてLaravel関係の記事を掲載する予定です。お時間がございましたらご照覧ください。