にーやんのブログ

あまびき開発 37 ～ 40 日目。

37 日目

• Yahoo! 検索 Web サービスで検索した場合に、お取り置き欄のレイアウトが崩れていたのを修正。
  • 前日、CSS で角を丸くした際に Yahoo! 経由での検索結果表示時の高さ調整を忘れていたのが原因。
• 検索結果表示欄とお取り置き欄の overflow 属性の設定を auto から scroll に変更。その親要素の overflow 属性を hidden にし、高さをより低くすることによって横スクロールバーを隠す。

38 日目

商品タイトルが長い場合には省略することにした。下のような感じで substr を使ってみたが、日本語でも問題なくカットできた（みたい）。

    // 例:
    var $title = $("Title", this).text();
    if($title.length > 48){ // 48 文字より多い場合はカット
        var $shorttitle = $title.substr(0, 48) + "..."; // 末尾に ... を追加
    } else {
        var $shorttitle = $title;
    }

39 日目

Creators の Role 属性も取得して、「作者名（Role）」という形で表示することにした。Role 属性の値は attr() を使えば取得できる。

// 例:
var $role = $("ItemAttributes/Creator").attr("Role");

40 日目

• 検索フォームを JavaScript で生成するのをやめた。読み込んだときに、Opera で一番最初の select メニューが選択されないため。
• 「便利な機能」のヘルプを追加。
• jqueryselectcombo プラグインを 1.2 に更新したら IE で動作しなくなったので、結局 1.1 に戻した。Firefox では 1.2 も動くが、メインの select メニューを変更するたびにサブメニューの要素数が返ってくる（Firebug のコンソール画面で確認）。

---

この記事は、Amazon.co.jp 商品検索サイト「あまびき」の開発中につけていたメモを、ブログ用にまとめ直したものです。

Getting Started - Google App Engine - Google Code は、ゲストブックアプリケーションを題材にしたチュートリアルになっている模様。とりあえずザックリと読みながら、動かせるところまでやってみる。

The Development Environment

このチュートリアルでは、次の 2 つのコマンドを使用する。

• dev_appserver.py: 開発用の Web サーバーを起動する。
• appcfg.py: アプリケーションファイルをアップロード。

Hello, World!

1. スクリプトの作成

helloworld という名前のディレクトリを作成し、そこに helloworld.py という名前のファイルを作成する。

とりあえず、google_appengine の下に hellowordl というフォルダを作成してみた。コードは少し変えて、日本語にしてみる（UTF-8 で保存）。

# -*- coding: utf-8 -*-

print 'Content-Type: text/plain'
print ''
print 'こんにちは、世界！'

2. app.yaml の作成

YAML 形式の設定ファイル（app.yaml）を作成する。

Hello, World! - Google App Engine - Google Code に簡単な説明がある。

• 参考: Configuring an App - Google App Engine - Google Code

3. Web サーバーの起動

dev_appserver.py で Web サーバーを起動する。

コマンドプロンプトを起動して

cd "C:\Program Files\Google\google_appengine"
dev_appserver.py helloworld

「Allow dev_appserver to check for updates on startup?」と聞かれたので、とりあえず y と入力して Enter。

4. アプリケーションのテスト

ブラウザで http://localhost:8080/ にアクセスすると、こんな感じで表示された。

スクリプトを編集して保存、ブラウザをリロードすると変更が反映される。

サーバーをシャットダウンするには、Ctrl + C。一見何も起こらないようだったが、ブラウザをリロードするとエラーが出て接続できなくなっていた。コマンドプロンプトを閉じるには exit と入力して、Enter。

関連記事

• Google App Engine に登録してみた
• Google App Engine SDK: webapp フレームワーク

秋元@サイボウズラボ・プログラマー・ブログ: Google App Engine SDKを使ってみたを見て、早速、Google App Engine に申し込んでみました。とくに今何か作りたいものがあるわけではないのですが、とりあえず……。

事始め

1. http://appengine.google.com/ にアクセス。
2. google アカウントでログイン。
3. 空きが出来たらメールしてくれるということで、Definitly をクリック。
4. Download the SDK - Google App Engine - Google Code から、プラットフォームに合わせて Google App Engine SDK （Windows なら GoogleAppEngine.msi）をダウンロードしてインストール。
   • デフォルトでは、「C:\Program Files\Google\google_appengine\」にインストールされる。
   • Python 未インストールなら、別途ダウンロードしてインストール。
5. Google App Engine のドキュメント（Developer's Guide とか Google App Engine Articles 読む（予定）。

リンク

• 秋元@サイボウズラボ・プログラマー・ブログ: Google App Engine SDKを使ってみた
• 俺も俺も！ Google App Engine！ - IT戦記

関連記事

• Google App Engine SDK: Hello, World! を表示させるまで
• Google App Engine SDK: webapp フレームワーク

あまびき開発 34 日目、35 日目、36 日目。

34 日目

これまでは検索フォームの角を丸くするために jQuery の corner.js プラグインを使用していたが、CSS と画像を使って角を丸くすることにする。JavaScript を使わなくてもいい部分はなるべく使わないようにするためと、画像を使ったほうがより凝ったデザインにできるため。

いろんな方法があるようだが、とりあえず Another attempt at CSS rounded-corner dialogs using the sliding doors technique を試してみる（via. CSSで角をもっと丸くする方法いろいろ - GIGAZINE）。

今日は画像を作成したのみ。

35 日目

• お取り置き欄に取り消しボタンとクリアボタンを追加。
• ヘルプメニューのリンクを JavaScript で後から生成するようにした。

36 日目

34 日目（上記参照）の続き。

画像は、廉価版が出た時に買った Paint Shop Pro 7 を使って作成。幅を短めにしてしまったせいで何度か作り直したりした末に、何とか完成。

代わりに corner.js の使用を停止。

---

この記事は、Amazon.co.jp 商品検索サイト「あまびき」の開発中につけていたメモを、ブログ用にまとめ直したものです。

あまびき開発 32 日目 と 33 日目。

32 日目

微調整のみ。

• index.html に JavaScript がオフの場合や読み込みに時間がかかる場合に表示されるメッセージを追加。
• 画像の修正（ウィッシュリスト追加ボタンなど）。

33 日目

お取り置き機能の実装。

jQuery の clone() を使ってサムネイル画像とリンクボタンを複製し、お取り置き欄に append する。どの商品を複製対象にするかは、クリックした商品の ID から判断する。

お取り置き機能とは

• 気になった商品を検索結果画面右の「お取り置き欄」にクリップする機能。
• 再検索ボタンで検索画面に戻ってもお取り置きした商品はそのまま残る。

ただし、この時点では Cookie には未対応。このため、ブラウザを閉じると、お取り置きも消える。

---

この記事は、Amazon.co.jp 商品検索サイト「あまびき」の開発中につけていたメモを、ブログ用にまとめ直したものです。