レンタルサーバーで作る「タスケット」アプリ – シンプル版とリアルタイム版の二段構えアプローチ

タスク管理アプリ「タスケット」の開発を検討する中で、最初はVercelなどのPaaSサービスを使った本格的な実装を考えていました。しかし、「まずはシンプルな版を作って公開してみよう」という発想の転換から、開発アプローチを見直すことにしました。この記事では、レンタルサーバー(mixhost)を活用したシンプル版と、将来的なリアルタイム版の二段構えで開発を進める考え方を共有します。

なぜシンプル版から始めるのか

「理想のアプリ」と「今すぐ作れるアプリ」は往々にして異なります。タスケットの完全版は、リアルタイム同期機能を備えた2人で使えるタスク管理アプリですが、この機能を実現するにはNode.jsやWebSocketなどの技術が必要です。しかし、多くのレンタルサーバーではこれらの技術が使えない制約があります。

そこで考えたのが「二段構え戦略」です。使用中のレンタルサーバー(mixhost)で実現可能なシンプル版をまず公開し、その後でPaaSサービスを活用したリアルタイム版を開発するアプローチです。

この戦略には以下のメリットがあります:

  • すぐに形にして公開できる
  • ユーザーからの早期フィードバックが得られる
  • 少ない技術的リスクで開始できる
  • 既存のドメイン(app.chiilabo.jp)をすぐに活用できる

料理に例えると、「プロのようなフルコース」を目指す前に、まずは「美味しい定食」を作って提供する感覚です。定食でも十分に満足してもらえるなら、それはそれで価値があります。

シンプル版「tasket」の開発計画

シンプル版「tasket」は、mixhostレンタルサーバーで実現可能な機能に絞って開発します。3段階の開発計画で、基本的なタスク管理からシンプルな共有機能まで実装していきます。

第1段階:基本機能の実装

まずは「まずすること」と「予定すること」という2つのエリアでタスクを管理できる基本機能を作ります。タスクの追加、完了チェック、一時保存などの機能を実装します。最初の段階ではブラウザのローカルストレージを使ってデータを保存するため、サーバーとの連携は最小限です。

ローカルストレージとは、ブラウザ上でデータを保存できる機能です。メモ帳に書いたメモがブラウザを閉じても消えない、といったイメージです。

第2段階:個人機能強化

次に、タスクの重要度マーク(★)を付ける機能や、複数タスクの一括入力機能を追加します。また、データベースとの連携を実装し、タスクデータを永続的に保存できるようにします。この段階では、PHPとMySQLを使ってサーバー側でのデータ管理を実現します。

PHPとは、Webサイトを動的に動かすためのプログラミング言語です。レンタルサーバーでよく使われています。MySQLはデータを整理して保存するためのデータベースシステムです。図書館の本棚のように、情報を整理して保管します。

第3段階:共有機能の簡易実装

最後に、シンプルな認証機能と疑似リアルタイム更新機能を実装します。認証は複雑なユーザー管理ではなく、固定URLとシンプルなパスワードで行います。また、Ajaxポーリングという技術を使って、30秒ごとにサーバーに問い合わせることで、疑似的なリアルタイム更新を実現します。

Ajaxポーリングとは、定期的にサーバーに「変更はありましたか?」と尋ねる技術です。友達の家に「何か新しいことある?」と定期的に電話をかけるようなイメージです。本当のリアルタイム通信ではありませんが、十分に実用的な代替手段になります。

シンプル版のURL設計と実装案

タスケットのシンプル版は、既存のドメイン「app.chiilabo.jp」を使って以下のようなURL構造で実装します:

https://app.chiilabo.jp/tasket/              # メインページ
https://app.chiilabo.jp/tasket/create/       # 新規タスケット作成ページ
https://app.chiilabo.jp/tasket/t/{uniqueid}/ # 特定のタスケットにアクセスするURL
Code language: JavaScript (javascript)

シンプルな認証方式として、URLのハッシュ部分を使った方法を採用します:

https://app.chiilabo.jp/tasket/t/abc123/#key-simplepassword
Code language: JavaScript (javascript)

ハッシュ部分(#以降)はサーバーに送信されないため、パスワードがURLに表示されていても安全性を確保できます。JavaScriptでハッシュ部分を読み取り、認証処理を行います。

データベースは以下のような構造を考えています:

  1. タスケットテーブル(タスク集合の情報)
    • ID、タイトル、作成日時、パスワードハッシュ
  2. タスクテーブル(個々のタスク情報)
    • ID、タスケットID、タイトル、緊急フラグ、重要フラグ、完了フラグ
    • 作成日時、作成者、完了日時、完了者

疑似リアルタイム更新は、JavaScriptで30秒ごとにサーバーに問い合わせる仕組みを実装します。最終更新時刻以降に変更されたタスクだけを取得することで、通信量を抑えつつ変更を反映できます。

リアルタイム版「tasketReal」の構想

シンプル版と並行して、将来的にはリアルタイム版「tasketReal」を開発する構想も持っています。こちらはVercelやFirebaseなどのPaaSサービスを活用し、以下のような特徴を持たせる予定です:

  • React+Node.jsによるモダンな実装
  • Firebaseを使ったリアルタイム同期
  • 本格的なユーザー認証
  • PWA(Progressive Web App)対応

シンプル版でのフィードバックを活かしながら、段階的にリアルタイム版の開発を進めていく計画です。

二段構えアプローチのメリット

このように「シンプル版」と「リアルタイム版」の二段構えでアプローチすることには、いくつかの大きなメリットがあります。

  1. 早期リリースと検証:シンプル版をまず公開することで、アイデアの有効性をすぐに検証できます。
  2. リスク分散:技術的な挑戦を分散させ、段階的に進めることでリスクを軽減できます。
  3. 学習効果:シンプル版の開発を通じて得た知見を、リアルタイム版に活かせます。
  4. 並行提供の可能性:将来的には、シンプル版とリアルタイム版を用途に応じて選べるようにすることも検討できます。

ソフトウェア開発では「完璧を求めるよりも、まず動くものを作る」という考え方が重要です。理想形を目指しつつも、まずは実用的なものを世に出すことで、実際のユーザーニーズを把握できます。

開発計画のまとめ

開発計画をまとめると以下のようになります:

  1. シンプル版「tasket」(mixhost)
    • URL: https://app.chiilabo.jp/tasket/
    • 技術: PHP + MySQL + JavaScript
    • 機能: 基本的なタスク管理、簡易共有、疑似リアルタイム更新
    • 認証: シンプルなURL+パスワード方式
    • 開発: 3段階で実装
  2. リアルタイム版「tasketReal」(Vercel+Firebase)
    • 技術: React + Node.js + Firebase
    • 機能: フル機能のタスク管理、リアルタイム同期、ユーザー認証、PWA対応
    • 認証: Firebase Authentication
    • 開発: シンプル版の後に5段階で実装

この二段構えのアプローチは、限られたリソースの中で効率的に開発を進めるための戦略です。すぐに使えるものを作りながら、理想的なシステムも並行して構築していくことで、短期的な成果と長期的なビジョンを両立させます。