スマートフォンやタブレットなどのモバイル端末の利用者が、ここ数年爆発的な勢いで増加しています。この時代の流れから、Joomla!3.0以降は「レスポンシブWebデザイン」に対応しています。レスポンシブWebデザインとは、ブラウザのウインドウサイズに合わせてWebサイトのレイアウトやデザインを変えることで、各モバイル端末に適した状態でページを表示する技術です。従来は、モバイル端末の種類ごとに専用のページを用意するのが一般的でしたが、レスポンシブなWebサイトではそれらが必要ありません。
今回はiPhoneのエミュレータである「iBBdemo3」を使用して、Joomla!サイトがどのように見えるのか確認します。Joomla!をレンタルサーバへインストールし、さらにスマートフォンをお持ちの方は、iBBdemo3を使う必要はありません。自分の端末で確認しましょう。
まずはiBBdemo3をインストールしましょう。インストール方法については以下のサイト様で詳しく解説されています。
iBBdemo3を起動し、マウスをiPhoneの上部へ移動すると、アドレスの入力欄が表示されます。ここにサイトのURLを入力してEnterを押します。
モバイル端末に適したレイアウトでサイトが表示されます。コンテンツはすべて1列で表示され、サイトの右サイドにあった「最新の記事」や「ログイン」は、メインコンテンツの下側に表示されます。
今度はバックエンドを確認しましょう。バックエンドもレスポンシブに対応しています。iBBdemo3のアドレス欄に「サイトのURL/administrator」と入力します。ログイン画面は次のようになります。ユーザ名とパスワードを入力してログインします。
コントロールパネルが表示されます。バックエンドも1列で表示されます。右上の三本線をクリックします。
バックエンドのメインメニューが表示されます。「システム」を選択すると表示されるメニューの中から「グローバル設定」を選択してみます。
サイト名の設定やメンテナンスモードの切り替えなどが、このようにスマートフォンでも行えるようになっています。
また「保存」「キャンセル」などのボタンは、「ツールバー」というボタンを押すと表示されるようになります。
