スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

-----------------------------------

-----------------------------------
応援はこちらのクリックをお願いします。
にほんブログ村 IT技術ブログ iPhoneアプリ開発へ
にほんブログ村
にほんブログ村 IT技術ブログ Androidアプリ開発へ
にほんブログ村
--/--/--(--)
スポンサー広告

Twitterでつぶやくボタン・LINEで送るボタン・FaceBookでシェアするボタン・検索するボタンを簡単に設置する方法(Android/iOS/Webアプリ)

こちらの記事「7-3.Monaca開発(結果をつぶやくTwitterボタン)」がよく見られているようなので、各種SNSと連携するサンプルソースなどを、まとめてご紹介しますね。
本格的な連動は結構大変なのですが、ゲームの結果をつぶやくだけ、など簡単なものはすぐできます。


以前の記事では「Monacaで使える」、とご紹介しましたが、Monaca利用のハイブリッドアプリ開発の方法以外にも、WebViewという機能を使うことによって、通常のEclipseを使ったAndroidアプリ開発やXcodeを使ったiOSアプリ開発でも使用できる方法です。
もっと言うと、単なるhtmlタグ(html+javascript)なので単純なWebアプリやブラウザゲーム、WEBサイトや、場合によってはブログなどにも使えるものもあります(モノによります)。
ぜひご利用ください!


こういったSNSなどに公開したりシェアしたりするボタンはアプリの宣伝にもつながったり、ユーザさんが点数などを競いあったりすることで利用頻度が上がったりなど、いいことばかりですよね。


■Twitterでつぶやくボタン設置の例

<a href="javascript:var str = 'http://twitter.com/share?url=https://itunes.apple.com/jp/app/apple-store/idXXXXXXXXXX?mt=8&text='+ encodeURIComponent('つぶやきたい文章') + '&'; window.open(str, '_blank', 'location=yes');">
<img src='img/btn_tweet.png' border='0' /></a>

btn_tweet.pngの部分はボタン画像を自分で作るか、公式で配布している画像を使ってみてくださいね。
画像のボタンでなくテキストリンクにしたい場合はこうですね。

<a href="javascript:var str = 'http://twitter.com/share?url=https://itunes.apple.com/jp/app/apple-store/idXXXXXXXXXX?mt=8&text='+ encodeURIComponent('つぶやきたい文章') + '&'; window.open(str, '_blank', 'location=yes');">
結果をTwitterでつぶやく</a>

この例だとつぶやく文章のほか、iOSアプリのダウンロードURLを一緒につぶやく形ですね。
こうすることでTweetを見た人がこのアプリダウンロードしたい!と思ったときにすぐに使ってもらえます。
動きとしてはボタンをタップすると内部ブラウザが開き、ツイート画面が表示される感じです。

こんな感じ。
20151112004.png

Monaca開発の場合は、設定→Cordovaプラグイン→InAppBrowserをONにしておく必要があります。
こんな感じですね。
20151112001.png


■LINEで送るボタン設置の例

<a href="javascript:var str = 'line://msg/text/'+ encodeURIComponent('送りたい文章'); window.open(str, '_blank', 'location=yes');"><img src='img/btn_line.png' border='0' /></a>


これはスマートフォンやタブレット限定かもしれません。LINEアプリがインストールされている端末の場合、LINEが起動され、送りたい相手(もしくはタイムライン投稿)を選ぶ画面になります。
送り先を選ぶと、トーク画面の文章を打ち込む部分に文字が設定された状態になるので、送信ボタンを押すことで送信されます。

LINEがインストールされていない場合は、やってみていませんが、たぶんブラウザが起動してつなぎ先が見つからない状態で止まると思います。

■FaceBookでシェアするボタン設置の例

<a href="javascript:var str = 'https://www.facebook.com/sharer/sharer.php?u='+ encodeURIComponent('シェアしたいURL'); window.open(str, '_blank', 'location=yes');"><img src='img/btn_facebook.png' border='0' /></a>



以上、各種SNSと連携して、ゲームの得点や診断結果、およびアプリのダウンロードURLなどをつぶやくような想定でご紹介しました。
同様にブラウザを開く機能を応用して、検索するボタンなども作ることができます。

たとえば「http://search.yahoo.co.jp/search?p=aaaa」というURLに接続すると「aaaa」という単語をヤフー検索した画面が開きますよね?
Google検索だとこうなります→「https://www.google.co.jp/search?q=aaaa」


各種有名サイトで実際に検索してみて、そのURLをじーっと眺めてもらって、どの部分が検索したい単語かがわかれば、基本的にどんなサイトにも応用が利くかと思います。(サイト側の仕様が急に変われば使えなくなりますが)
自分の作ったWEBサイトやブログとの連携などにも使えそうですよね。


■googleで検索するボタン設置の例

<a href="javascript:var str = 'https://www.google.co.jp/search?q='+ encodeURIComponent('検索したい単語など'); window.open(str, '_blank', 'location=yes');">
<img src='img/btn_google.png' border='0' /></a>


■yahooで検索するボタン設置の例

<a href="javascript:var str = 'http://search.yahoo.co.jp/search?p='+ encodeURIComponent('検索したい単語など'); window.open(str, '_blank', 'location=yes');">
<img src='img/btn_yahoo.png' border='0' /></a>



さて、これを応用するとレシピ検索アプリなんかも簡単にできちゃいます!

iPhoneアプリの例なんですけど、
冷凍できる・できない事典(iPhone版)」が何度もAppleの審査に落ちたんですが、落ちた理由の一つに「シンプルすぎる!もっと何度も起動したくなるように機能を足してください!」と言われたことがありました。
これですね。
-----------------------------------
2.12 – Apps that are not very useful, unique, are simply web sites bundled as Apps, or do not provide any lasting entertainment value may be rejected
役に立たないアプリや、単純なウェブサイトをバンドルしただけのアプリや、継続的な楽しみを与えないアプリはリジェクト。
-----------------------------------

「役に立たないとは失礼な!ブログ版は大人気ですけど?っつーか、何度も起動したくなるような機能って例えば何よ?」と非常に失礼な文句をGoogle翻訳を100%活用した微妙な英語で言ってみたところ、アメリカ(?)から電話がかかってきました。

こっちは謎英語でいちゃもんつけたのに向こうのかたはとってもやさしくて、「例えばこんな機能はどうかしら?」とご親切にもいくつか提案していただきまして、その中で「レシピと連動とかどうかしら?うふふ」ってのがあったんですよね。

下記のようなボタンをたくさん付けたところ(他にも変えたんですが、おそらくこれが決め手となって)、無事審査に通りました~!

■クックバッドで検索するボタン設置の例

<a href="javascript:var str = 'http://cookpad.com/search/'+ encodeURIComponent('検索したい料理名など'); window.open(str, '_blank', 'location=yes');"><img src='img/btn_cookpad.png' border='0' /></a>


20151112002.png


■ボタンをとにかくいっぱいつけただけで、「リジェクト理由2.12」はクリアすることもあるかも?の例

そう、「冷凍できる・できない事典(iPhone版)」の冷凍できるか調べた後の画面、こうなりました。
レシピ検索機能がつきました!やたらシェアボタン付けました!ちょっと笑っちゃう感じに!

20151112003.png

でもまあ、審査通ったし!

で、これを応用したら、レシピ検索に限らず、いろんな大手サイトと連動できそうですよね。
みなさんのアプリにも何か大手サイトにリンクするボタンを付けてみたら楽しいかも!
「リジェクト理由2.12」で苦戦している人はこういう簡単な対応で行ける可能性もあるので参考にしてみてくださいね。
スポンサーサイト

-----------------------------------

-----------------------------------
応援はこちらのクリックをお願いします。
にほんブログ村 IT技術ブログ iPhoneアプリ開発へ
にほんブログ村
にほんブログ村 IT技術ブログ Androidアプリ開発へ
にほんブログ村
















管理者にだけ表示を許可する


| ホーム |
Page Top↑
▲ Page Top
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。