2018
Pukiwikiのカスタマイズに至るまでの経緯
このサイトのPukiwikiは、もともとPukiwiki 1.4の頃からCGI版PHP 5.3で動作していたが、スパム対策の一環として編集権限をBASIC認証機能でパスワード制にするため、モジュール版PHP 5.6に変更した。Pukiwiki 1.4.7はPHP 5.6では動作しないため、Pukiwiki 1.5.1を導入した（なお、プラグインをカスタマイズしていない場合はPukiwiki 1.4.7のpluginフォルダとlibフォルダのうちいくつかを1.5.1のもので上書きするだけでも動作するようだが、念のため全て入れ替えすることとした）。
これを機にPukiwiki自体をレスポンシブスタイルシートを用いてスマホ対応させるためにテンプレートに大幅に手をいれることとした。このサイトでは10年ほど前のpukiwiki 1.4の頃からtableタグを用いて3カラム化していたが、このたびスマホ対応するにあたってtableタグではなくdivタグとCSSのfloatを使っての3カラムに変更した。なお、divを使った3カラムは幅の狭いブラウザ（スマホなど）で見た際にレイアウトが崩れるという難点があるが、後述のCSS周りのカスタマイズにより幅980px以下のブラウザでは1カラムに切り替わるため心配は少ない。
サンプルファイル配布
2018年9月時点の当サイトのカスタムスキンをzipファイルで配布する。
具体的なPukiwikiカスタマイズの内容について
.htaccessの編集
.htaccessに AddType application/x-httpd-php .php を記載。
Pukiwikiスキンのカスタマイズ（pukiwiki.skin.php）
- スマホ対応のために<head>内に <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"> を追記。
- 幅の狭いブラウザで見た際にトップページや検索ページに戻りにくいため、最上部にリンクをつけました。将来的にはjavascriptなどを使ったプルダウンメニューに置き換えても良いと思います。
- 現在のインターネットにおいて、サイトのレスポンシブ対応は必須であるため、tableベースのメインページ構造を改めることとした。divで3カラム化し、画面幅が大きいPCなどでは各カラムは横に並び、スマホなどではサイドバーカラムは見せないようにする。左右カラムは幅160pxとし、メインカラムは左右のmarginに180pxを指定した（したがってカラム間に20pxの隙間がある）。
- 3カラムの親ボックスとなる div id=main に CSSで overflow: hidden; を指定
- pukiwiki.skin.php内でカウンターを回すために require_once(PLUGIN_DIR.'counter.inc.php');plugin_counter_convert(); を追記。
- 「パンくずリスト」をタイトル下に表記するために require_once(PLUGIN_DIR . 'topicpath.inc.php'); echo plugin_topicpath_inline(); を追記。
- ヘッダーのタグは必要最小限に絞り、軽量化のために削れるものは削る。
- HTMLのヘッダーはPukiwikiに出力させるのではなくHTMLで直書きする。
- ロゴなどのファイルへのリンクはPHPで設定するのではなくHTMLで直書きする。
- PHPでCSSの文字コードを指定する記述を削除。
- ページタイトルはH1タグとし、リンクしないようにした。
- keitai.skinは全て削除、まらpukiwiki.ini.phpからもkeitai.skinに関する設定項目は全て削除し、ブラウザを問わずdefault.skinを利用するようにした。
- SSL化に対応するため、httpをhttpsに置換した。
CSSまわりのカスタマイズ（pukiwiki.css）
- pukiwiki.skin.phpにPHPでpukiwiki.css.phpを読み込むのではなく、直接pukiwiki.cssを読み込むようにした。pukiwiki.skin.phpのヘッダ内に <link rel="stylesheet" href="./skin/pukiwiki.css" type="text/css" media="screen" /> が挿入されている。
- フォント指定をArial, Helvetica, "sans-serif"とした。
- CSSをPHPから静的ファイルに変更。
- div#mainbar img に max-width:96%;height:auto; を追記。
- レイアウト崩れの原因となるdiv#noteのclear:both;を削除。
- メディアの画面幅に応じて1カラム、2カラム、3カラムを自動切り替え。それに応じてフォント周りの微修正。具体的には760px以下のブラウザは1カラム、960px以上のブラウザは3カラム、その間は2カラムとしている。これにより、iPhoneを含む大部分のスマホで1カラム、iPadは縦持ちで2カラムで横持ちで3カラム、PCはほとんどが3カラムとなる。
- 行間を拡大
- リンクの下線はフルブラウザでは表示せず、モバイルメディアのみで表示
- 小見出しの「↑（トップに戻る）」は不要なので、div.jumpmenu {display: none;}とした。
- そのほか軽量化のために使いそうにない項目をかなり削除
印刷用CSSの設定（print.css）
- 通常のスタイルシートとは区別して、印刷用のスタイルシート（print.css）を設定し、skinフォルダ内に置いている。
- pukiwiki.skin.phpのヘッダに <link rel="stylesheet" href="./skin/print.css" type="text/css" media="print" /> が挿入されている。
- print.cssの中身は概ねスマホなどの1カラム表示と同じであるが、部分的に変更している。
- フォントサイズを80%に縮小している。
- リンクは A{ color: #0000a0; } で下線を表示する。
- div.adsense（Google Adsense）は @media print { div.adsense { display:none; } } で非表示にしている。なお、レスポンシブフォーマット以外のGoogle Adsenseの広告フォーマットの場合は印刷用CSSであってもdisplay:none;で囲うのは規約に触れる可能性があるのでレスポンシブフォーマット以外での利用は勧めない。
ja.lng.phpのカスタマイズ
- 小見出しの「↑（トップに戻る）」は不要なので、<div class="jumpmenu"><a href="#navigator">↑</a></div>を空欄にする。
lib/html.phpのカスタマイズ
- スマホで見たときに編集画面のtextareaが画面から大きくはみ出してしまうために、colsとrowsでtextareaのサイズを指定するのをやめて <textarea name="msg" style="width:94%;height:70vh;font-size:100%" > とした。
- height:70vhは高さが画面の縦の長さの70%ということになるが、vh自体は一部のオールドブラウザで対応していないので、オールドブラウザで編集画面にアクセスする人がいそうな場合は使用しないほうが良い。
- 同様に幅がcolsで指定されたtextareaは、pluginフォルダのarticle.inc.php、insert.inc.php、memo.inc.php、vote.inc.phpにもある。これらも style="width:94%;font-size:100%" とスタイル指定しておくと、スマホ画面からtextareaがはみ出すことが無くなる。
プラグインのカスタマイズ
comment.inc.php
- コメント枠の長さが70字だとスマホ表示の際に横に伸びたテキストボックスが画面表示からはみ出すため、<form>内のテキストボックスを <textarea name="msg" id="_p_comment_comment_{$comment_no}" style="width:96%;font-size:100%" rows="3"/></textarea> に変更。
edit.inc.php
- clear:both;を含むタグがあるために3カラムのレイアウトが崩れるのを防止するために、この clear:both; を削除。
exlink.inc.phpを追加
- 外部リンクでは矢印記号を表記するように変更。
- 具体的にはプラグインで使用するのではなく、プラグインが出力するjavascriptをexlink.inc.jsとしてPukiwikiのフォルダに設置している。これにより、プラグインをいちいち呼び出すことなく全ページで外部リンクへのアイコン表示が可能となる。また./image/external_link.gifも設置する。
- jsファイルをpluginフォルダに置くと、ブラウザ側からpluginフォルダ内にアクセスすることができずに403エラーが出る。pukiwikiルートフォルダなど外部からのアクセスが可能なフォルダ内に設置すること。
- 詳しくはこちら
サイトマップ（sitemap.inc.php）
- sitemapプラグインを導入。左サイドバーにリンクも作成。
- sitemap.inc.phpを開いて、直近1000ページからサイトマップを作成する設定を直近3000ページに変更した。
パンくずリスト（topicpath.inc.php）
詳しい利用法はこちら。pukiwiki.skin.phpに埋め込みで使用する場合は、<?php if ($is_page) { ?><span class="small"><?php require_once(PLUGIN_DIR.'topicpath.inc.php'); echo plugin_topicpath_convert(); ?></span><?php } ?> を埋め込み。
Twitterの引用（tweet_inc.inc.php）
- ツイートをPukiwikiに貼り付けやすくするために導入。詳しくはこちら
PukiwikiのSSL化（https対応）
- サイト全体のSSL化（本サイトはバリューサーバーのSSL機能を利用）。それにともなって、サイト内からサイト外へのリンクも基本的にhttpからhttpsに切り替え。
今後の改修予定
pukiwiki.skin.phpへのcontentsプラグインの埋め込み
- skinファイルへの埋め込みで<div id="menubar"><?php require_once (PLUGIN_DIR . 'contents.inc.php');
echo plugin_contents_convert();?></div> で動作するか検証する。- contentsを埋め込み表記するには若干の工夫が必要。
- contentsプラグインはpukiwiki本体内部で動作する偽装プラグインなので、普通にrequire onceするだけではスキンに埋め込むことができない。こちらのサイトの contentsx.inc.php を利用しようとしたが、おそらくPHPバージョンの違いのために contentsx.inc.php が動作せず断念した。
- （2021年1月追記：その後の検討で、pluginフォルダ内に所定のsonotsフォルダを設置すれば動作することが判明した）
- 同様にnavi.plugin.phpも挿入可能か確認する。
添付ファイル: 
pukiwiki151costomize20180903.zip 768件
[詳細]
更新日：2019-09-05 閲覧数：2260 views.