HOME / コンピュータTips / WikiPlus / デザインをコンバートする

Date: 2010/09/03 |  このエントリーをはてなブックマークに追加  |  Tags: WikiPlus, デザインコンバート

自作デザインをWikiPlus対応にするチュートリアル

このドキュメントは最新のものが、デベロッパーサイトに転載されています。

デザインの準備

WikiPlusはシステムを利用しながらもデザイン自由度が高く、様々なシチュエーションで満足のいくデザインを当てはめることが出来ます。

しかし、システムでコンテンツ管理をする以上、「1つのデザインに複数のページを当てはめる」必要があります。

このために、動的に切り替わる部分(概念的には下記)を意識する必要があります。

  • コンテンツボディ
  • メニューバー(あってもなくても良い)

これらのデザインの形は、一般的なWEBサイトで考慮されるものと同じで、グローバルナビゲーションが存在するWEBサイトと同じです。

Dreamweaver等を利用している場合は、テンプレートと同じ考え方だと思えばよいでしょう。

デザインを自分で作れない場合は、下記のサイトなどで公開されているデザインがあります。

  • http://www.opendesigns.org/

このような公開されているデザインを利用する場合は、ライセンスの確認は必須です。利用する用途に応じて、お金を払う必要があったり、コピーライト表記が必須であったりする場合もあるため、この部分は各自でチェックする必要があります。

ディレクトリ構造の変更

デザインをWikiPlusサーバにインストールするために、ルールが1つあります。

  • 外部参照((htmlファイルからブラウザ経由で呼び出されるファイルのこと))ファイルのリンクはhtml/以下におかなくてはならない。

このために、いくつかの考慮が必要です。

ファイルの移動

外部参照型ファイルには次のものがあります。

  • イメージ ファイル(<IMGタグで外部参照)
  • cssファイル(<link href="html/css"・・・タグで外部参照)
  • scripts(<script language="JavaScript"・・・タグで外部参照)
  • インラインフレーム(<IFRAME・・・タグで外部参照)
  • 等。

これらは、すべて

  • html/images
  • html/css
  • html/scripts

のディレクトリに移動しなくてはなりません。

また、直下にファイルは直接参照できないので、これらもhtml以下に移動が必要です。

最終的には、直下のディレクトリが、

  • index.html(後でbase.design.htmlにリネームされますが・・・)
  • html(ディレクトリ)

のみになるようにしなくてはなりません

''例'

元の場所移動場所
css/html/css/
js/html/js/
images/html/images/
iframe.htmlhtml/iframe.html
title.swfhtml/title.swf

ファイル移動に関するパスの修正

そのままではindex.htmlが崩れてしまっているので、index.htmlを開き、パスを修正します。

※Dreamweaver等のデザインツールで上記の移動を行った場合は、自動で行うために、このパスの修正が必要ない場合もあります。

エディタなどで編集している場合は、移動したファイルを検索し、パスを変更します。置換などを利用すると良いでしょう。

''例'

元ファイル移行先
style.csshtml/style.css
images/html/images/
js/htmlhtml/js/

cssファイル内にも、ファイルパスが設定されているので注意しなくてはなりませんが、cssの相対ファイル対象は、そのcssからの相対であるため、該当のcssファイルと、cssファイルからの外部参照ファイルとの関係が維持できている場合、ディレクトリ関係を操作しなければ、そのまま動作します。

日本語コーデックについて

デザインファイルの日本語コーデックは、WikiPlus1.2系ではEUC_JP、WikiPlus1.3系以降ではUTF-8である必要があります。

Dreamweaverなどの古いバージョン(MX等)では、EUC_JPを利用すると文字化けを起こすことがあります。

  • HTMLのメタタグは自動的にシステムが挿入するため、入れてはいけません。
  • CSSの場合、先頭に下記のタグをいれてください。
@charset "EUC-JP";

以上の状態で、index.htmlを開き、きちんとしたデザインになることは確認しておいてください。

デザインファイルの編集

実際にWikiPlusに組み込むための編集を行います。

index.htmlファイルを元に、base.design.htmlというファイルにコピーします。

そして以下の変数群をbase.design.htmlに入れ、自動的にページのデザインになるようにします。

変数に関しては、dev.wikiplus.jpのドキュメントを参考にしてください。

とりあえず入れる変数

<head>タグ内に入れる変数

まずは<head>タグのエリアに、下記の変数を入れます(1.2.4以降)。

{$headers}

[headersは存在しません]には、WikiPlus下記の変数内容をすべて含んでいます。

変数名内容
{[metaは存在しません]_content_type}コンテンツ・タイプ。
{[metaは存在しません]_robots}検索エンジン巡回の可否。管理ツールから変更できる。
{[javascriptは存在しません]WikiPlusが用意するjavascriptタグ
{[headは存在しません]_tag}WikiPlusのプラグインが必要とするヘッドタグ

ほとんどのケースでは、{[headersは存在しません]のみを記載するだけで問題ありませんが、どうしてもデザインによって、個別に宣言する必要がある場合は、個別に記載してください。

※1.2.3以前のバージョンのWikiPlusでは、これらをすべて記載する必要があります。

本文用変数 {[bodyは存在しません]

Wiki本文が入るエリア

{$body}

メニュー用変数 {[menuは存在しません]

メニュー領域(MenuBar)が入るエリア

{$menu}

ツールバー、ナビゲーションバーの配置

ツールバー、ナビゲーションバーは、編集可能モード(公開用URLでは設定次第、編集用URLでは必ず)必要になるものです。

下記のものが必要です。

  • アイコンが並ぶツールバーは{[toolbarは存在しません]として配置する。
  • テキストベースのボタンが並ぶナビゲーションバーには{[navigaterbarは存在しません]を設置する。

※この変数は、WikiPlus1.3以降は必要が無くなります。

状況に合わせて入れた方がよい変数

サイトタイトル用変数 {[pageは存在しません]_title}

コントロールパネルのオプション設定-サイト名に連動します。

変更場所の例

  • <title>
  • サイト名としての<h1>など

サイト名はイメージファイルで直接作ることが多いのですが、<title>タグの中は文字列が必要になることがあるでしょう。

ページ名 {[titleは存在しません]

現在表示中のページ名。

変更場所例

  • <title>タグの中
    • たとえば、下記のようにすると、サイト名 - ページ名という表現をする。
    • <title>{[pageは存在しません]_title} - {[titleは存在しません]</title>

ぱんくず(トピック・パス) {[topicは存在しません]_path}

ぱんくず(トピック・パス)を指定する変数。

トピックパスは、ページ名を/で割った階層構造にすることで、利用することができます。

変更箇所例

  • {[bodyは存在しません]を配置した上など。

削除する項目

いくつかの項目は、デザインHTMLファイルから削除しなくてはなりません。

DOCTYPE指定

DreamweaverなどでHTMLファイルを作成すると、XMLのDTD表記が付加されます。

これは消去し、同様のものをWikiPlusの管理ツール-DTD選択から選ぶ必要があります((この選択をすることで各種プラグインも、自動的にDTDにあったものを出力します))。

削除する例(概ね1行目です)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

METAタグ中のContents Type

<META CONTENTS〜で始まるものは消去する。

  • {[headersは存在しません]、もしくは{[metaは存在しません]_content_type}により自動的に付記されるため。

別個、付記したほうが良いもの

たとえば、下記のものを付記しておくことで、自動的にRSSを追加します。

<link rel="alternate" type="application/rss+xml" title="RSS" href="{$link.rss}" />

これは、{[headersは存在しません]では自動的に付記されません。

たとえばニュース/以下のものだけをRSS配信にしたい場合は、

<link rel="alternate" type="application/rss+xml" title="RSS" href="{$link.rss}&regex=^ニュース" />

と記載します。

jrssのドキュメントを参照してください。


以上で、WikiPlusを利用したサイトへ、デザインを適用することが可能になります。

WikiPlus契約の開発会社用FTPアクセス権でFTPサーバに接続し、下記のものをwikitemplate/ディレクトリ以下にアップロードしてください。

  • base.design.html
  • html/ディレクトリ以下

エラー回避

全く何も出なくなってしまった時

デザインのアップロード直後に全く画面が出なくなってしまった場合、エラーが出ている可能性があります。

その場合は

''エラーログ表示(開発会社専用URL)'

https://収容サーバ名/~ユーザID/logwatch.php

にアクセスし、エラーログをみてください。

謎エラー

下記のようなスタイルシートの宣言があると、Smartyでエラーが出ます。

<!--[if lt IE 7]>
<style type="text/css" media="screen">
#menuh{float:none;}
body{behavior:url(csshover.htc); font-size:75%;}
#menuh ul li{float:left; width: 100%;}
#menuh a{height:1%;font:normal 1em/1.6em "Trebuchet MS", helvetica, arial, sans-serif;}
</style>
<![endif]-->

次のようなエラーです。

[client 61.197.171.162] PHP Fatal error:  Smarty error: [in
base.design.html line 28]: syntax error: unrecognized tag: float:none;
(Smarty_Compiler.class.php, line 436) in
/home/www/kohju.justplayer.com/wikisettings/smarty/libs/Smarty.class.php
on line 1090

どうどう対応すべきかは、現在の課題です。

CSSの追加

Wikiコンテンツ内のデザインはCSSで行う必要があります。

利用するデザインがCSSで、ある程度の体系化されたデザインであれば、およそそのまま表示することができます。

しかし、そうでない場合は、いくつかのcssを追加しなくてはなりません。

私が選んだデザインは、h2〜h4の扱いが無かったので、それっぽいデザインを入れてみました。h2〜h4の関係は次の通りです

HTMLタグWiki書式意味
h2*見出しレベル1
h3**見出しレベル2
h4***見出しレベル3

次のようにしてみました。

/* --- TITLE * -------------------------------------------------------- */
h2 {
	font-size: 160%;
	font-family: "A-OTF 新ゴ Pro M","メイリオ",verdana, arial, helvetica, Sans-Serif,"MS ゴシック";
	color:#fff;
	background-color:#6E6A5A;
	padding:.1em;
	border:0px;
	margin:0px 0px .5em 0px;
	font-weight: bold;
}

/* --- TITLE ** -------------------------------------------------------- */
h3 {
	font-size: 120%;
	font-family: "A-OTF 新ゴ Pro M","メイリオ",verdana, arial, helvetica, Sans-Serif,"MS ゴシック";
	border-left:   10px solid #404040;

	color:#fff;
	background-color:#6E6A5A;
	padding:.3em;
	margin:0px 0px .5em 0px;
	font-weight: bold;
}

/* --- TITLE *** -------------------------------------------------------- */
h4 {
	font-size: 100%;
	font-family: "A-OTF 新ゴ Pro M","メイリオ",verdana, arial, helvetica, Sans-Serif,"MS ゴシック";
	border-left:   18px solid #404040;

	color:inherit;
	background:transparent;
	padding:.3em;
	margin:0px 0px .5em 0px;
	font-weight: bold;
}

また、左に置いたメニューバーなどは、若干小さくなくてはいけません。たまたま、このデザインではメニューバーのエリアをleftnaviという<div>タグで囲っていたため、div#leftnavのスタイルを縮小気味にしてみました。

MenuBarのスタイル

<div id="leftnav">
{$menu}
</div>

これにあわせたCSS

/* --- MENU BAR AREA-------------------------------------------------------- */

div#leftnav {
	width: 180px;
	padding: 0px;
	margin: 0px 0px 10px 0px;
	word-break: break-all;
	font-size:80%;
	overflow:hidden;
	word-break: break-all ;
}

div#leftnav ul {
	margin:0px 0px 0px .9em;
	padding:0px 0px 0px .9em;
}

div#leftnav ul li { line-height:150%; }

コンピュータTips/WikiPlus

Recent Updates

ディスクの不良を確認する(iostat -EnのError等)

ディスク関係のスタックをざっくり書くと次の様になっています 例、SAS Expanderを使う場合、 例、AHCIなどを使う場合、 これらのエラーは、次の様なコマンドで知ることができます。 出力結果例 このなかで、 たとえば、SATAディスクを利用している際に負荷が上がってしまい、ディスクの応答が間に合わないシチュエーションでは、Transport Errorが一気に …
»続きを読む

2017年、新年明けまして、おめでとうございます。

日記/2017年、新年明けまして、おめでとうございます。

新年明けまして、おめでとうございます。今年もよろしくお願いします。 昨年中は、皆様にお世話になりました。 昨年は、コツコツと3年程前から行ってきた改革がある程度完成された年で、この先5年、10年を見据えて、次のフェーズへと進む為の土台が完成した年でもありました。 それにキャッチアップする形で、個々の従業員一同が、役割を自覚し、明確に動けた年であったかと考えています。 …
»続きを読む

RSA鍵認証のみにし、Password認証を無効化する

意外に覚えきれなくて、いつも忘れるので、メモついでに残しておきます。 古いOpenSSHや、SunSSHの場合は、これも無効にします。 ユーザ目線でのザックリとした説明を。OpenSSHではなく別のSSH実装も含めて考えているので、OpenSSHのソースをじっくり読んだわけではないため、間違ってたらすみません。 まず、Password認証を無効にする場合、 PasswordAut …
»続きを読む

Nexus7 2013をMarshmallow(Android 6.0)化

OTAでない方法で。 だいたい ここに書いてある方法 なんだけど、adbなどが一式使えている状態で。 まずは自分の機種のものをダウンロードする。僕のは、 Android 6.0 Marshmallow for Nexus 7 2013 Wi-Fi 。tgzを展開し、zipも解いておく。 まずはboot loaderへ。 bootloader自体のアップデート。一式、updat …
»続きを読む

OS X 10.11 El Capitanで、phpのモジュールインストール

Yosemiteからのアップデートは割と簡単です。なぜならYosemite時に、すでにapache 2.4になり、php 5.5になっているから(笑 アップデート前に、まずはphp.iniとhttpd.confをバックアップしておきましょう きになるなら、hostsとかapache以下全てをバックアップしておいてもいいかも。 後はEl Capitanにアップデートする。 アッ …
»続きを読む

EasyAcc Powerbank PB4000CB

スマフォTips/モバイルバッテリー/モバイルバッテリー製品レビュー/EasyAcc Powerbank PB4000CB

薄型のモバイルバッテリーEasyAcc Powerbank PB4000CBです。 今や、モバイルバッテリーは大型のものが好まれるのか、隙間無く商品があります。20,000mAh越えで、「でけえ!」とか言ってますけど、大きいのを探せば、100Wh(27,000mAh)、200Wh当たり前、探せば500Wh(135,000mAh)とか、もっともっとあるのです。用途がどんどん異なっていくので …
»続きを読む

EC Technology Sports Headsets S10-JWH07B

デバイスTips/Bluetooth/EC Technology Sports Headsets S10-JWH07B

Bluetoothのスポーツヘッドセット、 S10-JWH07B について。 今までブログに記載することはなかったのですが、実は割とBluetoothと言うか無線型のヘッドフォンを沢山持っています。赤外線や独自物、Bluetoothなどいくつもストックを持っていたりします。普通の人からするとマニアです。でも、マニアからみるとそうでもないレベルです。 ただ「ヘッドフォンの音質」というの …
»続きを読む

静岡県内をVPNでつなぐ(割と特殊な例)

静岡というのはある意味特殊な土地で、ほとんどのインターネットプロバイダのPOIは静岡でつながれておらず、NTT西圏内のどこかで繋がっているので、大抵大阪折り返しになる。仮に静岡県内にPOIがあっても、だいたい静岡でルーティングしてないので、やっぱり東京折り返しになってたりする。例え 同じプロバイダを使っていたとしても 。 だから静岡←→静岡のVPNは、静岡←→東京や、静岡←→大阪よりも遅 …
»続きを読む

最新  |  << 前ページ  |  次ページ >>  |  最初