スマホアプリの紹介をするのに使えるツール『アプリーチ』

HTML/CSS

2021.11.172021.11.18

皆さんは、お気に入りのものを見つけた時に、他の人に紹介しますか？

おすすめのアプリはありますか？

今回は、ブログでアプリを紹介するときに使えるWebツールをご紹介します。

contents

アプリーチ
例
利用手順
まとめ

アプリーチ

アプリーチ

iPhoneアプリとAndroidアプリを同時に検索し、統合されたブログパーツを作成出来ます。

iPhoneやAndroidにはたくさんのアプリがありますが、

同じ名前で似たアプリもあり、

これ！と伝えるのは意外と難しかったりします。

他の人に紹介する場合、App StoreやGoogle Playのリンクがあると、便利ですよね。

アプリーチは検索して見つけたアプリのアイコンやタイトル、価格、リンクなどをBox形式でブログに貼り付けることができるサービスです。

例

アプリーチを使うことで、次のリンク先のように、アプリへのリンクを入れることができます。

利用手順

Step1
検索欄に、紹介したいアプリの名前やキーワードを入力し、検索ボタンを押す。

検索ボタンを押すと、iPhoneとAndroidのアプリがそれぞれ1つずつ表示されます。

複数検索ボタンを押すと、iPhoneとAndroidのアプリがそれぞれ最大10個表示されます。

Step2

紹介したいアプリが検索結果欄に表示されたら、出力イメージ確認エリアで、情報を設定する。

設定項目は次の通り。

項目名	設定内容
表示リンク	両方/iPhone/Androidの3つから選択。両方を選択した時のみ、アイコン画像の選択項目が表示される。
タイトル	iPhone/Android/検索ワードの3つから選択。 iPhone、またはAndroidを選択した場合は、アプリ名、検索ワードを選択した場合は、検索に利用した文言が設定される。
アイコン画像	表示リンクで両方を選択した時に表示される。 iPhoneとAndroid、どちらのアイコンを表示させるかを選択する。
開発元	開発者名の表示/非表示を設定する。
価格	iPhoneとAndroid、どちらの価格を表示させるか、もしくは非表示にするかを設定する。
target=”_blank”の付与	リンククリック時の挙動として、別Window画面を開くか、同じWindow画面で開くかを設定する。「なし」を選択した場合、同じ画面開き、「あり」を選択した場合、別のWindow画面を開く。

複数検索ボタンから検索した場合、表示結果から紹介したいアプリをクリックすることで、出力イメージ確認エリアにそのアプリのみが表示され、設定ができるようになります。

Step3
リンク先のURLを設定する。

ASP経由でリンク先を表示させたい場合は、
対応するそれぞれのサービスのリンク発行ボタンをクリックします。

Step3

URLを取得し、ブログに貼り付ける。

新コードと旧コードで表示方法が異なります。
新コードの場合、コード内にスタイル定義がされておらず、CSSで設定されています。
新コードを利用される場合は、CSSの追加が必要となります。
CSSはカスタマイズすることも可能です。

コピーコピーしました


.appreach {
  text-align: left;
  padding: 10px;
  border: 1px solid #7C7C7C;
  overflow: hidden;
}
.appreach:after {
  content: "";
  display: block;
  clear: both;
}
.appreach p {
  margin: 0;
}
.appreach a:after {
  display: none;
}
.appreach__icon {
  float: left;
  border-radius: 10%;
  overflow: hidden;
  margin: 0 3% 0 0 !important;
  width: 25% !important;
  height: auto !important;
  max-width: 120px !important;
}
.appreach__detail {
  display: inline-block;
  font-size: 20px;
  line-height: 1.5;
  width: 72%;
  max-width: 72%;
}
.appreach__detail:after {
  content: "";
  display: block;
  clear: both;
}
.appreach__name {
  font-size: 16px;
  line-height: 1.5em !important;
  max-height: 3em;
  overflow: hidden;
}
.appreach__info {
  font-size: 12px !important;
}
.appreach__developper, .appreach__price {
  margin-right: 0.5em;
}
.appreach__posted a {
  margin-left: 0.5em;
}
.appreach__links {
  float: left;
  height: 40px;
  margin-top: 8px;
  white-space: nowrap;
}
.appreach__aslink img {
  margin-right: 10px;
  height: 40px;
  width: 135px;
}
.appreach__gplink img {
  height: 40px;
  width: 134.5px;
}
.appreach__star {
  position: relative;
  font-size: 14px !important;
  height: 1.5em;
  width: 5em;
}
.appreach__star__base {
  position: absolute;
  color: #737373;
}
.appreach__star__evaluate {
  position: absolute;
  color: #ffc107;
  overflow: hidden;
  white-space: nowrap;
}

無料で利用する場合は、”posted with アプリーチ”の表記が必要となります。
利用規約をご確認の上、ご利用ください。

まとめ

目的のアプリが見つかれば、簡単にリンクを貼り付けることができ、便利ですね！

アプリーチ

例

利用手順

まとめ

コメント