レスポンシブ デザインのめんどくささ

今回はレスポンシブ ウェブ デザインの話。レスポンシブ ウェブ デザインって何かっていうと、一つのデザインですべてのプラットフォームとブラウザに対応することである。つまり PC でアクセスしてもスマフォでアクセスしても、同じデザインで出力される……というわけではなくて、一つのデザインしか定義してないんだけどそれで PC でもスマフォでもちゃんと表示されることである。

今やっているスマフォのゲームも最初、レスポンシブ デザインで作っていた。
このレスポンシブ デザインの肝は簡単に言ってしまえば%で作ると言うことである(ぁ
どういうことかというと、例えば 2 段組をするとき、全体幅が 1024 ドット、左側がメイン コンテンツで 640 ドット、右側がメニューとかで 384 ドットにしよう……ってのが今までの作り方。
レスポンシブ ウェブの場合は、全体幅は 100% で作り、本文左側は 62.5%、メニューとかの右側は 37.5% にしようってこと。そうすればどんな機器だろうが割合で区切られるので、それらの機器に従った大きさになる。
これはレイアウトだけでなく、画像の大きさに至るまで何もかも%で指定する。

ところが、この作り方には二つの欠点がある。

  • 文字の大きさは変わらない
  • ドット単位の微調整は不可能

ブロック要素や画像などは画面の大きさに従って勝手に変わってくれるのだが、文字の大きさはそれに追随してくれない。なので細かいディスプレイに出しても、荒いディスプレイに出しても同じ大きさ(ドット)で表示されてしまうため、要素の中に表示される文字数が変わってしまい、結局レイアウトが乱れる。
これはディスプレイの画素数と CSS ピクセル比ごとに文字の大きさを定義しておく必要がある。
さらにゲームではインターフェースに凝るため、ドット単位でのボタンやゲージ(メーターやプログレス バー)などの表示が必要となる。ブラウザは小数点第三位くらいまでの%値しか見てくれず、ドット単位での微調整はできない。これの回避方法は、ドット単位で組んだあと、Javascript や CSS の ZOOM を使って最適な大きさに表示するのだが、iOS の Safari などでバグが発生し使えないことが多い。これに関しては、まだボクの中では特に解決策は見いだせていない。
今回はドット単位で調整が必要なところは、合成した画像を変化する種類分作って対応するというわりと原始的な方法で回避した(^^; どういうことかというと、下地があってその上にボタンをドット単位で並べなければいけないような場合、下地とドット単位で並べたボタンを合成してしまい、どのボタンが光っているかというパターン分の画像を用意することによって、ドット単位での調整をしなくて良いようにした。ただこの方法は、パターンが膨大にある場合は使えない……。

まぁ、一番いいのは Javascript の ZOOM である。コイツさえ正常に動いてくれれば、レスポンシブ デザインは一気に楽になる。何故かというと、ドット単位で自由に作れるからだ。従来の作り方のように、例えば全体幅を 1024 ドットとか 640 ドットとかと固定して自由にレイアウトした後に、Javascript で機器のディスプレイの大きさに合わせて拡縮するようにすれば楽ちんなのである(爆。

他にも Table を使うのが難しかったり、横幅を必要とするモノがどうしてもスマフォなどだレイアウトが崩れてしまったりなど、一つのデザインで様々な機器に対応するのは一筋縄では行かない。TAMA Networks も燃費なんかの表の部分や、説明付きの画像の場合はスマフォで見ると崩れてしまう。
この辺、何とかしたいなぁと思いつつ……。
写真はこの日食べたもの。バーガーキングのブルーベリーのハンバーガーと、秋葉原の万豚記。

1412080730 1412080731 1412080737 1412080740 1412080741 1412080747

肉食堂

浅草橋にオープンした「肉食堂 優」というお店。何度か利用してるんだけど、日記に出るのは今日が初めて。
ここはハンバーグ専門店(一応、牛カツがあるけど)。
しかも、自分で焼くハンバーグ専門店。

表面だけ焼いたハンバーグが出てくるんだけど、これが本当に表面だけ。中はレア。でもちゃんと温かくて、そのまま食べても冷たいということはなく、ブルーレア~レアって感じ? で、そこから先は、バレット(?)と呼ばれるスゴい熱せられた鉄の塊(?)にお肉を乗せて焼く。
このバレットは冷えれば、交換できる。

ボクはわりと焼いた方が好きなので、出てきたらハンバーグまるごとバレットの上に置いて、先に野菜を食べる。この野菜がこれまたまだシャキシャキ感が残ってるので、熱い鉄板の上でタレをかけながら好みの柔らかさになるまで焼く。
ここで気をつけなければいけないのが、この野菜にかけるタレをバレットのある場所まで行かないようにすること。もし行ってしまうと、バチバチとハネるのだ。

肉の質はかなりいいと思う。挽肉なので、その分を考慮しても、柔らかくて肉汁もタップリ。

でね、お肉を全部食べ終わると、そこには肉汁という名の油がたくさん残るわけですよ。そこに新たにご飯を注文して投入。良くかき混ぜると、とても美味い肉汁ご飯のできあがり。いやー、太るってもんですよ(ぁ

1409093177

揚州商人と万豚記

揚州商人万豚記はボクの日記がまだ食い物日記になる前から行っているラーメン屋で、もうすでに 10 年以上前から利用しているラーメン屋である。万豚記は八王子本店、そして揚州商人は目黒の本店に行っていた。
程なくして両店ともにぽこぽこと支店ができはじめ、今では本店に行くことはほとんどなくなってしまった。

でも、どちらもあんまり行かなくなってしまった。
その理由はやはり多店舗展開で市販のスープを使うようになってしまったからだ。一口目に口に広がる味が、「あぁ、良く口にするあの味」なのだ。

それはさておき、揚州商人は本当に久しぶり。年単位で行ってない気がする。頼んだのは麻婆茄子に揚州濃厚醤油ラーメン。今食べると、美味しいけど、けっこう平凡な味。これはボクの舌が肥えたのか、それとも他のラーメン屋が美味しくなったのか。
麻婆茄子は白いご飯が食べたくなる。
揚州商人で嬉しいのは、いわゆるお冷やがジャスミン茶な所かなー。

万豚記は秋葉原店のもの。吉祥寺や秋葉などボクの行動範囲にあるヨドバシには何故か万豚記が入っているので、なんだかんだで揚州商人よりは利用する。牛モツラーメンと青椒肉絲と杏仁豆腐。万豚記に来たら杏仁豆腐を頼むべし。何もかかってないけど、かなり食べ応えあり。

1409083135 1409083138 1409083140
1409083169 1409083165 1409083172