docomo 2015-16冬春モデル予約受付中

Androidアプリレビューサイト運営者向けのお勧めエクステンション「Embed Code of the Android Market」

今日はちょっと趣向を変えて、
僕のようなAndroidアプリのレビューサイト運営者にとって嬉しいChromeエクステンション(拡張機能)をご紹介します。

お気づきだとは思いますが、最近、アプリレビューの記事の始まりがこんな感じになっています。

Embed Code of the Android Market

この形状の前は、テーブルタグで(しかもアプリ概要は手打ちで)構成していたので、
PC版で見るとなんでもないんですが、スマートフォン版で見るとレイアウトがガッタガタになっておりました。

そこで悩みながらいろいろと調べていたところ、超便利なエクステンションを発見したのでございます。

Embed Code of the Android Market
それが「Embed Code of the Android Market」と、

Embed Code of the Android Market
そのシンプル版「Embed Code of the Android Market -mini-」でございます。

二つの違いはフルスペック版が、僕の利用しているような多くのアプリ情報&QRコードを自動的に作成してくれ、
mini版はアプリ名とQRコードの作成だけに機能を絞ったものになります。

「Embed Code of the Android Market」を使ってみよう

では「Embed Code of the Android Market」の設定方法と使用方法です。

まずはChromeを立ち上げ、2つ(あるいは使いたい方)のエクステンションをインストールします。
それで、QRコード等を表示させたいアプリをアンドロイドマーケットで検索します。

Embed Code of the Android Market
ちなみに、アプリを検索後、新しいタブでページを開くとURLがきれいに表示されますよ(語尾に変数らしきものが付かない)。

Embed Code of the Android Market
で、URLの右側に緑Mのアイコンと、緑M&小さな赤字のアイコンが表示されるようになります。

緑アイコンが「Embed Code of the Android Market」で、緑赤が「Embed Code of the Android Market -mini-」なので、
利用したい方のアイコンをクリックすると、コードが表示されるのでコピペして使ってください。
Embed Code of the Android Market

初期設定のまま使うとこんな感じです。

「Embed Code of the Android Market」
Embed Code of the Android Market

「Embed Code of the Android Market -mini-」
Embed Code of the Android Market

「Embed Code of the Android Market」を加工してみよう

右上の設定(スパナ)アイコン→オプション→拡張機能→オプションで、コードの改変ができます。

Embed Code of the Android Market
ここで、好みの表示方法になるよう、コードを改変しましょう。

<a href="%url%">%app_name%</a><br /> <a href="%market_url%"><br /> <img src="http://chart.apis.google.com/chart?chs=77x77&#038;cht=qr&#038;chld=l|1&#038;chl=%market_url%"></a><br />

から

<a href="%url%">%app_name%</a>

を削除してsaveすると、以降はQRコードのみ表示されるようになります。
なお、フル版のコードはこんな感じになるんですが、ちょっとこれだとねぇ・・・というわけで、

</p> <table style="width:100%"> <tr> <td style="background-color:#DDDDDD; border:1px solid #FFFFFF;" >App name</td> <td style="background-color:#DDDDDD; border:1px solid #FFFFFF;text-align : center;width:60%" > <a href="%url%">%app_name%</a></td> </tr> <tr> <td style="background-color:#DDDDDD; border:1px solid #FFFFFF;" >Price</td> <td style="background-color:#DDDDDD; border:1px solid #FFFFFF;text-align : center" >%price%</td> </tr> <tr> <td style="background-color:#DDDDDD; border:1px solid #FFFFFF;" >Rating</td> <td style="background-color:#DDDDDD; border:1px solid #FFFFFF;text-align : center" ><span title="%rating%">%rating_stars%</span>(%rating_count%)</td> </tr> <tr> <td style="background-color:#DDDDDD; border:1px solid #FFFFFF;" >Installs</td> <td style="background-color:#DDDDDD; border:1px solid #FFFFFF;text-align : center" >%installs%</td> </tr> <tr> <td style="background-color:#DDDDDD; border:1px solid #FFFFFF;" >QR code</td> <td style="background-color:#DDDDDD; border:1px solid #FFFFFF;text-align : center" ><a href="%market_url%"><br /> <img src="http://chart.apis.google.com/chart?chs=77x77&#038;cht=qr&#038;chld=l|1&#038;chl=%market_url%"></a> </td> </tr> <tr> <td></td> <td style="text-align:right"><span style="font-size:xx-small">%attribution2%</span></td> </tr> </table> <p>

僕はこんな感じで改変して使っています。

</p> <hr> <p></p> <div> <div style="float:left;">スクリーンショット</div> <div style="float:left;width:auto"> <table style="width:100%"> <tr> <td style="background-color:#DDDDDD; border:1px solid #FFFFFF;" >アプリ名</td> <td style="background-color:#DDDDDD; border:1px solid #FFFFFF;text-align : center" >%app_name%</td> </tr> <tr> <td style="background-color:#DDDDDD; border:1px solid #FFFFFF;" >価格</td> <td style="background-color:#DDDDDD; border:1px solid #FFFFFF;text-align : center" >%price%</td> </tr> <tr> <td style="background-color:#DDDDDD; border:1px solid #FFFFFF;" >対応OSバージョン</td> <td style="background-color:#DDDDDD; border:1px solid #FFFFFF;text-align : center" >%requires_android%</td> </tr> <tr> <td style="background-color:#DDDDDD; border:1px solid #FFFFFF;" >アプリ容量</td> <td style="background-color:#DDDDDD; border:1px solid #FFFFFF;text-align : center" >%size%</td> </tr> <tr> <td style="background-color:#DDDDDD; border:1px solid #FFFFFF;" >ダウンロード</td> <td style="background-color:#DDDDDD; border:1px solid #FFFFFF;text-align : center" ><a href="%market_url%"><br /> <img src="http://chart.apis.google.com/chart?chs=70x70&#038;cht=qr&#038;chld=l|1&#038;chl=%market_url%"></a><br /> <br /><a href="%url%"><span style="font-size:xx-small">PCサイトから</span></a> </td> </tr> <tr> <td></td> <td style="text-align:right"><span style="font-size:xx-small">%attribution2%</span></td> </tr> </table> </div> <div style="clear:both"></div> </div> <p>Android端末で閲覧している場合はQRコードをタップするとダウンロードページに移動します。</p> <hr> <p>

スクリーンショットと書いている箇所に画像のURLを適宜挿入しています。

変数の一覧はエクステンションの設定画面や作者様のサイトに詳しく載っているのですが、念のため掲載しておきます。

変数一覧

Embed formatで利用ができる変数の一覧です。それぞれの値に置き換わります。
同じ変数を何回記述してもかまいません。

%app_name% : アプリケーションの名前です。(例:モバイルGoogleマップ)
%url% : PC版AndroidマーケットのURLです。
(例:https://market.android.com/details?id=com.google.android.apps.maps)
%market_url% : AndroidマーケットのURLです。PCからは閲覧できません。
(例:market://details?id=com.google.android.apps.maps)
%tiny_url% : PC版AndroidマーケットのURLをgoo.glで短縮したアドレスです。
(例:http://goo.gl/byRJF)
%rating% : アプリケーションのAndroidマーケットでの評価です。(例:4.6)
%rating_count% : 評価者数です。(例:565,425)
%rating_stars% : Star formatを元に、評価のレベルを五段階でビジュアル的に表示します。
%updated% : アプリが更新された日付です。(例:February 1, 2011)
%current_version% : アプリのバージョンです。(例:5.1.0)
%requires_android% : 対応OSのバージョンです。(例:1.6 and up)
%category% : アプリのAndroidマーケットでのカテゴリです。(例:旅行&地域)
%installs% : アプリがインストールされた数です。(例:10,000,000 – 50,000,000)
%size% : アプリの容量です。(例:5.8M)
%price% : アプリの価格です。(例:Free とか $2.99 (about \250))
%attribution% : Swordsmithへのリンクです。必ずどこかに記述ください。

スポンサーリンク
  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク