2009-11-24 High Performance Web Design ~デザインから考えるハイパフォーマンスWebサイト~ ラベル: performance CSS Nite in ISHIKAWAで話をしてから1ヶ月経ったので、薄れゆく記憶の復習も兼ねて思いの丈を綴ってみたｗ High Performance Web Design 1. What's High Performance?ここでいうパフォーマンスというのはWebサイトの表示高速化についてです。つまり、ページをいかに早く表示させるかという課題です。でも、そうゆうのってサーバー側の問題でしょ？システムエンジニアの管轄じゃないの？と思われがちですが「ハイパフォーマンスWebサイト」の著者であるSteve Soudersの調査によると、80:20。一般的にユーザーの待ち時間の実に80%がブラウザ側、フロントエンドで費やされて

はじめてのかけいぼ: これから家計簿を付けようとしている人におすすめ。3ステップで簡単入力が魅力。1816 はじめてのかけいぼ、の紹介です。アプリ名の通り、はじめて家計簿をつける人に合わせた1本だと思います。 このアプリは、今まで家計簿をつけたことがなかった人が家計簿をつけようと思い立った時に手にするアプリです。 素早く金額を入力できるよう、起動してから最短3ステップで入力が完了します。また日々の収支をカテゴリ別に簡単に確認する事が可能です。 家計簿つけてますか？kazuendはつけていません。面倒くさいだろうし、続けられるのかと。。そんな人にピッタリのアプリだそうなので1週間ですが、つけてみました。 このアプリを使う前から、1週間、1万円生活をしていました。 気が付かない所で、使っているし1万円では抑えられないことも多々あります。。今回は1週間のお小遣い帳的な感じで付けてみました。 起動

日本語の文章をMeCab(和布蕪)を使って形態素解析した結果を見る事が出来るウェブサービスです！日本語の勉強をしたい方におすすめ！俺は昔Ｈ宿のマックでダブルチーズバーガーのＬセット頼んだんだけど、 ドリンク置かれた場所がトレーの端だったから 地下行く階段の手前でトレーから落としたのね あちゃーって顔してレジ見たら店員のお姉さんが笑顔で 「新しいのご用意しますね」って言いながら、 トレー持って立ち尽くしてる俺に小走りでカウンターの中から出てきたのね 多分落ちたカップを拾ったり掃除しようとしたんだろうけどさ そしたらお姉さんがいきなり 「おきをふんすなっぶ」 とか言いながら落ちてた氷を踏んで豪快に転けたんだよ そして俺に体当たりしてきて俺はトレーに残ってたポテトを 撒き散らしながら階段を転げ落ちた お姉さんは体当たりした瞬間俺のみぞおちに二発位パンチしてて マックの店員ははんぱねぇと思ったわマ

オンラインでワイヤーフレームが描画できてかなり便利な「HotGloo」。 ここでいうワイヤーフレームとはWEBサイトデザインの下地になるようなもので、サイトデザインの設計に使えます。 簡単なベースを作っておくことであとはPhotoshopなどで装飾させるというステップで、ユーザビリティを考えつつデザイン性の高いサイト構築に役立てられます。 HotGlooの画面はFlashを使ったリッチなインタフェースで、デスクトップアプリと遜色ないクオリティのＵＩによってワイヤーフレームが作成できます。 ページの右下には豊富なＵＩパーツがあり、白地のキャンバスにドラッグ＆ドロップするだけで配置が可能です。 色々とドラッグ＆ドロップしてエレメントを配置してみた例。実に様々な基本となるUIパーツが存在しており、高速にＵＩの設計をすることができそうです。タブやアコーディオン、GoogleMap、グラフまで存在し

phpコードの動作テスト時条件式作成ツールというのを作成・公開しました。 本番の環境で動作の確認をしたい場合に、自分だけ動作させるように以下のようなコードを書く場合があります。 if ($_SERVER['REMOTE_ADDR'] == 'IPアドレス') { // テストコード } この短いコードですが、(1) 条件式を書く (2) IPアドレス調べる (3) IPアドレス当てはめ、のように３ステップ踏む必要があり、書くとちょっと面倒ですね。これをスニペットとしてコピペで使えるようにしたものです。 開いただけでコードが表示されてコピペして使えるのでコードテスト時に利用すると意外に便利です。 ツールといえるほどのものではないのですが、自分用においておきましたので参考までに、良かったら使ってください。 以下のエントリを参照してください。 phpコードの動作テスト時条件式作成ツール

かなりスタイリッシュかつ高機能なLightBox風ライブラリ「TopUp」 最初見たときはLightBoxも驚きましたが、これがかなり進化してきています。 TopUpは、次のように、閉じるボタンやドラッグ＆ドロップでき、リサイズできるOSのようなLightBoxを実現できます。 実現できる機能を簡単にまとめてみました。 画像のスライドショー ズーム時のアニメーション機能 iframe呼び出し機能 Flash SWF再生 Flash FLV再生 QuickTime再生 WindowsMedia再生 RealPlayer再生 という感じで対応可能なメディアは全て対応している模様。 １つの選択肢として覚えておいてよさそうですね。 以下のエントリを参照してください。 The #1 Javascript Pop Up - Get TopUp! - Home 関連エントリ 表示法が新しくセクシーなLi

拡大時のモーションも数種類用意された、多彩なカスタマイズが可能な画像を拡大表示するスクリプト「TopUp」を紹介します。 TopUp examples 拡大できるものは画像やFlash（swf）をはじめ、動画（flv, QuickTime, WindowMedia, RealPlayer）やiframeで別サイトを表示することが可能で、拡大時のモーションや開始終了時にイベントを設定することも可能です。 TopUpの多彩なカスタマイズは、下記のdemoページで試すことができます。

often find unexpected finds among the things they leave behind. Used to warn against rushing ahead

こんにちは、テクノロジー(開発)担当です。 今回は空メールの簡単な仕組みをご紹介したいと思います。 空メール送信からサーバ側の処理のながれ 空メールの活用方法などは別記事で既に紹介されていますが(※空メール)、 ここでは空メールが送信されてから返信されるまでのサーバ側の処理を簡単に説明します。 ① ケータイから空メール送信 ケータイ電話から送信された空メールはその宛先のメールサーバへ送られます。 ここで送信される情報は送信元のメールアドレスになります。 空メールの利用方法によっては題名や本文を利用する場合もあります。 ② 宛先アドレスを元に処理をするプログラムを決定 空メールを受け取ったメールサーバは宛先のアドレスから 処理を行うプログラムを選択し、メール情報をそのプログラムへ渡します。 ③ 処理結果を返信する メール情報を受取ったプログラムはそれに応じた処理を展開し、

■空メール処理（Postfix+PHP） Webサイトでユーザー情報の一部としてメールアドレスを正確に取得したい場合、 一般的に使用される方法が空メールによる登録です。 ここではPostfixとPHPによる連携を使い、空メール機能（登録）を実装します。 登録したメールアドレスを削除したい場合は、登録と同様に削除用の空メール機能を実装して下さい。 PostfixおよびPHPのインストールに関しては、 ・PHPの構築 ・Postfixの構築 上記のページを参照して下さい。 ■処理の流れ 受信したメールの送信元に対して、登録結果メールを自動的に返信します。 具体的な流れは以下のようになります。 1.任意のメールアドレスから、登録メールアドレス宛（regist@my-server.homelinux.com）にメールを送信する。 2.登録メールアドレス宛のメールをPHPの

Drupalには非常に多くの寄与されたモジュールがオフィシャルサイトで公開されていますが、この中から目的にあったモジュールを見つけ出すのはなかなか大変です。 Drupalを紹介している海外サイトをいくつか回っていたところ、運良くモジュールの紹介に特化したサイトを見つけました。 そのままDrupal Modulesというサイトです。それぞれのモジュールの説明のほか、人気ランキングや評価などがあって、とても参考になります。 こちらのサイトを参考にして、いくつか試したモジュールから実用的で便利そうなモジュールを挙げてみます。

ビジネスiPhoneユーザー待望の日本語対応の名刺スキャンアプリWorldCard Mobile(名刺認識管理) が登場です。 お値段が2300円と高めなことと、iPhone 3GS限定なところがハードルですがスキャンの精度はかなりいい！AppStoreの説明欄に「高精度な文字認識率」とうたっていますがその通りでした。 表の顔はやり手ビジネスマンの entrypostman が早速紹介しましょう！ こちら起動画面。 カッコイイですね。 画面中央のスタートボタンタップでカメラが起動します。 株式会社GT-Agency 代表取締役こと村井智建の名刺で試してみます。 適当にパチリ。 ちょっと室内が暗くて心配ですが・・・ 縦で撮影すると、名刺が横になってまず表示されました。 画面下の「90度」ってのをタップして正しい方向に向けてあげます。 正しい方向になりました。 で、画面右上の「認識」をタップ。

白黒だけどいい感じなフリーアイコンセット「pictoico」 次のようなアイコンが１００種類セットになったものがダウンロードできます。 色数が少ないっていうのは意外とデザインが難しそうな気がしますがとってもいい感じですね。 以下のエントリを参照してください。 pictoico 関連エントリ iPhoneアプリのツールバー部分に使えそうなアイコン色々 質感がリアルで綺麗すぎるアイコンセットのまとめ Photoshopによる美麗アイコン作成チュートリアル集 吹き出しのアイコンパック

net tuts+で、新しくて便利なWordPressのプラグインがたくさん紹介されています。 いくつかご紹介しますね。 Drag To Share Mashableに見られる、画像をドラッグしてTwitterなどに投稿できるプラグイン Paginator スクロールでページを切り替えられる TypeKit Plugin for WordPress WordPressでTypeKitのサービスを使えるようになるプラグイン Custom Coming Soon Page かわいいカミングスーンページや工事中ページを作ってくれる Custom Class Selector エントリー毎にCSSのカスタムクラスをプルダウンで選べるようになる Pretty Comments コメントの テキストエリアにwysiwyg機能をつけてくれる Freebie Images: Free Stock Imag

2009年11月24日 リッチスニペットとは リッチスニペットとは SERPのSnippet上部に、 製品の評価 製品レビューの件数 製品の価格帯 など、リンク先のページが、価格情報サイトやグルメ情報サイトであった場合に、情報の種類に応じて、情報を表示する機能。 あるページのリッチスニペットがSERPに表示されるかどうかを事前に知ることはできませんが、下記のツールを使うと、リッチスニペットが表示された場合に、どう表示されるかを確認することができます。 Rich Snippets Testing Tool http://www.google.com/webmasters/tools/richsnippets たとえば、「価格com」のある冷蔵庫のページ http://kakaku.com/item/21208011154/ のURLを上記のツールに入れてみると、下記のよ