1ヶ月半ほど PHP・MySQL の基礎学習してきました。その成果の一つとして表題のアプリを作りました。検索時の参照データベースに「TMDb」の API を使用しました。自分が映画が好きな点と、説明的なデザインが少ない本国のポスターは見ていてテンションが上がるので「見てよし、使ってよし」なアプリを目指しました。
アプリ概要
検索/表示機能
映画のタイトルを入力すると、検索ワードに共通する映画ポスターとタイトル（日・英）を表示。
更新/削除機能
検索したかった映画を選ぶと自分のデータベースに保存・表示・編集・削除できる仕組みです。API から提供されたあらすじだとわからない場合があるので、自分用にメモを追加できたりもします。
詳細画面の背景は、ポスター以外に映画のワンシーン写真を使っています。
目標として
- できる限り短い期間で動くアプリにする
- データベースと連携して登録・表示・更新・削除という基本操作を主軸にする（CRUD という言葉を最近知ったので使ってみました。
- 自分が使いたいものにする
- デザイン（見た目）よりも機能に注力する
- ポスター上に操作用のアイコンなどを付与しない（個人的に重要）
を土台にアプリのテーマを考え、映画の閲覧データ管理を思いつきました。
学んだことと
- 仕様時に API ドキュメントの読み込みと理解、何がどこまでできるかを理解してから選定する
- GET と POST によるリクエストとレスポンス
- データベースの物理削除と論理削除の存在と bit 型
- 日付 Data型 の初期値に 0000-00-00 はNG,1900-01-01 にする
- tailwinds css （手入力ですが）
- もっと他のアプリを使って使い勝手や画面遷移を体験する
苦戦したこと、していること
- 目標としていた映画の配給国ポスターではない
API 取得時に言語を選択できるが、英語にするとOverview が英語になりわかりにくい。日本語にするとOverviewは日本語になるがポスターも日本版になってしまう。まだ API ドキュメントを理解しきれていないので、ひとまず日本版で保存することに。。 - tailwinds css
bootstrap で PHP に集中しようと思っていたはずが、挑戦欲が出てしまって2〜3日ほど時間をかけてしまった。でも、少し理解できたと思います。が、こういった使い方（手動）本来はしないんだろうなと。 - API キー env 管理
composer を入れないとできないのか、それ以外に方法はないか知りたい。Nuxt と Netlify 連携の際に、API キーの扱いを以下で学んだ後、PHP/MySQL に集中したのでそこの知識が曖昧。公開してみたいんですがひとまずはここを空欄にして Github に挙げておきます。
プロフェッショナルWebプログラミング Vue.js
やりたいこと
- MVCアーキテクチャでの作り直し
ページが少ないのとまだこの考えが理解しきれていないのもあって、できてません。が、これから自分で育てていく過程で「管理しやすさ」の考え方を自分にインストールしておきたいなと思ってます。 - 機能を増やす
APIで読み込みできるデータをドキュメントをよく読んで理解できたら、抽出機能など使いやすさにつながる改善をしていきたいと考えてます。 - データベース設計
機能が増えてくるとデータをどう作るかが抽出や検索しやすさ（SQLの描きやすさ）につながるんだなと思いました。基礎文法だけだとあまり想像できなかったんですが、こうやって何か作ってやりたいことを実行してみてわかってきた所です。
期間：約14日
- 検討調査・フロント：6日
- PHP/MySQL プログラミング:6日
- 動作検証、修正：2日（ブラッシュアップ中）
仕様検討や設計に時間をかけずに見切り発車で作り始めました。フェーズ毎に明確に何日というよりは行きつ戻りつで進行しました。API とは？という所から始まり、英語ドキュメントを読んで試してみるところで四苦八苦し、tailwinds というこれまでのCSS設計頭から上手く回らず苦戦しました。ですが、好きな映画とそのポスターを眺められるだけでも作っている過程でテンションが上がる上に、何年も見ていない映画をたまたま検索で引っかかって再会できて喜びもひとしおです。
普段、アプリをあまり使ってなかったので操作性など学ぶことがありますが、初めて自力でウェブアプリを作れたので大変嬉しいです。周りの人に使ってみてもらってフィードバックもらいたいと思います（API キー涙）。
ここまでお読みいただき、ありがとうございました。