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

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);})();

できた。

> おしまい <

ガッツゴリラ

この最も大事な位置にガッツポーズをするゴリラが表示されていることに何の意味があるのだろうか?答え:何もありません。こんなところまでお読みいただきありがとうございました。

Macオンラインウエア情報検索

Loading
Macオンラインウエア情報検索についてはこちらを参照ください。 →「Macオンラインウエア情報検索」をアップデートしました2012

このブログ記事について

このページは、2021年12月13日 09:41に書かれたブログ記事です。

ひとつ前のブログ記事は「真説・李筴振(りばしぶる)」です。

次のブログ記事は「Todo管理アプリMicrosoft To Doを使ってGTDするときのオススメ設定」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

アーカイブ