Web制作

【スマホ対応】ダイナミックダービング

  • このエントリーをはてなブックマークに追加

モバイルURL、レスポンシブWebデザインに引き続き、最後はダイナミックサービングについてです。
他の方法は下記を参考にしてください。

実装方法

PHPを使用して、ユーザーエージェントによって読み込むソースを変更することで実装します。
つまり、PHPで動的なソースを実現するということです。

WordPressでの実装を例に出すと、

<?php if (wp_is_mobile()): //モバイル?>
  <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/mobile.css">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
<?php else: //PC?>
  <?php echo get_stylesheet_uri(); ?>
  <meta name="viewport" content="width=1280, maximum-scale=1, user-scalable=yes">
<?php endif; ?>

これはWordPressの条件分岐タグを使って読み込むソースを変えている例ですが、この場合

スマートフォンでは

  <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/mobile.css">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">

PCでは

  <?php echo get_stylesheet_uri(); ?>
  <meta name="viewport" content="width=1280, maximum-scale=1, user-scalable=yes">

が表示されます。
一例ではありますが、このように動的にソースを変える方法がダイナミックサービングになります。

メリット

  • 本当の意味でスマホに最適化できる
  • モバイルURLほど管理が面倒でない

大きいメリットはスマホの最適化が出来る点です。
レスポンシブWebデザインはCSSでデザインを変更させるだけなので、本当の意味で最適化できているとは言えません。

モバイル用の広告などの挿入もできるのが良いですね。

デメリット

  • ファイルは1つだが、変更箇所は2か所
  • ソースが複雑になりがち
  • Googleが推奨していない

一つのファイルで条件分岐させて書いていくのでどうしても複雑なソースになりがちです。
複雑なソースの場合、ミスも増えるので注意が必要です。

まとめ

動的にソースを変えることができるため、本当の意味でユーザビリティーを高めることができるのは良いですね。
しかしながら、Googleが推奨していない方法であり、管理が複雑になってしまう点は否めません。

状況に応じて使うのがベストだと思います。

  • このエントリーをはてなブックマークに追加

  関連記事

コメントを残す

*

CAPTCHA