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

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

制作 2020年

サービス概要

Notionで書いた内容がそのままWebサイトになるNoCodeサービスです。ユーザーがログインして公開されている自分のNotionの記事を指定するだけで、リアルタイムに編集した内容がそのままWebサイトになります。

デザインもオリジナルのCSSで自由にカスタマイズ可能で、URLの設定や独自ドメインの設定が可能になります。

Notionを書いたらそのままWebサイトが作れるAnotion

Notionで書いてそのままシェア、とっても楽ですよね。 とはいえNotionの記事をそのまま公開す

Notionを書いたらそのままWebサイトが作れるAnotion site iconhttps://anotion.so/
Notionを書いたらそのままWebサイトが作れるAnotion site cover image

「Anotion」のシステム構成図
「Anotion」のシステム構成図

システム構成のポイント

インフラ・サーバー含めてVercelに任せています。Next.jsと開発元が一緒なので情報も豊富でセットアップがとても楽です。管理画面のみMusubiiというCSSフレームワークを利用しています。

サイトを作りたいユーザーがアクセスする管理画面はサイトを準備しており、そこでFirebaseを使って認証し、自分のNotionの記事情報などをDBに保存してもらいます。有料会員はStripeを使って決済を行い、Firebase ExtentionのStripe連携を使ってサブスクリプション情報を記録していきます。

Notion自体のAPIがまだ公開されていないため、サイトアクセス時には指定された記事の内容をスクレイピングし、サイトに再構築します。実際に私個人のポートフォリオ&ブログとして利用していましてNotionで書いてそのまま記事になる体験がとても楽です。

Notionを書いたらそのままWebサイトが作れるAnotion

Notionで書いてそのままシェア、とっても楽ですよね。 とはいえNotionの記事をそのまま公開す

Notionを書いたらそのままWebサイトが作れるAnotion site iconhttps://anotion.so/
Notionを書いたらそのままWebサイトが作れるAnotion site cover image