GALAXY NoteのWEBブラウザ解像度とスマホやタブレットCSS3デバイス幅でレスポンシブルデザイン

GALAXY Note SC-05DのWeb解像度を店頭で見てきた。

結論:どうやら640×400ピクセル
(WEBブラウザ解像度)

スマホデザインは幅320ピクセルで作ればいいといった常識は通用しない。
GALAXY Noteは縦で持って幅400ピクセルである。

ギャラクシーノート

機種の画面解像度は1280×800ピクセルなのでWEB解像度は丁度半分になる。この仕様として公開されている解像度とブラウザ解像度は別なので、調べる必要が出てくるところが厄介です。これで思い悩んでいるデザイナーは多いのではと思います。

レスポンシブルWEBデザインとかマルチデバイスデザインが求められるようになって、タブレットやらスマホの解像度がどんどん多様になってきて、WEBデザイナーはどのような対応策をとっていけばいいのかのご提案です。

  1. ユーザーエージェントでPCサイトと振り分ける
  2. CSS3のデバイス幅でCSSを振り分ける

携帯サイトも結構やっていたので、その歴史を語ると最初は

  • IPアドレスで振り分ける(徐々に機種が増えすぎて対応しきれず)
  • ユーザーエージェントUAで振り分ける(スマホになってマルチデバイス化が必要で)
  • 横に傾けた時にWEB解像度が広がる(縦横両方に対応せねば…)
  • タブレットも相当増えてきて(デバイス幅で指定が求められるGALAXY Noteのような中途半端なデバイスへの対応)

といった流れではないでしょうか。iPhoneやiPadなどのアップル製品はそんなに製品ラインを変えたりしないが、Androidや各種キャリアのスマホは今後どうなっていくか進化はバラバラだろう。だからiPhoneやAndroid Mobileといったユーザーエージェントだけではそのデザインの対応が難しくなってくることは容易に想像がつく。

ということで今後求められるのはデバイス幅とPCサイトとの両方の対応をどれだけ的確に出来るかが腕の見せ所となっている。 縦と横で解像度が異なることにも頭を悩ませて、そのまま320ピクセルのスマホ解像度でやろうとしてもいいがGALAXY Noteだとかなり大きくなり過ぎてしまう。

でもCSS3のデバイス幅の機能(max-width/min-width)はよくこの未来を考えられていると思った。これからはデバイス幅でCSS3を駆使してマルチデバイスデザインとレスポンシブルデザインをしていくことが主流になることは間違いないだろう!

iPadユーザーが異常に増えいてる件

ユーザーエージェントやアクセス解析、その他フォームからのデータ等いろんなところで端末情報は取得できる訳ですが、最近かなりiPadが増えている。どれほど売れているのか想像がつくほどその変化は大きなものがある。もはやノートPCってのも仕事用で、デスクトップ何てものを使う人はかなりマニアックなユーザーに限られてくることをうかがわせる。

確かにiPadであれば、そのまま閲覧も大きく苦にならないし、入力もiPhoneやスマホよりも簡単にできるから好まれている感じです。特に込み入ったアプリを使わないのであれば、iPadにインストールできるソフトで充分ですし、買い物やフォーム入力系も難なく増えていることを見るとタブレット端末がジワジワというよりも予想を上回る勢いで一般化している様相です。

iPadとMacBook Airの大きな違いは、

  • ソフト(インストールの可否)
  • キーボード
  • カメラ撮影

コレくらいしかなく、モバイル性は圧倒的にiPadで、バッテリーも気になるほどのハードユーザーは元々ノートも持たないでしょうし、Appleが起こしたイノベーションは以前からあったタブレットやPDA端末それらとは比較にならないほど生活レベルに浸透できるクオリティだということです。さらにiPadのカメラ撮影できるポテンシャルはMacノートにはなく、iPadやiPhoneには敵わない。

何と言ってもiPhoneとの大きな違いはフォームへの入力に抵抗がないところだろう。画面が小さくスマホサイトはどうにも入力して送信する感覚が未だに抵抗がある人も多いことだろう。しかしiPadであればそれも難なくクリアできる。そろそろ有力なデバイスと考えてiPadを買ってユーザービリティを確認しないとまずい気がしてきた。

Yahoo!ボックス 50GBオンラインストレージがプレミア会員なら無料

Yahoo!から新たなサービスが登場してた。
ドロップボックスならぬ、Yahoo!ボックスです。
ヤフオクなど利用しているプレミアム会員なら50GBまで無料。

これはなかなか使えそうだと思いました。Amazonのオンラインストレージを使うのもちょっと高い気もするし、かと言ってドロップボックスは無料は容量が少なすぎて使えない。50GBあれば、急用や何かの時に役立ちますね、Yahoo!サービスの中でも多用しそうな雰囲気です。もちろん計画立てたデータは、レンタルサーバーに保存してプチクラウド化してるから、ドロップボックスのようなポジションはこれで充分。

Evernoteでは、ちょっと重すぎるデータであるとか急に動画を送らなければならない何て時に威力を発揮しそうです。ストレージ用サーバーでも借りておいた方がいいのかなと思っていたところになかなか50GBと丁度いい容量まで無料で使えるとあって助かりそうです。

ヤフオクに使うプレミアム会員なので、無料で50GBまで使えます。

 

本当に50GB使えるのかとログインしてみると、こんな感じのインターフェイスなってました。右上がちゃんと50GBプランになってる。

Yahoo!らしいすごくわかりやすいアイコン付きの感じで共感がもてました。
これなら使える、外で自分以外のPCやMacを使った時に特に成果が問われそうです。

メール大体超上限50MBくらい?マナー的に、Evernoteで動画の同期はしたくない、外出先でFTPも外付けHDも無い!何て状況で思わず使うことでしょう。

XGAウェブサイトの横幅と背景を工夫、太いボーダー構成

Safariバージョン 5.1.3 (7534.53.10)にしたら、ブックマークツールバーの横幅が広がった。一つ一つの幅が若干広がってクリックしやすくなったのだが、このブックマークの幅でウィンドウサイズを測っていたので、困ったのもだ。数を減らして、1024ピクセルになるように調整した。

ウェブサイトの幅は長いことXGAベースなのだが、最近1024pixelに幅収まらないウェブサイトデザインも見かける。どういった経緯から何pixelをベースに考えてデザインされているのかは興味深いところであるが、XGAで問題ないように思ってしまう。

しかし、横幅が広いディスプレイでフルスクリーンで閲覧されることを考えるとちょっとXGAだとショボく見えることも否めない。その時のためにファーストビューの背景を工夫してXGAでもそれ以上でも見栄えを損なわないデザインが必要だと感じるが、bodyがはみ出て横スクロールが出現するのはまだまだ頂けないと思う。

  1. ファーストビュー背景をダイナミックにする
  2. ウィンドウ幅いっぱいに広がるボーダー領域の工夫

の対応で考えるのが普通の対応であるかと。横に広がる罫線や太いボーダーの構成だと見栄えが見劣りしないことも印象で感じる。

Macで.htaccessなどの隠しファイルを表示するウィジェット

Web制作ではちょこちょこ出てくる.htaccessファイルですが、Macのローカルファイル上では通常は隠しファイルとして表示されません。Dreamweaverなどのエディットソフトで見るとドットから始まる隠しファイルが表示されますが、それ以外でもFinder上で見たい場合は簡単にできるウィジェットがおすすめ。ターミナルとかで表示する方法もあるようですが、難しいし面倒なのでこっちのウィジェットの方が便利だと思います。

上の図のようにウィジェットでShowとHideを選択するだけで機能します。

↓ウィジェットDownload先

Hidden Files

 

Opera miniスマートフォンでのPCサイト拡大表示機能

Android携帯では標準のブラウザを使うのが普通ですが、Opera miniも遜色なく使えるブラウザです。何が驚いたかと言えば、PCサイトの混み合っているリンク部分をタップしたところ該当リンク先に飛ぶのではなく、拡大表示されたのです。

Opera mini

2つ以上のリンクをクリックすると表示が狭かったんだろうなってことで、その領域を拡大してくれる。拡大された表示から的確なリンクをタップできる。これだとホントPCサイトも難なくスマホで閲覧できる環境となります。ガラケーからの携帯サイトの名残もあるのでスマホサイトが必要な感じにはなっていますが、そのサイト規模やジャンルによってはiPhoneやAndroidでも通常のPCサイトを見せ、スマートフォンからのアクセスにも配慮するviewpointやアドレスバーの隠しなどその程度でもOpera miniであれば十分と感じました。

AppleはiPhoneを作っておいてiPhoneサイトを別途用意しない姿勢を貫いていますが、だんだんその考えもブラウザの進化と共に顕在化していきている気がします。スマホサイトだとやはり情報は削ぎ落とされるし、いつものPCレイアウトであればどこにメニューがあってどこから見ていく、ログインしていく、お気に入りのコーナー等も一元化されてユーザーにとっては利便性がPCサイトであることで逆に向上することもあるのではと考えるようにもなってきました。

PCサイトとスマートフォン表示で切り替えるjavascriptやPHPが用意されているサイトは多いですが、ユーザーによってはすぐにPCサイト表示にして閲覧するエンドユーザーも多く、一番のネックは「スマホサイトだと情報が少ないという理由」が多いようです。確かにOpera miniのようなユーザービリティがあれば、情報が多いページを見たいですし、Xi、WiMAX、ウルトラWi-Fiなど各キャリアの高速通信も日に日に増しているのでページ容量を軽量化を優先するよりもPCサイトの情報量と整理が求められるのかもと考えるようになってきた。

近い将来、AndroidブラウザもiPhoneのSafariもこのOpera miniのような二重クリックによる拡大表示は標準機能としてブラウザに搭載されそうだ。

WEB三大新技術。マルチデバイス対応、HTML5、Facebookページ

XHTMLになった時に、苦労してCSSにスタイルをまとめる方法のXHTMLを時間をかけて学んだものです。次に対応したのが、携帯サイトいわゆるガラケーサイトの3キャリア対応の具合を見ながらiモードやezWEBと睨めっこしたものです。

今後重要なスタンダード技術は、

  1. マルチデバイス対応(PC、スマホ、ガラケー)
  2. HTML5
  3. Facebookページ等ソーシャルメディア

この3つが新しく習得しなければならない技術となってきますが、どれかを省略していい訳ではなく、全て3つとも必須のスキルとなるところが痛いところではあります。HTML5とマルチデバイス対応は一応似ているといえば似ている部類になり、さほど隔たりはないのですが、スマホ独自のレイアウトの種類を把握する必要あります。

また第二のホームページと言われるFacebookページももはや必須のコンテンツとしての受け皿になっていることは間違いなく、Twitterよりもウェブ制作者としては制作という意味でもFacebookは対応していかなくてはならない。

覚えることがまた増えてきている感じではありますが、良いコンテンツが全てであることには変わりはありません。新技術の対応に気が取られて貧弱な内容のサイトになっては元も子もないので、徐々に覚えていくしかないのかなと感じている。

この三大新技術は丁度、雑誌WEB DESIGNINGでも9月10月11月の特集になっていて、タイムリーな話題をしっかりとフォローしているWeb制作雑誌は他にはもうほとんどなくなっている感じもします。12月jQuery特集とウェブフォントのフィーチャーとなっています。Flashの埋没が、jQueryの代等として技術的に必要となり、需要が浮上していることもあり、限定的ですがJavaScriptも使えるに越したことはない。

MTでモブログMailPackとモブログくん両おすすめ有力候補を比較

MTでモブログを使うためにオススメ有力候補のMailPackとモブログくんを比較してみた。MailPackはプラグインで、モブログくんはWebサービスである。

MailPack モブログくん
iPhoneデカ画像 実際サイズ◎1600px 実際サイズ◎1600px
iPhone画像縦横 iPhone常に横縦撮り縦添付でも横 iPhone常に横縦撮り縦添付でも横
au携帯854px ◎854px ◎854px
au画像縦横 au常に縦横撮り横回転させても縦 au常に縦横撮り横回転させても縦
自動リサイズ 可能 不可能(別プラグイン対応)
アイテム追加 される(サムネイルも) される
外部からリンク ない(安心) モブログくんから被リンク
Cron 必要(Cron時間) 必要なし(リアルタイム)
公開日がダブる 秒%s 同一Cron時間にアーカイブマッピング注意 ほぼリアルタイム
送信元メアド ユーザーのメアドのみ 何でもOK
自動リサイズとかiPhoneか携帯ユーザーかで決める

WordPress投稿にテキストとしてペースト Ctrl+Shift+v Evernoteも

結論としては、Ctrl+Shift+v で、テキスト情報だけを
WordPress投稿にペーストできるということ。

Macでは、コマンド+シフト+オプション+v

ウェブの文字をコピーして、WordPressにペーストすると何かスタイルまで
ペーストされてしまって、HTMLに切り替えるか、メモ帳などのテキストエディタに
一度ペーストしてから、テキスト情報としてコピーし直してペーストする
何てことを今までやっていたが、Ctrl+Shift+vでノーマルテキストとして
WordPressの記事投稿にペーストできて驚いたので投稿。

Evernoteをよく使うのだが、ここでは編集メニューにテキストとしてペーストという
Ctrl+Shift+vが用意されていて、便利だなと思っていてWordPressでも
やってみたら何と同じようにテキストだけペーストできちゃった!!

WordPressは説明書やアプリのようにメニューみたいなものがないから、
秘めたる小技に気付きにくい。もう標準でCtrl+Shift+vはいろんなリッチテキスト形式
を扱うところではできるのでは思いました。

Shift+Enterで一行改行<br />もWordPressではできるし、
これでリッチテキストフィールドも扱いやすいものと感じるようになったなぁ〜と。

秋葉館で内蔵DVDドライブ購入、親切に先端ベゼルが外されていた

秋葉館という秋葉原にあるMac用周辺機器専門店で、
MacPro用PIONEER製の内蔵DVDドライブを通販でゲットしたら、
親切にもトレイ先端のベゼルが外されていたので親切だなと思って投稿。
あのベゼル外すのに案外大変なので、非常に助かりました。

Macの周辺機器はだいたい秋葉館で買うことが多いです。

何でかというと自分のMacに対応しているかどうかが一発でわかるからです。
Mac専門だからWindowsだけの周辺機器はほとんどなくて、Macも特にメモリとかどれ買えばいいのか簡単にわかるから。対応Mac機種もOSバージョンも書いてあるいし、何でもあるWindows系のDOSパラとかツクモとかだとどれ買っていいかわからないし、Windows専用も多く混ざってて選べない…。

Macユーザーなら、秋葉館おすすめです。