McGwire Markdownを紹介します

この度、私がこれまでプライベートで開発し、使用してきたElectron製デスクトップアプリケーションのマークダウンエディタ、「McGwire Markdown」を公開しました。

よく使うスキルセットはRustのaxumをバックエンドに、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形式に変換

リサイズ

完成

ここまで読んでいただき、ありがとうございました。

皆さまのフィードバックやプルリクエストをお待ちしております。

リポジトリはこちらです。

インストーラはこちらです。