wpe no log

Chrome DeveloperToolsのコンソールでlayerX, layerYについてのアラートを解消する方法。

tsuyoshi Higuchi — Sat, 18 Feb 2012 06:12:13 +0000

Javascript案件ばかりでブログどころではなかったのですが、色々あれこれたまっているので隙間をみつけて書きます。

最近、Chromeをアップグレードしたせいか、Googleからの使者がなにか発信しているのかChromeのDevloper Toolsのコンソールに次のようなエラー（アラート）がでています。

event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future.

英語はからっきしの自分ですが、『event.layerXとlayerYはWebkitでは既に非標準なので将来完全に使えなくなるぜ』とのこと。

検証＆色々と検索した結果、jQuery1.6.4以下+Chrome+Click、ドラッグなどのマウス操作イベント発生時に起こっているようです。しかしこれはエラーではなくアラートレベルなのでスクリプト自体に影響はなくとくに放置していても問題ないのですが、このままにしておくのは気持ちが悪いという場合にとる解決方法はjQuery1.7以上にすることが一番適当なようです。実際に1.7にしたところ出なくなりました。

Androidブラウザでrotateした際にDOM要素をzoomしないでピッタリにするjQuery Pluginをつくった。

tsuyoshi Higuchi — Sat, 18 Feb 2012 05:41:47 +0000

GitHub for Macのテストついでに、Android ブラウザでrotateしたときに指定要素をzoomしないでピッタリするjQuery pluginをつくりました。
要はresizeイベントでデバイスの横サイズ拾うって要素のwidthにあててやるだけですが、ついでなのでcallback付きにしました。ちなみに今はAndroidしか今は適応されません。要望・必要性を感じたらiOS対応します。というかiPhoneユーザーではないのでそこら辺細かいところは知らないっと。

jquery.droidRotateResize.1.0

使い方は至って簡単。DOM要素（$(‘.hoge’) or $(‘#hoge’) or $(‘DOM Object’)）を指定してdroidRotateResize()をアサインしてあげるだけです。※Androidデバイスのみでしか勿論動作しません。iOSはラップしている親要素にwidth:100%を指定していれば画面ピッタリに要素ものびます。

/* No Option */
$('.hoge').droidRotateResize();

OPTION付き

オプション用の連想配列（オブジェクト）を指定することで傾き後にcallbackイベント{ callback: function(){} }を、横幅にネガティブ値(px)を指定して{ negativewidth: 数値(px値) }右端から横幅をマイナスにすることもできます。

/* No Option */
$('.hoge').droidRotateResize({
	negativewidth : 20, //20pxマイナスされた横幅をセット
	callback : function(){
		alert('rotate!');
	}
});

GitHub：jquery.droidRotateResize.1.0.js

PPP6@INDIGO.ROPPONGI.TOKYO.JP

tsuyoshi Higuchi — Fri, 26 Aug 2011 02:46:27 +0000

PPP6回目です。はやいもので。
今回もフライヤー的なものをつくりました。今回はDJ無惨の描いた気の違ったようなイラストがあまりにもあまりにだったので使いました。お近く、お暇な方は是非！

PAIPANPANDEMIC 6 @ INDIGO.ROPPONGI.TOKYO.JP

2011.09.10.Sat
23:00 START 05:00 END
TECHNO/ELECTRO/DRUM’N BASS
DOOR.1500YEN(+1DRINK FREE)

今回で6目になるPAIPANPANDEMIC。PPP5以降、メンバーも青山fai、秋葉原Mogra、幡ヶ谷HEAVYSICK、恵比寿Baticaなどでそれぞれプレイをしてきました。今回はさらにゲストを迎えより一層深いグルーヴを奏でます。
詳しくは、@PAIPANPANDEMIC かFacebook、もしくは僕にリプライでお気軽にお問い合わせください。

尚、当日先着順でDJ宇宙MAMEのDrum’n Bass MixCDをプレゼント。

大きな地図で見る

INDIGO

大江戸線／日比谷線六本木駅。
大江戸線5番出口を出て六本木交差点を東京タワー方面へ少し行くとドンキホーテが見えてくるのでその一つ手前を進行方向左に。

web site

INDIGOは大箱ではないので逆にその利を活かした音楽が楽しめる良い場所です。お楽しみに。

ついでなのでスマートフォン向けの壁紙をつくりました。PPPファンは是非:-)

iPhone4
Android
※ Xperia 960*854px
Android
※ Galaxy S / Desire 960*800px

あと、僕はこんな具合のミックスで回します。
※下はYouTubeのシークバーをいじくるYouTubeVをしつつ、DJもしたUstreamの映像です。

新調しました。

tsuyoshi Higuchi — Tue, 12 Jul 2011 06:32:16 +0000

名刺を新調しました。webデザインだけでなくこういう名刺などのSPツールデザインも地味に受け付けています。興味のある方はメールにてご連絡ください:-)

それにともなって色々ちゃんとはじめました。

Facebook: http://facebook.com/neu.wpe
Google+: https://plus.google.com/115162312879650305827/

blogやサイトもつくりなおす予定です。あくまで予定。

MovableTypeでmt-comments.cgiが「不正な要求」を返す原因

tsuyoshi Higuchi — Tue, 21 Jun 2011 09:13:27 +0000

このブログはWordpressです。しかし僕は仕事ではMovableTypeのほうをよく使います。
もう使い始めて5年は経ち、ここ数年ではすっかりWordpressに押されている感が否めませんが…5.1のリリースで少しづつ管理画面も使い勝手が良くなってきたり、プロジェクト規模やデータの使い方などで選んで行けば良いのでどちらも良いCMSだと思います。ま、MTとWpは使いようですね。

そんなわけで世の中にWordpressユーザーが多いのは解った上での今回は、MovableType5以降（だと思います。4以前は大丈夫ような記憶があるので）であるモノがない状態でパブリッシュしたものにコメントするとmt-comments.cgiが「エラー：不正な要求」を返す件についての対処法です。

原因は、mt.jsとform要素でのonSubmit処理

見出しの通りこの二つに原因があります。一つはmt.js、もう一つはその中のメソッドを呼ぶonClickアトリビュート。

var mtRequestSubmitted = false;
function mtCommentOnSubmit(f) {

    if (!mtRequestSubmitted) {
        mtRequestSubmitted = true;

        if (f.armor)
            f.armor.value = '<$mt:BlogSitePath encode_sha1="1"$>';
        if (f.bakecookie && f.bakecookie.checked)
            mtSaveUser(f);

        // disable submit buttons
        if (f.preview_button) f.preview_button.disabled = true;
        if (f.post) f.post.disabled = true;

        var u = mtGetUser();
        if ( !is_preview && ( u && u.is_authenticated ) ) {
            // validate session; then submit
            mtFetchedUser = false;
            mtFetchUser('mtCommentSessionVerify');
            return false;
        }
        return true;
    }
    return false;
}

mt.jsにあるこの部分がコメントをsubmitする際に呼ばれるメソッドで、cookieやユーザー認証などをみてプレビューボタンや送信ボタンの所作を決めているようです。

問題は、7,8行目にある以下の部分。

if (f.armor) f.armor.value = '<$mt:BlogSitePath encode_sha1="1"$>';

デフォルトのcommentのform要素にあるarmorのvalueには「1」がセットしてあり、mt:BlogSitePathがない状態です。おそらくスパム防止対策なのかと。
普通にコメント欄を使う分にはmt.jsをアサインすれば自らコメントをAjaxなどでカスタマイズしたい場合はmt.jsをおかず自分でarmorにblogSitePathをセットしてあげれば良いようです。
mt.jsにアウトしなくてもhtml内のどこかにrel要素かdata要素などでarmorのBlogSitePathをセットしてjQueryなどでattr()で取得して送信時にセットしてあげればよいと思います。

また、デフォルトのコメント用フォームを使う際は以下form要素のonclickアトリビュートをそのままにして、かつmt.jsを必ずテンプレートから消さないことが重要なようです。

blogとして使うレベルなら消さないかもですが、結構サイトの細部までコントロールできるように使うのがMTなので、小慣れた人ほど要注意。

jQueryの$.when()を使って複数のTwitterのTLをひろってみた。

tsuyoshi Higuchi — Tue, 14 Jun 2011 10:18:37 +0000

jQuery1.5からある「$.when」。Deferreds Object（遅延オブジェクト）というものだそうです。
どういう内容が詳しく説明できない非力な自分を呪いますが、今までもあったcallback関数のタイミングがオブジェクトとして連携ができるようになったものなのかなというイメージです。

TwitterAPIに$.ajaxで非同期通信を行い取得するのはJSONPを使えば問題なくできます。今回は、サイト内でTwitterアカウントを複数同時に扱う場合（= TwitterAPIに同時に複数の接続を行う場合）にこの遅延オブジェクトが使えるのでは？と思い仕事で使ってみました。

以下のスクリプトはとりあえず出力だけするものです。実際の案件ではjQueryプラグインとして機能できるようにつくっているので後にアップする予定です。


	var multipleTimeline = ( function(){
		var ob = {
			url			: 'http://twitter.com/statuses/user_timeline/',
			type		: 'json',
			acounts		: ['neuwpe','dorugeeee'],	// screen_name
		}
		var $g = []

		$.each ( ob['acounts'], function(i){
			$g[i] = $.ajax({
				url				: ob['url']+ob['acounts'][i]+'.'+ob['type'],
				type			: 'get',
				dataType		: 'jsonp'
			});
		});

		if( typeof ob['acounts'] == 'object' && ob['acounts'].length > 0 )
		{
			$.when( $g ).done( function( args )
			{
				$.each( args, function(n)
				{
					args[n].done( function(e){
						for ( var i = 0; i< e.length; i++ ) console.log( e[i].user.screen_name+' > '+e[i].text ) //結果を出力
					})
				});
			});
		}
	})()

※サンプルでは僕 @neuwpeと僕の作ったドルゲbot @dorugeeeeのTLを拾っています。

読み込ませたいTLのアカウント（screen name）を連想配列「ob」の「acounts」に配列としてカンマ区切りで入れていきます。あんまり多いとどうなるかわかりませんが、10アカウントくらいは余裕だと思います。
出力はコメントアウトで「結果を出力」の一行で行っています。ここを任意のdiv要素などにアペンドしてあげればとりあえずは出力可能です。

whenメソッドは$.ajaxや$.get,$.postなどのAjaxなどのイベントものをアサインします。このスクリプトでは配列で処理していますが通常は$.when()の引数にカンマ区切りで入れて行けば良いみたいです。固定処理の場合はそれで。
このwhenで処理が全て終わるまでを監視します。jQueryでは遅延オブジェクトとして.done()、.then()などのチェーンメソッドを追加できます。whenの処理が完了した（done）で$.when().done()としてdoneに終了後の処理を行います。

これだけでは全ての処理が終わっただけなので、done()で返ってくるオブジェクトにさらにdone()を加え、それぞれの通信オブジェクトで返ってきた値を参照します。
TwitterAPIの値がどんなものが返ってきているかは「e[i].user…」のところを「e[i]」だけにしてみてください。これでコンソールに返ってきているオブジェクトや値が参照できます。

というわけでやってみると簡単ですが、仕組みを理解するのに少し手間取りました。ただ、こういう使い方だと良さげです。
詳しい解説はこちらなどのサイトへ

CoWorking、JellyJellyCafeとルノアール

tsuyoshi Higuchi — Fri, 10 Jun 2011 05:48:53 +0000

昨日、六本木にあるJellyJellyCafeに行って来た。今、海外で注目されているの「コワーキングスペース」を取り入れたもので、電源やWiFiが解放されてドリンクサービスなど諸々ある場所。
このカフェ、夜はクラブ（接待のほうじゃなく音楽がなるほうのアレ）で僕も何度かDJでお世話になっている場所。その繋がりもあって行ってきました。

いつもDJしている場所のイメージが強いので、そこで仕事なんて落ち着いてできるのだろうか？という疑問はあったのですが、逆に集中できて良かったです。さらに、来てる人同士の名刺交換やビジネスなお話などもあり、起業家や営業、新しい人材を確保したい人、制作系な人などにも有効だと感じました。
ちなみに閉店が19時で14時くらいから行って閉店までいたので、その時来ていた方数名と飲みにいきました。さすが六本木。

これに対して思い出すのが銀座ルノアール。
ルノアールも店の半分の席は電源解放してるし、そしてlivedoorなどのWiFiもほぼ全店で利用できる。コーヒーもトーストだって注文できる。現にフリーランスだけでなく昼寝する営業職や、打ち合わせついでに息抜き兼ねて利用する感じの制作系の人、はたまた政権批判する70overの老人会、Apple製品を使い倒す老人カップル、中野限定ですがカメラマン（下がカメラ屋だから）まで多く使われている。

その人たち同士は今はバラバラの分子だけど、もしも今後このコワーキングスペースが全日本的に流行ればルノアールも乗り出して、その分子たちが結合する日がくるかもしれない。
いや、逆にそこから発展するビジネスや人脈を考えるとコワーキングスタイルとマッチしたSNSなんてのもアリなのかもしれない。ルノアールはこういうwebサービスには及び腰っぽいので勝手にこっちでつくってやれば面白いかも。それで怒られたら高円寺の本社ビル前で土下座平謝りして、夜近くにあるCyberpunk videogame bar RAID=GIGで涙を拭いてしっぽりファミコン談義すればいい。

というかルノアールでラップトップPC開いて仕事していると、横から同じweb関係の人の話が聞こえてくる。そんなとき「あー、それ僕できるからやりましょか？」と何度声をかけたくなったか。需要を感じざる得ないが他の人はどうなのだろう。

その他のコワーキングスポット

次のサイトで2011年6月現在のコワーキングスポットが紹介されています。経堂のパクチーハウスもやってるみたいですね。以前経堂に住んでいたので今も住んでいたら活用したかも。

参考記事

世界で拡がる「コワーキング･スペース」というムーブメント、新しい働き方のスタイル。 | 現代ビジネス

大きな地図で見る

Jelly Jelly Cafe

web site

PPP5@INDIGO.ROPPONGI.TOKYO.JP

tsuyoshi Higuchi — Wed, 01 Jun 2011 09:29:43 +0000

前回からさほど時間もたっていない上にギリギリという告知。出ます。

PAIPANPANDEMIC 5 @ INDIGO.ROPPONGI.TOKYO.JP

2011.06.04.Sat
23:00 START 05:00 END
TECHNO/ELECTRO/DRUM’N BASS
DOOR.1500YEN(+1DRINK FREE)

今回で5回目になるPAIPANPANDEMIC。頑ななまでに無駄なイベント的要素を取り除いたBPM120以上のクラブミュージックパーティ。
詳しくは、@PAIPANPANDEMIC か僕にリプライでお気軽にお問い合わせください。少しお安くできます

大きな地図で見る

INDIGO

web site

INDIGOは大箱ではないので逆にその利を活かした音楽が楽しめる良い場所です。今回から更にサウンド面も強力になるとか…。お楽しみに。

PPP4@CLUB HEAVY SICK.HATAGAYA.TOKYO.JP

tsuyoshi Higuchi — Wed, 27 Apr 2011 06:15:53 +0000

また出る事になりました。PAIPANPANDEMICというレーベルのクラブイベントにDJで出ます。もう4回もやってて年甲斐もなく回します。
僕はテクノを中心にエレクトロやハードハウスなどをかける予定です。最近自分の中でアシッドハウスのリバイバル気分なので303の音のあるようなものをかけるかもしれません。

PAIPANPANDEMIC 4 @ CLUB HEAVYSICK.HATAGAYA.TOKYO.JP

2011.05.06.Fri
23:00 START 05:00 END
TECHNO/ELECTRO/DRUM’N BASS/DUBSTEP/HOUSE
DOOR.2000YEN(+1DRINK FREE)

今回で4回目になるPAIPANPANDEMIC。頑ななまでに無駄なイベント的要素を取り除いたBPM120以上のクラブミュージックパーティ。
ゴールデンな狭間でただグルーヴに任せたい人だけ来て下さい。詳しくは、@PAIPANPANDEMIC か僕にリプライでお気軽にお問い合わせください。少しお安くできます

大きな地図で見る

CLUB HEAVY SICK

最寄りは京王新線幡ヶ谷駅。
南口を出て西原商店街を代々木上原方面へ。間違っても中野のHEAVY SICK ZEROにいかないように…

web site

あとこのイベントはいつも急に決まるので…フライヤーを刷る時間がなく、基本はwebやTwitterでのみ告知という客を呼びたいのか呼びたくないのか今ひとつわからないのですが、まぁロゴやイメージ的なものは僕が勝手にやらせてもらってます。ディレクションするので誰かこのイベントのサイトを作ってくれる人いませんかね？

こんな具合でやります。

今更botをつくってみた。

tsuyoshi Higuchi — Thu, 02 Dec 2010 05:26:59 +0000

ちょっとしたとあるシゴトの依頼でTwitterのbotつくれますか？と言われたのでやったことなかったけどTwitterAPIはdebriで触っていて自分用にクラスもつくっていたのでやってみた。
僕はサーバサイドスクリプトはPHPとかろうじてPerlが書けるのでPHPでやってみたけど、あっさりできた。PHPはPEARのPEAR::Services::Twitterでパパっと。

PEAR::Services::Twitterの詳しい使い方は割愛しますが、だいたいServices/data/内にあるapi.xmlの挙動を確認すれば何がどう取得できるのかのルールはわかると思います。あ、PHP初級の人はOAuthまわりでつまづくかもしれませんが、この辺りのサンプルコードを参照すればあっさりできます。

というわけでシゴトでやったのはこっち。ですけど、実はこれのテスト用につくったほうが成長著しく…で機能もいくつか多い（オートフォロー、文章解析、オートリフォローなど）ので暇つぶしにツイートテンプレートなどを更新しまくってます。それがドルゲbotです。
ドルゲってなんだ？って人は以下のYouTubeを見てもらえればと…。

さいとうたを氏原作の昭和47年（1972年）に放映されていた「超人バロム1」に出て来た『ルロロロロー、ドールゲー』という口癖の悪のエージェント「ドルゲ」。そのドルゲの赤裸々な毎日を勝手に妄想してツイートするbot。
これがなぜだかわかりませんが「癒される」というリプライなどをちょくちょくいただいています。結構毒を吐いたりしてるつもりなのだけどなァ…うーん。。

バロム1は主題歌が意味不明だったり、子供が二人で一人の超人に変身したり、敵のドルゲ魔人の造形がヤバイなどと色々画期的なんですけど、肝心のボスドルゲはあまり有名でないので（地味だし）こんなにドルゲを知っている人がいて嬉しいです。ま、ぼくの生まれる前の作品なのでリアルタイムで見た事は勿論ないですが（15年くらい前に九州で朝5時から再放送してたのを見てました）。

というわけで、ドルゲ関係者の方（？）勝手にドルゲやってすみません。そしてうまく成長したらドルゲ関連のイベント（あるわけないけど）呼んでください。ドールゲー！

ドルゲbot フォローよろしく