月別: 2014年4月

アプリがインストールされていないときの処理

URLスキームは便利だけど
アプリがインストールされていないと
エラーになる

エラーはページが存在しませんというもの

このため、アプリがインストールされていないときには
アプリのダウンロードページに遷移するようにする

ちなみに
独自urlスキーム 作成　Android
で調べてみたけど
ソーシャルメディアアプリだけでなく
自作アプリでも、URLスキームの利用は可能

以下は、Twitterアプリがインストールされてないときには
ダウンロードページへ遷移する処理

<a href="twitter-btn">タイムラインの表示</a>

<iframe frameborder="1" scrolling="auto" id="twitter-launcher" name="twitter-launcher"></iframe>

でiframeの表示を overflow:hidden;で隠し
そのiframeのsrcでURLスキームリンクを指定する
location.href
ではなく
iframe のsrcなのは
必要なアプリがインストールされていないときにJavascriptで
アプリのダウンロードページへ遷移するため

また iframe の src による画面遷移の場合
親ページのJavascriptが続行して実行される

つまり、アプリがインストールされているなら iframeで処理して
アプリがインストールされていないときには
location.hrefを使い、ダウンロードページへリンクする

Javascriptで
iframe の srcで外部ドメインのサイトを指定しても
セキュリティーにより遷移できない

Androidのブラウザーのときの処理は

if(/(Android)/.test(navigator.userAgent)){
DOWNLOAD_URL=" market://search?q=pname:com.twitter.android";
}

$(document).on("pageinit","#top",function(e){
$(this).on("click","#twitter-btn",function(e){
$("#twitter-launcher").attr('src',"twitter://timeline");
setTimeout(function(){

location.href=DOWNLOAD_URL;
},100);

});
});

market://search?q=pname:com.twitter.android
は
AndroidのTwitterアプリのダウンロードページ
もし、同じように自作アプリでやるなら
そのアプリのダウンロードページのURLにする

$("#twitter-launcher").attr('src',"twitter://timeline");

で、iframeのsrcを追加している
これで、タイムラインを表示

setTimeout(function(){

location.href=DOWNLOAD_URL;
},100);

で、タイムアウトしたら
ダウンロードページへリンクするように設定している

URLスキームのパラメーター

URLスキームを使えば、リンクをはるだけで簡単にソーシャルメディアアプリと連携できる

ただし、そのアプリがインストールされていないとだめ

TwitterのURLスキームのパラメーターは

twitter://timeline
タイムラインの表示

twitter://mentions
@自ユーザー名を含むツイートの表示
つまり自分のユーザー名入りでツイートを表示

twitter://post?message=メッセージ
指定した文字列を初期値としてツイートダイアログをひらく
初期値なので変更可能

twitter://search?query=検索文字列
指定した文字列を含むツイートの検索

次に、facebookのURLスキームのパラメーター

fb://profile
自分のプロフィールを開く

fb://friends
自分の友達リストを開く

fb://events
イベントリストを開く

fb://albums
フォトアルバムを開く

URLスキームでほかのソーシャルメディアアプリと連携

URLスキームは
http
ftp
mailto
などのURLの先頭の文字列のこと

ブラウザーはリンクをクリックしたときに
URLスキームの種類により動作が変わる

httpなら普通に画面遷移するけど
mailtoならメーラーが起動する

スマートフォンでは、アプリ間連携をサポートするため
ネイティブアプリに独自URLスキームを割り当てる仕組みが用意されている

Twitterの公式アプリなら
twitter://
から始まるURLスキームを提供している

ブラウザーは
アプリ特有のURLスキームが指定されると
そのアプリがインストールされているなら
アプリを起動する処理をする

さらに、URLスキームを使うと
アプリ起動だけでなく、
アプリ特有のパラメーターを指定することで
アプリ間での情報の受け渡しができるようになる

URLスキームは、リンクとして指定するだけでブラウザーが判断してくれるので
タイムラインを表示するリンクボタンを作るなら

<a href="twitter://timeline">Twitterタイムライン閲覧</a>

で

Twitterタイムライン閲覧
というように、タイムライン表示のボタンができる

また、クエリを渡せば、Twitterアプリで
ツイートも可能

<a href=&quot;twitter://post?message= Tweets from the Web application &quot; data-role=&quot;button&quot;&gt;Twitterアプリでツイート&lt;/a&gt;

とすれば

Twitterアプリでツイート
でツイートできる

検索関数のイベントとマッピング

$(document).on("pageinit","#top",function(e){
$(this).on("keypress","#search-tag",function(e){
if(e.keyCode == $.mobile.keyCode.ENTER){
var hashTag = $("#search-tag").val();
if("" == hashTag) return;

searchTweet(hashTag);
}
});

});

#topは

<div data-role="page" id="top">
</div>

を示す

if(e.keyCode == $.mobile.keyCode.ENTER)

で、キーコードがEnter
つまり、Enterを押したときの判定をしている

var hashTag = $("#search-tag").val();

で、検索欄で入力した内容を
hashTag へ代入

if("" == hashTag) return;

で、入力フォームが空なら何もしないようにしている

ソーシャルメディアAPIと
jQueryMobileを使うことで
サーバーなしでもWebアプリを作成できる

ツイート検索のJavascript

Javascriptでは、まず検索のための関数を作成

この中で、Twitter Search APIを使う

この関数の処理は
引数として受けとった文字列を
Twitter Search APIへ渡して
json形式のレスポンスをHTMLへ整形

そして、これをdivで指定した領域へ
リスト形式にして追加する

という流れになる

まず、前回の検索結果を削除する必要があるため

$("#tweet ul").remove();

で削除

これは、アプリを使うのは1回だけではないため

次に、

$("#tweet").append('<ul data-role="listview" data-inset="true"></ul>');

で、動的にul要素を作成
これがツイート検索結果を表示するリスト領域になる

data-inset=”true”
は、余白を付ける設定
http://billboardtop100.net/2011/02/jquery-mobile-lists.html
を参考にするとわかりやすい

ここまでできたら
$.ajax()
を使いTwitter Search APIを呼び出す
URLには # をつけるけど
これは、エンコードされるので

%23

になる

これでハッシュタグをつけてパラメーターを指定する

レスポンスはresで受け取って
res.results の各要素へ対してkeyでアクセスする

res.results[key]から
ツイートしたユーザーである from_user
そして、そのユーザーのプロフィール画像になるprofile_image_uri
そして、ツイート内容の text を取得し
それぞれHTML要素へ整形する

整形しないとjson形式なので使えない

そして、整形したHTML要素を
リストのli要素で囲って
これを動的に追加しておいたul要素へ追加する

ul要素へいろいろ追加した後に、
listviewを呼び出して、jQueryMobileのスタイルを適用すれば出来上がり

この$.ajax() の中身のソースは

url : "http://search.twitter.com/search.json?=%23"+ hashTag,
dataType:"json",
success:function(res){
$.each(res.results, function(key){
var html = '<img style="width:80px;" height="80px;" src="'+
res.results[key].profile_image_url +
'"/>';
html += "<h4>"+res.results[key].from_user+"</h4>";
html += '<p style="white-space : normal;"></p>';

$("#tweet ul").append('<li id="tweets' + key + '">'+ html +"</li>");

$("#tweets" + key + " p").text(res.results[key].text);

});
$("#tweet ul").listview();

}

この中で、まず
$(“#tweet ul”).append(‘

‘+html+”

“);
として
要素とスタイルの設定だけしていて

その後、
$(“#tweets” + key + ” p”).text(res.results[key].text);
で内容を追加している

これは、ツイート内容には
htmlの特殊文字の< とか > がふくまれるから
これをエスケープなしで表示するとHTMLレイアウトが崩れる

似たようなものとして
mysql でのデータベース入力フォームでのエスケープ処理がある

エスケープ処理には
$.text()を使う

本来は、要素内の文字列取得、変更に使うけど
同時にHTMLの特殊文字のエスケープ機能もあるので
ほかでも使える

つまり、最初に$.append()で要素とスタイルを指定

$.text()でエスケープして内容を追加している