haik講座
Webサイトを見るために使うデバイスが、パソコンからスマホなどのモバイル製品へ大きくシフトしてきました。これによりパソコンの画面専用のサイトでは、スマホなどから訪れた訪問者は、スマホ対応していなため直ぐに他のサイトへ移動してしまう傾向があるようです。
そこで、スマホでもパソコンでもデバイスに最適な表示を自動で行い、ストレスのないWebブラウジングを可能とする解決手段としてレスポンシブWebデザインがあります。
haikはレスポンシブWebデザインに対応し、かつWiki書式を使用してWebサイトを作成するとても使いやすいツールです。しかも無料で提供されています。
haikはPukiWikiがベースとなっており、それにCSSフレームワークであるBootstrapを導入することにより、レスポンシブWebデザインを実現しています。
haikとQHMの比較
| haik (QHM V6) | QHM | |
|---|---|---|
| 本体価格 | 無料 | 19,000円(無料版もあり) |
| デザイン | 1つ無料版が付属 | 本体に67種以上が付属 |
| デザイン販売 | 有料版あり | 有料版あり |
| スマホ対応 | 対応済(レスポンシブWebデザイン) | 簡易的に対応 |
| HTML | HTML5 + CSS3 | V4までXHTML 1.0 Transitional V5あたりからHTML5になった。 |
| インストール | インストール用の１ファイルをダウンロードしてそれをインストール先のサーバに設定してインストール | インストール用のサーバに接続してインストーラを起動 |
| マニュアル | 詳細なマニュアルあり | 詳細なマニュアルあり(QHM V5) |
| 管理会社 | QHMの開発元である(株)北摂情報学研究所から(株)リンクアップパートナーズへ引き継ぐ予定でしたが、別のところへ引継ぎを行っている最中です。(2016.9.22現在) | (株)北摂情報学研究所。現在は、サポートを行っていません。 |
haikの画面構成
無料のテーマ(haik_seed)の画面は以下のように5パートで構成しています。
各パートはページまたはその他の項目で構成されます。たとえばメニューもひとつのページの機能を持っています。そのため、あるページにメニュー項目を記述しておいて includeすることでメニューを作成することも可能です。
パソコンで閲覧した場合
| ナビ | |
| アイキャッチ | |
コンテンツ | メニュー |
| フッター | |
スマホで閲覧した場合
| ナビ | |
| アイキャッチ | |
コンテンツ | |
メニュー | |
| フッター |
| パート | ページ名 | 説明 |
|---|---|---|
| ナビ | SiteNavigator | パソコンのとき横並びのナビがスマホの時はMENUアイコンに変化する |
| アイキャッチ | なし | 目立つ画像を載せる。テキストも載せる |
| メニュー | MenuBar | 見出しのおまじないでリンク指定 |
| コンテンツ | FrontPage ...など. | いくつでも自由に作成できる |
| フッター | なし | 全ページに共通のフッターを作成する。QHMにあったナビ２はhaikではフッターに統合された。 |