Posts Tagged ‘Firefox’

« Older Entries
Newer Entries »

im.kayac.comを使って今見ているサイトをFirefoxからiPhoneへ送る

12月 4th, 2010

im.kayac.comというiPhoneへの通知を行うサービスがあるので、それを利用してFirefoxから今みているサイトのURLを送ってiPhoneからも簡単に開けるという感じのものを作ってみました。

準備するもの

  1. iPhoneのim.kayac.comアプリをダウンロード
  2. 登録してパスワードを設定する

インストール

Custom Buttonsのアドオンとして作ったので、Custom Buttons(Custom Buttons²)をインストールしておいて、下のボタンをクリックするとインストールできます。

URL to im.kayacURL to im.kayac

インストールしたら、Edit Buttonから

var username = "";
var password = "";

を自分の情報にあわせて入力すれば完了。

iPhoneへ送りたいサイトを開いた状態で、ボタンを押せばiPhoneへプッシュ通知ができます。

im.kayac.comのAPIがシンプルだったので10分ぐらいで作れましたが、かなり適当な作りしてます。

Posted in Firefox, iPhone | Tags: , , | 1 Comment »

第2回ブラウザー勉強会のアウトラインメモ

11月 27th, 2010

2010/11/27開催 Browser Workshop – ブラウザー勉強会 に参加してきました。
ブラウザとUI/UXについてのお話が中心。
Twitterでの#BrowserWS のログは Togetter – 「第2回ブラウザー勉強会」 にまとめてあります。

予定されていたスケジュール


Read the rest of this entry »

Posted in イベント | Tags: , , , , | No Comments »

韓国のWebに注目してみる

11月 27th, 2010

英語が読めない人向け、英語技術書の読み方の続きみたいなものだけど、英語以外にJavaScriptの話題に関しては韓国とか中国とかの記事とかも少し見るようになって韓国のWeb関係の話題にも触れるようになってきた。
流れてるものを見て、韓国はFRENDS.KRとかKWAG(Korea Web Accessibility Group)とかWeb関係の動きも活発なのかなーとか思ったりしてきた。
KWAG関係だとW3Cの人とか呼んでやってたWebアクセシビリティについてカンファレンスの話が面白かった。

そこで韓国のWebに少し興味持ったから調べてみたけど、2008-9年の記事で韓国Webサイトが酷いという話。
ほとんどがIEを使ってるから、デザインがIEでしか確認されてないし、ActiveXが蔓延ってる。

韓国はIEがいっぱいな国だけど、今そこから変化が起きてるんじゃないかなーとか思ってたりして、いろいろ注目してる。

上の記事でIE6から移行するキャンペーンが今年行われているという話が載っていて、韓国のブラウザ統計でIEのバージョンの変化を見てみると確かにIE8への移行が進んでいるように見える。

丁度先週あったFirefox Developers Conferenceに韓国からChanny Yun (@channyun)さんという方が来ていた。
HTML5 in Korea というスライド(スライドどこかにないかなーHTML5 in Korea (2010))で「IEが圧倒的に強く、FireFoxのシェアは2%程度、でもHTML5の勉強会は大人気」という事を言っていた。彼のこれまでのスライドを見るといくつかそれっぽい資料がある。

韓国のWebサイト全体の傾向は直ぐには変わらないと思うけど、一部の人がそれはおかしいと分かって動いてる感じがする。
インターネットで国境を越えるのは物理的な事より遙かに簡単なので、そういう人達の動きを見ていくと面白いんじゃないかなーとか思った。

ActiveX
Posted in 雑記 | Tags: , , , | No Comments »

Firefox Developers Conference 2010 アウトラインメモ

11月 21st, 2010

去年に引き続きFirefox Developers Conferenceに参加してきました。
一応メモをとりながら聞いていたのでとても読みにくいですが公開。
内容がまとめきれないのは仕様です。

公式に動画と各発表者の資料リンクをまとめたものが公開されました(2010/12/22)

Firefox Developers Conference 2010
http://mozilla.jp/events/2010/fxdevcon/

Twitterのハッシュタグ#fxdevconを保存しておいたもの。

Togetter – 「Firefox Developers Conference 2010」
http://togetter.com/li/71239

@teramakoさんによる発表者の資料や参加者の感想などをまとめたブクマ

はてなブックマーク – 特別でないただのブックマーク – fxdevcon
http://b.hatena.ne.jp/teramako/fxdevcon/

takanoさんによる動画(一部は著作権上の問題などがあるためない)

YouTube – fxdevcon2010
http://www.youtube.com/results?search_query=fxdevcon2010&search=tag

キックオフ

瀧田さんによる挨拶から始まる

基調講演 Browsing Without Borders

Jay Sullivan (ジェイ・サリバン、Mozilla Corporation 製品担当バイスプレジデント)

Firefox1.0から6年が経った。
Mozillaはユーザーの立場に立って努力できる。(他は企業なのでできることとできないことがある)
6年か変化(4回)したFirefoxのロゴ
インターネットの環境も大きく変わってきたので、Mozillaのロードマップも考えていく必要性。

問題
mobile
    中立性をどう持つのか
クラウド
    コスト
    個人情報を何も考えずに入れちゃう人が多い
アプリ(apps)
ソーシャル
    法律とかが追いついてない
    Mozillaはユーザーに立場に立って何が起きてるのかを考える。
    共通基盤がないので、デベロッパーとしてはどうなのか。

mobile
    多種多様な端末が存在するので対応が大変。
    HTML5はその中はネイティブアプリの80%はできる。
クラウド
    同期がまず第一歩
    暗号化や安心などの点から選択が生まれる
アプリ
    mobileアプリはシンプル
    HTML5のアプリケーションを作るのに問題点としてビジネスサイドの問題がある。
    →app storeのような販売する場所が整ってない
ソーシャル
    ブラウザは立ち上げ台になるかも
    シンプルなAPIが欲しいとこ

ミッションに対する課題はインターネット環境の変化に伴って変化しているので
Mozillaもそれに対応していかないといけない。
その中心にブラウザはあるもの

最も高性能なものとしてでるのは「ゲーム」がある。

mobile
    モバイルブラウザ
    Android1.xにバックポートはしない
    ユーザーはモバイルとPCで同じUXを求めてるのかは疑問的
アプリ
    モバイルと密接な関係
    アプリは収益化のモデルが必要とされてる
    Open Web Appsを開始した理由
    まだ販売環境が整ってない感じなのでスタートアップしにくい。
    これのアプローチを探るためにOpen Web Appsの着手。
    現実世界の例をWebのapp storeに適応したらどうなるか?- 返品、競争 - apps store同士の競争
クラウド
    同期の重要性(Sync)
    データはクラウドに格納してどこでもアクセスできるユキビタスになると思ってる。
ソーシャル
    F1は手順を考える必要を省く手軽さを求めた

Love Hack!!

質問
幾度も繰り返された質問だけどiDeviceへのFirefoxの搭載について
    appleは許してくれない
    Firefox Syncとかの探り
アプリストア
    唯一のストアにはなるわけではない
FirefoxをOSに昇華してみては?
    市場出る必要があるので、投資が必要になる。
    Google Chrome OSとアンドロイドの場合は市場がAndroidを選んだ。
    市場をよく見る必要がある。
    FirefoxPhoneを考えたことはあった。そこからHTML5の課題を学ぶことができた。

John Resig feat. Shibuya.js

ライトニングトークいろいろ

ECMA4の話 - John Resig
    クラス、継承など今まで全く違ったJavaScriptと別物だった。
    →これは多すぎるんじゃないかという問題
    Firefox、Adobeは賛成 　VS　ダグラス様、Google、MSは反対
    ECMA4のほとんどを削ってEMCA5が誕生した。

LLTiger報告 - gyuque

JS Modulatoreの話
    まだdevice要素がないので、送信しかできない

iPhoneをアレコレする - ku
    iEがない
    だけどデバッガーがないので、デバッグしにくい
    もっとデバッグを便利にしたい
    →Peekというアプリの誕生
    ソースコードの表示、インスペクト、

http://github.com/ku/peek

pixiv-tan - yksk
    pixiv wonderlandの解決(自分もpixivの中、直したいです…)
    prototype.jsとjQueryが混在してる
    →jQueryにまとめる
    まずグローバル関数の解決
    テストが余り書かれてない
    URL ディスパッチャー + LAB.js

processing.js  -John Resig
    exCanvasを使ったIE対応
    マウスストロークを追うコードが3行で書ける
    1.0ではWebGLもサポートしてる

JavaScriptをテストするときに考える10のこと - t_wada
    カスタムイベントでまとめることで、ロジックは同じものが使える
    ブラウザなくてもテスト可能にする
    テストの自動化
    まだテストの決定的なものがないなり

Chrome As A Server -kato kazuyoshi
    ChromeでMozRepl
    V8Debuggerを使ってる。
    Emacs上からブレークポイントをうてる

Node.jsにまつわる7つの誤解 - meso
    サーバーサイドJS
    イベント駆動I/Oのブロック問題はNode.js側が解決する。
    Node.jsは個人管理を脱却した

jQuery Mobile - John Resig
    いろんなモバイルデバイスをサポートする
    jQueryをモバイルに分けることはしたくなかったのでJQuery Coreを改良
        TestSwarmというツールを使用
    jQuery Mobieのフレームワークを作成
        UI、デバイスの幅に対応して"機能する"ものを作る

NetFront4のJavaScriptエンジンについて -ACESS

http://ja.wikipedia.org/wiki/NetFront_Browser

    レジスタベース(NO JIT)
    Inline Cache
    組み込みデバイスのスタックサイズの制限
    エラーしても強制的に落ちないように
    C言語で書かれていて、コンパイラによる違いを回避するため柔軟性持たせる
    SpiderMonkey < NetFront 4(No JIT) < TraceMonkey(JIT)
    時間かかかるしょりがあるとウォッチドックに引っかかるかもしれない
    → VM Executorを介して実行させる

Java MIP on HTML5 and Flash - yukoba
     JavaのクラスファイルからJavaScriptとFlash
    画面共有は命令だけを送って高速化

ECMA5の実装 - Constellation
    ECMA5の判断基準
    iv / lv5 (C++)
    仕様書に忠実なものを書きたい
    Shellを書いた
    ステートメントの区切りを管理して複数行継続が行える
    Spidermonkeyは脱ぐとスゴイ(JITなしで比較するとすごく早い)

Firefox 4 & Mobile

加藤 誠 (Mozilla Japan テクニカルアドバイザ)

Firefox4とスピード
起動時間
    汚いプロパティでボトルネックの調査(Talosテスト)
    メインスレッドのI/Oを減らす
     * 可能な限り非同期処理
     * Omni JAR
    StartUp Cache
        利用するJavaScriptファイルをJARにまとめる
WebGL
    OpenGLサポート
    Direct 3D 9
GPUアクセラレーション
    GPUアクセラレーションの利点は速度ではなく、CPUが空くことと電力効率の高さ
DirectWriteのサポート
    文字のジャギがきれいになる
    DirectWriteはα値が入ってるので少し薄く見える
Composition
    ハードウェアアクセラレーション
    Canvas
    CSS Transition
Video
    色空間変換(YUV->RGB)をGPUで行う
    動画はRGBではないので
    ブラウザにシェーダーが入ってる
JavaScript
    TraceMonkey
    jaegerMonkey
        x86プロセッサではSSE2サポートが必須
        Chrome上に対してはオフ
    Krakenというベンチマークで比較
Firefox 4 UI
    タブの位置
    Firefoxメニュー
    リロードボタンはsafari風
    ステータスバーが無くなってる。
    →リンクはアドレスバーに移動した
    →代わりにアドオンバーになった
Firefox Syncはデフォルトに
Panorama
Addon Manger
    アドオン管理画面の変更
Networking
    HTTP Strict Transport Secrity
XSS
    Content Security Policy
バリデーション
    ダウンロードしたコンテンツから悪意を防ぐ

モバイルFennec
    デスクトップと同じレンダリングエンジンを使用
    UIはUXのために変更してる。
    モバイルは画面サイズが違うのでPCそのままは残念なものになる
    FennecはChromeとContentでプロセス分離してる。
    →PCのFirefoxでもやるよ。

Firefox Panorama

mitcho (アーリーワイン・マイケル芳貴)

タブの管理は面倒
人は空間というメタファを記憶することができる
    どこに何があるかを空間で把握してる
AzaがいくつかのUI実験を繰り返して作ってみた。
タブをグループ管理、Undo、Redo
→何かの作業に集中できる

Panoramaの開発
    TabCandyアドオンの開発(jQuery使ってた)
    jQueryをアドオン専用のiQというものにフォーク
    TabViewという名前になって、Panoramaという名前に正式決定。
    iframeのtabview.htmlが本体
    つまりPanoramaの中身はDOM的なもの

iQ
    邪魔なものは排除、Firefox/Gecko向けに特化したライブラリ
タブの整理の仕方
    溝を作ってタブグループの吸着をよくする
    場所が無くなったら縮小
    ウィンドウを小さくするとグループを縮小して空間の間隔を維持する

Jetpack SDKからrquire("panorama")
    TabItemsとiQオブジェクトにアクセスできる

Jetpack に乗っかれないロートルのための、再起動いらずなアドオンの作り方 ～ Bootstrapped Add-on 詳説 ～

再起動なしのアドオン作成の作り方
Jetpack prototype
    再起動の仕組みはGreasemonkeyと似てる
Jetpack SDK
    ライブラリ+ビルト環境+テスト環境
    再起動なしの反映
        Bootstrapped ExtensionsというFirefox4からの仕組み
        3.6と4.xで再起動なしの仕組みが違う
Bootstrapped Extensionsの話
自分でinstallからuninstallまで管理しないといけない。
関数の書き換え系は危険なのでDOM 0なイベントの書き方はアウト。

loadOverlayはunloadできないのでJetpackでは使えない。
要素の変更は順番で駄目だったりすることがある。
=>元に戻せるならOK、可逆的な変更のみ
「完全には元に戻せない時の不整合が蓄積」=>これまで問題では無かったところが問題になることがある。
結論的にはJetpack SDKを使いましょう。

トークセッション: HTML5 時代の技術で Web プラットフォームはどう変わるのか

*矢倉 眞隆 (株式会社 ミツエーリンクス、W3C HTML5 Japanese Interest Group 議長)
*村岡 正和 (HTML5-WEST.jp 共同設立者)
*浅井 智也 (Mozilla Japan テクニカルマーケティング)

"HTML5時代の技術" => HTML5の関連の技術という意味ではない。

*矢倉
TPAC 2010(W3Cの総会)についての話
    CSS WG - レイアウトの話
    HTML WG  - アクセシビリティ
    WebApps WG - 多種多様活発
        DOM 、Eventとかいろいろ
        Web DOM Coreを現実的な仕様へ
    DAP WG

WebApps WGとDAP WGが面白い

*村岡
    関西で活動

大ライトニングトーク

途中で電池切れました
メモできてないけど、ES Hamony の Proxy について #fxdevcon で LT してきました – mooz deceives you よかった。

*swdyh - クロスブラウザ拡張ライブラリ
     * Chrome
     * Firefox(Jetpack SDK)
     * Safari
     * Opera　それぞれに拡張機能ができた
    それぞれブラウザでやり方が異なる。
    →それを吸収するライブラリを作成する
    Extension.js
    ブラウザ拡張の互換性を吸収するライブラリ

*齋藤幸士 - モダンブラウザによるWebサービス拡張
    ソーシャルメディア時代
    Webサービスをもっとリッチにする(Twitter)
    オレオレ短縮URL

*kawanet - 3D JavaScript
    3次元の世界
    CSS3で実装
    トグルが実装されてた

*Takesako - Firefox HTML Parserの歴史
    ブラウザ毎に認識が違う
    IMGタグの認識で振り分け

*Gomita - Tab Scope 1.0 ~ CSS transition で魅せるXUL拡張機能 ~
    Firefox4向けにTab Scope拡張
...

メモ感想

去年と比べると全くの聞いたことないようなものってはかなり少なくなった。
どこかで一度聞いた、誰か言ってた気がするみたいな浅いレベルの情報があった感じが多かった。
仕様書はあまり読んでなかったので、知らないことがあった。
NetFront4のJavaScriptエンジンの話は何か新鮮だったので、もっといろんな話が聞けたら良かったと思う。
John Resigさんに書いてる本がNinjaなのに表紙がSamuraiな件なのを聞くの忘れました。
ライトニングトークが多すぎる気がするので、もっと他の事に機会(時間)を与えた方がいい気がした。

はてなブックマーク – 特別でないただのブックマーク – fxdevcon
http://b.hatena.ne.jp/teramako/fxdevcon/
Togetter – 「Firefox Developers Conference 2010」
http://togetter.com/li/71239
Firefox Developers Conference 2010
http://mozilla.jp/events/2010/fxdevcon/
Posted in Firefox, イベント | Tags: , , , , , | 1 Comment »

Firebugを拡張するアドオンをまとめてみた

11月 19th, 2010

Firebugを拡張するアドオンを紹介

Firecookie

クッキーの編集や削除をする
クッキーの変更に反応してログを吐いてくれる

Software is hard | Firecookie

NetExport

通信タブの記録をHTTP Archive 1.1 (HAR)形式で保存
通信タブの表示を画像としてクリップボードにコピー

Firebug Autocompleter

FirebugのCommand EditorにJavaScriptのコード補完機能をつける。
(Firebugにもデフォルトで補完機能はあるが、一行Command Lineにしか反応しない)

Firescroll for Firebug

“Auto-Scroll” 自動でFirebugのログをスクロール
“Log to top” Firebugのログで上が最新になるようにするTweak

Widerbug

Firebugを縦置きにするTweak

Firebugmonkey

Greasemonkeyをスクリプトタブでデバッグする
UxU（うず）のように内部でGreasemonkey APIのエミュレートをしてる
Greasemonkeyはスクリプトタブに表示されずブレークポイントをうつなどのデバッガーを使ったデバッグが行えない
デバッガーでデバッグできない理由はevalInSandboxで実行されていて、evalInSandboxはC++実装だから。(多分Firebugでも同じ)
Greasemonkey のユーザスクリプトは Venkman the JavaScript debugger でデバッグできない：experiment：So-net blog

JavaScript Deminifier

Firebugのスクリプトタブで表示するJavaScriptを整形表示する
整形表示した状態でブレークポイントを打てるので圧縮されたファイルでもブレークできる
IE9 PP6 F12 開発者ツールのJavaScript整形みたいな機能
整形はjs-beautifyを使用、FireRainbowと競合する

FireRainbow

FirebugのスクリプトタブでJavaScriptのシンタックスハイライト表示を行う
HTML、CSSも一応対応

Eventbug

要素に適当されているイベントハンドラを表示する
clickしたらどの関数が実行されるかなどが分かる
(バージョンで動かない事が多い)

FireQuery

jQuery言語の表現をFirebugでも認識できるようにする
jQueryがないページでもCommand LineからjQueryを使える要にする
jQuery Lintの有効化

YSlow

ページ表示にかかる時間を計測
ページのボトルネックを調査

Firepicker

FirebugのCSSタブでカラーピッカーを使えるようにする

FireXPath

FirebugにXPathとCSSセレクタの確認ができるタブを追加する

Firequark

Firebugに選択要素のCSSセレクタをコピーできるようにするアドオン
(デフォルトはXPathしかないのでね)

CodeBurner

FirebugにHTML+CSSのリファレンスを追加する
他のソフトウェア向けにも出している

Adobe BrowserLab for Firebug

Firebugで加えた一時的な変更をAdobe BrowserLabを使ってプレビューする。
ページを変更してスクリーンショットで各ブラウザ表示を確認できる。

Pixel Perfect

指定した画像をFirefox上に重ねて表示してデザインがずれてないかを確認する

Arboreal

DOMツリーを視覚化して表示する
似たようなものとしてはView Source Chart

Illumination for Developers

ExtJSやjQuery UIなどのコンポーネントやデータの状態を表示する
現在はExt JSとSencha Touchに対応してて、有料で正式リリースする
Illumination for Developers によるとクロスプラットフォームを目指している

XRefresh

ファイルを監視してエディタで編集されたらブラウザをリロードする
クロスプラットフォーム対応

CSS Usage

読み込んだCSSで、それぞれのstyleが閲覧ページ内で本当に適用されているかどうか確認する
使われてないstyleを見つける

Firefocus

閲覧ページのどの要素にフォーカスがあるのかをHTMLタブに表示する

FireFile

サーバーサイドにスクリプトを用意(FireFile Instructions)することで、Firebugで変更した内容を反映させる事ができる。
また、Firebugで変更を反映したファイルをダウンロードすることができる。

FireUnit

Firebugで使えるユニットテスト
何か放置されてるような気がする

Log to Netpanel

JavaScriptから通信タブにマーカーを挿入可能になる
Teun.ToString(): Announcing Log to Netpanel – by Teun Duynstee

Omnibug

Omniture、WebTrends、Google Analytics、Urchin、Moniforceなどの計測データを確認。
utm_*などのアクセス解析のログを見やすく表示する

FireLogger

Python、PHP、RubyからFirebugへログを吐く

Flashbug

FlashのログをFirebugに表示することができる。
1.6からAMF dataにも対応

FlashFirebug

AS側にO-Mindsを仕込んでおくことでFirebugを使ったデバッグをできるようにする


書いてる途中でWikiがあるのを思い出して、大体被ってた気がしたけど問題ない。

Firebug Extensions – FirebugWiki
http://getfirebug.com/wiki/index.php/Firebug_Extensions
Posted in アドオン | Tags: , , , | 2 Comments »

最強のJavaScript IDE 「WebStorm」を使ってみた

10月 27th, 2010

JavaScript対応のIDEをまとめてみたの続きのようなもので、その中で紹介していたWebStormが素晴らしいので別途紹介。
WebStormはHTML(5)+CSS+JavaScriptに対応してるIDEで、Windows, Mac OS、Linux上で動作します。
有料のソフトウェアですが、オープンソースライセンスがあったり体験版は45日間使えるのでとりあえず試してみましょう。

特徴

とにかく膨大な機能が載ってるので全てを紹介するのは無理があるため、凄いと思ったところを掻い摘んで紹介。
主にJavaScriptを書くエディタとして使っていますが、CSSやHTMLも普通のIDEより書きやすいです。
基本的にWebStormで日本語に関する問題は少なめです。一部IMEの変換候補が出てくる場所がずれたり、プラグインで日本語がダメだったりするものがありますが、殆ど問題ではない程度です。文字コードはShift_JIS(windowsだとwindows-31j)も対応しているので問題にはならないと思います。

優秀なコード補完機能

WebStormはソースコードを自動的にコ－ド解析(静的解析?)してるようで、JavaScriptの構造を認識してコード補完を行えます。
例えば@teramakoさんがKomodo Edit が面白いで言っていたような

var container = {
  init: function() {},
};
container.obj = (function(){
  var privateProp = null;
  var namager = {
    publicMethod: function(){ },
  };
  return namager;
})();

というコードの場合container.obj.pu と書くとちゃんとpublicMethodも補完候補に表示されます。
さらにpublicMethodはメソッドなのでcontainer.obj.publicMethod()という形で補完されて、今は仮引数がないのでカーソルの位置は)の→になります。仮引数があると()の中にカーソルが置かれます。

ネイティブの補完候補もHTML5,ECMA,DOMCoreや結構細かいものも対応していて補完でアレが出てこないって事はかなり少ないです(ブラウザ拡張開発用とかは除いて)
補完候補は開いているディレクトリ以下のファイルを全部解析して表示してくれるので、ファイルをまたいだメソッドなども候補に表示されます。
今まで触ったJavaScriptエディタ、IDEで補完は最も素晴らしいと感じました。

JavaScript以外のHTMLタグやCSSも補完を行え、1つのファイルにHTML、JavaScriptなどが混在していた場合も正しく認識して補完が行える。HTML, CSS, JavaScript editing in an intelligent environment :: WebStorm Featuresで特徴がいろいろ紹介されています。

コ－ド解析による良さ


右サイドに警告レベル毎の表示

右サイドに警告レベル毎の表示


上でコ－ド解析してるのでインテリセンスみたいな事が凄くできるよと書きましたが、
他にもCtrl+クリックで関数宣言にジャンプ(Tipsで設定の変更方法が記載してあります)する機能や、リファクタリングで特定の変数名や関数名をリネームする機能(その名前を使ってるもの全部を変えてくれる)、Structureパネルでコードのアウトラインを表示できたりします。

後、文法が間違ってる場合などは警告なども表示できその設定も警告レベルから決められてかなり細かな指定が行えます。(JSLintみたいなもの?)

自動整形機能

個人的にIDEと言ったらコードの自動整形機能です。CodeメニューのReformat codeから実行できます。(ショートカットからもできる)
自動整形のルールはOptionのCode Styleからかなり細かく設定できるので、自分ルールに合わせて整形させる事ができます。


他にもページがあるぐらい多い

他にもページがあるぐらい多い


ショートカットキーはkeymap>Reformat codeで変更できます


E4X対応

Firefoxユーザー向けですが、構文解析がE4Xの記法に対応しています。
普通なら上記の自動整形でE4Xが混じってると崩れてしまって残念になりますが、E4Xもちゃんと扱えるので崩れません。
Firefox向けのコード、Greasemonkeyなどを書く人に使ってもらいたいところ。
(分割代入の記法にはまだ対応してなかったのはちょっぴり残念)

標準でバージョン管理機能がある


Gitのメニュー

Gitのメニュー



Vision Contorolメニューを有効にすると標準でローカルなバージョン管理が行えます。
デフォルトだと差分やrevertがができるLocal Historyが機能しますが、外部のバージョン管理ソフトと連携してSVN、Gitが使用できます。(Mercurialは標準ではなくhg4idea-luciadプラグインによって使用できます)
コミットやpushなどはIDE上からその場でできて、マージや差分表示などもできるので結構便利です。

JavaScriptデバッガー

Local JavaScript debuggingで紹介されてるようにFirefoxアドオンと連携したIDE上で動くデバッガが付いています。
他にもFirebugと連携して機能するプラグインなどもあったりしてFirefoxとの親和性は少し高め。

使い勝手

他の機能紹介はWebStorm Featuresやヘルプなどを見てもらうとして、使った感覚としてはそこまで重くは無いです。
起動はIDEらしくちょっとかかりますが(コード解析もあったりするので)、太ったEmacsの起動を我慢できるなら問題ない。
Aptanaみたいに長いコードだと極端に重くなるとかはないので、大規模なものでも扱えると思います(構造もみやすいし)
ショートカットはEclipse、NetBeans、Emacs、Visual Studio、Mac、GNOME、KDEなどの設定が最初から用意されていて、殆どの操作をカスタマイズできるので、自分好みにする事もできると思います。
Vimのキーバインドは標準ではなくプラグインのIdeaVIMによって使えます。(JetBrainsのIDEなら大体対応してる)
メモリは数十MB～多くても200MBいかないぐらいなので(ステータスバーにメモリ量が表示される)、少し古いPCでも動かせるぐらいです。自分のノートであるCore Duo T2300（1.66GHz）、512MBのPCでも使えるぐらいなので、最近のPCなら問題ないと思います。

UIが完全に英語ですが、設定は検索機能が優秀なので適当な単語からたどり着けることが多いし、表示している項目には全部ヘルプや説明が付いてるぐらいなので、オプションが豊富すぎるぐらいでそこまでつっかかりはないと思います。
(何ができないのかというのが少し分かりにくい感じではある)

Tips

メモみたいな

  • Productivity Tips 動画
    他のソフトだけど大体一緒なので参考になる。主にコード補完系
  • ショートカットキーはkeymapで変更できて、キーだけではなくてマウスクリックなどのショートカットもあります。
  • Ctrl+クリックで関数宣言にジャンプするのは keymap > Go to > declaration で設定変更できる。(デフォルトだとCtrl+B)
  • Find Action (Ctrl+Shift+A)でコマンド検索できる
  • ショートカット一覧(デフォルト)はPDFで配布もしてる WebStorm Resources
  • keymapでcomplete current statement(ctrl+shift+enter)が便利。最後の;が無かったら;を入れてくれて、あったら次の行へ。
    今の行のステートメントを自動的に補完してくれる感じ
  • Editor > Code Folding でコメントがデフォルトでたたまれるのを防止できる
    (Greasemonkeyとかデフォルトだとたたまれちゃうので)
  • File Templeteで${NAME}でファイル名が取れる(大文字区別する)
    適当な変数${test}を書くとファイル作成ダイアログでそれを入力して指定できる。
    例えばGreasemonkeyっぽいテンプレートを書くなら gist: 648943 – WebStormのFile Templete- GitHubみたいな感じ。
  • Editor > Editor Tabsでタブ位置を上下左右に変えられるので、縦置きタブバーも可能
  • JavaScript IntentionPowerPack。if-elseを||にするとか!から始まるifをflipして逆にするとか、リファクタリング関係のものが詰まってる。
  • 変数に下線とかの装飾はEditor > Color & Fonts > JavaScriptあたりから変更できます。
  • 文字コードの変更は画面下にある所をクリックでも変更できる
  • JetBrainsのIDEは大体形が同じ(扱える言語が違う)なので、他の種類のIDEのノウハウが使えることもある。

プラグイン

    から探せる(他にもあると思う)
    手動インストール方法はIntelliJ IDEA Plugin – TeamCity 3.x Documentation – Confluenceに書いてあるように、指定のpluginsフォルダにjarとかプラグインファイルをおいて、設定のpluginsから有効にすればいいみたい。
    けど、他のソフトを対象に書かれたプラグインは動作しない気がする。

  • eSnippet Pro plugin
    スニペットプラグイン。Ctrl+Alt+Spaceで補完のようにスニペットを追加できる。
    スニペットをオンラインに登録して、検索できる
  • CSS-X-Fire
    FirebugのCSSパネルのようにCSSを編集できるプラグイン
  • hg4idea-luciad
    Mercurial統合のプラグイン
    他のバージョン管理はデフォルトで大体ある。
  • デフォルトで入ってるスペルチェッカーは日本語に反応してうるさいので無効にした。

よく分かってないこと

やり方があったら教えて欲しいです。

  • いつでも参照できる補完候補の追加方法→実装されたWebStormのコード補完に新しく候補を追加する方法
  • WebStormを開いてる状態で、もう一回WebStormを開くと複数のウィンドウになるのをタブにまとめる方法→WebStorm-EAP-98.458でタブで開くようになった
  • 分割代入が整形機能で崩れる
  • 配列の最後に,がある時に警告がでるのを消す方法
  • 他のJetBrainsIDEのプラグインの入れ方がよく分からない(対応してないだけ?)

感想

とにかく機能が多くて、まだまだ使いきれない感じでさらにもうすぐ2.0がリリースされるので成長も早いIDEだと思います。
体験版が45日間と長いと思ったけど、1ヶ月使ってもまだ底が見えないので妥当な日数だと分かった。
珍しくタイトルが誇大っぽいけど、(現時点では)最強のJavaScript IDEは「WebStorm」だと言い切れるぐらい圧倒的できの良さ。
周りのJavaScript対応IDEと差がかなり大きいと思うので、後1-2年は追いつけるレベルのものが出てこない予感。
日本でのユーザ数がとっても少ない感じがするので、使ってどんどんブログなどに情報を書いてくれるともっと発展できるソフトウェアだと思うよ。

The best HTML, CSS and JavaScript Editor for Web development :: JetBrains WebStorm
http://www.jetbrains.com/webstorm/
HTML, CSS, JavaScript editing in an intelligent environment :: WebStorm Features
http://www.jetbrains.com/webstorm/features/
WebStorm
Posted in javascript, software | Tags: , , , , , | 2 Comments »

使ってないGreasemonkeyスクリプトを削除・整理するNILScript

10月 21st, 2010

Greasemonkeyはとても便利ですが、使用してないけどアンインストールするのが面倒で使わないスクリプトが貯まっていったりします。使わないスクリプトが貯まると猿アイコンを右クリックしたときに画面いっぱいになったり、管理画面が見づらくなったりしてとても邪魔になります。
そこで、今無効となっているスクリプトを適当なフォルダに移動して、Greasemonkeyスクリプトを整理するNILScriptを書いてみました。
(タイトルが削除とかなってますが、実際は移動させるだけ)

使い方

最初にgm_scriptsをバックアップして下さい(おかしな動作をして失敗しても大丈夫なように)
Firefoxが起動してないときに実行して下さい。

  • ngスクリプト(remove_noused_Greasemonkey.ng)をダウンロード
  • ngスクリプトをエディタで開いて、 var saveDirPath = “C:\\path\\to\\dir\\”; 移動先のディレクトリパスを書き換える
  • ngスクリプトをFirefoxのプロファイルフォルダにあるgm_scriptsフォルダ内に置きます。
  • Firefoxが起動してるならばFirefoxを終了しましょう
  • 必ずgm_scriptsをバックアップしてからngスクリプトを実行しましょう

ngスクリプトの実行方法はNILScriptの使い方と書き方やreadme.txtを見ると良いでしょう。
一応ログっぽいのも表示してるのでダブルクリック実行が手軽でしょう。
完了すると”無効になっているスクリプト m/n を移動しました”というメッセージが出て終わりです。

猿アイコンのコンテキストメニューがスッキリして気持ち軽くなりました(実際に動作が軽くなるかは知りません)
各Greasemonkeyがpref.jsに保存していた情報は消えてないので、完璧に綺麗になったわけではありません。
戻すときはバックアップしていたものを上書きすればもどせると思います。

utilityTools/Greasemonkey at master from azu/NILScript – GitHub
https://github.com/azu/NILScript/tree/master/utilityTools/Greasemonkey
NILScript
http://lukewarm.s151.xrea.com/nilscript.html
var saveDirPath = “C:\\Users\\azu\\Web\\Greasemonkeys\\”;// 移動先のディレクトリパス
Posted in NILScript | Tags: , , | 1 Comment »

JavaScript対応のIDEをまとめてみた

9月 20th, 2010

JavaScriptに対応してるIDEのメモまとめ。

全部試したわけではないですが、個人的にはAptanaやDreamweaverなど有名な所のできは悪くないです。
Aptanaは無料で使えて機能も充実してるので、重くなければもっと使われてる気がします。(JavaScriptだけなら通常のエディタでも十分通用するので好みによりますが)
IDE全般としては、クロスプラットフォームに対応しているのが殆どだったりします。
エディタとIDE、どちらが優れているとかではなくどっちも優れている部分を持っているので使い分けるのが良いと思います。

いろいろ巡った感想としてjQueryをサポートしてますって書いてるものが多いなーと思った。
IxEditとか見てると、JavaScript言語とは別にjQuery言語があるって思われる日がやってきそう。

元ネタ

Good JavaScript IDE with jQuery support – Stack Overflow
http://stackoverflow.com/questions/209126/good-javascript-ide-with-jquery-support
Open Komodo
Posted in javascript, software | Tags: , , , , , , | 4 Comments »

JavaScript関係のツールまとめてみた

9月 14th, 2010

最近使ってたりするJavaScript関係のツールまとめてみた。
主にWebサービスです。

Posted in javascript | Tags: , , , , | No Comments »

ページ移動時などに音を鳴らすアドオン「KIRISAKE」

8月 21st, 2010

またJetpack SDKで1つアドオンを作成してみました。
リンクをクリックしてページ移動などの通信が始まった際に、風を切り裂くような音を出すアドオンです。

作った理由ですが、
移動する際に音を出すと、ちゃんとリンクをクリックできたかなどが聴覚的にも認識できるのと、上記のような音を使う事でブラウザが少し早くなったような感じがします(I shallplease)

という後付けの理由があったりしますが、HTML5のAudioタグを使って見たかったというのが第一の要因です。
そういう気分になったのは中国のJetpackerのLT資料を見つけて、pageWorkerでhtmlファイルを読み込んでその中でAudioタグを鳴らすというサンプルが載っていたので実践してみました。
見つけたLTの資料はこれJetpack SDK: The new possibility of the extensions on browser

処理的にはたいしたことはやっていませんが、Jetpack SDKにはページ移動(ページを読み込みじゃなくて、通信が始まった瞬間)に反応するAPIはまだないような感じなので、nsIWebProgressを使った普通のFirefox拡張機能と同じように直に書きました。
Components.interfacesとか使う必要性が出てくるわけですが、Jetpack SDK0.6からはCiやCcというエイリアスがデフォルトではなくなったので、以下のようにrequireしてから使う必要があります。
Jetpack SDK 0.6 がリリースされました « Mozilla Developer Street (modest)

var {Cc, Ci} = require("chrome");

ちなみにこのvar {a,b} = obj;みたいな表記は分割代入というJavaScript 1.7からの機能を使ったもので、

var Cc = require("chrome").Cc , Ci = require("chrome").Ci;

というのと同様の意味になります。一部地域ではよく見かけるので覚えておくと便利です。

参考サイト

Components.interfaces
Posted in Jetpack | Tags: , , , , , | No Comments »
« Older Entries
Newer Entries »
プロフィール: azu(ｱｽﾞ)
Firefoxの事やソフトウェアの紹介や使い道、Greasemonkeyの作成
  • OS:Windows Vista, 7
  • ブラウザ:Firefox
  • Twitterのアカウントはこちら
    • azu_re
  • メールアドレス(Twitterの方が確実)
    • info@ドメイン名
リンク

^ ページトップへ | このサイトについて | サイト管理
Copyright © 2009 Web scratch. All Rights Reserved.

Powered by WordPress and WordPress Theme created with Artisteer.