AppStoreアプリ紹介記事の画像リンクが消えた→原因と対策が判明

スポンサーリンク

ウォーキング記事を書いてる途中で気付いた

以前、私のウォーキング記事を読んで下さった方から、

「iPhoneアプリは何を使ってるんですか?」

との問い合わせがありました。

現在私が使用しているのは「Walkmeter GPS」というアプリ。

Walkmeter GPS ウォーキングストップウォッチ Walkmeter GPS ウォーキングストップウォッチ
価格: ¥450 (記事掲載時)
カテゴリ: ヘルスケア/フィットネス, ライフスタイル
App Storeで詳細を見る
Walkmeter GPS ウォーキングストップウォッチをダウンロード

【2012.10.20追記】
iPhoneアプリ紹介用ブックマークレットの変更に伴い、画像を使用しないように変更しています。

ウォーキングの距離や時間、平均ペースや実際に歩いたコースの地図など、多岐に渡って自動的に記録してくれる、本当に便利なアプリなのです。

このアプリを使い始めてから、前回とのペース比較も出来たり、後でブログ記事を書く際に細かいルートの確認も出来たりと、「歩いてる最中」も「歩いた後」もすごく助けられています。今やウォーキングでの必需品。

自分のペースや歩行時間などを把握して歩くことは大切ですから、「このアプリを使うと便利だし楽しいですよ」という気持ちを込めて、問い合わせを受けて以降は毎回このウォーキングアプリを記事の中で紹介しています。

iPhoneアプリは、パソコンの「iTunes」にある「iTunes Store」で購入するか、iPhoneやiPadの「App Store」アプリを経由して購入するのが一般的だと思います。

私のブログで紹介しているiPhoneアプリの紹介記事は、アプリなどの画像をクリックするとiTunesが起動し、見ている皆さんのアカウントでiPhoneアプリをダウンロードできる仕組みにしています。これはiPhoneアプリを紹介しているブログやサイトであればどこでも同じはず。

で、異変に気付いたのは昨日でした。

久々にウォーキング記事を書いたのですが、書いてる最中、プレビューで記事内容を確認していたら、iPhoneアプリを紹介している箇所で一部の画像が表示されていないことに気付きました。

プレビューだったし、最初はそれほど気にしていなかったんです。一時的な読み込み失敗かな、という程度で。

ところが、その後も何度かプレビューで確認したけど、相変わらず画像は表示されない。

決定的だったのは、過去に書いてアップ済みの既存記事を確認したとき。

その記事でもiPhoneアプリを紹介していたのですが、さっきのプレビューと全く同じ現象で、画像の一部が表示されていない。

screenshot_22

↑iPhoneアプリを紹介している全てのページが、こんな表示になってました。

ようやく、「これ、マズイぞ…」と、事の重大さに気付いた~。

もうすぐ書き上がるところまで来ていたウォーキングの記事をいったん中断し、原因を探ることにしました。

しかし、いつから消えていたんだろう…。今回ウォーキング記事のプレビューで気付かなかったら、ずっと知らずに放置するところでした。あんまりアプリ紹介の記事を書いているわけではないので。

調査開始から、原因が判明するまで

まず最初に調べようと思ったのは、iPhoneアプリをブログなどで紹介する際に、とても簡単な操作でiPhoneアプリのリンクを作成することが出来るブックマークレット「AppHtml」についてでした。

「AppHtml」でググろうとしたのですが、ふと頭の中で「!」が。

最近、どなたかが記事を書いてた記憶があるぞ…

Googleで検索する前に、Googleリーダーを開き、RSSで購読している記事の中に「AppHtml」関連の記事がないかを探ってみました。

やっぱり、ありました。3秒で見つかった。春友さんのブログでした。

http://harutomo-ryu.com/archives/2012-06-08/141426.html

最近RSSリーダーをチェックする時間がそれほど取れなくて、購読している各ブログの記事タイトルだけ眺めて終わっちゃう日もあるのですが、その際に春友さんの記事タイトルが脳裏に焼き付いていました。

ただ、何に対しての記事なのかは中身を読んでいなかったこともあり予想できていませんでした。ひとまず「AppHtml」という単語を覚えていたおかげで、短時間で解決への糸口が見つかった予感。

春友さんの記事を読み、その中で紹介されていた以下の記事も拝見しました。

http://daisukeblog.com/?p=1814

代助のブログ」さんの記事中で、画像が表示されなくなった原因が書かれていました。引用します。

確認してみたところ、Apple側の各アイコン画像の置き場所が変わっているようです。

画像の置き場所が変わってしまう、なんてことがいろんなサービスで実施されちゃうと怖いですよね~。アマゾンなどの大手が格納ディレクトリを変更したら大騒ぎになるかも。Webサービス使ってたら大丈夫なのかな。まあそれはいいや。

対策その1:ブックマークレットを変更する

さて、原因は分かりました。次は対策。

まずはブックマークレットをどうにか変更しないといけない。

しかし、心配無用でした。「代助のブログ」さんの記事中で、ブックマークレット「AppHtml」の作成者、@hiro45jp さんが速攻で修正完了された、との記述がありました。

ということで、今まで使っていたブックマークレットを削除し、新しくブックマークレットを作り直すことに。

まず、「Bookmarkletリンク集」を開きます。

※「Bookmarkletリンク集」は現在リンク切れとなっています。

screenshot_24

↑初期画面で「AppHtmlメーカー」をクリック。

screenshot_26

↑上のような画面が表示されますので、幾つか設定を変更します。

私がいつも設定している内容で説明しますね。私が設定を変更する箇所は3つだけ。

screenshot_28

↑「検索対象」は、私はiPhoneアプリでしか使いませんので、ここは初期値の「iPhone App」のまま変更しません。

変更1点目。ブックマークレットの名前ですが、特にブックマークレットをたくさん使ってる人は、後で「どれがどの機能だったっけ?」とPCの前で迷子になってもいけませんので、分かりやすい名前にしておきます。

私の場合は複数のサイズでiPhoneアプリを紹介することがあるので、数パターンのブックマークレットを作っています。ここでは中サイズ専用ということで「AppHtml中」と名付けました。

その下の「ピクセルと拡大率」は、良く理解していないので初期値のまんま使ってます。

screenshot_29

↑変更2点目。ここが最も大切です。初期値で既にIDがセットされていますが、リンクシェアにて「リンクシェアID」を取得済みの方は、必ずここを自分のIDに変更しなければなりません。変更しないと、どうなるかはお分かりですね?

「リンクシェアID」は「サイトID」と混同しやすく、間違いやすいのでご注意ください。

ブックマークレット作成ページにも補足されていますが、なちこさん(@nashiko_)のブログにリンクシェアIDの確認方法がとても分かりやすく解説されています。私も以前、こちらのページを拝見するまで「サイトID」のことだと完全に勘違いしていました。

http://blog.goo.ne.jp/spanske_stol/e/b13a70f9eed0c6aa21395c4a02b98eb4

設定の解説に戻ります。リンクシェアID欄の下にある「出力方法」は、ブックマークレットで作成したiPhoneアプリの紹介記事を最初にどう表示するかという指定です。私はプレビュー表示させてるので、ここも設定は変更しません。

screenshot_30

↑変更の3点目は書式テンプレート。リストの中から「自分が表示させたいテンプレート」を指定するだけでOKです。私は中サイズを表示させるので、「中アイコン表示」を指定します。

以上で私の設定は完了。一番下にある「Bookmarkletを生成する」ボタンをクリックすると、自分専用のブックマークレットが表示されます。

screenshot_31

↑ボタンの下にブックマークレット(私の場合は「AppHtml中」という名前)が生成されました。これをブックマークレットの保存位置にドラッグ&ドロップすれば作業完了です。

作成者の@hiro45jp さんが早急に対応して下さったおかげで、現在はブックマークレットを使って記事を生成しても画像は正常に表示されます。ありがたい。

参考までに、様々な書式テンプレートで実際にどのようなアプリ紹介記事が生成されるか、そのサンプルは作成者である@hiro45jp さんのブログで公開されています。

ブログ中の画像が表示されてない部分もありますが、それは今回の問題と全く同じ現象ですので、おそらくブログ記事の修正が追い付いていないだけだと思われます。ブックマーク自体は既に修正完了されてますのでご安心ください。

http://iphone-diary.com/?p=10182

対策その2:過去の全記事も一括でまとめて修正できちゃう

最新の紹介記事はこれでヨシとして、問題なのは「今まで書いてきたiPhoneアプリの紹介記事」をどうするか。画像が全部消えたまんまになってますもんね。

これも「代助のブログ」さんの記事中で、対応策がキチンと書かれています。

http://nori510.com/archives/10803

@nori510 さんのブログで、「Search Regex」というプラグインの詳しい解説記事が紹介されていました。

これがあれば、古いアドレスから新しいアドレスへ、一回の操作ですべてまとめて変更してくれます。修正が必要なページを1つ1つ開けて、修正箇所を探して、コツコツと変更、などという手間が一切かかりません。

ただ、残念ながらこれはWordPressのプラグインですので、WordPress専用での対応方法となります。他のブログの方、ごめんなさい。

解説に戻ります。WordPress管理画面で「ツール」>「Search Regex」をクリックすると、変更画面が表示されます。

screenshot_32

↑変更前の文字列(今回だと「古いアドレス」)を上に、変更後の文字列(新しいアドレス)を下に入力し、「Replace&Save」ボタンをクリックすると、該当する記事がすべて一括置換されます。

念のため、処理する前にWordPressのバックアップを取っておいた方がいいと思います。私はバックアップするのを忘れちゃったのだけど~。

いきなり一括置換が不安な人は、左にある「Search」ボタンをクリックすると、置換対象となる記事が一覧で表示されますので、それを確認してから一括置換するのが安心しますね。

今回のアプリ紹介記事で消えてしまった画像の「古いアドレス」と「新しいアドレス」の一覧は、前述した「代助のブログ」さんの記事に全て解説されていました。引用させていただきますね。

iTunesで見る
(旧)http://r.mzstatic.com/htmlResources/2338/images/viewinitunes_jp.png
(新)http://s.mzstatic.com/htmlResources/E6C6/web-storefront/images/viewinitunes_jp.png

スター
(旧)http://r.mzstatic.com/htmlResources/63F7/images/rating_star.png
(新)http://s.mzstatic.com/htmlResources/E6C6/web-storefront/images/rating_star.png

スター(半分)
(旧)http://r.mzstatic.com/htmlResources/63F7/images/rating_star_half.png
(新)http://s.mzstatic.com/htmlResources/E6C6/web-storefront/images/rating_star_half.png

私は「iTunesで見る」「★の画像」「★半分の画像」の3つしか使用していないので、3回の修正作業だけで済みました。他の画像、「ゲームセンター」や「ユニバーサル対応アプリ」の画像も表示されている方は、「代助のブログ」さんの記事に新URLが記載されていますので参照されて下さい。

このプラグインがあれば、たとえば特定のデザインをまとめて変更したい時に、今までずっと使ってたHTMLのクラスなどを一括置換して、全記事まとめてデザイン変更なんてことも実現できちゃいますね。これスゴイわ。

screenshot_23

↑というわけで、一括置換も無事成功し、画像が消えてしまった過去記事も再び画像が表示されるようになりました。良かった良かった。

大変貴重な記事を提供して下さった春友さん(@spring_friends)、「代助のブログ」さん、ブックマークツール作成者の@hiro45jp さん、リンクシェアID解説の@nashiko_ さん、素晴らしいプラグインを紹介して下さった@nori510 さん、皆さんに心からの敬意と感謝を込めて。

本当に助かりました。ありがとうございました。
 

スポンサーリンク
この記事がお気に召したら
「いいね!」をお願いします!
「りくまろぐ」の最新情報を
Facebookにお届けします