あなたのウェブサイトを高速化する方法 - builder by ZDNet Japan
そして同氏は、世界で最も高速なウェブサイトの1つであるGoogleのパフォーマンスにかかわる仕事をしているのである。 ウェブのパフォーマンスには2つの重要な側面、すなわち効率性と応答時間がある。効率性は、世界ランキング100位に入るようなウェブサイトを構築する際に出てくるスケーラビリティという難問に取り組むための武器である。あなたのウェブサイトが何百万人単位のユーザーと、何十億単位のページビューを擁するような規模のものである場合、バックエンドアーキテクチャ全体に対する理解を深めておくことが重要となるだろう。 ページの速度というものは、HTMLドキュメント内に記述する一連の指示によって決定されると言っても過言ではない。 iGoogleを例に挙げると、バックエンド処理に費やされる時間、すなわちデータがキャッシュされていないために毎回リクエストされることで費やされる時間は、ページ全体の処理時間の
ウェブインターフェイスの６原則 - everything might happen tomorrow - yhassy - builder by ZDNet Japan
ネットワークもサービスとして使う いま企業ネットワークが受ける大きな制約 クラウドシフトで大きく変わる！ Microsoft 365のデータは安全か？ クラウド型アプリを採用する企業のための 包括的なデータ保護のありかたを解説 次の一手はこれだ！ ZDNet×マイクロソフトが贈る特別企画 今、必要な戦略的セキュリティとガバナンス 大学、研究機関、製造業など いま目覚ましい躍進ぶりを見せるデルのHPC その背景と選ばれる理由にせまる ものづくり現場の情報セキュリティ インダストリー4.0は製造業の変革期 工場のデジタル化によるリスクへの対応 単純なインフラ製品の販売ではない DX、コンテナプラットフォームの実証など 自社の取り組みで得られた知見を顧客に提案 DXの成否を分けるのはガバナンス Microsoft Security Forum 2021 Day2 どこよりもわかりやすい基調講演解
CSS 3のセレクタ「:target」でタブメニューをつくる - builder by ZDNet Japan
CSS 3のセレクタ「:target」を利用すれば、リンクをタブメニューの形で表示して、1ページ内に記述したコンテンツを切り替えて表示するように指定することが可能だ。HTMLとCSSだけでタブメニューを作成する場合、これまではコンテンツごとにページをわけて作成する必要があったため、1ページで実現できるメリットは大きいと言える。 ここでは、positionプロパティを指定して「テキスト1」から「テキスト5」を同じ位置に重ねて表示している。その上で、リンクをクリックしてターゲットとして表示されたときにだけz-indexプロパティを適用して、手前に表示するように設定した。 div{ position: absolute; top: 17px; left: 20px; } #text1:target{ z-index: 2; } #text2:target{ z-index: 2; } #text
アドビCTOのリンチ氏「ユーザーはクラウドのリスクを十分に理解してない」 - builder by ZDNet Japan
アドビ システムズは1月29日と30日の2日間、プライベートカンファレンス「Adobe MAX Japan 2009」を開催した。本誌はこのイベントに合わせて来日したAdobe SystemsのCTO（最高技術責任者）、Kevin Lynch氏とマンツーマンでインタビューする機会を得た。Lynch氏に同社の戦略やアプリケーションの将来像について話を聞いた。 Adobe MAX Japan 2009の基調講演で、Adobeはいわゆる「クラウド」上のサービス展開を強化する考えを打ち出しました。クラウドではインフラの整備が重要になりますが、Microsoftのデータセンターは100万台規模、Googleは300万台規模と、サーバ台数に関する予測の数字を耳にする機会があります。Adobeが抱えているクラウドの規模はどの程度なのですか？ かなりあると思います（笑）ただ、我々はサーバの台数やインフラの
オフィス探訪 アドビ編：木材と白熱灯に囲まれた暖かい環境 - builder by ZDNet Japan
エッジ市場の活性化へ 高まるIoTを中心としたエッジ分野への期待 OSS活用が新しい時代のビジネスを拓く 電話営業・インサイドセールの革新 AIによる自動文字起こし・会話分析が 音声コミュニケーションの可能性を拓く Anywhere Workspace！ ハイブリッドワーク時代の働き方 分散業務環境3つの課題と解決策 A Business New Era あらゆるモノ・コトが変化している今 デジタルでビジネスは生まれ変わる 注目急上昇中のDaaS最新情報 コロナ禍を背景に利用者と機能を拡大中 Azure Virtual Desktop最新情報 オリジナルコンテンツが満載！ 意外と知らないNutanix HCI の情報を集約 読めばわかる！いまHCIが注目される理由 大事なのは”仕事の段取り” 幅広い業務を任されているからこそできる ひとり情シス流の業務改善術 コーマス広告の大変動 プライバ
あなたを悩ます、6つのタイプの「困った人たち」 - builder by ZDNet Japan
DX時代のアプリケーションセキュリティ 未来革新プロジェクトに邁進するSOMPO 基幹システムのモダナイゼーションに迫る ビッグデータ最前線！ これからのビジネスを左右する データ活用の基礎から応用までを紹介 いまさら聞けない「PPAP」 なぜ危険？なぜダメ？なぜ禁止？ PPAP運用の危険性と改善策 SECCON2020レポート第二弾！ 名実ともに世界標準に！ 次の10年に向けたリファクタリング進行中 IDaaSって何？ Identityマスターへの道4回目は ID管理ををシンプルにする方法を紹介 SoRとSoEをつなぐDX推進の要 新しい時代の顧客とのデジタル接点管理 クラウド型商品管理基盤（PIM）の重要性 性能の大幅向上を実現！ 最新AMDプロセッサを採用した最先端H/W ユーザーの求める幅広いラインナップを実現 部分最適だけではダメ DX実現のための最初の一歩 業務プロセスのデジタ
CSS 3のセレクタ：スタイルシートを繰り返し適用する - builder by ZDNet Japan
前回までに紹介したセレクタ、:nth-child()、:nth-last-child()、:nth-of-type()、:nth-last-of-type()を利用すると、スタイルシートの設定を3要素おきに適用したり、最初の3要素だけに適用するといった使い方もできる。 ブラウザはFirefox 3.1（ベータ版）、Safari 3.1、Google Chrome、Operaが対応しているので表示を確認してみてほしい。 スタイルシートの設定を3要素おきに適用する スタイルシートの設定を3要素おきに適用するためには、前々回の記事「CSS 3のセレクタ：最初と最後、偶数と奇数の要素にスタイルシートを適用」で紹介した「指定したナンバーの項目に色をつける」機能を応用する。 そこでまずは、この機能を利用してリストの1つ目から3つ目の項目の背景色を指定してみよう。ここでは:nth-child()で何番目
CSS 3のセレクタ「:nth-child()」の問題を回避する方法と応用例 - builder by ZDNet Japan
前回の記事「CSS 3のセレクタ：最初と最後、偶数と奇数の要素にスタイルシートを適用」では、:nth-child()などのセレクタを利用してリストのデザインをカスタマイズした。今回は、これらのセレクタを利用したときに発生する問題点を見ていきたい。 なお、ブラウザはFirefox 3.1（ベータ版）、Safari 3.1、Google Chrome、Operaが対応している。Internet Explorerはバージョン8（ベータ版）でも対応していない。 :nth-child()の問題 前回は、<li>でマークアップしたリストの項目を奇数と偶数で色分けして表示するため、li:nth-child(odd)とli:nth-child(even)で次のようにスタイルシートを指定した。 ここでは、奇数番目の項目の背景を黄色で、偶数番目の項目の背景を水色で表示するように指定している。ブラウザの表示を確
HTML 5のローカルデータベース機能を利用してアドレス帳を作成する - builder by ZDNet Japan
ローカルDBを利用したアドレス帳 ここでは、ごく簡単なアドレス帳をローカルDBを用いて作成してみる。外観は図1のようにし、名前とアドレスを記入して[追加]ボタンを押すとローカルDBに入力されたデータを登録する。なおFirefox 3ではローカルDBがサポートされていないため、今回はSafari 4.0を使用した。 まず外観のHTMLと初期化部分のJavaScriptはリスト1のようになる。最初にローカルDBがサポートされているかを調べ、サポートされている場合にはwondow.openDatabase()を実行する。 リスト1 ページが読込まれる際にDatabaseオブジェクトを取得 ローカルデータベースの使用例 名前： アドレス： 名前アドレス Databaseオブジェクトが取得できたら、SQLを実行してデータベースからアドレスのデータを取り出し、アドレス表を作成する。データはAddres
HTML 5のローカルデータベース機能: まずDatabaseオブジェクトを取得する - builder by ZDNet Japan
GREEの考える効率的データ管理 ハイブリッド環境にあるデータを一元で管理 有効活用とガバナンス強化を実現できた背景 リモート、オフィス、オンサイト 働く場所を選ばないハイブリッドワーク これからの快適な業務環境構築のポイント Identityマスターへの道（5回目） ID一元管理のメリットをライフサイクルから 考えてみよう！ ハイブリッドクラウドとAI これからの時代のデジタルビジネスを支える IBMの新たなビジネス＆パートナー戦略 Azureの上でVMware環境を動かす 昨年発表された注目の「AVS」 本当に使えるのか検証をしてみた結果 特集：IT最適化への道 成功の秘訣をその道のプロが解説 カギとなるのはシステムの「見える化」 SoRとSoEをつなぐDX推進の要 新しい時代の顧客とのデジタル接点管理 クラウド型商品管理基盤（PIM）の重要性 ネットワークもサービスとして使う いま企
CSS 3のセレクタ：最初と最後、偶数と奇数の要素にスタイルシートを適用 - builder by ZDNet Japan
今回から、CSS 3の草案「Selectors」で新しく追加されたセレクタについて紹介していきたい。これまでCSS 3のセレクタに十分に対応しているのはOperaだけだったが、FirefoxがFirefox 3.1（ベータ版）で、SafariもSafari 3.1で対応を進めたことにより、Internet Explorerを除く主要なブラウザで利用できるようになった。 今回は、「:first-child」と「:last-child」、「:nth-child()」と「:nth-last-child()」を紹介する。これらのセレクタを利用すると、最初と最後の要素や、指定したナンバーの要素、さらには奇数と偶数の要素に対してスタイルシートを適用することができる。そのため、これまでのように余計な やクラス名を追加することなく、さまざまなデザインを設定できるようになる。 たとえば、こうしたセレクタを利
長い単語やURLの改行をコントロールするword-wrapプロパティ - builder by ZDNet Japan
欧文のテキストは半角スペースの位置で改行される。そのため、半角スペースが入らない長い単語は途中で改行されることがない。レイアウトスペースの横幅が狭い場合、長い単語ははみ出してしまい、レイアウトを崩す原因となる。 とはいえ、レイアウトスペースよりも横幅が長い単語を使う機会はほとんどないだろう。問題が発生する確率が高いのは、長いURLを表記した場合だ。 URLは半角スペースを含まないので、ブラウザにとっては1つの長い単語と同じ扱いになる。特に、ブログなどのコメントで長いURLを記述されると、制作者の予期しないところでレイアウトが崩れる原因になってしまう。 そこで今回は、ブラウザごとのURLの改行処理の違いを確認して、長い単語やURLの改行をコントロールするword-wrapプロパティを紹介したい。 ブラウザごとのURLの改行処理 次のサンプルは、横幅が300ピクセルのボックス内に長い単語やUR
HTML 5の2つのDOM Storageを利用したカウンター - builder by ZDNet Japan
DOM Storageの仕組みを利用したカウンターの例 HTML 5の仕様では、sessionStorageがウィンドウやタブが開かれている間のみデータを保持するのに対して、localStorageではウィンドウやタブを閉じた後もデータを保持し、originが同じページで共有することはすでに説明した。現時点ではFirefox 3のglobalStorageもlocalStorageと同様に考えてよい。リスト1はその特性を利用したカウンターの例である。 この例ではlocalStorage.visitsにカウンターの値を保持している。そしてsessionStorage.visitingが設定されていない場合のみカウンターの値を1つ増やすようにしている。 リスト1 DOM Storageを利用したカウンターの例 DOM Storageによるカウンター 最初にページを開いたときにはまだsessio
HTML 5のsessionStorageを利用してブラウザにデータを保存する - builder by ZDNet Japan
sessionStorageの使用方法 sessionStorageはStorageインタフェースのインスタンスであり、Windowオブジェクトのプロパティとして定義されている。したがって"sessionStorage"または"window.sessionStorage"としてアクセスできる。 保存するデータはキーと値をペアとし、sessionStorageオブジェクトのプロパティとして扱うことができる。キーと値にはDOMStringオブジェクト、すなわち文字列を指定する。例えば"Ziddy"という値をキー"username"として保存したい場合には、リスト1のようにすればよい。値にオブジェクトを指定したとしても、ストレージには文字列表現で保存される。 リスト1 sessionStorageにデータを保存する sessionStorage.username = "Ziddy"; データを取
CSS 3のボックスレイアウトでコンテンツを画面の中央に配置する - builder by ZDNet Japan
DNSを守り、DNSで守る 高度・巧妙化し危険度を増すサイバーリスク いま考えるべきモダンセキュリティのあり方 仮想環境データ保護の新次元 高度化・複雑化するIT環境の課題への解決策 最新鋭データ保護・管理ソフトウェア基盤 勝つためのクラウド活用術 New Value on Azure ビジネスを次のステージへ！ サステナビリティの今と未来 企業戦略としてのサスティナビリティ推進 世界の通信インフラを支えるコルトの取組み 今時プライベートクラウドの作り方 2020年代のプライベートクラウド環境を AzureとVMwareを例に紹介 すぐに実践できる仕事効率アップ術 驚きの効果をもたらす外付けディスプレイ なんと最大50％の業務効率アップも！ 最新ストレージで変わるIT運用 仮想化テクノロジーとFlashArrayの組合せで 運用負荷軽減と高性能化を実現したDMM Kubernetes活用の
デザイナーが最後までデザインに関与できる「Flash Catalyst」 - builder by ZDNet Japan
サンフランシスコで開催中の開発者カンファレンス「Adobe MAX 2008」において、Adobe SystemsのDave Gruber氏がインタビューに応じ、RIAのためのデザインツール「Flash Catalyst」と統合開発環境／SDK「Adobe Flex 4」について語った。 なお、Gruber氏へのインタビューはグループインタビュー形式で行った。 Flash Catalystで変わるデザイナーのワークフロー RIA向けのUIデザインツールであるFlash Catalyst（コードネーム「Thermo」）は、Adobe MAX 2007で初めて披露された。製品の詳細は2007年の発表とそう変わってはいない。 どうしてThermoがすごいのか？：Adobe Max 2007より Dave Gruber氏は「これまでのワークフローでは、デザイナーは時間の多くをCS（Creative
ボックスレイアウトで簡単リキッドレイアウト - builder by ZDNet Japan
前回の「CSS 3における新しいレイアウト手法：ボックスレイアウト」に引き続き、「display: box」と指定して実現するボックスレイアウトの特徴を見ていきたい。 今回は、ボックスレイアウトでリキッドレイアウトを作成する方法と、段組みの段の表示順序を指定する方法を紹介する。これまでのfloatやpositionプロパティを使ったレイアウトと比較すると、簡単に設定できるのが特徴だ。 なお、ボックスレイアウトはCSS 3の「Advanced Layout Module」という草案で提案されている新しいレイアウト手法で、現在のところFirefoxとSafari、Google Chromeが対応している。 リキッドレイアウトで段組みを作成する ブラウザウィンドウの大きさに合わせて横幅が変わるレイアウトを「リキッドレイアウト」と呼ぶ。これまでのようにfloatプロパティを使ったレイアウトではネガ
ボックスレイアウトの方向をコントロールする - builder by ZDNet Japan
ボックスレイアウトではレイアウトの方向を簡単に指定することができる。これにより、要素を横に並べた段組みのレイアウトだけでなく、縦に並べたときのレイアウトも細かくコントロールすることが可能だ。 なお、ボックスレイアウトはCSS 3の草案「Advanced Layout Module」で提案されているレイアウト手法で、現在のところFirefoxとSafari、Google Chromeが対応している。詳しくは前回までの記事を参照してほしい。 CSS 3における新しいレイアウト手法：ボックスレイアウト ボックスレイアウトで簡単リキッドレイアウト ボックスレイアウトの方向を指定する 次のサンプルでは全体を囲んだ をボックス要素として表示するため、「display:box」と指定している。すると、ボックス要素の子要素「テキストA」〜「テキストC」は横に並べて表示される。これにより、ボックスレイアウト
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS 3のセレクタ解説：属性セレクタ - builder by ZDNet Japan
コードを書く全ての人に - builder by ZDNet Japan