目次Webサイトをスマートフォン対応にするDokuWikiに組み込むには方針conf/userscript.js結論Webサイトをスマートフォン対応にするAndoid向けのアプリケーション開発を始めたものの、自社サイトがスマートフォン対応してないのも格好がつきません。いって、PCとスマートフォンのアウトプットを出しわけするのも、DokuWikiではなかなか難しいようです。スマートフォンといってもまっとうなフルブラウザを持っています。CSSやJavaScriptもPCのそれと遜色ありません。違うのは画面の大きさだけと言ってもいいでしょう。JavaScriptでレイアウトを書き換えるようにしてしまえば良いのではないか?そういう発想でちょこちょことやってみたら、案外簡単で効果的な結果が得られることがわかりました。標準のスクリプトに追加したい内容がある場合、このファイルを作成しておけばDokuWikiにより自動的に読み込まれるようになっています。ウインドウサイズを判定して、レイアウトを組み替えるスクリプトを記述します。スマートフォンではviewportをきちんと指定していないと、勝手に仮想的な画面サイズを広げてしまうので、ヘッダ領域に追加しておきます。この記述はPCには影響しないと思います。/>方針ウインドウ幅によってページを組み替えるUser-Agentの値を見て処理をするのがよくある手法ですが、ここではUser-Agentを使わず、ウインドウの幅を基準にページの組み換えをすることにします。これによって、PCのブラウザでもウインドウを小さくしたときに上手く表示できるようになります。左右のサイドバーの部分は最後に持っていく左右のサイドバーに表示されるのはナビゲーションや追加的な情報なので、本文の後に表示されるようにします。いうのが携帯サイトでの常道のようです。大きな画像も画面に収まるように縮小することも考えたのですが、小さすぎて見えなくなっては元も子もありません。タップしたら拡大ということもやってみましたが、スクロールするときについつい画像をタップしてしまい、大変に邪魔くさいことになってしまいました。サイズはそのままにして、左右にスクロールさせて見られるようにしました。preタグに囲まれた領域プログラムコードの記述にpreを多用しています。これは途中で改行しないため、ほとんどの場合はみだしてしまって右側を見ることができません。そこで、画像と同様に左右スクロールするようにしました。大きなテーブル画像と同様に左右スクロールするのが良さそうですが、本サイトではさほど幅の広いテーブルは使ってないので、今回は対応しないことにします。conf/userscript.js//ページ読み込み完了後に動くように、DokuWikiのaddInitEvent()関数を使って呼び出すようにする。//mainカラムの中身を全部先頭に出す。小一時間ほどの少ない手間で、PC向けWebサイトをスマートフォンに対応させることができた。この方法は、よほどデザインの凝ったサイトでなければかなり有効である。いって、レイアウトの組み換えはサイト単位に個別に実装する必要があり、スクリプトを汎用化させるのは難しい。スマートフォン対応していない各サイトも同様のスクリプトを組み込んで欲しい。