はてなブログ本文内でHTML/CSS/JSを使ってみる

先日、LangChainというLLM用ライブラリについての記事を読みました。

blog.pokutuna.com

記事の内容自体とは関係ないんですが、本文中で以下のような、テキストアニメーションを使用している部分があったのが気になりました。

こちらのブログははてなブログのようですが、本文内でHTMLやJSを書いてそうです。このブログもはてなブログなのできっと同じことができるはず。どんなことができるのか軽く試してみました。

コードを見てみる

前述のブログにて、アニメーションが行われている箇所のHTMLを開発者ツールで見てみると以下のような感じ。

<p class="streaming-text" data-text="例えばこういうような感じでテキストをユーザに表示するやつです。"></p>

<p>タグにstreaming-textというクラスを付与している。 streaming-textでコード内を検索してみると、<script>タグ内にstreaming-textクラスに対してアニメーションを適用するJavaScriptが書かれていました。

なるほど、本文内に任意のHTMLタグを埋め込んだり、<script>タグを使ってJavaScriptのコードを埋め込んだりできるのか。

色々試してみる

試しに記事の本文内で色々HTMLを書いてみます。いつもこのブログ執筆時はMarkdownで書いてますが、このMarkdownの中にHTMLを直接書きこんでみます。

まずはHTMLタグを書いてみる

<p>細字</p>
<p><strong>太字</strong></p>

↓描画結果

細字

太字

おお、HTMLとして解釈されている。

CSSを付けてみる

<p>細字</p>
<p class="bold">太字</p>

<style>
.bold {
  font-weight: bold;
}
</style>

↓描画結果

細字

太字

<style>タグも効いている。

JSも使ってみる

<p id="text" style="font-weight: bold;">太字</p>

<script>
  const textElement = document.getElementById('text');

  const toggleFontWeight = () => {
    const isBold = textElement.style.fontWeight === 'bold';
    textElement.style.fontWeight = isBold ? 'normal' : 'bold';
    textElement.textContent = isBold ? '細字' : '太字';
  }
  setInterval(toggleFontWeight, 1000);
</script>

↓描画結果

太字

JSも動いた。

JSライブラリをCDN経由で読み込んでみる

Featherというアイコンライブラリを読み込んでみる。

<i data-feather="share"></i>
<i data-feather="user" />
<i data-feather="github" />

<script src="https://unpkg.com/feather-icons"></script>
<script>
  feather.replace(); // featherを有効化
</script>

↓描画結果

入力フォームを置いてみる

<p>入力した値: <span id="output"></span></p>
<input type="text" id="input" />


<script>
  const input = document.getElementById('input');
  const output = document.getElementById('output');

  input.addEventListener('input', e => output.textContent = e.target.value);
</script>

↓描画結果

入力した値:

ボタンを置いたり、ダイアログを出したりしてみる

<button id="showButton">ダイアログを表示</button>

<div id="popup">
  <p>ボタンがクリックされました！</p>
  <button id="closeButton">閉じる</button>
</div>

<style>
  #popup {
    display: none;
    position: fixed;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    padding: 20px;
    background-color: #f0f0f0;
    text-align: center;
  }
</style>

<script>
  const popup = document.getElementById('popup');
  const showButton = document.getElementById('showButton');
  const closeButton = document.getElementById('closeButton');

  showButton.onclick = () => popup.style.display = 'block';
  closeButton.onclick = () => popup.style.display = 'none';
</script>

↓描画結果

おお、結構いろいろできる

いろいろ書けた

他にも色々できそうですが、一旦今回はここまで。 Markdownの機能以上の装飾をしたい場合は直接HTMLを書くことができることを知りました。

HTML/CSS/JSの挙動を記事内で紹介するような場合は、CodePen等のツールを使わずとも本文内で直接書いてしまうこともできそうです。（とはいえ、当然エディタ内でシンタックスハイライトや構文チェックは行われないので書きにくい）

ちなみに今回Markdownモードで試しましたが、はてなブログには他に「はてな記法モード」、「見たままモード」という編集方法があり、軽く試したところいずれのモードでも同じようなことができそうです。