見出し画像

【無料公開】 "ぼくが考える最強の文書エディター" を作ってみた。

実際に使ってみてください。

こちらから無料でご利用いただけます。

  • スマホの場合、「ホーム画面に追加」でアプリのように動作します。

  • アクセス数が増えすぎて、サーバー料金が負担になる、みたいなことがない限りは無料で使用できるように公開しておこうと思います。


背景

ObsidianがきっかけでMarkdownで書くのが好きになりました。

また、最近では、Obsidianに限らずMarkdownで書いたり、Markdownに限らず、生成AIのプロンプトで構造化されたYAMLやXMLを書いたり…などと、個人的エディター需要が高まってきました。

そういう時は、コードエディター(VSCode)を立ち上げてメモも書いてしまう、みたいなことが増えてきました。
しかし、サクッとメモを書くには面倒だったり...

そこで、ふと思いました…

自作で必要な機能だけ残したVSCodeみたいなWebアプリがあったら便利そう!!

なので、さっそく作ってみました!!


"ぼくが考える最強の文書エディター"

画像
Obsidianのようなレンダリングビュー

1. 思い通りのUI、思い通りの機能

  • VSCode, Obsidianのいいとこどり

  • 機能追加も削除も完全に自分次第

  • 好きなフォント、好きなカラーテーマ

2. どこからでも、即座に起動

  • 機能のシンプルさ、動作の軽量さを重視

  • Webアプリにして、どこからでも即座に起動

  • PC、スマホ対応

3. Notion?Obsidian? 両方OK

  • 「マークダウンを編集する作業空間」にフォーカス

  • プラットフォームの縛りなし

  • 「思いついた瞬間にとりあえず書き始められる」を重視

想定用途

  • Obsidian、Notionなどの文書作成

  • 構造化された文章の作成

  • 一時的なメモの作成

機能紹介8選

1. 基本はVSCodeのような見た目

画像
基本はVSCodeの見た目

2. ダークモード/ライトモードの切り替え

画像
非開発者でも親しみやすい

3. 表示モードは、Edit/Split/Viewの3つ

画像
Splitモード(スマホではこのモードは省略)

VSCodeのようにマークダウンをそのまま編集もでき、
Obsidianのようにレンダリングされた状態で編集することも可能。

4. スマホにも最適化されたUI

画像
必要十分な機能を備えつつ、シンプルなUIを追求

5. カラーテーマ選択可能

画像
IntelliJ New UI, JetBrains Fleet, Kanagawa の3つ

6. フォントも自由

画像
JetBrains Monoを使用(プログラミングで合字が読みやすい!)

7. Obsidian独自の記法にも対応

画像
#タグ、==ハイライト==などにも対応

8. よく使う記法を厳選してボタン化

画像
[サイト名](URL) など



このエディターが解決した3つの悩み

悩み1|思いついた瞬間に書き始めたい

Obsidianがとても向いていると感じる用途が、スマホ上での考えごと。
考えごとをメモに起こしていくとき、マークダウンでアイデアを構造的にまとめていくと、頭が整理される感覚があります。
そのため、私は考えごとをバーっと書き出すときにObisidianがとても重宝しています。

しかし、Obsidianのモバイルアプリが時々、プラグインの読み込みで起動に時間がかかったり、起動しても、バグで(?)メモが正常に表示されないことが時々あります。
また、おまけ程度ですがObsidianのノートはタイトルを必ずつけなければならない点も少しだけ煩わしい部分でした。(後から決めることも可能ですが、性格的にUntitledのままで放置になってしまいそう…)

以上のように、思ったことを即座に書き始められないことにストレスを今回のアプリでは解決しました!

悩み2|保存先が決まっていない

Obsidian用のメモではなく、あくまで一時的なメモであったり、開発用のGitHubリポジトリに保管するためのメモであったり、本当はNoitonに書く予定のメモだったり、「どこに保存するかわかんないけど、とりあえずマークダウンで書き始めたい」というシーンが結構あります。

このような場合は、VSCodeなどを立ち上げて、書いたりすることがあるのですが、保存するディレクトリがあるわけでもないし…とメモの保存場所に悩まされることがありました。

以上のように、どのプラットフォームで…とかを気にせずに、とりあえず書き始められて、保存場所にも迷わない、作業空間に特化したアプリを作成しました。

悩み3|コードエディターをもっと手軽に使いたい

上の2つの悩みなどの場面や、AIのプロンプトを作成したいと思った時に、
VSCodeなどを立ち上げてYAMLやXMLをちょっと書いて…みたいなことが最近増えてきました。
そのような用途ではVSCodeなどのコードエディターはとても見やすく、便利です。しかし、サッと構造化テキストを編集するためにVSCodeを立ち上げるのは、少々重いですし、明らかにオーバースペックです。
PCやスマホから、コードエディターみたいなことがサクッとできる環境って意外とないよなあと思い、今回のアプリを作成してみました。

Web版のVSCodeなんかもあるのですが、ファイルを開くところから開始しなければいけなかったり、私の用途には合いませんでした。


作ってみて…

1. スマホ対応ってめちゃくちゃ大変

PC専用のWebアプリを開発したことは何度かあり、それをレスポンシブ対応して、PWA対応(ホームに追加でアプリっぽくなるやつ)したら、Webアプリついでに、簡易的なスマホアプリ作れて一石二鳥だ!!
と思ってスマホ対応もしたのですが…
それぞれのUIを考えたり、スマホでのなんてことない操作(選択/コピー/ペーストなど)に最適化するのに結構時間がかかりました。

自分が使いやすいようにUIを考えたりするのはとても楽しい作業でしたが、アプリを2つ作っているような大変さがありました!!

2. UIUXの勉強になる!

自分自身がこのサービスの熱狂的なユーザーなので、使いづらいなと思った部分はすぐに修正ができたり、そのために情報検索をしたり、自分ごと化してアプリ開発ができることで、とても勉強にもなると感じました。

また、今回アプリ作成中に以下のようなツイートを拝見して、早速マネさせていただきました。このように、得た知識をすぐに実践できるPlayground的な用途でも自作アプリはいいなと思いました。

3. 自分のためのアプリ開発って最高!

上記にまとめたように、自分で自分のためのアプリを作るのは最高でした。
今回作ったアプリにAI生成機能を追加してみようかな…などいくらでも拡張可能です。

作ること自体が楽しくて、作ったことで自分の生活の豊かさが上がるのも魅力です。

私は、iOSショートカットなどで、自分が欲しいツールなどを作るのが好きなのですが、最近は生成AIの進化もありiOSショートカットくらいのテンションで、自分の好きなアプリを気軽に作って…という世界が数年後には実現していそうだな…と思うとワクワクします。

以下にソースコードを置いておきますので、もしよろしければ、ぜひ十人十色の "ぼくが考える最強の文書エディター" を作ってみてください!

ここまでお読みいただきありがとうございました!!


いいなと思ったら応援しよう!

コメント

2
コメントするには、 ログイン または 会員登録 をお願いします。
影織のプロフィールへのリンク
影織

使わせていただきました。 シンプルで、書くことに集中できるUIになっていて、とても素敵だと思いました!

Yasuのプロフィールへのリンク
Yasu

お使いいただきありがとうございます!! そう言っていただけると非常に嬉しいです。 本日もスマホ版を少し使いやすくしました。

1
買うたび 抽選 ※条件・上限あり \note クリエイター感謝祭ポイントバックキャンペーン/最大全額もどってくる! 12.1 月〜1.14 水 まで
【無料公開】 "ぼくが考える最強の文書エディター" を作ってみた。|Yasu
word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word

mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1