レスポンシブWebデザインの条件付きダウンロード

ポール・ハモンドは、 遅延コンテンツでサイトをスピードアップするという素晴らしい記事を書きました。 彼の資料では、最初のページの読み込み後に、コメント内のユーザープロフィールアバターの画像など、コンテンツの一部を読み込む手法の概要を説明しました。これにより、ページを読み込む際のパフォーマンスが向上します。



レスポンシブWebデザインなど、遅延コンテンツのロードを適用できる状況は他にもあります。





レスポンシブWebデザインは、最初はパーソナルWebサイトに適用され、小さな画面解像度に適応できるようになりました。 しかし、今ではレスポンシブWebデザインは、「 モバイルファースト 」と呼ばれる新しいアプローチにより多く使用されています。



アダプティブWebデザインを使用したWebサイト開発の初期のアプローチでは、最初に、大画面のパーソナルコンピューターおよびデバイス用の大規模な多機能Webサイトの開発を行い、その後モバイルデバイスへの適応を行いました。 同時に、サイトの機能の一部（追加メニュー、補助パネル、高度なツールなど）は、メディアクエリを使用してユーザーから非表示になりました。 同時にユーザーは、モバイルデバイスでの表示を意図したものだけを見ました。 このアプローチの欠点は、コンテンツの一部（およびほとんどの場合）がユーザーのブラウザーにロードされるため、ページのロード時間が長くなり、トラフィックが消費されることです。



モバイルファーストアプローチの主な利点の1つは、このアプローチにより、ページのメインコンテンツに集中できることです。 おそらく、このアプローチは、より正確に「 コンテンツ優先 」と呼ばれるでしょう。 このアプローチでは、ページの本質のみを表示し、重要ではない大規模なフルサイズサイトの追加の便利さをすべて無視するか、追加のオプション機能を導入します。



しかし、十分な表示解像度のために、追加のサイト機能を表示できるデバイスにページが読み込まれたらどうしますか？ このような追加のオプション機能は、Ajaxテクノロジーと彼の記事で説明したPaul Hammondのトリックを使用してダウンロードできます。 唯一の違いは、最初にクイックテストを実行して、ページがロードされるデバイスの表示領域が追加のコンテンツを収容するのに十分な広さであるかどうかを判断する必要があることです。



この状況を想像してください。 猫に関する記事を公​​開し、サイドバー要素のトピックに猫に関する関連ニュースを含めたいのですが、このサイドバー自体に十分なスペースがある場合のみです。



ニュースリソースとして、Google News APIを使用します。 このリソースは、サードパーティのサービスがページの読み込みを遅くすることを望まないため、条件付き読み込みの使用に最適です。 そのため、ページが読み込まれた後、Google News APIにリクエストを送信します。



Ajaxを使用してニュースを受信する関数の例を次に示します。

var searchNews = function(searchterm) { var elem = document.createElement('script'); elem.src = 'http://ajax.googleapis.com/ajax/services/search/news?v=1.0&q='+searchterm+'&callback=displayNews'; document.getElementsByTagName('head')[0].appendChild(elem); };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

また、コールバック関数displayNewsを作成しました。これは、AjaxリクエストからJSONを受信し、newsresults識別子でコンテンツをブロックに追加します。

 var displayNews = function(news) { var html = '', items = news.responseData.results, total = items.length; if (total>0) { for (var i=0; i<total; i++) { var item = items[i]; html+= '<article>'; html+= '<a href="'+item.unescapedUrl+'">'; html+= '<h3>'+item.titleNoFormatting+'</h3>'; html+= '</a>'; html+= '<p>'; html+= item.content; html+= '</p>'; html+= '</article>'; } document.getElementById('newsresults').innerHTML = html; } };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、ページの下部にニュースを追加する機能を呼び出すことができます。

 <script> searchNews('cats'); </script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ブラウザの表示領域の特定の解像度でのみニュースを受信したい場合、ifブロックで関数をラップできます。

 <script> if (document.documentElement.clientWidth > 640) { searchNews('cats'); } </script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ブラウザーの表示領域が640ピクセルよりも広い場合、newsresultsインジケーターを使用してニュースを受信して​​コンテナーに追加する機能が開始されます。

 <div id="newsresults"> <!-- search results go here --> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして今、モバイルデバイスのユーザーに子猫に関するニュースを見る機会を残すために、コンテナを変更し、ニュースを独立して受け取る機会を残します：

 <div id="newsresults"> <a href="http://www.google.com/search?q=cats&tbm=nws">Search Google News</a> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

例



そのため、小さな画面を持つ訪問者にはニュースを受信するためのリンクが表示され、大きな画面を持つユーザーにはニュースのリストが直接表示されます。



それ以前は、HTMLやJavaScriptなどの技術のみに特化したWebページの開発に焦点を当てていましたが、上記のアプローチにより、コンテンツ配信戦略と情報構造に集中することができます。 条件付きダウンロードの導入により、コンテンツは「表示」および「非表示」だけでなく、特定の条件下で「ダウンロード」することもできます。



これは単なる例にすぎませんが、条件付きロードがレスポンシブWebデザインの重要な部分になり得ることを説明したいと思います。



この記事は、Jeremy Keithによる記事「 レスポンシブデザインの条件付き読み込み」の無料翻訳です。