🎬 映画マイリストアプリを作ってみた！

🧭 この記事でわかること

自分のお気に入り映画だけを集めて、他の人に観てもらいたい！
そんな思いから、レビュー投稿機能付きの映画マイリストアプリを作成しました。
この記事では、アプリの作成手順と工夫点について詳しく解説します。

🎯 何を作った？

Glideというノーコードツールを使って、映画レビューアプリを作成しました。
以下の動画でアプリの動作をご確認いただけます：

🎯 何ができる？

• 映画のトレイラー・あらすじ・公開日を一覧で閲覧可能
• 気になった映画はNetflixで視聴
• ノーコードで誰でも簡単に構築可能
• レビューを投稿・他のレビューの閲覧

🎯 どんな技術的知見がある？

• Glideを使ったアプリケーション作成
• Googleスプレッドシートの情報をアプリに連携表示

活用シーン例：

• 自分の好きな映画を友人に紹介
• 映画に対する評価を集めて意見交換

🛠️ 使用ツール・環境

• OS バージョン
  • Windows11 23H2
• ツール
  • Glide、Googleスプレッドシート
• フレームワーク
  • なし（ノーコード中心）

🔄 完成形の流れ

⓪ 事前準備：Googleスプレッドシート作成
① 映画リスト画面の編集：最初の映画リストホーム画面を作成
② 投稿レビュー画面の編集：別タブの投稿レビュー画面の編集
③ 映画詳細画面の編集：メール宛先を読み取り、行に応じて変数に格納
④ レビュー投稿機能を追加：読み取った情報を使ってメール送信

🔧 各工程の詳細

⓪. 事前準備

事前にGoogleスプレッドシートを準備します。
まずは「映画リスト」シートを作成します。

①映画のタイトル：好きな映画のタイトルを記載します。（数に制限はありません）
②トレイラー：Youtubeから予告映像のURLを取得し、貼り付けます。
③Netflix：Netflixで対象映画のURLを取得し、貼り付けます。
④サムネイル：Youtubeの予告映像のサムネイルを取得し、貼り付けます。
※以下URLを使うとYoutubeリンクを張り付ければサムネイルが取得できます。
https://html-css-javascript.com/youtube-thumb/
⑤あらすじ：Netflixからあらすじをコピーし、貼り付けます。
⑥公開年：Netflixから公開年をコピーし、貼り付けます。

続いて「レイティング」シートです。

★～★★★★★のデータを作成しておきます。

最後に「レビュー」シートです。

※基本的にすべてダミーデータになっています。
①投稿者メールアドレス：ダミーのメールアドレスを挿入します。
②レイティング：ダミーの評価を挿入します。
③ニックネーム：ダミーの評価を挿入します。
④映画タイトル：ダミーレビュー先の映画タイトルを設定します。
⑤レビュータイトル：ダミーレビューのタイトルを挿入します。
⑥コメント：ダミーレビューのコメントを挿入します。
⑦投稿日時：ダミーの投稿日時を挿入します。

これでスプレッドシートは完成です。お疲れ様でした。
次からGlideを触って実装です。

①. 映画リスト（ホーム画面）の編集

大きく5点のポイントがあります。

①タブを「映画リスト」と「投稿レビュー」の二つに絞ります。不要なタブは右クリック後、Deleteで消しましょう。
②COMPOMENTSの「映画リスト」編集するため、クリックします。すると、③～⑤が編集出来るようになります。
③Souceを「映画リスト」シートに設定し、Lebel（タイトル）を「映画リスト」と記載しましょう。
④STYLEはCordがおすすめです。※決まりは無いので、お好みのスタイルで良いかと思われます。
⑤ACTIONはEditでユーザーが編集できてしまうため、すべてオフにしましょう。

以上で、映画リストの画面編集は完了です。
次に投稿レビューページを作成します。

②. 投稿レビュー画面の編集

こちら、大きく6点のポイントがあります。

①「投稿レビュー」タブを選択し、編集できる状態にしましょう。
②COMPOMENTSの「レビュー」編集するため、クリックします。すると、③～⑤が編集出来るようになります。
③Souceを「レビュー」シートに設定し、Lebel（タイトル）を「投稿レビュー」と記載しましょう。
④STYLEはListがおすすめです。※決まりは無いので、お好みのスタイルで良いかと思われます。
⑤レビュー欄に表示させる機能です。今回は「映画タイトル」と「ニックネーム」を設定しました。
⑥ACTIONはEditでユーザーが編集できてしまうため、すべてオフにしましょう。

③. 映画詳細画面の編集

映画リストの中身を作成していきます。

①映画リストをクリックし、映画リストの中から、一件映画リストをクリックして、編集画面に遷移します。
②COMPOMENTを編集します。

• VedeoCOMPOMENTを追加し、「映画リスト」シートの「トレイラー」を選択します
• testCOMPOMENT（１）を追加し、「映画リスト」シートの「公開年」を選択します
• testCOMPOMENT（２）を追加し、「映画リスト」シートの「あらすじ」を選択します
• ButtonCOMPOMENTを追加し、「映画リスト」シートの「Netflix」をボタンの遷移先に設定します
  ※アイコンやデザインはお好みで設定できますが、今回はデフォルトの設定となっています。
• SeparatorCOMPOMENTを追加し、区切り用の線を追加します
• CorectionCOMPOMENTを追加し、「レビュー」シートから、「レイティング」と「ニックネーム」を表示させるように設定します
• SeparatorCOMPOMENTを追加し、区切り用の線を追加します

以下はレビュー投稿機能になりますので、一度ここまで作成出来れば、Googleスプレッドシートの内容を反映させたことになります。

④. レビュー投稿機能を追加

アプリケーションからレビューを投稿する際のフォームを作成します。

①FormContainerCOMPOMENTを追加し、中身を編集していきます。

• Titleを「レビューに追加」と記載します。
• ChoiceCOMPOMENT（１）を追加し、「映画リスト」シートの「映画タイトル」を選択します。その後Imageにて「サムネイル」を設定します
• TextEntryCOMPOMENT（１）を追加し、Column「ニックネーム」を選択します
• TextEntryCOMPOMENT（２）を追加し、Column「レビュータイトル」を選択します
• TextEntryCOMPOMENT（３）を追加し、Column「コメント」を選択します

これにて、アプリケーションからレビューを投稿した際に、実際にアプリケーション上で
レビューが記録されるようになります。

📩 結果

成果：Glideを使って映画リストをアプリ化し、レビューの投稿も行うことができた
完成したアプリケーションです。実際にスマホのアプリケーションとして使うことができます。ぜひ使ってみてください。

💬 実際に使ってみた感想（友達談）

アプリを実際に使ってもらった友人からは、さまざまなフィードバックをもらいました。

✅ 良かった点

• 映画情報が一目でわかるのが便利！
  トレイラー・あらすじ・公開年・Netflixリンクがまとまっているので、気になった映画をすぐにチェックできるのが嬉しいとのこと。特にスマホでの操作性が良く、通勤中や寝る前のちょっとした時間に使えるのが高評価でした。

• ノーコードでここまで作れるのは驚き！
  プログラミング経験ゼロでも、ここまで完成度の高いアプリが作れることに驚いていました。「自分でも何か作ってみたい」と言ってくれる人もいて、ノーコードの可能性を感じてもらえたようです。

🛠 改善点・今後のアイデア

• 投稿した映画数が少ないのが惜しい…
  映画のラインナップがまだ少ないため、もっと多くの作品を登録してほしいという要望がありました。ジャンル別や年代別の絞り込み機能があるとさらに便利になるとのこと。

• レビュー機能が簡易的なので、返信機能が欲しい！
  他の人のレビューにコメントしたり、リアクションできる機能があると、より交流が深まるのでは？という意見もありました。

• AIによるおすすめ機能があったら面白そう！
  自分の好みに合った映画をAIが提案してくれる機能があれば、さらに使いたくなるとの声も。今後の拡張機能として検討したいアイデアです。

• デザイン面でももう少し工夫できそう
  現在はデフォルトのスタイルを使用していますが、色使いやアイコンの統一感を出すことで、より洗練された印象になるのでは？というアドバイスもありました。

使ってもらうとアイデアがたくさん出ます。AIをつかったお勧め機能やレビューにリアクションや返信機能は面白いと思いました。時間があればチャレンジしてみたいですね・・！

📝 まとめ

今回は、GlideとGoogleスプレッドシートを活用して、ノーコードでも実用的な映画レビューアプリを作成しました。
最初は英語UIに戸惑いましたが、慣れてくると直感的に操作でき、機能追加もスムーズに行えました。

特に良かった点は以下の通りです：

• ノーコードでアプリが作れる手軽さ
• スマホでも使える実用性
• レビュー機能による交流の可能性
• 無料で公開できるため、モチベーションが上がる（個人的に一番のポイント）

このアプリを通じて、趣味の共有や新たな映画との出会いが生まれることを期待しています。
ぜひ、Glideで自分だけのアプリ作りに挑戦してみてください！