2015.1.3
新システム解説②
前回の続きです。
まず、今回のリニューアルにしたがって旅行レポートもリニューアルします。
※システムだけ作って、細かいデザインは未完成です。
基盤は通常の記事と一緒ですが、左メニューでインラインフレームを使う必要がないのでフレームに見せかけたブロック要素に変更しています。
スマホ対応は、より簡単なこちらから行う予定です。
もちろん、HTML5対応で書いています。リキッドレイアウトも実装済みです
あと各レポートのデザインを可変にしました。よく目をこらして戴ければわかるかと思いますが、今回の旅行レポートは茶色メインのデザインに変更しています。
ほんとはもーちょっとシャレたものにしようかと思ったのですが、いいものが思いつかず、また僕の技術も至らないのでとりあえず色だけ変えてます。まぁ細かいことを言えばもっと色々変わってるんですけどね。
そして画像のサイズを縮小することにしました。今までの原寸大の画像サイズで掲載していたのですが、CSSで縮小させて表示させています。
これでちょっとは読みやすくなったんじゃないかなーと思います。
また、日記の横幅が小さくなると、それに合わせて画像も小さくなります。レイアウト崩れの心配はありません(｀･ω･´)
もちろん、あくまでも未来の自分が読み返す為の日記なので、原寸大の画像は、ファイルを直接開くことで閲覧できます。
見た目的な変更はこのぐらいなのですがより手を抜いて管理できるように新しいレポートを追加した際のリンクの張り替えや、上下のNEXT,PREVバーのリンクも自動で張り替えてもらうようにコーディングしてみました。
$files = scandir('../');
$i=0;
$r_next=0;
$r_prev=0;
while(true){
if($files[$i]=="${y}_${m}_${d1}_${d2}"){
if(array_key_exists($i+1,$files)){
$r_next=$files[$i+1];
}
if(!$files[$i]="2014_12_25_29"){
$r_prev=$files[$i-1];
}
break;
}
$i++;
}
いままで日記と旅行レポートは一緒の階層に放り込んでいたのですが、今回のリニューアルでフォルダを分けました。
ファイル名を辞書的につけているので、フォルダ全体を検索して昇順に並び替えたものを$filesという配列に格納すれば、後はそれを無限ループで回せば次にフォルダが存在するかしないかが分かります。
こうすることで、次の旅行レポートを置いたら勝手にリンクが貼られます。これはとても便利！！（笑）
ページビューに関しても、通常の日記と同様に、次のファイルが存在していたらNEXTリンクを貼り、存在していなかったらリンクを貼らない、ということをしています。
目次に関しても全部プログラムでタグ生成しているので、前回のレポートのようにリンク切れが発生することはありません。全部プログラムがやってくれます。（笑）
というように、よりラクに更新できるようにプログラムを組んでみました。僕がやるのはデザインのみです。
せっかく別のページで用意しているんですし、その旅行に合ったデザインを用意することで、もうちょっと雰囲気を作ろうかなと思っています。そのうち背景画像とかちょこん、って置こうかなーと思っています。
今回はあまり見た目は色ぐらいしか変わってないんですが、そのうちもーちょっと変えられるようになりたいなーと思っています。あとは画像編集技術と色彩感覚があればいくらでも変えられるようにはなってます。（笑）
今回のリニューアルで、結構CSSに関しては学習できたので、今後のwebページ開発にも応用できたらなぁと思っております。
とりあえず1月中には自前の掲示板システムとか作れたらなぁーとか思ってます。
ただ、その前にコメントフォームを自前で作る必要もあるかも知れませんね･･････。どうやら環境によっては文字化けを起こすようで。僕の環境ではちゃんと動いてるんですけどね･･････。
あとフッターもバグったら困るのでひとまず消してしまったので、また後で付け直そうかなぁと。
ついでに、一般的なブログのようなコメント欄も設けた方がいいのではと考えたりしています。これはjavascript使って実装するんだろうか。別ページに飛ばした方がいいような気もするが･･････。
1年後くらいには今使ってる全てのページを書き換えようかなと思っています。音楽素材ページや写真素材ページなど。これらにも自動更新システムを実装しようかと。
やはりラクができるのはよいことですからね。頑張ります。（笑）
<<コメントお返事>>
>>文字化けの方
あけましておめでとうございます。今年も宜しくお願い致します。
確かに文字化けしていますね･･････。一部分だけ文字化けしているってどういうことなんでしょうね･･････。僕の環境ではちゃんと動作しているし、使ってる全てのファイルの文字コードは統一しているのでブラウザの問題かも知れませんね。
とりあえずformにaccept-charset属性を付け加えて誤魔化してみますが、これでも上手く行かないのなら早いとこプログラムを自前で組むしかないですね･･････。
解決法は色々あるのですが、人の書いたPerlのプログラムなんで、ちょっと手を加えづらいんですよね･･････。Perlとか触ったことないですし･･････厳しいですね。(-ω-｀;)