そこで今回、僕自身がレスポンシブサイトを作成する際にどのようなJSを準備として毎回書いているかご紹介したいと思います。

現在のレイアウトの状況を判別する関数の作成

レスポンシブサイトを作成していると、「スマホレイアウトの時だけこの処理をしたい」といったような、現在のレイアウトの状況を取得したい場面が頻繁に登場します。

そのため、以下のようなコードをいつも記述しています。

CSS

#MqMark {
  display: none;
}

@media (min-width: 1016px){
  #MqMark {
    font-family: 'pc';
  }
}
@media (min-width: 768px) and (max-width: 1015px) {
  #MqMark {
    font-family: 'tb';
  }
}
@media (max-width: 767px) {
  #MqMark {
    font-family: 'sp';
  }
}

javascript

var MYAPP = {};

(function($, win) {
  var $win = $(window);

  MYAPP.getLayout = function() {
    var $mqMark = $('#MqMark');
    var layout  = $mqMark.css('font-family').replace(/"/g, '');

    return layout;
  };
})(jQuery, window);

解説

このコードでは、「<div id=”MqMark”></div>」といったメディアクエリ判定用（display: none;を使用して見栄えに影響がないようにしている）の要素をHTMLに記述しておき、その要素の状態を取得することにより現在のレイアウトを判別しています。

前述のようなコードを準備しておくと

if (MYAPP.getLayout() === 'sp') {
  // スマホレイアウトの時だけこの中に入る
}

といったような条件分岐が可能になります。

特徴的なのは、現在のレイアウトの取得を、「#MqMark」のfont-familyによって行っている点です。（こちらの記事を参考にさせていただきました。）

実装が気持ち悪いことは気持ち悪いのですが、CSS側との連携等考えると一番スマートなやり方だと感じ自分は使わせて頂いています。

レイアウト切り替わり時にイベントを発生させる。

他にも、「レイアウトが切り替わった瞬間に特定の処理をさせたい」等といった場面も頻繁に遭遇します。

自身がよく遭遇する場面としては、「PCレイアウトで３列で並べているパネル型のアイテムがあり、それをtile.jsで高さを揃えている」状況でかつ「スマホレイアウトだと３列から２列に切り替わる」といったような場面によく遭遇します。こういう場合に切り替わりのタイミングに合わせて処理を実行する必要が出てきます。

このために、以下のコードを前述のコードに加えて準備しています。

javascript

(function($, win) {
  var $win = $(window);

  MYAPP.EVENT_LAYOUTCHANGE = 'layoutchange';

  $(function() {
    // layout trigger
    (function() {
      var oldLayout = false;
      $win.on('resize load', function() {
        var currentLayout = MYAPP.getLayout();

        if (currentLayout !== oldLayout) {
          var event = $.Event(MYAPP.EVENT_LAYOUTCHANGE);

          event.newLayout = currentLayout;
          event.oldLayout = oldLayout;

          $win.trigger(event);

          oldLayout = currentLayout;
        }
      });
    })();
  });
})(jQuery, window);

解説

やってることはシンプルで、resizeイベント発生時に現在のレイアウトを取得して、レイアウトが変わっていれば「layoutchange」イベントをトリガーしています。

このコードを準備しておくと、

var $win = $(window);

$win.on(MYAPP.EVENT_LAYOUTCHANGE, function(event) {
  switch(event.newLayout) {
    case 'pc':
      console.log('layout to pc');
      break;
    case 'tb':
      console.log('layout to tb');
      break;
    case 'sp':
      console.log('layout to sp');
      break;
  }
});

このような方法で、レイアウト切り替わり時に特定の処理を実行することが出来ます。

以上

レスポンシブサイトはHTML/CSSだけでなく、javascriptもレイアウト切り替わりという挙動があることから必然的に複雑になってしまいます。

下手に書いてしまうと普通のサイトより顕著にコードがどんどんカオスになってしまうので、出来るだけよくあるパターンに関してはまとめておいて綺麗に書けるようにしておきたいですね。

以上、たにっぱでした〜

そこで今回はPhotoshopのスクリプトの作り方をご紹介したいと思います。

本記事の対象者

• Photoshopのスクリプトを書いて業務を効率化したいと考えている
• Javascriptはそれなりに書ける
• 英語ドキュメントを見ても体調が悪くならない

基本

Photoshopのスクリプトは複数の言語を選択することが出来るのですが、今回は一番慣れている人が多いであろうJavascriptで作成していきます。

参考ドキュメント

• 公式ドキュメント（英語）
  Adobe Photoshop Scripting | Adobe Developer Connection
  ※こちらの「Photoshop CC JavaScript Reference 」
• サンプルスクリプト
  Adobe Photoshop CS6自動化作戦
• 日本語ドキュメント（一部）
  Adobe CS6 バージョンJavaScript リファレンス

公式ドキュメントは英語なので中々読むのが辛そうに見えるかもしれませんが、全部読む必要はありません。作りたいスクリプトに必要そうなキーワードで検索して（例えばWeb用に保存を自動化したいなら「Web」で検索するとか）関係ありそうな箇所を読むだけでスクリプトを作れることが多いので、今回を期に苦手意識を克服しましょう！

スクリプトファイルの配置場所

• Mac：/Applications/Adobe Photoshop XXXX/Presets/Scripts
• Windows：C:¥Program Files¥Adobe¥Adobe Photoshop XXXX¥Presets¥Scripts¥

スクリプトファイルの拡張子は「jsx」作成してください。
（今回は例として「myscript.jsx」というファイルを作成したいと思います。）

スクリプトの実行方法

「myscript.jsx」を前述のディレクトリに作成した後Photoshopを起動すると、下の画像のように「ファイル」＞「スクリプト」内に「myscript」という項目が出来ていると思います。これをクリックすると「myscript.jsx」に記述されたスクリプトが実行されます。

デバッグ等のために値を出力させたい

alertを使用することが可能です。

var tmp = 100;
alert(tmp); // 100がポップアップで表示される

実際に、「myscript.jsx」に上記のコードを入力して実行すると、100がポップアップで表示されるはずです。

他の方法もあるのですが、alertを使用するのが一番手軽な方法かと思います。

実例

例1：現在アクティブなファイルのパスを表示する

例として、現在アクティブなファイルのパスを表示するスクリプトを書いてみましょう。

var doc = app.activeDocument;
alert(doc.path);

「app.activeDocument」は現在アクティブなファイルの情報が入っているDocumentオブジェクトを返却します。

Documentオブジェクトには色々プロパティがあるのですが、一部を紹介すると。

等があります。

というわけで、アクティブなファイルのパスを表示するスクリプトは、

var doc = app.activeDocument;
alert(doc.path);

となります。
詳しくは公式ドキュメントを参照してください。

このスクリプトを実行すれば現在アクティブなファイルのパスが表示されるはずです。

例2：現在アクティブなファイルをjpg出力する

次は一歩進んでファイルをjpg出力してみましょう。

画像を出力するには「exportDocument」を使用します。

実際のコードは以下のとおりです。
（これからはコードの説明は必要な箇所にコメントで記述します。）

var doc = app.activeDocument;

// Fileの引数に、出力したい画像のフルパスを渡す
var file    = new File('~/Desktop/tmp.jpg');

// optionsは書き出しオプション
var options = new ExportOptionsSaveForWeb();

// 画像形式
options.format    = SaveDocumentType.JPEG;
// 最適化の有無
options.optimized = true;
// 画質
options.quality   = 100;

doc.exportDocument(file, ExportType.SAVEFORWEB, options);

画像を出力したいファイルを開いた上で、スクリプトを実行すると画像が出力されるはずです。

例3：ダイアログから選択したフォルダ直下にあるpsdファイルをjpgで一括出力する

さらに応用編で、例2の作業をフォルダに対して出来るようにしてみましょう。

その前に、まず「選択したフォルダのpsdファイルを開き、ファイル名を表示して閉じる」スクリプトを準備として作ってみましょう。

// Folder.selectDialogでダイアログを開き、フォルダを選択させる事ができる。
var folderObj = Folder.selectDialog("フォルダーを選択してください。");

// ユーザーが「キャンセル」を押した場合は処理を続けないための分岐
if (folderObj) {

  // getFilesでフォルダ直下にあるファイル一覧を取得出来ます。
  // 引数にはファイル名の条件を指定することが出来ます。
  // 今回は「*.psd」とし、拡張子が「psd」のものだけ取得するようにしています。
  var fileList = folderObj.getFiles('*.psd');

  // 取得したファイルそれぞれに対して処理するためにforでループ
  for (var i=0; i<fileList.length; i++) {

    var file = fileList[i];

    // openで指定したファイルをPhotoshopで開くことが出来ます。
    open(file);

    // 開いたファイルはアクティブな状態になるので、「app.activeDocument」で
    // Documentオブジェクトが取得出来ます。
    var doc = app.activeDocument;

    alert(doc.name);

    // closeでファイルを閉じる事が出来ます
    // 「SaveOptions.DONOTSAVECHANGES」は「変更を保存せずに閉じる」オプションです。
    doc.close(SaveOptions.DONOTSAVECHANGES);
  }
}

さらにこれを応用して、「ダイアログから選択したフォルダ直下にあるpsdファイルをjpgで一括出力する」スクリプトを書くことが出来ます。

やることは「alert(doc.name)」の部分を例2の内容で置き換えるだけです。

var folderObj = Folder.selectDialog("フォルダーを選択してください。");

if (folderObj) {
  var fileList = folderObj.getFiles('*.psd');

  for (var i=0; i<fileList.length; i++) {
    var file = fileList[i];
    open(file);
    var doc = app.activeDocument;


    /***********************************************************************
    ここから例2の内容
    **********************************************************************/
    // ここだけ、例2のままだと全て同じ名前で出力されてしまうので、
    // それぞれの名前でjpgファイルが出力されるように変更しています。
    var file    = new File('~/Desktop/' + doc.name.replace('.psd', '.jpg'));
    var options = new ExportOptionsSaveForWeb();

    options.format    = SaveDocumentType.JPEG;
    options.optimized = true;
    options.quality   = 100;

    doc.exportDocument(file, ExportType.SAVEFORWEB, options);
    /***********************************************************************
    ここまで例2の内容
    **********************************************************************/


    doc.close(SaveOptions.DONOTSAVECHANGES);
  }
}

これを実行すると、選択したフォルダ直下のpsdファイルがデスクトップにjpg画像として出力されるはずです。

以上

大量の画像の処理はめんどくさくて時間がかかる作業の割に得るものはほとんど無いので、積極的に自動化していきたいですね。

以上、たにっぱでした〜

参考記事

PhotoshopExtensionのつくりかたとか – Qiita

結構有名な落とし穴なのですが、知っていないとテスト漏れで不具合を出したりしてしまいますので、今回はその落とし穴と対処法をご紹介したいと思います。

月の加減算の落とし穴

「2015年1月31日の翌月の年月日を取得して出力」なんて処理を書く場合、以下のようになるかと思います。

<?php
  // PHP
  $dat = new DateTime('2015/01/31', new DateTimeZone('Asia/Tokyo'));
  echo $dat->add(new DateInterval('P1M'))->format('Y/m/d');

// JavaScript
var dat = new Date(2015, 0, 31);
dat.setMonth(dat.getMonth()+1);
console.log(dat.toLocaleString());

この結果は、両方共「2015年3月3日」となります。イメージとしては「2015年2月28日」が帰ってきそうなのでかなり違和感がある結果ですよね？

理由

これは、

「1月31日に1月足す」→「2月31日？」→「でも2月は28日までやから3日オーバーしてんな…」→「よっしゃ気を利かして3月3日にしといたろ！」

という処理を中でしているためこのような結果となってしまっています。

確かに処理として間違っていないと言えば間違っていないのですが、大体こういう場合クラスを使用している側として欲しい答えは「2月28日」ですよね。

対処法

必要なのが「年月」のみで日付まで必要でないのであれば、以下の方法で対処が可能です。

対処法の概要

今回の問題は「1月31日」のように、月によって存在しない日付を元に加減算している所が原因となっています。

そのため、毎月必ず存在する日付（例えば「1日」は毎月ありますよね）に変えてから加減算するようにすれば問題は起こりません。

PHPでの例

<?php
  $dat = new DateTime('2015/01/31', new DateTimeZone('Asia/Tokyo'));
  echo $dat->modify('first day of')->add(new DateInterval('P1M'))->format('Y/m');

JavaScriptでの例

var dat = new Date(2015, 0, 31);
var datFirstDay = new Date(dat.getFullYear(), dat.getMonth(), 1);
datFirstDay.setMonth(datFirstDay.getMonth()+1);
console.log(datFirstDay.toLocaleString());

これでPHP,JavaScript共に「2015年2月」を指すようになります。

以上

日付関連のクラスには落とし穴が結構多いので、たかが日付と侮らず注意して扱いましょう！

以上、たにっぱでした〜

※※※※※2017年6月 現在 Google Map APIの利用のために API KEY取得が必要になっております。

色々なサイトを見て回っていると、GoogleMapのデザインがグレースケールだったり、マーカーが普通と違うデザインになっていたり、カスタマイズされたGoogleMapを利用しているサイトをよく見かけますよね。

今回は、GoogleMapをカスタマイズする方法を、グレースケール&オリジナルマーカーのデザインを例としてご紹介したいと思います。

今回の目標

今回の目標は、↑のようなグレースケールでマーカーにオリジナル画像を使った地図を表示することです。

では、まず基本から見て行きましょう！

基本

カスタマイズのためにはGoogleが提供しているGoogleMapApi v3を利用します。API?v3?ってなる人も多いと思いますが、とりあえずそういう名前なんだってスルーしてもらって構わないです。

では、とりあえず例として弊社を表示する地図を表示してみましょう。

ソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Google Map Custom Tutorial</title>

  <style>
    /*
    地図を表示するための領域のスタイル指定
    サイズがしていされていないと地図が正常に表示されないので必ず指定しましょう
    */
    #map {
      width: 600px;
      height: 300px;
    }
  </style>
</head>
<body>

  <!-- 地図を表示するための領域 -->
  <div id="map"></div>

  <script>
    function initMap() {

      // 地図の初期中心座標を指定
      var latLng = new google.maps.LatLng(34.683497, 135.4888082);

      var map = new google.maps.Map(
        // getElementByIdには、地図を表示するための領域に
        // 指定したidを設定すること。（今回は「map」）
        document.getElementById("map"),
        {
          zoom: 18,  // 地図の初期拡大率
          center: latLng, // 先ほど設定した中心座標を設定
          scrollwheel: false  // マウスホイールで拡縮しなくなる
        }
      );

      // マーカーの設定
      var marker = new google.maps.Marker({
        position: latLng,
        map: map
      });
    }
  </script>
  <script src="https://maps.googleapis.com/maps/api/js?callback=initMap" type="text/javascript"></script>
</body>
</html>

結果

説明

結果を見てもらえばわかりますが、なんの変哲もないGoogleMapですね。こんな表示の仕方ならわざわざGoogleMapAPIを利用する必要もないのですが、これからカスタマイズする為の基本形になりますのでわりと重要です。

コメントでも注釈を入れていますが、注意点としては、

• 21行目：地図を表示する為の領域をdivタグ等で作り、idを指定しておく
• 32行目：スクリプト内のgetElementByIdでは、地図表示領域のidを指定する
• 7~16行目：地図表示領域にはサイズを指定する
• 47行目：callback=~にはscriptタグで指定した関数名（今回は24行目の関数）を設定する

また、デフォルトだと地図上でマウスホイールを回した際に地図が拡縮するのですが、ページをスクロールしようとしたのに地図が拡縮するといった事が頻繁に発生し、ものすごいストレスフルなので「scrollwheel: false」の指定でマウスホイールに反応しないようにしています。マウスホイールでの拡縮を残しておきたい場合はこの行は削除しましょう。

マーカーにオリジナル画像を指定する

次に、マーカーをオリジナル画像に変える方法を説明したいと思います。

ソースコード

scriptタグ内以外は先ほどと同じなので、scriptタグ部分のみを記載します。

<script>
  function initMap() {

    // 地図の初期中心座標を指定
    var latLng = new google.maps.LatLng(34.683497, 135.4888082);

    var map = new google.maps.Map(
      // getElementByIdには、地図を表示するための領域に
      // 指定したidを設定すること。（今回は「map」）
      document.getElementById("map"),
      {
        zoom: 18,  // 地図の初期拡大率
        center: latLng, // 先ほど設定した中心座標を設定
        scrollwheel: false  // マウスホイールで拡縮しなくなる
      }
    );

    /***********************************************************************
    変更部分ここから
    **********************************************************************/
    // マーカーの設定
    var markerImg = {
      url: '/img/marker.png'  // マーカーの画像ファイルを指定
    };
    var marker = new google.maps.Marker({
      position: latLng,
      map: map,
      icon: markerImg
    });
    /***********************************************************************
    変更部分ここまで
    **********************************************************************/

  }
</script>

結果

マーカーの画像が変わりました。このカスタマイズは非常に簡単ですね。

Tips: オリジナルマーカーのRetina対応

「marker.png」を実際に表示させる2倍のサイズで用意し、「var markerImg」の部分を以下のように変更すればRetina対応できます。

var markerImg = {
  url: '/img/marker.png',
  scaledSize : new google.maps.Size(40, 46)
};

「scaledSize」では、画像のサイズの1/2サイズを指定しています。

Tips: マーカーをクリックした時に特定の処理を行いたい。

少し応用になるのですが、マーカーをクリックした際に特定の処理をする必要が出る場合が結構あります。

その場合は以下の様なコードを追加することで対応できます。

marker.addListener(
  'click',
  function(){
    // ここにさせたい処理を入れる
    alert('marker clicked.')
  }
);

地図をグレースケールにする

では最後は、地図自体のデザイン変更を説明したいと思います。

今回はグレースケールにする方法を例とします。

ソースコード

<script>
  var map;
  function initMap() {

    // マップ基本設定
    var latLng = new google.maps.LatLng(34.683497, 135.4888082);
    map = new google.maps.Map(
      document.getElementById("map"),
      {
        zoom: 18,  // 拡大率
        center: latLng,
        scrollwheel: false  // マウスホイールで拡縮しなくなる
      }
    );

    // マーカー設定
    var markerImg = {
      url: '/img/marker.png'
    };
    var marker = new google.maps.Marker({
      position: latLng,
      map: map,
      icon: markerImg
    });

    /***********************************************************************
    変更部分ここから
    **********************************************************************/
    // 地図をグレースケールに
    var mapStyle = [
      {
          "stylers": [
            { "saturation": -100 }
          ]
      }
    ];
    var mapType = new google.maps.StyledMapType(mapStyle);
    map.mapTypes.set('GrayScaleMap', mapType);
    map.setMapTypeId('GrayScaleMap');
    /***********************************************************************
    変更部分ここまで
    **********************************************************************/

  }
</script>

結果

説明

肝は、

var mapStyle = [
  {
      "stylers": [
        { "saturation": -100 }
      ]
  }
];

の部分です、この部分で地図のデザインを指定しています。

「saturation」は「彩度」という意味で、この値によって色の鮮やかさが変わります。「-100」が一番小さい値で、この最低値を指定することで地図がグレースケールになります。

この設定ですが、Google Maps API Styled Maps Wizardを利用することで視覚的に設定値を得ることが出来ます。

今回のグレースケールのパターン以外にも、設定次第で色々なスタイルを作成出来ますので、試してみましょう。

以上

以上で簡単なGoogleMapのカスタマイズが出来るようになりました。GoogleMapのカスタマイズは、特にデザイン性の高いサイトで必要になることが多いので是非出来るようになっておきましょう。

以上、たにっぱでした〜

今回はそんなミスを見つけやすくするために、ブックマークレットを使用してチェックの補助ツールを簡単に作成する方法をご紹介したいと思います。

ブックマークレット

ブラウザはブックマークやURLバーから任意のjavascriptを実行することが出来ます。この時に実行するプログラムのことを「ブックマークレット」と言います。

簡単な例

URLバーに

javascript:alert('ブックマークレットのテスト');

と入れてEnterしてみて下さい。アラートが表示されたかと思います。

これが簡単なブックマークレットの例です。

ブックマークレットは

javascript:(実行したいjavascriptコード)

の形式でURLバー、もしくはブックマークから実行することが出来ます。

aタグの反応範囲を視覚的に表示

それでは、ブックマークレットを利用して冒頭に挙げた「aタグの反応範囲が小さすぎる」というミスを防ぐために、aタグの大きさを視覚的に表示してくれるブックマークレットを作ってみましょう。

javascriptソースは非常に簡単で、以下のとおりです。

(function(){
  $('a').css('outline', '1px solid red');
})();

aタグにoutlineを設定することでaタグの範囲を視覚的に表示させてしまいます。borderと違ってoutlineはレイアウトに影響を与えないので、今回のようなデバッグ目的に最適です。

ブックマークレットは「javascript:」を先頭に付けるだけなので以下の様になります。

javascript:(function(){
  $('a').css('outline', '1px solid red');
})();

これをURLバーに貼り付けてEnterしてみてください。aタグの要素が赤く囲まれるはずです。（GoogleChrome/Macだとペーストする際に「javascript:」の記述が消えてしまったので、その場合は直接入力してください。）

サイトがjQueryを読み込んでいない場合

先ほどのソースコードはjQueryを使用しているため、このままだとjQueryを読み込んでいないサイトでは動作しません。

そのため、jQueryを読み込むコードを追加しましょう。ソースコードは以下のとおりです。

(function(){
  function main() {
    $('a').css('outline', '1px solid red');
  }
  if (typeof jQuery === 'undefined') {
    var scrTmp = document.createElement('script');
    scrTmp.type = 'text/javascript';
    scrTmp.src = '//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js';
    document.body.appendChild(scrTmp);
    scrTmp.onload = main;
  } else {
    main();
  }
})();

関数mainに実際に実行したい処理を記述し、jQueryがサイトに読み込まれていない場合は、jQueryを読み込んでから実行するようになっています。

このようにしておけばjQueryを読み込んでいないサイトでも使える汎用性の高いブックマークレットが作成できます。

以上

今回はaタグの視覚的な表示のみを例として挙げましたが、発想次第で色々なチェックが可能です。

例えば、

• モバイルサイトなのに奇数サイズの画像を使用していないか
• imgタグのwidth/heightの指定が本来の画像サイズと異なっていないか
  また、モバイルサイトの場合本来の画像サイズの半分のサイズの指定となっているか
• 1クリックでW3Cのチェックをする
  （この場合はサーバーサイドのプログラムも少し必要かと思います）

などが挙げられます。

チェック漏れは永遠の課題ではあるのですが、人間の注意力には限界があるので出来る限りツールやシステムに頼って、注意しなくてもミスが見つかるようにしたいですね。

以上、たにっぱでした〜

ただ、まだiOS7使用者が無視できない割合で居ることから、案件の対応OSにiOS7が入ることも多く、iOS7以下でスクロールイベントを取得したいという状況も結構発生するかと思います。

そこで、今回はiscroll-probe.jsを使用して、スクロールイベントを擬似的に取得する方法をご紹介したいと思います。

iScroll5ライブラリの取得

iScroll 5, smooth scrolling for the web

上の公式サイトの「DOWNLOAD」リンクからライブラリ一式をダウンロードしてください。

中に多くのファイルが入っていますが、今回使用するのは「build」ディレクトリ内の「iscroll-probe.js」のみですので、「iscroll-probe.js」を適宜好きな場所へ配置してください。

ライブラリの読み込み

headタグ内で、iscroll-probe.jsを読み込んでください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="./common/js/lib/iscroll-probe.js"></script>

今回は一部jQueryを使用するためjQueryも読み込んでいます。使用しない場合は読み込む必要はありません。

HTML

iscrollでは、コンテンツ全体を２つのラッパーで囲む必要があります。

今回は以下の様な構造にします。

<body onload="loaded()">
  <div id="WholeWrapper">
    <div id="WholeInner">
      <!-- コンテンツを記述 -->
    </div>
  </div>
</body>

idやクラスには特に規定は無いので自由に付けて大丈夫です。

bodyタグに記述しているonloadコールバック関数に関しては後述します。

CSS

一番外側のラッパーに対しては下記のようなスタイルを当てる必要があります。

#WholeWrapper {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
}

javascript

<script>
  var myScroll;
  function updatePosition () {
    $(window).trigger('iscroll', {x: this.x, y: this.y});
  }

  // onloadイベント発生時にこの関数を呼び出す
  function loaded () {
    myScroll = new IScroll('#WholeWrapper', {
      deceleration: 0.004, // スクロール時の慣性の強さ
      probeType: 3,
      mouseWheel: true
    });

    myScroll.on('scroll', updatePosition);
    myScroll.on('scrollEnd', updatePosition);
  }

  document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

  $(function(){
    $(window).on('iscroll', function(e, pos){
      console.log(pos); // スクロール中にもスクロール位置が取得可能
    });
  });
</script>

IScroll初期化時に指定している「deceleration」は慣性の強さで、この値が大きいほどスクロールがすぐ停止するようになります。初期値は「0.0006」なのですが、この値だとiOS Safariの慣性と比較して慣性が異常に強く、スクロールしすぎてしまうので適宜値を調整しましょう。

スクロール系関数

iScrollには様々な関数が用意されているのですが、その中でも一番使用頻度が多いと思われるスクロール系関数を紹介したいと思います。

scrollTo(x, y, time, easing)

(x, y)地点へtimeミリ秒かけてスクロールします。

myScroll.scrollTo(0, -1000, 500, IScroll.utils.ease.elastic);

easingはスクロールの際の加減速の仕方のバリエーションで、quadratic,circular,back,bounce,elasticの5パターン存在しています。

scrollToElement(el, time, offsetX, offsetY, easing)

要素elまでtimeミリ秒かけてスクロールします。その際、止まる位置はoffsetの指定によってずらすことが可能です。easingはscrollToと同じです。

myScroll.scrollToElement(document.getElementById('TargetId'), 1000);

iScrollは構造上アンカーリンクが効かなくなってしまうので、代わりにこのscrollToElementを使用して機能を実装する必要があります。

他にも、現在のスクロール位置から相対的に移動するscrollByが存在しています。

以上

これで一応iOS7以下でもスクロールイベントを取得出来るようにはなるのですが、前述のとおり、iScrollは内側のラッパーをtranslateにより移動させることにより擬似的にスクロールイベントを再現している仕組みのため、アンカーリンクが正常に機能しません。他にも正常に動作しなくなる、または通常より実装に工数が大幅にかかってしまう機能がある可能性が高いので、使用にはかなり気をつける必要があります。

また、iOS7では動作することを確認しましたが、iOS7未満やAndroidでは動作未確認ですのでご注意ください。

以上、たにっぱでした〜

そこで今回は、シンプル・確実に現在の表示レイアウトを判断する方法をご紹介したいと思います。

現在の表示レイアウトの判断方法

どのように判断するかというと、スマホ時（もしくはPCレイアウト時）のみに出現する要素を目印として、それが表示されているのかされていないのかを元に判断します。
よく目印として使うのはスマホレイアウト時にのみ出るハンバーガーボタン（ナビ開閉のボタン）ですね。

具体例は以下のとおりです。

<style>
  #MqMark {
    display: block;
  }
  @media screen and (max-width: 640px) {
    #MqMark {
      display: none;
    }
  }
</style>
<div id="MqMark"></div>

上のようなPCレイアウト時のみ出現する要素を目印とします（そのような目印がない場合は作ってしまいましょう）。

javascript部分は以下のようになります。

<script>
  $(function() {
    $(window).on('resize', function(){
      if ($('#MqMark').is(':visible')) {
        // PCレイアウト
        console.log('pc');
      } else {
        // スマホレイアウト
        console.log('sp');
      }
    });
  });
</script>

この方法だと現在のレイアウトの状態を正確に取得出来るのでオススメです。

他の方法

他の方法として「window.matchMedia」を使用する方法があります。

if (window.matchMedia('screen and (max-width:640px)').matches) {
  // スマホレイアウト
  console.log('sp');
} else {
  // PCレイアウト
  console.log('pc');
}

以上

これからレスポンシブウェブデザインでjavascriptを書くという方や、これまでwidthを使って判定していたという方は是非今回ご紹介した方法を使ってみてください。

以上、たにっぱでした〜

$('#TargetID').attr('checked')

で取得しようとしたのですが、この取得方法には問題がありうまく状態を取得することが出来ませんでした。

そこで、今回はjQueryでのチェックボックスやラジオボタンの状態を取得する方法に関して説明したいと思います。

取得方法

まず、結論として取得する方法を紹介します。

方法は下記の2通りです。

$('#TargetID').prop('checked')

$('#TargetID').is(':checked')

両方共、チェックされていればtrue、チェックされていなければfalseが返却されます。

個人的には後者の方が好みですが、どちらでも問題ありません。

また、checkedだけでなくselectedやdisabledといったプロパティに関しても、attrではなくpropやisを使った方法で取得しましょう。

実例

よくあるパターンとしては、フォームを送信する際、「同意する」チェックボックスにチェックが入っていない状況では送信ボタンが押せないようにするというものを例として挙げたいと思います。

HTML

<input id="AgreeBtn" type="checkbox">同意する<br>
<input id="SubmitBtn" type="submit" disabled>

JavaScript

$('#AgreeBtn').on('change', function(){
  if ($(this).is(':checked')) {
    $('#SubmitBtn').prop('disabled', false);
  } else {
    $('#SubmitBtn').prop('disabled', true);
  }
});

動作例

同意する

attrによる取得の問題点

これから先は正直知らなくてもあまり問題が無い内容なのですが、何故attrで状態を取得出来ないのか気になり調べてみたのでその内容を書いておきたいと思います。

$('#TargetID').attr('checked')

冒頭でも出したこのコードですが、一見普通に使えそうに見えますが、かなり問題があります。

というのも、checkedの取得にattrを使用した場合、返却値は「checked」か「undefined」になり、さらに対象がチェックされている状態でも状況によってはundefinedが返却されます。つまるところ全く使い物になりません。

これは

• attrがDOMの属性を元に値を取得する点
• checkboxにチェックを入れても、DOMの属性は変わらない点

この2点が理由です。

attrがDOMの属性を元に取得する

DOMの属性っていうのは例えば、

<a href="about.html"></a>

このaタグでいうとhrefが属性で、その値がabout.htmlですね。

では、今回問題になっているcheckboxの場合

<input type="checkbox" checked>

となるのですが、このHTMLは以下の内容と同じ意味を持ちます。

<input type="checkbox" checked="checked">

つまり、HTMLにcheckedを指定することは「checked属性にcheckedを指定」したのと同じ意味です。なのでattrでcheckedが帰ってくるわけですね。

逆にcheckedの指定がない場合は、そもそもchecked属性自体がDOMに存在していないのでundefinedが返却されることとなります。

checkboxにチェックを入れてもDOMの属性は変わらない

この画像はチェックボックスにチェックを入れた時のDOMの状態を開発ツールで表示したものなのですが、見てわかる通りチェックボックスにチェックが入っているのにcheckboxのDOMにはchecked属性が追加されていません。

attrはDOMの属性を引っ張ってくるので、今回のパターンのようにDOMの状態が変わらないものに関してはattrでは状態を取得しようが無いということです。

以上

propやisなんて関数は自分も最初は存在自体を知らなかったのですが、今回のように無いと困ることもあるのでぜひ覚えておきましょう。

以上、たにっぱでした〜

サイズや座標を取得する関数は複数あって「どれがどこのサイズ、座標を取得するの？」ってごっちゃになりがちなので、今回はサイズ、位置関係のそれぞれのjQuery関数の違いなどをまとめて紹介したいと思います。

目次

• サイズ取得関係の関数
  • サイズ取得の基本
  • ページ全体のサイズやブラウザサイズを取得したい
• 要素の座標の取得方法
  • 座標取得の基本
  • 番外編：offsetParentってoffsetと関係あるの？
• スクロールした距離を取得する方法

サイズ取得関係の関数

サイズ取得の基本

サイズの取得には、以下の4つの方法があります。

各方法を画像でわかりやすくするとこんな感じです。

ここで注意しないといけないのは、width()はcssで設定したwidthとは違うという点です。

どういうことか、実例を示します。

<style>
  #Size1Box {
    width: 100px;
    height: 100px;
    padding: 20px;
    margin: 10px;
    border: 5px solid black;
    background: red;
    box-sizing: border-box;
  }
</style>

このようにborder-boxを指定した要素を用意します。この要素の各サイズを出力すると下記のようになります。

このように、スタイルでは「width: 100px」と指定したのに、width()の出力値が50となっているはずです。
これは、「box-sizing: border-box;」により「中身の幅 + padding + border = cssのwidth」となり、jQueryのwidth関数は「中身の幅」を返すためcssのwidthからpaddingとborder分差し引いた50pxが返されるという事です。

jQueryのwidth関数は「中身の幅」を取得するための関数ということに注意しましょう。
cssで設定されたwidthの値を取得したい場合は、

$('#IdName').css('width');

ページ全体のサイズやブラウザサイズを取得したい

document,windowを使用すれば可能です。

ページ全体のサイズは

$(document).width();
$(document).height();

ブラウザサイズは

$(window).width();
$(window).height();

で取得出来ます。（document,windowに対するinnerWidthやouterWidthは、widthと同じ値を返します。）

要素の座標の取得方法

座標取得の基本

cssのpositionはまだよくわからない、という方は、CSS positionを使ってみよう！や、見ながら覚えよう！positionプロパティ「absolute」と「relative」についてのお話を参考に読んでみてください。

offset()とposition()は、

{
  top: xxx,
  left: xxx
}

という形の連想配列を返すので、topかleftのどちらかだけ必要、という場合は

var topOffset =  $('#IdName').offset().top;
var leftOffset = $('#IdName').offset().left;

というような書き方で片方だけを取得出来ます。

番外編：offsetParentってoffsetと関係あるの？

答え：ないです。

offsetParentは、positionが設定されている先祖要素の中で一番近い物を取得する関数です。

名前からoffsetと関係がありそうに見えてしまいますが、どちらかというと関係あるのはpositionですね。

スクロールした距離を取得する方法

どれだけページをスクロールしたかは「scrollTop」関数を使用します

var vScrollDistance = $(window).scrollTop();

また、横方向にどれだけスクロールしたかも「scrollLeft」関数で取得出来ます。

var hScrollDistance = $(window).scrollLeft();

それぞれは下記のようなイメージです。

以上

以上がjQueryでのサイズ、座標取得方法のまとめでした。

サイズの取得なんかはwidthとinnerWidthがごっちゃになりがちなので注意しておきましょう。

以上、たにっぱでした〜。

この概念を知らないと、理解不能な状況に陥る事があるので、今回はバブリングを紹介したいと思います。

バブリングとは？

バブリングとは、「ある要素でイベントが発生した際に、親や祖先要素にも同じイベントが発生する事」です。

上の画像のように、子要素をクリックしてclickイベントが発生すると、その親要素、祖先要素でもclickイベントが発生します。

具体例

以下の例では、表示されている3つのボックスが親子関係で、それぞれにclickイベントを設定し、クリックするとアラートを出すようにしています。

ここで、ChildBox(青色のボックス)をクリックすると、ChildBoxのアラートだけでなく、ParentBoxやAncestorBoxのアラートも発生するはずです、これがイベントのバブリングの実例です。

<style>
  .rectBox {
    width : 50%;
    height: 50%;
  }
  .rectBox.root {
    width : 200px;
    height: 200px;
  }
  .rectBox.black {
    background-color: #2c3e50;
  }
  .rectBox.red {
    background-color: #c0392b;
  }
  .rectBox.blue {
    background-color: #3498db;
  }
</style>

<script>
  $(function() {
    var $ancestor = $('#AncestorBox');
    var $parent   = $('#ParentBox');
    var $child    = $('#ChildBox');

    $ancestor.on('click', function(e) {
      alert('I am ancestor');
    });

    $parent.on('click', function(e) {
      alert('I am parent');
    });

    $child.on('click', function(e) {
      alert('I am child');
    });

  });
</script>

<div id="AncestorBox" class="rectBox root black">
  <div id="ParentBox" class="rectBox red">
    <div id="ChildBox" class="rectBox blue"></div>
  </div>
</div>

stopPropagationによるバブリングのストップ

この親にもイベントが発生していくバブリングの仕組みが都合が良い場合もあるのですが、問題がある場合も度々発生します。

その場合は、stopPropagationによりバブリングをストップさせることが可能です。

先ほどのバブリングの例を、stopPropagationを使用してバブリングしないようにした例は以下の通りです。

<script>
  $(function() {
    var $ancestor = $('#AncestorBox');
    var $parent   = $('#ParentBox');
    var $child    = $('#ChildBox');

    $ancestor.on('click', function(e) {
      alert('I am ancestor');
      e.stopPropagation(); // 追加
    });

    $parent.on('click', function(e) {
      alert('I am parent');
      e.stopPropagation(); // 追加
    });

    $child.on('click', function(e) {
      alert('I am child');
      e.stopPropagation(); // 追加
    });

  });
</script>

今回のパターンだと、ChildBoxをクリックした場合でもアラートは１回しか発生しなかったはずです。

また、stopPropagation以外に「return false」でもバブリングをストップすることが可能です。

「return false」にはバブリングのストップ以外に、要素本来のイベントの動作（aタグの場合clickイベントに反応してリンク先に飛ぶ、等）をしないようにする効果もあるので、状況に応じて使い分けましょう。

mouseover/mouseoutとmouseenter/mouseleaveの違い

要素上にマウスが乗った・離れた際に発生するmouseover/mouseout及びmouseenter/mouseleaveイベントの違いの一つはイベントのバブリングが発生するか否かです。

mouseover/mouseoutイベントではバブリングが発生しますが、mouseenter/mouseleaveイベントはバブリングが発生しません。

具体例

実際に問題が発生する具体例として、「赤い領域にマウスが乗ったら、領域が一回点滅するような演出」を実装する必要が出てきたとします。

何も考えずにmouseoverを使用した場合、下記のような実装をしてしまうと思います。

<script>
  $(function() {
    $('#MouseWrapper .parentBox').on('mouseover', function(e) {
      $(this).animate({
        opacity: '0.5'
      }, 'fast').animate({
        opacity: '1'
      }, 'fast');
    });
  });
</script>

<style>
  #MouseWrapper .parentBox {
    width: 100px;
    height: 100px;
    padding: 50px;
    background-color: #c0392b;
  }
  #MouseWrapper .childBox {
    width: 100px;
    height: 100px;
    background-color: #2c3e50;
  }
</style>

<div id="MouseWrapper">
  <div class="parentBox">
    <div class="childBox"></div>
  </div>
</div>

この場合、赤い領域にマウスを乗せたときにちゃんと点滅しますが、何故か黒い領域にマウスが乗った時も点滅してしまいます。

この原因は、mouseover/mouseoutがバブリングを発生させるため、黒い領域に対してmouseoverイベントが発生した際に、親要素である赤い領域にもmouseoverイベントが発生してしまうためです。

他にも、mouseover/mouseoutイベントは子要素から親要素にマウスが移動した際にもmouseoverイベントが発生してしまうため、その時にも点滅してしまいます。

mouseover/mouseoutのようなマウスホバーイベントに関してバブリングが発生してほしい状況もあるかもしれませんが、どちらかというとバブリングしてしまうことによって問題が発生してしまう事が多いためmouseenter/mouseleaveを基本的には使用した方が良いと思います。

以上

バブリングは結構ややこしい概念なのですが、理解しておかないと原因がわからない挙動が発生したりして解決に時間がかかってしまうことがありそうなので、出来るだけ早く理解しておいた方がいいかと思いました。