スマートフォン向けWebサイトの表示速度 高速化手法
対象読者 スマートフォンWebサービス開発者 特に、フロントエンド周りの開発に従事する方 スマートフォン向けWebサイト高速化のテクニック スマートフォンはOS／デバイスの進化が激しく、要求される最適化の内容も半年で別物になることがあります。そのため最適化に際しては、案件ごとの状況や目的、デバイス／OSのシェアに応じて、まずターゲット端末を選定し、問題の検出を行います。 この記事では「iPhone 4＋iOS 5」を想定して話を進めます。実際に「iPhone 4＋iOS 5」はよく現場でも最も動作が重い組み合わせとしてターゲット端末に挙がります。これはiPhone 4がRetinaディスプレイを採用したことで960×460ピクセルの高解像度を備えながら、CPUなどのデバイス性能が潤沢とはいえず、ボトルネックが生まれやすいためです。iOS 4ではなくiOS 5をターゲット端末として扱うのは、
javascript高速化のポイント12
Swift/Objective-C/Java/Ajax/JavaScript/CSSなどの情報、開発中にはまったことなどをメモしていきます。 WEBアプリケーションのパフォーマンスにおいて、RIAの普及によりクライアント側の実装も複雑化してきておりサーバ側だけでなくクライアント側のパフォーマンスも非常に重要な要素となっている今日この頃。 複雑なクライアントを作ったときに、javascriptのパフォーマンスが気になったので実装レベルのイディオム的に高速化できるポイントをまとめてみた（羅列してみた）。 まぁ他にもjavascriptのロード方法とかiframeの使い方とか、はたまたjQueryなどのフレームワークを使用しているとか色々あると思うが、それはまた次回ということで。 １．length の参照を減らす ２．タイマ値はなるべく長く ３．同じイベントに登録する関数が多い場合は実行制御関数
Closure Tools | Google for Developers
Stay organized with collections Save and categorize content based on your preferences. The Closure Compiler compiles JavaScript into compact, high-performance code. The compiler removes dead code and rewrites and minimizes what's left so that it downloads and runs quickly. It also checks syntax, variable references, and types, and warns about common JavaScript pitfalls. These checks and optimizati
小数点以下の桁数を固定した表現を得る - ぱせらんメモ
JavaScriptで小数点以下1桁に固定した数値を表示させる方法について悩んでいる人がいたので調べてみた。 というのも、何も考えずに次のようなコードを書くと2.0と表示させたいのに2と表示されてしまうようだ。 var value = 2.0; target_element.innerHTML = value; valueが2.1や2.01であればその通りに表示されるのだが、小数点以下の省略可能な0は省略されてしまうらしい。 で、安直な解決方法としては整数の場合に文字列として".0"を連結するという案が思いつくわけだが、他人にソースを見られたときに格好悪いのでスマートな解決方法があるなら知りたい、ということらしい。 まぁ、上手くやってくれそうなメソッドぐらいあるだろうとなんとなく思ったので調べてみたらあった。 Number.toFixed(丸め位置); 数値またはNumberオブジェクトの
JavaScript new Date() Returning NaN in IE or Invalid Date in Safari | BIOSTALL
JavaScript new Date() Returning NaN in IE or Invalid Date in Safari When it comes to programming, working with dates can be tricky. Luckily however most languages have done the hard work already and come with some kind of built-in date functionality to assist us. JavaScript inparticular has lots of useful functions to aid in getting, setting and outputting dates. The JavaScript Date Object To begi
javascriptでモジュール/ライブラリを自作する方法 - Debuginfo
ちょっとしたライブラリを作ってgithubで公開しようと思ってます。 そこで、javascriptのライブラリをどうやって作成しようか調べてました。 javasriptは関数で閉じないとグローバル変数になってしまうので、なるべくグローバル変数を使わず、汚染しないというのがポイントです。 色々やり方はあるようですが、Javascript patternsにも出てきているモジュールパターンを使うのが定石のようです。（初心者の私が）すんなり理解できるものの方が読みやすいのかも、と調べていたら下記がサイトの一つの例がよかったのでこれを使います。引数もわかりやすいですし。 http://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript var myNamespace = (function
ちょっと便利なJavascriptオブジェクトの作り方
今回は、ちょっと便利なJavascriptオブジェクトの作り方をご紹介します。いわゆるモジュール・パターンと呼ばれている方法です。 はじめに 最近、HTML5への注目と共に、Javascriptを使用する機会が増えてきました。以下のように適用範囲は多岐に渡っています。 通常のWebサイトでのユーザビリティ向上 スマートフォン用Webサイト開発 HTML5アプリによるクライアント・アプリ開発 スマートフォンのハイブリッドアプリ開発 Node.jsによるサーバサイド・プログラミング このように、Javascriptが基幹となる仕組みが広がっています。クライアント側とサーバ側を同じ言語で作れることは、開発側にとってはとても有難いことです（学習コストの低減、人的リソース配分の柔軟性など）。もちろん、発注者やエンドユーアにとっても開発速度などの面で利益が生まれます。 Javascriptプログラミン
知ってて当然？初級者のためのJavaScriptで使う即時関数(function(){...})()の全て
(function(){...})()は、 (function($){ $.hoge = function() { }; })(jQuery) みたいに使われていたりするコード。GreasemonkeyとかjQueryのプラグインとか、あれこれ見かけることがあると思います。 この話題はいくつかWebでも取り上げられていますが何がどうなってんのかちょっと難しいですね。しかし、誰でも理解できるレベルではあります。というのも、こういう種の難しさは体系的な知識が備わっているか否かということなのです。 でも、この知識を体系化する作業って結構しんどくて、難しくて、まーハゲるほど悩むこともあるかもしれない。それはきっと、とても毛根に悪いかもしれない。スカルプDも真っ青の状況になるかもしれない。それは、悲しいことなのだと思う・・・っ！ 毛根にはこれからもがんばってほしい！いつだって頭を温かいまなざしで見守
hitsujiwool (JavaScriptにおけるモジュール化のパターン)
はじめに ここではJavaScriptにおける「ユーザが使用するプロパティやメソッドを、適切な名前空間に展開する方法」すなわちコードのモジュール化の方法を整理します。 JavaScriptには、パッケージや名前空間を直接管理する方法はありません。 なので、オブジェクトや関数といった手持ちの素材を使って同様の機能を実装する必要があります。 この特徴は、JavaScriptの文法を一通り勉強して、いざ脱初心者を目指そうという人達にとっての大きな壁になっているように思われます。 世の中で配布されているライブラリのほぼ全てが、何らかのモジュール化の仕組みを利用しており、それを理解できない限り、人のコードを読むことも、自作のライブラリを公開することも難しいからです。 とはいえ、モジュール化の方法にはいくつかのパターンがあります。 イディオムと言っても良いかもしれません。 以下ではその典型的なパターン
JavaScript 第5版 10章 モジュールと名前空間 | MOL
JSAN (JavaScript Archive Network)、PerlのCPANみたいなもの JSの言語仕様では、モジュールを作成、管理する機構がない 名前の衝突が起こらないように名前空間を使用することが重要 10.1 モジュールと名前空間の生成 「グローバル変数を定義しない」ことが最も重要なルール //名前空間用に空のオブジェクトを生成する //この１つのグローバルシンボルの中に他のシンボルすべて格納する var Class = {}; //この名前空間内に関数を定義する Class.define = function(data) {/* コード */} Class.provides = function(o, c) {/* コード */} モジュールがグローバルな名前空間にシンボルを追加する場合は、最大でも１つにすべきである モジュールがグローバルな名前空間にシンボルを追加す
javascriptの書き方 色々
Swift/Objective-C/Java/Ajax/JavaScript/CSSなどの情報、開発中にはまったことなどをメモしていきます。 javascriptの書き方は色々あるけど、こんな風にかくと きれいになるのかなぁっと思う書き方を纏めてみた。 javascriptを分業して実装していると、変数名の重複に 注意しなければならないが、名前空間を用いれば気にする 必要がなくなる。クロージャの応用っぽい感じ。 また関数定義やオブジェクト定義、クラス定義など 用途によって使いわける。 prototype.jsやJQueryを使用する場合は、また ちょっと変わってくるかな。。 ▼ config.jsで名前空間と定数定義 var NMSP = {}; NMSP.common = {}; // 共通処理用 NMSP.config = {}; // 定数定義用 NMSP.xxx1 = {}; //
JavaScriptの巧い書き方 - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 Webに言語は数あれど、特に玉石混淆の激しいJavascriptの書き方について纏めてみた。間違い指摘大歓迎！ 発端はYahoo!の Eric Miraglia による、YUI 式モジュールの作り方をまとめた記事。ざっくりまとめると、以下の手順になる。 YAHOO.myProject.myModule = function () { //"private" variables: var myPrivateVar = "I can be accessed only from within YAHOO.myProject.myModule."; //"private" m
Qiita APIをJavaScriptから叩く - Qiita
QiitaAPIが公開されていたので，JavaScriptから使ってみるサンプル(jQuery使用)です． target_nameで指定したユーザの投稿をすべてストックします． JavaScriptはそんなに書かないので，怪しい部分は突っ込み大歓迎です． var API_END_POINT = 'https://qiita.com/api/v1'; stockAllPostByUserName('target_name'); function stockAllPostByUserName(user_name) { var qiita_test = {}; getToken(qiita_test); $.getJSON(API_END_POINT + '/users/' + user_name + '/items', null, function(response) { response.f
【疑問】JavaScriptの window.jQuery || document.write …という条件式の書き方
概要 ▶ Says it all by alikins「jQueryをロードする際のナイス！と思った書き方 」が突然週明けからブレイクしてビビっております（汗）。その記事に書いたjQueryのフォールバック用のJavaScriptですが、以下の様に書かれています。window.jQuery || document.write('<script src="js/libs/jq本ページはプロモーションが含まれている場合があります 「jQueryをロードする際のナイス！と思った書き方 」が突然週明けからブレイクしてビビっております（汗）。 その記事に書いたjQueryのフォールバック用のJavaScriptですが、以下の様に書かれています。 window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"
Post by @0-9
JSでイベント関連の実装をする場合、頻繁に発生するイベントを間引きたくなる事がある。 例えばwindow.scrollやwindos.resize、mouseover何かは状況によってrequestAnimationFrameを超える頻度で発生するので、特に重い処理を実行する場合などはある程度イベントを無視しないとUIがロックされてしまう。 また、スマホや古いバージョンのブラウザなんかも処理速度の問題で間引く必要が出てくる。 こう言う処理は一般にthrottleとかdebounceと呼ばれてて(一応それぞれ違う動作を指す)検索すると公開された実装があるけど、とりあえずjQuery.throttleを使えばいい感じにしてくれる。 ただ、jQuery使ってないとか、ちょっと使いたいだけとかいうならこんな感じのコードでもいける。 window.onscroll = function hoge (
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
idiomatic.js/translations/ja_JP at master · rwaldron/idiomatic.js
jsの非同期実行を簡潔にしてくれる$.Deferredをシンプルに説明する - Qiita
JavaTechnology Slot Online | Cara Daftar bermain Slot Online
Edit this Fiddle - jsFiddle
.cssファイル、.jsファイルをgzip圧縮してみる
