HOME  /WordPress(応用)
 /画面サイズを取得する方法
2020年02月26日

画面サイズを取得する方法

前投稿では表示デバイスを取得する方法を解説しましたが、ここではデバイスの画面サイズを取得する方法を解説します。

しかし画面サイズを取得する為にはセッション機能、jquery、ajax等の新しい概念を理解する必要があります。

そこでこれらが何か?から解説します。

1.前提知識

1-1.セッション機能の必要性

HTTP通信の基本は下記になります。

①デバイス側は、アクセスするサーバのURLを記述し送信します。

②URLで指定されたサーバ側は、要求デバイスにHTMLデータを送ります。

③デバイス側は、送られてきたHTMLデータを表示します。

以上で通信(セッション)は終了します。

しかしこれでは1回目のセッションと2回目のセッションを関連づけたプログラムの作成できません。

これを解決する手段がセッション機能という概念です。

この機能をONにすると、

①1回目のセッションで$_SESSION[‘××’]で書かれたデータをディスクに保存します。

②2回目のセッションでは、ディスク上の$_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.myds.me/set_windows_size

尚、ここで動かすプログラムは3項で説明します。

以上で事前準備は完了したので具体的な設定を下記に説明します。

3.画面サイズを取得するプログラム

3-1.デバイス側のajaxを使ったjqueryプログラムを作成する。

個人のjqueryライブラリに下記を記述してください。

/* 表示デバイスの画面サイズを取得する */
$(function(){
  var setWindowSize = function(){
    $.ajax({
     type: "POST",
     url: "https://nw.myds.me/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.myds.me/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 Nameset_windows_sizeを指定する事により、固定ページのテンプレートで利用できる様にします。

※2.セッション機能をONにしたので、$_SESSION[‘windowSize’]がディスクに書き込まれます。
windowSizeはajaxから送られてきた変数名です。

※3.(重要)処理の最後に必ずdie();を記述して下さい。これを行わないと非同期通信が終了しない事があります。

固定ページのajaxを呼び出し、テンプレートの所で上記のテンプレート名を選択して保存します。
ここではset_windows_sizeになっています。

以上で画面サイズがPHPプログラム上で利用できるようになりました。

4.画面サイズを取得する方法と問題点

phpプログラムではセッションにある画面サイズを読み込むだけです。

<?php
  $size = $_SESSION[windowSize];
?>

しかし下記問題点があります。

この方法は始めのセッションでは機能しません。

理由は始めのセッションで画面描画後に画面サイズをサーバに送る為です。

しかし正確な画面サイズが取得できます。

5.関連記事

この関数とデバイス種類の両方を使う場合は下記URLを参照してください。

表示デバイスと画面サイズの両方を使った判断方法

以上でこのドキュメントの説明は完了です。

関連ドキュメントはメニュの「Wordpress(応用編)タブ」か下記の関連記事一覧から探して下さい。

又、このサイトには、Google広告が掲載されています。

この記事が貴方の参考になりましたら、広告もご覧頂ければ幸いです。


<関連記事一覧>

「wprdpress-ad」に関連するドキュメントを表示しています。尚、このページネーションはJquryで制御しています。

ここでは「WP-Mail-SMTP」プラグインと「Gmail API」を使ってWordPressからメールを送る方法を解説します。特徴はGoogleのセキュリティ審査で警告は出ないが、設定と運用が面倒な事です。

ここでは「WP-Mail-SMTP」プラグインと「Googleのアプリパスワード」を使ってWordPressからメールを送る方法を解説します。特徴は簡単で運用が簡単だがGoogleのセキュリティ審査で警告がでます。

Wordpressのセキュリティ強化の方法として「SiteGuard WP Plugin」と「Google Authenticator」の使い方を解説しています。

「Velvet Blues Update URLs」はWordpressのプラグインです。よって、WordPress稼動中にURLを変更するツールです。これを使ってサイトのURLを変更する方法を解説しています。

WordPressを構築した後、URL変更をしたい等のニーズが発生しますが、この時に重要なのはWordPressの稼働環境を理解する必要があります。ここでは「WordPressの稼働環境」と「MariaDBの中の構造」を解説しています。

「PHP7.0」から「PHP7.3」に変更したや、画面が途中で表示されないという問題が発生しました。この時に対応した内容を紹介しています。

「PHP Compatibility Checker」で「File has mixed line endings; this may cause incorrect results」の警告が出た時の対処方法を解説しています。

Jqueryでコントロールするページネーションです。
デバイスに全リストを送り、Jquryで何処を表示するか?のコントロールをします。

PHPでコントロールするページネーションを投稿ページ等に配置すると動作しない事があります。
これを解決する方法を解説しています。

このドキュメントではビジュアルエディタでモーダルウィンドウを使ったコンテンツを作成する方法を解説しています。更に1ページの中に複数のモーダルウィンドウ定義があっても対応できるJqueryにしています。

ビジュアルエディタで文書を作成する時、ボタンを作成したい時があります。
ここでは下記のBootstrapのボタンをビジュアルエディタで利用する方法を解説します。

ここでは引用

の設定と使い方を解説します。ポイントは見やすい引用BOXです。

親テーマのビジュアルエディタのCSSが「editor-style.css」でない場合はTinyMCE Advancedプラグインを利用するのに一工夫が必要になります。
ここではその解決方法を解説しています。

2018年末にリリースされたWordPress5.0から標準エディタは「ブロックエディタ(Gutenberg)」に変更になりましたが「ビジュアルエディタ」を使い続ける方法を解説しています。

ビジュアルエディタの操作画面に幾つかのダッシュアイコンボタンを追加したサンプル事例を紹介しています。

広告を読み出すHTMLをそのまま記述すると、プログラムが見づらくなります。 その対策として関数を使う方法もありますが、ここではWordPressのウィジェット機能を使う方法を解説します。 1.サイドバーにAdSense広 […]

画像が多いサイトを作成するとどうしても表示スピードが遅くなります。 この対策の一つとして画像を圧縮する方法があります。   画像圧縮には色々なツールがありますが、ここでは「Compress JPEG & […]

WP Mail SMTP等でGMAILのSMTPサーバを利用する場合は、「アプリパスワード」又は「Google Cloud Platform」を利用する必要があります。ここでは「アプリパスワード」の設定方法を解説しています。

SynologyのDSMで80/443以外のポート番号を使ったWebサイトを構築する方法を解説しています。

SynologyでWordPressのURL変更を「Search-Replace-DB」で行う為には、ポート番号指定でDBを見に行く必要があります。ここではこの使い方を解説しています。

wordpress関数のwp_mailを使った事例を解説しています。このフォームのボタンはBootstrapで、ダブルクリックによる二重送信防止機能も付けています。

このコンテンツはこのサイトのフッタページのデザインを解説した物です。

このコンテンツはこのサイトのリストページのデザインを解説した物です。ページデザインはFlexboxを採用して左にコンテンツ、右にウィジェットを配置しています。またページ送りはBootstrapのページネーションを利用しています。

このコンテンツはこのサイトの投稿ページのデザインを解説した物です。ページデザインはFlexboxを採用して左にコンテンツ、右にウィジェットを配置しています。

PHPプログラムでコントロールするページネーションです。
やり方はWordPressのページネーションからデータを取得し、それをBootstrapのページネーションフォーマットで出力しています。

PC画面ではサイドバーがあっても良いが、幅が狭いスマホではこのエリアが確保できない。そこでスマホの場合は自動的にBootstrapのドロップダウンメニュに置き変えるサイドーバーの作り方を解説しています。

このコンテンツはこのサイトの固定ページのデザインを解説した物です。ページデザインはFlexboxを採用しています。またトップページはfront-page.phpを利用しています。

パンくずは一般的にはプラグインを利用しますが、ECサイト等でサイトに特化したパンくずにする為には自作のパンくずの方がカスタマイズ性に優れます。そこでここでは自作のパンくずを作る方法を解説しています。

Bootstrapのインプットグループ機能を使った検索BOXを作成した事例です。検索BOXは関数化してボタンの色を指定できる様にしています。

Bootstrapのナビゲーション・バー(Navbar)機能を使うとスマホ画面がスマートになります。但しデフォルトでは使いづらいのでNavbarボタンの関数化とWordPressメニュを使う方法を解説しています。

Bootstrapのナビゲーション・バーとflexboxを使ったヘッダの作成事例です。Bootstrapのナビゲーション・バーを使う事により、スマホのヘッダ画面が簡単に作れます。またFlexboxを使う事によりPCやタブレットのヘッダ画面が簡単で綺麗なメニュが作れるようになりました。

モーダルウィンドウとは新しいウィンドウを表示し、その操作が完了するまで親ウィンドウの操作ができないタイプのウィンドウのことです。ここではBootstrapのモーダルウィンドウ機能をビジュアルエディタで使う方法を解説しています。

ビジュアルエディタでBOXを作成する方法は①表機能を使う②スタイルで設定したBOXを使うがありますが、ここでは表機能を使ってBOX全体がリンク対象になるBOXを作成する方法を解説しています。

Bootstrapを導入するとBootstrapが持っているアイコンフォントが使える様になります。一方、WordPressもアイコンフォントを持っています。ここではこれらの使い方を説明しています。

ここではビジュアルエディタでタブ切替ができるコンテンツを作成方法を解説しています。更にここでは1ページに複数のタブ要素があっても対応できるjqueryプログラムにしてあります。

TinyMCEのスタイルは1つの段落に対する定義になります。よってこのスタイルで作成したBOXは、改行(Shift+Enter)しか使えません。しかしショートコードという新しい概念を利用すると段落変更(Enter)が使えるBOXを作る事ができます。ここではその作り方を解説しています。

TinyMCEで画像を取り扱うポイントは、画像に枠を付ける場合はどうするのか?と画像のレスポンシブ化は、どの様に実現するか?になります。ここではこれらの設定方法と使い方を解説しています。

このドキュメントではビジュアルエディタの段落、h2~h5及びリンクの設定とリンクの貼り方を解説しています。

TinyMCEではリストとして、オーダリスト

    とアンオーダーリスト

      が用意されていますが、決して使い易いものではありません。そこでこのサイトではTinyMCE Advancedのスタイル機能を使って半角2文字リスト、半角4文字リストを作成する事により、文字種を選ばないリストを作成しました。

ビジュアルエディタで文書を作成した際にどのフォントを使うか?は悩ましい所です。ここではどの様なフォントを指定するとどの様なフォントで表示されるのかを解説しています。

ビジュアルエディタで綺麗な表を作成する為に「TinyMCE Advanced」と「Bootstrap」の表機能を利用しています。ここではそれらの設定方法と利用方法を解説しています。

レスポンシブWebデザインとは、ユーザーが閲覧するデバイス幅に応じたデザインで表示させる技術のことで、有名所でBootstrapとFlexboxが挙げられます。ここでは両者の特徴と違いを解説しています。

Flexboxは素晴らしい機能ですがプロパティの設定に悩まされます。本稿では具体的な事例を挙げながらFlexboxの使い方を解説しています。

PHPプログラムで表示するデバイスの種類が判ればプログラミングが簡単になります。そこでここではデバイス種類を取得する関数とデバイスの画面サイズを取得する方法を併用して、実使用上問題ない方法を解説しています。

WordPressで用意されている関数、is_mobileやwp_is_mobileを利用すると、アクセスしてきたデバイスの種類を意識したPHPプログラムを作成する事ができます。ここではこの設定方法と使い方を解説しています。但し、これは画面サイズではありません。

ここでは整形済みテキスト(pre)の設定と使い方を解説します。整形済みテキストのポイントは見やすいソーステキストの提供です。

Bootstrapのモーダルウィンドウの機能をビジュアルエディタで使うとどうしてもBootstrapの仕様の制限を受けます。
そこでこの投稿では自作のモーダルウィンドウの作り方を解説します。ここでは背景色の変更やコンテンツエリア幅の変更を可能としています。

コラップスとはアコーディオンなどのようにコンテンツを開閉できる機能でここではBootstrapのコラップス機能をビジュアルエディタで利用する方法を解説しています。更に1ページに複数のコラップスがあっても対応できるJqueryにしています。

TinyMCEのデフォルト設定ではインデントはpタグとimgタグしが使えません。またCSSを更新した時にスーパリロードしないと画面が更新されない等の問題点もあります。ここではこれらの問題点を解決して使い易いTinyMCEの設定方法を解説しています。

ビジュアルエディタのCSS「editor.style.css」を充実させると操作性は良くなりますが、「style.css」を維持する事が大変になります。ここではその管理方法の一例を紹介しています。

TinyMCEの仕様は親テーマのeditor-style.cs、子テーマのeditor-style.cssの順番に読み込みます。ここでは子テーマのeditor-style.cssだけを使う方法を解説しています。

Bootstrapはグリッドデザイン以外にボタンやナビゲーション等の色々な機能を持っており、これを利用するとかなり自由なデザインが可能になるツールです。このBootstrapをダウンロードし、HTTP画面やビジュアルエディタで使う方法を解説しています。

子テーマの作り方には色々な方法があります。ここで紹介している方法は親と子を明確に分離する方法なので、子テーマのCSSが親テーマのCSSと完全に分離するので見やすくすることができます。

phpmyadminのセキュリティ対策として①phpMyAdminを別名にする方法②phpMyAdminをrootでアクセスできなくする方法
③phpMyAdminアクセスをローカルに限定する方法を解説しています。