Androidアプリを紹介する「AndroidHTML ブックマークレット」を使ってみた

以前、iOSアプリを紹介するブログパーツの「ポチレバ」を紹介いたしました。

「カエレバ」、「ヨメレバ」に続き「ポチレバ」を使ってみた
以前、ブログパーツの「カエレバ」、「ヨメレバ」をご紹介いたしました。 今回は「カエレバ」、「ヨメレバ」と同じ方が開発をされている「ポチ...

Androidアプリを紹介する「ポチレバ」のようなブログパーツがないか探していたところ、「AndroidHTML ブックマークレット」というサービスを見つけたのでご紹介いたします。

「AndroidHTML ブックマークレット」とは

「AndroidHTML ブックマークレット」はPlayストアのアプリURLから紹介用のリンクURLを生成するブックマークレットで、URL以外にもアプリのアイコンやGoogle Playのボタンなどを生成してくれます。

「AndroidHTML ブックマークレット」は現在、林家次男: 開いた口が半開きになるブログさんがv3.1を開発されています。

使い方

AndroidHTMLのブックマークレットを登録する

AndroidHTMLのブックマークレットを登録

「AndroidHtml for Play」をブックマークバーにドラッグ&ドロップして、ブックマークレットを登録します。

Google Playで「AndroidHTML ブックマークレット」を使う

「AndroidHtml for Play」を押下

紹介したいAndroidアプリのページに行き、ブックマークバーに登録した「AndroidHtml for Play」を押下します。すると、ブラウザ上の画面左下にHTMLソースが表示されます。

HTMLソースをコピーし、表示したい場所に張り付けると、下記のように紹介したいAndroidアプリが表示されます。

Google play Pokémon GO
Pokémon GO
制作: Niantic, Inc.
評価: 3.9 / 5段階中
価格: 無料 (2016/7/26 時点)
posted by: AndroidHTML v3.1

※上記デザインは当サイト用にカスタマイズしています。

「AndroidHTML ブックマークレット」のstyle属性をCSSにする

「AndroidHTML ブックマークレット」は気軽に紹介したいアプリ用のHTMLソースを生成してくれますが、スタイルはstyle属性となっています。

サイトのテイストに合わせて「AndroidHTML ブックマークレット」のデザインを変えたい場合、style属性では変更するのはなかなか大変です。

下記でstyle属性をCSSにする方法をご紹介いたします。

HTMLを整形する

まず、「AndroidHTML ブックマークレット」で取得したHTMLソースを見やすくするために、「HTML整形ツール(プチ・デバッグ機能付き)」で整形します。HTMLのインデントタイプは「4」としています。

ツールでHTMLを整形
HTMLを整形

下記が整形したHTMLになります(HTMLソースはポケモンGO)。

style属性をCSSにする

style属性で記述されているスタイルをCSSにしていきます。「extractCSS」を利用すると簡単にCSSにすることができます。

extractcssでインラインをCSSにする
「extractCSS」でstyle属性をCSSにする

extractCSS – Online CSS Extractor

ソースを張り付けてボタンをクリックするだけで、簡単にCSSにすることができます。紹介するアプリが変わっても、ブックマークレットのバージョンアップなどでHTMLが変わらない限り、ずっと同じCSSが適用されます。

「AndroidHTML ブックマークレット」のstyle属性を削除する

style属性をCSSにすると、HTMLに記述されているstyle属性は不要になるので削除します。

HTMLに記述されているstyle属性を正規表現で削除するために「正規表現対応 文字列置換 Webアプリ / Webサービス」に行きます。

正規表現でstyle属性を削除

正規表現でstyle属性を削除

  1. 入力:「AndroidHTML ブックマークレット」のソースを張り付ける。
  2. 置換パターン:「style=(.+?)"」と入力。
  3. 置換文字列:何も入力しない。
  4. 「置換実行」ボタンを押下。
  5. 結果:置換されたソースが出力される。

上記操作を行うと、style属性が削除されたソースが結果に出力されます。

整形と調整

各style属性が削除された要素の末尾が「" >」となり、「"」と「>」の間に空白ができるので、style属性が削除されたソースを再度置換します。

style属性が削除されたソースを入力し、置換パターンに「" >」、置換文字列に「">」として置換を実行します。

実行結果を再度置換
style属性が削除されたソースを再度置換

上記の置換を行った後、下記のように実行結果で「class="favicon" src="」の間が空白が2つになっているはずなので、空白を1つにします。

上記を下記にようにします。

以上で完成となります。

整形したAndroidHTMLのソース(ポケモンGO)

上記が一連の流れを行った、「AndroidHTML ブックマークレット」(ポケモンGO)のソースとなります。

「AndroidHTML ブックマークレット」のCSS

当サイトで使用している「AndroidHTML ブックマークレット」のCSSを記載いたします。

PC用

モバイル用

CSSの参考になればと思います。

まとめ

  • 「AndroidHTML ブックマークレット」は紹介用のリンクURLを生成するブックマークレット。
  • 「林家次男: 開いた口が半開きになるブログ」さんがv3.1を開発。
  • 「AndroidHTML ブックマークレット」はブックマークバーに登録して使う。

「AndroidHTML ブックマークレット」はAndroidのアプリを紹介するのに、とてもよいブログパーツだと思います。気になった方は導入を考えてみてはいかがでしょうか

記事のタイトルとURLをコピーする

シェアする

フォローする

Androidアプリを紹介する「AndroidHTML ブックマークレット」を使ってみた
この記事をお届けした
PC ウェブログの最新ニュース情報を、
いいねしてチェックしよう!