Vue.jsはそのまま使ってもよいですが「自分(プロジェクト)に合ったフレームワーク」を見つけるのにも向いています。 これは、後発フレームワークだけあり各フレームワークの特徴を意識した設計がなされているためです。他の著名なフレームワークとの特徴を比較した文書もあるので、こちらをチェックしながら導入を検討するとよいと思います。 そのため、以下はVue.jsの紹介と他フレームワーク(Knockout.js と Angular)へのステップという2セクションに分けて紹介していきたいと思います。 JavaScriptフレームワークの導入を行いたいがこの選択は慎重にいきたい、という状況であれば最初にVue.jsを試金石としてみて、効果的と感じられる機能からAngularやKnockout.jsに流れていくというのは十分ありだと思います。 2016/06: Vue.jsの1.x系に合わせて記述・サンプ
DOMの変更を検知するイベントが非推奨になり 代わりに新しく作られたMutationObserverなるもの。 MutationObserver - Web API インターフェイス | MDN https://developer.mozilla.org/ja/docs/Web/API/MutationObserver DOM変更検知は結構よく使うもの(特にユーザースクリプト)なのに 日本語の解説サイトが↑のMDNとMSDN、ここくらいしかなく その都度ググったり手探りで片っ端から試すのが面倒なので以下に自分用にまとめる。 コンストラクタ まずインスタンスを作る。 window.MutationObserverコンストラクタの引数に、DOM変更を検知した際に実行する関数を渡す。 function omega(data1, data2) { alert("ワレハメシアナリ"); consol
クロスドメイン対策といえば、JSONPだったりswf経由だったり色々(?)ありますし、JSONPで事足りれば、まあそれはそれでOK。 なんですが、ちょっと裏ワザチックな方法のような気がしてスマートさが足りないですよね。 まあ、別にJSONPでも良いんですが。 でもまあちょっと、他に方法があればそちらの方が良いのではないのかなー?なんて思ったり思わなかったり。 まあ、別にJSONPでも良いんですが。 IE8以降やChrome、FireFox、Safariなどのモダンブラウザで使える postMessage IE8をモダンブラウザに含めるかどうかはさておき・・・ postMessageを使えば、JSONPで無理矢理なやり取りを発生させること無く、クロスドメインでのデータのやり取りが可能になります。 とは言え、セキュリティにはご注意を。 サンプル とりあえずjqueryを使う事を前提に書いてし
Module Purposes§ 1 The Web Today§ 2 CommonJS§ 3 AMD§ 4 Module Definition§ 5 Named Modules§ 6 Sugar§ 7 CommonJS Compatibility§ 8 AMD Used Today§ 9 What You Can Do§ 10 This page talks about the design forces and use of the Asynchronous Module Definition (AMD) API for JavaScript modules, the module API supported by RequireJS. There is a different page that talks about general approach to modules on t
Source Map SourceMapとは何かについては以前、Source Mapを扱う関連ライブラリのまとめにて紹介しました。 Source Mapとは Source Map Revision 3 Proposal – Google ドキュメント SourceMap仕様 #JSオジサンで Source Map について話してきました : document SourceMap概要 JavaScriptのSource Mapの内部表現について Base64のmappings部分の仕組み source-map-visualization ビジュアライズツール mozilla/source-map SourceMapのコアと言えるモジュール(色々なモジュールが使う) SourceMapはAltJS等からJavaScriptへの変換など、Original Code -> Generated Co
Toggle shortcuts help? Toggle "can call user code" annotationsu Jump to search box/ Draft / August 4, 2022JSX Introduction JSX is an XML-like syntax extension to ECMAScript without any defined semantics. It's NOT intended to be implemented by engines or browsers. It's NOT a proposal to incorporate JSX into the ECMAScript spec itself. It's intended to be used by various preprocessors (transpilers)
最近フロントエンドでfacebook/reactをずっと使っている。世界的には一部のエンジニアの間で流行っているのだが、国内だとqiitaのタグ等を見てもどうも少ない。みんなもっと使うべきだと思うので、宣伝かねて意見をまとめてみる。 複雑化するデータバインドに対する懸念 MVWのVに対して思いを馳せると、だいたい次のことに行き着く。すなわち、「ある構造体の入力に対して、必ず一意なビューを生成したい」 {items: [1, 2, 3]} を入力とすると、 1, 2, 3のli要素になってほしい。これは単純な例だから問題に成り得ないように見えるが、アプリケーション全体の状態を一つのjsonとして定義し、 そこから常に0から組み立てればアプリケーションの健全性が確保できると考えたことはないだろうか? 現実の問題 UIのだいたいの状態は遷移で表現される。遷移の差分をプログラマが記述する。jQue
昨日の記事でHighchartsについて話題にしました。今日は実際にHighchartsを使った際に思いっきりハマったところがあるので、そこについて書いておきます。 昨日紹介したシンプルな例ではHighchartsに渡したデータ列には値のみが入っていました。このようなケースではデータ数は問題になりません(リファレンスによるとそのはず)。 ですが、Highchartsではデータ一つ一つに名前を付けたり任意のキーで値を渡したりすることができます。 一つ一つのデータはjson的な構造になっています。yというキーはY軸用の値、nameというキーはツールチップに用いられる名前用の値です。それ以外にも任意のキーを使うことができます。 $(function () { $('#chart').highcharts({ series: [{ data: [{y:3,name:"s6w1vnde"},{y:7
MQTTってなに? PUB/SUBプロトコルです。 HTTPと同じレイヤーです、主にTCP上で動きます。 WebSocket上でも使えます。 温度計などのセンサーの計測値を集めるM2MプロトコルとしてIBMに開発されました。 なぜMQTTなの? 公式には 小さいコンピューター(Rasberry PiやArduinoなど)が安価に開発できる (将来)センサーを載せた小さいコンピューターがIPネットワーク上に乗る データ収集サーバーとTCP/IPで直接やりとりしたい 電力が小さく低スペックなマシンで、扱いやすいプロトコルが必要 個人的には 仕様が短い 公式の日本語仕様がある 動きを確かめられる実装が既にある の点に魅力を感じています。 MQ Telemetry Transport (MQTT) V3.1 プロトコル仕様 PUB/SUBについての簡素な説明 PUB/SUBとは、Publisher
待望のDesktop Notificationですね node-webkit v0.10.1 released with desktop notification, fullscreen API: https://t.co/bVsyMeZ36z — Roger Wang (@wwr) 2014, 7月 30 ということで、待望の機能が実装されたようです。さっそく試してみました。 環境はMac OSX 10.8.5なので、google groupに貼られているリンクから最新のnode-webkitをDLしてセットアップ。 Google Groupはこれです 試しに通知してみる 最小限のコードですが、実装を確認してみます。index.htmlとpackage.jsonは以下のように。 <title>Sample node-webkit app</title> <meta charset="UT
違い、または付加機能 色々な周辺事情で、勢力を広げつつある Polymer さん。(つい最近、それに加担したような気もする) 「どこまでが Web Components で、どこからが Polymer なのか」を理解するためにもPolymerの機能をメモる。Polymer は色々なことを便利にしてくれるライブラリであり、差分を言い出すとキリがないので主要なポイントだけ。 <template> が自動で Shadow DOM に放り込まれる Shadow DOM内の <link> をインラインの <style> に展開 repeat のサポート {{interpolate}} のサポート <element> のかわりを <polymer-element> としてサポート on-click とかイベントハンドラの宣言 this.$ による idが付加された要素のコレクション observe に
HTML5によって、<audio>や<video>などメディアファイルを扱う機能が拡充され、JavaScriptからも音声ファイルが取り扱えるようになりました。 各ブラウザ毎に対応状況は異なりますが、これらの機能を有効活用するためAjaxリクエストによって音楽のバイナリファイルを取得し、再生するまでのJavaScriptをまとめてみました。 はじめに HTML5によって、<audio>や<video>などメディアファイルを扱う機能が拡充され、JavaScriptからも音声ファイルが取り扱えるようになりました。 ということで、各ブラウザ毎に対応状況は異なりますが、Ajaxリクエストによって音楽のバイナリファイルを取得し、再生するまでのJavaScriptをまとめてみました。サンプルは音声ファイルの受信、再生をCoffee Scriptで書いたものですが、バイナリファイルを取得した後の処理
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く