あけましておめでとうございます。
本年もよろしくお願いいたします。
新年一発目のエントリは技術ネタ、というかTipsというか、あんまり使いどころがよく分からんというか。。。
javascriptは関数の引数に変数を与えなくても
JAVASCRIPT:
-
function hoge() {
-
var arg1 = arguments[0];
-
var arg2 = arguments[1];
-
-
return arg1+arg2;
-
}
-
-
var sum = hoge(1, 2);
なんて感じで引数を取ることが出来ちゃうんですけれども、これだと引数の順番が固定になっちゃったりで、いまいちフレキシブルではないので、もうちょっと柔軟に出来んもんか、と考えたのがオブジェクトを渡す方法。
JAVASCRIPT:
-
function hoge(args) {
-
var arg1 = args["arg1"];
-
var arg2 = args["arg2"];
-
-
return arg1 + arg2;
-
}
-
-
var sum = hoge({"arg1":1, "arg2":2});
キーと変数渡してやればどうでしょ？ということで。
で、何の役に立つねん？というとこなんですが、実行したい関数を変数で与えて、その引数が関数毎に微妙に違うけど、処理は共通、みたいな。ややこしや。
JAVASCRIPT:
-
var funcs = {
-
//var getMemberPhoto = function(args) { <- 文法ミス
-
getMemberPhoto : function(args) {
-
var params = {
-
member_id:args["member_id"]
-
};
-
...
-
},
-
//var getCategoryPhoto = function(args) { <- 文法ミス
-
getCategoryPhoto : function(args) {
-
var params = {
-
category_id:args["category_id"]
-
};
-
...
-
},
-
//var getPhotoByPeriod = function(args) { <- 文法ミス
-
getPhotoByPeriod : function(args) {
-
var params = {
-
start_date:args["start_date"],
-
end_date:args["end_date"]
-
};
-
....
-
}
-
};
-
-
function getPhotos() {
-
var func = $("input[name=select_func]:checked").val();
-
var params = {};
-
$("#" + func + " .params").each(function() {
-
params[$(this).attr("name")] = $(this).val();
-
});
-
-
if (typeof funcs[func] == "function") {
-
funcs[func](params);
-
}
-
}
（追記）JSの文法ミスってました（汗）
HTML:
-
<label><input type="radio" name="select_func" value="getMemberPhoto" />指定メンバーの画像取得
-
<label><input type="radio" name="select_func" value="getCategoryPhoto" />指定カテゴリの画像取得
</label>
-
<label><input type="radio" name="select_func" value="getPhotoByPeriod" />期間を指定して画像を取得
</label>
-
-
<div id="getMemberPhoto">
-
<select class="params" name="member_id">
-
-
...
-
</select>
-
</div>
-
-
<div id="getCategoryPhoto">
-
...
-
</div>
-
-
<div id="getPhotoByPeriod">
-
...
-
</div>
-
-
<input type="button" value="画像取得" onclick="getPhotos" />
と、こんな感じで使えるよね？ということで（引数、微妙にも違ってないし）。
要jQueryなコードで、且つ実際に組んだコードではないので（爆）←古い、動かない可能性大ですが何かの参考にでもなれば。
ってならんな、こんなん。どこで使うねん。
文字列の中からパラメータを抜き出したいとき、
JAVASCRIPT:
-
var hoge = "/member_id/29/".match(\/member_id\/(\d)\//);
-
if (hoge != -1) {
-
var member_id = Regexp.$1;
-
}
みたいな書き方が一般的だと思うんだけど、
JAVASCRIPT:
-
var member_id = "/member_id/29/".match(\/member_id\/(\d)\//)[1];
-
if (member_id != null) {
-
...
-
}
みたいな書き方も出来るよ、という覚え書き。
もち、複数の値を抽出したいときは前者の手法を使えば良し、ということで。
急に気温が高下するこの季節、椎間板ヘルニアはもとより頸椎ヘルニアも目を覚まし猛威を振るってくれるので2,3日死んでることがあるんですが、今年のは微妙に軽症が続いててシンドイなーと思ってたら、週末に来てくれました。
息してるだけで吐きそうな頭痛ｗ
これはいむら整体院に行くしか！ｗ（日曜日はお休みですよ）
閑話休題。
最初は非表示にしておいて、ボタンを押したときにGoogle Map表示させたい、という時なんかに起き勝ちなんだけど、地図の中心位置がおかしくて、半分がグレーで地図が表示されない、などの症状。
原因は地図を表示させる要素のサイズがまだ確定してない状態でGoogle Mapの処理が走ると、変なサイズで初期化されちゃう、ということらしい。
そんな時は要素のサイズが確定したタイミングで
案外知らないもので、1ピクセル四方の要素を作ってみたり画面外に要素を置いておいて、とかいろいろ試してみたんですが、結局は上記の1行で済んでしまったというオチなのでありますorz
ちなみに、地図の読み込みが終わったかどうかは
JAVASCRIPT:
-
var map = new GMap2(document.getElementById('map'));
-
// その他初期化処理
-
GEvent.addListener(map, "load", function() { ... });
ではイベントの登録が既に遅い（じゃいつ指定するのよ？と）、ということだそうで（というか使い方が違う？）、地図画像がすべて読み込まれたかどうかを
JAVASCRIPT:
-
GEvent.addListener(map, "tilesloaded", function() { ... });
で取ることができます。
が一応、"undocumented（ドキュメントに記載されてない）"情報のようなので、将来的な動作が保証されるものではない、ということをご承知おき下さいませ。
Google Map API 小ネタでした。
嫁と共に腹のサイズが成長し続けている今日この頃ですが、嫁の場合、産み落としてしまえば引っ込む一方、こちらの腹はなんかしないと引っ込まないわけで…
ということで先日から寝る前に腹筋を行ってたりはするんですが…
最近効果があると聞くのは、食べたものとかを記録するレコーディングダイエット。
食べたものを細かく書かないといけないので間食とかしなくなる、前の日に食べた量を確認できることで今日の食事量を調整できる、などなど実体験者の意見もあり、FM802のDJも実践中とか。
そこで燃えてくるのがレコーディングダイエットへの取り組みではなく、ソレ用のシステムを作ろうとしてしまう意識がメタボプログラマーたる所以か…orz
ということでお盆期間を使って作ってみました。その名も「痩せログ」。
サービスとして公開するには細かい調整などが必要なのでボチボチ進めるとして、とりあえず携帯からの投稿や流行のtwitterのBOTにつぶやくと記録できる機能など考えております。
そして、このサービスの怖いところは、登録した人同士には全て公開されてしまうという点。ダイエットをサボっちゃ居られないｗ
「激励」や「拍手」ボタンなんかも作らないとなぁ。
脱メタボを志すアナタ、乞うご期待ｗ
- ブログの記事に投稿した画像を抽出して←これはWordpressのテンプレート
- Progressionで読み込んで
- CoverFlowみたいな←これはPapervision3D
ポートフォリオ的な物を作る。
ということで出来たのがコレ。
http://www.studio-bloom.net/public/portforio/
1は昨日の記事で、
2は案外すんなり行けて、
3で躓いてた。
ローディングのプリローダーなんかの実装がまだだったり、ボタンがボタンとも言えない作りだったりするのは実験だからです。言い訳です。
画面遷移なんかの実装が超簡単に作れちゃうProgression、マジオヌヌメです（というか乗り遅れすぎ…orz）
連日の妙なバタバタでお疲れ＆返信の滞りがちな今日この頃です（関係者の皆様、申し訳ございません）。
そんな時にハマってしまった今回の一件。
「IE6でだけ、javascriptでsubmitさせてるのが効かない」
HTML:
-
<a href="javascript:void(0);" onclick="hoge();">fuga
</a>
で
JAVASCRIPT:
-
function hoge() {
-
...
-
document.form.submit();
-
}
が、FirefoxやChromeでは動くのに、IE6だと動かない罠。
答えは簡単で、
JAVASCRIPT:
-
function hoge() {
-
...
-
document.form.submit();
-
return false;
-
}
末尾でfalseを返しましょう、とそんだけ。
ということで、これは癖を付けておかなくちゃ駄目ですね～
週末は、親族の法事やパノラマ撮影、先輩のお見舞い。今日は今日とてママパパ教室に駆り出され、沐浴のお勉強。そこで妊婦体験とか言いながら疑似体験パーツを着けて辱められｳﾜｧｧ-----｡ﾟ(ﾟ´Д｀ﾟ)ﾟ｡-----ﾝ!!!!
帰ってから収穫したバジルを一杯使った晩飯を作って食ったらバタンQ（古い）。風呂から上がって復活して、一仕事終えたところであります。
家がバジル臭い。
CSSの制御というか、Classの制御というか。
CSSを直接触っちゃうより、Classを用意しておいて付加したり外したりのほうが何かと管理もしやすいでしょ？
JAVASCRIPT:
-
(function($) {
-
$(document).ready(function() {
-
$('#target tr:odd').addClass('odd');
-
});
-
})(jQuery);
targetというIDを持つテーブルの奇数行trにoddというクラスを追加してあげてます。
行数の多いテーブルだと、いちいち奇数行にクラスを指定してやるのも面倒だし、行の入れ替えが発生した日にゃぁ、アンタ。リアルで「キーッ！！！」って叫んじゃうってモンですよ。
Javascriptの使用がOKだったら、とてもとても助かるね。
でも例えば、テーブルが2つ続いてて、それらにも奇数行毎にClassを付加したい場合、単純に考えて…
JAVASCRIPT:
-
$('table tr:odd').addClass('odd');
としてしまうんだけど、1つめのテーブルが奇数行（例として5）で終わってしまった場合、2つめのテーブルのtrは「リセットされて1から」ではなく「5の続きの6から」となってしまい、なぜか偶数行スタート（本来は1だから奇数）になってしまい、具合が悪いことになっちゃうんですね～困る。
（解決法、探り中。末尾に空の<tr></tr>入れちゃうのでもOK。だけど文法的にはNG）
さらにGoogle Chromeで発見した不具合。
複数の要素を指定する時、コンマ（,）でセレクタを区切れば同時に選択できるのですが、
JAVASCRIPT:
-
$('table tr:odd, ul li:odd').addClass('odd');
IEやFirefoxでは意図したとおりの動きになってるんですが、Chromeだけは最初の要素しか識別してくれない。単純な解決方法は、
JAVASCRIPT:
-
$('table tr:odd').addClass('odd');
-
$('ul li:odd').addClass('odd');
2行に分割…orz
うーむ、ちょっと切ないですね…
ちょっと検証が甘いですが、便利なjQueryもちょっとした落とし穴が用意されていますよ…というお話しでした。それでも便利すぎて手から離せないｊQueryなのです。罪なヤツ。
二宮さん（design studio PENCIL）から「jQueryネタで1時間喋れ」とお達しが来てしまったので、京都で立ち上がったグループ「Web★Choco@KYOTO」でデザイナーさん向けのjQuery導入をテーマに喋ってきました。
資料作りの最中に紆余曲折あり、当初予定していた手法でのプレゼン資料ではなく、パワーポイントで作り直すハメに。これが当日の午前3時。そこからコピペ＆原稿追加＆アニメーションなどの調整をして、5時半に就寝。早めに起きて再調整。
早めに出て、嫁と外で飯を食ってから行こうと思ったけど結局その余裕もなく、一緒に家を出たものの1本早い電車に乗って、京都は烏丸にある会場「ちおん舎」に向かいました。
天然方向音痴の自分は、当然の如く駅を出て逆に進んでしまい、なかなかの距離を歩いて目的地へ到着。京都の歴史ある建物でのプレゼンです。とても雰囲気が良いです。
しばらく皆さんが集まるのを待って会が始まりました。
スピーカー1人目は二宮さんで、タイポグラフィーの話。
が、資料の最終確認と調整をしてたので、あまり聞いてません（爆）
1つめのレクチャー終了後、自己紹介タイムと休憩時間。当初喋らないはずだった自己紹介も急遽喋ることになり。。。あまり何を喋ったのか覚えてません。休憩時間も手直しやら眠いやら…
そうこうしてたら自分が喋る番になって。
今回は、「過去にトライしたけど挫折した」、「これからちょっと始めてみたい」、というデザイナーさんに向けた内容を心がけてたので、ちょっと自分としては使用するのが微妙な表現方法なども織り交ぜてしまいながらのプレゼンでした（本職のプログラマーさんからすれば反感買うかもしれない的な）。
順を追って見てもらって、考え方や雰囲気を掴んでもらえたらイイかな？という期待を込めて、これまた予定していなかったライブコーディング（実際にその場でコードを書きながら説明する）をやることにしました（決めたのは当日の午前5時ｗ）。
緊張していないように見えて実は相当しているので、ライブコーディングで単純なミスにすぐに気付くことが出来ず大焦りしてしまった場面が。しかし、スピーカーから「あれが悪いんじゃない？」とか声を上げて下さったので、「これはいい（ニヤリ）」と、“みんなでバグを探して考えてみよう“的な流れに無理矢理持ち込んでみたところ、結構な盛り上がりになってくれてシメシメ。
思わぬ所で、雨降って地固まるというか雨のあとは上天気というか。
持ち時間も数分オーバーで収まって、なかなか良いプレゼンだったのではないかな？と、終わった後に声を掛けて下さったリスナーの方達の反応からも伺うことができた気がします。
んで、質問タイムの時に出た「初心者にお勧めの書籍も紹介すべきでは？」という事だったので今日、本屋に行って立ち読んできました。あまり冊数は無かったのですが、その中でも自分的に良書だな、と思ったのはMYCOM BOOKSの「実践!Ajaxフレームワーク jQuery」です。“Ajax“と入っているので、初心者向けとは異なるのかな？と思ったんですけど、意外とそうでもなく今回のプレゼント併せて読むとイイ感じなのでは無いかな？という印象でした。
興味のある方は読んでみて下さいね。
当日使用した資料は、Web★Choco@KYOTOのサイトにあるのですが、登録とかしてなくても見られるのかな？
興味のある方はご覧下さい。
まー、そんなに喋れるネタを持ち合わせている訳では無いのですが、またこういう機会を与えていただければ喋ってみたいと思います。
たぶんVol.2とかもやるのだと思うので、興味のある方はmixiのコミュニティーなど参加してみては如何でしょうか？
Mac miniを買いに梅田まで出たものの、売る気の全くない売り場構成＆定価販売で買うのが負けな気がしたので買わずに帰ってきました。交通費を考えると、どんどん通販との差が無くなってきてます…orz
ということで今日は技術ネタ、と言えないくらい簡単に使えるようになってしまったGoogle MapsのVer.3の簡単すぎる導入のお話しを。
これまでGoogle Mapは、使用するサイトのURLに対する一意のコードをGoogleから取得して使用してました。なのでローカル開発環境、テスト環境、本番環境とコードを取得しないといけない場合もあって、結構面倒な場面も。。。
Ver.3からはこのコードが廃止されたので、そんなこたぁ気にせずに使えるようになったのです！（ひゅーひゅー！太っ腹～）
さらに、これまで行われてきた細かいバージョンアップで煩雑化していた箇所が大幅にブラッシュアップされて結構素直に使えるような印象です（そこまで深く触ってないのですが…）。
ということで今回は簡単に地図を表示するまでを見てみたいと思います。
続きを読む »
Zend_Dbでは、テーブル間のリレーションを定義しておけば、親テーブルが削除された時に従属テーブルの対象も一緒に削除してくれる連鎖操作の削除機能があります。
親テーブル（Categories）に従属テーブル（Items）情報
PHP:
-
protected
$_dependentTables =
array('Items');
従属テーブルに親テーブル情報
PHP:
-
protected
$_referenceMap =
array(
-
-
'columns' => 'category_id',
-
'refTableClass' => 'Categories',
-
'refColumns' => 'id',
-
'onDelete' => self::CASCADE
-
);
と設定しておけば、
PHP:
-
$categories = new Categories();
-
$categories->find($id)->current()->delete();
とした時に、従属テーブルであるItemsのcategory_idが同一の物は削除される。
駄菓子菓子！
Itemsの従属テーブルとしてAttributesがあったとする。
（Categories→Items→Attributes）
となると、Categoriesを削除した時Itemsが削除されるのだから、当然Itemsの従属テーブルであるAttributesも削除されてしかるべき！と思う訳なんだけど、ところがどっこい、そうは行かない。
削除されるのは直下にあるItemsのみで、それ以降にあるAttributesは削除されない…
ちなみに、Itemsを削除するとAttributesは削除されるので、直下しか削除されないのは明白。。。
で、ググってみたところ一応出てきました解決策。
Zend_Db_Table_Abstractの_cascadeDelete()にある
PHP:
-
$rowsAffected += $this->delete($where);
を
PHP:
-
$toDelete = $this->fetchAll($where);
-
foreach($toDelete as $row) {
-
$rowsAffected += $row->delete();
-
}
でOKじゃね？との事。とりあえず検証してみたところ、意図したとおり2階層目以降も削除されてるようです。元のフレームワークに手を入れたくない場合は、_cascadeDelete()をオーバーライドすればOK。
参照先
あ、ちなみに_referenceMapの'refColumns'にはプライマリーキーを指定しないと駄目です。←ここでハマった…orz
なんだかバージョンアップごとに色々機能が増えてくれるのはいいんだけど…「Zend_Loaderは2.0で無くすぜ」とかZend_Applicationとか…ラーニングコストは高いよなぁ…
でもZendX_JQueryは興味津々なので、また勉強しなくっちゃ。
