Google AnalyticsにみるJSの非同期初期化処理
Google Analyticsが提供するJSは以下の様な初期化処理をおこなっている。 Google Analyticsに限らす外部JSを読み込むライブラリの場合、「初期化は非同期で行いたいが、APIの読み出しは同期で行いたい」という要望がある。 通常こういった要望を叶えるためには、メインのJSが読み込み済みかどうか監視して処理を呼び分けるような長い初期化処理を貼り付けタグとして発行し各サイトに埋め込んでもらう必要がある。 ただ、貼り付けタグが長くなるとコピペミスも増えるし、貼り付けタグ部分で問題が発生した時に対処できなくなるため、貼り付けタグはできるだけ短いほうが嬉しい。 そこで最初に紹介したGoogle Analyticsのタグを見ると、初期化処理は実質「var _gaq = _gaq || [];」だけということがわかる。 ではこの初期化処理だけでどうやって「初期化は非同期だけど、A
jQuery 1.9 のソースマップ対応で圧縮版でもデバッグが簡単になった話
jQuery 1.9 がリリースされました。1.9 の新機能の中ではあまり注目されていませんが、ソースマップに対応したのが地味に便利そうです。 というのも、圧縮版の jquery.min.js を使っていると 何か問題が起きたときにスタックトレースを眺めても jQuery の部分が意味不明 デバッガーで jQuery のソースにステップインしても意味不明 といった理由で、開発中には非圧縮の jquery.js を使うことが多かったわけです。 それが、1.9 からはソースマップに対応したので圧縮版のままでのデバッグが簡単になってます。 超簡単な使い方 ソースマップに対応したブラウザーは現時点では Google Chrome のみなので、Google Chrome の手順を説明します。 (Firefox はソースマップへの対応を計画中らしい) 事前準備を忘れずに Google Chrome で
妻のパン屋のWebサイトを四苦HackしてIE対応した話 - give IT a try
はじめに 昨日公開した「第一回 プログラマ向けデザイン勉強会の内容を参考にして妻のパン屋のWebサイトをリニューアルしてみた」の続編を書きます。 今回は僕が苦労したIE6〜8対応のお話です。 実はIE8ユーザーの割合はIE9に次いで第2位！ Mac万歳！Chrome万歳！な僕にとって、IEは「どうせ使うことないし、どうでもいいよね〜」という「心の中でサポート対象外なブラウザ」でした。 しかし、店のWebサイトのアクセス解析を見てみると、実はIE9とIE8が1位、2位を占めていることがわかりました。 よく見ると8位にはIE6がまだしぶとく生き残っています。 この結果を見ると、「うーん、こりゃ完全に無視するわけにはいかんな・・・」と考えざるを得ませんでした。 IE対応を全く考慮していないとこうなる まず最初に、IE対応を全く考慮していないと、いったいどんな表示になるか見てみましょう。 トップペ
vimperator3.6 について - caisuiの日記
vimperator3.6で e4x を除去 し Template String で 代替するパッチがマージされました。 結果、pluginが影響を受けますので思い付くままに記載したいと思います。 vimperator 3.5で困ってないかたは、 バグの洗い出しや、pluginの 対応が終るまで移行しないほうが良いと思います。 (javascript.options.xml.chrome=true でも軽微ですが、副作用があります) Template Stringの 正しい仕様は、http://wiki.ecmascript.org/doku.php?id=harmony:quasisを参照下さい。 現段階において、Firefox にTemplate Stringは実装されいません。 vimperator side で 現行javascriptで動くように変換して実行しています。 5行で書
[JS]エクセルやスプレッドシートのように美しく機能的な表を作成するスクリプト -ParamQuery grid
HTMLで作成した普通のテーブルでも、Microsoft OfficeのエクセルやGoogleのスプレッドシートのように美しく機能的なテーブルにする軽量のjQueryのプラグインを紹介します。 ParamQuery grid ソート、セルサイズの変更、インライン編集などもできます。 ParamQuery gridの特徴 ParamQuery gridのデモ ParamQuery gridの使い方 ParamQuery gridの特徴 商用利用可のオープンソース。 データのフォーマットはHTML, Array, XML, JSONなど。 ソート、ページング、カラムのリサイズに対応。 デザインはテーマでカスタマイズ可能。 バーチャルスクロール・レンダリング。 セルのインライン編集。 対応ブラウザはIE6/7/8をはじめ、主要な全てのブラウザ。 サーバーサイドのフレームワークはASP.NET,
Deferred/Promisesと非同期処理 - 素人がプログラミングを勉強していたブログ
概念/仕組み Deferred/Promisesは非同期処理を簡単にするための取り決め。 callback hellと呼ばれているような、非同期処理によるコールバックのネストを軽減することができて非常に便利。 慣れれば便利だが、一見どう使えばいいのか分かりづらいので、少し解説を書く。 ここではPromises/Aという仕様を実装したQというライブラリを使うが、jQuery.Deferredなどもほぼ同じである。 まず、Deferred/Promisesは、関数のreturn、try/catchの非同期版である。 www.example.comの内容を取得し、正しく取得できたら中身を表示し、取得できなければエラーを表示する、というプログラムは 同期的なコードでは、 function get() { var req = new XMLHttpRequest(); req.open('GET',
jQueryを使って押したキーの判定をする
キーボードを押した時の処理を出すために、キーを押した時にどのような値が帰ってくるのかをチェックしておこうかなと思い、アルファベッドの文字だけを判定する判定のスクリプトを書いてみた。 タイプしたキーの判定 jQuery 1.3.2 日本語リファレンスを参考にしつつ、サンプルを作ってみた。 jQuery(function($){ $("div.preview input").keydown(function (e) { $("div.preview span#moji").text(e.keyCode); if (e.which == 32 || (65 <= e.which && e.which <= 65 + 25) || (97 <= e.which && e.which <= 97 + 25)){ var c = String.fromCharCode(e.which); }else{
複数のSubmitボタンがあるときにEnterキーで押すボタンを設定するスクリプト - カタヤマンがプログラマチックに今日もコードアシスト
ブラウザのフォーム入力を行う時、テキストボックスやチェックボックスにフォーカスがある状態でEnterを押すと、ブラウザが勝手にサブミットします。 便利っぽい機能ですが、テキストボックスが１つの場合は動作しないとか、押すボタンを決められないとか、若干の不都合を抱えていることは周知の通り。 特にSubmitボタンのname属性を元にしてサーバサイドの呼び出しロジックを決めているような場合は、結構致命的です。 で、その不都合を解消すると共に、Enterキーを押した時に押してほしいSubmitボタンを指定するためのスクリプトを探しましたがいいの見つからず、作成することにしました。 スクリプトはこんな感じです。 /** * Enterキーを押した場合に押したいボタンを設定する. * @param targetButtonId 押したいボタンのid * @mara formName フォームの名前 値
pure JavaScriptでアニメーションGIFを作る - 海峡
こんばんは、国民的スポーツのアニメGIFについてのニュースをお届けします。 今回はクライアントサイドのJavaScriptだけでアニメーションGIFを作る方法を共有させて頂きます。 ふつうアニメGIFを作ろうと思うとimagemagickなどを使ってサーバーサイドで処理させると思いますが、今回紹介するのはブラウザだけでアニメGIFを作る方法です。 jsgif antimatter15/jsgif · GitHub jsgifというJavaScriptでCanvasをアニメGIFに変換してくれる超絶便利ライブラリがあるのでこれを使います。 同名でアニメGIFをCanvasで制御再生できるライブラリがあって、そっちのほうが有名ですがそれとは別です。 どうやらAS3のライブラリをJSに移植したものみたいでソースコードを読もうとしても全然分からないけど、便利すぎるので全面の信頼をおいて使います。
はてな記法ワープロ
*はてな記法JavaScript はてな記法ワープロは JavaScript ならではの利点を生かしたダイナミックなワープロです。 試しに色々入力してみてください。即座に出力画面が反映されます((Windows 版 IE6 および Firefox 1.0 でのみ確認しています))。 はてな記法の変換は <a href="http://search.cpan.org/dist/Text-Hatena/">Text::Hatena</a> を JavaScript に移植した "text-hatena.js" を活用しています。 **変更履歴 |*2005/12/1|ソース機能追加 (HTMLソースを表示できます)| |*2005/11/21|はてな記法ワープロ完成| |*2005/11/13|text-hatena.js 移植開始|
オブジェクトのデフォルト値(valueOfとtoStringの関係)について - プログラミングを勉強するブログ
この記事の内容はすべてECMAScript5に基づいているのでIE8などでは違う結果になります 以前書いた記事で{toString : valueOf}という記述の意味について考えたのですが、コメントで間違いを指摘して頂いたので改めて書きたいと思います。 今回は簡単のために以下のコードで見ていきます。 var a = { valueOf:function(){ return false; }, toString:valueOf }; document.write(Number(a)); document.write("<br>"); document.write(String(a)); aという変数にvalueOfとtoStringの２つのメソッドを持つオブジェクトをリテラルで設定し、そのaをそれぞれ文字列、数値として評価した場合に表示される内容を確認するコードです。 これを実行すると 0
{toString : valueOf}というオブジェクトリテラル記述の不思議について - プログラミングを勉強するブログ
先日404 Blog Not Foundの404 Blog Not Found:Algorithm - 0と1を次々と返す簡単なお仕事という記事を読んでいて気になったことがありましたのでそのことについて。 といっても記事の内容そのものとは関係がないのですが、この記事の一番最後に追記として書かれているサンプルコードに下の物があります。 #!/usr/bin/js var flipflop = function(p){ return { p : 0, valueOf : function(){ return this.p = !this.p; }, toString : valueOf }; }; var fl = flipflop(); print(fl); print(fl); print(fl); print(fl); print(uneval(fl)); この中の toString :
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
汎用ソート殺し - d.y.d.
00:26 12/12/18 BookLive! 7月に出会ってからずっと電子書籍ストアとして BookLive! をひいきにしているのですが、一体どこが好きなのか語りたくなりました。 ITMedia の これでもう迷わない、電子書店完全ガイド という一連の記事の、 電子書籍の端末の話よりストアの話をしましょうよというコンセプトに思いっきり影響されています。 といっても、第一印象が「普通のことが普通にできるので感激した！！」というもので、 つまり今年の前半に使っていた幾つかの電子書籍ストア/専用アプリが残念だっただけかもしれません。 買った本がどこをクリックすれば読めるのか理解するのに10分かかった、とか、 6冊以上買うと本棚アプリから画面外に本がはみ出るので手でいちいち棚を変えて整理しないと読めない、とか。 本当に普通に使えるという以上に特筆することもないんですが、 あ、でも、今年になる
結局、JavaScriptのテンプレートエンジンはHandlebars.jsが最強だったという話 - Life goes on
若干タイトル釣り気味だけど。 クライアントサイドJavaScriptで使えるテンプレートエンジンのメモ - Life goes on この記事全然予想してなかったんですが、結構はてブされてて結論書いてなかったんで。 これ調べた時は結局Handlebars.js: Minimal Templating on Steroidsを全社的に使うという事になりました。 有識者とかのレビューにも良く耐えた優秀なテンプレートエンジンでした。 まあ色々要件はあると思うんで、一概には言えませんけど、helperメソッドの拡張性と、速度(プレコンパイルできるというのもある)、サーバー・クライアント問わずに使える、ちゃんと構文解析されてる(下記URL参照)などが決め手でした。 https://github.com/wycats/handlebars.js/tree/2b3e7773409b9fba68e275d
ちょっと便利なJavascriptオブジェクトの作り方
今回は、ちょっと便利なJavascriptオブジェクトの作り方をご紹介します。いわゆるモジュール・パターンと呼ばれている方法です。 はじめに 最近、HTML5への注目と共に、Javascriptを使用する機会が増えてきました。以下のように適用範囲は多岐に渡っています。 通常のWebサイトでのユーザビリティ向上 スマートフォン用Webサイト開発 HTML5アプリによるクライアント・アプリ開発 スマートフォンのハイブリッドアプリ開発 Node.jsによるサーバサイド・プログラミング このように、Javascriptが基幹となる仕組みが広がっています。クライアント側とサーバ側を同じ言語で作れることは、開発側にとってはとても有難いことです（学習コストの低減、人的リソース配分の柔軟性など）。もちろん、発注者やエンドユーアにとっても開発速度などの面で利益が生まれます。 Javascriptプログラミン
最近良くやるJavaScriptでのクラスの書き方 - Qiita
var Point = (function() { // コンストラクタ var ctor = function Point(x, y) { // new なしで呼び出すとエラー if (!(this instanceof ctor)) throw new TypeError('Constructor cannot be called as a function.'); this.x = x; this.y = y; }; var proto = ctor.prototype = {}; proto.constructor = ctor; // 別名コンストラクタ ctor.from = (function(c) { c.prototype = proto; return c; }(function from(object) { if (!(this instanceof ctor)) t
JavaScriptでのbuilt-in/DOM objectのprototype拡張 - monjudoh’s diary
@rosylillyが気にしていた のでまとめた。 built-in/DOM objectのprototype拡張による弊害 追加したプロパティ/メソッドがfor inで列挙される var obj = {a:1}; for (var i in obj) { console.log(i); } こうするとaだけ出るはずが、 Object.prototype.b=function(){}; こうした後だとa,bが出てしまうって奴ですね。 そのまま代入しないでObject.defineProperty/definePropertiesでenumerable:falseのプロパティとして定義すれば列挙されなくなるので特に問題ありません。 今回挙げるprototype拡張の弊害の内唯一これだけはECMAScript5時代になって解消されました。唯一これだけは。 built-in/DOM object
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Regexper
{ float: both }
