jrjsの公開

jrjs.html

@@ -18,31 +18,45 @@
             <div class="br22"></div>
             <h1>JR四国列車運行情報表示支援ブックマークレット</h1>
             <h2>JR四国の列車運行情報を自動更新させるスクリプトです。</h2>
-            <p>使い方：</p>
-            <p>1 <a class="btn btn-success" onclick="copyToClipboard()" href="javascript:setTimeout(after%2C15000)%3Bfunction%20after()%7Bdocument.getElementById('refreshIcon').click()%3BsetTimeout(after%2C15000)%3B%7Dvoid(0);">ここを長押ししてコピーしてください。</a></p>
-            <p>(上を長押ししてブックマークへの追加が表示される場合は追加してください。表示されない場合はコピーして下へ。)</p>
-            <div class="gallerybase"><img src="./picture/Screenshot_20180915-115730.png" class="gallery"></div>
-            <p>2 下の共有ボタンからこのサイトをブックマークに追加してください。</p>
-            <div class="gallerybase"><img src="./picture/Screenshot_20180915-115902.png" class="gallery"></div>
-            <p>3 ブックマークの編集をして今登録したページのurlを消去してペーストしてください。</p>
-            <div class="br22"></div>
-        </div>
-        <div class="box" style="background-color: rgba(255, 255, 255, 0.726);">
-            <div class="br22"></div>
-            <h1>ルール</h1>
-            <div class="rule">
-                <h2>共有物以外のものを勝手に使用しない</h2>
-                <p>共有物である人工物は大抵その旨が近くの看板に記されています。そこの決まりに従って共有物を使用してください。</p>
-                <h2>相手が嫌になることをしない</h2>
-                <p>基準は相手です。皆が不快に思うことはしないようにしましょう。</p>
+            <p>設定の仕方：</p>
+            <p>1 <a class="btn btn-success" href="javascript:setTimeout(after%2C15000)%3Bfunction%20after()%7Bdocument.getElementById('refreshIcon').click()%3BsetTimeout(after%2C15000)%3B%7Dvoid(0);">AndroidやPC、Safari以外のブラウザの人はこちら</a></p>
+            <p>↑上を右クリックor長押ししてブックマークへの追加が表示される場合は追加してください(終了)↑</p>
+            <p>↓表示されない人は下の文字列をコピー↓</p>
+
+            <p class="あれ">javascript:setTimeout(after%2C5000)%3Bfunction%20after()%7Bdocument.getElementById('refreshIcon').click()%3BsetTimeout(after%2C5000)%3B%7Dvoid(0);</p>
+            <div class="gallerybase">
+                <img src="./picture/Screenshot_20190409-211419.png" class="gallery">
+                <img src="./picture/IMG_0009.PNG" class="gallery">
+                <img src="./picture/IMG_0010.PNG" class="gallery">
+            </div>
+            <p>2 メニューからこのサイトをブックマークに追加してください。</p>
+            <div class="gallerybase">
+                <img src="./picture/Screenshot_20190409-211426.png" class="gallery">
+                <img src="./picture/IMG_0011.PNG" class="gallery">
+            </div>
+            <p>3 ブックマークの編集をして今登録したページのurlを消去し、コピーした項目をペーストしてください。</p>
+            <div class="gallerybase">
+                <img src="./picture/Screenshot_20190409-211443.png" class="gallery">
+                <img src="./picture/IMG_0012.PNG" class="gallery">
             </div>
             <div class="br22"></div>
         </div>
         <div class="box" style="background-color: rgba(255, 255, 255, 0.726);">
             <div class="br22"></div>
-            <h1>サーバー情報</h1>
-            <h3>アドレス : haruk.in</h3>
-            <h3>ポート : 19132(ipv4) or 19133(ipv6)</h3>
+            <h1>使用方法</h1>
+            <p>1 JR四国の列車運行情報サイトを表示</p>
+            <p>2 見たい路線を表示してからブックマークを起動するだけ</p>
+            <div class="br22"></div>
+            <p>これで30秒ごとに路線情報が自動更新されます。</p>
+            <div class="br22"></div>
+        </div>
+        <div class="box" style="background-color: rgba(255, 255, 255, 0.726);">
+            <div class="br22"></div>
+            <h1>そんなの面倒くせぇよ！もっと簡単にしてくれ！</h1>
+            <h3>いいでしょう。そんな貴方に良い物があります。</h3>
+            <p>自動更新がデフォルトで搭載されたビューワアプリを作成しております。</p>
+            <p>Android限定ですがこれならアプリから開くだけでスマホには不要なエリアも消して快適に観察できます！！</p>
+            <a href='https://play.google.com/store/apps/details?id=jrshikokuinfo.xprocess.hrkn&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'><img alt='Google Play で手に入れよう' style="width: 250px;" src='https://play.google.com/intl/ja/badges/images/generic/ja_badge_web_generic.png'/></a>
             <div class="br22"></div>
         </div>
         <div class="br20"></div>
@@ -55,42 +69,23 @@
 </body>
 
 <head>
-    <script>
-        function copyToClipboard() {
-            var copyFrom = document.createElement("textarea");
-            // テキストエリアへ値をセット
-            copyFrom.textContent = "javascript:setTimeout(after%2C5000)%3Bfunction%20after()%7Bdocument.getElementById('refreshIcon').click()%3BsetTimeout(after%2C5000)%3B%7Dvoid(0);";
-            
-            // bodyタグの要素を取得
-            var bodyElm = document.getElementsByTagName("body")[0];
-            // 子要素にテキストエリアを配置
-            bodyElm.appendChild(copyFrom);
-            
-            // テキストエリアの値を選択
-            copyFrom.select();
-            // コピーコマンド発行
-            var retVal = document.execCommand('copy');
-            // 追加テキストエリアを削除
-            bodyElm.removeChild(copyFrom);
-            // コピーをお知らせする
-            alert("コピーできました！続きに従ってください！");
-        }
-    </script>
     <style>
+        .あれ{
+            background-color: aquamarine;
+            word-wrap: break-word;
+            padding: 10px;
+        }
         .gallery {
             width: 100%;
             margin: auto;
-        }
-
-        .gallery:hover {
-            box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.61);
-            transition: all 300ms 0s;
+            padding: 2%;
         }
 
         .gallerybase {
-            display: inline-block;
+            display: flex;
             position: relative;
-            width: 70%;
+            width:100%;
+            max-width: 700px;
         }
 
         .gallerybase::after {