以前利用していた、iPhoneアプリを生成するブログパーツの「ポチレバ」の画像がSSLに対応していないので悩んでいたところ、「アプリーチ」というブログパーツがSSLに対応しているという話を聞き、試しに使ってみることにしました。
使い方
アプリを検索してブログパーツを生成する
アプリーチの使い方は下記のようになります。
- アプリの名称を入力。
- 「検索」ボタンをクリック。
- アプリの検索結果が表示される。
- バナーボタンを両方、またはどちらか一方を表示する。
- アプリーチで生成されたソース。
- 「追加機能」ボタン。
- ソースを手動で変更した際にクリックするボタン。
- 最終的なブログパーツの表示。
5.で生成されたソースをファイル、CMSであればエディタに貼りつけると、8.で表示されるようなデザインでブラウザに表示されます。
追加機能
アプリーチには追加機能があり、「追加機能」ボタンをクリックして表示される各ボタンを選択すると、ブログパーツの表示を変えることが出来ます。
アプリの画像をiPhone側、またはAndroidで表示するのか、価格の有無などを選択することができます。アプリーチは基本的に入力してボタンをクリックするだけで、ブログパーツを生成することができるので操作は簡単です。
アプリーチで生成されるブログパーツをオリジナルのデザインにする準備
アプリーチで生成されたソースをそのまま貼り付けて使用してもよいのですが、できるだけ以前使用していた「ポチレバ」のデザインに近づける準備として、私は下記のようなことをしました。
ExtractCSSで「アプリーチ」のstyle属性をCSSにする
アプリーチはhtmlに直接スタイルが記述されているので、オリジナルのデザインにするために「extractCSS」でstyle属性をCSSにします。
- 「Type or Paste Your HTML:」アプリーチのソースを貼り付ける。
- 「Extract!」ボタンをクリックする。
- 「Extracted CSS:」CSSが生成される。
「Type or Paste Your HTML:」側にアプリーチで生成されたソースを貼り付け、「Extract!」ボタンをクリックします。そうすると「Extracted CSS:」側にCSSが生成されます。生成されたクラスなどのセレクタを元にオリジナルのスタイルを記述していきます。
iPentecで「アプリーチ」のstyle属性を削除する
style属性を元にCSSを生成すると、htmlに直接記述されているスタイルは不要になるので「iPentec」で削除します。
- 入力：「アプリーチ」のソースを張り付ける。
- 置換パターン：「
style=(.+?)"」と入力。 - 置換文字列：何も入力しない。
- 「置換実行」ボタンを押下。
- 結果：置換されたソースが出力される。
「iPentec」で上記の操作を行うと、htmlに直接記述されているスタイルは削除されます。
整形と調整
各style属性が削除された要素の末尾が「" >」となり、「"」と「>」の間に空白ができるので、style属性が削除されたソースを再度置換します。
style属性が削除されたソースを入力し、置換パターンに「" >」、置換文字列に「">」として置換を実行します。
上記の操作でアプリーチで生成されたhtmlソースが整形されました。
作成した「アプリーチ」用のCSS
私は下記のようにCSSを作成し、以前使用していた「ポチレバ」のデザインに近づけました。
PC用
/************************************
** アプリーチ
************************************/
#appreach-box {
margin: 20px auto;
padding: 25px 25px 18px;
border: double #CCC;
border: medium double #ccc;
border-radius: 5px;
font-size: 16px;
}
#appreach-box #appreach-image,
#appreach-box .appreach-info,
#appreach-box #appreach-itunes-link,
#appreach-box #appreach-gplay-link {
display: inline-block;
vertical-align: top;
}
#appreach-box .appreach-info {
margin-left: 20px;
}
#appreach-box #appreach-appname {
font-size: 20px;
font-weight: bold;
}
#appreach-box .appreach-powered {
font-size: 12px;
}
#appreach-box .appreach-links {
margin-top: 20px;
}
モバイル用
/************************************
** アプリーチ
************************************/
#appreach-box {
text-align: center;
}
#appreach-box .appreach-info {
margin: 20px 0 0 0;
}
デザインを当てたアプリーチの表示
最終的にデザインは下記のようになりました。
なぜ「アプリーチ」にしたか
ブログパーツの「アプリーチ」を採用した理由としては、下記にような理由が挙げられます。
- 画像がSSLに対応している。
- iPhoneとAndroidのアプリを同時に検索できる。
- iTunesとGoogle Playのバナーボタンを同時に生成することができる。
1.は当サイトをSSLにしたので、生成される画像がSSLに対応している必要がありました。
2.に関してはiPhoneアプリは「ポチレバ」、Androidアプリは「AndroidHTML」といったように別々のサイトでブログパーツを生成してたので、一度に検索して生成できる「アプリ－チ」はとても楽だと考えました。
3.に関しては今までは「ポチレバ(iPhoneアプリ)」と「AndroidHTML(Androidアプリ」でそれぞれのブログパーツを貼り付けていたので、ページの縦幅をどうしても取られていたのですが、「アプリーチ」の場合、バナーボタンとして一緒に表示させることにより、縦幅のスペースを節約することができました。また、一個のブログパーツとするので、管理も楽になります。
まとめ
- 「アプリーチ」はiPhoneとAndroidのアプリを同時に検索できる。
- iTunesとGoogle Playのバナーボタンを同時に生成することができる。
- 追加機能で、ある程度表示を変更することができる。
- ブログパーツを生成する際の操作は簡単。
- スタイル属性を削除してCSSにすると、オリジナルのデザインを適用することもできる。
- iPhoneとAndroidアプリを生成しても一個のブログパーツとするので、管理が楽。
「アプリーチ」はSSLに対応していたり、オリジナルのデザインを適用することができたりと、私が求める要望にしっかりと応えてくれるツールでした。
通常の操作のみならず、追加機能も簡単にパーツに反映することがで出来るので、「アプリーチ」はおすすめのツールです。気になった方は「アプリーチ」サイトの訪問をおすすめします。
コメント