サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
iPad Air
www.onflow.jp
ApacheにはコンテンツのMIME-typeに応じてフィルターをかけるAddOutputFilterByTypeディレクティブがありますが、Apache 2.1 以降で非推奨になり、代わりにmod_filterでフィルターをかけることが勧められているようです。 しかしながら、mod_filterの実例があまりにも少ないため、どう使っていいか分からないのが現状です。なので、AddOutputFilterByType DEFLATE text/htmlを書き換えてみることにしました。 mod_deflateのドキュメントには、実例として画像以外をすべて圧縮する方法が以下のように書かれています。 <Location /> # Insert filter SetOutputFilter DEFLATE # Netscape 4.x has some problems... BrowserMatc
普通に考えると、パスワードを認証後のHTTPレスポンスヘッダ(*1の部分)で Location: http://www.exmaple.com/logined.html とかすればいいんじゃないの？と思うのですが、そうするとIEで「セキュリティーで保護されていないページに移動しようとしています」というような警告ダイアログが出てきてしまいます。 そんな警告ダイアログが出るのはユーザーフレンドリーじゃないので、それを防ぐ方法。 解決方法は簡単で、レスポンスヘッダで対応できないならレスポンスボディーで対処すればOK（Yahoo!なんかもこの方法を使っているようです）。たとえば、認証後、*1のところで以下のようなHTMLを返してあげれば、ブラウザがHTTPなページにリダイレクトしてくれるわけです。 <html> <head> <meta http-equiv="refresh" content="
prototype.jsを10KBにする方法やSafari と gzip 圧縮 JavaScriptなどですでに述べられてることですが、mod_deflateでリクエストがある度にアセット（CSSやJavaScript）にdeflate圧縮をかけるのは、deflate処理が軽いからと言っても、塵も積もれば馬鹿にならない（WWWサーバーやAPサーバーに本来使って欲しいCPUリソースを蝕む）訳で、deflateしたいアセットには予めgzip圧縮してそれを配信し、サーバーのCPUリソースに優しいようにしましょう、というお話。 今回は、予めgzip圧縮するという作業を自動化するために、Railsでよく使われるデプロイツールであるCapistranoを利用します。 基本的な方針としては、(1)ローカルの開発環境上ではCSSやJavaScriptは非圧縮（編集しやすいように）、(2)サーバー上にデプロ
CSS属性フォーマット Version 0.2 をリリースしました。この拡張機能はCSSのセレクタ内の属性を指定した順番にフォーマットしてくれるものです。Version 0.2では属性を整列する順番を設定するダイアログを付けました。 CSS属性フォーマット Version 0.2をリリースしました。この拡張機能を使うとバラバラになりがちなCSSの属性を、位置を指定するもの→ボーダーを指定するもの→・・・といった具合にに並び替えることが出来ます。この拡張機能はDreamweaver 4以降で動きます（MX2004でしか検証してませんが…）。インストール方法は上のリンクからCSS_AttrFormat020.mxpをダウンロードしてダブルクリックするとExtensionManagerが立ち上がり、自動的にインストールされます。 この拡張機能はCSSのセレクタ内の属性を指定した順番にフォーマット
GoogleがGoogle Data APIs (Beta) Developer’s Guideを公開しました。 Google Data APIs (略称はGData)というのは何かというと、RSSとAtomを組み合わせてそれを拡張したもので、フィードを取得したり、Atom publishing protocolを使ってデータを作成したり更新したり、また全文検索などのデータの問い合わせをできるようにしたプロトコルです。 GoogleのAPI戦略に新たな動き、GDataで「Google Calendar」のAPI公開 (MYCOM PC WEB)に簡単な説明が載っているので引用します。 REST、Atom 1.0およびRSS 2.0をベースにした新しいプロトコルである。GDataをサポートするサービスから情報を取得する場合、クライアントはHTTP GETリクエストを送り、サービスはAtomま
ユーザーがページをロード開始してから閲覧できるようになるまでのロード時間はユーザーが自分のページを快適に閲覧できているかどうかを示す重要なファクターです。Google Analyticsのイベントという機能を使用することで、ユーザーの実際の体感速度を可視化することができます。 たとえば、このブログのある期間における体感速度のグラフはGoogle Analytics上で以下のように出ています。 44.84%のユーザーは100〜499msでロードできており、1秒未満でロード完了しているユーザーは合わせて73.49%であるとわかります。また、3秒以上かかっているユーザーも7.42%居ることも分かります。3秒以上ロードにかかるようだと離脱率も高くなるので、7.42%のユーザーに対して何かの施策が必要であるということも分かります。 このように、ユーザーが実際感じている体感速度を可視化することで、この
前回まではmod_proxy_balancerで中〜大規模サーバーを運用するときの勘所をお話ししてきました。 これ以外にもmod_proxy_balancerな中〜大規模サーバーで気をつけるべき点はあります。それがiptablesとip_conntrack。 外部に直接晒されているサーバーはセキュリティーを確保するためにiptablesなどのファイヤウォールを導入しているかと思います。アクセス数がある程度以上になってくると、そのファイヤウォールが思わぬ足かせになってしまうと言うお話です。 iptablesはパケットフィルタリングを行うソフトウェアです。PCに入ってきたり、逆にPCから出て行くパケットを監視し、ルールに従い適宜フィルタリングを行います。 さて、iptablesでは、関連したパケットを追跡するために/proc/net/ip_conntrackというファイルを作り、パケットの情報
Apache2.2から、ロードバランシングをしてくれるmod_proxy_balancer というモジュールが標準添付になりました。 このモジュール、その名前の通り、ApacheレベルでHTTPリクエストをバックエンドのサーバーに振り分けることでロードバランシングをしてくれるモジュールです。 Apacheの公式ドキュメントや試しに入れてみた人のBlogなどは散見されますが、実際の現場で運用している事例というのはまだ無いようです。 そこで、実際にピーク時にover 500 request/secでmod_proxy_balancerなサーバーを運用している経験をふまえ、つまずいた点などを公開していきたいと思います。 今回は、ProxyPassディレクティブに渡すパラメーターのチューニングについてです。前回までの設定ではhttpd.confに以下のように書いていたかと思います。 ProxyRe
Google Analyticsでは、従来のページビューというメトリクスのほかにイベントという単位でもデータを集計できるようになりました。 従来通りGoogle Analyticsの_trackPageview()関数でイベント（例えば、あるリンクをクリックしたなど）を追跡することもできます。ただ、_trackPageview()を使う弱点は、その名前の通りページビューとしてカウントしてしまうので、ページビューをサイトの分析指標に使用している場合、実際のページビューと、Analytics上でのページビューがずれてしまう点にあります。 Event Trackingでは、イベントという別のデータとしてトラックするデータを扱うため、Analytics上でのページビューデータを狂わせることなく、イベントを追跡できます。 ただ、Event TrackingはClosed Betaということで、申し込
最近はstrict XHTMLを使ってWebページを製作することが多くなったのですが、そういった場合Flashをどうやって表示させるかは悩みどころ。というのは、embedタグはXHTMLには定義されていないからです。embedタグを使わないとFirefoxやNetscape系でFlashを表示させることができないと思われがちですが、そうでもないようです。 SG::Acme : Flashをstrict XHTMLで。では、XHTMLで定義されているobjectタグだけを使ってFlashを表示させる方法を紹介しています。objectタグにどの属性をつけてどの属性を取り除くのかがポイントのようですね。 この件に関する詳しい議論はリンク先を読んでいただくとして、どのブラウザでもobjectタグのみで表示するのに最低限必要なコードは以下の通り。 <object data="fma.swf" wid
Eolasの特許回避のため、2006年4月の月例パッチでInternetExplorerのActiveX周りに変更が加えられました。 具体的には、従来のようにHTMLページ内にobjectタグやembedタグでFlashを表示するように記述した場合、Flash上にマウスカーソルを持って行くと「このコントロールをアクティブ化して使用するにはクリックしてください」 と表示され、そのFlashがクリックを受け付けたり、マウスの位置情報を取得したりするためには（インタラクティブに振る舞うには）、一旦Flash上でクリックなどをしてFlashコントロールをアクティブ化しなくてはならなくなりました。 これの回避方法として、外部JavaScriptによって動的にobjectタグやembedタグを書き出す方法があるのですが、Adobeが公開している対策スクリプトがいまいちだったので、自作しました。 ダウン
Apache2.2から、ロードバランシングをしてくれるmod_proxy_balancer というモジュールが標準添付になりました。 このモジュール、その名前の通り、ApacheレベルでHTTPリクエストをバックエンドのサーバーに振り分けることでロードバランシングをしてくれるモジュールです。 Apacheの公式ドキュメントや試しに入れてみた人のBlogなどは散見されますが、実際の現場で運用している事例というのはまだ無いようです。 そこで、実際にピーク時にover 500 request/secでmod_proxy_balancerなサーバーを運用している経験をふまえ、つまずいた点などを公開していきたいと思います。 今回は、BalancerMemberディレクティブに渡すパラメーターのチューニングについてです。前回までの設定ではhttpd.confに以下のように書いていたかと思います。 Pr
自宅で使える固定IPサービスは数あれど、プロバイダ付属のものはプロバイダー料金を含めると月額4,000円ぐらい行ってしまったりするし、安いものはサポートが雑だったり解約が60日前通告だったりと不便だったりします。 そんな中、かつてISP事業をしていたライブドアがlivedoorビジネスインターネット・ライトでBフレッツ向けの固定IPサービスを月額1,500円で提供しています。2009年2月28日までに申し込んだ人は、申込月と翌月・翌々月分の月額利用料が無料キャンペーン中です。 livedoorビジネスインターネット・ライトは実態としては普通のISPと変わりません。OCNなど大手だとメールアドレスが付属しますが、このサービスには付いてきません。ただ、固定IPの申し込みの際にlivedoor IDの取得が必要となるので、そのついでにlivedoorのメールアドレスを取得するのも手ですし、今だっ
naoyaさんが公開されてるInside Hatena Bookmark’s Backend の資料などを読むと、mod_perlなサーバーやMySQLサーバーの選び方の参考になったりするわけですが、世の中を見渡してみても、静的コンテンツ（画像とか）を配信するサーバーの指南書らしきものはなかなか見あたりませんでした。 なので、経験を元に書いてみることにします。 弊社の画像配信サーバーには、平均10kbぐらい（たぶん）の画像が30万個ぐらいあって、それをDell PowerEdge 1750+lighttpdを使って配信してます。 以前は搭載メモリ1GBのサーバーを使っていたのですが、その時のvmstatがこのような感じ。 procs -----------memory---------- ---swap-- -----io---- --system-- ----cpu---- r b sw
EveryZingという、動画に特化した音声認識技術を提供している企業の紹介。彼らの提供するezSEARCHは、動画中の音声を自動で”テープ起こし”してくれるSaaSのサービス。つまり、動画中で人間の喋った言葉をテキストに変換してくれます。それだけでなく、その喋ったテキストに対し全文検索をかけ、さらに動画中でその言葉を発した時間に飛ぶ機能まで付いています。ニュースサイトBoston.comなどはEveryZingの顧客です。 Boston.comの動画にはEveryZingのezSEARCHが使用されており、例えば「Obama」で検索すると、Boston.comが持っている動画で「Obama」と喋っている人がいる動画の検索結果が表示されます。 また、吹き出しの中の「Obama」のリンクをクリックすると、動画中の「Obama」と発した時刻付近に飛ぶことが出来ます（オレンジの丸が付いているとこ
ストレージサービスというとDropBoxやMemopalなどが有名ですが、どれもローカルにサーバーにアップロードしているもの完全なコピーを置いておかないといけないので、HDDが小さなネットブックなどでは使うのが少し大変です。 そこで、基本的にはすべてサーバー側に置いておいて、ファイルが必要なときに自動的にローカルに持ってくるというZumoDriveというサービスが出てきました。 使い方はDropBoxなどと同じ。ソフトを起動すると仮想のディスクドライブが1つ作成されます。そこにファイルを入れると自動的にZumoDriveのサーバーにアップロードされます。後は普通のオンラインストレージと使い勝手は変わりません。 特記事項は、やはりローカルに置いておくキャッシュ容量を調整できる点でしょうか。キャッシュを3GB程度に制限し、3GBから溢れたファイルはサーバーから適宜取ってくるという設定にしておく
Apache2.2から、ロードバランシングをしてくれるmod_proxy_balancer というモジュールが標準添付になりました。 このモジュール、その名前の通り、ApacheレベルでHTTPリクエストをバックエンドのサーバーに振り分けることでロードバランシングをしてくれるモジュールです。 Apacheの公式ドキュメントや試しに入れてみた人のBlogなどは散見されますが、実際の現場で運用している事例というのはまだ無いようです。 そこで、実際にピーク時にover 500 request/secでmod_proxy_balancerなサーバーを運用している経験をふまえ、つまずいた点などを公開していきたいと思います。 今回は、mod_deflateと組み合わせる際の注意点です。前回までの設定ではhttpd.confに以下のように書いていたかと思います。 ProxyRequests Off Pr
Apache2.2から、ロードバランシングをしてくれるmod_proxy_balancer というモジュールが標準添付になりました。 このモジュール、その名前の通り、ApacheレベルでHTTPリクエストをバックエンドのサーバーに振り分けることでロードバランシングをしてくれるモジュールです。 Apacheの公式ドキュメントや試しに入れてみた人のBlogなどは散見されますが、実際の現場で運用している事例というのはまだ無いようです。 そこで、実際にピーク時にover 500 request/secでmod_proxy_balancerなサーバーを運用している経験をふまえ、つまずいた点などを公開していきたいと思います。 まず、mod_proxy_balancerの設定から。よく、httpd.confでこのようになっている設定例を見かけます。 ProxyRequests Off ProxyPass
WindowsにはFreeCapというソフトウェアがあり、これを使うとSOCKS非対応のアプリケーションでもSOCKS経由で通信できるようになります。 今時SOCKSなんていつ使うんだよ、と思われるかもしれないですが、意外と使うのです。弊社はゲートウェイになっているサーバーがあり、そのサーバー経由でグローバルIPを持っていないデータベースサーバーやアプリケーションサーバーに接続してMySQL Query Browserなどを使っています。図解すると以下のような感じになります（SOCKSなので、DBサーバーからはあたかもゲートウェイサーバーからアクセスがあったように見えます）。 自分のPC --(SSH tunnel)--> ゲートウェイサーバー(SOCKSサーバー) ---> DBサーバー or APサーバー Windowsであれば前述のFreeCapを使えば、SOCKS非対応のMySQL
GoogleカレンダーとMacのiCalとの同期にはBusyMacを使っていたのですが、ついにGoogleカレンダーがCalDavをサポートしました。 使い方はGoogleカレンダーヘルプセンター Google Calendar CalDAV supportを参照してください。 基本的には、example@gmail.comでGoogleカレンダーを持っている場合、https://www.google.com/calendar/dav/example@gmail.com/userがCalDav用のURLになります。 もちろんGoogle Appsのカレンダーも同期することができて、someone@example.comでGoogle Appsアカウントを持っている場合は、CalDavのURLはhttps://www.google.com/calendar/dav/someone@examp
普通の帯域節約術としては、mod_deflateでdeflate圧縮するとか、CSSやJSファイルのHTTPレスポンスヘッダにLast-ModifiedやEtagを追加しておいて、ブラウザがHTTPリクエストヘッダにIf-Modified-SinceやIf-None-Matchを付加するようにし、コンテンツが変更されていなかったら304 Not Modifiedを返すという方法を取るかと思います。 しかし、HTTPサーバーはコンテンツの数だけ304 Not Modifiedを返さないといけないため、その分帯域を消費しますし、またCSSや画像などのパーツの304 Not Modifiedが返ってくるまで、そのパーツのレンダリングが行えないという問題があります（つまり体感速度に影響します）。 今回紹介するのはExpiresヘッダやCache-Control: max-age=31536000を
ダイナミックDNSを使うと、ADSL接続などでIPが変わってしまう自宅でサーバーを外向けに公開できたりするのですが、大抵の無料のダイナミックDNSサービスは特定のドメインのサブドメインしか割り当ててくれません（たとえばddo.jpさんだと、a.ddo.jpなど）。 ところが、VALUE DOMAINでは自分で取得した独自ドメインをダイナミックDNSで使うことができます。また、DNSのMXレコードなども使えるので、メールサーバーをたてておけば独自ドメインでのメール受信も可能です。これは便利。 ただ、設定でいくつかつまずいたので設定ログとして残しておきます。 まず、ネームサーバーの変更を行います（取得した状態から変更してなければ、このステップは必要ないはずです）。ダイナミックDNSに使えるのはNS1.VALUE-DOMAIN.COMとNS2.VALUE-DOMAIN.COMとのことなので、ネー
Dreamweaverのスニペットをバックアップ・リストアするツール – SnippetUtil for Win 1.0.0をリリースしました。現在Windows版のみとなっています。Macintosh版は開発中です。 Dreamweaverのスニペットをバックアップ・リストアする拡張機能 – SnippetUtil for Win 1.0.0をリリースしました。現在Windows版のみとなっています。Macintosh版は開発中です。 ダウンロード: SnippetUtil100_win.mxp インストール方法: 上記ファイルをダウンロードしてダブルクリックすると、ExtensionManagerが立ち上がり、 SnippetUtilがDreamweaverにインストールされます。 バックアップするには: スニペットをバックアップするには、メニューから[コマンド]-[スニペットの管理]
Google Analyticsは、基本はアクセスされたページのログを見るだけなのですが、JavaScriptを使うことで高度なトラッキングをすることができます。 例えば、あるリンクをクリックした人の数を計測するとか、JavaScriptのプロンプトでOKを押した人をカウントする等です。以下はその方法。 あるリンクをクリックした人の数を計測する場合には、aタグのonclickイベントにJavaScriptを記述します。たとえばAdobeのサイトへのリンクをクリックした人を計測したい場合は以下のようになります。 <a href="http://adobe.com/" onclick="javascript:urchinTracker('/go/adobe');">Adobe</a> こう記述すると、上のリンクをクリックする度にGoogle Analytics上で/go/adobeというURL
最近よく言われることとして『CSSファイルは先に、JavaScriptは後で読み込むようにしましょう』というのがあります。 私も理由を考えることもなく従ってきたわけですが、今日どうしてそうすることがいい事なのか分かったので、共有したいと思います。 理由はブラウザの挙動にあります。 まず、"ブラウザはダウンロードできたパーツから順次レンダリングしようとする"ということが挙げられます。従って、まずHTMLを読み込み、DOMを構築し、レンダリングしようとします。 そこで問題になるのがCSS。昨今のWebサイトはWebの標準化に伴って、CSSでレイアウトを組むことが多くなってきています。従って、CSSファイルを読み込んで、そのCSSのパースが終わらないことにはユーザーに見てもらう最終的なレイアウトが決定できないと言うことになります。 さて、そこで気になるのが、ブラウザがどのようにファイルを読み込む
HTTPステータスコードの302はMoved Temporarilyだと思っていたのですが、RFC 2616（Hypertext Transfer Protocol — HTTP/1.1）で『302 Found』に改められていました。そして、RFC 2616では『307 Temporary Redirect』というステータスコードが追加されていました。 『302 Found』と『303 See Other』と『307 Temporary Redirect』の違いについて気になったので、まとめてみました。 元々、ステータスコード302はMoved Temporarilyでした。『302 Moved Temporarily』とは、「指定したURIのリソースは、一時的に別のURIに存在しているので、そちらを参照してください」と言う意味です。もちろん一時的に別のURIに存在しているため、クライアン
僕らWebの黎明期から関わってきた者のすべきことは、新人を育成する仕組みを確立することだと思っている。 例えば、5年前と比べてみればわかると思うけれど、今から新人がWebに関わっていこうと思ったら、個々人に求められる知識やスキルは5年前に比べて圧倒的に増えたことは事実。 きちんと構造化されたHTMLを書くスキル、JavaScript・CSSのノウハウ、サーバーサイドとフロントエンドとの効率的な連携方法、サーバーサイドの知識、インタラクションデザイン、インフォメーションデザイン、アクセシビリティ、コーポレートブランディング、コミュニケーションデザイン、etc。 もちろん、これらすべてを一人で覚える必要は無い。なぜなら、上で挙げたそれぞれの分野がどんどん専門化してきているので、昨今ではサイト1つ作るにも分業せざるを得ないからだ。 けれども、Webのどの職種に就くのであれ、これらそれぞれがどんな
Windows XPでは富士通ColorDoctorで色盲の人が見ている画面をシュミレーションできたのですが、Mac OS X向けには今までそういった類のツールを見つけることができず、アクセシビリティーに配慮した色選びには苦労させられました（富士通ColorSelectorを使って、色弱者や高齢者でもコントラストがつく色の組み合わせを探すことはできましたが）。 最近Mac OS XのソフトウェアでSim Daltonismというものを発見しました。これは、Mac OS X上で色盲の人が見ている画面の見え方をシュミレーションするツールです。 Sim Daltonismを起動するとウインドウが立ち上がり、マウスカーソルがある周辺の画面がリアルタイムでその中に表示されます。ウインドウの上部にはどの色覚が欠けている状態（第一色弱とか第二色弱とか）を選ぶ部分があり、それで色弱や色盲の人の見え方をシミ
次のページ
このページを最初にブックマークしてみませんか？
『www.onflow.jp』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
