週刊Webテク通信

2012年8月第4週号 1位は,モバイル専用サイト VS レスポンシブサイト,気になるネタは,FacebookのiOSアプリが2倍も高速化

この記事を読むのに必要な時間:およそ 2 分

ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から,Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は,2012年8月20日~2012年8月26日の間に見つけた記事のベスト5です。

1. Separate Mobile Website Vs. Responsive Website | Smashing Mobilehttp://mobile.smashingmagazine.com/2012/08/22/separate-mobile-responsive-website-presidential-smackdown/

モバイル向けサイトを別途制作するか,レスポンシブなサイトにするかについて,大統領候補2人のサイトを例に解説しています。

オバマ大統領のサイトはレスポンシブWebデザインのサイトで,大統領候補のロムニー氏のサイトはパソコン向けとは別にモバイル向けサイトがあります。この2人の候補の対決と,モバイル専用サイトとレスポンシブサイトとの対決とを絡めたアイデアが面白いですね。

  • アクセシビリティ
  • 操作性(ナビゲーション,スクロール)
  • 読み込み速度
  • モバイルサイト独自の強化ポイント

といった項目について,それぞれの問題点などを指摘しています。

図1 モバイル専用サイト VS レスポンシブサイト

図1 モバイル専用サイト VS レスポンシブサイト

2. CSSスプライトについてあれこれ。http://lopan.jp/css-sprites/

CSSスプライトについて,メリット/デメリットや実装方法についてまとめた記事です。CSSスプライトを利用する際に役立つ,画像置換の方法についてかなり細かく解説しています。

ナビゲーションメニューの画像置換の話が延々と続き,本来アイコンなど小さなイメージに使うCSSスプライトの話題としてはちょっと違和感を感じたのですが,最後の結論への前振りだったんだと思って納得しました。

図2 CSSスプライトについて解説

図2 CSSスプライトについて解説

3. アイデアをどこでも形に!Dreamweaver+Proto連携 ~Adobe Creative Cloudの上手な活用法 (1/7):CodeZinehttp://codezine.jp/article/detail/6721

iPadやAndroidタブレットでワイヤーフレームが作れるアプリ「Adobe Proto」を紹介しています。ラフに描いた図形がきちっとしたエレメントに変換される,ストロークジェスチャーによる描画スタイルは楽しそうです。

Protoで作成したワイヤーフレームは,Adobe Creative Cloudを経由してDreamweaverで開くことができます。

図3 タブレット端末向けワイヤーフレーム作成アプリを紹介

図3 タブレット端末向けワイヤーフレーム作成アプリを紹介

4. A New Showcase Of HTML5 And CSS3 Based Sites For Inspirationhttp://www.designyourway.net/blog/inspiration/a-new-showcase-of-html5-and-css3-based-sites-for-inspiration/

HTML5&CSS3を利用したサイトのショーケースです。

デザインに力を入れてあり,ナビゲーションに工夫を凝らしたサイトばかりです。

図4 インスピレーションを受けられるHTML5&CSS3サイトのショーケース

図4 インスピレーションを受けられるHTML5&CSS3サイトのショーケース

5. 「CSS3を使って美しく装飾されたテーブルの作り方|Webpark」のサンプルを LESS で作ってみた | TM Lifehttp://tmlife.net/web/less/css-decoration-table-less.html

CSS3を使って美しく装飾されたテーブルの作り方|WebparkをLESSに対応させたコードの紹介と,LESSを使った部分の解説です。

LESSを使うことで,ベースとなるカラーの変更や,幅や高さの調整が簡単にできるようになっています。

図5 テーブルを装飾するCSSをLESSに対応

図5 テーブルを装飾するCSSをLESSに対応

そのほか,最近の記事の中から,気になるニュース記事を3つ紹介します。

先週の気になるWebサービス

SoundGeckohttp://soundgecko.com/

SoundGeckoは,URLを入力するとそのページの英文をMP3ファイルに変換してくれるWebサービスです。本当に誰かが喋っているような自然な音声になっていて驚かされます。

英語圏の人にとっては,サイトの記事を耳で聞けるようになって便利というサービスですが,われわれにとっては英語の勉強にも使える魅力的なサービスですね。

そのページの本文部分を認識して,そこだけを音声化するような仕組みになっているようです。Chromeのエクステンションで変換させることも可能です。

ユーザー登録すると,変換した音声ファイルを管理することができるようになります。iPhoneアプリで聞いたり,自動的にDropboxかGoogle Driveに保存するように設定したり,ポッドキャストとして聞くことができるなど,いろいろなオプションが用意されています。

図5 英文の音声変換サービス

図5 英文の音声変換サービス

今週の気になるWebネタ

FacebookのiOSアプリが2倍も高速化―メッセンジャーも本体アプリに統合http://jp.techcrunch.com/archives/20120823facebook-for-ios-faster/

FacebookのiOSアプリがバージョンアップして格段に高速化しました。公式ながらイマイチという声の多かったFacebookアプリですが,確かにストレス無く動くようになったように感じます。

これまでのアプリはHTML5ベースだったのに対し,今回のバージョンはObjective-Cで書いたために高速化されたということです。Android版も近いうちに,同様に高速化したバージョンがリリースされる予定とのこと。

遅いと評判だった外部リンクを開く処理も,速くなったようです。画像のアップロードに失敗したときに,ちゃんとメッセージが出て再度アップロードできるようになったところが,個人的にはうれしいところ。

メッセンジャーが統合されたということですが,単体のメッセンジャーアプリはそれはそれで便利だと思うので,残して欲しいと思うのですがどうなんでしょう。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/

コメント

コメントの記入