2014年頃から、グーグルストリートビューに過去の画像が見られる「タイムマシン」という機能が追加されました。
あまり知られていないこの機能ですが、6年経った現在は過去の写真が多くなり、結構楽しい機能になっていたので記事にします。

ストリートビューの「タイムマシン」の操作方法

まず初めに、グーグルマップを表示します。
グーグルマップ

左上のテキストボックスに地名や建物名を入力して検索します。

画面右下の人形をドラッグ（クリックして押しっぱなし）して、見たい地図の位置に人形の位置を合わせてドロップします。

ストリートビューが表示されたら、画面左上の時計のアイコンをクリックします。

小さい画面の中に、過去の映像が残されている年代が表示されますので、ボタンのアイコンを見たい年代に移動させて日付の文字をクリックします。

過去の画像が表示されます。

左側の建物の1階の日高屋さんは昔はモスバーガーだったんですね、懐かしいです。

過去の映像はグーグル側に記録が残っている箇所のみになりますので、場所によっては過去の映像がない場合もありますが、相模原周辺の大通りであれば10年前の映像も残っていました。

コロナの影響で遠方への旅行ができないストレスが溜まっている方は、ストリートビューで過去への旅行をしてみるとストレス解消になるかもしれません。

地元を知る友だちや親戚と過去の建物や施設を懐かしんだり、昔の街並みについてクイズをしてみると盛り上がるかもしれませんね！

ではまた！

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

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

Youtubeが流行っていることもあり、ホームページのトップビューで動画を流すサイトが多くなりました。
ホームページ上で動画が流れるようなサイトは中身のコンテンツも凝っていることが多いので「すごく難しい事をやっているんだろうなぁ…」と思ってしまいますが、実はそんなことはなかったりします。
ということで、今回は表題の通り「動画を自動再生させて、動画の中央に画像を被せて表示する方法」を紹介します。

この記事を読んでできる事（サンプル）

下記のように、動画の上に画像を被せた表示ができるようになります。

準備は簡単！動画と画像を用意するだけ！

画像は弊社のロゴを使用します。
動画は著作権フリーで非常に良質な動画がダウンロードできる「pixabay」様のサイトから取得しました。
準備はたったこれだけですが、単純な技術だからこそ素材の質が非常に重要になるので、素材の選定にはこだわりましょう！

設置するHTMLコード

設置するコードは下記になります。

<div id="movei-contents">
  <video id="video" src="https://incloop.com/wp-content/uploads/2020/08/fishing.mp4" loop autoplay muted></video>
  <img src="https://incloop.com/wp-content/uploads/2020/08/logo.png">
</div>

上記のように、videoタグとimgタグに用意した素材のURLを貼り付けるだけでOKです。
注意点としては、videoタグには「loop」「autoplay」「muted」という属性を付けています。
「loop」は映像のループ、「autoplay」は自動再生、「muted」は動画の消音設定になります。
GoogleChromeでは「muted」属性が付いていないと「autoplay」が動かないので、その点のみ注意が必要です。

詳細は下記記事が参考になりますので、詳しく調べたい方はリンク先をご確認ください。
video: 動画埋め込み要素 – HTML: HyperText Markup Language | MDN

CSS（スタイルシート）の設定

用意するコードはたった3つのセレクタになります。

<style>
#movei-contents {
  position: relative;
  display: inline-block;
}
#movei-contents video {
  width: 100%;
}
#movei-contents img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  padding: 50px 100px;
  background-color: rgba(255,255,255,0.6);
}
</style>

これだけのコードで、今風のホームページによくあるサンプルのような表示が実現できてしまいます。

少しでもホームページの見栄えをよくしたいと思ったら、今回のような動画と画像を組み合わせたコンテンツを表示しても良いかもしれませんね。

ではまた！

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

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

ファッション系のECサイトと相性の良さそうな「着せ替え」機能を簡単に実装するプログラムを作ってみました。

使用する言語

• HTML
• CSS
• JavaScript
• jQuery

※JavaScriptやjQueryの基本的な使い方は割愛させてただきます。

着せ替え機能のサンプル

服の画像をクリックすると、服を組み合わせた画像を上部に表示します。

各種コードの説明

HTMLコード

<div id="kisekae-area">
  <img class="base-img" src="https://incloop.com/wp-content/uploads/2020/07/base.png">
</div>

<div id="select-img-area">
  <p class="select-img">
    <img src="https://incloop.com/wp-content/uploads/2020/07/item1-cutout.png">
    <img src="https://incloop.com/wp-content/uploads/2020/07/item1.png">
  </p>
  <p class="select-img">
    <img src="https://incloop.com/wp-content/uploads/2020/07/item2-cutout.png">
    <img src="https://incloop.com/wp-content/uploads/2020/07/item2.png">
  </p>
  <p class="select-img">
    <img src="https://incloop.com/wp-content/uploads/2020/07/item3-cutout.png">
    <img src="https://incloop.com/wp-content/uploads/2020/07/item3.png">
  </p>
  <p class="select-img">
    <img src="https://incloop.com/wp-content/uploads/2020/07/item4-cutout.png">
    <img src="https://incloop.com/wp-content/uploads/2020/07/item4.png">
  </p>
</div>

class「select-img」の二枚の画像は、一枚目がユーザーがクリックする選択用の画像、二枚目は着せ替え用の画像として使います。
二枚目の画像は着せ替えのみに使いますので、CSSの設定で非表示化しておきます。

着せ替え用の画像を作成する際には、基準となる画像と同じサイズで、レイヤーのように組み合わせた際に違和感が無いような位置に調整して作成します。

jQuery(JavaScript)コード

<script>
<!--
  jQuery(function($) {
    // 画像エリアクリックイベント
    $('.select-img').on('click', function(){
      $(this).toggleClass('selected');
      change_img();
    });

    // 画像変更処理
    function change_img(){
      var s_html = '';
      var i_z_index = 1;
      $('.select-img.selected').each(function(index, element){
          s_html += '<img src="' + $(element).find('img').eq(1).attr('src') + '" style="z-index:' + i_z_index + '">';
          i_z_index++;
      });
      // 要素削除
      $('#kisekae-area img').each(function(index, element){
        if(!$(this).hasClass('base-img')){
          $(this).remove();
        }
      });
      // 要素追加
      $('#kisekae-area').append(s_html);
    }
  });
-->
</script>

選択済みのimgタグを全て取得したら、class「base-img」以外の画像を一度消して、選択された画像のみで取得したimgタグを着せ替え画像のエリアに埋め込みます。

※z-indexは後半に取得した要素ほど上にくるような処理になっているため、画像の順番に気を付けてください。

CSS（スタイルシート）の設定

<style>
#kisekae-area {
    border: solid;
    margin-bottom: 10px;
    text-align: center;
    position: relative;
}
#select-img-area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.select-img {
    border: solid 1px #000;
    text-align: center;
    padding: 10px;
    width: 20%;
    margin-right: 5px;
    cursor: pointer;
}
.select-img img {
    display: none;
}
.select-img img:first-child {
    display: inline-block;
}
.select-img:hover {
    background-color: #e6e6e6;
    opacity: 0.6;
}
.select-img.selected {
    background-color: #e6e6e6;
}
#kisekae-area img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
#kisekae-area img.base-img {
    position: relative !important;
    top: auto;
    left: auto;
    transform: none;
    -webkit-transform: none;
    -ms-transform: none;
}
</style>

今回は簡易的なコードで組みましたが、画像の命名規則などをしっかり決めることができれば、隠している画像も不要になるかもしれませんね。

コロナの影響でECサイトが盛り上がっていますので、今回の着せ替えプログラムはECサイトで役立つかもしれません！

弊社では本記事のようなシステムの実装に関するご相談も承っておりますので、もし興味がありましたらお問い合わせまでお気軽にご連絡ください。

ではまた！

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

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

…という経験をしたので記事にしてみました。

原因が分かってしまえば一瞬で治るのですが、原因が分からないと結構引っかかる問題だったりします。
ちなみに私は今回の問題で1時間程悩みました！ …泣けます。

あまりにも悔しかったので、クイズっぽい感じの記事にして過去の自分に届けます（？）

あれ？XAMPP環境で動作確認したシステムがXserverにアップロードしたら動かない…？

とあるページをXAMPP環境で編集して動作確認をしていました。
実装のイメージとしては、下記のようにphpファイルとcssファイルを用意して同じディレクトリに格納しました。

■phpファイル

■cssファイル

■ディレクトリ構成

上記の構成でローカルのULRにアクセスすると下記のような表示になります。

スタイルシートも反映されていて想定通りの表示になりました。

作成が完了したので、早速Xserverにアップロードしてページにアクセスしてみます。
すると…

変化が少ないので分かりづらいですが、CSSファイルが反映されていません。

「おかしいな？」と思ってファイルのエラー内容を見てみると…。

「i-sp-style.css」が読み込まれていないらしい…。

アップロードの失敗を疑いましたが、しっかりとサーバーにアップロードできていました。（※10回ほど上書きしてアップロードしました。）

ではCSSの読み込みの記述が間違っているのか？　再度確認してみましたが…。

パスも間違っていない…。
そもそもXAMPPで確認ができているので、アップロードの失敗以外で読み込みエラーになるのはおかしい…。

どういうことなの…？

…というバグに遭遇して、1時間も悩みました…(´;ω;｀)

どうでしょうか、皆さんはこのバグの修正方法がわかりましたか？

早速、答えを見てみましょう！

バグの原因は「ファイルの大文字と小文字の違い」にありました

先程のディレクトリ構成をよく見てみるとcssのファイル名の頭文字が大文字になっています。

これがスタイルシートが読み込めない原因となっていました。

ですが少し待ってください。XAMPP環境では問題なくスタイルシートは読めていました。
何故ローカル環境とXserverの環境で表示が変わってしまったのでしょうか？

これはサーバーを構成するOS（※WindowsやLinuxの違い）によって、ファイル名の大文字/小文字を区別するかしないかの違いにありました。

参考記事：大文字／小文字の問題とマルチ・プラットフォームの開発 | 東陽テクニカ | “はかる”技術で未来を創る | ソフトウェア 開発支援

私のXAMPP環境はWindowsサーバーなので、ファイルの大文字と小文字を区別しません。一方で、XserverはLinuxサーバーなので、大文字と小文字を区別しています。
このように、今回のバグはサーバーのOSの違いによって発生していたため、原因を突き止めるのに時間がかかってしまいました。

サーバーを構築したことのある方なら「こんなもの当然でしょ？」となるのですが、知識が浅いとこんな些細な問題に気づくのも一苦労でした…。

「もっとサーバーの勉強をしなさい！」というサーバーからのメッセージを受け取った気がします( ;∀;)

日々精進です！ではまた！

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

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

本日の昼頃に、弊社事務所から歩いて数分の場所にある相模原中央病院にて、5人目となる新型コロナウイルスの感染者が確認されました。
参考記事：感染経路不明…なぜ５人に　相模原の病院、対策委設置へ | 社会 | カナロコ by 神奈川新聞

そのため、弊社では新型コロナウイルスへの対策として「テレワーク」の導入を始めました。
テレワークの導入は初めてなので、本当に社内の仕事が回るのかどうか不安でしたが、弊社の業務内容と相性が良かったこともあり、滞りなく仕事が進んでいます。

今回は、弊社で実際に仕事を回している「テレワーク」の方法についてご紹介いたします。

そもそもテレワークって何…？

ざっくりと説明すると「ネットを使って場所や時間にとらわれずに働く」ことを「テレワーク」と呼びます。

詳しい説明は下記サイトで綺麗にまとまっていますので、興味のある方は読んでみてください。

• テレワークとは｜テレワークの導入・活用｜一般社団法人日本テレワーク協会
• テレワークとは何ですか？（人事労務Q&A）｜人事、採用、労務の情報ならエン人事のミカタ

工場や飲食店など、業務内容が場所に依存する業種に関してはテレワークの実現は難しそうですが、弊社のようにパソコンを使った業務が多い場合は下記の三つの方法が決まっていれば実現は可能です。

• リアルタイムで繋がる連絡手段
• ファイルの受け渡し方法
• 各々の仕事を把握する方法

上記に関して、弊社で実際に活用しているツールと使い方をご説明いたします。

リアルタイムで繋がる連絡手段

リアルタイムの連絡手段として下記のツールを活用しています。

• Google ハングアウト
• Chatwork

詳しい使い方は各サイトに掲載されていますので、そちらをご覧ください。

弊社では各ツールを下記にように使っています。

Google ハングアウト

• 社内連絡用に活用。
• 基本的には従業員のみを登録して、パソコン・スマホの両方で確認できるようにする。
• スマホへの通知も有効にすることで、緊急時も対応できるようにする。
• 既読の際にはアイコンが表示されるため、担当者が読んでいるかどうかの確認をして対応を決められる。
• 画像ファイルの添付が可能なので、簡単な指示書であれば画像を貼り付けて共有する。
• ビデオチャットが可能なので、カメラとマイクを使って打ち合わせを行う。
• ビデオチャットでパソコン画面の共有が可能なので、画面をキャプチャしながら打ち合わせを行う。

Chatwork

• お客様との連絡に活用。
• お客様との簡単なファイルの共有をする。
• お客様とタスクの共有をする。
• 画像ファイルの添付が可能なので、簡単な指示書であれば画像を貼り付けて共有する。
• ビデオチャットが可能なので、カメラとマイクを使って打ち合わせを行う。
• ビデオチャットでパソコン画面の共有が可能なので、画面をキャプチャしながら打ち合わせを行う。

おおまかな使い分けとして、ハングアウトは社内連絡用、Chatworkはお客様連絡用として使い分けています。

ツールを導入する条件として必須なのが「登録が簡単」「連絡がいつでも受け取れる」「簡単なファイルの共有ができる」という3点になります。

これらのツールを使うことで、どこにいても連絡が取れますし、お客様との打ち合わせや簡単なファイルの共有も可能となります。

ファイルの受け渡し方法

ファイルの受け渡し方法として、下記のツールを活用しています。

• Google ドライブ
• Dropbox
• ギガファイル便

弊社では各ツールを下記にように使っています。

Google ドライブ

• 社内のファイル共有に活用。
• 画像データに限らず、様々な形式のファイルを共有する。
• 基本的には容量の少ないデータを格納する。
• 議事録の作成や共有したい表計算の資料は、Google ドキュメントやスプレッドシートを使って共有する

Dropbox

• お客様とのファイル共有に活用。
• 画像データに限らず、様々な形式のファイルを共有する。

ギガファイル便

• 従業員・お客様の両方に活用。
• 動画ファイルなどの容量の大きいデータを共有する。

こちらも連絡手段と同じく、社内用・お客様用・両方といった括りで各種ツールを活用しています。

ファイル共有のツールとして重要なのは「簡単に使える」「ファイルがいつでも受け取れる」「ファイルの閲覧権限が変更できる（またはパスワードが付けられる）」という部分になります。

基本的には公にできないファイルのやり取りになるので、他の人が見られない状態にできることが最低条件となります。

各々の仕事を把握する方法

各々の仕事を把握する方法として、下記のツールを活用しています。

• Trello
• Google カレンダー

弊社では各ツールを下記にように使っています。

Trello

• 社内のタスク管理用に活用。
• 社内の全タスクを登録して、従業員全員が確認できるようにする。
• 各作業のステータスがいつでもわかるように管理する。
• 各従業員の負荷が早期に発見できるようにする。
• 指示書などの簡単な画像ファイルはタスクと一緒に添付して共有する。

Google カレンダー

• 各従業員の出勤・休暇の状況や作業場所を把握する。
• 打ち合わせスペースの確保や各社員の戻り予定などを把握する。

お客様とのタスク管理はChatworkやメール、電話でのやりとりがメインになりますので、ここでは社内のタスク管理のみに絞って使っているツールを記載しました。

タスクの管理で必要なのは「簡単に使える」「簡単なファイルのやり取りができる」「閲覧権限が変更できる」「いつでも見られる」という部分になります。

このようにして、弊社では様々なツールを活用して仕事に必要な情報を全社員が共有しています。

やや機能が重複しているツールもありますが、用途を明確にすることで従業員が作業を行う上で「〇〇をするときは××を見ればわかる」という状態を整える事で、どこにいてもパソコン1台あれば作業ができるようにしています。

様々なツールを使って複雑な事をやっているように見えますが、全てのツールがトレーニングがいらない程に操作が簡単なので、慣れてくると席を立つことなく、誰にも話しかけずに作業が完結してしまう事もあります。

このようにして、作業者が迷うことなく作業ができる環境を整える事で、テレワークが実現できるようになります。

便利なツールを使うことで「テレワーク」は実現可能になります

色々と書きましたが、弊社がテレワークを短期間で実現した大きな要因は「仕事に役立つ便利なツールを知っていたこと」にあります。

小さな事務所ですので、各々の作業者は明確に作業が分かれておらず、作業を兼任することが多いです。
そのような状態でうまく仕事を回すには、各々の作業だけでなく全体の作業を把握する事が大事になります。

そういった環境で仕事をするためには、様々な便利ツールに頼る必要がありました。

ハングアウトやTrelloは業務を円滑に回すために必要なツールとして導入しましたが、それがテレワークの為のトレーニングとなり、実際にテレワークが実施されても従業員は迷うことなく作業ができるような環境になっていました。

ハングアウトなどの便利なツールを使うことで、様々な事象に対応した「働き方」ができるのが現代なのだと、今回の件を通じて強く感じました。

「備えあれば患いなし」とは少し違うかもしれませんが、便利なツールを知っているという「備え」があることで、テレワークのような働き方が短期間で実現できるようになりました。

我々のようなネットの動きに敏感な業種は、一般の方々よりも便利なツールを知っていますので、いろんな人に便利な方法を広めていくことも大事な使命の一つなのかもしれませんね。

ではまた！

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

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

低品質なリンクを否認することでサイトの順位が上がることもあるので、ちょくちょくリンクの否認をすることがありますよね。
リンクの否認をする際にはSearchConsoleでリンク元のサイトを確認するのですが、低品質かどうかを判断するためにはURL先にアクセスしないと分かりません。
ですが、よくわからないURLにアクセスするのは怖いので放置してしまうこともあると思います。
今回はそういったよくわからないリンク先の安全を確認しながらリンクを否認する方法をご紹介します。

「リンクの否認」って何？

リンクの否認は「リンク元のサイトと自分のサイトは無関係」ということを検索サイトに知らせることを指します。
低品質なリンクの否認をすることで、サイトの評価が見直されて順位が上がることもあります。

リンクの否認はGoogleが提供する「リンク否認ツール」を使って行います。
「リンク否認ツール」の使い方やリンク否認の効果に関しては下記サイト様が詳しくまとめていますので、ぜひ一度ご覧ください。
リンク否認ツールとは？使い方と効果について

低品質なサイトはどうやって見分けるの？

まず初めに、自身のサイトがどのようなサイトからリンクされているのか確認しましょう。

SearchConsoleにアクセスして、調べたいサイトのドメインを選択します。

左側のメニューから「リンク」を選択します。

外部リンクの「上位のリンク元サイト」の詳細を選択します。

「リンクしているページ」が多い順にリンク元のドメインが表示されます。

弊社サイトのリンク元は分かりやすいものしかないので、品質は大丈夫そうですね。
ですが、下記のような場合はどうでしょうか…？

ドメインの一部を伏せていますが、怪しい感じがしますよね…。
ですが、URLだけでは低品質かどうかは判断できません。

低品質かどうかは、一覧の右側に表示されている「リンクしているページ」と「ターゲットページ」を見るとおおまかにわかります。

「リンクしているページ」は相手のサイト内でリンクを貼っているページの数を表していて、「ターゲットページ」は貼っているリンクの種類を表しています。
リストの一番上のサイトを見てみると、サイト内でリンクを貼っているページが28675個あって、その内貼られているリンクの種類はわずか22個になっています。
仮に、自分のサイトにAというページがあったとして、相手のサイトは少なくとも1000ページの中にAへのリンクを貼っている事になります。

このように、「リンクしているページ」の数が明らかにおかしい、または、「リンクしているページ」の数に比べて「ターゲットページ」の数が明らかに少ないものに関しては、低品質なサイトである可能性が高いです。

…とはいえ、実際はどのようなページなのかわからないとリンクの否認をするのは怖いので、リンク元を安全にチェックしてみましょう。

リンク元のサイトを安全に確認する方法

よくわからないリンクは「SecURL」様のサイトでどのようなサイトなのかをチェックすることができます。

使い方は単純で、調べたいURLを入力して「チェック」のボタンを押すだけです。
チェックが完了すると仮想のブラウザ画面でリンク先のページを表示してくれます。

一通り仮想のブラウザ画面を眺めてみて、明らかに無関係で品質の悪そうなサイトはリンクの否認をしてしまいましょう。

少し手間はかかりますが、誤って良質なサイトからのリンクを消してしまうことのないように、しっかりとリンク先をチェックして否認ツールを使いましょう。

ではまた！

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

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

パソコンを使う仕事をしていると「あの人は作業をするのが他の人よりも早いなぁ」なんて感じる事はありませんか？
作業が早い人は単に能力が高いだけでなく、仕事や日常を通して「作業時間を短縮する手段」を多く知っていることが作業の早さに繋がっているのだと思います。

自分がプログラマーとして仕事をしていて、一気に作業時間が短縮できるようになった「エディタの便利な使い方」について記事にしてみます。

エディタの使い方だけで本当に作業時間が短縮できるの？

確実にできます！
エディタの使い方を知っていれば、数時間～数日分の作業が3分～5分で終わってしまう事もあります。

プログラムを組む際に、設計や実装に時間がかかるのは当然ですが、それ以外にも「パターン化した単純作業」に時間がかかることがよくあります。

この「パターン化した単純作業」には下記のようなものがあります。

• ファイルの特定の文字を全て違う文字に変えたい
• 文中のタブを全て半角スペースに変えたい
• 大量の文字列から重複しない文字列のみ抜き出したい

やることは単純なのですがファイル数や文字数によっては時間がかかってしまいますよね。

エディタの便利機能を知らないまま上記の作業に入ると、内容によっては数日かかってしまう場合もあります。

これらの作業はエディタの便利機能の使い方を知っていれば3分程度で終わってしまう作業となりますので、少しでも思い当たることがあれば今回の記事で紹介する方法を試してみてください。

本記事で使用するエディタは「サクラエディタ」

自分が使用しているエディタは「サクラエディタ」になりますので、今回の記事はサクラエディタをベースにして書いていきます。

サクラエディタにはプログラムを組む上で便利な機能が色々と備わっているので、個人的にオススメのエディタです。

大がかりなシステムの実装や修正になると、サクラエディタよりもVisual Studio Codeの方が良かったりしますが、そこは場面によって使い分けると更に効率的に作業が進められると思います。

本記事で興味をもっていただけたら、ぜひ一度サクラエディタを使ってみてください。

※Visual Studio Codeに関しては過去に記事を書いているので、興味がありましたらご覧ください。

ファイルの特定の文字を全て違う文字に変える

例として、お客様から約34万件の住所が記載されたファイルをいただいたとします。
この住所データに関して「一丁目」→「1丁目」のように丁目の漢数字を半角数字に変えたいと依頼があった場合に、一つ一つ探して手作業で変換するのは大変ですよね。

この作業時間を短縮できるのがサクラエディタの「置換」機能になります。

置換機能の使い方

住所ファイルをサクラエディタで開きます。
次に、メニューの「検索」から「置換」を選択します。

置換の設定画面が開きますので、画面の通りに設定します。

あとは置換前と置換後に文字列を入れて「すべて置換」を押すだけで全ての文字が変換されます。
ただし、今回の例に関しては「丁目」を一丁目から変換してしまうと、下記にように変な丁目ができてしまいます。

なので、丁目を変換する際には最大の丁目から変換する必要があります。

丁目の最大は北海道帯広市の「42丁目」になりますので「四十二丁目」→「42丁目」、「四十一丁目」→「41丁目」のように大きい数字から順に変換をしていくと正常に変換が完了します。

文中のタブを全て半角スペースに変える

先程の住所ファイルはデータの区切りがタブになっていました。
このタブを全て半角スペースに変えていきます。

先程と同じで「置換」の機能を使って変換します。

置換の設定方法

先程と同じように置換の設定画面を開いて置換前と置換後に文字を入力するのですが、置換前の入力欄でタブを押しても何も入力されず、要素のフォーカスが別の要素に移動するだけになります。
タブはキーボードから入力する事は出来ないので、下記のいずれかの方法で入力する必要があります。

1. エディタでタブを入力してコピペする
2. 正規表現にチェックを入れて置換前に「\t」を打ち込む

置換前にタブを入力したら、置換後に半角スペースを入力して「すべて置換」を押すと置換作業が完了します。

重複しない文字列のみ抜き出す

住所ファイルの都道府県＋市区町村のみを抜き出したファイルを作成して「重複しない住所」を抜き出してみます。

今回は置換ではなく「ソート」と「マージ」の機能を使います。

「ソート」の方法

テキストを全選択状態にしてキーボードの「Alt」+「A」を押します。
並び替えが実行されて、同じ文字の行が改行を挟んで並ぶようになります。

「マージ」の方法

テキストを全選択状態にしてキーボードの「Alt」+「M」を押します。
改行を挟んだ行と同じ文章の場合は行をまとめます。

このように「ソート」と「マージ」を使うことで、重複した行を削除することができます。

「ソート」と「マージ」をすることで、約34万件あったファイルが一瞬で重複しない108個の地域に分類されました。

まだまだサクラエディタには便利な機能が備わっていますが、今回はここまでにします。

作業時間を短縮する方法は業種によって色々な方法があると思いますので、「単純な作業だけど量が多い」と感じた場合はGoogle先生に聞いてみると良いかもしれませんね。

もしくは、身近に仕事の早い人がいたら直接聞いてみるのも良さそうです。

ではまた！

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

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

グーグルさんが「読み込み速度も検索順位に影響するからね！」とアナウンスしてから「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サイトのちょっとしたギミックに設置すると見栄えが良くなるかもしれませんね！

ではまた！

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

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