Notion Blog を日本語最適化・会社ブログをもっと使いやすくするために

Date
April 28, 2020
image

はじめに

Notion いいっすよね〜！！！

書きやすいし読みやすい！データベースも使え拡張性にも優れている！！とても使いやすいエディタです。しくみ製作所では、Notion で書いた記事を web 上で公開できる Notion Blog を導入しました！この記事ではその過程を書いたので、Notion Blog が気になっている方々の参考になれば幸いです。 ※ 弊社ブログは super.so を利用する形式に変更しました。

super.so 版を読みたい方はこちらから → super.so 導入記事

Notion Blog とは？

Notion Blog とは、Notion で書いた記事を web 上で公開できるヘッドレス CMS です。Notion を使いマークダウン記法で記事を執筆でき、その記事を簡単な操作で web 上に公開できます。Notion Blog の導入方法については、やひろさんが詳しく書いてくださった以下の記事を参考にしました。

Notionでブログを作ろう！｜yahiro｜note

🍼この記事は blog.yahiro.me(個人ブログ) から転載した物です。 https://blog.yahiro.me/create-notion-blog Notionっていいですよね。すごい使い心地いいし、チームでも個人でも簡単に使える上、とっても便利なメモアプリです。というかメモアプリ自体を超越しちゃっています。 こんなに便利だと、こんなこと思っちゃいますよね。 「Notionだけでブログを作りたい」 しかし、Notionには公式なAPIは存在せず、これまでは独自のシステムを構築する必要がありました。 ですが、2020/01/14 突如 ZEITからNotionをバックエンドにしたヘッドレスCMSが発表されたのです！ かんたんに良いところをまとめてみたいと思います。 ・セットアップが簡単・2分ぐらいで完成!・フルカスタマイズ可能! そんな感じで、非エンジニアでも簡単にブログを構築できます！サンプルサイトはこちらからみることができます。 My Notion Blog https://notion-blog.now.sh/ ちなみにこのブログ自体もNotion Blogを活用して作成しています。blog.yahiro.me https://blog.yahiro.me/ https://zeit.co/home にアクセスして、アカウントを作成してください。 こちらのサイトにアクセスし、下の「▲ Deploy」をクリックします https://notion-blog.now.sh/ 1のボタンをクリックすると、このような画面が現れます。 Project Nameを入力します。ここは自由に入力して構いません。 ここで、最初の関門です。 Notion Tokenと、Blog Index IDを入力する必要があります。次のセクションで取得して入力しますので、このタブはそのままにしておいてください。 ページを新規に作ります。タイトルは自由な名前で結構です！ その次に「Table - Inline」を挿入します。 挿入したら、プロパティを下記のようにしてください。こちらのプロパティ名については、全く同じになるように入力しましょう！ こんな感じになればOKです。 Notion Tokenを取得するには、Chromeで「⌘Command + ⌥Option + I」を押して開発者ツールを立ち上げます。 こんな画面が出てきたら、上にあるApplicationをクリックします。 Applicationタブを開いたら、左サイドバーから、Cookiesの左側の三角をクリックし、出てきた 「https://www.notion.so」 をクリックします そうすると、token_v2という名前の部分がありますので、Value欄の内容をコピーして、 2.のタブの「Notion Token」に入力します。 該当ページのURLのこの部分になります。 ページタイトルを日本語以外にしていると「blog-」などが先頭につく場合がありますが、ハイフンから後をコピーし、 2.のタブの「Blog Index ID」に入力します。 そして「Continue」ボタンをクリックします。 このような画面に飛ばされます。 後々カスタマイズするつもりなら、Gitのリポジトリを作っておくと良いと思います。 しばらくすると、デプロイが完了します！ Visitをクリックすると、作成されたBlogにアクセスできます！ Githubにレポジトリを作成して、少しずつコミットしていくのが良いかと思います。 Notion BlogはReact.js + NEXT.jsで作成されたアプリケーションなので、どんどんカスタマイズしていくと本当になんでもできそうです...

note.com

Notionでブログを作ろう！｜yahiro｜note

また、本家のリポジトリは以下となります。

これらを参考に、しくみ製作所のブログを下記の通り Notion Blog 化しました！

Notion Blog では簡単にページを公開できる！

Notion Blog では、Notion に書いた記事をとても簡単に公開することができます。まず、以下の画像のようにブログ用のテーブルページを準備します。

image

次にテーブルに対し公開したいページを追加してきます。最後に公開したいページの「Published」カラムにチェックを入れればブログ記事として公開することができます。

既存の Notion ページをブログ記事に移行しやすいため、社内資産を公開するのに適していると感じています。今後はこのツールを駆使し、しくみ製作所の取り組みを透明化する予定です。

日本語文章の見た目をよくしてみた！

Notion Blog を導入するにあたり課題がありました。それは日本語で書いた文章を表示すると見た目がイマイチなところです。（あと、チョコチョコ表示できないコンポーネントがある・・・）以下の画像のように日本語の文章を表示すると綺麗とは言えない状態でした。元々英語に最適化されているので仕方ないですね・・・とは言ってられないので、日本語に最適化しました！

image

日本語最適化後の表示は以下の通りです。css をいじっただけですが、けっこう見やすくなったかと思います ( ´∀｀)

image

日本語最適化したソースコードは以下のリポジトリで公開しておりますので、是非ともフォークしてご利用ください〜（日本語最適化をフラグ管理に変更し、Notion Blog 本家に取り込んでもらう予定です）css をいじっているだけなので、そこだけ拝借も歓迎です。

Wordpress からのデータ移行

さて、続いては移行に関してです。しくみ製作所では wordpress でブログを運用してきました。過去の記事がなくなってしまうのは悲しいので、以下の手順で過去記事の移行を実施しました。

  1. 過去記事を markdown 形式で export
  2. markdown ファイルを Notion に import

まず、過去記事を markdown 形式で export するために、以下の wordpress プラグインを活用しました。こちらのプラグインは jekyII 向けに export するツールですが生成物は md ファイルなのでそのまま利用することができました。

最後に、md ファイルを Notion に import しました。import する際には一括で md ファイルを import できる notion tree を活用しました。※ 画像の参照先は古いURLのままなので手動で移行しました（泣）

現状の困りごと

Notion Blog とても便利なんですが、まだ完全ではありません。具体的には、一部のコンポーネントが正しく表示されない感じです（目次やテーブルなど）。今後に期待。

最後に

というわけで、しくみ製作所のブログを Notion Blog 化してみました！これで、記事執筆が捗ること間違いなし！皆さんも Notion Blog を導入して、より良い Notion ライフをお送りください ♪