tsukalogo0000

alt

iPhone用サイトMobile Joomla!

前回サイズ指定のスマートフォン対応CSSの 記述を記事にし、その続きJoomla! モバイル対応Mobile Joomla! インストール、iPhone用サイトからの続編。
Mobile Joomla! は、Joomla! のエクステンション。ここでは、未だに愛用中のJoomla! 1.5 へのインストールについて説明します。このエクステションの中身だけVer.がアップしているので追記です。


【手順1】

下記のThe Joomla! Extensions Directoryサイトの「Mobile」メニューから「Mobile Joomla!」をダウンロードします。
「Mobile Joomla!」
「DOWNLOAD」ボタンを押すとMobile Joomla!のダウンロードページが表示されます。3種類のダウンロードがあり、それぞれで利用できる機能が一覧で比較できるが、まず無償で使用するので「Free」タイプをダウンロード。その場合展開した自分のモバイルサイトには下に広告が出現するようだ。
「DOWNLOAD」ボタンを押すとログイン画面が現れるが、これはダウンロードするにはユーザー登録が必要とされているため。先ず「Register」をクリックしてユーザー登録を済ませる。。
ログインに成功すると、ダウンロードページが現れライセンスなどに目を通してた上で、同意できる場合にのみチェックボックスにチェックの上「Download」ボタンを押してファイルをダウンロード開始。(2014年3月現在「Mobile-Joomla.1.2.8.tar.gz」というファイル名)
ファイルは圧縮されてますが、joomlaは他のエクテション同様にそのままアップロードするので解凍の必要は無い。


【手順2】

「アップロード&インストール」ボタンをクリックする。「コンポーネントを正常にインストールしました。」「Mobile Joomla 1.2.8 is successfully installed!」となればインストール成功。
ダウンロードした「Mobile Joomla!」ファイルを、Joomla! に組み込んでいきます。
管理画面の「エクステンション」+「エクステンション管理」をクリックし、「インストール」画面を表示させます。「パッケージファイルのアップロード」の「参照」ボタンをクリックし、手順1でダウンロードしたファイルを選択します。すると管理画面のプラグインと設定するコンポーネントに入っています。


【手順3】

最後に「Mobile Joomla!」を日本語化します。
Joomla!の道しるべさんが、MobileJoomla 日本語言語パックを公開されています。このファイルを利用させていただきましょう。MobileJoomla 日本語言語パックファイルをダウンロードいただき、「エクステンション」+「エクステンション管理」の「インストール」からインストールしてください。
Joomla!の道しるべMobileJoomla 日本語言語パック
(注)自分は前述した通り、joomla 1.5なんで、ja-jp.mobilejoomla_1.0.zipがインストール不可でした、以前落としておいた、旧ヴァージョンのja-JP.MobileJoomla_0.9.12.zipで日本語化します。
日本語化されても。翻訳時期の関係で「Mobile Joomla!」本体よりも日本語パックのバージョンが古く、一部日本語表示されない箇所が出ることがあるかもしれない、そのような場合、必要であれば、以下の日本語ファイル(ja-JP)と英語ファイル(en-GB)を比較しながら編集すれば修正可能です。(新しいバージョンの英語ファイルに、日本語ファイルを合わせるようにしていく)


●MobileJoomla基本構造
管理画面のコンポーネントで各種スマホの対応が出来ます。カスタマイズとしては入ってる画像素材の縮小率と文字サイズのチェンジからです。CSSは他の通常スタイルを使う事も可能で、カスタマイズはfirefoxの携帯端末用シュミレーターを使いつつiphone用に根気よく修正していきましょう。このサイトは実験サイトでもあるのでjQueryや各種ギミックが詰まってるがゆえ、かなりスタイルの変更が余儀なくされます。



…哀しいかなまだこのサイトはレスポンシブデザインの考え方に沿っておらず、ユーザビリティが優れた状態のスマホ対応はなされておりません。また、タブレットについてはipadレティーナ以上でぎりぎり見れる感じなので現状のまま。iphone以下端末のみサイドナビが不要であったり、メニュー部分のカスタマイズが必要になってくる。
ちなみに<meta name="viewport" content="width=620px" >をhtml内に打てば強制的にサイズ固定出来ます。



 

ADD_YOUR_COMMENT

YOURALIAS:
YOUREMAIL:
YOURLINK:
タイトル:
FULLTEXT: