QHMモバイル
QHMモバイル
ここで説明するQHMモバイルは、無償版QHM mobile Ver2.04のことです。有償版QHMモバイルは利用したことがないので、無償版と有償版の違いはわかりません。たぶんたいした違いはないと思っています。
(SWFU, FWD3がない。デザインが1種類しかないなど。)
QHMを使いこなしている人は、無償版QHMモバイルはすぐに簡単に利用できると思っていました。しかし、実際に使って見るとわからないことなどがいろいろと出てきて、少し悩みました。そこで、QHMモバイルについて少しまとめてみようと思いました。
はじめに
QHMモバイルとは、QHMをベースにモバイル用(携帯電話)のサイトを作成することを目的に作成されたツールです。
基本操作は、QHMと同じなのでQHMを利用している人は、使い方を覚えなくても利用できます。
ただし、無償版なのでマニュアル等やサポートがなく自己責任で利用することになります。そこで、無償版QHMモバイルを使っていろいろと疑問に思ったことや、QHMユーザフォーラムでのQHMモバイルについての質問などについて回答できるところは、このサイトで実験などをして回答してみたいと思います。
QHMとの違い
基本的には、QHMと同じですが一番の違いは、主要3キャリアの大部分の人のケータイで見れることを前提としているので細かい画面デザインができないところです。やろうと思えばできると思いますが、世の中に出ている無数のケータイのどの機種までをサポート範囲にするのかは非常に難しいところです。
そこで、割り切って考えて最低限の機能でそれなりのサイトを作ってしまいましょう。という考え方なのであまり細かい事には触れないでいきたいと思います。
プラグインも多数用意されていますが、ケータイでどこまで利用できるかはわかりません。
尚、スマートフォンについては、ケータイの扱いではなく、PCの扱いになるのでここでは触れません。
- 無償版QHMモバイルを有償版QHMと比較すると
- 画面が小さい
- ナビがない
- メニューがない
- ナビ2がない
- 利用できるプラグインが少ない
- SWFUがない
- FWD3がない
- 外部のスタイルシートが利用できない
- テーブルが使えない
- 絵文字が使える
検証環境
ケータイの実機で動作確認するのがいちばんですが、私の手元にはケータイは一機種しかありません。そこでFirefoxのプラグインを利用して、ケータイをシミュレートして確認します。
- プラグイン:FireMobileSimulator Ver1.1.11
これを使用すると、3キャリヤ(docomo, Au, Softbank)のケータイをFirefox上で簡単にシミュレートできます。
無償版QHMモバイルのフォルダ・ファイル構成
無償版QHMモバイルのフォルダ構成は以下の通りです。
(rootはQHMモバイルをインストールしたフォルダを意味しています。実際にrootフォルダがあるわけではありません。)
root
├─attach (画像など添付したファイルが入る)
├─backup (バックアップデータ gz形式)
├─cache (キャシュデータが入る)
├─counter (アクセスカウンタ)
├─diff (更新情報のデータ)
├─image (画像データ)
│ ├─emoji (絵文字の画像)
│ ├─face (顔マークの画像)
│ └─hokuken (北研の画像データ)
├─js (Javscript jQueryも入っている)
├─lib (PHPのライブラリ)
├─plugin (プラグイン ここに新規にプラグインを追加できる)
├─skin (スキンファイル)
│ ├─hokukenmobile (北研のデザインテンプレート)
│ ├─killerpage (キラーページ用テンプレート)
│ ├─killerpage2 (キラーページ2用テンプレート)
│ └─wordpress (WordPress用のテーマ)
├─trackback (トラックバック)
└─wiki (本文などの全データが入る)
スタイル構成
QHMモバイルのスタイル構成は、QHMと比較して非常にシンプルな構成になっています。
#wrapper
#headcopy 1行目のヘッドコピー (H1タグ)
#main 「ヘッダー編集」「編集」「フッター編集」メニューで入力したものが入る。
#fotter "Edit this page" が入る。「フッタ編集」で入力したものではない。
#licence ライセンス表示
プラグイン
利用できるプラグインは、QHMよりも少ないですが、多数揃っています。
工事中
使い方
基本的にはQHMと同じですが、以下の点が異なります。
- SWFUがない。自分で組込ができる人は組み込んでください。同じように利用できます。
PCで表示されてもケータイでも同じように表示されるとは限らないので、なるべく多くの友人、知人に協力してもらって実機で確認することをお奨めします。
FAQ
Q1. main.css を変更してPCで見ると正常に表示されますが、ケータイで見るとまったく反映されません。
- 【考えられる原因】
QHMモバイルが外部スタイルシートに対応していない。main.cssは外部CSSファイルなので、main.cssの内容を取り込むようになっていない。まだ外部スタイルシートをサポートしているケータイが少ないようです。
- 【対策】
HTML内でスタイルをまとめて定義する。または、タグ毎にスタイルを定義する。具体的には、main.cssは変更しないで、以下の画面にCSSを定義する。
QHMモバイル 設定画面 →「サイト情報の設定」→「その他のタグ」
※QHMでは、ナビ2にCSS定義を入れても実現できましたが、QHMモバイルにはナビ2がないのでこの方法は取れません。
- 【記入例】
見出し(H2)の背景を灰色、文字色を白、サイズを大きく したいとき。以下のように記述します。小さい画面になるべく多くの情報が載るように、マージンをゼロまたは小さくします。
<style type="text/css"> h1,h2,h3,h4 { margin:0; padding:0; /*text-align:center;*/ } p { margin:0; padding:0; } ul{ margin:0 0 0 0.5em; padding:0; } ol,li { margin:0 0 0 0.8em; padding:0; } h2{ background-color:gray; color:white; font-size:large; margin: 4px; } h3{ background-color:black; color:white; font-size:mediam; margin: 4px; } </style>
Q2. 特定の文字サイズを変更できますか?
sizeプラグインが使用できます。
例)
&size(large){大きい文字large};
Q3. Google Mapを利用できますか?
Google Mapが表示できないケータイがまだまだ沢山あります。しばらくは利用しないほうが良いと思います。
Q4. Googleのアクセス解析を使用できますか?
工事中
Q5. 半角カタカナは使用した方がよいですか?
通常、半角カタカナはインターネットでは文字化けがおきる原因となるので、使用禁止です。
しかし、ケータイサイトは基本的には限られた日本の環境でしか見られないため、文字化けは発生しません。
小さい画面に多くの情報を載せるために半角カタカナは使用したほうが良いみたいです。
無償版QHMモバイルで作成したサイト
工事中
QHMモバイルでケータイサイトの作り方
QHMでサイトを作成して運用中の方で、無償版QHMモバイルを利用したい人は、以下の方法で簡単にQHMモバイルを利用できます。
北研のQHMモバイルのサイトは以下を参照してください。
- QHMモバイルをダウンロードします。
- QHMのインストールしてあるサイトの下に、新しくフォルダを作成します。
新しくドメインを取得した人は、そこにインストールします。
例)mobile フォルダを作成したときの例
・既存のQHMサイト
http://www.○○○.jp/
・これから作成するモバイルサイト
http://www.○○○.jp/mobile/ - QHMモバイルを /mobile 配下にアップロードします。
- パーミッションの変更を行います。
- ブラウザからアクセスできるか確認します。
http://www.○○○.jp/mobile/ - 表示されたら、ログインしてIDとパスワード変更してから編集開始です。
以下は編集方法について説明です。 - ヘッダ用のロゴを作成して添付メニューからアップロードします。
- ロゴは以下のフォルダに入るので、初期表示のQHMモバイルのロゴと入れ替えます。
- 新規作成でメニュー専用の画面(menu)を作成します。これは、全ての画面の一番下にメニューを表示させるために作成します。
この画面には、横一列に並んだメニューだけを入力します。
例)
[[ホーム>FrontPage]] / [[会社概要]] / [[お問合せ]] - FrontPage画面を編集して、各画面に共通の形を作成します。
- FrontPage画面の一番下で、#includeプラグインによりメニューを取り込み保存します。これが雛形になります。
#include(menu,notitle) - 新しいページを作成するときは、「雛形とするページ」からFrontPageを選択して、「読込」を実行します。
- 新しいページを編集して保存します。同様に各ページを作成します。
- CSSを変更して、体裁を整えます。FAQ Q1にあるように、「QHMモバイル 設定画面」にCSSを指定します。
画面の固定位置に電話番号を表示する方法(スマホ用)
スマホ編で画面の固定位置に電話番号を表示する方法を書きましたが、文字の代わりに画像を使用する方法を説明します。
基本的には方法は同じです。違うのは、文字の代わりに画像を img src= で指定するだけです。
画像を作成して SWFUでアップしてください。そして以下のコードを入れてください。
この例では画像は tel.jpg サイズは、40px * 170px です。 height:を画像の高さに設定してください。
この記事はスマホ編に書くべきですが、すでに文字で電話番号を固定位置に表示しているので、確認のためにQHMモバイルのページを借りてそこに書いています。
【コード】
#beforescript{{ <style type="text/css"> <!-- .fixpos { bottom:0; height:40px; left:0; line-height:0; margin:0; text-align:right; position:fixed; width:100%; } .fixpos a { margin-right:30px; } --> </style> }} #html{{ <div class="fixpos"> <a href="tel:03-123-4567"><img src="swfu/d/tel.jpg" alt="電話はこちらへ"></a> </div> }}
ご意見箱
皆様のご意見をお待ちします。
- 無償版ユーザーにとって、本当にわかりやすいサイトです。モバイルサイトを作りたくて奮闘しているのですが、「QHMのインストールしてあるサイトの下に、新しくフォルダを作成します。 新しくドメインを取得した人は、そこにインストールします。」とありますが、この「サイト」とはサーバーのことでしょうか? -- 高瀬 2012-01-28 (土) 15:11:29
- 高瀬さん サイトとはサーバーのことを言っています。サーバーはOSやWebサーバの種類などによりフォルダの指定方法が異なります。 QHMがインストールしてあるフォルダの下に、モバイル用のフォルダを作成すると言ったつもりでした。 -- tomzo 2012-01-28 (土) 23:27:33
- ナビやメニューが無いのでメニューを毎ページ記述するしかないと思っていたので、menuページの作り方が大変参考になりました。ですが、「サイト情報の設定」→「その他のタグ」にCSSを記述する方法で、h2の文字色(color)がどの色を指定してもグレーにしか表示しません。h3では指定した色で表示します。どうしてでしょうか? -- 林 2012-12-31 (月) 17:20:26