AndroidHTML v2.3をSimplicityで使うと右に寄る不具合を修正[アプリ紹介ブックマークレット]

このブログではAndroidアプリを少し紹介していて、今後はもっと紹介したいなと思っています。

Androidアプリを紹介するうえで便利なサービスがAndroidHTML v2.3というアプリ紹介ブックマークレットです。

これを使えば、アプリをかっこよくブログで紹介できるのですが、僕のブログをスマホで見ると右に寄って表示されていました。

今回はAndroidHTML v2.3の使い方と不具合の修正までを紹介します。

AndroidHTML v2.3とは？

AndroidHTML v2.3とはアプリを紹介するブックマークレットです。見てもらったほうが早いです。
これを使えば

ジャーン

こんな感じでアプリをかっこよく表示してれくるHTMLコードを一瞬で作ってくれますので、あとはブログに貼るだけです。なんて簡単。

AndroidHTML v2.3の使い方

使い方も簡単です。

ウェブブラウザに「お気に入り」とか「ブックマーク」があると思いますが、そこにAndroidHTML v2.3を登録しておいて、Google Play ストアで紹介したいアプリの画面を開いて、お気に入り（ブックマーク）からAndroidHTML v2.3を起動するだけです。そうすればHTMLコードが作成されるので表示したい部分に貼るだけです。

AndroidHTML v2.3の登録の仕方

登録も簡単です。

AndroidHTML ブックマークレットを更新・改善して version 2 にしたのでお知らせ。

↑こちらの記事に「AndroidHTML v2 ブックマークレット登録」というところのリンクをお気に入りにドラッグ＆ドロップするだけです。

もう少し具体的に説明します。僕の使っているWindows7で最新のブラウザであるInternet Explorer 11（IE11）で説明すると、右上に星マークでお気に入りを開くアイコンがあるので、そこを開きます。開くと一番上の「お気に入りに追加」の左に「お気に入りセンターをピン留め」があるのでクリックします。

そうするとお気に入りが右側から左側にいき、開きっぱなしになります。

次に上の記事のリンクをクリックしたまま、左側のお気に入りのところまで持っていき、そこで離します。

そうすると「AndroidHtml for Play v2」というお気に入りができます。これで登録完了です。

※クリックで拡大

AndroidHTML v2.3の使い方

上記でも説明しましたが、好きなAndroidアプリのページを開いたまま、「AndroidHtml for Play v2」というお気に入りをクリックします。

そうするとウィンドウが開きHTMLコードが作成されますので、コピーしてブログに貼るだけです。

不具合なのか？スマホで見ると右に寄ってる

ということで、AndroidHtml for Play v2を見つけてからは、今までのアプリ紹介の記事にHTMLコードを貼りなおしていました。

でもふとスマホで記事を見てみたら、ショックなことが…。

ガーン。何か右側に寄っている…。

AndroidHtml for Play v2がこういう仕様なのかもしれなかったので、AndroidHtml for Play v2を使っている先人たちのブログを見ましたが、右に寄らず、ちゃんと表示されています。

参考サイト：
・AndroidHtml for Play v2 – 日々の観察ブログ – FC2　FC2ブログ
・「gPlayHtml」が使えなくなったので「AndroidHtml for Play v2」　WordPress　テーマ：STINGER3
・「AndroidHTML v2」Androidアプリのブックマークレットのには超おすすめ …　WordPress　テーマ：STINGER3
・GooglePlayのリンクを作成できる「gPlayHTML」が使えなくなっちゃった …　WordPress　テーマ：STINGER5?

試しにWordPressテーマを「Twenty Fourteen」にしたらちゃんと表示されたので、「Simplicity」に何かあるのか、それとも僕のカスタマイズが下手くそなのか。どうして不具合が起きているかはわかりません。

Simplicityにはずいぶんお世話になっているし、わいひらさん（@MrYhira）にも迷惑はかけられないので、HTMLコードをいじることで何とかならないかやってみました。

HTMLコードを見てみる

AndroidHtml for Play v2で作成されるHTMLコードを見てみます。

<div class="bookmarklet androidhtml" style="margin:0;"><div style="margin-left:159px;" itemscope itemtype="http://schema.org/MobileApplication"><a href="https://play.google.com/store/apps/details?id=com.google.android.googlequicksearchbox" target="_blank" style="text-decoration:none;"><img class="cover-image" src="https://lh4.ggpht.com/DhjQ8DF-bF0azcf2YrOjCN0e1_0zN4cXSgwHuGmDiY97L46M1KTJJ5nDT38N0Pp4KJMM=w300" style="margin-left:-159px;float:left;width:150px;height:150px;border:none;" alt="Google" itemprop="image" /></a><a href="https://play.google.com/store/apps/details?id=com.google.android.googlequicksearchbox" target="_blank" style="text-decoration:none;" itemprop="url"><img src="http://www.android.com/images/icon_play-16.png" alt="Play icon" /> <strong style="font-size:1.2em;" itemprop="name">Google</strong></a><div class="supplier">制作: <span itemscope itemtype="http://schema.org/Organization"><span itemprop="name">Google Inc.</span></span></div><div class="price">価格: <span>無料</span></div><div class="review">平均評価: <span>4.4（合計 1,163,859 件）</span></div><meta itemprop="applicationCategory" content="ツール" /><meta itemprop="operatingSystem" content="端末により異なります" /><meta itemprop="screenshot" content="https://lh4.ggpht.com/3QjZisozU0AGJTuO3U8bTVIHkERkS03_LzU5E85-De0CxdV5tHVEphmdVXhgpY67Sw=h310" /><meta itemprop="softwareVersion" content="端末により異なります" /><small>posted by: <a target="_blank" href="http://hayashikejinan.com/?p=818">AndroidHTML v2.3</a></small></div></div><div style="clear: both"></div>

HTMLコードを見てみると、「margin-left:159px」、「margin-left:-159px」というところがありました。「margin-left」とは左側に隙間を開ける（右に寄せる）という意味です。一つ目は左側に隙間を159ピクセル開けて（右に寄せて）、2つ目は左側に-159ピクセル、つまり逆に右側に159ピクセル隙間を開ける（左に寄せる）、という意味です。

HTMLコードを見てみると、全体的に「margin-left:159px」が作用するようになっていて、画像にだけ「margin-left:-159px」が作用するようになっています。つまり、全体的に右に寄せるけど、画像だけ元の場所に戻す形をとっているようです。

しかし、ここが僕のブログではうまくいかないようです。

HTMLコードの手直し

HTMLコードを貼ったあと、自分で少し手直しする方法を取りました。

最初の「style=”margin-left:159px;”」というところをすべて消して、あとの「margin-left:-159px」を「margin-right:9px」に変えました。

これで、画像を右側に少し隙間を開けて、リンクや文字をその右に表示されます。通常のHTMLコードと同じように表示されるはずです。

ちゃんんと表示されましたー！！やったー！！

まとめ

少しの手直しでどうにかなったので、これからもAndroidHTML v2.3はHTMLコードを貼るたびに手直しながら使っていこうと思います。

にしてもどうして右に寄ってしまうのか？どこかのCSSが反映してしまっているのか、それとも完全レスポンシブ機能がこのようにさせてしまっているのか。僕にはすぐにはわかりません。

SimplicityとAndroidHTML v2.3を使っている方で、同じような現象が起こる方はいらっしゃいませんか？もし原因がわかるようでしたら教えていただけると嬉しいです。

それでは。