HTML5 Boilerplateの開発者でGoogleのエンジニア、ポール・アイリッシュに聞くCSS高速化テクニック - builder by ZDNet Japan
Adobe Systemsがロサンゼルスで5月に初旬に開催した「Adobe MAX 2013」において、HTML5 Boilerplateの開発者として知られるPaul Irish氏の講演「Mobile CSS Performance」を聴講した。その内容をベースにしながら、CSSを高速化するためのさまざまなテクニックを紹介する。 Paul Irish氏は、HTML5 BoilerplateやModernizrなどの開発者として世界的に著名なGoogleのエンジニア。その彼が直接CSSのパフォーマンスを語るとあって、セッションは大変な人気であった。 一般的にウェブページの高速化、特にモバイルにおいてはCSSを高速化することよりもネットワークのパフォーマンスを最適化する方が効果が高い。そのため、まずはPageSpeedやYSlowなどを効果的に使用し、HTTPリクエスト数を減らす、ダウンロー
CSS 3のアニメーション機能「Transitions」 - builder by ZDNet Japan
CSS 3のアニメーション機能を利用すれば、文字や画像を動かしたり、背景色を滑らかに変化させるなど、これまではJavaScriptが必要だった処理をCSSで実現できるようになる。 CSS 3のアニメーション機能には「Transitions」と「Animations」の2種類が用意されており、いずれもCSSのプロパティ値を変化させることで動きを設定する。たとえば、background-colorプロパティの値を変化させれば、背景色が変化するアニメーションを設定できるというわけだ。 このとき、Transitionsでは動きの始点と終点の2つの値だけを指定する仕組みになっているのに対して、Animationsではキーフレームによる細かな指定ができるようになっている。 今回はこれらのうち、Transitionsの機能を利用したアニメーションを紹介したい。 なお、Transitionsの機能はW3C
Pagesアップデートで判明、Appleが取り組む「EPUBでビデオ」 - builder by ZDNet Japan
「HTML5を先取り」するApple 最初に確認しておきますが、IDPFが定めるEPUBはあくまで“規格”です。規格に基づいた実際の開発工程（実装）は、ソフトベンダーやオープンソースプロジェクトが担うため、規格と実装の間には往々にして食い違いが生じます。特に「XHTML+CSS」というウェブ標準に近い表示機構を要求されるEPUBビューアの場合、すでにあるHTMLレンダリングエンジンを活用することはむしろ自然で、EPUBで規定されていない機能が搭載されていても不思議はありません。 その実例が、AppleがiOS 4搭載機およびiPad向けに提供している電子書籍ビューア「iBooks」です。すでにブログなどを通じて報告されていますが、iBooksでは「ビデオ埋め込みのEPUB」を表示できます。その方法とは、HTML5のvideoタグを利用するというシンプルなもので、HTML5のサポートが進んで
あなたのウェブサイトを高速化する方法 - builder by ZDNet Japan
そして同氏は、世界で最も高速なウェブサイトの1つであるGoogleのパフォーマンスにかかわる仕事をしているのである。 ウェブのパフォーマンスには2つの重要な側面、すなわち効率性と応答時間がある。効率性は、世界ランキング100位に入るようなウェブサイトを構築する際に出てくるスケーラビリティという難問に取り組むための武器である。あなたのウェブサイトが何百万人単位のユーザーと、何十億単位のページビューを擁するような規模のものである場合、バックエンドアーキテクチャ全体に対する理解を深めておくことが重要となるだろう。 ページの速度というものは、HTMLドキュメント内に記述する一連の指示によって決定されると言っても過言ではない。 iGoogleを例に挙げると、バックエンド処理に費やされる時間、すなわちデータがキャッシュされていないために毎回リクエストされることで費やされる時間は、ページ全体の処理時間の
Flash Catalyst＋Flex 4でコラボしてみる - builder by ZDNet Japan
アドビがRIA開発におけるUIデザインツールとして発表した「Flash Catalyst」。デザイナーはFlash Catalystを使って、Illustratorなどでデザインしたパーツに対して、コードを書くことなくインタラクションを加えることができる。 11月にAdobeが発表した「Flash Catalyst」は、デザイナーとデベロッパーの架け橋となるツールだ。Flash Catalystを利用すると、デザイナーはコードを書くことなく、UIのインタラクションを開発することができる。これは、開発者がFlexを使ってUIを実装する段階においても、デザイナーがデザインに関与できるという意味を持っている。 Flash CatalystはAdobeが夢見るRIA開発ワークフローの要ともいえる製品なのだ。 本連載「Flash Catalyst＋Flex 4でコラボしてみた」では、デザイナーと
HTML 5のローカルデータベース機能: まずDatabaseオブジェクトを取得する - builder by ZDNet Japan
GREEの考える効率的データ管理 ハイブリッド環境にあるデータを一元で管理 有効活用とガバナンス強化を実現できた背景 リモート、オフィス、オンサイト 働く場所を選ばないハイブリッドワーク これからの快適な業務環境構築のポイント Identityマスターへの道（5回目） ID一元管理のメリットをライフサイクルから 考えてみよう！ ハイブリッドクラウドとAI これからの時代のデジタルビジネスを支える IBMの新たなビジネス＆パートナー戦略 Azureの上でVMware環境を動かす 昨年発表された注目の「AVS」 本当に使えるのか検証をしてみた結果 特集：IT最適化への道 成功の秘訣をその道のプロが解説 カギとなるのはシステムの「見える化」 SoRとSoEをつなぐDX推進の要 新しい時代の顧客とのデジタル接点管理 クラウド型商品管理基盤（PIM）の重要性 ネットワークもサービスとして使う いま企
Railsで業務システムはじめました - ヨシミ＠RAWHIDE. - builder by ZDNet Japan
どうも、Railsでエンタープライズやるよ、なんて言ってたら業務把握で自分でRailsさわってる余裕がほとんど無くなってしまった吉見＠RAWHIDE.です。 とは言いつつ、先日その業務システムの一部をRailsで作ってリリースしたんですが、これまでとは違った苦労がありますね。 LANケーブルに足ひっかけてMacBook落としてHD逝った 直すのに15万かかって会社にごめんなさい 講師をやったら全ての女性参加者に「雰囲気があまりよくない」って書かれた 寝袋買った 生まれて初めて携帯ゲーム買った。PSP おかげで本読む量が減った ずっと外に出っぱなしなので自分の席がなくなった まぁ、そんなこんなで、この数ヶ月の苦労が実りつつあり、これからは自分でもちゃんとRailsで開発していけそうです。 相手は超がつくほどの大企業。相手にとって不足はない。 いざ、エンタープライズ on Rails 押忍
ユーザーにとってはUIがすべて：UIデザイン原則をソシオメディアが語る - builder by ZDNet Japan
シーネットネットワークスジャパンは9月29日、builderとしては2回目のイベントとなる「builder tech day」を開催した。今回は「User Interface & beyond」をテーマに、ソシオメディア、マイクロソフト、アドビシステムズ、カールのスピーカーが登壇し、ユーザーインタフェースの現在と未来について講演した。 本稿では、ソシオメディア取締役である上野学氏の基調講演「ユーザーにとってはUIがすべて」を紹介しよう。 トイレにひそむUIのヒント 講演の冒頭、上野氏は米国の著名なデザイン・コンサルティング・ファーム、Adaptive Pathに2008年まで在籍していたDan Saffer氏と対話した際のエピソードを披露。 Saffer氏が「トイレにはユーザー・インタフェース・デザインの様々なヒントがある」と話していたことを紹介し、下の画像を示した。 上野氏は赤色の注意書
Google Chromeに携わったキラ星のような開発者たち：コミックから読み解く - builder by ZDNet Japan
Googleにとって制約であり続けたブラウザ Googleは9月7日に設立10周年を迎えた。つまりChromeは10年目の節目のプロダクトと呼べる。 独自のウェブブラウザを開発するというアイディアは、初期のころから温められていたという。ただ、本社で行われた記者会見で「Chrome」リリースのタイミングについて質問されたSergey Brin氏が「数年前はずっと小さな会社に過ぎなかった」と答えていたように、初期のGoogleにはブラウザ戦争に飛び込めるほどの体力がなかった。2001年にEric Schmidt氏がCEOに就任した当時、Internet Exlorerのシェアがすでに90%を超えていたのだ。反旗を翻して敵対するよりも、まずはその中でオンライン事業者としての地位を確立する方が先決だった。 また、Googleにとってブラウザは常に制約であり続けた。Chromeのリリースは、この先は
Flash、HTML、AJAX：ウェブアプリ戦争に勝利するのは - builder by ZDNet Japan
かつて、ウェブページは静的なテキストとグラフィックの集合体だった。しかし、ウェブが成熟してくるに従い、ウェブを豊かで双方向的なアプリケーションにするための技術についての激烈な競争が起こった。 一方の陣営は、HTML（Hypertext Markup Language）と呼ばれる元からあるウェブページを記述するための技術だ。HTMLの機能の不足は、最初は基本的なプログラミング言語であるJavaScriptで補われ、その後AJAXと呼ばれるJavaScriptが巨大化した技術で補われることになった。 もう一方の陣営はAdobe SystemsのFlashで、この技術はグラフィックのアニメーションを実現するための手段としてスタートした。その後、Flashは長年をかけてはるかに強力なプログラミング基盤に成長し、最近はMicrosoftのSilverlightという競争相手も登場している。 これらす
DeNA、「モバゲー」のウェブアプリフレームワークをオープンソースとして公開 - builder by ZDNet Japan
オラクルスペシャリストが語る！ 多くの企業で利用されるオラクルDBの課題 アセスメントの重要性とコスト最適化 激変するビジネス環境の中でのDX モダンアプリケーション戦略への取り組みが 市場の競争力の源泉となる クラウドネイティブの実現 モダンインフラの構築・運用の課題解決へ コンテナの可能性を広げるVMware Tanzu IT部門のDXはこれだ！ IT運用管理新時代における最適な運用管理 の現場作り 結果に差がつくウェビナーへの投資 デジタル営業時代における見込み顧客獲得へ ウェビナーの運用・集客・フォローの最適化 アプリケーションモダナイズ 求められている背景にあるビジネスの今 そして、成功の鍵を握るDevOpsの真の意味 さあ、その想いをカタチにしよう。 Google Cloud が企業の未来に向けた生産性 向上とコラボレーション実現のヒントを解説 サーバースペシャリストへの道 P
JavaScriptの関数オブジェクトを完璧に理解する - builder by ZDNet Japan
前回までのおさらいと今回のあらすじ 前回は、thisキーワードについて深く解説しました。関数内で使用する「this」は、状況に応じて様々に変化する可能性がある、というお話でしたね。 これでやっと、JavaScriptの関数が持つ様々な機能を説明するための前提知識が整いました！ JavaScriptの関数については、当連載でも一度取り上げています。JavaScriptの関数は、単なる手続きの単位ではなくオブジェクトの一種なのだ、と言うことを取り上げたトピックでした。 そう、JavaScript関数の実体は、Functionクラスのオブジェクトです。Functionクラスには、関数を操るための様々なメソッドやプロパティが存在します。今回は、それらを網羅的に解説するとともに、関数内でのみ使用可能な「arguments」オブジェクトについてもお話ししたいと思います。 Functionクラスのメンバ
自分がラクをするための自動化のススメ--WebデザイナのためのPHP入門 - builder by ZDNet Japan
これまでの2回で、PHPやデータベースの概要については理解していただけただろうか？ そうは言っても、理解するのと実際に作業するのは別の話。自分にはとうてい作れないだろうし、プログラマという職業の人の話だと思われる方も少なくないかもしれない。 確かに、本格的なスクリプトを自分で作ることは考えにくいかもしれないが、Webデザイナやマークアップエンジニアでも、まずは「自分がラクをするために」PHPを使ってみてはいかがだろう？ 今回は、PHPスクリプトの中でも、簡単に記述できてWebデザイナに役に立つサンプルをいくつか紹介したい。是非、気軽に利用してみて、できれば内容も理解してみてほしい。 コピーライト表記を自動化する Webサイトには必ずある「コピーライト表記」。たいていの場合、以下のように制作年を明記する。 Copyright© 2008 H2O Space. Co., Ltd. All Ri
JavaScriptがプロトタイプベースのオブジェクト指向言語ってどういうこと？ - builder by ZDNet Japan
前回までのおさらいと今回のあらすじ 前回は、「プロトタイプチェインとは何か」について詳しくお話ししました。オブジェクトのメンバを検索するにあたって、JavaScriptランタイムがプロトタイプチェインを順々に検索していくと言う動作についてのお話でした。 今回は、きわめて単純に見えるこの仕組みが、JavaScriptにとっていかに重要であるかを説明したいと思います。そのために、まずプロトタイプチェインを用いて擬似的なクラスの継承を行い、その上でObjectクラスが持つメンバについてもお話ししておきたいと思います。 プロトタイプチェインを使った擬似的な継承 前回お話ししたプロトタイプチェインについては、しっかり理解していただけましたでしょうか。この一見単純な仕組みを応用すると、JavaScriptにおいても、擬似的なクラス継承を実現することができます。 例えばPersonクラスを継承したShi
JavaScriptのプロトタイプチェインをちゃんと理解する - builder by ZDNet Japan
前回までのおさらいと今回のあらすじ 前回まで、JavaScriptでオブジェクト指向を行う方法についてお話ししてきました。コンストラクタやthisオブジェクトなど、様々なことについてお話ししてきましたが、その中でも重要なのはプロトタイプという概念です。 プロトタイプについては前々回お話ししました。その内容を簡潔に表すと、「オブジェクトのメンバは、『オブジェクト自身→プロトタイプ』と言う順序で検索される」ということでした。 しかし、この話にはまだ先があります。それが「プロトタイプチェイン」と言う概念です。 「プロトタイプチェイン」は、JavaScriptプログラムの動作を理解する上ではある意味中核ともいえる概念で、またとても面白いところでもあります。 プロトタイプチェインとは？ いきなりですが、プロトタイプってそもそも何なのでしょう？ 前々回もお伝えしたとおり、「オブジェクト自身→プロトタイ
SE出世双六--ITSSに基づいたキャリアアップでSEの仕事を疑似体験 - builder by ZDNet Japan
EDRトップランナー対談：後編 セキュリティ戦略を転換せざる得ない背景と EDRのような手法が必要な理由に迫る クラウドネイティブの実現 モダンインフラの構築・運用の課題解決へ コンテナの可能性を広げるVMware Tanzu 結果に差がつくウェビナーへの投資 デジタル営業時代における見込み顧客獲得へ ウェビナーの運用・集客・フォローの最適化 オラクルスペシャリストが語る！ 多くの企業で利用されるオラクルDBの課題 アセスメントの重要性とコスト最適化 単純なインフラ製品の販売ではない DX、コンテナプラットフォームの実証など 自社の取り組みで得られた知見を顧客に提案 体験から学んだ成功への知見 マネーフォワード×エム・フィールド対談 Fintechプラットフォーム開発の「鍵」 時代はサーバ仮想化からコンテナへ あらためて整理したい企業ITにおける コンテナ活用の基礎と採用メリットを紹介 大
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
