Go to Qiita Advent Calendar 2024 Top
LoginSignup
12
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

markdown AIを使った記事を投稿しよう！
Qiita Engineer Festa20242024年7月17日まで開催中！
@qwegat

markdown AIで小説を連載する

Last updated at Posted at 2024-06-15

前置き

もう本当、ビビりましたよ。

上のキャンペーンのタイトルを最初に見たとき、筆者は素直に「ええやん」と思いました。なぜなら、タイトルに

  • markdown
  • AI

という2つの言葉が含まれるからです。
筆者はいうなればパブロフの犬のようなもので、これらの要素を含む存在に無条件で靡いてしまう。markdownという言葉が目に入るととりあえず安心感を覚えますし、AIについては……場合によりますが。markdownの隣にいる場合は、コイツに任せてもいいかな、という気になれるのです。
そういうわけで……markdown AIというプロダクト名は大変気に入りました。何せ安心感というか、喉越しのさわやかさがあります。炭酸水というよりはいろはすに近い、そんな感じ。エコロジーに配慮したラベルを剥がしてリサイクルしつつ、プロダクトの詳細を見ていきましょう。

概要

弊社開発のmarkdown AIを使用した感想や、独自の使い方についての説明を投稿してください。
markdown AIとはQiitaでも採用されているMarkdownの記述をするだけで簡単にWebサイトを作成することができるwebアプリケーションです。
今後AIを用いてMarkdown方式での出力ができるようになるので、さまざまな表現が可能です。

AI機能は未実装らしいです。
そんなの……ただのMarkdownじゃねえかよッ

image.png
2024年06月14日撮影

ホラ！みんなただのMarkdownであることに気づいて 「使ってみる」記事しか書いてねえ　そりゃそうでしょ！そもそもQiita自体がMarkdown投稿サイトなんだから　Markdown投稿サイトでMarkdown投稿サイトのレビューする構造になっちゃってる　使ってみる以外できないっすよそんなん
いやでも……ちょっと待ってください？

<textarea style="width: 100%; background-color:#cceeee; color:#ff8833;font-size:50px;font-weight:bold;height:50vh;overflow-y:scroll;resize:none;">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</textarea>

こう打ち込んだら……。

image.png

……あ、HTMLタグは使えるんですね。
え、それじゃあ……。

<textarea style="width: 100%; background-color:#cceeee; color:#ff8833;font-size:50px;font-weight:bold;height:50vh;overflow-y:scroll;resize:none;">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</textarea>

<button onClick="addCount()">+</button>

<script>
let count = 0
function addCount(){
  count += 1
  const target = document.querySelector("textarea")
  let output = String(count)
  if (count%15 == 0) {
    output = "FizzBuzz"
  } else if (count%5 == 0) {
    output = "Buzz"
  } else if (count%3 == 0) {
    output = "Fizz"
  }
  target.value += " " + output
}
</script>

Popopon.gif

あ、scriptタグも使える1。なるほど
じゃあ……何でもできるか！
というわけで、何かすることにしました。

検討

先ほども述べた通り、筆者はQiitaというMarkdown共有サービスでmarkdown AIというMarkdown共有サービスについて書くという行為そのものに疑問を抱いています。
もちろんHTMLタグを使えるという点での優位性はありますが、だからといって全部HTMLだとこう……もう自分でサイト作れよみたいになるところがありませんか？

  1. あくまでmarkdownという大枠から逸脱しすぎない範囲で、
  2. 補助としてHTMLを使いつつ、
  3. Qiitaだとできないことをする

必要があります。
1や2はともかく、問題は3です。markdown AIのQiitaに対するアドバンテージであるHTMLタグの存在をベースに3を解決しようとすると、今度は1や2に抵触し始める……。今回筆者は技術的な側面ではなく、Qiitaの目的に目をつけました。
このサイトのコミュニティガイドラインにはこんな記述があります。

Qiitaはエンジニアにとって再利用性・汎用性の高い他のユーザーにとっても役にたつ、学びのある情報が多く集まっている場であり続けたいと考えています。 Qiitaは記事を読むこと、記事を書くことを通して、読む側・書く側それぞれがお互いに関わり合いを持ち、情報をみんなで育てていくことで、今後同じようなことを学んだり、悩んだりするエンジニアが使う時間を減らし、エンジニアの成長や生産性をスピードアップさせることを目指します。

つまり……エンジニアにとって再利用性・汎用性の低い、他のユーザーにとっても役にたたない、学びのない情報については、markdown AIで表現できて、Qiitaで表現できないコンテンツの一つといえます。これは明確なアドバンテージといえるのではないでしょうか。
具体的には……。
小説、なんてどうでしょうか？

実装

ひな形

とりあえずChatGPTに「適当な小説投稿サイト」のコードを書かせました。

折りたたみ。出力された内容をそのまま掲載 
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小説閲覧サイト</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&family=Roboto:wght@400;700&display=swap">
    <style>
        body {
            font-family: 'Noto Serif JP', serif;
            margin: 0;
            padding: 0;
            background: #f7f7f7;
            color: #333;
        }
        header {
            background: #333;
            color: #fff;
            padding: 10px 20px;
            text-align: center;
            font-family: 'Roboto', sans-serif;
        }
        nav {
            display: flex;
            justify-content: center;
            background: #444;
        }
        nav a {
            color: #fff;
            text-decoration: none;
            padding: 10px 20px;
            display: block;
        }
        nav a:hover {
            background: #555;
        }
        .container {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .title {
            font-size: 2em;
            margin-bottom: 10px;
            font-weight: 700;
        }
        .author {
            font-size: 1.2em;
            color: #666;
            margin-bottom: 20px;
        }
        .content {
            line-height: 1.6;
            font-size: 1.1em;
        }
        .footer {
            text-align: center;
            padding: 10px 0;
            background: #333;
            color: #fff;
            position: fixed;
            width: 100%;
            bottom: 0;
        }
    </style>
</head>
<body>
    <header>
        <h1>小説閲覧サイト</h1>
    </header>
    <nav>
        <a href="#">ホーム</a>
        <a href="#">小説一覧</a>
        <a href="#">著者一覧</a>
        <a href="#">お問い合わせ</a>
    </nav>
    <div class="container">
        <div class="title">小説のタイトル</div>
        <div class="author">著者名</div>
        <div class="content">
            <p>ここに小説の内容が表示されます。ここに小説の内容が表示されます。ここに小説の内容が表示されます。ここに小説の内容が表示されます。ここに小説の内容が表示されます。ここに小説の内容が表示されます。ここに小説の内容が表示されます。</p>
            <p>ここに小説の内容が表示されます。ここに小説の内容が表示されます。ここに小説の内容が表示されます。ここに小説の内容が表示されます。ここに小説の内容が表示されます。ここに小説の内容が表示されます。ここに小説の内容が表示されます。</p>
            <p>ここに小説の内容が表示されます。ここに小説の内容が表示されます。ここに小説の内容が表示されます。ここに小説の内容が表示されます。ここに小説の内容が表示されます。ここに小説の内容が表示されます。ここに小説の内容が表示されます。</p>
        </div>
    </div>
    <div class="footer">
        &copy; 2024 小説閲覧サイト
    </div>
    <script>
        // JavaScriptコードをここに記述します
    </script>
</body>
</html>

「単一のhtmlファイルを出力しろ」という指示だったので<!DOCTYPE html>などの記述がそのまま入っており、直接markdown AIにコピペするといろいろ良くないです。とりあえずみたいな感じで成形したものがこちらです

折りたたみ 
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&family=Roboto:wght@400;700&display=swap">
<style>
    body {
        font-family: 'Noto Serif JP', serif;
        margin: 0;
        padding: 0;
        background: #f7f7f7;
        color: #333;
    }
    header {
        background: #333;
        color: #fff;
        padding: 10px 20px;
        text-align: center;
        font-family: 'Roboto', sans-serif;
    }
    nav {
        display: flex;
        justify-content: center;
        background: #444;
    }
    nav a {
        color: #fff;
        text-decoration: none;
        padding: 10px 20px;
        display: block;
    }
    nav a:hover {
        background: #555;
    }
    .container {
        max-width: 800px;
        margin: 20px auto;
        padding: 20px;
        background: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    .title {
        font-size: 2em;
        margin-bottom: 10px;
        font-weight: 700;
    }
    .author {
        font-size: 1.2em;
        color: #666;
        margin-bottom: 20px;
    }
    .content {
        line-height: 1.6;
        font-size: 1.1em;
    }
    .footer {
        text-align: center;
        padding: 10px 0;
        background: #333;
        color: #fff;
        position: fixed;
        width: 100%;
        bottom: 0;
    }
</style>
<header>
    <h1>小説閲覧サイト</h1>
</header>
<nav>
    <a href="#">ホーム</a>
    <a href="#">小説一覧</a>
    <a href="#">著者一覧</a>
    <a href="#">お問い合わせ</a>
</nav>
<div class="container">
    <div class="title">小説のタイトル</div>
    <div class="author">著者名</div>
    <div class="content">
        <p>ここに小説の内容が表示されます。ここに小説の内容が表示されます。ここに小説の内容が表示されます。ここに小説の内容が表示されます。ここに小説の内容が表示されます。ここに小説の内容が表示されます。ここに小説の内容が表示されます。</p>
        <p>ここに小説の内容が表示されます。ここに小説の内容が表示されます。ここに小説の内容が表示されます。ここに小説の内容が表示されます。ここに小説の内容が表示されます。ここに小説の内容が表示されます。ここに小説の内容が表示されます。</p>
        <p>ここに小説の内容が表示されます。ここに小説の内容が表示されます。ここに小説の内容が表示されます。ここに小説の内容が表示されます。ここに小説の内容が表示されます。ここに小説の内容が表示されます。ここに小説の内容が表示されます。</p>
    </div>
</div>
<div class="footer">
    &copy; 2024 小説閲覧サイト
</div>

これをコピペしてプレビューを押すと……

image.png

こうなります。なかなかいいんじゃないでしょうか。

閑話休題：styleタグについて

ちなみに先ほどのコードをコピペしたところ、筆者の環境ではmarkdown AIのエディタのレイアウトが変わりました。
image.png
👆これが
image.png
👆こうなった
恐らく書き換えたstyleタグの内容が（非表示にされているがDOM内にはある）プレビュー用要素の内部で実体化した結果、ページ全体のスタイルルールまでもが書き変わってしまった結果なのでしょう。
この仕様を悪用すると、例えば

<style>
textarea {
  color: red !important;
}
</style>

と書き込むだけでこうなります。
image.png
自分に書き込まれているテキストによって外観を左右されるテキストエディタというのはなんだか円城塔あたりのSF小説に出てきそうな感じがして、正直かなりエキサイティングです。
普通に直した方がいいと思いました

続き

とりあえず小説投稿サイトっぽい見た目ができましたが、このままだとMarkdown感がありません。
例えば現状、小説のタイトルはtitleというクラスを指定されたdivタグによって表示されています。しかしMarkdownを使っていることを考えると、本来ここは# タイトルと書いてh1タグで表示するのがあるべき姿ではないでしょうか？
また、**強調**あたりの記法についても小説の執筆に使えると嬉しいでしょう。
markdown AIにおけるプレビューはtext-previewクラスをつけられたdivタグの内部にDOMとして展開されます。また例えば# headingと書けば<h1>heading</h1>を吐きますし、**bold**なら<strong>bold<strong>が出ます。けっこう素直な実装をしているようですね。
これを踏まえ、styleタグにこんな表記を追加します。

.text-preview h1 { /*.titleを置換*/
        font-size: 2em;
        margin-bottom: 10px;
        font-weight: 700;
}
.text-preview h2 { /*.authorを置換*/
        font-size: 1.2em;
        color: #666;
        margin-bottom: 20px;
}
.text-preview strong {
        font-weight:normal;
        text-emphasis: filled sesame;
}

あと今気づいたんですが、どうやらmarkdown AIにおけるMarkdown記法はそれより前にhtmlタグが使用されていない場合しか解釈されないようです。なのでナビゲーションバーとヘッダーは泣く泣く消去し、styleタグとlinkタグは末尾に移動させました。
この状態で例えば、

# 小説のタイトル
## 著者名
「こんにちは」
　**彼女**は言った。

と先頭に入力した場合、こうなります。
image.png
ひとまずいい感じではないでしょうか。**強調**記法については傍点に割り振ることで、小説ナイズされてます感を出しています。
とりあえずガワはできたので、あとは小説を書き込むだけです。

小説

偶然にも筆者の趣味が小説を書くことだったので、以前書いたものを適当に流し込んでみました。こうなります。
image.png
すげえ、ちゃんと読める……。
普通にHTMLタグが描画されているだけのはずなのですが、なんだか、謎の感動があります。
……この感動はもう、完全に Qiitaでは出せないものですよ。逆に、出したらヤバい。何ならこの完成したサイトへのリンクをQiitaに貼ることすらはばかられますもん。そのラインにある。
ありがとう……。
markdown AIよ。

まとめ

  • markdown AIの素朴かつ少し危うい立ち姿は言い換えれば可能性に満ち溢れた児童を目にしているかのようで、そのポテンシャルはとても高いと言える
  • なので、早くAI機能を実装してほしい

  1. ちなみにscriptタグの中身はコード保存後のプレビュー画面では走らなかったのですが、Publishしたうえで発行されたURLに飛んだら実行されました。罠 ↩

12
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
12
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?