ChromeBookでWebアプリを作成する方法（Laravel）

ChromeBookでWebアプリは作れのる？
どうやって作ればいいの？

こんな疑問にお答えします。

ChromeBookではWebアプリが作れます。

今回は、PHPのLavarelというフレームワークを使います。

Laravelとは

LaravelとはPHPでWebアプリを作るときのフレームワークです。

公式サイト

Laravelを使うことによって簡単にWebアプリを作ることができます。

ChromeBookでLaravelを使う

準備

Linuxのターミナルを開いてコマンドを実行していきます。

sudo apt-get update

sudo apt-get upgrade -y

sudo apt-get install php -y

sudo apt-get install php-zip -y

sudo apt-get install php-xml -y

※追記：php-mbstringをインストールする。

sudo apt-get install php-mbstring -y

※追記：composerのインストール方法を最新版のバージョン2がインストールされるように変更する。下記のapt-getでのインストールはやめる。

sudo apt-get install composer -y #この方法はやめる

apt-getでのインストールはバージョン2が入らないので下記の方法でインストールする。

すでにapt-getでインストールしてしまった場合は下記コマンドでcomposerを一旦削除する。

sudo apt-get remove composer;

下記コマンドであたらめてcomposerをインストールする。

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"

sudo php composer-setup.php --install-dir=/usr/bin --filename=composer;

composer self-update;

php -r "unlink('composer-setup.php');"

composer global require laravel/installer

プロジェクトを作成

下記コマンドでプロジェクトを作成します。

composer create-project --prefer-dist laravel/laravel blog

「blog」の部分がプロジェクトの名前です。好きな名前でOKです。

僕の場合は、バージョン7がインストールされました。

バージョン7を指定してプロジェクトを作成したい人は下記コマンドを実行してください。

composer create-project "laravel/laravel=7.*" blog

Laravelはバージョンによっていろいろと変更になっている部分があります。

そのため、バージョンを指定してプロジェクトを作成したほうがいいです。

今回はバージョン7を対象に説明していきます。

アプリを起動する

下記コマンドで作成したプロジェクトディレクトリ に移動します。

cd blog

下記コマンドでアプリを起動します。

php artisan serve

URLが表示されるのでブラウザでアクセスします。

http://127.0.0.1:8000

▼ブラウザで開く

画像のように表示されればOKです。

VSCodeで編集する

▼VSCodeでフォルダを開く

VSCodeで作成したプロジェクトフォルダ（blog）を開いて編集しましょう。

データベースにSQLiteを設定する

ローカルで開発するときはSQLiteというデータベースが使いやすいです。

はじめはMySQLになっているのでSQLiteに変更します。

ターミナル で下記コマンドを実行してSQLiteを入れます。

sudo apt-get install php-sqlite3 -y

SQLite用のファイルを作成します。

プロジェクトディレクトリ（blog）の「database」フォルダに「database.sqlite」ファイルを作成します。

空のファイルでOKです。

コマンドでファイルを作成する場合は下記コマンドを実行します。blogフォルダの中で実行してください。

touch database/database.sqlite

次に、「.env」ファイルを編集します。

DB_CONNECTION=sqlite
#DB_CONNECTION=mysql
#DB_HOST=127.0.0.1
#DB_PORT=3306
#DB_DATABASE=laravel
#DB_USERNAME=root
#DB_PASSWORD=

「DB_CONNECTION」の部分を「sqlite」にします。

「DB_」で始まる他のところは「#」 でコメントアウトします。

これでSQLiteを使う準備は完了です。

実際にDBにテーブルを作成するときは下記のコマンドを実行します。

php artisan migrate

はじめはユーザ登録用のテーブルが用意されているので実行するとそれらのテーブルが作成されます。

データベースの中身を確認したい人はChromeBookにDBクライアントソフトTablePlusをインストールする方法をみてください。

ユーザ登録機能を有効にする

下記のコマンドを実行していきます。

Laravel7の場合は下記を実行します。

composer require laravel/ui
php artisan ui vue --auth

Laravel6の場合は下記を実行します。

composer require laravel/ui "^1.0" --dev
php artisan ui vue --auth

Laravel8の場合は下記を実行します。Laravel8は認証機能作成にいくつか種類があります。１番手軽なbreezeを使う場合を説明します。

composer require laravel/breeze --dev
php artisan breeze:install

下記コマンドでWebアプリを起動して確認します。

php artisan serve

▼Webアプリを確認する。

右上に「LOGIN」と「REGISTER」ができていればOKです。

▼「REGISTER」をクリックします。

画面がなんだか変だと思います。

これを直します。

下記コマンドをホームディレクトリで実行していきます。

curl -sL https://deb.nodesource.com/setup_lts.x -o nodesource_setup.sh

sudo bash nodesource_setup.sh

sudo apt-get install nodejs -y

下記コマンドをプロジェクトディレクトリ （blog）の中で実行してください。

npm install && npm run dev

これで完了です。

直っているか確認しましょう。

Webアプリを起動するときは下記コマンドです。

php artisan serve

▼デザインがきれいになっているか確認する。

画像のようになっていればOKです。

▼ユーザ登録してみよう。

▼ホーム画面が表示されればOKです。

これで完了です。

Laravelの勉強方法

公式サイトが一番勉強になります。

公式サイト

英語が苦手な場合は下記サイトがいいです。日本語で説明してくれているサイトです。

日本語にしてくれているサイト

本でも勉強できます。

Laravelを本で勉強

まとめ

ChromeBookでLaravelを使う方法を解説しました。

LaravelでいろいろなWebアプリを作ってみましょう。