「モバイル・スマートフォン対応」の版間の差分

2016年4月4日 (月) 13:11時点における最新版

ここでは、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、スマホ別々のレイアウトを利用し、コンテンツ本体部分のみ共有する事となります。

@@ 行1: / 行1: @@
-baserCMSでは特別な機能の拡張なしに、モバイル端末（ガラケー）ページとスマートフォンページの表示に対応することが出来ます。
+ここでは、baserCMS での携帯サイトの制作方法をご説明いたします。
+## 簡易リダイレクトついて
+baserCMSは携帯よりのアクセスと判断した場合には、リクエストされた URL の先頭に「m」を付加した URL にリダイレクトする仕様となっています。
-== 機能の概要 ==
+<pre>
-baserCMSでモバイルページとスマホページに対応する場合、まずは管理画面の設定でモバイル、スマートフォンにそれぞれ「対応する」必要があります。対応の有無はシステム管理のサイト基本設定から設定出来ます。
+http://{baserCMSの設置URL}/about/index
+   ↓
+http://{baserCMSの設置URL}/m/about/index
+</pre>
+現時点（baserCMS 3.0.0）では、以下の文字列を含むユーザーエージェントを携帯よりのアクセスと判断するようになっています。
-「対応する」にすると、例えば以下のように携帯電話（ガラケー）からトップページにアクセスがあった場合、モバイル用ページのトップページへ転送されます。
 <pre>
-（TOPページ）
+DoCoMo / SoftBank / Vodafone / J-PHONE / UP.Browser / Googlebot-Mobile / Y!J-SRD / Y!J-MBS
-http://www.hoge.com/
-↓転送
-http://www.hoge.com/m/
 </pre>
-なお、上記例の通りモバイルページのURLには「/m/」が、スマートフォンページには「/s/」が付与されます。
+現時点（baserCMS 3.0.0）では、以下の文字列を含むユーザーエージェントをスマートフォンよりのアクセスと判断するようになっています。
+<pre>
-===固定ページをPCと連動する===
+iPhone / iPod / Android / dream / CUPCAKE
-ver.2.1.0から追加されたこの機能を利用すると、PC向けに１つページを作っておけば、そのページ内容をモバイル用、スマートフォン用の[[テーマに関する用語#レイアウトテンプレート|レイアウトテンプレート]内に出力し、それぞれモバイル用ページ、スマートフォン用ページとして利用出来ます。
+blackberry9500 / blackberry9530 / blackberry9520 / blackberry9550 / blackberry9800
+webOS / incognito / webmate
+</pre>
+<small>
+※ この設定は、将来的に、管理画面で変更できる仕様とする予定ですが、現時点では、皆様からお寄せ頂いたユーザーエージェントをフィードバックさせて頂きたいと思います。<br /> ※ どうしても早急に対応ユーザーエージェントを変更する必要がある場合は、{baserCMSの設置フォルダ}/lib/Baser/Config/setting.php を {baserCMSの設置フォルダ}/app/Config/setting.php に上書きしてカスタマイズします。
+</small>
+## レイアウトテンプレートを変更する
+デモテーマの場合、モバイル用のレイアウトテンプレートは下記の場所に配置されていますのでこちらをカスタマイズする事となります。
+<pre>
+{baserCMSの設置フォルダ}/app/webroot/theme/demo/Layouts/mobile/default.php
+</pre>
+## モバイルページの追加
+モバイルの各ページは固定ページ管理から管理する事ができます。<br /> baserCMSでは、モバイルページは、PCページと連携する事もできますし、個別に非連携にする事もできます。<br /> 非連携にした場合、PCとモバイルの固定ページは別管理となります。 ここでは、非連携の場合のモバイルページの追加について説明します。
+* <span style="color:red;">固定ページ管理を開く</span><br /> ・まず、管理画面にログインし、固定ページ管理を開きます。
+* <span style="color:red;">モバイルページを追加する</span>
+<br /> ・固定ページ管理メニューより「新規に登録する」をクリックします。<br /> ・カテゴリ欄で「モバイル」または「スマートフォン」を選択します。<br /> ・通常のページ追加と同様に残りの入力欄も入力し、「登録」ボタンをクリックします。
+これで、モバイルページの追加は完了です。 ページ追加の際に、ページ名を about とした場合、携帯では下記 URL で表示する事ができます。
+<pre>
+http://{baserCMS の設置 URL}/m/about
+</pre>
+スマートフォンでは次のURLとなります。
+<pre>
+http://{baserCMS の設置 URL}/s/about
+</pre>
-逆に、この連動を行わない場合、同じ内容のページでも、PC向け、スマートフォン向け、モバイル向けに最大３種類を、[[固定ページ管理]]で作る必要があります。
+<small>
+※ ページコンテンツ内に入力された文字のうち、全角カタカナは自動で半角カタカナに変換されます。<br /> ※ ファイルアップローダーで貼り付けた画像は、自動でモバイル用のサイズに変換されます。
+</small>
-ただし実際の案件では、PC、スマートフォン、モバイルの３つに対応する場合でも、それぞれ端末ディスプレイの大きさや、利用できるタグの種類などに差があることから、それぞれに最適化した内容で書き直した方が、より綺麗なページに仕上がるようです。
+## PCページからモバイルページに反映する
+非連携の場合でも、PCページの内容をモバイルページに反映する事ができます。
-== レイアウトテンプレート ==
+* 対象のPCページの編集画面を開きます。
-モバイル・スマートフォンも基本的に仕組みは変わりません。[[テーマのデザイン編集]]をご覧ください。
+* 画面下に「モバイルページとしてコピー」というチェックボックスがありますので、これにチェックを入れて「更新」ボタンをクリックします。<br />
+<small>※スマートフォンの場合は「スマートフォンページとしてコピー」にチェックを入れます。</small>
+## PCページとモバイルページを連携する
-<br /><br />
+PCページとモバイルページを連携する場合には、システム管理より、「固定ページをPCと連携する」にチェックを入れます。<br /> ヘッダーやフッターは、PC、スマホ別々のレイアウトを利用し、コンテンツ本体部分のみ共有する事となります。
-''テキスト寄贈：[http://hiniarata.jp/ 馬庭 吾一@株式会社ヒニアラタ]''

個人用ツール

検索

利用ガイド

制作ガイド ver.4

リンク

ツール