サイトリニューアル（残り作業分）

ウェブサイトリニューアルの残り課題が完了しました。やっと雪が積もってきたのに雪山にも行かずひたすら自宅での作業でした。

Meaiawiki のスタイルシートを WordPress にそろえる
印刷用レイアウトの作成
その他後から思いついたこと

Mediawiki のスタイルシートを WordPress にそろえる

リニューアル前でもデザインは統合できてましたが、Mediawiki 1.26 にアップデートしたら仕様が変わったらしく前のスキン（テンプレート）が使えなくなったので、標準スキンを元に再作成しました。Mediawiki とは Wikipedia で使われているソフトです。有名な割にはほとんど情報がなく書籍も非常に少ない。流行らない理由にWiki 固有の記法が分かりにくいとか言いう人もいますが、最近爆発的に流行っている Markdown 記法とたいして変わらないではないですか。といっても今後は流行に乗っかりたいので Markdown エクステンションを入れてます。

Wiki ページ

見た目はブログと同じになりました。作り直したスキンは標準のものに手を入れる形で作っていきました。以下大まかな手順です。

シンプルなテンプレートスキン（今回は MonoBook）をコピー
コピーしたスキンフォルダー内にある "Monobook"、"monobook" と名の付く PHP、json ファイルとファイル内のテキストをオリジナル名（例えば "WINGFIELD", "wingfield"）に変更。
WordPress のテーマディレクトリにある CSS、JavaScript ファイルをコピーしたスキンに配置
スキンフォルダー内の skin.json を開き、ResourceModules 内の styles 内に、コピーした CSS を配置
※skin.json で js のロードもできるようだけどいまいち分からなかったので後述する別の方法でロード
Skin<オリジナル名>.php を開き、function setupSkinUserCss() 内に $out->addmeta()、$out->addScript() を使用してメタタグやスクリプトタグをロード（setupSkinUserCss 関数内で実行するのが最適なのか自信はない）。
WINGFIELDTemplate.php にレイアウト修正を加える。function execute() 関数内に出力する HTML を PHP で記述。このスキンで利用したプロパティや関数は以下です。
- $this->html( 'headelement' )：<DOCTYPE> 宣言から <head></head><body>までが含まれている
- $this->html( 'sitenotice' )：記事を保存した際などに表示されるポップアップ
- $this->text('stylepath')：スキン（/skin/）までの URL
- $this->text('stylename')：現在利用しているスキン名
- $this->data['loggedin'])：ログインしているかどうか
- $this->html( 'bodytext')：本文
- if ( $this->data['catlinks'] ) {$this->html( 'catlinks' );}：カテゴリがあればカテゴリを表示
- $this->renderPortals( $this->data['sidebar'] );：テンプレート下部にある関数の呼び出し
- $validFooterLinks = $this->getFooterLinks( "flat" );：フッターリンクの呼び出し
- echo Html::closeElement( 'body' );：</body> タグの書き出し
- echo Html::closeElement( 'html' );：</html> タグの書き出し
- $this->searchBox()：検索ボックスタグ生成用
- $this->cactions()：表示メニュータグ生成用
- $this->languageBox()：よく分からないので使ってません。
- $this->personaltoolsBox()：ツールタグ生成用
- $this->customBox()：個人用ツールタグ生成用

非常にざっくりですがこんな形です。Mediawiki master サイトにスキン用クラスのヘルプが書かれてるので、興味が出たら深追いしてみます。今回はレイアウトが整う程度で良しとしました。

印刷用レイアウトの作成

「やっぱ紙（地図）やなぁ。」

学生時代、たまに恩師の口から出てきた言葉です。巡検用の調査データを数日徹夜して作成し、調査前の発表会でパソコンが重くて表示されない時に出てくる言葉です。GIS に夢を抱いて頑張っている学生にとどめを刺してくれる言葉です。学生時代、我々は何度かこの言葉に打ちのめされました。

という前置きはさておき、ペーパーレスとかなんだかんだ言っても資料は紙に印刷するとか、PDF 印刷して保存するとかやってる人は多いので、文書の印刷に適したレイアウトで出力されるように調整しました。

印刷レイアウト（調整前）

印刷レイアウト（調整後）

印刷用にレイアウトを変更するには、印刷時だけ読み込まれるスタイルシートを使います。media 属性に "print" をセットします。

<link rel="stylesheet" type="text/css" media="print" href="print.css">

もしくは、1つの CSS ファイルで管理したい場合は media="all" で読み込んで、@media printで指定します。

@media print{
 /*印刷用CSSの定義を指定*/
}

そして、印刷時に表示したくないタグの class や id に "display:none;" をセットします。CSS は後勝ちなので、print.css の読み込みを最後にするか、"display:none !important;" として優先設定します。逆に印刷時にだけ表示したいレイアウトは、既定値を "display:none" としておき、print.css で印刷したいところに "display:inline !important;" 等で上書きします。

/*印刷時のみ非表示*/
.print-none {
 display: none !important;
}

/*印刷時のみ表示*/
.print-only {
 display: inline !important;
}

このサイトではヘッダーのメニュー、サイドバー、ページ下部の関連情報を印刷時に除外しました。あと印刷すると出典が分からなくなりがちなので、本文内に URL を表示しました。アイデンティティのアピールも忘れません。

その他後から思いついたこと

上の 2 つの作業をしながら途中で思いついたことをいくつか。

WordPress や Mediawiki でログインしている場合（自分が閲覧している場合）は、Google Analytics タグを生成しない
Google にログインしているブラウザで見ている場合、自分自身がアクセス数にカウントされるのか不明ですが、とりあえず完全に除外できるようにタグを除外しました。
ヘッダーの検索ボックスを Google カスタム検索に変更
Wordpress のページは WordPress 検索、Wiki ページは Mediawiki 検索にしてましたが、標準エンジンだと半角スペースを空けたような類義語が検索できなかったので、Google 検索に変更しました。サイドバーの検索ボックスでそれぞれの標準機能も使えます。
テーマの追加管理画面でメインビジュアルの最大表示件数を変更できる GUI を追加
Google Chrome と Internet Explorer だとメインビジュアルの動画が自動再生できない問題の仮対処（マウスオーバーで再生開始）
スマホでもメインビジュアルを表示
Mediawiki サイトマップの自動生成
テーブルのヘッダー指定したセルを塗りつぶすよう変更
その他細かいスタイルシートの修正
Google analytics で Google Adsense の広告クリックの通知設定

まとめ

これで仕組みは整いました。

趣味のサイトだからそれでいいんだけど、仕組みを作ることが目的になっていることが毎度の反省です。仕組みはできたので、次は内容を増やす方策を考えます。

自分は情報をまとめる方法として

情報が手には入ったら→ Twitter、はてなブックマーク登録からの Twitter
少しまとめる時間ができたら → ブログ
しっかりまとめる時間ができたら → Wiki

の 3 段構想を目指していますが、3. がまったくできてません。ブログでそこそこまとまってると信じているのが言い訳。

去年は Twitter もブログもほとんどやってなかったので、今年こそはと毎度同じことを宣言します。

サイト リニューアル（残り作業分）

Mediawiki のスタイルシートを WordPress にそろえる

印刷用レイアウトの作成

その他後から思いついたこと

まとめ

WINGFIELD since1981をもっと見る

サイトリニューアル（残り作業分）