W3C、マウス、タッチ、ペン入力などを同一コードで統合的に扱える「Pointer Event」を勧告に。しかしChromeは実装しない方針
W3C、マウス、タッチ、ペン入力などを同一コードで統合的に扱える「Pointer Event」を勧告に。しかしChromeは実装しない方針 W3Cは2月24日、マウス、タッチ、ペン入力などを統合的に扱える「Pointer Events」を勧告にしたと発表しました（CSSのpointer-eventsとは別のものです）。 Web標準では、以前からマウスを想定したイベントが用意されており、2013年にはタッチ操作によるイベントを扱う「Touch Event」の標準化も行われました。 入力手段としてのマウスやタッチ、ペンにはそれぞれ異なる特性があります。マウスの場合にはクリックやダブルクリックがあり、タッチでは同時に複数の指による操作があり、ペンでは筆圧の属性があるといった具合です。 Pointer Eventsはこうしたそれぞれの特性を持つ入力手段を統合的に扱えるようにした仕様です。 Inte
What the Flux? (On Flux, DDD, and CQRS)
Flux is an application architecture designed by Facebook for their JavaScript applications. It was first introduced by Facebook in May 2014, and it has since garnered much interest in the JavaScript community. There are several implementations of Flux. Frameworks like Fluxxor keep to the original Facebook Flux pattern, but reduces the amount of boilerplate code. While other frameworks like Reflux
Backbone.JSからAngular2まで、全9大JavaScriptフレームワークを書き比べた! - paiza times
(English article is here.) こんにちは、吉岡([twitter:@yoshiokatsuneo])です。 ウェブ開発に欠かせないJavaScriptフレームワークですが、日々発展しておりReact.js, Ractive.js, Aurelia.js, AngularJS2.0など次々と新しいフレームワークが出てきています。 一体どれを使えばいいのか？何が違うのか？何から調べていいのか迷うことがあります。 そこで、現時点で事実上全てとなる、９大主要フレームワークについて、実際に使ってみて比較を行います。 Backbone.js Ember.js Knockout.js AngularJS(1.x) React.js Ractive.js vue.js Aurelia.js AngularJS2.0(アルファ版) これらのフレームワークでは、以下のような機能が実現さ
AngularJS+enchant.js+CoffeeScriptで音ゲーを作ってGitHubPages上で公開しました - undefined
これなに？ 無料音ゲー flavabeats github.com ブラウザ上で遊べる音ゲーです。 ノートと呼ばれるオブジェクトが曲に合わせて落ちてくるのでターゲットに重なるタイミングでキーボードのZ,X,C,V,Bを押していくゲームです。 楽曲はCreativeCommonsのものを使用しています。 なんで作ったの？ Vue.jsやReactやAngularJSやAurelia.JSなどフレームワークが乱立するなか何か一つ使えるようにならないといけない気がしたので勉強用に始めました。（あとcocos2d-JSのAndroidデバッグが嫌になりましたので気分転換に)。最初はAngularJSより学習コストの低そうなVue.jsを触ろうかと思ったのでですが、Vue.jsにはルーティング機能がついていないということで結局AngularJSを触ってみることにしました。(書籍も買っちゃってたし。)
HTML/JavaScript/CSS対応のWebIDE「Orion 8.0」がリリース。ホバーツールでエラー表示などが強化
OrionはWebブラウザから使えるエディタ、デバッガなどが統合されたツールで、HTML/JavaScript/CSSに対応。ファイルマネージャ、エディタ、Gitによるバージョン管理、デバッガ、プレビューなどの機能が含まれています。 エディタのキーバインディングには、viとEmacsが標準で用意されており、マウスとカーソルキーだけでなく使い慣れたエディタの操作でコードの編集が可能。タグを入力するときには下記画面のように補完機能も自動的に働きます。
今すぐ使えるRactive.js入門 - Qiita
Ractive.jsとは http://www.ractivejs.org/ データバインドに特化したjsライブラリです。 状態監視にVirtualDomの概念を用いているため、挙動が軽く高速です。 実装をテンプレートと、それを監視するRactiveモデルに分離することで、デザインとロジックの分離を実現できます。 モデル設定の記述が直感的かつシンプルで、初見の開発者でも何となく実装を理解できることが強みです。 またテンプレートに必要最低限のロジックを備えているため、複雑なオブジェクトの展開も難なく行うことが出来ます。 Vue.jsほど対応ブラウザに偏りがなく、Angular.jsほど巨大ではない、 データバインドを手軽に取り入れたい際に非常に便利なライブラリです。 Knockout.jsとは立ち位置が似ているので、記法が好みな方を選べばいいのではないかと個人的には思っています。 対応ブラウ
MQTTでオフィスハック with RasPi
http://iotlt.connpass.com/event/11373/ IoTLT vol.1にて発表。 MQTTを使った電子工作の入門編的なスライドです。 JavaScriptだけで電子工作を完結します。Read less
ServiceWorkerでモックサーバーを作る - Qiita
実験環境は Chrome Canary 43.0.2314.0 だけど動かしてる分は現時点の安定版(40)でも動くはず やりたいこと http://localhost:3000/api/* へのリクエストを全部serviceworkerに任せたい。 先行実装として Jxck/response-injection がある。 やり方 sw.js(になるsw.coffee) console.log 'worker started' self.onfetch = (event) -> console.log 'onfetch', event.request.url if event.request.url.indexOf(location.origin+'/api') > -1 event.respondWith new Response '{"foo": "bar"}', status: 200
JavaScriptで日本の祝祭日一覧を取得する - Qiita
はじめに JavaScriptで日付を操作するライブラリとして「Moment.js」や「XDate」等ありますが、和暦の取得や祝祭日の取得等には別のロジックが必要となることが不満で「UltraDate.js」というものを作ってみました。 Date.prototypeを汚さない形で日付の操作を行いたかったので ライブラリの中にDateオブジェクトを保持 Date.prototypeには無い関数を作成 Date.prototypeの関数をapplyで呼び出す といった形で作成しています。内部でDate.prototypeの関数をapplyで呼び出していますので、単純に「new Date()」としている所を「new UltraDate()」と置き換えるだけで現在のプロジェクトにも適用できるようになっています。 その中からいくつかDateオブジェクトのみでも使用できるように関数を切り出して、簡易版
AngularJSのエキスパート達が語る、AngularJSの使いどころとつらいところ（後編）。Deverlopers Summit 2015
AngularJSのエキスパート達が語る、AngularJSの使いどころとつらいところ（後編）。Deverlopers Summit 2015 JavaScriptのフレームワークの1つとして注目されている「AngularJS」は、どんな用途に向いているのか、学習コストはどれくらいか？ 使いにくいところは？ などの疑問をAngularJSのエキスパート達が次々に答えてくれるセッション「AngularJSの今とこれから」が、2月19日に都内で行われたイベント「Developers Summit 2015」で行われました。 （本記事は「AngularJSのエキスパート達が語る、AngularJSの使いどころとつらいところ（前編）。Deverlopers Summit 2015」の続きです） AngularJSを選んだ理由 川田氏 次の質問は、数あるフレームワークの中からAngularJSを選ん
Vue.js が辛くなってきた | status code 51
Vue.js が辛くなってきた。 ひとまず現状の辛さをダンプ 今日チームで改めて話し合って辛さがハッキリしてきたので、それをつらつらと書いてく。 (今のチームは僕を含めて Rails プログラマが多くて、フロントエンドを専門にやってる人はいない。) グローバル変数大量問題(もしくはイベント地獄問題) たくさんの状態(変数)が必要 && 複数 DOM にまたがるレンダリングがしたい。 今は、左ペインで選択して右ペインに出す、みたいな事をしている。 左ペインはタブで様々な種類の項目を選べて、選択したものを右側でリスト化して表示している。 これをやろうとするにあたって、方向性が２つあると思っていて 左ペインと右ペインでコンポーネントを分けて、親玉 ViewModel に変更を通知して親玉がレンダリング制御する -> イベント地獄 左ペインと右ペインの上位の親玉 ViewModel をつくって全て
【JavaScript】（基礎）親要素・子要素の取得・追加まとめ③ | unitopi - ユニトピ -
こんにちは！ unitopi新米ライターの、ケインでございます。 このシリーズも最終回。今回も、JavaScriptにおいて基本的だけど忘れがちな、JavaScript（jQuery）における「親要素・子要素の取得・追加（削除）」について、今回は「要素の追加と削除」のお話をさせていただきます！ ちなみに今回は、説明の仕方がこれまでの２回と異なるアプローチになっているので、その点ご承知おきください！（※なぜなら紹介する量が多そうだからです…） ※サンプルコードは、「JS」タブや「HTML」タブなどを交互に見ていってくださいね！ ※このシリーズのこれまでの記事は「その①」及びその②になります。まだご覧になっていない方で、合わせて勉強したい方はぜひご覧くださいね！ 【JavaScriptの場合】 jQueryに比べると少ないですが、それなりに表現方法の数がありますので、どんなものがあるか、一覧を
Fluxフレームワーク Arda が気になる10の理由 - Qiita
Help us understand the problem. What is going on with this article? どうも、@armorik83です。 Fluxフレームワーク"Arda"、皆さんご存知ですか? 概念や思想を含めて大々的に発表されたのは、おそらく2015年2月16日（記事掲載時点でおととい）という新たなOSSです。 開発者は@mizchi氏。Qiitaの中の人 (Kobito)、魂が震えてる人、Reactの人として有名かと思いますが、個人的にはAngularJSが嫌いな人という認識です。 今回、そんなmizchiさんが開発されたフレームワーク"Arda"をあえて取り上げたい衝動に駆られたので、興味のある方はお付き合い下さい。 動機 気になった理由の前に、ここに至った動機を前置きします。ここ長いです。例のアレな感じです。 思い出話 私は2013年秋からAng
HTML5 CanvasとWebGLの使い分け―CreateJS勉強会/池田発表資料 (前編) ― ICS LAB
2015年2月10日（火）、アドビシステムズ株式会社でCreateJS勉強会 (第5回)が開催され30名を超える方々が来場されました。勉強会のフォローアップとして、発表資料「CreateJSで制作するスペシャルコンテンツ」のスライドをブログ記事という形で公開します。本記事では口頭で発表した内容もできる限り記載しました。 なお、前編（CanvasとWebGLの比較）と後編(WebGLの最適化)の二部構成にしています。前編となる本記事ではスペシャルコンテンツ制作にあたり調査したHTML CanvasとWebGLの双方の利点・欠点をまとめています。 HTML CanvasとWebGL 今回のテーマは「HTML CanvasとWebGLの使い分け」です。皆さんもご存知の通り、HTML5のCanvas要素 (JavaScript ではCanvasRenderingContext2Dオブジェクト）は従
Node.jsのStream APIで大量プッシュ通知を高速化するテクニック
連載目次 プッシュ通知を秒間1万4000ほど送るには 前回の「大量データ処理時に知っておきたいAmazonDyamoDB活用テクニック4選」では、Pusna－RSのデータ永続化に使っているDynamoDBの活用テクニックについて解説しました。今回は、そのDynamoDBからAPNs／GCMへのデータ送信までを高速化させた方法を紹介します。 Pusna-RSの配信機能とは 連載第1回「プッシュ通知の基礎知識＆秒間1万を超えるプッシュ通知基盤のアーキテクチャと仕組みとは」の際に概要をお伝えしましたが、配信機能はPusna-RSの中で実際にプッシュ通知を行うための機能で、以下の【3】に当たる箇所です。 Pusna-RSではこの一連の流れを最適化させるためにNode.jsのStream APIを活用しています。今回は、このStream APIの活用について紹介していきます。 あらためてNode.j
2014学んで良かったベスト5 | それなりブログ
2014 年に学んで良いと思ったベスト 5 を雑に書き連ねます。 自分が良いと思ったタイミングが今年という話なので、それらのリリース時期とは無縁です。 2 月頃から仕事で使い始めました。 それまでは、見よう見まねで npm パッケージを作ったり Grunt タスク作ったりする程度でした。 最初は、クライアントJSのために簡単な Web-API や Socket-API を付属できるようにする、程度の学習に留めるつもりでした。 しかし、The Substack Pattern に代表されるような「小さい機能の処理を組み合わせて大きな機能を作る文化」に好意を持ったこと、フロントエンド周りの良いツールが多いこと、npm の使い勝手の良さ、などで、全体的に好きになりました。 まだまだ使いたいなぁ、と考えております。 来年は、「小さいWebアプリを手なりですぐ作れる」モジュール構成の一式を用意したい
JavaScript ベストプラクティス Part 1 | POSTD
ThinkfulはWeb/スマートフォンアプリの技術などを学ぶことができるオンラインスクール。プロフェッショナルな開発者がメンターとして1対1で伴走するため、他の同様サービスよりも続けることができる。 Javascript ベストプラクティス パート1 2つのパートに分けてお届けする「ベストプラクティス」のパート1では、MozillaのWebエバンジェリストであるChristian Heilmannが提供する人気のスライドショーから内容を抜粋しています。JavaScriptにはひどく扱いにくい特徴がいくつかありますが、それはこれまで以上にソフトウェア開発において重要になっています。この「ベストプラクティス」ではより読みやすく、効率の良いコードを書く手助けとなるサンプルコードやその使用例を紹介していきます。 もしWeb開発についてもっと学びたいと思うのであれば、私たちが提供しているフロントエ
気になる開発プロダクツ：第2回 JSON-lib 1.1 - JSON文字列とJavaオブジェクトとの相互変換｜gihyo.jp … 技術評論社
JSON-libの概要 JSON-libは、JavaオブジェクトからJSON形式の文字列を生成したり、その逆の処理を行うJavaライブラリです。Ajaxアプリケーションにおいて、Webブラウザで動作しているJavaScriptのプログラムとサーバ側のプログラムとの間でオブジェクトをやり取りする際に利用できます。JAR形式のファイルをSourceForgeからダウンロード可能です。ライセンスはThe Apache Software License, Version 2.0です。 JDK1.3用(json-lib-1.1-jdk13.jar)とJDK1.5用(json-lib-1.1-jdk15.jar)がありますので、使用するJDKのバージョンに合ったものをダウンロードし、ファイルのパスをクラスパス(CLASSPATH)に設定してください。ここではJDK1.5用による実行例を紹介します。 実
状態遷移図／表、すなわち設計をコードでテストする
状態遷移表からひな型コードを生成する この状態遷移表からコードを起こすわけですが、状態遷移の実装については『StateパターンでCSVを読む』を書きました。デザイン・パターンの一つ:Stateによる実装です。今回の実装はC、継承も仮想関数も使えないという利き腕を封じられた条件なので戦術を大きく変えにゃならんです。 状態遷移の実装は要するに「（1）現状態 と （2）受理したイベント の組」に対応する「（3）アクション と （4）遷移先（新たな状態）」を引き当てることに他なりません。ならば上記（1）～（4）の並びをレコードとし、そのレコード列（＝状態遷移表）から「（1）現状態 と （2）受理したイベント の組」に一致するレコードを探し出して「（3）アクション を実行して （4）新たな状態 に遷移」すればいい。 状態遷移表からひな型コードの生成には使い慣れた「T4-template」を用います。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSに死を！これはJSerの叫び！ #kbkz_tech