AUSGANG SOFT

Gyazoの履歴を紙Copiで管理するためのAHKスクリプト

2010-02-02T11:12:19Z

Gyazoは、Skypeチャットなどでの意思疎通や、Webサイトのプロトタイプ作成などに非常に便利なのですが、履歴が取れないので、以前にとったスクリーンショットを見たいときに困ることがしばし。

簡単なAutoHotKeyスクリプトで、履歴を紙copiで管理できるようにしてみました。

Windows限定です。

このスクリプトはクリップボードを監視して、gyazoのurlであれば、紙Copiの管理するディレクトリにあるhtmlファイルに追記します。
HTMLにGyazoイメージが表示されるので、内容を一目で確認できます。（当たり前だけど重要）
人からもらったGyazoも、URLをコピーするだけで取り込めます。

htmlファイルのパスなどは、お使いの環境にあわせて変えてください。

ファイルはなければ自動的に作られます。

紙Copiの編集機能を使えば、不要なGyazoの削除も可能です。

しばらく使ってみての感想。

ただ履歴をとるだけなのであまり整理には向いてない。Gyazo単位で分類・管理できれば・・・。

そういうのやるならAirアプリでクリップボード監視して、Gyazoを分類・管理できたりするGyazoCopiを作るといいのかも。

Amazon Product Advertising API の電子署名にすべりこみで対応した

2009-08-12T03:30:18Z

2005年から提供しているamazieは、PHPとAmazonAPIのXSLを使った方法で情報を取っているのですが、
昨日の10時から、テスト的な停止で見事に止まってしまってました。

Amazon Web Services Developer Community : 【重要】Product Advertising API - サービスメンテナンス（旧サービスの一時的な停止）のお知らせ
http://developer.amazonwebservices.com/connect/ann.jspa?annID=477

誰だ、XSLは署名送れないから大丈夫とか言ってたのは。＞というかそれを鵜呑みにした自分がわるい。

で、急いで対処方法を検索してみたところ、

[PHP] Amazon Product Advertising API で認証付きリクエストを送る方法まとめ - RinGoon POP!!
http://ringoon.jp/2009/05/09/memo-amazon-product-advertisin.html

こんなありがたいライブラリを提供してくださる方が。
これ使えば、ほとんど従来のままでいけますね。

ところがどっこい、うちのサーバーでは、ライブラリに必要な hash_hmac 関数が使えない。
インストールを試みるも、コンパイルエラーで挫折。

しょうがないので、他の方法を探したところ、

Product Advertising API用PukiWikiプラグイン - IMHO
http://d.hatena.ne.jp/mokehehe/20090526/productadvertisingapi

こちらにジャストミートな情報が。
これを使って動作することを確認しました。

その他、パラメーターにアソシエイトＩＤをくっつけてたらリクエストがとおらないとか。

&AssociateTag=associate_id

↑はつけてはいけない。

Amazon Product Advertising API 電子署名とXSLTのまとめ - web2.0的ラボ
http://www.web2-labo.com/amazon_product_advertising_api.html

もやしさんのところで紹介されていた、リクエストURL「http://ecs.amazonaws.jp/onca/xml～」のドメイン部分を、「http://xml-jp.amznxslt.com/onca/xml～」に変更したら、表示されるようになりました。

↑は本当。現時点では、http://ecs.amazonaws.jp/では署名が違うと言われてしまう。

IndexをBlendedにすると結果が返ってこないなど、まだ不明な点も。

とりあえず対応できたけど、いまさらのこの仕様変更はつらい。
Amazonは、サーバーにかかる負荷、コストを削減したいのかな～。
よほど不正なリクエストが多いのか？普通に使っている人が迷惑をこうむらない方法はなかったのか？

なお、オープンソースソフトウェアでの利用については、tDiaryの作者でもある、ただただしさんが、

Amazon Web Services Developer Community : OSSからの認証利用について ...
http://developer.amazonwebservices.com/connect/thread.jspa?threadID=32142&tstart=0

Amazon API認証のPROXYを書いたよ(AmazonのAPI認証導入はOSSに対する挑戦だよなぁ(4)) - ただのにっき(2009-06-19)
http://sho.tdiary.net/20090619.html#p01

素晴らしいつっこみと対応をされてます。

Kanasan.js Greasemonkey チュートリアル読書会に行ってきた

2009-02-23T02:45:20Z

遅すぎですが、あけましておめでとうございます。

タイトルどおり読書会に行ってきました。

今回のKanasan.jsは「Greasemonkey チュートリアル」読書会。

これは行かざるを得ない。

直前までけるかどうかわからず、前日に定員ぎりぎりの30人目に申し込み参加。

一気読みすげー。13:30～19:00くらいまで。

かなりの熱気でした。

会議室に30台もPCがあるんだもんね。

久しぶりの勉強会。

かなかプログラミング話についてくのが大変。

Greasemonkey の歴史など。

unsafeWindowが導入された経緯はこの辺り

Greasemonkeyの共通な落とし穴を避ける - minghaiの日記
http://d.hatena.ne.jp/minghai/20080101

本編と関係ないけどLingr上でのヒアドキュメント談義がおもしろかった。

ujihisa@会場
Q: JSにはヒアドキュメントがない?
A: ない
ヒアドキュメントってすごく大事だと思う

deguchi @会場
@ujihisa ヒアドキュメントの代わりになるものならあるよ
var text = <>
hoge
hige
</>
E4Xが実装されてるブラウザ限定だけど

ujihisa@会場
!

deguchi @会場
もちろんIEにはない！

ujihisa@会場
xmlリテラル的な感じ
scalaの
「またIEか」

repeatedly@会場
何かamachangの記事で見た記憶が > <>

ujihisa@会場

><><

37to@会場
これは便利

ujihisa@会場
><
↑amachangリテラル

yuya@会場
これは魚 ><>

37to@会場
innerHTMLにまるごと入れる時に、楽に出来る

ujihisa@会場
魚リテラル

hakobe
innerHTMLへの代入こわい

yuya@会場
ウオドキュメント

ujihisa@会場
ウオドキュメント

ウオドキュメント誕生の瞬間。

よくみたら正面のテーブルは、一人を除いて全員リンゴマーク。

Mac率の異常に高い勉強会だった。

最後のほうはemobileの回線速度がスローダウン。

6台近く接続されていて、それを30人でシェアしたり、ustreamしたり。

一通り読み終わった後、各自の作っているGreasemonkeyを紹介するという時間がとられて、発表させてもらった。

これまで作ったGreasemonkeyスクリプトまとめ
http://a-h.parfe.jp/einfach/archives/2006/1213180001.html

Googleイメージ、画像を回して

バターになるグリモンがスゴイ！

バターです。
http://www.kiy0taka333.sakura.ne.jp/scripts/guruguruimages.user.js

今日、はじめてGreasemonkey書く人が発表。これはスゴイｗ

便利ツールcoconutsfineのインストールはこちらから http://gist.github.com/68420

Greasemonkeyについて話せる場があるというのはあまりなくて、

かなり調子に乗って、いろいろ出してしまって、少し反省気味。

でも、多少脱線しても、ちゃんと本筋に戻しつつ、運営されててよかった。

Lingrのチャットも、先に読み終わったり、疲れてきた人の気分転換な場になってて、勉強会の運営スタイルとしてうまくなってるなーと思いました。

久々緊張して疲れたけど、とてもいい刺激をもらいました。
37toさんはじめ、スタッフのみなさんお疲れ様でした！

Google Chrome で Livedoor Reader のピンを快適に開く UserJavaScript

2008-09-19T14:20:33Z

Chrome（愛称ちょろめ）がメインブラウザになってしばらくになります。

Greasemetalのおかげで、Firefoxからの移行を決意。

とても快適なのですが、不満点がひとつ。

Livedoor Readerで、ピンをたてた記事をまとめて開こうとすると、ポップアップブロックにひっかかって、タブで表示されません。解除する設定もなく、これはストレスフル。

ちょうど Greasemetalがバージョンアップして、GM_openInTab ファンクションをサポートしていたので、window.openを上書きして、ピンをタブで開けるようにする UserJavaScript を書いてみました。

ldrfixpinopen.user.js

とっても短いっす。

これで思う存分、タブを開きまくれます。

Greasemetal version 0.2以降必須。

開発者の方に感謝。

追記

タイミングやキャッシュによって、スクリプトが読み込まれてないときがあるみたいなので、読み込まれたらLDRのロゴに＋を追加するようにしました。

↑こんな表示になっていれば有効になっています。

おまけ Chrome関連のメモ

・おすすめユーザースクリプト

Greasemetal, GreaseKit で使える UserJavaScript (自作中心)

http://d.hatena.ne.jp/os0x/20080916/1221578886

ほとんどここに網羅されてる。まとまっていて、すばらしい。

Greasemonkey - Google のラジオボタン押したら検索

もリファクタしてもらってる！！

ありがとうございます。

Out of Sync - スペースキーで LDR っぽいスクロールを実現する Greasemonkey スクリプト
http://d.hatena.ne.jp/nagaton/20060831/1156993415

スペースキーでページをスクロールする人にはおすすめ。

・マウスジェスチャー

マウ筋で設定。

閉じたタブを開きなおすショートカットは、Ctrl+Shift+T。

・キャッシュのクリア

右上の設定アイコン→閲覧履歴の消去→キャッシュにチェックを入れて→閲覧履歴の消去を実行。

・Windows2000でChromeを使う

Google Chrome (BETA) を Windows 2000 で

http://blog.livedoor.jp/blackwingcat/archives/139405.html

Chrome起動時の警告をなくす(Win2000)

http://blog.livedoor.jp/blackwingcat/archives/149216.html

Skype Washerから紙Copi Net に保存

2008-08-21T08:08:43Z

前回につくったSkypeのチャットログを整形するツール、SkypeWasher に紙CopiNet へ保存する機能を追加しました。

save to kami ボタンで、ログを整形して紙Copi Net に送ります。
最近、紙Copi Netにiframeでテキスト中のURLを開いてくれる機能が追加されたので、組み合わせると便利です。

Skype Washer　スカイプのチャットログを読みやすく

2008-08-16T23:36:22Z

これはなに？

Skypeのチャットを日常的に使っているのですが、とても不便なことがあります。
やりとりの内容を残しておきたいと思って、選択してコピーすると、読みづらいテキストになってしまうことです。
これを、必要なときは、手作業で整えたり、テキストエディタで置換したり。
かなり手間なので、Skypeのチャットログをきれいに整形してくれる（洗う）ツールを作りました。

skype washer
http://a-h.parfe.jp/skypewasher/

例)
変換前

[2008/08/11 13:23:58] deguchisの発言: 飲み会の場所どうしよ？
[2008/08/11 13:23:59] nektixeの発言: うまい魚食べたいね。
[2008/08/11 13:24:02] nektixeの発言: どこかない？
[2008/08/11 13:24:29] deguchisの発言: それだったら
[2008/08/11 13:24:30] deguchisの発言: まんまや　和坐(マンマヤ　ワザ)/ホットペッパー.jp
http://www.hotpepper.jp/A_20100/strJ000020882.html
[2008/08/11 13:24:31] deguchisの発言: ここオススメ。
[2008/08/11 13:24:33] deguchisの発言: 日本海から直送の魚を食わせてくれる。

変換後

飲み会の場所どうしよ？
うまい魚食べたいね。
どこかない？
それだったら
まんまや　和坐(マンマヤ　ワザ)/ホットペッパー.jp
http://www.hotpepper.jp/A_20100/strJ000020882.html
ここオススメ。
日本海から直送の魚を食わせてくれる。

特徴

・Javascriptのみで動作するので、動作が軽く、情報漏洩の危険性がありません。
・洗うのと同時にクリップボードにコピーできます。

使い方

sourceに貼り付けて、wash!ボタンを押すだけです。

ブックマークして、必要なときに呼び出してお使いください。
とても簡単な作りなのでローカルに保存しても動作します。

今後の予定

・紙Copi Net への取り込み機能
→ 追加しました

読みやすいテキストに整形する機能は、本来Skypeに標準でついていて欲しい機能です。
なので、独自機能として、紙Copi Netに送ることで、保存・管理・検索が容易にできれば便利かもと思ってます。

どうぞ、ご利用ください。

Googleの検索結果をバックグラウンドタブで自動的に開くGreasemonkey

2008-07-17T08:14:00Z

久しぶりにGreasemonkeyスクリプトを書いてみました。

browseboost.user.js

若干わかりにくいですが、Googleで検索すると検索結果をバックグラウンドのタブ（赤線）で自動的に開きます。

開くページの数はスクリプト先頭の

OPENLIMIT

で変更可能。
デフォルトは2つ。

思いつきは、検索結果の最初の2つくらいはよく開くんじゃないかということ。
昔、Fasterfoxというリンクを先読みする拡張が、サーバーに負荷をかけるということで批判されてたけど、２つくらいなら許されるんじゃないかと。

GM_xmlhttpRequest でHTMLだけ先読みを試みるも、どうも体感的に先読みになってないっぽいので、GM_openInTab で表にこないタブに開いておくことにしました。
マウスでタブ切り替え、ワンキーでタブを閉じるとかできるようにしてる環境では便利かもです。

このスクリプト、LDRize のSITEINFOを共用することが出来ると思います。
いろんなページでタブ開きまくることになるので、便利かどうかはやってみないとわからないけど。
要望があればつけてみます。

ボタン一発で部分スクリーンショット

2008-06-23T00:01:24Z

Gyazoが便利すぎる。
Skypeでやりとりする際に、「この部分、レイアウト崩れている」「こんなデザインでどうか？」などと伝えるのにウチでは使われまくっている。

Gyazoは、範囲選択→画像化→アップロード→URLをクリップボードにコピー、を一括してやってくれるので、声や文章では伝えられない部分をすぐに共有できて便利。

なんだけど、たまにイラストレーター上にサイトのモックアップを作るときに、単にクリップボードにコピーするだけでよい場合も。

そういうシンプルなソフトがないか探してみたけどなさげ。

既存のスクリーンショットツールのコマンドラインオプションでできないか、探してみると、WinShot＋AutoHotKeyでやってる人がいたー。

ホットキー一発で WinShot でスクリーンショットを撮る
http://moewe.xrea.jp/log/2005_09.html#d20050912

参考にさせてもらって、Gyazoに近い設定にした。

PrintScreen::Run, C:\Program Files\WinShot\WinShot.exe -Copy -Rectangle -Close

地味に便利。

若干、Gyazoと選択の操作感が違うので最初戸惑うけど、拡大鏡みたいなプレビューも出るのでドット単位で選択できてよい。

bluewindでファイルランチャー

2008-06-21T06:42:19Z

毎日の作業で特定のフォルダにある同じ拡張子のファイルを開くことが多いので、その作業を簡単にできないかなぁと思っていたところ、bluewindとバッチファイルを組みあわせることで、できそうだったのでやってみました。

例えば、C:\hoge\jsにあるjsファイルを開きたい場合、以下のようなバッチファイルを書いて

@echo off
start C:\hoge\js\%1.js

bluwindのコマンドとして設定します。

あとは、

js common

とコマンドのあとにファイル名だけを打てばOK。
bluewindの入力補完や履歴機能が使えるので、使うほどに直感的にファイルを開くことができます。（最初少し慣れも必要）

※バッチファイルではなく、Explorerにパラメータを渡す形式でも可能なのですが、XPだと毎回セキュリティダイアログがでて、うっとおしいので、この方法にしました。

Tips

コマンドの設定画面で、高度な設定>入力時のパラメータにキーワードを使う
をOFFにしておくと、コマンドと同名のファイルがあってもちゃんと開いてくれます。

コマンドの履歴は
設定画面からは999件までしか設定できません。

これでは多用するときに、ファイル名が履歴から消えてたりするので、不便です。
そこで、設定ファイルを直に書き換えることで履歴の数を増やします。

インストールフォルダの
bluewind.ini
HistoryCount
の数値を書き換えます。

例えば3000件くらい。
HistoryCount=3000

特に重くもならないので、履歴の数に不満を感じたら設定するとよいでしょう。

この方法、数ヶ月使ってますが、ウチの場合はMVCフレームワークのビュー、ヘルパーファイルだったり、Javascript、CSSファイルを開くのに重宝しています。

おまけ

ついでにファイルのgrep検索をbluewindからできるようにしたいと思って調べたところ

for /R %%i in (*.html) do echo %%i && findstr /N %1 %%i
pause

というバッチでできることが判明。

でも、いまいち使い勝手がよくないので、秀丸のgrep検索をコマンドライン呼び出ししてみることにしました。

@echo off
"C:\Program Files\Hidemaru\Hidemaru.exe" /gCwRUo,"C:\hoge\view\*.html",%1

これでなんとかいけそう。
パラメーターは秀丸のヘルプ＞起動オプションを参照。

追記：
この記事を書いてから、bluewindはもともと、ファイルランチャー的な機能があることを知った。

MetLog：便利なコマンドライン型ランチャー「bluewind」
http://megalo.jp/metlog/2006/12/091724.html

たとえば、よく参照ようなディレクトリ(C:\Documents and Settings\ユーザー名\My Documents とか)を例えば「mydoc」キーワード登録しておくと、
notepad mydoc
といった感じでmydocを打つと、その後ろに、ちゃんと配下のファイルが自動補完されます。

うおお、まったく求めていたものと同じ機能だorz
よく下調べしましょう。
ただ、少し負け惜しみ的に書いておくと、↑の方法だと、コマンド後の補完の開始に、￥を押すか、カーソルキーの右を押さないといけないので、若干使いにくい。
バッチファイルを使う方法は、スペースを押してファイル名を入れるので、若干キー入力のロスが少なくて済みます。
毎日、使うものなので、まぁ、ほんの少しラクなのもけっこう大事。こんな方法もあるよということで。

prototype.js でタブ切り替え(複数表示版)

2008-02-22T09:00:32Z

prototype.js でタブ切り替え - AUSGANG SOFT
http://a-h.parfe.jp/einfach/archives/2006/1012175043.html

に、同じページで複数タブを表示できるようにならないか？
というご要望をいただきました。l

もともと１つしかタブがない想定なので、大幅な改造が必要。
いい機会なので、作ってみました。

サンプル
http://a-h.parfe.jp/einfach/archives/tabSample.html

CSSもJavascriptも↑のファイル内に書いています。

変更点

複数タブに対応

ページ末尾の

new TabMaker('tab');
new TabMaker('menu');

↑という指定で、複数のタブを作っています。
サンプルを参考にHTML、CSSもそれぞれの名前で指定してください。
逆にいうと、デザインを別々にすることができます。

document.getElementsByClassName の使用をやめました。
ページによっては非常に重いという指摘をいただいていたので、必要ないようにしてみました。

ページの読み込みを待たずに、タブ表示を行うようにした。
タブのHTMLの直後にタブ表示をする処理をいれることで、読み込むを待つ必要をなくしています。

要望をいただいたgontaさんに感謝です。

ActionScript3 事始め

2008-01-08T14:02:17Z

新年、あけました。
新しいことをやってみようということで、会社でActionScript3を勉強することに。
その下準備の作業をメモ。Windows環境です。

概要

3月22日の技術勉強会 - ActionScript3 / Flex / Apollo 勉強会 - はてな技術発表会日記 - 機能変更、お知らせなど
http://hatena.g.hatena.ne.jp/hatenatech/20070324/1174713674

まずは、概要がよくまとまっている↑からスタート。

開発環境を整える

とりあえず、AS3をコンパイルできる環境を整えよう。
Flex Builderは有料だし、慣れたエディタを使いたいので、Flex2 SDKを使う方法でいくことに。(これがけっこう大変だった)

Java(JRE or JDK)が必須なのだけど、入ってたので割愛。

Adobe - Flex 2のダウンロード
http://www.adobe.com/cfusion/tdrc/index.cfm?product=flex&loc=ja

Flex 2 SDK （無償）と日本語パック
Flex Compiler Shell(fcsh)
http://labs.adobe.com/wiki/index.php/Flex_Compiler_Shell

をダウンロード(要AdobeID)

Flex 2 SDKのplayerフォルダにデバッグ用のFlashPlayerがあるので、ブラウザを終了させて入れておく。
IE用とそれ以外の2種類。
エラーログやtraceなどを出力するのに必須。

FlexSDKのbinフォルダにパスを通しておく。
Windowsだと再起動orログオフしないと変更が反映されない？

rascut

コードを更新したら即座に結果を見れるfcwrapがとても便利そうなんだけど、インストールが難しそう？

fcwrap 改め rascut - PBD - subtech
http://subtech.g.hatena.ne.jp/secondlife/20070825/1187978780

名前が変わって、gemが公開されインストールが簡単に。

Rubyのインストールからの手順は↓

ActionScript やるなら入れとけ。rascut 導入と使い方。 - てっく煮ブログ
http://d.hatena.ne.jp/nitoyon/20070914/how_to_install_rascut

よくまとまってます。
ログの表示までサポートされていて、すばらしい。
nitoyonさんに感謝。

Hello AS3!

ようやくコンパイル。
お決まりのHelloWorld.as。

package {

   import flash.display.*;
   import flash.text.*;

   //HelloWorld
   public class HelloWorld extends Sprite {
       //コンストラクタ
       public function HelloWorld() {
           //テキストフィールドの生成
           var textField:TextField=new TextField();
           textField.text="Hello AS3 World!";
           addChild(textField);
           trace(textField.text);
       }
   }
}

rascut HelloWorld.as -s

rascut便利すぎ。
127.0.0.1:3001にアクセス。
コードを書き換えると、自動でコンパイルして、作成されたSWFを表示してくれる。
ページの再読み込みすらない!!
secondlife氏に感謝。

console.log

デバッグなどで使うtraceはどうせならJavascript同様FireBugのコンソールに出力させたい。

WEB+DB PRESS Vol.41

WEB+DB PRESS Vol.41：サポートページ｜gihyo.jp ... 技術評論社
http://gihyo.jp/magazine/wdpress/archive/2007/vol41/support

「log関数でデバッグ」のlog関数

これを使えばいける。
外部ライブラリの利用方法は

外部ライブラリをローカルにダウンロードし、Flex2SDKのframeworks/flex-config.xmlのsource-pathタグの部分を編集します。

とのこと。
最初はsource-path部分がコメントアウトされているので解除して設定。

↑の特集1「ActionScript 3.0開発入門」

を読んで、PhotoViewer作ってみる。
フィルタや、アニメーションがこんな簡単にできんのかー。

とりあえずのActionScript3 雑感

型指定が面倒。やっぱり。
クラスごとにファイル分けないといけないの？
importは最初面倒なんだけど、慣れれば管理が便利になるのか？
クラスとファイル名をあわせる必要があるみたい。
タイプ量が多い気がする。
↓
エディタの補完機能でどうにかしよう。

萌ディタのjscript.javascript.txtに補完単語を追加 - Cheese Pie
http://d.hatena.ne.jp/cheesepie/20070219/1171816331

補完は↑の方法でやっているので、よく使いそうな単語を追加でおｋ。

とりあえず、なんとか入口まではたどり着けた感じ。

ジョジョの奇妙なGreasemonkey

2007-11-22T13:33:47Z

mixiやチャットで友人にコメントするとき、共通に好きな漫画のセリフをパロディ化して使うことがあります。

Twitter / AUSGANG SOFT: クーラーつけるとネットが切れる。二者択一。。。 http://twitter.com/nektixe/statuses/208569602

Twitter / uj: @nektixe 逆に考えるんだ。「暖房をつけちゃっていい」
http://twitter.com/ujihisa/statuses/208571982

Twitter / AUSGANG SOFT: @ujihisa いいや！限界だ！押すね！
http://twitter.com/nektixe/statuses/208581402

たいてい名言集をググってコピーしてくるんですが、それを簡単にしたいなと。
思ったので、「ジョジョの奇妙な冒険」の名セリフを自動表示するGreasemonkeyを書いてみました。

スクリプト

seliffromjojo.user.js

使い方

Twitterとmixiに対応しています。
自動で、テキストエリアにセリフがランダムに挿入されます。
テキストエリアの下の「JoJo!」ボタンでセリフを変更できます。

自動挿入をしたくない場合は、スクリプト冒頭のAUTO_STARTを

AUTO_START = false;

にしてください。「JoJo!」ボタンで挿入できます。

謝辞

素晴らしい作品を描きつづけられている荒木飛呂彦先生に感謝。

スクリプト中に埋め込んだセリフは、"ジョジョ名言"でググると一番に出てきた↓のサイトのものを利用させていただきました。感謝。

☆ジョジョの奇妙な冒険名言集☆
http://www.gdh.fromc.jp/07.jojo/01.jojomeigen.html

以下のコードをFirebugで実行。得られたテキストを整形。

var proverb = [];
var text = $x('//p');
text.forEach(function(tx){
    proverb.push(tx.innerHTML.replace(/<\/?[^>]+>/gi, '').replace(/\n/gi, ''))
});
copy(proverb.toString());

余談

もともとTwitter用に作ってました。
が、試してもらおうと思った@ujihisaがいつのまにか退会してたので、mixiにも対応してみました。

設定で、他のサイトでも使うようにできます。

>>ユーザースクリプトの管理>>include(ユーザースクリプトを実行するページ)指定することで。
ただし、ページの最初のテキストエリアに自動挿入する仕様です。

他にもドラゴンボール、スラムダンクなどあるといいなぁ。

本当は名セリフを集めるサービスを作りたいのだけど、とりあえずやってみたいことの簡単な実例ということでつくってみました。

Todo:キーワードのインクリメンタル検索で、好きなセリフを挿入できるようにする。

2007.12.10 追記

インクリメンタル検索機能を追加しました。

prototype.jsでfillinメッセージ

2007-11-12T09:26:56Z

フィルインメッセージって？

↓こんなやつ。

ブラウザの検索窓などに使われていて、ちょっと使いやすくなるっぽい効果を与えます。

prototype.jsで簡単にこの効果をつけられるライブラリを作ってみました。

ダウンロード

http://a-h.parfe.jp/einfach/archives/fillin.js

使い方・サンプル

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="fillin.js"></script>

prototype.jsのあとにこのライブラリを読み込んで
以下のように書くと

<input type="text" id="sample_text1">
<script type="text/javascript">
Event.observe(window, 'load', function(){
	new fillin('sample_text1', 'Google', '#999');
});
</script>

↑こうなります。

fillin('<対象のＩＤ>', 'フィルイン表示するメッセージ', 'メッセージの色');

という指定ができます。

サンプル２

↓のようなコードを書くと↑になります。

<script type="text/javascript">
Event.observe(window, 'load', function(){
	new fillin('sample_text', 'ここに入力', '#CCC');
	new fillin('sample_text2', 'こちらも有効', '#CCC');
	new fillin('sample_textarea', 'テキストボックスでもＯＫ', '#999');
});
</script>

サンプル3

フィルインメッセージを表示させた個所に入力がされていないと、
フォームを送信できなくなる機能もつけておきました。

<form method="get" action="/" id="sample_form">
<input type="text" id="sample_text5">
<input type="submit">
</form>
<script type="text/javascript">
Event.observe(window, 'load', function(){
  new fillin('sample_text5', '入力しないと送信できないよ', '#CCC', 'sample_form');
});
</script>

↑のように4番目の引数に、フォームのIDを入れておくだけです。

蛇足

少し改造すれば、Google desktopの検索窓のように背景画像をフィルイン表示するのも可能かも。

「時代はjQuery！」という方には、同様の機能の、ｊQuery用プラグインが↓で公開されてます。

abui.nowa.jp - fillinメッセージギミックを実現するjQueryの拡張プラグイン
http://abui.nowa.jp/entry/8bff791a51

Kanasan.jsに行ってきました

2007-11-05T07:46:51Z

Kanasan.jsって？

関西でJavaScriptの小さい勉強会を開くことになった (Kanasansoft Web Lab.)
http://www.kanasansoft.com/weblab/2007/10/javascript_1.html

Shibuya.JSが盛り上がっているのを関西から見ていると非常に悔しい。関西にも同様なコミュニティはないのか。 https://twitter.com/kanasan/statuses/342758542

Twitter上のkanasanのこの発言から始まった関西ＪＳイベント。
同様の思いを持ってた人は僕も含めてかなり多かったのではないかと。

リバース風邪で前の晩から何も食べないまま、ふらふらしながら蛍池に。
20数人の参加者。かなり多い。
やっぱりTwitterで知ったひとの割合が多かった。

内容

Kanasanによる基調講演。
プロジェクターが調達できなかったらしく、みんなでMacbookにわらわらと群がりながら聞く。
2台のMacbook＋Keynoteをリモコンを使って交互に操作して笑いを誘いつつ、Javascriptの基本から。
かなりこの時点でけっこう高度かも･･･という予感。

Prototype.jsのソースをコードリーディング
前半は、みんなでリーディング。
途中で、休憩後、初心者と上級者にわかれてリーディング。

前半の感想。

オレ、Javascriptというプログラム言語のことって全然わかってないな～と。
誰かも言ってたけど、使い方の部分はそこそこ知ってるけど内部の動作とか仕様の部分なんてもう知らないこと多くて新鮮だった。

異様に仕様にからむ話多いよ。
すごく正確なひとがいらっしゃり、
この人、頭の中に仕様書が入ってるのでは？と思うほど。
隣のかた（nityonさん）によるとDays on the Moonの方だった模様。

せっかくなのでustream配信でもしてみようとカメラ持っていったのに、マイクを忘れ、音なし配信になってしまった。。。見てた人すんません＞＜

以下メモ書き。参加者のつぶやき、つっこみなど。
耳コピなので内容は正確じゃないかもしれません。

  truncate: function(length, truncation) {
    length = length || 30;
    truncation = truncation === undefined ? '...' : truncation;
    return this.length > length ?
      this.slice(0, length - truncation.length) + truncation : this;
  },


truncateのデフォルト値は30
いい感じなのが30なのか？


__proto__
は宿題


  stripScripts: function() {
    return this.replace(new RegExp(Prototype.ScriptFragment, 'img'), '');
  },

img?イメージタグ？？
正規表現か
imgは間違いやすいだろ!!


↓こっちのが処理速度が速い？

Object.extend(String.prototype.escapeHTML, {
  div:  document.createElement('div'),
  text: document.createTextNode('')
});


unescapeHTML
toQueryParams
の対比
哲学の違い？

o.prototype ← functionのみ
o.__proto__ ← すべてのObjectに存在する


  toQueryParams: function(separator) {
    var match = this.strip().match(/([^?#]*)(#.*)?$/);

?,は使えないブラウザがあるかもしれない？


  underscore: function() {
    return this.gsub(/::/, '/').gsub(/([A-Z]+)([A-Z][a-z])/,'#{1}_#{2}').gsub(/([a-z\d])([A-Z])/,'#{1}_#{2}').gsub(/-/,'_').toLowerCase();
  },

gsubはRubyライクな置換をするため？


JSON多い
これなに？
読むの嫌になってきた。。。
コメント欲しい。。。。

  isJSON: function() {
    var str = this.replace(/\\./g, '@').replace(/"[^"\\\n\r]*"/g, '');
    return (/^[,:{}\[\]0-9.\-+Eaeflnr-u \n\r\t]*$/).test(str);
  },

r-u はrstu?

どんなときに使うの？


with (String.prototype.escapeHTML) div.appendChild(text);

evalする回数を一回減らす
百円のものを99円で買うようなもの？

後半の感想。

他の人も書いてらっしゃるがレベルが高すぎて呆然とした。
なんていうかプログラム知識のレベルが。
RubyとかHaskellとかLispの話についていけない～。でもつっこみが笑える～。

途中、空腹で朦朧としてたときに配られたお菓子がありがたかった。
お酒のつまみとしか思えない噛み切れない干物とかもあったけどｗ

そんなこんなで非常に濃くてついてくのも必死だったけどおもしろかった。
今回、十分の一まで進んだ。あと十回あり？

なんか最近、私事で忙しく、プログラムへの熱意が薄まってる気がしてたのだけど、もっとできる限り勉強しようと思った。

主催者曰く、

「家に帰ってレポートを書き、主催者のブログにトラックバックを送るまでが勉強会です」

ああ、やっとオレのKanasan.jsが終わる。楽しかった。
2回目も参加したいっす。

楽しいイベントを開いてくれたkanasan、裏の仕掛け人ujihisa、参加者のみなさんに感謝。

私の出会ったバグ達 - ブラウザ依存

2007-10-24T13:09:05Z

最近、Javascriptで開発していて、ブラウザ依存のバグに出会うことが多いので、実例をメモ。
原因と対策は、リンク先を参照されたし。

ifreame上のinput、textareaからキャレットが消えるバグ

Windows版Firefoxで発症。

実例

↑の場合は、背景のオーバレイDIVを消したら、治った。

Bug 226933 - Caret vanishes in input form elements over iframe - lambda {|diary| lambda { diary += 1 } }.call(hatena)
http://d.hatena.ne.jp/winebarrel/20070814/p1

透明のオーバレイDIVを表示すると勝手にFlashが消えるバグ

Mac版Firefoxのみ発症。
透明度が関連するので、DIVのフェードイン、フェードアウトのエフェクトでも再現した。

実例

Bug:Flash Disappear in Firefox on Mac
http://www.hedgerwow.com/360/bugs/opacity-disable-flash-on-mac-firefox.html

Javascriptで生成したラジオボタンが選択できないバグ

Windows版 IE6、IE7で発症。

実例

一番、わかりにくくてハマりました。
IEで生成されているHTMLソースを見て判明。

生成されたHTMLの参照はIE7Proがオススメ。日本語対応、無料、IE6でも使える。
プロキシの切り替えがCtrl+F9でできるのでプロキシ駆動開発にも便利。

掲示板/JavaScript質問板/DOMを利用して追加したエレメントのエラーチェック - TAG index
http://www.tagindex.com/cgi-lib/q4bbs/patio.cgi?mode=view&no=1211
IE は createElement('input') した要素の name 属性を変更することができない。

同じようなバグで悩まされている方の参考になれば幸いです。