😰 😁 👩🏼‍⚖️ RORサイトのiPhoneバージョン 🏽 👩‍🌾 👨🏽‍🔧

あなたがどのようにiPhoneと関係していようとも、この携帯電話がモバイルデバイス市場の良い部分を獲得したことを否定することはできません。そして、私の意見では、電話からインターネットを正常に使用できるようにしたのは彼でした。しかし、組み込みのサファリは完了していますが（ Webkitに感謝します）、多くの人がiPhone用の特別なバージョンのサイトを作成したいと考えています。

サイトの適合バージョンを作成するための最も人気のあるライブラリの1つはiUIです。

料理

最初に、初期化子/ mime_types.rbに書き込む特別なMIMEタイプを作成する必要があります。

Mime::Type.register_alias "text/html", :iphone

これで、サイトのerbテンプレートは* .iphone.erb（たとえば、index.iphone.erb）として呼び出されます。

また、ApplicationController'eでbefore-filterを記述する必要があります。これにより、サイトのバージョンが切り替わります。

before_filter :adjust_format 
      

        
        
        
      

     
      

        
        
        
      

     def adjust_format 
      

        
        
        
      

     request.format = :iphone if iphone_request? 
      

        
        
        
      

     end 
      

        
        
        
      

     
      

        
        
        
      

     def iphone_request? 
      

        
        
        
      

     request.subdomains.first == "iphone" 
      

        
        
        
      

     end

ここには微妙な点が1つあります。サイトのiPhoneバージョンをいつ表示するかを決める必要があります。私は自分自身でドメインスイッチングを選択しましたが、HTTP_USER_AGENTヘッダーによってiPhoneを決定するのを邪魔する人はいません。

IUIの基本

準備が完了したので、iPhoneバージョンのサイトの作成に進みます。 iUI Webサイトで、ライブラリの最新バージョンをダウンロードします。残念ながら、iUIのドキュメントはかなり少なく、実際にはいくつかのサイトの例に限定されています-オープンソースには欠点があります:-)。

iUIのインストールは、スクリプト、スタイル（iui *またはiuix *ファイル-最小化バージョン）、および写真をサイトの対応するディレクトリにコピーすることで構成されます。

新しいerbテンプレート（applitation.iphone.erb）を作成します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
      

        
        
        
      

     <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
      

        
        
        
      

     <head> 
      

        
        
        
      

     <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
      

        
        
        
      

     <meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/> 
      

        
        
        
      

     <title>@page_title</title> 
      

        
        
        
      

     <%= stylesheet_link_tag 'iui' %> 
      

        
        
        
      

     <%= javascript_include_tag 'iui' %> 
      

        
        
        
      

     </head> 
      

        
        
        
      

     <body> 
      

        
        
        
      

     <div class="toolbar"> 
      

        
        
        
      

     <h1 id="pageTitle"></h1> 
      

        
        
        
      

     <a id="backButton" class="button" href="#"></a> 
      

        
        
        
      

     </div> 
      

        
        
        
      

     <%= yield %> 
      

        
        
        
      

     </body> 
      

        
        
        
      

     </html>

iUIのナビゲーションには通常とは異なるアプローチがあります-ページはいくつかの「画面」に分割でき（物理的には画面がルートdivまたはul）、アクティブな画面には選択したパラメーターが含まれていると見なされ、表示されるだけです。次のようになります。

<ul title="" selected="true"> 
      

        
        
        
      

     <li><%= link_to " ", shoplist_path(current_user.shoplist), :target => "_self" %></li> 
      

        
        
        
      

     <li><%= link_to " ", "#recipes" %></li> 
      

        
        
        
      

     </ul> 
      

        
        
        
      

     <ul id="recipes" name="recipes"> 
      

        
        
        
      

     <li><%= link_to "", recipes_path(:order => "date"), :target => "_self" %></li> 
      

        
        
        
      

     <li><%= link_to "", recipes_path(:order => "quality"), :target => "_self" %></li> 
      

        
        
        
      

     <li><%= link_to "", recipes_path(:order => "popular"), :target => "_self" %></li> 
      

        
        
        
      

     </ul>

ダウンロードすると、最初のリストが表示されます。リンク「すべてのレシピ」をクリックすると、画面が2番目のリストに変わります（会社のiPhoneスクロール）。外部リンクが正しく機能するためには、ターゲット属性を「_self」に設定する必要があります。

フォームの実装

承認ページ（app / views / sessions / new.iphone.erb）：

<% form_tag sessions_path, :id => "auth", :name => "auth", :class => "panel", :selected => "true", :title => "", :target => "_self" do -%> 
      

        
        
        
      

     <script> 
      

        
        
        
      

     function toggleSession() { 
      

        
        
        
      

     document.auth.foreign_computer.value = (document.auth.foreign_computer.value == "1") ? "0" : "1"; 
      

        
        
        
      

     } 
      

        
        
        
      

     </script> 
      

        
        
        
      

     <fieldset> 
      

        
        
        
      

     <div class="row"> 
      

        
        
        
      

     <label> :</label> 
      

        
        
        
      

     <%= text_field_tag 'login' %> 
      

        
        
        
      

     </div> 
      

        
        
        
      

     <div class="row"> 
      

        
        
        
      

     <label>:</label> 
      

        
        
        
      

     <%= password_field_tag 'password' %> 
      

        
        
        
      

     </div> 
      

        
        
        
      

     <div class="row"> 
      

        
        
        
      

     <label> iPhone?</label> 
      

        
        
        
      

     <div class="toggle" onclick="toggleSession()" toggled="true"> 
      

        
        
        
      

     <span class="thumb"></span> 
      

        
        
        
      

     <span class="toggleOff"></span> 
      

        
        
        
      

     <span class="toggleOn"></span> 
      

        
        
        
      

     </div> 
      

        
        
        
      

     <input type="hidden" name="foreign_computer" id="foreign_computer" value="0" /> 
      

        
        
        
      

     </div> 
      

        
        
        
      

     </fieldset> 
      

        
        
        
      

     <%= submit_tag '' %> 
      

        
        
        
      

     <% end -%>

通常のチェックボックスは、セッションが独自のスイッチで行われたことを記憶するかどうかを操作しません（div.toggleおよびjavascript：toggleSession（））のフィクションを参照してください:-)。ところで、「パネル」クラスは、携帯電話の設定のようにページの背景を作成することに注意してください。

リンクのカスタマイズ-Ajax画面の更新

ブラウザを閉じていないすべての人に、リンクについて詳しく説明します。 iUIのリンクは非常に巧妙に作成されており、完全なセットにはtarget = "_ replace"が含まれており、ロード可能なリストを作成できます（作業例）。しかし、よくあることですが、標準のツールが十分ではありません。新しいページをロードせずにリストから特定のオブジェクトに移行したいので、リストに戻って元の状態に戻りました。これらの目的のために、新しいターゲットを追加してiui.jsのクリックリスナーを変更しました。

addEventListener("click", function(event) { 
      

        
        
        
      

     ... 
      

        
        
        
      

     else if (link.target == "_custom_replace") 
      

        
        
        
      

     { 
      

        
        
        
      

     link.setAttribute("selected", "progress"); //   
      

        
        
        
      

     //   ajax 
      

        
        
        
      

     var req = new XMLHttpRequest(); 
      

        
        
        
      

     req.onreadystatechange = function() { 
      

        
        
        
      

     if (req.readyState == 4) { 
      

        
        
        
      

     //      
      

        
        
        
      

     var frag = $(link.getAttribute("target_elem")); 
      

        
        
        
      

     frag.innerHTML = req.responseText; 
      

        
        
        
      

     //   
      

        
        
        
      

     setTimeout(unselect, 1000, true); 
      

        
        
        
      

     //      
      

        
        
        
      

     iui.showPageById(link.getAttribute("target_elem")); 
      

        
        
        
      

     } 
      

        
        
        
      

     }; 
      

        
        
        
      

     req.open(link.getAttribute("target_method") || "GET", link.href, true); 
      

        
        
        
      

     req.send(null); 
      

        
        
        
      

     } 
      

        
        
        
      

     ... 
      

        
        
        
      

     }

オブジェクトのリストを次のように作成しました。

<% if @first_page? %> 
      

        
        
        
      

     <ul title="" selected="true"> 
      

        
        
        
      

     <% end %> 
      

        
        
        
      

     
      

        
        
        
      

     <% @recipes.each do |recipe| %> 
      

        
        
        
      

     <li> 
      

        
        
        
      

     <%= link_to recipe.name, recipe_path(recipe), :target => "_custom_replace", :target_elem => "recipe" %> 
      

        
        
        
      

     </li> 
      

        
        
        
      

     <% end %> 
      

        
        
        
      

     <% if @page < @recipes.total_pages %> 
      

        
        
        
      

     <li><%= link_to " ...", params.merge(:page => @page+1), :target => "_replace" %></li> 
      

        
        
        
      

     <% end %> 
      

        
        
        
      

     
      

        
        
        
      

     <% if @first_page? %> 
      

        
        
        
      

     </ul> 
      

        
        
        
      

     <% end %> 
      

        
        
        
      

     
      

        
        
        
      

     <% if @first_page? %> 
      

        
        
        
      

     <div id="recipe" name="recipe" class="panel"/> 
      

        
        
        
      

     <% end %>

このダウンロード可能なリストは「diggスタイル」であり、オブジェクトのページからリストに戻ると正常に機能します 。つまり、戻ると、ユーザーにはリストが残った状態で表示されます。

おわりに

iUIは、サイトのiPhoneバージョンを開発するための便利なツールであり、レイアウトに気を取られないようにすると同時に、開発者のニーズに合わせて簡単にカスタマイズできます。実際、これはjs + css +一連の画像なので、開発されたシステムの言語とフレームワークに関係なく使用できます。

私の仕事の結果はiphone.livecookbook.ru （許可フォーム、オブジェクトのリスト、「買い物リスト」）で見ることができます。許可なしに、記載されているレシピのリストを利用できます。変更されたiui.jsも同様に簡単にアクセスできます。

RORサイトのiPhoneバージョン

料理

IUIの基本

フォームの実装

リンクのカスタマイズ-Ajax画面の更新

おわりに

More articles: