グーグルさんが「読み込み速度も検索順位に影響するからね！」とアナウンスしてから「Webサイトは軽い方が良い」というざっくりとした認識が浸透しているように感じます。
自分もその認識を持っているのですが、では具体的に「読み込み速度」は何を指しているのでしょうか？
色々なwebサイトを閲覧する中で疑問を感じたこともあったので、PageSpeed Insightsに関していくつか実験をしてみました。

「Webページの読み込み時間」って何だろう？

言葉をそのまま受け取ると「Webページの読み込みがブラウザ側で完全に終わるまでの時間」と解釈できますよね。
「Webページの読み込み時間」を計るPageSpeed Insightsで測定した数値も、上記のような考えで評価をしているのだろうと思っていました。

ですが、色々なサイトをPageSpeed Insightsで分析してみると、AサイトよりもBサイトの方が体感的に表示が早いのに、評価が逆になっていることがありました。
なので今回は、下記のような実験をしてみてPageSpeed Insightsの評価がどうなるのか見てみました。

1. HTMLコードにサイズの大きい画像を設置して表示
2. HTMLコードに大量の文字を設置して表示
3. JavaScriptを使ってsetIntervalで大量の文字を後から表示

実験1：HTMLコードにサイズの大きい画像を設置して表示してみる

まずは、約13MBの画像を21個読み込むページで実験してみます。

実験用のページは下記になります。
https://incloop.com/blog_neta/test/test1.html
※画像のURLにパラメーターがついているのは、別の画像と認識して読み込んで欲しいための小細工になります！

PageSpeed Insightsだけでなく、実際のブラウザでの表示速度も知りたいので、Google Chromeの拡張機能「Page load time」も使ってページの読み込み時間を計ってみました。
Page load timeの使い方は下記サイト様が非常に丁寧にまとめていますので、気になる方は参考にしてください。
『Page load time』サイトの表示速度を簡単に計測【Chrome拡張】

早速ですが、実験ページで測定した結果は下記になります。

・PageSpeed Insights

Page load timeの測定で読み込み完了までに37秒かかっているにも関わらずPageSpeed Insightsの結果はモバイル、PC共にイエローラインの中でもやや良い評価になっています。
待ち時間が長くてユーザー的にはそれなりのストレスになりそうですが…許容範囲なのでしょうか？

ちなみに！弊社サイトの評価は…。

・PageSpeed Insights

先程の37秒と比べると、読み込みは5秒と明らかに速いはずなのに点数がやたらと低い…。
嫌われているのかな…？

…気を取り直して。
この実験でPageSpeed Insightsに関して分かることは…

1. 単純なページの読み込み速度だけで判定していない。
2. 画像の重さは点数に影響を与えるものの、評価の比重としてはそこまで重くない。

この辺りでしょうか。

実験2：HTMLコードに大量の文字を設置して表示してみる

次に、テキストエディタが悲鳴を上げるような1400万字程度の文字を打ち込んだページを試してみます。
実験用のページは下記になります。
https://incloop.com/blog_neta/test/test2.html

実験ページで測定した結果は下記になります。

・PageSpeed Insights

良い結果ですね！
点数にデバイスの差っぽいものが出ている感じがします！たまりません！

結果としては、実験1よりも読み込みは速いのですが、PageSpeed Insights（モバイル）の結果は悪くなりました。
ちなみに、実験2で使ったHTMLファイルのサイズは13.8MBなので、実験1で使った画像1枚分と同じようなサイズになります。

この実験でPageSpeed Insightsに関してわかることは…

1. 同じサイズの画像と文字情報では、モバイルに限っては文字情報の方が点数が低くなる。

もしかして、やたらと長い文字は画像にすることで点数が良くなるのでしょうか？
でもブラウザでの表示速度は遅くなるような…、うーん…？

実験3：JavaScriptを使って大量の文字を後から表示してみる

実験2で点数の低いパターンが出てきたので、次はちょっとした小細工をしてみます。
文字情報をすぐに表示せずに、読み込みの1秒後に大量の文字情報を表示したらどうなるのか試してみます。

実験用のページは下記になります。
https://incloop.com/blog_neta/test/test3.html

やっていることは単純で、setTimeout関数を使って読み込みの1秒後に大量の文字を表示しています。

実験ページで測定した結果は下記になります。

・PageSpeed Insights

読み込み完了は0.5秒と、他と比べて圧倒的に速いのですが、実験2よりも更に悪い点数になりました。
自分の想定としては、表示そのものは済んでいるので良い点数になると思っていました。意外です。

気になったので読み込み後の5秒後や10秒後の表示も試してみたのですが、どちらもPageSpeed Insightsからエラーが返ってきてしまいました。残念。

実験を通して分かったこと

今回の実験で「Webサイトの読み込み速度」は「ブラウザで実際に表示した結果」と「PageSpeed Insightsによる結果」が別物であることがわかりました。

もちろん、無駄にサイズの大きな画像やコードを削除して、更にキャッシュ化もして読み込み時間を短縮することは効果的なのですが、それ以上にスクリプトで余計な事をする方がPageSpeed Insights的にはアウトみたいですね。

自分は最近「JavaScriptやjQueryなら後からなんでもできるじゃん！超便利！」という浮ついた気持ちでいたのですが、「それはあかんぞ！」という結果が出てしまいました。反省します…。

表示速度の改善を行う際には、画像やコードのサイズを見るだけでなく、余計な処理がないかどうかも確認しないとダメですね。

非常に勉強になりました( ;∀;)

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

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

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

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

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

「住所.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サイトのちょっとしたギミックに設置すると見栄えが良くなるかもしれませんね！

ではまた！

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

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

最近のWebサイトはスマホにも対応しなければなりませんので「各要素でどれだけの幅を使うべきか…？」という事を考えてページを作らなければなりません。

ですが、テーブル等でキッチリと表示している箇所はなかなか修正が難しいんですよね…。
そのままスマホに対応すると、縦に長くなってしまう事も多いと思います。

そこで、今回はテーブルの要素に対して、ユーザーが指定した行数だけを表示する方法をご紹介致します。

※今回の記事を読むことで、下記のようなコンテンツを作ることができます。

下記を変更することでテーブルの表示数が変わります。
3件5件10件

テーブルの要素を切り替えるプログラム

今回は下記のようなプログラムを組んでみました。

<p>下記を変更することでテーブルの表示数が変わります。<br>
  <select id="list-num" onchange="change_table();">
    <option value="3" selected>3件</option>
    <option value="5">5件</option>
    <option value="10">10件</option>
  </select>
</p>
<table id="list-table">
  <tbody>
    <tr><th>項番</th><th>商品名</th></tr>
    <tr><td>1</td><td>りんご</td></tr>
    <tr><td>2</td><td>みかん</td></tr>
    <tr><td>3</td><td>なし</td></tr>
    <tr><td>4</td><td>バナナ</td></tr>
    <tr><td>5</td><td>パイナップル</td></tr>
    <tr><td>6</td><td>ぶどう</td></tr>
    <tr><td>7</td><td>グレープフルーツ</td></tr>
    <tr><td>8</td><td>もも</td></tr>
    <tr><td>9</td><td>いちご</td></tr>
    <tr><td>10</td><td>レモン</td></tr>
  </tbody>
</table>

<script>
<!--
  function change_table(){
    // 要素抜き出し
    var o_list_num_elm = document.getElementById('list-num');
    var o_list_table_elm = document.getElementById('list-table');
    
    // 表示数取得
    var i_list_num = parseInt(o_list_num_elm.value);
    // tableのtr要素を抜き出し
    var a_tr_items = o_list_table_elm.children[0].children;
    
    // 全てのtr要素に対して処理(※見出しの1行分に注意)
    for(i=0; i<a_tr_items.length; i++){
      if(i<(i_list_num+1)){
        a_tr_items[i].style.display = 'table-row';
      } else {
        a_tr_items[i].style.display = 'none';
      }
    }
    return true;
  }
  // 読み込み時にも発火
  change_table();
//-->
</script>

上記のコードで重要な点は下記になります。

① select要素下のoptionのvalueには数値を指定する
② 重要な要素(今回であればselect要素とtable要素)には特定のidを付ける

「変化を受け取る箇所」と「変化を行う箇所」を意識した構造にすることで、結構簡単に実装ができてしまいます。

もし、自身のWebサイトで表示行数の変更にもう一枚ページを作成しているようなことがあれば、ぜひ上記のコードを試してみてください！

ではまた！

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

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

食べ歩きの感想やレビューを書いているブログで近所のお店が書かれていると、ついついお店を調べたりしちゃいますよね。
そんな時に、ブログの記事内にお店への地図と公式サイトへのリンクがまとまっていたら非常に便利なのになぁ　とか思ったりしました。

ということで、今回は「JavaScriptとグーグルマップを組み合わせてコメントやリンクを設定したオリジナルマップを表示する方法」に関して記載します！

今回の記事を読むことで、下記のようなグーグルマップを表示することができるようになります。

※弊社では関連記事として下記のような記事も書いています。

GoogleMapsのAPIキーを取得する

JavaScriptを使用してグーグルマップに何かしらの処理をする際には、APIキーが必要となります。
そのため、まず初めにAPIキーの取得を行いましょう。

下記の記事を参考にしてAPIキーを取得して下さい。
Google Maps APIを使って、サイト上に地図を表示するまでの流れ

HTMLタグとJavaScriptのコードを設置する

今回は例として、相模原市の横山台周辺のラーメン店二点にピンを立てて、ピンをクリックをした際にコメント、画像、リンクを表示してみます。
実際のコードは下記になります。

<div id="map_canvas" style="width:100%; height:500px;">
</div>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=[API key]&callback=initMap"></script>
<script type="text/javascript">
<!--
  var map;
  var marker = [];
  var infoWindow = [];
  // マーカーに設定するタイトル・緯度・経度・内容
  var markerData = [ {
      title: '壱発ラーメン',
      lat: 35.567675,
      lng: 139.361022,
      content: '壱発ラーメン 相模原店<br><img src="./ippatsu.png" width="200"><br><a href="http://ippatsu.co.jp/" target="_blank">公式サイトはコチラ！</a>'
    }, {
      title: 'とんこつらーめん七志',
      lat: 35.568550,
      lng: 139.361146,
      content: 'とんこつらーめん七志 相模原横山台店<br><img src="./nanashi.png" width="200"><br><a href="http://www.nanashi-food.com/" target="_blank">公式サイトはコチラ！</a>'
    } ];
   
 // 地図の作成
  function initMap() {
    // 緯度経度のデータ作成
    var mapLatLng = new google.maps.LatLng({lat: 35.568199, lng: 139.361119});
    // 地図の基本設定
    map = new google.maps.Map(document.getElementById('map_canvas'), {
      center: mapLatLng, // 地図の中心座標を指定
      zoom: 18, // 地図のデフォルトのズーム指定
      mapTypeId: google.maps.MapTypeId.ROADMAP // マップの表示種別選択 (ROADMAP・SATELLITE・TERRAIN・HYBRIDから選択)
    });
    
    // マーカー毎の処理
    for (var i = 0; i < markerData.length; i++) {
      // 緯度経度のデータを作成
      markerLatLng = new google.maps.LatLng({lat: markerData[i]['lat'], lng: markerData[i]['lng']});
      marker[i] = new google.maps.Marker({
        position: markerLatLng, // マーカーを立てる位置を指定
        map: map, // マーカーを立てる地図を指定
        title: markerData[i]['title'] // ツールヒント
      });
      
      // 吹き出しの設定
      infoWindow[i] = new google.maps.InfoWindow({
        // 吹き出しに表示する内容を設定する
        content: markerData[i]['content']
      });
      
      // マーカーにクリックイベントを追加
      markerEvent(i);
    }
  }
   
  // マーカーにクリックイベントを追加
  function markerEvent(i) {
      marker[i].addListener('click', function() {
        // 吹き出しの表示
        infoWindow[i].open(map, marker[i]);
    });
  }
//--?>
</script>

上記のコードは下記記事を参考にして作成しました。
Google Maps APIを使って複数のマーカーと吹き出しを設置してみる

緯度と経度の取得方法

地図のデフォルトの位置や、ピンの位置を設定する際には「緯度」と「経度」の設定が必要になります。
緯度と経度を取得する簡単な方法を二つご紹介します。

緯度と経度を取得できるサイトを利用する

下記のサイトから緯度と経度を取得する事ができます。
Googleマップで緯度・経度を求める

検索入力欄に検索したい場所を入力して、検索ボタンをクリックするだけで緯度と経度が取得できます。

グーグルマップのURLから緯度と経度を取得する

上記検索サイトだけでなく、実際にGoogleMapで検索した際のURLから緯度と経度を取得する事もできます。

例えば「壱発ラーメン 相模原店」をGoogleMapで検索すると下記のようなURLが表示されます。
“https://www.google.co.jp/maps/place/%E5%A3%B1%E7%99%BA%E3%83%A9%E3%83%BC%E3%83%A1%E3%83%B3+%E7%9B%B8%E6%A8%A1%E5%8E%9F%E5%BA%97/@35.567675,139.3588333,17z/data=!3m1!4b1!4m5!3m4!1s0x6019028344f8deff:0x572e2d084aa078e4!8m2!3d35.567675!4d139.361022″

上記URLの”@35.567675,139.3588333“の部分が緯度と経度になります。

※小数点以下の数値に若干の揺らぎがありますが、気にしないで大丈夫です。

上記のいずれかの方法で取得した緯度と経度を使用することで、自由にマップの位置やピンの場所をカスタマイズすることができます！

ユーザーが求めている情報を掲載するWebサイトを目指しましょう！

いかがでしたか？

グーグルマップをページに表示することで、今まで以上に多くの情報を提供できるようになりますので、ユーザーにとって便利なサイトになりそうですね。

ちょっと話がズレてしまいますが、ふと「何故グーグルさんはグーグルマップをカスタマイズするサービスを提供しているのか？」ということを考えてみました。
おそらくですが、提供する一つの理由としては、各々のサイト（またはページ）で調べ物が完結して欲しいという考えがあるのではないでしょうか。

私は頻繁にYoutubeを見るのですが、Youtubeで何かを見る際には、関連動画に飛ぶことはあっても調べる事はほとんどありません。
おそらくですが、グーグルさんはYoutubeのように調べる行為すらも省いたようなサイトを作って欲しいからこそ、いろいろなサービスを提供しているのではないでしょうか。

Youtubeのように、ユーザーが調べる行為を不要とするWebサイトにしていくためには、Webサイトの管理者が「ユーザーさんは何を求めているか？」を考えながらページを作るしかありません。
非常に難しい事ですが、今後はそういったことを考えて作られたWebサイトが求められるのだと思います。

私もまだまだできていないことなので、ブログの投稿を続けてレベルアップしていきたいです！

ではまた！

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

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

今回は他のサイト様でよく見かける「この記事は約〇分で読めます。」を実装する方法を記載します。

JavaScriptを使用して実装する

まずはJavaScriptで実装する方法を記載します。

本プログラムで実装する際に、必要となる条件は下記となります。
・記事を表示するコンテンツが特定のidを付けたdivタグ等で囲われている事。

具体的には、HTMLコードが下記のようになっていれば機能します。

<div id="read-cnt-area">
  ここに記事を書く
</div>

上記のような構造になっていれば下記のプログラムは正常に動きます。…動くはずです！

<script>
<!--
  const MINUTE_READ_CHAR = 500; // 1分間に読める文字数(※1)
  
  var getElm       = document.getElementById('read-cnt-area');
  var strNoHtmlTag = '';
  var iReadTime    = '';
  var strSetHtml   = '';
  
  if(getElm != null){
    // htmlタグを排除して文字列だけを抜き出す(※2)
    strNoHtmlTag = getElm.innerHTML.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g,'');
    // 1分間に読める秒数に変換
    iReadTime = Math.floor( strNoHtmlTag.length / MINUTE_READ_CHAR );
    if( iReadTime == 0 ){
      // 1分未満の場合は1分に変更
      iReadTime = 1;
    }
    // タグ作成
    strSetHtml = '<span style="color: red;">この記事は約' + iReadTime + '分で読めます！</span>';
    // タグ埋め込み
    getElm.innerHTML= strSetHtml + getElm.innerHTML;
  }
//-->
</script>

※1　日本人が1分間に読める文字は400文字～600文字のようなので、間を取って500文字で1分と設定しています。
参考記事：人は１分間に何文字読めるの？スキマ時間で読まれる文字数を推測してみよう。
※2　参考記事：JavaScriptでHTMLタグを削除する正規表現

上記プラグラムはdivタグの後に設置しなければ機能しないので注意して下さい。
このプログラムが正常に動くと、divタグの上に自動で「この記事は〇分で読めます」という文言が表示されるはずです。

実際に使ってみると、下記のようになります。

【↓divタグここから】

【↑divタグここまで】

いけましたね！
このプログラムを使用することで「この記事は約〇分で読めます。」の文言を自動で出すことが可能となります。

JavaScriptでの実装は以上となります

WordPressのプラグインで実装する

こちらはJavaScriptと違って実装がとんでもなく簡単です。
おおまかには、プラグインをインストールして簡単な設定をして作業完了となります。
WordPressを使っているのであれば、こちらの方が楽な作業となりますのでオススメ致します。

まずは「Insert Estimated Reading Time」プラグインをインストールする

プラグインの新規追加より「Insert Estimated Reading Time」を検索してインストールを実行します。

インストールが完了したらプラグインを有効化します。

プラグインを有効化すると、設定のメニューに「Insert Estimated Reading Time」の項目が表示されますので、クリックして設定画面を開きます。

1分間あたりの文字数を500に変更して、「変更を保存」ボタンを押します。

投稿ページを確認すると、記事を読むのに必要な時間が自動で表示されます。

以上！簡単！

やっぱりWordPressのプラグインは凄い！

いかがでしたか？

今回のJavaScriptの方のプログラムは制作時間としては20分～30分程かかりました。
ですが、WordPressのプラグインなら同じような機能が1分程度で実装できてしまいます…。

自作のプログラムは応用ができるので便利ではあるのですが、今回の内容に関してはプラグインが優秀なのでプラグインを使いたいですね。

以前にも書いた気がしますが、やはりWordPressのプラグインは非常に優秀なので、何かプログラムを作る際には、まずは類似した機能があるかどうかを調べたほうが良いですね。
もしプラグインが見つかったら作業時間が1/10になるかもしれません！

ではまた！

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

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

今回はWordPressのプラグイン「Geo Mashup」で表示するGoogleMapのピン（旗）のアイコンを好きな画像に変更する方法を記載します。

※本記事は「Geo Mashup」のピンのカスタマイズに絞って記載しておりますので、プラグインの導入方法や使い方などは下記サイト様を参考にしてください。
GoogleMapにWordPressの記事をプロットする方法 | Geo Mashup

「Geo Mashup」とは何か？

「Geo Mashup」は、記事ごとに設定した座標位置にピンを立ててGoogleMapを表示してくれるプラグインになります。
ピンのアイコン設定は記事のカテゴリーごとに設定できますので、カラフルなピンを立てたGoogleMapを表示することが可能となります。

今回はこのピンを好きな画像に変更する方法をご紹介致します。

GoogleMapのピンのアイコンを変更する方法

アイコンを変更する方法としては、下記の二通りの方法があります。

①プラグインのフォルダに入っている画像を別の画像に変更する
②画像を設定しているJavaScriptの処理を変更して別の画像を参照する

簡単な変更方法は画像を上書きするだけの①となります。
②はちょっと面倒なうえにソースコードが汚くなるのであまりオススメはしませんが、一応記載しておきます。

方法①：プラグインのフォルダに入っている画像を別の画像に変更する

「Geo Mashup」をインストールすると、サーバー内の”/wp-content/plugins/geo-mashup/”のフォルダに”images”フォルダが生成されます。
“images”フォルダの中にはプラグインで使用する画像が全て入っていますので、その画像を上書きすることでピンのアイコンを変更します。

ちょっと試しにやってみましょう。

まずは”images”フォルダをダウンロードして中身を確認します。
すると、フォルダ内に”mm_36_aqua.png”や”mm_36_black.png”等の画像が存在することが確認できます。

この”mm_36_XXXX.png”というのが、カテゴリーで設定したときの色に対応するピンのアイコンとなっています。
なので、元素材の画像をちょっと加工して下記のようなアイコンを作ってみました。

作ったアイコンで表示させるために、作ったアイコンの名前を”mm_36_aqua.png”という名前にリネームして、サーバー内の”.png”形式のファイルを上書きします。
ファイルを上書きしてからGoogleMapを見ると、下図のように作ったアイコンがピンとして表示されるようになります。

同じようにして”mm_36_black.png”や”mm_36_blue.png”等のアイコンも変更して、オリジナルのアイコンを表示させることができます。

方法②：画像を設定しているJavaScriptの処理を変更して別の画像を参照させる

次に紹介する方法はちょっと難しい方法になりますので、JavaScriptがわからない方は①を試してください。
※違う場所をいじってしまうと、プログラムの処理が変わって予想外の動きをしてしまう場合があるので注意が必要です。

まずはじめに、サーバー内の”/wp-content/plugins/geo-mashup/js/”のフォルダ内の”geo-mashup-mxn.min.js”のファイルをダウンロードします。

ファイルにはJavaScriptの処理が書かれています。
JavaScriptの処理をちょっと変更しますので、まずはファイル内の文言で”return icon”の記述を探します。

“return icon”の記述を見つけたら、処理の前に下記のような処理を追加します。

if( 'aqua' == color_name ) {
  icon.image = '<<使用したい画像のファイルパス>>';
}

ソースコードの書き方としては下記のような記述で構いません。
（下記のように雑に入れたほうが、後になって追加した処理を探す際に探しやすくなるかもしれません。）

処理の概要としては、color_nameには参照する色の名称（”aqua”等）が入ってきますので、特定の文言が入ってきたら参照する画像を変更することで使用する画像を変更しています。
上記の処理では”aqua”の色が指定された際に、別の画像を表示するように変更しています。

JavaScriptを編集する方法は、ちょっと面倒なうえにプラグインの更新が入った際に処理が消えてしまうこともありますので、やはり方法①の方が良いように思います。

やってみると意外と簡単？プラグインを自分の好みに編集してみましょう！

いかがでしたか？

WordPressのプラグインは誰でも使えて非常に便利なのですが、なかなか自分好みの編集ができないことが悩みの種だったりします。
そこで、今回の記事のような画像やアイコンを変更したい場合は、プログラムをいじる必要はなく、画像の上書きでなんとかなってしまう場合もあります。

プラグインを調査するのは非常に面倒ですが、よくよく考えたら簡単な場合もありますので「これはプラグインだから変更は無理！」と諦めてしまった部分をもう一度見直してみると良いかもしれません。
案外簡単に変更ができてしまうかもしれません。

ではまた！

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

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

コードを組んでいるうちにいつの間にか違いを理解していたJavaScriptとphpの違いに関して、復習も兼ねて記事にしてみようと思います。

「バックエンド」や「フロントエンド」という難しい言葉は省いて、ざっくりと「どう違うのか？」「何故使い分けるのか？」という部分をご紹介します。

まず初めに「ブラウザ」と「サーバー」の仕事の違いを理解する

JavaScriptやphpの違いを考える前に、Webサイトを閲覧する際に必要な「ブラウザ」と、データを提供する「サーバー」の仕事を理解しなければなりません。

では、Webサイトを見るために使用している「ブラウザ」と「サーバー」はそれぞれどんな仕事をしているのか。各々の仕事の違いを見てみましょう。

ブラウザの仕事は？

ブラウザの仕事は「サーバーへの要求」と「サーバーから提供された情報に対する処理を行う」ことが主な仕事になります。
サーバーから提供されるデータにはJavascriptの記述もありますので、ブラウザではJavascriptの処理を行います。

サーバーの仕事は？

サーバーの仕事は「ブラウザの要求に対して必要なデータを提供する」ことが主な仕事になります。
ブラウザが要求したデータがphp形式であれば、phpで記述された箇所を処理して、データをブラウザ側へ提供します。

このように、ブラウザとサーバーは「要求」と「提供」をすることによって、様々なWebサイトを表示しています。

JavaScriptとphpの大きな違いは処理を行うタイミングにあります

見出しの通りですが、JavaScriptとphpの大きな違いは処理を行うタイミングにあります。
JavaScriptはブラウザ側で処理が行われて、phpはサーバー側で処理が行われます。

言葉ではなかなかイメージできないと思いますので、下記のようなソースコードを参考にして処理の流れを見てみましょう。

上記のソースコードをサーバーに設置してブラウザからアクセスをすると、phpの部分はサーバー側で処理が行われます。

サーバー側はphpの処理を行い、下記のようなコードに変換してブラウザ側にデータを送信します。

JavaScriptの記述はそのまま残るので、JavaScriptのコードはブラウザ側で処理されます。

phpはサーバー側で処理を行うため、データベースにもアクセスが可能となっています。そのため、記事のデータをデータベースに保管するCMS（WordPress等）ではphpの操作が必須となります。

ちょっとした余談になりますが、以前に私は下記のような記事を書きました。

上記の記事では、JavaScriptを使用して「現在の曜日」を取得していますが、phpでも同様の処理をさせることができます。

しかし、JavaScriptとphpでは処理を行うタイミングが違うため、結果が異なる場合があります。

例えば、パソコンの日付設定が月曜日で、サーバーの日付設定が火曜日だった場合を考えてみましょう。

JavaScriptでプログラムを組んだ場合は、パソコンの設定で処理が行われるため、今回の例であれば月曜日が出力されます。
一方、phpでプログラムを組んだ場合は、サーバーの設定で処理が行われるため、今回の例であれば火曜日が出力されます。

このように、パソコンの設定とサーバーの設定が異なっていると違う結果が出力されます。
そのため、Webサイトで機能を実装する際には、JavaScriptとphpのどちらで組むべきかを事前に決める必要があります。

ささいな疑問でも解消するだけに留めず、しっかりと理解しましょう！

いかがでしたか？

JavaScriptとphpの違いは、プログラムを組んでいる人は何となく理解した気になってしまう部分だと思います。
かく言う私も、半年ほど前までは何となくで組んでいましたが、ふとJavascriptとphpを交互に組んでいるうちに「あれ？どっちが先に処理されるんだっけ？」と初歩的な部分に躓いてようやく理解しました。

こういったささいな躓きで理解していくことが、プログラマーにとっては大事なことなんだと思います。

ではまた！

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

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

※本記事のプログラムは2018年2月14日に修正しました。

プログラムを組む感覚を取り戻そうとしています、網干です。

少しの期間ですがプログラムから離れていたら、もうGoogleさんに頼らないと組めない頭になっていました。
これじゃイカンということで、勘を取り戻すためにもちょっとしたプログラムを組んでご紹介します。

今回はJavaScriptを使用してスクロールの位置を取得し続けて、ちょっとした処理を行う方法をご紹介します。

うまく活用すればサイトのユーザービリティの向上にも役立つかもしれません！

スクロールの位置を取得または設定する方法

スクロール位置はonscrollイベントで取得します。

onscrollイベントに関しての詳しい説明は下記のサイト様でうまくまとめられていますのでご参照ください。
onscrollイベント
スクロールの位置（量）を取得・設定

要するにwindow.onscrollのイベントに処理を追加しましょう、という事ですね。

onscrollイベントが発生した際にdocument.documentElement.scrollTopを確認することで、オブジェクトのスクロール位置が取得できます。
また、document.documentElement.scrollTopは値の参照だけでなく代入もできるので、スクロールの位置を設定したい場合は値を入力することで設定もできるようです。

では実際に、onscrollイベントに処理を追加してスクロール位置を監視しながら何らかの処理をさせてみましょう。

スクロール位置を監視して何かしらの処理をさせるサンプルコード

今回作成したコードは…
1. スクロール量を常に取得して表示
2. スクロール量が特定の位置に達したら何かしらの処理を行う
上記を意識してコードを組んでみました。

具体的には下記のようなコードになります。
（※本記事にもコードを仕込んでおります。画面の右下にスクロール量を表示して、特定のスクロール量に達すると大魔神が降臨します。クリックして撃破しましょう！）

<div id="img-campus" style="position: fixed; bottom: 0px; right: 0px; width: 200px; height: 165px; background: url(https://incloop.com/wp-content/uploads/2017/04/02_雲みたいな吹き出し.png); background-size: 200px; background-repeat: no-repeat; z-index: 100;">
  <div id="fukidashi-box" style="text-align: center; position: relative; top: 60px;">
    <p style="line-height: 165%;">スクロール量が<br><span id="scroll-count">0</span>pxを突破！<span id="subtext"></span></p>
  </div>
</div>

<div id="tanaka-daimajin" style="position: fixed; top: -600px; width: auto; cursor: pointer; z-index: 100;" onClick="DaimajinDown();">
  <img src="https://incloop.com/wp-content/uploads/2017/03/田中さん.png">
</div>

<script type="text/javascript">
<!--
  /***** init set S *****/
  // 定数定義
  const posImgChangePx   = 2000;  // 吹き出しの画像を変えるpx位置
  const posDaimajinDefPx = -600;  // 大魔神の基本のTopのpx位置
  const posDaimajinMaxPx = 100;   // 大魔神が降臨できる限界のTopのpx位置
  var   documentElement  = null;  // スクロールを測定する要素
  var   flgImgChange     = false; // 画像切替確認用フラグ

  // 要素取得
  var getElmImgCampus   = document.getElementById('img-campus');
  var getElmFukidashi   = document.getElementById('fukidashi-box');
  var getElmScrollCount = document.getElementById('scroll-count');
  var getElmSubText     = document.getElementById('subtext');
  var getElmDaimajin    = document.getElementById('tanaka-daimajin');
  
  // スクロール位置を測定する要素を設定
  if (navigator.userAgent.toLowerCase().match(/webkit|msie 5/)) {
    // Webkit系（Safari, Chrome, iOS）判定
    if(navigator.userAgent.indexOf('Chrome') != -1){
      // Chromeはhtml要素
      documentElement = document.documentElement;
    } else {
      // Chrome以外はbody要素
      documentElement = document.body;
    }
  } else {
    // IE（6以上）、Firefox、Operaはhtml要素
    documentElement = document.documentElement;
  }
  /***** init set E *****/
  
  /***** event func set S *****/
  // ウィンドウのスクロール量取得
  window.onscroll = function() {
    // スクロール位置を入力
    getElmScrollCount.innerHTML = Math.floor( documentElement.scrollTop );
    
    // 画像切替判定
    if( documentElement.scrollTop > posImgChangePx ){
      // 画像切替
      getElmImgCampus.style.backgroundImage = 'url(https://incloop.com/wp-content/uploads/2017/03/爆発吹き出し.png)';
      // フラグ切替
      flgImgChange = true;
      // 文言追加
      getElmSubText.innerHTML = '<br><font color="red">やばい！ヤツが来る！！<br>クリックして撃破しよう！</font>';
      // 文言の位置調整
      getElmFukidashi.style.top = '20px';
      // 大魔神の位置を調整
      var tempPos = posDaimajinDefPx + ( Math.floor( documentElement.scrollTop ) - posImgChangePx );
      // 大魔神の降臨位置が最大の値以上？
      if( tempPos >= posDaimajinMaxPx ) {
        // 大魔神の位置を変更
        getElmDaimajin.style.top = posDaimajinMaxPx + 'px';
      } else {
        getElmDaimajin.style.top = tempPos  + 'px';
      }
    } else if( ( documentElement.scrollTop <= posImgChangePx ) && ( flgImgChange == true ) ) {
      // 画像切替
      getElmImgCampus.style.backgroundImage = 'url(https://incloop.com/wp-content/uploads/2017/04/02_雲みたいな吹き出し.png)';
      // フラグ切替
      flgImgChange = false;
      // 文言削除
      getElmSubText.innerHTML = '';
      // 文言の位置調整
      getElmFukidashi.style.top = '60px';
    }
  };
  /***** event func set E *****/
  
  /***** func set S *****/
  function DaimajinDown(){
    getElmDaimajin.style.display= 'none';
  }
  /***** func set E *****/
// -->
</script>

各処理の解説は全てコードのコメントに記載しています。

画面上で見るとなかなか手の込んだ仕組みをしていそうですが、コードを見ると意外と短くてすっきりしていますね。
onscrollイベント内の処理はもう少し最適化できそうですが…。

特に、画像の切り替えや文言の変更は毎回入力する必要はないので、切り替えのタイミングのみで処理をさせたいですね。
ただ、if分岐が増えてしまいそうなのが気になるので、今回はこのまま処理をさせることにしました。

適切なスクロール位置で適切なコンテンツを出すことでユーザビリティの向上も

いかがでしたか？

最近、様々なサイトで特定のスクロール位置で何かを表示するようなギミックをよく見かけます。
動きがあって面白いサイトなのですが、見えないコンテンツはGoogleの評価的にはどうなのだろうと気になってしまいます。
参考：展開ボタンやタブに隠れたコンテンツは無視され検索結果の対象にならないかもしれない

ですが、うまく作りこんであるサイトは、スクロールに合わせて目次が追従したり、他の記事への紹介を自然に挟みこんできたりと、「便利だなぁ」と感心することもありました。
ユーザーが便利だと思えるようなコンテンツは必ず評価の対象になると思うので、そういったコンテンツをもっと作っていきたいですね。

ではまた！

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

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

「日替わり」や「期間限定」という言葉に弱いです、網干です。

飲食店やスーパーマーケットで曜日替わりのサービスをやっているお店をよく見かけます。
ですが、ホームページを見ても各曜日ごとにどのようなサービスがやっているのかわからない場合が多いです。

曜日替わりのサービスがホームページでも見られたら良いのになぁ、という思いも込めて、今回は曜日ごとに文言の表示を変更するJavaScriptのコードをご紹介致します。

記事の最後には使用例を記載しますので、楽にカスタマイズができると思います。

曜日替わりで表示を変更するJavaScriptコード

曜日替わりで文言を変更するコードは下記になります。

<script language="JavaScript">
<!--
	var weeks	= new Array('日','月','火','水','木','金','土');
	var today	= new Date();				//	日付オブジェクト取得
	var week	= weeks[today.getDay()];	//	曜日取得
	var string	= '';						//	文言格納用変数
	
	switch(week) {
		case '日':
			// 日曜日の場合
			string = '本日は日曜日です。';
			break;
		case '月':
			// 月曜日の場合
			string = '本日は月曜日です。';
			break;
		case '火':
			// 火曜日の場合
			string = '本日は火曜日です。';
			break;
		case '水':
			// 水曜日の場合
			string = '本日は水曜日です。';
			break;
		case '木':
			// 木曜日の場合
			string = '本日は木曜日です。';
			break;
		case '金':
			// 金曜日の場合
			string = '本日は金曜日です。';
			break;
		case '土':
			// 土曜日の場合
			string = '本日は土曜日です。';
			break;
		default:
			// 曜日が取得できなかった場合
			string = '曜日を取得できませんでした。';
			break;
	}
	
	document.write( string );
-->
</script>

実際に使ってみると…



↑このように表示されます。

これで、曜日ごとに表示を変更することが可能になります！
では、以降は場面別でのコードの使用例を記載します。

使用例１：飲食店のメニューを曜日替わりで変更して表示する

↑のソースコードは下記になります。

<script language="JavaScript">
<!--
	var weeks	= new Array('日','月','火','水','木','金','土');
	var today	= new Date();				//	日付オブジェクト取得
	var week	= weeks[today.getDay()];	//	曜日取得
	var string	= '';						//	文言格納用変数
	
	switch(week) {
		case '日':
			// 日曜日の場合
			string = '本日、日曜日は特製オムライスが500円です！';
			break;
		case '月':
			// 月曜日の場合
			string = '本日、月曜日はハンバーグ定食が500円です！';
			break;
		case '火':
			// 火曜日の場合
			string = '本日、火曜日は海鮮丼が500円です！';
			break;
		case '水':
			// 水曜日の場合
			string = '本日、水曜日は定休日です。';
			break;
		case '木':
			// 木曜日の場合
			string = '本日、木曜日は特製トマトスパゲッティが500円です！';
			break;
		case '金':
			// 金曜日の場合
			string = '本日、金曜日は唐揚げ定食が500円です！';
			break;
		case '土':
			// 土曜日の場合
			string = '本日、土曜日は特製ビーフシチューが500円です！';
			break;
		default:
			// 曜日が取得できなかった場合
			string = '曜日を取得できませんでした。';
			break;
	}
	
	document.write( string );
-->
</script>

使用例２：スーパーマーケットの曜日替わりサービスを曜日ごとに変更して表示する

↑のソースコードは下記になります。

<script language="JavaScript">
<!--
	var weeks	= new Array('日','月','火','水','木','金','土');
	var today	= new Date();				//	日付オブジェクト取得
	var week	= weeks[today.getDay()];	//	曜日取得
	var string	= '';						//	文言格納用変数
	
	switch(week) {
		case '日':
			// 日曜日の場合
			string = '本日、日曜日はパンの日！全品100円です！';
			break;
		case '月':
			// 月曜日の場合
			string = '本日、月曜日は鮮魚の日！サンマが一尾90円です！';
			break;
		case '火':
			// 火曜日の場合
			string = '本日、火曜日は青果の日！キャベツが一玉90円です！';
			break;
		case '水':
			// 水曜日の場合
			string = '本日、水曜日はお菓子の日！100円以上のチョコレートが全品30円引きです！';
			break;
		case '木':
			// 木曜日の場合
			string = '本日、木曜日はお肉の日！牛肉が1g1円です！';
			break;
		case '金':
			// 金曜日の場合
			string = '本日、金曜日はお惣菜の日！お惣菜が全品10%オフです！';
			break;
		case '土':
			// 土曜日の場合
			string = '本日、土曜日は冷凍食品の日！冷凍食品が全品半額です！';
			break;
		default:
			// 曜日が取得できなかった場合
			string = '曜日を取得できませんでした。';
			break;
	}
	
	document.write( string );
-->
</script>

使用例３：映画館の曜日替わりサービスを曜日ごとに変更して表示する

↑のソースコードは下記になります。

<script language="JavaScript">
<!--
	var weeks	= new Array('日','月','火','水','木','金','土');
	var today	= new Date();				//	日付オブジェクト取得
	var week	= weeks[today.getDay()];	//	曜日取得
	var string	= '';						//	文言格納用変数
	
	switch(week) {
		case '日':
			// 日曜日の場合
			string = '本日、日曜日はレディースデー！女性のチケット料金は1000円になります！';
			break;
		case '月':
			// 月曜日の場合
			string = '本日、月曜日はアクション映画のチケット料金が1000円になります！';
			break;
		case '火':
			// 火曜日の場合
			string = '本日、火曜日はアニメーション映画のチケット料金が1000円になります！';
			break;
		case '水':
			// 水曜日の場合
			string = '本日、水曜日はホラー映画のチケット料金が1000円になります！';
			break;
		case '木':
			// 木曜日の場合
			string = '本日、木曜日はSF映画のチケット料金が1000円になります！';
			break;
		case '金':
			// 金曜日の場合
			string = '本日、金曜日はコメディ映画のチケット料金が1000円になります！';
			break;
		case '土':
			// 土曜日の場合
			string = '本日、土曜日はドキュメンタリー映画のチケット料金が1000円になります！';
			break;
		default:
			// 曜日が取得できなかった場合
			string = '曜日を取得できませんでした。';
			break;
	}
	
	document.write( string );
-->
</script>

規則的に表示を変更したい場合は、プログラムを使用して自動化しちゃいましょう！

いかがでしたか？

今回のプログラムは「曜日替わりでサービスを提供しているけど、毎日のHPの更新が面倒！」となったときに使えそうですね。

ではまた！

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

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