牌語備忘録 -pygo

あくまでもメモです。なるべくオフィシャルの情報を参照してください。

牌語備忘録 -pygo

レイルに乗ってみた〜Rails of Ruby on Rails その17「携帯電話対応で躓いた(つдT)」

Rails

レイルに乗ってみた〜 目次
書籍『Rails of Ruby on Rails ~Case of LOCUSANDWONDERS.COM~』で勉強してみた（P202〜）

jpmobileプラグインをインストール

/work/locus username$ script/plugin install git://github.com/darashi/jpmobile.git
removing: /Users/username/work/locus/vendor/plugins/jpmobile/.git
Initialized empty Git repository in /Users/username/work/locus/vendor/plugins/jpmobile/.git/
remote: Counting objects: 760, done.
remote: Compressing objects: 100% (651/651), done.
remote: Total 760 (delta 59), reused 655 (delta 40)
Receiving objects: 100% (760/760), 452.66 KiB | 258 KiB/s, done.
Resolving deltas: 100% (59/59), done.

jpmobileプラグインを使って携帯電話に対応

追加修正
/work/locus/app/controllers/application.rb

  mobile_filter
テンプレートを作ってみる。

新規ファイルを作成して、とりあえずCSSまわりを外したhtmlを書いてみる。
/work/locus/app/views/layouts/products_mobile.html.erb

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head>
    <title>Products</title>
  </head>
  <body>
    <ul>
      <li><%= link_to 'Products', 
              root_path  %></li>
      <li><%= link_to 'Blog', 
              entries_path  %></li>
      <li><%= link_to 'Contact', 
              :controller => 'contact' %></li>
      <li><%= link_to 'カートの中を表示', 
              {:controller => 'cart',
        :action     => 'index',
        :TB_iframe  => true,
        :width      => 760,
        :height     => 540},
        {:class      => 'thickbox',
        :title      => 'Cart'} %></li>
    </ul>
    <%= content_tag(:div, flash[:notice],
        :id => 'notice') if flash[:notice] %>
    
    <%= yield %>
  </body>
</html>
ユーザエージェント偽装してWebブラウザで確認してみる

FireFoxにアドオン「User Agent Switcher」をいれて、オプションから「DoCoMo/2.0 F903iX(c100;TB;W28H15)」追加。

Webブラウザで確認


ブログのほうもやってみる

/work/locus/app/views/layouts/entries_mobile.html.erb

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  xml:lang="ja" lang="ja">
  <head>
    <title>Blog</title>
  <body>
      <ul>
        <li><%= link_to 'Products', 
                                  root_path  %></li>
        <li><%= link_to 'Blog', 
                              entries_path  %></li>
        <li><%= link_to 'Contact', 
                              :controller => 'contact' %></li>
        <li><%= link_to 'カートの中を表示', 
          {:controller => 'cart',
           :action     => 'index',
           :TB_iframe  => true,
           :width      => 760,
           :height     => 540},
          {:class      => 'thickbox',
           :title      => 'Cart'} %></li>
      </ul>
      <h1><%= image_tag 'blog_header.jpg' %></h1>
      
      <%= content_tag(:div, flash[:notice],
          :id => 'notice') if flash[:notice] %>
      
        <%= yield %>

  </body>
</html>
Webブラウザで確認

タイトル画像でかっ(||ﾟДﾟ)

メモ

  • モバイル用の画像は別に作らないといけないのかな？(´･ω･`)
  • 携帯用HTMLの作り方も勉強しないと...