トップ > Chrome

JavaScript連載12回とデベロッパーツールの特集開始

JavaScript Chrome

これでできる！ クロスブラウザJavaScript入門の第12回として、XMLHttpRequest入門が、Google Chrome版Firebug：デベロッパーツール取扱説明書として、詳説：デベロッパーツールの使い方が公開されています。
デベロッパーツールというのはWebKitのWebInspectorのことで、FirefoxのFirebugに当たるブラウザベースのデバッグツールです。って、まあこのブログを読んでくださっている方には今更感があるとは思いますが。ただ、Firebugを始めWebInspector、Dragonfly(Opera)、さらにIEの開発者ツールにいたっても、すごい勢いで改良が進められていて、高機能化してきています。もはや、これらのデバッグツールなしでウェブ開発をするなんて考えられないでしょう。同時に使い方がわかり難くなってきている面もあるので、画像大盛りの解説にしてみました。
あと、WebInspectorはFirebugと機能的にはほとんど差がないし、なんといっても軽いので、もっとみんな使ってみてほしいなーと思っています。
# この前、id:secondlifeさんにWebInspectorだってCookieの編集くらいできますよと自慢げに話してしまったんですが、記事書いてて削除しかできないことに気が付きました。死にたい。localStorageは編集もできるんだけどね。
コンソールで複数行モードがないのが惜しいんですが、改行を含むコードをコピペすれば編集はできるので…。

ブラウザー勉強会でWebKitの拡張について話してきました

WebKit Chrome Extension

ブラウザー勉強会というのは、hebikuzureさん主催のウェブブラウザについての勉強会です。「ウェブブラウザについて」と一口にいっても割と範囲が広くて、特に今日の参加者を見ても、ウェブブラウザを実装してる人から、拡張を作ってる人、ウェブサイトを作っている人、企業の社内インフラ管理をしている人、そしてウェブブラウザの利用者とかとか、多種多様なんですよね。そういった色んな立場のウェブブラウザに強い関心のある方が集まった面白い勉強会でした。
で、WebKitの拡張(WebKitの拡張というのは微妙な表現なんだけど、Chromeの拡張とSafariの拡張といちいち書くのも面倒なので…。他に良い名称があれば教えてください…。)についてお話してきたんですが、折角のウェブブラウザ勉強会のなのでWebKitの裏話的なものを取り上げてみました*1。
というわけで、発表資料です。
WebKit拡張教室 at ブラウザー勉強会
例によってHTML Slideをベースに、gimiteさんとpaqさんによるタッチ対応のForkを取り入れて少し改良を加えたものになっています。あとでjsdo.itにフィードバックしようと思います。

そういえば、「CSSのベンダープリフィクスについて、WebKitは-webkitが知られていますが、実は-khtmlもしくは-appleと書いても(今は)OKだったり」というネタはあんまり知られてなさそうなので取り上げてみたんですが、やっぱり全然知られてないみたいです。Safari2以前は-khtmlが普通だったみたいです。
-khtmlは本の虫: QuirksBlog: HTML5のドラッグ＆ドロップはクソだで衝撃を受けて、この前のW3C Widgetsのイベントのときに-apple-dashboard-regionをOperaがサポートしているのにも衝撃を受け、そこでふと-khtmlもプリフィクスなんだーと気が付きました。まあ、今となってはプリフィクスじゃなかったらなんなんだという感じなんですが…。
ちなみに、JavaScriptからも各プリフィクスに対応しています。

document.body.style.KhtmlOpacity=.4
document.body.style.opacity // '0.4'
document.body.style.KhtmlOpacity === document.body.style.opacity // true

あ、資料にも書きましたが-khtml、-appleのサポートは切られる予定なので、今後は(今までも使ってる人はそうそういないと思うけど)使わないように注意しましょう。

*1:id:shinichiro_hさんの[http://d.hatena.ne.jp/shinichiro_h/20100109#1263025326:title=WebKitネタ]を参考にしてたんですが、そのshinichiro_hさんが本人が発表後に登場するという個人的サプライズも

NinjaKit

Chrome Safari extension NinjaKit

NinjaKit*1というChrome/Safari拡張を公開しました。
Chrome:Chrome Web Store - NinjaKit
Safari:NinjaKit for Safari
Source: os0x/NinjaKit · GitHub
これはFirefoxのアドオンであるGreasemonkey相当の機能を実装することを目指しています。
今のところ、

  • GM_xmlhttpRequest
  • GM_addStyle
  • GM_getValue
  • GM_setValue
  • GM_deleteValue(new in ver 0.7)
  • GM_listValues(new in ver 0.7)
  • GM_log
  • GM_openInTab
  • GM_registerMenuCommand(Safari版は未サポート)
  • Metadata
    • @include
    • @exclude
    • @require
    • @bookmarklet(独自API、bookmarkletとして実行するのでGM APIは使えないが、ページ側のJSに触れる)

あたりをサポートしています。とりあえず、AutoPagerizeが動く(AutoPagerize自体は拡張版が出ているのでそっちを使ったほうが良いですが)のを基準にしました。
大体実用的なレベルになったと思うので、公開しました。が、まだまだ問題は色々とあります。特にセキュリティリスクがないとは言い切れない(Greasemonkey自体の問題でもある)のでそのあたりはご了承を。

今後の予定

  • Safari拡張対応
  • E4X(一番重い…、ヒアドキュメントとして使っているだけのケースはなんとか動くようにしたい)
  • スクリプトの更新通知
  • @resource
  • その他細かいAPIなど

対応が難しそうな問題点

  • スクリプト同士の名前空間が完全には別れていないので、prototypeを拡張したときなどにスクリプト同士のコンフリクトが起きかねない
  • letとかIteratorsとかExpression closuresとか、Mozilla方言は無理そう

*1:思いつきでNinjaに。あとSafariにも対応しているのでKitに。

Chrome5の新機能とか、Chrome6について

Chrome

Google Chromeについてはやや久しぶりに、gihyo.jpさんで記事を書きました。
ブラウザ：Google Chrome 5の新機能とChrome 6の計画｜gihyo.jp … 技術評論社
そろそろChrome5がリリースされそうです、ということで、Chrome5がサポートする機能を開発者向けの情報を中心にまとめました。
後半に軽く書いたChrome6に搭載されているアプリケーションランチャーとか、結構楽しいので是非お試しいただければと。
折角だから画像貼っておこう。
f:id:os0x:20100519172805p:image

2つのChromeを共存させる方法(Google Chrome SxS)

Chrome

複数のバージョンのGoogle Chromeを同時に動かす方法 - 0xFFでは、かなり強引にスタンドアローンなChromeを作る方法を紹介しましたが、最近(Issue 35574 -
chromium -

Add side by side distribution -
An open-source browser project to help move the web forward. - Google Project Hosting
)正式に2つのバージョンを同時に動かす実装が導入されたので、それを紹介します。
まず、今のところ共存できるのは2つまで、片方はdev版相当canary版*1という制限付きです。その点はご了承を。
Google Chrome - Get a fast new browser. For PC, Mac, and Linuxで専用のインストーラーが公開されていました。こちらで一発でインストールできるようです。以下は古い方法です。

  1. 最新のインストーラーを用意
    1. Chrome Releasesやhttp://omahaproxy.appspot.com/あたりで最新のdev版のバージョンをチェック
    2. 5.0.396.0をインストールしたい場合、http://dl.google.com/chrome/install/396.0/chrome_installer.exe からダウンロードできます。
    3. このようにバージョン番号の後半2つをhttp://dl.google.com/chrome/install/xxx.xx/chrome_installer.exe のxxx.xxの部分に当てはめればそのバージョンがダウンロードできます。実はバージョン番号は後半2つだけでユニークになるようになっています。
  2. chrome_installer.exeに --chrome-sxs をつけて実行
    1. Windowsだとショートカット作ってプロパティ弄るのが楽かな？

基本はこれだけ。この方法でインストールしたChromeはちゃんと自動アップデートの対象となります。ただ、今のところdev版固定でアップデートされるので注意。
なお、インストールされる場所、プロファイルの場所は次の通り(Windows7の場合)です。

# 本体の場所
%UserProfile%\AppData\Local\Google\Chrome SxS\Application
# 個人データ
%UserProfile%\AppData\Local\Google\Chrome SxS\User Data

バージョンの表記はこんな感じに。
f:id:os0x:20100513210513p:image
見ての通り、このページは about:version (もしくはabout:だけでも可) というアドレスで表示されるページで、Chrome本体のバージョンだけでなくWebKit、V8のバージョンやUser Agentに起動時のパスにオプションも確認できるようになっています。

なお、SxSがdev版相当になるので、既にdev版をインストールされている方は重複してしまいます。その場合、一端dev版のChromeをアンインストールして(もちろん個人データを削除しないように)、改めてstable版やbeta版をインストールする必要があります。
Chrome5のリリースが迫ってきて他にも色々あったりしますが、長くなるのでまた改めて近いうちに。

*1:Chromiumにより近いナイトリービルド相当

BPStudy#32でChrome拡張とECMAScript5についてお話してきました

Chrome JavaScript

若手IT勉強会 : ATND(次回25日)繋がりのid:monjudohに誘われて株式会社ビープラウドさん主催のBPStudy#32 : ATNDでChrome拡張についてお話してきました。
資料はこちらChrome Extension with ECMAScript

またこの資料か、という声が聞こえてきそうですが、http://ss-o.net/chrome/extension/ecma.html#yet-another-greasemonkeyあたりから今回用の新しい内容になっています。
と、このyet another greasemonkeyについては書き始めると長くなるので、近いうちに改めて記事を書きます。現状とりあえず動くレベル(AutoPagerizeがなんとか動くくらい)にはなってるけど、あちこちボロボロな状態です…。

そしてhttp://ss-o.net/chrome/extension/ecma.html#chrome-ecmaからはECMA-262 5th editionについて。この部分は404 Not FoundをChrome視点にアレンジしたものです。このスライド、The Definitive Slidesってタイトルでピンと来る人もいるかもしれませんね。あのJavaScript第5版(JavaScript: The Definitive Guide, Fifth Editionの日本語訳)のDavid Flanagan氏です。さすが、詳細かつ的確にまとまっています。ECMAScript5はまだまだ未実装な部分があり今後どうなるかわからない部分もありますが、Chrome拡張でなら積極的に使えるので、是非試してみて頂ければと思います。

Chrome Extensions TechTalk#1

Chrome

f:id:os0x:20100411202530j:image:right
2010/4/9にChrome Extensions TechTalkを行いました。おかげさまで、80名近い方に出席頂きました。ありがとうございます。
正直、私の力不足で進行やらがグデグデでした。すみません。でも、及川さん、田村さん、白石さんの素晴らしい発表と、ライトニングトークをお願いした6名に、発表後に質問をしてくださった参加者の皆様のおかげで結果的には良い感じに盛り上がって終わることができました。本当にありがとうございます。また、kanasanにご協力いただいて、Ustreamでの配信を行うことができました。ありがとうございました。
ただ、時間が20分少々延長してしまったのは申し訳ありません…。
発表資料などの関連URLは
Chromium-Extensions-Japan | Google グループ
にリンクしておきました。
id:cou929_laさんによるレポートもChrome Extension TechTalk - フリーフォーム フリークアウト
あと、早速こんな反応もLiveTopHatenarをChrome Extensionに移植してみた | taichino.com

ちなみに、私の資料はChrome拡張入門なんですが、資料について2つほどやらかしてしまいました。。
まず、この前のHTML5勉強会で使った資料をベースにしたため、うっかり今回のイベントの告知が資料に残ったままでした。@yoshikawa_tさんにDMで指摘いただいて、開始直前に慌ててアップし直しました…。
もう一つ、同じ資料がhttp://ss-o.net/chrome/extension/introduction.htmlにもアップされています。なぜかというと、資料を書き始めたときに適当な名前(first.html)で保存して、最後にintroduction.htmlに名前を変えたんですが、うっかりlink rel="canonical"*1の指定をfirst.htmlにしたままアップしてしまいました。というわけで、内容は同じなんですが canonical指定しちゃったし、first.htmlのほうを正式なURLとして扱うことにしました…。ほんとすみません。。


ちなみに、4/23にビープラウドさん主催のBPStudy#32 : ATNDでChrome Extensionのお話をさせていただきます。こちらではECMAScript5を中心に扱う予定です。前半はCouchDBのお話で、個人的にも楽しみです。
また、4月17日、24日に
北陸エンジニアグループ | Google グループ
というイベントもあるそうです。私は参加が難しそうですが、お近くの方は是非。


f:id:os0x:20100411191440j:imageおまけ1：こんな写真も撮ってみたけど、映り込みカッコワルイ…
f:id:os0x:20100411202718j:image
おまけ2：新名刺です*2。YMcardさんで作ったプラスチック名刺*3です。プラスチック名刺だと高そうな印象があると思いますが、デザイン料込の100枚で3000円ちょっとと、普通の名刺と変わらない値段でした。あ、ただ注文から届くまで時間はかかります。そのぶん校正をしっかりできるので仕方ないところですが。

*1:canonicalを入れているのは、j,kキーでパラグラフ移動した際にハッシュを変えているので、ブックマークなどする際にハッシュなしのURLを選択できるようにするため

*2:番号見えるけど気にしない方向で。メールアドレスだと面倒だけど、番号って公開しても案外平気なんです

*3:正確には、デザイン名刺からデザインを選んで、名刺の種類をプラスチックにした