FlashからHTML5へ! マイクロソフト、FF XIII-2サイト開発裏話を紹介
日本マイクロソフトは12月20日、スクウェア・エニックスと共同で展開しているFINAL FANTASY XIII - 2(以下、FFXIII-2)とInternet Explorer 9(以下、IE9)のキャンペーンサイト「モーグリのツイートキャッチ」を紹介する説明会を開催。キャンペーンサイトの概要や、開発裏話が披露された。 モーグリのツイートキャッチは、FFXIII-2の中で登場する「モーグリ投げ」を模したキャンペーンサイト。Twitter上で投稿されたFFXIII-2に関するつぶやきを収集し、それらを位置情報と関連付けながらランダムに表示する機能を搭載している。現在地から方角を決めてモーグリを投げる(ドラッグする)と、その方角でつぶやかれた投稿をモーグリが収集してくる。ゲームと同じ演出が使われており、同様の世界観を味わうことができる。 収集したツイートは、Collection Boxに
CSS3だけで描いた「けいおん！」の澪がすごい しかもちょっと動く
アニメ「けいおん！」の秋山澪をCSS3だけで描いた絵がすごいと話題になっている。画像を使っていないのに画像のように見え、しかも髪や目にかすかな動きも付いている。 CSS3だけで描いた澪（左）とソース（右） 描いたのは台湾のWebデザイナー、Reiさん。ほかにも「機動戦士ガンダムSEED」のラクス・クラインやリラックマをCSS3で作っている（ブラウザの種類やバージョンによっては正しく表示されない場合がある）。 ほかにもCSS3を使って絵を描いているWeb技術者がおり、@shop_ddさんはドラえもんや「とある魔術の禁書目録」の回転する風車などを、@TjRusさんはiPhone 4を展示している。CSS3で描いたiPhone 4は、電源ボタンやホームボタンをマウスでクリックしたり、スライドバーをスライドさせることができる。 CSSだけで描いた有名企業のロゴを展示しているecsspertというサ
はてなブログのデザインの裏側 - Uedayworks::HatenaBlog
このエントリーはHatena::Staff Advent Calendar 2011のために書かれたものです はじめまして。最近は映画けいおんが生き甲斐のuedayです。 11月8日にクローズドベータリリースした「はてなブログ」のデザイン全般を担当しました。裏側というほどの話ができるか微妙ですが書いてみます。 開発チーム 開発チームは、エンジニアid:cho45／デザイナーid:ueday／ディレクションid:onishiです。デザインはクオリティチェックをid:tikedaに依頼して、適宜フィードバックを貰いながら進めていきました。このほかに制作スタッフが数名います。プロジェクトが立ち上がったのが8月1日だったので、開発期間は約3ヶ月です。アルファ版完成が異常に速く、開発2日目か3日目で記事投稿ができるようになり、5日目でアルファ版を社内リリース。choさんほんとすごいなって思いました
JavaScript/CSS圧縮処理を80秒から6秒まで短縮したテクニック - Mozilla | エンタープライズ | マイコミジャーナル
The Mozilla Foundation Mozilla WebDevブログに「From 80 Seconds to 6: Optimizing Our Asset Compression」として、JavaScript・CSS・画像の連結およびミニファイ処理にかかる時間を、80秒～160秒レベルから6秒まで短縮させたときのテクニックが掲載されている。実用的な資料として参考になる。 現在、「Add-ons for Firefox」はCDNを活用してリソースを提供しているが、こうなる前はキャッシュ効果を最大限に発揮させるためにJavaScript・CSS・画像をファイルへ連結してミニファイ処理を実施して使っていたという。このリソースの生成には80秒から160秒かかっていたが、処理を工夫することで最終的に6秒にまで短縮を実現したと説明がある。 ここで紹介されている高速化テクニックをまとめると
CSSで無限回転のスライドショーを制作する方法 | エンタープライズ | マイコミジャーナル
A Web Design Community curated by Chris Coyier. 写真データがひたすら右から左に流れているサイトに遭遇することがある。それは何らかのイベントで撮影したであろう写真データを流すものであったり、製品の写真を写すものであったりさまざまだが、煩雑なUIでなければなかなかクールな見た目になる。 この効果はJavaScriptを利用しなくともCSSを使うだけで実現可能だという説明がCSS-Tricksにおいて「Infinite All-CSS Scrolling Slideshow」として掲載された。シンプルなCSS3で構築されており興味深い。ここでのアイディアは、流しておきたい画像を横長の1つの画像として用意しておき、それをkeyframeでアニメーションさせるというものだ。 たとえば次のような横長の画像を「summer.jpg」として用意したとする。
謎を解いて“o”を救出せよ！ GoogleがHTML5やCSS3を使ったパズルゲームを公開 - はてなニュース
Googleは8月17日（水）、HTML5やCSS3といった技術を活用したパズルゲーム「The Google Puzzle」を公開しました。参加型イベント「リアル脱出ゲーム」の企画、運営を行っている会社「SCRAP」と共同で開発したとのことです。 ▽ The Google Puzzle ▽ Google Japan Blog: 最新ウェブテクノロジーで作った The Google Puzzle を Chrome で楽しもう 「The Google Puzzle」は、Webブラウザで遊べるパズルゲームです。「Google マップ」や「Google 翻訳」「Google カレンダー」などのサービスを活用したパズルを解いて、ウィンドウに閉じ込められてしまったGoogleロゴの黄色い「o」の文字を救出します。問題は全部で5つ用意されており、1つ解くごとに難易度が上がります。答えがわからない場合は、
Webページ制作に使える6つの便利サイト | エンタープライズ | マイコミジャーナル
A Web Design Community curated by Chris Coyier. CSS-TricksにWebページ制作時に役立つ便利なページ紹介の記事「One Page Apps I Actually Use」が掲載されている。特にCSS3を利用するにあたって便利なページがまとまっており参考になる。紹介されているページは次のとおり。 まず紹介されているのはCSS3 Please!。このサイトはよく使われるCSS3機能のテンプレートをまとめたサイトで、コピー&ペーストして利用できる。主要ブラウザのベンダプレフィックス版もすべて記載されおり便利。コメントも記載されておりわかりやすい。CSS Border Radius Generatorは角の丸みをチェックするサイト。四隅のボックスに数値を入力すると、それを表現するためのCSS3が生成される仕組みになっている。-webkit-と
CSS 2.1、W3C勧告へ | エンタープライズ | マイコミジャーナル
The World Wide Web Consortium W3Cは6月7日(米国時間)、「CSS 2.1」をW3C勧告としたことを発表した。Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) SpecificationがW3C勧告として承認された規格となる。CSS 2が勧告として公開されたのが1998年であることを考えると、実に13年を経てCSSの新しい基盤となるバージョンが公開されたことになる。 CSS 2.1はCSS 2で問題とされてきた機能が整理されている。また、CSS 2.1のW3C勧告発表と同時に2つの仕様がW3C勧告として発表されている。 Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification CSS Color Module Level 3 A M
Firebug 1.7.0登場 - Firefox 4完全対応 | エンタープライズ | マイコミジャーナル
Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. FirebugワーキンググループはFirebugの最新版となるFirebug 1.7.0を公開した。FirebugはFirefoxで動作するエクステンション。HTML/CSSの解析やJavaScriptデバッグ、リソース読み込みの計測と分析などの機能を有し、WebページやWebサイトの開発に欠かせないツールの1つとなっている。 Firebug 1.7.0はFirefox 4に適応させることを目的として開発が進められたバージョン。Firebug 1.7.0の主な特徴は次のとおり。 ブレーク通知メッセージの再設計 DOMパネルおよびコンソールパネルにおけるローカル/セッション/グロバー
CSSで描いた「キュゥべえ」が登場 すごすぎてわけがわからないよ - はてなニュース
MBS・TBS系で放送中の人気アニメ「魔法少女まどか☆マギカ」に登場するキャラクター「キュゥべえ」を描いた1枚のイラストがはてなブックマークで話題を呼んでいます。なんとこのイラスト、画像をまったく利用せず、HTMLとCSSだけで描かれているそうです。 ▽ http://jsdo.it/norahiko/m1WT 以前はてなブックマークニュースではHTMLとCSSのソースコードのみで描かれた「ドラえもん」のイラストをご紹介しました。上記エントリーで見られるキュゥべえのイラストも、同じ手法で描かれています。一見画像のようですが、イラストの上で右クリックをしてみると“画像を保存できない”ことがわかります。 ▽ 画像は一切使ってない！？CSS3だけで描いた“ドラえもん”がすごい - はてなニュース このHTMLとCSSだけで描かれたキュゥべえ、作者さんによると、Google Chromeと、Fir
Sasha
Marsactu.fr vous l’a déjà raconté, les créatifs qui avaient travaillé pendant plusieurs semaines sur l’appel d’offre pour la création du logo et de l’identité v isuelle de Marseille 2013 avaient très, très mal pris son annulation. Lors d’un conseil d’administration, en Avril dernier, Bernard Latarget, le patron de 2013 avait purement et simplement déclaré l’appel d’offre « infructueux », sans aucu
画像は一切使ってない！？CSS3だけで描いた“ドラえもん”がすごい - はてなニュース
こちらの“ドラえもん”のイラスト、どうやって描かれていると思いますか？PhotoshopやIllustratorなどの画像編集ソフトで描かれているようにも見えますが、実はこのイラスト、なんと画像を一切使わずに「XHTML」と「CSS3」のソースコードのみで描かれているとのことです。 ▽CSS3 ドラえもん インターネット上でイラストを公開するには、JPGやGIFといった画像ファイルでアップロードするのが一般的。しかしこちらのドラえもんはそういった画像ファイルではなく、Webサイトを構築する際に使われるXHTMLとCSS3のソースコードのみで作られています。そのため“右クリックで保存”ができなかったり、ブラウザの種類やバージョンによって見え方が異なるのが特徴です。 こちらはFirefox3.6の場合です。FirefoxやGoogle ChromeはCSS3に対応しているので、グラデーションま
IE 6とIE 7のためのCSSハック16選（1/3） - ＠IT
有限会社タグパンダ 喜安 亮介 2009/11/17 Webブラウザごとのレンダリングエンジンの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのCSSハック＆フィルタTipsをお届けします（編集部） Webブラウザ別CSSハック一覧表 前回の「IE 6で泣かないための、9つのCSSハック」では、仕様通りの正しいコーディングを行っているにもかかわらず、Internet Explorer（以下、IE） 6で見ると、レイアウトがズレてしまうなどのさまざまな問題を解決するための9つのテクニックを紹介しました。 今回は、IE 6とIE 7のためのCSSハックのテクニックを下記に分けて紹介します。 IE 6をハック（IE 6のみに効く、もしくはIE 6のみに効かないハック） IE 6のみに効くハック スタ
IE6、IE7、IE8におけるCSSの違いまとめ | エンタープライズ | マイコミジャーナル
IE? - IE6, IE7 and IE8 Net Applicationsの報告によれば、2009年9月におけるブラウザシェアはIEが65.71%で過半数のシェアを確保している。バージョンごとにみるとIE6 24.42%、IE7 19.39%、IE8 16.84%となっており、IE6、IE7、IE8のシェアが拮抗しつつあることがわかる。これまでのシェア変動から推測すると、今後数ヶ月の間は3つのバージョンのIEが似たようなシェアを持った期間が続くことになる。IEが第一シェアだといっても、結果的に3つのバージョンに対応する必要がある。 この状況は、特にCSSのサポートという面で厄介な状況を生み出している。IE8はCSS 2.1への高い準拠を実現しているが、IE7はそうではない。IE6はサポートしている要素やプロパティがさらに少ない。またIE7やIE6は対象の要素やプロパティをサポートしてい
IE 6で泣かないための、9つのCSSハック (1/3) - ＠IT
有限会社タグパンダ 喜安 亮介 2009/10/8 Webブラウザごとのレンダリングエンジンの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのCSSハック＆フィルタTipsをお届けします（編集部） 最も多く使われているのに……、いや、だからこそ 多くのWebデザイナの悩みの1つは、レイアウトの表示ずれ問題だと思います。これは、各Webブラウザが採用しているレンダリングエンジンの違いから起因している場合が多いです。その中でも、最もWebデザイナ泣かせのWebブラウザなのは、マイクロソフトが開発しているIE（Internet Explore）のバージョン6です。 IE 6は、発売開始当初のWindows XPにデフォルトでインストールされていたWebブラウザということもあり、世の中の多くのユーザー
30分でできる！Webサイトを高速化する6大原則 (1/4)
Webサイトを制作するとき、「パフォーマンス」を気にしたことがあるだろうか？ もしまったく気にしたことがないなら、気をつけた方がいい。閲覧に時間のかかる“遅いWebサイト”はユーザーにフラストレーションを与え、閲覧をやめさせてしまう恐れがある。 下記のグラフは、「Simple-Talk」という海外のオンラインメディアで発表されたユーザー調査の結果だ。アンケートページの表示にかかる時間を意図的にコントロールし、表示時間によってユーザーが感じるフラストレーションの違いを調べたものだ。 縦軸がフラストレーション（10段階）、横軸が表示までの時間を表している。1～5秒以内にページが表示された人に比べ、ページ表示までに5秒以上かかった人は2倍以上もフラストレーションを感じている。フラストレーションがあまりに高ければ、せっかく何らかの目的を持って訪れてきたユーザーも待ち切れずにブラウザーを閉じてしまう
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
グリーに学ぶ、スマートフォン開発向けWebアプリ要素の最新技術 ～HTML5、CSS3を採用したポイントとは
http://www.designwalker.com/2009/11/html5.html
IEにも対応！10分でできるWebフォント実装法 (1/3)
はてなユーザーで、特定のユーザーの”存在”自体をすべて見たくない場合、対処法はありますか？…