HOME > コラム > WEB全般 > モーダルウィンドウを出すjQueryプラグイン「REMODAL」の使い方と注意点

モーダルウィンドウを出すjQueryプラグイン「REMODAL」の使い方と注意点

コラム

モーダルウィンドウを出すjQueryプラグイン「REMODAL」の使い方を紹介したいと思います。
また、この手の挙動をする時の(SEO観点における)注意点も挙げたいと思います。
こんなことを言うのもアレですが、実は「REMODAL」のフル機能を理解出来ていません(苦笑)
便利な機能が備わってるようですが、単体スクリプトとして使うわけではなく、動的に使われる機能っぽいので、その部分については触れずにおきたいと思います。
というのも、一通り見て触って確認した後に、答え合わせが出来る情報がなかったので・・・という感じでした。
ですので、本項では、モーダルウィンドウを出す消すということと、その注意点に焦点を当てたいと思います。
「ちょっとは役に立ったかな?」や「ちょっと面白いな(笑)」みたいなことを感じられましたら、シェアして頂けますと幸いです。

WEB全般に投稿したコラム記事

モーダルウィンドウを出すjQueryプラグイン「REMODAL」の使い方と注意点

REMODALサイトイメージ
モーダルウィンドウって?

REMODALは、モーダルウィンドウを出力するjQueryプラグインです。
って、「そもそもモーダルウィンドウって何?」という方は、REMODALを組み込み済みのサンプルページをチェックしてください。

組み込み済みサンプルでは、フッターにあるバナーの部分に仕込んでいまして、フッターのバナーをクリックしますと、コンテンツが浮き上がるように出てきます。
そのウィンドウのことをモーダルウィンドウと言います。

モーダルウィンドウは、ログインフォームをページ遷移せずに出力するような、ページ遷移をせずに特定のコンテンツを出力する際に使われることが多いですよね。
ですので、そういう場合は、全ページ共通で出力されることが多いと思います。
モーダルウィンドウの特徴ではないでしょうか。

今回のスクリプトは、簡単手軽に組み込めるのが特徴な反面、普通にHTMLで実装するとURLに引数を付けることになるため、注意が必要です。
javascriptでの実装も出来るようですが、今回はjavascriptでの実装は致しません。
出来ないことはないんですが、冒頭でも書いたように不明瞭な点があるため、HTMLでの実装で進めたいと思います。

それではすすめていきたいと思います。

本家サイト

以下が本家サイトとGitHubです。
諸々のファイルはGitHubeでダウンロードして頂けます。

ダウンロードと組み込みサンプル
組み込み済みファイルのダウンロード
phptemp_rm_160809.zip
組み込み済みサンプル

サンプルです。

フッターのバナーにモーダルウィンドウを呼び出すリンクを仕込んでいますので、フッターにあるバナーをクリックしてみてください。

元になるWEBサイトテンプレート(PHP)について

当サイト内の「SEOの基礎知識」の中のコンテンツです。

組み込みに際して

REMODALは、HTMLタグに特定記述することでウィンドウを出力することが出来、また、javascriptでイベントをトリガーにしてウィンドウを出力することが出来ます。
ここでは、HTMLに特定記述をする方法だけを紹介しています。

javascriptでイベントを拾って・・・という方法は、オプションを駆使し幅広いケースに対応する場合に用いるには有用だと思いますが、そこまでの規模は想定していませんし、そこまでモーダルウィンドウを多用するのはどうかと考えた次第です。

また、本件では、ヘッダ内でcanonicalの指定を入れています。
というのも、HTMLに記述してウィンドウを出力する時、URLに引数をつけているため、重複コンテンツのような状態が出来てしまうため、引数がつかない元URLを明示しておかなければいけないという流れです。

必要ファイルの設定

GitHubからダウンロードしてきたフォルダから「/dist/remodal.css」と「/dist/remodal-default-theme.css」と「/dist/remodal.js」を適宜必要フォルダに移動してください。
そして、それらを設定ファイルに記述して読み込ませるようにしてください。
本件では、「/_set/css.php」、「/_set/js.php」に記述し、全ページ共通にしています。

jQueryファイルは本家で記述されていたバージョンのjQueryファイルを使用していますので、お間違いなくお願い致します。

次に、「/_set/head.php」と「/_set/foot.php」に以下の記述をしてください。

※最上段に記述してください。

<div class="remodal-bg">

※foot.phpの内容全てです。

<div id="foot">

<div id="flink">
<div class="flinkw">
<ul>
<li><a href="/column/web/160809/01/"><?php echo "$pankuzu_top"; ?></a></li>
<li><a href="/column/web/160809/01/cate_01/"><?php echo "$cate_01_linkname"; ?></a></li>
<li><a href="/column/web/160809/01/cate_02/"><?php echo "$cate_02_linkname"; ?></a></li>
<li><a href="/column/web/160809/01/cate_03/"><?php echo "$cate_03_linkname"; ?></a></li>
<li><a href="/column/web/160809/01/cate_04/"><?php echo "$cate_04_linkname"; ?></a></li>
</ul>
</div>
<div class="flinkw">
<ul>
<li><a href="/column/web/160809/01/sitemap.php"><?php echo "$oth_page_01_linkname"; ?></a></li>
<li><a href="/column/web/160809/01/privacy.php"><?php echo "$oth_page_02_linkname"; ?></a></li>
</ul>
</div>
<div class="flinkbnr"><a href="#modal"><img src="/column/web/160809/01/img/fbnr.gif" alt="" /></a></div> // aタグの内容を変えています。
<div class="flinkbnr"><a data-remodal-target="modal"><img src="/column/web/160809/01/img/fbnr.gif" alt="" /></a></div> // aタグの内容を変えています。
</div>

</div>

<div id="footdisc"><h4><?php echo "$footdisc"; ?></h4></div>

<div id="footad">
<address>Copyright © <?php echo "$sitename_a"; ?> All Right Reserved.</address>
</div>

// モーダルウィンドウ内に出力するコンテンツここから
<div class="remodal" data-remodal-id="modal">
<button data-remodal-action="close" class="remodal-close"></button>
<h1>Remodal</h1>
<p>Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.</p>
<br>
<button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
<button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>
// モーダルウィンドウ内に出力するコンテンツここまで

</div> // head.phpに記述した「class="remodal-bg"」の終了タグです。

書き換えたaタグのリンク先とデータの指定で使っている「modal」は任意の文字列で問題ありません。
モーダル内に出力するコンテンツ内容を二つ用意し、それぞれ「modal_01」「modal_02」に分けて使って頂くことも出来ます。
その場合、モーダルウィンドウ内に出力するコンテンツの外枠にある「data-remodal-id="modal"」の”modal”の部分を適宜変えてくださいね。

最後に、全ページに、それぞれのページのURLをcanonicalで明示してください。
例えばですが、「/sitemap.php」でしたら、canonicalで「/sitemap.php」と記述してください。

$pageurl = '/***.php'; // 重複コンテンツ対策
<link rel="canonical" href="<?php echo "$pageurl"; ?>" />

最後のcanonicalの指定をしないと、Search Console内で”重複するメタデータ”とか出てくると思われます。
そうなると重複コンテンツになりますからね、注意したいところです。

全てのファイルをアップ

上記で設定が完了です。
後は、修正したファイルをアップすれば、正常に動作します。

jsでオプション設定をすることが出来たりしますので、その点については、本家サイトを見てみてください。
オプション設定をするとモーダルウィンドウの演出を少々変えることが出来るようです。

補足ですが、head.phpに記述した「class="remodal-bg"」は無くても大丈夫ですが、「class="remodal-bg"」を記述することによって「class="remodal-bg"」に囲まれているコンテンツが、モーダルウィンドウが出ている時にエフェクトがかかるようになっています。
本件でのサンプルでは「pagetop」の部分だけはエフェクトがかからず、そのほかのコンテンツ部分はエフェクトがかかっています。
もし、全てのコンテンツにエフェクトをかけたいと思われましたら、「<body>」の直後に「class="remodal-bg"」、「</body>」の直前に閉じタグをそれぞれを入れて頂くとベターです。

その他、補足

WEBサイトテンプレート(PHP)の修正にあたって、以下の点に配慮しています。

  • 今回、サンプルにしたWEBサイトテンプレート(PHP)は「 phptemp_160202.zip 」です。
締め

いかがでしたでしょうか?
jsを使いだすと若干面倒かもしれませんが、一個所や二個所でモーダルウィンドウを使う程度でしたら、十分に機能的で軽いスクリプトですね。

モーダルウィンドウを使った時に厄介なのは、モーダル部分のコンテンツが多いと、隠しコンテンツになってしまうというところなんですね。
そして、その分量が多く全ページで共通して使われているコンテンツだと、サイトの評価に大きな影響を与えてしまうことになります。

そのため、検索エンジンがクロール出来る範囲でモーダルを設置する場合は、コンテンツ量とその範囲に十分に気を付けなければいけないことを、忘れないでおきたいところです。

執筆 : 清水 隼斗

モーダルウィンドウを出すjQueryプラグイン「REMODAL」の使い方と注意点のAMPページ

Facebookコメント

他のカテゴリ記事は下記からお選び下さい。
SEO対策に関する記事を投稿するカテゴリです。とにかく、SEO対策のことのみを記事にしようと思います。弊社の本業です(笑)
インターネットやWEBに関する総合情報に関する記事を投稿するカテゴリです。技術的なことでも出来るだけ分かりやすくしていこうと思います。
社内での出来事やランチのことなど、小さなことから大きなことまでを投稿するカテゴリです。少人数なのでネタは限られてますが面白可笑しくいきます!
その他、上記に当てはまらないことは全てこのカテゴリに投稿します。弊社の歴史・・・というわけではありませんが、後になって懐かしむことが出来る記事を投稿します。
株式会社SEMラボラトリー
TEL : 06-4394-8427
MAIL : info@oosaka-web.jp
PAGE TOP