不定期で出してるネタ帳ですが、毎週土曜日に出せたらいいなーと思ってます。 日曜日は週末ネタ、と毎週続けて出せるようにがんばりますね。 ずぼらな性格を直したい・・・。 今週のネタ帳TOPはJsやCSSのサイズを圧縮するもの。 過去記事: 無駄の多いCSSを一発で高圧縮してくれるサイト「CSS Compressor」 と似たようなサイトがずらずらと。 一部アクセスできないサイトがありましたが、良いまとめです。 (※ネタ帳では海外サイトの記事のみ扱っております。あしからず。)
こんにちは、情報環境技術研究室のsyuuと申します。 GoogleがMapsなどのサービスでFlashを使わずにHTMLとJavaScriptだけでここまで出来るのだ、という事を実証してみせ、Ajaxという言葉が流行ったのも一昔前、今ではすっかり定着した感がありますが、実際の所、ブラウザ上のJavaScriptでどこまでのプログラミングが可能なのでしょうか。 この記事では、私はまだまだJavaScriptを甘く見ていた、シバキ倒せばもっと色々出来るんだ!と感じさせてくれた幾つかのJavaScriptプログラムをご紹介したいと思います。 ■Concurrent.Thread - 標準的なJavaScriptだけで書かれたスレッドライブラリ まずは、「Concurrent.Thread(http://jsthread.sourceforge.net/cgi-bin/wiki/wiki.cgi?
Prototype JavaScript Framework Prototype.jsのコアデベロッパのひとりであるJuriy Zaytsev氏がPerfection kills ≫ What’s wrong with extending the DOMにおいて、次期メジャーバージョンとなるPrototype.js 2.0ではjQueryと同じオブジェクトラッパのテクニックを採用し、現在のPrototype.jsが活用しているDOMエクステンションのテクニックは採用しないことを伝えている。DOMエクステンションを採用したのは最大の失敗だったということのようだ。 DOMエクステンションはDOMオブジェクトへメソッドやプロパティを追加することをいう。直接追加することもできるが、prototype指定を使えばオブジェクトのクラスに対して追加することが可能。さまざまな利点がある方法であり活用されて
こんにちは、太田です。第1回は各ブラウザの特徴をまとめ、第2回は環境作りについて解説したので、ようやく今回からクロスブラウザの本題に入っていきます。まずはクロスブラウザ対応のパターンを整理し、そのパターンごとの対策をまとめます。 クロスブラウザとはなにか そもそも、クロスブラウザ対応とはどういうことでしょうか?ここで、この連載におけるクロスブラウザの定義を決めておきます。 サポート対象のブラウザで設計通りの表示・動作をして、たとえ未知のブラウザであっても、そのブラウザがWeb標準に沿っているなら最低限の表示・動作をすること サポート対象のブラウザについては第1回で解説した通りですが、メインターゲットはIE(6/7/8)、Firefox(3.6)、Chrome(4.1)、Safari(4.0.5)、Opera(10.51)とします。カッコ内はフルサポートするバージョンで、それ
Javascriptで(GPS,Wifi)位置情報を検出するには下記のようにします。 ただし、Firefox3、iPhone,iPadのSafariでないと動作しません。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>HTML 5 GeoLocation Demo</title> <script type="text/javascript"> if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { s = position.coords.latitude+","+position.coords.longitude; alert(s); }); } else { aler
IEBlog : The New JavaScript Engine in Internet Explorer 9 要点だけまとめ。 最近は、Javascriptを、本物のプログラムとして使うサイトが増えた。ページのCPU使用率の、八割方を、Javascriptが占めているようなページすらある。 そういうわけで、Javascriptをネイティブコードにコンパイルして、最適化するのが、最近の流行である。 動的な言語であるJavascriptを早くするというのは、なかなか難しい。ただに、ネイティブコードを生成すればいいと言うものでもない。Javascriptのような、動的な言語に対して、効率のいいネイティブコードを生成するのは、やはり難しい。が、テクニックは、いくつも考案されている。 問題は、効率のいいネイティブコードを生成するのには、コストがかかるということだ。 多くのサイトでは、Javas
Asa Dotzler: Firefox and more: mozilla borrowing a bit of code from apple MozillaのJavaScriptエンジンに関する混乱があるようなので、David Mandelinのブログを紹介しておく。David Mandelin's blog » JägerMonkey & Nitro Components。また、a quick note on JavaScript engine components ✩ Mozilla Hacks – the Web developer blogも役に立つ。 俺は技術屋ではないが、まあ、こういうこったろう。 数年前、JavaScriptエンジンはみな、めちゃ遅かった。んでまず、Appleが、SquirrelFish Extremeを作った。これは、Method JITと呼ばれるテク
この件について。 http://d.hatena.ne.jp/iskwn/20091215/1260828978 継承というかスコープがわかりやすいというのもメリットだと思うけど、カプセル化しやすいのも大きなメリットかなと思う。 function Foo(){} (function(){ var bar = 'bar'; this.bar = bar.toUpperCase(); function baz () { console.log('baz'); } this.baz = function() { baz(); console.log('BAZ'); } }).call(Foo.prototype); function Bar(){} Bar.prototype = new Foo(); (function() { this.hoge = 'hoge'; this.baz = fu
(注):以下、一部、推測で書いた部分が間違っていて、詳しくはコメント欄をご覧ください。詳細は、JaegerMonkey - MozillaWikiに書いてありました。 Mozillaのオフィシャルブログの記事、improving JavaScript performance with JägerMonkey – Mozilla Hacks – the Web developer blog、によると、Firefox のJavaScriptのエンジンをAppleのWebKitのJavaScriptのエンジンをベースに作り直すそうです。僕が英語を読み間違えていないことを強く祈ります。名称は、JägerMonkeyと言うそうです。 元々、JavaScriptのJITコンパイラによる高速化は、FirefoxのTraceMonkeyから始まりました。まず、インタープリタで走らせてから、型を推測し、JI
/** * @fileoverview HCalendar utilities. * @author Hitoshi Amano */ var HCalendar = function(element, eventElements) { this.element_ = element; this.eventElements_ = eventElements; this.events = []; for (var i = 0, l = this.eventElements_.length; i } */ HCalendar.getElementsByClassName = function getElementsByClassName(element, className, firstOnly) { if (element.getElementsByClassName) { return e
ES5のObject.getOwnPropertyNamesが入った。これは何をするメソッドかと言うと、enumerableでないプロパティを含めて全てのプロパティを列挙する物である。 つまり、 alert(Object.getOwnPropertyNames(Array.prototype).join("\n")); /* length,constructor,push,join,unshift,reduceRight,… */ のように使う。 Ownという名前がついていることから分かる通り、hasOwnProperty(name)がtrueになるものしか列挙されない。よって、プロトタイプチェーンを辿って全てのプロパティを列挙したい場合、下記のようなメソッドを使うと良い。 function getAllProperties(object) { var result = Object.cr
最近そっち界隈のアンテナを全然張ってなかったんですが、 FlMMLというFlashによるMML音楽再生アプリケーションを知りました。 はてなやニコニコ動画にも採用されているMML再生機能がそれだったんですね。 # もう2年以上前から存在していたようですが # 「おせーよ!」とかいう突っ込みはなしの方向で さらにそれをJavaScriptから利用できるJSMMLなるものがあるようで これを使えばお手軽に「Web上のMMLをブラウザ上で再生できる」という 素晴らしい環境ができるわけです。こりゃ導入しない手はない! ・・・とそんなわけで、テストがてらこういうページを作ってみました。 (←左の「メニュー」にもJSMMLという名前で追加しています) 使い方はtextareaにMMLを書き込んでPLAYボタンを押すだけ。 サンプルで以前TCP用に作ったレッドアリーマーの曲を移植して貼り付けてあるので、
SVG-editはWebベース/JavaScript製のオープンソース・ソフトウェア。時々こういうソフトウェアに出くわすからオープンソースの紹介は止められない。オンラインで動作するWebアプリケーションは多数存在し、画像編集すらオンラインで行えるようになっている。 オンラインでSVGを作成、編集! そういったソフトウェアは大抵Flashを使って動作する。だがSVG-editは違う、JavaScriptのみで動作するのだ。jQueryを用いたソフトウェアになっており、Webブラウザ上でSVGファイルを編集、作成できるようになっている。 まるで画像編集ソフトウェアのようなインタフェースをもち、右側に並んだツールアイコンを使ってドローができる。文字を書いたり、円や四角を描くこともできる。直線や自由線を描き、色を変更することだって可能だ。オブジェクトは描画後にドラッグして移動したり回転させることも
Chromeのcopyは, たしか, 隠しinput[type=text]作ってcopyさせたいものをvalueにいれて, selectionStart/Endをいじって, focusあてて, document.execCommand('copy')すればJSだけでできる. http://twitter.com/Constellation/status/7188365498 これを参考にcopy関数を作ってみた。Internet Explorer、Safari、Google Chromeで動く。FirefoxとOperaで上手くいく方法は発見できず。 おまけでFirebugの入ってるFirefoxでも動くようにしてみた。 function copy(text) { var input, success; if ("console" in window && "notifyFirebug"
ReducisaurusはJava製/Google App Engine用のオープンソース・ソフトウェア。Webアプリケーションが隆盛になり、JavaScriptを多用したシステムやCSSによる凝ったデザインのサイトが増えてきた。それぞれフレームワークを使ったりして複数のファイルを扱うケースも多い。 設定方法 JavaScriptやCSSのファイルを複数読み込むにはその分だけコネクションを行う必要があり、負荷がかかってしまう。そこで使ってみたいのがReducisaurusだ。ローカルファイルやリモートのファイルを読み込んで一つにまとめてアクセスできるようになる。 ReducisaurusはGoogleのエンジニアでJaikuの開発にも関わっているプログラマによるソフトウェアだ。実行はGoogle App Engine上で可能になっている。自分でサーバを立てることもできるし、Reducisa
前回書いたエントリー「JavaScriptのswitch文の速度はブラウザの違いでこんなにも差があった。」に予想外にたくさんのブックマークがつき、貴重なコメントも頂きありがとうございます。それにインスパイアーされたので、ちょっと補足を書きました。個々の項目はブコメにヒントを得ましたが直接対応するものではありません。 どうしてこんなパフォーマンステストをしたの? switch文のパフォーマンスを測定する動機になったのは、あるコードを読んでいたら、多量のswitch文があり、しかも、caseの数も多い。非常に見通しが悪い上に、これじゃ遅いだろうなと直感的に思いました。でも、ふと、switch文のcaseが定数なら分岐は高速に実行するようにコンパイルされるのではないか?JavaScriptのswitchはif-elseの並びと意味的には類似だけれど、caseが定数に限定されるなら、caseが多い
var ary1 = [1, 2]; var ary2 = [1, 2]; プリミティブな値(文字列とか数値)だけが格納されている2つの配列(ary1 と ary2)の内容が、同じかどうかを確認したい場合に… function like(ary1, ary2) { if (ary1.length !== ary2.length) { return false; } var v, i = 0, iz = ary1.length; for (; i < iz; ++i) { if (ary1[i] !== ary2[i]) { return false; } } return true; } alert(like(ary1, ary2)); // true とか書いてませんか? もっと短く… alert(ary1.join(",") === ary2.join(",")); // true も
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く