---

新デザインに移行して1日が経ちましたが、どうでしょうか皆さん。
個人的には「ちょっとシャレオツな感じ」を目指したつもりなんですけど（笑）

とりあえず日記含め、後から改変しやすいように設計したので、今後の運用がとてもラクになりました。





例えば、今日の日記の記事ファイルはこうなっております。赤文字のところがphpで、それ以外はHTMLの記述ですね。
このファイルが読み込まれていた時isset($u_h)がtrueなら関数の読み込みをカットして記事本文まで飛ぶという使い方をしています。 記事の編集がしやすいように改行とかも消してしまって非常に見づらいコードになっていますが、よく見るとif文の括弧がdiary_start直前まで閉じられていないというのが分かるかと思います。

これにより、$u_hがセットされていた場合はHTML宣言とか無視することができます。phpの条件分岐は、phpの記述外にも及ぶんですよね。
正確にいうと、phpで条件分岐した場合、該当の箇所まで読み飛ばすという特性があり、今回の場合は$issetがtrueならば、$include_checkに値を代入した後、括弧が閉じるdiary_start直前まで読み飛ばすという動作をしています。
今回のシステムの実装は、このphpの特性を大いに活用しています。




トップページに記事をコピペする関数はこんな感じになっています。事前に表示する日を計算しているので、計算結果が格納された配列を参照してincludeするだけでいいです。0_index.phpというのは目次です。月が変わったら目次の内容も変わるので、逐一includeすることで変数自体を上書きしてしまいます。動くはずですが動かないかも知れません。
単にincludeするだけだったらHTML宣言とか二重にされてしまうという問題があるのですが、そういった問題は条件分岐でクリアできます。


で、$u_hってのは何なのかという話ですね。これは、今までトップページと日記ページの階層の差をbaseタグというのを用いて誤魔化していたのですが、これはIEだと機能しないという致命的な欠陥がありました。
そこで、baseタグと同等の機能を実現する手段として、URLの頭に変数をつけることで、読み出す位置によって相対パスが可変になるようにしました。
絶対パスを使うのが一番ラクなんですが、今後移転しないとは言い切れないので･･････。独自ドメインの更新忘れとかありそうですしね。

トップページから読み出す場合はそのまま、日記の記事から読み出す場合は階層をいくつか上げる、というのが、変数を使えば可能になります。


実は、最初は正規表現によりファイルの一部分だけ抜き出すという方法でチャレンジしてみたのですが、上手いこと動作しなかったので、よりラクに実装できるincludeを使うことにしました。
あと、実は新しいシステムでは文字コードがShift_JISからUTF-8に変わっているんですが、これはこの正規表現に躓いた時に変更したものです。どうやらShift_JISだと正規表現の関数が上手く動かないようなので･･････。そもそもphpを使うのだったらUTF-8を使う方が安定なので、UTF-8に全て変換しています。
その関係でコメントフォームが変な動作をしているみたいですが、何故かは分かりません。一応僕の環境でテストしたらちゃんと動いてるんですけどね･･････。春休み辺りに自前でコメントフォーム作ろうかとは考えています。あれぐらいなら余裕で作れるので。（笑）



あと、日記ページですね。見ても分からないと思いますが、フレームを用いて実装していたものをインラインフレームに取り替えました。
また、その関係でURLが逐一変わるのを利用し現在見ているページが分かるようにしました。

デザインは旧式日記の流用なのでアレなんですが、そのうちサイズが固定されるように弄りたいなと思っています。ファイルは全て共通している(というより、phpの関数でタグを生成している)ので、後からいくらでも改変が効きます。とりあえずひな形だけ作って後で弄れるように設計したので。


そしてなんといってもリキッドレイアウトに対応しました。
ヒマな方はトップページや日記ページでウィンドウのサイズを大きくしたり小さくしたりして遊んでみてください。日記の記事がそれに付随してサイズが変わります。
ただ、あんまり小さくなりすぎると逆に読みづらくなると思うので、日記の場合は横幅400pxを下限にしています。


あ、そうそう。昨日の日記でFirefoxだけ上手く動かない･･････なんて話をしましたが、あれをどうやって解決したのかというとvhという単位を使うことで解決しました。
親要素のheightが何故か継承されない(バグ？)のでパーセント指定が使えなかったのですが、画面全体のサイズとの比率を示すvh(Viweport Height)という単位を使うことで解決しました。
といっても、わりと新しい要素なのでもしかしたら古いブラウザだと機能してないのかも知れませんが、時代は移り変わりに期待して切り捨てることにします。もうこれで精一杯です。（笑）


あと、スマホには文字サイズを自動補正するという機能があるんですが、この機能があると日記の文字サイズが大きくなりすぎてバランスが悪すぎるので、CSSの-webkit-text-size-adjustプロパティを使うことで自動補正を無効化しています。現段階では基本的には拡大して読んでもらいます。(そのうちスマホ用のデザインを用意する予定です。)
ただ、これだけだとAndroidでは無効化されるようなので、ViewPortのscale指定をすることでクリアします。具体的にはこちらの記事を参照して下さい。



ということで、成果報告というか、新しいシステムがどのようにできているのか軽く解説してみました。
ただ他にも話したいことはいくつかあるので、明日の日記にて続きを書こうかと思います。