initial commit

ics-creative · Oct 31, 2024 · 6f326da · 6f326da
commit 6f326da
Show file tree

Hide file tree

Showing 6 changed files with 239 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+/.idea
diff --git a/auto-phase-cdn.html b/auto-phase-cdn.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Title</title>
+
+    <style>
+      body {
+        font-family: sans-serif;
+      }
+
+      .wrapper {
+        /* ドラッグで横幅を変更できる */
+        resize: horizontal;
+        overflow: auto;
+        background: #e0e0e0;
+      }
+
+      #inline-block-version {
+        span {
+          display: inline-block;
+        }
+      }
+
+      #wbr-version {
+        word-break: keep-all;
+      }
+    </style>
+    <script type="importmap">
+      {
+        "imports": {
+          "budoux": "https://unpkg.com/budoux/module/index.js"
+        }
+      }
+    </script>
+    <script type="module">
+      import { loadDefaultJapaneseParser } from "budoux";
+
+      const SENTENCE =
+        "ジョバンニは、口笛を吹いているようなさびしい口付きで、檜のまっ黒にならんだ町の坂を下りて来たのでした。坂の下に大きな一つの街燈が、青白く立派に光って立っていました。ジョバンニが、どんどん電燈の方へ下りて行きますと、いままでばけもののように、長くぼんやり、うしろへ引いていたジョバンニの影ぼうしは、だんだん濃く黒くはっきりなって、足をあげたり手を振ったり、ジョバンニの横の方へまわって来るのでした。";
+
+      const parser = loadDefaultJapaneseParser();
+      const list = parser.parse(SENTENCE);
+      const htmlString = (document.querySelector(
+        "#inline-block-version"
+      ).innerHTML = list.map((word) => "<span>" + word + "</span>").join(""));
+      document.querySelector("#wbr-version").innerHTML = list
+        .map((word) => word + "<wbr />")
+        .join("");
+      console.log(); // ['今日は', '天気です。']
+    </script>
+  </head>
+
+  <body>
+    <h1>budoux の作例</h1>
+    <p>右下のつまみを動かしてリサイズできます。</p>
+
+    <h2>inline-block方式</h2>
+    <div class="wrapper" id="inline-block-version"></div>
+
+    <h2>wbr方式</h2>
+    <div class="wrapper" id="wbr-version"></div>
+  </body>
+</html>
diff --git a/auto-phase-webcomponent.html b/auto-phase-webcomponent.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Title</title>
+
+    <style>
+      body {
+        font-family: sans-serif;
+      }
+
+      .wrapper {
+        /* ドラッグで横幅を変更できる */
+        resize: horizontal;
+        overflow: auto;
+        background: #e0e0e0;
+      }
+    </style>
+    <!-- CDNからライブラリを導入 -->
+    <script src="https://unpkg.com/budoux/bundle/budoux-ja.min.js"></script>
+  </head>
+
+  <body>
+    <h1>budoux の作例</h1>
+    <p>右下のつまみを動かしてリサイズできます。</p>
+    <h2>Web Component方式</h2>
+    <div class="wrapper">
+      <budoux-ja
+        >ジョバンニは、口笛を吹いているようなさびしい口付きで、檜のまっ黒にならんだ町の坂を下りて来たのでした。坂の下に大きな一つの街燈が、青白く立派に光って立っていました。ジョバンニが、どんどん電燈の方へ下りて行きますと、いままでばけもののように、長くぼんやり、うしろへ引いていたジョバンニの影ぼうしは、だんだん濃く黒くはっきりなって、足をあげたり手を振ったり、ジョバンニの横の方へまわって来るのでした。</budoux-ja
+      >
+    </div>
+  </body>
+</html>
diff --git a/br.html b/br.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Title</title>
+
+    <style>
+      body {
+        font-family: sans-serif;
+      }
+
+      .container {
+        container-type: inline-size;
+
+        background: #e0e0e0;
+        resize: horizontal;
+        overflow: auto;
+      }
+
+      @container (568px < width) {
+        .mobile-only {
+          display: none;
+        }
+      }
+
+      @container (568px <=width < 960px) {
+        .tablet-only {
+          display: none;
+        }
+      }
+
+      @container (width <=960px) {
+        .desktop-only {
+          display: none;
+        }
+      }
+    </style>
+  </head>
+
+  <body>
+    <h1>br の作例</h1>
+    <p>右下のつまみを動かしてリサイズできます。</p>
+
+    <div class="container">
+      <div class="item">
+        JavaScriptで<br
+          class="mobile-only"
+        />クリエイティブコーディング<br />テキストを分解し<br
+          class="mobile-only"
+        />パーティクルにする演出
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/inline-block.html b/inline-block.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Title</title>
+
+    <style>
+      body {
+        font-family: sans-serif;
+      }
+
+      .wrapper {
+        /* ドラッグで横幅を変更できる */
+        resize: horizontal;
+        overflow: auto;
+        background: #e0e0e0;
+      }
+
+      #inline-block-version {
+        span {
+          display: inline-block;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <h1>inline-block 方式</h1>
+    <p>右下のつまみを動かしてリサイズできます。</p>
+
+    <div class="wrapper" id="inline-block-version">
+      <span>ジョバンニは、</span><span>口笛を</span><span>吹いているような</span
+      ><span>さびしい</span><span>口付きで、</span><span>檜の</span
+      ><span>まっ黒に</span><span>ならんだ町の</span><span>坂を</span
+      ><span>下りて</span><span>来たのでした。</span><span>坂の</span
+      ><span>下に</span><span>大きな</span><span>一つの</span
+      ><span>街燈が、</span><span>青白く</span><span>立派に</span
+      ><span>光って</span><span>立っていました。</span
+      ><span>ジョバンニが、</span><span>どんどん電燈の</span><span>方</span
+      ><span>へ</span><span>下りて</span><span>行きますと、</span
+      ><span>いままでばけもののように、</span><span>長く</span
+      ><span>ぼんやり、</span><span>うしろ</span><span>へ</span
+      ><span>引いていた</span><span>ジョバンニの</span><span>影ぼうしは、</span
+      ><span>だんだん</span><span>濃く</span><span>黒くはっきりなって、</span
+      ><span>足を</span><span>あげたり手を</span><span>振ったり、</span
+      ><span>ジョバンニの</span><span>横の</span><span>方</span><span>へ</span
+      ><span>まわって</span><span>来るのでした。</span>
+    </div>
+  </body>
+</html>
diff --git a/wbr.html b/wbr.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Title</title>
+
+    <style>
+      body {
+        font-family: sans-serif;
+      }
+
+      .wrapper {
+        /* ドラッグで横幅を変更できる */
+        resize: horizontal;
+        overflow: auto;
+        background: #e0e0e0;
+      }
+
+      #wbr-version {
+        word-break: keep-all;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>wbr の作例</h1>
+    <p>右下のつまみを動かしてリサイズできます。</p>
+
+    <h2>wbr方式</h2>
+    <div class="wrapper" id="wbr-version">
+      ジョバンニは、<wbr />口笛を<wbr />吹いているような<wbr />さびしい<wbr />口付きで、<wbr />檜の<wbr />まっ黒に<wbr />ならんだ町の<wbr />坂を<wbr />下りて<wbr />来たのでした。<wbr />坂の<wbr />下に<wbr />大きな<wbr />一つの<wbr />街燈が、<wbr />青白く<wbr />立派に<wbr />光って<wbr />立っていました。<wbr />ジョバンニが、<wbr />どんどん電燈の<wbr />方<wbr />へ<wbr />下りて<wbr />行きますと、<wbr />いままでばけもののように、<wbr />長く<wbr />ぼんやり、<wbr />うしろ<wbr />へ<wbr />引いていた<wbr />ジョバンニの<wbr />影ぼうしは、<wbr />だんだん<wbr />濃く<wbr />黒くはっきりなって、<wbr />足を<wbr />あげたり手を<wbr />振ったり、<wbr />ジョバンニの<wbr />横の<wbr />方<wbr />へ<wbr />まわって<wbr />来るのでした。
+    </div>
+  </body>
+</html>