手順書の手順書をmarkdown AIで書いてみる

# markdownAI β

よさげなキャンペーンがあったので、markdownAI（β）を使用して手順書の書き方を解説する記事を書いてみました（投稿自体はQiitaである）。

https://qiita.com/NUNOGAWA/items/0c20ffd52327289d8a66

以下、MarkdownAIの使用感についての記述です。

# markdownAI

https://mdown.ai/


markdownAIとは、「マークダウン記法を使って簡単にWebサイトを作ろう！」というコンセプトのプラットフォームです。

「必要なのはGoogleアカウントだけ」という触れ込みで、「へー面白そうじゃん」と思ってサインアップすると**マジでエディタだけが出てきます。**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439672/f0dc6473-7cae-e436-8874-700105e4d409.png)

うっそだろ、Qiitaのキャンペーン張ってるのに、そんな！　そんなシンプルなことってあるかよ！？

個人的には、椅子と机しかない空間のようで落ち着きます。
入ってすぐエディタなのも好印象です。

**書くんだ。とにかく書け。ビュー数やフィードなど気にするな。己に向き合え。**

（これからAI機能や、いろいろな機能が追加されていくことでしょう……。）

## markdownAIとは

左上のロゴからホームに飛ぶと、MarkdownAIの説明を読むことができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439672/3a3a055f-9dfa-bb3d-e667-ace42e3b693c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439672/9a92ee35-5243-cefe-9d09-34132ca5eb33.png)


>Create a website easily using Mark Down!
You can complete everything from creation to publication on one screen, and you can easily display a preview before publishing.
The concept is not only for engineers to easily exchange information, but also for children to easily create websites and interact with people around the world.

**意訳：Markdownを使って簡単にウェブサイトを作成しよう！
すべての作成から公開までを一画面で完結でき、公開前に簡単にプレビューを表示することができます。
このコンセプトは、エンジニアだけでなく、子どもたちも簡単にウェブサイトを作成し、世界中の人々と交流できるようにすることを目的としています。**

## 補足：マークダウンとは？

マークダウン言語というのは、MarkdownAIの専売特許ではありません。
ジョン・グルーバー氏が生み出した軽量マークアップ言語です。
プレーンテキスト形式で簡単に書くことができます。テキストでありながらも、そのままプレビューしたり、そのあとHTMLなどに変換したりします。

https://www.markdownguide.org/

このQiitaの記事も、マークダウンで書かれています。
**こいつがエンジニアのメモには最適です。**

たとえば見出しなんかつけようとすると、

```html
<h1>世界よ、これがマークダウンだ
```

みたいな記述になりますが、マークダウンだと

```markdown
# 世界よ、これがマークダウンだ
```

こんな感じ。`#`ひとつです。`##`で`h2`、`###`で`h3`といった感じで慣れるとメモ帳（純粋なテキスト）よりもかなり幅のある表現ができる割に、中身はテキストというよさげなことができます。

この記事の冒頭なんか、中身はこんな感じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439672/c55b300b-5ba4-d58a-c70e-c5709e6f953f.png)

で、こんな見た目になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439672/5fb61cd6-8e73-2da4-6676-ed6c5f5c0841.png)


画像を貼り付けることもできちゃったりするわけで、慣れてみると良いことづくめなので、私は私用のメモはObsidianやVisualStudioCodeのマークダウン形式でとっています。

Wordまでは要らないけどメモ帳よりも豪華なことがしたい。
マークダウンは、そんなときに最適です。

以下、プレーンテキストですが、こういう感じに出力してくれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439672/ca4b7a2e-127f-7e7a-33f6-6785e2b094a2.png)

気をきかせてWordで取説を作ったら、段落設定や行間設定がずれているという全然本題ではないところで足を取られてうわーっとなる人間にはありがたいことこの上ないです。中身がプレーンテキストで、記法を誤ってヘンになることはあれどもそれ以上にはずれようがない。

### で、そんなMarkdown記法を使用したmarkdownAI……。
markdownAIのコンセプトには、「子どもたちも簡単にウェブサイトを作成し、世界中の人々と交流できるようにすること」とありますね。
たしかに、マークダウンはHTMLよりはハードルが低く、余計なこともしづらいので、かなり見栄えが良くなります。

自分だけのホームページを作ろうと思ってマークダウンから入るのは趣味としては**渋い。渋いですが**、ファーストインプレッションとしてなんとなく真似してたらいつのまにかすいすいとマークダウンを覚えて「すみません、この手順書、よかったら.mdでいただけませんか？」というような小学生が誕生すると思うと面白くて仕方ないので応援したいです。

※実際に、すでにGitHubを乗りこなし、マークダウンを使いこなす小学生もいるとは思います。

**今どきのちびっこは全員AtCorderで色持ってて試験受かってて学内アプリで学祭をやってるんだ！**


### ログイン

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439672/11d27b5c-5197-534a-3a0e-a1b615ee93d7.png)


サインインを求められて、Googleでログインすると……。

ニックネームなどを決めたら、即、この画面です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439672/f0dc6473-7cae-e436-8874-700105e4d409.png)

### アカウント設定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439672/7a8c58e3-f660-1990-809a-dd07065fd099.png)

アカウント設定はこんな感じでNicknameのみ。潔いな。

個人的にはGoogleアカウント連携で一番気になるのが「どれくらい個人情報をもってくるのか？（勝手にアカウント名を公開されないか？）」だったりするのでニックネームでの運用は好印象です。
登録するときに求められて、勝手に入力されるというようなことはありませんでした。

（これからIDなど付与されていく気はしますが、必要最小限なのがとても好み）。

いや……インターネットに本名を公開してはいけないという古のインターネットが染みついてて……。

### サイト設定

サイト設定が、ある！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439672/58d8e69e-b7d1-bf8a-7331-18a3e3ff0966.png)

**markdownAI、本気で、「気軽に個人サイトを作ってもらいたい」なんだな……！？
主役を、「ユーザーの作ったホームページ」にしてくれるんだな！？**

markdownAIのコンセプトとして最も期待しているのがこの点です。

これは気軽なミニブログ的な使い方ができるようになるのだろうか？
気軽な投稿サイトではなく、気軽な個人サイトを作らせてくれるサービスになるのだろうか？

どういった層がメインで使うかにも左右されると思うので、これからどうなってくるのかチェックしてみたいと思います。

# 実際に書いてみる

まずチュートリアル用の説明テキストが入っていて、すぐ書き始められます。

エディタ上の表示はこんな感じで……。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439672/567dbf78-4c7f-1904-90a3-07044ea9f540.png)

Viewにするとこんな感じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439672/8b55355c-f82b-71c6-28a8-bda6ec51b286.png)

なかなかシンプルでしっかりした感じがして、だいぶ好ましいです。すごくまじめなことを書いている気分になるな……（まじめなことを書いているのではないだろうか？）

# これからのmarkdownAIに求めること

個人的にはもっとかっこよくて、わかりやすい名前が欲しい、これに尽きる。

まだAI機能はなく、さらに「マークダウン記法」というのはもともと存在する固有名詞です。

「？？？マークダウンの話をしている？マークダウンで記事を書く？マークダウンで記事を書こう？いつも書いていると思うけど……あ、**markdownAI**？サービス名ね！」という感じで混乱するので、せめて「markdown Hub AI」とか、あるいは造語とか、単語とかとって、Marko（マルコ）とか、なんかいい感じの、識別できるプロジェクト名をつけてあげてほしいです。

https://ja.wikipedia.org/wiki/%E3%83%9E%E3%83%AB%E3%82%B3

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439672/d9ce5162-31cd-38d9-f28f-59a57ee9afb3.png)

まあ私のセンスはともかくである……。


あと、小文字なのか（markdownAI?）大文字なのか（MarkdownAI？）統一してもらえたら……。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439672/0b27238d-032f-335e-f7b4-b8ef3b6e091a.png)

まず「書く」機能からはじまるところがものすごい好きで、なんにせよ、これからが楽しみなプロジェクトです。
（今の「好きなだけ書きな！」というつくりがとてもミニマムで好みなんですが、これはもう少し機能が足されていってどうなるかわかりません）。

まだソーシャル要素やAI要素がなく、かなりシンプルなので、今こそ小学生にぽいっと勧められるタイミングであるような気もします。ローカルで個人サイトを作って保存して眺めてニマニマしていたあの頃。リッチテキストエディタで文字を大きくするのが小説だと思っていたあの頃……。