markdown AIでオモコロっぽい読書感想文を書く。

この記事はQiita Engineer Festa 2024のスポンサー企業テーマである、「markdown AIを使った記事を投稿しよう！」の記事です。

そもそもmarkdown AIってなんだろう…？

キャンペーン概要を読むと以下の記載がありました。

markdown AIとはQiitaでも採用されているMarkdownの記述をするだけで簡単にWebサイトを作成することができるwebアプリケーションです。

面白そうですね。

「子供が真似をしたくなるような内容」がキャンペーンの選出基準になるとのことだったので、以下の流れでオモコロっぽい読書感想文をテーマにしました。

1. 今の時期の小学生は読書感想文を書くはず
2. 読書感想文は書いていて楽しくない
3. 小学生はオモコロが好き¹なので、簡単にオモコロっぽいフォーマットで読書感想文が書けるとモチベーションが上がるかもしれない

オモコロは「ゆるく笑えるコンテンツ」に特化したWebメディアで、小学館のコロコロコミックとの掲載契約を結んでいることもあり、小学生も楽しめる記事を多数掲載しています。
読書感想文や作文はまずどんな形でもいいから書き始めるのが大切なので、 最初の取っ掛かりを楽しんでもらう作戦 です。果たしてオモコロっぽくなるのでしょうか。

使い方

いろいろな方が丁寧に書いているので今更書くことはもうないです。Googleアカウントがあれば書き始められます。
初回起動時のみMarkdown記法のサンプルがエディタに生成されます。Markdownはサービスごとに方言がありますが、どの記法が使えるか検証してくださっている方がおり大変ありがたかったです。

今回のレギュレーションで使用する機能

markdownAIタグのついた他の方の記事を読むと、JavaScriptやCSSが無限に登場していて自由度は相当に高そうです。ただ、あまり複雑なことをすると小学生が書く読書感想文という前提条件から逸脱してしまいそうなので、ルールを設けることにしました。

1. 初回起動時に生成されるMarkdownのサンプル内で使用されている記法はすべて使う
2. <br>と<span>以外のHTMLタグは使用禁止
3. JavaScriptは使用禁止
4. CSSは使用禁止

「Markdown初見の小学生であれば、まずはサンプルを改造して読書感想文を書き始めるだろう」、「サンプルの機能は全部試してみたいだろう」という想定で、サンプル上のすべての記法を使用する縛りにしました。

オモコロの記事のフォーマットはライターによってかなりバラバラですが、共通している箇所として、強調したいところは赤いデカ文字で書かれています。CSSは使用禁止にしましたが、このフォーマットだけはどうしても守りたいので、強調したいところは<span style="color:red; font-size:300%">タグとMarkdownの**em記法**を組み合わせて使うことにしました。HTMLタグは、この<span>と、テーブル内で改行するための<br>だけ使用可能とします。

小学校低学年でも無理なく文章を書き始められそうな縛りになりました。（多分）

作成したオモコロっぽい読書感想文

架空のライター優勝（すぐれまさる）さんが書いたという設定です。レギュレーションを守るために相当無茶をしていますね。

内容はゴミカスでも雰囲気的にはそれっぽい記事になりました。技術的に小学校低学年でも無理なく書ける、かつ、Markdownのおかげで表現の幅がかなり広い読書感想文に仕上がっています。センスのある小学生なら余裕でオモコロクオリティの記事が作れそう。

作ってすぐにインターネットに公開されて色々な人から見てもらえるのも嬉しい点ですね…！自分が小学生の時は、同じことをするのに無料レンタルサーバー探しから始めなくてはならなかったので、当時このサービスがあったらむちゃくちゃ喜んだと思います。

markdown AIを使ってみた所感

使ってみた所感です。「子供が真似をしたくなるような内容」というお題なので、

• 小学生が使えそうか
• 保護者・教育者といった大人が安心して子どもにサービスの使用を許可できるか

という判断基準で感想を書いています。

良かったところ

サーバー関連の知識無しでWebサイトが公開できる

上述しましたが、作ってすぐにインターネットに公開されて色々な人から見てもらえるのが何より嬉しいと思いました。もし仮に一からWebサイトを公開しようとすると、Webサーバーの選定や契約から始めることになり、小学生や非エンジニアにはいきなりハードルが高いですが、そこで悩まなくていいのは大きなメリットです。

Googleアカウント1つで始められる

Classroomと相性が良さそうです。サービスごとにいくつもアカウントをつくるのは管理がしんどいので、この点は嬉しいです。ただ、13歳未満は個人でGoogleアカウントを作れないので、Classroomへ参加するか、もしくは、保護者からのアカウント発行が必須に見えるのは少し気になりました。

UIがシンプル

潔すぎる。

学校で配布されたスペックが低いデバイスでも問題なく使用できそうです。

画像が簡単にアップロードできる

特に悩まずに画像がアップロードできて記事に挿入できたのは良かったです。

良くないと感じたところ

正直に言うとこれは本当にたくさんあって書ききれないので、「ベータ版だとしてもどうにかしたほうがいい」と思った箇所のみ列挙します。それでも多いです。

小学生目線

サービストップページとUIが全部英語

このUIはいきなり小学校低学年に使ってもらうのは厳しいと思いました。英語の授業と割り切ればギリギリ使えるかもしれませんが、書くことに集中させてあげたいです。

Markdownを書くためのチュートリアルがない

なにかしらのWikiを編集しまくっているリテラシーの高い小学生であれば問題なさそうですが、そうでない子が初見で一からMarkdownを書くのはハードルが高すぎると感じました。

ベータ版ということを考慮しても、実装が大雑把すぎる

ベータ版とはいえ、できることの少なさに対してバグが多すぎる印象で、この点は本当に残念だと感じています。「共有用のURLをコピーしたら、表示されているURLとクリップボードに表示される内容が異なっている」とか、

「Saveボタンを押下してもレスポンスがなく、ボタンはグレーアウトしたのにSaveされていないことがある」など、

基本的な機能が正しく動作していないのは見直してほしいです。

保護者目線

利用規約がない

個人が趣味で運用しているサービスではない以上、最低限以下は必要に見えます。

• Googleアカウント、及びアカウントから得られる情報をどのように扱うか
• 投稿された文章がどう利用されるのか、著作権の帰属先はどこにあるのか

JavaScriptが使い放題なのは強気すぎる

XSSだと思っています（直球）。

自由度が高く、いろいろなアプリケーションが作れる反面、もし授業等でWebサイトを作ることになった時、悪質なブラクラを作って他人に踏ませるクソガキお子さんや、脆弱性を見つけて遊ぶクソガキお子さんがいそうです。<script>タグの使用可否を大人が決められるモードは検討して欲しいです。

別のサーバにあるスクリプトもロードできてしまうし（検証済み）、CORSでOriginを許可したAPIを適当に作って外部サーバにPOSTもできてしまうので（検証済み）、「mdown.aiのコンテンツだからアクセスしても大丈夫」という確証が得られません。これは保護者目線だとかなり厳しいです。

悪意のある投稿を防止・通報できる機能がない

上述のJavaScriptの話に通じますが、自由度が高すぎる反面何でも書けてしまうので、裏サイトやSNS以上に治安が悪くなる可能性をどうしても否定できません。「子供が真似をしたくなるような内容」でサービスを利用してもらうのであれば、子供の邪悪さも考慮させてほしいです。

改善されたらうれしいところ

致命的な部分ではないけれど、正式版には追加されていると嬉しいと感じた箇所も列挙しておきます。

記事にタイトルを設定したい

記事にタイトルがつけられないので、ぱっと見てどれがどの記事なのかわかりにくいのと、生成されたHTMLに<title>がないので、ブラウザ上で見てもタブの内容がわからず使いにくいです。他の方は<title>タグを自分で書いて設定していましたが、UIから設定できれば嬉しいです。

URLをSNS等に即共有する手段が欲しい

大人ですらURLという概念を知らない人がいるご時世なので、今の仕様だとせっかく作っても見てもらう手段がなさそうです。QRコードの生成機能と、URLをSNSに共有するボタンが欲しいです。

URL発行までの動線がわかりにくい

一度Viewを押下しないとURLが発行できないのはわかりにくいと感じました。私は他の方の書いた記事を読みながら使ったのでなんとかなりましたが、初見で解決できたかは怪しいです。

リアルタイムプレビューがほしい

今のままだとメモ帳でMarkdownを書いているのと何ら変わらないので、ぜひ追加して欲しいです。

Gitではない共同編集機能がほしい

将来的にGitでの共同編集機能を提供するとのことですが、学校のグループ学習で成果物を公開する時はリアルタイムで共有しながら共同編集できてほしいです。グループ学習じゃなくても、ゲームの攻略サイトとかを友達と一緒にリアルタイムで編集できたら楽しいと思います…！

最後に

色々書きましたが、「Markdownの記述をするだけで簡単にWebサイトを作成することができる」というコンセプトは自分が小学生なら絶対に刺さったので、本当に応援しています。AI機能含めて正式版のリリースを楽しみにしています。

そして、サービス名がMarkdownAIだったりmarkdown AIだったりむちゃくちゃ表記ゆれしているので、正式版までにどちらに統一されるのか気になっています。

どうでもいい余談

今回のオモコロフォーマット読書感想文は、あくまで読書感想文を楽しんでもらうための取っ掛かりとして想定していたのですが、読書感想文全国コンクール公式サイトを見ると、自分の考えが書けているならそのまま成果物として提出しても良さそうな気がしました。

読書感想文は、何のために書くの？

書くことによって考えを深められるからです。読書感想文を書くことを通して思考の世界へ導かれ、著者が言いたかったことに思いをめぐらせたり、わからなかったことを解決したりできるのです

1. 知り合いのお子さんはオモコロが好き（n=2） ↩