Procom開発ブログ：ここまでの歩みと今後の展望

はじめに

皆さん、こんにちは！Procom（プロコム）開発チームです。 このブログでは、Procomの構想が生まれた瞬間から、現在の形に至るまでの道のりを記録し、今後の展望についても詳しくご紹介します。 開発初期のアイデア段階から今日まで、Procomはクリエイターやフリーランスの皆さまのための"自己発信プラットフォーム"として進化を遂げてきました。

本記事では、これまでに実装された主な機能、技術的な取り組み、デザインへのこだわり、トラブルとその解決策、そして今後の開発計画まで、詳しくお伝えしていきます。

Procomの構想と初期目的

Procomは、YouTuber・インスタグラマー・ダンサー・フリー芸人・パフォーマー・フリーランスといった、SNSを活用して自らを発信するすべてのクリエイターのために設計されました。

初期の目的は以下の3点です：

1. プロフィール情報を簡単に登録・表示できること。
2. 各種SNS（YouTube・X・Instagram・TikTok）の更新情報を自動・手動で1ページに集約できること。
3. ユーザー同士が閲覧・検索できること。

このように、SNSプロフィールのリンク集を超えて、発信・更新・交流の場を1ページにまとめる"自己発信プラットフォーム"がProcomの目指す形です。

技術スタックと開発環境

使用言語・ツール

• フロントエンド：HTML / CSS / JavaScript（Vanilla）
• バックエンド：Node.js（Express）
• 認証：express-session + bcrypt
• データベース：Firebase Firestore
• 画像ストレージ：Firebase Storage
• デプロイ：Render（本番環境）、ロリポップ（補助）

機能の進化と実装内容

1. ユーザー登録・ログイン・セッション管理

• Node.jsとExpress、bcryptを活用したシンプルな認証フローを構築。
• express-sessionにより、ログイン状態を保持。
• ログイン後にのみ編集機能が表示される仕組みを実装。

2. プロフィール登録・編集・保存

• 名前、肩書き、自己紹介などを編集可能に。
• 写真（最大5枚）をアップロードし、スライダーで表示。
• Firebase Storageにbase64画像をアップロードし、URLをFirestoreに保存。
• セッションと連携し、本人以外は編集できないよう制御。

3. カレンダー機能

• 自作のシンプルな予定追加フォームを実装。
• イベントごとに日付と内容を登録でき、後から削除・編集可能。
• Firestoreのデータ構造でeventsを整形し保存。
• 他人のページで削除できてしまうバグにも対応済。

4. SNS埋め込み・表示

• YouTube：APIでチャンネルIDを取得し、最新動画を2本表示。
• Instagram：入力されたプロフィールURLからアイコン付きリンク表示。
• X（旧Twitter）：ユーザー名からリンクを生成。
• TikTok：動画URLを複数入力し、埋め込み表示。
• SNS情報は全ユーザーに表示され、編集は本人のみ可能。

5. ユーザー一覧ページ

• 登録ユーザーを一覧表示。
• 名前または肩書きで検索可能。
• users.htmlとusers.jsを実装し、Firestoreからデータを取得して表示。

6. トップページの機能強化

• ランダムなユーザーのプロフィールを数件表示。
• ログイン・登録フォームの統合表示。
• 検索バーの追加。

7. パフォーマンスとUI/UXの改善

• 各セクションのレスポンシブ対応。
• 写真の読み込みを必要時のみにして軽量化。
• 編集・削除ボタンのアイコン化。
• ユーザー毎の表示切替にアニメーションも検討中。

トラブルと解決例

写真保存されない問題

原因：画像データ（base64）が大きすぎてリクエストボディの制限に引っかかるケースや、Storageとの通信ミス。 対策：アップロード処理を非同期に分離し、保存完了まで待機処理を実装。

Firestore保存エラー（nested entity）

原因：空のオブジェクトや配列が混入していたこと。 対策：req.bodyの整形処理を追加し、空要素を除去。

Instagram・TikTokの表示不具合

原因：JavaScriptによるURL埋め込み構文ミスやDOM未準備タイミング。 対策：DOMContentLoaded後に初期化を徹底。必要に応じてretry機能も追加。

今後の開発予定

1. アカウント設定機能の実装：メールアドレス・ユーザー名・パスワードの変更機能。
2. DM機能 or コンタクト機能の導入：軽量なメッセージ送信フォーム。
3. いいね/フォロー機能：SNS的なユーザー間のつながり機能。
4. 通知・更新履歴機能：フォローしているユーザーの更新が分かるUI。
5. モバイル対応の強化：現在はレスポンシブ化済みだが、より使いやすいUIへのアップデートを予定。
6. Procomブログ・ニュース機能：運営からのお知らせやユーザー特集記事などを公開予定。

最後に

Procomは、たった一人の開発者が学びながら構築しているプロジェクトです。 それでもここまで到達できたのは、何よりも“使ってみたい”というビジョンと、“クリエイターのために役立つものを作りたい”という想いからでした。

今後は、より多くの方にご利用いただき、実際のユーザーの声を反映しながらアップデートを重ねていく予定です。

Procomの進化を、これからもどうぞ応援よろしくお願いします！

開発運営：Procom公式（info@procom.jp） 公開URL：[Renderの本番環境URL]（近日公開予定）

---

次回の更新では、アカウント設定機能の進捗報告や、検索性向上のためのフィルターUI導入についてご紹介予定です！