このサイトは古い設計だったので構造にいくつか不満がありました。最大の物がフレーム構造時代を引き継いでいるせいで内容のページ単体からサイト全体のナビゲーションが見えない点。あと携帯・スマホで見ると無残なレイアウト。

その不満を解消すべく、実はガラケー（iモード、CHTML）時代から、JavaScript対応の有無でワンソースのサイトに再構築しようとしてたのだけど、前エントリで書いた通り更新ができなくなって考えてた事が途絶えた上に、時代は巡ってスマホ前提に。大した構造ではないページだけど、JavaScript有効／無効環境での挙動を実験しながら記述し直しってのは、正直なところ専業でもない身にとっては負荷が大きすぎて…。なので、過去の設計思想をバッサリ捨てて、仮レスポンシブデザインに対応してみたのでした。

前提とした設計は以下の通り。
１）あくまでiBlogに書いた内容を基に吐き出されるHTMLと、JavaScript、cssでできる範囲で
２）ワンソース設計＆パブリッシュ以外の労力はゼロに
３）原因は別だったけど、前回のトラブル発生がjQuerry導入絡みのタイミングだったので怖いから極力使わないw

そんな訳でテンプレートファイルとcssを中心に、これまで何度か書いたJavaScriptにも手を入れてえいやっと大改造。今やほとんど現役ユーザが存在しないツールの過去バージョンのために、ほぼフルスクラッチｗ ほとんど趣味w

ヘッダ部分のナビゲーションはテンプレートの意味も含めてJavaScriptで書いて共通化。
カテゴリアイコンなんかは倍の解像度で作ったけれど、それでもボヤけるのが気になる箇所がいくつもあったので、WEBフォントの導入。色々調べてみたけれど、欲しいのが揃ってて扱いも楽な「LigatureSymbols」を採用。
【ウェブ制作やSEOも解決！アイコンWebフォントLigature SymbolsはLINE・はてブも使えるよ】

従来はtableレイアウトだったので、それをcssでレスポンシブ対応可能な設計に。ここまで高度な事はしてないけれど、MdN「現場のプロが教えるWEBデザイン 新・スタンダードテクニック 37」て本が要所要所でとても参考になって良かった。

Viewportはこちらのサイトを参考に。パターン３。
【これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ】

スマホでのカテゴリーの表示をどうしようか悩んでたけど、ページ下部に記述を回り込ませるんだから、メニュー表示したい時はそこに飛べば良いじゃん！と考えて、ページ内リンクを。ぱっと切り替えるよりはスクロールした方が親切かなと思って、「Smooth-Scroll」スクリプトを組み込み。
【スムーススクロールを実装する方法(ページ内をゆっくり移動)】

cssメディアクエリによる切り分けがすげえ便利！
表示の違いやスマホ環境での使い勝手など、諸々ひっくるめて条件分岐による差分だけを書いていくだけで対応できるとは。
【レスポンシブWebデザインのサイトを作るときのMedia Queriesの順番を考えてみた】

VMware Fusion上のSnow Leopard ServerでLAN内向けWEBサーバの運用、ちょっと悩んだ。Twitterで悩みをこぼしたところ、「ルートからその~/Sitesディレクトリまで，読み取りと実行権限が与えられていないディレクトリはありませんか?...ってのが，Apache使ってる時の定番ネタ」とのアドバイスをいただきました。ビンゴ！そのディレクトリだけじゃなくて、そこまでの経路階層を全てパーミッション与えないといけないのね（と言いつつどうにも上手く行かないので、更新とテスト時だけ起動するLAN内限定の仮想環境だからってんで、ボリューム丸ごと必要なパーミッションにしたというオチ）。

ナビゲーションや見出しに装飾的に使ってるのは定番のHelvetica。文章部分の基本フォントはヒラギノ丸ゴだけど、iPhoneで見ると英字がセリフになって入り交じってしまうので、フォントについてはこのページを参考にヒラギノ角ゴも指定。Windowsはメイリオ基本。（→色んな環境で見てみたら丸ゴがつぶれてしまうケースがあったので、結局後日すべて角ゴに統一しました）
【スマートフォンサイトのデザインで使うべきフォント】

最後まで悩んだのが、ページ末尾のフッタがページ先頭あたりまで浮いてきてしまう点。iPhoneで見ると意図した表示になってたのでレスポンシブ対応書式のどこかがおかしいって事に当たりはついたのだけど…。検索しまくっていろんなパターンを試してもどこかで破綻してしまうので、まず要素の高さをかっちり揃えさせよう、という事で「Right Height」スクリプトを組み込み。
【レスポンシブ対応、指定したエリア内だけで高さが異なるパネルを同じ高さに揃えるスクリプト -Right Height】

これでかなり望んだ通りの表示になってくれたんだけど、トップページだけ変な位置に表示される。トレースしてみたら
・ページの読み込み完了
・Right-Heightスクリプトがフッタ位置を計算して表示
・Twitterウィジェットが埋め込み画像を展開、その分表示領域が縦に伸びる
→中途半端な位置にフッタが残ったまま
という流れだったので、Twitterアカウントから［設定＞ウィジェット＞画像を自動的に開く］のチェックを外す
うん、大丈夫になった！

…という訳で、なんとか対応してみた次第。
なんとか想定した通りの見え方をしてて納得行ったのだけど、現時点で
・表示領域のピクセルサイズだけで切り分けてランドスケープ（横長）にすると横幅の極めて狭いPC表示になってしまうので、PC、スマホ縦長以外にも、スマホ横長とタブレットあたりは検証しないとかなあ…

こんな感じ。
まだ過去アーカイブは対応してないけれど、簡単な箇所はとりあえず対応できたはずなので暫定公開。

あと、ナビゲーションだけでなく共有用のSNSリンクを画像じゃなくてWEBフォントにしたい。どうじゃろう…
【主要SNSブランドカラーの値 一覧】
【SNSやWebサービスなどのロゴの色（ブランドカラー）を調べてみた】


↑うーん、表示だけなら上手く行くんだけど、リンクなりスクリプトを動作させようとするとcssが思った通りに機能してくれないなあ。悩ましい。原因もよくわからないので現時点では保留。

あと、依存しきってしまうのは色々と問題あるので、判定プロセスを入れて表示の分岐をしよう…機能別にカスタマイズして使う物らしいけど、そんな便利な「Modernizr」というスクリプトがあったのね！
【使いたい機能の対応ブラウザかどうかの簡単な判別方法】
【様々なブラウザ環境に対応する為のJavaScriptライブラリ「Modernizr」】