どうも。退職者です。@damele0nです。 teck.kayac.com Advent Calender 2013 15日目のエントリです。 前日は、まったく恨んではいないのですが僕のプライベートな情報を社内でリークした @handlename 先輩の #15 SublimeTextでも使い捨てファイルを開きたい でした。まったく恨んではいないのですが。 さて、去年は「JavaScriptでおっぱいを動かす」というエントリでtech.kayac.com Advent Calendar 2012の2日目から世間様に苦言を呈されたという事態を踏まえつつ そもそも退職者という身分でありかつ、渋谷のディストピアこと闇リエで勤務しているということをわきまえながら Leap Motionでおっぱいを揉みたいと思います。 Leap Motionって? もはや説明不要でしょうか。 [公式サイト] 今年(
既に利用されている方々とほぼ同じ意見だと思うのだが、私がAngularJSを気に入って使っているのは 構造的に書ける MVVMぽい DOMを触らなくて良い ほぼこの3つに集約される。 1.構造的に書ける AngularJSはアプリケーションを書く際のコードを構造がほぼ決まっている。その構成はビューであるHTMLを除くと コントローラ サービス フィルタ プロバイダ ディレクティブ これらの要素に分類されDIにより疎に結合される。基本的には誰が書いてもこれらの要素を配置する必要がある訳で、同じ要素で構成されるということは他の誰かが書いたコードを読むことが比較的容易だということになる。(JavaScriptで最も苦痛なのは他の誰かが書いた、一か所に固まりすぎた又は逆に分散しすぎたコードを読むことである) 2.MVVMぽい 今のGUIプログラミングでMVCを意識するのはもはやテーブルマナーだろう
(追記: 2018年10月)何年か経ってから見ても内容大丈夫そうでした。 この記事はFrontrend Advent Calendar 2013の6日目の記事です。昨日は谷さんでWeb Components/Polymerを軽く触ってみるでした。(これ今後数年で大流行りしそうに思うので、未読なら是非!) さて、最近はHTML5だCSS 3だFlashやめてJS制御でアニメーションだーってんで盛り上がってるわけですが(周回遅れ)、いざアニメーションを実装してみても、なかなかスムーズに動いてくれなかったりしますね。 どうやったらスムーズに動くかってのを解説したいと思います。 なおこの辺りの情報は、概ね斎藤さんを中心としたFrontrend絡みの方々に教えて頂きました。感謝感謝。 先に結論 概念的なの GPU合成レイヤーを適切に使うと早い いわゆるハードウェアアクセラレーション 何がCPUで、何
連載目次 皆さんこんにちは。ネットエージェントのはせがわようすけです。今回から、HTML5やJavaScriptに関連したセキュリティの話題について連載することになりました。よろしくお願いします。 もう読みましたか? HTML5のWebアプリセキュリティに関する報告書 皆さんすでにご存じかと思いますが、2013年10月30日にJPCERTコーディネーションセンター(以下、JPCERT/CC)から「HTML5 を利用したWebアプリケーションのセキュリティ問題に関する調査報告書」が公開されました。 この報告書の調査の一部は、弊社が行いました。また、JavaScriptのセキュリティ上の問題について次々と鋭い指摘を行っているmalaさんにもさまざまな技術的アドバイスを頂いた上、日常的にWebアプリケーションのセキュリティ検査や構築を実際の業務として行っておられる専門家の方々にも査読をお願いして
久々のブログになります。 3年ほどJavaScriptを利用した開発をしてきましたが、最初はなぜJavaScriptでMVCフレームワークが必要なのかいまいちわからず、いろいろ試行錯誤してきました。 今日はタイトルの通りAngularJSが素敵だなということを書きたいのですが、よくあるベストプラクティスみたいなものではなく、自身がどのように思考回路を経由してここに行き着いたのかという経験談を記しておきたいと思います。 ちなみに私のJavaScript力は高くありませんのであしからず・・・。 jQuery 昔々、JavaScript MV(V)Cみたいなものがなかった時代、JavaScriptでリッチなものを作ろうとなるとjQueryやDojoのような低レイヤーのフレームワークが主に利用されていました。 その当時簡単なシングルページアプリケーションを作っていましたが私はjQueryを採用しま
Live Nation says its Ticketmaster subsidiary was hacked. A hacker claims to be selling 560 million customer records. An autonomous pod. A solid-state battery-powered sports car. An electric pickup truck. A convertible grand tourer EV with up to 600 miles of range. A “fully connected mobility device” for young urban innovators to be built by Foxconn and priced under $30,000. The next Popemobile. Ov
[Video] https://www.youtube.com/watch?v=HCR7i5F5L8c AngularJSのHype (盛り上がり感)があるようなので、GoogleのMisko HeveryとBrad GreenがGoogle I/O 2013でAngularJSの設計思想について語っているのを紹介します。 アプリ開発は、雛形構文(ボイラープレート)を利用しながらデータをブラウザとDBの間でやりとりさせるのが中心で、気づいてみると同じ雛形構文を書く作業をかなり繰り返している。コードを書いてる時間よりもコードを読んでいる方に時間がとられることも多い。この雛形構文を使った作業を極力減らして、アプリに付加価値をもたらすコーディング作業だけを抽出したいと思った。 コーディング作業が効率的になる構造が欲しかった。 フレームワークにテストを組み込むが、フレームワーク自身をきっちりテスト
JavaScriptを使ってアニメーションを書くときに有用なテクニックの、基本中の基本をご紹介します。おそらく、このブログを見ている人のほとんどにとっては釈迦に説法だと思います。今回、requestAnimationFrameの話すらしません。その点、ご留意ください。 まず、JavaScriptでアニメーションをする場合に気をつけないといけないのが、一度JavaScriptの実行(Context)を抜けないとブラウザに描画が反映されないということです。簡単に言うと、 <html><head><title>bad sample</title><script> onload = function() { var e = document.getElementById("e"); for(var i = 0; i <= 100; i += 5) { e.style.left = e.style.
oauth-jsはJavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。 ソーシャルなサービスが増えるのに伴ってOAuthプロバイダーはどんどん増えています。OpenIDと違って、同じ仕様で全てがこなせないのが辛いところです。そこで使ってみたいのがOAuthをまとめてくれるOAuth.ioで、さらにそれを簡単にしてくれるのがoauth-jsです。 デモの画面です。70を越えるプロバイダが利用できます。 ポップアップ版による実装です。 ウィンドウが閉じるとデモの画面でトークンが表示できています。 GitHubなどもポップアップにできます。 プロバイダによって多少のデータフォーマットの違いはありますが、概ね同じ形のようです。 oauth-jsを使うとリダイレクト方式とポップアップ方式を簡単に切り替えて使えます。いずれの形にしてもサーバサイド
Bootstrap 3のRC1がいよいよリリースされました。 RC1はリリース候補版で、可能な限り広範囲でテストをすることを目的としたものです。 Bootstrap blog: Bootstrap 3 RC1 Bootstrapは今まではデスクトップ寄りのよく使うインターフェイスをまとめたフレームワークでしたが、Bootstrap 3ではモバイルファーストになり、CSS/JavaScriptなど1,600項目以上、ファイルも300以上が変更されました。 WIP: Bootstrap 3 ブラウザはIE7, Firefox3.6のサポートが中止されます。これはIE7は「*」と「zoom:1;」のハックを削除したこと、Firefox3.6は「-moz-box-shadow」のハックを削除したことによるものです。 また、スタイルシートをレスポンシブ用も含め一つのファイルにまとめたり、ライセンスが
This domain may be for sale!
DOM 処理や Ajax など、JavaScript が外の世界とやり取りする部分というのは、一般的に待ち時間を多く必要とします。 パフォーマンスを改善しようと思った時に、ロジック部分でコツコツと節約するより、まずコストが高い処理を行わないようにするということで、驚くほどの効果を経験をされたことはありませんか? 今までパフォーマンス測定をされた方であればピンとくる部分があることと思います。 そんな時に役に立つのが、今回ご紹介する backburner.js です。 ebryn/backburner.js - GitHub backburner.js って? backburner.js とは Ember.js の run loop モジュールから切りだされたとても小さなライブラリで、短時間に集中的に発生するメソッド呼び出しの回数を制限したい場合などに利用することができます。 backburn
2013年05月08日18:21 JavaScript 実際のサイト上で動作するチュートリアルが簡単に作れるIntro.jsが便利すぎる件 さて、先日簡単なチュートリアル作ろうと思ったんですが、どうやるのが良いのかなーと思って悩んでました。キャプチャ取ってそこに説明文を書いて…ってしてもいいんですけど、キャプチャだと一部分なのでサイト上のどの辺なのかわかりにくかったり、サイト側は変更したのにキャプチャが古いままとかになったりしちゃいますよね>< とか思って探してみたらこちらの Intro.js が便利だったので紹介してみます。 さて、この Intro.js を使うとですね、サイト上で動作するチュートリアルを簡単に作れるんですよ。使い方も簡単で、動作させたい要素に対して data-intro (表示する説明文) と data-step (チュートリアルの何番目に表示するか) を指定します。チ
1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。
「データビジュアライゼーション(D3.js)を学ぶための教材まとめ」も大分量が増えてきて、初めてD3.jsを学ぶという人にはどこから手をつけて良いものか解りづらくなってきました。 そこで、ゴールデンウィーク中にD3.jsを学んでみたいという方に、いくつか厳選してお勧めしてみたいと思います。 スライドを眺める まずはD3.jsがどんなライブラリなのか把握しましょう。 ・about d3.js チュートリアルを学ぶ とりあえず分量・内容的に下記のチュートリアルがお勧めです。 ・D3 チュートリアル|スコット・マレイ|alignedleft 余裕があっていろんなレイアウトのグラフを描いてみたいなら、下記サイトを。 ・svg要素の基本的な使い方まとめ コード共有サイトを使って実践 チュートリアルを手軽に試すなら、コード共有サイトを利用するのが楽チンです。 jsdo.it, jsfiddle, Tr
setTimeout(fn, 0)より高速な関数は最近はこんな感じのを使うといいと思う。 var nextTick; if (typeof setImmediate === 'function') { nextTick = setImmediate; } else if (typeof process === 'object' && typeof process.nextTick === 'function') { nextTick = process.nextTick; } else if (typeof MessageChannel === 'function') { (function () { var channel = new MessageChannel(); var queue = null; channel.port1.onmessage = function () { t
2013年 04月 05日 とりあえずJavaScriptを記述して動作を確認したいって時はFirefoxに搭載のスクラッチパッドが断然便利 カテゴリ: Firefox タグ:javascriptエディタデバッグ JavaScriptを記述出来るエディタは沢山あるんですが、「とりあえずソースを書いて試したい」って時はFirefoxに標準で付属しているScratchpad(スクラッチパッド)を使っています。 Scratchpad(スクラッチパッド) Firefox 6で搭載されたスクラッチパッド。使ってる人は結構居るかもしれませんが、まだ知らない人も居ると思うのでちょっと紹介しようと思いました。 Firefoxにはブラウジングする機能以外に開発者向けの機能が沢山備わっています。Scratchpad(スクラッチパッド)もその中の一つで、これはJavaScriptのソースを記述・実行・デバッグが
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く