このページでは、Alanが作った代表的な製作物を載せています。どのアプリもこだわりを持って作っています。ぜひご覧ください。
CalkCascade: ひたすら計算練習！四則演算マスターへの道
＊ここをクリックするとCalkCascadeをプレイしに行けます。
概要
CalkCascadeは、四則演算の練習をひたすら行える計算練習アプリです。シンプルなインターフェースで、飽きずに計算問題に取り組むことができます。完成までわずか4日。
特徴
- シンプルな操作性: 誰でも直感的に操作できるシンプルなインターフェース
- 多様な問題: ランダム生成される四則演算の問題で、飽きずに練習できます
- レベル調整: 初心者から上級者まで、自分のレベルに合わせて問題の難易度を調整できます
ターゲットユーザー
- 小学生: 九九の練習や、算数の基礎力向上
- 中学生: 中学受験対策や、計算スピードアップ
- 大人: 脳トレや、計算能力の維持
開発環境
- フレームワーク: Svelte
- デザインシステム: DaisyUI, Tailwind CSS
- プログラミング言語: TypeScript
機能一覧
- 問題生成: ランダムに四則演算の問題を生成
- 解答入力: 答えを入力するテキストボックス
- 解答判定: 入力された答えが正しいか判定
- レベル選択: Lv1～５の５つのレベルから選択
技術的な解説
Svelteの採用理由
- コンポーネントベースの開発: 問題表示、解答入力、各機能を独立したコンポーネントとして開発することで、コードの保守性を高めました。
- リアクティブな更新: ユーザーの入力や状態の変化に即座にUIが更新されるため、スムーズな操作性を実現しました。
- TypeScriptのサポート: 静的型付けにより、コードの品質を向上させ、保守性を高めました。
DaisyUIとTailwind CSSの採用理由
- 豊富なカスタマイズオプション: 数多くのプリセットとユーティリティクラスが用意されており、短時間で美しいUIを作成できます。
- レスポンシブデザイン: 様々なデバイスに対応したレイアウトを簡単に作成できます。
AIアシスタントの活用
- ChatGPT、Gemini、Copilot: コードの生成、デバッグ、ドキュメントの作成など、開発プロセス全体を支援し、高品質なコードを短時間で生み出すことを可能にしました。
4日で開発できた理由
- Svelteの生産性: コンポーネントベースの開発とリアクティブな更新により、開発速度が大幅に向上しました。
- DaisyUIとTailWindCSSの効率性: 豊富なプリセットとユーティリティクラスにより、デザイン作業を効率化できました。
- AIアシスタントの活用: ChatGPT、Gemini、Copilotがコードの生成やデバッグを支援し、時間を節約できました。
今後の展望
- 多様な問題タイプ: 小数、分数、文字式の計算問題に対応
- オンライン対戦: 他のユーザーと計算スピードを競える機能
- ゲーム要素の導入: 問題を解くごとに報酬が得られるなど、ゲーム感覚で楽しめる機能
まとめ
CalkCascadeは、Svelte、DaisyUI、Tailwind CSSといった最新の技術と、AIアシスタントの力を最大限に引き出して作った、革新的な計算練習アプリです。シンプルな操作性で、飽きずに計算練習に取り組むことができ、算数力向上に役立ちます。
コード
本アプリのコードは以前と比べ格段に美しいものとなりましたぜひご覧ください。
カスタマイズ時計
＊動画では本来表示されるはずの色選択画面が表示されていませんが、本来は6枚目の写真のように表示されています。
自分だけの時計を作れる‼
カスタマイズ時計アプリは、自分だけのアナログ時計を作れるアプリです。針や文字盤・色をカスタマイズして、自分だけの時計を作れます。
サイズを変えても美しい
時計の部品データはすべてSVG形式で作っているため、ウィンドウサイズや画面解像度に関係なく常に滑らかに表示されます。
対応：Windows・Android
開発言語: C# HTML CSS
フレームワーク: .NET MAUI + Blazor
以下のURLからコードをご覧になれます。
TodoList
＊動画では本来表示されるはずの日付変更の表示ありませんが、本来は5枚目の写真のように表示されています。
紙のように直感的な To Do List .
紙のTodoListを使うように使えるTodoListです。TodoListはタイトルと日付・やることを記入できます。
お好みのデザインに
このTodoListは、紙の色や背景色、文字のインクの色をお好みにカスタマイズできます。
自分のやる気の出るデザインにして楽しもう！
対応：Windows・Android
開発言語: C# HTML CSS
フレームワーク: .NET MAUI + Blazor
以下のURLからコードをご覧になれます。
alan-code.com
アプリづくりで困ったことを共有するサイト
alanがアプリ開発で困ったことを解決法とともに載せるサイトです。わかりやすくて短い説明を心がけて作っています。
情報量を少なく
私のサイトはシンプルで美しいデザインにこだわっています。サイトを訪れた人が集中して内容を読めるようにです。例えば、私のサイトは広告や、サイドバーのなどの気を散らす可能性のあるものを排除しています。
使用システム：WordPress
以下のURLから記事をご覧になれます。
Weak Calculator
シンプルな計算練習アプリ
Weak Calculatorは四則演算の計算練習ができるアプリです。練習する桁数と+-×÷を選択して計算問題をひたすら解き続けることができます。
ゲームではない実用的計算アプリ
ひたすら無心で途切れなく計算練習を続けられます。計算練習を止めるものは、自分の意志以外にはありません。例えば、いちいち結果が表示されたり、音が鳴ったりするような、あなたの気を散らせるものはありません。
対応：Windows・Android
開発言語: C# XAML
フレームワーク: .NET MAUI
以下のURLからコードをご覧になれます。