markdown(とcsvファイル)の閲覧&編集エディタツールを作った

スポンサーリンク
Uncategorized

はじめに

生成AIを使う際はmarkdownファイルとかcsvファイルと相性がいい。

Microsoft365 Copilotとかもあるけど、コードのデータをAIに読み込ませて、そのまま資料にまとめたりできたら楽だろうなと思ったりする。

エクセルで修正したものをcsv変換するんだったら最初からcsvで編集できればいいじゃないかとも思った。

markdownは書き方にルールもあるので、直に書くときは慣れていないと時間がかかる。

だから、より書きやすいエディタでなおかつ閲覧できるツールを作ろうと思った。

そのまま発表資料として共有できるなら尚よしである。

You’ve got a friend in md (and csv)

そして作ったのが、「You’ve got a friend in md (and csv)」というツールである。

githubのリンクは以下になる。

GitHub - appare9999/friend-in-md
Contribute to appare9999/friend-in-md development by creating an account on GitHub.

現在、このツールは以下の機能を有している。

  • WYSIWYG editing
    • Milkdown/Crepe を使用してブラウザ上でmarkdownを直接編集できるようにしている。
  • CSV editing
    • CSVファイルも同様に編集ができるようにしている。
  • Full-text search
    • 検索機能を追加している。
    • 検索はファイル名とファイルの中身が対象となる。
  • Live diagrams
    • mermaidとplantumlを図として表示できるようになっている。
    • また、図はフルスクリーンで表示できて、pngとsvgでダウンロードもできるようになっている。
  • Insert image from folder
    • 画像をドラックアンドドロップで入れることができるようになっている。

使い方

使い方は超簡単。

以下のコマンドを実行すれば起動する。

npx friend-in-md

powershellでもwslでもどっちでも起動する。

起動はブラウザで起動して以下のような画面になっている。

この画面から「Open folder」を押す。

すると、フォルダ選択画面にが開くのでフォルダを選択する。

markdownファイルを開くと以下のようになっている。

赤の丸のところ、Unlockを押すと、ファイルを編集することができるようになる。

学んだこと

英語でツールを実装、githubのREADMEも英語で記載した。

ChatGPTも活用しながらだけれど、英語で説明することでアウトプットは少しできたと思う。

海外の人にも是非使ってもらいたい。

でも、googleで調べたら出てこない。本当に公開されたのか不安になるけど、ちゃんと公開されているはず。

その他

「You’ve got a friend in md」というのは映画「トイ・ストーリー」のエンディング曲「You’ve got a friend in me」からとった。

githubにもこの記事のアイキャッチ画像にもなっている以下の画像は「トイ・ストーリー」をイメージしながらgeminiで生成したものだ。

ちなみに、左のオレンジの奴の名前が「Spicy Lemon」で、右の犬が「Reston」という。

オリジナル画像は、以下になる。

Spicy Lemon
Reston

最後に

もっと使いやすくなるように、どんどんアップデートしていきたい。

タイトルとURLをコピーしました