2017-09-26

Grid System

画面拡縮にGrid Systemが使えないかを考えました。

やりたいことは、画面のサイズにあわせて、ボタンといった中身の要素を拡縮します。

Grid Systemのは、画面を12や24といった分割をあらかじめさせておくことで、 class="col span_4"・class="col span_8"とCSSをあてることで、画面に対する要素の配置やサイズを楽に設定することができます。

横一列を、12分割。メディアクエリを使って,768px以上の幅があれば、要素は横に並べ、768pxをしたまわる小さい画面だと縦一列に並びます。

@media ( min-width : 768px ) {
{
    .span_1 { width: 8.33333333333%; }
    .span_2 { width: 16.6666666667%; }
    .span_3 { width: 25%; }
    .span_4 { width: 33.3333333333%; }
    .span_5 { width: 41.6666666667%; }
    .span_6 { width: 50%; }
    .span_7 { width: 58.3333333333%; }
    .span_8 { width: 66.6666666667%; }
    .span_9 { width: 75%; }
    .span_10 { width: 83.3333333333%; }
    .span_11 { width: 91.6666666667%; }
    .span_12 { width: 100%; }
}

サンプルコードをみると、要素自体のサイズというよりは、画面分割に使用するのでしょうか。。

「スマートフォンといった画面が小さい時に、要素のサイズはそのままに、横に並べた要素を縦に並べなおす」時に利用します。

サンプルリンク先
[codepen_embed グリッド [/codepen_embed]

上記コードに、試しに4/8に分割し、それぞれ中にdiv要素を追加してみましたが(samplebox1,samplebox2)、幅が768px以上あっても縦に並びます。。インラインの要素しか中に配置できないのでしょうか。

参考サイト超シンプルで簡単なフレームワーク「Responsive Grid System」でレスポンシブWEBサイトをつくろう（前編：導入編） | HTML5でサイトをつくろう

2017-09-26

ViewPort

ViewPortとは

Viewportとは表示領域のことで、ブラウザにおける仮想のカンバスサイズを決めて、サイトの表示の仕方を制御する役割があります。

PCで作成したサイトを、スマートフォンで表示すると、全体が小さく縮小され、ピンチアップしないと見づらい状況が発生します。 (スマートフォンの解像度がPCなみに上がってきたため。ViewPortを設定＋メディアクエリを設定することで、高い解像度時かつ小さい画面でも、表示の仕方を制御することができます。)

スマートフォンデバイスに関しては、レスポンシブデザインでレイアウトを行う際には、CSSでメディアクエリを、HTMLでViewportを両方設定しておく必要があります。これは、メディアクエリだけを指定したとしても、Viewportがなければ何も起こらないからです。

①widthに数値を制定

<meta name="viewport" content="width=480">

・幅480pxの仮想的なウインドウが作られる・はみ出した分はみえない・数字を明確に指定しているので端末ごとの表示を統一できるが、
逆に言うと大きな画面サイズの端末でも小さな画面サイズの端末と同じ表示になるため、スペースの有効活用ができない・モバイル端末の幅よりもViewportの幅のほうが小さいか同じであれば、スマートフォンサイトとしてストレスなく閲覧することができる

②widthにdevice-widthを設定

<meta name="viewport" content="width=device-width">

・端末やブラウザアプリ毎によって異なる・解像度ではなく360とか580などのスマホらしい小さい値が使われる・フレキシブルな表示ができる一方、細かい表示の統一はやりづらい

参考サイト https://ferret-plus.com/6033

ViewPortの設定は、ブラウザ毎で書き方が違うようなので、注意が必要です。

2017-09-16

マウスイベントとタッチイベント(Window8対応)

クロスブラウザ

前回の記事の通り、Window8のようにタッチイベント・マウスイベントの両方がそなわっているデバイスで、処理を共通化する方法です。

Windows8のChromeやFirefoxはタッチイベントをサポートしており、画面をタッチして操作した場合はタッチ系のイベントが、マウスで操作した場合はマウス系のイベントが発火するようになっています。 (※タッチイベントの時は、タッチイベント→マウスイベントの順で両方発火？後述)

そのため、touchstartとmousedownの両方にイベントをバインドしておいて、それらのイベントリスナの中でmoveイベントとendイベントをバインドし、endイベントでリスナを解除する。

See the Pen aLvoyL by satsuki mori (@satsuki) on CodePen.

ポイントは、

タッチ・マウス両方の開始イベントを登録。

$hitarea.on('touchstart mousedown', handleStart); // 両方設定

マウス・タッチの両方のイベントが発生してしまうため、2度目を阻止

event.preventDefault();

開始イベントの種類(event.type)で、マウスかタッチかを判断

  if(eventName === 'touchstart') {
    return {
      move: 'touchmove',
      end: 'touchend'
    };
  }
  if(eventName === 'mousedown') {
    return {
      move: 'mousemove',
      end: 'mouseup'
    };

move,endイベントをバインド

なので、もしマウス操作でバインドした時はタッチ操作はうけつけない。

  $document.on(currentEventNameSet.move, handleMove);
  $document.on(currentEventNameSet.end, handleEnd);

endイベントの発火で、move、endイベントをアンバインド

$document.off(currentEventNameSet.move, handleMove);
$document.off(currentEventNameSet.end, handleEnd);

デフォルトのスワイプ動作をCSSで禁止にするみたいです。

   /* windows8のスワイプ動作を禁止 */
    -ms-touch-action:none;
    touch-action:none;

IE9は使用できず。。 touch-action - CSS | MDN

マウス・タッチイベントの発火順

結局、・マウスクリックでも、タッチも両方発火するの？それとも、上に書いた通り、どっちかだけ？・タッチパネル付PCの場合、どうなる？がよくわからなかった。。試してみたいですね。

参考サイト github.com 参考サイト developer.mozilla.org

IEの場合は、ポインターイベント

2017-09-16

タッチイベントとマウスイベント

クロスブラウザ

スマートデバイス系のタッチイベントと、PC操作時のマウスイベント、どのように処理を共通化すればいいかを調べてみました。

See the Pen wraVLN by satsuki mori (@satsuki) on CodePen.

共通化のポイントは、supportTouchで判別できるとのことです。

var supportTouch = 'ontouchend' in document;
var EVENTNAME_TOUCHSTART = supportTouch ? 'touchstart' : 'mousedown';
var EVENTNAME_TOUCHMOVE = supportTouch ? 'touchmove' : 'mousemove';
var EVENTNAME_TOUCHEND = supportTouch ? 'touchend' : 'mouseup';

あとは、いつも通りeventに上記で設定したeventの変数を使用すれば使い分け可能です。

$hitarea.on(EVENTNAME_TOUCHSTART, handleStart);

プロパティを参照する際は、以下のように参照先をかえます。 jQueryを使用しているため、一度"event.originalEvent"で取り直していました。

var original = event.originalEvent;
  var x, y;
  if(original.changedTouches) {
    x = original.changedTouches[0].pageX;
    y = original.changedTouches[0].pageY;
  } else {
    x = event.pageX;
    y = event.pageY;
  }

話はそれますが、座標は、サンプル画面左上を(0,0)として、画面右下にいくほどXもYの座標も大きくなります。なので、サンプル画面左上にドラッグすると-値になりました。

次に、Windows8のようにタッチもマウス操作もできる場合は、上記処理だと"ダメ"みたいですね。。。タッチ処理しか動かず、マウス操作が一切できなくなるという。。

参考サイト

app.codegrid.net

2017-09-16

コンテンツ表示領域の取得方法

クロスブラウザ

Windowの内周・外周を取得する方法です。

Windowのプロパティで以下で取得できます。

innerHeight //ウィンドウ内周(コンテンツ表示領域)の高さ
innerWidth //ウィンドウ内周(コンテンツ表示領域)の横幅
outerHeight //ウィンドウ外周の高さ
outerHeight //ウィンドウ外周の横幅

参考サイトでは、「上記プロパティはIEには対応していません。」とのことでしたが、以下のコードを実行した限り、IE5以上でもうごきました。

上記プロパティを使うかわりに、以下の通りかくそうです。(※bodyタグがよみこまれた後に使用Callしないととれないため、注意)
document.body.clientHeight //クライアントの高さ
document.body.clientWidth //クライアントの横幅

IE5以上、Chromeいずれも、windowのプロパティでも、document.body～のやりかたでも表示できました。 10年もたつと、現在はどちらもつかえそうです。

See the Pen zEGgWv by satsuki mori (@satsuki) on CodePen.

参考サイト

codezine.jp

2017-09-12

eventオブジェクト

クロスブラウザ

モダンブラウザ間は、DOMオブジェクトに関する実装の違いはありません。しかし、「eventオブジェクト」と「windowオブジェクト」には実装の違いが存在します。

ブラウザは以下3つのグループにわかれます。 ①IE ②Mozilla系→Netscape Navigator,Firefox ③Opera,Safari

取得したイベントから値をとり出す方法の違いは以下の通りです。

①IEの場合　 window.event.プロパティ

②Mozilla系の場合　変数.プロパティ

③Opera,Safariの場合　両方とも対応できている(？)

それぞれのブラウザで使用できるプロパティは以下の通りです。 ③は、①と②の両方のプロパティを使用可能です。

Opera/Safari
IE			Mozilla系(Netscape Navigator/FireFox)
プロパティ	解説	備考	プロパティ	解説	備考
type	イベントのタイプ		type	イベントのタイプ
			layerX	イベントが発生したレイヤー上のX座標（ピクセル）	Netscape Navigator 4.Xのみ
			layerY	イベントが発生したレイヤー上のY座標（ピクセル）	Netscape Navigator 4.Xのみ
screenX	イベントが発生したスクリーン上のX座標（ピクセル）		screenX	イベントが発生したスクリーン上のX座標（ピクセル）
screenY	イベントが発生したスクリーン上のY座標（ピクセル）		screenY	イベントが発生したスクリーン上のY座標（ピクセル）
			pageX	表示しているページの左上からの座標を取得
			pageY	表示しているページの左上からの座標を取得
clientX	現在ブラウザで表示している領域の左上からの座標を取得。	スクロールバーがでなければ、pageXと同じ
clientY	現在ブラウザで表示している領域の左上からの座標を取得。	スクロールバーがでなければ、pageYと同じ
offsetX	イベントが発生した要素上のX座標（ピクセル）
offsetY	イベントが発生した要素上のY座標（ピクセル）
keyCode	マウスボタンが押されたり、押されたキーのASCIIの値		keyCode	マウスボタンが押されたり、押されたキーのASCIIの値	Netscape 6.0以降
			which	マウスボタンが押されたり、押されたキーのASCIIの値

座標の取得プログラムです。 ClientとPageはスクロールバーをだすと値がちがってきます。

See the Pen QqLoKV by satsuki mori (@satsuki) on CodePen.

プロパティもまぎらわしいですね。。

screenX,screenY→スクリーン(モニター)上の座標を取得

clientX,clientY(PageX,PageY)→現在ブラウザで表示している領域の左上からの座標を取得。

参考サイト

codezine.jp

2017-09-08

DOMへのアクセス

クロスブラウザ

DOMへのアクセス方法は大きくわけて2つあります。 ①document.getElementById ②document.all

②のケースは知りませんでした。

実際に実行させてみると、

See the Pen aLojJv by satsuki mori (@satsuki) on CodePen.

①＋②どちらも表示 IE7～IE10

①のみ表示 IE Edge,Chrome, 試していませんが、Firefox、Netscape、Safariもこちらのようです。

②のみ表示は IEの4系のみのよう。

そうなると、よほど古いブラウザの対応をしない限り、 ①を使用すれば問題ないようです。

参考サイトブラウザがサポートしているスクリプトを判断する (1/4)：CodeZine（コードジン）

Webの勉強

Web系の作業で得た知識を備忘録として記録。間違ったていたら、ごめんなさい。

Grid System

ViewPort

ViewPortとは

①widthに数値を制定

②widthにdevice-widthを設定

マウスイベントとタッチイベント(Window8対応)

タッチ・マウス両方の開始イベントを登録。

マウス・タッチの両方のイベントが発生してしまうため、2度目を阻止

開始イベントの種類(event.type)で、マウスかタッチかを判断

move,endイベントをバインド

endイベントの発火で、move、endイベントをアンバインド

デフォルトのスワイプ動作をCSSで禁止にするみたいです。

マウス・タッチイベントの発火順

タッチイベントとマウスイベント

コンテンツ表示領域の取得方法

eventオブジェクト

DOMへのアクセス