gaspanik weblog » development

モバイルWeb制作のためのリソース（不完全版）

[cipher] — Sat, 18 Jun 2011 00:11:01 +0000

スマートフォンなどのモバイル向けのWebサイトを作るときに考えておきたいこと、制作に役立つツールなど、その辺りの情報が記載されたWebサイトを仕事でちょっとまとめることがあったので公開します。要は俺ブックマークまとめです。

常日頃溜め込んだものを身近な人たちだけに教えるのはもったいないと思いましてね。さすがに何年も前のは入れてませんし、各種公式資料みたいなものも入れていませんが、昨日今日出た新しい情報までを順不同で入れています。興味のある方はリンク先でお勉強してください（全部英語ですけどね笑）。

※「Responsive Web Design」とか「Adaptive Web Design」とかの情報はほとんど入れていません（抜いてますｗ）。ほぼほぼスマートフォン向けのWeb制作に特化したリンク集です。

Mobile Web Resources, Browsers

Trend, Gallery, Inspiration, Patterns

Design, UI, UX, Usability, Accessibility

Wireframe, Prototype, Stencils

Checker, Tester

JavaScript, jQuery

Frameworks, Libraries

Server, Optimization

Books

誰か訳してくれるまで待ちますか？たぶん、誰も訳しませんよ（笑）。

＃このようなWeb業界の流れや最新情報が必要な方は、ボクのTwitterの別アカウントでもフォローしてください。

Internet Explorer 9 BetaとBingとお前と大五郎

[cipher] — Wed, 15 Sep 2010 19:59:40 +0000

世間的に圧倒的なシェアを持つ（バージョンが混在しすぎてWeb制作者泣かせの）WebブラウザであるInternet Explorerの次期バージョンである9、テストパイロット版はこれまでも公開されていましたが、いよいよパブリックなβ版として公開がはじまったようです、はい。

→ http://www.beautyoftheweb.com/

興味のある方はダウンロードしてみましょう。ボクはWindowsを起動するとアップデート地獄に陥るので当面インストールしません（笑）。

で、それにあわせてマイクロソフトさんとこの「Bing」も刷新された風。

背景がスライドしたり、特定の位置をクリックすると…

もともとコンパクトにまとまっていたBingですが、背景の写真をスライドして入れ替えることができたり、写真内にある特定の囲みにマウスをあわせるとそれに関する情報なんかが提示されるようになってますね（見た目的な話）。

ちなみにこちらは日本語インターフェイス。

こっちが英語（米国）のインターフェイス。

よく見ると検索オプションの位置や表示の仕方が違います。Bingの歩き方、的なHowToページも英語版にはあるようです。

とまぁ、たまには最新ニュースでもと思って書いてみた次第。

＃あ、そうそう近々Googleさんが「Google Me」なんてものを出すとか出さないとかって噂もチラホラ。

Googleさんが立ち上げたHTML5Rocks

[cipher] — Tue, 22 Jun 2010 22:04:07 +0000

皆さん~~いつ来るかわからない未来に向けて~~スマートフォン用のサイト制作に活かそうかな？ってな感じでHTML 5のお勉強真っ盛りでしょうか？

先日AppleでHTML 5はこんなんだぜ！みたいなページが公開されていましたが、今度はGoogleが「HTML5Rocks」というHTML 5のリソースサイトを公開されたようですね（って、これも今知った）。

中身についてはまだ見れてませんが、Twitterを眺めていたら目に入ったので簡単にお知らせまで。頑張りましょう（何を）。

GTmetrixでパフォーマンスチェック

[cipher] — Tue, 22 Jun 2010 21:57:08 +0000

最近Webサイトのパフォーマンス改善がうんたらなことばっかりな気がするこもりです、おはようございます。FirefoxにYSlow!やPage Speedを入れてるのはいいんですが、いちいち個別にチェックするのもなんだかなぁと思っていたのですが、「GTmetrix」なる素敵サイトがあることをたった今知りました…。

こちらのサイトにURLを入れてチェックすると、YSlow!とPage Speedでのチェック結果が表示されます。それに加えてHTTPリクエストの数やロード時間、ウォーターフォールチャートも出るわで至れり尽くせりです。チェック項目の解説なんかも用意されています。

便利です。ありがとうございます（笑）。

Load Impactでパフォーマンステストしてみた

[cipher] — Wed, 10 Mar 2010 09:16:32 +0000

先日の（というか昨日ですが）WordPressのパフォーマンス改善的なネタがどうやら人気らしく、ReTweetしていただいてる数はもちろんですが、うちのブログにしては珍しくはてなやDeliciousなどでも多くブックマークしていただいてるようです（ありがとうございます）。

今朝方「そう言えば…」と思い出して、外部からパフォーマンスチェックができるサービスの一覧へのリンクを入れておきました。で、改めてお礼といってはなんですが、そこにも追加した「Load Impact」さんをちょっと紹介しておこうかな、と。

こちらにも無償で利用できるパフォーマンスチェックツールがありますので、それとあわせてここのサイトのサービスを使えばどういうことが確認できて、どういう対処の仕方があるのかを簡単に書いてみましょう。

同時接続数を変えてロード時間を計測できるLoad Impact

Load Impactは、スウェーデンのとある会社が提供しているオンラインのロードテストサービスです。こちらの主なサービスは、同時に複数のクライアントで接続して負荷をかけてロード時間の平均や使用帯域を計測することができるのが特徴です（お試し版は同時接続数50クライアントまでで一日3サイトまでかな？）。

大規模なアクセスがあるサイトなんかはロードバランサーなんか入ってて負荷分散されてたりするんでしょうが、中小規模のサイトではそうはいきません。とはいえ、プレスリリースやテレビに紹介されたとかで一時的にアクセスが増えてしまうことも考えられます。ホスティングの共用サービスだとサーバのチューニングなんかはできないでしょうけど、ちょっとした負荷でも問題なくアクセスできるようなサイトにしておくことも時には必要になります。備えあれば嬉しいな、です（違）。

インフラが全然ダメなのにいきなり10MBのコンテンツとかダウンロードさせてたら、サーバとクライアントのコネクションがなかなか開放されず、すぐ一杯一杯になることは容易に想像できます（どことは言わんけど笑）。かといって、新しい接続のためにリソースが確保できるかって言うとそこにも限界がありますから、自分とこで対応できる限界を知っておくこともまた大事なわけです。

いろんなUAをシミュレートできるPage Analyzer

この類のサービスを専門にされている会社さんは、大体無償で利用できるパフォーマンス計測ツールを公開されています。Load Impactさんでも「Page Analyzer」なる計測ツールがあります。

ここのツールの特徴は、他のとこよりも格段に豊富なUser Agentsをシミュレートすることができることでしょうか。

IEはもちろん、FirefoxやChrome、Safariなどのいろいろなバージョンが用意されています（ブラウザ毎にコネクション数とか違いますからね *1）。おそらくストックホルムからのアクセスになるはずですが、比較的レイテンシも少なくて良い感じです。

うちのヘボいトップで大体3秒前後。Chartbeatを使って国内からアクセスされている皆さんの様子を見てる感じでは、平均2秒いくかいかないかぐらいですのでまぁ良しと。秒数うんぬんより、UAのシミュレートができるということで便利です。

段階的に同時接続数をあげ、負荷をかけてロード時間を計測する

いよいよ本題に入りましょう。単なるサーバの設定などを確認する負荷テストであれば、専用のツールなどがあるのでそれを使えばいいわけですが、コンテンツの表示にかかる時間となるとどっかからやんないとなかなかわかりません。

が、しかし。このLoad Impactさんのサービスを使えば、段階的に同時接続数をあげて負荷を与えつつ、表示までにかかってる時間をチェックすることができるんですね。しかも同時接続数50までなら無償でチェック可能！、250まで接続数を上げてもたった$9！ってなわけです（どこの通販だと笑）。

ま、そんなわけでですね、とりあえず同時に50クライアントまで増やしながらテストしてみるには無償でも可能です。Webサイトのトップにある入力欄にURL入れて、上の図の左のFreeテストに進めばチェックできます。

ただし、チェック結果の保存にはアカウントの登録が必要だったかな？アカウント登録しても最初はFree版なので大丈夫ですけどね。

有償版は同時接続数をもっと増やしたり、細かな設定をした上でテストが可能になっています。画面見ただけだとちょっとわかりにくいのですが、$9/per dayってなってるのは「24時間内にテストする」ワンタイムフィーみたいなもんです（他にもオプションがあります）。

有償でもそんなビックリする値段じゃないですし、ある程度の規模での同時アクセスが見込まれるコンテンツなどを制作されている方にはいいかもしれません。自分の作ってるコンテンツの限界点を知るためにも、とりあえず試してみるのが一番（笑）。

とりあえず試してみたらこうなった

いや、実はちょっと前からWordPressの設定やサーバの設定をいじってはチェックしていたんですけど、今回同時に100クライアントまで増やしてロード時間を計測してみました。一番安いプランではスウェーデンのストックホルムからしか計れなかったので、とりあえずそれで。

テストにはそれなりに時間がかかりますので、コーヒー飲んでたりしてればそのうち終わります（テスト数による）。この図は、10クライアントから段階的に10ずつ増やし、最終的に100クライアントの同時アクセスまでの結果です。

グラフの線は、できるだけ横方向に同じような状態が良いのは言うまでもないですかね。グラフの縦は表示までの秒数になっています。80クライアントのとこでちょっとだけあがってますけど、広い目で見ればストックホルムからでほぼ3秒前後なので良しとしましょう。

例えばグラフがこういうことになったら、サーバ側の設定をちょっと変更したりする必要があるかな？と。40クライアントが同時アクセスしてきたらガクッと時間がかかり始めたとか、そういうことがわかるわけです。このグラフの形によって意味があるので、それはフォーラムで解説されています（英語だけど笑）。

最後に。ちゃんとアクセスされてます（笑）

「ホントにアクセスされてんの？」とか疑う方もいらっしゃるかもしれないので（笑）、うちのサーバを監視してる「MUNIN」の画面を出しておきます。

上の図はApacheのプロセスの数を表示したグラフです。左側の縦2つのグラフの右端がガクッとあがってますが、この時がLoad Impactで負荷テストをしている時間です（50と100と2回やってるので2箇所だけ急激にあがってますね）。

WebサーバのApacheはアクセスが増えれば自動的にプロセスを増やす仕組みになってるので良いとはいえ、テストしたらある数値から急激に時間がかかってる場合などは、サーバ側の設定やらコンテンツの作り方などもろもろを見直したりした方がいいかもしれませんね。

サーバの設定をいじるなんてみんながみんなできるわけではありませんし、システムのチューニングは餅は餅屋で任せた方が良いとは思います。でもまぁ、一応こういう負荷テストを使って、コンテンツの弱点を探すってのもありじゃないかな？と思ったので簡単にご紹介まで。

うちもとりあえず「100人乗っても大丈夫」のようです。

*1: ブラウザのバージョン毎の仕様はこちらが詳しいです

「標準ウェブ制作完全ガイド」が発売されました

[cipher] — Wed, 24 Feb 2010 04:56:12 +0000

ちょっと前に軽く紹介していた『標準ウェブ制作完全ガイド ~ プランニングからデザイン、そしてシステム構築まで。Webの「仕事」がトータルに理解できるプロフェッショナル養成講座（MdN刊）』が書店に並び始めたようです。

標準ウェブ制作完全ガイド〜プランニングからデザイン、そしてシステム構築まで。Webの「仕事」がトータルに理解できるプロフェッショナル養成講座。: 松岡清一監修／MdN編集部編

で、肝心の内容はといいますと…、

「Web業界で一流を目指す、すべての方に」といった感じで

Web制作に関わるすべての方に向けて、プロとして必要な最先端の知識を1冊にまとめました。プランニングからデザイン、そしてシステム構築まで、 Web制作の「現場」の仕事で必要とされる常識や仕事の流れを解説しています。PLAN［設計・プランニング］→DO［制作・実装・デザイン］→SEE［効果・検証・解析］の3段階の構成でWeb業界の「現在」がトータルにわかる、プロフェッショナルのための教科書。
http://www.mdn.co.jp/di/book/6102/

こんな感じで、Webサイトの企画立案的なことから制作や開発、公開後の話にいたるまで。いまどきのWeb制作において「これぐらいは知っておきたい」といったことを総合的にまとめたようなものです。

これからWeb業界に飛び込みたい方、今もう働いているけど次へのステップアップを考えてる方などに最適かと。分業化が進んでいる時代ですので、自分の担当する職域以外がどのようなことをしているのかなどもわかるんじゃないかと思います。

→ 標準ウェブ制作完全ガイド（MdN Design Interactive: 目次あり）
→ 標準ウェブ制作完全ガイド（impress Direct: 見本・目次あり）
→ 標準ウェブ制作完全ガイド（Amazon.co.jp）

実は半年間の…（笑）

実はこちら著者名にこそ出ておりませんが、わたくしも企画段階から参加させていただいておりまして、本書には半年超の思い入れがあるのです…。巻末に執筆者のリストとともに担当パートが記載されていますが、まぁ340Pもある分厚い書籍で執筆いただいてる方も多いので、軽く自身の担当分を明記しておきます。

執筆は、主にPart 2の制作・実装・デザイン的なパートを担当しております。私ひとりでやってる項目と各Partで本文の執筆協力をしている項目がいくつかあるので結構な量になっております（笑）。※担当箇所は項目番号です

Part 1: 025（すべて）／050-055（本文執筆協力）
Part 2: 089-115（すべて）／116-123（本文執筆協力）
Part 3: 140-142（本文執筆協力）

というわけで、本屋さんでお見かけの際にはお手にとって~~そのままレジへ~~、パラパラと内容等をチェックしていただければ幸いです。340P、読み応えあります。

Googleさんの動きが気になる、今日この頃

[cipher] — Fri, 04 Dec 2009 05:05:19 +0000

最近Googleさんの動きがいろんな意味で活発です。Chrome OSやら日本語入力やらといった部分はもちろんですが、Webサイト制作やSEO的な部分にも深く関わりそうな動きもあります。

11月の半ばぐらいに「Googleの検索結果表示のアルゴリズムの一指標としてページの表示速度も加味するかもね」的な発言（元ソースはこれかな）があったり、Webをさらに速くするための技術にあたる「SPDY（スピーディって読むらしい）」についてアナウンスしたり、やたらと表示スピード（パフォーマンス）に関するものが増えてきました。

気になる気になる、あー気になる（笑）

さらに追い打ちをかけるように12月に入って早々、今度はGoogle Analyticsのコードを非同期モードで動作させる改良版のコードが公開されたり（まだβ版です。元ソースはこちら）、Google Webmaster Toolsの中にWebサイトの表示速度の統計が出るようになってます（下図）。

こんな感じでGoogleからアクセスした場合の数ヶ月間の平均ロード時間が表示されます。ちなみにこのサイトは、今日現在1.7秒と出てます（*1）。

前述のGoogle Analyticsのコードは、実際Webサイト表示のボトルネックになってる場合があって、最近特にそれで引っかかってたのも事実です。うちは試しに変更してみましたけど、喉のつっかえが取れた感じで速くなりました。

さらにさらに昨日今日の話ですが、DNSのルックアップ時間の短縮という名目で「Google Public DNS」の登場です（現在はアメリカ国内向けっぽいけど）。とまぁ、11月の半ばの発言を後押しするかのような動きなんですよね…。

検索のもう一つの巨頭、Yahoo!さんも以前からWebサイトの表示速度の改善には力を入れてるわけで、Firefoxのアドオンである「YSlow!」やドキュメントがかなり前から公開されてます。この辺はGoogleさんも同じように「PageSpeed」というアドオンとドキュメントをリリースしてます。

ちなみにAmazonさんの関連企業であるAlexaでは、TOP100のサイトの情報ページにサイトの平均ロード時間が表示されてまして、「1秒以下だと超速い。2秒以下だと速い。3秒以下で平均、それ以降は話にならない（嘘、遅いとか超遅いです笑）」的な表示が出るようになっています。

別に脅すつもりはないですが、皆さんのWebサイト大丈夫ですか？いや、正直なところ。8秒ルールとかあれもう古すぎますから。今3秒以下ですよ…。

ま、そんなわけでうちのブログで4月のエイプリルフールに冗談交じりで上げたクソみたいなエントリーがあるのですが（笑）、これをもう少し真面目に解説するエントリーを近々あげようかと思ってます、という予告のためのエントリーです。

*1: うちはWordPressを使ったブログですから、PHPがページを作ってブラウザに送るまでの時間がマシンパワーなんかに左右される部分もあったり、自宅サーバで回線が細いうえにいくつかのWebサイトが動いてるため、できるかぎりパフォーマンスをあげるためのアレコレをやってます（試行錯誤の様子が上のグラフにも出てますね笑）。