この度、タスク管理とポモドーロ・テクニックを組み合わせたタスク管理アプリ『ToDoRo（トゥードーロ）』をリリースしました！ Laravel + Vue.js + Terraform + CircleCI + Fargate という技術スタックの個人開発プロダクトはあまり見かけなかったので、自分の成果物が誰かの役に立てば幸いです。 また、開発期間も1年2か月と長期間になってしまったので、長期間の開発を続けるコツもお伝えできたらと思います。 プロダクト：『ToDoRo（トゥードーロ）』 GitHub：Soh1121/ToDoRo: タスク管理アプリ『ToDoRo』 開発期間：約1年2か月 『ToDoRo』とは？ 『ToDoRo（トゥードーロ）』は、仕事や学習に集中して取り組むことを手助けするタスク管理アプリです。 ToDoリストとポモドーロ・テクニック（25分の集中と5分の休憩による時間管理）を組み合わせ、メリハリを付けてタスクに取り組む事ができます。 使用技術 業務で外部に依頼した技術は自分でも触れるようになるため、様々な技術スタックに挑戦しました。 バックエンド PHP 7.4.6 Laravel 8.54.0 フロントエンド HTML Sass JavaScript axios 0.21.1 Vue.js 2.6.11 Vue CLI 4.5.13 vuex 3.4.0 vuetify 2.3.0 vuerouter 3.3.2 インフラ GitHub Docker／Docker Compose MySQL 5.7.30 NGINX 1.20 CircleCI 2.1 ecspresso 1.3.2 Terraform 1.0.1 AWS(VPC, ACM, Route53, IAM, ALB, ECR, ECS(Fargate), RDS, ElastiCache(Redis), S3, CloudWatchLogs, Parameter Store) テスト／静的コード解析 PHPUnit 9.5.8（テスト） PHPStan 0.12.94（静的コード解析） ESlint 6.8.0（静的コード解析） Prettier 1.19.1（コードフォーマッター） アーキテクチャ図 このアーキテクチャは、技術書同人誌を参考にしながら作成しました。 書店で売られている書籍以外にも役立つ書籍がゴロゴロある。 IT技術の魅力のひとつに、知見を自分の中に溜め込まないコミュニティの広さがあると感じました。 参考書籍：TerraformでFargateを構築してGitHub Actionsでデプロイ！Laravel編 ER図 自分なりに第一正規化〜第三正規化まで行ったつもりで作成したER図です。 ただ、途中で実現しようとした機能がデータ不足で実装できない事態に陥り、途中で色々と変更したので、正規化が崩れているかもしれません。 設計段階で完璧にできれば苦労しませんが、完璧を目指しすぎても失敗したときのダメージが大きいので、ほどほどのところまでで進めていくほうが良いと感じました。 機能一覧 利用のハードルを下げるため、一部の機能はJavaScriptでも実装し、ユーザー登録なしでも利用できるようにしました。 JavaScriptでの実装に思いの外時間がかかってしまいました… これをやらなければもう3か月は早くリリースできていたと思います。 ユーザー機能（PHP） 新規登録 ログイン ログアウト タスク機能（PHP/JavaScript） タスク登録／参照／更新／削除 完了・未完了切り替え ポモドーロ数カウントアップ タイマー時間記録 プロジェクト（タスクのカテゴリ）登録／参照／更新／削除 コンテキスト（タスクを実施する場所・時間など）登録／参照／更新／削除 表示絞り込み ポモドーロ機能（PHP/JavaScript） タイマー管理（４回集中したら１５分の休憩） １日のポモドーロ数管理（タイマー管理実現のため） タイマーカウントダウン タイマー時間セット タイマー時間リセット アラーム音再生 その他の機能 レスポンシブ対応 全ページSPA 開発背景 ここで少し開発背景をご紹介します。 「やりたいことがたくさんあって、いくら時間があっても足りない…」 日々このような悩みを抱えながら過ごしていました。 そこから、効率的にタスクに取り組んだり、集中力を高める方法などを調べているうちに、「タスク管理」と「時間管理」がどんどん切り離されていました。 「タスク管理はあのアプリ（ToDoアプリ）」、「時間管理はこのアプリ（カレンダー・タイマーなど）」と、２つのアプリを行ったり来たりする中で、「１つにまとめたい…！」という思いが生まれ、このアプリの開発に着手しました。 こだわった点／工夫した点 上記のような思いから、以下のようなこだわった点／工夫した点を持って取り組みました。 レスポンシブ対応し、PC・スマホ・タブレットから利用可能に 画面を行ったり来たりしても、なるべくエラーが出ないよう配慮 途中でデバイスを変更できるようなデータの持ち方に 1年2か月という長期に渡る開発 あまりいないと思うので、1年2か月という長期に渡って個人開発した感想と、振り返ってどうしたら良かったかを考えてみたいと思います。 はじめは半年くらいで完成を目指そうと思っていたのですが、ずるずると先延ばしになって、結局1年2か月という月日がかかってしまいました。 周りを見渡すと、短期的にコミットして完成させる方が多く、正直焦りの気持ちは大きかったです。 そのような中で開発を続けられたのは、以下の要因が影響したと考えています。 GitHubにおけるIssue管理 タスクはIssue管理し、IssueはProjectでざっくりとどのようなステータスかを記録しました。 働きながらで時間が取れないことも多々ありましたが、おかげで作業できない期間が長くあっても、作業の流れを追いながら開発も行うことができました。 コミットメッセージに#<issue Number>でIssueに作業を紐付けることができるので、付与しておくことをおすすめします。 テスト駆動開発 テストファーストで開発を進める「テスト駆動開発」に何度も救われました。 テストを作成しながら実装を進めることで、テストが充実し、途中で意図しない動作に変わっていることに気付く機会が何度もありました。 手間だからとテストを書いていなければ、恐らく途中でどこがおかしいかわからない状況になり、挫折していたことでしょう。 自分の考えを整理するのにも役立つので非常におすすめです。 まとめ 長期間の開発は辛いものもありましたが、無事完成したときの喜びはひとしおです。 自分の手で何かを作り上げていく作業、新しいことを学ぶこと、うまくいかないことが解決した瞬間をたくさん味わえるWeb開発は最高だなぁと改めて感じております。 ここで終わりにせず、引き続き機能を充実させたり、おかしなところを改善したり、コードを整理したりしながら育てていけたらと思います。 最後に、この開発を通して自分が言いたいことは GitHubを使うのであれば、Issue管理をしましょう！ テストはあとから書くのではなく、書きながら実装しましょう！ です。ご覧いただきありがとうございました！ ぜひ『ToDoRo』を利用してみてください。

はじめに laravelのログ出力にはmonologで実装されています。 今回は、このmonologのフォーマットを変更する際にデフォルトだと出力されていたスタックトレースが表示されなくなったので記事として残します。 環境 PHP 8.0.8 Laravel 8.33.1 スタックトレースが表示されないコード まずはわかりやすいように公式ドキュメントに書かれてあるコードを使わせて頂きます。 <?php namespace App\Logging; use Monolog\Formatter\LineFormatter; class CustomizeFormatter { public function __invoke($logger) { foreach ($logger->getHandlers() as $handler) { $handler->setFormatter(new LineFormatter( '[%datetime%] %channel%.%level_name%: %message% %context% %extra%' )); } } } 上記のコードだと確かに意図したフォーマットに変更されるのですが、スタックトレースが表示されなくなってしまいます。そこでmonologのLineFormatterのクラスにはスタックトレースを表示するかしないかを決めることができるincludeStacktracesメソッドがあることがわかりました。下記参照? monolog このメソッドを実行してあげることでスタックトレースが表示されるようになります。 スタックトレースが表示されるコード <?php namespace App\Logging; use Monolog\Formatter\LineFormatter; class CustomizeFormatter { public function __invoke($logger) { foreach ($logger->getHandlers() as $handler) { $format = '[%datetime%] %channel%.%level_name%: %message% %context% %extra%'; $formatter = new LineFormatter($format, null, true); $formatter->includeStacktraces();// ここが必要 $handler->setFormatter(new LineFormatter($formatter); } } } 上記のように感じでLineFormatterクラスのインスタンスを生成後にincludeStacktracesのメソッドを実行してあげます。引数はデフォルトがtrueなので特に渡す必要はありません。これで無事にスタックトレースが表示されるようになると思います? おわりに もし僕のようにスタックトレースが表示されなくて困った方がいましたらその方の助けになればと思います?‍♂️ もし今回の内容について誤りがありましたらご指摘いただければ嬉しいです。お読み頂きありがとうございました！ 参考資料 公式ドキュメント monolog

PHP・Laravelで作成したアプリをAWSのEC2へデプロイする際に、本番環境では常にHTTPS通信を行うことになると思います。 何も設定しないとHTTP通信になってしまうので、この記事ではLaravelをセキュア(=暗号化)な状態で通信するための設定を記載します。 環境の設定 config/app.php 'env' => env('APP_ENV', '〇〇〇'), 〇〇〇の箇所について、開発環境の場合（ローカルで開発する際）はlocal、本番環境の場合（デプロイする際）はproductionにしてください。 ここを設定することで、開発環境か本番環境のどちらか切り替えることができます。 URLをhttpsにする AppServiceProvider.phpを下記のように追記してください。 app/Providers/AppServiceProvider.php <?php namespace App\Providers; use Illuminate\Support\ServiceProvider; use Illuminate\Support\Facades\URL; //追記 class AppServiceProvider extends ServiceProvider { //略 public function boot() { // ここから追記 if (config('app.env') === 'production') { URL::forceScheme('https'); } // ここまで追記 } } これで開発環境の時のURLがhttp、本番環境の時のURLがhttpsになりました。 本番環境において、httpでアクセスされた際にhttpsへリダイレクトさせるための処理 middlewareの作成 次のコマンドを実行してmiddlewareを作成します。RedirectToHttpsの箇所はご自身が作りたいクラス名を記載してください。 $ php artisan make:middleware RedirectToHttps 作成されたRedirectToHttps.phpを下記のように追記してください。 app/Http/Middleware/RedirectToHttps.php <?php namespace App\Http\Middleware; use Closure; class RedirectToHttps { /** * Handle an incoming request. * * @param \Illuminate\Http\Request $request * @param \Closure $next * @return mixed */ public function handle($request, Closure $next) { // ここから追記 //このhandleメソッドで判別 if (!$this->is_ssl() && config('app.env') === 'production') { return redirect('https://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']); } // ここまで追記 return $next($request); } // ここから追記 //Webサーバー毎にキーと値で判別 public function is_ssl() { if (isset($_SERVER['HTTPS']) === true) { // Apache return ($_SERVER['HTTPS'] === 'on' or $_SERVER['HTTPS'] === '1'); } elseif (isset($_SERVER['SSL']) === true) { // IIS return ($_SERVER['SSL'] === 'on'); } elseif (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) === true) { // Reverse proxy return (strtolower($_SERVER['HTTP_X_FORWARDED_PROTO']) === 'https'); } elseif (isset($_SERVER['HTTP_X_FORWARDED_PORT']) === true) { // Reverse proxy return ($_SERVER['HTTP_X_FORWARDED_PORT'] === '443'); } elseif (isset($_SERVER['SERVER_PORT']) === true) { return ($_SERVER['SERVER_PORT'] === '443'); } return false; } // ここまで追記 } Kernel.phpに登録 先程作成したRedirectToHttps.phpの内容を反映させるために、Kernel.phpのprotected $middlewareに追記します。 app/Http/Kernel.php // 略 protected $middleware = [ \App\Http\Middleware\TrustProxies::class, \App\Http\Middleware\CheckForMaintenanceMode::class, \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class, \App\Http\Middleware\TrimStrings::class, \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class, \App\Http\Middleware\RedirectToHttps::class, // 追記 ]; // 略 補足 全プロキシを信用 全プロキシを信用するために、TrustProxies.phpに*を追記します。 app\Http\Middleware\TrustProxies.php protected $proxies = '*'; 詳細は信用するプロキシの設定を確認してください。 CSSを反映させる URLがhttpsになると、CSSが適用されません。 assetをsecure_assetにすることで反映されます。 app.blade.phpのheaderタグにおいて、CSSを適用している箇所をこのように書き換えると良いと思います。 resources/views/app.blade.php @if(config('app.env') === 'production') <link rel="stylesheet" href="{{ secure_asset('css/app.css') }}"> @else <link rel="stylesheet" href="{{ asset('css/app.css') }}"> @endif 開発環境(http)の時はasset、本番環境(https)の時はsecure_assetにすることで、CSSが通常通り反映されます。 AWS側の設定 SSL証明書の作成、ロードバランサー、セキュリティーグループ等の設定が必要になります。 この記事がとてもわかりやすかったので、共有しておきます。 一点補足することがあります。 上記の記事ではロードバランサーの作成において、最後にターゲットの確認をして、Health statusがhealthyになっています。 しかし、URLをhttpからhttpsへリダイレクトさせると、Health statusがunhealthyになってしまします。 unhealthyになっていても通常通り動くので、大した問題ではありません。 ただ、unhealtyが気になる方は、下記の設定を行うことでhealthyになります。 1.ターゲットグループを選択 2.Health CheckのEditをクリック 3.Advanced health check settingsのSuccess codesに302を追加し、Save changesをクリック 参考記事 Laravelで作ったサービスをSSL化した時にやったことと参考記事一覧 LaravelでURLをHTTPS化させるメモ (Heroku) https対応したLaravelプロジェクトでassetを使う時の注意点 EC2上のwebサーバをSSL化対応 おわりに 最後まで読んでいただき、ありがとうございます。 間違いがあればご指摘いただけると幸いです。

ご挨拶 初めまして！ 第二新卒でエンジニア転職を目指しております、[yoneyone]と申します。 この度、ポートフォリオとして個人向け在庫管理Webアプリケーション「クラウド冷蔵庫」を制作しました。 制作期間は約1ヶ月半です。 なんとか実現したい機能を盛り込むことができ、リリースすることができました。 Qiitaで情報を共有してくださっている皆さまのおかげです。 いつもお世話になっております。 全世界に生ゴミを投下した形ではありますが、よろしくお願いします。 https://cloud-refrigerator.herokuapp.com/ 使用技術 ◆フロントエンド ・HTML/CSS ・Bootstrap ◆バックエンド ・PHP : 7.3.27 ・Laravel : 6.20.29 ・Youtube API ◆開発環境 ・Mysql : 14.14 ・Apache : 2.4.29 (Ubuntu) ・AWS : EC2, IAM ・Composer : 2.0.13 ◆インフラ ・サーバー : Heroku コンセプト コロナ禍における買い物事情において、まとめ買いをする傾向があります。冷蔵庫にあるものを間違えて買ってしまったり、不要なものまで買ってしまった経験があるのではないでしょうか？ クラウド冷蔵庫は、自宅の冷蔵庫の分身をインターネット上に作成することで「いつでも」・「どこでも」冷蔵庫の中を確認することができます！ クラウド冷蔵庫を活用することで、食材の買い忘れやロスを低減し、困難な世の中をちょっと便利にしませんか？ 使い方・機能紹介 1.トップページ ユーザー登録にはメール認証機能を実装しています。 背景には「Keisuke Watanuki」様のCSSだけで作る、液体っぽくポワポワ動く背景の記事を参考にさせていただきました！ ありがとうございます！ 2.ホーム画面 ホーム画面ではすでに登録されている食材のうち、賞味期限が2日前以降の食材がリスト表示されます。 ランダムに賞味期限が近い食材が選ばれ、選ばれた食材を使用したレシピが提案されます。 3.登録/更新画面 一覧/登録タブ こちらの画面ではクラウド冷蔵庫に登録されている食材を、保存場所ごとに確認することができます。 食材登録ボタンを押下するとモーダルが出現し、新たに食材を登録することができます。 更新/削除タブ こちらの画面では食材名がリンクとなっており、登録されている情報を編集することができます。 食材の情報を更新したり、食材を消費した場合はこちらの画面で操作することができます。 食材の消費に関しては、論理削除を行なっています。 （今後のアップデートで、消費した食材を使った機能を実装する可能性を考慮したため） 4.買い物リスト画面 買い物リスト作成タブ こちらの画面で買い物リストを作成します。 メモ追加ボタンでモーダルを表示し、食材を登録することができます。 買い中タブ こちらの画面で買い物リストに登録された食材を確認し、情報の更新を行うことができます。 現実世界で食材をカゴに入れる際に、賞味期限を確認してこちらの画面で入力することで、クラウド冷蔵庫側でも買い物カゴに入れた状態にすることができます。 現実世界で会計が済ました後、買い物終了ボタンで食材を買い物リストからクラウド冷蔵庫に本登録してください。 5.机に広げる画面 こちらでは、クラウド冷蔵庫に登録されている全ての食材を保存場所に関係なく一覧として確認することができます。 現実世界では実現することができない、クラウド冷蔵庫ならではの機能です。 工夫したところ 工夫したところは主に2点あります １点目は、ユーザーの登録時にメール認証を実装した点です。 認証に関しての基礎は学習していたので、＋αの機能としてメール認証を実装しました。 実装方法に関しては主にQiitaの記事を参考にしました。 「@nekyo」様の【Laravel】ユーザ登録時にメール認証する(v5.7以上) 「@mitashun」様のLaravelの言語を日本語に変更 ２点目は、YoutubeAPIを使用した点です。 Webアプリケーションの優位性は、他のサイトとの連携が容易である事と考えています。Webアプロケーションを作成するにあたり、何かしらのAPIを使用したいと考えていました。 実装方法に関してはこちらもQiitaの記事を参考にしました。 「@You-saku」様のPHPでYoutubeのAPIを利用したい 「@gentuki」様の[PHP] YouTube APIの利用（動画情報の取得） 実装したのはいいものの、YoutubeAPIには使用回数制限が存在し、思い通りの動作が実現されないことが多くありました。 そこで、本番環境ではHerokuのSchedulerを使用して、毎日夜中に1回だけAPIを叩くようにしました。 以下の記事を参考にしました。 「@Takuma_Ikeda」様のLaravel タスクスケジュールまとめ 「@pythonista」様のHeroku Schedulerの設定方法 最後に 約1ヶ月半の期間でなんとか自分の盛り込みたいと考えた機能を実装することができました。 しかしながら、UI/UXの観点からユーザー様に使ってみたいと思っていただけるような状態ではないと思います。 他の初学者の方々が作成したポートフォリオのレベルと、自分自身のレベルを勝手に比較して、勝手に落ち込む毎日でした。 そこから何度も這い上がり、日々奮闘することで「１つの物」を作成し切った実績を作ることができました。 最初に「生ゴミのようなもの」と自分の作成物を評価しましたが、生ゴミを堆肥とした豊かな土壌で育つ植物のように、エンジニアとして成長していきます。 最後までお読みいただき、誠にありがとうございました！ 頑張ります！！

やりたかったこと Laravel をよく使うので、Laravel Forge + Vultur を使っています（Forge + Vultr ではじめてLaravelアプリをデプロイするときにつまずいたこと)。 最近、Laravelを使わず vue.jsだけのアプリ（SPA）を作り、本番公開しようとしました。 vue.jsのアプリであればNetlify、GithubPageなどが簡単にできるようですが、せっかく有料でForgeを契約しているのだし等いろいろ事情があり、どうしてもLaravel Forgeにデプロイしたかったのです。 vue.jsアプリの概要 vue version 2.5.2 webpack version 3.6.0 Github にレポジトリを公開 やり方は簡単です。まずは下準備。 Laravel Forgeは、Githubからソースコードを取り込み、デプロイすることができます。 そのため、Githubレポジトリを作成し、vueアプリのソースコード一式をpush しておきます。 Laravel Forge でのディレクトリ設定 次に、いつも通りLaravel Forge で新規サイトを設定します。 この時のポイントは２つ。 １つめは、サイトの種類をStatic HTMLではなくGeneral PHP/Laravel で設定すること。Static HTML だと上手くできませんでした。 ２つめは、初期ディレクトリを /dist に設定すること。これは、コンパイルされたファイルがdist フォルダに生成されるためです。 デプロイスクリプトの書き換え Laravel Forgeにて、デプロイスクリプトを次のように書き換えます。 cd /home/forge/www.domain.com git pull origin $FORGE_SITE_BRANCH npm install npm run build ( flock -w 10 9 || exit 1 echo 'Restarting FPM...'; sudo -S service $FORGE_PHP_FPM reload ) 9>/tmp/fpmlock npm を２行だけ、追加しています。 最初に調べていた時、Laravel Forgeでnpmするとタイムアウトする...などといった情報が出てきましたが、デプロイは普通に実行できました。 デプロイスクリプト以外でコマンドを叩くと、確かにエラーになっていました。 Nginx Configration File を編集する 最後に、Nginx の設定を変えます。画面下のFilesというメニューからEdit Nginx Configurationを選びます。 index.php となっているところを、index.html に変えます。最低限、この１箇所。 location / { try_files $uri $uri/ /index.html?$query_string; } この設定でデプロイすると、vue.jsだけのアプリも公開できます。 参考 こちらの解説が大いに参考になりました。