WEB業界で仕事をするためには⑥ 「Jquery」について②

2019年10月7日

前回の記事では「Jquery」についての簡単な概要と幾つかの代表的なJqueryのファイルについての解説を行いました。
今回の記事はその続きを書いていきたいと思っております。
前回の記事をまだ未読という方はこちらにリンクを貼っておきますので、そちらから是非お読みになってください。

目次

代表的なJqueryの解説② ポップアップ系

画像をクリックする等の動作を行うとポップアップ(自動で別のウインドウが立ち上がって別の要素が表示される事)する類の機能を持つJqueryを紹介いたします。
とは言ってもポップアップ系のJqueryは非常に種類が多く、試しに「Jquery ポップアップ」などで検索を行うと本当に色々な種類のポップアップ系Jqueryがヒットしてしまいます。
しかしこれではどれを選べばいいのかが分かりにくいので本項では敢えて、管理人がオススメする一種類に絞ってご紹介したいと思います(´・ω・`)

ズバリ、管理人がオススメするポップアップ系のJqueryは「lightbox2」です。
lightbox2は実装も簡単ですし、レスポンシブにも対応しているので非常に扱いやすい事が特徴です。
また、あまり大袈裟にcssのカスタムを行なわくとも、デフォルトの設定のままでも中々格好いい表示の仕方をしてくれるのでcssやJqueryの扱いが初心者という方であったとしても、こちらのファイルを実装するだけでサイトの印象をガラリと変わります。
シンプルながらも、PCでもスマホでも変わらずクールな格好良さを持った表示が可能なlightbox2は趣味の絵や写真等をアップする為のポートフォリオサイトにもバッチリです!

代表的なJqueryの解説③ レイアウト調整系

Webサイトを構築していると表示されている文字数の関係でレイアウトの高さが一部ズレてしまう事がよくあります。
特にワードプレスを使用して動的に構築されている部分では、記事のタイトルの長さが隣り合ったコンテンツと違っている為に、見た目的に非常に不格好になってしまう事などが頻繁に起こります。
文字だけでの説明では今一つ状況が分かりづらいと思いますのでサンプルの画像を用意いたしました。

こういう状況です。
こちらのサンプル画像は、ワードプレスの投稿部分でよくあるパターンの「サムネイル画像 + タイトル + 記事の抜粋」という構成をイメージしております。
画像中、左から三番目にある「コンテンツ3」をご覧ください。
こちらのコンテンツは他のコンテンツに比べて「タイトル」の文字数が長く「記事の抜粋」部分のレイアウトがズレてしまっています。
こちらの画像の様な表示のされ方であってもホームページの機能の部分では全く問題はありませんが、しかしデザイン的には非常に不格好で正直ダサいです。
レイアウトを整えるために投稿記事のタイトルの長さを全記事で調整するというのも非常に効率が悪いですし、結局のところそういった手動で調整するやり方ではとてつもなく面倒ですし時間もかかります。
また、文字数を調整するといった手作業でのレイアウト調整ではレスポンシブ時に対応が困難になるのでオススメできません。

そんな時に役に立つのが「matchHeight」というJqueryファイルになります。
こちらのファイルは要素の横並び時のレイアウトを自動で調整してくれるという優れものです。

matchHeightを使用した場合
matchHeightはスライダーやポップアップの様なサイトの表示に動きを付け加えて華にする様なサイトにとっての「プラス」の効果はありませんが、レイアウトの崩れによるデザインの「マイナス」を抑える事で結果的にホームページの本来のポテンシャルを引き出してくれる、所謂縁の下の力持ち的な存在です。

非常に地味な役回りではありますが、サイトの構築には欠かせない存在です。
レスポンシブにも対応をしているので本当に役に立つ奴なんです!(´・ω・`)

代表的なJqueryの解説③ レスポンシブ対応系

レスポンシブ対応系のJqueryは数多くありますが、管理人が現在仕事でコーディングをしていて特に役に立っているのが「jMap」という名のファイルです。
jMapは「クリッカブルマップ」を使用する際に使用します。

クリッカブルマップとは、画像上に任意の座標を指定して、そこをクリックすると通常のリンク先へと飛ばす事が出来るという仕組みの事になります。
この機能を使えば、通常であれば「postion」系のcssを利用して組むような面倒なコーディング作業を、非常に簡単かつスピーディーに仕上げる事が出来るので、時間の無い時などには特に重宝します。
LP等のデザインが複雑な為に、HTMLでのコーディングがメインではなく画像を多用し構成するページ等でよく使用されています。

画像に座標を指定する方法としては、専用のジェネレーターサイトを利用して行うのが一番手っ取り早くてお勧めです。
ジェネレーターサイトとは具体的には下記の様なサイトの事ですね。
こちらに目的の画像をアップロードし画像上のリンク化したい箇所を指定。
その後抽出されたデータをHTMLやCSSに添付したら完了です!
ジェネレーターサイトさえ押さえておけば、特別な知識や経験が無くてもクリッカブルマップを簡単に作成する事が出来るので非常にオススメです。

クリッカブルマップの詳しい設定方法等についてはまた後日お伝えしたいと思います。
https://labs.d-s-b.jp/ImagemapGenerator/

少し本題を反れましたが、ここまでが準備段階です。
ここからが本題にある「jmap」というをプラグインを必要とする段階となります。

上述の説明で画像上に座標を指定してリンクを設置する事の出来るクリッカブルマップの有用性についてはある程度ご理解いただけたとは思います。
しかし、こちらの手法には一つだけ弱点があります。
それはレスポンシブ化をする際に、画像上に指定したリンクの位置と画像の表示がズレてしまうという事です。

もう少しだけ詳細に書くと、レスポンシブ化(タブレットやスマホなどの端末に対して最適化したサイズの表示)を行う際に、画像自体はスマホ等の画面サイズに合わせて小さく表示されますが、それはスマホでの表示には大抵「%」で画面全体の比率を算出して「相対的」に大きさが決められている為に、WEBサイトは様々な画面サイズのスマホで見ても同じ様に一定のクオリティを保持したまま表示をする事が出来ているのです。

対するクリッカブルマップは、「絶対的」な数値で空間座標を指定しています。
故にレスポンシブ化の際には、リンクを設置した画像は小さく表示されていても、クリッカブルマップで指定した座標自体が小さくなることは無いのでリンクの位置が指定した場所から大きくズレてしまうという現象が起こってしまいます。
言葉だけでは今一つ分からないと思いますので下記の画像をご参照ください。

赤枠部分がクリッカブルマップで座標を指定したリンク部分です。
パソコン表示の場合 ↓

スマホ表示の場合 ↓

要はこういう事です。
クリッカブルマップの問題点は理解した。
じゃあ結局使い道が無いんじゃ…(´・ω・`)と思った方に朗報です。
本項のタイトルにもなっている「jmap」という jQueryプラグインを使用すれば、本来はレスポンシブ時に生じてしまうリンクの位置のズレを解決してくれるんです!

ここまで読んでいただいた方であれば気づいておられると思いますが、クリッカブルマップはこちらの「jmap」等の座標位置の補正ツールとセットで使用する事が基本となります。
使用する為にいちいちjQueryを必要とするのは面倒だ…と思うかもしれませんがこちらのプラグインは導入が非常に簡単なので問題はありません。
詳しいセッティング方法について今後改めて解説を致しますのでお楽しみに(´・ω・`)

WEB業界で仕事をするためには⑥ 「Jquery」について②のまとめ

今回は幾つかのジャンルにおける代表的なJqueryについての解説を簡単に行いました。
本記事内で取り上げたのファイルの詳細な使用方法やセッティングの仕方などについても今後の記事内で解説をしていきます。
また、次回の記事では初心者の方がJqueryを使用する際に起こりがちな動作不良についても幾つかの原因と共にその解決方法を解説していきます。
Jqueryの事で悩んでいるという方に読んで欲しい内容となっておりますので、気になる方は是非そちらの記事についても目を通していってください。
ではまた(´・ω・`)ノ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です