差分

このページの2つのバージョン間の差分を表示します。

--- start [2021/06/27 15:45] – ともやん
+++ start [2022/09/24 05:18] – ともやん
@@ 行 3: / 行 3: @@
   <script>
     //self.DEBUG = true;
+    var startTime = Date.now();
   </script>
   <script src="/_media/javascript/requirejs/settings.js?cache=nocache"></script>
@@ 行 9: / 行 10: @@
     #kakunin_kun div.table {
       overflow-x: scroll;
+    }
+    #kakunin_kun table {
+      font-size: 12px;
+      line-height: 14px;
     }
     #kakunin_kun table th {
@@ 行 14: / 行 19: @@
     }
     .font_half {
-      font-size: 50%;
+      font-size: 10px;
     }
   </style>
@@ 行 22: / 行 27: @@
 ====== 確認くん ======
-お出掛け前のチェックにどうぞ。\\
+お出掛け前のチェックにどうぞ💁‍♂️\\
+<html><span style="font-size: 10px; color: gray;">※確認くんは、あなたのスマホやコンピュータがネットへお出掛けする際に、外部へ伝わる、または、伝えている情報を表示しています🙄</span></html>\\
 <WRAP prewrap 100% #kakunin_kun>
 <html>
   <div id="tomoyan_net_app">
 </html>
-^ IP アドレス (<html>{{ ip_ver }}</html>)\\ <html><span class="font_half">REMOTE_ADDR</span></html>  | <html>{{ remote_addr }}</html>  |
+^ IP アドレス (<html>{{ ip_ver }}</html>)\\ <html><span class="font_half">REMOTE_ADDR</span></html>  | <html><code>{{ remote_addr }}</code></html>  |
 ^ ゲートウェイ名\\ <html><span class="font_half">gethostbyaddr(REMOTE_ADDR)</span></html>  | <php>echo '<a href="https://www.aguse.jp/?url='.gethostbyaddr($_SERVER["REMOTE_ADDR"]).'" target="_blank">'.gethostbyaddr($_SERVER["REMOTE_ADDR"]).'</a>';</php>  |
-^ CPU Cores\\ <html><span class="font_half">navigator.hardwareConcurrency</span></html>  | <html>{{ cpu_cores }}</html>  |
+^ CPU Cores\\ <html><span class="font_half">navigator.hardwareConcurrency</span></html>  | <html><p v-if="!(cpu_cores === '')"><code>{{ cpu_cores }}</code> core</p><p v-else="cpu_cores === ''">取得不能</p></html>  |
-^ [[https://ja.wikipedia.org/wiki/%E7%94%BB%E9%9D%A2%E8%A7%A3%E5%83%8F%E5%BA%A6|画面解像度]]\\ <html><span class="font_half">screen & window</span></html>  | <html>{{ display_resolution }}</html>  |
+^ [[https://ja.wikipedia.org/wiki/%E7%94%BB%E9%9D%A2%E8%A7%A3%E5%83%8F%E5%BA%A6|画面解像度]]\\ <html><span class="font_half">screen & window</span></html>  | <html><code>{{ display_resolution }}</code> pixel</html>\\ <html>(ブラウザ表示サイズ <code>{{ browser_resolution }}</code> pixel)</html>  |
-^ ダークモード\\ <html><span class="font_half">CSS @media (prefers-color-scheme: dark)</span></html>  | <html>{{ dark_mode }}</html>  |
+^ ダークモード\\ <html><span class="font_half">CSS @media (prefers-color-scheme: dark)</span></html>  | <html><code>{{ dark_mode }}</code></html>  |
-^ [[https://ja.wikipedia.org/wiki/%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%82%A8%E3%83%BC%E3%82%B8%E3%82%A7%E3%83%B3%E3%83%88|User Agent]]  | <html>{{ user_agent }}<br /><div id="mincode"><pre>{{ ua_parser }}</pre></div></html>  |
+^ [[https://ja.wikipedia.org/wiki/%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%82%A8%E3%83%BC%E3%82%B8%E3%82%A7%E3%83%B3%E3%83%88|User Agent]]\\ [[https://faisalman.github.io/ua-parser-js/|UAParser.js]] ([[javascript:json|JSON)]]  | <html><code>{{ user_agent }}</code></html><accordion><panel type="default" title="UAParser (JSON)"><html><div class="wrap_mincode"><pre>{{ ua_parser }}</pre><pre>{{ versions }}</pre></html></panel></accordion>  |
+^ [[https://html5test.com|The HTML5 test - How well does your browser support HTML5?]]  ||
 <php>echo '<input id="remote_addr" type="hidden" value="'.$_SERVER["REMOTE_ADDR"].'" />';</php>
 <html>
@@ 行 43: / 行 50: @@
 ====== Dokuwiki Top (内部) ======
 ^DokuWikiの使い方^^
-|[[playground:playground|書き込みの練習場所]]  |  |
+|[[playground:playground|✍️書き込みの練習場所]]  |  |
 ^ 生活 ^^^
-|[[internal_users_area:pharmacy|お薬関連]]  | [[internal_users_area:fee_calculation|料金計算]]  | [[internal_users_area:other|その他]]  |
+|[[internal_users_area:pharmacy|💊お薬関連]]  | [[internal_users_area:fee_calculation|💰料金計算]]  | [[internal_users_area:other|🌾その他]]  |
-|[[internal_users_area:medical_science|医学関連]]  |  |  |
+|[[internal_users_area:medical_science|👨🏻‍⚕️医学関連]]  |  |  |
 </ifauth>
 <ifauth @confidential>
-[[doku_maintenance|DokuWikiメンテ部屋]]\\
+[[doku_maintenance|🛠DokuWikiメンテ部屋]]\\
 ^ その他 ^^^
-|[[confidential_area|機密領域]]  |[[system_manage|システム管理]]  |[[info_arrange|情報整理(管理者専用)]]  |
+|[[confidential_area|🔑機密領域]]  |[[system_manage|⚙️システム管理]]  |[[info_arrange|📝情報整理(管理者専用)]]  |
-|[[kodomo_area|子供向けサーバー構築]]  |  |
+|[[kodomo_area|👶子供向けサーバー構築]]  |  |
 </ifauth>
@@ 行 94: / 行 101: @@
 echo '<div class="table" style="word-break: break-word;"><table class="inline">';
-echo '<thead><tr><th colspan="6"><a href="https://info.finance.yahoo.co.jp/fx/detail/?code=USDJPY=FX" target="_blank">米ドル/円 - Powered by Yahoo!ファイナンス</a></th></tr></thead>';
+echo '<thead><tr><th colspan="6"><a href="https://info.finance.yahoo.co.jp/fx/detail/?code=USDJPY=FX" target="_blank">💹米ドル/円 - Powered by Yahoo!ファイナンス</a></th></tr></thead>';
 echo '<tbody>';
 echo '<tr><td>Bid(売値)</td><td>'.$usdjpy['Bid'].'</td>';
@@ 行 104: / 行 111: @@
 echo '</tbody>';
-echo '<thead><tr><th colspan="6"><a href="https://info.finance.yahoo.co.jp/fx/detail/?code=CNHJPY=FX" target="_blank">人民元/円 - Powered by Yahoo!ファイナンス</a></th></tr></thead>';
+echo '<thead><tr><th colspan="6"><a href="https://info.finance.yahoo.co.jp/fx/detail/?code=CNHJPY=FX" target="_blank">💹人民元/円 - Powered by Yahoo!ファイナンス</a></th></tr></thead>';
 echo '<tbody>';
 echo '<tr><td>Bid(売値)</td><td>'.$cnhjpy['Bid'].'</td>';
@@ 行 116: / 行 123: @@
 echo '</table></div>';
 </php>
-[[https://sec.himawari-group.co.jp/report/weeklycalendar/|経済指標｜マーケット情報｜ひまわり証券 (https://sec.himawari-group.co.jp/)]]\\
+<html><a href="https://sec.himawari-group.co.jp/report/weeklycalendar/">🌻経済指標｜マーケット情報｜ひまわり証券 (https://sec.himawari-group.co.jp/)</a></html>\\
 ^ 関連サイト  ^^
-| [[https://redmine.tomoyan.net|ともやんRedmine]]  | [[https://repos.tomoyan.net|ともやんRepository]]  |
+| [[https://redmine.tomoyan.net|🦚ともやんRedmine]]  | [[https://repos.tomoyan.net|🕊ともやんRepository]]  |
 ^ DokuWikiの使い方  ^^
-| [[wiki:syntax|整形記法]]  | [[wiki:dokucrypt_plugin|Dokucryptプラグイン(暗号化機能)]]  |
+| [[wiki:syntax|☮️整形記法]]  | [[wiki:dokucrypt_plugin|🛡Dokucryptプラグイン(暗号化機能)]]  |
-| [[http://www.dokuwiki.org/ja:dokuwiki|Dokuwiki本家]]  | [[SyntaxTest|書式テスト]]  |
+| [[http://www.dokuwiki.org/ja:dokuwiki|🏡Dokuwiki本家]]  | [[SyntaxTest|📝書式テスト]]  |
 ^ カテゴリー別  ^^^^
 ^ OS  ^^^^
-| [[linux|Linux 関連]]  | [[linux_zaurus|Linux Zaurus 関連]]  | [[network|ネットワーク関連]]  | [[windows:regex|正規表現]]  |
+| [[linux|🐣Linux 関連]]  | [[linux_zaurus|Linux Zaurus 関連]]  | [[network|ネットワーク関連]]  | [[windows:regex|正規表現]]  |
-| [[mac|Mac 関連]]  | [[ios|iPhone/iOS 関連]]  | [[android|Android 関連]]  |  |
+| [[mac|🍔🍟Mac 関連]]  | [[ios|🍍iPhone/iOS 関連]]  | [[android|🤖Android 関連]]  |  |
-| [[windows|Windows 関連]]  |   |   |   |
+| [[windows|🍱Windows 関連]]  |   |   |   |
 ^ 言語  ^^^^
-| [[python|Python 関連]]  | [[python:django|Django Framework 関連]]  | [[php|PHP 関連]]  | [[ruby|Ruby 関連]]  |
+| [[python|🐍Python 関連]]  | [[python:django|🎸Django Framework 関連]]  | [[php|🐘PHP 関連]]  | [[ruby|💍Ruby 関連]]  |
-| [[html_css|HTML5 + CSS3 関連]]  | [[javascript|JavaScript 関連]]  | [[c_cpp|C/C++ 関連]]  | [[golang|Go 関連]]  |
+| [[html_css|🚾HTML + CSS 関連]]  | [[javascript|🈁JavaScript 関連]]  | [[c_cpp|🍋C/C++ 関連]]  | [[rust|🦀Rust 関連]]  |
-| [[programming_language|プログラミング言語関連]]  ||||
+| [[golang|🐭Go 関連]]  | [[java|☕Java 関連]]  || [[programming_language|💻プログラミング言語関連]]  |
 ^ テクノロジ  ^^^^
 | [[web|Web 関連]]  | [[dotnet|.NET 関連]]  | [[hardware|ハードウェア関連]]  | [[charset|文字コード]]  |
-| [[algorithm|アルゴリズム]]  | [[database|データベース関連]]  |   |   |
+| [[algorithm|アルゴリズム]]  | [[database|データベース関連]]  | [[open_source|オープンソース]]  |   |
 | [[ai|人工知能関連]]  | [[security|セキュリティ関連]]  |   |   |
 ^ その他  ^^^^
@@ 行 151: / 行 158: @@
 <html>
   <script>
+    "use strict";
     let tomoyan_net_app;
+    let ua_parser;
     require(['Vue', 'UAParser'], (Vue, UAParser) => {
       tomoyan_net_app = new Vue({
         el: '#tomoyan_net_app',
         data: {
+          remote_addr: this.remote_addr.value,
+          cpu_cores: '',
+          display_resolution: '',
+          browser_resolution: '',
           user_agent: navigator.userAgent,
           ua_parser: '',
-          display_resolution: '',
+          versions: '',
-          remote_addr: this.remote_addr.value,
         },
         created: function() {
-          this.set_display_resolution();
+          this.get_display_resolution();
+          this.get_cpu_cores()
-          let ua_json = (new UAParser()).getResult();
+          window.UAParser = UAParser;
-          this.ua_parser = JSON.stringify(ua_json, null, '\t');
+          let ua_result = ua_parser = new UAParser();
+          let ua_json = ua_result.getResult();
+          this.ua_parser = JSON.stringify(ua_json, null, '  ');
+          this.versions = 'Vue.js version: ' + Vue.version + '\n' +
+            'UAParser version: ' + UAParser.VERSION + '\n';
         },
         computed: {
           ip_ver: function() {
             return this.remote_addr.indexOf(':') !== -1 ? 'IPv6' : 'IPv4';
-          },
-          cpu_cores: function() {
-            let cpu_cores = (!!navigator.hardwareConcurrency ?
-                                 navigator.hardwareConcurrency :
-                                 '');
-            let cpu_cores_tr = this.$el.querySelector('#kakunin_kun .row2');
-            if (cpu_cores == '') {
-              //cpu_cores_tr.hidden = true;
-              //cpu_cores_tr.setAttribute('style', 'display: none;');
-              cpu_cores = '取得不能';
-            }
-            else {
-              cpu_cores += ' core';
-            }
-            return cpu_cores;
           },
           dark_mode: function() {
@@ 行 198: / 行 199: @@
         },
         methods: {
-          set_display_resolution: function() {
+          get_display_resolution: function() {
-            const display_resolution =
+            this.display_resolution =  screen.width + ' x ' + screen.height;
-              screen.width + ' x ' + screen.height + ' pixel ' +
+            this.browser_resolution =  window.innerWidth + ' x ' + window.innerHeight;
-              '(表示サイズ ' + window.innerWidth + ' x ' + window.innerHeight + ' pixel)';
-            this.display_resolution = display_resolution;
           },
+          get_cpu_cores: function() {
+            this.cpu_cores = (!!navigator.hardwareConcurrency ?
+                                 navigator.hardwareConcurrency :
+                                 '');
+          },
+          window:onload = function() {
+            let diffLoadTime = Date.now() - startTime;
+            console.log('Load:', diffLoadTime / 1000);
+          },
+          /*window:onready = function() {
+            let diffReadyTime = Date.now() - startTime;
+            console.log('Ready:', diffReadyTime / 1000);
+          },*/
         },
         mounted: function() {
@@ 行 216: / 行 227: @@
   </script>
 </html>
+\\
-このサイトを広告なしで見るには [[web:brave|Brave - プライバシーを重視した高速かつ安全な次世代ブラウザ]] の利用をお勧めします。\\
+このサイトを広告なしで見るには...\\
+[[web:vivaldi|Vivaldi - 超絶便利。タブ管理や広告で悩まないブラウザ]]\\
+[[web:brave|Brave - プライバシーを重視した高速かつ安全な次世代ブラウザ]]\\
+の利用をお勧めします😉\\
+\\
+<wrap em>※スマホで閲覧する場合は Chromium 系エンジンのブラウザでの閲覧はおすすめしません🤔\\
+ページによっては大量の出力結果を含むため、__レンダリング処理でプチフリーズ__します😱😇\\
+快適に閲覧するには [[https://www.mozilla.org/ja/firefox/|Firefox]] での閲覧を推奨します😊\\ </wrap>