個人用ツール

モバイル・スマートフォン対応

提供: baserCMS公式ガイド

2016年4月4日 (月) 13:11時点におけるBaser (トーク | 投稿記録)による版

(差分) ←前の版 | 最新版 (差分) | 次の版→ (差分)
移動: 案内, 検索

ここでは、baserCMS での携帯サイトの制作方法をご説明いたします。

簡易リダイレクトついて

baserCMSは携帯よりのアクセスと判断した場合には、リクエストされた URL の先頭に「m」を付加した URL にリダイレクトする仕様となっています。

http://{baserCMSの設置URL}/about/index
   ↓
http://{baserCMSの設置URL}/m/about/index

現時点(baserCMS 3.0.0)では、以下の文字列を含むユーザーエージェントを携帯よりのアクセスと判断するようになっています。

DoCoMo / SoftBank / Vodafone / J-PHONE / UP.Browser / Googlebot-Mobile / Y!J-SRD / Y!J-MBS

現時点(baserCMS 3.0.0)では、以下の文字列を含むユーザーエージェントをスマートフォンよりのアクセスと判断するようになっています。

iPhone / iPod / Android / dream / CUPCAKE
blackberry9500 / blackberry9530 / blackberry9520 / blackberry9550 / blackberry9800
webOS / incognito / webmate

※ この設定は、将来的に、管理画面で変更できる仕様とする予定ですが、現時点では、皆様からお寄せ頂いたユーザーエージェントをフィードバックさせて頂きたいと思います。
※ どうしても早急に対応ユーザーエージェントを変更する必要がある場合は、{baserCMSの設置フォルダ}/lib/Baser/Config/setting.php を {baserCMSの設置フォルダ}/app/Config/setting.php に上書きしてカスタマイズします。

レイアウトテンプレートを変更する

デモテーマの場合、モバイル用のレイアウトテンプレートは下記の場所に配置されていますのでこちらをカスタマイズする事となります。

{baserCMSの設置フォルダ}/app/webroot/theme/demo/Layouts/mobile/default.php

モバイルページの追加

モバイルの各ページは固定ページ管理から管理する事ができます。
baserCMSでは、モバイルページは、PCページと連携する事もできますし、個別に非連携にする事もできます。
非連携にした場合、PCとモバイルの固定ページは別管理となります。 ここでは、非連携の場合のモバイルページの追加について説明します。

  • 固定ページ管理を開く
    ・まず、管理画面にログインし、固定ページ管理を開きます。
  • モバイルページを追加する
    ・固定ページ管理メニューより「新規に登録する」をクリックします。
    ・カテゴリ欄で「モバイル」または「スマートフォン」を選択します。
    ・通常のページ追加と同様に残りの入力欄も入力し、「登録」ボタンをクリックします。

これで、モバイルページの追加は完了です。 ページ追加の際に、ページ名を about とした場合、携帯では下記 URL で表示する事ができます。

http://{baserCMS の設置 URL}/m/about

スマートフォンでは次のURLとなります。

http://{baserCMS の設置 URL}/s/about

※ ページコンテンツ内に入力された文字のうち、全角カタカナは自動で半角カタカナに変換されます。
※ ファイルアップローダーで貼り付けた画像は、自動でモバイル用のサイズに変換されます。

PCページからモバイルページに反映する

非連携の場合でも、PCページの内容をモバイルページに反映する事ができます。

  • 対象のPCページの編集画面を開きます。
  • 画面下に「モバイルページとしてコピー」というチェックボックスがありますので、これにチェックを入れて「更新」ボタンをクリックします。
    ※スマートフォンの場合は「スマートフォンページとしてコピー」にチェックを入れます。

PCページとモバイルページを連携する

PCページとモバイルページを連携する場合には、システム管理より、「固定ページをPCと連携する」にチェックを入れます。
ヘッダーやフッターは、PC、スマホ別々のレイアウトを利用し、コンテンツ本体部分のみ共有する事となります。