本文へ移動

Suido水道

管を回してポンプと排水口をつなぎます。収録された問題やシード付きの問題で遊べます。

「水道」は、水を届ける設備を表す言葉です。 名前について(英語)

目次

やり方

通常の HTML と CDN

jsDelivr や unpkg の script タグ1つで、通常のページに盤を載せます。

ビルドは要りません。element/define を読み込むと <suido-board> のタグが登録されます。CDN の script タグで読み込めば、タグがページの中で自分で盤を描きます。盤に必要なものはパッケージに入っているので、ほかに読み込むものはありません。

jsDelivr

jsDelivr は、パッケージのファイルをそのまま配ります。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Suido from jsDelivr</title>
    <script type="module" src="https://cdn.jsdelivr.net/npm/@johnmorrisdotca/suido@1/dist/element-define.js"></script>
  </head>
  <body>
    <suido-board grid="7x7" level="12" hints></suido-board>
  </body>
</html>

unpkg

unpkg も同じです。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Suido from unpkg</title>
    <script type="module" src="https://unpkg.com/@johnmorrisdotca/suido@1/dist/element-define.js"></script>
  </head>
  <body>
    <suido-board grid="7x7" level="12" hints></suido-board>
  </body>
</html>

注意

  • <script type="module"> を使います。通常の script では import できません。
  • アドレスにはメジャーバージョン(@1)を入れます。使い方が変わるリリースは、自分で選んだときだけ入ります。
  • ページは属性とイベントで盤を操作します。属性の名前は iframe で埋め込む に、表示されないときは トラブルシューティング があります。

ソースを見るGitHub で編集@johnmorrisdotca/suido 1.7.0 のソースから作成しました。

この日本語は、まだ日本語を母語とする方の確認を受けていません。訂正を歓迎します。