iPhone でブログを書く準備している -DraftPad&iTunes App HTML編-

投稿日: 作成者:

iPhone からブログを書こうと思って、DraftPad 関連でいろいろ情報を探していたところ、iTunes App HTML というものに出会いました。これを使えば、簡単に DraftPad から アプリを紹介する記事を書けるのです。

IMG_1472IMG_1067
IMG_1474IMG_1069
IMG_1070

App IconDraftPad 1.4 App Store
対象デバイス: all
カテゴリ: 仕事効率化   価格: ￥0
販売業者: Manabu Ueno

この様にして。
ところが、実際にデフォルトのテンプレートで使ってみたところ、RSSリーダーでの表示が変。たとえば Mac の Reeder での表示は、
Reeder

こんな風に巨大なアイコンが表示されるんですね。これは困った。次に、Google Reader では。

Google Reader (1000+)

枠とアイコンが別々に表示されてしまう。
RSSリーダーでは CSS が適用されないので、こうなってしまうのですが、何とかしたいと思いますよね。
元々の @hiro45jp さんの、AppHtml の CSS を参考にして（パクって）、テンプレートを作ってみたところ、上手くいきました。

Reeder での表示。
Reeder

Google Reader での表示。
Google Reader (1000+)

出来たテンプレートは以下。

1
<a href="${linkUrl}" rel="external nofollow" style="text-decoration: none;"><img src="${artworkUrl60}" alt="App Icon" width="75" align="left" style="border-radius: 16px 16px 16px 16px;-moz-border-radius: 16px 16px 16px 16px;-webkit-border-radius: 16px 16px 16px 16px;box-shadow: 1px 4px 6px 1px #999999;-moz-box-shadow: 1px 4px 6px 1px #999999;-webkit-box-shadow: 1px 4px 6px 1px #999999;margin: 0px 15px 5px 5px;"><strong style="font-size: 1.2em;">${trackCensoredName} ${version}</strong> <img src="http://r.mzstatic.com/htmlResources/2338/images/viewinitunes_jp.png" alt="App Store" style="vertical-align: top; border: none;" width="90"></a><br />対象デバイス: ${supportedDevices}<br />カテゴリ: ${genres1}&#160;&#160;&#160;価格: ￥${price}<br />販売業者: ${sellerName}<br style="clear: both;" />

よし。そんで、まだやることがありそうだ。