バリバリ開発の僕が営業チックな部署に配属されると言うパワハラを受けるにあたって、自分のスキルを知らしめるためにこんなものを作ってみた。うそ。結構前から作ってました。

GJ!をASPで

railsで初めて作りました。＠herokugarden。

詳しい説明はそのうち。

拍手サンプル

確認画面サンプル

ユーザー登録はそのうち始めます。まだ作り中なんで、いろいろガラっと変わるかもしれません。

僕のような漫画読みで、長編ものなんかをブックオフでちょこちょこ買ったりしていると、いったいどこまで買ったのかわからなくなる時あるよね？

上の写真はJOJOの文庫版なんだけど、今見たら２１巻だけが欠けていた。

足りないだけならまだしも、すでに持っているにもかかわらず、同じ巻を買ってしまったりして、しかもそれが一度や二度ではきかず3度、4度、5度（やりすぎ）とやらかして、ああ、またしてもやってしまったと絶望に暮れる毎日は僕だけの嘆きではないはずだ。みんな一度はやっているはずだ。

ブクログっていうざっくり説明するとWebで蔵書管理するサイトがある。

ここの登録した本が本棚風に表示されるインターフェースがすごく好きで、これが携帯で見ることができたらなあ、ダブり買いというあの耐え難い絶望を味わうこともないのになあ、と。

そう、携帯からは見られないのだ。

残念。なら、ということでスクリプトを書きました。

携帯でブクログを見るよ！モブクロ

こちらです。

モバイルブクログでモブクロ。ちょっとコブクロっぽく名づけてみた。

ブクログさんはAPIを公開したりはしていないので、基本的にPCで登録している蔵書一覧をリストとして表示するだけです。

上のリンク先のQRコードを携帯で読み込めばトップページに飛びます。

名前入力欄にブクログのアカウント名（半角英数）を打ち込んでリストへボタンを押すと本棚がリスト表示されます。

サンプル画面

かんたんな説明をこちらに書いています。

ブクログさんのデータを使わせてもらっている形なので、くれぐれも質問をブクログさんに投げないようにね！絶対だよ！

最後に、ブクログさんの今後の発展を祈っております。勝手にデータを参照してあつかましいことこのうえなく、申し訳ない気持ちでいっぱいですが、なにとぞお目こぼしいただければなあ、と思います。あとAPI公開とかしてくれるとうれしいです（ほんとに厚かましい！！）

Nous prévoyons que tous nos jeux seront à nouveau accessibles mardi 2 décembre dans la journée ! Merci de votre compréhension

フランス語全然よめねー！

英語だと

We hope that our games will be available on Tuesday (2nd December). Thank you for your understanding.

メンテかな？

勝手にご理解感謝されてますが、火曜に再開する予定らしいです。（現地で火曜だから日本だと水曜かな）

ブログパーツをお使いで、表示がされない皆さん、そういうことなんで本家の復帰までお待ちを。

とりあえず

顔が怖い。コマンタレブー。

2008/12/03　PM9：10　追記

復帰してました

変更点

・記事リストの上部分に余白を多目に取った（ここにオリジナルなロゴを置いたりするといいと思うよ！）
・TOP10と全記事の切り替えをラジオボタンからタブに切り替えた（わかりやすいね！）
・デザインがちょっとiPodTouch風（COOLだね！）
・背景スキン（gjbg.gif）を透過gifにすれば角丸な形にも（可愛いね！）

うーん、これくらいかな？

gjrank2.zip

上に一式入っています。
背景画像のサイズは160*360ピクセル。
gibj.gifのファイル名でswfと同ディレクトリに置いておけば読み込んで背景に表示するので、変更もOKです。

設置方法はgjrank2_ok.htmlの記述中の

http://hoge.com/gj/gjrank2.swf

の部分は先ほどアップロードしたgjrank2.swfのURLを、

http://hoge.com/gj/log/gj.xml

の部分はあなたのGJ！のログファイル中にあるgj.xmlを指定してください。

それ以外はコピぺでOK！

んで、つけるとこんな感じになります。

当然要Flash9です。お気に召しましたらどうぞ。

Adobe Flex Builder Standard 3.0 日本語版 Windows/Macintosh版
	アドビシステムズ 2008-03-14 売り上げランキング : 2426 Amazonで詳しく見る by G-Tools

ちょっと前から「これはいい！」なんて声を聞いていたのでちょっと試してみた。

今日のエントリーはFirefoxユーザー以外は読んでもなんのこっちゃかさっぱりイミフなので、「僕はIEしか使わない！」とか「テキストブラウザこそ至高！」「OPERA!OPERA!」な人たちは帰ってください。嘘です。ちょっといきがってました。すいません。

Ubiqutyの説明はこのあたりのサイト様が詳しいです。

ブラウザの新境地？Ubiquityが変える衝撃のブラウザ体験

FireFoxプラグイン「Ubiquity」に大量のコマンドを登録して日本のサイトを一発で開くすごい方法

タイトルからもうアツすぎてあてられそうです。

ようするに、ブラウザの動きをコマンドラインで制御するランチャーみたいなもので、javascriptを書けば簡単なアプリ的なものもつくれるよー、って事です。

まずはUbiquityをインストールしてみましょう。

Ubiquityのダウンロードはこちら

ものは試しに、GJ!でいただいた拍手数をブラウザからすぐに確認できるようにしてみます。

 WindowsではCtrl＋スペースでコマンド入力のプロンプトが開きますので、command-listと入力して、コマンド入力画面に移ります。

今回はGJ!のcgiとXMLを介して会話することになるので、通信周りの実装とXMLのパーシングをしています。

CmdUtils.CreateCommand({<br /> //gj.phpへのパスを記述<br /> phppass: "http://hoge.com/gj.php",<br /> name: "gjranking",<br /> description: "GJ拍手数表示",<br /> help: "GJ!の拍手数表示を表示します。",<br /> icon: "http://hmlab.info/minor/php/gj/img/gjlogo.gif", takes: {parameter: noun_arb_text},<br /> /*<br /> * プレビュー：拍手数ランキングを表示するよ！<br /> */<br /> preview: function( pblock ) {<br /> var msg = ‘<p><bold>GJ! Ranking</bold></p><table>’;<br /> var $ = jQuery;<br /> var url = this.phppass+"?mode=xml";<br /> $.get(url, function(response) {<br /> var res = $("items", response); res.find(‘item’).each(function(){<br /> var data = $(this);<br /> msg += "<tr><td><a href=’" + data.find(‘ _fcksavedurl=’" + data.find(‘pageurl’).text() +"’>" + data.find(‘pagename’).text() + "</a></td><td>" + data.find(‘count’).text()+"</td></tr>"; });<br /> msg +="</table>"; jQuery(pblock).html(msg) .css("color","#ffffff") .css("background-color","#000000") }, "xml");<br /> },<br /> /*<br /> * 実行：パスワード入力で管理画面に飛ぶよ！<br /> */<br /> execute: function(pass) {<br /> var url = this.phppass+"?mode=show&"+pass.text; Utils.openUrlInBrowser(url);<br /> }<br /> })<br />

ソースはこんな感じです。

使用される場合、phppassの中身を自分のgj.phpのアドレスに書き換えてください。

それ以外はコピペで問題ないです。

コマンド入力から「gjranking」と入力すると（実際はインクリメンタル検索で、入力途中に表示されます）

今までは管理画面からしか確認できなかったのが、どこからでも確認できると言うライフハック。

更に、gjrankingの後に半角スペースを空けて、パスワードを入力してリターンを押せば、そのまま管理画面へとジャンプしますので、GJ!を使ってらっしゃる方でFirefoxユーザー、かつUbiquityユーザーの方は（ニッチ過ぎる！！）お使いいただければ便利かなと思います。

というか、Addonという形なのでブラウザの制限が適用されないので、実装はjavascriptなのに別ドメインのデータにアクセスできるってのは新鮮で良いですね。いろいろ遊べそう。

気になるのはUbiquityのバージョンコード。バージョン０．１ってどんだけー。

Firefox 3 Hacks Mozillaテクノロジ徹底活用テクニック
	江村 秀之 オライリージャパン 2008-08-27 売り上げランキング : 1701 Amazonで詳しく見る by G-Tools

Flashからタイムラインの概念を取っ払って、UIの構築に特化したものだという。

どうも、がりがりコードを書くことを生業とする者にとって、このFlash独自のタイムラインという概念がどうにも取っ付きづらく、プログラマーにFlashを作らせると、マウスでカチカチ、マウスでカチカチ、何フレーム目にこの画像を出してとかああ、もう面倒くせえ、コード書かせろよ！生のコードをよ！となる。

最近ではjqueryとか使ってJavascriptでもけっこうな画面効果を付けられるようになっているけど、やっぱりそういって動き的なものはFlash（Flex)に一日の長がある。

が、前述したようにFlashが他のプログラム言語と比べて特殊な位置づけにあるため、けっこう手が出せなかったりする。

そこでFlex。タイムラインなんてものはとっぱらっている漢仕様なため、プログラマに優しい。

と言うわけで、早速いじってみた。

とりあえず、AdobeさんからFlexBuilder３の体験版をダウンロード。

６０日間は無料で使えるとの事なので、ここはありがたく使わせていただく。

Flex３はまだリリースされてそれほど経っていないようで書籍も少ない。

とりあえずこれを買ってきた。

Flex3.0SDKで学ぶActionScript3.0入門―プログラミングの基礎からAIRアプリケーションの作り方まで 佐藤 信正 メディア・テック出版 2008-04 売り上げランキング : 3437 おすすめ平均 Amazonで詳しく見る by G-Tools

具体的な例は少ないが、まあ、僕みたいにfunctionの書き方も判らない（function hoge（）  の後ろに返り値の型を書くなんて？！）人間にはちょうど良いんじゃないかな。

土日を使って速攻で作ったよ！

GJ!ランキング表示パーツ

width="160" height="270" name="gjrankF" align="middle"
play="true"
loop="false"
quality="high"
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.adobe.com/go/getflashplayer">

GJ!のXMLを吐くAPIを叩いて、それを表示させてみてます。

初めて触った僕で大体1日ちょっとでできた。

そのほとんどの時間がFlexの書式とかお作法を調べてたものだから、そのあたりをちゃんと理解できれば多分１０分くらいでできそう。すげえ！Flexすげえ！

サーバーサイドをRailsでガリガリかいて、InterfaceをFlexでシコシコかけばあら、あっというまにリッチ感溢れるインターフェースのWebアプリケーションのできあがりじゃあないですか。

これが基本無料で作れるんだから、最高だな、現代。

ちょっと面白そうなので、FlexBuilderを購入しようかと思います。もちろん、会社で（笑）。だって、3万円もするし。

しばらくはFlexのお勉強になりそうです。やるぞー！

＊パーツのほうはそのうち公開します。（需要があればソースも）

Adobe Flex Builder Standard 3.0 日本語版 Windows/Macintosh版

FlexでのGJ！ランキング表示をちょっと変更してみました

FlexでUIを全て構築すればJavascriptから逃れられる、これで楽ができる。そう考えていた時期が僕にもありました。

結論、両方覚えなくてはならなくて覚えることが増えてしまいましたとさ。あるえ～？

http://hmlab.info/minor/products/gj/gjrank.zip

お使いの方は上記のzipを解凍後、ご自分のサイトにgjrank.swfをアップロードしてください。

gjbg.jpgは背景になります。そのままお使いならgjrank.swfと同じ場所にアップロードしてください。

オリジナルの背景にしたい場合、同じファイル名のものをアップロードすれば、Flashの起動時にその背景を読み込みます。サイズは160＊270固定です。

あとはブログ中で表示させたい箇所にgjrank_ok.htmlの記述を追加してください。

gjrank_ok.htmlの中の

http://hoge.com/gjrank.swf

の部分は先ほどアップロードしたgjrank.swfのURLを、

http://hoge.com/gj/log/gj.xml

の部分はあなたのGJ！のログファイル中にあるgj.xmlを指定してください。

パスは全て絶対パスです。

デフォルトで拍手数のトップ１０を読み込みます。ALLのラジオボタンを押すと全ての記事を表示します。

Flex、面白いんですけど、Flex３の資料がWebにあまりない・・・Adobeの本家のドキュメントが間違ってたりするし・・・困ったものです。

Flex 3 Cookbook Code-Recipes, Tips and Tricks for RIA Developers (Adobe Developer Library) Joshua Noble Todd Anderson Abey George

遠く南のほうでは早くも梅雨入りという声も届いてきました。

頬を撫でる夜風もどこか夏の夜を思わせる湿気を帯び始め、月日の移り変わりは実に忙しいものだな、ということを実か完全に忘れておりました。

すっかり公開した気になってたよ。いや、常にサイドバーにくっついてたからさ。はっはっはー

 今サイドバーに付けているランキング表示パーツ、FLASHで作ってるんだけど、じゃあ久しぶりにいじりましょうかってんで探したんだけどどうにも見つからない。

やっとこソースというか、flaファイルを見つけたんでいざ、と勇んでファイルオープンしたのだけど、今度はさっぱり理解ができない。

あれー、コレ作ったの僕だよなあ？僕ではない誰か？小人？なんて首を捻ったけど全然判らない。
あかーん、これもう完全に忘れてる。えーと、ライブラリ？なに？

中を見ると僕のブログのGJ!へのパスが直書きしてあったりする時点でだめっぽさもフルスロットルなんですけど、それをじゃあ外から指定するようにしましょうかっつってもその方法とか、全然わかんないっす。

 
もともとFLASHは門外漢だったので、一度忘れてしまうと完全にお手上げ。あちゃーちゃー。

なので、とりあえJavascriptで表示するスクリプトを書いたので、公開しまっしゅ。

↓こんなかんじ。

スクリプト本体はこちら

 こっちはブログに書く

<script src=”http://hoeghoge.com/gjranking.js” type=”text/javascript”>

<link rel=” stylesheet=”" type=”text/css” href=”http://hoeghoge.com/gjranking.css”>

<div id=”gj_fav_etr”>></div>
<script>showrank()</script>

ダウンロードしたスクリプト中の、URLってところを自分のgj.phpを指定します。
で、あとは、ランキングを貼り付けたい場所に上のコードを書き込めばオッケーです。
あっと、gjranking.jsとgjranking.cssへのパスは自分の環境によって書き換えてください。（このあたりはheaderの中で読んでしまったほうがすっきりするか）

 gjranking.jsのmaxcountの値を変えれば表示する記事数が変わります（デフォルトで10件）
あとはcssをかえれば色なんかはある程度変更できます。

単純にXMLを読んで表示するだけです。変更はご自由に。

最近FLEXに興味があるので、そのうちFlexで作りかえるかもしれません。SDK落としてきたし、ってFlexも広義でいえばFLASHじゃん。フリダシー。

Flex3.0SDKで学ぶActionScript3.0入門―プログラミングの基礎からAIRアプリケーションの作り方まで 佐藤 信正 メディア・テック出版 2008-04 売り上げランキング : 3428 おすすめ平均 Amazonで詳しく見る by G-Tools

俺は人間をやめるぞ！！【石仮面ジェネレーター】

笑い男に対抗して石仮面をかぶせてみました。

700キロバイト以下のJPEGファイルを読み込ませれば、顔部分を認識して石仮面をかぶせてくれます。

例えば、

先日のイチロー選手の写真だとこうなります。

UREEYYYYYYYYYYYYYYYYYYYYYYYYY!!

違和感なし。

福田内閣のお歴々も支持率の低下を嘆いて人間をやめるぞー！

UREEYYYYYYYYYYYYYYYYYYYYYYYYY!!

マスクがずれていたり、被っていない人がいたりするのは仕様です。

多分帽子やメガネなど顔を覆うものがあると認識率は落ちると思われます。

仮面は君を選ばなかった、ということでひとつ。

あと、顔が斜めだったり横だったりすると、仮面がそもそも合いません。仮面は縦にしか配置できません。超越者たるもの直立不動で仮面を被りましょう。

ずれてたり、顔の大きさとあってないのはまあ、認識ミスだったり、僕が適当に仮面の大きさを変えているからだったりするので、気が向いたら直すかもしれません。

効果音（カキ文字）も選べるようにするかなあ。

人間をやめたい方はどうぞ。

＊怒られたら消すかも

超像Artコレクション ジョジョの奇妙な冒険 空条承太郎

Movabletypeのディレクトリ（個々のブログではなくmovabletype本体）を自分のPCへダウンロード。ｍｔ-config.cgiの中身を変更して（Databaseの指定とSendMainPath)、ログインし再構築する。

終了。

ディレクトリ構成なんかをそのままならば問題なく動く・・・はず（ドメインの書き換え完了後）なんですが、僕の環境ではうまくいかなかったので、いったんMovabletypeを新規にインストールしなおしてからデータを移すようにしました。

１ MovaleType４．１をダウンロードしてサーバーにアップロード（＊このあたりは詳しく解説しているページを参照してください）

２ 元のブログ（僕の場合ロリポップ）からplugin、mt-static,tmpl、SQLITEのDBファイルをダウンロードし、新サーバーにアップロードする。

３ ログインし、Movabletypeの設定をする。その際DBはSQLITEを指定し、ファイルの指定をさっきアップロードしたDBファイルを指定する。

４ 再構築

終了。

めちゃめちゃ簡単でした。

テンプレートをガチガチに変更している場合とかだと元通り再現するのに手間取ると思いますが、僕はStyleCatcherで導入したスタイルにCSSを変更しただけの出来合いなので、バナーとCSSを上書きしただけ。お手軽でした。

結局３０分くらいで作業終了。凡庸サイコー。

DBはSQLITEの方が引越しも簡単かな？1ファイル移動させるだけですし。

DNSの書き換え直後は経路が不安定なのか、同じURLでも読み込むタイミングによって新と旧ブログが交互に読み込まれたりしてヤキモキしましたが、大体24時間くらいで安定してきました。よかったよかった。

GJ!がダウンロードできませんとのツッコミがありました。

ブログに気をとられて、GJ！のファイル一式移動させるの忘れてました（ガーン）

今（04/16日）は復旧してます。その間にダウンロードしていただいた方すいません。

お詫びに不思議な動きをする生物を写真に捕らえましたので公開します。

Taken from 68のスペース: ブログ用

シャバダバー。