こんにちは　satoです。 いくら面白くて、高機能なwebサイトを作成しても、デザインがダサいとサイトの魅力や開発意欲は半減です。 僕もまったくデザインセンスが全く無いのですが、新しい物を作成する際には以下のサイトを参考にしています。 (1)Color Scheme Generator 2 デザインの大まかな配色等を決めるのに使用することがあります。 真似するだけで、Coolなサイトに見えるような気がします。 (2)Color Palette Generator ロゴ等の画像を指定すると、その画像に合ったカラースキームを 教えてくれます。 (3)Web 2.0 Colour Palette 有名なサイトのカラースキームの一覧があります。 (4)pmob.co.uk CSSや画面分割などのさまざまなサンプルや解説があります。 (5)logopond さまざまなロゴのサンプルがありま

OSIの参照モデル、って知ってますか？ ハジメマシテ、低レベルエンジニアのnsatohです。 そうそう、あの「Layerほげがフガだから、」とかスーツ来たIT系がよく言うキーワードのアレです。 でも、インターネット的な、ゲームとかアプリケーションとかを提供するには、たしかにOSI参照モデルを知っていると前提しての会話が楽なので、知らなかった人は是非、知っておいてください。いわゆるバズワードです。 で、OSI参照モデルにはLayer1からLayer7が定義されていますが、まことしやかに「あれって10階層じゃね？」と、言われること幾久しくです。 Layer0の土建層、Layer8の金銭層、Layer9の政治層とかとか、バグフィックスがハゲシクメンドくちゃいけれど、あきらめましょう的なものがあります。あとはLayer10に宗教層、いわゆるエンジェリック・レイヤーを入れる向きもありますが、とも

yamaokaです。 Twitterのみならず、FriendFeedやFacebookなど よりリアルタイムに近い更新がwebで求められるようになってきています。 従来、更新情報の配信はRSSなどのフィードやAPIを通して行われてきました。 しかしその場合、配信している側のサーバーに 定期的にリクエストを投げないと更新があったかどうかわかりません。 サーバーへのアクセスが多くなった場合、結構な負荷になります。 さらにお行儀の悪いクライアントが存在すると、頻繁なアクセスを繰り返し、 あたかもDoS攻撃のような状況が起こることもありえます。 そこで考えられたオープンなHTTPベースのプロトコルがPubSubHubbubです。 Google ReaderとFriendFeedが対応している他、 日本国内ではlivedoor Blogとliverdoor Readerがそれぞれ対応しています。 で

こんばんは、五十川です。 ご存知の通り、5月以降に発売開始されたNTTドコモの携帯電話の殆どには、新しいiモードブラウザ 2.0が搭載されています。iモードブラウザの大幅な仕様の拡張はi-XHTMLの登場以来ということになりますが、iモードの登場から10年経って登場した新しいブラウザは、i-XHTMLのときよりも遥かに大きな、過去最大の変化を遂げています。 iモードブラウザ 2.0の詳細は、ドコモ公式のiモードブラウザ 2.0にまとめられています。以下では主要な変更点を確認していこうと思います。 キャッシュ容量拡大 1画面あたり読み込めるデータの最大量が、従来の100Kバイトから500Kバイトに、大幅に拡大されました。ご存知の通りiモードの場合この値は、画像などの外部リソースもすべてひっくるめた値ですが、iモードブラウザ 2.0では、新たにCSSファイルやJavaScriptファイルも外部

五十川です。 携帯サイトの見栄えをシミュレートするウェブアプリ作りました。と言っても、実際に作ったのはかれこれ半年以上前で、手直ししてから公開しようと思ってたら、結局「guid=ON」を付け足したくらいであとは放置だったので、さすがにいい加減晒そうと。 任意のヘッダでリクエストして、レスポンスの絵文字とか変換してサイトの見栄えを確認するというものですが、これはそもそもExt JSをいじってた頃に、Ext JSでこういうの作ればいい感じになるんじゃね？ということで、丁度2.0がリリースされた頃にデモ用に作ったものなのでした（なので、かれこれ半年以上前） 実機テストの代用になるわけでは、もちろんありませんが、絵文字も含めたマルチキャリアでの見栄えを手軽に確認したいときなどに、わりと便利に使えてたりします。 スクリーンショット 機種ごとのプリセットのヘッダグループをYAMLファイルに書いておいて

miyakeです。今日は、近頃話題のオープンソースなシステム自動管理ツール「Puppet」の小ネタをご紹介します。 今回使用した環境ですが、とりあえず試してみようという感じで、CentOS5.0(x86_64)にDAGリポジトリから0.22.4をインストールしています。現時点でのstable版は0.23.2なのでやや古く、設定や機能も変わっているため、本エントリの内容が合致しない場合もあるかと思いますがご容赦ください。 インストールや基本的な設定は、gihyo.jpにてペパボCTOのmizzyさんが執筆されている連載が大変詳しいので、そちらをご覧ください。 連載：オープンソースなシステム自動管理ツール Puppet｜gihyo.jp puppet wiki （パペウィキ） Puppet公式 本エントリでは、そうして試したみたところ僕自身が引っ掛かった部分などをご紹介します。 単にpuppe

yamaokaです。 webページの表示を高速化する手法にはいろいろありますが、 その一つとして遅延読み込みという手法があります。 初期状態で表示する必要のない要素については読み込まず、 必要になったタイミングで読み込み、表示するようにする手法です。 ページの読み込みにかかる時間の大半を 画像の読み込みが占めている場合が多いので、 画像の読み込みを遅延させるという手法が多く取られます。 検討するべきケース では、画像の遅延読み込みはどのような場合に検討されるべきでしょうか。 最初から表示されている必要がない画像が存在し、その画像のサイズが大きかったり、 そうした画像の数が多い場合は検討してみる価値があると思います。 例えば、次のようなケースです。 初期状態では表示されないブロックに属する画像が存在し、 JavaScriptで表示するかしないかを切り替えているような場合 ページのずーっと下の

auとSoftBankの絵文字については、下記のページに公式の情報が掲載されています。しかし、情報がPDFであったり、HTMLであったりと、プログラムから使うのが難しいという問題があります。 EZFactory 絵文字 EZWeb絵文字一覧【タイプD】(リンク先はPDF) ソフトバンク 絵文字一覧 そこでこのPDFとHTMLをYAMLにしてみました。 諸般の事情により公開を停止しました。代わりに、同様の情報の取得方法に関する記事へのリンクを紹介いたします。 Ruby: http://d.hatena.ne.jp/tokuhirom/20070706/1183707279 Ruby: http://moriq.tdiary.net/20070211.html#p01 Ruby: http://d.hatena.ne.jp/urekat/20070927/1190905959 Perl: ht

こんにちわ、山下です。 Software Design 10月号にサーバ監視ツールCactiについての記事を書きました。この号のNagios,Swatch,Wiiの記事もウノウ・エンジニアによるものですので、ぜひ興味のある方はご覧ください。 さて、今日はWebブラウジングを快適にするAutoPagerizeというツールを紹介します。AutoPagerizeはGreasemonkey用の拡張スクリプトで、今、自分のまわりで爆発的に流行っています。先日の出張 Shibuya.js 24でも作者の方が発表されていたのでご存じの方も多いのではないでしょうか。 念のために何をするツールかを説明しておくと、Googleなどの検索結果で次のページを表示するときに「次へ」ボタンを押さなくてもページ下部までスクロールすると、勝手に次のページを読み込んでその下に付け足してくれるものです。なかなか文章では伝わ

miyakeです。突然ですが、CSSって書くの面倒ですよね。何らかのプログラミング言語を知っている人間から見ると、CSSというのは言語としてはかなり貧弱です。 もちろんCSSはプログラミング言語では無いので、それを貧弱だと言われてもCSSもいい迷惑かも知れません。でも、 div#content { ～ } div#content div.entry { ～ } div#content div.entry p { ～ } div#content div.entry ul { ～ } こういう大したことをしていないのに、コードがどんどん長くなっていくのを見ると、もう少し何とかならないものかと思ってしまいます。 コピペするにしても、 コピー元にカーソルを移動 範囲選択してコピー コピー先にカーソルを移動 ペースト という操作が必要になります。数が増えてくるとコピペのミスも発生しかねませんし、id

harukiです。 メールを送信するサイトの場合、メールアドレスのクリーニングは定期的に行うべきです。 そのためにはエラーメールを解析しなければなりません。 そこで、エラーメールの種類をまとめてみました。 SMTPエラー 存在しないメールアドレスや、正しい形式でないメールアドレスの場合は、 DoCoMo,au,SoftBankの3キャリアともSMTPエラーになります。 例として、以下の条件でメールを送信したとします。 From: sender@example.com Return-Path: bounce@example.com To: アドレス＠docomo.ne.jp MTAにより異なりますので、ここではPostfixを例にします。 Postfixではmultipart/reportのメールがbounce@example.comに届きます (※ 必要な情報のみに省略しています

CSSでいつも悩まされるのはクロスブラウザですけど、フォームでは特に面倒くさい要素が山盛りですよね。ボタンの文言を動的に変えたいから画像はなるべく使いたくないけど、だからといってブラウザのデフォルトのボタンとか、味気ないですものね。 今日は、フォームにつきもののボタンについて考えてみます。 私たちがボタンに求めるモノって、何でしょう。 データを送信（submit）する どのブラウザでも同じように見える 使い回しが聞く ボタンについている文言がどんなに長くなっても、水平方向の長さがフレキシブル 上記のようにサイズ的にフレキシブルであっても、見た目の美しさを阻害しない ボタンの大きさ＝クリックできるエリアの大きさ 画像がdiableされていても使用可 CSSがdisableされていても使用可 ボタンのように見えて実はただのリンクの時のもある これらの要求を解決してくれる方法が複数出

こんにちは！やまもと＠テスト番長です。 TestingGeekという耳障りの良い名前のサイトをご存知でしょうか？ 総合的にテストの話を取り扱っており、それでいて読みやすいサイトです。 そこのTemplatesのコーナーにWeb Application Testing Checklist という便利そうなものがありましたので、日本語にしてみました。 ちょっとそのままだと物足りない感がありますが、テストポリシー作成の叩き台に使ってみるのも良さそうですね。 この手のリストを他にもご存知の方がいらっしゃれば、是非ご一報ください。 1. 機能テスト 1.1 リンク 1.1.1 記載された通りの先に遷移するか 1.1.2 どこからもリンクされないページは存在しないか 1.1.3 全ての外部リンク 1.1.4 参照しているサイトおよびメールアドレスはハイパーリンクになっているか？ 1.1

最近、雨の日が続いて自転車通勤ができていない naoya です。 今日は、先週ぐらいからフォト蔵に導入した Apache で mod_expires と mod_rewrite を使ったウェブサーバへのアクセスを減らす方法を紹介します。 通常のウェブサーバは、更新されていないリリースに対してアクセスすると、ステータスコード 304 とIf-Modified-Since ヘッダをつけて応答データを返しますが、CSS や JavaScript など比較的更新頻度の少ないファイルに対して、毎回応答を返すのはウェブサーバから見ると無駄なアクセスです。 Apache の mod_expires と mod_rewrite を使うと、この無駄なアクセスをブラウザキャッシュを有効活用にすることにより、静的なファイルに対するアクセスを減らすことができます。 まず、仕組みから説明すると、とても単純で mod

こんばんは。harukです。 DoCoMo編…となるはずですが、特に書くようなことがないので、今回はXHTMLについて少し書いてみます。 現在ではすべてのキャリアが3G端末がメインとなってきています。 ※2006年11月末現在 DoCoMo: 約60% au: 約90% SoftBank: 約35% ほとんどの3Gの端末ではHTMLに加え、XHTMLを使うことができます。 XHTMLを使うことによって、文字の背景色を設定できたりするなど、デザイン表現が多彩になっています。 今回はXHTMLを使用する上での、各キャリアの仕様の違いなどをまとめてみたいと思います。 対応機種 DoCoMo FOMA(初期の2001,2002,2101以外) au WAP2.0ブラウザ搭載端末 SoftBank W型、3GC型 DOCTYPE宣言(推奨) DoCoMo <!DOCTYPE html PUB

MochiKit とは？ makes JavaScript suck a bit less JavaScript ライブラリ http://www.mochikit.com 1.4 系の開発版をさわってみた ドキュメント、テストがかなり充実 使い方は、lib/MochiKit/MochiKit.js をロードするだけ MochiKit.Async 非同期タスクを管理 非同期タスクを登録して、登録したタスクが失敗したときの処理を簡単に記述できる var url = 'js/META.json'; var d = loadJSONDoc(url); var gotData = function (data) { alert('MochiKit.Async version is ' + MochiKit.Async.VERSION); }; var dataFetc

sashaです。 naoya君が前回のエントリーで振ってくれたように、ジョエルテストの話から、ユーザビリティ・テストをどこまで行うかという話になりました。 私が今まで見たユーザビリティ系の記事の中には、追求したら悟りが開けそうな、限りなく奥深いものもありましたが、適度に深く、満遍なくカバーしているユーザビリティ・ガイドライン（原文）を見つけ、以降これを参考にしています。少し前に翻訳しましたので、今日はそれをご紹介いたします。 一般ユーザー向けのWebサービスでは、全部のチェック項目が該当するわけではありません。個人的には、各項目のスコアより、「スコアの説明」という欄を重視しています。現状では何が問題であり、どう解決するべきなのか、そういった思考のプロセスが、「ユーザーのことを思うこと」だと思うのです。 いま、ウノウではフォト蔵のデザイン見直しを行っております。私たちのデザインを省み、