アドビ、FlashをHTML5のCanvasへ変換するプロトタイプ機能を明らかに。アニメーションも変換
アドビ、FlashをHTML5のCanvasへ変換するプロトタイプ機能を明らかに。アニメーションも変換 アドビシステムズは3月10日に始めた新しいブログ「Design and Web」の中で、FlashをHTML5のCanvas要素で置き換える「Smart Paste」のデモ動画を公開しました。この機能は現在開発中のDreamweaver CS5のプロトタイプ機能とのことです。 （追記3/18：上記ブログの1つ目のエントリ「Design & Web」に、紹介する機能は「It won't be in the next version of CS.」であるとの記述がありましたので、「Dreamweaver CS5」の部分を削除させていただきます。すいませんでした）。 FlashのファイルをJavaScriptでレンダリング、Canvasへ描画 11日付けで公開されたエントリ「Canvas fo
MKV形式などあらゆるムービーファイルをPS3で再生できる形式に変換するフリーソフト「DivX Plus Player」の新機能「DivX To Go」
PlayStation3で再生可能な動画形式はこのページに一覧が並んでいます。しかし対応していればどんなファイルでも再生できるかというとそうではなく、いろいろと小細工をして「PS3向け」に設定しないと再生できないこともあります。そこで使えるのがフリーソフト「DivX Plus Player」に搭載されている「DivX To Go」という新機能です。 DivXおよびAVIファイル (*.divx *.avi *.mkv)、WindowsMediaファイル (*.wmv *.asf)、MPEGファイル (*.mpg *.mpeg *.m1v *.m2v)、MPEG2ファイル (*.vob)、MPEG2 Transport Stream (*.ts *.tp *.m2ts *.mts *.m2t)、AVS Scriptファイル (*.avs)、QuickTimeファイル (*.mov *.mp4
「自由にカスタマイズ」の落とし穴 (ユーザビリティ実践メモ)
「一人一人のニーズに合わせてカスタマイズできる」ことを売りにした製品やサービスは、近年よく目にします。 例えば、 ・個々の保障内容を自由に組み合わせられる自動車保険 ・各パーツのスペックやオプションを自由に選んで注文できるパソコン などはその代表的な例といえるでしょう。 そのため、何のヒントもない状態で「何でも自由にカスタマイズできますよ」と言われても、ユーザは却って戸惑ってしまいます。 そのため、以下のような工夫が考えられます。 工夫１：代表的なプラン例を提示するあらかじめ、スタンダードな内容で構成したプラン例を用意した上でカスタマイズ可能であることを伝える、というのは代表的な工夫の１つです。 例えば自動車保険のオンライン見積りを提供している三井ダイレクト損保では、「プラン1-3」まで3つのプランを提示しています。 工夫２：カスタマイズ可能な項目に、判断材料を提供する もう一つの工夫とし
現場の無駄な流血を止めるための「プロトタイプ」とは（1/2） - ＠IT
株式会社ビジネス・アーキテクツ インフォメーションアーキテクト 伊原 力也 2010/3/12 プロトタイプとユーザビリティテストは、そもそもどういうものなのかを再考し、プロジェクトに「追加」するのではなく「織り込む」にはどうしたらいいのかを具体的なツールも交えながら考察します 設計やデザインをスムーズに効率良く進めるために WebサイトやWebアプリケーション/RIAの設計やデザインをスムーズに効率良く進めるには、プロジェクト関係者の想定を一致させていくことが大事です。そのためには、判断の材料となる「ユーザーの行動」を知ることが欠かせません。必要なのは、「プロトタイプ」「ユーザビリティテスト」の2つです。 とはいえ、いままでのやり方をガラッと変えるのは難しいものですね。本連載では、プロトタイプとユーザビリティテストは、そもそもどういうものなのかを再考し、プロジェクトに「追加」するのではな
不味いメシ屋の見分け方と企業サイトのデザイン: DESIGN IT! w/LOVE
不確実な時代をクネクネ蛇行しながら道を切りひらく非線形型ブログ。人間の思考の形の変遷を探求することをライフワークに。 ノッケから経験値でものを言って申し訳ないが、不味いメシ屋というのは、たいていメニューが多すぎるという共通項があるように感じてます。しかも単に多いのではなく脈絡がなく多い。得意料理なんて当然ないんだろうなと思わせるメニューの並び。その時点ですこしもいい匂いがしてこない。案の定、食事時でも店のなかはがらんとしていたり。 いい匂いのしないWebサイトそれって実は企業サイトでもおなじこと。 やたらとメニューが並んでるだけじゃ、いい匂いはしてこない。 中小企業やらシステム系の企業でありがちなのが、そういう何でもできます的なメニューの並び。で、何屋なの？というサイトになってしまっているところが少なくない。 あーあ、Webのデザインした会社がそのへん、きちんとコーディネイト、デザインして
【Movable Type 5】これだけは覚えておけ！Movable Type 5 基本の基本: 世界中の１％の人々へ
2009年10月| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 Movable Type 5.0b4がリリースされた。MT5は決してむずかしくない。 最近SOY CMSやRCMSのことばかり書いているし、Movable Type 5b1が出たときもブログに書かなかったので、一部では、僕がMovable Typeをやめたんじゃないかという噂が流れているけど、とんでもない話で、僕はMTを知ってるから、SOY CMSやRCMSの広報がおこなえるのであり、認知度と人脈はMTをやったいたからできたものなので、MTを捨てることはないです。Movable Type 5b1の時は、Twitterでかなり書いたので、それで満足しちゃっただけの話^^;;。 11月28日のセミナーでも、「
アドビ、HTML5やCSS3への対応を強化へ--新設ブログで示す
Adobe Systemsが「Flash」テクノロジの開発と推進に多大な労力を注いでいるのは確かだ。そして、多くの新しい「Open Web」テクノロジがFlashにとって、競争上の脅威になっているのも事実だ。 しかし、だからといって、AdobeがHTML5やCSS3に関心がないわけではない。結局のところ、Adobeはウェブサイト開発向けに「DreamWeaver」製品を提供しているのだ。HTML5はウェブページの記述に使われるハイパーテキストマークアップ言語（HTML）の最新版で、CSS3はウェブページのフォーマットを指定するカスケーディングスタイルシート（CSS）の最新版。いずれも、Open Webプロジェクトの最も重要な要素である。 しかし、AdobeがOpen Webの取り組みに対し、これまでよりも大きな関心を抱いていることを示す兆候がある。Adobeは先週、エンジニアリング担当シニ
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い:phpspot開発日誌
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄いです。 普通、高さの違うボックス要素を float とかで並べると次のような、どう見ても見れない崩れたデザインになってしまいます。 が、今回紹介するjQuery Masonry を使うと、次のように、綺麗にテトリスっぽく整列できてしまいます。 ↓↓↓↓↓↓↓↓↓↓ これを実現するのに必要なJavaScript コードは以下のように数行。これで実現可能です。 $('#primary').masonry({ columnWidth: 100, itemSelector: '.box' }); この仕組みを使ってブログ等を表示するともっと面白いことになります。 新聞っぽくなりましたね。 ブラウザ幅を変える事でいろいろな見え方になるのも面白いです。 以下のエントリを参照してください。 jQuery Masonry ? B
可変グリッド（リキッド）レイアウト | Webデザイン フリーフォント Prismtone
可変グリッド（リキッド）レイアウト、ちょっと気になってます。 ざっとご紹介。 ...見づらいのではないか。 と、今は言いますが、こういうサイトがもっと多くなってきたら、意外と見慣れてきて順応するんじゃないかなぁとも思います。 もちろん、デザインとして情報に強弱があったほうが見やすくわかりやすいという原則はあるはずなので、文字のジャンプ率が低く、フォーマットが統一されているこれらのサイトは、すべての情報が並列に見えがちかなと感じます。 こういう場合は、「写真・枠の大きさ」「色」「表示位置が上なのか下なのか」あたりで、強弱・メリハリつけてく感じなんですかね。 色でのメリハリは出してるサイトはないように思います。日経と丸の内はグルーピングとして色使っているけど。 情報が古いor優先度が低い場合、文字色とか不透明度下げるとかも、意外とおもしろいのではないかと。 枠の形がきっちり決まってる分、それく
手軽にWebを彩るCSSコーディングテクニック50 - 海外デザイン事情第7回 - MdN Design Interactive
第7回「手軽にWebを彩るCSSコーディングテクニック50」 2010年03月15日 基本的なCSSを使ったWeb制作はそれほど難しくないが、より高いレベルのデザインを実現しようとすると、難易度はグッと上昇する。そんなときは、世界中のデザイナーやデベロッパーが提供しているCSSテクニックを使ってみるとよいだろう。ここでは、世界各国のデザイナーやデベロッパーが紹介している、ビジュアル表現やレイアウトなどを中心としたCSSのコーディングテクニックを紹介していこう。 翻訳元サイト：Smashing Magazine http://www.smashingmagazine.com/ 原文：50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) http://www.smashingmagazine.com/2010/0
ke-tai.org > Blog Archive > ケータイ向けメルマガの装飾文字をまとめているサイトのまとめ
ケータイ向けメルマガの装飾文字をまとめているサイトのまとめ Tweet 2010/3/15 月曜日 matsui Posted in 記事紹介・リンク | 2 Comments » ちょっとついでがあったので、ケータイ向けメルマガの装飾文字について軽く調べてみました。 自分のメモ代わりに記事の形にまとめます。 まず大事なのは、デコメールに代表されるHTMLメールか、通常のメールかの選択です。 HTMLメールでもよければ装飾に苦しむことはあまりありません。 2010年1月の時点で、HTMLメール対応機種の割合は98.0%とのことです。 → ビートレンド株式会社 携帯端末毎のアクセス実勢を調査 [betrend.com] 利用率的には、もうHTMLメールで全然OKのようですね。 しかしながら、配信システムが対応してなかったり、利用者層によっては逆に開封率が下がってしまったりなんていうことも考え
地獄のミサワの「女に惚れさす名言集」
ＢＯＭＢ！ 地獄のミサワでーす！返信遅れて申し訳ないです。 なんだかんだで３ヶ月。 経つねー。時間って勝手に経つねー。こっちの気持ちなんて無視だね。 ＞ラーフラさん >結構知名度が上がってきてたぶんメールが予想以上に来てるのに律儀に返事を返そうとするミサワさんに惚れちゃいました。好きです、結婚してください。 ありがとうございます！ただこれだけ返信してないともうあんまり結婚したくもなくなってるんでしょうか？女の子ってたまに昔好きだった人の事とかめちゃくちゃに言うので恐ろしいです。前に元彼のことを「泥溝(どろどぶ)」と呼んでいる子と会ったことがあります。 ＞もももさん >ミサワさん、おひさしぶりです！先日、ミサワのコミックスが出る夢を見ました。しょせん夢でしたけどネ！ 出たよ！ついに出たよ！夢じゃなかったよ！うちの親が売れ行きを俺以上に心配しています。 友達に電話して買わせまくってます。友達の
Internet Explorer 9 Preview と HTML5 « HTML5.JP ブログ
ラスベガスで開催されている Microsoft の MIX10 で、日本時間の今朝、Internet Explorer の次期バージョンとなる Internet Explorer 9 が紹介されました。すでに、ブログやメディアで MIX10 のレポートが出てきていますので、ご存じの方も多いことでしょう。あわせて、IE9 Preview 版が公開されました。 ここでは、Internet Explorer 9 の HTML5 やその他 W3C 標準のサポートについて見ていきましょう。詳細は、Internet Explorer 9: Testing Center や IE9 プレビュー・ガイド に詳しく公開されています。 SVG 今回の Preview 版で最も大きな目玉は、SVG 対応でしょう。SVG といえば、これまで IE 以外のメジャー・ブラウザーではすでにサポートされていたため、大きな
いまさら聞けないSVG、なぜ知られていないのか？
いまさら聞けないSVG、なぜ知られていないのか？：いまさら聞けないリッチクライアント技術（9）（1/3 ページ） 「SVGって何？」と思うのは無理もない PCで取り扱う画像のフォーマットにはいろいろな形式があります。JPEG、GIF、PNG、BMP、TIF、…… などなどいろいろあります。さて、その画像形式の中で「SVG」というフォーマットがあるのはご存じでしょうか？ このSVG「ベクタデータで画質のクオリティが高い！」「テキストファイル作成されているので、汎用性が非常に高い！」「XML形式で記述ができて管理しやすい！」「JavaScriptと相性バツグンでリッチコンテンツが手軽に作れる！」など、とてもWebと相性が良さそうな画像形式です。 いろいろな長所を持つ「SVG」は、知らない人にとっては「新しい技術」と思うかもしれません。しかし、Webの標準化団体「W3C」からSVG 1.0が勧告
グーグルがHTML5のMicrodataに早くも対応
Microdataは、HTMLにメタデータを埋め込むための記述方法です。HTML5の仕様の一部として策定が開始され、現在はW3CのHTML5仕様からは独立した仕様となっています。 そのMicrodataをグーグルが読み取って「リッチスニペット」に利用すると、ブログ「Google Webmaster Central Blog」のエントリ「Microdata support for Rich Snippets」で明らかにしました。 リッチスニペットのデータとしてMicrodataを読み込み リッチスニペットとは、検索結果に表示される情報です（ただしすべての結果に表示されるわけではありません）。 上記の例（グーグルのリッチスニペットのページから）では、ネット上のレビュー記事をグーグルが自動的に集計して、星の数を表示しています。 このリッチスニペットを構成するために、グーグルはネット上のさまざまな
［速報］IE9プレビュー版が公開！ HTML5準拠を約束、マルチコア、GPU対応で高速動作へ － Publickey
マイクロソフトがラスベガスで開催中のイベント「MIX10」。2日目のキーノートスピーチでは、Internet Explorer 9について語られました。 IE9のポイントはHTML5、CSS3、SVGなどの標準への準拠と、マルチコアCPUやGPUなどハードウェアを活用した高速な動作。壇上でIE9を紹介したDean Hachamovitch氏はこれを「HTML5, Hardware Accelerated」という言葉で表現。そして、IE9 Platform Previewのダウンロードが開始されたことも発表されました。 ここではMIX10、2日目のキーノートスピーチの内容を、IE9にフォーカスして紹介します。 HTML5, Hardware Accelerated HTML5アプリケーションはグラフィックが豊富に使われるアプリケーションであり、より高速な動作が必要となる。われわれのHTML5
マークアップ効率化 - zen-codingでコーディングを倍速に
HTMLの記法について 基本的には「div」の様に要素を省略せずに記述して、それを展開すると「<div></div>」という形に展開されます。 このときに展開できる要素は以下の公式ドキュメントに明記されていますのでそちらを見るとよいです。 Zen HTML Elements Zen HTML Selectors Zen CheatSheets 基本的な記法 ひとつずつ順番に記述して説明していきます。しばらく初歩的な説明になるのである程度知っている方は飛ばしていただいて良いかと思います。 まずものすごく基本的な記法である、単独タグの記法について説明を行います。 cssのセレクタをイメージしながら見ていくと納得しやすいと思います。 タグだけ変換 変換前 div 変換後 <div></div> デモ 文末でtabを押してください div 変換後、div要素の間にカーソルが移動するので、すぐにテキ
メディア・パブ: ツイッター経由トラフィックの争奪戦が始まった
ツイッターの台頭により、トラフィックの流れが変わってきている。 この｢メディア・パブ｣でも、半年前まではTwitter経由のアクセスが少なかったのが、最近では目に見えて増えてきた。以下のように各記事の左上に、その記事についてのtweet（つぶやき）件数と、はてなブックマークでのブックマーク件数を載せている。ツイッターのつぶやき件数が増える一方なのに、はてなのブックマーク件数が減っており、その差が開く傾向にある。リアルタイム性の点でも、明らかにTwitterのほうが早い（件数表示位置をクリックすると、つぶやき内容や一口コメントを見ることができる）。 tweets数が増えるに伴い、Twitter.comなど経由のアクセスも増えるし、またリアルタイム対応が進むGoogle検索からのアクセスも増えている。 このようなブログですらこうだから、メジャーなニュースサイトやメディアサイトでも、変動が起こっ
301リダイレクトでPageRankが失われることについて補足
昨日、「301リダイレクトによってPageRankが喪失する」とGoogleのMatt Cutts（マット・カッツ）氏がインタビューの中で発言したことについて書きました。 コメントやTwitter、また僕に直接届いた質問を見ると早とちりしているような方がいるようなので補足します。 301リダイレクトを使うべきではないということでは決してありません。 そうすべき事情があってドメインを移転するときは、301リダイレクトがもっとも適切な手段です。 また、最後にも書いたように異なるドメインへの移転に起きる仕様です。 同一ドメイン内・サブドメイン間での301リダイレクトでPRに変化があるかどうかは、このインタビューからでは判断できません。 同じように減るかもしれないし、100%ではないにしてもほぼ完全に引き継がれるかもしれません。 「wwwあり・なし」「index.htmlあり・なし」の正規化にも3
第19回 jQueryでAJAX入門：JSONを使いサイトにTwitterを表示 | gihyo.jp
jQueryでAJAX入門2回目：JSON形式を扱う 前回はXML形式のRSSをAJAXで取得してリストで表示させました。今回はXMLではなく、JSON（ジェイソン）と呼ばれる形式を扱い、同じようにリストを表示させてみることにします。今回ご紹介するJSON形式も、前回紹介のXML形式同様jQueryで取得・表示をさせることができます JSON？ JSONはJavaScript Object Notationの略で、JavaScriptで簡単に扱えるテキストベースのデータフォーマットです。たとえば下記のような構造になっています。 JSONサンプル [ { "name": "技評太郎", "age" : 26, "skills":["PHP" , "JavaScript"] }, { "name": "長谷川広武", "age":25, "skills":["HTML" , "CSS"] },
価値のあるコンテンツを提供しているかを調べる方法
以前 Google のウェブマスターツールを利用して簡単にコンテンツが最適化されているかを見る方法を紹介しました。自分のサイトがどのようなキーワードを通して露出しているのかを知るのに手軽で便利なツールですが、検索エンジン (Google) からみた視点なので、訪問者全体を表しているわけではありません。そこで Google Analytics を利用して、読者がどのコンテンツを好むかを調べることが出来ます。機能が多い Analytics ですが、今回紹介する方法はほんの数分でできます。 Analytics の右側のメニューにある「コンテンツ」から「タイトル別のコンテンツ」を選択すればどのコンテンツが見られているのかを調べることが出来ます。ディフォルトの状態だとページビューでランキングされますが、これでは単なる人気順です。読者が好むと思われるコンテンツの配信したいという目的があるわけですから、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.seo-blogs.biz/2010/03/15/1567/
SEO検索エンジン最適化チュートリアル
[CSS]Firefox 3.0/3.5のCSSのバグ情報のまとめ
新着記事
新着記事
レタープレスエフェクトのチュートリアル、あなたは画像派？ CSS派？