mwSoft blog

Chromeはダブルクリックイベントが走ると、そこにある要素を反転させようとする。

jqPlotみたいなJavaScriptを使ったグラフで、ダブルクリックイベントを利用した場合、イベントと同時に反転の処理が走って画面が明滅してしまう。

stopPropagationでイベントを止めようとしても、return falseしても上記の現象は収まらなかった。

とりあえずstyleに「-khtml-user-select: none」を入れてあげたらなんとかなった
http://stackoverflow.com/questions/8174870/blinking-issue-with-jqplot-when-double-clicking-on-the-plot

<div id="chart1" style="-khtml-user-select: none"></div>

先日、自分のサイトのJavaScriptってちゃんと動いてるかなぁと思って巡回してみた。ところどころバグってたけど、ChromeとFirerfoxでは割と動いていた。何年も前のものでもそれなりに動くものなんだな。

IEについては知らない。知りたくない。アーアー聞こえないー。

せっかく動いていることを確認したので、その中で使っていて割と面白かったものをまとめて貼っておく。

続きを読む

jQueryで「$("#id")」と書くと、返ってくるのはjQueryのObjectで、getElementByIdで返ってくるような生のElementオブジェクトは取れない。

生のElementを取ろうと思った場合は「$("#id")[0]」と書くか「$("#id").get(0)」と書けば良いらしい。

参考サイト
http://groups.google.com/group/jquery-en/browse_thread/thread/fa48e5649bb64216?pli=1

続きを読む

今日は体調が今ひとつ優れず気分が乗らなかったので、こんなものを作って時間を潰してしまった。

モンティ・ホール問題の実演解説
http://www.mwsoft.jp/programming/javascript/monty_hall_explanation.html

相変わらず、IE6〜7は動作未確認。でも今回はJQuery使ってるから動くかも。

続きを読む

多分バグってますが、編集距離のイメージを掴むために書いてみた。「このスクリプトはイメージです」って書いておけばバグってても許されそうな気がする。

http://www.mwsoft.jp/programming/munou/javascript_levenshtein.html

IE6と7だとさっぱり動かない。対応しようとする気持ちもさっぱり起きない。葬儀も済んだしね。

だいぶ前に作成したGoogle Maps API V3でHello Worldしていたスクリプトが、動作しなくなっているとの情報をメールで頂いたので調査。

Google Maps API V3でカスタムOverlayViewを使う
http://www.mwsoft.jp/programming/googlemap/google_map_v3_custom_overlay.html

続きを読む

ペンギンの本を読んでる時にさらっと書いたコードを、ちゃんと整形してみた。

JavaScriptでK平均法の実演
http://www.mwsoft.jp/programming/munou/javascript_kmeans.html

続きを読む

このブログの右側に付いてる、「人気エントリー」という項目について。

あれは、はてなブックマークが提供しているサービスの1つで、HTMLとJavascriptをコピペするだけで簡単に指定したホストの人気エントリーが表示できてしまう、便利な機能です。

---

【参考URL】あなたのブログの人気・新着エントリーをブログパーツとして、貼り付けることができます。
http://b.hatena.ne.jp/entrylist/widget?url=http://www.yahoo.co.jp/

---

貼ってみたらデザインが当ブログに合わなかったので、CSSをいじってスタイルを変えてみたのですが、今ひとつ綺麗に収まらなかったり、設定するのが少し面倒だったり。

なので、途中で頭にきてJavascript側を改変してしまいました。


続きを読む

最近、WEB上の文書に目を通すことが多いのだけど、それらをもっと速く読めれば楽になるんじゃないかなぁと思い、こんなコードを書いてみる。

テキストリーダー
http://www.mwsoft.jp/programming/webtools/text_reader.html
開始ボタンを押すと、テキストボックスの中に入れた文字列が、指定秒ごとに順送りで表示される。

さらっと書いただけなのでいろいろ改善点はあるけど、とりあえず動いているはず。


流し読みをする時は、普通に読むより速く読めそう。特に「視線の移動」と「画面のスクロール」という無駄な要素が省けるのと、静的な状態よりも人の意識を覚醒しやすい点がプラス。

ついでに速読の練習にもなりそうな気がする。というか、こういう速読用のソフトとかあった気が。

ただ、ずっとこれで読んでたら瞬きをしないので目が痛くなった。スライダーとか使ってもう少し速度や動きを調整できれば良いのだろうけど。

昨日の鳥と戯れている際に、カスタムオーバーレイの使い方を勉強したので、まとめてみた。

http://www.mwsoft.jp/programming/googlemap/google_map_v3_custom_overlay.html


鳥の方はsetCenter連打してるとリクエストの発効され具合が怪しかったので、スクロールを使用する方式に変更。

リクエスト数は減って動きもマシになったけど、地図の位置を変更する際に画面が一瞬大きくブレる。さて、どう回避するか。でも、まぁリクエスト数も自然だし、飛んではいるからいいか。

「コードの色分けをしてくれるJavaScriptライブラリ」について。前から導入しようと思っていたのだけど、どっちにするか悩んだまま放置してました。


悩んでいたうちの1つは「highlight.js」。
手っ取り早く取り付けられて、ブログにも挿入可能。
BSDライセンス。

highlight.jsを使ったサンプル
http://www.mwsoft.jp/programming/javascript/highlight_js.html

スタイルもいろいろ用意されていて、使い易い。
製作者がどこの国の人か分からない。
文字からするとロシアかそっちの方だろうか。


もう1つは「google-code-prettify」
名前の通り、Google codeの中の1プロジェクト。
Apache License 2.0。

google-code-prettifyを使ったサンプル
http://www.mwsoft.jp/programming/javascript/google_code_prettify.html


どちらも数行記述するだけで色分けができるので、非常に簡単に使える。

実行速度はブラウザや負荷によってバラつきが多いが、下記のサンプルでは、highlight.jsの方が早かった。

※注意事項
下記URLをクリックする場合、とりあえず1000件で試してみて、大丈夫そうだったら3000件をお試しください。
Firefox3.5だとやけに遅かったです。Chrome使うとハエーって言うことになります。スペックが微妙なIE6マシンを使っている方は、レスポンスが返ってくるか保証しません。

【重い】1000行のJavaを色づけする【低スペックマシンでの閲覧危険】
highlight.js
http://www.mwsoft.jp/programming/javascript/highlight_js_1000.html
google_code_prettify
http://www.mwsoft.jp/programming/javascript/google_code_prettify_1000.html

【重い】3000行のJavaを色づけする【低スペックマシンでの閲覧危険】
highlight.js
http://www.mwsoft.jp/programming/javascript/highlight_js_3000.html
google_code_prettify
http://www.mwsoft.jp/programming/javascript/google_code_prettify_3000.html


調べて見ると、これ以外にも「syntaxhighlighter」とか「Chili」とかいろいろある様子。
全部は試せないので、しばらくはブログでgoogle-code-prettifyを、HTMLを書くときはhighlight.jsを使ってみようかと思う。


【参考にしたサイト】
あなたのソースコードを彩る、Syntax Highlighterまとめ - Blog.37to.net
http://blog.37to.net/2007/06/syntax_highlighter/

ブログでコードを見やすく　highlight.jsが手っ取り早い - Non-programmer's Ruby in Pocket
http://weed.cocolog-nifty.com/wzero3es/2009/06/highlightjs-6bc.html

プログラムのコードに色を付ける「google-code-prettify」 - JavaScript Library Archive
http://javascript.webcreativepark.net/library/google-code-prettify

先日のFirefox3.5のaudioタグの記事を拡張してみた
http://www.mwsoft.jp/programming/firefox3_5/audio_test.html


使える属性はだいたい試してみたつもり。先日はできなかった、別音楽の読み直しもできた。

メモリがどう解放されているのか分かってないけど、まぁ、とりあえず動いてるから良しとしよう。


Event系は洗ってないけど、そんなにハマらなそうに見えるので、とりあえず割愛しようかと。


今後に備えてロイヤリティフリーの効果音とか音楽とかが欲しひ。その辺の店に売ってるかな。

Firefox3.5のドラッグアンドドロップイベントを使ってみた。とりあえず書いたソースとその解説的なもの。

Firefox3.5でDrag&Drop
http://www.mwsoft.jp/programming/firefox3_5/drag_and_drop_test.html

Dropイベントで少しハマりました。dragenterとdragoverを無効にしないと受け取れないとは……


しばらくの間、Firefoxの新機能と戯れようかと思って、こんなページを作ってみた。10個くらい特集しておけば、なんかそれっぽいコンテンツに見えるだろうか。
http://www.mwsoft.jp/programming/firefox3_5/

というわけで、休日潰してJavascriptであみだくじを作った。これを灰色の人生と呼ぶか、バラ色の人生と呼ぶかは、私には分からない。

http://www.mwsoft.jp/programming/webtools/random_chooser_amida.html
Firefox3, IE8, IE8互換モード, Chrome1で動作確認。


数字を選択すると、赤い線が伸びながらあみだをたどっていくようにした。この時、下や右に線を伸ばすのはEffect.Scale（対象のエレメントを伸長する）で実現できたのだが、左側に伸ばす設定が見当たらなかった。

探せばあるような気がしたけど、Effect.Scaleの中身見てたら、現在の場所を中心として上下左右に伸長する機能があったので、その辺を少し拡張して左上に向けて伸長する機能も追加してみた。

イメージ的にはこんな感じ。optionsにscaleFromRightBottom:trueを設定すると、左上に伸びるようになる。いろいろいじってたので記憶が薄いけど、たぶん1/2してる以外センターと同じ。

var ExEffect = Class.create();
Effect.ExScale = Class.create(Effect.Scale, {
  setDimensions: function(height, width) {
    //中略
    else if (this.options.scaleFromRightBottom) {
      var topd  = (height - this.dims[0]);
      var leftd = (width  - this.dims[1]);
      if (this.elementPositioning == 'absolute') {
        if (this.options.scaleY) d.top = this.originalTop-topd + 'px';
        if (this.options.scaleX) d.left = this.originalLeft-leftd + 'px';
      } else {
        if (this.options.scaleY) d.top = -topd + 'px';
        if (this.options.scaleX) d.left = -leftd + 'px';
      }
    }
    //後略

今日は完全1日オフなので、休みの日らしくJavascriptであみだくじ作ろうと思ったんですよ。

で、あみだくじを描画する場所の指定に、Javascriptの「offsetTop」と「offsetLeft」を使おうと思ったんです。

この2つは指定エレメントの座標を取ってくれる子です。

で、いつものごとくFirefox with Firebugを使って線を引く記述をしてみたんですが、これをIEで見るとどうもズレる。ChromeでもSafariでもちゃんと表示できたので「またIEか」と思ってたんですが、調べてみると「offsetTop」と「offsetLeft」はブラウザによって挙動にけっこうブレがあるようで。


サンプルコード
http://mwsoft.jp/sandbox/js/random_chooser_amida.html
IEで見ると描画位置がズレます。でも、たまに描画に成功することも。ヘッダ部分にJavascript使ってるせいかなと思いつつ。


とりあえず使わない方向で撤退することに。

最近、自サイトの手入れがイマイチ行き届いてなかったので、申し訳程度にスクリプトを1つ追加。

幹事決め、おみくじなどに使えるJavaScript
http://www.mwsoft.jp/programming/webtools/random_chooser.html

とても簡易なものだけど、たまに使いたい時があるかもしれない。「これ、誰がやる？」という話が出た時に、恨みっこなしで選べる。あっさりし過ぎてるので、3回勝負機能くらい付けた方がいいかな。



ところでこのスクリプトを書いている時に、JavaScriptの正規表現で

^\s+$

というのを書いた。空白・タブ・改行のみのエントリーを省く為に。ところが、IEでこれを実行すると%0D(CR)のみの行が引っかからなかった。そういうものなんだろうか。寝ぼけているので気のせいかもしれない。週末に確認しておこう。

UIについて考え事をしていて行き詰った。気晴らしにJavaScriptであまり意味のないものを書く。

コーヒーとかヘビをクリックすると、なんか降る。
http://mwsoft.jp/sandbox/js/character_dance.html
Firefox3, IE8, IE7, Chrome1にて動作確認。

何を作りたくてこうなったのか、自分でもよく分からない。たぶん、文中の印象的な言葉が降ってきて、箱に入るとそれを含んだDescriptionになってるみたいな感じにしたかったんだと思う。


最近、少し夜更かししている気がする。起きるのが遅いからまぁ良いか。

所用があって、昔作ったパワポっぽいJavaScriptを久々に使った。せっかくなのでまたリンクを貼ってみる。

MwDocViewer（IMAP説明資料）
http://www.mwsoft.jp/mwdocviewer/?url=imap

IEだとちと表示がもたついたり（先読みしてないから）、文字サイズ変更のロジックが中途半端だったり（ブラウザの拡大機能あればいらない気もする）、改善すべき点はかなりあるけど、それなりに使い易いなぁとも思う。自分が作ったものが自分に合うのは当然か。


そういえばここ数年、自分が書いたソースはファイル名やクラス名の冒頭に「MW」の2文字を付けるのが習慣になっている。仕事でソースを書く時は、プロジェクト名から2文字を引っ張って頭文字に付けている。どこかから落としてきたライブラリと名前が被って嫌な思いをするのを避ける為。

StringUtilは必ず被る。