2010»5月»ヤフーユーザーインターフェイスブログ（YUIBlog）

オフラインアプリケーションでのYUI 3の使用の概要

2010年5月27日13:53アレクサンダー状況について別|中開発 | 9コメント

著者について：アレックス状況については、フロントエンドとして働き過ぎるとYahoo!のフロントエンドエンジニアとして働いて、彼はスタック全体に取り組んで楽しんでいます。 彼はまた時間の読書、キュレーション、およびインターネットについて書く、ソーシャルメディア、建物のウェブサイトの多くを費やしています。 あなたは彼のウェブサイトでそれのすべてを見つけることができますalexkessinger.net 。 また、Twitterで彼を見つけることができます@ voidfiles 。

私は、HTML5、蒸気を構築しているが、その時間が経過していると言うこともできます。HTML5はここにあります。携帯電話がすでに巨大である、WebKitは急速に成長しており、今後数年間で自分の携帯電話および/またはラップトップのHTML5対応ブラウザを持って人々の数はHTML5の機能が標準装備されていた "ニューノーマル"を作成します。

HTML5の素晴らしい機能の一つは、アプリケーションキャッシュのウェブサイトのキャッシュにファイルブラウザに指示すると、ブラウザはネットワーク接続を持たないときにキャッシュファイルを使用する能力を与える。あなたは、ユーザーが、彼がオフラインである間、あなたのアプリケーションの少なくとも一部にアクセスできるようになりますことを保証するためにアプリケーションキャッシュを使用することができます。携帯電話やタブレット（またはラップトップのようにも昔ながらのデバイス）のようなデバイスの場合、これは、ユーザーが飛行機の中にアプリを使用することができますことを意味します。一方、あなたは、Webテクノロジを使用してアプリケーションを構築するのではなく、Objective-Cの勉強を続けてもらう。

ほかにアプリケーションキャッシュは、Web開発者は便利なオフラインでの経験を作成するためのツールを与えるHTML5で利用可能な他のAPIもあります。ほとんどの新しいブラウザで利用できる2つの永続ストレージのAPIがあります。 Oneと呼ばれる単純なキー/値のデータストアであり、 localStorageを。第二は、 SQLデータベース。ユーザーがオフラインのときに両方を活用することができます。

念頭に置いて、これらの概念を、私はどのように我々はYUI好きのすべての上に構築されたアプリケーションでアプリケーションキャッシュと永続的なストレージ活用することができます見ての踏み台として使用し、常緑の "To Doリスト"アプリケーションを探索するつもりですYUI 3ギャラリーを含む3。

マークアップ

マークアップは、常にWebに関連するものを構築するときに起動するのに最適な場所です。私たちのHTML5のページの基本的なシェルの場合：

  <！DOCTYPE HTML>
 <HTML
 <HEAD>
     <TITLE> YUI ToDoのタイトル</ title>
     <link rel="stylesheet" type="text/css" href="base.css" media="screen" title="no title" charset="utf-8">
 </ HEAD>
 <body class="yui-skin-sam">
     <script src="yui-min.js"> </ SCRIPT>
     <script src="base.js"> </ SCRIPT>
 </ BODY>
 </ HTML>

我々はオフライン対応アプリケーションを構築しているが、ちょうど決算のbodyタグの前にベストプラクティスが頭の中でCSSを入れて、Javascriptを実行します。ページがオフラインで利用可能になるだろうされている場合でも、最初のページのロードが応答しなければなりません。（ここでは上空で、単純なHTML5のDOCTYPEを使用していることに注意してください。）

アプリはいくつかのプレースホルダのマークアップを必要とします。

 <！DOCTYPE HTML> <HTML> <HEAD> <TITLE> YUI ToDoのタイトル</ title> <リンクのrel = "スタイルシート"のhref = "base.css"タイプ= "text / cssの"メディア= "画面"タイトル= "NOタイトルの "charset =" UTF-8 "> </ HEAD> <body class="yui-skin-sam"> <div id="doc3"> <div class="hd"> <H1>のToDoアプリ</ H1 > <a class="callout" href="http://alexkessinger.net" target="_blank">アレックス状況についてで</ a>の<div class="item_entry"> <form class="entry_form"> <入力type = "text"の名= "todo_item_input"クラス= "todo_item_input"> <p class="toRight"> <a class="addItem" href="#add">追加</ a> </ P> </フォーム> </ DIV> </ DIV> <div class="bd"> <div class="yui-main"> <div class="yui-b"> <div class="todo_items"> <H2>藤堂項目</ H2> <UL> <li class="no_items">のToDo項目を取得しています... </ LI> </ UL> </ DIV> </ DIV> </ DIV> </ DIV> <DIV ID = "デバッグ "> </ DIV> <！ - 初期化処理/ /  - > <script src="yui-min.js"> </ SCRIPT> <script src="base.js"> </ SCRIPT> </ DIV> </ BODY> </ HTML>

これにより、ユーザーは我々は、彼らが最初のアプリケーションをロードするとき、それらのいくつかのデータを得ることに計画してお知らせします。また、我々の段階では、作業を開始する我々のJavascriptのDOM構造を設定します。

プログレッシブ·エンハンスメントについての注意

アプリケーションがプログレッシブ·エンハンスメントの原則で構築されても、オフラインで使用するために利用できるようにすることができない理由はありません。この探査では、私がオフラインのサポートに必要な技術を可能な限り集中するために、PEに関与される追加の複雑さを省略している。いくつかはそのアプローチを批判するかもしれない、と私は、その引数に同情です。

モバイルデバイスを扱うための追加プロパティ

iPhoneOSとAndroidのブラウザでは、特別な注意をせずに、ほとんどのWebページを処理することができますが、モバイルデバイスを扱うときには、コンテンツが小さな画面に収まるように圧迫される方法を調査する価値があります。 Quirksmodeはありません持って1が2もあなたの時間の価値があるビューポートに関する詳細な記事を。

簡単に言うと、ビューポートと呼ばれるmetaタグには、があります。それは次のようになります。

  <meta name="viewport" value="">

ビューポートのタグの目的は、携帯電話のブラウザでは、小さな画面上で非常に大きなWebページを表示する方法を見つけ出す手助けをすることです。モバイルデバイスは、ほとんどのデバイスは300-500px画面上のコンテンツの700-1100px搾取しようとしているので、助けが必要です。また、我々は100％で私たちの幅を設定すると、ブラウザは、デバイスのサイズ内に収まるように大きいことからスケールにしてウェブページがどうあるべきかビッグでその最良の推測を取り、。

我々はこれにビューポートを設定することができますするのに役立ちます。

  <meta name="viewport" value="width=device-width">

これは、デバイスの画面の幅にページの幅を設定するデバイスを指示します。我々はページが流体であることを確認した場合、私たちのページは、ほとんどのモバイルデバイス上の画面を記入します。また、これは電話がランドスケープモードを持っている場合ページが余分なスペースを埋めるために拡大することを意味します。

我々は同様にビューポートに行うことができます他のものがあります。あなたは携帯電話のブラウザで働いている場合、あなたは、あなたがズームすることができます知っています。あなたが画面全体を埋めるためにウェブサイトを構築するための時間に服用している場合には、ユーザーがズームできるようにすることはできません。我々は次のようなものであることが私たちのビューポートを設定した場合、ユーザーはズームすることができる、または縮小されません。 iPhoneのようなデバイスでは、これはそれがよりネイティブな気分にさせる可能性があります。あなたがこれを行う場合でも、アプリの内容は、ユーザーがこれまでに拡大したいする理由（例えば、小さなテキスト）を与えないことを確認し、それ以外の場合、これはイライラするユーザビリティの制約となります。

  <meta name="viewport" value="width=device-width,user-scalable=no">

ビューポートは、W3C標準ではなく、一般的な規則です。それは現在、iPhoneとAndroidのオペレーティングシステム上でWebKitのブラウザでサポートされています。フェネックは、Mozillaのモバイルブラウザは、おそらくこの規則をサポートします。

CSS

もっとしてこれまで、流体と動的であるためにCSSの機能を使用することが重要です。携帯電話、タブレット、および他の小さい画面の広い範囲を見たときに、アプリケーションの開発者は、我々のアプリがデバイスの過多に使用されることになることに注意する必要があります。魔法の杖が存在しないにもかかわらず、我々はすべてのデバイス上で完璧なピクセルである必要はないかもしれませんほとんどのアプリケーションで、すべてがうまく動作するように振ることができます。ただ、次のベストプラクティスは私達にほとんどのデバイスをサポートする方法のほとんどを取ることができます。

％で、そのベースに我々のアプリの幅を設定して起動すると、素晴らしいスタートです。 EMSがレンダリングされたウェブページに基づいて計算されているため、emはフォントサイズを設定しません使用することも有用である。ことができますもう一つは、あなたが同様の割合で列幅を基にしているか確認することです。偶数列の溝は、EMので設定することができます。

多くの作業を行うことなく、開始するには絶好の場所では、CSSのフレームワークです。 YUI 2グリッドCSSが自然に私たちのお気に入りの一つであり、それは私たちが比率ではなく静的な幅のブロックの面で私たちのページと考えることができます。

ので、ここでYUI 2 CSSグリッドをオフに構築することは私のアプリのための出発CSSです。

  。todo_items {
    パディングトップ：1EM。
 }

 。todo_items UL {
    パディング：0;
    マージン：0;
 }
 。todo_items UL李{
    マージン：0.125 EM 0.5 EM 0;
    パディング：0.125全角0 0 0;
    国境トップ：1px固体＃cccの;
    リストスタイル：なし;
    表示：ブロック;
    ワードラップ：ブレークワード;
    テキストラップ：抑制。
 }

 。toRight {
     テキストが整列：右;
 }

 。yui3-consoleを{
     テキストが整列：左;
     のmargin-left：10pxの;
 }

本体H1 {font-sizeは：200％;}
体H2 {font-sizeは：150％;}

Javascriptを

私たちのオフラインに江原アプリケーションの次はJavaScriptです。最初のダウンロードyui_min.jsをドキュメントルートに、我々は上記の持っているようにマークアップに追加します。その後に入れbase.jsファイル：

  YUI（）を使用します（ "ノード"は、関数（Y）{
     Y.one（ "todo_items H2"）setContent（ "私は飛行しています。"）;
 }）;

ノードに加えて、私も含めるつもりYUI 3 CSSリセットとYUI 2 CSSのグリッドを。私はからモジュール含めるつもりYUI 3ギャラリー、ライアングローブの優れたストレージLiteは 1、使いやすいAPIへの可能性のあるすべてのローカルデータストレージの方法をラップします。

  YUI（）を使用します。（ 'cssreset'、 'yui2·グリッド "、"ギャラリー·ストレージ-liteの'、 'ノード'、関数（Y）{

   / / TO-Doリストアプリケーションコード

 }）;

注：私はto-doリストのコードを、また、私はそれが簡単にモバイルデバイス上のプロジェクトのこの種をデバッグするために使用したいテクニックのいくつかに飛び込むつもりはありません。あなたはgithub上でそのすべてを見つけることができます。 yui3-TODO 。内側base.jsあなたは、アプリ全体を見つけることができます。また、アプリを見て、で動作することができhttp://html5.alexkessinger.net/yui/ytodo/ 。ここでは、オフライン機能を備えたこの単純なアプリケーションを強化するために必要な手順に焦点を当てるつもりです。

キャッシュマニフェスト

Webアプリケーションをオフラインにする最初のステップは、アプリケーション·キャッシュ。アプリケーションキャッシュは、ダウンロードしてオフラインで保存しておきたいものをファイルブラウザに指示することができます。この例では、私はアプリのための私のJavaScriptと私のCSSをオフラインと同様に、メインのHTMLページを保存しておきたい知っている。このことを念頭に置いて、私のキャッシュマニフェストは次のようになります。

 キャッシュマニフェスト

 index.htmlを
 base.css
 yui_min.js
 base.js

いくつかのキャッシュマニフェストについて注意すべき。

それは次の行で開始する必要がありますCACHE MANIFEST 。
あなたは、text /キャッシュマニフェストのContent-Typeヘッダでそれを提供する必要があり

あなたは、Apache上にある場合には、次のスニペットを追加することができます.htaccess適切なコンテンツタイプを取得する。

 テキスト/キャッシュマニフェストをAddTypeのマニフェスト

代わりに、その上で、任意のファイル.manifest接尾辞が添えられるtext/cache-manifestのContent-Typeヘッダー。

次に我々は我々のHTMLタグに属性を追加することを行うには、キャッシュマニフェストのブラウザに通知する必要があります。

  <html manifest="todo.manifest">

あなたがオフラインのアプリをサポートするブラウザで、ページに行けば今、あなたはおそらくこのWebページがオフラインアクセスを要求していることを示す通知が表示されます。

オフライン/オンライン

どのようなキャッシュへのリソース私たちのブラウザを伝える代わりに、マニフェストでは、我々はオンラインモードとオフラインモードでは何が起こるかを考える準備が整いました。二つの "ブート·シーケンスは、"今あり、我々はすでに（とリソースがオフラインで使用するためにキャッシュされている時に）持っていることを完全にオンラインでシーケンスである最初の。このオンライン·シーケンスは、ファイルをロードするためにYahooのCDNを使用しており、我々は少数のHTTP要求を持っているので、ファイルはコンボ処理されます。

しかし、我々はまたオフラインでブート手順を構築しています。我々は、キャッシュされたリソースから描画するYUIを正しく初期化され、ブラウザがオフラインであるという事実を検出し、できるようにする必要があります。

  VARオンライン=（navigator.onLine）？ 真：偽;

今、私たちは、オフライン、またはオンライン状態に基づいて構成オブジェクトを選択する必要があります。

  VAR YUI_ONLINE_CONF = {}、
     YUI_OFFLINE_CONF = {
        ベース： "yui3/build /"
        組み合わせる：0、
        グループ：{
            ギャラリー：{
                ベース： 'yui3-gallery/build /'、
                パターン：{'ギャラリー - '：{}}
             }
             yui2：{
                ベース：'2 in3/dist/2.8.0/build / '、
                パターン：{
                     'yui2-'：{
                         configFn：関数（私）{
                             {（ベース/ .test（me.name）|リセット|フォント| |グリッド/皮）の場合
                                 me.type = 'CSS';
                                 me.path = me.path.replace（/ \ js /に、 'CSS'）;
                                 me.path = me.path.replace（/ \ / yui2皮/、 '/ assets/skins/sam/yui2-skin'）;
                             }
                         }
                     }
                 }
             }
         }
      }
      ONLINE =（navigator.online）？ 真：偽;
      CURRENT_CONF =（ONLINE）？  YUI_ONLINE_CONF：YUI_OFFLINE_CONF。

 YUI（CURRENT_CONF）を使用します（ 'cssreset'、 'yui2·グリッド "、"ギャラリー·ストレージ-liteの'、 'ノード'、関数（Y）{
     ...
 }）;

YUI_OFFLINE_CONF構成では、いくつかの説明が必要な場合があります。最初、私はドキュメントルート+ベースを変更していyui3/build/ 。 マニフェストがするようにオフラインキャッシュは、厳密な単一の生成元ポリシーを持っているW3Cの仕様の状態。 キャッシュされたすべてのリソースが同じドメインから来なければならないので、私は私のサーバーへのYUI 3の完全なディストリビューションを掲載している。その結果、私のすることはできません私のファイルを提供するYahoo!やGoogleや他のCDNに依存している - それらのすべてが私のサーバーからキャッシュするために利用可能でなければなりません。

次の部分、 combine:0私は持っていないため、ではなく、自動的にコンボファイルにYUIローダに指示コンボハンドラは自分のサーバーにインストールされている。

最後に、私は言及したいgroups設定。グループは、同じ場所から来たファイルの全体のグループを定義することができますYUI 3.1.1の新機能です。また、それらのソースからcombo'dするように構成できます。私はGitHub上でyui3·ギャラリーリポジトリの私が持っているローカルコピーからロードするには、ここをYUI 3ギャラリーを設定します。

我々がオンラインであるとき、私はYahoo新品ブートストラップできますが、オフラインで我々は、ファイルのローカルコピーを持っている必要があります。これは簡単に行うことができます。次のいずれか、ディレクトリに大きなzipファイルに必要なファイルをダウンロードすることができます。

  CD docrootの。
 wgetのhttp://yuilibrary.com/downloads/yui3/yui_3.1.0.zip。
 yui_3.1.0.zipを解凍します。
 MVゆいyui3。
 wgetのhttp://download.github.com/yui-yui3-gallery-gallery-2010.05.19-19-08-0-g2a49f06.zip。
解凍ゆいyui3  - ギャラリー - ギャラリー -  2010年5月19日-19-08-0-g2a49f06.zip。
 MVゆいyui3  - ギャラリー -  2a49f06 yui3-ギャラリー;
 wgetのhttp://download.github.com/yui-2in3-yui-2in3.3-0-gdf09025.zip。
 MVゆい2立方インチ-ゆい2in3.3-0-gdf09025 2立方インチ。

またはあなたはgitがマシンにインストールされている場合は、直接githubからgitリポジトリのクローンを作成することができます。

  CD docrootの。
クローンgitの:/ / github.com/yui/yui3.git yui3のgit。
クローン:/ / github.com/yui/yui3-gallery.git yui3·ギャラリーのgit gitの。
クローン:/ / github.com/yui/2in3.git 2立方インチのgit gitの。

テストの目的のために。私は時々設定されますONLINE = false 、どのように私のサイトは負荷を確認してください。通常のブラウザでアプリを訪問すること、そしてその場合には、個別に含める必要があり、各ファイルを確認することができます。正しく私たちのキャッシュマニフェストに必要事項を記入するには、Firebugのようなものを使用して、に引っ張られている各ファイルのメモを取る必要があります。次に、キャッシュのマニフェストには、各ファイルを一つずつ一覧表示されます。それはこのようになります。

 キャッシュマニフェスト
 ＃コメント
 index.htmlを
 base.css
 base.js
ゆいmin.js
 yui3/build/loader/loader-min.js
 yui3/build/widget/assets/skins/sam/widget.css
 yui3/build/console/assets/skins/sam/console.css
 yui3/build/oop/oop-min.js
 yui3/build/event-custom/event-custom-min.js
 yui3/build/intl/intl-min.js
 yui3/build/console/lang/console.js
 yui3/build/attribute/attribute-min.js
 yui3/build/event/event-base-min.js
 yui3/build/pluginhost/pluginhost-min.js
 yui3/build/dom/dom-min.js
 yui3/build/node/node-min.js
 yui3/build/event/event-delegate-min.js
 yui3/build/event/event-focus-min.js
 yui3/build/base/base-min.js
 yui3/build/classnamemanager/classnamemanager-min.js
 yui3/build/widget/widget-min.js
 yui3/build/substitute/substitute-min.js
 yui3/build/console/console-min.js
 yui3/build/cssreset/reset-min.css
 2in3/dist/2.8.0/build/yui2-grids/yui2-grids-min.css
 yui3-gallery/build/gallery-storage-lite/gallery-storage-lite-min.js
 yui3/build/json/json-min.js
 startup.png
 icon.pngを

この時点で我々はすべての方法は、オフラインで行くことができます。あなたは、あなたのウェブページを訪問することができますiPhoneOSやAndroidデバイス（または任意のHTML5対応ブラウザ）を持っている場合は、デバイスのインターネットアクセスを無効にしてページをリロードした後の読み込みが完了し、しましょう。

iPhone固有のグッズ

iPhoneはWebアプリケーション開発者は他のすべてのアプリのようにホーム画面にアプリいくつかのスペースを与えるために能力を与える。あなたが "ネイティブ"アプリケーションで必要があるだろうとしても、光沢のあるアイコンと起動画面を持つことができます。まず、フォローする必要がある仕様をアイコンと起動画面のために。して、次の追加することができますmetaのタグ：

  <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta name="apple-mobile-web-app-status-bar-style" content="white" />
 <link rel="apple-touch-icon" href="icon.png"/>
 <link rel="apple-touch-startup-image" href="startup.png" />

最初の二つのタグはWebページがHTML5のWebアプリケーションであることを、あなたが白のように上部のステータスバーの色をWANというモバイルSafariを教えてください。これは、ブラウザのウィンドウの周りのすべてのナビゲーションクロムを削除します。次の二つのタグは、あなたのアイコンと起動画面に使用するファイルを指す。

次は何

HTML5仕様はまだ流動的です。新たな展開に目を光らせておいてください。これは素晴らしい新機能がモダンなブラウザであっても、今日言った。このチュートリアルからわかるように、それが劇的にそれは潜在的な有用性を高める、Webアプリケーションをオフラインにすることは困難ではありません。そして、あなたがオフラインになったとき、あなたはYUI 3ギャラリーとYUI 2ウィジェットの家族からに慣れているすべての電源と一緒に、あなたと一緒にYUI 3を取ることを躊躇しないでください。

共有および拡張： del.icio.usでブックマーク | Diggそれ！ | reddit！

ヤフーのオープン戦略（YOS）エンジニアリングチームの一員として、YUIと連携

中| Rohitデュベによって14:06に2010年5月20日Yahooのフロントエンド·エンジニアリング·ジョブズ | コメントオフ

ヤフーのオープン戦略（YOS）チームは、オープンプラットフォームの次世代を構築しています。私たちの今後の製品のいずれか - 接続 - は、サードパーティのパブリッシャーや開発者を対象としています。 Connectは、サードパーティが簡単に自分のサイトでJavaScriptの数行のコードをドロップすることで、ヤフーと統合することができます。さらに、Connectは、ユーザーが自分のヤフーIDを使用してサードパーティのWebサイトにログインし、友人やフォロワーへのアップデートをブロードキャストすることができます。

Connectは、など、いくつかのYahooのテクノロジを使用してYQLとYUIを。特に、ConnectはYUI3（ノード、IO、カスタムイベント）と一貫したAPIとクロスブラウザでの経験を提供するウィジェットインフラストラクチャからのコアライブラリを活用しています。一度完全に開発され、Connectはウェブサイトの数千に展開し、数百万人の消費者に表示されます。これは卓越した消費者のリーチと挑戦的なスケーラビリティの要件がありますプロジェクトに参加する素晴らしい機会です。

理想的な候補者には、Javascript、HTMLやCSSなど、クロスブラウザの互換性の問題、最適化手法、および国際化とブラウザ側のクライアント技術に精通してを含む、大規模Web開発の経験5年以上になります。 PHPの知識とJavaScriptライブラリ - YUIなどなど - が必要です。

興味がありますか？で完全に仕事の説明を参照してくださいhttp://careers.yahoo.com/jdescription.php?oid=29752と接触Rohitデュベ（ヤフー-inc.com AT rdube）。

共有および拡張： del.icio.usでブックマーク | Diggそれ！ | reddit！

YUIシアター-ライアン·ダール： "NodeJS入門"（58分）

アレンラビノビチによって13:26に2010年5月20日|での開発、 YUIシアター | 14コメント

2週間前、Yahoo!はホストBayJaxの専用のミートNodeJSを（ミートは、シンコ·デ·マヨと一致しているので、我々はそれはシンコ·デ·ノード'という名前で）。ライアンダール、NodeJSの作成者は、プロジェクトに関する講演を与え、非常にあった私たちはYUI劇場のための彼のプレゼンテーションを記録させるための一種。

PSビデオはYahoo!のシンコメイヨーのお祝いに30秒を垣間見るで開きます

下に埋め込んだビデオがお好みのRSSリーダでは正しく表示されない場合は、必ずYUIシアターの映像の高解像度版を見るためにクリックスルー。

その他の最近のYUIシアター動画：

エリヤInsua：jsdom：DOMのCommonJS実装 -エリヤInsuaはYahooの2010年5月BayJaxミートではJavaScript DOMのサーバー側の実装を紹介します。
ニコラスZakas、ストヤンステファノフ、ロスHarmes、ジュリアンルコント、マット·スウィーニー：高パフォーマンスのJavaScript - Yahooの2010年4月BayJax Meetupでオライリーの High Performance JavaScriptを論議高度なJavaScriptとDOMスクリプティングの最適化への5つの貢献者。
ダグラスクロックフォードの JavaScriptの現状と将来 -ヤフーJavaScriptの建築家ダグラス·クロックフォードは最近ECMA5開発プロセスと今後の言語を向上させるための努力を説明します。
DAVガラス：YUIへの貢献 - YUIエンジニアダヴガラスYUIプロジェクトへの貢献をしてのプロセスを通じてYUIギャラリーと手順を紹介します。

共有および拡張： del.icio.usでブックマーク | Diggそれ！ | reddit！

YUIシアター-エリヤInsua： "jsdom：DOMのCommonJS実装"（18分）

アレンラビノビチによって13:24に2010年5月20日|での開発、 YUIシアター | コメントオフ

エリヤInsuaからスターの開発Arc90は、彼の仕事紹介jsdomを Yahoo!のシンコ·デ·ノードBayJaxイベントで。エリヤは、Skype（これより少なくより理想的なビデオおよびオーディオ品質を許してください）経由でブルックリンから提示して、優雅に私たちはYUIシアターのために彼の話をキャプチャすることができました。

下に埋め込んだビデオがお好みのRSSリーダでは正しく表示されない場合は、必ずYUIシアターの映像の高解像度版を見るためにクリックスルー。

その他の最近のYUIシアター動画：

ライアン·ダール：NodeJS入門 -ライアン·ダール、NodeJSの作成者は、プロジェクト、およびパフォーマンスの改善と新しいアーキテクチャについて話を紹介します。講演では、Yahooの2010年5月BayJaxミートで開催されました。
ニコラスZakas、ストヤンステファノフ、ロスHarmes、ジュリアンルコント、マット·スウィーニー：高パフォーマンスのJavaScript - Yahooの2010年4月BayJax Meetupでオライリーの High Performance JavaScriptを論議高度なJavaScriptとDOMスクリプティングの最適化への5つの貢献者。
クリスチャン·ハイルマン：YQLとYUI：クイックアプリケーション用のビルディング·ブロックギャラリー- Yahoo!デベロッパーネットワークの国際的な伝道者キリスト教のハイルマンはYahooクエリ言語（YQL）とヤフーのユーザーインターフェイスライブラリ（YUI）を使用して、高速で強力な、説得力のあるアプリケーションを作成するための彼の哲学を説明します。
ルーク·スミス：イベントエボルヴ - YUIエンジニアルーク·スミスは、DOMイベント、イベントの委譲、合成イベント、カスタムイベントのサポートを含むYUI 3イベント·システムに深く紹介しています。

共有および拡張： del.icio.usでブックマーク | Diggそれ！ | reddit！

インプリメンテーション·フォーカス：Phanfareのメディアオーガナイザー

2010年5月19日13:51にエリックMiraglia別|で野生の、 YUIの実装 | 1件のコメント

からコーリーミンツ Phanfareが重くYUI 2.8.0に基づいて彼らの最近の製品の発売、を教えて、先週に書いている。

私達はちょうど昨日、私たちの新しいウェブオーガナイザーをリリースしました...それだけですべてのYUI 2成分については使用して、Webアプリケーションとして構築された完全な写真やビデオを主催しています。我々は、本当にデスクトップとWebソフトウェアの間の線をあいまいだと思います。
いくつかの注目すべき機能は次のとおりです。
を使用してアップローダを、我々は、彼らがアップロードと人々が自分の写真を整理し、編集することができます。
の助けを借りて、ドラッグ＆ドロップやメニュー、サムネイルのグリッドは、OSのファイルブラウザの挙動のすべてを持っています。あなたは、CtrlキーとShift、サムネールの間に矢印などを使用して複数選択、選択、ドラッグ＆ドラッグして並べ替えドロップすることができます
の動的なロード、TreeViewには、それらが階層構造になっているので、私達のアルバムの数百の遅延ロードのユーザーアカウントましょう（年- >アルバム- >の項を参照）。これは非常に大規模なアカウントのページには、小さなアカウントと同じように速くロードすることができます。

私は、サイトのクリーンなプロフェッショナリズムとUIのディテールに特別の注意を愛する。サイトを見学お気軽に - トライアルアカウントは無料で、あなたのサイトが提供するものの感触を与えるために、サンプルアルバムが移入来る。コーリーとそのような幻想的な打ち上げチームにおめでとうと言いたい。

共有および拡張： del.icio.usでブックマーク | Diggそれ！ | reddit！

CSS 101：ブロックの書式を設定するコンテキスト

中| 11:46 2010年5月19日には、ティエリKoblentzによって午前の開発 | 10コメント

著者について：ティエリKoblentzはYahoo!でフロントエンドエンジニアです
彼が所有しているTJKデザイン、 EZ-css.orgとCSS-101.orgを。 あなたがでTwitterでティエリーに従うことができます@ thierrykoblentz 。

ブロックの書式設定コンテキストには、少なくとも次のいずれかを満たしているボックスです。

"フロート"の値は "none"ではなく、ありません
"オーバーフロー"の使用される値は、 "見える"ではありません。
"表示"の値は、 "テーブルセル"、 "テーブルキャプション"、または "インラインブロック"です。
"位置"の値はどちらも "静的"も "相対的"である。

それが来るとき視覚フォーマットモデル（これはユーザエージェントが処理する方法であるドキュメントツリービジュアルのメディアを）、ブロックの書式設定コンテキストは大手です。ので、フロー、浮動小数点数、クリア、およびマージンとの関係をしっかりと理解を持つようにCSSの作成者にとって非常に重要です。

仕様では、何を言っています...

どのように書式設定のコンテキストのフローをブロックする

位置決めスキームブロックフォーマットコンテキストが属するである通常の流れ。したがって、ブロックの書式設定コンテキストの"ブロック"は、あなたと期待どおりのページフローに配置されるブロックボックス、インライン書式のインラインボックスは、相対的な位置決めブロックまたはインラインボックスの、とのポジショニングランインボックスをオフにします。簡単に言えば、彼らは、ページフローの一部である。

ブロックの書式コンテキストをトリガする

9.4.1項には、次の新しいブロックの書式コンテキストを確立するとしている。

浮動小数点数、
絶対座標で配置された要素、
インラインブロック、
テーブルのセル、
テーブルキャプション、
"オーバーフロー"（ "見える化"以外の値）とスタイル要素

しかし、によると、CSSレベル3の仕様は次の条件が満たされたときに、ブロックの書式設定コンテキスト（CSS3用語で"フロールート"）が作成されます。

"の値位置は、 "（参照も"静的"も"相対的"である[CSS3POS]を）。

この定義はないことを意味position:fixedあまりにも、新しいブロックの書式コンテキストを確立します。ただし、これはセクション9.4.1でミスではありません。固定位置は、絶対配置（9.6.1）と絶対配置の要素の仕様（又はそのボックス）内の参照のサブカテゴリである要素の"という意味の位置 "プロパティが持つ値が"絶対"または"固定"。

ことに注意してdisplay:tableそれ自体がブロックフォーマットコンテキストを確立しません。それが生成することができますので、匿名ボックスは、それらの1つ（のdisplay:table-cell ）新しいブロックの書式コンテキストを確立します。言い換えると、トリガが匿名ボックスでないdisplay:table 。両方のスタイルが、新しいブロックの書式コンテキストを（暗黙的または明示的に）を確立している場合でもこれは、著者が心に留めておくべきものですclearと同じように動作しませんdisplay:table 、それがでないようにdisplay:table-cell 。

最後のトリガーがあるfieldset要素。奇妙なことに、この動作に関するwww.w3.orgに関する情報はまでなかったHTML5の仕様。そこにブラウザのバグであった（ Webkitの、 Mozillaのこの話をする）が、何も"公式"。実際に、ほとんどのブラウザの新しいブロックの書式コンテキストを確立するフィールドセットは、3.2節（UA準拠）に従って、著者が付与され、これを取ることになっていない場合でも：

CSS 2.1のプロパティは、コントロールやフレームを形成するために適用される定義されていない、またはどのようにCSSはスタイル、それらをするために使用することができます。ユーザエージェントは、これらの要素にCSSプロパティを適用される場合があります。著者らは、実験的のようなサポートを扱うことをお勧めします。 CSSの将来のレベルはさらにこれを指定することができます。

書式のコンテキストは何をブロック

ブロックの書式設定コンテキストがあるため、彼らが流れ道の山車が含まれており、セクション9.4.1あたり、彼らは崩壊の余白を防止し、浮動小数点数を重複していない。

ブロックフォーマットのコンテキストでは、ボックスは包含ブロックの最上部から始めて、垂直に、他の後のいずれかに配置されている。 2兄弟ボックス間の垂直距離で決定され、 "余白"プロパティ。ブロックフォーマットのコンテキスト内で隣接するブロックボックス間の垂直方向のマージンは崩壊。
ブロックフォーマットのコンテキストでは、各ボックスの左側の外側のエッジは、包含ブロック（右から左への書式設定のため、右端タッチ）の左側端に触れる。ボックスには、新しいブロックの書式設定コンテキスト（ボックス自体がその場合には確立されない限り、これは、フロートの存在（ボックスの行ボックスがフロートによる収縮があります）であっても真である狭くなる場合がありますため、浮動小数点数へ）。

十分なスペックでは、これは現実の世界では何を意味するのか？

ブロックの書式設定コンテキストが離れてこれらの重要な例外を除き、任意のブロックボックスのように多かれ少なかれ動作します。

折りたたみマージンを防止するための書式コンテキストをブロック
垂直方向の隣接するブロックボックスの間のマージン崩壊、彼らは同じブロックの書式設定コンテキストにある場合だけです。隣接したボックスは、同じブロックの書式コンテキストに属していない言い換えれば、彼らのマージンは崩壊されません 。
例：
これでスタイル青い背景とのDIV内の段落であるmargin:20px 。
これでスタイル青い背景とのDIV内の段落であるmargin:20px 。
これは、青色の背景色のDIV内の段落ですが、それはでスタイリングされたmargin:20px 、親DIVがでスタイリングされたoverflow:hidden;zoom:1 。
（ギャップが20ピクセルではなく、40ピクセルに等しい）段落崩壊の底部と上部マージン、上記の最初の2つの青色のボックスの間に、しかし最後のDIVは、新しいブロックの書式コンテキストを作成するため、第三段落のマージンは崩壊しません。、それゆえ彼らは、段落のコンテナの "飛び出し"ではなく、そのブロックボックスの一部ではありません。
注：IE6で、 明示的なマージンがなく、DIVの余白を囲むために失敗しました。
それは崩壊のマージンになると、新しいブロックの書式コンテキストを作成する適用した場合と同じ役割を果たしborderまたはpadding要素にします。
ブロックの書式設定コンテキストはフロートを含む
私は、あなたが" フロートは常に浮動小数点数を含む "、または多分FNE（聞いた文を聞いたことがあると確信してフロートほぼすべて）メソッドを呼び出します。しかし、これの基礎は、浮動小数点数は、ブロックの書式設定のコンテキストであるということですこれを定式化するので、より良い方法は、 " ブロックの書式設定コンテキストは常に浮動小数点数を含んでいます "と言うことです。
例：
この段落は青色の背景色のDIV内の浮動小数点数です、それはでスタイリングされてmargin:20px
この段落は青色の背景色のDIV内の浮動小数点数です、それはでスタイリングされてmargin:20px 。親DIVがでスタイリングされたoverflow:hidden;zoom:1 。
The first paragraph is a float so it is removed from the flow and its container collapses , hence the background of this container does not show.
The second paragraph is also a float, but it is contained inside a DIV that creates a new block formatting context, hence that container encloses the child's “margin box”. You should also note that, unlike with the first paragraph, there is no need to clear the previous box. This is often referred to as “self-clearing”, which makes lot of sense considering that block formatting contexts are a normal part of the flow.
Note : clear only clears floats within the same block formatting context .
Block formatting contexts do not overlap floats
This one is my favorite . According to the spec, the border-box of a block formatting context must not overlap the margin-box of floats in the same block formatting context as the element itself. What this means is that browsers create implicit margins on block formatting contexts to prevent them from overlapping the margin-box of floats. For this very reason, negative margins should have no effect when applied to a block formatting context next to floats (WebKit and IE6 have a problem with this though – see test case ).
例：
```
 .sideBar { background: skyBlue; float: left; width: 180px; } 
```
```
 .sideBar { background: yellow; float: right; width: 180px; } 
```
```
 #main { background: pink; overflow: hidden; zoom: 1; border: 5px solid teal; } 
```
Because this behavior is attached to the “border box” (not the “margin box”), to create space (eg, a 20px gap) between the pink box and its siblings, authors would need to either:
- Set a 20px margin on the floats
- Set margin values on the pink box greater than the width of the floats (ie, margin:0 220px )
Yes, you'd use 220px , not 20px . Because it is the border-box that tries to fit between the floats, not the margin-box. And if I say it tries it is because that container would drop if there was not enough room for it between the two floats.
In other words, if the pink box was given a 400 pixels width, that box should drop when the parent container is narrower than 770 pixels (180px + 180px + 400px + 10px). As a side note, in a few instances, this behavior appears to be broken in Firefox (at least in v.3.5.9) (ie, when the above construct is the first child of body – see test case ).
Note : the space that shows in IE6 between the pink box and the two floats is due to the three pixel jog bug .

hasLayout versus block formatting context

As you may have noticed, all previous examples are styled using overflow:hidden;zoom:1 . The former declaration establishes a new block formatting context in modern browsers while the latter triggers hasLayout in Internet Explorer (IE 5.5/6/7). This is because these renderings are very close ( similarities with the CSS specs ). Like block formatting contexts, elements that are given a layout appear to prevent collapsing margins, to contain floats, and to not overlap floats.

Properties/declarations that give elements a layout

The lists below show that the properties that establish a new block formatting context also trigger hasLayout, at least the ones supported by the browser, with the exception of overflow in IE < 7.

In Internet Explorer 5 and 6: position:absolute; position:fixed; float (any value other than ” none “); display:inline-block; width (any value other than ” auto “); height (any value other than ” auto “); zoom (any value other than ” normal “); writing-mode:tb-rl; -ms-writing-mode:tb-rl
In Internet Explorer 7: min-width (any value); min-height (any value); max-width (any value other than none ); max-height (any value other than none ); elements styled with overflow (any value other than visible ); overflow-x and overflow-y (any value other than visible )

Things to consider

zoom and writing-mode are proprietary properties and do not validate.
IE 5.0 does not support zoom
width and height trigger hasLayout on inline elements only when these properties apply to these elements (ie, IE6 in quirks mode).
overflow-x and overflow-y are part of the CSS3 box model module
hasLayout is also triggered when the layout-flow is different from the parent layout flow (ie, rtl to ltr )

In Quirks Mode and IE7 Mode (All Versions)

When overflow is set to something other than visible, table-cell elements do not establish new block formatting contexts.
When overflow is set to visible, table-cell elements establish a new block formatting context.

HTML elements that always have a layout:

In Internet Explorer, these elements have - by default – a layout.

<body> (as well as <html> in Strict mode)
<table> , <tr> , <th> , <td>
<img>
<hr>
<input> , <button> , <select> , <textarea> , <fieldset> , <legend>
<iframe> , <embed> , <object> , <applet>
<marquee>

Wrap up

To reduce the risk of issues between modern browsers and Internet Explorer ( < 8), authors may choose to give a layout to boxes that establish new block formatting contexts. This way the flow is identical, elements escape floats the same way, clear clears the same floats, and margins collapse where expected. Also, authors must pay attention when styling boxes using hasLayout triggers (ie, width ) as such styling may require making that element a new block formatting context as well.

YUI: Open Hours, Fri May 21st

May 19, 2010 at 10:30 am by Luke Smith | In Development | 2 Comments

It's a new week, and time for another YUI: Open Hours !

This week, we'll be joined by the inimitable Dav Glass , author of (among other things) YUI's Rich Text Editor and Drag and Drop utility , and the primary architect behind yuilibrary.com and the Gallery itself. He'll be discussing the YUI 3 Gallery project — where it's going, how to contribute — and answer any questions about it, about the site, or really about anything else while we have him on the line.

After that, we'll jump into our main event, which will be a “Gallery widget sampler”. We have a number of module authors joining us this week, including

Iliyan Peychev ( Accordion )
Andrew Bialecki ( Lightbox )
Matt Snider ( Radial Menu )
Jacob Fogg ( Sliding Sidebar )
and hopefully more

They'll introduce their module, give an example or two, go over their API, and discuss their experience creating it. Besides just being a nice introduction to additional components available to YUI 3 users, it should provide a good platform to talk about widget API best practices and help give a sense of some of the decisions that are made during widget creation.

Thanks again to Caridy Patiño for joining us last week and reviewing his Accordion Node plugin and Dispatcher modules. We'll have more topics in the future about creating Node plugins and the reasons why the plugin approach or the widget approach might be a better fit for your needs. And thanks to Matt Sweeney (author of YUI's Node class and selector engine) for dropping in as a surprise guest as well.

The time will be the same as before, 10am – 12pm PDT and the connection details are also the same:

1-888-371-8922（米国以外の参加者は、ローカル番号を私にメール）にダイヤルイン
Enter the attendee code 4718 8953#
画面共有セッションに参加する（これはそれを初めて使用する場合は、このは、Adobe Connectのプラグインをインストールするプロンプトが表示されます）

And as always, you can keep up to date with the upcoming schedule and topics by following @yuilibrary on Twitter or subscribing to the YUI Event Calendar .

そこにお会いしたい！

共有および拡張： del.icio.usでブックマーク | Diggそれ！ | reddit！

を搭載ワードプレスでヤフーウェブホスティング。

マークアップ

プログレッシブ·エンハンスメントについての注意

モバイルデバイスを扱うための追加プロパティ

CSS

Javascriptを

キャッシュマニフェスト

オフライン/オンライン

iPhone固有のグッズ

次は何

その他の最近のYUIシアター動画：

その他の最近のYUIシアター動画：

仕様では、何を言っています...

どのように書式設定のコンテキストのフローをブロックする

ブロックの書式コンテキストをトリガする

書式のコンテキストは何をブロック

十分なスペックでは、これは現実の世界では何を意味するのか？

折りたたみマージンを防止するための書式コンテキストをブロック

ブロックの書式設定コンテキストはフロートを含む

Block formatting contexts do not overlap floats

hasLayout versus block formatting context

Properties/declarations that give elements a layout

Things to consider

HTML elements that always have a layout:

Wrap up

Further readings

Implications

Demos and testcases

hasLayout articles

TwitterのYUIライブラリ

翻訳する

シンジケート

最近の投稿

YUIライブラリ

アーカイブ：

ブログロール

ポリシーのコメント

ヤフーになる

メタ：