メインコンテンツへスキップ
見出し画像

【調子に乗った】アプリをバージョンアップしてたら、勢いでテトリスまで作ってた話

    前回のアプリ開発の続きを書きます!
    前回の記事はこちら

    ⤴️バージョンアップをしよう

    家族に普及して使ってみてもらうと、色々な意見が出ました。
    なので、それをもとに改良しました。

    画像
    (Ver 2.0 / PWA・全拡張機能内蔵)

    するとGemなぎ太はこう言います。

    🤖「もっと良いアイデア」提案

    ソート機能(カテゴリ順・優先度順・追加順)とタグ(優先/旅行)の追加に伴い、画面上部に「全件 / 🔥 優先のみ / 🧳 旅行用のみ」のワンタップ切り替えタブを設置することを提案します。また、選択したソート順やフィルター状態を localStorage に保存し、次回起動時にも同じ表示条件が即座に復元されるように設計しました。

    「ワンタップ絞り込みプリセット & ソート/フィルター状態の永続記憶」

    アプリ開発ってこうやっていくんですかね。
    後は元のindex.htmlを新しいものに変えて、Vercelに持ってきて

    画像
    デプロイで更新!
    画像
    Ver1.4

    ↓

    画像
    Ver2.0

    簡単にバージョンアップできました!
    しかも、今気づいたんですが、
    手作りだから広告ないですね😁

    じゃあ、もう一個練習ついでに行きますか!

    画像
    テトリス作ります(^▽^)/

    🧱自作テトリス作成

    実は、こちらのテトリス、完全にゼロからの思いつきではありません。
    夜中にnoteを更新した後、[天音るなさんのAIに「テトリス作って」と頼んだら1分でできた話]を読んで、 「あ、これ面白そう、自分も作ってみたい!」と触発されたのがきっかけです。

    勝手にすみません。🙇🏻


    さて、AIと壁打ちしていく中で、色々な案が出てきました。
    リプレイ・ゴースト機能付きテトリス
    ゴースト機能(落下予測位置)
    公式ガイドラインの「7-Bagランダム」
    (全7種類のテトリミノを1セットとし、シャッフルして順に出す仕組み)
    Web/PWA対応「単一HTML(Vanilla JS + Canvas)」構成

    正直、よくわからない単語が出てきてます。

    画像
    「何言ってんだー」って言ってたら、
    AIにも「何いってんだおー」って言われた。

    🎮自作テトリス完成

    画像
    ポップでキュートな解説書作ってって言ったらこうなった(笑)
    聴診器つけてる私は医者だろっ!

    バトルしようぜ! ランキング機能付きテトリス公開!
    ちゃんと動くかな?
    BGMも頑張った!コードで鳴らすってことができるんですね。

    tetris-web-mobile.vercel.app

    🖊️まとめ

    昨日よりもかなり簡単に作成できました。
    ここまでもしかして、「Google Opal」や「Google AI Studio」、「Google Spark」とかにお願いすれば、自動で作れるんですか? まだまだやり方はありそうですね!

    テトリスマスター(誰?)からのテトリスのアドバイスです

    画像
    ポップでキュートななぎ太キモいですね。
    今日でポップでキュートななぎ太は卒業します🤣🤣

    💬 コメント・スキ・フォローもお待ちしています!
    「自分もこんなツールを作ってみた!」「ここが気になった!」など、気軽にコメント欄で教えてくださいね!

    💡 なぎ太ってこんな人↓



     
     
    理科の先生のなぎ太です。理科の面白さだけでなく、生成AIを駆使した授業DX、アプリ開発などを発信しています。「知ってると得する」実践ノウハウから、「ここまでできるの?」という検証・失敗談までお届けします。日々の発信を通じて、誰かの知的好奇心のスイッチを押せたら嬉しいです。

    あなたへのおすすめ