友達と2人で使える「いっしょにすることリスト」PWAアプリの実装レポート

スマートフォンが普及した現代、「やることリスト」アプリは数多く存在します。しかし、友人との共同作業や計画を管理するためのシンプルなアプリはあまり見かけません。そこで今回は、友達と2人で使える「いっしょにすることリスト」PWAアプリ「タスケット」の実装について紹介します。

タスケットとは？

タスケット（Tasket）は、友達と2人で共有できるタスクリストのPWA（Progressive Web App）です。PWAとは、ウェブ技術で作られたアプリケーションで、インストールするとスマートフォンのネイティブアプリのように使えるものです。まるでお互いの買い物かごのように、2人で見ているタスクリストに「これやろうね」とタスクを入れていくイメージです。

キャッチフレーズの「タスクをタスケットに入れるね」という言葉が示すように、日常的に使いやすいシンプルなデザインを心がけました。

主な機能

タスケットには次のような機能があります。

シンプルなリスト管理

単一の共有リストで、タスクを簡単に管理できます。タスクには「通常タスク」「緊急タスク」「アイデア・メモ」という3種類があり、緊急タスクや新規タスクは上部に表示されます。タスクの完了チェックもでき、完了したタスクは非表示/表示を切り替えられます。これにより、アプリの画面上でタスクの優先順位がひと目でわかります。

リアルタイム共有機能

2ユーザー間でリストをリアルタイムに同期できます。一方のユーザーがタスクを追加すると、もう一方のユーザーの画面にもすぐに反映されます。また、同時編集にも対応しているため、お互いの操作が衝突することはありません。友人と話しながら「あれやろうかこれやろうか」とリストに追加していくときも、ストレスなく使えます。

通知機能

相手がタスクを追加したときや完了したときに通知を受け取れます。通知には「誰が」「どのタスク」を「どうした」のかという情報が含まれるため、リストの変更を見逃すことがありません。通知のON/OFF切り替えも可能です。これは、友人からの「忘れてない？」という連絡の代わりにもなります。

オフライン対応

PWAの特徴を活かして、インターネット接続がないときでもアプリを使うことができます。オフラインで行った変更は、ネット接続が回復したときに自動的に同期されます。山の中や電波の弱い場所でも、タスクのメモ取りが可能です。

技術的な実装

フロントエンド

フロントエンド（ユーザーが直接操作する部分）は、HTML、CSS、JavaScriptで構成されています。シンプルで直感的なデザインを実現するため、ライブラリやフレームワークに頼らずに実装しました。

<div class="task-item">
    <input type="checkbox" class="task-checkbox">
    <div class="task-content">
        <div class="task-title">買い物に行く</div>
        <div class="task-meta">
            <span class="task-tag urgent">緊急</span>
            <span class="task-date">2025/05/10</span>
        </div>
    </div>
    <div class="task-actions">
        <button class="task-btn edit-btn">編集</button>
        <button class="task-btn delete-btn">削除</button>
    </div>
</div>
Code language: JavaScript (javascript)

このようなHTMLコードと対応するCSSスタイルで、視覚的にわかりやすいタスク表示を実現しています。

バックエンド

mixhostなどの一般的なレンタルサーバーで動作するように、バックエンド（サーバー側の処理）はPHPとMySQLで実装しました。データベースにはNoSQLを使用し、リアルタイム対応ができるようにしています。API（Application Programming Interface）のエンドポイントは最小限に抑え、必要な機能だけを実装しています。

PWA設定

PWAとして機能させるために、サービスワーカーやマニフェストファイルを用意しました。サービスワーカーはブラウザのバックグラウンドで動作するJavaScriptで、オフライン動作やプッシュ通知を可能にします。マニフェストファイルはアプリの名前やアイコンなどの基本情報を定義するJSONファイルです。

// サービスワーカー
const CACHE_NAME = 'tasket-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/css/style.css',
  // 他のファイル
];

// インストール時にリソースをキャッシュ
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        return cache.addAll(urlsToCache);
      })
  );
});
Code language: PHP (php)

このコードにより、アプリのリソースがキャッシュされ、オフラインでもアクセスできるようになります。

通知機能

通知機能はOneSignalというサービスを利用して実装しました。OneSignalは、クロスプラットフォーム対応の通知配信サービスで、JavaScriptライブラリとして簡単に実装できます。Web Push APIを使用して、デスクトップやモバイル端末への通知を可能にしています。

// OneSignalの初期化
function initializeOneSignal() {
  OneSignal.init({
    appId: ONE_SIGNAL_APP_ID,
    notifyButton: {
      enable: false
    },
    allowLocalhostAsSecureOrigin: true
  });
  
  // 通知の許可状態を確認
  OneSignal.isPushNotificationsEnabled()
    .then(isEnabled => {
      if (isEnabled) {
        // ユーザーIDを設定
        setOneSignalUserId();
      } else {
        // 通知が有効でない場合は許可を求める
        if (localStorage.getItem(STORAGE_KEYS.NOTIFICATIONS_ENABLED) === 'true') {
          requestNotificationPermission();
        }
      }
    });
}
Code language: JavaScript (javascript)

このコードでOneSignalを初期化し、通知の許可状態を確認しています。

実装の工夫点

シンプルさの追求

タスケットの最大の特徴は、シンプルさにあります。多機能な「やることリスト」アプリは既に多く存在する中、タスケットは「友達と2人で共有する」という明確な目的に絞り、余計な機能を削ぎ落としました。料理のレシピのように、材料と手順を最小限にすることで完成度を高めています。

オフライン対応の実装

インターネット接続がなくても使えるように、ローカルストレージを活用しています。オフラインで追加・編集・削除したタスクは、オンラインに復帰したときに自動的にサーバーと同期されます。スマートフォンを電車の中で使うように、どこでも安心して使えるアプリを目指しました。

// オンライン/オフライン状態の処理
function handleOnlineStatus() {
  const isOnline = navigator.onLine;
  const body = document.querySelector('body');
  
  if (isOnline) {
    body.classList.remove('offline');
    
    // オフラインで保存されたデータを同期
    if (isAuthenticated()) {
      syncOfflineData();
    }
  } else {
    body.classList.add('offline');
    
    // オフライン通知
    showNotification('オフラインモードです。インターネット接続を確認してください。', 'warning');
  }
}
Code language: JavaScript (javascript)

このコードで、オンライン状態とオフライン状態を切り替えています。

通知システムの最適化

ユーザーにとって重要な情報だけを通知するように設計しました。「相手がタスクを追加した」「相手がタスクを完了した」という2つのイベントに絞ることで、通知疲れを防ぎつつ、重要な更新を見逃さないようにしています。リマインダーや予定のように、適切なタイミングで適切な情報を提供します。

今後の展望

タスケットは現在、基本的な機能を実装した段階です。今後は、次のような機能の追加や改善を検討しています。

タスクの期限やリマインダー機能
画像や小さなメモの添付機能
テーマカラーのカスタマイズ
小規模なグループ（3〜5人）での共有対応

ただし、シンプルさを損なわないよう、慎重に機能を追加していく予定です。増え続ける本棚のように、いつのまにか使いにくくなることを避けるためです。

まとめ

タスケット（Tasket）は、友達と2人で共有できる「いっしょにすることリスト」のPWAアプリです。シンプルなデザイン、リアルタイム共有、通知機能、オフライン対応などの特徴を持ち、日常的なタスク管理をスムーズに行えます。HTML、CSS、JavaScriptによるフロントエンド、PHPとMySQLによるバックエンド、サービスワーカーとマニフェストファイルによるPWA対応、OneSignalを用いた通知システムなど、各技術を組み合わせて実装しました。