Adobe Edge: 2009年2月 クロスブラウザからProgressive Enhancementという制作コンセプトへ
みなさん、「Progressive Enhancement」という制作コンセプトをご存じでしょうか？ 「情報やサービスへのアクセシビリティを確保しつつ、ブラウザやデバイスの特徴を活かしたデザインや技術を実装する」という考え方です。日本ではあまり馴染みのない考え方ですが、海外では数年前から制作者間で話題となり、確実に浸透しつつあります。昨年、日本で開催された世界的に有名なWebカンファレンス「Web Directions East」では、多くのセッションでProgressive Enhancementが取り上げられました。これをきっかけに今後日本でも広がっていくと期待されます。本記事では、Progressive Enhancementとはどのような制作コンセプトなのか、そしてどのようなメリットがあるのかを解説します。 Progressive EnhancementとGraceful Deg
恭賀新年 (design drill diary)
あけましておめでとうございます。 今年も宜しくお願いします。 お正月の深夜、テレビをつけたら「朝まで生テレビ」で 就労問題や金融問題を取り上げていました。 TVでは派遣といっても2004年に解禁された製造業派遣の 問題がメインで、web業界には当てはまらないけれど 対岸の火事といってられない部分もあると思います。 なので、どうしたら生き残れるかを僕なりに考えてみたいと思います。 ●まずは大枠（政治経済）の話から TVではこの世界恐慌の原因が、アメリカの行き過ぎた 市場原理型資本主義にあると説明され、 日本もそれに流される形で産業資本主義から 市場原理型資本主義に塗り替えられ、株主を優先せざるを得ず、 労働者を大切にできなくなったみたいな話がありました。 TVでは日本は昔のような産業資本主義にもどるべきだ という意見がありましたが、利益を上げて株価を維持しないと 簡単
3キャリア対応ケータイXHTMLのTIPS 8つ : アシアルブログ
最近ケータイサイトの開発を行っているのですが、キャリアや機種によって動作にいろいろと違いがあり、なかなか面倒ですね。 キャリアごとにテンプレートを分けて記述するのは手間なので、基本的に共通テンプレートで記述したいところですが、どうしても振り分けをしないと駄目なこともあるため、今回やってみて気がついた違いなどについてまとめてみました。 なお、いわゆる第三世代携帯電話(DoCoMo FOMA, au WIN, SoftBank/Vodafone 3G)でXHTML対応機種のみを対象としています。 ■文字コード UTF-8で統一して大丈夫そうなのですが、DoCoMoのみ特定の文字(三点リーダーや丸数字など)をフォームから入力した場合に消えてしまったりするようですので、DoCoMoは入出力をShift_JISにする必要があります。 ※上記で特定の文字のひとつとしてあげました三点リーダーですが、UT
[JS]高いカスタマイズ性を備えたLightbox風のスクリプト -nyroModal
nyroModalは、アニメーションを伴って表示・非表示される、高いカスタマイズ性を備えたモーダルウインドウを生成するスクリプトです。 nyroModal デモページ nyroModalが生成するウインドウには、テキストなどのコンテンツをはじめ、複数の画像を使用したギャラリーや動画、AJAXコンテンツやフォームなどを表示することができます。 また、デフォルトのままでも気持ちよく表示・非表示されるアニメーション、背景、ウインドウなどをカスタマイズすることも可能です。 nyroModalはjQueryのプラグインのため、動作にはjquery.jsが必要です。
casualplay.net blog: FLASH内のイベントをトラッキングする
たまに「FLASHはアクセス解析できない」と言われることがあるんですが、ある程度FLASHやサーバーサイドに精通している人ならわかることですけど、特にFLASHだから不可能というわけではなく、むしろ一度仕組みを作ってしまえばHTMLよりも詳細なデータを取得することも可能になります。 既存の解析サービスではFLASH内のイベントを追跡できないものも多いですが、Googleが今月から無料で提供しているサービス「Google Analytics」を使えば、FLASH 側のイベント内にjavascriptを呼び出すコードを記述することで、クリックの動作はもちろん、ロールオーバーやマウスホイールなどの動作でさえ解析することが可能になるようです。変数の値も送信できるので、色々と活用できそうです。 btn.onRelease = function() { getURL("javascript:urchi
Google Japan Blog: Google マップが携帯でも表示できるようになりました
次の図は、皆さんもよくご存知のマーカー付の Google マップですが、少し雰囲気が違うと思いませんか。このマップ、実は Google Static Maps API を使って作成したものです。 Google マップをウェブページに埋め込む方法として、Google マップ API がありますが、Google Static Maps API が、この Google マップ API と大きく異なる点は、JavaScript を使用せずに、Google マップをカスタマイズすることができるという点です。 JavaScript のコーディングが不要なので、その分、マップの表示スピードの向上を図ることができます。 また、マップそのものは、イメージとして生成されるので、携帯電話でも表示できますし、そのまま添付ファイルとして電子メールで送信することも可能です。 先 のマップの場合、次に示すようにたった一
Progression Framework - Trac
What is Progression Framework ? Flash 制作の世界に、かつてないフレームワークの登場です。 よりすばやく、より簡単で、よりクリエイティブな制作環境をお届けします。 最新情報のお知らせやサポートなどは、Spark project 公式フォーラムの Progression Framework フォーラムにて行ってます。 新機能のリクエストからバグ報告、使い方の質問まで、お気軽にご利用ください。 リリース前のデバッグなどは Progression Framework デバッグルーム（Lingr） にて行っています。 その他、Progression Framework についてのお問い合わせは、webmaster(at)progression.jp までご連絡ください。 Copyright © 2007-2008 taka:nium, supported b
PHPでの画像のリサイズ、切り抜きが自由自在「class.image.php」:phpspot開発日誌
PHPでの画像のリサイズ、切り抜きが自由自在「class.image.php」 2008年02月21日- Icebeat | class.image PHPでの画像のリサイズ、切り抜きが自由自在「class.image.php」 class.image.php を使えば、分かりやすいコードで、簡単に画像のリサイズ、切抜きが可能です。 例えば、3行で、画像のサムネイルが作れてしまいます。 まずは、画像を幅200pxでリサイズ＆保存のコード $thumb = new Image('image.jpg'); $thumb->width(200); $thumb->save(); そして、画像を50%のサイズにリサイズのコード $thumb = new Image('image.jpg'); $thumb->resize(50); $thumb->save(); そして、左0px、上30pxの位置
行き詰まったときに役立つウェブデザイン8つのノウハウ | Web担当者Forum
ウェブデザイン作業には、びっくりするくらいイライラすることがある。 何をどこに表示するか無限の可能性があるのだから、真っ当なデザインがいとも簡単にできあがると思うじゃないか。でも、正常に表示できないデザインに何時間も手を焼いたり、今どき流行らないピクセル調整をするはめになったりとか、誰でも何らかの形で行き詰まった経験がある。 これから紹介する8つのノウハウは、そうした厄介な状況から抜け出すために、私が取る作戦だ。 先に中身からデザインする これは、今までに聞いたウェブデザインに関するアドバイスの中でも、最良の部類に入るものだ（Cameron氏に感謝を）。 多くのデザイナーが、まずヘッダーに力を注ぐ。でもたいていの場合、見映えのするページになるか否かは、ページの中身で決まる。ヘッダーは付け足しだ。とりあえずヘッダーのことは忘れて、中身の要素に取り組んでみよう。すると、しっかりした中身があれば
IE6以下をWeb標準に準拠させるライブラリ『IE7.js』
IE6以下をWeb標準に準拠させるライブラリ『IE7.js』 多くの人が待ちに待ち望んだライブラリ。やはりすごい人はすごいものを作るんですね。 このライブラリを読み込むことによりIE6以下でもIE7と同じようなXHTM/CSSの解釈を行ってくれます。 ただし完全にIE7と同じような形にするのではなく、より近い形ということです。 現在公開されているバージョンはversion 2.0 (beta)ということで、まだ実務で使うのは難しいかもしれませんが、MITライセンスで公開されておりますので正式にリリースされればweb制作の現場を変えてしまうライブラリです。 設置方法 Google コードのie7-jsより直接読み込むことが可能です。 以下の要素をhead要素内などに記述します。 <!--[if lt IE 7]> <script src="http://ie7-js.googlecode.c
evolt.org - Browser Archive
Pardon our dust! This iteration of browsers.evolt.org is under test, containing content which has not yet been finalized. evolt.org Browser Archive Who archived all these? One of the founding members of evolt.org, Adrian Roselli (or aardvark for those of you who visit the site or are on the mailing list), has provided the archive as well as its support through his company, Algonquin Studios. You c
MOONGIFT: » prototype.jsベースのカレンダー「protocalendar.js」:オープンソースを毎日紹介
よく、誕生日の入力などでドロップダウンリストから選ばせるものがあるが、あれほど入力が面倒なものはないと思っている。テキストボックスにそのまま数字で入れた方がよっぽども手軽だ。 とは言え、入力チェックやユーザビリティを考えるとそれもお勧めはできない。手軽で、さらに正確な入力が促せる方法としてこれをお勧めしたい。 今回紹介するオープンソース・ソフトウェアはprotocalendar.js、prototype.jsベースのカレンダー入力ライブラリだ。 protocalendar.jsはテキストボックスにフォーカスが当たるとカレンダーが表示されるライブラリだ。良くあるものだが、prototype.jsベースなのと、何より日本製というのが特徴だ。 日本製の嬉しい点としては、休日に対応している点だろう。ハッピーマンデーにも対応しているので、数年後の休日も表示されるのが素晴らしい。 さらに多言語対応によ
PHPで作られた3キャリア対応絵文字変換ライブラリ「MobilePictogramConverter」:phpspot開発日誌
PHPで作られた3キャリア対応絵文字変換ライブラリ「MobilePictogramConverter」 2007年11月17日- 追記: MobilePictogramConverter は公開が停止されており、速度も低速なのでHTML_Emojiを使いましょう PHPで作られた3キャリア対応絵文字変換ライブラリ「MobilePictogramConverter」 今回は、「MobilePictogramConverter」という、PHPで作られた3キャリア対応の絵文字変換ライブラリをご紹介します。 PHPで作られた3キャリア対応絵文字変換ライブラリ「MobilePictogramConverter」 次のような特徴があるそうです。 DoCoMo, au, SoftBankの絵文字を相互変換可能 端末からサーバーへ送信された絵文字の変換が可能（掲示板など） SJIS/UTF-8に対応 PC
Flashで物理演算シミュレーションを可能にする「Box2DFlashAS3」 - GIGAZINE
Erin Catto氏の作った物理シミュレーションエンジンのライブラリである「Box2D」をFlashで利用できるようにしたものがこの「Box2DFlashAS3」、オープンソースで提供されています。 実際にどれだけ威力があるかというのはデモを見ればわかるほどの出来栄えで、ピタゴラスイッチ風なものとか、ドミノ倒しとか、いろいろなことができます。 デモのFlashとダウンロードは以下から。 デモは以下から。左右の矢印キーで次のデモに移動することができ、「R」キーを押すとリセットされます。 Flash Physics Engine Box2DFlashAS3 1.4.2 http://box2dflash.sourceforge.net/ 例えばコレは1つめのデモ。橋の上に物体が乗ってます。 マウスで橋をつかんでふりまわすと、上の物体は四方八方に飛び散ります 次はピタゴラスイッチ風 ドミノ倒し
footerをウィンドウ下部に固定する『footerFixed.js』
footerをウィンドウ下部に固定する『footerFixed.js』 footer部分を画面下部に固定するためのjsライブラリ『footerFixed.js』を作成しました。 フッターをコンテンツの内容量にかかわらずwindow下部に表示させるためのjsライブラリです。 サンプル 設置方法は head要素なのでfooterFixed.jsを読み込みます。 <script type="text/javascript" src="./footerFixed.js"></script> ウィンドウ下部に固定したい要素にid属性「footer」を付けます。 これでその要素をウインドウの下部に表示させることが可能です。 (ウインドウの下部というのがわかりにくいと思うのですが、内容量がウィンドウサイズを超える場合は通常通り、内容量がウィンドウサイズより小さい場合はウィンドウの下部に配置という意味です
JavaScript-XPath をリリースしました！さあ、あなたも XPath を使おう！（解説付き） - IT戦記
JavaScript-XPath とは JavaScript-XPath は、 DOM 3 XPath を実装していないブラウザに対して、実用的な速度で動作する DOM 3 XPath のエンジンを追加します。 一言で乱暴に言ってしまえば、どのブラウザでも document.evaluate って関数で XPath 使えるようになるよ！ってことです。 以下が公式サイトになります。 http://coderepos.org/share/wiki/JavaScript-XPath DOM 3 XPath ってなんなの！？ めっちゃ簡単（で、ちょっとだけ適当）なDOM 3 XPath の説明をします＞＜。 JavaScript でよく使う document.getElementById や document.getElementsByTagName って関数ありますよね？ DOM 3 XPath
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
|M|E|T|A|M|i|X|
インパクトのあるウェブデザイン40選 - DesignWalker
オンラインで、いろいろなブラウザのチェックができるサイト集 | コリス
HTMLの要素をSQLのように取り出せるPHPのライブラリ『htmlSQL』 | IDEA*IDEA
