これは、個人の様々なオンライン活動を一つのタイムラインに集約して表示するウェブサイト「村瀨動静」のソースコードです。GitHub PagesとGitHub Actionsを利用し、サーバーレスかつ無料で運用することを目指しています。
- タイムライン表示:
timeline.jsonファイルから活動データを読み込み、日付ごとにグループ化して表示します。 - 自動更新: GitHub Actionsを利用して、定期的に新しい活動がないか自動的にチェックし、タイムラインを更新します。
- サーバーレス & 無料: 外部のホスティングサービスやデータベースを一切使わず、すべてGitHub上で完結しているため、完全に無料で運用できます。
- シンプルなデザイン: ダークモードにも対応した、見やすいミニマルなデザイン。
- ハイブリッド無限スクロール: ヘッダー部分のSNSアイコンは、ユニークな無限スクロール機能を備えています。
- 自動スクロール: ページを操作していないときは、アイコンがゆっくりと自動で流れ続けます。
- 一時停止: マウスカーソルをアイコンの上に合わせると、スクロールが即座に一時停止します。
- 双方向の手動スクロール: スクロールが一時停止している間は、マウスのホイールやトラックパッド、タッチ操作で左右どちらにも自由にスクロールできます。スクロールの端に到達しても、壁に当たることなくシームレスにループします。
- スムーズな再開: マウスカーソルがアイコンから離れると、その場所から再び自動スクロールが再開されます。
このプロジェクトは、以下の流れで動作しています。
- スケジュール実行: ワークフローが定期的に自動起動します。
- データ取得: 各サービス (現在はSpotify) のAPIにアクセスし、最新の活動履歴を取得します。
- データ保存: 取得した活動データを一つの
timeline.jsonファイルにまとめ、リポジトリ内に直接コミット・保存します。 (v0.3での大きな変更点) - ウェブサイト表示: ユーザーがウェブサイトにアクセスすると、
index.htmlに書かれたJavaScriptがリポジトリ内のtimeline.jsonを読み込み、タイムラインを動的に描画します。
このプロジェクトを自分用にカスタマイズして動かすための手順です。
まず、このリポジトリをあなたのアカウントにフォーク（コピー）してください。
各サービスからデータを取得するために必要な鍵（トークンやAPIキー）を、それぞれの公式サイトや開発者向けページから取得してください。
- 現在、自動連携に必要なサービス:
- Spotify
フォークしたリポジトリの「Settings」>「Secrets and variables」>「Actions」で、ステップ2で取得したアクセストークンとAPIキーを登録します。登録する際のキー名は、ワークフローファイル (.github/workflows/main.yml) 内のenvセクションで定義されているものと一致させる必要があります。
リポジトリの「Settings」>「Pages」で、Sourceを「Deploy from a branch」に設定し、mainブランチの/(root)からデプロイするように設定します。
以上で設定は完了です。「Actions」タブからワークフローを手動で実行し、サイトが表示されるか確認してみてください。
- Frontend: HTML, CSS, JavaScript (Vanilla JS)
- Automation: GitHub Actions
- Hosting: GitHub Pages
- Database:
timeline.json(リポジトリ内)
このプロジェクトはまだ始まったばかりであり、多くの改善の可能性があります。
- 対応サービスの追加: StravaやDribbbleなど、より複雑な認証（OAuth2）を必要とするAPIとの連携に挑戦する。
- 表示コンテンツの拡充: Spotifyで再生した曲のアルバムアートワークを表示したり、他のサービスの投稿内容を展開して表示するなど、よりリッチなタイムラインを目指す。
- フロントエンドの機能改善: プラットフォームごとのフィルタリング機能や、キーワード検索機能を追加する。
- コードのリファクタリング: 将来の機能追加を容易にするため、コードの構造をよりクリーンに改善する。
プルリクエストや改善提案はいつでも歓迎します！
このプロジェクトはMITライセンスです。