※この記事はBackbone.jsでつくるMVPなUIパターン【スクロールスパイ】前編からの続きの後編です。 ContentView 継承 ContentViewは文章を表示し、自身の管轄しているスクロール範囲を知っているコンポーネントです。Backbone.Viewを継承して実装します。
【後編】Backbone.jsでつくるMVPなUIパターン【スクロールスパイ】 | DevelopersIO
※この記事はBackbone.jsでつくるMVPなUIパターン【スクロールスパイ】前編からの続きの後編です。 ContentView 継承 ContentViewは文章を表示し、自身の管轄しているスクロール範囲を知っているコンポーネントです。Backbone.Viewを継承して実装します。
【前編】Backbone.jsでつくるMVPなUIパターン【スクロールスパイ】 | DevelopersIO
前回の更新からだいぶ間が開いてしまいましたがこのシリーズはまだ終わりません！今回はTwitter BootstrapにjQuery Pluginとして実装されているScrollSpyを真似して作ってみたいと思います。 ちょっと解説が長くなってしまったので前後編に分けてご紹介します。 後半はこちら >> Backbone.jsでつくるMVPなUIパターン【スクロールスパイ】後編 デザイン 4つの文章に対しそれぞれナビゲーションが存在し、文章のエリアをスクロールして閲覧している文章に対応するナビゲーションがアクティブ表示になるというものです。 このUIのhtmlは以下のようにコーディングしました <div id="ui-scroll-spy"> <div class="scroll-spy-nav navbar"> <div class="navbar-inner"> <div class="
クールでアニメーションするグラフを描画できるHTML5チャートライブラリ「Chart.js」:phpspot開発日誌
Chart.js | HTML5 Charts for your website. クールでアニメーションするグラフを描画できるHTML5チャートライブラリ「Chart.js」 次のようにクールな線グラフ、棒グラフ、円グラフ、レーダーチャート等のグラフが描けます 今時のデザインがいい感じですね 関連エントリ 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 テーブルをグラフに変換してくれるjQueryプラグイン 美麗なグラフをSVGで描画できるJSライブラリ「dc.js」 jQueryでブレットグラフを作れるjQueryプラグイン「jquery bullet graph」
asm.js:コンパイラのための低レベルかつ高度に最適化可能なJavaScriptのサブセット
JavaScriptのサブセットとして静的型付け言語を定義し、事前コンパイルを可能にすることでJavaScriptの実行速度を劇的に改善しようというasm.jsの概要を、1つ前の記事で調べました。 まだasm.jsの情報は少ないのですが、その中でも分かりやすくまとまった記事がDevon Govett氏のブログBADASS JAVASCRIPTのエントリ「asm.js: A Low Level, Highly Optimizable Subset of JavaScript for Compilers」です。 Govett氏に翻訳の許可を得たので、翻訳記事として掲載します。 asm.js: A Low Level, Highly Optimizable Subset of JavaScript for Compilers MozillaのDavid Herman、Luke Wagnerそして
JavaScriptの実行速度を劇的に改善するasm.jsの特徴は、CやC++のような言語をJavaScriptのサブセットで記述すること
JavaScriptの実行速度を劇的に改善するasm.jsの特徴は、CやC++のような言語をJavaScriptのサブセットで記述すること 6月のリリース予定で現在開発が進んでいるFirefox 22では、JavaScriptのサブセット言語仕様であるasm.jsと、asm.jsに最適化したJavaScriptエンジンのOdionMonkeyが搭載予定とのことです。この両者の組み合わせは、JavaScriptを型つき言語として事前コンパイルすることで、いま以上に高速に実行できると期待されています。 asm.jsとは、jQueryのようなJavaScriptライブラリのようなものでも、Node.jsのようなフレームワーク実装のことでもなく、JavaScriptを基にしたサブセットの言語仕様です。 新しい言語を作るのではなく、既存のJavaScript文法をそのまま利用しつつ高速化を実現するa
正規表現 - JavaScript | MDN
コンストラクター関数を使用すると、実行時にその正規表現をコンパイルします。 正規表現パターンが変わることが分かっている場合や、パターンが分からない場合、ユーザー入力など別なところからパターンを取得する場合は、コンストラクター関数を使用してください。 正規表現パターンの記述 正規表現パターンは、 /abc/ のような単純な文字、または /ab*c/ や /Chapter (\d+)\.\d*/ のような単純な文字と特殊文字との組み合わせからなります。 最後の例には記憶装置として用いられる丸括弧があります。 パターンのこの部分に一致した箇所は、後で使用できるように記憶されます。詳しくはグループの使用を参照してください。 単純なパターンの使い方 単純なパターンとは、直接一致するものを探したい文字で構成されたものです。例えば /abc/ というパターンは、文字列の中で "abc" という並びが正確
Vim で javascript 書くためにやってる設定 | バシャログ。
杉の木を伐採しまくるバイトを始める夢を見ました・・・。みなさん、こんにちは nakamura です。 前回 Vim で PHP 開発するための設定 を書きましたが、今回は Vim で javascript を書くための設定をいくつかご紹介しようと思います。（基本は前回 PHP 用に行った設定の javascript 版です） 関数名などの自動補完 PHP と同様に辞書ファイルを用意して neocomplecache で補完するだけです。辞書ファイルは以下からjavascript.dict と jQuery.dict を拝借して $HOME/.vim/dict/ に置きました。 config/vim/dict at master · guileen/config · GitHub （ただちょっと古いんだよな～・・・。自動生成するスクリプト軽く書こうかな・・・。） .vimrc autocmd
JavaScriptの開発に。スローモーションで実行して結果確認·SlowmoJS MOONGIFT
SlowmoJSは記述したJavaScriptを一行ずつ実行し、その結果を出力するライブラリです。 JavaScriptをデバッグする際にはconsole.logを使うのが一般的です（一部のIDEではブレークポイントもありますが）。しかし今回はJavaScriptを一行ずつ実行させられるライブラリ、SlowmoJSを紹介します。 実行例。お分かりでしょうか。上に書かれたコードを一行ずつ評価して、その際の変数の値を出力しています。 関数を作った場合も同様です。 SlowmoJSではprintという命令を使って出力を行えます。書いたコードがリアルタイムに評価され、その結果が表示されていくというのは非常に面白いです。ぜひお試しを。 SlowmoJSはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る 今はWebインスペクタやChrome
Web上でのプログラミングがさらに便利に。JavaScriptを使った開発補助·Tern MOONGIFT
Ternは入力補完や関数の引数表示と言った機能がついたJavaScript用プログラミング補助ライブラリです。 そろそろWebブラウザ上でコーディングを行える環境が整ってきたのではないでしょうか。プログラミングするためのエディタ環境として必要なのはハイライターなどの他にもたくさんあります。その幾つかを提供してくれるのがTernです。 入力補完。 文字を打つと絞り込まれていきます。 変数、クラスの定義を探します。 オブジェクトの種類を下に表示できます。 変数名を変更します。 名前空間に対応しているので余計なところは変更しません。 関数の引数を表示します。 デモ動画です。 Ternでは入力補完、変数やオブジェクトの定義元検索、関数の引数表示、変数名の一括変更と言った機能がサポートされています。いずれもローカルアプリケーションのプログラミングエディタには備わっている機能と言えるでしょう。しかしそ
CI as a Service ブラウザを使ったJavaScriptのテストをCIサービスで動かす方法のまとめ
Travis CIを始めとするウェブサービスとして使えるCIを使って、 JavaScriptのブラウザテスト(ブラウザ上でJavaScriptを走らせて行うユニットテスト)をやる方法をサービスごとにまとめてみました。 テストフレームワークとして Buster.JS を使用して行います。 Karma (旧Testacular) では公式サイトにも Karma – Travis CI でCI Serviceとの連携方法が記載されているのでそちらも参考にして下さい。 今回紹介するCI Servicesは以下のものです。 Travis CI drone.io BuildHive Jepso CI テスト実行の流れ Jepso CI を除いては、テスト実行の流れ自体は同じなので先に解説します。 Capture用のローカルサーバを立てる テストしたいブラウザで capture URL へアクセスする
Rails で JavaScript を国際化する - present
はじめに Rails で JavaScript を国際化するには、『i18n-js』という gem を使う。 fnando/i18n-js 自分が作っている Web アプリでそこまでやる必要性は無いかもしれないけど、 国際化せずに直接 HTML や JavaScript のメッセージに日本語を書き込むのは、何かに負けた気がするんで、やってみた。 i18n-js のインストール Gemfile に gem "i18n-js" を追加し、シェルで bundle を実行すればインストールできる。 i18n-js を有効にする Rails3.1 以降を使っていることが前提。 まず、app/assets/javascript/application.js に下記を追加する。 //= i18n //= i18n/translations 当初はこれだけで上手くいくと思っていたけど、開発サーバーを起動し
最近のJavaScriptモジュールの書き方 - yo_waka's blog
サーバサイド（特にNode.js）とクライアントサイド両方で動かしたいものは最近はこんな感じで書いている。 CommonJSのwiki見ててそこに紹介されてるソースコードで（どれだったか忘れたけど。。）やってたのを見ていいなーと思って真似っこした。 (function(define) { define([], function() { 'use strict'; /** * @constructor */ var SomeClass = function() { // initialize }; /** * @type {string} * @private */ SomeClass.prototype.hoge_ = 'hoge'; /** * @return {string} */ SomeClass.prototype.getHoge = function() { return th
や...やっと理解できた！(2) JavaScriptのスコープチェーン - maeharinの日記
前回はJavaScriptのプロトタイプチェーンについて、図解を用いることでなんとか理解できました。今回はスコープチェーンに挑戦してみます。前回と同じく「1. 図解を用いる」「2. 用語を明確に定義する」「3. Standard ECMA-262 3rd editionを情報ソースとする」というアプローチで紐解いて行きます。 用語の定義 ・本エントリの文章における表記は、以下の表の「ECMA-262 3rd」に統一する ・本エントリの図における表記は、以下の表の「本エントリの略称」に統一する ・本エントリ内におけるES3とは、Standard ECMA-262 3rd editionを指す ECMA-262 3rd 本エントリの略称 JavaScript（サイ本）第5版（日本語） Execution Contexts EC 実行コンテキスト Variable Object VO 変数定義の
JavaScriptを活用して現在時刻を表示する時計アプリを作ろう！
Monacaで作るアニメーションアプリ 前回はボタンをタップしたら反応するだけの単純なアプリを作成しました。今回は簡単なアニメーションを行うサンプルとして、時計アプリを作成したいと思います。 作成するアプリは、現在の時間と日付を表示するものです。数枚の画像で構成されており、1秒ごとに画像を切替えて時刻を表示します。完成したアプリのスクリーンショットを画面1に掲載します。 HTMLとJavaScriptの知識だけで、iPhoneとAndroid向けネイティブアプリが簡単に開発できることがMonacaの特徴です。このサンプルでは、JavaScriptについて少し踏み込んで解説を行います。 【画面1：完成した時計アプリ（iPhoneでの実行結果）】 事前準備 Monacaの会員登録が済んでいない方はMonacaのWebサイトからサインアップを行なってください。現在Monacaは無料で提供されてお
DOMを高速に操作するための skin.js というライブラリを作った - mizchi log
(タイトル修正 DOMを高速に操作 => DOMの値を高速に更新 at Sat Mar 09 2013 15:30:09 GMT+0900 (JST)) (Skin#inject実装したのでタイトル元に戻した at Mar 09 2013 18:10:04 GMT+0900 (JST)) 若手の会で、JavaScript Hell on Earth というテーマで話してきました。 js_hell_on_earth http://www.rvl.io/mizchi/js_hell_on_earth というわけでDOM抽象ラッパーつくりました。 mizchi/skin.js · GitHub https://github.com/mizchi/skin.js 目的 クライアントサイドJSでは一回書いたら終わり、ではありません。ゲームなどのリッチなユーザー体験を提供する際、高頻度でDOMを書き換
DailyJS: Backbone.js Tutorial: Routes
Part 1: Build Environment Part 2: Google's APIs and RequireJS Part 3: Authenticating with OAuth2 Part 4: Backbone.sync Part 5: List Views Part 6: Creating Lists Part 7: Editing Lists Part 8: Deleting Lists Part 9: Tasks Part 10: Oh No Not More Tasks Part 11: Spies, Stubs, and Mocks Part 12: Testing with Mocks Part 13: Routes Preparation Before starting this tutorial, you’ll need the following: ale
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Build and implement a single sign-on solution
TechCrunch | Startup and Technology News
JavaScriptコードをブラウザ上で動作テスト、共有できる・「Plunker」 - かちびと.net
Flow.js
