フロントエンドの地獄
cover image

Notionで書いた文章をそのままWebサイトにできるサービス Anotion

制作年
2020

サービス概要

Notionで書いた内容がそのままWebサイトになるNoCodeサービスです。ユーザーがログインして公開されている自分のNotionの記事を指定するだけで、リアルタイムに編集した内容がそのままWebサイトになります。
デザインもオリジナルのCSSで自由にカスタマイズ可能で、URLの設定や独自ドメインの設定が可能になります。
 
「Anotion」のシステム構成図
「Anotion」のシステム構成図
 

システム構成のポイント

インフラ・サーバー含めてVercelに任せています。Next.jsと開発元が一緒なので情報も豊富でセットアップがとても楽です。管理画面のみMusubiiというCSSフレームワークを利用しています。
サイトを作りたいユーザーがアクセスする管理画面は別サイトを準備しており、そこでFirebaseを使って認証し、自分のNotionの記事情報などをDBに保存してもらいます。有料会員はStripeを使って決済を行い、Firebase ExtentionのStripe連携を使ってサブスクリプション情報を記録していきます。
Notion自体のAPIがまだ公開されていないため、サイトアクセス時には指定された記事の内容をスクレイピングし、サイトに再構築します。実際に私個人のポートフォリオ&ブログとして利用していましてNotionで書いてそのまま記事になる体験がとても楽です。
 
 

Anotionの歴史

構想開始&周辺技術を触ってみる

プロトタイプ公開

事前登録

ローンチ

トップページリニューアル