Hatena::ブログ(Diary)

itouhiroメモ

2012-06-17 WebAbornバージョン13をリリース

[しゃべり担当] WebAborn(ウェブあぼ〜ん)という User JavaScript 作成サイト

http://webaborn.herokuapp.com

を公開してるんだけど、バージョンアップしたので報告だ。

f:id:itouhiro:20120618103500p:image


Opera対応

[合いの手担当] 更新履歴みると「Operaに再対応」とあるね。以前は動いていたんでしょ。


[しゃべり担当]

http://d.hatena.ne.jp/itouhiro/20120317#c

に書いたことだけど、バージョン11や12だとOperaでうまく動作しなかったんだよね。Google検索の結果をうまく「あぼ〜ん」できなくてさ。

f:id:itouhiro:20120618095332p:image


[合いの手担当] 画面上のほうの、titleタグの部分だけ「あぼ〜ん」になってる。


[しゃべり担当] むしろ旧バージョンの、バージョン5や8ならうまく動いた。そこでバージョン8を最新版同様の機能にしてOpera対応とするつもりだった。


でも動作確認するとさらに問題が。

Operaでそのスクリプト使ったとき、NGワードが少なければ動作するけど、NGワードが多いと動かない。具体的にはNGワードが150語だとOK。800語だとまったく動作してない。


[合いの手担当] へえ。


[しゃべり担当] そこで、NGワード256語以上だと動かないのかも、と勘を働かせて、NGワード200語ごとに動作を小分けにした。するとNGワード800語でも動作したよ。


[合いの手担当] Operaはいろいろ難しいのね。


[しゃべり担当] でもOperaは個人的にも使ってるブラウザだ。Windows2000やAndroid2.1で軽く動作して新しいブラウザは、Operaしかない。Android2.1でもWebAbornスクリプトはそのまま動く。ほかにはない特徴をしっかり持ってるよね。


ただ、このスクリプト、これまでのスクリプトより遅いんだよね。


[合いの手担当] 遅いのか。それって大きな問題のような。


[しゃべり担当] 結局、これまでのスクリプトのほうが動作早いからそれを「タイプ1」(ver13)として提供。Opera対応スクリプトは「タイプ2」(ver13.1)として提供することにした。


なんで動作が遅いかなんだけど、「タイプ2」はWebAbornバージョン8を元にしている。バージョン8については

http://d.hatena.ne.jp/itouhiro/20110107

に書いたけど、内部動作としてXPathで文字列検索までする。XpathをWebブラウザ上でいちいち生成して、それからそのXpathで文字列検索するので、それで遅いのかな?と思った。そこでXPath生成はServer側ですることにした。


[合いの手担当] 高速化を試みたのか。それで早くなったの?


[しゃべり担当] いや、動作速度としてはとくに変化を感じなかった。


[合いの手担当] 変わらないの?


[しゃべり担当] 生成したXPathは、元データ(配列)よりサイズが大きくなる。Ver8でファイルサイズが25KB だったuser.jsファイルが、「タイプ2」(ver13.1)だと158KBにまでふくれ上がるのだ。そのファイル読み込みに時間かかって、XPath生成する時間と変わらないのかもしれない。


というか、XPathの文字列検索が遅いんだよ。「タイプ1」では文字列検索にJavaScript使ってXPath使ってないから、その差だろう。


[合いの手担当] ふーん。


[しゃべり担当] 結局「タイプ2」(ver13.1)では、改良後のXPath生成済みuser.jsを提供しているよ。


まあ、遅いといっても、最近のCore i7シリーズだと区別つかないかもしれないね。NGワードが150語くらいなら、とくに重いというほどでもない。


私が使ってるCore Soloの1.0GHzというCPUはいい感じに非力なので、スクリプトの重さがわかりやすい。

NGワード800語のタイプ2だと、Firefoxでtwitter.com表示しきるまでに「このスクリプトの動作に時間がかかっています。停止しますか」という警告ダイアログが2回も表示されるくらいだ。同じ条件でタイプ1だと何とか1度も表示されない程度には早くなる。


[合いの手担当] 最近はAndroidスマートフォンでもCPUが1GHz超えでデュアルコアだからねー。そのCPUは確かに非力だ。でも非力なほうが重さがわかりやすいというのはおもしろい。



公開サーバー・言語

[合いの手担当] 公開サイトが変わったんだね。これまでは

http://ai11.net/software/webaborn/

だったね。

http://webaborn.herokuapp.com/

というところに変わったのか。


[しゃべり担当]

http://d.hatena.ne.jp/itouhiro/20120317#c

にも書いたけど、ai11.netのサーバーを移転したらあまりPHPスクリプトの動作がよろしくない。余計な広告も入るし。

そこで、広告なしで無料でウェブアプリを公開できる heroku というウェブサービスを使った。

herokuのポイントは

  • node.jsに対応している。
  • Ruby作者まつもと氏が参加している。しっかりしたところなのだろう。 google:heroku matz
  • URLが短く、TopLevelDomainを無料で使える

以前はGoogle App Engine(GAE)で公開しようかなと考えていたけど、GAEはJavaかPythonを使う必要がある。


herokuならnode.jsが使えるから、これまでクライアント(Webブラウザ)で動作させていたJavaScriptをそのままサーバーサイドで動作させることができる。この利点が大きかった。


[合いの手担当] 言語はこれまでRubyとPHPを使っていたのか。Rubyに戻してもよかったんじゃないの?


[しゃべり担当] RubyはRails使うならともかく、言語単体としてはC/Javaと文法がちがいすぎるのと、汎用性が低いのでそんなに使いたいと思ってない。


汎用性というのは、いろんなところで使えるか、ということなんだけど、JavaScriptは

  • ClientSide (Web browser)
  • ServerSide (node.js)
  • ActionScript (Flash)
  • Adobe Extend Script (Photoshop/Illustrator)

とかいろいろ使えるから覚えるとオトクなのだ。


Pythonも

  • ServerSide (最近のLinuxDistributionには最初から入ってる)
  • FontForge組み込みスクリプト
  • Blender組み込みスクリプト

などいろんなとこで使える。


Rubyはそういうところが少し弱いかな。


PHPは正規表現使ったとき「バックスラッシュをあと何個追加すればいいんだー!? いちいち動作確認しないとわからないぜ」みたいなカッコわるいことがあったので、それほど使いたい言語ではない。ただHTMLテンプレート機能標準装備なので、かんたんなことをするならラクだけどね。


[合いの手担当] でもnode.jsはまだバージョン0.6で熟成されてないよね。


[しゃべり担当] でももう成長軌道には乗ったと思う。今後もサポート続行して使い続けていけると思うよ。


WebAbornは現在のところDB使わず、HTTPのPOSTで送られてきたデータを文字列加工してブラウザに返すだけだから、仕組みとしては簡単だ。だからnode.js/herokuの使い方覚えるには適した教材だった。

名無し名無し 2012/06/19 23:57 いつもすばらしいスクリプトをありがとうございます

以前の記事でOperaのことを質問させていただいた名無しです
Operaへの対応ありがとうございます!
私のOperaでも問題なく動作しました

厚かましくも今回も報告をさせてください
移転前(ver12)からの症状なのですが、私の環境(OSはXP SP3)だと
firefoxでgreasemonkeyが0.9.19以降だと不具合がでてしまいます
WebAboneを搭載したままアップデートすると動くことは動くのですが
いったんwebaboneを削除してもう一度ブラウザにwebaboneを持ってきても認識してくれません
0.9.18以前のgreasemonkeyだと問題なく認識してくれます

またもや質問をしてしまい申し訳ありません
お時間があるときにでもチェックしていただければ幸いです
おそらく、私の環境が原因ではないだろうかと思っているのですが…

itouhiroitouhiro 2012/06/20 19:46 Operaに関しての動作確認報告ありがとうございます。

動作不具合報告も具体的な環境と動作を調べていただいて助かります。Windows XP SP3 + Firefox 13.0.1 + Greasemonkey 0.9.20 でこちらでも不具合を確認しました。そもそも、user.jsファイルのドラッグ&ドロップで、スクリプトをインストールできなくなってますね。私は最近Scriptishしか使ってないので気付きませんでした。

Greasemonkeyの説明文書 http://wiki.greasespot.net/Greasemonkey_Manual:Installing_Scripts ではインストール方法として3種あげられています。

そのうちの1つとして「drag-and-drop a local file into the browser window ファイルをブラウザのウィンドウにドラッグ&ドロップ」が現在もあります。ということは一時的なGreasemonkey不具合で将来は修正される可能性が高いです。

現在とれる対策としては、
(a) Greasemonkeyインストール方法の1つ「Webページのリンクをクリックする」を試す
(b) Greasemonkeyインストール方法の1つ「Firefoxの[ファイル - ファイルを開く] でuser.jsを開く」を試す
(c) Firefox右上のGreasemonkeyアイコンをクリック→[新規ユーザースクリプト]
(d) Greasemonkeyをアンインストールして、Scriptishに乗り換える
が考えられます。

しかし(a)も うまくいかないようです。
・URLとして file:///C:/scripts/ を開き、そのフォルダにある WebAborn.user.js をクリックしてもインストールできません。
・dropbox.comにログインして user.jsをクリックしたら以前はインストールできたのに今のGreasemonkeyではできません。

(b)も うまくいきませんでした。

(c)は動作しましたが、入力欄にいろいろ入力したり、テキストエディタでコピーペーストするのが面倒でした。

オススメは(d)です。WebAborn13の動作を以下のFirefoxでは確認しています。

・Ubuntu 10.04.4 + Firefox 10.0.2 + Scriptish 0.1.7 「Webページのリンクをクリックする」でuser.jsをインストール
・Windows XP SP3 + Firefox 12.0 + Scriptish 0.1.7 「ファイルをブラウザのウィンドウにドラッグ&ドロップ」でuser.jsをインストール

名無し名無し 2012/06/22 23:04 Greasemonkeyの不具合だったんですね
Scriptishに乗り換えました
無事webAboneをインストールできました

ただ図々しくもまたご報告です
firefoxで以前は消えていた文章が消えなくなっていました(Greasemonkey、Scriptishどちらを使用した場合でも)
NGword登録数は300程度です
前バージョンまでfirefoxではNGワードは確実に消えていたので、私の環境によるものかもしれません

質問への返答ありがとうございます
お時間を取らせてしまい申し訳ありませんでした

itouhiroitouhiro 2012/06/23 08:45 バージョン13では、1行入力欄/複数入力欄の文字は消えなくなっています(消えるようにするとOpera向けuser.jsで、Googleの検索入力欄で自分の入力した文字が自動で補完されてあぼ〜んになるのでそれを抑止した)。その仕様にひっかかっているのでしょうか?

それ以外は、こちらではFirefoxで動作に問題ないです。

名無し名無し 2012/06/24 01:52 お答えありがとうございます

すみません、WebAbone側のサイトを見ても私の知識が足らず1行入力欄/複数入力欄の意味を完全に把握することができません
検索の欄やコメント書き込みの欄、ということでしょうか?

少なくともそれらではなく普通の文章で消えない単語があります
うーん、やはり私の環境やブラウザの設定が関係しているのかも知れませんね

お手数をおかけして申し訳ありません

itouhiroitouhiro 2012/07/27 22:41 バージョン13と14には「まったく同じNGワードを複数登録しようとすると登録されない」という不具合がありました。バージョン15で修正しましたのでお試しください。

トラックバック - http://d.hatena.ne.jp/itouhiro/20120617