The GIS Professional Group

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

2016/1/25 (月)

完全版を表示する

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

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

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

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

Wiki ページ

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

  1. シンプルなテンプレート スキン（今回は MonoBook）をコピー
  2. コピーしたスキン フォルダー内にある "Monobook"、"monobook" と名の付く PHP、json ファイルとファイル内のテキストをオリジナル名（例えば "WINGFIELD", "wingfield"）に変更。
  3. WordPress のテーマ ディレクトリにある CSS、JavaScript ファイルをコピーしたスキンに配置
  4. スキン フォルダー内の skin.json を開き、ResourceModules 内の styles 内に、コピーした CSS を配置
    ※skin.json で js のロードもできるようだけどいまいち分からなかったので後述する別の方法でロード
  5. Skin<オリジナル名>.php を開き、function setupSkinUserCss() 内に $out->addmeta()、$out->addScript() を使用してメタ タグやスクリプト タグをロード（setupSkinUserCss 関数内で実行するのが最適なのか自信はない）。
  6. 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" をセットします。

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

 

そして、印刷時に表示したくないタグの class や id に "display:none;" をセットします。CSS は後勝ちなので、print.css の読み込みを最後にするか、"display:none !important;" として優先設定します。逆に印刷時にだけ表示したいレイアウトは、既定値を "display:none" としておき、print.css で印刷したいところに "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 もブログもほとんどやってなかったので、今年こそはと毎度同じことを宣言します。

 

  • B!