タイプ
有料/無料	無料
ライセンス	GPLv2以降
執筆時のバージョン	1.0.2
ユーザ登録の要否	必要

JEDダウンロードホームページ言語ファイル

Mobile Joomlaは、インストールするだけでJoomla!サイトをスマートフォン対応にできるエクステンションです。

インストールと日本語化

公式サイトからMobile Joomlaをダウンロードします。なおダウンロードするにはユーザ登録が必要です。

ダウンロードしたら、バックエンドの「エクステンション管理」からインストールします。日本語化するには、以下のページから言語パッケージをダウンロードし、エクステンションと同じようにバックエンドからインストールしてください。

ダウンロード - MobileJoomla 日本語言語パック(Japanese Language Pack) - Joomla!の道しるべ

これ以降は日本語化した状態で説明します。

Mobile Joomla!の使い方

使い方というか、インストールするだけで基本的な作業は終了しています。あとは細かな調整をするだけです。とりあえずこの時点でiPhoneやAndoroid機を使ってサイトにアクセスしてみます。iPhoneだと次のような感じで表示されるはずです。なお以下は、iPhoneエミュレータの「iBBdemo3」を使った画像です。

Android機だと以下のようになります。これは私が使用しているauのAndroid機『IS03』でのスクリーンショットです。iPhoneとは異なるテンプレートが使われているためデザインが異なります。

MobileJoomlaの仕組み

おそらく次のような感じです。

tera-WURLFとは、世界中のモバイル端末の情報を集めたデータベースです。Mobile Joomlaをインストールすると、このtera-WURLFもJoomla!のデータベースにインストールされます(phpMyAdminでデータベース覗くと、たくさんのテーブルが作成されています）。モバイル端末のユーザエージェントからこのデータベースを検索して機種を特定しているようです。

自分のモバイル端末がtera-WURLFに登録されているか知りたい場合、そのモバイル端末を使ってこちらのページにアクセスしてください。自動的にユーザエージェントが入力されますので、「Lookup User Agent」をクリックするとデータベースを検索できます。日本製の端末も登録されているようです。私のIS03は登録されていました。

機種が特定できたら、使用するテンプレートが選ばれます。Joomla!バックエンドの「テンプレート管理」を見ると、4つのモバイル用テンプレートがインストールされています。特定した機種を基に、これらのテンプレートを切替えているようです。

モジュールの設置

Joomla!のテンプレートと同じように、モバイル用のテンプレートにもモジュールポジションがあります。

「コンポーネント」→「Mobile Joomla」を開くと、「全般設定」が表示されます。そのほか「スマートフォン」「iPhone」「WAP」「iモード」のリンクが存在し、それぞれ機種別に設定があります。なおスマートフォン=Andoroidと考えてOKです。今回は「iPhone」をクリックします。

画面右側にある「テンプレートモジュール」が、現在のモジュールポジションを表しています。大きく分けると上部・中部・下部のポジションがあり、例えば「上部」には3つのポジションがあります。「mj_iphone_header」と「mj_iphone_header2」は、iPhone専用のポジションです。このポジションにモジュールを配置すれば、iPhoneでアクセスした時だけモジュールが表示されます。「mj_all_header」はデバイス共通のポジションで、ここに配置すればAndoroidでもiPhoneでも表示されます。

実は既にこれらのモジュールポジションが使われています。「エクステンション」→「モジュール管理」を開き、「－場所の選択－」フィルタから「mj_all_header」を選択します。

「Mobile Menu」が表示されます。これがモバイルサイトの先頭に表示されているメニューです。「Mobile Menu」の編集画面を表示すると、画面右側の「基本オプション」に「Menu Name」があります。これがモバイルサイトにどのメニューを表示するかの設定です。もし正しいメニューが表示されていなければ修正してください。

その他のモジュールも見ていきましょう。モバイルサイトの一番下側に、モバイルサイトとPCサイトを切替えるリンクが英語で表示されています。これもモジュールで出来ており、モジュールを編集すれば日本語に修正できます。

「モジュール管理」を開き、「－場所の選択－」フィルタから「mj_all_footer」を選択します。

表示された「Select Markup」がそのモジュールです。モジュール編集画面を開き「Mobile Link Text」を「スマートフォン版」、「Desktop Link Text」を「パソコン版」に修正します。

表示が日本語になりました。

CSSの修正

その他、タイトルが途中で途切れてしまっているのでCSSを修正しました。CSSは/templates/mobile_iphone/css/custom.cssに記述します。このファイルに記述すれば、Mobile Joomlaの本体をアップデートしても上書きされることはありません。

今回はこのファイルに以下のCSSコードを追加しました。

.toolbar > h1 {
width: auto;
}

これで一通りの設定は完了です。

MobileJoomlaのエクステンション

Mobile Joomla専用のエクステンションがいくつかあるので必要に応じて利用します。有料のエクステンションもあります。今回はその一部を紹介します。

http://www.mobilejoomla.com/extension/new.html

Remove Support Ads

モバイル用サイトの最下部に表示される広告リンクを削除するプラグインです。ただ実際に広告は表示されず、Copyrightのみが表示されるようです。インストールすればCopyrightも削除できますが、Mobile Joomlaを支援したい方は削除しないであげてください・・・。

もしこのプラグインをインストールする場合、通常のエクステンションと同様に「エクステンション管理」からインストールし、「プラグイン管理」で有効にしてください。

AdSense Mobile

モバイルサイトにGoogle Adsenseの広告を表示するモジュールです。試したのですが動きませんでした･･･。他のAdsense用モジュールを使った方がよさげです。

Google Analytics Mobile

Google Analytics用のトラッキングコードを挿入するモジュールです。

Eleganceテンプレート（有料）

有料のモバイルテンプレートです。見た目にも美しく、サイトのタイトルを画像にできたり、むにょーんと開くモジュールが作れたり、何色かテーマを選べたりと、標準のモバイルテンプレートにはない機能が追加されています。

Mobile Joomlaの開発を支援する意味を込めて、今回Eleganceテンプレートを購入してこのサイトに適用してみました。Eleganceテンプレートを適用すると以下のような表示になります。

標準のモバイルテンプレートではサイトの先頭にメニューが表示されますが、メニューの数が多いと画面をメニューで埋め尽くしてしまいます。Eleganceテンプレートでは設置したモジュールを折りたたんでおくことができるため、最低限のスペースだけでメニューを設置できます（上記の「モバイルメニュー」がそれ）。