Web上でJavaScriptを開発する

お久しぶりのエントリです。
またまた長らくサボってしまいました。


自社で*1Advent Calendarをやろうという事になりまして、私も参加する事にしました。
本来は12月にやるものですが、細かい事は気にしないのが我が社のスタイルです。
メンバーはベテラン、中堅(私は多分ここ)、若手の計6人で、曜日(土曜日はお休み)で担当を決めています。
技術の勉強もそうですが、文章を書く勉強にもなるので、私的には良い試みだと思っています。


そして、私の担当は火曜日なのにいきなり遅れてすいません。


今回のテーマは「JavaScript」です。


昨日(もう一昨日)は、id:yamasahi先輩の「PhantomJS入門 スクリーンキャプチャを撮るまで」です。
明日は同期のid:koizussさんです。


今回は題名の通り、開発環境について書きます。
JavaScriptの開発環境は、みなさん思い思いのスタイルがあると思います。
VimEmacsIDE(EclipseAptana、WebStorm)等、考えるとキリがないくらい多種多様です。
今回はその中でもWeb上で開発できるサービスを紹介したいと思います。

jsFiddle (http://jsfiddle.net/)

作者はPiotr Zalewa
主な特徴は以下になります。

  • アカウントなしでサービスが利用できる
  • 組み込みライブラリが充実している
  • 独自に作成したJavaScriptCSSを追加できる
  • 作成したスクリプトを保存できる
  • HTML/CSS/JavaScript/出力を4分割した画面でそれぞれ作業できる
  • *2JSLintの構文チェック機能が使える
  • インデント機能がある
  • *3weinreによるデバッグ機能が使える
JS Bin (http://jsbin.com/)

作者はRemy Sharp
主な特徴は以下になります。

  • アカウントなしでサービスが利用できる
  • 組み込みライブラリが充実している
  • 作成したスクリプトを保存できる
  • HTML/CSS/JavaScript/コンソール/出力を5分割した画面でそれぞれ作業できる
  • JSLintの構文チェック機能が使える
jsdo.it (http://jsdo.it/)

作者は株式会社カヤック
主な特徴は以下になります。

  • OpenIDとOAuthに対応している


どのサービスもWeb上でJavaScriptの開発、デバッグができ、
サービスごとに日本語に対応していたり、モバイル向けの機能が充実していたりと強みがあります。
サクッと開発してコードをアップして、共有したい時などは便利かなと思います。

*1:クリスマスまでの期間に日数を数えるために使用されるカレンダーから派生して、技術系コミュニティから火がついた、「あるテーマにそって12/1から12/25まで1日に1つずつブログ記事を公開するお祭り」

*2:構文チェックツール

*3:WebKitのWebInspectorやFirebug(Firefox)のようなデバッグ機能をリモートで提供してくれるプロダクト

Windows 7にXP風のスタートメニューを追加して、「上へ」ボタンを追加して、アドレスバーの表示をデフォルトでパスにする

Windows 7にはWindows XPで使われていたスタートメニューがありません。
僕は以前のUIの方が使い慣れているので、今回はスタートメニューを追加することにします。


手順は以下になります。

  1. Classic Shell」というツールをインストールします。
  2. インストール後に、左下のWindowsマークボタンを押下します。
  3. レイアウト選択のダイアログが開くのでWindows XPを選択して、「OK」ボタンを押下します。

他にもクラシックスタイルやVistaスタイルなども選択することができます。


XP風に設定するとこんな感じになります。いやーいい感じだ。


このツールには「Classic Explorer」というツールも同梱されていて、
レイアウトを色々設定変更することができます。
そこで、今回は僕的に必須の「上へ」ボタンの追加と、アドレスバーの表示をデフォルトでパス表示にします。


手順は以下になります。

  1. スタートメニューから「Classic Shell」→ 「Classic Explorer Settings」をクリックします。
  2. 「Disable breadcrumbs」のチェックを入れる → アドレスバーをデフォルトでパス表示にします。
  3. 「Show Up button」の「After Back/Forward」のチェックを入れる → 「上へ」ボタンを追加します。
  4. 上記の設定後「OK」ボタンを押下します。

これでエクスプローラーを再起動すると以下のような感じになります。

他にもツールバーが以前のように表示されたので、
ここから「フォルダーオプション」の設定を変更することもできます。


何回かに渡ってWindows 7の設定を変更しまくってきましたが、
これでかなりXP風なWindows 7になって使いやすくなりました。


個人的には、F2キーでファイル名の全選択できるようにしたかったんですけど、
お忍びリネームとかのツールを使ってもうまくいきませんでした。

それでも、結構満足な仕上がりになりました。よかったよかった。

Windows 7でタスクバーをXP or Vista風にする

Windows 7ではタスクバーのレイアウトがXPやVistaから大きく変更されています。
本来はこのスタイルに慣れるべきなのですが、
僕的には以前のレイアウトの方が、慣れていて好きなので変更することにしました。
Windows XPのサポートは来年の4月に終わってしまいますが気にしません。


手順は以下になります。
1. タスクバーのアイコン(IE等)を右クリックして「タスクバーにこのプログラムを表示しない」をクリックします。
※ この操作をすべてのアイコンに対して行い、タスクバーに何も表示されていない状態にします。
2. タスクバーを右クリックして、「プロパティ」をクリックします。
3. 「小さいアイコンを使う」にチェックして、「タスクバーのボタン」の「結合しない」をクリックします。

これでアイコンと詳細情報が表示されたXP風のタスクバーが表示されます。

Windows 7でタスクバーにクイック起動を追加する

Windows 7ではタスクバーにクイック起動がありません。
僕はよく使うアプリはランチャーで起動して、
たまに使うようなアプリはクイック起動に登録しているので、ないとちょっと困ります。


そこで、Windows 7にクイック起動を追加することにしました。
手順は以下になります。
1. タスクバーを右クリックして「ツールバー」→「新規ツールバー」をクリックします。
2. 「フォルダーの選択」が表示されるので、以下を入力して「フォルダーの選択」をクリックします。

C:\Users\ユーザー名\AppData\Roaming\Microsoft\Internet Explorer\Quick Launch


3. ツールバーの固定を解除して「Quick Launch」をドラッグして左端に移動します。
4. 「Quick Launch」を右クリックして「ボタン名の表示」と「タイトルの表示」のチェックを外します。

これでクイック起動が使えるようになりました。

Windows 7でエクスプローラーのナビゲーションウィンドウをツリー表示にする

Windows XPではエクスプローラーのナビゲーションウィンドウは、デフォルトでツリー表示になっています。
しかし、Windows 7ではツリー表示ではなくブロックで表示されています。
各フォルダの左三角をクリックすると展開して表示されますが、
毎回クリックするのはちょっと面倒です。


そこで今回はデフォルトでツリー表示になるように設定変更します。
手順は以下になります。

  1. エクスプローラーを開き、左上の「整理」→「フォルダーと検索のオプション」をクリックします。
  2. 「フォルダーオプション」の「全般」タブをクリックします。
  3. 「ナビゲーションウィンドウ」の「自動的に現在のフォルダーまで展開する」にチェックを入れます。

これで自動的に開いた階層に応じて展開されるようになりました。

Windows 7でアプリとファイルの拡張子を関連づける

Windows XPではアプリとファイルの拡張子の関連付けは、「フォルダーオプション」からできました。
しかし、Windows 7では設定できる場所が変わっています。


手順は以下になります。

  1. コントロールパネルから「プログラム」をクリックします。
  2. 「既定のプログラム」をクリックします。
  3. 「ファイルの種類またはプロトコルのプログラムへの関連付け」をクリックします。

この画面からアプリとファイルの拡張子の関連付けを行います。
以下の例は「.txt」の関連付けをデフォルトの「メモ帳」から「サクラエディタ」に変更しています。



ちなみにコマンドプロンプトからでも変更できたりします。

手順は以下になります。

  1. 「assoc 拡張子」でファイルタイプを確認します。
  2. 「ftype ファイルタイプ」で関連付いているプログラムを確認します。
  3. 「ftype ファイルタイプ=関連付けるプログラムのパス %1」で関連付けるプログラムを変更します。

まーコマンドプロンプトはマニアックなので、知らなくてもいいですけどねw

Windows 7でウィンドウを上にドラッグすると最大化するのを止める

Windows 7はデフォルトの設定だと、
ウィンドウをドラッグして上に移動すると自動的に最大化してくれます。
個人的にこの機能がかなりいらないので、今回はこの機能を無効化します。


手順は以下になります。

  1. コントロールパネルから「コンピューターの簡単操作」をクリックします。
  2. 「マウスの動作の変更」をクリックします。
  3. 画面下の「ウィンドウが画面の端に移動されたとき自動的に整列されないようにします」にチェックを入れます。

これで、ウィンドウをドラッグで上に移動しても、勝手にサイズが最大化しなくなりました。