JavaScriptをまじめに考えました+2012-10-25 デジハリ福岡校セミナルームにて http://blog.dhw.co.jp/fukuoka_event/2012/10/dsf-vol111025ja-f199.html
Sign in - Google Accounts
Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode
JavaScriptの読み込みを最適化してページの表示速度を高速化する6つの方法
[対象: 中〜上級] 僕のブログではてブ数がいちばん多いのはウェブページを高速化するTIPSを解説した記事です（まだ読んでない人はぜひ読んでください！）。 その記事では高速化全般を扱っていましたが、今日の記事ではJavaScriptに的を絞って表示速度をスピードアップできる施策を6つ紹介します。 もともとはSearch Engine PeopleブログのOptimizing JavaScript for Better Web Performanceで説明されていたものです。 記事作者のJoydeep Deb（ジョイディープ・デブ）氏に僕のブログでの転載許可をもらえました (Thanks, Joydeep!)。 逐一の翻訳ではなく、書かれている内容をもとに僕の言葉で解説していきます。 1. HTTPリクエスト削減のためにJavaScriptファイルを1つに統合する ウェブページの表示を高速化
ブラウザー上でJPEG圧縮して非可逆性を体感してみる : 404 Blog Not Found
2012年09月09日16:00 カテゴリアルゴリズム百選Lightweight Languages ブラウザー上でJPEG圧縮して非可逆性を体感してみる 詳解 画像処理プログラミング C言語で実装する画像処理アルゴリズムのすべて 昌達慶仁 「GIMPでJPEGの蚊を退治して"PNG"化する」「javascript - で bilateral filter (選択的ガウスぼかし)を実装してみた」の反響で、「JPEGのqualityを100に設定すればいいんじゃね?」という誤解がかなり見受けられたので。 実際に体験していただければいいかと。 Demo: File APIを実装しているブラウザーで動きます。ファイルを読み込ませたら、Qualityをいろいろいじってみてください。元画像、JPEG、両者の差の順で表示されます。差の画像をクリックすると差をエンハンスしてくれます。ブラウザー別に以下の
Yahoo Pipesのような表現やマインドマップにも·jsPlumb MOONGIFT
jsPlumbはWeb上でオブジェクト同士のつながりを表現できるJavaScriptライブラリです。 情報は有機的に結びついています。マインドマップやネットワーク図などを描く際には必ずオブジェクト同士が何らかの連結しあっているでしょう。そんな図をWeb上で描くのに使えるライブラリとしてjsPlumbを紹介します。 Yahoo! Pipesに似た連結です。 アニメーションもできます。 マウスでドラッグして接続もできます。 複雑に結びつけました。 一つのオブジェクトから複数のオブジェクトに派生するデモ。 jsPlumbはレンダリング先としてSVG、Canvas、VMLが選択できます。また、ライブラリとしてjQuery/MooTools/YUI3が切り替えられます。オブジェクトはマウスで自由に場所を変更でき、コネクトしているラインは自動で再描画されます。 jsPlumbはJavaScript製、
【Javascript】consoleオブジェクトが持つlog以外の便利メソッド18（後編）
こんにちは、橋本です。 前回にひきつづき、Safari、ChromeのWebインスペクターやFirefoxのFireBugで使えるconsoleオブジェクトの使い方について書いてみたいと思います。 consoleオブジェクトには以下の19個(logを除くと18個)のメソッドがあります。 assert count debug dir dirxml error group groupCollapsed groupEnd info log markTimeline profile profileEnd time timeEnd timeStamp trace warn そのうち前回は、assertメソッドからgroupEndメソッドまで見て行きました。 今回はinfoメソッドからwarnメソッドまでの使い方について書いていきたいと思います。 infoメソッド console.info(messa
alert('イチオシ'); // 書評 - JavaScript逆引きハンドブック : 404 Blog Not Found
2012年09月03日19:30 カテゴリ書評/画評/品評iTech alert('イチオシ'); // 書評 - JavaScript逆引きハンドブック 出版社より献本御礼。 JavaScript逆引きハンドブック 古籏一浩 待ってましたこういうの。 EcmaScript 5のサポートが一通り完了して、これからHTML5のAPIが充実していくという今は、JavaScriptを学ぶ最高の旬。だけどWebの情報は断片的で、折角の新APIを使おうにもどこから手をつけていいのかわからなかった。これで勝つる。 本書「JavaScript逆引きハンドブック」は、「Ruby逆引きハンドブック」の出版社によるJavaScriptのシソーラス。「辞書」や「参考書」なら巷にあふれかえっているJavaScriptであるが、これがなかなかなかった。ましてやES5にHTML5といった最新の機能をカヴァーしているも
jQueryでRetinaディスプレイを判別して処理を変える方法｜BLACKFLAG
iPhoneなどApple製品に使われているRetinaディスプレイ。 従来のディスプレイよりも高解像度（1ピクセルの幅が78ミクロン）であることから Retinaディスプレイで画像を綺麗に表示するには、表示する倍のサイズで作成する必要があったり 特別な対処をする必要がでてきたりします。 そんなRetinaディスプレイに対して、jQuery（JavaScript）を使って判別し 個別に処理させる方法があったので紹介してみます。 ※webkitブラウザのみの対応です。 Retinaディスプレイかどうかを判別するプロパティは デバイス上で画像の1pxの単位を何pxとしてレンダリングしているかを見てくれる ————————————– window.devicePixelRatio ————————————– によって判別します。 Retinaディスプレイはここで取得する値が「2」になります。 こ
ライブドアみたいにスクロールしたらサイドバーの広告を固定する - ぼくはまちちゃん！
こんにちはこんにちは！！ 夏ですね！ 真夏ですね！！ ところで最近、ライブドアの一部の人気ブログで、サイドバーの挙動に「んん？」って思ったことありませんか！ …百聞は一見にしかずってことで、実際の例をみてみましょう！ ※PC版のみです ハムスター速報 (左のサイドバーを見ながら、下にスクロールしてください) 痛いニュース(ﾉ∀`) (右のサイドバーを見ながら、下にスクロールしてください) ある程度スクロールすると、サイドバーの広告がぴたっと固定されますね！ これって流行りなんでしょうか…！ そんなわけで、もしかしたら同じことをやりたい人が他にもいるのかも？と思って、 コピペで使えるJavaScriptにしてみました！ ↓ 動作サンプルです！ スクロールしたらサイドバーの広告を固定するスクリプトの動作サンプル ↓ コードはこれです！ 適当にコピペしてブログに貼り付けてね！ <script t
Highcharts - Interactive Charting Library for Developers
Our core library. Includes all standard chart types and more.
javascript - hanzenkaku.js で半角全角処理 : 404 Blog Not Found
2012年08月13日06:00 カテゴリLightweight LanguagesTips javascript - hanzenkaku.js で半角全角処理 まあ車輪の再発明もいいところなのですが、車軸に合う車輪が見つからなかったということで。 dankogai/js-hanzenkaku DEMO まずは実際にお試しを。 全角: 半角: 全methodは以下のとおり。textarea内でいろいろと書き換えてみてください。 /* Functinal */ p( HanZenKaku.h2z('ｺｶﾞｲﾀﾞﾝ') ); p( HanZenKaku.z2h('コガイダン') ); p( HanZenKaku.hw2fw('dankogai') ); p( HanZenKaku.fw2hw('ｄａｎｋｏｇａｉ') ); p( HanZenKaku.fs2hs('a space') ); p
JavaScriptのメモリリークを発見してくれるツール「Leak Finder」をグーグルが公開
ガベージコレクションの機能を備えるJavaScriptのような言語で開発されたアプリケーションでは、基本的にメモリリークは生じないはずですが、それでも回収されないメモリ領域がどんどん増えていくというメモリリーク的な状況は起こりえます。 leak-finder-for-javascript - Tool for finding memory leaks in JavaScript programs. - Google Project Hosting メモリリークは最終的にはそのソフトウェアの動作を遅くしたり不安定にしますが、短期的には問題なく動作しているように見え、単純なテストでは症状が表れにくいため、発見は難しいものです。 グーグルはこうしたJavaScriptのメモリリークを検出してくれるツール「Leak Finder」を公開したことを、ブログ「Leak Finder: a new to
JavaScript 言語概要 - JavaScript | MDN
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 View in English Always switch to English JavaScript はマルチパラダイムの動的言語であり、型や演算子、標準組み込みオブジェクト、メソッドがあります。その構文は Java や C 言語に由来するので、それらの言語の多くの構造が JavaScript にも同様に適用できます。 JavaScript は、オブジェクトプロトタイプやクラスによるオブジェクト指向プログラミングに対応しています。また、JavaScript は関数型プログラミングもサポートします。関数が第一級オブジェクトであり、式から容易に作成し、他のオブジェクトと同じように受け渡しすることができます。 このページは、 JavaScript の
【Javascript】consoleオブジェクトが持つlog以外の便利メソッド18（前編）
こんにちは、橋本です。 今回と次回の２回にわたり、Safari、ChromeのWebインスペクターやFirefoxのFireBugで使えるconsoleオブジェクトの使い方について書いてみたいと思います。 Javascriptのコードをデバッグする際に、console.logを使ってメッセージやオブジェクトの内容をログに表示することがあるかと思いますが、 この「console」オブジェクト、実はlogメソッド以外にも複数のメソッドがあります。 まずは、consoleオブジェクトにどのようなメソッドがあるか、console.logを使って表示してみたいと思います。 consoleオブジェクトの中身を見てみると、__proto__オブジェクトに以下のメソッドが定義されています。 assert count debug dir dirxml error group groupCollapsed g
「JavaScriptテクニックバイブル」を執筆しました。 - しまてく
お久しぶりです しばらく日記も書かず、若手IT勉強会も開かず、他の勉強会にも参加せず。 めっきりIT界隈のアクティビティが下がっておりました。 それもこれも決して遊び惚けていたわけではなく、タイトルにありますように 「JavaScriptテクニックバイブル ~効率的な開発に役立つ150の技」という 書籍を執筆させていただきました。 ちょっと振り返り 4年前から細々と続けている若手IT勉強会では、その名の通り若手を中心として 主にJavaScriptを主テーマとして各種書籍を読んだり、コードリーディングを したり、時にはハッカソンをしたりと活動してきました。 その中で早期から若手IT勉強会に参加してくれていた、すがまさおさん(@sugamasao) の紹介で技評の方とお会いする機会を得ました。 そこからは一気に物事が進んで、若手IT勉強会のメンバーで今まで得た知識や Web上の各地に散らばっ
JSのCIで椅子を投げられないため方法
状況はかなり改善した 非同期、setTimeout, Ajax系はSinonJSで簡単に Swarm系のツールでDOMのテストも容易に 環境構築も非常に楽になった PhantomJSはバイナリもあるし、ビルドも簡単 Swarm系のツールならブラウザでURLへアクセスすればすぐテスト開始
常にマッチする正規表現を使えばJavaScriptでも固定位置でのパターンマッチができる - rikubaのブログ
パターンの末尾に「|」を付け加えると、その正規表現は常にマッチする。 /aaa/.exec("xyz"); // => null /aaa|/.exec("xyz"); // => [""] これを使えば、ある位置でのみパターンマッチを行うということ（Perl の正規表現で「\G」のメタ文字を使うようなこと）が JavaScript でもできる（Firefox に限っては「y」フラグを使えば簡単にできるけど、独自拡張今のところ他のブラウザでは使えない）。 // RegExp::exec の戻り値の配列には index プロパティがあり、 // マッチに成功した位置を表す var text = "xxxaaxxxaaa", regexp, result; // 4〜6文字目が aaa かどうかだけ確かめたいとする // 通常の正規表現 regexp = /aaa/g; regexp.last
美麗なグラフをSVGで描画できるJSライブラリ「dc.js」:phpspot開発日誌
dc.js - Dimensional Charting Javascript Library 美麗なグラフをSVGで描画できるJSライブラリ「dc.js」 次のような円グラフや棒グラフをオブジェクト指向の分かりやすいコードで描画出来ます。 円グラフのコード例。メソッドをチェーンさせて直感的にグラフを描画可能。 SVG対応していないブラウザでは描画できませんが、軽くてよさそうですね 関連エントリ 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 見た目がクールなグラフ描画用jQueryプラグイン「Morris.js」 HTML5で綺麗でインタラクティブなグラフが描けるライブラリ「Flotr2」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
re-dzine.net situs togel online toto 2023 -
WebGL and Three.js
