牌語備忘録 -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の作り方も勉強しないと...


ジャンゴと奏でる 〜数時間でおぼえる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ライブラリの使用
  • 国際化
  • 携帯サイト対応
  • そのほかいろいろ

お礼

このチュートリアルを作成するにあたって色々なサイトを参考にさせていただきました。
この場を借りてお礼申し上げます。ありがとうございました(・∀・)