ウェブサービスのタマゴ

ウェブサービスやウェブシステムのタマゴを作ろう

お問い合わせサービスを作る（１）

お問い合わせサービスを作る

概要

お問い合わせサービスを作る過程を紹介します。
何回かに分けて投稿しますので、これは第１回になります。
要件の確認や各種インストールなどを説明します。

サービス内容

それでは、簡単な「お問い合わせサービス」を作ってみたいと思います。
簡単なお問い合わせフォームはメールを送って終わりのパターンもありますが、今回は管理画面も作ってお問い合わせ内容を操作できるようにします。
それでは要件を見ていきましょう。

要件

  • 機能
    • 利用者がフォームからお問い合わせができること
    • お問い合わせ内容がデータベースに記録されること
    • 管理者が管理画面にログイン／ログアウトできること
    • 管理者が管理画面からお問い合わせについて操作できること
      • 検索、一覧表示、詳細表示、削除
        • 管理項目は「名前」「メールアドレス」「お問い合わせ内容」
    • お問い合わせが登録された時に管理者にメールを送ること
  • 画面
    • 利用者用
      • トップ画面
        • お問い合わせ画面
        • お問い合わせ完了画面
      • 管理者用
        • ログイン画面
        • ダッシュボード
        • お問い合わせ管理画面（一覧、詳細）

今回使う言語やフレームワークなど

このサービスで使う言語やフレームワークなどを紹介します。

  • 言語 : PHP 8ç³»
  • ライブラリ管理ツール : composer 2.8.*ç³»
  • フレームワーク : Laravel 11.*ç³»
  • ライブラリ
    • laravel/breeze 2.*ç³»
    • askdkc/breezejp 1.*ç³»
    • barryvdh/laravel-debugbar 3.*ç³»
  • CSS関連

注意事項

  • ここから先は php と composer と nodejs と npm がインストール済みの環境を想定していますのでご注意ください
    • さくらレンタルサーバーでは nodejs を入れるのが難しいのでローカルPCã‚„VPSを使って開発を行う必要があります

サービス作り

では早速やっていきましょう！

プロジェクト作成

任意のディレクトリに移動し composer を使ってプロジェクトのひな型を生成します。
プロジェクト名は ContactService にしました。
この後の作業は全て作成された ContactServiceディレクトリ で行いますので、cd コマンドで必ず移動しておきましょう。

$ composer create-project laravel/laravel ContactService --prefer-dist "11.*"
$ cd ContactService

認証周りはbreeze

今回は全機能は使わないのですが認証周りはbreezeを使いたいと思います。
こちらも composer を使って入れます。

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

breezeの日本語化

breezeはラベルが英語なので日本語で表現できるようaskdkcさんのbreezejpを使わせて頂きます。

$ composer require askdkc/breezejp --dev
$ php artisan breezejp

デバッガーを入れる

デバッグに便利なツールも入れておきます。
こちらは動作に直接影響しないので入れなくても構いません。

$ composer require --dev barryvdh/laravel-debugbar

.envでロケールの変更

.envファイルを開いて下記のように編集を行います。
今回使わないものもありますが一通りやっておきましょう。

【変更前】
APP_TIMEZONE=UTC
APP_LOCALE=en
APP_FALLBACK_LOCALE=en
APP_FAKER_LOCALE=en_US

【変更後】
APP_TIMEZONE=Asia/Tokyo
APP_LOCALE=ja
APP_FALLBACK_LOCALE=ja
APP_FAKER_LOCALE=ja_JP

確認

最後に動作を確認します。
ターミナルを2つ開いて、片方は npm run dev を、もう片方は php artisan serve を実行してください。
それぞれ下記のような出力が出ていればOKです。ブラウザで http://127.0.0.1:8000 にアクセスしてみましょう。

$ npm run dev

  LARAVEL v11.35.0  plugin v1.1.1

  ➜  APP_URL: http://localhost
$ php artisan serve

   INFO  Server running on [http://127.0.0.1:8000].  

  Press Ctrl+C to stop the server

下図のような画面が表示されたらOKです。
終わらせる時はそれぞれのターミナルで ctrl+c を使ってください。

補足

最後の確認で使った npm run dev はviteを使ってcssやjsをhtmlで使えるようにするものです。またホットリロードにも対応しており、ファイルを編集すると自動的に反映してくれます。

また php artisan serve はローカルで簡易的なWebサーバーを動かしてくれます。これでブラウザからアクセスしてLaravelの動作確認ができます。

締め

今回はサービスに使うライブラリのインストールを行いました。
ほとんどコマンド実行だけなので待っている時間の方が長かったかもしれませんね。
参考になれば幸いです、ではまた次回