カテゴリー別アーカイブ: Webテクノロジ

Web Automobile Firewallという考え方

今回は、めずらしく妄想系のハナシを書きたいと思います。

昨今、自動車業界が「自動運転」で騒がしい事はご存知だと思います。ブームの発端は Google X のプロジェクト なワケですが、中でも「セキュリティ」が盛り上がりを見せています。

つい先日も BMW がセキュリティ上の欠陥を見つけた とか、DARPAのハッカーが、衛星通信サービスの脆弱性をついて GM のコンピュータ・ソフトウェアを書き換え、ホーンを勝手に鳴らすのはご愛嬌としても、ブレーキを利かなく出来る という問題が騒がれました。期せずして、自動車業界にはセキュリティの専門家がいないということを露呈しちゃったワケです。

続きを読む

Future of Responsive Images

レスポンシブデザインの進化はWebの常識を変えるか?

ある記事 によれば、レスポンシブ Web デザインを採用するサイトの 72% が、デスクトップとモバイルに同じリソースが使われているそうです。またそれらリソースの 60% 以上が画像 という統計や、モバイル用に画像を最適化すれば、データ量を 72.2% 削減できる という調査結果もあります。

ということで、レスポンシブ画像のことを調べていていましたが、その技術進化というか、紆余曲折も含めて色々とある様です。

最新技術を素早く取り入れることはもちろん大事ですが、特に過渡期においては、変化に強いサイトを作るためにも技術の先行きを見極めることが重要です。そこでタイトルのような視点で、これまでの経緯をつらつらと辿ってみました。

自分としてのテーマは、「じゃあ、今、どうするか?」だったのですが…。読んで下さる方の何かに役立つかどうかは甚だ心もとない記事です。

ちなみに今回記事で取り上げた話題については、レスポンシブ画像のデモ に、もう少し掘り下げて展示しています。そちらもぜひ覗いてみて下さい!

続きを読む

IP Address Geolocation RESTful APIs

IPアドレスの地理的位置情報が引ける無料RESTful API集

IP アドレスからサーバーの地理的位置情報(Geolocation)を調べてくれるオンライン・サービスは、ちょっと検索すればすぐに見つかりますし、有料のサービスも山ほどあります。が、サーバーから任意の IP アドレスが引ける無料のサービスとなると、ちょっと時間をかけて検索しなければなりません。

今回は、海外からのコメント・スパムをブロックする WordPress プラグインを作りたくて、タイトルの様なサービスを調べてみました。

IP Geolocation の歴史も調べてみましたので、雑学系としてもご覧ください。

続きを読む

特集:GitHub通のためのリニューアルまとめ – ビジネスを成功に導く5つの仕掛け

これまでも サービスAPI の更新や、それに伴う UI の変更など、小刻みな機能向上が図られていましたが、昨年11月、GitHub の ヘッダ、フッタが新しくなった のを皮切りに、12月には Gist のリニューアルGitHub トップページのリニューアル が立て続けに行われました。

また今年1月には、ユーザー数が、アカウントベースで300万人を超えた そうです。

小さくかつ素早く、不断のサービス向上を図る姿勢が、ここまでユーザーを惹き付けた理由なのでしょう。

一方、公式ブログ を追いかけていくと、単に Git のリポジトリ・サーバーとして便利で使い易くする以上に、「自然に人が集まる魅力的なコミュニティ」を目指し、「誰もが気軽に参加できるオープンソース・コミュニティを創る」という意気込みのようなものを感じました。

人が集まれば、それだけビジネスの機会も増えるというワケです。

そこで今回は、「次の目標:ユーザー数500万」という想定で、リニューアルの狙いを次の5つの仕掛けとしてまとめてみました。

続きを読む

Respond.jsとレスポンシブWebデザインをめぐるベストプラクティス議論

How are you responsive?

2012年2月、Modernizr 2.5 の カスタム・ビルダー から Respond.js が外されました。理由は、HTML5 Boilerplate (以下 H5BP) コミュニティでの決定です。Respond.js は、IE8 以下などのメディアクエリ未対応なブラウザにもその代替え機能を提供するスクリプトで、レスポンシブ Web デザイン を支えるスクリプトとして、H5BP に長らく (8ヶ月) 採用されてきた経緯があります。

ではなぜ、Respond.js は外されたのでしょう?

今回は、その決定を下した長~い議論 Issue #816: Revert mobile-first media queries and remove respond.js から、ベスト・プラクティスの要点と、Paul Irish の考える H5BP の理想像を読み解いてみたいと思います。

ヘタクソで読みづらいですが、日本語訳 も作りましたので、どうぞ 🙂 。

続きを読む

HTML5 Boilerplate, Initializrをこれから使う人が押さえるべき5つの原則

HTML5 logo

boilerplate とは、「再利用を意図した標準的な文例集」 だそうです。

Paul Irish が中心となり構築されてきた HTML5 Boilerplate は、その名の通り HTML5 でサイトを構築するためのテンプレート、さらにはフレームワークをも含む内容となっており、その特徴は次のように語られています。

HTML5 Boilerplate は、HTML5 を扱う上で必要な数多くの機能強化を他のベスト・プラクティスの数々と組み合わせることで、最小限の先行投資でプロジェクトの磐石な基盤を提供します。

2011年02月08日 HTML5 Boilerplate を使用して Web 開発を容易に始める | IBM developerWorks より。

HTML5 Boilerplateをベースにすることで最初からベストプラクティスが適用されたサイトやページを構築できるという特徴がある。

2011年08月15日 待望のHTML5ベストプラクティス「HTML5 Boilerplate」バージョン2登場 | マイナビニュース より。

ここで言う ベストプラクティス とは、ブラウザ違いを吸収し効率の良い JavaScript や CSS のコードを書くためのノウハウはもちろん、Yahoo! の 「Best Practices for Speeding Up Your Web Site」 や Google の 「Web Performance Best Practices」 にまとめられている、主に応答性のよいサイトを作るためのフロントエンド改善策を指しているものと思われます。

また、HTML5 Boilerplate のお手軽なサブセットとなっている Initialir には、「簡単に」 とか 「さくさく」 とかの形容詞が付けられて紹介されています。

さて、実際にこれらのテンプレートを使ってみると、ベストプラクティス という一言で、または単に 「かんたん、サクサク」 という一言で終わらせるのはもったいない、という気がしました。そこで、近年の技術トレンドに照らし合わせて 「5つの原則」 という形にまとめ、それらがどのようにテンプレートに織り込んであるかを考えてみました。

これからこのテンプレートでサイトを構築してみようという方の参考になれば幸いです 😀 。
続きを読む

CCV.jsで顔検出

Face Detection Using CCV.js

CCV.js (C-based Computer Vision Library) は、オープンソースな画像処理ライブラリ OpenCV の純粋なアルゴリズム部分を一部 JavaScript に移植したライブラリです。しかも元のライブラリではかなりの仮想化・階層化されていた画像処理用メモリ管理部分を簡素化し、Canvas で扱えるようにしてありますので、現在のモダンブラウザでも動作する軽量なライブラリとなっています。

ライブラリとはいうものの、現時点はまだ物体検出のアルゴリズムしか移植されていないようなのですが、顔検出のサンプルがありましたので試してみました。
続きを読む

クッキーによるトラッキングをリアルタイムで可視化するFirefoxアドオン

collusion

ネットサーフィンを楽しんだ後に、ブラウザの胃袋いっぱいに食べさせられたクッキーを見てみると、「こんなに!」 と思った事ありませんか? おそらくこれらのクッキーは、どこから来て、どこを訪れたのか、私たちの行動をトラッキングをしていたんだろうなぁ、と漠然とは思っても、現実感がイマイチわかないのはなぜでしょうか?

Collusion は、クッキーによるトラッキングをリアルタイムでグラフとして可視化してくれる Firefox 5 のアドオンです。これをインストールしてネットサーフィンをしてみて下さい。思わずゾッとするほど、グラフが成長しているのを見る事になるでしょう。
続きを読む

jQueryで被災前後の衛星写真を比較

仙台空港(被災前)
仙台空港(被災後)

今回の大地震で、被害に遭われた方々へお悔やみを申し上げるとともに、被災地の、一日も早い復興を心よりお祈りいたします。

私の親族も、あの壊滅的打撃を受けた陸前高田市に住んでいますので (無事が確認できました!)、その住所付近の被害状況が衛星写真で分からないかと思っていたら、さすが 「科学技術で困難な課題を解決する」 をモットーにする Google、既にいくつかを公開 していましたネ。

この高解像度画像を元に、ABC News が jQuery を使った 比較記事 を公開しているので紹介します。元記事では、マウスを動かすと、2つの画像を比較する事が出来るようになっています。

被災後が全体的に茶色く見えるのは、泥水だと思います。
続きを読む

Safari5の環境変数でレンダリングの様子を可視化する裏技

CA_COLOR_OPAQUE=1を指定

ブラウザにとって、半透明をブレンドして表示するのは負荷が高いものです。特に、iPhone などのモバイル端末向けのコンテンツは、出来るだけページを軽くしておきたいものです。ページ中でこのような負荷の高いレンダリングが必要な箇所を色分けで表示してくれる便利な (!?) オプションが Safari5 にはあります。

上の図は、このオプションを指定して、アップルのスタート・ページ を表示させたときの様子です。transparentiframeallowtransparency が使われている箇所が赤く表示されています。

MacOS には Core Animation という、1種の アニメーション・フレームワーク が使われていて、こいつにデバッグ用のフラグを設定してやると、レンダリングの様子が色分けされたり、レンダリング・ツリーの情報がコンソールにダンプされたりするというものです。
続きを読む