弊社はいくつかのサーバーを使用しているのですが、先日、とあるサーバー管理会社様からこんなメールが届きました。
「WordPressのバージョン4.9.3は自動更新が行われなくなる不具合を含んでおりますので、バージョン4.9.4への手動更新をお願いします。」
サーバー側からこういったメールが来ることは珍しいので、弊社でも2月9日にお客様の全てのサイトをチェックして手動更新を実施しました。

というわけで、今回は「WordPressのバージョン4.9.3の不具合」と「手動でアップデートする方法」に関して記載します。

WordPressのバージョン4.9.3で発生した不具合とは？

バージョン4.9.3で発生した不具合に関して、WordPressの公式サイトを確認してみると…。

このように記載があります。

今回の不具合は、本来は自動で更新されるはずのWordPressが「自動更新されなくなる」という不具合が発生しているようです。
なかなか怖い不具合ですね…。
もし今回の不具合を知らないままWordPressのサイトを運用していたら、以降はずっと更新が行われないのでしょうか…？

なかなか手動更新をする機会はないと思いますので、今回は「WordPressのバージョンの確認方法」と「WordPressの手動更新の方法」に関して記載致します。

WordPressのバージョンを確認する方法

WordPressにログインをして、ダッシュボードのホームメニューの「概要」の箇所にバージョンが記載されていますので、確認を行います。

上記の記載が「WordPress 4.9.3」となっていたら手動で「4.9.4」へ更新を行う必要があります。

WordPressを手動で更新する方法

ダッシュボードの更新メニューに「WordPress 4.9.4-ja に自動更新できます。」という記載がありますので、文言の下に設置されている「今すぐ更新」のボタンを押します。

「今すぐ更新」ボタンを押すと、下記のような画面に切り替わって更新が行われます。

更新が正常に完了すると、さらに画面が切り替わって更新完了となります。

非常に簡単ですね。

ですが、サーバーの環境によっては「今すぐ更新」ボタンを押しても更新が行われない場合があります。
更新が行われない場合は下記の方法を試してみてください。

ファイルを直接操作してWordPressを更新する方法

「今すぐ更新」を押して更新が行われない場合は、直接WordPressのファイルを操作して更新を行う必要があります。

実際の操作方法に関しては、下記サイト様で非常に丁寧に説明がされておりますのでご確認下さい。
参考URL：WordPressを手動アップグレードする方法

※上記の方法はファイルを直接操作しますので、作業を実施する際には必ずデータベースとファイルのバックアップを取っておいて下さい！

情報を収集できる経路は広く確保しておきましょう！

いかがでしたか？

今回の問題は早めに気づけたので特に大きな問題にはなりませんでしたが、もし今回の不具合の情報を把握できていなかったらと思うと…、少し怖いですね。
今回は弊社が管理しているいくつかのサーバー管理会社様の一つからお知らせのメールが届いて問題を把握することができました。
こういった情報を収集できる経路は、広く確保しておきたいですね！

ではまた！

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

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

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

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の本体の更新やプラグインの更新をした際に、稀に不具合が発生する場合があります。
今回はそのうちの一つ「記事の投稿・編集画面が正常に表示されなくなったとき」の対処方法を記載します。

「記事の投稿・編集画面が正常に表示されない」とはどんな状態か？

先日、WordPressの更新とプラグインの更新を行った際に、記事の投稿・編集画面で下記のような現象に遭遇しました。

WordPressの記事の投稿・編集を頻繁に行っている人なら「あれ？おかしいな？」と気づくと思います。
ちなみに、正常な画面は下記の画面になります。

比べてみると一目瞭然ですね！
記事を入力するテキストエリアにメニューがなかったり、そもそも記事を公開するボタンがなかったりと、いろいろな要素が足りていません！
この画面になってしまうと、テキストを打ち込んでも表示されませんし、画面右上にある「表示オプション」や「ヘルプ」の開閉式メニューも無反応になってしまいます。

今回の事例に関しては「Native Emoji」のプラグインの設定を変えることで不具合を解消しました！

お客様が使用しているプラグインの中に「Native Emoji」という記事に絵文字を簡単に入力できるプラグインが導入されていました。
こちらのプラグインを停止にしたところ、記事が表示されるようになりました。
原因を調査したところ、下記の記事を発見しました。
参考URL：絵文字プラグイン「Native Emoji」が使えない！

記事に書かれている現象とは違いますが、何やら設定が必要とのこと。
プラグインを導入した際に設定をした覚えがなかったため、設定画面を確認してみると…「Admin editor」にチェックが入っていませんでした！

「Admin editor」にチェックを入れて画面下部の「変更を保存」ボタンを押してプラグインの再設定をしたところ、記事の投稿・編集画面が正常に表示されるようになりました！

今回の事例に関しては、上記のプラグインの設定変更のみで不具合が解消しました。

不具合が発生した際には「何が原因なのか？」を追求することが大事です

不具合が発生した際に、まず初めにすべきことは「何をして不具合が発生したのか？」を把握することにあると思います。

今回の事例に関しては、下記のようなヒントがありました。
・WordPressを更新してから不具合が発生した？
・プラグインを更新してから不具合が発生した？
・記事の投稿と編集の画面のみで不具合が発生している。

ここから考えられる問題は…
・WordPressの最新版にバグがある
・WordPressの最新版と相性の悪いプラグインがある
・プラグインに何かしらのバグがある
この辺りが問題として考えられます。

今回の事例に関しては、記事の投稿と編集の画面のみで不具合が発生したため、投稿記事の補助系のプラグインが怪しいことになります。
そのため、投稿記事の補助系のプラグインを一つ一つ停止して確認をしてみたところ、原因がプラグインにあることを突き止めました。

もし問題の箇所が分からない場合は、下記を順に試してみてください。
・パーマリンクの再設定（デフォルトの設定に切り替えて更新した後に、元の設定に切り替えて更新）をして不具合が改善するかどうかを確認
・プラグインを全停止して不具合が改善するかどうかを確認して、改善するようであればプラグインを一つ一つ停止して原因のプラグインを突き止める
上記でも不具合の原因がわからない場合は…専門家に尋ねましょう！

このようにして、何か不具合が発生した際には様々なヒントから調査範囲を絞ることが大切になります。

システムやプログラムに関して知識がないうちは「なんか知らないけど出来た！」で済ませることは多いと思いますが、更に踏み込んで「何故こんなことになったのか？」を理解することで、システムやプログラムに関する理解を深めていきましょう！

ではまた！

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

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

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

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

ではまた！

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

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

今回は「WordPressを使用してクリック位置から波紋が広がるようなエフェクトを実装する方法」を記載します。

具体的には下記のような機能になります。
※各枠内をクリックしてみてください。

参考サイト様は下記になります。
https://qiita.com/nekoneko-wanwan/items/c9f26ce049bd422e555c

参考サイト様は非常に親切に書いてあるので、ほぼ実装するだけになるのですが、WodPressでjQueryを使った機能を実装する際には、”$”によるコンフリクトを回避しなければなりません。
「そんなの技術者じゃないと分からないよ！」ということにならないように、コピペだけでいけるように編集したコードを記載します。

CSS(スタイルシート)に波紋用のスタイルを設定する

スタイルシート（”XXXX.css”のファイル。WordPressの場合は基本的に”style.css”に記載します。）に下記スタイルを追記します。

/* クリックできる要素 */
.ripple {
    /* エフェクトに直接関係はない */
    margin: 20px;
    background-color: #f7f7f7;
    height: 100px;
    width: 200px;
    text-align: center;
    line-height: 100px;
    cursor: pointer;

    /* 必須 */
    overflow: hidden;
    position: relative;
}

/* エフェクト要素 */
.ripple__effect {
    /* 値の変更はエフェクト形体・サイズ・スピードに影響する */
    width: 150px;
    height: 150px;

    /* 必須 */
    position: absolute;
    border-radius: 100%;
    pointer-events: none;
    transform: scale(0);
    opacity: 0;
}

/* エフェクト要素の色を指定 */
.ripple__effect.is-orange { background: #f1c40f;}
.ripple__effect.is-blue   { background: #4aa3df;}
.ripple__effect.is-black  { background: #999;}

/* classが付与されたらアニメーションを実行 */
.ripple__effect.is-show {
    animation: ripple 0.75s ease-out;
}

/* アニメーションの定義 */
@keyframes ripple {
    from {
        opacity: 1;
    }
    to {
        transform: scale(2);
        opacity: 0;
    }
}

これでスタイルシートの設定は完了になります。
次に、記事にプログラムのコードを埋め込みます。

記事にHTMLタグとjQueryのコードを仕込む

WordPressの固定ページや投稿ページ内に下記のコードを仕込みます。
※このとき、ビジュアルエディタではなくテキストエディタでコードを打ち込むことに注意して下さい。

<div class="ripple">
    オレンジ
    <span class="ripple__effect is-orange"></span>
</div>
<div class="ripple">
    ブルー
    <span class="ripple__effect is-blue"></span>
</div>
<div class="ripple">
    ブラック
    <span class="ripple__effect is-black"></span>
</div>

<script>
  jQuery(function($) {
    $(function() {
      var $clickable = $('.ripple');
      /* mousedownだと直ぐに発動し、clickだとマウスボタンを離した時に発動する */
      $clickable.on('mousedown', function(e) {
        var _self = this;
        var x     = e.offsetX;
        var y     = e.offsetY;
        var $effect = $(_self).find('.ripple__effect');
        var w       = $effect.width();
        var h       = $effect.height();
        /* クリックした座標を中心とする */
        $effect.css({
          left: x - w / 2,
          top: y - h / 2
        });
        /* jsではclassの付け替えをするだけ */
        if (!$effect.hasClass('is-show')) {
          $effect.addClass('is-show');
          /*
           * エフェクトアニメーションが終わったらclassを削除する
           * ここでは、単純にcssで設定するdurationと時間を合わせているだけですが
           * keyframes終了のイベント(AnimationEnd)が取れるかと思うので、それで対応した方が良いかも
           */
          setTimeout(function() {
              $effect.removeClass('is-show');
          }, 750);
        }
        return false;
      });
    });
  });
</script>

WordPressでは”$”の記述は既に別の機能で使われているため、”$”を使用する場合は”jQuery(function($)”としてスクリプトを囲うことで、囲った中の”$”だけはjQueryとして機能させる必要があります。

これで仕込みは全て完了になります、非常に簡単に機能が実装できますね！

覚えておいて損はない！jQueryのコンフリクト解消の記述方法！

いかがでしたか？

以前の私はWordPressでjQueryを使用する際には”$”を全て”jQuery”に置換をして設置していました。
ですが、コードが非常に見づらくなることと、他のシステムで使う際にまた置換をしたりと、せっかく作ったプログラムなのに汎用性がイマイチで悩んでいました。
ローカル内でのjQueryの使用方法を覚えてからはコンフリクトに悩むこともなくなり、すっきりとしたプログラムが書けるようになりました。

プログラマーさんは可読性や汎用性を気にする方が多いと思いますので、この辺りはしっかりと作りこんでいきたいですね。

ではまた！

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

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

以前、弊社のブログに下記のような記事を書いています。

reCAPTCHAを導入することで、お問い合わせに関するイタズラは上記の記事でバッチリ対応できます。
ですが！上記の方法では投稿記事のコメント欄から送られてくる大量のコメントに対応できません…。
ということで！今回はreCAPTCHAを投稿記事のコメント欄に設置してスパム対策をしてみましょう！

reCAPTCHAの公式サイトからSite keyとSecret Keyを取得する

reCAPTCHAを使用するためにはグーグルのアカウントが必要となります。
グーグルアカウントの取得は下記のサイトにて行ってください。
https://accounts.google.com/SignUp?hl=ja

グーグルのアカウントを取得しましたら、reCAPTCHAの公式サイトへアクセスしてreCAPTCHAを使用するためのSite keyとSecret Keyを取得します。
reCAPTCHAの公式サイトは下記になります。
https://www.google.com/recaptcha/

公式サイトへアクセスすると、下図のようなページが表示されます。
かわいらしい猫の画像に意識が持っていかれそうになりますが、煩悩を振り払って右上の「Get reCAPTCHA」のボタンを押します。

グーグルアカウントにログインしていると、下図のようなフォームが設置されたページが表示されます。

下図を参考にして入力を行い、Registerボタンを押します。

画面が変わり、Site keyとSecret keyが記載されたページが表示されます。

これで、reCAPTCHAの登録は完了となります。

reCAPTCHAを設置するプラグイン「Google Captcha(reCaptcha)」プラグインをインストールする

次に、WordPressへreCAPTCHAを設置するために必要なプラグインのインストールを行います。

まずはじめに、WordPressのプラグインの選択画面で「Google Captcha (reCAPTCHA) by BestWebSoft」を検索して、インストールを実行します。

インストールが完了するとボタンが「有効化」ボタンに変わりますので、「有効化」をクリックします。

管理画面のメニューに「Google Captcha」が表示されれば、インストールは完了になります。

reCAPTCHAを投稿記事のコメント欄に表示するように設定する

次に、投稿記事のコメント欄にreCAPTCHAを設定します。

管理画面のメニューの「Google Captcha」をクリックすると下図のようなページが表示されます。

【Authentication】の項目にSite KeyとSecret keyを入力する箇所がありますので、そこにreCAPTCHAの公式サイトで取得したSite keyとSecret Keyを入力します。

次に、【Enable reCAPTCHA for】の項目では「Comments form」のみチェックを入れます。

黄色い枠の設定項目は全て飛ばして【Hide reCAPTCHA for】の項目にはチェックを入れずに、【reCAPTCHA Version】の項目は「Version2」にチェックを入れます。
【Theme】はLightとBlackを選べますが、Lightのままで構いません。

また黄色い枠が続きますが全て飛ばして、【Whitelist Notification】と【Disabled Submit Button】の項目はデフォルトのままにします。
全ての設定が完了したら「Save Changes」を押します。

設定が完了すると【Authentication】の項目に「Test reCAPTCHA」のボタンが表示されますので、クリックをしてreCAPTCHAの動作確認をします。

特にエラーが出なければ設定は正常に完了していますが、念のため投稿記事のコメント欄を確認しましょう。

reCAPTCHAのコメント欄への設置作業は以上となります。
お疲れさまでした！

スパム対策は常に最新の対策を！

いかがでしたか？

日々技術が進歩していくように、スパムの技術も日々進化をしています。
「一度対処したからもう安心！」とはなりませんので、常に新しい技術を取り入れて対策をしていきましょう！

ではまた！

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

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

よく分からない英語やら中国語のようなお問い合わせが大量に届いたことはありませんか？

それらはボット（悪さをするプログラム）による仕業です。

ホームページからお問い合わせが届いた！！なんて喜んで見てみたら、なんだこりゃ？となりますし、英語だと微妙に本当にお問い合わせっぽい感じがするので確認する必要があったりして、迷惑この上なしです。

今回はそんなボットを用いたお問い合わせを遮断する方法を紹介します。

大量のお問い合わせを遮断するならreCAPTCHAを使うのがベスト

以下のようなチェックボックスをお問い合わせフォームで見たことがありませんか？

これが「reCAPTCHA」です。

reCAPTCHAとはGoogleが開発しているウェブサイトのフォームなどからアクセスを試みる不正なプログラム（=ボット）からサイトを防御するためのシステムです。

元々はカーネギーメロン大学ピッツバーグ本校で2007年に開発されたもので、2009年にGoogleがそのシステムを大学から買い取ったようです。

以前は、こんな非常に読みづらいアルファベットを入力してください的なシステムでした。

ボットが読めないどころか人間も読めなくて、何回入力しても「違います」って言われてしまうことも。。。

そんな課題もGoogleは解決してしまい、今ではチェックを入れるだけでロボットかどうかの判定が行なうことができるようになりました。

お問い合わせフォームプラグイン「Contact Form7」で実装してみる

そんなreCAPTCHAを使うためにはどうすればいいのか？

今回はWordPressのお問い合わせフォーム用プラグインとして多くのWEBサイトで使われている「Contact From7」にreCAPTCHAを実装してみたいと思います。

準備：Site keyとSecret keyを入手する

まず最初にreCHAPCHAのサイトを表示します。

Label（分かりやすい名前でOK）と、reCAPTCHA V2にチェックを入れ、DomainsにはreCAPTCHAを導入するドメイン名（http://は不要）を入力します。入力したら「Register」ボタンを押します。

Site keyとSecret Keyが表示されます。

Secret keyは秘密のカギなので、知られないようにしてください。

これでreCAHPCHAを設置するための情報は集まりました。

導入：Contact Form7にreCAPTCHAを実装する

Contact Form7を導入していれば、WordPressのダッシュボードに「お問い合わせ」というメニューがありますので、そのメニューから「インテグレーション」を選択します。

以下のような画面が表示されますので、「キーを設定する」を選びます。

先程reCAPTCHAのサイトで作成した、Site keyとSecret keyを入力し、「保存」を押します。

Contact Form7のフォーム画面にreCAPTCHAを設定

ここまでできればあと少しです。

をContact Form7のreCAPTCHAを使いたいフォーム画面に貼り付けてください。

※オプションがいろいろありますが、[recaptcha]って書いておけば十分です。

reCAPTCHAがフォーム画面に表示できました！

ショートコードを貼り付けた後、フォームを表示してみると・・・

reCAPTCHAが表示されていますね！

設置に関してはとても簡単です。

チェックを入れないまま送信ボタンを押しても送信できません

チェックを入れずに送信ボタンを押しても、「あなたがロボットでないことを証明してください。」と表示されるようになります。

これで迷惑な大量お問い合わせをしてくるボット対策ができました！

ホームページのフォームから大量に届く迷惑なお問合わせメールでお悩みの方はぜひ「reCAPTCHA」を導入してみてはいかがでしょうか？

ご不明な点などがあれば、お気軽にお問い合わせください。

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

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

世間ではスプラトゥーン2が流行っているようですね。
私も流行りに遅れないように、スプラトゥーン2を……することはできないので。（本体を持っていません…）
スプラトゥーン2っぽいことをしようと思います！

ということで、今回はスプラトゥーン2の公式サイトのグローバルメニューのふよふよ動いている部分の作り方をご紹介します！

参考サイト様：https://www.nintendo.co.jp/switch/aab6a/coop/index.html

今回の記事を読むことで、下記のようなふよふよした領域を作ることができます。

ふよふよ動かすにはどうしたらよいのか？

パッと見どうやっているのか全くわからないので調べてみると、下記の参考サイト様を発見しました！
・水っぽい動きのjQueryプラグイン3選

上記のサンプルページを見ると、スプラトゥーン2の公式サイトのふよふよ動く部分に非常に似た動きをしていますね！
ということで、こちらの技術を参考にして作ってみようと思います！

WordPressで設置する事を想定してコードを組む

参考サイト様の記事が非常に優秀な出来をしているため、普通のサイトであればサンプルのソースコードを使えばそのまま使えます。
そのため、本記事ではWordPressで設置する場合を想定した場合のコードの組み方を解説します。

まず初めに、今回の動作に必要なファイルを下記に列挙します。
・jQueryライブラリ
・jQuery UIライブラリ
・Raindropsライブラリ

各ライブラリのダウンロード方法は以下に記載します。

jQueryライブラリのダウンロード方法

1. 下記のjQueryライブラリの公式ページを開きます。
　 http://jquery.com/download/
2. ページの上の方にあるリンクをクリックします。

3. ダウンロードが始まります。

jQuery UIライブラリのダウンロード方法

1. 下記のjQuery UIライブラリの公式ページを開きます。
　 https://jqueryui.com/
2. ページの右上の方にある「Stable」をクリックします。

3. ダウンロードが始まります。
4. ダウンロードしたファイルを解凍します。
　 ※フォルダ内にいろいろと入っていますが「jquery-ui.js」のみ使用します。

Raindropsライブラリのダウンロード方法

1. 下記のRaindropsライブラリの公式ページを開きます。
　 http://daniellaharel.com/raindrops/
2. メニューの「ダウンロード」をクリックします。

3. 「ダウンロード」項目の「Github」をクリックします。

4. 画面中央右側にある「Clone or download」をクリックします。

5. 「Download ZIP」をクリックします。

6. ダウンロードが始まります。
7. ダウンロードしたファイルを解凍します。
　 ※フォルダ内の「raindrops.js」を使用します。

これで、各種ライブラリのダウンロードは完了となります。

各種ライブラリを読み込む

ライブラリは下記のような記述で読み込みます。

<script src="(ファイル格納フォルダ)/jquery-3.2.1.min.js"></script>
<script src="(ファイル格納フォルダ)/jquery-ui.js"></script>
<script src="(ファイル格納フォルダ)/raindrops.js"></script>

読み込みのタイミングはhead内でもbody内でも構いませんが、必ずふよふよさせるdivの箱の前に読み込みましょう。

ただし、ここで一つ注意があります！
raindrops.jsをWordPressで使用する際に、下記のようなエラーが出力される場合があります。

該当箇所を詳しく見ると、”$”を使用している箇所でエラーが発生しています。
これは、WordPressでよく見られる”$”が”jQuery”以外のライブラリで定義されている（使われている）場合に出るエラーです。
そのため、”raindrops.js”でエラーが発生している箇所を”$”から”jQuery”に変更してください。

・”$”はNG↓

・”jQuery”はOK↓

これで、ライブラリの読み込みは完了となります。

ソースコードを設置する

今回は下記のようなコードを設置しました。

<div class="stage" style="background: #000;">
    <div class="puyopuyo" style="height:200px;"></div>
</div>

<script>
<!--
;(function($) {
  $(function(){
    let $puyopuyo= $('.puyopuyo');
    $puyopuyo.raindrops({
      color: '#f3f3f3',  // 色
      waveHeight: 60,    // 沈み込む高さ？
      waveLength: 40,    // ？
      canvasHeight: 200, // 表示領域の高さ
      rippleSpeed: 0.01, // 縦方向の波が揺れる速度？
      frequency: 2,      // 波紋が生まれる頻度
      density: 0.005     // 波の余韻みたいなものを設定する値
    });
  });
})(jQuery);
//-->
</script>

※今回は実験的な実装なのでdivに直接styleを書き込んでいますが、styleを設定する際には必ず別途cssファイルを作成して、そちらで設定をすることを強く推奨します。

ふよふよ動くギミックはscriptタグで囲んだ中のコードで設定しています。
可能な限りコメントは書いていますが…ちょっとわかりづらい部分や言語化できなかった部分があるので、実際に作成して数値をいじってみて確認して下さい！（丸投げ）
今回参考にしたサイト様を見る限り他にもオプションがあるようなので、上記のオプションだけでなく、色々なオプションも試してみることを推奨します。

ちょっと話がそれてしまいますが、ライブラリの読み込みの際に”$”を”jQuery”にする処理を行いましたが、scriptタグの中では行っていません。
理由としては、”$”を”jQuery”として動かすためにカプセル化を行っているため、このような記述をしても正常に動作するようになっています。
詳細は下記記事を参考にして下さい。
参考：【jQuery】jQueryの小ネタ（カプセル化、プラグイン化など）

これで、スプラトゥーン2の公式サイトのふよふよする領域が作れるようになりました。

ライブラリを活用して動きのある面白いサイトに！

いかがでしたか？

ライブラリを活用すると、こんなにも簡単に難しそうなギミックが実装できてしまいます。
有志の方が作るライブラリは自身の知識の引き出しの一つとなり、大きな武器にもなります。
素晴らしいサイトを見ることで何ができるかを知り、実際に実装することで技術を身に着けることは、Web制作を行う上で必要な作業の一つであると考えます。

…と偉そうなことを言っていますが、今回のネタの提供はM氏でした。

もっといろんなサイトを見ないとダメですね…(・・;)

ではまた！

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

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

ブログの中にLINEやFacebookのメッセージみたいに会話風でやり取りしている文章があると変化があることから離脱率やページ滞在時間が伸びる傾向があります。

今回はそんな吹き出しを使った会話が簡単に作ることができるWordPressのプラグイン『Speech Bubble』を紹介したいと思います。

5分もあれば使えるようになる簡単なプラグインなのでぜひお試しあれ！

この投稿を読むとできるようになること

こんな風に吹き出しで会話しているような表現を作れるようになります。
※サンプルは「ポップコーンダイエットブログ」より

まずはプラグイン【Speech Bubble】をインストール

WordPressのダッシュボードにログインして「プラグイン」→「新規追加」を選択します。

プラグインの検索に Speech Bubble と入力します。

以下の画像のようにプラグインが見つかりますので、「今すぐインストール」をクリックします。

インストール中・・・。ぐるぐる・・・。

「有効化」を押せばインストール完了です。

特に設定はありませんので、インストールはこれにて完了です。

次は使い方を説明していきます。

吹き出しを出したい時はショートコードを貼り付けるだけ

コピペしてWordPressの投稿画面に貼り付けてみてください。

[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="テスト1号さん"] こうやってショートコードを貼り付ければいいんだね [/speech_bubble]
[speech_bubble type="drop" subtype="R1" icon="2.jpg" name="テスト2号さん"] そうそう。簡単だよね！ [/speech_bubble]

貼り付けるとこんな画面で表示されます。

名前を変えてみよう！

以下のショートコードのnameのXXXXの部分を変更すると、吹き出しの名前の部分が変更できます。

メッセージを変更してみよう！

メッセージを変更する時は以下のXXXXの部分を変更するとメッセージの内容が変わります。

メッセージを変更してみますね。

[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="テスト1号さん"] 何かしゃべってよ！ [/speech_bubble]
[speech_bubble type="drop" subtype="R1" icon="2.jpg" name="テスト2号さん"] あ、はい。[/speech_bubble]

こうなります。

左右を入れ替える方法は？

吹き出しの位置が左からと、右からのものに設定するのはsubtypeのXX部分を L1 にすると左から、 R1 にすると右から吹き出しが出てきます。

L1ばっかりにしても大丈夫です。

[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="テスト1号さん"] 連続左でもいいんだね [/speech_bubble]
[speech_bubble type="drop" subtype="L1" icon="2.jpg" name="テスト2号さん"] そうだよ～ [/speech_bubble]

このショートコードだと、こうなります。

画像を変更してみよう！

ちょっと難しくなりますが、吹き出しの画像をデフォルトのものから変更してみましょう。

FTPでサーバに接続して、プラグインがインストールされているディレクトリのimgの中に画像をアップロードします。

こんな感じで2つの画像をアップロードしてみました。

アップロードした画像を設定する方法は以下のiconのXXXXの部分にアップロードした画像のファイル名を書くだけです。ファイルの種類はjpg、png、gif、svg、tifが対応しているそうです。

このようにショートコードを書くと・・・

[speech_bubble type="drop" subtype="L1" icon="popco_icon.png" name="ポプコ"] ポップコーンの妖精ポプコです♪ [/speech_bubble]

こうなります。

ポプコかわいいですね！

吹き出しのデザインは全部で9種類

吹き出しの種類も実は変更ができまして、drop、std、fb、fb-flat、ln、ln-flat、pink、rtail、thinkの全部で9種類のコードがあります。

typeのXXXXの部分にコード名を書きます。

drop：デフォルト

[speech_bubble type="drop" subtype="L1" icon="konta_icon.png" name="こんた"] デフォ [/speech_bubble]
[speech_bubble type="drop" subtype="R1" icon="popco_icon.png" name="ポプコ"] シンプルでいいね [/speech_bubble]

std：スタンダード

[speech_bubble type="std" subtype="L1" icon="konta_icon.png" name="こんた"] スタンダード[/speech_bubble]
[speech_bubble type="std" subtype="R1" icon="popco_icon.png" name="ポプコ"] ミニマルな生活してみたい [/speech_bubble]

fb：フェイスブック風

[speech_bubble type="fb" subtype="L1" icon="konta_icon.png" name="こんた"] フェイスブック[/speech_bubble]
[speech_bubble type="fb" subtype="R1" icon="popco_icon.png" name="ポプコ"] いいね！ [/speech_bubble]

fb-flat：フェイスブックのフラットデザイン版

[speech_bubble type="fb-flat" subtype="L1" icon="konta_icon.png" name="こんた"] フェイスブックフラット[/speech_bubble]
[speech_bubble type="fb-flat" subtype="R1" icon="popco_icon.png" name="ポプコ"] フラットデザインって最近の流行りだよね。[/speech_bubble]

ln：LINE風

[speech_bubble type="ln" subtype="L1" icon="konta_icon.png" name="こんた"] LINE[/speech_bubble]
[speech_bubble type="ln" subtype="R1" icon="popco_icon.png" name="ポプコ"] こんたってLINE友達いるの？[/speech_bubble]

ln-flat：LINEのフラットデザイン版

[speech_bubble type="ln-flat" subtype="L1" icon="konta_icon.png" name="こんた"] LINEフラット[/speech_bubble]
[speech_bubble type="ln-flat" subtype="R1" icon="popco_icon.png" name="ポプコ"] LINE友達いるんだｗ[/speech_bubble]

pink：ピンクの吹き出し

[speech_bubble type="pink" subtype="L1" icon="konta_icon.png" name="こんた"] ピンク[/speech_bubble]
[speech_bubble type="pink" subtype="R1" icon="popco_icon.png" name="ポプコ"]かわいい～[/speech_bubble]

rtail：水色の吹き出し（rtailってなんだろう？）

[speech_bubble type="rtail" subtype="L1" icon="konta_icon.png" name="こんた"] 水色[/speech_bubble]
[speech_bubble type="rtail" subtype="R1" icon="popco_icon.png" name="ポプコ"]さわやか～[/speech_bubble]

think：心の声の吹き出し

[speech_bubble type="think" subtype="L1" icon="konta_icon.png" name="こんた"] ポプコかわいいなぁ・・[/speech_bubble]
[speech_bubble type="think" subtype="R1" icon="popco_icon.png" name="ポプコ"]いつも悪く言ってゴメンね。ホントは・・・[/speech_bubble]

Speech Bubbleを使って楽しいブログを作ろう！

今回ご紹介させていただきました【Speech Bubble】を使うと、簡単にマンガ風の会話をブログ内に作ることができてしまいます。

マンガに慣れている日本人は文章よりも、このような吹き出しになっているほうが読みやすく、頭のなかにスッと入ってきやすかったりします。

コンバージョン率の改善にも役立てられると思いますので、ぜひ効果的な使い方をしてみてください。

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

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

今回は「画面をスクロールした際にサイドバーのコンテンツが画面上に付いて来るように表示させる」方法をご紹介致します。
本記事ではWordPressを使用した場合の設定方法を詳細に記載します。

といっても、使用するプログラムはWordPressでなくても機能しますので、自身のサイトの構成に合わせてカスタマイズして頂ければ簡単に活用できると思います。

本記事を読むことで下記のような画面に付いて来るコンテンツを設置することができます。

なお、今回参考にさせて頂いたサイト様は下記になります。
解説付き！フッターで止まる、サイドバーを固定する方法【はてなブログ】
最近はやりのフッターに重ならない追尾するサイドバーをjQueryで作ってみました！

WordPressのウィジェットに画面に付いて来るコンテンツを登録する

WordPressのサイドバーのウィジェットに画面に付いて来るコンテンツを用意します。
今回は、下記のようにテキストのウィジェットを登録して、idを設定したdivといくつかの文言を設定しました。

idを設定したdivが画面に付いて来るコンテンツになります。

これで、コンテンツの登録は完了になります。

画面についてくる機能を記載したJavaScriptを読み込む

下記のJavaScriptを読み込みます。
※jQueryを使用しているので、本コードを読み込む前に必ずjQueryのライブラリを読み込んでください。

jQuery(function(){
    // ターゲットの要素
    var target = jQuery('#pickup-content');
    // フッターの要素
    var footer = jQuery('#colophon')
    // ターゲットの要素の高さ
    var targetHeight = target.outerHeight(true);
    // ターゲットの要素の幅
    var targetWidth = target.outerWidth();
    // ターゲットのトップ座標
    var targetTop = target.offset().top;
    
    // スクロールイベント処理
    jQuery(window).scroll(function(){
        // 画面上のトップ座標
        var scrollTop = jQuery(this).scrollTop();
        // 画面上のトップ座標位置がターゲットのトップ座標位置を超えた？
        if(scrollTop > targetTop){
            // フッターのトップ座標
            var footerTop = footer.offset().top;
            // （スクロールのトップ座標＋ターゲットの要素の高さ）の位置がフッターのトップ座標位置を超えた？
            if(scrollTop + targetHeight > footerTop){
                // ターゲットのトップ座標をフッターの位置に合わせて変更
                customTopPosition = footerTop - (scrollTop + targetHeight)
                target.css({position: "fixed", top: customTopPosition + "px", width: targetWidth});
            }else{
                // ターゲットを固定の位置で表示
                target.css({position: "fixed", top: "10px",  width: targetWidth});
            }
        }else{
            // 通常表示
            target.css({position: "static", top: "auto"});
        }
    });
});

3行目でターゲット（画面に付いて来るdiv）の要素、5行目でフッターの要素を取得しています。
この部分を各々のサイトに合わせて変更することで、そこそこうまく動いてくれると思います。

何故ターゲットの横幅を入力するのか

今回は、WordPressのサイドバーにテキストのウィジェットを登録して、テキストの中のdivを画面上に付いて来る要素として指定しました。
WordPressのテーマ次第ではあるのですが、基本的にdivには固定の横幅は設定されていません。
そのため、positionをfixedに変更する際に横幅を入力しなければ、下記のように横幅がサイドバーの領域を超えてしまう場合があります。

こういった部分を回避するために、事前にコンテンツの幅を取得しておいて、コンテンツが付いて来る設定に変更された際に横幅も設定するようにしています。

何故フッターの位置を監視しながら表示位置を変えるのか

フッターの位置を監視しなければ、下記のようにサイドバーのコンテンツがフッターを突き抜けてしまう場合があります。

こういった部分を回避するために毎回フッターの位置を監視して、付いて来るコンテンツの位置を決めています。

【注意！】上記のコードでGoogle AdSenseの広告を画面に付いて来るように表示すると規約違反になります

今回ご紹介した「画面をスクロールした際にサイドバーのコンテンツが画面上に付いて来るように表示させる」方法ですが。
画面に付いて来るコンテンツの内容として、Google AdSenseの広告を貼り付ける行為は規約違反となりますのでご注意ください。
詳細は下記のサイト様をご参照ください。
上下にスクロールしたとき、Google AdSenseが一緒についてくる配置方法は利用規約違反

規約の細かい部分は見落としがちですが、しっかりと守ってアドセンスを活用しましょう！

ではまた！

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

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