Macのアプリへのリンクを作成する、
AppHtmlのブックマークレットが動作しなくなっていた。
そこで、AppHtmlブックマークレット・メーカーで作成し直した。
設定は以下の通り。
- 検索対象：Mac
- 書式テンプレート：アイコン付（大）
- 出力先：プレビューでもポップアップでもお好みで
- 検索件数：5件でも8件でもお好みで
結果、
Microsoft To Do
カテゴリ: 仕事効率化
App Storeで詳細を見る
↑こうなりたいのだが、
Microsoft To Do
カテゴリ: 仕事効率化
↑こうなってしまった。なんか違う。
- アイコンの影がない
- 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);})();
できた。
＞ おしまい ＜