本日はレスポンシブデザインのお話でもしようかなと思います。

べ、別に記事のネタがなかったわけじゃないんだからね!

※この記事には若干の間違いもあるかもしれませんがご了承ください。

レスポンシブwebデザインとは?

まずwebデザインをある程度やっている人なら聞いたことはあると思いますが、自分のHPを少しいじっているだけという方には聞き慣れない単語かもしれません。

このレスポンシブWebデザインとは単一の(X)HTMLソースからデバイスなどによって表現を変更するウェブデザインのことを指します。ちなみにレスポンシブルではありませんのでご注意を。

方法としては横幅を検知して適用するCSSを変更するという感じです。

具体的にどういうの? という方は当サイトをPCやスマートフォンなどで見比べてみてください。PCしかないよ! というかたはブラウザの横幅を下げていけばわかります。

※例でデバイス別に表示を変更と言いましたがPCの解像度によって表示を変更したい(低解像度のPCではより最適化したい)といった理由で使用するのでもいいと思います。

類似用途

デバイス毎に表示を切り替えたいのならデバイスごとにサブドメインや階層を変えてリクエストしたり、CMSなどでなどでデバイスごとにテンプレートを作ればいいというものもあります。

たしかにこちらのほうが単一ソースという制限がなくなるので表現の幅は広がりますが、その代わりに少しの更新でも複数のソースを修正しないといけなくなるというメンテナンス性が下がります。しかし、特に理由がない限りデバイス毎のデザインががらっと変わると同じサイトと認識するのが難しくなるので表現の幅が広がってもあまりメリットは無いと思います。

ならば単一ソースでCSSのみの切り替え・一部適用にしたほうがメンテナンス性はいいです。

幸い近年のブラウザはレスポンスwebデザインに必要なCSS3に対応していますし古いブラウザも対応させる……などということをしなければ問題ないと思います(スマートフォンであれば意図的にしない限り古いブラウザを使う人は少ないでしょうし)

具体的にどうするの?

CSS3側の設定方法

まず方法としてCSS3のMedia Queries(メディアクエリ)というものを使用します。

これはウィンドウ幅の数値によって適用させるCSSを変更するというものです。

例えばウィンドウの横幅が481px以上ならばPC用、480px以下ならばスマートフォン用としたいのであれば下記のようにするとそれぞれ適用されます。

/*PC用*/
@media screen and (min-width: 481px){
適用するCSSの中身
}

/*スマートフォン用*/ @media screen and (max-width: 480px){ 適用するCSSの中身 }

このウィンドウ幅というのはPCではブラウザの幅、スマートフォンではデバイスの横幅となります。スマホの場合は縦向き(ポートレイト)と横向き(ランドスケープ)によってこの数値が変わります。またAndroidとiPhoneではもちろん変わりますが、Android機種同士でも機種が違えば当然横幅等も変わります。

さらに言えば機種のスペック表に書いてある解像度はあくまで標準解像度であり、ブラウザでの標準サイズは標準解像度÷1~3付近(機種によって異なる)となるため実際はポートレイト時で横幅が320pxなんてこともざらじゃありません。

なかにはブラウザが違うだけで横幅が違っていたり、表示倍率の設定によってもまた変わります。

とりあえず面倒なので各デバイスの標準ブラウザの標準倍率で調整するといいと思います。
ちなみに記述するCSSファイルは読み込まれているファイルであればどれでも平気です。一つのCSSにPC用とスマホ用を記述してもいいですし、PC用とスマホ用で別けても構いません。

追記(13/05/06)

ちなみにスマートフォンなどのみに適用させたくPCでブラウザの横幅をいじっても適用させたくない場合は、max-device-widthを使用すればPCではデスクトップの解像度がそれ以下の場合を除いてブラウザをいじっても変更されません。

ただ、このmax-device-widthにはAndroid4以上でバグが有るらしく、高解像度機種(XperiaZ)などでは上記の標準解像度で計算されるそうですので使う際にはご注意を。

HTML側の設定方法

基本は上記のCSS内で設定を調整・変更しますが、それとは別にHTMLのheader内にも必ず記述しないといけないものがあります。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />

この記述がないとスマートフォンで正しく機能しません。

ちなみに各項目は以下のようになっています。

width=device-width デバイスの幅
initial-scale 初期の拡大値
minimum-scale 最小の拡大値
maximum-scale 最大の拡大値
user-scalable 拡大の可否

切り替える横幅の境目は?

さて、ここまでやって一つ疑問に思ったことがあると思います。そう、一体何pxでCSSを切り替えればいいのかということです。

この切替ポイントのことをブレイクポイントと言いますが、これは正確な数値は存在しません。それもそうですよね。上述していますがスマートフォンの機種によってサイズも違いますし、最近ではiPadなどのタブレットも出て来ましたから。

ただ、大体の指針程度にはなるものはあります。

スマートフォンだと320pxもしくは480px。大型の機種も対応させると640pxあたりでもいいかもしれません。面倒でなければこれら全てで切り替えてもいいです。

iPadなどのタブレットでは768pxあたりでしょうか。

それ以上はPC用サイトと言った具合に。

画像がはみ出るんだけど……

単純に横幅が320pxのレイアウトでPC用の横幅800pxの画像を表示しようとしてももちろんはみだしますよね。

対処法は単純でCSSに以下を追記して大きさを自動調整してやればいいんです。

img {
	max-width: (適用横幅以下)px !important;
	height: auto !important;
}

ここで!important扱いにしている理由は横幅関係なく適用させているCSSでimgに同様の属性を設定していた場合強制的に上記の数値を上書きするためにこのようにしています。

これはレスポンシブwebデザインではなくCMSなどでテンプレートとしてデバイス変更している際にも有効な対処法ですね。

 

余談

ここまでざっと適当に書いてみましたがやはり説明下手で必要な情報が抜けている可能性が高いです。

なにかわからない点などありましたらコメントにでもいただけると応答すると思います。

にしてもやっぱりテンプレート型とくらべてメンテナンス性が高いのはいいですねぇ。

スマートフォンでもPCと同一のソースを使用しているから読み込む容量も同じというデメリットはありますが。

ちなみに当サイトでもfreoが1.18.0を機にテンプレート方式からレスポンスwebデザインに変更したようなので前々から実装しようと思っていたのでレスポンシブ化しました。

04/201325

近況報告

就職

ここ1ヶ月ほど前にメンテナンス会社に就職しました。

かといって別に絵の道を諦めたわけではないですよ? とりあえず食い扶持稼がないと行けなかったので。

でも睡眠時間は時間帯こそ違えど量はあんまり変化なし。安定の4時間。

それと前回ちょろっと書きましたが会社からの要請で普通自動車免許AT限定取ってきました。車自体は所持していませんけど、会社の車で帰っていいらしいので交通には困らなくなったかな。そのうち大型二輪取りに行きたいな。スポーツバイク乗りたい。

そして今度休みの日にでもコンタクトにしてこないと。メガネがまた度が足りなくなったのでこの際なのでコンタクトに変更してきます。やったね! これでグラサンかけられるよ!

友人複数「「お前の服装でグラサンかけたら完全に不審者だから! というかグラサンかけなくても不審者だから!」」

(´・ω・`)

とりあえず仕事のほうが安定するまで絵はおあずけかな(アニメ見たり他のこともしたりしているのもあるけど)

今後

しばらくは仕事を覚えることに専念して、その後は神社検定の勉強をし始めようかなと思っていたり。給料でPS3やHDD買いたいね。PS3に関しては未だに初期型(20GB型)なので色々不便(´・ω・`)

PS4? なんかディスクに関しての互換性はないようじゃないですか。ディスクでの互換性あればPS4待つんですけどねぇ。

それはそうと、docomoからiPhone出るの待てずにXperia Z SO-02Eに機種変してしまいました。これ以外と大きいんですね。ともあれこれでPC・Android・iPhone(ipot touch)と3種のサイトテストが出来る環境になったぉ。

そして懲りずにまたソーシャルゲームをやり始めました。ゆずソフトのゆずぱらって奴。今のところ課金には手を出していませんが今後どうなることやら……

にしても相変わらず目的なき記事だと文がめちゃくちゃだなぁと見返してて思っていたり(目的あっても結構めちゃくちゃだけど)

ここ数日一切記事を書いていませんでしたが、ひとえに自宅にいなかったからです(´・ω・`)

教習所に合宿行ってました。ええ、普通自動車ですが。2輪はそのうちもう一度取りに行きたいなぁ。

まぁそれは置いておいて、今回はTwitterのミュート設定サンプルでも適当に置いておこうかと思います。とはいっても正規表現に対応しているクライアントのみ使用可能ですが。

サンプル

  • 特定ハッシュタグ内で定期系を除外する(この例では#pso2タグ)

※別に検索オプションで各ワードを除外設定にすればいいだけですが、ミュートでやったほうが自分は管理しやすいので

[\[[【「\(〈<〔].*(定期|ていき|てーき|自動|じどう|拡散|確認|募集|[Bb][Oo][Tt]|[Aa][Uu][Tt][Oo]).*[\]]】」\)〉>〕].*[##][Pp][Ss][Oo]2
  • 複数のハッシュタグがある場合は除外(例では3つ以上)

※フォロワー稼ぎ系によくあるハッシュタグの乱用。正直邪魔

[##].+\s*.*[##].+\s*.*[##].+
  • 無言非公式RTを除外
^([Rr][Tt]|[Qq][Tt])(\s|:|:\s)?@\w+
  • ~ならフォローして系のハッシュタグを除外

※正直うざいだけ(´・ω・`)

[##].*([Rr][Tt]|フォロ.?ー)
余談

なにか要望があればもしかしたらサンプルに追加するかもです。

妄想ガンスラ特化クラス

武器種:ツインガンスラッシュのみ(ただしスキルのギアを取ることによってサブクラスの専用武器を使用可能となる) 従来のガンスラッシュはツイン化されるため必然的に装備不可能

特徴:既存のガンスラッシュを両手に2本装備する。新規カテゴリーではなく、既存のを装備するとツイン化する。

PA:既存のガンスラッシュPAの流れを組むのが少しと新規PA

ギア:斬撃モード・銃撃モードの切替および、打撃+銃撃/2+合計値の10%のステータスが各形態に適用されるため、どちらの形態でも問題なく使用出来る

仕様:打撃・銃撃は武器でも使用可能だが、法撃がないので、支援テクニック(レスタ・アンティ・シフタ・デバンド)のみ使用可能

スキル:技量ステータス系1~3、打撃ステータス系1~2、射撃ステータス系1~2、ガンスラギア、ステップアタック、ジャストリバーサル、ステップアドバンス、ダイブロールアドバンス、PAの威力が上昇するスキル1~2、攻撃速度が微上昇するスキル1~2

とこんな感じに妄想してみたけど、器用貧乏や支援安定やサブクラスとしての下位テクターになりそう

Windows8先日発売開始しましたね。

アプグレ版が2013年1月末まで3,300円らしいので自分もメイン7機に入れてみました。

一応RPだったかな? 以前一度使っていたのですがやはりデスクトップ機として使うにはModern UI(旧名:Metro UI)に慣れるかどうかが肝っぽいですね。

他の部分では概ねWindows7の上位互換になるのかなぁという感じです。

ただ削除された部分もややあります。

あと個人的にタスクバーのツールバー周りのバグが取り切れていないんじゃないかなぁと思っていたり。

再起動させるとタッチキーボードが再出現していたり、Quick Launchが消えていたり……

心配していたWindows7で使用していたソフトの方もほぼ使用可能でした。

win8での満足点

  • 起動・終了・再起動が早くなった
  • パフォーマンスが全体的に向上した
  • コピーや移動などの機能が強化された

win8にしてみて不便と思った点

  • 初期画面がデスクトップじゃない(最近では起動後真っ先に大抵ブラウザ開くので不便とは思わなくなってきた)
  • タスクバーのタッチキーボードを非表示にしても再起動すると表示される
  • デスクトップ表示してから右クリックしないとアイコンが表示されない(自分の環境だけ?)
  • 一部ブラウザが正常に既定設定できない(レジストリ編集で回避可能)
  • 半角/全角がおかしいときがある? HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\i8042prt\Parameters\LayerDriver KOR削除で回避
  • サインアウトするとキーボードのNumLockが解除される
  • win7とは違い3フレーム遅延が解決できない

色々情報調べてて思ったこと

Cドラなんでこんなに容量使ってるんじゃボケーって人はアプグレ版だろと。.old消せよ。10GB強は空くぞ

参考に自分のCドラの使用容量は約25GB。

必要最低限のソフトとかは入れているからOSのみだったらもう少し少なくなるはず。

Modernの画面(初期の奴)はショートカット一覧だと思え。

フォルダ表示させたければどっかに作ったフォルダをピン止めすればいい。無論デスクトップで開かれるけど。なのでModern UIとしてのExplorerはない。

結論

結論を言うと慣れれば別に使えないこともない。

要はスタートメニューがModern UIになっただけですし。

ただし、3フレーム遅延だけは納得いかない(´・ω・`)

7持っている人はデスクトップコンポジションのオンオフをしてみれば3フレ有無の差がわかります(体感ではわかりづらいけどキャプチャー系ソフトを通すとはっきり目に見えてくる)

自分はModern UIを全面ランチャーとして割り切って使ってます。

ちなみに現状ではModernアプリは何も使っていません(もうちょっと種類増えてくれば使うものが出てくるかも知れませんが)

ただまぁ、デスクトップとして今まで7使っていた身からするとタッチモニターじゃないのなら別に8にしなくてもいいかなぁ程度。

あれば8でもいいけど8じゃなきゃ嫌だってほどではない。

でも起動シャットダウンはたしかに早くなりましたね。
オススメはしないけど、逆にこれはやめておけとも言う程でもないっていうのが素直な感想ですかね。

とりあえず8用のVisual Style待ちです。

追記 2012-10-29

どうやらWindows8ではAeroは廃止されたものの、Desktop Windows Managerの機能は継続導入されており、かつコアに組み込まれたことによりWindows7では解除できたこと(デスクトップコンポジション)ができなくなったため、win8では実質描画遅延の回避ができなくなりました。

Microsoftさん早くSPとかで対処して(´・ω・`)

追記 2013-03-05

一部の解決した不満点など削除。

満足点を加筆。

archive


×

ログイン