IDEA * IDEAドットインストール代表のライフハックブログ
難読化された読みづらいコードも一発で整形·JSBeautify For Chrome MOONGIFT
JSBeautify For ChromeはWebブラウザ上でJavaScriptを整形して表示するGoogle Chrome拡張。 JSBeautify For ChromeはGoogle Chrome用のフリーウェア（ライセンスはWTFPL）。本格的なWebアプリケーションが普及するにつれて、JavaScriptの利用範囲が拡大している。そんな中ではJavaScriptのファイル自体もサイズが大きくなっている。 Clippyあり版（整形前） そのためJavaScriptを多用するサイトでは余計なスペースや改行を消すなどしてサイズを減らすのが一般的になっている。しかしそれはコードが全て1行で書かれる、とても見づらいものになる。そこでJavaScriptの表示に際して使ってみたいのがJSBeautify For Chromeだ。 JSBeautify For ChromeはGoogle C
新参の超軽量JavaScript非同期ローダー3種を徹底比較 | ゆっくりと…
JavaScriptの読み込み・実行は、それより下にある画像など外部リソースの読み込みと表示をブロックするため、「ページ読み込み時間を短縮するJavaScriptローダー：LABjs」 や 「CSS/JavaScriptのAsynchronous Loadingをめぐる熱い論議」 で紹介したように、多数の JavaScript ローダーが開発されてきました。 これらのローダーは、「非同期スニペットのスタート ガイド – Google Analytics」 に代表される、script 要素を直接 DOM に挿入する方法が主流となっています。またそのタイプは、単一のスクリプト・ファイルを対象とした小規模なものと、Head JS、LABjs、ControlJS などに代表される、複数ファイルの依存関係をハンドリングする機能をもつものに大別されるかと思います。 後者のタイプは最小でも3KBytes
jQueryで使えるサジェストプラグイン&チュートリアル10選 | Web活メモ帳
WebデザインやWeb開発に使えるオープンソースプログラムを紹介するblogfreakzというブログにてjQueryで使えるサジェストプラグインとチュートリアルが紹介されていました。 「10 Awesome jQuery Autocomplete Plugins & Tutorials」というエントリーから抜粋してご紹介。 A Simple Movie Search App w/ jQuery UI チュートリアル デモ PHPと連携するプラグインです。 How to Use the jQuery UI Autocomplete Widget チュートリアル デモ jQuery UI 1.8を使用するサンプルです。 Facebook Like List auto complete with FCBKcomplete, JQuery and Coldfusion チュートリアル デモ FCB
サーバー不要で保存できる「Web Storage」の使い方 (1/5)
HTML5とともにW3Cで標準化が進められているDOM APIの1つに「Web Storage」があります。Web StorageはCookieと同様にローカルディスク上にデータを保存する機能で、Cookieに比べて「有効期限がない」「データサイズの制限がない」といった特徴があります。ローカル上に永続的にデータを保存できるので、フォームの入力内容の保存やゲームのプレイ履歴の記録、各種サービスの状態保存など、などさまざまな用途に利用できます。 Web Storageにはローカルストレージとセッションストレージがあり、永続的にデータを保存する場合はローカルストレージを、ブラウザーを開いている間の一時的な保存であればセッションストレージを使います。ローカルストレージ、セッションストレージとも同じメソッドを持ち、記述方法に違いはありません。 今回のJavaScriptラボは、HTMLフォームに入力
Closure Library でローカルファイルのドラッグ＆ドロップを実装する - WebOS Goodies
簡単なサンプルを作ってみましたので、ファイルのドラッグ＆ドロップをサポートしたブラウザ（現時点では Google Chrome, Safari, Firefox のいずれか）で試してみてください。灰色の部分に適当なファイルをドラッグ＆ドロップすると、そのファイル名を表示します。複数のファイルをドロップすることも可能です。 ソースコードは以下のような感じです。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ファイルのドラッグ＆ドロップのテスト</title> </head> <body style="margin:0; padding:0;"> <div id="droptarget" style="width:100%; height:200px; background-color:#eee;"> ここにドラッグして
iPhoneやiPadにも対応・モニターサイズに合わせて拡大表示するLightbox風jQueryプラグイン - かちびと.net
iPhoneやiPadにも対応した、モニター サイズに自動的に合わせて拡大表示 してくれるjQueryプラグイン、Touch- Galleryのご紹介です。Lightbox系の スクリプトは沢山ありますが、こちらも 一つの選択肢として思えておくといつか 役に立つかも、と思ってエントリー。 PCは勿論、iPhoneやiPadでも、そのモニターサイズの幅に合わせてLightbox風にフルスクリーン表示してくれます。特に設定も不要なのは楽で良い感じ。というか、iPhoneやiPad向けに作られたっぽいですね。 Touch-Gallery ↑ モニターのサイズに自動で合わせて拡大表示してくれるjQueryプラグインです。 ↑ PCで見るとこんな感じ。基本的には普通のLightbox系の拡大表示です。 ↑ iPhoneで見てもモニターサイズに合わせて拡大表示します。 ↑ 横にしても自動的に横幅に合わ
「マンガで分かる JavaScriptプログラミング講座」第2版公開中
JavaScriptと言えば、GmailやGoogleマップなどのページ移動を伴わない動的ウェブコンテンツの登場で一気に息を吹き返して注目を集めたプログラミング言語で、jQueryの登場によってプログラマだけではなくウェブデザイナーにも重要なものとなっています。 そんなJavaScriptを簡単に初心者でも理解できるようにということで、マンガ158ページ、解説文とサンプルソースコード全471KBの「マンガで分かる JavaScriptプログラミング講座」第2版が公開中となっています。この講座の第1版は2010年4月26日から連載を始めて2010年5月10日に完成しており、今回の第2版はその第1版からマンガをすべて描きなおし、説明文章を1.7倍に増補して、図版を充実させたものです。 アクセスは以下から。 マンガで分かる JavaScriptプログラミング講座 http://crocro.co
WEBサービスのAPIの窓口となる「Embed.ly」
Warning: include_once(/home/sites/lolipop.jp/users/lolipop.jp-dp16105308/web/wp/wp-content/plugins/wp-super-cache/wp-cache-phase1.php): failed to open stream: Permission denied in /home/users/0/lolipop.jp-dp16105308/web/wp/wp-content/advanced-cache.php on line 8 Warning: include_once(): Failed opening '/home/sites/lolipop.jp/users/lolipop.jp-dp16105308/web/wp/wp-content/plugins/wp-super-cache/wp-c
Greasemonkeyでキー制御したい時の書き方 - phithonのブログ
イベントリスナの登録 document.addEventListener('keydown', function (e) { // 処理 }, false); 他にkeypressってのもあるけど、keydownをお勧め。 理由は確かGoogle chromeでkeypressにすると、Ctrl+a（全て選択）のようにデフォルトで別動作が定義されていた場合にそちらが先に動いてしまうため（だったはず）。 押されたキーの取得 var shortcutKey = 'a'; document.addEventListener('keydown', function (e) { var pressed = String.fromCharCode(e.which).toLowerCase(); pressed = (e.ctrlKey ? 'C-' : '') + (e.altKey ? 'A-' :
オレ標準 JavaScript 勉強会で def.js について発表してきました - mooz deceives you
オレ標準 JavaScript 勉強会 で def.js について発表してきました. 発表資料は以下になります. また, ソースコードを読む際にメモを取っていたので, それも公開しておきます. スライドではコードの一部分のみしか取り上げることが出来なかったので, def.js の全容を把握したいという方は参考にしてみてください. メモ付きソースコード 発表 「こんなものを作ってみました, やってみました」という発表が出来れば良かったのですが, 特にアイディアも浮かばなかったため一週間ほど前に知り気になっていた def.js の解説をやろうということに. 「100 行も無いコードだしすぐに読めるだろう」と余裕をこいて前日の夜中にソースコードを読み始めたのですが, 様々なテクニックの駆使された濃いコードにかなり手間取ってしまい, その日は結局動作の仕組みを理解するだけで精一杯. 当日の朝から資
Google JavaScript Style Guide 和訳 — Google JavaScript Style Guide 和訳 v0.1 documentation
この和訳について¶ この文章は Google JavaScript Style Guide を非公式に和訳したものです. 内容の正確性は保証しません. ライセンスは原文と同じく CC-By 3.0 とします. フィードバックは Issue への登録 , あるいは Kosei Moriyama (@cou929 または cou929 at gmail.com) へ直接お願いします. この和訳のリポジトリは こちら です.
第1回 WebSocket登場までの歴史 | gihyo.jp
はじめに 初めまして。NTTアドバンステクノロジの金城と申します。幸運にも記事を執筆させていただけることになりました。WebSocketという新しいウェブの規格についての連載を、全4回の予定でお届けします。 用語統一について WebSocketは「WebSocket」「WebSockets」、単語を切り離した「Web Socket」等、表記に揺れがあります。2009年12月22日のワーキングドラフトのタイトルは「The Web Sockets API」となっていますが、2010年4月26日のエディターズドラフトでは「The WebSocket API」となっています。この連載では、最新の仕様書に則り、用語を「WebSocket」で統一します。 HTML5とWebSocketの関係 WebSocketは、もともとHTML5の一機能として仕様の策定が進められていました。しかし、Web S
Google App Engine上でサーバサイドJavaScript·App Engine JavaScript SDK MOONGIFT
App Engine JavaScript SDKはGoogle App Engine用のオープンソース・ソフトウェア。サーバサイドで動作させるプログラミング言語は多数あるが、最近注目を集めているのがサーバサイドjavaScriptだ。クライアントとサーバの両方を同じ言語で作れるのが利点だ。 デモのブログアプリ だが注目は集めつつも、実際に利用しているケースはまだ多くない。サーバ側の設定も必要なので、手間に感じられてしまうのだろう。そこでサーバの用意がいらない、Google App Engine上で動作させるのがApp Engine JavaScript SDKだ。 App Engine JavaScript SDKはその名の通り、Google App Engine上でサーバサイドJavaScriptを実現するSDKだ。ブログシステムのサンプルもあるので、その面白さがうかがえるはずだ。Da
IEやiPhoneでも問題なく動作・ドラッグやスクロール等、多方面で応用出来るjsライブラリ・Dragdealer JS - かちびと.net
なかなか使い勝手が良さそう だったのでメモ。スクロールバー や、コンテンツスライダーなど、 多方面で応用の効くjsライブラリ、 Dragdealer JSのご紹介。 IE6、7、8や、iPhoneでも動作を確認しましたが、何の問題も無く動いてくれますよ。 ↑ 上図はスクロールバーに使用した例です。動作も凄くスムーズです。Flashでよく見かけますね。 ↑ 文字の拡大をドラッグで実装。 ↑ 斜めに移動するコンテンツスライダーにも応用できる。 ↑ こちらではコメント送信に使っています。ユニークですね。 iPhoneでは全てフリックで動作します。 IE6とか7がだいたいネックになるのでどのブラウザでも実装できるjsはいくつ覚えておいても損なさそうですね。加えてiPhoneなどでもスムーズに動いてくれるのでなかなか使えそうです。以下で動作をご確認下さい。 Dragdealer JS
第2回 完全版：ブラウザとデバッグ環境 | gihyo.jp
こんにちは、太田です。前回はクロスブラウザの入口として、各ブラウザの特徴をまとめつつ、実際にクロスブラウザなコードを紹介しました。今回はクロスブラウザ対策における基本である、各ブラウザ環境の構築について解説したいと思います。 前回紹介した通りブラウザにはたくさんの種類・バージョンがあります。それぞれが動作する環境を用意するだけでも、一苦労ではすみません。なるべく少ないマシンで、各バージョンをインストールして、さらにデバッグするための環境作りについて紹介します。なお、Safari以外はWindows環境を想定しています。さらに、特に断りがない限りはWindows XP SP3をベースに解説させていただきます。ご了承ください。 各ブラウザのデバッグ環境は近年目覚しいほどの進化を遂げています。統合デバッグ環境の草分けであるFirebugを筆頭に、Safari/Chrome（WebKit）のWeb
SproutCore
SproutCore is an open-source framework for building blazingly fast, innovative user experiences on the web. Install Sproutcore View on GitHub New Tutorial to Help You Get Up and Running! You've heard all about SproutCore and now it's time to see for yourself. It's easier than ever to get started with our new tutorial. In it you'll learn: How to install SproutCore on your machine How to build your
MobileMeで使われているHTML5用のJavaScriptライブラリ「SproutCore」 | Web活メモ帳
「SproutCore」はAppleのMobileMeで使われているオープンソースのJavaScriptフレームワークです。 デスクトップアプリ風のUIをこのフレームワークだけで作れるようです。 先日、ついにメジャーバージョンがリリースされたようなのでご紹介します。 詳しくは以下 デスクトップのようなUIを構築できる SproutCoreを使用する事で、様々なUIを構築可能になります。 デモ FlashやSilverlightとくらべるとブラウザだけで動作する利点があるJavaScriptですが、こういったアプリが作成できるようになると利用用途も増えていきそうですね。 jQuery，ExtJS，YUI，Prototypeなどのライブラリと同時使用もできるようです。 興味のある方はぜひダウンロードしてみてください。
AppleのMobileMeでも使われるJavaScriptライブラリ·SproutCore MOONGIFT
インタフェースはとても重要だ。技術的に優れていても、インタフェースが悪いと触ってもらえない。逆に技術的にそれほどすごいものではなくとも、インタフェースが優れていると流行ったりすることもある。 Welcomeページ 技術とデザイン、両立できれば言うことはない。優れたインタフェースを手軽に作るために、このライブラリを使ってみることをお勧めする。 今回紹介するオープンソース・ソフトウェアはSproutCore、リッチなインタフェースを実現するJavaScriptライブラリだ。 SproutCoreはAppleの提供するサービスである、.Macの次期バージョンMobileMeでも一部で採用されているJavaScriptライブラリだ。JavaScriptながら、gemを使ってインストールするのが特徴だ。 ターミナル上でコードを生成する Rubyを使ってWebサーバを立ち上げることができ、ポート番号4
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IBM Developer
