FlaskとSQLAlchemyでつくるreStructuredTextなWiki (4)

POSTメソッドでデータを変更できるようにする

今回変更するのはapp.pyのみです。

SQLAlchemyを使ってデータを取得できるようになったので、データの追加、更新をできるようにします。そのためにはpython対話環境で行ったようにdb_sessionが必要なのでflaski.databaseモジュールをimportします。またリクエストの最後に、セッションの後片付けをする必要があります(shutdown_session)。

POST時にformにアクセスするのでflaskからrequestをインポートしています(1行目)。さらに、更新時を書き換えたいのでdatetimeモジュールもインポートしています。

from flask import Flask, render_template, abort, request
from flaski.models import WikiContent
from flaski.database import db_session
from datetime import datetime

app = Flask(__name__)
app.config['DEBUG'] = True

@app.teardown_request
def shutdown_session(exception=None):
    db_session.remove()

@app.route("/")
def hello():
    contents = WikiContent.query.all()
    return render_template("index.html", contents=contents)

@app.route("/<title>", methods=["GET"])
def show_content(title):
    content = WikiContent.query.filter_by(title=title).first()
    if content is None:
        abort(404)
    return render_template("show_content.html", content=content)

# 続く

GETでアクセスした場合にデータを取得、POSTでアクセスすると新規追加または更新を行いたいのでapp.routeのメソッドを限定します。

@app.route("/<title>", methods=["GET"])

POST用のコードが続きます。titleでデータを検索して存在しない場合には追加、存在する場合は更新処理をしています。bodyはformで渡されることを想定しています。

# 続き
@app.route("/<title>", methods=["POST"])
def post_content(title=None):
    if title is None:
        abort(404)
    content = WikiContent.query.filter_by(title=title).first()
    if content is None:
        content = WikiContent(title,
                              request.form["body"]
                              )
    else:
        content.body = request.form["body"]
        content.date = datetime.now()
    db_session.add(content)
    db_session.commit()
    return content.body

if __name__ == "__main__":
    app.run()

HTTP経由でデータの追加更新をテストする

HTMLでフォームを用意するのは面倒なので、今回はhttpieを利用してコマンドラインから操作してみます。

pipでインストールします

pip install httpie # $HOME/.virtualenvs/flaski/binにインストールされます

新規データを登録します。app.pyを実行してサーバーを起動しておくのを忘れないでください。

$ http --form POST http://localhost:5000/httpie body="test from httpie"
HTTP/1.0 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 16
Server: Werkzeug/0.8.3 Python/2.7.3
Date: Sun, 03 Mar 2013 04:09:36 GMT
test from httpie

--formオプション(または-f)をつけるとformで送られます。データが新規に追加されていることをブラウザで確認します。

データが既に存在する場合には更新されることも確認します。

$ http --form POST http://localhost:5000/httpie body="modified from httpie"

まとめ

FlaskiにPOST経由でのデータ追加、更新を実装しました。

ここまでのGitHub

FlaskとSQLAlchemyでつくるreStructuredTextなWiki (3)

Flaskでモデルを使う

先に用意したモデルをFlaskで使うにモデルをimportします。

ルートにアクセスしたらコンテンツのタイトル一覧を表示します。さらに、/titleにアクセスしたら内容を表示するようにします。

app.py

from flask import Flask, render_template, abort
from flaski.models import WikiContent

app = Flask(__name__)
app.config['DEBUG'] = True

@app.route("/")
def hello():
    contents = WikiContent.query.all()
    return render_template("index.html", contents=contents)

@app.route("/<title>", methods=["GET"])
def show_content(title):
    content = WikiContent.query.filter_by(title=title).first()
    if content is None:
        abort(404)
    return render_template("show_content.html", content=content)

if __name__ == "__main__":
    app.run()

database.pyでBaseクラスにqueryメソッドを追加しておいたので、WIkiContentクラスから、allで全件検索、filter_byでフィルタリングができるようになっています。

app.routeで<>で囲むと変数としてキャプチャしています。title名で検索をかけ、データが存在しない場合は404エラーを返します(abort(404))。

index.html

{% extends "layout.html" %}
{% block body %}
<h1>Flaski</h1>
<img src="{{url_for('static', filename='snake.jpg')}}" alt="snake"/>
<ul>
{% for content in contents %}
<li><a href="{{url_for('show_content', title=content.title)}}">{{content.title}}</a></li>
{% endfor%}
</ul>
{% endblock %}

for文でcontentsをループさせ、タイトルをリンク付きでリスト表示させる処理を新たに追加しています。タイトルはapp.pyから送る必要がないので、ハードコードするようにしました。

新たに個別のコンテンツ用のテンプレートも用意します

show_content.html

{% extends "layout.html" %}
{% block body %}
<h1>{{content.title}}</h1>
<div>{{content.body}}</div>
<p>{{content.date}}</p>
{% endblock %}

コンテンツがリスト表示されることを確認します。

flaski2

ここまでのGitHub

まとめ

FlaskとSQLAlchemyを連携させてデータ検索、表示するようにしました。

FlaskとSQLAlchemyでつくるreStructuredTextなWiki (2)

SQLAlchemyを使う

SQLAlchemyを使ってModelをデザインしていきます。今回はdeclarativeを使い、RDBにSQLiteを利用します。

modelは一ヶ所で管理したいのでディレクトリを新たに用意します。

mkdir flaski # flaski/flaski
cd flaski
touch __init__.py

ディレクトリをmoduleとして呼び出したいので、__init__.pyという空のファイルを用意します。flaski/flaski以下は次のファイル構成になります。

├── flaski
    ├── __init__.py
    ├── database.py
    └── models.py

作成するのはWikiなのでタイトル、内容、タイムスタンプをデータベースに記録します。

models.py

from sqlalchemy import Column, Integer, String, Text, DateTime
from flaski.database import Base
from datetime import datetime

class WikiContent(Base):
    __tablename__ = 'wikicontents'
    id = Column(Integer, primary_key=True)
    title = Column(String(128), unique=True)
    body = Column(Text)
    date = Column(DateTime, default=datetime.now())

    def __init__(self, title=None, body=None, date=None):
        self.title = title
        self.body = body
        self.date = date

    def __repr__(self):
        return '<Title %r>' % (self.title)

WikiContentクラスではそれぞれの属性の型や主キー、ユニークかどうかなどを指定しています。__repr__メソッドでは出力した時にどう表示させるかを定義しています。

続いて、database.py

from sqlalchemy import create_engine
from sqlalchemy.orm import scoped_session, sessionmaker
from sqlalchemy.ext.declarative import declarative_base
import os

databese_file = os.path.join(os.path.abspath(os.path.dirname(__file__)), 'wiki.db')
engine = create_engine('sqlite:///' + databese_file, convert_unicode=True)
db_session = scoped_session(sessionmaker(autocommit=False,
                                         autoflush=False,
                                         bind=engine))
Base = declarative_base()
Base.query = db_session.query_property()

def init_db():
    import flaski.models
    Base.metadata.create_all(bind=engine)

database.pyでは実際に利用されるデータベースエンジンの設定をしています。今回はSQLiteを使っています(6行目) init_dbはデータベース初期化のための関数です。

データベース初期化

python対話環境を起動してデータベースを初期化します。

>>> from flaski.database import init_db
>>> init_db()

flaski/flaski/wiki.dbが作成されているので確認してみます。

sqlite3 flaski/wiki.db
sqlite> .schema 
CREATE TABLE wikicontents (
    id INTEGER NOT NULL, 
    title VARCHAR(128), 
    body TEXT, 
    date DATETIME, 
    PRIMARY KEY (id), 
    UNIQUE (title)
);

続いて対話環境からデータを登録してみます

>>> from flaski.database import db_session
>>> from flaski.models import WikiContent
>>> c1 = WikiContent("Flask", "micro framework")
>>> db_session.add(c1)
>>> db_session.commit()
>>> c2 = WikiContent("python", "pppython")
>>> c3 = WikiContent("kobito", "kakure-momojiri")
>>> db_session.add(c2)
>>> db_session.add(c3)
>>> db_session.commit()

確認してみます

$ sqlite3 flaski/wiki.db 
SQLite version 3.7.10 2012-01-16 13:28:40
Enter ".help" for instructions
Enter SQL statements terminated with a ";"
sqlite> select * from wikicontents;
1|Flask|micro framework|2013-03-03 09:23:03.721257
2|python|pppython|2013-03-03 09:23:03.721257
3|kobito|kakure-momojiri|2013-03-03 09:23:03.721257

ここまでのGitHub

まとめ

SQLAlchemyのdeclarativeを使ってモデル構築と、pythonからデータベースの初期化、データの登録を行いました。

FlaskとSQLAlchemyでつくるreStructuredTextなWiki (1)

初めてのFlaskアプリ

ディレクトリを用意します。

mkdir flaski
cd flaski

以下のコードをapp.pyとして保存します。ちなみにFlaskのサイトに載っているものです。

from flask import Flask
app = Flask(__name__)

@app.route("/")
def hello():
    return "Hello World!"

if __name__ == "__main__":
    app.run()

Flaskで開発する準備が整っていれば、python app.pyと叩けば127.0.0.1:5000でウェブサーバーが起動します。

/にアクセスした場合にHello Worldという文字列を返すように設定して(4-6行目)、app.runでアプリを起動させています。

$ python app.py
 * Running on http://127.0.0.1:5000/

flaski1

テンプレートの導入

単なる文字列だと味気無いのでテンプレートエンジンを使ってもう少し複雑なHTMLを表示してみます。ディレクトリの構成を表示しておきます。

.
├── app.py
├── static
│   └── snake.jpg
└── templates
    ├── index.html
    └── layout.html

cssや画像などのファイルはstaticというディレクトリに配置します。今回はsnake.jpgを表示してみます。

FlaskのテンプレートエンジンはJinja2です。Flask内でテンプレートを扱うにはrender_template関数を用い、テンプレートはtemplatesディレクトリに配置します。

templatesディレクトリにはlayout.html,index.htmlの2つのファイルを用意します。

layout.html

<!DOCTYPE html>
<html>
  <head>
    <title>flaski</title>
  </head>
  <body>
    {% block body %}{% endblock %}
  </body>
</html>

index.html

{% extends "layout.html" %}
{% block body %}
<h1>{{title}}</h1>
<img src="{{url_for('static', filename='snake.jpg')}}" alt="snake"/>
{% endblock %}

{{}}で囲むと変数を展開することができます。今回はtitleをapp.pyのrender_templateで渡しています。url_forはエンドポイントを指定するとURLに展開する関数です。

app.pyはrender_templateをインポートしてhello関数で使うようにします。

また今回からデバッグモードで動かすようにapp.configをいじっています(3行目)ので、ファイル更新時に自動リスタートしたり、エラーがあればブラウザにデバッグのための情報が出力されるようになります。

from flask import Flask, render_template
app = Flask(__name__)
app.config['DEBUG'] = True

@app.route("/")
def hello():
    return render_template("index.html", title="Flaski")

if __name__ == "__main__":
    app.run()

先ほどと同様にhttp://127.0.0.1:5000/にアクセスすると今度は画像つきのHTMLが表示されます。

flaski2

ここまでのGitHub

まとめ

FlaskでJinja2のテンプレートエンジンを使ってみました。

Flaskは何であって何でないかによると

Flask itself just bridges to Werkzeug to implement a proper WSGI application and to Jinja2 to handle templating.

ということなので、テンプレートエンジンはJinja2を利用するのがベストです。

補足

Jinja2自体はその上に別の構文を被せることができるので、JadeやHamlも利用することができます。

個人的にはインデントでネストを表現するJadeの構文を気に入っているのでPyJadeを使うことが多いです。

FlaskとSQLAlchemyでつくるreStructuredTextなWiki (0)

Persistentの流れから、次はFlask,SQLAlchemy,Jinja2でもやりますかねみたいな話になったので、サーチかけたんだけどいまいち興味ありそうなヒトがいなさそうなので、Wikiをつくることを題材にしてこっちに書いていくことにした。

興味ありなヒトがいそうだったらハンズオンしてもいいかなぁ。まぁどうせみんなYesodなんでしょうけどねー

仮想環境構築のためのライブラリを導入

仮想環境下で動かしたいので、pip,virtualenv,virtualenvwrapperの3つをインストールします。

curl -O https://raw.github.com/pypa/pip/master/contrib/get-pip.py
sudo python get-pip.py
sudo pip virtualenv
sudo pip install virtualenvwrapper

.bashrcに以下の行を追加(osx+homebrewの場合)してsourceもする(source ~/.bashrcとか)。

source /usr/local/share/python/virtualenvwrapper.sh

仮想環境を構築

今回つくるwikiの名前をflaskiにするので、flaskiという名前の仮想環境をつくります。

mkvirtualenv flaski
New python executable in flaski/bin/python
Installing setuptools............done.
Installing pip...............done.
virtualenvwrapper.user_scripts creating /Users/kzfm/.virtualenvs/flaski/bin/predeactivate
virtualenvwrapper.user_scripts creating /Users/kzfm/.virtualenvs/flaski/bin/postdeactivate
virtualenvwrapper.user_scripts creating /Users/kzfm/.virtualenvs/flaski/bin/preactivate
virtualenvwrapper.user_scripts creating /Users/kzfm/.virtualenvs/flaski/bin/postactivate
virtualenvwrapper.user_scripts creating /Users/kzfm/.virtualenvs/flaski/bin/get_env_details
(flaski)localhost@kzfm:flask $

仮想環境に入っていることはプロンプトの先頭に(flaski)と表示されることでわかります。

パッケージのインストール

FlaskとSQLAlchemyをインストールします。

pip install flask
pip install sqlalchemy

インストールされたパッケージはpip freezeで出力出来ます。

Flask==0.9
Jinja2==2.6
SQLAlchemy==0.8.0b2
Werkzeug==0.8.3
wsgiref==0.1.2

まとめ

Flaskで開発するための環境を構築しました。次からは実際にFlaskでwafを作っていきます。

補足

pipの使い方

逆に環境をコピーしたい場合には

pip freeze > requirements.txt

で依存するパッケージを作っておいて、別のマシンにファイルをコピーして

pip install -r requirements.txt

とやればいいので便利です。

virtualenvwrapperの使い方

  • mkvirtualenv [仮想環境名]: 仮想環境をつくる
  • workon [仮想環境名]: 仮想環境に入る
  • deactivate: 仮想環境をぬける
  • lsvirtualenv: 仮想環境一覧を表示
  • rmvirtualenv: 仮想環境を削除

FlaskでLESSをあつかう方法を検討した結果watchdogかgrunt.jsでいいことになった

Flask+Twitter Bootstrapで作ることが非常に増えている。LESSを弄りたいときに

<link rel="stylesheet/less" href="less/style.less">
<script src="js/libs/less-1.2.1.min.js"></script>

とかやればいいんだけど、IEだとレンダリングがやたらと遅くなるので本番環境ではcssにコンパイルすることになるため、この部分を書きなおすのは面倒くさい。

だったら開発環境でも最初から更新時にCSSコンパイルするとか裏でよろしくやってくれる方法を導入したいなぁということで調べてみた。

これらは拡張子がcssのurlにアクセスした時にlessファイルを探してcssファイルが存在しなかったり、lessが変更されている(更新日時とかハッシュを見ている)ときにコンパイルする用になっている。before_requestのところで処理している。

難点は、cssとlessが同じディレクトリにあることを決め打ちしているところかなぁ。僕の場合bootstrapは別に管理しているのでコンパイル先を自分で決められないのは困る。

もう少し統一的に管理できそなうなものにFlask-Funnelというものがあったが、ちょっと面倒くさそう。これだったらGruntとかYeomanみたいなnode.js製の管理ツールでもいいかなぁと。

結論

Initializrのbootstrapだったら変更検知してstyle.lessをコンパイルすればいいのでwatchdog使えばいいかなぁ。grunt.jsでもいいや。

Githubのtwitter bootstrapだったらMakefileにwatchがついているのでそれを使ってもいいなぁと。ちなみにカスタマイズはここらへんを参考にしている。

FlaskのViewのメタプログラミングの例がわかりやすかった。

MethodViewのコードを読んでたら、例としてわかりやすかったのでメモ。どういう動きをするのかはあらかじめ「Pythonのメタプログラミング (メタクラス) を理解したい人のための短いコード片と禅問答」を読んでおくと良いと思う。

class MethodViewType(type):
    def __new__(cls, name, bases, d):
        rv = type.__new__(cls, name, bases, d)
        if 'methods' not in d:
            methods = set(rv.methods or [])
            for key in d:
                if key in http_method_funcs:
                    methods.add(key.upper())
            if methods:
                rv.methods = sorted(methods)
        return rv

class MethodView(View):
    __metaclass__ = MethodViewType

    def dispatch_request(self, *args, **kwargs):
        meth = getattr(self, request.method.lower(), None)
        if meth is None and request.method == 'HEAD':
            meth = getattr(self, 'get', None)
        assert meth is not None, 'Unimplemented method %r' % request.method
        return meth(*args, **kwargs)

Flaskでセッションが入れ替わるというバグに悩まされた

13.02.27

バグの発生箇所を掴んだ。OpenIDサーバーだった。開発環境ではエラーが出なくて本番環境でのみ出現するのでサーバーを疑っていたのだけど違った。

本番環境でデバッグログ出したら

Error attempting to use stored discovery information: Claimed ID does not match (different subjects!)
Expected <wrong-openid> got <right-openid>
Attempting discovery to verify endopoint
Performing discovery on <wrong-openid>

というメッセージが出ていた。

OpenIDサーバーから戻ってきた所でおかしくなっているようだ。referrer出力するようにしたらOpenIDサーバーが認証して戻すところで入れ替わっていた。

なんでそうなるのかワケがわからないが、OpenIDサーバーを再起動したらとりあえずは治った。ploneでも似たような症状を見つけたが、Flaskのせいではないということが分かったので一安心。

仕様をきちんと押さえておくか、本を読んでおくかしておいたほうがいいけど、とりあえずはいいや。

ProductName OpenID: the Definitive Guide
David Recordon
Oreilly & Associates Inc / ?円 ( 2012-04-30 )


13.02.26

初回のログイン時じゃなくて、クッキーがエクスパイアしたあとにアクセスしてもセッションの入れ替わりが起こるみたいだ。スレッドかなぁと思ったけど、帰りの車のなかでよく考えてみたらやっぱ違うよなぁと思った。

セッションのデータがサーバー側に残っていてクッキーが送られないときにそのデータが使われているんじゃないかなぁ。

sessionをよく読んでみよう。

13.02.25

なおってなかった。

open-idサーバーで認証するところまではちゃんとユーザーが認識されているんだけど、アプリケーションにリダイレクトされたところで、ユーザーのセッションが違うユーザーのものに入れ替わってしまうというパターン。

  • バージョン0.8でも0.9でも起きる
  • 開発環境では起きないが、本番環境(Gunicorn)で起きる
  • IE8でのみ確認されている

多分ブラウザは関係ないと思う。

@app.before_requestにセッションが残っているっぽいので@oid.loginhandlerにアクセスする時に@app.before_requestのユーザーをチェックする処理をとばしてログイン処理をすればいいような気がしてきたのであとでやってみる。


Flask-OpenIDでログインするとなぜか初回に別アカウントになってしまい、一度ログアウトしてから再ログインすると正常にログインできるというよくわからないバグが頻発していて悩んでいた。しかもdevelopmentでは全く再現できず、production(Flask+Gunicorn+Supervisord)でしか起こらないので厄介だった。

Flaskのバージョンを0.8から0.9にあげてみたけどなおらなかったので、調べたら既に報告されていた。

最初のスレッドは、「ユーザー付きあわせて違っていたらセッション破棄するぜ」みたいな解決方法だったのでちょっと使えなかったが、二番目のスレッドでsessionインターフェースを自前で用意したらなおったという報告があったので試してみた。

Flask-OpenIDでこのスニペットをそのまま利用するとopenid.yadis.manager.YadisServiceManagerがJSONシリアライズできないというエラーが出た。これはpython-openidに由来する問題らしく、コメントで指摘されているようにpickleでdumpすればsave_sessionはできるようになる。

しかし、今度はopen_sessionでコケる。managerがstrだ云々っていうエラーなのでpickle.loadsがうまくいってないようだ。Flask-OpenIDのソース読むとSessionWrapperで' p'っていうkeyのDictionaryを作っているので、Sessionのほうもそのようにしてみた。

Better Client-side sessionsをちょっと変えたらうまくいった。

from werkzeug.datastructures import CallbackDict
from flask.sessions import SessionInterface, SessionMixin
from itsdangerous import URLSafeTimedSerializer, BadSignature
import pickle

class ItsdangerousSession(CallbackDict, SessionMixin):

    def __init__(self, initial=None):
        def on_update(self):
            self.modified = True
        CallbackDict.__init__(self, initial, on_update)
        self.modified = False

class ItsdangerousSessionInterface(SessionInterface):
    salt = 'cookie-session'
    session_class = ItsdangerousSession

    def get_serializer(self, app):
        if not app.secret_key:
            return None
        return URLSafeTimedSerializer(app.secret_key,
                                      salt=self.salt)

    def open_session(self, app, request):
        s = self.get_serializer(app)
        if s is None:
            return None
        val = request.cookies.get(app.session_cookie_name)
        if not val:
            return self.session_class()
        max_age = app.permanent_session_lifetime.total_seconds()
        try:
            data = s.loads(val, max_age=max_age)
            data = data[' p']
            for k in data:
                if k.startswith('yoc') or k.startswith('lt')\
                                       or k.startswith('_openid_consumer_last_token')\
                                       or k.startswith('_yadis_services__openid_consumer_'):
                    data[k] = pickle.loads(data[k])
            return self.session_class(data)
        except BadSignature:
            return self.session_class()

    def save_session(self, app, session, response):
        domain = self.get_cookie_domain(app)
        if not session:
            if session.modified:
                response.delete_cookie(app.session_cookie_name,
                                   domain=domain)
            return
        expires = self.get_expiration_time(app, session)
        d = {}
        for k in session:
            if k.startswith('yoc') or k.startswith('lt')\
                                   or k.startswith('_openid_consumer_last_token')\
                                   or k.startswith('_yadis_services__openid_consumer_'):
                d[k] = pickle.dumps(session[k])
            else:
                d[k] = session[k]
        val = self.get_serializer(app).dumps({' p': d})
        response.set_cookie(app.session_cookie_name, val,
                            expires=expires, httponly=True,
                            domain=domain)

最近覚えたSQLAlchemyのTips

先週は、レガシーなOracleデータベースと格闘していた(文字エンコーディングの件もその一つ)。

__table__と__tablename__の違い

__table__は適切に設定済みのテーブルに対して使うらしい。自分でごちゃごちゃと設定したい場合は__tablename__と__table_args__を使うべし

複合プライマリーキーでのone-to-many

主キーが複合プライマリーキーの場合はそれぞれにprimary_key=Trueをつけるが、外部キーで一対多の関連付けをしたい場合には __table_args__で外部キー設定をしておく。

class Protocol(Base):
    __tablename__ = 'tblprotocol'
    id = Column("id", String(32), primary_key=True)
    version = Column("version", String(11), primary_key=True)
    name = Column("name", String(255))

class Experiment(Base):
    __tablename__ = 'tblexperiments'
    __table_args__ = (ForeignKeyConstraint(['protocolid','protocolversion'],
                                      ['tblprotocol.id', 'tblprotocol.version']), {})
    id = Column("id", String(32), primary_key=True)
    protocolid = Column("protocolid", String(32))
    protocolversion = Column("protocolversion", String(11))
    name = Column("name", String(255))
    protocol = relationship("Protocol", backref="experiments")

そもそも主キーの無いテーブル

主キーの無いテーブルはエラーが出るので、適当に複合キーを設定してプライマリーキーにしてしまう。

その他

SQLもORマッパーもわかっていればバランスの取れた設計になっていいのではなかろうかと思った。ORマッパー側から考えたほうがER図が綺麗になりそうだし。

ProductName 達人に学ぶ SQL徹底指南書 (CodeZine BOOKS)
ミック
翔泳社 / 2520円 ( 2008-02-07 )


SQLAlchemyとOracleの文字化け問題と闘った

WindowsのOracleにアクセスしてSQLAlchemyを使おうとすると日本語が化ける。

engine = create_engine("xxxxxxxx", encoding='cp932')

とcreate_engineまわりをいじっても全然改善できない。これはcx_Oracleまわりかなぁとそっち方面を攻めたら解決したのでメモ。

Oracleのエンコーディングを調べる

対象のDBにアクセスしてコマンドを叩く

SELECT value FROM nls_database_parameters WHERE parameter='NLS_CHARACTERSET';

JA16SJISTILDEという文字列が返ってきた。

環境変数を設定する

スクリプト中で環境変数を設定する

import os
os.environ["NLS_LANG"] = "JAPANESE_JAPAN.JA16SJISTILDE"

これで解決した。

ProductName 超変換!! もじバケる6 20個入 BOX (食玩)

バンダイ / 2100円 ( 2012-12-12 )