昨日改

by mame-tanuki 2 days ago [2026/03/04 00:19:03]

「userId」で指定したユーザーあるいは、はてなドメインならURLから取得したユーザーIDのブックマーク一覧ページを画面左上に表示されるカレンダーから選択した日付別に表示するブックマークレット。

@@ -1,58 +1,56 @@
-/*
- * @title 昨日改
- * @description 「userId」で指定したユーザーあるいは、はてなドメインならURLから取得したユーザーIDのブックマーク一覧ページを画面左上に表示されるカレンダーから選択した日付別に表示する
- * @include http://*
- * @license MIT License
- * @require 
- */
-
-
 javascript:(function(){
-    // 1. ユーザーIDの取得（はてなドメインならURLから、そうでなければデフォルト）
+    // 1. ユーザーIDの取得
     let userId = 'mame-tanuki';
-    const match = location.pathname.match(/^\/([^\/]+)\//);
-    if (location.host === 'b.hatena.ne.jp' && match) {
-        userId = match[1];
+    if (location.host === 'b.hatena.ne.jp') {
+        const match = location.pathname.match(/^\/([^\/]+)\//);
+        if (match) userId = match[1];
     }
 
-    // 2. 一時的な入力フォーム（カレンダー）の作成
+    // 2. 入力フォーム（date型）の作成
     const input = document.createElement('input');
     input.type = 'date';
     
-    // スタイル調整：画面中央に大きく表示
+    // スタイル調整：スマホでも見やすく中央に配置
     Object.assign(input.style, {
         position: 'fixed',
-        top: '50%',
+        top: '20%', // スマホのキーボードやパネルを考慮して少し上に
         left: '50%',
-        transform: 'translate(-50%, -50%)',
-        zIndex: '999999',
-        padding: '10px',
-        fontSize: '16px',
+        transform: 'translateX(-50%)',
+        zIndex: '2147483647', // 最大の重なり順
+        padding: '12px',
+        fontSize: '18px', // モバイルでズームされないサイズ
         border: '2px solid #00A4DE',
         borderRadius: '8px',
-        boxShadow: '0 4px 15px rgba(0,0,0,0.3)'
+        backgroundColor: '#fff',
+        boxShadow: '0 4px 20px rgba(0,0,0,0.4)'
     });
 
-    // 初期値として「昨日」を設定
+    // 初期値を「昨日」に設定
     const d = new Date();
     d.setDate(d.getDate() - 1);
     input.value = d.toISOString().split('T')[0];
 
     // 3. 日付が選択された時の処理
     input.onchange = function() {
-        const val = input.value.replace(/-/g, ''); // '2023-10-27' -> '20231027'
+        const val = input.value.replace(/-/g, ''); 
         if (val) {
             location.href = `https://b.hatena.ne.jp/${userId}/${val}`;
         }
-        document.body.removeChild(input);
+        // 遷移するので削除は不要だが一応
+        if(input.parentNode) document.body.removeChild(input);
     };
 
-    // 4. キャンセル処理（入力を外れたら消す）
-    input.onblur = function() {
-        document.body.removeChild(input);
-    };
+    // 【改善点】スマホで消える対策：onblurをあえて設定しない、
+    // もしくはクリック以外の意図しない動作で消えないように調整
+    // キャンセルしたい場合は、日付以外の場所をタップしても消えるように別途実装も可能
 
-    // 画面に追加してフォーカスを当てる
+    // 4. 画面に追加して実行
     document.body.appendChild(input);
-    input.showPicker ? input.showPicker() : input.focus();
+    
+    // showPicker() は最新ブラウザでカレンダーを自動展開するメソッド
+    if (input.showPicker) {
+        input.showPicker();
+    } else {
+        input.focus();
+    }
 })();

• javascript:(function(){
      // 1. ユーザーIDの取得
      let userId = 'mame-tanuki';
      if (location.host === 'b.hatena.ne.jp') {
          const match = location.pathname.match(/^\/([^\/]+)\//);
          if (match) userId = match[1];
      }
  
      // 2. 入力フォーム（date型）の作成
      const input = document.createElement('input');
      input.type = 'date';
      
      // スタイル調整：スマホでも見やすく中央に配置
      Object.assign(input.style, {
          position: 'fixed',
          top: '20%', // スマホのキーボードやパネルを考慮して少し上に
          left: '50%',
          transform: 'translateX(-50%)',
          zIndex: '2147483647', // 最大の重なり順
          padding: '12px',
          fontSize: '18px', // モバイルでズームされないサイズ
          border: '2px solid #00A4DE',
          borderRadius: '8px',
          backgroundColor: '#fff',
          boxShadow: '0 4px 20px rgba(0,0,0,0.4)'
      });
  
      // 初期値を「昨日」に設定
      const d = new Date();
      d.setDate(d.getDate() - 1);
      input.value = d.toISOString().split('T')[0];
  
      // 3. 日付が選択された時の処理
      input.onchange = function() {
          const val = input.value.replace(/-/g, ''); 
          if (val) {
              location.href = `https://b.hatena.ne.jp/${userId}/${val}`;
          }
          // 遷移するので削除は不要だが一応
          if(input.parentNode) document.body.removeChild(input);
      };
  
      // 【改善点】スマホで消える対策：onblurをあえて設定しない、
      // もしくはクリック以外の意図しない動作で消えないように調整
      // キャンセルしたい場合は、日付以外の場所をタップしても消えるように別途実装も可能
  
      // 4. 画面に追加して実行
      document.body.appendChild(input);
      
      // showPicker() は最新ブラウザでカレンダーを自動展開するメソッド
      if (input.showPicker) {
          input.showPicker();
      } else {
          input.focus();
      }
  })();

• Permalink RAW Packed Userscript LOADER Metadata ?

  Permalink

  このページへの個別リンクです。

  RAW

  書かれたコードへの直接のリンクです。

  Packed

  文字列が圧縮された書かれたコードへのリンクです。

  Userscript

  Greasemonkey 等で利用する場合の .user.js へのリンクです。

  Loader

  @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。

  Metadata

  コード中にコメントで @xxx と書かれたメタデータの JSON です。