TextwellでアプリのアイコンをDataURLに変換する方法 AppIconData

オフラインでも画像を表示します。

Textwell 1.2.4
分類: 仕事効率化,ユーティリティ
価格: \300 (Sociomedia)

MyShortcutsでアイコンを並べてたとき「いちいち外部のURLアドレスを参照するのもなあ」と思い、作ってみました。すでにあるAppSearchを換骨奪胎したシロモノなので、見かけは同じ。中身はベツモノなので気をつけてお使いください。

size=60;
type=(confirm("・iPhone用→[Cance]\n・iPad用→[OK]"))? "iPadSoftware":"software";
q=new XMLHttpRequest();
q.open("get","http://itunes.apple.com/search?country=JP&entity="+type+"&limit=100&term="+encodeURIComponent(T.current),false);
q.send(null);
res=JSON.parse(q.responseText).results;
document.write("<meta name=viewport content=initial-scale=1><title>"+T.current+"</title>");
for(i=0;i<res.length;i++){
  app=res[i];
  url=app.trackViewUrl;
  name=app.trackName;
  icon=app.artworkUrl60;
  version=app.version;
  price=app.formattedPrice;
  artist=app.artistName;
  genres=app.genres;
  sample="<div style=color:white;background-color:black;padding:10px;><a onClick=Paste('"+escape(name)+"','"+icon+"')><img align=left width=75 src="+icon+" style=border-radius:5px;><strong>"+name+" "+version+"</strong></a><br>分類:"+genres+"<br>価格:"+price+" ("+artist+") <a href="+url+"><img src=http://r.mzstatic.com/ja_jp/images/web/linkmaker/badge_appstore-sm.gif></a><br clear=all></div>";
  document.write(sample);
}
document.write("<hr>");

function Paste(name,icon){
  img = new Image();
  canvas = document.createElement("canvas");
  canvasContext = canvas.getContext("2d");

  img.onload = function(){
        canvas.width = size;
        canvas.height = size;
        canvasContext.drawImage(img, 0, 0, size, size);
        link = "<img alt='"+unescape(name)+"' style='border-radius:10px;height:"+size+"px;' src='"+canvas.toDataURL("image/jpeg")+"'>\n";
        T("replaceCurrent",{text:link});
  };
  img.src = icon;
}

Import Textwell Action
AppIconData

カーソル行をキーワードと見なしAppStoreの検索をします。つまり、調べたいアプリ名を書いて、同じ行にカーソルがある状態でAppIconDataを実行してください。

アプリのアイコンをタップするとDataURLを本文に貼り付けます。60x60サイズのアイコンをデータ化。とりあえず、imgタグ扱いにしています。altにアプリ名。

HTML Preview で見ると、確かに表示。ハラショー。

ネットにアクセスしなくても表示されるのは何かと重宝します。でも情報量が大きいから、テキスト化したときにサイズの違いを実感する。アイコンも60x60が限界かな。1024x1024も作ってみたけど、コピペのとき何のデータを扱ってたか忘れそうになります。

追記: 18:10
アプリ名に空白が含まれると無反応になる不具合を修正しました。
追記: 18:40
jpg圧縮を掛けることでデータサイズの半減に成功しました。ソースの一行目にある size を減らすと、さらに小さくできます。