QHM講座

QHM講座

当サイトでは、QHMの技術的な説明も行います。QHMでこんなこともできるんだとわかっていただけたら幸いです。
QHMの説明の前に、QHMのベースとなっているPukiWikiとQHMの比較を以下に示します。

QHMとPukiWikiとの比較

QHMはPukiWikiの良いところは全部取り入れ、初心者にも利用できるようにユーザに優しい作りになっています。
編集画面もブログみたいに文字装飾などもかんたんにできるようになっています。
通常のQHMユーザはPukiWikiのことなんか知る必要はないと思いますが、プラグインを新しく組み込んでみたい、作成してみたいと考えているユーザは少しはPukiWikiのことも知っておいた方が良いと思います。

 QHM [製品版(有償版)、無償版)PukiWiki
価格有償版:19800円、 無償版:タダ無料
利用対象者ホームページ作成初心者からベテランまで自分で設定ができる人向け。(技術者向け)
利用目的個人または中小企業でのホームページ作成
企業内での情報共有サイト作成
企業内の情報共有サイト作成、複数メンバーでのWiki的な使い方(掲示板みたいに誰でもが書き込める)
技術サポートインストールは北研Clubで無料サポート、それ以外のサポートはプレミアムサポート(有料)なし。個人(Wiki)で解決
インストール有償版:簡単に利用できるインストーラ付き
無償版:インストーラはない。自分でダウンロードして、アクセス権などを設定する。
インストーラはない。自分でダウンロードし、サーバに設定する必要がある。
バージョンアップ有償版:1ヶ月に1回くらいのペースでバージョンアップがある。またバージョンアップを簡単に行うしくみがある。
無償版:有償版より頻度はは低いがバージョンアップがある。自分でダウンロードして入れ替える必要がある。
自己責任で行う必要がある。
マニュアル有償版:詳細なマニュアルが会員サイトにある。動画マニュアルがとても充実している。
無償版:基本的なマニュアルは公開されている。
オンライン上に公開されているが、技術者向けなので一般ユーザにはわかり難いマニュアルである。
プラグイン有償版:多数のプラグインが組み込み済。QHM専用に拡張したものもある。
無償版:基本的なプラグインのみ

PukiWikiのプラグインがそのまま利用できる。2010年3月現在、QHM用の自作プラグインのサイトは見当たらない。
PukiWikiの基本プラグインから自作プラグインまで多数公開されている。ダウンロードして利用できる。
画面デザイン有償版:65種類のデザインが用意
無償版:1種類のデザインのみ
WordPressのデザインも利用可。ただしソースの修正が必要なため敷居が高い。
QHM専用のデザインテンプレートを配布しているサイトがあるのでそれを利用できる。
初期設定のデザインは一般のホームページと比較して硬い作り。スキンを入れ替えればオリジナルナデザインが作成可能。
フォーラムQHMユーザフォーラムが、無償版ユーザにも公開されている。技術的なサポートなどがフォーラム参加者により行われている。PukiWikiのサイト
要望受付北研Clubで要望を受け付けている。内容によっては、すぐに実現された機能などもある。PukiWikiのサイト

QHMの画面構成

QHMは以下の2カラムの6パートで画面を構成しています。

      ヘッダー      
ナビ

メニュー

  コンテンツ  
ナビ2
フッター



現在は、3カラムの7パートも利用できるようになっています。

      ヘッダー      
ナビ

メニュー

  コンテンツ  

メニュー2
ナビ2
フッター


パートページ名全ページ適用説明使えるTips
ヘッダーなし設定画面のみで変更可ヘッダー上にテキストや画像を載せる
ナビSiteNavigatorリストのおまじないでリンク指定jQueryでプルダウンメニュー
メニューMenuBar見出しのおまじないでリンク指定#menuプラグインで他のメニューに変更
コンテンツFrontPage ...など.×いくつでも自由に作成できるメニュー領域を無くして、コンテンツだけを表示
メニュー2MenuBar2見出しのおまじないでリンク指定3カラムのときだけ表示
ナビ2SiteNavigator2テキストでリンクを指定画像を入れる、全ページ共通のCSSを指定
フッターなし設定画面のみで変更可

○:全ページに同じものが表示される
△:基本的には全ページに同じものを表示するが、変更も可能。
×:全て違うものを表示する。

QHMのスタイル構造について

 QHMは以下のようなスタイル構造となっています。これが理解できれば、スタイルシートを変更してデザインにいろんな工夫が可能です。また、jQueryなどの高度なテクニックを使い、レイアウトを変更できます。
 使用するデザインにより少し異なりますので、全てのデザインでこのようになっているわけではありません。

 名前の前に #(シャープ)が付いているものが id、.(ドット)が付いているものがclassです。
 QHMで作成したページのソースファイルをブラウザで見ると、以下のような記述があります。階層化されていますのでそれを図にしたものです。

<div id="headcopy">
 ::::::
</div><!-- END: id:headcopy -->
<div id="wrapper"><!-- ■BEGIN id:wrapper -->
<div id="header">
::::
</div>
</div><!-- □END id:wrapper -->

QHMの基本構成

ご意見箱

皆様のご意見をお待ちします。

  • ページ全体の構成がよくわかりました。 -- 澤 2011-07-12 (火) 17:50:34
  • ページの構成内のおまじないの配置等少し理解できました。 -- 水先案内人 2012-03-16 (金) 08:22:43

認証コード(8613)

当ページは役に立ちましたか?

選択肢 投票
たいへん役に立った 82  
ちょっとだけ役に立った 5  
普通 1  
あんまり 1