「JavaScript部分にサーバ側で動的な値入れるのエスケープ考えないとだし嫌だよねー」 「htmlタグのdata属性使ってhtmlのエスケープだけ考えればいいようにしたいよねー」 とか思って <html data-name="monmon"> みたいなことよくやります。 で、さらにjQueryなら <html data-obj='{"name":"monmon"}'> <script type="text/javascript"> console.log($('html').data('obj')); // Object {name: "monmon"} console.log($('html').data('obj').name); // monmon </script> という感じでJSON形式で書いて.data(key)使ってオブジェクトで受け取るなんてこともよくやります。 なの
[Video] https://www.youtube.com/watch?v=HCR7i5F5L8c AngularJSのHype (盛り上がり感)があるようなので、GoogleのMisko HeveryとBrad GreenがGoogle I/O 2013でAngularJSの設計思想について語っているのを紹介します。 アプリ開発は、雛形構文（ボイラープレート）を利用しながらデータをブラウザとDBの間でやりとりさせるのが中心で、気づいてみると同じ雛形構文を書く作業をかなり繰り返している。コードを書いてる時間よりもコードを読んでいる方に時間がとられることも多い。この雛形構文を使った作業を極力減らして、アプリに付加価値をもたらすコーディング作業だけを抽出したいと思った。 コーディング作業が効率的になる構造が欲しかった。 フレームワークにテストを組み込むが、フレームワーク自身をきっちりテスト
下記内容に関しては、まだ調査中で不明な点が多いので誤りがあるかもしれません、ご注意下さい。 Windows の Chrome を Version 27.x から Version 28.x へ更新したところ、webkitNotifications.createNotification や webkitNotifications.createHTMLNotification などのメソッドが使用できなくなりました。 (正確にはメソッドそのものがなくなっていました) 訂正: webkitNotifications.createNotification はまだ残っていました。(見間違いかな) 廃止に関しては詳細な情報がないので、断定はできないのですが、公式サイトには以下のような記述がありました。 Warning: webKitNotifications.createHTMLNotification
2013-08-19 uupaa's pure JavaScript module pattern pure JavaScript で記述し、Browser, WebWorker, Node.js で使えるモジュール定義パターンのご紹介。 uupaa 2013-08-19 18:05 前の記事
2013-08-17 Casper.JSのススメ Phantom.JSというヘッドレスブラウザがある。 これが超便利なんだけど、セッション周りとか込み入った操作をしようと思うと途端に操作(JSファイルへの記述)が面倒になる。 そこで、Casper.JSの出番だ。 CasperはPhantomと連携するライブラリで、簡単な記述で複雑な操作を実現することができる。 また、Phantomのレンダリングエンジンはwebkitで、Gekkoで動いているSlimer.JSってのもあって、これらの上で動くCasperを使っているとレンダリングどっちも使えるので捗る(と思う)。 今回はEnd-to-Endテストの実現を目的に、Casper.JSでwebサイトのHTMLを解析してみる。 もちろん、スクレイピングなどにも応用可能だ。 ↑ヨルムンガンドに出てくる主人公(ココ・ヘクマティアル)の兄キ
HTMLコーダー、JavaScriptプログラマ、PHP、Perlのプログラマといった職務を経験後、2010年に株式会社ピクセルグリッドに入社。大規模サイトの運用、開発の経験を活かしてバックエンドからフロントエンドまで幅広く担当。2015年、退社。好きな言語はJavaScriptとRuby。 著書に『ノンプログラマのためのJavaScriptはじめの一歩』（単著：技術評論社、2012年11月7日）があり、共著も多数。このほか、WEB+DB PRESS、Software Designなどにも寄稿。
http://nmi.jp/archives/488 を見ていて、 「+val」で数値として評価するコードはライブラリの中でも時々見るので、自分でコード書くときも+valでやりたいなと思い、parseInt(Float)やNumerとの挙動の違いを少し調べてみたのでメモ。 環境はChromeのDeveloper Consoleでやっています。 値 +val ParseInt(val, 10) ParseFloat(val, 10) Number(val) 10 10 10 10 10 "10" 10 10 10 10 -10 -10 -10 -10 -10 "-10" -10 -10 -10 -10 0 0 0 0 0 "0" 0 0 0 0 "" 0 NaN NaN 0 "hoge" NaN NaN NaN NaN "10a" NaN 10 10 NaN "10.0" 10 10 10
意外と認知度が低い感じですが、Google Analyticsがそろそろ新しくなりますよ！ 現在パブリックベータとして提供されているUniversal Analyticsが 予定では 7月中 に正式リリースになります。つまり今月！ 世の中見渡していると非エンジニアなウェブマスター向けの紹介記事が多い印象なので、ここではJavaScriptのインタフェースがどう変わったか、それを使ってエンジニアはどういうことができるようになるか、みたいな、よりエンジニア向けの話題を中心に書いてみたいと思います。 ソースは公式ドキュメントなので、より詳しく知りたい方はそちらを参照してください。 簡単なまとめ Universal Analytics(analytics.js)は... これまでのやつ(ga.js)よりJavaScriptのインタフェースがイケてる APIは存在するけどWebインタフェースが未実装
HTML/CSS 394 CSS仕様 123 CSS設計 55 HTML仕様 42 SVG 25 スタイルガイド 14 HTML/CSSの実践 138 HTML/CSSドリル 4 フォント 3 データ形式 6 性能と品質 52 セキュリティ 16 パフォーマンス 12 アクセシビリティ 23 ブラウザ 23 デザイン 70 コミュニケーション 10 ディレクション 51 ドキュメンテーション 7 JavaScript 468 ECMAScript 45 ライブラリ 68 ブラウザAPI 38 WebGL 42 テスト 36 JavaScriptの実践 64 JavaScriptの設計 9 JavaScriptドリル 19 非同期通信 5 DOM 9 Angular 30 Electron 4 Web Components 17 jQuery 24 Backbone 17 TypeScrip
utm_xxxを利用したユーザー追跡はまぁ便利ではあるのだけど、どうしてもURLの正規化に悪影響がある。設置したツイートボタンやブックマークボタンはこちら側で正規のURLを仕込んでどうにかすればいいのだけど、ブラウザーの拡張やブックマークレットにはどうしようもない。かといってリダイレクトでは訪問者にも管理者にもコストが高いので、replaceState()を使ってURLだけ書きかえるという話。 正規化する関数を発火させるタイミングの制御には色々アプローチがあると思うけど、素で書くといろいろ面倒そうなのでGoogle Analyticsのコードに混ぜることにした。 var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-XXXXXX-X']); _gaq.push(['_trackPageview']); _gaq.push(function
2013年05月08日18:21 JavaScript 実際のサイト上で動作するチュートリアルが簡単に作れるIntro.jsが便利すぎる件 さて、先日簡単なチュートリアル作ろうと思ったんですが、どうやるのが良いのかなーと思って悩んでました。キャプチャ取ってそこに説明文を書いて…ってしてもいいんですけど、キャプチャだと一部分なのでサイト上のどの辺なのかわかりにくかったり、サイト側は変更したのにキャプチャが古いままとかになったりしちゃいますよね＞＜ とか思って探してみたらこちらの Intro.js が便利だったので紹介してみます。 さて、この Intro.js を使うとですね、サイト上で動作するチュートリアルを簡単に作れるんですよ。使い方も簡単で、動作させたい要素に対して data-intro (表示する説明文) と data-step (チュートリアルの何番目に表示するか) を指定します。チ
ちょっと凝ったWebアプリケーションを作成していたり、あるいはWebのセキュリティに関わっている人ならば「Same-Origin Policy」(SOP)という言葉を一度は聞いたことがあると思います。日本語では「同一生成元ポリシー」あるいは「同一生成源ポリシー」などと訳されることもありますが、個人的には「オリジン」は固有の概念を表す語なので下手に訳さず「同一オリジンポリシー」と書いておくのが好きです。 さて、この「オリジン」とは何なのかという話ですが、これは「RFC 6454 - The Web Origin Concept」で定められており、端的に言うと「スキーム、ホスト、ポート」の組み合わせをオリジンと定め、それらが同じものは同一のオリジンとして同じ保護範囲のリソースとして取り扱うということです。 例えば、http://example.jp/fooとhttp://example.jp:
Niigata.LL ATND NiigataLL by dictav ポータルサイト ポータルサイトの方を見てもらうとわかりますが、VBAとかPowerShellとかもあって面白かったし、飛び入りで来てトークしてくれた方もいて面白かったし、PHPを話す人が居なかったのはなにか陰謀があったんじゃねーのかとか妄想できるし、濃密で良かったですよ。 トークタイトル:「JS TDD(and test) with your language」 Webアプリを作っていると得意（メイン）の言語とは別に JavaScript に触れざるを得ないプログラマは多いんじゃない？ という観点で、非JSer対象にJSのTDD周りの話を。 ※ 余談ですが、Niigata.LL では 18名の方の参加がありましたが、主にJavaScriptを書いているというJSerは2名ほど。開催日現在で Node.js 使っている方
Flow.js Version 1.0.1 をリリースしました。 使い方はこちらをごらんください http://www.slideshare.net/uupaa/flowjs リポジトリはこちらです https://github.com/uupaa/flow.js $ npm install flow_js でもインストールできます 既にインストールしている方は、 $ npm update flow_js でupdateできます。 主な改善は、 FlowのargsをJunctionに引き継いでいなかったので引き継ぐようにしました var Flow = require("flow_js").Flow; var junction = new Flow(2, function(err, args) { // この場合の args は = [ [1,4], [2,3] ] です。 // Array
(ε・◇・)з o O ( (ミ・◇・ミ) o O ( あたし。ずっと思ってた… (ミ・◇・ミ) o O ( あたしの脳みそだと Deferred/Promises は、ちょっと難しすぎるって… (ミ・◇・ミ) o O ( jQuery.Deferred 解説記事をいくつかみたけど、すごく… モジモジしてて、ちょっと縦長すぎるんですもの… (ミ・◇・ミ) o O ( だから作っちゃった… ).done(); 非同期処理をシンプルに書ける、とても小さなライブラリをリリースしました。 Deferred/Promises は既存の構造や, そもそもの考え方を大きく改変する必要がありますが、 flow.js はあまり大きな違和感もなく、現在の流れを維持したまま導入できると思います。 使い方はこちらをごらんください http://www.slideshare.net/uupaa/flowjs リポジ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
