Pure JavaScript Template Engine - mixi engineer blog
はじめましてhirokiです。こんにちは。新卒で弊社に入って一年が経過しようとしているので、そろそろエンジニアブロガーの仲間入りをしてみようかと思っています。 今回はJavaScriptのお話です。ハードボイルドなバックエンド側技術のご紹介が多い当ブログですが、スイーツ（笑）なフロントエンド技術もおもしろいんだよ！ということをアピってやろうという魂胆です＞＜。 HTML.Template(JavaScript) 弊社では、サーバサイドによるHTMLの出力テンプレートエンジンにCPANモジュールであるHTML::Template::Proを使用しています。今回はそのJavaScript実装をオープンソースとして開発しましたので、紹介をさせていただきます。 HTML::Templateは貧弱で、冗長で、洗練されていないシンタックスでお馴染みのテンプレートエンジンですが、高速で必要以上のロジック
The Messy Notebook » Javascript Tetris Pt 1: Rationale
The Messy Notebook - Occasional Braindumps by ThomasPart 1, 2, 3, 4, 5, 6, 7, 8 I've wanted to learn Javascript for a while now - and I'd like to learn it properly this time. Of course I've used a smattering of Javascript code here and there. Small stuff, like input validation in web pages. Unfortunately, I've mostly relied on good old "google-copy-paste-tweak" coding. I even used serverside Javas
JavaScript でテトリスみたいなゲームを作ろう！ - セキュリティ＆プログラミングキャンプ JavaScript 入門講座資料
HTML とは HTML とは、誤解を恐れずに言ってしまうとウェブページ（ホームページ）を作るために使われている言語です。 例えば、以下のようなものが HTML です。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <title>タイトル</title> </head> <body> <h1>見出し</h1> <p> 本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文<a href="hoge.html">ハイパーリンク</a>本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文 </p> </body> </html> サンプル イメージ湧きましたか？ では、何故 HTML という
Production JavaScript Debugging
YUI Blog Development Production JavaScript Debugging Production JavaScript Debugging You know the scenario. A bug is filed for a JavaScript issue in production. You update your development server to the same files (allegedly) that are in production but you can't reproduce the issue. Debugging your JavaScript code is horrifically difficult, if not impossible, because you're following best practices
選択範囲の取得について調べた - daily dayflower
はてなスターや Tumblr のブックマークレットなど，ブラウザ上の選択文字列をそのままユーザの入力として使えるサイトが増えています。JavaScript からどのようにすれば取得できるのかを調べてみました。 ブラウザ間の差異 DOM における選択範囲の仕様として以下の 2 通りがあります。 W3C Range Microsoft TextRange IE が Microsoft TextRange のみサポートしているのはまぁ予想通り。注意しなくてはいけないのは，W3C Range は，あくまで DOM 上の「範囲」を示すためのインタフェースであることです。ブラウザ上でユーザがどこを選択しているのか，などは UI の実装になりますから，W3C (Range) では規定されていません*1。そこで W3C Range をサポートしているブラウザは，選択範囲をあらわす W3C Range オブ
秋元@サイボウズラボ・プログラマー・ブログ: lightboxライブラリ37個の比較表
写真などをページ上で強調表示する、いわゆるlightbox効果を実現するJavascript+CSSライブラリを37個も集めて、ライブラリサイズやそれぞれの機能、どのJavascriptライブラリを使っているかなどで絞り込めるようにした比較表が発表されている。 このようなUI系のライブラリを使う際には、自分が普段使っているベースライブラリとの親和性などが重要だと思うので、このような形でまとまっているとdel.icio.usで”lightbox”タグで絞り込む、といった調べ方よりも楽にライブラリが選べていい。 via del.icio.us/popular この記事は移転前の古いURLで公開された時のものですブックマークが新旧で分散している場合があります。移転前は現在とは文体が違い「である」調です。(参考)記事の内容が古くて役に立たなくなっている、という場合にはコメントやツイッターでご指摘い
JavaScriptの文字列リテラルで「バックスラッシュ＋改行」してもいいのかも。 - こせきの技術日記
(追記 2008/1/23 19:30) 元の記事は、「JavaScriptの文字列リテラルで「バックスラッシュ＋改行」するのはよくない。」というタイトルでした。 ECMA-262 3rd editionで禁止だったのは間違いなさそうですが、id:nanto_viさんのコメントにあるとおり、4th editionに取り込まれる可能性が高いみたいです。適当書いてごめんなさい。 http://wiki.ecmascript.org/doku.php?id=proposals:bug_fixes http://www.ecmascript.org/es4/spec/overview.pdf Backslash-newline in string A common extension to ES3 syntax is to allow strings to be broken across sev
IEでのJavaScriptのデバッグ方法 - Microsoft Script Editor編 - - 日向夏特殊応援部隊
IEでJSのエラーになったときに立ち上がるデバッガって大体の人が使いこなせてないのではないでしょうか？ ちなみに僕もそうだったのですが、ふと思い立って調べてみました。 追記 (2008-01-10T14:24:30+09:00) はてブのコメントで、 MS Office持ってない人はVisual Web Developer(VWD)で。/ちょっと前にこんなの書いたので、VWD 2008使う人は参考にしてもらえると幸い。 http://d.hatena.ne.jp/terurou/20071218/119796573 とありました。 これはid:kaorunさんにも聞いていたので後で試そう〜と思ってたので助かります。 合わせてご覧になって下さい。 Microsoft Script Editorとは？ のようにOffice付属のツールだったりします。僕の環境では、 C:\Program Fil
InfoQ: JavaScriptへのマルチスレッド・プログラミングの導入
function backgroundLoad ( ids ) { for ( var i=0; i < ids.length; i++ ) { var a = getArticleWithCache(ids[i]); backgroundLoad(a.children); } } このbackgroundLoadはIDの配列を引数に取り、その各IDに対して上で定義したgetArticleWithCacheを呼び出します。これでIDに対応する記事のデータがキャッシュされます。そして読み込んだ記事の子記事のIDに対してbackgroundLoadを再帰的に呼び出すことで、ツリー全体をキャッシュすることができます。 ここまですべてうまくいっているように見えます。しかし、一度でもAjax開発を経験したことのある方ならば、これではうまくいかないということはすでにおわかりだと思います。これまでの例で
F's Garage：Javascriptによるインラインウインドウの研究
インラインウインドウとは、外部Javascriptで作られた、ウインドウ型のユーザインターフェースです。（勝手に名前を付けました） このウインドウをブックマークレットで呼び出すことで、いろんなWebサイトのページに組み込みのウインドウを表示することができます。 ウインドウ内の機能は、Javascriptで操作しますから、そのページを変更したり、外部と通信したり、URL、画像、文字を別のサーバーに送ったりすることができます。 モバツイッターに追加した、自分専用のミニブログ機能「OKUZASHIKI」に、このウインドウがブックマークレットとして提供されていて、PCブラウザで見ている画像情報や選択したテキストを、簡単にツイッターに送信することができます。 まるでtumblrのように画面上の画像やテキストを、ツイッターに送信できるようになります。 インラインウインドウのサンプル 上記のリンクをクリ
XPath は jQuery や Prototype.js と競合する技術ではなく、むしろ共存する技術です - IT戦記
昨日のエントリのブクマやコメントで jQuery からの移行がめんどう 時代は jQuery のようなコメントがありました。 これらのコメントから おそらく、「XPath が jQuery や YUI、Prototype.js、Dojo、MochiKit などの汎用 JS ライブラリと競合する」と思ってる方が多いのかなと思いました。 結論 XPath は汎用 JS ライブラリとは競合する技術ではなく、共存する技術だと僕は考えています。 理由 汎用的な JS のライブラリには、大きく以下のような機能があります。 DOM ツリー上の要素やノードを取得する DOM に新しい要素やノード、属性、プロパティ、イベントなどを追加する その他、クロスブラウザとか それに対して XPath が提供するのは DOM ツリー上の要素やノードを取得する というシンプルな機能だけです。 つまり、 XPath は汎
JavaScript-XPath をリリースしました！さあ、あなたも XPath を使おう！（解説付き） - IT戦記
JavaScript-XPath とは JavaScript-XPath は、 DOM 3 XPath を実装していないブラウザに対して、実用的な速度で動作する DOM 3 XPath のエンジンを追加します。 一言で乱暴に言ってしまえば、どのブラウザでも document.evaluate って関数で XPath 使えるようになるよ！ってことです。 以下が公式サイトになります。 http://coderepos.org/share/wiki/JavaScript-XPath DOM 3 XPath ってなんなの！？ めっちゃ簡単（で、ちょっとだけ適当）なDOM 3 XPath の説明をします＞＜。 JavaScript でよく使う document.getElementById や document.getElementsByTagName って関数ありますよね？ DOM 3 XPath
レイアウト切り替えスクリプト - 3ping.org
10coin.comのmarbleくんが、Vicuna CMS向けにレイアウト切り替えスクリプトを作成してくれました。どのようなものかは3ping.orgの右上にある「Layout Settings」というボタンで確認する事ができます。 Vicunaではbody要素のクラスでレイアウトを切り替える仕組みになっており、配布している純正のスキンは、全てのページで1カラムと2カラムでの表示を考慮して作られています。たとえば、この3ping.orgで使っているbazookaスキンでは、トップページ、個別ページ、カテゴリーや月別アーカイブも全て1カラムでも2カラムでも表示できます。(bazookaスキンは1,2カラムのみ、標準のスキンは1,2,3カラムのうちどれかを設定できます) このスクリプトは、Vicunaで配布しているスキン全てに対応しています。 今回作成されたJavaScriptは、body
javascript - 545バイトテトリス : 404 Blog Not Found
2007年11月02日09:00 カテゴリLightweight Languages javascript - 545バイトテトリス もう少し短く張りやすくしてみた。 わずか565バイトテトリスのプログラミング解説 「往年の名作「スーパーマリオブラザーズ」、あの濃い内容でわずか40キロバイト」に載っていたわずか565バイトのテトリス。文字数にして551文字。79文字*7行のプログラミングで、テトリスが動きます。 それがこちら。 545バイトテトリス window.onkeydown=function(e){K=e.keyCode};X=[Z=[B=A=12]];h=e=K=t=P=0;function Y(){C=[d=K-38];c=0;for(i=4;i--*K;K-13?c+=!Z[h+p+d]:c-=!Z[h+(C[i]=p*A-Math.round(p/A)*145)])p=B[
拡張機能でmultipart/form-dataをPOSTするためのスクリプト PostFormMultipart.js « ku
拡張機能内でGET/POSTをするのはXmlHttpRequestがお手軽ですが、ファイルのアップロードはできないのでファイルのアップロードをしたいときは努力が必要です。 前にソースコードを追ってFirefox内部でどうやってファイルをアップロードしてるのか調べたのですが、地味にふつうにアップロードしていたのでまねしてPostFormMultipart.jsというのを書きました。 今思うとFlock - The Social Web Browserからファイルをアップロードしているコードを探せば見つかったと思います。 2007.10.23 もうちょっとほかから使いやすいように修正。 Technorati Tags: javascript You’re currently reading “拡張機能でmultipart/form-dataをPOSTするためのスクリプト PostFormMul
ウノウラボ Unoh Labs: Ext.js入門: Grid編
Extは、ウェブアプリケーションを構築するための、クライアントサイドのJavaScriptフレームワーク（公式サイトのFAQより）です。日本ではまだ実際の利用例はあまり多くないようですが、たぶんに日本語のドキュメントがまだそれほど多くはないからではないかと思われ、今後利用事例は増えていくだろうと思われます。 Extの真骨頂は高機能でデザインの洗練された、（直ちに利用可能な）レディメイドのユーザインタフェースウィジェット群です。Extは「アダプタ」として、prototype.jsやjQuery、Yahoo! UIといったJavaScript拡張ライブラリを利用する設計ですが、現在は独自のアダプタも用意され、サードパーティのライブラリに依存しない実装も可能です。 現時点での安定版はバージョン1.1ですが、既に、大幅な機能強化が図られたバージョン2.0のアルファ版が公開されており、以下のページで
JavaScript で MIME ヘッダをデコード - bkブログ
JavaScript で MIME ヘッダをデコード MIME ヘッダのデコーダを JavaScript で書いてみました。BとQエンコーディング、およびUTF-8, Shift_JIS, ISO-2022-JP の文字エンコーディングに対応しています。
JavaScript から MML を再生する - JSMML - 2nd life (移転しました)
http://coderepos.org/share/wiki/JSMML テキスケ: ActionScript日記 - サウンドのリアルタイム生成（４） で公開されている、Flash から MML を再生できるライブラリ、 FLMML が素晴らしすぎるので、JavaScript からも再生できるようにブリッジを書いてみました。ライブラリ名は JSMML(まんま)。 JSMML を使うと、SWF を経由して JS な API から MML を再生できるようになります。 <script type="text/javascript" src="JSMML.js"></script> <script type="text/javascript"> JSMML.swfurl = 'JSMML.swf'; // default // onLoad に関数を入れておくと、SWF のロード完了時に呼ばれ
Unicode の文字列をエスケープする JavaScript - bkブログ
Unicode の文字列をエスケープする JavaScript Unicode の文字列を \uXXXX (UTF-16) と \xXX (UTF-8)、&#DDDD (数値文字参照)、Base64, Quoted-printable、 URL などの形式でエスケープする JavaScript です。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
はてな技術発表会日記 - 1月19日の技術勉強会
