クリッカブルマップ(イメージマップ)をレスポンシブ対応にする

あまり必要な場面はないかもしれませんが、今回必要になったので覚書として。

まずはDreamweaverなどでも座標を簡単に作成することが出来ますが、サイトでも簡単に作成できます。

私が利用しているのはこちらのサイト

他にも同じようなサイトはあるので、ググって使いやすいサイトを利用するのも良いかもしれません。

ではレスポンシブに対応させるには以下のjQueryを利用します。

jQuery RWD Image Maps

使い方はいたって簡単。

まずはjQueryを呼び込んで、上記GitHubよりダウンロードしたjQueryを追加する。

そして以下を追加すればOK!

$(function() {
 $('img[usemap]').rwdImageMaps();
});

レスポンシブ設定はcss等で設定すればOKです。

YouTubeの埋め込み設定

iframeを使う方法

簡単で手軽な方法です。
YouTubeのプレイヤーのしたの共有ボタンを押すとリンクの共有の中に「埋め込み」という項目があります。
こちらをクリックするとiframeのタグが表示されるので埋め込みたい部分にコピペすればOKです。

仕様は変更になることもあるのでざっくりとご紹介。

詳細はググると丁寧にキャプチャー画像などを使って丁寧に説明してくれているサイトもあるので参考までに。

iframeのレスポンシブ

iframeのタグをdivで囲みcssで調整することでレスポンシブ対応が可能です。
以下がサンプルコード
※ 「HTML5でサイトをつくろう 」のサイト記事より参照してますので詳しくはサイトをご確認ください。

.クラス名{
 position:relative;
 width:100%;
 paddingtop:56.25%;
}
.クラス名 iframe{
 position:absolute;
 top:0;right:0;
 width:100%;
 height:100%;
}

ifarameのオプション

srcのURLの一番後ろに「?&autoplay=1」を追加すると 自動再生になります。

その他もろもろの設定はこちらに記載してます。

apiを利用する

こちらは埋め込みたい場所に以下のHTMLを設置し、JavaScript で設定する方法。

HTML

<div class="video-area">
 <div id="video"></div>
</div>

JavaScript

// YouTubeの埋め込み
function onYouTubeIframeAPIReady() {
ytPlayer = new YT.Player(
'video', // 埋め込む場所の指定
{
videoId: 'xxxxxx', // YouTubeのvideoIdを入れる
playerVars: {
loop: 0, // ループしない
controls: 1, // コントローラー表示
autoplay: 0, // 自動再生オフ
rel: 0, // オススメ動画を表示させない
showinfo: 1 // タイトル表示
},
events: {
'onReady': onPlayerReady
}
}
);
}

レスポンシブ対応にするなら playerVars に
height: "100%",
width: "100%",

を追加すると簡単に設定できます。
それ以外の設定は先ほど紹介したパラメーターの設定を参照してください。

videoId はYouTubeのURLの語尾にある「watch?v=xxxxxx」の「xxxxxx」部分です。

ボリュームについて

上記 JavaScript の後に以下のコードを追加するとミュートにすることが出来ます。

function onPlayerReady(event) {
event.target.setVolume(0);
}

音量は0-100まで指定できるようです。
ただしスマホはデバイスにに依存するそうなので event.target.mute(); を使うこともできますが、スマホだとミュートを解除できないようなので、どちらを使うべきか、、、という感じではありますが。

サイトによって使い分けると良いかもです。

pxをvwに変換する計算方法

cssにはcalc機能がついているので、デザインから画像サイズ等々をvwに計算する計算方法を見つけたのでメモ。

px÷画面サイズ×100=vw

上記で計算できるようです。
いろんなサイトを見て、色んな方法があるようですが、こちらが簡単だったので。

スマホのhover

最近はモバイルファーストでスマホ対応のサイトがほとんどです。

スマホ用のサイトを作成する方法とレスポンシブサイトとして
スマートフォンもPCも同じページのレイアウトを変更して
見せ方を変える方法とで対応してるサイトがあります。

今回はBootstrapのレスポンシブでカルーセルを利用して
スライダー表示をしていたのですが、インジゲーターが
iPhoneでクリック出来ないということで、いろいろと
検索して設定を変えてみましたがうまくいかず、
結局スライダーをスマホ対応の物に変更しました。
ただ以下の記述にて対応できるものもあるかと
思ったので覚書として残します。

「ontouchstart属性を追加する」
これだけで大丈夫でした。

特にjQueryも不要でスマホでクリックができるようになります。
bodyタグに入れても良いですし、クリックしたいdivに入れても
良いしプロパティは空で大丈夫です。

書き方の例は以下となります。
<div ontouchstart=”” >クリック内容</div>


固定したナビにスクロールをつける応急処置

ヘッダーを固定してハンバーガーメニューをつけると
長いメニューの場合は下の方に記載されているメニューが
表示されないということも、、、

そこで作り方を変更したほうが良い時もありますが、
時間がない場合はスクロールをつける方法。

表示する子要素に高さをheight:100vhなどつけてあげて
以下を追加すると見えない範囲がある場合は
スクロールできるようになります。
overflow: auto;
-webkit-overflow-scrolling: touch;

ただ下に表示されている画面がスクロールされるなどの
細かい設定が別途必用な際も多いと思いますが、
とりあえずの応急処置は上記で対応できるかと思います。
ただし、スマートフォンでの挙動はイマイチなので
根本的な問題解決にはならない可能性もありますが、、、

SVG作成 アンドロイドで表示できない場合

pngファイルをsvgに変換する作業を行ったのですが
サイト上からの変換だときれいなSVGが作成できず
illustratorで作業しても、結局ベクター画像でないので
綺麗に変換できず、Photoshopを利用してみたところ
見た感じきれいだったのでサイトに利用したところ、
アンドロイドで表示できないという壁にぶつかり、、、

どうやらPhotoshopで変換したSVGではアンドロイドでは
表示できないようです。
(詳細はこちらのサイトにて記載されている記事で知りました)

そこで作ったSVGをillustratorで保存すると確かに表示されますが
pngと同じ荒い画像になってしまいます。
(どうやらPhotoshopで作成したSVGもベクター画像ではないので
拡大すると荒くなってしまうようで、、、)

結局はillustratorで作り直すのが早そうですが、もし何か
良い方法があればお知らせいただけると助かります。

アンドロイドでsvgが表示できない!というかたは、もしかして
Photoshopを利用してませんか?
illustratorで保存しなおすと利用できますので、ベクター画像であれば
レスポンシブやretinaディスプレイ等々にも対応できるかと思います。