さくペラ

さくっとぺらいちというサイトのつづき

スマートフォンの7月の出荷台数シェアが22%

BCNの調査によると、携帯電話市場に占めるスマートフォンの台数構成比が7月、20%を超えた。ソフトバンクモバイルiPhone 4を発売したのが要因で、「iPhone1人勝ちの状況が続いている」(BCNの森英二さん)という。

とのことです。
詳しくは 「結局、iPhoneの1人勝ち」 スマートフォン市場 - ITmedia ニュース

着実にスマートフォンユーザーが増えているといったところでしょうか?

Xperiaはviewportが効かない

先月までスマートフォンサイトを制作してまして、そこではまったのがXperiaChromeです。

Androidの実装が不十分だったのかわかりませんが、スマートフォンサイトには欠かせないmetaのviewport指定が無視される仕様?になっていました。

metaタグのviewport指定というのは何か?といいますと、スマートフォンで画面表示時の横幅のサイズが指定するためのものです。

サンプル:<meta name="viewport" content="width=480,user-scalable=yes" />
         widthは幅指定
         user-scalableはユーザー側での拡大縮小可否。

スマートフォンは解像度が様々なので(IS01は横幅960px)、viewport指定がないとこちらが意図した表示がされません。

Xperiaはデフォルトの表示設定が中になっているのですが、その設定だと横幅320pxで表示しようとします。設定を小にかえると480pxで表示しました。

iPhoneはviewport設定に完全対応していて、縦表示でも横表示でも指定した幅で画面表示します。
Androidは全体的に、向きを変えると向きを変える前の倍率のまま表示してしまいます。IS01でもそういう挙動でした。

Android向けにサイトを作る際はそのあたりも気にして作る必要があります。

POINT

iPhone向けだったら、viewport指定すればiPhone4/3GS/3Gサイトが作れるが、Androidにも見せる場合、崩れるので最低でもuser-scalableをyesとしておいて、ユーザー側で縮尺を変えてもらうようにする。

オブジェクト指向CSS(OOCSS)について

すぐにスパゲティコードになってしまうCSSはそもそもの仕様自体がおかしいのですが、オブジェクト指向CSSというものを考えている方がいらっしゃるみたいです。

参照:OOCSS(Object-Oriented CSS)の考え方 - in0in0の日記

OOCSSをみた感想ですが、クラスの複数指定をした場合、同じ要素の指定は上書きされてしまうので、結構気をつけて指定しないといけないという点が気になりました。

たとえば、unitクラスで指定したボックスのpaddingとsize1of3クラスで指定したボックスのpaddingが違う値のとき、あとから指定したクラスのpaddingで上書きされてしまいます。

ですので、クラスを設計する際に、絶対同じ属性を設定しないようにする必要があります。指定している属性内容が分かる名前をクラス名につけると分かりやすいかもしれません。

ただ、この手法ですと細かな設定クラスが煩雑にできてしまい、意図しない属性の上書きが生じる恐れがあると思います。

あと、クラスの複数指定はIE6では無効になります。一番最後に指定されたクラスのみ有効になるので、IE6を考えたときにこれらのロジックは崩壊してしまう点も、微妙といわざるを得ないですね。

参考:クラスセレクタ (E.warning)|セレクタ|CSS HappyLife ZERO

ちょっとデザイン変えてみた

セピアはやめて、クールにグレーにしました。
あと3カラムに戻して、グローバルナビをつけました。はてなダイアリー改造しまくりです。

はてなのテンプレートって昔のtDiary風で古いの多いんですよね…
最近のメインカラム+サブカラム2つ的なレイアウトは自作しないといけないし、グローバルナビも同様で、ついているテンプレートは本当に少ないです。

他のブログサービスなら普通にあると思うんですが、それでもはてなを使い続ける理由は、「なにか新しい機能」を追加してくれそうな予感。からです。

ファイルアップローダが先日ついて、ようやく実用レベルまできた感じですが、さらにtwitter連携機能がいろいろ追加されました。

今後はfacebook機能とかつくのかな。つか、もうつけてもいいんじゃないでしょうか?なんて。

はてなブックマークコメントのカスタマイズについては
はてなブックマークコメント表示ブログパーツ・デザイン設定に記載されてました。

Safari5リリース

HTML5やBingに対応したSafari5がリリースされた模様。
ソフトウェアアップデート経由でインストールできます。

■以下新機能

Safari リーダー:新しい“リーダー”アイコンをクリックすると、Web 上の記事が 1 ページに整理されて表示されます。
・パフォーマンスの向上:Safari 5 では、JavaScript の実行速度が Safari 4 と比較して最大 25% 向上しました。ページキャッシュおよび DNS プリフェッチの改善により、ブラウズ速度が向上しました。
・Bing 検索オプション:Safari の検索フィールドで、Google および Yahoo! に加えて、新たに追加された Bing 検索オプションを選択できます。
HTML5 サポートの改善:多数の HTML5 新機能がサポートされました。これには、位置情報、HTML5 ビデオのフルスクリーン表示、HTML5 ビデオのクローズドキャプション、新規セクショニング要素(article、aside、footer、header、hgroup、nav、section)、HTML5 AJAX 履歴、EventSource、WebSocket、HTML5 draggable 属性、HTML5 フォーム検証、および HTML5 Ruby が含まれます。
Safari 開発者用ツール:“Web インスペクタ”に新たに追加された“タイムライン”パネルには、Safari が Web サイトに対して実行した対話処理が示されるため、どの部分を最適化すればよいかを知ることができます。新しいキーボードショートカットを使うと、パネルをすばやく切り替えることができます。

Bad Apple!!がCNNで報道されたとか

ニコ動とかで人気の3D影絵アニメーション、BadApple!!がついにCNNでも取り上げられたそうです。日本のニュースは完全無視でしょうけど。素晴らしいクリエイティブなのにね。

D

CSS設定の上書きと継承についてのメモ

このブログをリデザインするにあたって、CSSの仕様を見直していたのですが、CSSの難しさに直面しました。

カスケーディングであるが故に、オブジェクト指向では当たり前なカプセル化とか継承とかをCSSって実装していません。
それなのに、親タグから子タグに継承できるプロパティを設定していたり、!importantで強制指定できるようにしたり…ごちゃごちゃです。
また、要素へのアクセス方法(セレクタ)においてテクニカルな指定があり、さらに混乱をよんでいるようにも思います。

それらが及ぼす弊害の一つとして、
・直感的にその要素に影響しているスタイル設定が見えにくい
という点があると思います。
CSSの設定ファイルを分けるとさらにそれが見えなくなって管理しにくくなる。

これを回避するには、CSSオブジェクト指向ライクにコーディングするしかないと思うのですが、現状の仕様でオブジェクト指向ライクなCSSのコーディング方法ってあり得るのでしょうか?

上記のようなことを考えたCSSコーディングガイドラインってあるのかな…探してみよう。

追記
http://css-happylifezero.com/
こちらのサイトがオープンされてました。かなりわかりやすいですが、上記のようなことについても触れているかな?