今回は住所選択用のセレクトボックスをそこそこ簡単に作る方法をご紹介します。
住所を入力するフォーム画面を作成する際には役立つかもしれません！

今回の記事を読むと下記のようなフォームが作成できます。

※「市区町村」は県名入力後にリストが表示されて、「町域」は市区町村入力後に表示されます。
※選択後に読み込みの時間があるので、表示が遅れる場合があります。

「住所.jp」様から住所データのCSVファイルをダウンロードする

元となる住所データは「住所.jp」様のサイトからダウンロードします。

ダウンロードはこちらから！

今回の例では「東京」と「神奈川」のデータをダウンロードします。

ダウンロードしたファイルを解凍すると、下記のファイルが格納されています。
・13tokyo.csv
・14kanaga.csv

上記のファイルを自身の管理しているサーバーに格納します。

※WordPressで上記ファイルを利用する場合は、ファイルの文字コードを”UTF-8″に変更してください。

これで必要なファイルの準備はOKです。

HTMLコードを記述してJavaScriptを仕込む

本サンプルでは下記のようなコードを設置します。

・HTMLコード

<form onsubmit="return selectbox_check();">
  <p>
    県名　　：<select name="pref" id="pref" onChange="setMenuAddressItem(0,this[this.selectedIndex].attributes['title'].value)">
      <option title="0" value="0" selected>----</option>
      <option title="13tokyo" value="東京都">東京都</option>
      <option title="14kanaga" value="神奈川県">神奈川県</option>
    </select>
  </p>
  <p>
    市区町村：<select name="city" id="city" onChange="setMenuAddressItem(1,document.getElementById('pref')[document.getElementById('pref').selectedIndex].attributes['title'].value)">
      <option value="0" selected>----</option>
    </select> 
  </p>
  <p>
    町域　　：<select name="town" id="town">
      <option value="0" selected>----</option>
    </select> 
  </p>
  <input type="submit" value="検索">
</form>

・JavaScript

/** セレクトボックス切り替え関数 **/
function set_menu_address_item(i_type, s_filename){
  if(s_filename != '0'){
    var o_xmlreq = new XMLHttpRequest(); // HTTPでファイルを読み込むためのXMLHttpRrequestオブジェクトを生成
    var s_filepass = 'http://localhost/csv/' + s_filename + '.csv'; // 読み込むファイルのパスを指定
    o_xmlreq.open('get', s_filepass, true); // アクセスするファイルを指定
    o_xmlreq.send(null); // HTTPリクエスト発行

    // レスポンスが返ってきたら続きの処理を行う
    o_xmlreq.onload = function(){
      var a_pref = o_xmlreq.responseText.split("\r\n"); // 改行を区切り文字として行を要素とした配列を生成

      if(i_type == 0){
        // セレクトボックス初期化
        while ( document.getElementById('city').options.length > 0 ) {
          document.getElementById('city').removeChild(document.getElementById('city').firstChild);
        }
        while ( document.getElementById('town').options.length > 0 ) {
          document.getElementById('town').removeChild(document.getElementById('town').firstChild);
        }
        document.getElementById('city').options[0] = new Option('----','0');  //OPTION1番目
        document.getElementById('town').options[0] = new Option('----','0');  //OPTION1番目
        var i_check_index = 0;
        for( var i=1; i<a_pref.length; i++ ){
          // 各行ごとにカンマで区切った文字列を要素とした配列を生成
          var a_pref_disassembly = a_pref[i].split(',');
          if( a_pref_disassembly.length <= 1 ){
            continue;
          }
          var s_city_name = a_pref_disassembly[9].replace(/"/g, '');
          if(document.getElementById('city').options[i_check_index].text != s_city_name){
            document.getElementById('city').options[i_check_index + 1] = new Option(s_city_name,s_city_name);
            i_check_index++;
          }
        }
      } else {
        // セレクトボックス初期化
        while ( document.getElementById('town').options.length > 0 ) {
          document.getElementById('town').removeChild(document.getElementById('town').firstChild);
        }
        // 選択中の要素を抜き出す
        var s_selected_city_name = document.getElementById('city').value;
        document.getElementById('town').options[0] = new Option('----','0');  //OPTION1番目
        var i_check_index = 0;
        for( var i=1; i<a_pref.length; i++ ){
          // 各行ごとにカンマで区切った文字列を要素とした配列を生成
          var a_pref_disassembly = a_pref[i].split(',');
          if( a_pref_disassembly.length <= 1 ){
            continue;
          }
          var s_city_name = a_pref_disassembly[9].replace(/"/g, '');
          var s_town_name = a_pref_disassembly[11].replace(/"/g, '');
          if((s_selected_city_name == s_city_name) && ('　' != s_town_name) && (document.getElementById('town').options[i_check_index].text != s_town_name)){
            document.getElementById('town').options[i_check_index + 1] = new Option(s_town_name,s_town_name);
            i_check_index++;
          }
        }
      }
    }
  } else {
    // セレクトボックス初期化
    while ( document.getElementById('city').options.length > 0 ) {
      document.getElementById('city').removeChild(document.getElementById('city').firstChild);
    }
    while ( document.getElementById('town').options.length > 0 ) {
      document.getElementById('town').removeChild(document.getElementById('town').firstChild);
    }
    document.getElementById('city').options[0] = new Option('----','0');  //OPTION1番目
    document.getElementById('town').options[0] = new Option('----','0');  //OPTION1番目
  }
}

/** セレクトボックス入力チェック関数 **/
function selectbox_check(){
  if(document.getElementById('pref').selectedIndex == 0){
    window.alert('県名を選択してください。');
    return false;
  }
  if(document.getElementById('city').selectedIndex == 0){
    window.alert('市区町村名を選択してください。');
    return false;
  }
  if(document.getElementById('town').selectedIndex == 0){
    window.alert('町域名を選択してください。');
    return false;
  }
  return true;
}

set_menu_address_item関数で住所リストの切り替えを行っています。
selectbox_check関数はフォームで活用する事を想定して、フォーム送信の際のチェックとして追加してみました。

住所リストの表示にはファイルを読み込んでいるので、やや表示が遅れるタイミングがあります。
リスト選択後に軽いロード画面を挟むようにすると、ユーザーが迷わずに入力できそうですね。

今回は東京と神奈川だけのプログラムを作成しましたが、他の都道府県も同じようにファイルをダウンロードしてHTMLコードにちょっと追記するだけで対応はできると思います。

ただし、「住所.jp」様のサイトで提供されている「全国」のデータを使う場合は、ロードが長くてユーザーのストレスになってしまうことが考えられますので注意が必要です。

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

前回は棒グラフや折れ線グラフの表示に関して記事にしました。

今回は、下記の温度計のようなゲージを表示する方法を紹介します。

温度計のようなゲージを表示するサンプルプログラム

下記サイトを参考にしてサンプルプログラムを作成しました。
Visualization: Gauge | Charts | Google Developers

以下サンプルプログラムになります。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {'packages':['gauge']});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Label', 'Value'], // 見出し
      ['Low', 8], // 一つ目のゲージのラベルと値（針の示す位置）
      ['Mid', 53], // 二つ目
      ['High', 93] // 三つ目
    ]);
    var options = {
      width: 600, height: 200, // 表示範囲の横幅・縦幅
      max: 100, min: 0, // ゲージの最大値・最小値
      redFrom: 90, redTo: 100, // 赤枠の最大値・最小値
      greenColor: '#3f9cff', greenFrom: 0, greenTo: 10, // 青枠の最大値・最小値(※本来は緑枠ですが、色を指定して変えています)
      yellowFrom: 70, yellowTo: 90, // 黄枠の最大値・最小値
      majorTicks: ['1','2','3','4','5'], // 基準となる5つの大目盛りのラベル
      minorTicks: 5 // 大目盛りまでの目盛りの個数
    };
    var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>
<div id="chart_div" style="width: 600px; height: 200px;"></div>

サンプルプログラムを実際に動かすと、下記のようなゲージが表示されます。

上記のサンプルはゲージが三つありますが、表示を一つにすることも可能です。
一つにする場合は、下記のような記述になります。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {'packages':['gauge']});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Label', 'Value'], // 見出し
      ['Low', 8] // 一つ目のゲージのラベルと値（針の示す位置）
    ]);
    var options = {
      width: 200, height: 200, // 表示範囲の横幅・縦幅
      max: 100, min: 0, // ゲージの最大値・最小値
      redFrom: 90, redTo: 100, // 赤枠の最大値・最小値
      greenColor: '#3f9cff', greenFrom: 0, greenTo: 10, // 青枠の最大値・最小値(※本来は緑枠ですが、色を指定して変えています)
      yellowFrom: 70, yellowTo: 90, // 黄枠の最大値・最小値
      majorTicks: ['1','2','3','4','5'], // 基準となる5つの大目盛りのラベル
      minorTicks: 5 // 大目盛りまでの目盛りの個数
    };
    var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>
<div id="chart_div" style="width: 200px; height: 200px;"></div>

ちょっと動きが欲しいときは、タイマーをセットして針を動かすと良いかもしれません。
サンプルプログラムは下記になります。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {'packages':['gauge']});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Label', 'Value'], // 見出し
      ['Low', 0], // 一つ目のゲージのラベルと値（針の示す位置）
      ['Mid', 0], // 二つ目
      ['High', 0] // 三つ目
    ]);
    var options = {
      width: 600, height: 200, // 表示範囲の横幅・縦幅
      max: 100, min: 0, // ゲージの最大値・最小値
      redFrom: 90, redTo: 100, // 赤枠の最大値・最小値
      greenColor: '#3f9cff', greenFrom: 0, greenTo: 10, // 青枠の最大値・最小値(※本来は緑枠ですが、色を指定して変えています)
      yellowFrom: 70, yellowTo: 90, // 黄枠の最大値・最小値
      majorTicks: ['1','2','3','4','5'], // 基準となる5つの大目盛りのラベル
      minorTicks: 5 // 大目盛りまでの目盛りの個数
    };
    var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
    chart.draw(data, options);
    setTimeout(function() {
      data.setValue(0, 1, 8); // data配列の"(何行目,何列目,変更値)"を指定する
      chart.draw(data, options); // 再描画
    }, 1000);
    setTimeout(function() {
      data.setValue(1, 1, 53);
      chart.draw(data, options);
    }, 1500);
    setTimeout(function() {
      data.setValue(2, 1, 93);
      chart.draw(data, options);
    }, 2000);
  }
</script>
<div id="chart_div" style="width: 600px; height: 200px;"></div>

上記はsetTimeoutを活用して読み込み後に一度だけゲージの値を変更して動きのあるゲージを表示しています。
ゲージを常に動かしたい場合はsetIntervalを使って常に動かしても面白いかもしれませんね！（用途は不明ですが…ｗ）

更にちょっと補足をすると、上記サンプルの”data.setValue”の箇所を下記に変更すると、指定した秒数の後にゲージのラベルが変化します。

data.setValue(0, 0, 'change');

こちらも用途は不明ですが、針とリンクさせて面白い動きをさせることはできそうですねｗ
実際に作ってみるとこんな感じになります！

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {'packages':['gauge']});
  google.charts.setOnLoadCallback(drawChart2);
  function drawChart2() {
    var gaugelabel = ['わー', 'きゃー','ぎゃー','ぴー','ひょー','うぇー','ひゅー','やー','ぶー','はい'];
    var data = google.visualization.arrayToDataTable([
      ['Label', 'Value'], // 見出し
      ['お楽しみ', 0], // 一つ目のゲージのラベルと値（針の示す位置）
      ['お楽しみ', 0], // 二つ目
      ['お楽しみ', 0] // 三つ目
    ]);
    var options = {
      width: 600, height: 200, // 表示範囲の横幅・縦幅
      max: 100, min: 0, // ゲージの最大値・最小値
      redFrom: 90, redTo: 100, // 赤枠の最大値・最小値
      greenColor: '#3f9cff', greenFrom: 0, greenTo: 10, // 青枠の最大値・最小値(※本来は緑枠ですが、色を指定して変えています)
      yellowFrom: 70, yellowTo: 90, // 黄枠の最大値・最小値
      majorTicks: ['1','2','3','4','5'], // 基準となる5つの大目盛りのラベル
      minorTicks: 5 // 大目盛りまでの目盛りの個数
    };
    var chart = new google.visualization.Gauge(document.getElementById('chart_div2'));
    chart.draw(data, options);
    setInterval(function() {
      var setlabel = gaugelabel[Math.floor(Math.random() * 10)];
      var setnum = Math.floor(Math.random() * 100);
      data.setValue(0, 0, setlabel);
      data.setValue(0, 1, setnum);
      chart.draw(data, options);
    }, 100);
    setInterval(function() {
      var setlabel = gaugelabel[Math.floor(Math.random() * 10)];
      var setnum = Math.floor(Math.random() * 100);
      data.setValue(1, 0, setlabel);
      data.setValue(1, 1, setnum);
      chart.draw(data, options);
    }, 150);
    setInterval(function() {
      var setlabel = gaugelabel[Math.floor(Math.random() * 10)];
      var setnum = Math.floor(Math.random() * 100);
      data.setValue(2, 0, setlabel);
      data.setValue(2, 1, setnum);
      chart.draw(data, options);
    }, 200);
  }
</script>
<div id="chart_div2" style="width: 600px; height: 200px;"></div>

用途はサッパリ不明ですね…ｗ

Google Chartsはかなり楽にグラフが作れるので、Webサイトのちょっとしたギミックに設置すると見栄えが良くなるかもしれませんね！

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

漫画的な表現が好きです、網干です。

最近は電子書籍でPC上でも漫画を読むことができます。
ですが、個人的にはもっとWeb上の技術を使った動きのある漫画があっても良いのではないかと思ったりします。
といっても、いろいろと制限があったり、時間に見合わない労力が発生する等の問題があって実現は難しいのだと思ったりもします。
では、実際に作ってみたらどの程度の労力がかかるのか…？
ちょっと気になったので、まずはとっかかりとして漫画の1コマを表示する方法を調査してみました。

ということで、今回はHTMLとCSSの設定だけで漫画の一コマのような表示をWebページ上で実現する方法を記載します。
今回の記事を読むことで下記のような漫画のような一コマを作成することができます。

HTMLコードで枠組みを用意する

まずはHTMLコードで一コマを表示するための枠組みを用意します。
今回は下記のようなHTMLコードを使用します。

<div class="img-campus">
  <div class="fukidashi-box">
    <div>
      <p>Excelのことなら</p>
      <p>僕に任せて！！</p>
    </div>
  </div>
  <img class="img-tanaka-san" src="https://incloop.com/wp-content/uploads/2017/04/01_田中さん.png">
</div>

HTMLコードの作成イメージとしては、
・一コマ用の枠を用意。
・一コマの中に吹き出し用の枠を用意して、その中にコメントを入れる。
・吹き出し用の枠の後に画像を表示。
こんな感じで作成しています。

といっても、コードだけではイメージしづらいので、ここは読み飛ばしてしまって構いません。

では次に、素材となる画像を用意しましょう。

素材となる画像を用意する

今回使用する画像は、キャラクター、吹き出し、背景の三種類です。

キャラクター画像は弊社T氏の画像を使用します。

吹き出し画像に関しては、今回は「フキダシデザイン」様の画像を使用させていただきました。

背景画像に関しては、今回は「無料写真素材　写真AC」様の画像を加工して使用させていただきました。

これで画像の準備は完了です！

CSSで表示を整える

では、CSSで表示を整えていきます。
今回は漫画的な一コマを作成したいので、横幅や縦幅はほぼ全て固定の数値で指定します。
具体的には、こんな感じのCSSを設定します。

.img-campus {
  width: 420px;
  margin: 0px auto 10px;
  background: url('https://incloop.com/wp-content/uploads/2017/04/03_背景.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  border: solid 5px;
}

.fukidashi-box {
  width: 300px;
  height: 230px;
  background: url('https://incloop.com/wp-content/uploads/2017/04/02_雲みたいな吹き出し.png');
  background-repeat: no-repeat;
  background-size: contain;
}

.fukidashi-box > div{
  text-align: center;
  position: relative;
  top: 80px;
}

.fukidashi-box p {
  font-size: 24px;
  margin: 5px;
  line-height: normal;
}

.img-campus img {
  width: 300px;
  margin: auto auto auto 120px;
  display: block;
}

@media screen and (max-width : 450px) {
  .img-campus {
    width: 250px;
  }
  
  .fukidashi-box {
    width: 150px;
    height: 120px;
  }
  
  .fukidashi-box > div {
    top: 40px;
  }
  
  .fukidashi-box p {
    font-size: 13px;
  }
  
  .img-campus img {
    width: 170px;
    margin: auto auto auto 80px;
  }
}

ここまで来て、ようやくHTMLコードと見比べてもらうと「あぁなるほど」となるかもしれません。
CSSの内容としては、イメージに沿ってスタイルを整えているだけですね。

上記の内容を全て詰め込むと、下記のような漫画的な一コマが表示されるようになります。

編集の際には画像編集が不要！文章や画像素材を切り替えるだけで一コマを編集！

記事をここまで読んでみて「え？こんなの作りたかったら全部画像で作っちゃえばいいじゃん…」と思われる方が多いと思います。
そう！その通りです！
その通りなのですが…。
今回の一コマは一枚の画像ではなく複数の要素から構成しているため、一部分の編集がコード上で可能になっているのです。

例えば、吹き出しの文言だけ変えたい場合は、下記のように文言の編集だけで終わってしまいます。

例えば、背景と吹き出しだけ変えたい場合は、下記のように文言と背景素材の変更だけで終わってしまいます。

このように、デザイナーさんの手を借りずに画像編集（のようなこと）ができてしまいます！
使い方次第ではかなり汎用性が高くなりそうですね。

使い方次第では作業効率の改善も可能！

いかがでしたか？

今回の例のような一コマをWebページに表示させたい場合は、一枚の画像で作成してしまうほうが良いように思えます。
ですが、下記のいずれかの条件が入った場合はどうでしょうか？

1. 吹き出しの中身を毎日変化させたい。
2. キャラクターを週ごとに変化させたい。
3. 吹き出しの中身もキャラクターも曜日ごとに変化させたい。

もし上記の条件を画像で対応し続ける場合は、毎回のように画像を作り変えてアップロードしなければなりません。
ですが、今回紹介したようなHTMLコードやCSSの構成であれば、テキストを変えたり画像を切り替えたりするだけで対応が完了してしまいます。

使い方次第ではありますが、こういった「画像っぽい表示の仕方」もコーディングする際の一つの方法として頭に入れておくと、役に立つ時が来るかもしれませんね。

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

昨日発売した「一平ちゃんショートケーキ味」を仕入れてテンションが振り切れています！網干です！
見てくださいこの包装！クリスマスにふさわしいデザインがたまりません！
く～！ニクイ！

出典：明星 一平ちゃん夜店の焼そば ショートケーキ味: 明星食品

見た目もこんなに綺麗！！パッと見ケーキと見分けがつきません！！

最も衝撃的だったのはソースの香りです！
見た目は普通のソースっぽい色なのですが、香りが全く違いました！
甘い匂い……どこかで嗅いだことのある甘い香り……

これは……パ、パンケーキ！そう！パンケーキの香り！！

甘い！これはデザートだ！三時のおやつだ！
が、しかし！嗅覚の情報は確実にパンケーキなのに！視覚が捉えているのは焼きそば！
嗅覚情報と視覚情報が一致しない！不思議！！

こ、この視覚的感動を伝えるには………そうだ！！
画像にエフェクトをつけて、皆さんに私が見ているビジョンを共有すればいいんだ！！！！！

…ということで、今回は画像にキラキラした星の輝きのようなエフェクトをつける方法を記載します。

今回の記事を読むことで、下図のように画像にエフェクトをつけることができるようになります。

キラキラエフェクトのプログラムをご紹介

今回は下記の記事を参考にさせて頂きました。
CreateJS 星キラキラ
※オリジナルのソースコードは上記のページより引用してください

このソースコードから、やきそばが輝くために必要な部分だけ抜き出してご紹介します！
焼きそばだけに！ソース！！

htmlファイル

<!DOCTYPE html>
<html>
<title>kirakira</title>
<head>
<script src="http://jsrun.it/assets/l/b/E/J/lbEJu"></script>
<script src="http://jsrun.it/assets/v/S/y/5/vSy5M"></script>
<script>createjs = window;</script>
<script src="http://code.createjs.com/createjs-2013.09.25.min.js"></script>
<script src="./kirakira.js" charset="UTF-8"></script>
<link rel="stylesheet" href="./kirakira.css" charset="UTF-8" />
</head>

<div id="kirakira_arae">
<!-- !!canvasのサイズを画像サイズと一致させる!! -->
<canvas id="kirakira_canvas" width="1920" height="1080"></canvas>
<!-- #kirakira_arae // -->
</div>
</html>

cssファイル

* {
  margin: 0;
  padding: 0;
  border: 0;
}

#kirakira_arae{
  width:100%;
  height:100%;
}

#kirakira_canvas{
  width:100%;
  height:100%;
  background-image: url('XXXXX.jpg'); // !!ファイル名とパスを入力!!
  background-repeat: no-repeat;
  background-size: contain;
}

jsファイル

(function(window){
  var PARAM = new Object();
  $.canvas = {
    init : function(){
      PARAM = {
        main   : {id:$('#kirakira_arae')},
        canvas : {
          id   : $('#kirakira_canvas'),
          size : {width:1920, height:1080} // !!画像サイズと一致させる!!
        },
        velocity : {x:0, y:0},
        circle   : new Shape(),
        stage    : ''
      };		
      $.canvas.seting();
    },
    seting : function(){
      var canvasObject = PARAM.canvas.id.get(0);
      var context      = canvasObject.getContext("2d");

      PARAM.stage = new Stage(canvasObject);
      PARAM.velocity.x = Math.floor(Math.random()*5) + 5;
      PARAM.velocity.y = Math.floor(Math.random()*5) + 5;

      setInterval(function(){
        $.canvas.star();
      },1);

      Ticker.on("tick", $.canvas.tick);
    },
    star : function(){
      var shape      = new Shape();
      var g          = shape.graphics;
      var color      = (Math.random()*360);
      var glowColor1 = Graphics.getHSL(0, 100, 100, 1);
      var glowColor2 = Graphics.getHSL(color, 100, 75, 0.5);
      var radius     = (Math.random()*15);
      var position   = {x:Math.random()*PARAM.canvas.size.width, y :Math.random()*PARAM.canvas.size.height};

      g.beginRadialGradientFill( [glowColor1,glowColor2], [0.1,0.5], 0,0,1, 0,0,(Math.random()*10+13)*2);
      g.drawPolyStar(0, 0, radius, 5, 0.95, (Math.random()*360));
      g.endFill();

      g.beginRadialGradientFill( [Graphics.getHSL(color,100,75,0.5),Graphics.getHSL(color,100,75,0)], [0,0.5], 0,0,0, 0,0,radius);
      g.drawCircle(0, 0, radius);
      g.endFill();

      shape.compositeOperation = "lighter";

      shape.x      = position.x;
      shape.y      = position.y;
      shape.scaleX = 0;
      shape.scaleY = 0;
      shape.alpha  = 0;

      PARAM.stage.addChild(shape);
      $.canvas.tween(shape);
    },
    tween : function(SHAPE){
      var tween = Tween.get(SHAPE)
        .to({scaleX:1, scaleY:1, alpha:1}, 500, Ease.sineOut)
        .to({scaleX:0, scaleY:0, alpha:0, }, 800, Ease.sineIn)
      ;
      tween.call(function(){
        $.canvas.remove(this);
      });
    },
    remove : function(SHAPE){
      PARAM.stage.removeChild(SHAPE);
    },
    tick : function(){
      PARAM.stage.update();
    },
  };

  window.addEventListener("load", function(e){$.canvas.init();}, false);
})(window);

上記のプログラムに対して、下記の修正を加えることで好きな画像にキラキラエフェクトを追加することができます。
・htmlファイルのcanvasのサイズを画像のサイズに変更。
・cssファイルのコメント箇所を画像のファイル名（ファイルパス）に変更。
・jsファイルのコメント箇所を画像のサイズに変更。

以上のプログラムで、通常でも眩しいやきそばをもっと輝かせることができます！

ちなみに、一平ちゃんショートケーキ味は意外とおいしかったです！
かやくの「ヨーグルト風味キューブ」がちょっとアレな感じはありましたが…。
ごちそうさまでした！

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

趣味が睡眠になりつつあります、網干です。

予定が何も入っていない休日に睡眠時間を16時間もとっていました。
具体的には 0-8時 10-13時 16時-19時 22時-24時 と睡眠をとっていました。
食事の前後しか起きないグータラ生活でしたが、翌日に首と肩で謎の痛みが発症しました…。
過度な睡眠は良くないですね、適度な睡眠が大事です。

さて、以前に「JavaScriptで同一ドメイン内のHTMLで構成されたページの特定のタグを全て取得する方法」という記事を書かせていただいたのですが、divやspanなどの閉じタグがあるような範囲の取得に対応していませんでした。
※前回の記事は下記になります。

なので、今回は開始タグから終了タグまでを取得するプログラムを紹介させていただきます。

JavaScriptで同一ドメイン内のページの特定タグの開始タグから終了タグまでを取得する

以前にもご紹介しましたが、このプログラムは同一ドメイン内のページにしか対応していないことに注意してください。
例えば、これから紹介するプログラムを”http://example.com”のドメインのページに設置した場合は”http://example.com/page1.html”のHTMLコードを取得することは可能です。
しかし、プログラムを”http://example.com”のドメインのページに設置して”http://www.yahoo.co.jp/”のHTMLコードを取得することはできません。
これは、今回のプログラムで使用するXMLHttpRequestの仕様で外部ドメインのコード取得が不可能になっているため、取得ができません。

では早速、下記にコードの一式を記載します。

【 html 】

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>HTMLの特定タグの範囲取得プログラム</title>
	<script type="text/javascript" src="./test.js" charset="UTF-8"></script>
</head>
<body>
	<select id="url">
		<option value=""></option>
		<option value="http://techmemosrv.minibird.jp/">myHP</option>
	</select>
	<input type="text" id="keyword" value="">
	<select id="tagkeyword">
		<option value="article">article</option>
	</select>
	<input type="button" value="取得開始" onclick="request();">
	<textarea id="page_text" style="width: 100%; height: 200px;"></textarea>
</body>
</html>

【 javascript(test.js) 】

/*********************************************************************/
/* ファイル概要：自身のドメインのページのhtmlコードを取得して        */
/*               特定のタグで囲われた部分だけを抜き出すプログラム    */
/*********************************************************************/

/*********************************************************************/
/* 初期設定                                                          */
/*********************************************************************/
// 変数初期化
httpRequest = false;	// XMLHttpRequestオブジェクト

// IE6.0以外の「XMLHttpRequest」オブジェクトをサポートしているブラウザ？
if(window.XMLHttpRequest) {
	// 「XMLHttpRequest」オブジェクトをサポートしている場合は下記
	httpRequest = new XMLHttpRequest();
	httpRequest.overrideMimeType('text/xml');
} else if(window.ActiveXObject) {
	// IEの場合は下記
	try {
		httpRequest = new ActiveXObject('Msxml2.XMLHTTP');
	} catch (e) {
		httpRequest = new ActiveXObject('Microsoft.XMLHTTP');
	}
}

/*********************************************************************/
/* 関数名：特定のタグ範囲取得関数                                    */
/* 概要　：範囲制限あり。特定の文字列で始まるタグの範囲のみを取得    */
/* 引数  ：strHtmlSrc    = HTMLソースコード                          */
/*       ：strKeyWord    = 取得開始キーワード                        */
/*       ：strTagKeyWord = 取得開始キーワードのタグ                  */
/* 戻り値：特定のタグ範囲の文字列の配列                              */
/*********************************************************************/
function getTargetStringArray( strHtmlSrc, strKeyWord, strTagKeyWord ) {
	// 定数宣言
	const SERCH_END_VAL			= -1;	// 検索終了条件値(indexOfで見つからなかった場合に返る値で判定)
	const GET_TARGET_AREA_END	= 0;	// 取得範囲の終了条件値
	const GET_AREA_MAXCOUNT		= 4;	// 取得最大数
	
	const KEY_TAG_START_WORD	= '<';	// タグ開始キーワード
	const KEY_TAG_END_WORD		= '/';		// タグ終了キーワード
	
	// 変数宣言
	var getSearchIndex	= 0;		// 検索中のインデックス位置
	var saveStartIndex	= 0;		// 取得対象エリア開始位置のインデックス保存
	var saveEndIndex	= 0;		// 取得対象エリア終了位置のインデックス保存
	var cntStart		= 0;		// 取得対象のタグが開始した数
	var cntEnd			= 0;		// 取得対象のタグが終了した数
	var flgSearching	= true;		// 取得対象エリア検索中フラグ
	var flgGetting		= false;	// 取得対象エリア取得中フラグ
	
	var arrayGetTargetArea	= new Array();	// 取得対象のエリア格納配列
	var stringGetArea		= '';			// 取得対象のエリアの文字列
	var cntGetTargetArea	= 0;			// 取得対象の取得数
	
	// 入力が足りない？
	if( ( strKeyWord == "" ) ||
		( strTagKeyWord == "" ) ||
		( strHtmlSrc == "" ) ){
		return arrayGetTargetArea;
	}
	
	// 文字チェック
	while( flgSearching == true ) {
		// 文字列の検索
		getSearchIndex = strHtmlSrc.indexOf( strKeyWord, getSearchIndex );
		
		// 文字列が見つからなかった？or最大取得数になった？
		if( ( getSearchIndex == SERCH_END_VAL ) ||
			( cntGetTargetArea == GET_AREA_MAXCOUNT ) ) {
			// 取得終了
			flgSearching = false;
			continue;
		}
		
		// 取得開始インデックスを保持
		saveStartIndex = getSearchIndex;
		// 検索開始位置を移動
		getSearchIndex += strKeyWord.length;
		// 検索タグの開始数をカウント
		cntStart++;
		// 取得中フラグON
		flgGetting = true;
		
		// 対象エリアの取得
		while( flgGetting == true ) {
			// 取得開始インデックス以降で同じタグを検索
			getSearchIndex = strHtmlSrc.indexOf( strTagKeyWord, getSearchIndex );
			// タグが見つからなかった？（※異常処理）
			if( getSearchIndex == SERCH_END_VAL ) {
				flgGetting = false;
				continue;
			}
			
			// タグの前の文字が'<'？
			if( strHtmlSrc.charAt(getSearchIndex - 1) == KEY_TAG_START_WORD ) {
				// タグの開始数をカウント
				cntStart++;
			} else if( strHtmlSrc.charAt(getSearchIndex - 1) == KEY_TAG_END_WORD ) {
				// タグの終了数をカウント
				cntEnd++;
			} else {
				// 条件に該当しない(※異常処理)
				flgGetting = false;
				continue;
			}
			
			// 対象エリアの取得が完了した？
			if( ( cntStart - cntEnd ) == GET_TARGET_AREA_END ){
				// 取得終了インデックス取得(タグ末尾の'>'のインデックス位置を取得)
				saveEndIndex = getSearchIndex + strTagKeyWord.length;
				// 取得対象エリアを取り出す(終了位置の文字を含めるため+1加算)
				stringGetArea = strHtmlSrc.substring( saveStartIndex, saveEndIndex + 1 );
				// 取得対象エリアを保持
				arrayGetTargetArea[cntGetTargetArea] = stringGetArea;
				cntGetTargetArea++;
				// 取得終了
				flgGetting = false;
				// 検索位置を閉じタグの後に変更
				getSearchIndex = saveEndIndex++;
			} else {
				// 検索位置を閉じタグの後に変更
				getSearchIndex += strTagKeyWord.length;
			}
		}
	}
	
	// 配列を返す
	return arrayGetTargetArea;
}

/*********************************************************************/
/* 関数名：HTMLコード埋め込み関数                                    */
/* 概要  ：指定したページのHTMLコードを取得してpage_textに書き出す   */
/* 引数  ：なし                                                      */
/* 戻り値：なし                                                      */
/*********************************************************************/
function request() {
	// url、開始キーワード、開始キーワードのタグ取得
	page				= document.getElementById("url").value;			// url
	strKeyWord			= document.getElementById("keyword").value;		// 開始キーワード
	strTagKeyWord		= document.getElementById("tagkeyword").value;	// 開始キーワードのタグ
	
	// 入力が足りない？
	if( ( page == "" ) ||
		( strKeyWord == "" ) ||
		( strTagKeyWord == "" ) ){
		return arrayGetTargetArea;
	}
	
	// リクエスト中止
	httpRequest.abort();
	// リクエスト初期化
	httpRequest.open('GET', page, true);
	// テキストエリア初期化
	document.getElementById('page_text').value = "";
	// readyStateの値変更を監視
	httpRequest.onreadystatechange = function() {
		// データ受信完了？
		if(httpRequest.readyState == 4) {
			// リクエスト成功？
			if(httpRequest.status == 200) {
				// HTMLソースコードを文字列で取得
				var getHtmlSrc = httpRequest.responseText;
				// 抽出した文字列の配列を取得
				var getArray = getTargetStringArray( getHtmlSrc, strKeyWord, strTagKeyWord );
				// 取得した文字列を全て書き出す
				for (var i = 0; i < getArray.length; i++) {
					document.getElementById('page_text').value = document.getElementById('page_text').value + getArray[i] + "\n";
				}
			}
		}
	}
	// リクエスト発行
	httpRequest.send(null);
}

基本的には全てコメントに記載した通りの内容になっています。
上記のプログラムを使う場合は、optionタグで指定しているURLを自身のドメインに設置しているページのURLに変更してください。

開始キーワードを指定して指定範囲のコードを取得する

上記プログラムの使い方は…

1. 取得するページを指定する(今回は自身のHPのトップページ)
2. 取得を開始するキーワードを指定する(今回は”article”タグの始めから終わりまでを取得)
3. キーワードのタグを指定する(今回取得するタグ”article”を選択する)

条件を指定する際に2.の条件は非常に重要で、可能な限り確実に取れるコードの開始ワードを指定してください。
例えば、私のHPのトップページのソースコードを見ると下記のような構造になっています。

今回は投稿記事のソースコードのみを取得するのですが、画像を見るとarticleタグで囲っている部分が投稿記事であることがわかります。
なので、articleのタグで取得をすれば良い　と考えてしまうのは少し怖いです。
というのも、もしかしたら別の場所でもarticleタグを使用している可能性があるからです。
従って、想定しないarticleタグの範囲を取得しないように、もっと文字列を特定して‘<article id=”post-‘というワードから始まる文字列で検索を行います。

このようにキーワードは可能な限り他のタグと区別ができるように指定する必要があります。

最後に、キーワードのタグを選択して「取得開始」ボタンを押します。
すると、下記のように指定範囲のコードを抜き出してテキストボックスに表示します。
※検索開始のキーワードには‘<article id=”post-‘を入力することに注意してください

今回のプログラムの実装手順

今回のプログラムを自身のサイトで試したい場合は、下記の手順でファイルの作成/修正を行ってください。

1. 新規のテキストファイルを二つ用意して【 html 】と【 javascript(test.js) 】の内容をコピペする
2. 【 html 】のファイルは”test.html”の名称で保存、【 javascript(test.js) 】のファイルは”test.js”の名前で保存する
3. 保存したファイルは同じフォルダに格納する
4. “test.html”の”http://techmemosrv.minibird.jp/”の部分を自身のページのURLに変更する
5. “test.html”の”article”の部分を取得したいタグの名称に変更する
6. “test.html”をブラウザで開いてURL、開始キーワード、開始タグを設定して取得開始ボタンを押す

上記の手順で同じようなプログラムが動きます。

動作確認環境

このプログラムは下記のブラウザで正常に機能していることを確認しています。

• Google Chrome 53.0.2785.143 m (64-bit)
• Firefox 49.0.2
• Safari 5.1.7
• Microsoft Edge 38.14393.0.0
• Internet Explorer11 11.321.14393.0

最後に

いかがでしたか？

なかなか使いどころが難しいプログラムではありますが、ドメイン内に複数のサイトを持っていたりするとなかなか使えるプログラムだと思います。
どこかのタイミングで外部ドメインのソースコードを取得するプログラムも作ってみたいですね。

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

ハーゲンダッツのメープルカスタードクッキーにハマっています、網干です。

ハーゲンダッツの期間限定商品は時折ハマってしまうんですよね…。
パッケージを見て「これはおいしそう！」と思った商品は高い確率で期間内に何度も購入しています。
普段はアイスを食べない方なのですが、どうもハーゲンダッツの魅力にだけは負けてしまいます…。

皆様もメープルカスタードクッキーを食べてみましょう！すこぶるオススメです！
http://www.haagen-dazs.co.jp/products/minicup/maple-custard-cookie.html

さて、今回はJavaScriptを使って同一ドメイン内のHTMLで構成されたページの特定のタグ(今回はimgタグのみ)を全て取得するプログラムを紹介します。

WebサイトがWordPress内で完結している場合はWordPressの関数で何とかなってしまうのですが、WordPressの外にあるHTMLのページの情報を取得するのはなかなか難しいんですよね…。

方法はいろいろとあると思うのですが、今回はJavaScriptを使って特定のタグを抜き取ってしまいます！

JavaScriptで同一ドメイン内のページのimgタグを全て取得する

まず初めに、このプログラムは同一ドメイン内のページにしか対応していないことに注意してください。
例えば、これから紹介するプログラムを”http://example.com”のドメインのページに設置した場合は”http://example.com/page1.html”のHTMLコードを取得することは可能です。
しかし、プログラムを”http://example.com”のドメインのページに設置して”http://www.yahoo.co.jp/”のHTMLコードを取得することはできません。
これは、今回のプログラムで使用するXMLHttpRequestの仕様で外部ドメインのコード取得が不可能になっているため、取得ができません。

では早速、下記にコードの一式を記載します。

imgタグ取得プログラム
	
	
		
		
		myHP
	
	

重要な箇所はscriptタグで囲んだ部分になります。
基本的には全てコメントに記載した通りの内容になっています。

上記のプログラムをそのまま使う場合は、optionタグで指定しているURLを自身のドメインに設置しているページのURLに変更してください。

HTMLソースコードを取得した結果

実際に使ってみると、指定したページのimgタグで囲われた部分のみがテキストエリアに出力されます。

動作環境

このプログラムは下記のブラウザで正常に機能していることを確認しています。
・Google Chrome 53.0.2785.143 m (64-bit)
・Firefox 49.0.1
・Safari 5.1.7
・Microsoft Edge 38.14393.0.0
・Internet Explorer11 11.223.14393.0

最後に

いかがでしたか？

まだまだJavaScriptもimgタグを取得するのに使用している正規表現も勉強が浅いので今回はここまでが限界でした…。
もっと汎用性の高い正規表現の式が書けるようになれば、imgタグだけでなくコード内の好きな部分を抜き取ることができると思います！

…というか、本来はそれがやりたかったのですがタイムアップでした…。
いつかこのプログラムを使った発展形を記事にしたいと思います。

今回紹介したプログラムの参考にさせていただいたサイト様は下記になります。
http://webos-goodies.jp/archives/50548720.html
http://www.ajaxtower.jp/ini/http/index6.html
http://www.ajaxtower.jp/ini/http/index4.html
https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest

今回はいつもより短めですが以上です！
ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

プログラム解析やコーディング作業中に独り言が多くなるのが気になるお年頃になりました、網干です。
集中力が途切れてようやく独り言を発している事に気づきます…悪い癖です。

そんな私が独り言をフルに発揮して、コツコツ作ってきたクラウドアプリ、以前からちょくちょく情報を小出ししていた「SimpleOrder」の大幅アップデートを行いました！
以前は順番待ち特化のシステムでしたが、いくつかの機能追加とデザインの変更で、カスタマイズ次第ではミニホームページが完成するシステムになりました！
「SimpleOrder」は0円から使えますので、ぜひお試しください！
無料で使えるシンプルな順番待ち・受付管理アプリ simple order

さて、今回のブログ内容ですが。
前回に引き続き、HTMLのformタグで指定するinput要素で、HTML5で追加されたtype属性のブラウザごとの動きの違いを記載します。
前回は”email”、”url”、”search”、”tel”、”number”、”date”の六つの機能を各ブラウザで見て比較しました。
前回の記事はこちら：

今回は”datetime”、”datetime-local”、”month”、”week”、”time”、”range”、”color”の7つの機能を各ブラウザで見て比較します。

確認を行うブラウザの一覧

今回確認を行うブラウザは下記の4種類になります。
1. Google Chrome バージョン 53.0.2785.101 m (64-bit)
2. Microsoft Edge バージョン 25.10586.0.0
3. Firefox バージョン 48.0.2
4. Safari バージョン 5.1.7 (7534.57.2)

HTML5から追加されたtype属性一覧

今回は、HTML5から追加された下記のtype属性の確認を行います。

それでは早速、ブラウザごとに機能の違いを見ていきましょう！

type属性に”datetime”を指定した際の機能比較

1. GoogleChromeの場合

どんな入力でも送信可能

2. Microsoft Edgeの場合

どんな入力でも送信可能

3. Firefoxの場合

・どんな入力でも送信可能

4. Safariの場合

・テキストボックスの増減ボタンで年、月、日、時、分が自動入力される
・どんな入力でも送信可能

type属性に”datetime-local”を指定した際の機能比較

1. GoogleChromeの場合

・テキスト内には数値以外は入力不可
・増減ボタンで入力数値の増減が可能
・テキスト内のクリアボタンで入力をクリアできる
・年、月、日、時、分の入力が一つでも欠けている場合は送信押下時にエラーが表示される。
・カレンダーを表示して年、月、日を設定することが可能
※入力が空白の場合は送信可能

2. Microsoft Edgeの場合

・テキスト内の日付部分をクリックすると年、月、日を設定するウインドウが表示される
・テキスト内の時間部分をクリックすると時、分を設定するウインドウが表示される
・どちらか片方が空白でも送信可能
※入力が空白の場合は送信可能

3. Firefoxの場合

・どんな入力でも送信可能

4. Safariの場合

・テキストボックスの増減ボタンで年、月、日、時、分が自動入力される
・どんな入力でも送信可能

type属性に”month”を指定した際の機能比較

1. GoogleChromeの場合

・テキスト内には数値以外は入力不可
・増減ボタンで入力数値の増減が可能
・テキスト内のクリアボタンで入力をクリアできる
・年、月の入力が一つでも欠けている場合は送信押下時にエラーが表示される。
・カレンダーを表示して年、月を設定することが可能
※入力が空白の場合は送信可能

2. Microsoft Edgeの場合

・テキスト内の日付部分をクリックすると年、月を設定するウインドウが表示される
※入力が空白の場合は送信可能

3. Firefoxの場合

・どんな入力でも送信可能

4. Safariの場合

・テキストボックスの増減ボタンで年、月が自動入力される
・どんな入力でも送信可能

type属性に”week”を指定した際の機能比較

1. GoogleChromeの場合

・テキスト内には数値以外は入力不可
・増減ボタンで入力数値の増減が可能
・テキスト内のクリアボタンで入力をクリアできる
・年、週の入力が一つでも欠けている場合は送信押下時にエラーが表示される。
・カレンダーを表示して年、週を設定することが可能
※入力が空白の場合は送信可能

2. Microsoft Edgeの場合

・テキスト内の日付部分をクリックすると年、週を設定するウインドウが表示される
※入力が空白の場合は送信可能

3. Firefoxの場合

・どんな入力でも送信可能

4. Safariの場合

・テキストボックスの増減ボタンで年、週が自動入力される
・どんな入力でも送信可能

type属性に”time”を指定した際の機能比較

1. GoogleChromeの場合

・テキスト内には数値以外は入力不可
・増減ボタンで入力数値の増減が可能
・テキスト内のクリアボタンで入力をクリアできる
・時、分の入力が一つでも欠けている場合は送信押下時にエラーが表示される。
※入力が空白の場合は送信可能

2. Microsoft Edgeの場合

・テキスト内の時間部分をクリックすると時、分を設定するウインドウが表示される
※入力が空白の場合は送信可能

3. Firefoxの場合

・どんな入力でも送信可能

4. Safariの場合

・テキストボックスの増減ボタンで時、分が自動入力される
・どんな入力でも送信可能

type属性に”range”を指定した際の機能比較

1. GoogleChromeの場合

・レンジバーが表示され、左右に調整することで数値を増減させる

2. Microsoft Edgeの場合

・レンジバーが表示され、左右に調整することで数値を増減させる
・レンジバーの移動中は数値が表示される

3. Firefoxの場合

・レンジバーが表示され、左右に調整することで数値を増減させる

4. Safariの場合

・レンジバーが表示され、左右に調整することで数値を増減させる

type属性に”color”を指定した際の機能比較

1. GoogleChromeの場合

・カラー選択の入力欄が表示され、クリックすると別ウインドウで色の設定が可能

2. Microsoft Edgeの場合

・カラー選択の入力欄が表示され、クリックすると別ウインドウで色の設定が可能

3. Firefoxの場合

・カラー選択の入力欄が表示され、クリックすると別ウインドウで色の設定が可能

4. Safariの場合

・どんな入力でも送信可能

以上で、HTML5から追加されたtype属性の各ブラウザでの比較は終了です。

最後に

いかがでしたか？

Part.1の記事も通して見ていただければわかりますが、ブラウザごとに見た目も機能も大きく異なっています。
そのため、どれか一つだけをカバーするだけではお客様が使うシステムとしては不十分になってしまいます。
ブラウザ上で表示するシステムを開発する際には注意しなければなりませんね。

今回は、SimpleOrderの作成途中でtype属性の”color”で問題が発覚したため、今回のような調査を行うキッカケを得ることができました。
私が作成したシステムで、私の知らないところで不十分な機能あるかもしれないのは非常に恐ろしいですね…。
ですが、失敗は非常に貴重な経験となりますので、しっかりと理解して次に活かしていきましょう！

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

月曜担当に戻ってまいりました、網干です。

今回は、HTMLのformタグで指定するinput要素で、HTML5で追加されたtype属性のブラウザごとの動きの違いを記載します。
今までは「ブラウザごとに違いがあるといっても、そんなに大きな違いはないのでは？」と思っていましたが、大間違いでした…。

フォームの部品は、あらかじめスタイルが決まっていたり、入力制限をしてくれたりと、便利で頼れる機能ではあるのですが、
全ブラウザが対応してるわけではないので、エンジニアの想定とは異なる動きをしてしまう場合があります。
従って、様々なブラウザで見られるようにするには注意が必要です。

[2016.9.19更新]
第2弾は”datetime”、”datetime-local”、”month”、”week”、”time”、”range”、”color”の7つの機能を各ブラウザで比較しました。

確認を行うブラウザの一覧

今回確認を行うブラウザは下記の4種類になります。
1. Google Chrome バージョン 53.0.2785.101 m (64-bit)
2. Microsoft Edge バージョン 25.10586.0.0
3. Firefox バージョン 48.0.2
4. Safari バージョン 5.1.7 (7534.57.2)

HTML5から追加されたtype属性一覧

今回は、HTML5から追加された下記のtype属性の確認を行います。

ブラウザごとに各type属性の表示を確認してみる

本当にブラウザごとに表示が違うのか…？
早速確認してみましょう！
(以下、実験用サイトにて表示確認をした画像になります)

・Google Chromeで表示すると…

・Microsoft Edgeで表示すると…

・Firefoxで表示すると…

・Safariで表示すると…

このように、同じtype属性を使っているにも関わらず、見た目が違うものが多くあります。
特に type=”range” に関しては見事に全てのブラウザでスタイルが一致していません。

アプリやソフトウェアの開発をしていると、説明書等のドキュメントを作成する際に、画面のスクリーンショットを張り付けて説明をすることが多いです。
上記のように、ブラウザで表示するサービスを開発した際に、ブラウザごとに見た目が異なってしまうと、PCを日常的に使わない、または、そもそもコンピュータになかなか触れないユーザーさんは画面の違いに戸惑ってしまいます。

なので、こういった部分はできる限り統一した作りにするように、注意しなければなりません。

…と、自分への戒めの言葉はここまでにして。

見た目に違いがあるのはわかったので、機能にはどのような違いがあるのか、見ていきましょう。

今回は”email”、”url”、”search”、”tel”、”number”、”date”の六つの機能を各ブラウザで見て比較します。
（後半の七つの機能は来週のブログに載せる予定です。）

type属性に”email”を指定した際の機能比較

1. GoogleChromeの場合

・テキスト内の入力が’文字列’ + ‘@’ + ‘文字列’の形式でない場合は送信押下時にエラーが表示される。
※入力が空白の場合は送信可能

2. Microsoft Edgeの場合

・テキスト内の入力が’文字列’ + ‘@’ + ‘文字列’の形式でない場合は送信押下時にエラーが表示される。
※入力が空白の場合は送信可能

3. Firefoxの場合

・テキスト内の入力が’文字列’ + ‘@’ + ‘文字列’の形式でない場合は送信押下時にエラーが表示される。
※入力が空白の場合は送信可能

4. Safariの場合

・どんな入力でも送信可能

type属性に”url”を指定した際の機能比較

1. GoogleChromeの場合

・テキスト内の入力が’http:’ + ‘文字列’の形式でない場合は送信押下時にエラーが表示される。
※入力が空白の場合は送信可能

2. Microsoft Edgeの場合

・テキスト内の入力が’http:’から始まる文字列でない場合は送信押下時にエラーが表示される。
※入力が空白の場合は送信可能

3. Firefoxの場合

・テキスト内の入力が’http:’から始まる文字列でない場合は送信押下時にエラーが表示される。
※入力が空白の場合は送信可能

4. Safariの場合

・どんな入力でも送信可能

type属性に”search”を指定した際の機能比較

GoogleChrome、Microsoft Edge、Firefox、Safariの場合

・どのような入力でも送信可能（※画像はGoogleChromeになります）

type属性に”tel”を指定した際の機能比較

GoogleChrome、Microsoft Edge、Firefox、Safariの場合

・どのような入力でも送信可能（※画像はGoogleChromeになります）

type属性に”number”を指定した際の機能比較

1. GoogleChromeの場合

・テキスト内には数値以外は入力不可
・増減ボタンで入力数値の増減が可能
※入力が空白の場合は送信可能

2. Microsoft Edgeの場合

・テキスト内には数値以外も入力可能
・テキスト内のクリアボタンで入力をクリアできる
・数値以外の入力がある場合は送信押下時にエラーが表示される。
※入力が空白の場合は送信可能

3. Firefoxの場合

・テキスト内には数値以外も入力可能
・増減ボタンで入力数値の増減が可能
・数値以外の入力がある場合は送信押下時にエラーが表示される。
※入力が空白の場合は送信可能

4. Safariの場合

・テキスト内には数値以外も入力可能
・数値以外を入力した場合は、マウスカーソルのフォーカスが移動した際にテキストボックスがクリアされる
・増減ボタンで入力数値の増減が可能
※入力が空白の場合は送信可能

type属性に”date”を指定した際の機能比較

1. GoogleChromeの場合

・テキスト内には数値以外は入力不可
・増減ボタンで入力数値の増減が可能
・テキスト内のクリアボタンで入力をクリアできる
・年、月、日の入力が一つでも欠けている場合は送信押下時にエラーが表示される。
・カレンダーを表示して年月日を設定することが可能
※入力が空白の場合は送信可能

2. Microsoft Edgeの場合

・テキスト内をクリックすると年月日を設定するウインドウが表示される
※入力が空白の場合は送信可能

3. Firefoxの場合

・どのような入力でも送信可能

4. Safariの場合

・どのような入力でも送信可能
・増減ボタンをクリックすると年月日が入力されて値が増減する

今回はここまでになります。

最後に

いかがでしたか？

まだ六つしか紹介していませんが、ブラウザの違いで機能が大幅に違うものもありましたね！
入力の形式が変わってしまうと、フォームのデータを受信する側も、データの受け取り方を考えなければなりません。
また、データベースを使用する場合は、記録する際にデータの形式を統一する必要もありますね。

今回の続きは来週のブログで書きますので、またよろしくお願い致します。

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

初心者がHTMLなどの言語を学習するとき、どのような学習体験が望ましいでしょうか。
あくまで私の経験からですが、次のポイントがあると思っています。

• 説明がシンプルで分かりやすい
• 入力した結果がすぐに確認できる
• 達成感がある

これらを兼ね備えた学習用WEBサイト「Progate」をご紹介します。
無料でHTML＆CSS、PHP、jQuery、Ruby、Ruby on Rails、JavaScriptを学習することができます。

Progateにユーザー登録をしてみよう！

Progateのサイトにアクセスます。

https://prog-8.com/

ユーザー名、メールアドレス、パスワード（任意のもの）を入力し、新規登録をクリックします。
（facebookやTwitterでも登録可能です。）

メールアドレスの認証メールが届きますので、メール本文中のURLをクリックして登録を完了してください。

レッスン一覧から学習したいレッスンを選択します。

学習をしてみよう！

学習の方法は「説明スライド」をまず読み、その後に実際にコードを書いて理解度を確認する流れになります。

説明スライドの画面↓

↓コード記述画面

ご覧のように、記述したコードをもとに「プレビュー」が即座に表示されるので、入力した内容が正しかったのかをすぐに確認することができ、とても学習がし易いと思います。

学習をクリアすると、レベルが上がります！
このレベルUPの演出により達成感とヤル気が生まれますね。

いかがでしょうか。
ご覧いただいたように説明はとてもシンプルです。
初心者にとってはまず手を動かしてコードを書いて、「これを書いたらこういう表示になるんだ！」という経験をどんどん積むことが重要だと思います。その点、要点を絞ったシンプルな説明はとてもいいと思います。

HTMLやPHPなどのプログラミング言語の学習に！
Progateを活用してみてはいかがでしょうか。

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。