Webサービスの最近のブログ記事

やりたかったことは以下の通り。

  1. あるプルダウンメニューで選択を変えると、 他のプルダウンメニューの選択状態などが変わる
  2. その変更内容は、DBから取得したい

<制約条件>
・Ajax(発音はエイジャックス)とかSmartyとか流行りのことは知らない

ということなのだが、
「よくわからないけどなんとかできるだろー」
とか適当に始めてみたところ、
かなりの罠があって、ひっかかりまくった。

解決するに当たり、先人の方々の解決メモに
大変お世話になったので、
私も罠の内容と解決策をメモしておく。


当初の方針は以下のようなものだった。

A. 「プルダウンメニューの選択を変えると処理が始まる」は
Javascriptを使う(selectタグのonChange())
B. Aの内容を元に、サーバサイド言語(ここではPHP)でDBとやりとりする
C. DBから取得した内容を元に、Javascriptで
他のプルダウンメニューの選択状態を変更する

しかし、問題が続発した。

問題1 AとBの連携:Javascript→PHPの処理呼び出し?

Aは、selectタグに仕込む。


<select id="id1" onChange="function()">

みたいな感じ。

このfunction()はJavascriptの外部ファイルとかで定義しておく。

Bは、PHPでDBと会話すれば良く、
これは調べればいくらでも出てくるので問題ない。

ところが、AとBの流れを考えると、

Aで呼び出されるJavascriptの関数から、
BのPHPでやる一連の処理を呼び出さなければならない

でもJavascriptからPHPを呼び出すのってどうやるの?

調べても、なんかできなさそうな感じだった。

<解決策>

form(HTML)→Javascript→PHP
はなんか無理そうだったので、
form(HTML)→PHP⇄Javascript
とした。

ベースの処理はPHPにする。
でないとDBとの会話ができない。
で、PHPにJavascriptのコードを吐かせて
Javascriptの処理を実行する、
みたいな感じ。

やり方はこちらを参照のこと。
PHPとJavaScriptの連携 - PHPプログラミング解説
PHP TIPS - 12. JavaScriptをPHPで記述しよう:ITpro

要は、下のようにしてPHPにJavascriptをお話ししてもらう。


print<<<EOF
<script type="text/javascript">
〜Javascriptでやりたいこと〜
</script>
EOF;

引数は、手抜きしてoptionのhiddenで渡す。

<トリガー>
onChangeだとJavascriptしか呼び出せないので、

<form method="POST" action="hogehoge.php">

みたいにしてphpファイルを呼び出すことにした。

ただこれだと、ボタンを押すと発動するのだが、
プルダウンメニューの変更では発動しない。
かつ、hogehoge.phpにページ遷移してしまうので、
元ページの他のプルダウンメニューを変更できなくなってしまう。

要は、プルダウンメニュー変更でhogehoge.phpを呼び出しつつも、
ページ遷移したくない。

調べたら、なんかできた。
値だけ送信してページは遷移させないためには? - CGI - 教えて!goo


<form target="fr1" action="hogehoge.php">
<select id="id1" onChange("this.form.submit()")>

として、その前あたりに


<iframe name="f1" width=0 height=0 style="visibility:hidden"></iframe>

みたいなフレームを仕込む、というやり方。
ページ遷移もなく、あたかもonChangeでPHPを呼び出している
ような感じになった。

これで第一ハードルクリア。

問題2 BとCの連携:PHP→Javascriptの処理呼び出し?

なんとかonChangeっぽくプルダウンメニュー変更でPHPの処理を発動し、
DBからデータを取り出すところまではできた。

しかし、その内容で他のプルダウンメニューの変更をする場合、
「PHPでDBから取得した内容をJavascriptに渡す」
ということが必要になる。

元のページ(HTML)で


<script type="text/javascript" src="hogehoge.js">

みたいな感じで呼び出しておいたのだけど、PHPの処理中に
「そんな関数知らね」
とかエラーが。もう意味わかんない。

<解決策>

PHPのファイル(hogehoge.php)の最初にも


print<<<EOF
<script type="text/javascript" src="hogehoge.js"></script>
EOF;

みたいにしてJavascriptの外部ファイルを読み込ませておく。
(むしろ呼び出し元のHTMLの方には不要)

これは、
「formで呼び出されたhogehoge.phpの世界」
で起きていることなので、
「元のHTMLの世界」
で呼び出しておいても関係ないのですな。
あらうっかり!

ページ遷移しない細工をしていたので、
気づくのに手間取ってしまった。

ともあれ、これでOK。

PHPの処理内で、自作のJavascriptの関数を呼び出せる。
呼び出し方は以下のような感じ。引数も渡せる。


print<<<EOF
<script type="text/javascript">
kansuu($var1);
</script>
EOF;

受けるJavascript側はこんな感じ。


function kansuu(var1){
〜やりたい処理〜
}

書くまでもないか?

問題3 他のプルダウンメニューの選択状態が変えられない

これで、だいたいやりたいところはできた。


  • onChangeっぽくプルダウンメニュー変更でPHPを呼び出し

  • PHPでDBからデータ取得

  • その内容をJavascriptの処理に渡す

最後の詰めで、Javascriptで他のプルダウンメニューの
選択状態を変えようと思ったのだけど、
なんかピクリともしない。なんで?

いつも通り


document.getElementById()

みたいに指定していると
「そんなの見つかりません」
とおっしゃる。

???

<解決策>

hogehoge.phpは、
ページ遷移を避けるために作ったフレーム内で動いている。
なので、同じフレーム内を指している


document.getElementById('id')

ではなく、


parent.document.getElementById('id')

としてやらないといけない。
うへ〜。罠だらけ。

ちなみに、プルダウンメニューの選択状態を変更をするには、


parent.document.getElementById('id').selectedIndex = the_index;

みたいにする。
私は、これ以外のやり方ではできませんでした。

the_indexは、がんばって取得する。

まとめ

  • PHPとJavascriptの連携はかなり強力
  • JavascriptからPHPを呼び出すのではなく、 PHPを走らせその中でJavascriptのコードを吐かせる
  • onChange()っぽく.phpファイルを呼び出すこともできる
  • PHP内でJavascriptの外部ファイルも読み込める

なんか結構なんでもできるな、というのが印象。
ただ、処理速度とかそういうのは考えていないので、
その辺りはえらい人になんとかしていただけるとうれしい。

ちなみに、この一連の制約はDBと会話するから発生していて、
例えばCSVから読み込むのでよければ、
こんなめんどくさいことは不要で、Javascriptだけでできた。

てか、Ajax(発音は以下略)使えばできるんでしょ?知らないけど。


お世話になったサイト
PHPとJavaScriptの連携 - PHPプログラミング解説
PHP TIPS - 12. JavaScriptをPHPで記述しよう:ITpro
PHP入門
フォームからの入力 | PHP Labo

皆さんの拍手が私のモチベーションです。
励ましのコメントも送れるよ!→

「携帯さーちあしすと」の裏側を公開 - APIを使って遊ぶ1で書いたように、APIいじりのwebサービスを作っていたりして遊んでみている。

しかし、編集したファイルをいちいちサーバにアップしてpermission変えたりするのがめんどくさいという、非常に重大で深刻な問題が持ち上がった。

ふと気付くと、MacOSXにはapacheが入っていて(Leopardではapache2)、システム環境設定の「共有」で「Web共有」をonにするだけでwebサーバが立ち上がる。 じゃあ、Macのapacheを動かせば、ファイル転送しなくて済むし、少し楽じゃない?

ということで、環境整備、というほどのものでもないが、簡単にやり方を書いておく。 今どきCGI?という話もあるが、気にしない。いいじゃない。Perlで。

apacheの設定

以下のサイトにわかりやすくまとめられているので、参照されたい。
Mint's log: LeopardでApacheを使う・お手軽入門編

かんたんにまとめると

  1. システム環境設定の「共有」で「Web共有」をonに
  2. /Library/WebServer/Documents/ にファイルを置く
  3. ブラウザで http://localhost/ にアクセス

以上。簡単でしょ?

次にCGIを使えるようにする。

/Library/WebServer/Documents/ に.htaccessというファイルを置いて、以下のように書く。

Options Includes ExecCGI
AddType text/html cgi
AddType cgi-script cgi
AddType cgi-script pl
AddHandler cgi-script-debug .cgiline
AddHandler server-parsed htm
AddHandler server-parsed html
order allow,deny
allow from all

.htaccessの作り方は、あまり丁寧に説明していないが、以下を参照するとわかるかもしれない。
管理者権限でのファイル編集 (うむらうす)

また、.htaccessの内容についてはミケネコさんのサイトを参照されたい。
ミケネコの htaccess リファレンス

これで「.cgi」または「.pl」という拡張子でCGIやSSIが使えるようになる。 SSIは正直使わないかもしらないが、なんかクセで。

エラーログの見方

書いたコードはエラーを生む運命にあり、エラーログはコードのどこが悪いのか教えてくれる貴重なご神託なので、以下のコマンドでありがたく拝む必要がある。

% tail /var/log/apache2/error_log

FinderでShift+Command+Gでディレクトリを表示して、エディターで見てもいいが、ログファイルの容量が大きくなってきた場合、上のコマンドの方がずっと速い。


これで、PerlでAPIを叩く下準備ができた。 (なぜか知らないが、「API」は「叩く」ものらしい。 硬くて表面が平らなんだろうか。API。)

ということで、次からは再び実際にAPIをいじくっていく。

皆さんの拍手が私のモチベーションです。
励ましのコメントも送れるよ!→

見た目も機能もショボいと大評判の携帯さーちあしすとだが、実際やってることも別に大したことないので、公開してみる。

「APIを使って遊ぶ」シリーズその1。今回はGoogle SugegstをAPIとして使う。

APIの利用方法についてはもっとえらい人がいっぱい書いているのでそちらを参考にしてもらう。 超簡潔に書くと、サーバにリクエストを投げるとレスポンスが返ってきて、それを整形して表示さす、みたいな流れ。 こちらが大変参考になるので参照されたい。
公開APIを利用したサンプルサイトを作っていくよ

言語はPerl,PHP,Java,Ruby,Pythonなど、データのやりとりもREST,JSONなどがあるわけだが、ここではPerl+REST決め打ちでやる。 他は知らない。

で、早速やったことを書く。

ファイル構成は以下のようなシンプル極まりないものとなっている。

  • keitai-assist.html
  • keitai-assist.cgi

htmlで検索語を投げて、cgiで色々処理すると。
で、htmlで実際に稼働している部分はこれだけ。



<form action="keitai-assist.cgi" method="get" accept-charset="UTF-8">
<input type="text" name="q" size="20" value="">
<input type="submit" value="検索"> ※複数語OK
</form>


少な。formタグで、検索語を「q」という名前で投げているだけ。

で、cgiの方はこんな。 貼ってみると長いな。



#!/usr/bin/perl

use lib ‘/virtual/ほげほげ/perl/lib/perl5/‘;
use warnings;
use CGI;
use WebService::Simple;
use Data::Dumper;
use WebService::Google::Suggest;
use Encode;

my $query = CGI->new()->Vars();
my $q = $query->{q};


# 日本語Googleを利用する
$WebService::Google::Suggest::CompleteURL
    = “http://www.google.com/complete/search?hl=ja&js=true&qu=”;

my $suggest = WebService::Google::Suggest->new();
my @suggestions = $suggest->complete(“$q”);



#---------------------------------
# HTML表示部
#---------------------------------

print <<“EOF”;
Content-Type: text/html;charset=UTF-8
Status: 200 OK
Content-Language: ja

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html lang=”ja”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8”>
<title>携帯さーちあしすと</title>
</head>
<body bgcolor=”#ffffff” TEXT=”#333333” LINK=”#3333cc”>

<!-- タイトル -->
<h2>携帯さーちあしすと</h2>
<!--/タイトル -->
クリックでGoogleでの検索に飛びます。
検索語 = “<a href=”http://www.google.co.jp/m?q=$q”>$q</a>”

EOF

#q=$q

# Google Suggest結果表示
if (@suggestions){
for my $suggestion (@suggestions) {

#$suggestion->{query}が内容、$suggestion->{results}が件数
print <<“EOF”;
<a href=”http://www.google.co.jp/m?q=$suggestion->{query}”> $suggestion->{query}</a>
EOF
}

}else{
print “No result.”
}
# Google Suggest



print <<“EOF”;


</body>
</html>


EOF

exit 0;



あんなシンプルなサイトなのに、陰ではこんなコードがうごめいていたのですね。 じゃ、そういうことで!

じゃなくて、最初からいこうか。



#!/usr/bin/perl

use lib ‘/virtual/ほげほげ/perl/lib/perl5/‘;
use warnings;
use CGI;
use WebService::Simple;
use Data::Dumper;
use WebService::Google::Suggest;
use Encode;

  1. perlのパスは適当にサーバに合わせる
  2. use lib...はCPANモジュールをユーザディレクトリにインストールして使いたいからコールしてる。これはXREAでの例なので、使っているサーバに合わせる
  3. WebService::Simple; これがAPIいじくるのに使いやすいCPANモジュール
    ゆーすけべー日記: WebService-Simple-0.09 の使い方
  4. Dumperはデバッグ用に、返ってきたXMLを展開表示するのに使ってる
  5. WebService::Google::Suggestは、Google SuggestをAPI化して使うためのモジュール
    はい。そうです。要はGoogle Suggest呼び出してるだけなんですね。
  6. Encodeは、utf-8フラグが付いている文字をprintしようとするとエラーが出るので、その辺の小細工をするために使う。詳細は以下参照。
    Perl 5.8.x Unicode関連


my $query = CGI->new()->Vars();
my $q = $query->{q};


# 日本語Googleを利用する
$WebService::Google::Suggest::CompleteURL
    = “http://www.google.com/complete/search?hl=ja&js=true&qu=”;

my $suggest = WebService::Google::Suggest->new();
my @suggestions = $suggest->complete(“$q”);

API周りのホントの作業部はこんだけ。この部分はWebService::Google::Suggestの使い方の話なので、以下を参照されたい。 →WebService::Google::Suggest - CPAN MEMO

あとはHTML表示部だが、最初の方はどうでもいいのでキモのところだけ。



# Google Suggest結果表示
if (@suggestions){
for my $suggestion (@suggestions) {

print <<“EOF”;
<a href=”http://www.google.co.jp/m?q=$suggestion->{query}”> $suggestion->{query}</a>
EOF
}

}else{
print “No result.”
}
# Google Suggest

$suggestion->{query}が内容、$suggestion->{results}が件数。 これらをGoogle先生への検索結果へのaタグに組み込んで一丁上がりと。

ああ長かった。
そしてニーズがあるかは例によって不明。

そんじゃ!

皆さんの拍手が私のモチベーションです。
励ましのコメントも送れるよ!→

遊びで「携帯さーちあしすと β」を公開したのだが、自分でいじったらあまりにもアレで、βというのもおこがましいので、αにした。

アレで完成形ではなく、これから色々いじっていく元という位置づけ。 内容についても記事を書こうかと思っている。

目下作業中。

皆さんの拍手が私のモチベーションです。
励ましのコメントも送れるよ!→

「携帯さーちあしすと β」を公開

maclalalaの藤シローさんのiPhoneプログラミングに触発されて、というわけではないのだが、最近APIの勉強とかを始めてみている。

というわけでいきなりだが、第一弾として携帯さーちあしすと βを公開してみる。 βが付いているのに特に意味はなく、βって言ってみたいだけ。

アクセスしてみると、恐ろしいほどのショボさ身悶えするほどのシンプルさが目を引く。 しかしその奥に複雑な仕組みが隠されているかというと、いない。 以下内容説明。

動機:
外出時に調べものをしたいことがあると携帯で検索することになる。 しかし記憶があいまいなので、うまく検索語が思い浮かばないことがある。 そもそも覚えてないから調べるのだし。 しかし、携帯だと何個もサイトを渡り歩く気にもならないので、2つ3つ見てダメなら容易にあきらめてしまいがち。 どうにかしたい。

解決法:
適当な言葉を放り込むと、関連する言葉を追加したりして、膨らませて返してくれるものがあると良いではないか。 ということで適当なAPIを見つけて、放り投げて返ってきた語にGoogle先生へのリンクを付けて出力するようにした。 やってることは、関連語検索ですな。

使い方:
http://tinyurl.com/k-assistにアクセスして、調べたい言葉を放り込むだけ。 結果が10個ぐらい出てくるので、好きなものをクリックするとGoogleで検索される。 携帯から見ることを想定しているが、別にPCから見ても爆発とかはしない。 ただGoogle検索へのリンクはモバイル版となっている。

使用例1:地名+キーワード
例えば「表参道 イタリアン」とかで検索してみると、以下のような答えが返ってくる。

表参道 イタリアン 人気
表参道 イタリアン たねや
表参道 イタリアン 地下
表参道 イタリアン 口コミ
表参道 イタリアンレストラン
表参道 イタリアン ランチ
表参道 イタリアン ピザ
表参道 イタリアン シャンブルドット ハナ
表参道 イタリアン ナプレ
表参道 イタリアン 個室

「たねや」とか「ナプレ」とかが有名であることがわかる。

使用例2:適当なキーワード
なんとなく「温泉」と投げてみる。

温泉へgo
温泉 日帰り
温泉卵
温泉旅行
温泉宿
温泉卵の作りかた
温泉 関東
温泉 ランキング
温泉へ行こう
温泉卵の作り方

ま、みんなこういうこと調べてるんだなと。

今後改良するか、これ以上説明するか、全て未定。反応次第。 とりあえず自分では使えそうなので、よしとしよう。

メールで「携帯さーちあしすと」のURLを送る

皆さんの拍手が私のモチベーションです。
励ましのコメントも送れるよ!→

ガッツゴリラ

この最も大事な位置にガッツポーズをするゴリラが表示されていることに何の意味があるのだろうか?答え:何もありません。こんなところまでお読みいただきありがとうございました。

Macオンラインウエア情報検索

Loading
Macオンラインウエア情報検索についてはこちらを参照ください。 →「Macオンラインウエア情報検索」をアップデートしました2012

このアーカイブについて

このページには、過去に書かれたブログ記事のうちWebサービスカテゴリに属しているものが含まれています。

前のカテゴリはtwitterです。

次のカテゴリはオススメです。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

広告

アーカイブ