意外と知らない！モバイルサイト実装の種類3つと注意点
モバイルサイトの種類といえば代表的なのがレスポンシブウェブデザイン。ただ「レスポンシブウェブデザインは知っているけど他の種類は知らない。」なんて人も結構多いですよね。
そんな人向けにモバイルサイト実装の種類と注意点をまとめてお伝えします！
モバイルサイトの主な実装方法は3種類あり、どの実装方法を選ぶかによって注意点が異なります。
特にチームでサイト制作や運用を行う際は、共通認識として理解しておかないと思わぬところでサイト制作に無駄が発生したり、運用に支障が出たりするので、知らない方はぜひ一度目を通しておいてください！
ダイナミックサービング（動的な配信）
概要
URLは同一でUserAgent（ユーザーエージェント）によって切り分けられます。
特徴/注意点
- デザインが自由
- URLがどのデバイスでも同じ
- HTMLがデバイスによって異なる
- UserAgentでデバイスに合わせたHTMLとスタイルを適応
- 世の中に新しいデバイスが出てきたらUserAgentの見直し要否の判断が必要
- Vary HTTPヘッダー（Vary: User-Agent）の設定が必要
セパレートURL（別々のURL）
概要
URLは別々でUserAgent（ユーザーエージェント）によって切り分けられます。
特徴/注意点
- デザインが自由
- URLがデバイスによって異なる
- HTMLがデバイスによって異なる
- UserAgentでデバイスに合わせたHTMLとスタイルとURLを適応
- 世の中に新しいデバイスが出てきたらUserAgentの見直し要否の判断が必要
- Vary HTTPヘッダー（Vary: User-Agent）の設定が必要
- デバイスごとにHTTP（またはJavaScript）リダイレクト設定が必要
- アノテーション設定（PCに<link rel="alternate" href="モバイル用URL">、モバイルに<link rel="canonical" href="PC用URL">）が必要
スマートフォンを利用して種類を判別する方法
Chromeブラウザの場合、「PC版サイトを見る」部分をタップ。
Safariブラウザの場合、「デスクトップ用サイトを表示」部分をタップ。
上記の方法でブラウザのUserAgentがPCに切り替わるので、以下で大体判別できます！
- ページが何も変わらない場合→レスポンシブウェブデザイン
- PCの見た目に変わった場合→ダイナミックサービング
- PCの見た目に変わりURLが異なる場合→セパレートURL
さて、モバイルサイトの種類や特徴、判別方法をズラズラっと紹介しましたが、わからない部分があってもザックリとした違いがわかっていれば問題ありません！ぜひ頭の隅に置いておいてください^^
YouTubeリンクから埋め込み動画(iframe)やサムネイル画像を取得
YouTubeの動画リンクから動画IDを取得・利用して、埋め込み動画（iframe）やサムネイル画像を取得する方法です。
WordPressで記事のアイキャッチ部分や記事一覧のサムネイルなどにYouTubeを上手く利用したい場合にオススメ！
以下のどちらのリンクでも利用可能です。
- 動画ページのリンク（https://www.youtube.com/watch?v=xxxxxxxxxxx）
- 共有リンク（https://youtu.be/xxxxxxxxxxx）
※その他のリンクを利用するとfalseを返します。
独自関数を用意
<?php
/*************************************************************
以下 YouTube共有URL関連
*/
//動画ID取得
function get_youtube_id( $url ){
if($url){
if( preg_match('/youtu/',$url) ){
if( preg_match('/\?v=([^&]+)/',$url,$match) ){ //「https://www.youtube.com/watch?v=xxxxxxxxxxx」の場合
$youtube_id = $match[1];
}else{ //「https://youtu.be/xxxxxxxxxxx」の場合
$youtube_id = preg_replace('/https\:\/\/youtu.be\/(.*?)/', '$1', $url);
}
return $youtube_id;
}else{
return false;
}
}else{
return false;
}
}
//埋め込み動画（iframe）取得
function get_youtube_iframe( $url ){
$youtube_id = get_youtube_id( $url );
if($youtube_id){
return '<iframe src="https://www.youtube-nocookie.com/embed/'.$youtube_id.'" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
}else{
return false;
}
}
//サムネイル画像取得
function get_youtube_thumbnail($url){
$youtube_id = get_youtube_id( $url );
if($youtube_id){
return 'https://img.youtube.com/vi/'.$youtube_id.'/maxresdefault.jpg';
}else{
return false;
}
}
/*
以上 YouTube共有URL関連
*************************************************************/
?>
使い方
埋め込み動画
<?php echo get_youtube_iframe('動画URL'); ?>
サムネイル画像
<img src="<?php echo get_youtube_thumbnail('動画URL'); ?>" alt="">
