タグ「js」が付けられているエントリー

[予告]冬の自由研究

| | コメント(0) | トラックバック(0) [予告]冬の自由研究

まだ夏の自由研究が終わっていない気がしますが,冬の自由研究を決めました.冬はGoogle Chromeの拡張機能を書いてみようかと思っています.HTMLとJavaScriptで書けるらしいので,まぁなんとかなるかなって.JSが心配だけど.これが上手くいった暁にはお蔵入りしているid:d:kakku22との共著論文を再投稿したいと思う.っていつの話やねん!って言われかねないw.

関連:
「HTMLとJavaScriptで作れます」、グーグルが「Chrome拡張」を解説 - ニュース:ITpro
GoogleChromeの拡張を作る上でFirefoxアドオン作者が知っておくべき10の違い【GoogleChromeでニコ動拡張を作ってみた感想】 - love_firefoxportableの日記
青図~夏の自由研究 - 4403 is written
夏の自由研究が頓挫しそうな件について - 4403 is written
夏の自由研究をまだやっている件 - 4403 is written
CSS×2.0 in CSS2009 - 4403 is written

ある日,@expl01tの中のacさんから,こんな依頼を受けました.

@k4403 [ac] 今から依頼したいお仕事の内容をつぶやいてみるテスト.4403さんを「CSS2.0つぶやきプロジェクト」隊長に任命します.2.0の会場でつぶやいたら,表示するようにしたいです.

Twitter / exploit: @k4403 [ac] 今から依頼したいお仕事の内容 ...

ふむ.という漠然とした依頼を受けたので,お互いのイメージを確認してから,作れそうな予感を感じたので,プロトタイプを作成してみた.ご存じの通り,自分で書くコード量は最小にしたいので,作成に当たっては,まず使えるライブラリが無いかどうかを確認しました.結果としては,JuitterというjQueryを使ったライブラリがものごっつ目的のものそのままだったので,活用させていただきました.

というわけで,わずか一晩でプロトタイプは完成し,細かいところを修正・変更しながら,数日で完成しました.簡単でよかった~♪完成品はこちら.

Juitter for CSS×2.0 in CSS2009

jQueryバリバリで書いてます.Fx3.5とChrome4とIE8で動作確認してます.たぶん,モダンブラウザであれば,どれでも動きます.そのため,ぶっちゃけると,HTML+JavaScript+CSSで動いているので,全体を丸々保存すれば,ローカルからでも実行できます.

CSS×2.0当日はこれと同じものを出すかどうか分かりませんが,おおよそこのようなものが展開されていると思います.ご活用いただいて,皆様に楽しんでいただけたら,うれしいですっ!

ちなみに,どうでもいい開発こぼれ話をすると,当初はAIRを使おうかと思っていました.しかしながら,AIRは書いたことがないのでやだなーと思っていた次第です.JSは書いたことがあるので,まだ良かったです.

関連:
CSS×2.0ではTwitterでつぶやいて下さい:exploit&ac:So-net blog

初めてjQueryを使った(やや嘘を含む)のだが,包み隠さず正直にその感想を述べるならば,「超便利」の一言に尽きると思う.JavaScriptでの実装をしたことがないわけではなく,普通のJSとPrototype.jsを少々.本格的にJSで何かを書いたことはないです.そんなボクが,やめればいいのに,クライアントサイドだけでグリグリ動くアプリを作ることに.一応,ほかの言語も検討しました.C言語とPHP.どっちも向かなさそうだったので,JSに頼った次第です.

JSを選んだのには理由があって,Twitterでもつぶやいた(誰も反応しなかったけど)んですが,Pubsubhubbubデモみたいなのを作りたかったんです.

http://www.youtube.com/watch?v=ewQBgbysSOQ&fmt=18#t=2m45s 大まじめなつぶやき.pubsubhubbubのデモvideoにある追加されたのがリアルタイムに更新されていく見せ方はどのように実装するんですか??

Twitter / 4403: http://bit.ly/AAYTg 大まじめなつ ...

で.いろいろと調べた結果,jQueryでできるらしかったのです.それがshow()とhide()なんです.そんなわけで,jQueryでプログラムを書いてみたんですが,テラ便利.何が便利かって,充実のプラグイン.かゆいところまで手が届きすぎます.車輪の再発明は不要なので,ライブラリをグリグリ使わせていただいて,自分が手を加える箇所は最小限に.怠けているんじゃないよ?コードの信頼性を上げているんだよ.オレの書くコードなんて信用ならないもんね.それから「そんなことまでできるの!?」と驚きを隠せないのが,jQuery UI.カラーピッカーやスライダーが秒殺実装可能です.

あとは,なんといっても,Ajaxも簡単にできます.AjaxはJSの醍醐味ですね(ちがう?).当初はサーバサイドにもスクリプト(PHPでやるつもりだった)をおいて,JSONでAjaxな感じを思い描いていたわけですが,想定外にjQueryが強力で,クライアントサイドだけで事足りました.すごいぞ!jQuery!デレデレです.

まとめ:
jQueryラブ. 

関連:
jQuery: The Write Less, Do More, JavaScript Library
Plugins | jQuery Plugins
jQuery UI - Home
jQuery 1.3.2 日本語リファレンス
jQuery入門 – ポンクソフト
jQuery 開発者向けメモ

1年総決算エントリを書き始める時期になりました.今年はいろんな言語を扱いました.

  • C
  • Java
  • JavaScript
  • LaTeX
  • NQC
  • Perl
  • PHP
  • Prolog
  • XHTML + CSS

この中で苦もなく書けるのは,やはりC言語.難しいことをしなければ,リファレンスを読まなくても書けます(ぇ,それ普通?).入門してすぐに挫折したのは,Objective-C.オブジェクト指向が苦手なオレとしては,ありゃダメだ.今年はVBを書かなかったけど,年明けになると書かざるを得ない状況になるのかなぁ・・・.予め想定で書いておけばいいのかな?実家にはVB環境がないな(ぁ.

それから,(X)HTMLやらCSSやらは,相変わらずvalidな記述を心がけてます.W3Cの甘さに喜び,Another HTML-Lintの厳しさに半ベソです.マイブームはXHTML 1.0 Strictです.「まだ1.1じゃないのか」というツッコミは躱します.そうこうしている間に,XHTML 2.0やらHTML 5.0が出てくるでしょう(いつの話だ).

それから忘れてはならない言語は英語と日本語.相変わらず英語のスキルは向上していない.言ってることはだいたい理解できるのだが,喋ろうと思っても言葉が出てこないのはどうにかならないのだろうか.シナプスが一方通行になっているのだろうか?なお,日本語のスキルは社会人仕様になっているはずなので,少しは向上していると信じたい.

PHPでコードを書いたのは久しぶりだ.久しぶり過ぎて,いつ以来だろう.タグクラウドはperlだったから・・・.あぁDAI-HIPsを実装した時だから,07年夏かな.たまに書くと熱が入って良いね.これから卒研は佳境に入るから,CかJava一辺倒になるんだろうなぁ.また思い出した頃に,いつもと違う言語でコードを書いてリフレッシュしたいなっと.

というわけで,今回は所用でメール送信フォームを作りました.たぶん,真面目に探せば,その辺にフリーのコードが落ちているんだろうけど,機能が多すぎたり,逆に足りなかったり,カスタマイズが難しかったりで,要求に即したものがぱっと見で見当たらなかったので,フルスクラッチしてみた.いや,全然フルじゃないけど.フルスクラッチって言ってみたかっただけです.さーせん.以下,参考にした情報をぺたぺた.

苦労したのは,主に正規表現.つまりは,validator.jsです.これ,大変に良くできていて,便利です.便利だから,拡張してルールを追加しようとしたんだが,如何せん正規表現苦手っ子なので,単純な正規表現を作るのに四苦八苦.そんなんで自然言語処理とか,片腹痛すぎるわ.ちなみに,このvalidator.jsはコメント21で指摘されているように,長音記号をチェックできません.そういう時には文字コード表ですよね.わかります.

昨日書いた通りなんだが,愛用のプラグインであるTaggingHelperが動作しなくなって困っている件.今の状態はこんな感じ.

080816_th01.png

最新のMT4.2暫定版を使って,この状態です><.これだと,あまりにもブログ更新に影響が出すぎるので,自力で対応してみた.久しぶりにFirebugを使ってみたぜ.至って簡単に原因が特定できたよ!

080816_th03.png

こうしてください.これだけでokです.他に影響があったり,正しい修正方法じゃないかもしれないですけど,とりあえず,これで.っていうか,このトラブルって,オレだけなのかなぁ・・・.テンプレートをリフレッシュしてないのがいけない??よくわかりません><.

080816_th02.png

復活♪

200808170112追記:
テンプレートの不具合があったので,MT4.2を入れ直したところ,最新のMT4.2暫定版がそのまま使えました.お騒がせしましたm(__)m.よって,上に書いてある対策は無視する方向でお願いします.

jQuery用プラグイン「jquery.suggest」を使って入力補完機能を実装してみる : アシアルブログ

面白そうだったので,実装してみた.簡単すぎて,拍子抜け.

jquery.suggestのサイト等から以下の4ファイルを入手する.

search.phpsは参考にするだけなので,実際には使わなかったです・・・.続いて,MT側にテンプレートを作成します.インデックステンプレートに新しいカスタムインデックステンプレートを作成します.ファイル名等は適当に決めて下さい.コードも一部書き換えています.

080518_jquery1.png

このテンプレートによって作成されるsearch.phpは以下のような感じ.一部抜粋.

080518_jquery2.png

ここまでできれば,完成したようなもの.次に,検索窓がどのような設定になっているかを,適切なテンプレートを開くか,ページのソースを開くか何かして,確認します.

080518_jquery3.png

このブログではid="search"が設定されていることが確認できます.仕上げに,jqueryなスクリプトが走るように,ヘッダを書き換える.モジュールテンプレートのヘッダに次のように追記する.

080518_jquery4.png

赤線を引いた部分が検索窓のidと一致するようにします.気をつけるのはそこだけ.簡単だねっ!

実装結果

080518_jquery5.png

ね.簡単でしょ?(ボブ風)

タグ

あわせて読みたい