[み]iPhone・iPad・Macのアプリを紹介する「AppHTML」をカスタマイズして、ダウンロードボタンもつけた

昨日、AppHTMLを紹介しましたが、見た目がどうも気になっています。みはら(@masashi_385)です。こちらがデフォルトの状態です。
パズル&ドラゴンズ 4.41(無料)App
カテゴリ: ゲーム, パズル, ロールプレイング
販売元: GungHo Online Entertainment, Inc. – GungHo Online Entertainment, INC.(サイズ: 49.2 MB)
全てのバージョンの評価: (137,993件の評価)
GameCenter対応 + iPhone/iPadの両方に対応

このデフォルト状態は、悪くはないですが、ちょっと情報が多すぎるかなと思います。この辺のはいらないんじゃないですかね?極論を言ってしまえば、アイコンとアプリの名前と価格さえわかればいいんじゃないかと思っています。

AppHTMLをカスタマイズ

では早速、カスタマイズしていきます。次の「AppHtmlメーカー」へのリンクをクリックしてください。
AppHtmlメーカー

AppHTMLのデフォルトのコード

カスタマイズ前のデフォルト(中アイコン表示)のコードがこちらです。見にくいので改行いれてます。

<a href="${linkshareurl}" target="_blank" rel="nofollow"><img width="100" class="alignleft" align="left" src="${icon100url}" style="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: -5px 15px 1px 5px;"></a>
<strong> ${title}</strong>
<a href="${linkshareurl}" target="_blank" rel="nofollow"><img src="http://s.mzstatic.com/htmlResources/E6C6/web-storefront/images/viewinitunes_jp.png" style="vertical-align:bottom;" width="90" alt="App"></a><br>
 カテゴリ: ${category}<br>
 販売元: <a href="${selleritunes}" target="_blank" rel="nofollow">${seller}</a>(サイズ: ${appsize})<br>
 全てのバージョンの評価: ${allverstar}(${allreviewcnt})<br>
 ${gamecenter} ${univ}<br style="clear: both;">

このコードを弄っていきます。

AppHTMLで使える特殊コード

AppHTMLでは特殊なコードを使ってカスタマイズできます。こんなのがあります。

  • ${appname} : アプリの名前
  • ${version} : バージョン
  • ${price} : 値段
  • ${title} : 上の三つを合わせたもの
  • ${linkshareurl} : アプリのURLアドレス
  • ${icon100url} : アイコンのURLアドレス
  • ${seller} : 販売元
  • ${category} : カテゴリー
  • ${appsize} : サイズ
  • ${pubdate} : 公開日
  • ${rating} : レーティング

これ以外にもいくつかデフォルトのコードでも使っているんですが、みはらとしては、アプリの名前・アイコン・価格で十分ですので、これだけでOKです。

カスタマイズ後のコード

@delaymaniaさんのコードを参考に、こんなカンジになりました。

<div class="appHtmlFrame">
    <span class="appIcon"><a href="${linkshareurl}" target="_blank" rel="nofollow"><img src="${icon100url}" width="100" height="100" class="appIconImg" style="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: -5px 15px 1px 5px; float:left;" alt="${appname}"></a></span>
    <span class="appTitle"><a href="${linkshareurl}" target="_blank" rel="nofollow"> ${appname}</a></span><br>
    <span class="appPrice">価格: ${price} (記事公開時)</span><br>
    <span class="appLink"><a href="${linkshareurl}" target="_blank" rel="nofollow">App Storeで詳細を見る</a><br style="clear: both;">
</div>

これを使うとこんなカンジになります。

パズル&ドラゴンズ パズル&ドラゴンズ
価格: 無料(記事公開時)
App Storeで詳細を見る

これに、CSSを適用させます。そのためにひとつひとつの要素にspanタグを使ってclassをつけています。CSSがこちら。

.appHtmlFrame {
    border: 1px dashed #AAAAAA;
    padding: 30px;
    margin: 15px 30px;
}
.appTitle {
    font-size: 1.2em;
    font-weight: bold;
    margin: 5px 0 0 0;
}

CSSを適用させるとこんなんです。といっても、iPhoneからご覧の方は何も違わないですね。でも、PCで見るとちょっとだけ変わってるんですよ。

ダウンロードボタンをつける

さて、デフォルトのコードからいらないものをどんどん削っていき、アイコン・タイトル・価格だけになったわけですが、これだと、どこを押したらリンク先に行くのかパッと見ではわからないかも… ということで、「アプリをダウンロード」ボタンをつくって、AppHTMLに仕込むことにしました。

まず、ボタンがこちら。アプリをダウンロード

でかいですね。Retinaに対応するために2倍のサイズでつくっています。これをCSSでwidth=”300″にしてやります。で、最終的なコードがこちらです。

<div class="appHtmlFrame">
    <span class="appIcon"><a href="${linkshareurl}" target="_blank" rel="nofollow"><img src="${icon100url}" width="100" height="100" class="appIconImg" style="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: -5px 15px 1px 5px; float:left;" alt="${appname}"></a></span>
    <span class="appTitle"><a href="${linkshareurl}" target="_blank" rel="nofollow"> ${appname}</a>
</span><br>
    <span class="appPrice">価格: ${price}(記事公開時)</span><br>
    <span class="appLink"><a href="${linkshareurl}" target="_blank" rel="nofollow">App Storeで詳細を見る</a></span><br>
    <div class="appDownloadButton">
        <a href="${linkshareurl}" target="_blank" rel="nofollow"><img src="http://miha5.com/download.png" width="300" height="75" alt="アプリをダウンロード"></a>
    </div>
    <br style="clear: both;">
</div>

「アプリをダウンロード」ボタンを価格の下に置こうかと思ったんですが、それだとスマートフォンで表示したときに盛大にくずれることが予想さ[email protected][email protected][email protected]ます。

.appHtmlFrame {
    border: 1px dashed #AAAAAA;
    padding: 30px;
    margin: 15px 30px;
}
.appTitle {
    font-size: 1.2em;
    font-weight: bold;
}
.appDownloadButton{
    clear:both;
    text-align:center;
    margin:6px auto;
}
.appDownloadButton a{
        transition: 0.3s ease-out;
-webkit-transition: 0.3s ease-out; /* chrome, safari */
   -moz-transition: 0.3s ease-out; /* firefox */
    -ms-transition: 0.3s ease-out; /* ie */
     -o-transition: 0.3s ease-out; /* opera */
}
.appDownloadButton a:hover{
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    opacity: 0.7;
}

で、肝心のできあがりがこちら。

これをiPhoneで表示すると、こんなカンジです。やりすぎましたかね?アプリのアイコンよりもタイトルよりも「アプリをダウンロード」ボタンの圧倒的な存在感…

とはいえ、ボタンの画像ファイルを入れ替えればブックマークレット・コードはそのままに全く違うデザインに変えられるので、デザイン部分はまぁ置いておこうかなと…

ということで、AppHTMLのカスタマイズを紹介しまし[email protected][email protected]した。

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

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

commentYour Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

checkboxみはら.comはエックスサーバーです

PAGE TOP arrowup