CSS3のcalc()ファンクションが最新のブラウザで効かない。。困った。。。
.hogeBlock width: calc(100%-320px) // ←こいつ
原因は計算式の書き方でした。計算式の間にちゃんとスペースを入れないと機能しません。
In addition, whitespace is required on both sides of the + and - operators. (The * and / operaters can be used without whitespace around them.)
正しくはこちら。
.hogeBlock width: calc(100% - 320px)
思わぬトラップ(ﾉ∀`)ｱﾁｬｰ
デザイナーに自分が伝えたいデザインや雰囲気をうまく伝えられないことがたびたびあり、「コミュニケーションをもっと円滑に！」ということでこの本を読んでみることにしました。
本全体としては、スマホアプリ/スマホサイトの両方が記述されていますが、どちらかというとアプリのほうが特殊なUIが多いので内容も多めです。UIごとに丁寧にまとめられていて、それぞれのパターンと具体的な事例を説明してくれているのでとても読みやすかったです。（読了時間：３〜４時間）
気になったところ、勉強になったところを備忘録として書いておきます。
同じことを表すUIや似たUIが存在するとユーザの混乱を招き、体験を損なう可能性があります。ユーザがいろんなページを見ても、混乱しないようにパターン化することが重要です。もちろんパターン化したコンポーネントをベストなデザインにしていく改良は必要です。
パターン化していると新しい画面を作る際に新たにデザインの確認や調整をする時間を短縮することができ、開発スピードを向上することができます。また、フレームワーク化することで、あるコンポーネントの変更をすべてのページに適用できるので全体管理が捗ります。これは少人数で開発してる場合は特に有効です。
画像を載せるのが大変なので基本的にクックパッドのスクショで。。笑
２年前発行のものなのでちょっと古いデザインのものもあるかも。
ダッシュボードやマイページTOPなど、情報をコンパクトに伝えたい場合に使える
・いわゆる「戻るボタン」がよく使われている
・パンくずはスマホの小さい画面では利用が難しく、iPhoneのガイドラインでも非推奨
・「ホームアイコン」も併用してナビゲーションを手厚くすることでユーザの回遊が見込める（らしい）
スタンダードパターン（下にいくと自動で次のコンテンツをくるくる回ってロードする）とボタンパターン（「もっと読む」のボタンを押すと次のコンテンツを読み込む）の２種類がある。ボタンパターンはリストの下にもコンテンツを表示したい場合などに使えると書いているが、いまは「もっと読む」で別ページに遷移するのが主流っぽい。
リストのパターンはクックパッドがすごく参考になりました。
ハーフサイズ、1/3サイズのパターンも考慮したほうが良い。
新しい情報が上にあるのか下にあるのかで、フォームの位置も異なる。
新しい情報が上にあればフォームも上。
新しい情報が上にあれば下にあればフォームも下。
iPhoneのガイドラインでは、「リスクの伴う可能性があるアクションの場合は、キャンセルが右」「ユーザーが望むであろう害のないアクションの場合は、キャンセルが左」と説明されているので、どのような行為なのかによって配置を考える。
Androidの場合はどのような場面でもキャンセルボタンが左で実行ボタンが右が一般的とのこと。
スマホのUIにはどのようなパターンがあり、どういった情報を扱うときに利用できるのか、全体的によくまとめられていて勉強になりました。３〜４時間で読めるのでオススメです。
もちろんこの本に載っているパターンがすべてではないので、最新動向は現状のいろんなスマホサイトを見てチェックしていきます(^^)
User.all.group_by(&:age)
レコードをグルーピングするときgroup_byを使いますが、引数の&（アンパサンド、アンド）の挙動をいまいち理解してなかったので調べてみました。
Rubyではメソッド呼び出しの引数に「&手続きオブジェクト」を渡すと、手続きオブジェクトをブロックとして渡すことができます。Ruby 1.8.7以降では「&シンボル」を渡すと、「シンボル.to_proc」をブロックとして渡すことができます。
つまり、以下のように書けてとっても便利です。
# User.all.group_by{|s| s.age } と同じ User.all.group_by(&:age) # ["12", "34", "56"].collect {|s| s.to_i } と同じ ["12", "34", "56"].collect(&:to_i) # [1, 2, 3, nil, 5, 6].select {|s| s.present? } と同じ [1, 2, 3, nil, 5, 6].select(&:present?)
これはなかなか使えますね〜。(^^)
