Zenn
Open9

AIと一緒にポモドーロタイマーアプリを作る

momuramomura

概要

作業する時にポモドーロテクニックを使うことがあるが、いい感じのタイマーアプリが見つけられないのでAIと一緒に作ってみる。

欲しい機能

  • 基本的には25分作業、5分休憩のサイクル
  • 作業時間と休憩時間を設定で手軽に変更できる(これが一番欲しい)
  • 音楽なし
  • 広告なし
  • スマホのバイブレーションでお知らせできれば理想(作り方によってはできないかも)

機能以外の要件

  • スマホで使えること
  • なるべく安く
  • AWS上で完結したい

その他

アプリケーション作成経験はほぼないので、AI(今回はGemini)と一緒に作る。

momuramomura

さっそくGeminiと会話。
めちゃくちゃ手伝ってくれそうで助かる。

自分: ポモドーロタイマーアプリを作りたいので手伝ってください。
Gemini:
ポモドーロタイマーアプリの作成、いいですね！お手伝いさせていただきます。

まず、どんなポモドーロタイマーアプリを作りたいか、もう少し詳しく教えていただけますか？

  • 機能:
    • 基本的なタイマー機能はもちろん、どんな機能を付け加えたいですか？
      • タスク管理機能
      • サウンドのカスタマイズ
      • グラフによる進捗管理
      • 休憩時間のランダム化
      • など
  • プラットフォーム:
    • どのようなプラットフォームで動かしたいですか？
      • スマホアプリ（iOS, Android）
      • Webアプリ
      • デスクトップアプリ（Windows, macOS）
      • その他
  • プログラミング言語:
    • 何か特定のプログラミング言語を使いたいですか？
    • それとも、これから学びたい言語がありますか？
  • デザイン:
    • アプリの見た目について、イメージはありますか？
    • シンプルで使いやすいデザイン
    • おしゃれなデザイン
    • など

これらの情報をもとに、具体的な開発計画を立てていきましょう。

例えば、シンプルなスマホアプリを作りたい場合、Flutterというフレームワークを使うと、iOSとAndroidの両方に対応したアプリを一つのコードで開発できます。

具体的な手順としては、

  1. アイデアの整理: どんな機能が必要か、ユーザーインターフェースはどうするか、などを具体的に書き出します。
  2. 設計: アプリの構造を設計します。画面遷移やデータの流れなどを図にすると分かりやすいです。
  3. 開発: プログラミング言語と開発環境を選んで、実際にコードを書いていきます。
  4. テスト: 動作確認を繰り返し、バグを修正していきます。
  5. リリース: アプリストアに公開したり、Webサイトにアップロードしたりします。

もしプログラミング経験がない場合は、

  • Progateのようなオンライン学習サービスで基礎を学ぶ
  • Udemyのようなプラットフォームで本格的なアプリ開発講座を受ける
  • プログラミングコミュニティに参加して質問したり、情報交換したりする

といった方法があります。

一緒に作り上げていきましょう！ 何か質問があれば、遠慮なく聞いてください。

さらに詳しい情報があれば、以下のような質問も参考にできます。

  • ポモドーロタイマーアプリを作る上で、特に力を入れてみたい機能はありますか？
  • 他のポモドーロタイマーアプリで、気に入っている機能や改善してほしい点などはありますか？
  • アプリのデザインについて、参考にする画像やウェブサイトはありますか？
  • 開発のスケジュールはどのようになっていますか？

これらの情報があれば、より具体的なアドバイスをすることができます。

momuramomura

構成について相談。アプリとなると思ったより複雑になりそう…
Webページ上で動かす感じにしたらもっとシンプルになるだろうか…

自分:
下記の条件で作成したいです。どのような構成が考えられますか？
必須

  • 基本的には25分作業、5分休憩のサイクル
  • 作業時間と休憩時間を設定で手軽に変更できる
  • 音楽なし
  • スマートフォンで使えること
  • AWSのサービスを使って作成する
  • なるべく料金を安くする
    オプション
  • スマホのバイブレーションでお知らせ

Gemini:

ポモドーロタイマーアプリの構成案

1. AWSサービスの選定

  • Amplify: フロントエンド（React Nativeなど）とバックエンドを繋ぎ、簡単にモバイルアプリを開発できるサービスです。
  • AppSync: GraphQL APIを構築し、リアルタイムなデータ同期を実現できます。
  • DynamoDB: NoSQLデータベースで、柔軟なデータ構造に対応できます。
  • Cognito: ユーザー認証、認可機能を提供します。

2. アプリの構成

  • フロントエンド:
    • React Native: iOS/Android両対応のネイティブアプリを開発できます。
    • 状態管理: ReduxやMobXなどの状態管理ライブラリを用いて、アプリの状態を管理します。
    • タイマー: React NativeのTimerライブラリや、自作のタイマー機能を用います。
    • バイブレーション: Platform.vibrate()などのAPIを用いて、端末を振動させます。
  • バックエンド:
    • AppSync: GraphQL APIを構築し、フロントエンドからタイマーの設定や取得を行います。
    • DynamoDB: ユーザーの設定やタイマーの履歴などを保存します。
    • Lambda: タイマーの開始・終了、通知の送信などの処理を記述します。
  • その他:
    • Cognito: ユーザー認証機能を実装し、各ユーザーの設定を管理します。

3. 機能詳細

  • タイマー機能:
    • 作業時間と休憩時間を設定し、開始・停止、リセットができる。
    • 設定した時間になると、バイブレーションで通知する。
  • 設定機能:
    • 作業時間と休憩時間を変更できる。
    • 通知設定（オン/オフ、音量）ができる。
  • 履歴機能:
    • 過去のタイマーの記録を閲覧できる。
  • テーマ機能:
    • アプリのテーマをカスタマイズできる（オプション）。

4. 開発の流れ

  1. AWS Amplifyプロジェクトの作成: Amplify CLIを用いてプロジェクトを作成します。
  2. フロントエンド開発: React NativeでUIを作成し、AppSyncに接続するためのGraphQLクエリを記述します。
  3. バックエンド開発: AppSyncでGraphQLスキーマを定義し、Lambda関数でビジネスロジックを実装します。
  4. DynamoDBテーブルの作成: ユーザーの設定やタイマーの履歴を保存するためのテーブルを作成します。
  5. Cognitoの設定: ユーザー認証機能を設定します。
  6. デプロイ: Amplify Consoleを用いてアプリをデプロイします。

5. 料金の最適化

  • 無料枠: AWSには無料枠があり、ある程度の範囲までは無料で利用できます。
  • サーバーレスアーキテクチャ: サーバーを管理する必要がないため、コストを抑えられます。
  • DynamoDBの容量: データの量に合わせて容量を調整することで、コストを削減できます。

6. その他

  • 通知: AWS SNSを利用して、プッシュ通知を送信することも可能です。
  • テスト: ユニットテスト、統合テストを実施し、品質を確保します。
  • セキュリティ: IAMロールやCognitoを用いて、セキュリティを確保します。

まとめ

AWSのサービスを活用することで、比較的簡単にポモドーロタイマーアプリを開発することができます。無料枠を最大限に活用し、必要に応じて有料サービスを追加することで、コストを抑えながら開発を進めることができます。

より詳細な設計や実装については、以下の点をご検討ください。

  • ユーザーインターフェース: シンプルで直感的に操作できるUI設計
  • エラー処理: ネットワークエラーや予期せぬエラーへの対応
  • パフォーマンス: スムーズな動作を実現するための最適化
  • テスト自動化: テストケースを自動化し、品質を向上

ご希望に応じて、より具体的なコード例や設計図を提供することも可能です。

ご不明な点があれば、お気軽にご質問ください。

追加で知りたいことなどありましたら教えてください。

  • 具体的な機能についてもっと詳しく知りたい
  • 特定の技術について質問したい
  • 開発環境について相談したい
  • など

ご希望に応じて、より具体的なアドバイスをさせていただきます。

momuramomura

通知について
バイブレーションはアプリじゃないと厳しそうなので音でも良いかも
音楽入れずに通知の時だけ音を出すとか

momuramomura

条件を変更。少しシンプルになった。

自分: 少し条件を変更します。

  • iOS/Androidのアプリではなく、ブラウザ上で動くよう作成
  • バイブレーションではなく、音を出してお知らせ

Gemini:

ブラウザベースのポモドーロタイマーアプリ構成案

1. 技術スタック

  • フロントエンド:
    • フレームワーク: React, Vue.js, Angularなど。状態管理にReduxやVuexなどを活用。
    • UIライブラリ: Material UI, Ant Designなど。
    • 音声: Web Audio APIを利用して、任意の音声を再生。
  • バックエンド:
    • サーバーレス: AWS Lambda + API Gateway、Firebase Functionsなど。
    • データベース: DynamoDB (NoSQL), PostgreSQL (RDB)など。

2. 機能

  • タイマー機能:
    • 作業時間と休憩時間を設定・変更可能。
    • 開始・停止、リセットボタン。
    • 設定時間になると、アラート音で通知。
  • 設定機能:
    • アラート音の変更 (カスタム音源アップロード可)。
    • テーマのカスタマイズ。
  • 履歴機能:
    • 過去の作業記録をグラフやリストで表示。

3. 開発フロー

  1. フロントエンド開発:
    • 選択したフレームワークでUIを作成。
    • タイマーのロジックを実装 (setIntervalなど)。
    • Web Audio APIを用いて、アラート音を再生する機能を実装。
  2. バックエンド開発:
    • サーバーレス関数で、タイマーの開始・停止、履歴の保存などの処理を実装。
    • データベースに接続し、ユーザーの設定や履歴を保存。
  3. API連携:
    • フロントエンドからバックエンドのAPIを呼び出し、タイマーの操作やデータの取得を行う。

4. AWSでの実装例 (React + AWS Lambda + API Gateway)

  • フロントエンド:
    • Create React Appでプロジェクトを作成。
    • useState, useEffectでタイマーの状態を管理。
    • API Gatewayのエンドポイントにリクエストを送信し、タイマーの開始・停止、履歴の取得を行う。
  • バックエンド:
    • AWS LambdaでNode.js関数を作成。
    • API Gatewayからイベントを受け取り、DynamoDBにアクセスしてデータを保存・取得。
  • デプロイ:
    • Amplify ConsoleやServerless Frameworkを利用して、フロントエンドとバックエンドをデプロイ。

5. メリット

  • ブラウザベース:
    • iOS/Androidのアプリストア審査が不要で、迅速なリリースが可能。
    • どのデバイスでもブラウザさえあれば利用できる。
  • サーバーレス:
    • サーバーの管理が不要で、コストを抑えられる。
    • スケーラビリティが高い。
  • カスタム化:
    • Web Audio APIを利用することで、任意の音声をアラート音として利用できる。
    • フロントエンドの技術を活用し、自由なデザインのカスタマイズが可能。

6. 注意点

  • ブラウザの互換性: 異なるブラウザでの動作確認が必要。
  • セキュリティ: ユーザーデータの取り扱いに注意し、適切なセキュリティ対策を施す。
  • パフォーマンス: 大量のデータを扱う場合は、パフォーマンスチューニングが必要になる場合がある。

7. その他

  • PWA (Progressive Web App): オフラインでも利用できるように、PWA化を検討する。
  • ダークモード: ユーザーの好みに合わせて、ダークモードに対応する。
  • 多言語対応: 国際化対応を行い、複数の言語に対応する。

まとめ

ブラウザベースのポモドーロタイマーアプリは、AWSのサーバーレスサービスとReactなどのフロントエンド技術を組み合わせることで、比較的容易に開発できます。ユーザーのニーズに合わせて、機能やデザインをカスタマイズできる点が大きな魅力です。

より詳細な設計や実装については、以下の点をご検討ください。

  • ユーザーインターフェース: 直感的に操作できるUI設計
  • アラート音: 多様なアラート音を提供
  • 履歴管理: 詳細な履歴データの保存と可視化
  • 通知機能: ブラウザの通知機能を利用した通知

ご希望に応じて、より具体的なコード例や設計図を提供することも可能です。

ご不明な点があれば、お気軽にご質問ください。

追加で知りたいことなどありましたら教えてください。

  • 具体的な機能についてもっと詳しく知りたい
  • 特定の技術について質問したい
  • 開発環境について相談したい
  • など

ご希望に応じて、より具体的なアドバイスをさせていただきます。

momuramomura

下記機能も追加したい

  • 集中したい時間を決められる(1時間、5時間など)
momuramomura

いらない機能を除いてみた。AWSは要らなそう。
フロントエンドほぼ触ったことないけど作れるだろうか…

自分: ユーザの設定や履歴の保存は不要です。

Gemini:

ユーザの設定や履歴の保存が不要な場合のポモドーロタイマーアプリ構成

1. 技術スタックの簡素化

ユーザの設定や履歴を保存しないため、バックエンドの複雑さは軽減できます。

  • フロントエンド: React, Vue.js, Angular など
  • 状態管理: ローカルストレージ、またはフレームワークの組み込み機能 (ReactのuseStateなど) で十分です。

2. 機能の絞り込み

  • タイマー機能:
    • 作業時間と休憩時間の設定・変更
    • 開始・停止、リセット
    • 設定時間になると、アラート音で通知
  • 設定機能:
    • アラート音の変更 (カスタム音源アップロードは不要)
  • その他:
    • テーマのカスタマイズ (オプション)

3. 開発フロー

  1. フロントエンド開発:
    • 選択したフレームワークでUIを作成。
    • タイマーのロジックを実装 (setIntervalなど)。
    • Web Audio APIを用いて、アラート音を再生する機能を実装。
    • ローカルストレージまたは状態管理ライブラリで、タイマーの状態を管理。
  2. デプロイ:
    • 静的サイト生成ツール (Next.js, Nuxt.jsなど) を利用して、静的なHTML/CSS/JavaScriptファイルを生成し、ホスティングサービス (Netlify, Vercelなど) にデプロイ。

4. メリット

  • シンプル: バックエンドの複雑さがなく、開発が容易。
  • 高速: サーバーレス関数などを利用しないため、レスポンスが高速。
  • セキュリティ: ユーザデータがないため、セキュリティリスクが低い。

5. 注意点

  • 機能制限: ユーザごとにカスタマイズされた機能の実現は難しい。
  • データ永続化: ブラウザを閉じると、設定や履歴が失われる。

6. コード例 (React)

import React, { useState, useEffect } from 'react';

function PomodoroTimer() {
  const [workTime, setWorkTime] = useState(25 * 60);
  const [breakTime, setBreakTime] = useState(5 * 60);
  const [timeLeft, setTimeLeft] = useState(workTime);
  const [isWorking, setIsWorking] = useState(true);

  // タイマーのロジック
  useEffect(() => {
    const intervalId = setInterval(() => {
      setTimeLeft(prevTime => prevTime - 1);
    }, 1000);

    return () => clearInterval(intervalId);
  }, [timeLeft]);

  // ... (タイマーの開始、停止、リセットなどの処理)

  return (
    <div>
      {/* タイマー表示 */}
      {/* ボタン */}
      {/* 設定 */}
    </div>
  );
}

まとめ

ユーザの設定や履歴を保存しないシンプルなポモドーロタイマーアプリは、フロントエンド技術だけで実現可能です。バックエンドの複雑さを避け、迅速に開発することができます。

この構成で何か質問はありますか？

  • 特定の機能についてもっと詳しく知りたい
  • 特定の技術について質問したい
  • 開発環境について相談したい
  • など

ご希望に応じて、より具体的なコード例や設計図を提供することも可能です。

momuramomura

どこから手をつけたら良いのか分からないので聞いてみた。

自分: まず何から着手すれば良いですか？

Gemini:
ポモドーロタイマーアプリの作成、楽しみですね！まずは、どのツールや技術を使って開発するかを決めることから始めましょう。

シンプルなブラウザベースのポモドーロタイマーアプリを作成する場合、以下のような手順が考えられます。

1. 開発環境の構築

  • コードエディタ: Visual Studio Code, Atom, Sublime Textなど、お好みのコードエディタをインストールします。
  • Node.js: JavaScriptの実行環境であるNode.jsをインストールします。
  • npm (またはyarn): Node.jsのパッケージ管理ツールです。

2. フロントエンドフレームワークの選択

  • React: JavaScriptライブラリで、UIを構築するための強力なツールです。
  • Vue.js: シンプルで学習しやすいフレームワークです。
  • Angular: 大規模なアプリケーション開発に適したフレームワークです。

3. プロジェクトの作成

  • 選択したフレームワークの公式ドキュメントに従って、新しいプロジェクトを作成します。

4. 基本機能の実装

  • タイマー: setInterval関数を使って、時間をカウントダウンします。
  • UI: タイマーを表示する部分、開始・停止ボタン、設定を変更する部分などを作成します。
  • アラート: Web Audio APIを使って、アラーム音を鳴らします。

5. 状態管理

  • useState (Reactの場合): コンポーネントの状態を管理します。
  • ローカルストレージ: ブラウザにデータを保存し、設定を保持します。（必須ではありません）

6. デザイン

  • CSS: CSSを使って、アプリのデザインを作成します。
  • UIライブラリ: Material UI, Ant DesignなどのUIライブラリを利用すると、効率的にデザインを作成できます。

7. デプロイ

  • 静的サイト生成: Next.jsやNuxt.jsなどを使って、静的なHTMLファイルを生成します。
  • ホスティング: Netlify, Vercel, GitHub Pagesなどのホスティングサービスにデプロイします。

具体的なコード例は、どのフレームワークを選択するかによって異なります。
例えば、Reactの場合、以下のようになります。

import React, { useState, useEffect } from 'react';

function PomodoroTimer() {
  const [timeLeft, setTimeLeft] = useState(25 * 60); // 25分
  // ... (他の状態変数)

  // タイマーのロジック
  useEffect(() => {
    const intervalId = setInterval(() => {
      setTimeLeft(prevTime => prevTime - 1);
    }, 1000);

    return () => clearInterval(intervalId);
  }, [timeLeft]);

  // ... (JSXでUIをレンダリング)
}

まずは、どのフレームワークを使って開発するか決め、簡単なデモアプリを作成してみましょう。
分からないことがあれば、いつでも質問してください。

より詳しい情報が必要な場合は、以下の点について教えてください。

  • プログラミング経験: どれくらいの経験がありますか？
  • 興味のあるフレームワーク: 特に興味のあるフレームワークはありますか？
  • 実現したい機能: 特にこだわりたい機能はありますか？

ご自身のスキルや興味に合わせて、最適な方法を選択することができます。

momuramomura

ざっくりやることが見えてきたので進めてみる。

1. 開発環境の構築

コードエディタ

Visual Studio Codeをインストール済みなのでOK

Node.js

最新のLTS(v22.11.0)にアップグレードしようとしたら失敗
入れてたバージョン: v15.10.0
brew install node@22 でアップグレード
バージョン確認

node -v
dyld[11672]: Library not loaded: /usr/local/opt/icu4c/lib/libicui18n.67.dylib
  Referenced from: <5ECA849D-7C0C-3B6A-A078-56C3D034E4CD> /usr/local/Cellar/node/15.10.0/bin/node
  Reason: tried: '/usr/local/opt/icu4c/lib/libicui18n.67.dylib' (no such file), '/System/Volumes/Preboot/Cryptexes/OS/usr/local/opt/icu4c/lib/libicui18n.67.dylib' (no such file), '/usr/local/opt/icu4c/lib/libicui18n.67.dylib' (no such file), '/usr/local/lib/libicui18n.67.dylib' (no such file), '/usr/lib/libicui18n.67.dylib' (no such file, not in dyld cache), '/usr/local/Cellar/icu4c@76/76.1_1/lib/libicui18n.67.dylib' (no such file), '/System/Volumes/Preboot/Cryptexes/OS/usr/local/Cellar/icu4c@76/76.1_1/lib/libicui18n.67.dylib' (no such file), '/usr/local/Cellar/icu4c@76/76.1_1/lib/libicui18n.67.dylib' (no such file), '/usr/local/lib/libicui18n.67.dylib' (no such file), '/usr/lib/libicui18n.67.dylib' (no such file, not in dyld cache)
zsh: abort      node -v

🤔
brew install中にもエラーが発生していたので brew upgrade してみるたが、Xcodeのエラーが発生。表示されたコマンドを実行、ダイアログに従ってダウンロード。

Error: Xcode alone is not sufficient on Sonoma.
Install the Command Line Tools:
  xcode-select --install

最初残り37時間と表示されてギョッとしたが、少し経つと15分などまともな時間になったので安心してインストール。