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