to trip page
myself

八谷航太

18yo / ソフトウェア開発者

iconiconiconicon

ローカルとクラウドのハイブリッド的なエディタ

2021-02-22 プログラミング

去年の8月ごろにSvelteを知って、それ以来ちまちまとWebサイト作ったりWebアプリ作ったりしてたんですが、NuxtとかReactやったことがないのもあって仮想DOMへの憧れが捨てられませんでした。というわけで、しばらくSvelteと距離を置くための最後の作品としてMarkdownエディタを作りました。

SLOUCH

https://slouch.dev

FirebaseのCloud Firestoreを使ってサーバーレスでDBをいじれるようにしつつ、ほとんどのブラウザに対応しているFile System Access APIを使ってローカルファイルの上書きと読み込みを実現しています。なので基本はサービス上でファイルを編集し、ローカルも一緒に書き換えたい!と思った時にワンクリックでできるという良さがあります。

僕個人の感覚としてあんまりネイティブアプリをいっぱい入れたくないというのがあって、なのでできる限りWeb上で、めっちゃ使う場合はPWA/ネイティブアプリを入れる感じでPCの資源を節約したいわけです。そういう意味ではローカルファイルをWeb上でいじれるのはめちゃくちゃ嬉しいんですが、何せFile System Access APIは結構新しいAPIなので実装しているサービスがほとんどないんです。Webのマークダウンエディタの有名どころでいうとStackEditとかNotionとか(独自記法多すぎてMD感ないけど)が挙がると思うんですが、全部ローカルへのアクセスはダウンロードしかできないっつーのがどうも気に食わない。もう2021年なんだしローカルからのインポートができたって良いじゃないか…ということで自作しました。

実を言うと、去年の5月くらいにも生のHTML・CSS・JavaScriptで、まだ標準化される前だったFile System Access API(当時の名前はNative File System API)を使って似たようなサービスを作ったんですが、その頃はまだ動けば良いじゃん的なポリシーだったので、コードがまあまあ汚く、ファイル分けも雑だったのであんまり進んでメンテしたいプロジェクトではなくなっていました。まあそもそもGitHubとか初めて知ったくらいの時期だったのでベストプラクティスもクソもないvar使い放題で暗黙の型変換もしまくるようなプロジェクトだったので1年経ってちょっと成長した証として同じようなプロジェクト作ったという経緯もあります。

機能としては先述のローカルへの書き込み、読み出しの他に通常のダウンロードやFirestoreのDBへの保存にも対応してます。現在編集中のドキュメントもDBに記録されているので(正常に動いていれば)リロードしても続けて編集できるはずです。

技術スタック

基本的には全てFirebaseを使っています。認証はFirebase AuthenticationでGoogleとGitHubログイン、DBはFirestoreを使っています。本当は勉強のためにSQLとか使って、サーバーサイドもちゃんと書いてみたかったんですが、それやるほどの大規模アプリケーションでもないし、そもそもFirestoreの使い方も危うかったので地盤を固めるという意味で今回は全てFirebaseに頼りました。ルールは現状認証ユーザーのみ書き込めるようにしてますが、認証ユーザーを個別に認証するルールはまだ書いていないのでGitHubのREADMEの警告を消すまでは利用しないことをお勧めします。

https://github.com/kota-yata/slouch

おわりに

特に新しいことは何もなかったのでZennとかには書きませんでしたが、次Webアプリ作るときはAWSを使います。誓います。