なまら春友流

ラーメン屋店主兼ブロガーの春友がラーメン、ガジェット、日常について書くブログ

アプリ紹介ブックマークレットAppHtmlをカスタマイズ! @delaymania さん作のダウンロードボタンがめっちゃいい感じ!

Sponsored Links


スクリーンショット 2012 12 22 12 12 24

iPhoneアプリを紹介する際にいつも便利に使っている @hiro45jp さんのブックマークレット AppHtml。
そんなAppHtmlをカスタマイズするのが最近流行ってますね。
火付け役はこの方、大ちゃんこと @delaymania さん。
カスタマイズ記事も多数書かれています(後でご紹介)。
そんな大ちゃんに作ってもらったダウンロードボタンがめっちゃいい感じなのでそのご紹介と僕のカスタマイズ方法もご紹介。
大ちゃんありがと〜!!

Sponsored Links


AppHtmlとは?

まず、AppHtmlの簡単な説明を。
以下のリンク先のAppHtmlメーカーからブックマークレットを作成します。

AppHtmlメーカー

使い方は以前書いたこちらの記事を。

神ブックマークレット ShareHtml , AppHtml の導入&使用方法(作者 @hiro45jp さん) | なまら春友流

AppHtmlのカスタマイズ

AppHtmlはカスタマイズできます。
カスタマイズに関しては大ちゃんのブログでコード付きで詳しく書かれています。

アプリを紹介するブックマークレット「AppHTML」をカスタマイズしました | delaymania

アプリをダウンロードするボタンが付くようにAppHTMLをカスタマイズしました | delaymania

ブログ記事を紹介するブックマークレット「ShreHtml」のカスタマイズ記事も書かれているので「delaymania」は要チェックですね。

作ってもらったダウンロードボタン

大ちゃんDLボタン


↑ めっちゃいいでしょ、これ。
これを大ちゃんに作ってもらってAppHtmlに実装してゆきます。

私のカスタマイズ

実際けっこう苦労しました。
最初は上で紹介している大ちゃんの記事内のソースコードを丸パクリしようと思ったんです。
でもCSSの絡みなのかうまく表示できないんです。

スクリーンショット 2012 12 21 20 37 38



↑ こんな感じで表示されるんですよね…。
で、CSSでちょこちょこ弄ってうまく表示できるようにはなったんですけれど、ここでひとつ疑問が…
モバイルだとどういう表示なんだろう?って。

僕のソースコード

ただ、実際モバイルで検証するのは面倒だったのでやってません。
で、僕は「AppHtmlの中アイコン表示」テンプレートを大ちゃんのコードと比べながらカスタマイズしました。
実際に使った僕のソースコードは以下。

[html]
${appname} ${version}
価格: ${price}
カテゴリ: ${category}
App Storeで詳細を見る

アプリをダウンロードする



[/html]

↑ 1列に書き出しているので見づらいのはすいませんがご了承ください。

で、再度言いますがカスタマイズは大ちゃんの上で紹介した2つの記事がめっちゃ詳しいです。
上記記事を読んで、ソースコードをコピーして自分用にカスタマイズしてゆけばいいと思います。
私は以下のようにテキストエディタにコピペしてカスタマイズしたい箇所を確認しながら書いてゆきました。

スクリーンショット 2012 12 22 11 43 42


実際にどう見えるか

Evernote 5.1.2
価格: 無料
カテゴリ: 仕事効率化, ユーティリティ
App Storeで詳細を見る

アプリをダウンロードする


↑ これが実際に作成したアプリリンクです。
う〜ん、なまらいい感じですな ♪

RSSリーダー(Sylfeed)での表示はこんな感じ ↓

IMG 1672


Safariでモバイル表示はこんな感じ ↓

IMG 1675


ほんといい感じですね。
ちなみに僕はCSSを弄っていません。
ただみんながみんな同じ表示になるかどうかはわからないので参考にされる方は上で述べたようにテキストエディタで書き比べるのがいいと思います。

なんにせよ、大ちゃん( @delaymania )、素敵なボタンをなまらありがとう!

Sponsored Links


LEAVE A REPLY

*
*
* (公開されません)

Return Top