Shopifyのファイルでファイル名を表示させるブックマークレット

便利なようで不便なところもあるので、改善用にブックマークレットを試作しました。

実現したいこと

• Shopifyの「設定>ファイル」画面で、各画像の名を表示させたい

単にファイル名をコピーしたいだけなのですが、現状では以下のような状態であるためそのままでは正確な画像名をコピーすることができません。

• ファイル一覧での画像名は長いと省略される
• ファイル名をクリックすると画像が拡大表示され、拡大表示された画像名は全て大文字で表示される

画像拡大表示時に画像名が大文字になる部分は理由が知りたいところです…。

ブックマークレット

javascript:(
  function(){
    const fileNameP = document.querySelectorAll('.file-name');
    const tr = document.getElementsByTagName('tr');
    if( fileNameP.length > 0 ){
      for( const elem of fileNameP ){
        elem.remove();
      }
      for(const elem of tr){
        elem.style.cssText='';
      }
    } else {
      const elems = document.getElementsByTagName('tr');
      for(const elem of tr) 
      {
        const span =  elem.querySelector('[class*="Polaris-Thumbnail"]');
        if(span){
          elem.style.cssText = 'pointer-events:none;';
          const target = elem.querySelector('[class*="Polaris-Stack"]');
          const img = elem.querySelector('[src*="https://cdn.shopify.com/s/files"]');
          const src = img.getAttribute('src');
          let fileName = src.match(".+/(.+?)([\?#;].*)?$")[1];
          fileName = fileName.replace('_60x60', '');
          const p = document.createElement("p");
          p.style.cssText = 'white-space:normal;background-color:#eee;padding:1em;';
          p.classList.add('file-name');
          const newContent = document.createTextNode(fileName);
          p.appendChild(newContent);
          target.insertBefore(p, target.firstChild);
        }
      }
    }
  }
)();

使い方

1. 「設定>ファイル」画面で画像一覧を表示させる
2. ブックマークレットを実行する
3. 元からある画像名の上にグレー背景で正規の画像名が表示される

元に戻す場合は以下のいずれかを実行します。

• もう一度ブックマークレットを実行する
• ブラウザをリロードする

留意点

• 画像一覧のサムネイル画像のパスを加工して表示しているため、サムネイルのパスが変更されたり、正規の画像名から変更されるようなことがあれば、期待通りの運用ができない
• 現在の構造やサムネイル画像名が変更されると動かなくなる
• コピーしようとするとリンクが動作していまうので、画像拡大機能を無効化している

Chromeのブックマークの設定方法

1. Chormeブラウザの右上にある縦型三点リーダー(?)をクリック
2. 「ブックマーク」をクリックかマウスオーバー
3. 「ブックマークマネージャー」を選択
4. 画面右上にある縦型三点リーダー(?)をクリック
5. 「新しいブックマークを追加」をクリック
6. 「名前」は任意で登録し、「URL」にブックマーク用のJSをそのままペースト
7. 「保存」をクリック

わかりづらい場合は、以下のように他の方がスクリーンショット付きの記事を書かれているので検索で探すことをお勧めします。

• Chromeにブックマークレットを登録する | 寝坊した

結び

便利になるのか微妙ですが、小さなストレスの軽減になる可能性もあるかなと思います。