Merge pull request #8 from haruyan-hopemucci/docs/check-mac-environment

動作検証結果をドキュメントとページの注意事項に反映する
haruyan-hopemucci · Nov 19, 2023 · 9e42155 · 9e42155
2 parents b2e2578 + c85653f
commit 9e42155
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 28 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,22 @@
 # LGTN
 Looks Good To Neo Image Generator via clipboard
 
-現在開発中
+## summary
+
+クリップボードから画像データを貼り付けして、LGTNテキストを合成した画像をクリップボードに書き込むツールです。
+
+[現在公開しているGithub Pagesへのリンク](https://haruyan-hopemucci.github.io/lgtn/)
+
+## features
+
+- クリップボードの画像からLGTNテキストを合成した画像をクリップボードに書き込む
+- 書き込んだクリップボードの画像はそのままGithubのIssueやPullRequestのテキストボックスにペーストすることができる
+- フロントエンド(javascript)だけで実装されているのでサーバーレス運用が可能。
+
+## Supported Environments
+
+- Windows10
+  - Google Chrome 119以降
+  - Microsoft Edge 119以降
+- MacOS Venture
+  - Google Chrome 119以降
diff --git a/docs/index.html b/docs/index.html
@@ -1,30 +1,59 @@
 <!DOCTYPE html>
 <html lang="ja-jp">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>LGTN Generator</title>
-  <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
-  <script src="./js/app.js"></script>
-  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
-  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
-  <link rel="stylesheet" href="./css/style.css">
-</head>
-<body>
-  <main class="container">
-    <h1>LGTN Generator <small>v0.1.0</small></h1>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>LGTN Generator</title>
+    <script
+      src="https://code.jquery.com/jquery-3.7.1.min.js"
+      integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
+      crossorigin="anonymous"
+    ></script>
+    <script src="./js/app.js"></script>
+    <link
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
+      crossorigin="anonymous"
+    />
+    <script
+      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
+      crossorigin="anonymous"
+    ></script>
+    <link rel="stylesheet" href="./css/style.css" />
+  </head>
+  <body>
+    <main class="container">
+      <h1>LGTN Generator <small>v0.1.0</small></h1>
 
-    <div id="paste-area" contenteditable="true">ここをクリックした後画像をペーストしてください。</div>
-    <img id="pasted-image" hidden>
-    <img id="img__lgtn" src="./img/lgtn.png" hidden>
-    <canvas id="output-image" width="400" height="400"></canvas>
-    <div class="alert alert-warning" role="alert">
-      <h2>制限事項</h2>
-      <ul>
-        <li>現状のバージョンでは貼り付けした画像が400pxの正方形にストレッチされます。なるべく正方形に近い画像を貼り付けしてください。</li>
-        <li>OS:Windows10、ブラウザはGoogle Chrome または Microsoft Edge のみ動作確認しています。Firefox, Safari、スマホでの動作は未確認です。</li>
-      </ul>
-    </div>
-  </main>
-</body>
-</html>
+      <div id="paste-area" contenteditable="true">
+        ここをクリックした後画像をペーストしてください。
+      </div>
+      <img id="pasted-image" hidden />
+      <img id="img__lgtn" src="./img/lgtn.png" hidden />
+      <canvas id="output-image" width="400" height="400"></canvas>
+      <div class="alert alert-warning" role="alert">
+        <h2>制限事項</h2>
+        <ul>
+          <li>
+            現状のバージョンでは貼り付けした画像が400pxの正方形にストレッチされます。なるべく正方形に近い画像を貼り付けしてください。
+          </li>
+          <li>
+            Firefox, safariでは動作しません。 各種スマホは動作未確認です。
+          </li>
+        </ul>
+        <h2>動作確認環境</h2>
+        <h3>Windows10</h3>
+        <ul>
+          <li>Google Chrome</li>
+          <li>Microsoft Edge</li>
+        </ul>
+        <h3>MacOS Venture</h3>
+        <ul>
+          <li>Google Chrome</li>
+        </ul>
+      </div>
+    </main>
+  </body>
+</html>