カテゴリー: 未分類

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

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

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いいねボタン追加

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アプリの更新について

動的に内容が変更される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の情報に基づき
コンテンツをキャッシュから表示する

DOMキャッシュについて

DOMキャッシュについて

jQueryMobileは、DOMキャッシュ機能を持っている

これほ、一度表示した画面、つまりDOMをjQueryMobileの中にキャッシュして、キャッシュしたDOMを表示する機能

これは、メニュー画面など、
頻繁に表示されるページに利用する

DOMキャッシュで
すべての画面をキャッシュするには
jQueryMobileを初期化時に
$.mobile.page.prototype.options.domCache
をtrueにする

$(document).on("mobileinit",function(){
$.mobile.page.prototype.options.domCache = true;

});

これは、mobileinitイベントで定義する

次に、特定の画面のみキャッシュする方法

すべての画面をキャッシュするのはリソースの無駄なので行わない

キャッシュするのは
メニュー画面など
頻繁に再訪が発生するページのみにする

キャッシュ画面の指定は
画面の要素、つまり
data-role=”page”
に対して
data-dom-cache=”true”
を設定する

ソースにすると

<div data-role="page" data-dom-cache="true" id="menu">

</div>

なお、DOMキャッシュは、アプリケーションキャッシュを使うなら不要になる

次の画面を先読みするプリフェッチ機能

次の画面を先読みするプリフェッチ

ある画面から次の画面に移るときに
画面が変わるタイミングでデータ読み込みがあると
画面が表示されるまで時間がかかることがある
特に低速回線の場合は多発する

この対処としては、jQueryMobileで提供されているプリフェッチ機能を使えば
ユーザーに今の画面を表示している間に
次の画面のデータを事前に読み込んでおける

このプリフェッチ機能により
あらかじめ次の画面を読み込んでおくことで
スムーズに画面遷移ができる

これは、アンケートとかユーザー登録みたいな次に遷移するページが決まっているときに使う

プリフェッチ機能を使うには
リンクする a要素へ
data-prefetch=”true”
を設定する

<a href="next.html">次へ</a>

ただし、プリフェッチ機能を乱用すると
ユーザーが見ない画面も取得してしまうため
サーバーに負荷がかかるし
ネットワーク負荷もかかる
このため
プリフェッチ機能は、次にみる可能性の高い画面のみ設定すること

ちなみに、photoSwipeは
デフォルトで画像を表示している間にプリフェッチ機能で前後の画像を取得している

このため、画像をプリフェッチしながら表示するなら
PhotoSwipeを使うと便利

いろいろと使えそうなプリフェッチ機能だけと
アプリケーションキャッシュを使えば
プリフェッチ機能は使わなくても代用できる

$.getScript()で遅延ロード

$.getScript()でスクリプトの遅延ロード

大きなサイズのJavascriptライブラリーを使う場合
scriptタグで全部読み込むより
一旦画面を表示してから
スクリプトを読み込んだほうがWebアプリのレスポンスがよくなる

また、特定条件のときのみ必要なライブラリーは
ライブラリーを動的に読み込むようにして
不要なJavascriptのロードを避ける

Javascriptを動的に読み込むのに使うのが
$.getScript()
を使う

例えば、iOSでは日付が使えるけど
Androidではできない
なので、Androidなら
jQueryMobile DateBoxを読み込む
というように、ifで判定して使う

<script>
if(navigator.userAgent.indexOf("Android")!=-1){

$.getScript("http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.js",function(data,status){
$.getScript("http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.ja.utf8.js",function(data,status){
//Javascript読みこみ処理

});

});

}
</script>

jQueryMobileでは、デフォルトで最初にアクセスしたとき
トップページでJavascriptを読み込むのが望ましい

そして、このときにトップページに必要のないJavascriptは
$.getScript()
を使うことで
まずはトップページを表示して
その後に必要なJavascriptを読み込むようにすれば
低速回線でもストレスなく表示することができる

フォームの遅延ロード

フォームの遅延ロード

Ajaxのフォームも遅延ロードで作成可能

ただし、これもただ追加しただけでは
jQueryMobileが適用されないため

フォームコンポーネントを追加した時点で
trigger(“create”)
を呼び出す必要がある

$.ajax({
type:"POST",
url:"./form.html",
dataType:'html',
success: function(data){

//データ追加
$("#corapsible-form").append(data);

//jQueryMobile反映
$("#corapsible-form").trigger("create");

},
error:function(msg){
alert(msg.responseText);
}

});

これで、あとはhtmlで
追加する領域の指定

<div data-role="corapsible" data-corapsed="true" id="acordion" name="acordion">
<h3>動的フォームの挿入</h3>
<form id="corapsible-form"></form>
</div>

続いて、挿入するhtmlファイル

このやり方のメリットは、後から追加できるため
メンテナンスが楽なこと
そして作業の分担ができること

全体的なUIの設定と
フォーム内容担当を分けることができる

アンケートなどではかなりの量になるので
都度アンケート内容だけ変更することもできる

<div data-role="fieldcontain">
<label for="slider">スライダー</label>
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
</div>

<fieldset data-role="controlgroup">
<legend>好きなタイプは？</legend>
<input type="checkbox" name="rpg" id="rpg" class="custom"/>
<label for="rpg">RPG</label>

<input type="checkbox" name="action" id="action" class="custom"/>
<label for="action">アクション</label>

<input type="checkbox" name="puzzle" id="puzzle" class="custom"/>
<label for="puzzle">パズル</label>

</fieldset>

<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>使うosは？</legend>

<input type="radio" name="os" id="android" value="android"/>
<label for="android">Android</label>

<input type="radio" name="os" id="ios" value="ios" checked="checked"/>
<label for="ios">iOS</label>

<input type="radio" name="os" id="other" value="other"/>
<label for="other">両方</label>
</fieldset>
</div>