Notion Blog を日本語最適化して会社ブログに採用した話

Notion いいっすよね〜!!!

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

Notion Blog とは?

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

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

これらを参考に、しくみ製作所のブログを下記の通り 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 ライフをお送りください ♪