JSX - 公開から１年を迎えて
2. 自己紹介 n 名前：奥 一穂 n 経歴： n モバイルウェブブラウザ「Palmscape」「Xiino」の開発 (1996-2003) n IPA未踏スーパークリエータ (2004) n サイボウズ・ラボ (2005-2010) n Japanize, Pathtraq, Q4M, mycached, … n ディー・エヌ・エー (2010-) n R&Dに従事 Aug 24 2013 JSX - 公開から１年を迎えて 2 3. altJS とは? n JavaScript に変換して実行される言語 n 背景: JavaScript の普及 n ウェブブラウザで動くのは JavaScript だけ n ベンダー間の競争の結果、実行速度が高速に n ウェブブラウザ以外でも JavaScript を使うように n サーバサイド: node.js n クライア
ステートフルJavaScript 4章 | jekylog
そもそも、コントローラとは一体何でしょうか。簡単に言うなら、コントローラはアプリケーションの中でビューとモデルとをつなぐ接着剤の役割を果すものです。ビューとモデルの双方に関与しているコンポーネントはコントローラだけです。ページが読み込まれると、コントローラはビューにイベントハンドラを関連付け、コールバックを適切に処理し、必要に応じてモデルとのやり取りも行います。 便利なライブラリも存在しますが、コントローラの作成にライブラリは必須ではありません。コントローラにとって必要なのは、モジュール性を持ち独立した存在であるということだけです。疎結合度の高いコンポーネントとしてふるまうべきであり、グローバル変数を定義したりすることは可能な限り避けなければなりません。これを実現するための優れた手法がModuleパターンです。 4.1 Moduleパターン ロジックをカプセル化してグローバル変数の衝突によ
iOS6ではページをスクロール中に発生したタッチイベントからJavaScriptのタイマーがセットされない？
iOS6ではページをスクロール中に発生したタッチイベントからJavaScriptのタイマーがセットされない？ このブログ記事で問題にしているiOSのバグは、iOS6.1ですでに修正されています – – – – – – – 先日公開したCOSUMIのHTML5版には、「iPad3でページをスクロール中に碁盤や碁盤の周りのクリッカブルな所をタップするとその後の動作がおかしくなる」という不具合がありました。私もいまだによく分かっていないところがたくさんあるのですが、原因とそれに対してとった対策を簡単に書いておきたいと思います(このブログ記事には私の勘違いが含まれている可能性が高いです。すべてを鵜呑みにはしないでください)。 この不具合に気づいた時、まず最初に思ったのは、これはフェードイン・フェードアウトが絡んでいるのでは、ということでした。スクロール中のフェードイン・フェードアウトは、描画がたい
iPhone/Android/PC 対応。jQuery で書くタッチイベント
こんにちは！プロダクト企画担当の林です。 今回は、前回予告していた通り、タッチイベントについて書かせていただきます。 他所でもタッチイベントについて取り扱っていますが、当記事でのポイントは、 jQuery を使っている。（jQuery Mobile は不要です） iOS / Android で動作確認済み。 タッチできない PC の場合、マウスで動く。 この３点です。 こちらを実際に動作するコードにて解説します。 動作確認環境 タッチ環境 → iPhone / iPad / Android マウス環境 → Sleipnir / IE / Firefox / Google Chrome / Safari / Opera タッチイベントについて タッチイベントとは、スマートフォンなどで画面を直接指でタッチしたときに発生するイベントのことです。 イベントの種類 touchstart : タッチし
iOS6 バグ – hirokonaBlog
■iOS6ではページをスクロール中に発生したタッチイベントからJavaScriptのタイマーがセットされない？ iOS6ではページをスクロール中に発生したタッチイベントからJavaScriptのタイマーがセットされない？ この記事でjqueryのfadeinでタイマーを使っているのを知りました。 更にはスクロールだけではなくピンチイン・ピンチアウトも対象となるとの事！！ 某案件のモーダルひょっとしてフェードアウトに発火できないんじゃ。。。。 ■iOS6 スクロール中のタイマー発火絡みのバグ備忘 ::ハブろぐ http://havelog.ayumusato.com/develop/javascript/e528-ios6_scrolling_timer_notcall.html 決定打をいただきました。ぜったいコレや！要チェックや！ お名前はよく聞くあほむさんの記事。たすかった。本当に有難
JSbooks - Free Javascript Ebooks
Learn JavaScript for free ! Discover the most popular free JavaScript books and improve your skills, thanks to the developers community ! Fork it on GitHub and add any books related to your best programming language :)
Ajax遷移するページのページビューをGoogle Analyticsで計測する | かえラボBlog
Ajaxで他のページを取ってきて、コンテンツをガリガリ書き換えてしまうようなサイトを先日案件で作ったのですが、従来の方法ではGoogle Analyticsで遷移先のページビューを取得できないことに気づいて、実験を行ってみました。 実験のために作成したデモがこちらです。 Google Analytics Demo 何をやっているかを解説していきます。 以下のような部分がAjaxでページを書き換える処理の例です。 今回はjQuery 1.7.1を使うことを前提にしてコードを書いています。"ul a"セレクタ（いかにもやっつけですが。。）で選択されたa要素をクリックすると、href属性値で指定されたURLをAjaxリクエストし、その内容で <div id="contents"/> の中身を書き換えちゃうよ、というものです。 $(function() { $(document).on('cli
JavaScriptのテストを開発工数に入れてもらうには？
2013年4月27日、六本木ヒルズ森タワーのグーグルにて「第38回HTML5とか勉強会」が開催された。HTML5とか勉強会とは、HTML5に関心のあるエンジニアやWebデザイナ向けの勉強会だ。今回のテーマはJavaScriptのテストフレームワーク。別室のサテライト会場を用意しなくてはならないほど会場は多くの参加者であふれた。テーマへの関心の高さがうかがわれる。テストフレームワークを使いこなす現場のプロたちの解説により、その最新事情と基本的な使い方が分かった。 JavaScriptテストの必要性と最新事情 サイボウズの佐藤鉄平氏は、JavaScriptのテストの基礎知識と全体像について語った。 公開スライド 佐藤氏は、結合テストやユニット（単体）テスト、そのほかにユーザビリティテストなど、そもそもテストにはどんな種類があるのかを解説した後、ユニットテストの重要性を強調した。技術面で開発チー
HTML5 CanvasとCSS3のスマホブラウザでの描画性能 - ICS MEDIA
スマートフォンのブラウザでどの程度のグラフィック表現が可能なのか、性能が気になりませんか？ 近年、HTML5を利用できる分野はウェブサイトのみならず、ゲームやSPA（シングルページアプリケーション）など多岐に渡っています。そこで、本記事ではiOSやAndroidの新旧さまざまな端末を使ってパフォーマンスを検証。記事の前半では描画性能を、後半ではJavaScriptの計算性能を測定しています。 描画性能の検証ビデオをご覧ください さまざまな端末を使って、描画検証の様子を録画しました。この80秒の動画では画像のオブジェクトの表示可能な個数を測定しています。ビデオの後半が見どころで、iPhone 5のパフォーマンスが良すぎてビデオを早送りするほどスコアがでるまで時間がかかっています。 さまざまな端末のスコアを測定しました 次の表に、2012年までに発売されたスマートフォンのスコアを掲載しました。
require.jsの使い方のメモ | Code of Glass
ブログ用のテーマを修正する時に、RequireJSの使い方を調べたので、メモ。 いろいろ使い方があるけど、今回は、リソース取得の制御と、jQueryモジュールの読み込む場合がメイン。 require.jsは、バージョン2.1.4を使用。古いバージョンと、2系でライブラリ依存周りの指定が変わっているようなので、注意。 呼び出し側の設定 require.jsのパスに合わせて、定義。require.js自体をCDN参照にしたい場合は、読み込み失敗時のフォールバックを含めて、指定した方がいいと思う。 <script data-main="/assets/js/main.nocdn" src="/assets/js/require.min.js"></script> require.jsでの設定 main.cdnの実装は下記のような感じにする。 設定方針は、下記。 CDN経由で取得できる場合は、そち
ウェブページの高速化のために読んでおきたいサイトのまとめ
ユーザビリティの改善や検索エンジン対策としてウェブページの読み込みスピードの高速化は非常に重要です。ということで、ページの読み込みスピード向上のために役立つサイトをまとめてみます。 ページ読込速度の重要性 次の事例にあるように、ユーザーは表示速度に敏感です。 Googleによるとページの読み込みが0.5秒遅くなると、検索数が20%減少する Amazonによるとページの読み込みが0.1秒遅くなると、売り上げが1%減少する そして、Googleのアルゴリズムにウェブページの読み込み速度が追加されて以降、サイトの高速化への注目度は高まっています。 Google、ウェブページの読み込み速度をアルゴリズムに取り入れたことを発表 | 海外SEO情報ブログ Googleがついに順位決定に表示速度を使い始めた（公式発表） | Web担当者Forum Google、検索順位にページ読込速度の考慮を開始 [詳
【CSS/JavaScript】CSS/JavaScript高速化のためのまとめ – T2
【CSS/JavaScript】CSS/JavaScript高速化のためのまとめ 10月 1, 2012 admin 読了: 約 8 分 現在、現職の制作会社でマークアップと簡単なJavaScriptを仕事で行う中、最近機会があって、某ヒカリエに所属するフロントエンドの方と話しをした際 もっとスピードを意識した方が良いなと個人的に感じたのでその辺りを纏めておきます。 photo credit: Express Monorail via photopin cc CSSの高速化について CSSの高速化ですが、色々な角度からアプローチというか見なければなりませんよね。 ざっと挙げて行きたいと思います。 １．CSS Spriteの使用 ⇒ text-indentは使用しないりーフィーラングリッジ法を使用する事。 スマートフォンでは特に重要 前記事でも挙げましたが、サイバーエージェントのAmeba、
» スマートフォンサイトにおけるアコーディオンの使い方 | Webnoborder
スマートフォンサイトでは、表示スペースを節約する手段の１つとしてアコーディオンを使う場面が多くいため、アコーディオンについての考え方を整理してみました。 アコーディオンの最大の魅力と欠点 アコーディオンとはタイトルをタップ（クリック）するとスマートフォンサイトでは、表示スペースを節約する手段の１つとしてアコーディオンを使う場面が多くいため、アコーディオンについての考え方を整理してみました。 アコーディオンの最大の魅力と欠点 アコーディオンとはタイトルをタップ（クリック）すると内包している情報を表示するUIで、最大の魅力は同レベルの情報をまとめて管理できる点につきます。 例えば全ての商品カテゴリを１つ１つ並べて探すより、興味のある大ジャンルを選んでから細かいジャンルを探したほうが探す時間を短縮できるため結果、探しやすくなります。また余計なページ遷移数を減らせることも出来ます。 ただしタイトル
Android4.0とiframe
Android4.0とiframe iframe内でコンテンツを展開するとAndroid4.0でシビレルくらい様々なバグが発生します。 弊社松田の調べによると見つけただけでも以下のような不具合があるようです(Galaxy Nexus調べ)。シビレますね。 a要素に display:block を指定しても、必ずインラインになる position:fixed で配置した要素そのものがタップできない document.body.scrollTop が取得できない -webkit-tap-hightlight-color の指定が効かない ページ内のアンカーリンクが効かない ページの最下部に配置したa要素はタップはできるが、リンク遷移せず、イベントも発火しない z-indexで下に重なる要素が、pointer-events の指定が全く効かなくタップできてしまう js等で要素を位置移動しても、要
サーバサイドJavaScriptの本命「node.js」の基礎知識
本稿では、Node.jsの特徴や動作原理に触れ、サンプルや役に立つパッケージ、活用事例などを紹介したいと思います。 主なサーバサイドJavaScript Node.jsに触れる前に、予備知識として他のサーバサイドJavaScriptにも触れておきます。Node.js含め、サーバサイドJavaScriptには、主に以下のようなプロジェクトがあります。 サーバサイドJavaScripの標準仕様「CommonJS」とは サーバサイドJavaScriptには、「CommonJS」と呼ばれる標準化が策定されています。標準化というと難しい感じがしますが、要はサーバサイドでJavaScriptを実行するのに何が必要かを仕様として、定義しているドキュメントのことです（例えば、「ログが必要だよね」など）。 Node.jsは、このCommonJSに則って開発されています。現段階であれば、CommonJSの仕様
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
hogehoge - addEventListener の第三引数について
http://kudox.jp/java-script/js-anonymous-function
