McGwire Markdownを紹介します
この度、私がこれまでプライベートで開発し、使用してきたElectron製デスクトップアプリケーションのマークダウンエディタ、「McGwire Markdown」をOSSとして公開しました。
私はとある団体の内部SEとして活動しています。業務ツールの作成からインフラの保守、Webアプリケーションの開発、トラックの運転まで、幅広い仕事を一手に引き受けています。
私がよく使うスキルセットはPythonのFastAPIをバックエンドに、Vue3+TypeScriptをフロントエンドに使ったSPA開発です。この組み合わせを使って、社内Wikiの開発などを行ってきました。
私自身は、あまりアウトプットを積極的に行ってきたタイプではないのですが、新しいチャレンジの一環として、開発したマークダウンエディタ、「McGwire Markdown」を公開しました。
リポジトリはこちらです。
インストーラはこちらです。
McGwire Markdownとは
McGwire Markdown（マグワイヤ・マークダウン）はマークダウン初学者が記述方法を学びながら使用できることを目標に作成したエディターです。そのため、企業や学校などの様々な環境でも役立つツールとなり得ます。
もともとは、はるか昔、古の時代、個人的なWeb技術学習の一環として作成したもの発端でした。しかし、非技術系の職員「マークダウンなど知らぬ」という人にも使ってもらえるように機能拡張を繰り広げてきたきたものです。
マークダウンの記述ガイド
主要機能
- リアルタイムプレビュー機能
- PDFとHTML出力機能
- 印刷機能
- ヘルプ
- ガイド
- 日本語と英語対応
主要機能の技術選定
| 言語・機能・技術など | 使用ライブラリなど |
|---|---|
| 言語 | HTML、JavaScript、HTML |
| デスクトップアプリフレームワーク | Electron |
| エディタ部分 | Ace builds |
| マークダウンパーサー | Marked |
| ガイド | shepherd.js |
| PDF出力 | Chromiumの印刷API |
ダウンロードとインストール
git clone https://github.com/itsuki-maru/McGwire-Markdown.git
cd McGwire-Markdown
npm install
electron .
公開直前
今回、公開するにあたり「あ、アイコンないな」、、、ということに気付き、アプリケーションのアイコンはChatGPTに依頼して作成してもらいました。
結論
一からアイコンを作成した（もしくは誰かに作成依頼する）場合、アプリケーションの作成から公開までに相当時間を取られたでしょう。
プロンプト
私はSVG形式の画像を作成したいと考えています。あなたは優秀なWebデザイナー兼フロントエンドエンジニアという立場で、私の指示に従い作成をサポートしてください。
これからSVGを使って簡単なSVGアートを作成します。
1.ペンギンのイラストをデザインする
2.デザインしたイラストをブラウザ上に表示可能なSVGコードを生成するこれらをひとステップずつ実行してください。
ChatGPTによるSVG生成
Code InterpreterでPNG形式に変換
リサイズ
完成
ここまで読んでいただき、ありがとうございました。
皆さまのフィードバックやプルリクエストをお待ちしております。
リポジトリはこちらです。
インストーラはこちらです。