(cache) 2008-09-24 - 牌語備忘録

書籍『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の作り方も勉強しないと...

Permalink | コメント(0) | トラックバック(0)

ジャンゴと奏でる～数時間でおぼえるDjango～「05ユーザ認証」

Django

ジャンゴと奏でる～数時間でおぼえるDjango～「もくじ」

ユーザ認証

管理画面からでは無く、ログインした人のみ記事の追加・編集・削除などできるように変更します。

ログイン・ログアウト処理

ログイン・ログアウトのアドレスとテンプレート場所を指定します。

/jam/entries/urls.py の最後にコードを追加します。

from django.conf.urls.defaults import *
from entries.models import Entry

info_dict = {
    'queryset':Entry.objects.all(),
    }

urlpatterns = patterns('',
                       (r'^$',
                        'django.views.generic.list_detail.object_list',
                        info_dict),
                       (r'^detail/(?P<object_id>\d+)/$',
                        'django.views.generic.list_detail.object_detail',
                        info_dict),
                       (r'^create/$',
                        'django.views.generic.create_update.create_object',
                        {'model':Entry, 'post_save_redirect':'/entries/'}),
                       (r'^update/(?P<object_id>\d+)/$',
                        'django.views.generic.create_update.update_object',
                        {'model':Entry}),
                       (r'^delete/(?P<object_id>\d+)/$',
                        'django.views.generic.create_update.delete_object',
                        {'model':Entry,'post_delete_redirect':'/entries/'}),
                       )

urlpatterns += patterns('',
                       (r'^login/$', 'django.contrib.auth.views.login',
                        {'template_name':'entries/registration/login.html'}),
                       (r'^logout/$',
                        'django.contrib.auth.views.logout',
                        {'template_name':'entries/registration/logout.html'}),
                       )

settings.py

ログインページと、リダイレクト先を設定します。

settings.pyの最後尾あたりに下記を追加して下さい。

LOGIN_REDIRECT_URL = "/entries/"
LOGIN_URL = "/entries/login/"

settings.pyを変更したときは

必ず

python manage.py syncdb

のコマンドを実行するようにしてください。

ログイン・ログアウト用テンプレート

jam/entries/templates/entries/registration/ ディレクトリを作成。

そこに次の２つファイルを新しく作成してください。

login.htm

/jam/entries/templates/entries/registration/login.html

{% extends "base.html" %}

{% block main %}

<div class="validation">
  <p><error>
      {% if form.errors %}
      正しいユーザ名とパスワードを入力してください (大文字小文字は区別します) 。
      {% endif %}
  </error></p>
  <br />

  <form method="post" action=".">
    <label for="username">ユーザ名：</label>
    {{ form.username }}
    <br />
    <label for="password">パスワード：</label>
    {{ form.password }}
    <br />
    <input type="submit" value="ログイン" />
  </form>

</div>
  <br />
  <br />

  <dd div class="operation">
    <a href="/entries/">一覧に戻る</a>
  </dd>

{% endblock %}

logout.html

/jam/entries/templates/entries/registration/logout.html

{% extends "base.html" %}

{% block main %}

<p>ログアウトしました</p>
<br />

<div class="operation">
  <p><a href="../login/">もう一度ログイン</a></p>
</div>

<br />
<br />
<dd div class="operation">
  <a href="/entries/">一覧に戻る</a>
</dd>

{% endblock %}

Webブラウザで確認

http://127.0.0.1:8000/entries/login/

バリデーション

何も入力しないか、間違ったユーザ名・パスワードでバリデーションチェックします。

管理画面に入る時と同じ様にログインしてみてください。

ログアウト

次のアドレスに行くとログアウトします。（後ほどリンクを追加します。）

http://127.0.0.1:8000/entries/logout/

ログイン時のみ「記事の追加」を表示する

/jam/entries/templates/entries/ディレクトリにあるテンプレートを修正していきます。

一覧画面

/jam/entries/templates/entries/base_entries.html

{% extends "base.html" %}

{% block main %}

{% if user.is_anonymous %}
<dd div class="operation">
  <a href="/entries/login/">ログインする</a>
</dd>
<hr />
{% else %}
<p>username: <b>{{ user.username }}</b> 
  <a href="/entries/logout/"> [ログアウト]</a>
</p>
<dd div class="operation">
  <a href="/entries/create/">記事の追加</a>
</dd>
<hr />
{% endif %}

{% block entry_content %}
{% endblock entry_content %}

{% endblock main %}

Webブラウザで確認

ログアウトしてからhttp://127.0.0.1:8000/entries/にアクセスしてください。

「記事の追加」が無くなり、「ログインする」に変更されました。

「編集」「削除」も

/jam/entries/templates/entries/entry_list.html

{% extends "entries/base_entries.html" %}

{% block entry_content %}

{% for entry in object_list %}
<dt>
  <a href="/entries/detail/{{ entry.id }}">{{ entry.title }}</a>
</dt>

<dd>
  {{ entry.content }}
</dd>
<br />

{% if not user.is_anonymous %}
<dd class="operation">
  <a href="/entries/update/{{ entry.id }}">編集</a>
  <a href="/entries/delete/{{ entry.id }}">削除</a>
</dd>
{% endif %}

<hr />
{% endfor %}

{% endblock %}

Webブラウザで確認

http://127.0.0.1:8000/entries/

詳細画面

/jam/entries/templates/entries/entry_detail.html

{% extends "entries/base_entries.html" %}

{% block entry_content %}
<dt>
  {{ object.title }}
</dt>

<dd>
  {{ object.content}}
</dd>
<br />

{% if not user.is_anonymous %}
<dd div class="operation">
  <a href="/entries/update/{{ object.id }}">編集</a>
  <a href="/entries/delete/{{ object.id }}">削除</a>
</dd>
<br />
{% endif %}

<dd div class="operation">
  <a href="/entries/">一覧に戻る</a>
</dd>

{% endblock %}

Webブラウザで確認

http://127.0.0.1:8000/entries/

一覧でタイトルをクリックで詳細。

新規作成・削除画面も修正

直接アクセスしても表示されないように修正。

新規作成画面

/jam/entries/templates/entries/entry_form.html

{% extends "entries/base_entries.html" %}

{% block entry_content %}
{% if not user.is_anonymous %}

{% if object %}
<h3>編集</h3><br/>
{% else %}
<h3>新規作成</h3><br/>
{% endif %}

{% if form.has_errors %}
{% for field in form.fields %}

{% if field.error %}
{{ field.error }}
{% endif %}

{% endfor %}
{% endif %}

<div class="validation">
  <form action="." method="post" accept-charset="utf-8">
    <label for="id_title">タイトル</label>
    {{ form.title }}

    {% if form.title.errors %} 
    <p><error> {{ form.title.errors|join:", "}}</error></p>
    {% endif %}

    <br/>
    <br/>
    <label for="id_content">内容</label>
    {{ form.content }}

    {% if form.content.errors %}
    <p><error> {{ form.content.errors|join:", "}} </error> </p>
    <br/>
    <br/>
    {% endif %}

    <p><input type="submit" value="保存" /></p>
    <br/>
  </form>
</div>
{% endif %}


<div class="operation">
  <a href="/entries/">一覧に戻る</a>
</div>

{% endblock %}

Webブラウザで確認

http://127.0.0.1:8000/entries/create/

削除画面

/jam/entries/templates/entries/entry_confirm_delete.html

{% extends "entries/base_entries.html" %}

{% block entry_content %}

{% if not user.is_anonymous %}
<form method="post" action=".">
<p>削除します。よろしいですか？</p>
<br />
<input type="submit" />
<input type="button" value="いいえ" onClick="location.href='/entries/'" />
</form>
<br />
{% endif %}

<div class="operation">
  <a href="/entries/">一覧に戻る</a>
</div>

{% endblock %}

新規ユーザを作成してログインしてみる

管理サイトにログインして、新規ユーザを作成してください。

http://127.0.0.1:8000/admin/

『Auth』の中の「ユーザ」右にある「追加」をクリック。

ユーザ名、パスワードを入れて保存。

作成したユーザでログイン

http://127.0.0.1:8000/entries/

ログインできました。（「記事の追加」の上の『username:xxxs [ログアウト]』からログアウトできます。）

各ページを一通り確認してみてくださいね。

おわり

Djangoに触れてみてどうでしたか？

私のような初心者でもこの程度のことならDjangoがあればできます。ブログとしてまだまだ未完成ですけどね。

Djangoはなかなかいいやつだから使ってみてください。

今の自分にはこれが精一杯。もっと突っ込んだことがしたくなったら公式ドキュメント（和訳）を読んでみて。有意義な情報がたくさんあると思うから。

これにて、ひとまず終了です。お疲れさまでした(・∀・)

次回予告

このチュートリアルは、これでしばらく中断します。気がむいたら、もしくは要望があれば続くかもしれません。以下、やりたいことリストです。

画像のアップロード
ライトボックス系JS ライブラリの使用
国際化
携帯サイト対応
そのほかいろいろ

お礼

このチュートリアルを作成するにあたって色々なサイトを参考にさせていただきました。

この場を借りてお礼申し上げます。ありがとうございました(・∀・)

Django | The Web framework for perfectionists with deadlines（本家です）
Django ドキュメント — Django v1.0 documentation（訳者の方々には頭が上がりません）
ueBLOG | Django再入門 RandomNoteを作る vol.2 汎用ビュー(Genericview)（汎用ビューたいへん参考になりました）
Rails of Ruby on Rails サポートサイト（この書籍からいろいろヒントをいただきました。Rails本ですが）
常山日記（Djangoの情報はいつもここから）
そのほかのDjango・Pythonを扱ってるサイトの方々

Permalink | コメント(0) | トラックバック(0)

牌語備忘録

2008-09-24

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

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

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

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

ユーザエージェント偽装してWebブラウザで確認してみる

Webブラウザで確認

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

Webブラウザで確認

メモ

ジャンゴと奏でる ～数時間でおぼえるDjango～「05ユーザ認証」

ユーザ認証

ログイン・ログアウト処理

settings.py

settings.pyを変更したときは

ログイン・ログアウト用テンプレート

login.htm

logout.html

Webブラウザで確認

バリデーション

ログアウト

ログイン時のみ「記事の追加」を表示する

一覧画面

Webブラウザで確認

「編集」「削除」も

Webブラウザで確認

詳細画面

Webブラウザで確認

新規作成・削除画面も修正

新規作成画面

Webブラウザで確認

削除画面

新規ユーザを作成してログインしてみる

作成したユーザでログイン

おわり

次回予告

お礼

ジャンゴと奏でる～数時間でおぼえるDjango～「05ユーザ認証」