【JavaScript入門】「みんなのつぶやき」アプリの概要

　これまで学んできた JavaScript の知識を総動員して、「みんなのつぶやき」という Twitter のようなミニブログ風シングルページアプリケーションを作成します。実践編として、ブラウザ上で動作する Web ページをゼロから作り上げ、次のコンテンツ以降でローカルサーバー構築や各プログラムの詳細解説を行います。

どんな Web ページを作るか

「みんなのつぶやき」は、以下のようなレイアウトと機能を持つ Web ページです。

図：みんなのつぶやきの実行画面

主な機能

画像の読み込み
・画像欄へドラッグ＆ドロップで読み込み
・クリックでファイルダイアログを開いて読み込み
エフェクト＆操作ボタン
・セピア／グレースケール／ぼかし
・元に戻す（加工画像・コメントのリセット）
・保存（画像＋コメントをダウンロード）
・削除（画像欄クリア＋コメント初期化）
コメント入力
・リアルタイム文字数カウント
・最大文字数を超えると警告色を表示
投稿処理
・投稿ボタンで画像をバイナリ、コメントをテキストとしてサーバーへ送信
タイムライン表示
・過去の投稿を時系列で表示
・「❤️」ボタンでいいね数を増加

サンプル画像のダウンロード

　使用するサンプル画像は旅行の記念写真（生成 AI による架空の人物）です。以下のリンクからダウンロードできます。

everyone-tweets01 ダウンロード

　使用するサンプル画像は旅行の記念写真（生成 AI による架空の人物）です。以下のリンクからダウンロードできます。

ディレクトリ構成

node-js/app
   │   ├─ index.html
   │   ├─ style.css
   │   └─ js/
   │        ├─ common.js
   │        ├─ storage.js
   │        ├─ imageArea.js
   │        ├─ imageEffects.js
   │        ├─ controlArea.js
   │        ├─ commentArea.js
   │        ├─ sendArea.js
   │        ├─ dateFormat.js
   │        └─ postListArea.js
   ├─ index.js      ※サーバー起動スクリプト
   ├─ upload_images ※アップロード画像格納ディレクトリ
   └─ post-dat.txt  ※投稿情報保存用テキストファイル（空ファイル）

各プログラムの概要

以下の表に、本アプリケーションを構成する主なファイルと、その役割をまとめています。

ファイル名	概要
index.html	ページ構造と各エリア（画像プレビュー／ボタン群／コメント入力／投稿／タイムライン）を定義
style.css	カードレイアウト、ボタンやテキストの配色・角丸・グリッド配置など全体のスタイルを設定
common.js	全ボタン共通のフォーカス解除やクリック遅延処理など、UI 操作の“ちょっと便利”処理をまとめる。
storage.js	localStorage を使って Canvas（画像）とコメントの保存・復元を行い、状態を保持する。
imageArea.js	画像欄でのドラッグ＆ドロップおよびクリックによるファイル選択と、Canvas への描画処理を担当
imageEffects.js	オフスクリーン Canvas を利用した CSS フィルタ（グレースケール／ぼかし）の適用ユーティリティ
controlArea.js	セピア／グレースケール／ぼかし／元に戻す／保存／削除など、エフェクト＆ファイル操作を実装
commentArea.js	コメント入力時の文字数カウントと表示制御（最大文字数超過時の警告表示）を担当
sendArea.js	投稿ボタン押下時のサーバー送信処理と、投稿リスト更新（いいね機能含む）を行う。
dateFormat.js	タイムライン表示用の日付フォーマットを整形するヘルパー関数を提供
postListArea.js	過去投稿のタイムライン表示と、いいねボタンのクリックによる数値更新を描画

　次のコンテンツでは、Node.js を使ったローカルサーバーの構築手順から解説を始め、本格的にアプリケーションを動かしていきます。