Notionから参考文献リストを出力できるアプリをリリースしました【個人開発】

はじめに

こんにちは！文系修士Notionだいすき学生のharuchannです。

わたくし現在、
文系修士　なので、　論文やエッセイをいっぱい書く、
Notionだいすき　なので、　それらの参考文献をNotionのDBで管理している、
のですが、ひとつ問題を抱えておりました。

それは、「参考文献リストを作るのがめんどくさい！」というお悩み！

ということで、これを解決するウェブアプリをつくりました。
References（参考文献） + Notion = Reftion です！

ゲストログイン（デモ）機能もあるのでお気軽にのぞいていってください～。
※現在日本語未対応ですが、なるはやでする予定です！

独学かつ初個人開発のため、本記事記載内容やGithub上のコード、サービス自体にご指摘事項ございましたらご教示いただけると大変ありがたいです！

解決したいこと

Academic paperでは、最後に参照したソース（論文etc）の一覧を記載することが求められ、これは特定のフォーマットに正しく沿っている必要があります。↓のような感じ。

ただでさえめんどくさいのに、長いエッセイや論文になると、参照文献の数は大量になるので、参考文献リストは超長くなり、めんどくさ度はさらにアップします。たとえば、↓は私の期末課題4000単語エッセイの参考文献リスト。

さすがにこれだけめんどくさいと、「参考文献リストをつくるのがめんどくさい」という問題意識は歴史的に？世界的に？共有され、いろいろな文献管理ツールが登場しています。（eg. Paperpile, Endnote, Mendeley etc.)
そして、これらのツールには、そのツールで文献管理（文献のブックマークやカテゴリわけなど）を行っている場合に、参考文献リストを自動生成できるような便利機能がついています。

これらのツールは非常に便利であるようにみえる一方、Notionだいすきさんとしては、文献管理にあたり、Notionの利便性も捨てきれません。特に私は大学の授業のノートなどもNotionでとっているので、リンクなどをしながら、Notionのなかにすべての情報をまとめられるのはとても魅力的でした。

ただ、Notionで文献管理をすると、参考文献リストの生成が手動になる...！
それは絶対に嫌だ！でも、参考文献リストさえ自動生成できれば、Notionは最高の文献管理ツールになれる！！

ということで、NotionのDBに基づき、参考文献リストを生成できるアプリをつくろうと決めました。

機能概要 / こだわりポイント

参考文献リスト出力

ユーザには以下ふたつのカラムを持つDBを用意してもらうことを条件としました。

column name	column type	requirments	usage
tag	Multi_select	すくなくともひとつのoptionが設定してあること	参考文献のカテゴリ分け（どの論文やエッセイに対してどの参考文献を用いたか）
doi	Url	各参考文献に対し、doiURLが入力されていること	doiURLの入力

Reftion側ではホーム画面でまず連携先DBのtag情報を読み込み、一覧にして表示。
利用者はtag一覧の中から、今回参考文献リストを出力したい対象の論文/エッセイのtagを選ぶと、そのtagに対する参考文献リストが出力できるようになっています。

参考文献リストの要件は、以下2点です。

• 各参考文献の情報が適当なフォーマットに沿っていること（いろいろなフォーマットがありますが、Reftionはいったん、メジャーなAPA6を採用しています。）
• 各参考文献が第一筆者名のABC順に並んでいること

Notionとの連携

Notionとの連携は、以下ふたつの情報をユーザに登録してもらうことで実現しています。このふたつは暗号化してDBに保存しています（NotionDBのIDは完全な公開情報なので別にいいかと思いましたが一応）。
また、Notion側でDBへの連携を許可してもらうことも条件です。すべて初回に一度設定完了すれば、次回以降はログイン後すぐ設定不要で使えます。

name	details
Notion Integration Key	NotionのMy integrationsページより発行
Notion Database ID	Notionのdatabaseの共有URLのうちの一部の文字列

熱烈大歓迎

（なんだこの見出し...。）

ここまでお読みいただいて「む、設定めんどくさそう...。」と思った方いらっしゃいませんでしょうか。私は思いました。
実際やってみるとそんなに面倒ではないのですが、ステップ多いし、なんちゃらKeyとか、なんかパッと見めんどくさそう。

ということで、訪れてくれた方が使用を始めるまでのハードルをできるだけさげるべく、がんばりました。ポテンシャルユーザのみなさま、熱烈大歓迎大作戦です。主な施策は以下の4つ。

デモ

「まずは体験して良さを知ってもらおう！（そうすれば少しの苦行少しだけ大変な最初の設定作業を乗り越えるモチベーションを持ってもらえるだろう！）」ということで、ランディングページから一瞬で、ログインや設定等一切不要で実際の機能を体験できるデモ機能をつけました。

こちらのデモアカウントは実際にNotionのサンプルDBに紐づいていて、紐づき先DBへのリンクもデモ内で公開しているので、ユーザさんには実際の利用をイメージしてもらえるかと思います。

らくらくGoogle登録/ログイン

（上のgifは2回目以降のログイン時）

ユーザ認証はGoogleアカウント認証のみ可とし、追加での入力項目も設けていません。
これにより、ユーザはサインアップとログインともにワンクリックで可能となっています。また、「NotionのAPIキーを預ける」「個人開発の」サービスに、パスワード等個人情報を預けること自体が心理的障壁となりサインアップを躊躇う方などもいらっしゃるかなと思ったため、認証はGoogleさんにお願いすることにしました。
こちらとしても、セキュリティ対策の観点からあまり多くの情報は持ちたくなく、Google認証の際はemail_addressのみをDBに保存しています。（不要なので、email以外（名前など）は一切取得していません。）

オンボーディング

複雑めな初期設定をいかにすこしでも簡単に乗り越えてもらうかを意識してつくりました。
設定手順の解説画面と、その解説を読みながら生成したKey等の入力画面が別々だとわかりにくくなってしまうと思ったので、設定手順の解説ページにそのまま設定項目の入力フォームを埋め込みました。
読みすすめながらどんどん入力していくことができるので、別画面でテキストエディタを開いてこのKeyを一度保存して...という手間が減る分ユーザに優しいつくりになったかと思います。

ちなみに、このオンボーディング画面はUserGuideとして後からでもログインできますが、遷移元の条件分岐で、細かいメッセージやフォーム*の出しわけをしています。
*この画面にフォームを埋め込んで出すのはオンボード時だけです。オンボード時以外は設定値入力用にフォームだけのSetting画面を用意しました。

エラーメッセージ

当たり前だとは思うのですが、できるだけエラーメッセージを細かく正確に出すようにしています。
eg. 「あれ！何かがおかしいので設定を確認してね！」ではなくて、「タグの選択肢がひとつもないのでエラーだよ。ひとつ以上設定してね。」など。

設定項目が多くて最初はややこしいと思うので、すこしでもわかりやすくなればと思い、気を付けました。ただし、まだ細かく様々なケース検証しきれていないので、今後もすこしずつ改善します。

技術関連

使用技術

• フロントエンド ： CSS, Bootstrap v5.2.3, JQuery
• バックエンド ： PHP 8.1.16, Laravel Framework 10.7.1
• DB ： MySQL
• 本番サーバ : Amazon EC2

->Githubリポジトリはこちら：haruchannn/reftion

外部連携

• NotionAPI：DB情報の読み込み
• CiteAs：それぞれの参考文献の情報を参考文献リストに載せる用フォーマットに沿って出力してくれるAPI（Reftionでの最終的な参考文献リストは、この返り値を筆者のABC順に並べたもの）
• Google OAuth login：前述のとおり

構成図

（怪しいのでアップデートするかもしれません...。）

今後やりたいこと

Reftion

• 日本語対応と日英切り替え対応
• 複数Citation Format切り替え対応
• doiのない参考文献を含む場合も参考文献リストを出力できるようにする
• フロントエンドを素敵に
• 共通している箇所の部品化やコメント整理など、コードをきれいに
• onboardingもっとよくできるゾ
• ユーザテストやヒアリングをしたい

Reftion以外の関連サービス

• Notionの指定したPageでMentionされている項目のdoiを引っ張ってきて参考文献リストを作成するWebアプリ
• 開いているページの論文情報を自動的に拾って、doi等の情報をワンクリックでNotionDBに投げ込めるChrome拡張機能

おわりに

読んでいただきありがとうございました！まだまだやりたいことがいっぱいあるので、きちんと実装していきたいです（が、そろそろ修論がまずいので、一度本業にもどります）。
よろしければデモだけでもみていってください！