月別: 2014年3月

ハッシュタグでツイート検索

Twitter Search APIを使うことで
検索フォームに入力したハッシュタグでツイート検索して
一覧表示する

また、ツイートは内容以外に
ツイートしたユーザーとプロフィール画像も表示する

さらに、利便性向上のため
検索フォームでは、入力フォーム内で
Enterが押されたら検索開始するようにする

index.htmlで
まずhead要素の中で
jquery.mobile-1.1.0.min.css
jquery-1.7.1.min.js
jquery.mobile-1.1.0.min.js
そして、処理するJavascriptの
searchtwitter.js
を読み込む

<div data-role="fieldcontain">
<label for="search">ハッシュタグ:</label> # <input type="search" name="search" id="search-tag" value="android"/>
</div>

これで、ハッシュタグで検索する入力フォームを作成

input で type=”search” にすると
検索アイコンのついた入力フォームになる

<div data-role="fieldcontain">
</div>

で囲んでいるのは
レイアウトが崩れるのを防ぐため

ツイート一覧表示の領域は

<div id="tweet">
</div>

として、divで表示領域を指定する

これで画面はできたので
処理はJavascriptで行う

android から web api 利用

http://codezine.jp/article/detail/7169?p=2
を参考に
流れを復習

HTTP 通信を get か post で行って

結果データの json や xml を解析

そして結果を 画面描画する

という流れ

android では http 通信など待ち時間が長いのは
通常はバックグランド、つまり非同期で行う
なので
メインスレッドとは別スレッドを作成する

メインスレッドは主にUI処理
つまり画面とかの描画処理
これで時間がかかる処理をしていると操作性が悪くなる

なので、別スレッドで非同期処理

イメージとしては
別の人に裏方を頼んで、お客さん対応みたいなかんじ

android のUI描画処理はシングルスレッド設計
つまり1人でやるようになっているので
別のスレッドから直接UI操作はできない

ハンドルが１つの車で隣から操作すると事故になるように
非同期スレッドからUI操作をするとエラーになる

メインスレッド＝運転手
バックグランドなどのスレッド＝助手席
というかんじ

web storage について

web storage はブラウザにデータを保存する仕組み

cookie よりも大きいデータを保存したりできる

必要なツールは
html から js 読み込む

そして chrome を使う

注意点として古いブラウザでは使えないことがある
http://caniuse.com/#search=web%20storage
で調べることができるので
案件などででたときにはこれを参考に

実験は vagrant で行う

行うのは
mkdir webstorage_lessons
で作りここで行う

まず index.html を作成
emmet-vim
を使い
html:5
でCtrl +y ,
で簡単に雛形をつくれるので
あとは
body に　hello を追記

今回は　apache ではなく
python の simpleHTTPServer を立ち上げる

python -m SimpleHTTPServer
で立ち上げる

これは 8000　番ポートになるので
ifconfig でIPを調べて
サーバーIP:8000
へブラウザでアクセスする

これで hello と表示されればOK

ソーシャルメディアAPI 活用

TwitterのAPIを使うことで
指定した条件にマッチするツイート一覧や
人気トピック一覧かどが取得できる

また、facebook API を使うことで
人に関連する物に紐付く情報を得られる

これらのAPIは、レスポンスにJSON形式をサポートしていることが多いため
Javascriptで処理しやすい

今回は Twitter Search APIをつかう

このAPIは、簡単なクエリを使い
Twitterに投稿されたツイートを検索するAPI

レスポンス形式は
Javascriptで取得しやすいjson
RSSなどに対応するatom
に対応している

使うときには
http://search.twitter.com/search.json?q=検索するツイート

となる

もし、jquery.を調べるなら
http://search.twitter.com/search.json?q=jquery

となる

このURLをブラウザーで表示すると
レスポンス結果をみることができる

この結果には、ツイート以外に
検索された文字列
ツイート一覧ページのナンバー
などもふくまれる

JSONなので、
キーと値のペアになっている

そして、ツイート一覧は
resultsキーの中に入っている

このresultsはリスト構造になっていて
それぞれの要素がツイート一つ一つに対応する

ツイートの主な要素としては
created_at
ツイートした日時

from_user
ツイートしたユーザー

profile_image_url
ツイートしたユーザーのプロフィール画像のURL

text
ツイート内容

なお、Twitter Search API の開発者向けサイトにはもっと詳しい情報が
載っている

https://dev.twitter.com/docs/api/1.1/get/search/tweets
を参考に

ソーシャルメディアボタンの配置場所のカスタマイズ

Twitter Facebookのソーシャルメディアボタンは
公式jsファイルが読み込まれると
aタグや div タグが
iframeタグに置き換わる

このため、元のタグに独自スタイルや
class=””の定義をしても
そのまま保持されず、無視されてしまう

このため、ソーシャルメディアボタンを
任意の場所へ配置するには
aタグやdivタグの周りに
スタイル設定用のタグで囲むことで
任意の場所へソーシャルメディアボタンを配置できるようになる

<span style="position: absolute; width:80px; right:0px; top:.7em">
<a href="https://twitter.com/share" class="twitter-share-button" data-role="tweet テスト" data-lang="ja" data-count="none">Tweet</a>
</span>

というようになる

Facebookいいねボタンの追加

追加するための必要な要素は
https://developers.facebook.com/docs/plugins/like-button/
で作成できる

URL to like にサイトのURL
Send Button のチェックをはずし

Layout Styleが
standardだと解説がでてくるので
button_count
へ変更

widthへは任意のピクセルを入力

そして、get codeを押せば
コードの種類を選択できるので
IFRAMEを選択すれば作成される

作成されたコードを貼り付ければ
いいねボタンが設置される

ただし、これだとページごとに
コードを張ることになり面倒

あと、環境によってはURLがまだ未定ということもある

このためJavascriptで
画面初期表示のときに
iframe要素を書き換え、いいねボタンを設置するページのURLを動的に設定する

<iframe class="like-btn" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px;" allowTransparency="true"></iframe>

というように、もとのコードから
src=”” の部分を削除
変わりに
class=”like-btn”
を追加して書き換え対象にする

そして、Javascriptで
pageshowのタイミングで
class=”like-btn”を探し
.attr() で src=”” を設定する

.attr()については
http://semooh.jp/jquery/api/attributes/attr/properties/
を参考に

location.href は表示されているページのURLになるけど
特殊文字があるため
encodeURIComponent()
でURLをエンコードする

$(document).on("pageshow",'[data-role=page],function(e){

var src = '//www.facebook.com/plugins/like.php?href=';
src += encodeURIComponent(location.href);
src += '&send=false&layout=button_count&width=200&show_faces=true&action=like&colorscheme=light&height=21';
$('.like-btn').attr('src':src);
});

ソーシャルメディアボタンの追加

まず、Twitterのツイートボタンの追加

追加するための必要なタグは
https://about.twitter.com/resources/buttons
で作成可能

ただし、モバイルからでは無理て
PCから行う

生成されたaタグを張れば
tweetリンクができる

ただし、これだとリンクだけなので
Twitter公式の外部jsファイルを読み込むことで
画像つきのtweetボタンになる

Twitter公式の外部jsファイルは
widgets.js

これを読み込むには

$(document).on("pagebeforecreate",'[data-role=pager]',function(e){
$.ajaxSetup(cache:true);
$.getScript('http://platform.twitter.com/widgets.js');
$.ajaxSetup(cache:false);
});

これは、Twitter公式の外部jsファイルの
widgets.jsを
pagebeforecreateイベントの発生時に
$.getScript()で読み込んでいる

widgets.jsの処理は
HTMLの要素が読み込まれる前に実行する必要があるため
pagebeforecreateイベントで実行している

本来、外部jsは、src を指定したscriptをheadに埋め込むけど
jQueryMobileでは、画面遷移後のページでは
head要素が読み込まれない

もし、ページが1つだけなら
src付きのscriptでいいけど
複数の画面でtweetボタンを付けることで使っているなら
pagebeforecreateイベントで
意図的にjsファイルを読み込む必要がある

$.ajaxSetup(cache:true);
$.ajaxSetup(cache:false);
で一時的にjsファイルのキャッシュ機能を有効化している

デフォルトでは
$.getScript()
のキャッシュ機能は無効化されているけど
これだとページ遷移が発生するたびにTwitterのJavascriptを読みに行ってしまう
つまり、通信に時間がかかる

このため$.getScript()のキャッシュ機能を有効化することで
すでにJavascriptを読み込んでいるなら
Webサイトへアクセスせずに
キャッシュされたJavascriptを使う

こうすれば通信量削減もできる

ネットワーク接続状況による処理の切り替え

スマホでは、移動しているのてネットワークがオフラインになることもよくある

ネットにつながっているなら
ローカルストレージにキャッシュして

ネットがつながったらデータ送信
というようにするなら

if(navigator.onLine){
  //オンラインのときの処理
}else{ 
  //オフラインのときの処理
}

というようにする

Webアプリの更新について

動的に内容が変更されるWebアプリで
アプリケーションキャッシュを使うと
最初に読み込んだ画面を、
ずっとキャッシュし続けるため
更新されなくなってしまう
このため、動的にHTMLが変更かれる箇所では
アプリケーションキャッシュは使わない

また、アプリケーションキャッシュとして読み込んだファイルは
ブラウザーから明示的に更新をチェックしないと
キャッシュが更新されないことがある

このため、更新チェックのJavascriptなどを使わないと
更新できないWebアプリになる

このため、
キャッシュファイルの更新と
アプリケーションの更新をする必要がある

まず、キャッシュファイルの更新を検知してWebアプリを更新する方法

アプリケーションキャッシュを示す
applicationCacheでは
キャッシュファイルが更新されると発生する
updatereadyイベントが使える

この
updatereadyイベントを使うことで
更新チェックと
新しいバージョンへのアップデートができる

if(applicationCache){
applicationCache.addEventListener("updateready",function(){
if(confirm("新しいバージョンが利用できます。アップデートしますか？")){

//キャッシュのアップデートと画面の再読込
applicationCache.swapCache();
location.load();

}

},true);

}

これだけでも更新チェックとアップデートができるけど
コンテンツを更新しても
updatereadyイベントが発生しないこともある

そのため念のために
update()
を、使うことで
明示的にキャッシュの更新と、リソース再読込ができるようにしておく

使い方は

applicationCache.update();

とする

これは、ボタンなどで使うことで
再読込ボタンにすることもできる

HTMLで

<button type="submit" id="update">更新</button>

Javascriptで

$(document).on("click","#update",function(e){
//キャッシュのアップデートと画面の再読込
applicationCache.update();
location.load();
});

注意点としては、Androidだと
アプリケーションキャッシュを使うことで
画面遷移ができなくなることがある

このため、Androidでは、Ajaxによる画面遷移を無効化しておく

if(navigator.userAgent.match(/Android/)){
$.mobile.ajaxEnabled = false;
}

match()は正規表現
マッチするものを調べるやり方

詳しくはドットインストールの正規表現を参考にするとわかりやすい

アプリケーションキャッシュについて

HTML5から追加された
アプリケーションキャッシュを使えば
ネットにつながっていなくてもWebアプリを動かすことができる

アプリケーションキャッシュでは
HTML
CSS
画像などのリソースをブラウザーでキャッシュして
サーバーへ読みに行かないようにする

これにより
サーバーへの負荷が減り
レスポンス向上、通信量削減もできる

ただし、デメリットがある
設定ができていないと
コンテンツのアップデートができなくなるので注意

アプリケーションキャッシュを使うには
appcacheファイルを作成する

このファイルの拡張子は
.appcache
になる

HTML5ファイル
が
一番最初の行へ

<DOCTYPE HTML>

としたり

シェルスクリプトファイルで
一番最初の行へ

#!/bin/bash

とするように

アプリケーションキャッシュでは

CACHE MANIFEST

と書く

そして、2行目に

#Version: 1.0

というように、バージョンをコメントアウトで書く

アプリケーションキャッシュファイルのコメントアウトは
Linuxの設定ファイルのように
#を付けることでできる
有効範囲は行末まで

そして、3行目からはキャッシュしたいファイルを記述していく

ファイルのパスは
キャッシュファイルからの相対パスでも
http:// の絶対パスでも構わない

#でコメントアウトができるので
ファイル概要があるとわかりやすくなる

ソースにすると

CACHE MANIFEST
#Version: 1.0

index.html
menu.html
#Javascript
js/jquery-1.7.1.min.js
js/jquery-mobile-1.1.0.min.js
#CSS
css/jquery-mobile-1.1.0.min.css

これで、アプリケーションキャッシュファイルができたので
後はHTMLファイルの
html要素へ
manifest=”” でアプリケーションキャッシュファイルを指定する

今回作成したのが
hello.appcacheなら

<! DOCTYPE html>
<html manifest="hello.appcache">

</html>

となる

これで、Webアプリの設定はできたので
次に、サーバー側の設定

サーバーソフトとしてApacheを使っている場合
デフォルトだと
.appcacheファイルは
text/plain形式になるので

正しく動作させるため
text/cache-manifestファイルになるように設定する

これは、 .htaccessファイルを作成して
キャッシュファイルと同じディレクトリに置く

.htaccessの内容は

addType text/cache-manifest .appcache

アプリケーションキャッシュを使うと
iOSやAndroidでは
まず、appcacheファイルを取得し
キャッシュの設定のあるファイルを
キャッシュから読み込んで表示する

appcacheファイルをWebサーバーから取得できない場合
キャッシュされたappcacheの情報に基づき
コンテンツをキャッシュから表示する