読書の開始と完了をX（旧Twitter）にシェアできるWebアプリケーションです。
読書のモチベーション向上と記録管理を目的としたシンプルなWebアプリです。ユーザーは読書を開始する際に「# 読書宣言」を含むツイートをXにシェアし、読了時にも完了報告をシェアできます。すべてのデータはブラウザのローカルストレージに保存され、プライベートなタスク管理が可能です。
https://beagleworks.github.io/ReadingDeclaration/
- 書籍タイトルと著者名を入力して読書宣言を作成
- 「#読書宣言」ハッシュタグを含むツイートをXにシェア
- 認証不要でXのシェア画面を開く
- 読書完了時に読了報告をXにシェア
- タスクを完了状態に自動更新
- 達成感の共有と記録の公開
- 進行中と完了済みの読書タスクを分離表示
- タスクの削除機能
- ローカルストレージによるデータ永続化
- ブラウザのローカルストレージのみを使用
- 他のユーザーからデータが見えない個人専用設計
- オフライン環境でも基本機能が利用可能
- HTML5: セマンティックマークアップとアクセシビリティ対応
- CSS3: CSS Grid/Flexboxによるレスポンシブデザイン
- Vanilla JavaScript: フレームワーク不要のシンプル実装
- Local Storage: ブラウザ標準のローカルストレージAPI
- Session Storage: ローカルストレージ利用不可時のフォールバック
- JSON形式: タスクデータの構造化保存
- X Share API:
https://x.com/intent/postを使用した認証不要シェア - ポップアップ機能: 新しいタブでXシェア画面を開く
.
├── LICENSE # MITライセンス
├── README.md # このファイル
├── index.html # メインHTMLファイル
├── css/ # スタイルシート
│ ├── accessibility.css # アクセシビリティ関連
│ ├── animations.css # アニメーション
│ ├── base.css # 基本スタイル
│ ├── buttons.css # ボタン
│ ├── forms.css # フォーム
│ ├── layout.css # レイアウト
│ ├── misc.css # その他
│ ├── notifications.css # 通知
│ ├── responsive.css # レスポンシブ対応
│ └── tasks.css # タスクリスト
├── js/ # JavaScriptファイル
│ ├── app.js # メインアプリケーションロジック
│ ├── input-validator.js # 入力バリデーション
│ ├── notification-manager.js # 通知・エラーハンドリング
│ ├── share-manager.js # Xシェア機能
│ ├── storage-manager.js # ローカルストレージ管理
│ ├── task-manager.js # タスク管理
│ └── task-model.js # タスクデータモデル
└── tests/ # テストファイル
├── TEST-DOCUMENTATION.md # テストに関するドキュメント
├── browser-compatibility-tests.js # ブラウザ互換性テスト
├── input-validator.test.js # 入力バリデーションのユニットテスト
├── integration-test-runner.html # 統合テスト実行用HTML
├── integration-tests.js # 統合テスト
├── run-tests.js # テスト実行スクリプト
├── simple-test.js # シンプルなテスト
├── task-manager.test.js # タスクマネージャーのユニットテスト
├── test-integration-node.js # Node.jsでの統合テスト
├── test-runner.html # ユニットテスト実行用HTML
└── test-validation.html # バリデーションテスト用HTML
{
id: string, // UUID形式の一意識別子
bookTitle: string, // 書籍タイトル（必須）
author: string, // 著者名（オプション）
status: 'active' | 'completed', // タスク状態
createdAt: Date, // 作成日時
completedAt: Date | null // 完了日時（未完了時はnull）
}{
"reading-tasks": [
// タスクオブジェクトの配列
]
}- 「書籍タイトル」フィールドに読む予定の本のタイトルを入力
- 「著者名」フィールドに著者名を入力（オプション）
- 「読書宣言をシェア」ボタンをクリック
- 新しいタブでXのシェア画面が開くので、内容を確認して投稿
- 進行中タスクの「読了をシェア」ボタンをクリック
- 新しいタブでXのシェア画面が開くので、内容を確認して投稿
- タスクが自動的に完了状態に更新される
- 削除: 各タスクの「削除」ボタンでタスクを削除
- 表示切替: 進行中と完了済みのタスクが自動的に分離表示
- データ永続化: ブラウザを閉じても次回アクセス時にデータが復元
- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+
- Local Storage API
- ES6+ JavaScript機能
- CSS Grid/Flexbox
- ポップアップ機能
- 容量不足: ユーザーに警告メッセージを表示し、古いデータの削除を促す
- アクセス不可: セッションストレージにフォールバックして一時的に動作継続
- ポップアップブロック: ユーザーにポップアップ許可を促すメッセージを表示
- URL生成エラー: エラーメッセージとマニュアル投稿オプションを提供
- 必須項目チェック: 書籍タイトルの入力必須
- 文字数制限: Xの文字数制限を考慮した入力制限
- 特殊文字処理: XSS対策とURL安全な文字エンコーディング
- ローカルストレージのみ使用でサーバーへのデータ送信なし
- 入力データのサニタイゼーション処理
- XSS攻撃対策の実装
- 個人データの外部送信なし
- ブラウザセッション毎の独立したデータ管理
- ユーザー間でのデータ共有なし
- TaskManager クラスの全メソッド
- StorageManager のCRUD操作
- ShareManager のテキスト生成機能
- InputValidator のバリデーション機能
- フォーム送信からストレージ保存までの完全フロー
- タスク完了からシェア機能までの連携
- ページリロード時のデータ復元機能
- エラーハンドリングの動作確認
- 主要ブラウザでの動作確認
- レスポンシブデザインの表示確認
- モバイルデバイスでの操作性確認
# ユニットテスト実行
open tests/test-runner.html
# 統合テスト実行
open tests/integration-test-runner.html
# Node.js環境でのテスト実行
node tests/test-integration-node.js# 簡易HTTPサーバーで起動（Python 3）
python -m http.server 8000
# または Node.js の http-server を使用
npx http-serverこのプロジェクトはMITライセンスの下で公開されています。
バグ報告や機能改善の提案は、GitHubのIssuesまでお願いします。