はてなブログで「スマートフォンアプリを紹介する」方法

f:id:banguard9383:20120116114928j:plain
iPhoneのアプリをブログで紹介したいなと思うことって、非常に多いと思います。
自分だけのおすすめアプリを誰もがひとつは持っているのではないでしょうか？僕も「こっそりブログで紹介したい」と思ったのですが、そこで困ったのがアプリの紹介方法です。
「アプリの画像ってどうやってゲットするの？」、「どうやってiTunesに飛ばすの？」などなど、気になることが盛りだくさんでした。
他のブログでのアプリ紹介記事なども参考にしながら、アプリを紹介する際の最適な内容について考えてみたいと思います。

目指す紹介内容

アプリ紹介は、こんな感じだと奇麗なのかなと思います。

（サンプル）iBooks

Apple純正の書籍ビュワーであり、高機能なPDF閲覧機能も併せ持つアプリです。iBookstoreから書籍をダウンロードできる唯一のアプリであり、PDFを取込むことも可能です。購入した書籍や取込んだPDFを、Appleならではの美しい書籍に並べて閲覧ができます！iBookstoreの取扱い書籍がすべて洋書なのが残念ですが...今後に期待しましょう。

iBooks　1.5

f:id:banguard9383:20120116103451p:plain:left 価格：無料
カテゴリ: ブック
サイズ : 20.7 MB
開発: Apple

とりあえず、こんな感じが一般的ですよね？それでは、このサンプルを作った方法をまとめてみます。

スマートフォンアプリで紹介したい内容を考える

スマートフォンアプリの紹介で必須なのは、「アプリの内容とおすすめする理由」です。これは言わずもがななので、今回は以下イメージの部分について触れたいと思います。

まず、アプリについて記載する内容をあげてみました。

　・アプリタイトル
　・アイコン画像
　・値段
　・開発元
　・バージョン
　・App Storeへのリンク

基本はiTunesからのコピペで問題ないのですが、アイコン画像とApp Storeへのリンクが難関でした。

iPhoneアプリの画像を貼付ける

iPhoneアプリの画像は、App Storeからはコピーできません。またMacのファインダー>アプリケーションで情報を見てもコピーできませんでした。
「いったいどうするんだ！？」と悶絶していたところ、下記ブログ記事を見つけました。

・MacでiPhoneアプリのアイコン画像をブログなんかに貼り付ける方法メモ（Biiingo!!）
＊大変助かりました、ありがとうございました。

はてなブログの記事サイズでは、アイコンサイズは100×100（ピクセル）がちょうど奇麗に見た目に収まるサイズだと思います。

App Storeへのリンク

WebでiTunesを見てみると、App Storeへのリンクは
f:id:banguard9383:20120116111135p:plain
っていう格好良いアイコンが付いてますね。
「これは真似たいぞ」と思ったのですが、はてなブログで画像にリンクを貼る方法が分からないのです。はてな記法のページもだいぶ見たのですが、はてなブログでは対応していないようで…

泣く泣く文字にリンクを貼ることにしようかと思っていましたが、簡単なHTMLを書くことで解決できました。
上記サンプルのiBookへのリンクは、こんな感じで書いています。
（正しいんですかね？分かりませんが、ちゃんと表示されたので良しとしています）

<A href="リンク先のURL">
  <IMG src="リンクを指定したい画像のURL">
</A>

「リンクを指定したい画像のURL」というのが出てきましたが、ここで注意が必要です。

はてなブログで画像のURLを確認するには？

はてなブログでは、簡単に画像を貼付けることができます。ただし、はてな記法モードで貼付けた際に表示される「f:id:はてなID:20xxxxxxxxxxxxx:plain」という文字列は、画像のURLでは無いようです。
画像のURLは、一度記法モードを「はてな記法モード」から「見たままモード」に切替え、HTML編集タブを見ることで確認できます。