前投稿では表示デバイスを取得する方法を解説しましたが、ここではデバイスの画面サイズを取得する方法を解説します。
しかし画面サイズを取得する為にはセッション機能、jquery、ajax等の新しい概念を理解する必要があります。
そこでこれらが何か？から解説します。
1.前提知識
1-1.セッション機能の必要性
HTTP通信の基本は下記になります。
①デバイス側は、アクセスするサーバのURLを記述し送信します。
②URLで指定されたサーバ側は、要求デバイスにHTMLデータを送ります。
③デバイス側は、送られてきたHTMLデータを表示します。
以上で通信(セッション)は終了します。
しかしこれでは1回目のセッションと2回目のセッションを関連づけたプログラムの作成できません。
これを解決する手段がセッション機能という概念です。
この機能をONにすると、
①１回目のセッションで$_SESSION[‘××’]で書かれたデータをディスクに保存します。
②２回目のセッションでは、ディスク上の$_SESSION[‘××’]を読み込んで処理をします。
すなわちセッション機能とはサーバのセッション間でデータを受け渡す機能になります。
1-2.jqueryやajaxの必要性
jqueryとはJavaScriptライブラリで、jqueryで作成されたプログラムはHTMLの送信に合わせてデバイス側に送付されます。
jqueryプログラムはデバイス側だけで実行するプログラムで下記の様な動作を記述します。
例1.タブ切替で表示コンテンツを変更する。
例2.BOX内にあるリンク要素を検知してURLリンクさせる。
例3.モーダルウインドウやコラップス制御を行う等々
しかし今回のテーマはデバイスの画面サイズをサーバに送ってあげる必要があります。
ここに登場するのがajaxと呼ばれる非同期通信手段でこれをJqueryプログラムの中で使います。
メモ
Jqueryプログラムはデバイス側で動くプログラムです。
またこのプログラムがサーバと通信する際は、ajax(非同期通信)を使って通信します。
2.事前準備
2-1.Wordpressのセッション機能をONにする。
下記プログラムをfunctions.phpに記述してください。
//$_SESSIONを使える様にする function init_sessions(){ if(!session_id()) {session_start();} } add_action('init', 'init_sessions');
以上でphpプログラムの中で$_SESSION[‘××’]が使える様になり、セッション間でデータの受け渡しが可能となります。
【書き込む場合】$_SESSION[‘data’]=100;
【読み込む場合】echo $_SESSION[‘data’];
2-2.WordPressに非同期通信(ajax)経路を新設する
WordPressにはデフォルトのajax経路があります。
しかしこの経路は利用しているテンプレートによってはこの経路が使えないケースがあります。
そこで、ここでは新しくajax経路を作成します。
①新規にajaxという名前の固定ページを作成します。
名前(ajax)は、どの様な名前でも構いません。
②このページのパーマリンクに名前を付けて保存します。
このサイトでは「set_windows_size」にしています。
メモ
ajax通信にはURLで起動できるサーバ側プログラムが必要になります。
そこで固定ページのURLをajaxの通信経路としました。
例)https://nw.t-spirits.com/set_windows_size
尚、ここで動かすプログラムは3項で説明します。
以上で事前準備は完了したので具体的な設定を下記に説明します。
3.画面サイズを取得するプログラム
3-1.デバイス側のajaxを使ったjqueryプログラムを作成する。
個人のjqueryライブラリに下記を記述してください。
/* 表示デバイスの画面サイズを取得する */ $(function(){ var setWindowSize = function(){ $.ajax({ type: "POST", url: "https://nw.t-spirits.com/set_windows_size", // 起動するサーバプログラムのURL data:{"windowSize" : window.innerWidth,}, }); }; setWindowSize(); //上記で設定した関数の実行 var timer = false; //タイマーをリセット $(window).resize(function(){ if(timer !== false){clearTimeout(timer);} timer = setTimeout(setWindowSize,500); }); });
※1.https://nw.t-spirits.com/set_windows_sizeは、サーバ側のWindows幅を受け取るプログラムのURL。
※2.window.innerWidthはスクロールバーを含むwinodw幅で、これをwindowSizeにセットします。
関数としては$(window).width()があるがこれはスクロールバーを含まない為、CSSで使われるメディアクエリ(@media)と一致しないのでここでは使っていません。
※3.setWindowSize()は上記で設定した関数の実行
※4.$(window).resizeはPCのWindows操作やスマホやタブレットのデバイス回転で画面サイズが変わった時に発生するイベント検知します。
＜上記プログラムの挙動の解説＞
①HTMLの描画が終わった段階でこのプログラムが実行されます。
②初めにsetWindowSize関数が実行され、描画した後の画面サイズは幾つでした！をサーバ側に伝えます。
③次にtimerをリセットして、待機状態に入ります。
④PCやスマホやタブレットで画面変更のイベントが発生すると、$(window).resizeで検知して、500ミリ秒後にsetWindowSizeを実行する事を予約します。
⑤予約時間内に再度画面変更を検知すると、予約を解除し再度500ミリ秒後に実行する事を予約します。
⑥変更を検知してから500ミリ秒たった段階で、現在の画面サイズをサーバ側に伝えます。
3-2.サーバ側でajaxからのデータを受け取るプログラムの作成
①新規に「set_windows_size.php」を作成し下記を記述します。
<?php /* Template Name:set_windows_size */ $_SESSION['windowSize'] = $_POST['windowSize']; die(); ?>
※1.Template Nameでset_windows_sizeを指定する事により、固定ページのテンプレートで利用できる様にします。
※2.セッション機能をONにしたので、$_SESSION[‘windowSize’]がディスクに書き込まれます。
windowSizeはajaxから送られてきた変数名です。
※3.(重要)処理の最後に必ずdie();を記述して下さい。これを行わないと非同期通信が終了しない事があります。
②固定ページのajaxを呼び出し、テンプレートの所で上記のテンプレート名を選択して保存します。
ここではset_windows_sizeになっています。
以上で画面サイズがPHPプログラム上で利用できるようになりました。
4.画面サイズを取得する方法と問題点
phpプログラムではセッションにある画面サイズを読み込むだけです。
<?php $size = $_SESSION[windowSize]; ?>
しかし下記問題点があります。
この方法は始めのセッションでは機能しません。
理由は始めのセッションで画面描画後に画面サイズをサーバに送る為です。
しかし正確な画面サイズが取得できます。
5.関連記事
この関数とデバイス種類の両方を使う場合は下記URLを参照してください。
