☆Yuus Memo☆
非エンジニアの方でも業務を効率化できるプログラムを紹介します!
Laravel

Laravel + Vue.jsでGoogleカレンダーのクローンを作ろう!!【Laravel8対応】準備編

皆さんこんにちは!!
今日から何回かに分けて、Laravel8とVue.jsを使用して「スケジュール管理アプリ」を作成したいと思います。
簡単に言えば、「Googleカレンダーのクローン」を作成していくチュートリアルです。

WEBアプリケーションにスケジュール管理機能を組み込む場合、「FullCalendar」を利用することが多いと思いますが、今回はFullCalendarなどは使用しません。

LaravelとVue.jsは非常に人気が高いので、多くの解説記事やチュートリアルが出ています。
ただ、どれも小さなサンプルを作ったり、解説が断片的で、実際の開発に活かせないものが多いです。

今回から皆さんと作る「Google Calendar Clone」は、LaravelやVueを触ったことがない方には少し難しいかも知れませんが、中規模のアプリケーションを開発することで、LaravelやVue.jsを理解することができ、実際の開発でも活用できると思います。

分からない部分があったら、コメントいただければ解説します。
また、コードがおかしい部分などのご指摘もお待ちしております!

このチュートリアルで学べること
  • LaravelによるAPI開発
  • Laravelで複数のテーブルを扱う
  • Vue.jsによるフロントエンド開発
  • LaravelとVue.js(フロントエンド)との連携
  • Vue.jsの状態管理ライブラリ「Vuex」の使い方
  • Vue.jsのUIライブラリー「Vuetify」の使い方
  • 複数のコンポーネントを扱ったフロントエンドの開発
  • axiosを使用したサーバーサイドとの通信

作成する「スケジュール管理アプリ」の画面説明

チュートリアルを始める前に、今回作るアプリケーションの画面と機能をざっくりと紹介します。
結構多く感じますが、スケジュール管理を行うにはどれもあったほうが良い機能なので、皆さんも頑張って実装しましょう!


login

ユーザー別のカレンダー管理

Laravel/uiを使用して、簡単にユーザー登録などの認証機能を実装します。

ユーザー単位でカレンダーを利用できるようにする為です。

Laravel/uiでインストールされる画面は今回の開発では、そのまま利用します。

Vueの導入が簡単なのと使用するファイルが少ないので、Laravel/uiを利用しますが、今回の開発ではLaravelはAPIサーバーとして利用する事が主なので、Jetstreamなどで認証機能を作成して頂いても問題無くチュートリアルを進行できます。

実務でLaravelの認証機能を利用される方は、Jetstreamなどの認証機能を利用するようにして下さい。


monthly-calendar

「カレンダー月表示」

カレンダーの月表示です。
今回のホーム画面です。Laravel/uiで作成されるホーム画面を利用して、中身をVue.jsでSPA構築していきます。

ユーザーがログインすると、この画面が開きます。


week-calendar

カレンダー「週表示」

カレンダーの週表示です。
矢印ボタンで前後の週へ遷移します。

画面右上の「セレクトボックス」でカレンダーの表示を切り替えます。


day-calendar

カレンダー「日表示」

カレンダーの日別表示です。

矢印ボタンで前後の日のデータへ遷移します。

表示の切り替えは全て、Vue側でおこないます。


plan-create

予定タイプの設定

カレンダーに入れる予定の種類を設定できるようにします。

予定のタイプでフィルターが出来る様にすることで、アプリを使いやすくします。


event-edit

予定の作成編集

予定をクリックなどした際に、ダイアログを開き、予定の編集や削除、作成を行えるようにします。

予定タイプで色分けは行いますが、予定単体でも色付けを出来る様に作っていきます。


timeline_view

1日の予定の一覧

一日の予定の一覧画面をダイアログで実装します。

TimeLine表示する事で1日の予定を見やすい形にします。

日付をクリックする事で表示されるようにします。


一応、今回考えている機能としてはここまでですが、希望があれば、番外編で「Googleカレンダーと連動」させる機能なんかも解説するかも知れません。

GoogleカレンダーとLaravelを連携させる解説記事は多いのですが、「env」にAPI接続情報を直接書いている記事が多く、ユーザー単位で連携させる解説記事が無かったので、希望があれば解説します。

環境構築+Laravelプロジェクトの作成

前置きが長くなりすぎましたが、そろそろ開発を始めましょう!!
Laravelが動作する環境は用意できているものとして解説していきます。

MACの方だったらMAMPを利用すると簡単です。
Windowsの方はXAMPPを利用すると良いと思います。

もちろんDockerなどの仮想環境を利用されても良いので、皆さんのやり易い形で用意してください。

Laravelプロジェクトの作成

ターミナル若しくはコマンドプロンプトなどを開き、WEBルートディレクトリへ移動してください。
※LINUX環境だと「/var/www/html/」MAMPだと「/Applications/MAMP/htdocs/」などです。

以下のコマンドを実行してLaravelのプロジェクトを作成してください。

Laravelの開発にはComposerが必須になります。
インストールができていない場合、こちらの記事を参考に環境構築を行ってください。

composer create-project --prefer-dist laravel/laravel my-calendar

上記コマンドを実行するとLaravelのプロジェクトが作成されます。
私の環境では、laravel/laravel (v8.6.2)でプロジェクトが作成されました。

データベース作成

Laravelの初期設定を行う前に、データベースを作成しておきます。
データベースは何でも良いのですが、今回私はMAMPを利用しているので、MariaDBで進めます。

MAMPを立ち上げて、「http://localhost/phpmyadmin/」へアクセスして、データベースを新規作成してください。

phpmyadmin

データベースの作成

今回私は、my-calendarという名前でデータベースを作成しました。

お好きな名前で空のデータベースを作成してください。

Laravelの初期設定

先ほど作成したLaravelプロジェクトをエディターで開いてください。
VisualStudio Codeか、PHPStormなどがおすすめです。

プロジェクトの直下に「.env」というファイルがあるのでエディターで開き、次のように編集してください。

APP_NAME="Google Calendar Clone"
APP_ENV=local

#中略

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=my-calendar  #データベース名
DB_USERNAME="データベースユーザー名"
DB_PASSWORD="データベースパスワード"

データベースへの接続情報を変更します。

続いて、「config/app.php」を開き、下記の部分を変更します。

    'timezone' => 'Asia/Tokyo', 
    'locale' => 'ja',     
    'faker_locale' => 'ja_JP',

ずらずら長いファイルですが、基本的に1つの連想配列で設定を返しているファイルです。
日本環境で利用するために、上記のように変更してください。

ここまで設定が終わったら、ターミナルで次のコマンドを実行してください。

cd my-calendar/
php artisan serve

ブラウザーで「http://localhost:8000」へアクセスして、次の画面が表示されればOKです。

Vue.jsの環境について

今回は、「Vuetify」を利用するので、バージョンは「2.~」を利用します。

おそらく、この記事を読まれている方はNodeの環境が作成済みだとは思いますが、まだの方は、下記のコマンドをターミナルで実行してインストールしてください。
※既に環境ができている方は読み飛ばしてください。

nodenvはNode.jsのバージョンの管理や切り替えを簡単にできるツールです。

brew install nodenv
echo 'eval "$(nodenv init -)"' >> ~/.bash_profile
source ~/.bash_profile
nodenv -v

これでnodenvのバージョンが表示されればOKです。

私は、nodenvを利用しますが、お手元のPCにnodeのバージョン管理ができるツール(nodebrewなど)があればそちらを使われても大丈夫です。

続けてターミナルでNode.jsをインストールしていきます。

nodenv install -l # 利用可能なバージョンを調べる
 nodenv install 14.8.0
nodenv rehash
nodenv global 14.8.0
nodenv versions
node -v

最後に「v14.8.0」が表示されれば大丈夫です。
※バージョンは私は14.8に指定しましたが、今回のチュートリアルではあまり関係がありません。


WINDOWSでのNode.jsインストール

Node.jsのインストーラーは公式サイトからダウンロードできます。今回は、推奨版をダウンロードしていきます。

推奨版をダウンロードしてください。
2021年9月現在、14.17.6が推奨版になっています。

インストーラーをダウンロード後、実行してください。インストーラーを実行すると、指示に従って進めていきましょう。

途中で設定を変更できる箇所がありますが、基本的に変更する必要はありません。 以下に示す項目のみ、設定を変更しましょう。 注釈の付いているチェックボックスを選択してください。
最後に「Finish」ボタンを押してください。

自動でコマンドプロンプトが立ち上がりますが、何かのキーを押すと自動で処理が進みます。

PC再起動後、コマンドプロンプトで次のコマンドを実行してください。

 node -v

バージョンが表示されればインストールはOKです。

準備編のまとめ

お疲れ様でした!!
これで開発を進める準備ができました。

次回は、「APIの開発」を行っていきます。
Laravelで必要になるテーブルとJSONを返却するメソッドなどを書いていきます。

準備が大変で先が長く感じてしまいますが、APIの開発を始めていくと楽しくなってくると思いますので、気長に頑張っていきましょう!!

「こんな機能があったら良いな」みたいなコメントをいただければ、併せて実装しながら解説しますので、お気軽にコメントください。

それでは次回をお楽しみに!!

以前紹介しましたが、下記の書籍で「Vue.jsを利用してGoogleカレンダーのクローン」を作成しています。

今回作成するものと違い、サーバーサイドとの連携はありませんが、フロントエンドの学習には、とても良い書籍です。

Vue.jsの書籍で現在、最もおすすめできる書籍です。
よければ読んでみてください!

コメントを残す