FrontPage http://www.ark-web.jp/sandbox/wiki/16.html

このページは?

アークウェブのスタッフが、システム開発についての
“個人メモじゃもったいないけどブログ未満”的コンテンツをまとめているWiki。
お役に立てば幸いです。B^)

JavaScript/クラス名を後から取得する方法 (406d)

更新日 2014-04-30

今までは、

var animal = new Object();
animal.Human = function (name) {
    this.name = name;
}

のように、クラス定義&コンストラクタを書いてたけど、

var animal = new Object();
animal.Human = function Human(name) {
    this.name = name;
}
var className = animal.Human.toString().
                            match(/function[ ]+([a-zA-Z0-9_]+)/)[1];
console.log(className); // Human と表示される

のようにすると、

参考: Function コンストラクタか関数宣言か関数式か(関数 - MDC)

関数名は Function の toString メソッド によってシリアライズした時にも
見る事ができます。 

とあるように、FunctionのtoString()を使って、後からクラス名がとれる。

ただ、通常は、名前空間オブジェクトも使って、

var animal = new Object();

animal.Human = function (name) {
    this.name = name;
}

のようにしてるので、パッケージ名もほしかったら

var animal = new Object();

animal.Human = function aminal_Human(name) {
    this.name = name;
}

のように、パッケージはアンダーバー区切りにするなどし、

var packageAndClassName = animal.Human.toString().match(/function[ ]+([a-zA-Z0-9_]+)/)[1];
var packages = packageAndClassName.split('_'); 
var className = packages.pop(); 
console.log(packages); // ["animal"] と表示される
console.log(className);  // Human と表示される

のようにする必要があるのか。PHP4みたいでダサいが。

ただ、いずれにしても、生成したインスタンスがどのクラスのインスタンスか、わからない。
このままだとせいぜい、クラスメソッドのthisオブジェクトから、現在実行しているクラス名がわかる程度。
インスタンスからクラスのFunctionオブジェクトに参照でもあればいいんだけどな…

  • animal.Human.nameで"Human"が取得でき、animal.Humanのインスタンスのconstructorプロパティからanimal.Humanを参照できます。 -- javascripter? 2009-09-07 (月) 16:37:27
  • arguments.callee.name でも取得できるような -- 2014-04-30 (水) 09:53:55

投稿者志田 | パーマリンク | コメント(1)

| append.gif

ドメイン駆動開発/DDD体験ワークショップに参加しました(PHPカンファレンス2013) (632d)

更新日 2013-09-16

まえがき

「PHPカンファレンス2013」に行ってきたので、久々にSandboxを書いてみますよ! by 竹村

概要

2013年9月14日(土) PHPカンファレンス2013(以降、PHPカンファ)
http://phpcon.php.gr.jp/w/2013/
場所:大田区産業プラザPiO

10:45〜
モデルとの向き合い方:ドメイン駆動設計体験ワークショップ -PHPメンターズ

いきなりまとめ!w

  • ただしこの本で扱うモデルがデカイらしいのでミニマルにして自分で考えてみよう
  • エンティティ・リポジトリ・サービスの 3つからモデリングをし始めよう(これもミニマルに)
  • 実装はSymfonyなどモデルを落とし込みやすいフレームワークを使おう
    • また、実装で新たに用語が出てきたらモデルへフィードバックしよう

基礎

前提:良いソフトウェアとは (P.6)

  • メンテ、テスト、コードが読みやすい

読みづらいコード (P.9のコード参照)

  • 規約、長い、設計悪い
  • 某WPなるメイン処理
    • 処理関数が 7つくらいあるので一見シンプル!
      …でも、register_globals()とか一目見て何を処理するか分かるかというと分かりづらい
      →読んでて気持ち悪い

なんとなくなイメージとメソッド記述にズレがある
…これが読んでて気持ち悪い

  • ズレ=メンタルモデル

”メンタルモデルとの乖離がないソフトウェア=良いソフトウェア”

どうしたらいいの?

  • 業務に関わる複数の人がどう理解してるか
    →メンタルモデルの共通化的な感じかな?
    • モデルを忠実に再現する
    • メンタルモデルとの乖離・相違に気づく

DDDってなんぞ? (P.14)

DDD概要

  • 実装方法、プロセス、OOPのテクニックじゃないよ
  • 良いソフトウェアを作るための ガイドライン・フレームワーク だよ

詳しくは、エリック・エヴァンスのドメイン駆動設計(以降、 DDD本 )のまえがきを読んで。

  • 設計のフレームワークで、語彙として重要

「DDD本」の見開き

  • 関連をたどるのに使えるね
  • ユビキタス言語」「モデル駆動設計」が各関連事項のベースになっているので分かる通り、この 2つが大変重要!

「ドメイン駆動開発/DDD体験ワークショップに参加しました(PHPカンファレンス2013)」 の続きを読む

投稿者竹村 | パーマリンク

| append.gif

JavaScript/画像のある部分をクリックすると他の画像にチェンジするライブラリ (1009d)

更新日 2012-09-04

概要

とてもお久しぶりです。竹村です。

2007年の話ですが、当時「つくるぶ ガイドブログ」というブログのJavaScript担当をしていました。
現在は閉鎖してしまっていますが、記事は直リンクで見ることが可能です。

その際に、第1回目に書いた記事 「Zooomr」の「写真の上に別の写真のレイヤーを配置する」部分をクラスライブラリ化してみました
のサンプルが消えてしまっているのを確認しまして^^; 当時は prototype.js を利用した実装を書いていたのですが、
ちょっと jQuery で実装しなおしてみました!

Zooomrについての補足

※記事中のZooomrのリンクが切れているっぽいのですが、Zooomr自体はまだ存在しているようです。
ただ、現在では普通のフォトストレージ的なサービスになっているようです。

写真上に別の写真を配置して、クリックでそれを表示するようなUIは↓この記事のビデオで当時の挙動が確認できると思います。
Zooomr、写真にズーム可能な機能スタート

動作説明

基本的に実装方針は記事に書いてあった通りです。
『1.背景画像レイヤー』の上に『2.穴レイヤー』があって、そこから『3.穴レイヤー内の画像レイヤー』がのぞいている形です。

とりあえず、動くサンプルをどうぞ。

http://okra.ark-web.jp/~takemura/public/js/crosslayer/index2.html
sample.png

  1. 写真の上に赤枠のがあり、マウスホバーで中の写真レイヤーがグリグリ動きます。
  2. クリックで別の写真に画面遷移…は、しないで該当写真を前面に表示するUIにしてあります。
  3. 表示したら、次のデータに基いて『2.穴レイヤー』と『3.穴レイヤー内の画像レイヤー』を更新します。

「JavaScript/画像のある部分をクリックすると他の画像にチェンジするライブラリ」 の続きを読む

投稿者竹村 | パーマリンク

| append.gif

Git/svnレポジトリからの移行 (1238d)

更新日 2012-01-19
git svn clone file:///var/www/projects/a/aaa/svnroot /var/www/projects/a/aaa/tmp/gitroot.git
cd /var/www/projects/a/aaa/tmp/
git clone --bare gitroot.git gitroot.git.bare
sudo mv gitroot.git.bare ../gitroot.git
git clone ssh://git@aaa.ark-web.jp/var/www/projects/a/aaa/gitroot.git

投稿者志田 | パーマリンク

| append.gif

ネットワーク/socks5経由でsftp (1269d)

更新日 2011-12-19

ネットワーク/socks5経由でsftp

winscp

新規にセッションを作ります。
接続したいホストの情報を入力します。
winscp_01.jpg

プロキシにて形式にsocks5を選択してsocks5の情報を入力します。
winscp_02.jpg

この状態で保存します。
winscp_03.jpg

保存したセッションより上で保存したセッションを指定してログインします。
winscp_04.jpg

filezilla

設定画面の一般プロキシーでsocks5の情報を入力します。
filezilla_01.png

サイトマネージャーで接続したいホストの情報を入力します。
filezilla_02.png

proxyを使用したくない場合はプロキシーを無視にチェックを入れます。
filezilla_03.png

パーマリンク

| append.gif

wakame/wakame-0.5.1 on Ubuntu-server 10.04 LTS Lucid Lynx (1305d)

更新日 2011-11-13

FrontPage

wakame 0.5.1 の ubuntu-server 10.04 へのインストール

wakameのubuntu用セットアップスクリプトが存在する。

しかしながら、このまま使用したのでは以下の二つのエラーを出してインストールが完了しない。

ERROR:  Error installing multi_json:
        multi_json requires RubyGems version >= 1.3.6
ERROR:  Error installing jeweler:
        bundler requires RubyGems version >= 1.3.6

両者ともにgemのversion1.3.6を要求する。
apt-getで提供されるgemはrubygems1.8 rubygems1.9 rubygems1.9.1であり、全てversionが1.3.5である。

wakameとの依存性により以下のパッケージが使用する。
multi_json を rubigen が使用
bundler を jeweler が使用

解決するためにwakameを入れる前にmulti_jsonに依存しないversionのrubigenとbundlerに依存しないversionのjewelerをインストールしておく。

/usr/bin/gem install rubigen --version 1.5.5 --no-rdoc --no-ri
/usr/bin/gem install jeweler --version 1.4.0 --no-rdoc --no-ri

この後で

/usr/bin/gem install wakame --no-rdoc --no-ri

とすればwakameのインストールが完了する。(最後にbundlerが無いというエラーが出るがwakame自体はインストールされている)

パッチとしては以下のようになる。
(ec2_ami_toolsは手動でインストールしたので除外してある)
(aptのリポジトリのmultiverse追加はしないのでコメントアウト)
(まだテスト状況なので/etc/init.dには登録しない)
(gemコマンドをフルパスで使用しているのはruby1.9.2とgem1.3.7が入っており、それが優先されてしまうため)

--- 01_setup-base.sh   2011-10-09 00:49:54.752028837 +0900
+++ wakame-setup-base.sh       2011-10-09 04:26:13.302028366 +0900
 @@ -11,12 +11,11 @@
   ruby ruby1.8-dev rdoc1.8 ri1.8 rubygems1.8
   rabbitmq-server
   make g++ libopenssl-ruby libsqlite3-dev
 - ec2-ami-tools
  "
  
 -[ -f /etc/apt/sources.list ] && {
 -  perl -pi -e 's, multiverse,,g; s,$, multiverse,' /etc/apt/sources.list
 -}
 +#[ -f /etc/apt/sources.list ] && {
 +#  perl -pi -e 's, multiverse,,g; s,$, multiverse,' /etc/apt/sources.list
 +#}
  apt-get update
  apt-get -y install ${pkgs}
  
 @@ -31,9 +30,11 @@
  # wakame installation
  echo "#Setting up wakame ..."
  su - wakame -c "
 -  gem list | grep -q -w wakame || {
 +  /usr/bin/gem list | grep -q -w wakame || {
      #gem install /tmp/wakame-0.5.1.gem --no-rdoc --no-ri
 -    gem install wakame --no-rdoc --no-ri
 +    /usr/bin/gem install rubigen --version 1.5.5 --no-rdoc --no-ri
 +    /usr/bin/gem install jeweler --version 1.4.0 --no-rdoc --no-ri
 +    /usr/bin/gem install wakame --no-rdoc --no-ri
    }
 "
  [ -d /home/wakame/wakame.proj ] || {
 @@ -57,14 +58,14 @@
  EOS
  
  # add service
 -[ -L /etc/init.d/wakame-master ] || {
 -  ln -s /home/wakame/wakame.proj/config/init.d/wakame-master /etc/init.d/
 -  /usr/sbin/update-rc.d wakame-master defaults 40
 -}
 -[ -L /etc/init.d/wakame-agent ] || {
 -  ln -s /home/wakame/wakame.proj/config/init.d/wakame-agent /etc/init.d/
 -  /usr/sbin/update-rc.d wakame-agent  defaults 41
 -}
 +#[ -L /etc/init.d/wakame-master ] || {
 +#  ln -s /home/wakame/wakame.proj/config/init.d/wakame-master /etc/init.d/
 +#  /usr/sbin/update-rc.d wakame-master defaults 40
 +#}
 +#[ -L /etc/init.d/wakame-agent ] || {
 +#  ln -s /home/wakame/wakame.proj/config/init.d/wakame-agent /etc/init.d/
 +#  /usr/sbin/update-rc.d wakame-agent  defaults 41
 +#}
  
  # ssh key pair
  [ -d /home/wakame/config ] || {

しかしこのままではwakame-masterもwakame-agentも起動しない。
どちらもrabbitmq-serverが起動していないと動かないらしい。
とりあえずwakame-masterとwakame-agentを起動できるようにしたパッチを作成。

「wakame/wakame-0.5.1 on Ubuntu-server 10.04 LTS Lucid Lynx」 の続きを読む

パーマリンク

| append.gif

mysql/groonga on Ubuntu-server 10.04 LTS Lucid Lynx (1402d)

更新日 2011-08-08

FrontPage

修正された模様 http://mroonga.github.com/ja/docs/news.html#release-1-0-0

installではまったのでメモ

とりあえずmysqlを入れる

sudo apt-get install mysql-common mysql-server mysql-client

以下を参考にgroongaをinstall
http://mroonga.github.com/install.html#ubuntu-10-04-lts-lucid-lynx

install中に以下のエラーを出して失敗してしまう

ERROR 1126 (HY000) at line 1: Can't open shared library '/usr/lib/mysql/plugin/ha_groonga.so'
(errno: 2 failed to map segment from shared object: Permission denied)

「mysql/groonga on Ubuntu-server 10.04 LTS Lucid Lynx」 の続きを読む

パーマリンク

| append.gif

JavaScript/placeholderをJavaScriptで実装する (1434d)

更新日 2011-07-07

目次

概要

HTML5のplaceholder

HTML5のplaceholderを実運用で利用する話があり、下記のように簡単に実装できて
HTML5はスバラシイな、と思っていました。

<form action="submit_test.php" method="get">
<p>住所:
<ul>
<li>都道府県 <span>(必須)</span> 例:東京都<br />
<input type="text" name="address1" value="" placeholder="都道府県をご入力ください。" /></li>
<li>市区町村 <span>(必須)</span> 例:中央区<br />
<input type="text" name="address2" value="" placeholder="市区町村名をご入力ください。" /></li>
<li>町名・番地 <span>(必須)</span> 例:銀座 1-250-999<br />
<input type="text" name="address3" value="" placeholder="町名と番地をご入力ください。" /></li>
<li>ビル名・マンション名 例:ナントカ本命ビル 7F<br />
<input type="text" name="address4" value="" placeholder="もしビル名等がないようでしたら必要ございません。" /></li>
</ul>
</p>
<input type="submit" name="submit" value="送信" />
</form>

▼完成イメージ&動作確認は下記参照。
http://okra.ark-web.jp/~takemura/public/js/placeholder/html5_placehoder.html

html5_ver.jpg

ここで問題が…

でも、ちょっと待ってください!

IE8/IE7 で表示すると、placeholderは効きません。

…どうするか、というとJavaScriptで実装すればいいじゃなイカ!

JavaScriptのplaceholderライブラリ

JavaScriptでplaceholderを実装しているライブラリを探してきました。

  • はてブのコメントに書きましたが、
    defaultColorの他にrequiredColorってのを付けて、hasClass("required")だったらrequiredColorにすると尚良さそう。

…というわけで、やってみました。

JavaScriptのplaceholderライブラリ+微カスタマイズ

▼完成イメージ&動作確認は下記参照。
http://okra.ark-web.jp/~takemura/public/js/placeholder/

javascript_ver.jpg

プログラム

GitHubからforkしまして、下記にソース一式を置いてあります。
https://github.com/tiadeen2/jquery.ah-placeholder

ライセンスは、MITとGPLのデュアルライセンスです。

「JavaScript/placeholderをJavaScriptで実装する」 の続きを読む

投稿者竹村 | パーマリンク

| append.gif

Googleカスタム検索をAPIで取得ようとしたが残念だった件 (1434d)

更新日 2011-07-07

目次

概要

Google Web Search API、もしくは Google Custom Search APIを導入してみようと思っている方へ、
弊社で悪戦苦闘した上に他の対応方法への変更を余儀なくされた経験をお伝えしたく、書いています。
                            アークウェブ 竹村

提案

要望

要望としては、

  • あるディレクトリ配下に対して、ユーザーが入力したキーワードに対する全文検索結果を表示したい
  • かつ、各ページにタグを付けておき、タグで絞り込むようにしたい
    • 検索対象のページ数は200件程度

というものでした。

まず、NAMAZU を提案したのですが諸事情で却下としました。
利用できるのはPHPのみ、という状況です。

そこで、外部のAPIにアクセスして検索結果を取得する方法を提案し、これが採用されました。
それが『Googleカスタム検索+Google Web Search API』による検索です。

Googleカスタム検索+Google Web Search API の提案の内容

Googleカスタム検索は、コンテキストのXMLと、アノテーションのXMLを利用して
任意のURL(Googleカスタム検索では サイト と呼びます)に対して、タグ(Googleカスタム検索では ラベル と呼びます)を指定できます。
検索条件として、キーワードの他にラベルを指定してサイトを絞り込むことができるわけです。

Google Web Search APIは、Googleカスタム検索のIDを指定して検索条件やページングの制御が可能です。

この 2つを組み合わせて、Googleカスタム検索で検索対象のページを整備しておき
ユーザーの検索条件からGoogle Web Search APIで検索結果を取得して表示する。
プログラムはPHPで動作可能。

という提案をしました。

サンプル

当時作ったサンプルが↓こちら。

▼APIを利用して検索結果を表示するサンプル
http://okra.ark-web.jp/~takemura/public/google/custom_search/for_api.html

sample.jpg
  • 表示件数10件だとエラーになるのはAPIの制約です。
  • 何もせずそのまま検索すると、 「全件数」が168などとなりますが、実は全ページは41ページしかありません。

「Googleカスタム検索をAPIで取得ようとしたが残念だった件」 の続きを読む

投稿者竹村 | パーマリンク

| append.gif

JavaScript/jQuery_Cycle_Pluginでメインビジュアルを作っていくチュートリアル (1573d)

更新日 2011-02-17

概要

jQuery のスライドショー用の plugin に、jQuery Cycle Plugin があります。

▼公式サイト (公式のデモもこちらで確認できます)
http://jquery.malsup.com/cycle/

30個近くのエフェクトをデフォルトで持っており、
ナビゲーションも自分で記述しなくても空のdivタグを渡してやれば
自動的に生成してくれる楽チンプラグインなので利用されている方も
多くいるかと思います。

今回は、この jQuery Cycle Plugin をサイトのメインビジュアルとして
下記のようなものを作っていく課程をチュートリアル的にまとめました。

今回作る完成品

http://okra.ark-web.jp/~takemura/public/js/jquery_cycle/
今回作る完成品

目次

  • 概要
    • 今回作る完成品
  • jQuery Cycle Plugin のエフェクトを探す
    • 仕様の検討
    • エフェクト一覧のサンプルについて
    • エフェクトの検討
  • エフェクト同士の組み合わせ
  • 各画像をクリックできるようにする
  • ページングのデザイン適用
  • まとめ

jQuery Cycle Plugin のエフェクトを探す

仕様の検討

まずは、どのようなメインビジュアルにするかを検討しましょう。

+-------------+-------------+-------------+
|       |       |       |
|  画像   |  画像   |  画像   |
|       |       |       |
|       |       |       |
+-------------+-------------+-------------+
[  1  ] [  2  ] [  3  ] [  4  ] [  5  ] [  ||  ]
  • 画像3枚が 1セットで、
  • 5セット分用意し、
  • 5セットをループで表示する。
  • 1セット毎チェンジするエフェクトを Cycle Plugin で実装する。
  • 5秒で自動的にループする。
    • [ || ]をクリックしたら自動ループを停止する。また、[ > ]にアイコンを変更する。
    • [ > ]をクリックしたら自動ループを再開する。また、[ || ]にアイコンを変更する。

とりあえず、そのような仕様にしましょう。

では、1セット毎チェンジするエフェクトをどのようにするかを検討します。

公式サイトでも「 jQuery Cycle Plugin - Effects Browser 」という
各エフェクトを確認できるサンプルがあります。

ただ、これは画像1枚で1セットなのでちょっとイメージしづらいです。
そこで、↓こちらにサンプルを用意しました。

「JavaScript/jQuery_Cycle_Pluginでメインビジュアルを作っていくチュートリアル」 の続きを読む

投稿者竹村 | パーマリンク

| append.gif

paypalの決済の種類とビジネスモデルについて聞いてきました (1651d)

更新日 2010-12-02

paypalの決済の種類とビジネスモデルについて聞いてきました

PayPal Japan Presents: 変わる簡略な決済とビジネスモデル

  • 2010年12月1日 19:00〜
    銀座の アップルストアー3F にて
  • 講師:天野洸 氏
    水野博商 氏
  • 40人くらい

用語定義

  • 【タケ】:←この部分は、私の感想の箇所です

あいさつ

east.webdirections.org をみてねー
【タケ】補足: http://east.webdirections.org/2010/

paypalのざっくりした話 (決済について)

オンライン決済とは

  • 教えて!にちぎんより
    →決済とは、お金の受け渡しである
    →オンライン決済は、それをオンラインでやるよ
  • オンライン決済の国内の決済額のB2Cの市場規模:
    • 2009年 6.6兆円。
    • 2014年には12兆円になるだろうという見通し
    • モバイルも増えるだろう
  • 決済の種類
    • クレカが多くて、対面・非対面を選ばない
      →だが、カード決済はまだ怖い。
  • サービス市場規模1,633億円
    • モバイルキャリアが500億、クレカ470億、コンビニなど439億
  • 決済の多様化
    • 決済手段がこんなに多いのは日本くらい
      →現金主義という根底がある
    • これは日本の独自文化だね
  • オープン化されてきているよ
    • 外資も入ってきますよね。
      →paypalも来ましたよ

paypalってなんだっけ?

  • eBayの標準の支払方法でした
  • 2年前からeBayの外で使われる機会が増えているんだ
    →だれでも使えるよ
  • 世界での統計
    • 年間決済総額 7.1兆円 (2009年の国内の決済額よりやや多い)
    • アカウント数 2.3億
    • 世界のシェアは 15%
    • クロスボーダー取引(国外決済)の割合=25% で多いです。
      →よく使われている

「paypalの決済の種類とビジネスモデルについて聞いてきました」 の続きを読む

投稿者竹村 | パーマリンク

| append.gif

jQuery Mobileの使い方と挙動のまとめ その1 (1679d)

更新日 2010-11-04

目次

概要

  • iPhoneアプリのような挙動が、ウェブブラウズで提供できるJavaScriptのライブラリです。
    • iPhone以外にもAndroidやWindows Mobileなどにも対応している模様です。どれだけ対応しているかは、公式サイトの「Platforms」に書いています。
  • jQueryのプラグインとして動作します。
  • 公式: http://jquerymobile.com/
    • この記事を書いている時のjQuery Mobileのバージョンは、「jquery.mobile-1.0a1」です。
      アルファ版なので今後の改変により変更される可能性はあります。

使い方

  • jQueryのプラグインなので、jQueryのライブラリと一緒に読み込めばOKです。
    <link rel="stylesheet" href="js/jquery.mobile-1.0a1/jquery.mobile-1.0a1.min.css" />
    <script src="js/jquery-1.4.3.min.js" type="text/javascript"></script>
    <script src="js/jquery.mobile-1.0a1/jquery.mobile-1.0a1.min.js" type="application/x-javascript"></script>
    • 【メモ】jQTouchの時には必要だった、「jQT = new $.jQTouch();」という記述すら必要ない模様。
  • div タグに data-role="page" という属性値を設定することで、該当箇所が 1ページとして認識されます。
    • pageの中にも、divタグを利用して data-role="header" と data-role="content" と data-role="footer" の 3種類を定義できます。
    • data-role="header" は、Backボタンの表示やテーマの設定ができる (jQTouchでいうtoolbarの箇所ですね)
    • data-role="content" は、内容を入れるところですね。
    • data-role="footer" は、複数Pageで同一のFooterを定義したりもできる。data-role="navbar"で定義するようです。
  • 下記の例は、home画面にてhogeへのボタンを用意し、hoge画面で前の画面に戻るように記述してあります。
    • 【メモ】jQTouchの記事と同じ構成です。jQuery Mobileだと↓このようになります。
      <!-- home ページ -->
      <div id="home" data-role="page">
       <div data-role="header">
         <h1>ホーム</h1>
       </div>
       <div data-role="content">
         <p>現在ホームです。</p>
         <a data-role="button" data-transition="fade" href="#hoge">hogeへ</a>
       </div>
      </div>
      <!-- /home ページ -->
      
      <!-- hoge ページ -->
      <div id="hoge" data-role="page">
       <div data-role="header">
         <h1>hogeページ</h1>
       </div>
       <div data-role="content">
         <p>hogeページを表示しています。</p>
         <a data-role="button" data-transition="fade" href="#home">戻る</a>
       </div>
      </div>
      <!-- /hoge ページ -->
  • data-roleという属性や、data-transitionという属性など、特殊な属性が用意されており、それを指定することで挙動が変わる仕組みです。
    • 見た目は、CSSに ui-btn-corner-all など定義されています。

上記のサンプル画像

「jQuery Mobileの使い方と挙動のまとめ その1」 の続きを読む

投稿者竹村 | パーマリンク

| append.gif

jQTouchの使い方とclass指定による挙動のまとめ (1728d)

更新日 2010-09-16

目次

概要

  • iPhoneアプリのような挙動が、ウェブブラウズで提供できるJavaScriptのライブラリです。
  • jQueryのプラグインとして動作します。
  • 公式: http://www.jqtouch.com/
    • 公式サイトの動画の最初の方で、SafariでURLにアクセスして「Add to Home Screen」をタップしたらホームに置かれるようですね。
      その際のアイコンなども変更可能です。

使い方

  • 基本、jQueryのプラグインなので、jQueryのライブラリと一緒に読み込んでインスタンスを生成すればOKです。
    <script src="js/jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
    <style type="text/css" media="screen">@import "js/jqtouch/jqtouch.css";</style>
    <style type="text/css" media="screen">@import "js/themes/jqt/theme.css";</style>
    <script type="text/javascript" charset="utf-8">
    var jQT = new $.jQTouch();
    </script>
  • jQTouchは複数の画面を 1つのHTMLに入れ込んでアンカーリンクで画面遷移します。
    • 下記の例は、home画面にてhogeへのボタンを用意し、hoge画面で前の画面に戻るように記述してあります。
      <!-- home ページ -->
      <div id="home">
      <div class="toolbar"><h1>ホーム</h1></div>
      <div class="info">現在ホームです。</div>
      <a class="whiteButton fade" href="#hoge">hogeへ</a>
      </div>
      <!-- /home ページ -->
      
      <!-- hoge ページ -->
      <div id="hoge">
      <div class="toolbar"><h1>hogeページ</h1></div>
      <div class="info">hogeページを表示しています。</div>
      <a class="whiteButton goback" href="#">戻る</a>
      </div>
      <!-- /hoge ページ -->
    • class="whiteButton fade" など特殊なclassがいくつか用意されており、それを指定することで挙動や見た目が変わる仕組みです。

上記のサンプル画像

「jQTouchの使い方とclass指定による挙動のまとめ」 の続きを読む

投稿者竹村 | パーマリンク

| append.gif

Ruby on Rails/jpmobileで機種に応じた画像を出力 (1820d)

更新日 2010-06-16
  • 前提
    • ユーザーのプロフィール画像とか、投稿画像を携帯サイト上でも見せたい
    • file_columnでアップロードさせた画像を管理
    • 携帯サイトはjpmobileを使用
  • 解決したい問題
    • 機種に応じて最適な横幅の画像を用意してそれを使うようにしたいが、jpmobileではそのような機能はないらしい
    • ユーザーが投稿する画像はgif, jpg, pngなどさまざまだが、3キャリアで使えるJPGに変換したい
    • exifやprofileなどの情報があると容量が増えるので、除去したい
  • http://underscore.jp/diary/20071207.html こちらにあるフォーマット変換ができるようにするpatchを当てる(ありがとうございます! m(_ _)m )
  • file_columnの画像変換部分をちょっと修正して、exifなどを除去
    • vendor/plugins/file_column/lib/magick_file_column.rb の110行目付近
             img.profile!("*", nil)  # この行を追加
           ensure
             img.write(dest_path) do
  • モデルクラスにてモバイル用画像をversionsに指定
     file_column {:image, 
       :permissions => 0666, 
       :magick => {:geometry => "800x800>", 
       :versions => {:pc_thumb => {:crop => "1:1", :size => "200x200!"},
                     :mobile_thumb => {:crop => "1:1", :size => "80x80!", :format => "JPG"},
                     :mobile_middle => {:crop => "1:1", :size => "150x150!", :format => "JPG"}, 
                     :mobile_large => {:crop => "1:1", :size => "320x320!", :format => "JPG"}}}
  • サムネイルが80px、拡大画像は、機種の横幅が240未満なら150px、240以上なら320pxを使用することに
  • 拡大画像を表示する画面のアクションメソッド(コントローラー内)にて、機種ごとにタイプを動的に判定
    @image_version = request.mobile.display.width.to_i > 240 ? :mobile_large : :mobile_middle
  • ビューにて、次のように使用
    = image_tag(url_for_image_column(user, "image", @image_version)
  • ファイルがアップロードされた後からversionsを追加しても(たとえばPC版を先にリリースしてて、モバイル版を後からリリースした場合とか)、url_for_image_columnは、画像がないなら作ってくれるので非常に楽!
  • ライブラリの作者の皆様、ありがとうございます。m(_ _)m

投稿者志田 | パーマリンク

| append.gif

Ruby on Rails/Rails3を試してみる (1830d)

更新日 2010-06-06

necoったーがAPIの変更についていけなくてサービスが停止してすでに数年たってしまったので、Rails3で作り直したい、と思い立って、やってみた。rails3の勉強がてらで。
以下、その備忘録

Rails3環境を新規に作る

Gemfileでgemを入れる

  • Gemfileを編集する。以下を追加。
    gem "haml"
    group :test do
      gem 'rspec-rails', ">= 2.0.0.beta.7"
      gem "factory_girl"
    end
    gem 'mysql'
  • gemをインストールする(参考: http://d.hatena.ne.jp/willnet/20100324/1269407621)
    bundle install vendor

DBの設定

  • config/database.yml を編集 これまでどおり)
  • DBを作る
    rake db:create
  • これでdevelopmentとtestの両方のDBができる

generatorを入れる

  • http://edgeguides.rubyonrails.org/generators.html
  • rails3-generatorを入れる
    git clone git://github.com/pjb3/rails3-generators.git lib/generators lib/generators/haml
  • rspecのgeneratorは、rspecのgemの方を使わないとエラーになるっぽいので、消す
    rm -r  lib/generators/rspec*
  • hamlは、haml_scaffold_generatorの方が充実しているっぽいので消して、そっちをいれる
    rm -r  lib/generators/haml*
    git clone git://github.com/psynix/rails3_haml_scaffold_generator.git lib/generators/haml
  • generatorが増えてることを確認
    rails generate
    ... いろいろ ...
    haml:controller
    haml:mailer
    haml:scaffold

トップページなどを作ってみる

  • 参考: http://edgeguides.rubyonrails.org/getting_started.html, http://edgeguides.rubyonrails.org/generators.html
  • config/application.rbに追記。これで、テンプレートエンジンはhaml、テストフレームワークはrspec、fixtureは、factory_girlになるらしい。
       config.generators do |g|
         g.template_engine :haml
         g.test_framework :rspec, :fixture => true, :views => false
         g.fixture_replacement :factory_girl, :dir => "spec/factories"
       end
  • generator で、トップページを作ってみる
    rails generate controller necos index
    • 生成されるビューのファイルや、テストケースファイルがhamlや、rspecになってた!
      create    app/views/necos/index.html.haml
      create    spec/controllers/necos_controller_spec.rb
  • モデルも作ってみる
    rails generate model neco
    • factory girlのファイルも作られた
      create        spec/factories/necos.rb
  • routesにも追記されてた
    get "necos/index"
  • 既存のページをhamlにして、トップページのビューと置き換えてみる
    mkdir public/stylesheets/sass/
    chmod ugo+w public/stylesheets/ public/stylesheets/sass
    bundle exec vendor/bin/html2haml top.html app/views/necos/index.haml
    bundle exec vendor/bin/css2sass scaffold.css public/sytlesheets/sass/scaffold.sass
  • うーん、html2hamlとかcss2sassはうまく変換できなかった。。。ここは部分的にerbにする
  • デフォルトのindex.htmlは削除
    rm public/index.html
  • 「/」のページとしてNecosController#indexを出してみる。config/routes.rbを編集
    root :to => "necos#index"

mod_passengerで見てみる

  • passengerでは、RailsEnvではなく、RackEnvになるらしい
    RackEnv development

トップページ以外も作ってみる

  • 参考: http://edgeguides.rubyonrails.org/routing.html
  • やはり、基本RESTfulURLの形式に沿って作りたい
  • routesに次のように記述
     resources :necos do  # CRUD系のURLが作成
       collection do      # それ以外のURL /necos/xxx のタイプ
         get :choice
         get :ranking
         get :help
       end
       member do          # それ以外のURL /necos/xxx/#id のタイプ
         get :image
       end
     end
  • 後は従来どおり、コントローラーに記述追加してビューファイルを用意すれば見られる

ActiveRecordでデータを取ってくる

named_scopeで書き換え

  • 参考: http://m.onkey.org/2010/1/22/active-record-query-interface
  • rails3では「scope」に
  • ハッシュではなく、メソッドチェーンで
  • app/model/neco.rb
     scope :ranking, lambda { |per_page, page|
       per_page = 50 unless per_page.present? && per_page > 0
       page     = 1  unless page.present?     && page > 0
    
       limit  = per_page   
       offset = (page - 1) * per_page
    
       where('user_id > ?', 0).
       order('friendship DESC').
       limit(limit).
       offset(offset)
     }
  • app/controllers/necos_controller.rb
     def index
       @necos = Neco.ranking(5, 1)
     end

tags: Ruby on Rails

投稿者志田 | パーマリンク

| append.gif

MySQL/同一ホストに複数のMySQLを起動する (1831d)

更新日 2010-06-05

1台のubuntu上で3306,3307と2つのMySQLインスタンスを起動する

  • /etc/init.d/mysql-3307 というのを用意してこれで、起動、停止させたい
  • /etc/mysql/my-3307.cnf というのを用意してこっちに3307の設定を書きたい
  • 3307ポート用datadirは、/var/lib/mysql-3307 としたい
  • mysqlを落とす
  • 3307用datadirを3306用からコピーして用意する
    sudo cp -a /var/lib/mysql /var/lib/mysql-3307
    /etc/init.d/mysql stop
  • /etc/init.d/mysql をコピーして /etc/init.d/mysql-3307を用意
  • 次の箇所を修正
    $ diff /etc/init.d/mysql /etc/init.d/mysql-3307
    25,26c25,26
    < CONF=/etc/mysql/my.cnf
    < MYADMIN="/usr/bin/mysqladmin --defaults-file=/etc/mysql/debian.cnf"
    ---
    > CONF=/etc/mysql/my-3307.cnf
    > MYADMIN="/usr/bin/mysqladmin --defaults-file=/etc/mysql/debian-3307.cnf"
    29c29
    < ERR_LOGGER="logger -p daemon.err -t /etc/init.d/mysql -i"
    ---
    > ERR_LOGGER="logger -p daemon.err -t /etc/init.d/mysql-3307 -i"
    54,56c54,56
    <   if [ ! -r /etc/mysql/my.cnf ]; then
    <     log_warning_msg "$0: WARNING: /etc/mysql/my.cnf cannot be read. See README.Debian.gz"
    <     echo                "WARNING: /etc/mysql/my.cnf cannot be read. See README.Debian.gz" | $ERR_LOGGER
    ---
    >   if [ ! -r /etc/mysql/my-3307.cnf ]; then
    >     log_warning_msg "$0: WARNING: /etc/mysql/my-3307.cnf cannot be read. See README.Debian.gz"
    >     echo                "WARNING: /etc/mysql/my-3307.cnf cannot be read. See README.Debian.gz" | $ERR_LOGGER
    60c60
    <   datadir=`mysqld_get_param datadir`
    ---
    >   datadir=/var/lib/mysql-3307
    78c78
    <     pidfile=`mysqld_get_param pid-file`
    ---
    >     pidfile=/var/run/mysqld/mysqld-3307.pid
    105c105
    <          /usr/bin/mysqld_safe > /dev/null 2>&1 &
    ---
    >          /usr/bin/mysqld_safe --defaults-file=${CONF} > /dev/null 2>&1 &
    115c115
    <              output=$(/etc/mysql/debian-start)
    ---
    >              output=$(/etc/mysql/debian-start-3307)
  • /etc/mysql/my.cnfをコピーして/etc/mysql/my-3307.cnfを作成
  • 次のように修正
    20,21c20,21
    < port         = 3306
    < socket               = /var/run/mysqld/mysqld.sock
    ---
    > port         = 3307
    > socket               = /var/run/mysqld/mysqld-3307.sock
    28c28,30
    < socket               = /var/run/mysqld/mysqld.sock
    ---
    > port         = 3307
    > socket               = /var/run/mysqld/mysqld-3307.sock
    > datadir              = /var/lib/mysql-3307
    43,45c45,47
    < pid-file     = /var/run/mysqld/mysqld.pid
    < socket               = /var/run/mysqld/mysqld.sock
    < port         = 3306
    ---
    > pid-file     = /var/run/mysqld/mysqld-3307.pid
    > socket               = /var/run/mysqld/mysqld-3307.sock
    > port         = 3307
    47c49
    < datadir              = /var/lib/mysql
    ---
    > datadir              = /var/lib/mysql-3307
  • /etc/mysql/debian.cnfをコピーして/etc/mysql/debian-3307.cnfを作成。次の箇所を修正
    6c6,7
    < socket   = /var/run/mysqld/mysqld.sock
    ---
    > port         = 3307
    > socket               = /var/run/mysqld/mysqld-3307.sock
    10c11,12
    < socket   = /var/run/mysqld/mysqld.sock
    ---
    > port         = 3307
    > socket               = /var/run/mysqld/mysqld-3307.sock
    11a14
    > datadir              = /var/lib/mysql-3307
  • /etc/mysql/debian-startをコピーして/etc/mysql/debian-start-3307 を作成。次の箇所を修正
    10,13c10,13
    < MYSQL="/usr/bin/mysql --defaults-file=/etc/mysql/debian.cnf"
    < MYADMIN="/usr/bin/mysqladmin --defaults-file=/etc/mysql/debian.cnf"
    < MYUPGRADE="/usr/bin/mysql_upgrade --defaults-extra-file=/etc/mysql/debian.cnf"
    < MYCHECK="/usr/bin/mysqlcheck --defaults-file=/etc/mysql/debian.cnf"
    ---
    > MYSQL="/usr/bin/mysql --defaults-file=/etc/mysql/debian-3307.cnf"
    > MYADMIN="/usr/bin/mysqladmin --defaults-file=/etc/mysql/debian-3307.cnf"
    > MYUPGRADE="/usr/bin/mysql_upgrade --defaults-extra-file=/etc/mysql/debian-3307.cnf"
    > MYCHECK="/usr/bin/mysqlcheck --defaults-file=/etc/mysql/debian-3307.cnf"
  • 3307を起動、停止してみる
    /etc/init.d/mysql-3307 start
    /etc/init.d/mysql-3307 stop
  • 3306も起動、停止してみる
    /etc/init.d/mysql start
    /etc/init.d/mysql stop

投稿者志田 | パーマリンク

| append.gif

GoogleAnalytics/イベントトラッキングでアフィリエイト別の約定額を知る方法 (1847d)

更新日 2010-05-20

概要

竹村です。

アフィリエイト対応のECサイトなどで約定した時に、ちょっと工夫するとGoogleAnalyticsで追えるようになる、という方法の紹介です。

あと、イベントトラッキングにて、初めて第4引数まで入れた状態で対応してみました。
その際、何度も反映されない現象が起きたのでその共有もします。

やりたかったこと

  • アフィリエイトサイトからECサイトにアクセスされたら、セッションにパラメータを保持しておく。
  • ECサイトの注文が完了したページにて、イベントトラッキングをセットしたい。
  • コンバージョンをイベントトラッキングで。
  • 第3引数のラベルには、アフィリエイト元のパラメータをセットする。
  • 第4引数を渡すことで、該当アフィリエイトサイトからいくら約定したかを知りたい。
    • なお、このECサイトの決済通貨はドルです。例: $1.25

「GoogleAnalytics/イベントトラッキングでアフィリエイト別の約定額を知る方法」 の続きを読む

投稿者竹村 | パーマリンク

| append.gif

MapServer/メモ (1872d)

更新日 2010-04-25

はまったことのメモ

  • 背景を透明にする
     IMAGETYPE      PNG24
     TRANSPARENT    ON
     OUTPUTFORMAT
       NAME png24
       DRIVER "GD/PNG"
       MIMETYPE "image/png"
       IMAGEMODE RGBA
       EXTENSION "png"
     END
  • google mapsと重ねる
     WEB
       METADATA
         WMS_SRS "EPSG:900913"
       END
     END
     PROJECTION
       "init=epsg:900913"
     END
  • projのepsgの末尾に追加する必要あり
    sudo echo '<900913> +proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs <>' >> /usr/local/share/proj/epsg

投稿者志田 | パーマリンク

| append.gif

OpenLayers/メモ (1872d)

更新日 2010-04-25

はまったことのメモ

  • Googleと自前WMSを重ねる
    var options = {
           projection: new OpenLayers.Projection("EPSG:900913"),
           units: "m",
           maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34)
    };
    map = new OpenLayers.Map('map', options );
    var google = new OpenLayers.Layer.Google(
           "Google",
            {type: G_NORMAL_MAP,
            sphericalMercator: true});
    map.addLayer(google);
    
    var mywms = new OpenLayers.Layer.WMS(
               "mywms",
               "<%= wms_path %>",
               {layers: 'mywms',
                format: 'image/png'},
               {isBaseLayer: false, visibility: true, opacity: 0.5});
    map.addLayer(mywms);
  • Map#zoomToExtent: 指定したBoundsがちょうどよく表示される位置、及びzoomlevelで表示する
  • Google地図と重ねる場合、Proj4js.transformで変換する必要あり
    var source = new Proj4js.Proj('EPSG:4326');
    var dest = new Proj4js.Proj('EPSG:900913');
    var p1 = new Proj4js.Point(<%= @lon1 %>, <%= @lat1 %>);
    var p2 = new Proj4js.Point(<%= @lon2 %>, <%= @lat2 %>);
    Proj4js.transform(source, dest, p1);
    Proj4js.transform(source, dest, p2);
    map.zoomToExtent(new OpenLayers.Bounds(p1.x, p1.y, p2.x, p2.y), false);
  • WMSで現在表示している箇所以外の部分までタイルをとりに行っておそい。bufferに0を指定
    var mywms = new OpenLayers.Layer.WMS(
           "gis_test",
           "<%= wms_path %>",
           {layers: 'gis_test',
            format: 'image/png'},
           {isBaseLayer: false, visibility: true, opacity: 0.5, buffer: 0});

投稿者志田 | パーマリンク

| append.gif

テスト/Paros (1884d)

更新日 2010-04-13

使ってていろいろ気をつけたいことのメモ
随時更新。

準備編

  • とりあえず時間がかかるので範囲はできるだけ絞ってこまめ目に実施すべし
  • SpiderはJSが解釈できないので当てにならない
  • 手動で全パラメータがサーバーに飛ぶようなケースを教えてあげる必要あり(自分でHTMLをパースしてパラメータを類推したりすることはないっぽい)
  • Analyze -> Scan Policy で、今回はSQL Injectionのみ、のようにチェックする内容を制限することで範囲を絞るべし
  • 今回はトップの検索だけ、とかのようにテスト対象のコンテンツも絞るべし
  • JavaScriptとか、画像とかCSSとかに対してもSQL Injectionなどをテストしてしまう。無駄なので、これらも「Purge(from DB)」で削除しておくべし
  • /?xxx=bbb のようなページはなぜかscan対象にしてくれない。なぜだろう。 /xxx?yyy=zzz のように一時的にでもURLを変更すべし
  • バグ修正、未開発などもなくしておく
  • パフォーマンスチューニングした後にやった方がいい

テスト中注意すること

  • 回線が切断されたりしないこと。切断されると、すべて完了しました、みたいに出て終了してしまう
  • 開発をとめておくこと。開発の影響でエラーがでるとscanの結果がおかしくなる
  • 同様にDBデータの再構築などもできない。
  • 一回テスト完了後、Scan Policyを変えたり、ファイルをOpenで読み直したり、別ファイルに保存しなおしたりして、再度テストを実施しても、何も起きない。Parosを再起動し、新しくセッションを作り直すところからやると、テストしてくれるみたい。意味不明。
  • フォームでファイルアップロードやると、遅くなる。上げるなら軽いファイルを上げるようにしたい。
  • メールが配信されるような場所をテストする場合、関係者にメールが飛びまくる場合があるので注意

投稿者志田 | パーマリンク

| append.gif

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2012-02-06 (月) 21:51:38 (1634d)

アークウェブのサービスやソリューションはこちら