志田の日記 200805

2008-05

prototype.js と jQuery の競合

　Rails で Ajax を使うようになってきた。
　Rails の既存のアプリに Ajax リクエストのコーディングを追加したら、リクエストが実行されずに JavaScript のソースコードがブラウザに表示されるという現象が発生。いろいろ調べてみたら、prototype.js と jQuery を一緒に使っていたことが原因だった。

　ここにあるように、jQuery.noConflict(); という関数を実行してあげ、これまで jQuery を使っていた箇所では、たとえば、以下のように書き換えてあげればOK。

Before:

jQuery (function ($) { $(".time_entry").timeEntry({spinnerImage: '', show24Hours: true}); } );

After:

jQuery (function (jQuery) { jQuery(".time_entry").timeEntry({spinnerImage: '', show24Hours: true}); } );

　$ を jQuery に置き換えるということ。

アッコさん

　アッコさんかっこいい。

| 2008-05-24 | 動画 | コメント : 0 | トラックバック : 0 |

Scheme Memo

　Scheme の勉強をしようかなーと思った途端に急ぎの作業が入ったので、途中まで調べたことをメモっておこう。

・Wikipedia による概説
http://ja.wikipedia.org/wiki/Scheme

・Gauche（実用的なインタプリタ）
http://practical-scheme.net/gauche/index-j.html

・Mosh（id:higepon氏が開発中のScheme Shell）
http://code.google.com/p/mosh-scheme/

・独習 Scheme 三週間
http://www.sampou.org/scheme/t-y-scheme/t-y-scheme.hlog
http://www.sampou.org/scheme/t-y-scheme/t-y-scheme-Z-H-1.html

　LISP, Scheme, Haskell, Scala, Erlang くらいまではざっと Hello World くらい書いてみたい。その後、使い続けるかどうか、何か作ってみるかどうか、だとしたらどの言語を使うのか、Ruby で関数型言語を意識したコーディングをしたほうがいいんじゃないか、といったことを考えてみたい。時間が欲しい。もしくは時間を作るためのノートPC。出先とかでコーディングないしは勉強できるから...。

やっと

　やっとDOMインスペクタを使って目的のHTML要素を適当に（自由にとまではいかない）操作できるようになってきた...。疲れた...。

| 2008-05-13 | 雑記 | コメント : 0 | トラックバック : 0 |

FireBug - Firefox の Add-on として動作する JavaScript デバッガ

　引き続き JavaScript の勉強中です。Ruby on Rails で作ったWebアプリにAjaxを導入しているのです。

　昨日までは普通にブラウザをリフレッシュしてほげデバッグ（alert("hoge")でスクリプトの挙動を確認する）でがんばっていたんだけど、あんまり効率が悪いもんだから、評判のよい FireBug を導入してみた。

　

　ｳﾎｯwwww 何これwwww 超便利wwwwwwwww 鼻血出そうwwwww
　もっと早く導入しとこうよ俺www

　ポイント：
・Add-on なのでインストールが楽。Visual Studio や Eclipse を使うより数倍は楽。
・F12 かメニュー → 表示 → Firebug で起動する。
・調査/HTMLをクリックした状態でマウスを動かすと、カーソルがある位置のHTMLがリアルタイムに強調表示される。思い通りに表示されない箇所がどうなっているか調べるのが超楽。
・調査/CSSをクリックした状態でプロパティ（font-familyなど）をクリックして編集可能。値（arialなど）も編集可能。ブラウザの表示も即座に反映される。
・調査/スクリプトをクリックした状態でJavaScriptを実行するとDOMインスペクタ（？）を見ながらステップ実行とかブレークポイントを張ったりとかできる。
・コンソールにJavaScriptのエラーが表示される。HTMLやCSSも表示されるのかな？
・やり方は忘れたけど、ページのどの要素を表示するのに何秒かかったかがガントチャート風に表示できる。どこがボトルネックかが直感的に判断できる。JavaScriptを使う場合、大抵は応答性や帯域幅の調整をしているケースだろうから、これは便利だろうと。
・使い込めばほかにもありそう。

　Safari も「開発」メニューを出せるし、OperaはDragonflyを出してきたし、どんどん便利にになっていくなぁ。。。

ソースコードを色分けするJavaScriptいくつか

　google-code-prettify
　http://code.google.com/p/google-code-prettify/

　SHJS - Syntax Highlighting in JavaScript
　http://shjs.sourceforge.net/index.html

　syntaxhighlighter
　http://code.google.com/p/syntaxhighlighter/

　highlight.js
　http://softwaremaniacs.org/soft/highlight/en/

　以前、google-code-prettifyを使ってソースコードの色分けをしていたときに、.emacs つまり elisp がうまく色分けできなかったので、明示的に言語を指定して色分けできるようなライブラリがあれば…と思ったのだけれど、ざっと調べてみて elisp に対応しているものが見つからない…。自分で拡張したほうが早いかな。

スケジュール帳／サーバを立てたい。

　探しに探してようやく手に入れたお気に入りのスケジュール帳が、尊敬する上司が使っているものとまったく同じものであることが発覚。ちょっと嬉しい。ちょっとしたことだけれど、あれだけの人物が突き詰めて到達したのと同じ結論に自分が到達したということは自分の思考もさほど悪いものじゃなく、きちんとした勉強、努力、投資をすれば、思い描いている理想の自分に到達できるのかもしれないという希望を持つ。

　RoRの学習まとめ用とかその他諸々を兼ねて書いているWebアプリがごりごりと実装する段階からちょこちょことしたデバッグをする段階に移行。既存のコードをコメントアウトして直して日付毎にバックアップを取るというありえない事態（困難な、という意味でなく、あまりにも安易すぎる、という意味合いにおいて）になっているのでSVNリポジトリを立てたい。そしてOpenSSHも入れて自宅からでも出先からでもPuttyでログオンして作業できるようにしたい。

　問題はサーバにするマシンがないということ。いろんなパスワードやメールが蓄積されているマシンにOpenSSHを入れて常時接続というのはあまりにも性善説的。ノートPCを買っていまの環境を移行、自作機にUbuntuを入れてサーバにしたいと願うもお金がないわけで。数ヶ月悩み続けているのでボーナス一括で買っていいものかどうかと。ふむーん。

| 2008-05-10 | 雑記 | コメント : 0 | トラックバック : 0 |

JavaScriptの勉強をはじめた。

　時刻入力をするにあたって「未入力の箇所にはデフォルト値を入れる」という処理がやりたかったのだけれど、サンプルがなさそうな気がしたので勉強がてら自分で書いてみた。JavaScriptはコピペで済ませていて、自分で書くのは初めてなので「Rubyなら...」「Perlなら...」と思いながら調べつつ書いた。メモしておく。

test.html:


<html>
  <head>
    <title>Test</title>
    <script type="text/javascript">
    <!--
    function onStartClick() {
      if (document.F2.start.value == "Start") {
        document.F2.start.value = "End";
        
        for (i = 0; i < document.F1.elements.length; i++) {
          if (document.F1.elements[i].value == "") {
            document.F1.elements[i].value = document.F2.begin.value + "-" + document.F2.end.value;
            document.F1.elements[i].setAttribute("readOnly", "true");
            document.F1.elements[i].setAttribute("style", "background-color: #CCCCFF;");
          }
        }
      } else if (document.F2.start.value == "End") {
        document.F2.start.value = "Start";
        
        for (i = 0; i < document.F1.elements.length; i++) {
          if (document.F1.elements[i].hasAttribute("readOnly")) {
            document.F1.elements[i].value = "";
            document.F1.elements[i].removeAttribute("readOnly");
            document.F1.elements[i].setAttribute("style", "background-color: #FFFFFF;");
          }
        }
      }
    }
    // -->
    </script>
  </head>
  <body>
    <p><b>時刻</b></p>
    <form name="F2" action="#">
      <input type="text" name="begin" value="08:00" />
      <input type="text" name="end" value="17:00" />
      <input type="button" name="start" value="Start" onclick="onStartClick()" />
    </form>
    <p><b>結果</b></p>
    <form name="F1" action="#">
      01: <input type="text" name="text_area01" value="" /><br />
      02: <input type="text" name="text_area02" value="" /><br />
      03: <input type="text" name="text_area03" value="" /><br />
      04: <input type="text" name="text_area04" value="" /><br />
      05: <input type="text" name="text_area05" value="" /><br />
      06: <input type="text" name="text_area06" value="" /><br />
      07: <input type="text" name="text_area07" value="" /><br />
      08: <input type="text" name="text_area08" value="" /><br />
      09: <input type="text" name="text_area09" value="" /><br />
      10: <input type="text" name="text_area10" value="" />
    </form>
  </body>
</html>

　いくつかの項目を入力した状態で[Start]をクリックすると、

　未入力のところだけ指定したデフォルト値が入り、入力ができない状態になる。

　[End]をクリックすると元に戻る。

　先日の時刻入力制限と組み合わせれば予定通り。

　はずかしい...。

プロフィールをガッと作ってみた。

　2～3時間程度、暇だったのでMP3を聴きながら、プロフィールを作り込んでみました。
　http://pr.fc2.com/shida/

　いやはや、Piyoとかプロフとかいろいろあるんですね。便利っぽい。まぁ、Twitter とか Piyo とか使いこなせるほど積極的な性格してないんですけどね。

　Blogのデザインも自作してみたかったけど、タイムオーバー。
　これからちょいとお出かけ。

| 2008-05-06 | 雑記 | コメント : 0 | トラックバック : 0 |

iPod nanoを買おうかと思うのだけれど

　連休の終わりに備えて早めに起きようとは思っていたが、早すぎ（五時半に起きた）。

　タイトル通り、iPod nanoを買おうかと思うのだけれど、MGS3を好きになりすぎたあまり、記念に、
　
　"IN MEMORY OF A PATRIOT WHO SAVED THE WORLD"
　（愛国者を追悼して。この者は世界を救った）
　

　とか、

　"I'm still in a dream of the snake eater"
　（わたしはずっとSnake eaterを想っている）
　

　とか

　"I give my life not for honer, but for you."
　（わたしは命を投げ出そう。名誉ではなく、あなたのために。）
　

　とかオプションで刻印しようかと思う。

※和訳はいろいろなページからお借りしたものです。僕には英語力はありません…。

| 2008-05-06 | 雑記 | コメント : 0 | トラックバック : 0 |

I'm still in a dream of the snake eater.

　

　もうじきMGS4だなぁと思ってなにげにニコニコ動画で"Metal Gear Solid"を検索したら、MGS3 Snake EaterのMusic ClipがHit → あまりのカッコよさに号泣した（本当）。MGS4のためにPS3を買ってもいいなぁと思ってしまう...。スネークかっこいいよスネーク。

| 2008-05-03 | 未分類 | コメント : 0 | トラックバック : 0 |

divタグで3カラムのレイアウトを試してみる。

　よくからんで下さる瑞閏さんの「Libro,Musica,Planta　Ver2.1」で以下のような会話があったので、

当ブログのスタイルシートも眺めていますが、
floatがどこにも見つかりませんし、
HTMLはやたらとテーブルタグだらけで、
もしやtableレイアウトなのかと思っています。

それとも横マージンを3回指定するだけでもいいのか？
とも思いますが・・・。
所詮ヘナチョコウェブマスターはこんな程度です(笑)。
サイト開設３周年です。

　ちょっと気になったので試してみました。

  <body>
    <div style="background-color: silver; width: 100%;">
      hoge hoge hoge hoge<br />
      hoge hoge hoge hoge<br />
    </div>
    <div>
      <div style="float: left; width: 20%; background-color: red;">
        hoge<br />
        hoge<br />
        hoge<br />
        hoge<br />
        hoge<br />
        hoge<br />
        hoge<br />
      </div>
      <div style="float: left; width: 55%; background-color: green;">
        hoge<br />
        hoge<br />
        hoge<br />
        hoge<br />
        hoge<br />
        hoge<br />
        hoge<br />
      </div>
      <div style="float: right; width: 20%; background-color: blue;">
        hoge<br />
        hoge<br />
        hoge<br />
        hoge<br />
        hoge<br />
        hoge<br />
        hoge<br />
      </div>
    </div>
    <div style="background-color: silver; width: 100%;">
      hoge hoge hoge hoge<br />
      hoge hoge hoge hoge<br />
    </div>
  </body>

　↓結果↓

　

　こんな感じでいけるっぽい。ポイントは、
・左のdivをfloat: left; にする。
・中央のdivをfloat: left; にする。
・右のdivをfloat: right; にする。
　って感じです。

　あとは、適切な幅…、ここでは20%, 55%, 20%にしましたが、ピクセル指定とかでもいいかもしれない。ぴったり20%, 60%, 20%で100%にしていないのはIEで表示が崩れるからで、* { margin: 0; padding: 0; } とかで回避出来そうだけど、また別途調べようかなと。

　あとでこのへんのソースを調べてみよう。