AppHtmlのブックマークレットが動かなくなっていたので作り直した

  • 投稿日:
  • by
  • カテゴリ:

Macのアプリへのリンクを作成する、
AppHtmlのブックマークレットが動作しなくなっていた。

そこで、AppHtmlブックマークレット・メーカーで作成し直した。
設定は以下の通り。

  • 検索対象:Mac
  • 書式テンプレート:アイコン付(大)
  • 出力先:プレビューでもポップアップでもお好みで
  • 検索件数:5件でも8件でもお好みで

結果、

Microsoft To Do
カテゴリ: 仕事効率化
App Storeで詳細を見る

↑こうなりたいのだが、

Microsoft To Do
カテゴリ: 仕事効率化

↑こうなってしまった。なんか違う。

  1. アイコンの影がない
  2. App Storeへのリンクはテキストでいい

調整

影を付ける

CSSは以下。

style="float:left;border-radius: 20px 20px 20px 20px;  
-moz-border-radius: 20px 20px 20px 20px;  
-webkit-border-radius: 20px 20px 20px 20px;  
box-shadow: 1px 4px 6px 1px #999999;  
-moz-box-shadow: 1px 4px 6px 1px #999999;  
-webkit-box-shadow: 1px 4px 6px 1px #999999;  
margin: 0 15px 15px 5px;padding: 10px;"

余白を調整する

ただ影を付けたら、余白が小さくなってしまうので、
アイコンのimgのheightを100→80にする。

AppHtmlテンプレートのカスタマイズ

上記ブックマークレット・メーカーを開き、
以下のように指定する。

  • 検索対象:Mac
  • 書式テンプレート:アイコン付(大)
  • 出力先:プレビューでもポップアップでもお好みで
  • 検索件数:5件でも8件でもお好みで

すると「テンプレートを直接カスタマイズできます」の下の
テキストボックスにテンプレートが表示されるので、
カスタマイズする。

私の好みのもので良ければ、
下のコードをコピペしても構わない。

<span class="appIcon"><img class="appIconImg" height="100" src="${icon100url}" style="float:left;border-radius: 20px 20px 20px 20px; -moz-border-radius: 20px 20px 20px 20px; -webkit-border-radius: 20px 20px 20px 20px; box-shadow: 1px 4px 6px 1px #999999; -moz-box-shadow: 1px 4px 6px 1px #999999; -webkit-box-shadow: 1px 4px 6px 1px #999999; margin: 0 15px 15px 5px;padding: 10px;"></span><span class="appName"><strong><a href="${url}" target="itunes_store">${name}</a></strong></span><br><span class="appCategory">カテゴリ: ${category}</span><br><a href="${url}" target="itunes_store">App Storeで詳細を見る</a><br style="clear:both;">

これで「Bookmarkletを作成」ボタンを押してできた
ブックマークレットをブラウザに登録して呼び出すと、
これで以下のフォーマットでアプリへのリンクが作れるようになった。

Microsoft To Do
カテゴリ: 仕事効率化
App Storeで詳細を見る

BookmarkletのJavascriptは以下。
これをコピペしても結果は同じ。

javascript:(function(){var d=document,e=d.createElement('script'),url='http://connect1ngdots.github.io/AppHtml/apphtml.js';if(!url.match(/\?/))url+='?t='+(new%20Date()).getTime();e.out='popup';e.cnt='5';e.knd='macSoftware';e.phg='';e.scs='480';e.ipd='0';e.fmt='%3Cspan%20class%3D%22appIcon%22%3E%3Cimg%20class%3D%22appIconImg%22%20height%3D%22100%22%20src%3D%22%24%7Bicon100url%7D%22%20style%3D%22float%3Aleft%3Bborder-radius%3A%2020px%2020px%2020px%2020px%3B%20-moz-border-radius%3A%2020px%2020px%2020px%2020px%3B%20-webkit-border-radius%3A%2020px%2020px%2020px%2020px%3B%20box-shadow%3A%201px%204px%206px%201px%20%23999999%3B%20-moz-box-shadow%3A%201px%204px%206px%201px%20%23999999%3B%20-webkit-box-shadow%3A%201px%204px%206px%201px%20%23999999%3B%20margin%3A%200%2015px%2015px%205px%3Bpadding%3A%2010px%3B%22%3E%3C%2Fspan%3E%3Cspan%20class%3D%22appName%22%3E%3Cstrong%3E%3Ca%20href%3D%22%24%7Burl%7D%22%20target%3D%22itunes_store%22%3E%24%7Bname%7D%3C%2Fa%3E%3C%2Fstrong%3E%3C%2Fspan%3E%3Cbr%3E%3Cspan%20class%3D%22appCategory%22%3E%E3%82%AB%E3%83%86%E3%82%B4%E3%83%AA%3A%20%24%7Bcategory%7D%3C%2Fspan%3E%3Cbr%3E%3Ca%20href%3D%22%24%7Burl%7D%22%20target%3D%22itunes_store%22%3EApp%20Store%E3%81%A7%E8%A9%B3%E7%B4%B0%E3%82%92%E8%A6%8B%E3%82%8B%3C%2Fa%3E%3Cbr%20style%3D%22clear%3Aboth%3B%22%3E';e.charset='utf-8';e.src=url;e.id='bmlt';d.body.appendChild(e);})();

できた。

> おしまい <