Laravel開発話
更新日 : 2020年9月1日
投稿日 : 2020年3月31日

Web Homeを作ったときの思考やその手順などを公開

Web Homeを作ったときの思考やその手順などを公開の画像

こんにちわ、PHPエンジニアのエンジニア婦人(@naho_osada)です。
私はPHPエンジニアとして7年~の経験があります。WordPressは2年半~の経験があります。その他、jQuery、HTML、CSSも使用します。
ここでは主に過去に納品した案件や自サイト運営(エンジニア婦人ノート)で遭遇したことについて書いています。

2020年3月のこと。
Webアプリリリースしよう祭り(意訳)がある((3/9~3/15)1週間でWebサービスを作るイベント – お題「Home」)らしい」
と聞いて参戦したのが事の始まりでした。

本記事では超短期間でリリースまで行った、このWeb Homeアプリケーションの開発にあたっての思考順やその手順を追って書いていきます。

新しく何かを作って公開したい方の参考になれば幸いです(‘ω’)ノ

開発概要

使用したもの

  • Laravel 7
  • PHP7.4
  • Sass
  • mariaDB

制作時間

合計約8~9時間です。おおよそ

  • 設計…30分
  • テーブル作成、データ登録…2時間
  • 実開発作業…3時間
  • 本番適用、及び適用後の調整…3時間

だったかと思います。

思考

このお題を聞いてからの思考プロセスをざっくり書いていきます。

お題から浮かんだもの

Home…おうち…おうちを建てるのは難しい。
それならインターネット上のおうちっていうのがいいかな!

おうちについて考える

おうちというからには、「おかえり」って言ってほしい。帰ってきたら何はともあれ「おかえり」。
おかえりって言ってくれるアプリにすればいいかな?
ただおかえりっていうだけだとすぐに飽きるから、メッセージを色々変えられるようにしよう!

↑今回はここまで早かった。

技術選定

期限がかなり短いし、やたらに作りこむのは絶対になし。それなりの状態でリリースすることが目的。jsは今回は使わない。

正直おかえりのメッセージをランダムに表示するだけだったら、べたPHPでも問題なく作れるけど、ここは開発速度重視と、勉強を兼ねてLaravel+MariaDBを選定。

表示の流れを考える

アクセス→「おかえりなさい!」ランダムメッセージ表示

その他、アクセスした時間がわかるといいな。
古のアクセスカウンターもあると面白いかも。延べ人数で何人おうちに帰ってきてるか数えられるね。

開発

GitHubにLaravelソースを登録

差分取るため、先にGitHubでリポジトリ作って登録しておく。そのソースを元に開発(git cloneした)していくことにした。

テーブル構造

ここもシンプルに。ID、メッセージ、登録日があれば十分。

とりあえずLaravelで表示してみる

導入して、データベース接続、テーブルからメッセージをランダムに1件取得して現在日時と一緒に表示。

できた。なんてことない。

追加機能を思いつく

アクセスした時間を表示するなら、時間帯でサブメッセージを出したら面白いよね?

もう一つテーブルを作る。ID、メッセージ、時間ID(6~9時など時間帯分けを決めて作ったID値を格納)、登録日。

サブメッセージを表示する

アクセス時間を取得して、その時間帯に属するIDをランダムに1件取得。基本おかえりメッセージと一緒に表示。

できた。これも問題ない。

見た目を調整する

ただの白背景に文字列が並んでいるだけでリリースしても何にも面白くないので、CSS調整。スマホ対応も当然やる。

Sassに手を出す。レスポンシブを書くときの便利さに感動する。コンパイルも慣れないながらやる。

アットホームな雰囲気を出したかったので、優しい緑色、人が話している風を取りたかったので笑ってるアイコンを探してくる。ふきだしも作った。

構想から着工して、一番時間がかかったのは実はこの「見た目の調整」。

特に描き出してはおらず、自分の脳内イメージと実際のギャップを調整しながら作ったから。

おうちのアイコンを作る

せっかくなのでfavicon.icoを作ることにした。といってもそれ専用のソフトは持っていないので、ペイントでマウスフリーハンドで描いた。ほんわか落書き風の適当な優しそうな感じでできたと思う。

これも時間がかかった方。ちょっとこだわった。

リリース作業

さくらのレンタルサーバーにアップロードする手順を参考にして、実行。

初のフレームワークを使用したプログラムの公開のため、かなり時間がかかった。

画像のファイルパスなどの調整がてこずった感。開発状態では表示されても公開後にパスがずれたりするのね。諸々の時間の半分以上は公開作業にもっていかれた印象…

リリースにあたってとても助かったサイト「Laravelをさくらインターネットのレンタルサーバにデプロイ・アップロードする方法をまとめてみた

git cloneで更新した内容をすぐに反映できるなんて便利な世の中だ。

そして本公開

完成したWebHome

初めてフレームワークを使ったシステムの公開をしたので、ちょっと時間がかかりました。

この記事を書いていた時のおうち

この記事を書いていた時のWebHome

おかえりなさい、ご主人様!
…一度くらい、言ってみたいですよね。え、そんなことない?

Web Home

朝から頑張ってると、この時間は気を緩めたくもなるよね。お疲れさま。
ちょっとお散歩してくる?

Web Home

おうちはいつでも待っています。