和田憲幸のブログ

Youtube Movie

詳細は上記動画で。まぁ何をやってるかよくわからないと思うので説明を。

MobilePageSelectorの実装について

例えばWebサイト内でページ内にグローバルではないナビゲーションが存在する場合がありますよね。indexなども含めて。それらはPCサイトであれば横に並べる事ができますが、モバイルサイトの場合は横に並べると占有スペースがハンパではないためいろいろ邪魔臭い。

そういった場合に、navを再構築してselectタグにしちゃおうというのがこの機能です。class名がPageSelectorという名称の中に入っているaタグを抽出してそれをselect化します。んでonchangeでジャンプするというよくあるアレですね。ユーザビリティ的にはかなり良いんじゃないかなと。

同様のメソッドで例えばパンくずリンクなどのツリー構造をselectorに変化させることもできます。モバイルでは気兼ねなくgetElementByClassNameを利用できるのでありがたい話ですね。

ひとつのソースで無限の可能性

私がレスポンシブWebを好きなところのひとつがソースの一元化。なんか同じような内容のものが複数のURLに分散してるってのはあまり美しくないですよね。HTMLやURLは今や資産と言っても過言ではない。それを分散して管理するってのも美しくないしね。

Javascriptと少しの規則性があればHTMLを再構築するのは意外と簡単なこと。「中身を変えずに表現方法を最適化する」というコンセプトは自分で言うのもアレだけど美しいなって思っています。