Gist HTML Preview で Gist に投稿した HTML+CSS+JavaScript のコードをプレビューする

はじめに

Gist HTML Preview というサービスを使って、localhost を参照せず、Gist にアップロードした HTML+CSS+JavaScript のコードをブラウザでプレビューしました。

サービス：

gistpreview.github.io

GitHub： github.com

選定の経緯

たまにコードのサンプルはあるものの、デモを見つけられないコードがあります。今回は上記のようなコードの動作確認のため、以下の観点でサービス・手法を選定しました。

JavaScript の挙動をさまざまな端末で手軽に検証できるようにしたい
手軽に確認したいため、デプロイ作業は不要な方法が良い
現状登録していないサービスへの登録は避けたい
- JSFiddle、CodePen などのプレイグラウンドサービスは未登録のため、今回は使いたくない
あくまで言語的な仕様確認を目的としたサンプルコードの確認のため、ソースコードを完全に秘匿しなくてよい

以上の観点を踏まえて、今回は Gist HTML Preview を採用しました。

URL を共有すれば検証可能
Gist のコードを変更するだけで、プレビューにも変更を反映できる
GitHub アカウント下でソースコードを管理可能

gistpreview.github.io

やってみた結果

以下のように、作成したコードの動作確認をできました。

やったこと

1. コードを作成する

今回は以下のようなコードを作成しました。

<html lang="ja">
  <head>
    <title>getBattery demo</title>
  </head>
  <body>
    <p>充電：</p>
    <p id="batteryStatus" />
  </body>

  <script>
    const batteryStatusDom = document.getElementById("batteryStatus")

    navigator.getBattery().then((battery) => {
      batteryStatusDom.textContent = `${battery.level * 100}%`

      battery.addEventListener("levelchange", () => {
        batteryStatusDom.textContent = `${battery.level * 100}%`
      })
    })
  </script>
</html>

参考： developer.mozilla.org