差分

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

--- start [2024/07/31 15:23] – ともやん
+++ start [2025/04/22 22:35] (現在) – ともやん
@@ 行 1: / 行 1: @@
 <html>
-  <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.global.prod.js"></script>
-  <script src="/_media/javascript/ua-parser-js/ua-parser-0.7.28-gpu-ex.js"></script>
+  <!--<script src="/_media/javascript/ua-parser-js/ua-parser-0.7.28-gpu-ex.js"></script>-->
+  <script src="https://cdn.jsdelivr.net/npm/ua-parser-js@1.0.39/dist/ua-parser.min.js"></script>
   <!-- Tomoyan.net Vue.js app start -->
   <script>const startTime = new Date();</script>
@@ 行 30: / 行 31: @@
   <div id="tomoyan_net-app">
 </html>
-^ IP アドレス (<html>{{ ip_ver }}</html>)\\ <html><span class="font_half">REMOTE_ADDR</span></html>  | <html><code>{{ remote_addr }}</code></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><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 &amp; 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><code>{{ dark_mode }}</code></html>  |
+^ Vendor\\ <html><span class="font_half">navigator.vendor</span></html>  | <html><p v-if="!(vendor === '')"><code>{{ vendor }}</code></p><p v-else="vendor === ''">取得不能</p></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="color_term"><div class="wrap_mincode"><pre>{{ ua_parser }}</pre><pre>{{ versions }}</pre></div></div></html></panel></accordion>  |
 ^ [[https://html5test.com|The HTML5 test - How well does your browser support HTML5?]]  ||
@@ 行 41: / 行 43: @@
   <!-- Tomoyan.net Vue.js app end -->
 </html>
-<php>echo '<script>const REMOTE_ADDR = "'.$_SERVER["REMOTE_ADDR"].'"; </script>';</php>
+<php>
+  echo '<script>const REMOTE_ADDR = "'.$_SERVER["REMOTE_ADDR"].'"; </script>';
+</php>
 <html>
   <script>
+    "use strict";
     const { createApp } = Vue
     let ua_parser;
     const tomoyan_net_app = createApp({
       data() {
         return {
-          remote_addr: REMOTE_ADDR,
           cpu_cores: '',
           display_resolution: '',
           browser_resolution: '',
           user_agent: navigator.userAgent,
+          vendor: navigator.vendor,
           ua_parser: '',
           versions: '',
@@ 行 59: / 行 65: @@
         }
       },
-      created() {
+      async created() {
+        this.remote_addr = REMOTE_ADDR.indexOf(':') !== -1 ? REMOTE_ADDR + ' (IPv4: ' + await this.get_ip4addr() + ')' : REMOTE_ADDR;
+        window.addEventListener('resize', this.get_display_resolution);
         this.get_display_resolution();
         this.get_cpu_cores()
@@ 行 93: / 行 101: @@
                             navigator.hardwareConcurrency :
                             '');
+        },
+        async get_ip4addr() {
+          // https://www.ipify.org/
+          let ip4addr;
+          try {
+            ip4addr = (await (await fetch('https://razor-ramon4.tomoyan.net/remote_addr?format=json', {mode: 'cors'})).json()).ip;
+          }
+          catch (error) {
+            console.error(error);
+            ip4addr = error;
+          }
+          return ip4addr;
         },
       },
@@ 行 104: / 行 124: @@
             console.log('Ready:', diffReadyTime / 1000);
         }*/
-      },
-      setup() {
-        window.addEventListener('resize', this.set_display_resolution)
       },
       beforeDestroy() {
-        window.removeEventListener('resize', this.set_display_resolution)
+        window.removeEventListener('resize', this.get_display_resolution);
       },
     }).mount('#tomoyan_net-app')
@@ 行 222: / 行 239: @@
 | [[windows|🍱Windows 関連]]  |   |   |   |
 ^ 言語  ^^^^
-| [[python|🐍Python 関連]]  | [[python:django|🎸Django Framework 関連]]  | [[php|🐘PHP 関連]]  | [[ruby|💍Ruby 関連]]  |
+| [[python|🐍Python]]  | [[python:django|🎸Django Framework]]  | [[php|🐘PHP]]  | [[ruby|💍Ruby]]  |
-| [[html_css|🚾HTML + CSS 関連]]  | [[javascript|🈁JavaScript 関連]]  | [[c_cpp|🍋C/C++ 関連]]  | [[rust|🦀Rust 関連]]  |
+| [[html_css|🚾HTML + CSS]]  | [[javascript|🈁JavaScript]]  | [[typescript|🈁TypeScript]]  |  |
-| [[golang|🐭Go 関連]]  | [[java|☕Java 関連]]  || [[programming_language|💻プログラミング言語関連]]  |
+| [[c_cpp|🍋C/C++]]  | [[rust|🦀Rust]]  |  |  |
+| [[golang|🐭Go]]  |  | [[java|☕Java]]  | [[programming_language|💻プログラミング言語]]  |
 ^ テクノロジ  ^^^^
 | [[web|Web 関連]]  | [[dotnet|.NET 関連]]  | [[hardware|ハードウェア関連]]  | [[charset|文字コード]]  |
@@ 行 235: / 行 253: @@
 ^ 生活  ^^^^
 | [[cooking|🍳ハッカ～♪ のお料理]]  | [[onsen|♨️温泉]]  | [[medical_science|🏥医学関連]]  | [[music|🎵音楽]]  |
-| [[lifehacker|🏡ハッカ～♪ の生活術]]  | [[dog|🐶どっぐ]]  | [[law|⚖法律関連]]  |  |
+| [[lifehacker|🏡ハッカ～♪ の生活術]]  | [[dog|🐶どっぐ]]  | [[law|⚖法律関連]]  | 🧠[[brain_science|みそ]]  |
 ^ 金融  ^^^^