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

GJ!をASPで

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

詳しい説明はそのうち。

拍手サンプル

確認画面サンプル

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

変更点

・記事リストの上部分に余白を多目に取った（ここにオリジナルなロゴを置いたりするといいと思うよ！）
・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

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のスペース: ブログ用

シャバダバー。

僕のブログが設置してあるロリポップさんのPHPバージョンも４.x。

会社のサーバーにインストールされているPHPも４。

ということで、PHP５と僕は縁遠い関係だったのだけれど、GJ!をお使いの方でPHPのバージョンが５と言う方も、けっこうおられる。

あー、正直に告白しますと、PHPなめてました。４で動くんだから、５でも大丈夫じゃないかなーって。根拠レスで。

まさかDOMXMLが根こそぎ変わってるなんてなあ・・・・・・

バージョンが変わるごとに言語仕様がケロっと変わってしまう、このPHPという言語は、絶え間ないメンテナンスが必要となるWebアプリを作るうえでどうなんだろうと考えてしまうね。

もう、だからアホの子って言われるんだよ。PHPは。

PHP5からはSimpleXMLという、まあXMLが以前と比べてちょっと簡単に扱えるようになっている。

というか、４以前でXMLを扱うのはぶっちゃけ面倒くさすぎるんですけど、とにかく５ではその辺がクリアされている。らしい。

らしい、というのも僕がSimpleXMLをいじったことが無いからなんだけど、これを機会にGJ!のPHP5対応をしてみました。

現在ダウンロード可能になっているものは既にPHP５対応がされています。

PHPのバージョンを４か５で自動判別しますので、そのために何かを変更する必要はありません。

PHP４で

$xmldata = domxml_new_doc(“1.0″);

だった箇所を

$xmldata = new SimpleXMLElement($xmlstr);

こんな風にしてます。

またPHP４では

$item->new_child(“pageurl”,$Data->pageurl);

こんな風に子要素を追加しているところが

$item->addchild(“pageurl”,$Data->pageurl);

こんなだったりします。

詳しくはスクリプトをご覧いただければと思いますが、ぶっちゃけこのレベルのXMLを扱うなら両者の手続きの煩雑さはそんなに変わらなかったっす。

たぶん速度的に見ればSimpleXMLのが早いはず（未計測）ですが、そこまでシビアなパフォーマンスが必要なものでもないので、あんまり意味ないですなあ。

というか、今までの記述でも（見た目上だけでも）実行できるように、PHP側で丸め込んでくれてもよさそうなものだけどなあ。まったく、だからPHPはアホの子って（略

告知

あ、一応PHP５でも実行を確認をしていますがいまいち自信がもてないので、設置報告をしていただけると助かります＞PHP５な方

マイケル・ムーア in アホでマヌケな大統領選 マイケル・ムーア

これから設置する方はこちらをご覧ください。

今まで設置していた方（ver1.00以降のverをご使用の方）は、とりあえずスクリプトを一式ダウンロードして、その中から

gj.js

img/gjbutton3.gif

img/mark1.gif

img/mark10.gif

img/mark100.gif

を取り出してください。上記５ファイル以外には前回からの変更ありません。

＊gj.js以外は新規ファイルです。

テンプレートの記述変更

設置にあたりテンプレートへの記述が変更されます。

といっても、以前のものの末尾に

<span id="<$MTEntryPermalink$>_gj_mark"></span>(movabletype4の場合）

を追記するだけです。このタグを記述した箇所に拍手数のアイコンが表示されます。

基本的な記述は下記のページ中のブログテンプレートへの記述をご覧ください

movabletype4の場合

wordpressの場合

表示スタイルの選択

gj.js内のgj_stという変数の値を０、または１とすることでお好きな表示スタイルを選ぶことができます。

gj_st=0 → ボタンに拍手数が表示される

gj_st=1 → 拍手数がアイコン表示される

また、設置の際に

･URL         gj.phpへのパス

･img_1      1の位を表すアイコン

･img_10    10の位を表すアイコン

･img_100  100の位を表すアイコン

･buttong   gj_st=1の時に表示するボタングラフィック

上記変数の値を各人の環境に合わせて変更してください。

その後、アップロードをしてください。

以上で変更は終了です。

gj_stの値を変更すればいつでもスタイルの変更は可能です。

ちょっと判りづらい説明になってしまいましたが、ご容赦を。そのうちproductsのgj!のページも書き換えます。

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

奥さんメイドの編みぐるみを掲載することで可愛さをアピールしつつ、ある特定の人にプレッシャーを与えてみる。ほーれほれ。

はてなスター風GJ!を設置して１０日くらいはたったかな？特に問題もなさそうだし、そろそろ公開しようかな、なんて考えていた矢先に問題発覚。

僕の普段使いのブラウザはFirefoxで、気が向いたらOperaなんだけど、ふとIEで自分のブログを見たら拍手数として表示されているはずの肉球マークが表示されていない。

どうやらIE限定の問題（またか！）で、ある状態になると拍手数が表示されないばかりか、拍手を送ることもできなくなるようだ。

少し確認してみると、IEのキャッシュに依存する問題みたいだ。キャッシュをクリアすると問題なく表示される。

が、一度表示して再びキャッシュされると問題が再発して、再びあしあとアイコンが表示されない状態になってしまう。

普段IEを使わないから気づかなかったけど、これはひどいね。公開前に気がついてよかった。

原因は、gj.phpをxmlオプションで叩いて拍手数を取得するところで、前回のキャッシュに残っている拍手数が残ってしまう為。

拍手数を乗っけたボタン画像を取得する時は気をつけていたんだけど、画像じゃないファイル（この場合XML）の場合でもキャッシュが効かないようにしないといけないのかな。

一番簡単な方法としてキャッシュに残るリクエストと違うURLを生成してあげること。

例えば実際GJのjavascriptで拍手数を取得するパラメータが以下のようだったりすると（URLはダミー）

http://hoge.com/gj.php?pageurl=test.html&mode=xml

ブラウザのキャッシュに引っかかるので末尾にてきとうなパラメータをくっつけて一見を偽装します。

http://hoge.com/gj.php?pageurl=test.html&mode=xml&cache=080406235630

cache=の部分はgetTime()でその時の時間をくっつけてあげることで、一応キャッシュの問題はクリアできます。無理繰りっぽいけど、GJ!ではそれでキャッシュ問題を回避してます。

現在ではIEでの問題は解消していると思われます。まだあしあとマークが表示されないよ！って方がいましたら、ブラウザのキャッシュをクリアしてもらえるとおそらく大丈夫かと思われます。

あみぐるみの本 タカモリ トモコ