こんにちは、Google Chrome ExtensionsのAPI ExpertとChromium-Extensions-Japan管理人を担当している、太田と申します。いつもはクロスブラウザで連載していますが、今回はGoogle Chromeのデベロッパーツールについて紹介します。 昨今のJavaScript、HTML、CSSブームの背景には、開発環境、特にFirebugに代表されるようなデバッグツールの目覚しい発展が大きく貢献していると思われます。その反面、高機能化するデバッグツールの各種機能を使いこなすことが難しくなってきているという現実もあります。そこで、今回から全4回でGoogle Chromeに搭載されているデベロッパーツールの使い方とそれを利用したデバッグ・チューニングのノウハウをお届けしたいと思います。第1回はデベロッパーツールの機能紹介と基本的な使い方を解説します。 な
Chrome版のFirebugことGoogle Chrome Developer Toolsですが、以前gihyoで解説したときよりさらに便利になっているので、少し紹介します(元はWebKitなので、そのうち(近いうちに)Safariでもそれなりに使えるようになるはずです)。 圧縮されたコードの整形 まず、目立つところからいきましょう。ちょうど先日更新されたChromeのdev版(12.0.742.0)に搭載されたばかりの機能で、minifyされているJavaScriptコードを読みやすいように整形して表示してくれるというものです(IE9の開発者ツールにも実装されている機能です)。 例えば、Google Analyticsのコードは圧縮されていて普通は読めません。 しかし、Chromeのデベロッパーツールなら、 このように整形してくれます。 やり方は簡単で、デベロッパーツールのScript
本稿では、Node.jsの特徴や動作原理に触れ、サンプルや役に立つパッケージ、活用事例などを紹介したいと思います。 主なサーバサイドJavaScript Node.jsに触れる前に、予備知識として他のサーバサイドJavaScriptにも触れておきます。Node.js含め、サーバサイドJavaScriptには、主に以下のようなプロジェクトがあります。 サーバサイドJavaScripの標準仕様「CommonJS」とは サーバサイドJavaScriptには、「CommonJS」と呼ばれる標準化が策定されています。標準化というと難しい感じがしますが、要はサーバサイドでJavaScriptを実行するのに何が必要かを仕様として、定義しているドキュメントのことです(例えば、「ログが必要だよね」など)。 Node.jsは、このCommonJSに則って開発されています。現段階であれば、CommonJSの仕様
はてなスターや Tumblr のブックマークレットなど,ブラウザ上の選択文字列をそのままユーザの入力として使えるサイトが増えています。JavaScript からどのようにすれば取得できるのかを調べてみました。 ブラウザ間の差異 DOM における選択範囲の仕様として以下の 2 通りがあります。 W3C Range Microsoft TextRange IE が Microsoft TextRange のみサポートしているのはまぁ予想通り。注意しなくてはいけないのは,W3C Range は,あくまで DOM 上の「範囲」を示すためのインタフェースであることです。ブラウザ上でユーザがどこを選択しているのか,などは UI の実装になりますから,W3C (Range) では規定されていません*1。そこで W3C Range をサポートしているブラウザは,選択範囲をあらわす W3C Range オブ
バッチ・マクロのTOPへ JavaScriptと同じように,VBAでもDOM操作が可能。 下記のようなマクロで,IEを操作できる。 Sub Googleで検索() ' IEを立ち上げて Google を開く Dim ie As Object Set ie = new_ie("http://www.google.co.jp") ' 検索キーワードを入力 type_val ie, "q", "ホゲラッチョ" ' 検索ボタンクリック submit_click ie, "btnG" ' 検索結果の 1 件目のタイトルを表示 MsgBox domselec(ie, Array( _ "id", "res", _ "tag", "li", 0, _ "tag", "h3", 0 _ )).innerText ' IEを閉じる ie.Quit Set ie = Nothing End Sub これは,独
10日でおぼえるWordPress入門教室 第2版 学習用サンプルテーマ 10daysWP_2nd.zip / 240KB ※下記の著者サイトからもダウンロードが可能です。 http://wsc.studiobrain.net/10days/ 10日でおぼえるFacebookアプリ開発入門教室 サンプルファイル Facebook10.zip / 22.3MB ※本サンプルファイルの使用環境条件 サンプルファイルを使用するには以下の開発ツールが必要です。下記のurlからダウンロードしてください。 「XAMPP:v1.7.7」 「Eclipse:v3.7 Indigo Pleiades」 「Facebook PHP SDK (v.3.1.1)」 「Android SDK(Facebook):v1.2.1」 「Android SDK:r17」 「ADT Plugin for Eclipse:v1
EclipseでJavaScriptファイルを編集する際などに、拡張子「.js」をJSEclipseのプラグインを利用するようにしていた。 ソースが見やすかったり、コメントが書きやすかったり、コメントの表示・非表示を切り替えることができたり、javadocのような@author,@since,@versionなどの補完機能があったりして便利だった。 むかし、プラグインを入れた際のURL:http://download.macromedia.com/pub/labs/jseclipse/autoinstall Adobeのサイトを見ると http://labs.adobe.com/technologies/jseclipse/ JSEclipse shipped on February 25, 2008 as an optional pluging with Flex Builder 3 a
2012/07/22 追記 久しぶりに確認したところ、IE9 では以下で指摘している IE (このときは IE6 でした) の問題(3, 4, 6)がすべて解消されていました。 また、Firefox での問題(5)も Firefox14 で試したらは解消されていました(ただ、All-in-One Sidebar のパネルの上では mousemove イベントが発生しないようでした)。 Chrome20 や Safari5 でも問題無く動作していますから、現在においてドラッグ&ドロップを実装するには mousedown 時の preventDefault() だけでOKと言えそうです。すばらしいですね! safari で動かないらしいのでどなたか情報ください!(くやしい!) というかこういうのに勝ち負けはないので実装できてる方は是非トラックバックお願いします。当方既に ipod 中毒ですし
IEでposition:fixedを再現するFixed positioning Check Tweet 配布元:Fixed positioning ライセンス:CC license IEの6以下のバージョンにはposition:fixedが正常に動作しないというバグがありますが、それを解決するのがこのFixed positioningです。 設置方法 head要素内などで、ダウンロードしたfixed.jsを読み込みます。 <script type="text/javascript" src="fixed.js"></script> これだけでposition:fixedが正常に動作するようになります。 サンプル サンプル2 スポンサードリンク コメント
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く