watalucky.com

学生時代に地域若者チャレンジ大賞というイベントに出ました。
インターンシップの成果発表的なイベントで、自分が出たのは第一回目のもの。
今年は第3回になるそうです。（リンクはこちら）

先週末、その時に出会った友人がウチに泊まっていき、それなりに色々な話をしました。
最近、自分が5年後、10年後の自分についてよく考えていたこともあり、話の内容はいわゆる「将来の話」。
色々と思うところがあったので、ちょっとエントリとしてまとめておこうと思います。

Continue reading

商品にtagをつけて、検索可能になっているサイトとかで、たまに「どのタグが一番多く使われているか」をチェックしなきゃいけない時があります。
で、タグは「,」つなぎで一つのフィールドに登録されてたりしちゃったりして。
色々、方法はあるんだろうけど、以下は「どのタグが一番多く使われているか」をチェックする一例。（PHPで書いてます）

//まずはtable_nameテーブルからタグリストを取り出し。
mysql_query(‘SET NAMES utf8′);
$display = mysql_query(“SELECT taglist FROM table_name”);

while ($row = mysql_fetch_assoc($display)) {

　//「,」で分解して、配列につっこむ
　$tag_date = preg_split(“/[,]+/” ,$row['taglist']);

　foreach($tag_date as $row){
　　//INSERT
　　if(mb_strlen($row2) <= 10){
　　　$sql = “UPDATE nikon_tag
　　　SET num = num +1
　　　WHERE tag = ‘$row’”;
　　　mysql_query($sql);
　　}else{
　}
}
}

UPDATE～SET～を知らずに、やたら苦労しました。
テーブルを2つ用意して何とかしようとしてたんだから驚きです。

javascriptからPHPを呼び出すときのサンプルです。
基本的にjavascriptからPHPを直に実行はできないので、AJAXを使うみたいです。
友人のブログに秀逸なサンプルがあったので、転載すると

$.ajax({
　type: “POST”, //メソッドタイプ
　url: “sample.php”,//実行PHP指定
　cache: false,//キャッシュ（なくてもおｋ）
　data: “sampleVal=test”,//送るデータ
　success: function(html){//実行後の処理
　　samplefunc(html);
　}
});

のようにして実行できます。

ちなみに、複数のデータをPHPに送る時の方法を探すのに意外と時間を食ってしまったので、その方法も以下に書いておきます。

$.ajax({
type: ‘POST’,
url: ‘sample.php’,
cache: false,
//data: “imgurl=”+ img,
data:{
“data[]“:[sample1,sample2]
},
success: function(html){
alert(html);
}
});

要はチェックボックとかの値を送るときと同じように配列にして渡すってことですね。

青年海外協力隊員としてウガンダに行っている友人がいます。
平成20年度福島県国際貢献リーダー養成講座というものに参加していた時の同期。
同い年の同姓のメンバーは彼だけだったので、精神的にもかなり助けられた存在です。

で、彼がウガンダで頑張っている中、ボクは先週末、県北地球市民フェスティバル（名称うろ覚え）なるイベントに出展してきました。
その時に彼から送られてきたクラフトの販売も行なったのですが、パッケージングが上手いなぁと。

彼から送られてきたクラフトは基本的に現地の小学生の手作り品。
売り上げは全て現地の子の学費や給食費に当てられるっていう、まぁ、よくある感じの商品です。
ただ、一つ一つのパッケージが秀逸でした。

そのクラフトを作った子供の写真がパッケージとして使われ、どれを誰が作ったかが一目でわかるようになっていました。
（まぁ、本当にその子が作ったかどうかは分からないんだけどｗ）

こういう商品は特に、商品そのものの価値よりも、商品の背景にあるストーリーをいかに見せるかが大事。
「へ～、これを買ったら困っている人の助けになるんだ。商品もまぁ、なかなか良いしこれなら買おうかな」みたいな感覚で買っていく人が多いように思います。

で、僕らに出来るのは商品価値を高めることではなく、『困っている人の助けになるんだ』の部分を具体的に、わかりやすく伝える工夫をすること。

そういう意味で、彼から送られてきた商品のパッケージはとても良かったんです。
誰の助けになるかっていうのが一目でわかるし、写真にインパクトがあるから、とりあえず手に取る人が多い。そうすると接客もしやすいし、裏に書かれたちょっとだけ長めの文章も読んでもらえたりします。

興味をひき、背景を理解してもらい、誰の助けになるかが明確にイメージできる。
白黒印刷でお金をかけたパッケージではないけど、「モノを売る」ことをシッカリと考えられた素晴らしいパッケージでした。

…今何してんのかなぁ。久々に連絡とってみようかな。

ワイルドカードについてちゃんと理解していなかったため、MySQLの検索に手間取りました。
やりたかったのは、

2009-08-22 21:24:22

のようにデータが入っているdateフィールドから「時」と「分」で検索。
21時のデータを全部取得！とか、02分のデータ全部取得！とかです。

で、初めは分での検索を行ないました。どう書いたかっていうと、

WHERE `date` LIKE ‘%%:$minute:%%’

こんな感じ。見る人が見れば、すぐに「あ、こいつワイルドカードわかってねえわ」ってわかるソースです。
で、上記の方法だと上手く検索できたので、同様に「時」での検索も

WHERE `date` LIKE ‘$hour:%%:%%’

と行ないました。余裕じゃん！と思っていたんですが、これは上手くいかず。
どうしてなんだろう？ということで、ワイルドカードについてちょっと調べると理解が甘かったことに気づきました。

「検索する際にどんなパターンにもマッチする特殊文字⇒ワイルドカード」

であり、上の検索方法だと、「2009-08-22」のような日時部分の除外ができていないわけです。
しかも、ワイルドカードには2種類あって、

% 任意の長さ（ゼロを含む）の文字列
_ 任意の１文字

だそうです。ということで、今回やりたかった検索は、

WHERE `date` LIKE ‘%:$minute:%’ 　（分での検索）
WHERE `date` LIKE ‘%$hour:%:%’ 　（時での検索）

でOKだったという話でした。

とっても便利なtwitterAPI。
その中でもsearchAPIは多くの人が使っているAPIではないでしょうか。

で、searchAPIは便利なんですが、検索出来るtweetsは大体1週間くらい前までという制限があります。
twitter関連アプリを作るときに、これは微妙に不便なこともあります。

で、そういう時にtweetsをDBに突っ込むなんてことをすることも、あり得ないとは言い切れないわけですが、その時に一つ注意。

まず、searchAPIを使って一度に取れるtweetsは100件です。なので、

$query = urlencode(“キーワード”);

for( $i=100; $i>0 ; $i–){
$url = “http://search.twitter.com/search.atom?q=”.$query.”&locale=ja&rpp=100&page=”.$i;
なんちゃらら
}

というような感じでページャー部分をループで回す必要があります。
（pageの最大値は100です。）

その時に、１から１００に向かってループを回すと多重登録の可能性が出てきます。
（page=1のtweetsをDBに入れている間にもtweetsはどんどん貯まっていき、page=1のtweetsを全てDBに入れpage=2に移った時にはpage=1のいくつかがpage=2に押し出されている可能性が在るため）

重複したものを削除する機能を用意しても良いんですが、それが面倒なときは１００から１に向かってループを回しましょう。
（まぁ、これでも誤差は出ます。しっかりと全て取得したいなら、やっぱり重複処理を用意して下さい）

ちなみに、searchAPIにはsince_idというオペレータもあり、

http://search.twitter.com/search.atom?q=test&since_id=111111111111111

という風にすることによって、指定したid以降のtweetsだけ取得ということも可能です。
とまぁ、twittersearchAPIに関する覚書でした。

FLASH（SWFファイル）の上にHTML要素を重ねる方法を紹介します。
なお、SWFの挿入はDreamweaverから行ったという想定です。

まず、Dreamweaverのメニューから「挿入」＞「メディア」＞「Flash」を選び以下のようなソースを追加します。

<script type=”text/javascript”>

AC_FL_RunContent( ‘codebase’,'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0′,
‘width’,’600′,’height’,’600′,’title’,'●●●●●●’,'src’,'flash/flash’,'quality’,'high’,'pluginspage’,
‘http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash’,'movie’,'flash/flash’ ); //end AC code

</script><noscript><object classid=”clsid:●●●●●●●●●●●●●●” codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0″ width=”600″ height=”600″ title=”●●●●●●”>

<param name=”movie” value=”●●●●●●.swf” />

<param name=”quality” value=”high” />

<embed src=”●●●●●●.swf” quality=”high” pluginspage=”http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash” type=”application/x-shockwave-flash” width=”600″ height=”600″></embed>

</object>

</noscript>

これに以下の赤字部分を追加します。

<script type=”text/javascript”>

AC_FL_RunContent( ‘codebase’,'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0′,
‘width’,’600′,’height’,’600′,’title’,'●●●●●●’,'src’,'flash/flash’,'quality’,'high’,‘wmode’,'transparent’,’pluginspage’,
‘http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash’,'movie’,'flash/flash’ ); //end AC code

</script><noscript><object classid=”clsid:●●●●●●●●●●●●●●” codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0″ width=”600″ height=”600″ title=”●●●●●●”>

<param name=”movie” value=”●●●●●●.swf” />

<param name=”quality” value=”high” />

<param name=”wmode” value=”transparent”>

<embed src=”●●●●●●.swf” quality=”high” pluginspage=”http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash” type=”application/x-shockwave-flash” width=”600″ height=”600″></embed>

</object>

</noscript>

次に、このソース全体を<div id=”～～～”></div>で囲います。
このdivにはposition:relative;をかけておいてください。

さらに、このFLASHの上に重ねたいdiv要素を用意し（divじゃなくても基本は同じです）、position:absolute;をかけて、位置を調整しましょう。

最後に、FLASHを囲ったdivと上に重ねるdivの両方にz-indexを指定します。
上に重ねたいほうを大きい値となるように指定してくださいね。

とまぁ、以上で終了です。position周りは別にこの指定じゃなくても出来るんで、興味があったら色々いじってみてください。

まんまタイトルの通りですが、jQueryで縦横のセンタリングの方法を。
（普通、横はCSSでやっちゃうと思うので、実質縦方向の中央寄せのやり方の説明です）

function reposition() {
var top = ($(“body”).outerHeight() – 500) / 2;
var left = ($(“body”).outerWidth() – 1000) / 2;
$(“.common”).css(“top”,top+”px”).css(“left”,left+”px”);
}

縦×横＝500×1000の場合の例です。
ついでに言うと、commonの親要素にはposition:relative;、common自体にはposition:absolute;の指定がそれぞれ必要です。

使えるシーンは限られますが、横長の箱みたいなレイアウトなら十分使えるんじゃないかと思います。

ボクの考え方に多大なる影響を与えた山本敏晴という人がいます。
国境なき医師団で活躍された後、NPO法人「宇宙船地球号」の代表をしていらっしゃる国際協力師です。

先日、ペンタックス・フォーラムで行われていた氏の写真展「ルーマニアの記憶」に行ってきました。

Continue reading

さっき会社のインターンの子と話をしてたら、改めてアウトプットって大事だな～と思いました。
ということで、ちょっとjQueryの話でも。

Continue reading