README.md

@@ -32,52 +32,60 @@ MastodonもMisskeyも `<host>/share?text=` のWeb Intent URLのパスが共通
 
 ## Usage
 
-1 index.htmlに記載している以下のコードを共有ボタンを設置したい場所にHTMLとして記述する (iframeで参照するのもあり)。WordPressだとWidgetの [Custom HTML] などで配置できる。
+1 index.htmlに記載している以下のコード (main要素内部) を共有ボタンを設置したい場所にHTMLとして記述する (iframeで参照するのもあり)。WordPressだとWidgetの [Custom HTML] などで配置できる。
 
 ```
 <fieldset>
   <style>
   /* @scope { */
-    fieldset input, fieldset button {
+    fieldset input, fieldset a {
       width: 100%;
       color: white;
       font-size: 2em;
+      text-align: center;
+    }
+    fieldset div {
+      display: flex;
     }
   /* } */
   </style>
-  <div style="display:flex; width:100%;">
-    <button style="background-color:#333"
+  <legend>Share</legend>
+  <div>
+    <a style="background-color:#333"
       onclick="navigator.clipboard.writeText(
-        document.title+' '+location.href);">Copy</button>
-    <button style="background-color:#2c6ebd"
-      onclick="location.href='https://b.hatena.ne.jp/entry/s/'
-        +location.host+'/'+location.pathname">Hatena</button>
-    <button style="background-color:#3b5998"
-      onclick="location.href='https://www.facebook.com/sharer/sharer.php?t='
+        document.title+' '+location.href);">Copy</a>
+    <a style="background-color:#2c6ebd"
+      href="https://b.hatena.ne.jp/entry/s/"
+      onmousedown="this.href='https://b.hatena.ne.jp/entry/s/'
+        +location.host+'/'+location.pathname">Hatena</a>
+    <a style="background-color:#3b5998"
+      href="https://www.facebook.com/sharer/sharer.php?t="
+      onmousedown="this.href='https://www.facebook.com/sharer/sharer.php?t='
         +encodeURIComponent('QP '+document.title)
-        +'&u='+encodeURIComponent(location.href);">Facebook</button>
-    <button style="background-color:#1da1f2"
-      onclick="location.href='https://twitter.com/intent/tweet?text='
+        +'&u='+encodeURIComponent(location.href);">Facebook</a>
+    <a style="background-color:#1da1f2"
+      href="https://twitter.com/intent/tweet?text="
+      onmousedown="this.href='https://twitter.com/intent/tweet?text='
         +encodeURIComponent('QP '+document.title)
-        +'&url='+encodeURIComponent(location.href);">X/Twitter</button>
-    <button style="background-color:black"
-      onclick="location.href='https://www.threads.net/intent/post?text='
+        +'&url='+encodeURIComponent(location.href);">X/Twitter</a>
+    <a style="background-color:black"
+      href="https://www.threads.net/intent/post?text="
+      onmousedown="this.href='https://www.threads.net/intent/post?text='
         +encodeURIComponent('QP '
-        +document.title+' '+location.href);">Threads</button>
+        +document.title+' '+location.href);">Threads</a>
   </div>
-  <form novalidate="novalidate" onformdata="
-      event.formData.set('text', 'QP ' +document.title+' '+location.href);"
-    style="display:flex;" >
+  <div>
     <input id="MaMiShare.host" list="MaMiList" type="email" inputmode="email"
       autocomplete="on" autocorrect="off" autocapitalize="off"
-      placeholder="mstdn.jp misskey.io"
+      formnovalidate='formnovaildate' placeholder="mstdn.jp misskey.io"
       style="background-color:rgb(158,194,63)" />
-    <button style="background-color:rgb(99,100,255);"
-      onclick="this.parentElement.action =
-        `https://${this.previousElementSibling.value}/share`;
-        localStorage.setItem('MaMiShare.host',
-          this.previousElementSibling.value);
-      ">MaMiShare</button>
+    <a style="background-color:rgb(99,100,255);"
+      href="https://mamishare.jp"
+      onmousedown="localStorage.setItem('MaMiShare.host',
+        this.previousElementSibling.value);
+        this.href=`https://${this.previousElementSibling.value}/share?text=QP `
+          +encodeURIComponent(document.title+' '+location.href);
+      ">MaMiShare</a>
     <script>
       window.addEventListener('load', () => {
         document.getElementById('MaMiShare.host').value =
@@ -109,11 +117,42 @@ MastodonもMisskeyも `<host>/share?text=` のWeb Intent URLのパスが共通
       <option value="submarin.online"></option>
       <option value="sushi.ski"></option>
     </datalist>
-  </form>
+  </div>
+</fieldset>
+<fieldset>
+  <legend>Follow</legend>
+  <div>
+    <a style="background-color:#f26522"
+      href="https://web.gnusocial.jp/feed">
+      RSS</a>
+    <a style="background-color:#2bb24c"
+      href="https://feedly.com/i/discover/sources/search/feed/https%3A%2F%2Fweb.gnusocial.jp">
+      Feedly</a>
+    <a style="background-color:#3b5998"
+      href="https://www.facebook.com/profile.php?id=61556435340202">
+      Facebook</a>
+    <a style="background-color:#1da1f2"
+      href="https://x.com/gnusocialjp">X/Twitter</a>
+  </div>
+  <div>
+    <a style="background-color:black"
+      href="https://www.threads.net/@gnusocialjp">
+      Threads</a>
+    <a style="background-color:rgb(0,112,255)"
+      href="https://bsky.app/profile/did:plc:cgtlyuedd3qwmtycjv62xhma">
+      Bluesky</a>
+    <a style="background-color:#a22430"
+      href="https://gnusocial.jp/gnusocialjp">
+      GNU social</a>
+  </div>
 </fieldset>
 ```
 
-datalist要素はなくても問題ない。div要素内のFacebookなどの共有ボタンはおまけでこれもなくても問題ない。
+以下の項目は泣くても問題ない。
+
+1. datalist要素。
+2. div要素内のFacebookなどの共有ボタン。
+3. フォローボタン用の2個目のfieldset要素。
 
 2 続いて、左側のフォームにMastodon/Misskeyサーバーのホスト名 (例: mstdn.jp) を記入し、[MaMiShare] を選ぶ。datalist要素で固定になるが候補サーバーの候補を必要に応じて設定しておくとユーザーには親切だろう。
 
@@ -140,5 +179,8 @@ GPLの採用理由は他人の改善内容をこのコードに取り込みた
 - GNU social。たぶん実装がないので作る必要がある。
 
 ## CHANGELOG
-### 2024-02-25 Sun: v1.0.0 公開
-### 2024-02-24 Sat: v0.0.0 誕生
+### 2024-02-26 Mon: v1.1.0
+- フォローボタンを追加。
+- アクセス解析ツールでの分析のためにbutton->a要素に変更。
+### 2024-02-25 Sun: v1.0.0
+### 2024-02-24 Sat: v0.0.0

index.html

@@ -10,46 +10,54 @@
 <fieldset>
   <style>
   /* @scope { */
-    fieldset input, fieldset button {
+    fieldset input, fieldset a {
       width: 100%;
       color: white;
       font-size: 2em;
+      text-align: center;
+    }
+    fieldset div {
+      display: flex;
     }
   /* } */
   </style>
-  <div style="display:flex; width:100%;">
-    <button style="background-color:#333"
+  <legend>Share</legend>
+  <div>
+    <a style="background-color:#333"
       onclick="navigator.clipboard.writeText(
-        document.title+' '+location.href);">Copy</button>
-    <button style="background-color:#2c6ebd"
-      onclick="location.href='https://b.hatena.ne.jp/entry/s/'
-        +location.host+'/'+location.pathname">Hatena</button>
-    <button style="background-color:#3b5998"
-      onclick="location.href='https://www.facebook.com/sharer/sharer.php?t='
+        document.title+' '+location.href);">Copy</a>
+    <a style="background-color:#2c6ebd"
+      href="https://b.hatena.ne.jp/entry/s/"
+      onmousedown="this.href='https://b.hatena.ne.jp/entry/s/'
+        +location.host+'/'+location.pathname">Hatena</a>
+    <a style="background-color:#3b5998"
+      href="https://www.facebook.com/sharer/sharer.php?t="
+      onmousedown="this.href='https://www.facebook.com/sharer/sharer.php?t='
         +encodeURIComponent('QP '+document.title)
-        +'&u='+encodeURIComponent(location.href);">Facebook</button>
-    <button style="background-color:#1da1f2"
-      onclick="location.href='https://twitter.com/intent/tweet?text='
+        +'&u='+encodeURIComponent(location.href);">Facebook</a>
+    <a style="background-color:#1da1f2"
+      href="https://twitter.com/intent/tweet?text="
+      onmousedown="this.href='https://twitter.com/intent/tweet?text='
         +encodeURIComponent('QP '+document.title)
-        +'&url='+encodeURIComponent(location.href);">X/Twitter</button>
-    <button style="background-color:black"
-      onclick="location.href='https://www.threads.net/intent/post?text='
+        +'&url='+encodeURIComponent(location.href);">X/Twitter</a>
+    <a style="background-color:black"
+      href="https://www.threads.net/intent/post?text="
+      onmousedown="this.href='https://www.threads.net/intent/post?text='
         +encodeURIComponent('QP '
-        +document.title+' '+location.href);">Threads</button>
+        +document.title+' '+location.href);">Threads</a>
   </div>
-  <form novalidate="novalidate" onformdata="
-      event.formData.set('text', 'QP ' +document.title+' '+location.href);"
-    style="display:flex;" >
+  <div>
     <input id="MaMiShare.host" list="MaMiList" type="email" inputmode="email"
       autocomplete="on" autocorrect="off" autocapitalize="off"
-      placeholder="mstdn.jp misskey.io"
+      formnovalidate='formnovaildate' placeholder="mstdn.jp misskey.io"
       style="background-color:rgb(158,194,63)" />
-    <button style="background-color:rgb(99,100,255);"
-      onclick="this.parentElement.action =
-        `https://${this.previousElementSibling.value}/share`;
-        localStorage.setItem('MaMiShare.host',
-          this.previousElementSibling.value);
-      ">MaMiShare</button>
+    <a style="background-color:rgb(99,100,255);"
+      href="https://mamishare.jp"
+      onmousedown="localStorage.setItem('MaMiShare.host',
+        this.previousElementSibling.value);
+        this.href=`https://${this.previousElementSibling.value}/share?text=QP `
+          +encodeURIComponent(document.title+' '+location.href);
+      ">MaMiShare</a>
     <script>
       window.addEventListener('load', () => {
         document.getElementById('MaMiShare.host').value =
@@ -81,7 +89,34 @@
       <option value="submarin.online"></option>
       <option value="sushi.ski"></option>
     </datalist>
-  </form>
+  </div>
+</fieldset>
+<fieldset>
+  <legend>Follow</legend>
+  <div>
+    <a style="background-color:#f26522"
+      href="https://web.gnusocial.jp/feed">
+      RSS</a>
+    <a style="background-color:#2bb24c"
+      href="https://feedly.com/i/discover/sources/search/feed/https%3A%2F%2Fweb.gnusocial.jp">
+      Feedly</a>
+    <a style="background-color:#3b5998"
+      href="https://www.facebook.com/profile.php?id=61556435340202">
+      Facebook</a>
+    <a style="background-color:#1da1f2"
+      href="https://x.com/gnusocialjp">X/Twitter</a>
+  </div>
+  <div>
+    <a style="background-color:black"
+      href="https://www.threads.net/@gnusocialjp">
+      Threads</a>
+    <a style="background-color:rgb(0,112,255)"
+      href="https://bsky.app/profile/did:plc:cgtlyuedd3qwmtycjv62xhma">
+      Bluesky</a>
+    <a style="background-color:#a22430"
+      href="https://gnusocial.jp/gnusocialjp">
+      GNU social</a>
+  </div>
 </fieldset>
     </main>
   </body>