2007年11月アーカイブ

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で簡単にこの効果をつけられるライブラリを作ってみました。

ダウンロード

http://a-h.panepon.com/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って？

関西で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、参加者のみなさんに感謝。