0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Next.jsでEvernoteの代替アプリを自作してみた

Posted at

UdonTech Advent Calendar 2023の25日目です。

というわけで今年5月からNext.jsの勉強も兼ねてEvernoteの代替アプリを自作していました。本記事で開発過程や中身を簡単に紹介します。

完全に個人用のアプリなのでサービス公開とかはありませんが、ソースは以下にあります。ドキュメントはないですが()、頑張れば誰でもセットアップできるかもです。

画面はこんな感じです。

20231225_183555_00.png

開発過程

5月 Next.jsの勉強

上記のEvernote値上げ告知を見てEvernoteから別のアプリに移行する決心をしました。ずっと前から移行先を探していたのですが、いまいちしっくりくるアプリがないので、Web系技術の勉強も兼ねて自作することにしました。

Next.jsが流行っているようなので、Next.jsで自作することにしました。まずはNext.jsの勉強を行いました。

主にやったこと

まずはチュートリアルや解説記事をたくさん読んで、Next.jsのお作法や一緒によく使われるライブラリーなどを把握していきました。それだけだとまだNext.jsを使いこなすのが難しいなと思ったので以下の技術書も読みました。

『TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発』・・・Next.jsの入門書です。純粋な技術解説だけでなく、Webフロントエンド技術の変遷の歴史なども分かりやすくまとまっていてとても良かったです。

『WEB+DB PRESS Vol.133』- Tailwind CSS実践入門・・・Next.jsがデフォルトでおすすめしてくるTailwindの解説記事です。この記事を読んだおかげでTailwindの気持ちが大分わかるようになりました。

どちらの技術書も当たりでした。この2冊を読んだおかげで大分Next.js・Tailwindの書き方が分かってきました。

↓この頃のつぶやき(Tailwind CSS実践入門を読む前)

image.png

6月 アプリ開発

実際にアプリを作っていきました。

Evernoteのデータ変換、表示

まずはEvernoteからデータをエクスポートして自作アプリから扱いやすいデータ形式に変換しました。

EvernoteのエクスポートデータはenexというXML形式のデータです。enexの中身を調べると、ノートの本文はCDATAセクションに埋め込まれたただのHTMLドキュメントでした。それにプラスアルファでノートのタグや更新日時の要素がついてる感じでした。なので、enexからノートの本文を抜き出して適当なHTMLページのdiv要素に挿入したら、Evernoteと同じ見た目でそのまま表示できました。

とりあえずenexファイルをJavaScriptで扱いやすいようにJSONに変換して、そのJSONデータを表示する処理を作っていきました。

変換処理は適当にC# (LINQPad) で作りました。所詮ワンオフの作業なので適当です💪(TODO あとでデータ変換処理のコードを貼る)

↓その頃のつぶやき

image.png

ノートデータのDBへの格納、フォルダー操作実装

JSONデータの表示がある程度出来てきたので、Prismaを使ってDBに格納して取り出す方式に作り変えていきました。

↓その頃のつぶやき

image.png

ノート新規作成機能追加、編集機能追加

ノート新規作成・編集ができるようにしていきました。

編集機能は、良さげなリッチテキストエディター系のライブラリが色々あって迷いましたが、とりあえず一番シンプルなreact-contenteditableを使うことにしました。何か気の利いた編集機能を追加したかったら昔ながらの execCommand() (非推奨) を自前で呼び出す感じで、とても安心感があります😊

image.png

image.png

7月~

6月である程度基本的な機能は作れたので、7月以降は実際にノートアプリを使いつつブラッシュアップやモバイル対応を行っていきました。

(余談)UdonTech LT大会で発表

7月15日のUdonTechのLT大会で発表してきました。内容は本記事と似たような話です。

PWA対応

スマホのホーム画面やWindowsのタスクバーにピン止めできたら便利なのでPWA対応しました。

ついでにWeb Share Target API(スマホの共有メニューにアプリを表示できるようにするAPI)に対応したりもしました。(当該コミット)

image.png

色々機能追加

URLのカード化

Notionにあって便利だった、URLを貼り付けたらリンク先の情報をカード化して表示する機能をつけました。使用したライブラリ → https://github.com/jacktuck/unfurl

image.png

ダークテーマ

ダークテーマを実装しました。Tailwind便利だと思いました。(なお保守性は不明)

image.png

WYSIWYG

GoogleドキュメントっぽいWYSIWYG編集ショートカットを追加しました。 execCommand() は偉大です。

貼り付けた画像のS3への保存

画像を貼り付けるとData URIスキームでノートに埋め込まれてノートサイズが肥大化していたので、クリップボードデータを読み取って画像をS3にアップロードする形に変更しました。

終わりに

今まで作った主な機能は以上です。

まだまだ欲しい機能はたくさんありますが、現状でも便利に使えています。Evernote時代よりサクサク動くようになっただけでも満足ですし、もうこれ以上アプリが望まない方向に改悪されて落胆することがなくなるのも良い感じです。

ReactやNext.jsやTypeScriptなどモダンなWeb開発の勉強もできて良かったです!(ソースコードは大分🍝化しつつありますが...)

以上です。アドベントカレンダーお疲れ様でした!

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?