超メモ帳ブログアーカイブ表示システム

目的

自分のブログははてなブログに間借りして設置してあるけど、アーカイブが非常に使いにくい。月ごとでしかアーカイブを表示できないし、カテゴリやタグなどを使って分類することもできない。

僕自身がどこにどんな記事があるか把握しにくいし、自分のブログをダラダラと巡回することもままならない。オンラインブックマークのRaindrop.ioのようなインターフェイスで、ブログのアーカイブを無限スクロールで閲覧できたり、簡単に全文検索をできたり、並び替えや絞り込みができるアーカイブ表示システムが必要だと思った。

基本仕様

無限スクロール表示

ユーザがスクロールするたびに新しい記事が動的に読み込まれて無限スクロールを可能にする。

ブラウザが重たくならないように、表示されてない箇所はメモリ解放するなどの工夫が必要

タグ・キーワード検索

記事をタグやキーワードで絞り込める検索機能を実装。これによりトピックに関する記事を簡単に見つけることができる。

並び替え機能

日付順・アルファベット順・スターの数順などの異なる基準で記事を並び替える

レスポンシブデザイン

スマホでもPCでも適切に表示されるようにする。

ダークモード対応

環境に応じてダークモードとライトモードを切り替え。ユーザが切り替えることも可能。

採用技術

フロントエンド

Vue.js

Vuex

Vue Router

Axios

Intersection Observer API

無限スクロールの実装用

NetlifyもしくはGitHub Pages

フロントエンドはこちらにデプロイ

バックエンド

GraphQL

Express.js(node.js)

さくらインターネットスタンダードプラン

public.icon