【ITニュース解説】How I Use Supabase as a Simple CMS for My Portfolio Blog

この解説では、ポートフォリオサイトにブログ機能を追加したいと考えた際、毎回コードを修正してウェブサイトを再公開する手間を省くために、Supabaseというサービスをシンプルに利用する方法が紹介されている。Supabaseを Content Management System（CMS）のような形で使うことで、記事の作成や更新が格段に簡単になるのだ。CMSとは、ウェブサイトのコンテンツ（文章や画像など）を管理・更新するためのシステムで、これを使うとプログラグラミングの知識がなくてもウェブサイトの情報を編集できるようになる。

Supabaseは、ウェブアプリケーションを開発する際に必要なデータベース機能や認証機能、ストレージ機能などを提供するサービスである。特に、ここではブログの記事データを保存する「データベース」と、記事に使う画像を保存する「ストレージ」という二つの機能が中心的に使われる。これらを活用することで、ブログ記事の情報を一元的に管理し、ウェブサイトに表示できるようになる。

まず、ブログの記事情報を保存するためのデータベースの準備から始める。SupabaseにはSQLエディタという機能があり、これを使って「posts」という名前のテーブル（表）を作成する。このテーブルには、ブログ記事に必要な項目、例えば、記事を識別するための「id」（識別子）、作成日時を示す「created_at」、記事の「title」（タイトル）、記事の概要である「excerpt」、本文の「content」、公開日を示す「date」、記事のURLの一部となる「slug」（スラッグ）、そして記事のサムネイル画像を示す「cover_image」（カバー画像）などのカラム（列）が定義される。特に「slug」は、例えばウェブサイトのURLが「/blog/my-first-post」のようになる場合に「my-first-post」の部分にあたる。このスラッグは各記事で重複しないように設定することで、それぞれの記事に固有のアドレスが与えられ、ウェブサイト上で正しくアクセスできるようになる。

次に、ブログ記事で使う画像を管理するための準備を行う。Supabaseのストレージ機能を利用し、「site-images」のような名前の「バケット」（画像を分類して保存する場所）を作成する。このバケットは公開設定にすることで、ウェブサイトから画像にアクセスできるようになる。作成したバケットにカバー画像をアップロードすると、その画像にはユニークな公開URLが発行される。このURLを先ほど作成した「posts」テーブルの「cover_image」カラムに保存することで、どの記事がどのカバー画像を使うかをデータベース上で管理できるようになる。ウェブサイトの表示速度を速くするためには、アップロードする画像のファイルサイズを小さくする工夫も大切で、記事では画像を圧縮するヒントも示されている。

データベースとストレージの準備ができたら、ウェブサイト側でこれらの情報を読み込んで表示する仕組みを作る。ウェブサイトの見た目や動きを制御する部分を「フロントエンド」と呼ぶが、ここではそのフロントエンドからSupabaseのデータにアクセスするための手順を説明する。まず、Supabaseが提供するJavaScriptクライアントライブラリをウェブサイトのプロジェクトにインストールする。このライブラリを使うと、SupabaseのプロジェクトURLと匿名キー（「anon key」と呼ばれる、公開されたデータを読み取るための鍵）を指定するだけで、簡単にSupabaseと連携できるようになる。

ウェブサイトにブログ記事の一覧を表示する際は、Supabaseのクライアントを使って「posts」テーブルから必要な情報、具体的には「title」「excerpt」「slug」「date」「cover_image」だけを選択して取得する。そして、新しい記事から順番に表示されるように「date」カラムで降順に並べ替える。これにより、訪問者は最新の記事をすぐに確認できる。また、特定の記事のページを表示する際には、URLに含まれる「slug」を使って「posts」テーブルからそのスラッグに一致する一つの記事だけを取得する。もしブログ記事の本文をMarkdown形式で書いている場合は、取得したMarkdownテキストをウェブページで表示するために「react-markdown」のような専用のライブラリを使ってHTML形式に変換する必要がある。

ブログのデータはインターネット上に公開されるため、セキュリティ対策は非常に重要である。特に、訪問者が勝手にデータベースの情報を変更したり削除したりできないようにする必要がある。Supabaseでは「Row Level Security（行レベルセキュリティ、RLS）」という機能を提供しており、これを有効にすることでデータのアクセス権限を細かく設定できる。記事では、RLSを有効にし、「Public can read posts」（公開されているユーザーは投稿を読み取れる）というポリシーを作成することで、訪問者は「posts」テーブルのデータを読み取ることしかできないように設定している。これにより、不正なデータ操作を防ぎ、安全にブログを運用できるようになる。なお、データベースへのアクセスには二種類のAPIキーがあり、ウェブサイトのフロントエンドで使うのは「anon key」であり、より強力な権限を持つ「service_role key」は決してフロントエンドのコードに含めるべきではないと強く注意されている。これは、もしservice_role keyが公開されてしまうと、誰でもデータベースの全データを操作できてしまうためである。

新しい記事を公開するプロセスは非常に簡単である。Supabaseの管理画面にある「Table Editor」を開き、「posts」テーブルに新しい行を挿入する。そして、記事のタイトル、概要、スラッグ、本文、カバー画像のURLといった必要な情報を入力していくだけでよい。これらの操作が完了すると、ウェブサイトは自動的に新しい記事を読み込み、コードを一切変更したり、ウェブサイトを再公開したりすることなく、すぐにブログに表示されるようになる。これがCMSとしてSupabaseを利用する最大のメリットである。

このSupabaseを使ったブログシステムには、いくつかの長所と短所がある。長所としては、まず非常にシンプルで、費用をかけずに始められる点が挙げられる。また、新しい記事を公開するたびにウェブサイトを再デプロイする（つまり、コードを修正して公開し直す）必要がないため、手間が大幅に削減される。さらに、ブログのデータは全て自分で管理し、いつでもエクスポートできるため、データの所有権や自由度が高い。一方、短所としては、SupabaseのTable Editorはあくまでデータベースのデータを編集するためのツールであり、文章を書くための専用エディタではないため、長文の記事を書く際には少し不便に感じるかもしれない。もし頻繁に記事を投稿するようであれば、将来的にはこのデータベースの上にもう少し使いやすい管理者用のページ（記事作成画面）を自分で開発することを検討してもよいだろう。

最終的に、個人のポートフォリオサイトのような小規模なブログであれば、Supabaseのデータベースとストレージ、そしていくつかの簡単なデータ取得の命令だけで、十分に機能するブログシステムを構築できることがわかる。これは、システム開発の学習を始めたばかりの初心者にとって、複雑なバックエンド開発なしに実践的なウェブアプリケーションを構築する良い経験となるだろう。この方法を試すことで、データベースとフロントエンドの連携、そして簡単なセキュリティ対策の基本を学ぶことができる。