JSONデータを確認する際に皆さんどうしてますか？

今まではCocoa JSON Editorというアプリを使っていましたが、ブラウザのコンソールで見れるんですね。

コンソールでの見方

ChromeやFireBugのコンソールを表示します。

↑ その中に（）で囲んでJSONの値をいれてEnterを押します。

↑ すると、オブジェクトが配列され見やすくなります。

便利ですね！

以上、JSONのデータをJSONエディタを使わずにコンソールで見る方法でした

ちょっとメモ的にエントリー。

いつかGoogle Chromeのプラグインを作ってみたい、という人のためのテンプレート生成ツールですよ。

背景の有無、オプションページ、jQueryの有無、ブックマークや履歴管理などのパーミッション管理など、選択していくだけでOKなのでぱっと始めたい人には便利です。

↑こんな感じで選択して行けばOK。

というわけで興味がある方は以下からどうぞ。

さて、昨日Safari4のダウンロード方法を調べてたんですが、もっと簡単な方法があったので情報をシェア。

Multi-Safariを使用すると、複数バージョンのSafariを同時に実行出来るようになります。

Mac版のみなのですが、こういった形で公開してくれるのは嬉しいですね。

Safari1.0から4.0.5まで、各OSに合わせてダウンロードできるようになっています。

app形式になっているので、インストールも簡単です。

デザインの確認で、必要な方は重宝しそうですね。

興味のある方は以下のリンクからどうぞ。

本日、コーディングする際にSafari4での動作確認が必要だったので自分用にメモ。

コーディングする際に複数ブラウザでの動作チェックは必須ですが、
過去にリリースされたバージョンのブラウザを探すのは意外と大変です。

もしかしたら誰かの役にたつかもしれませんので、ブログにも投稿しておきます。

Safari4は以下のリンクからダウンロードできました。
※Windows版、Mac版どちらもあります。

Safari 4.0.5 (Snow Leopard, Leopard, Tiger, Windows)

英語版ですが、動作確認には十分だと思います。

以上、Safari4をダウンロードする方法でした。

Firefoxのアドレスバーからツイッターの検索が出来るアドオン「Twitter Address Bar Search」が便利だったのでご紹介。

Twitterから公式に出されたアドオンという事で早速試してみたのですが、すごく良く出来ています。

@と＃を入力することで、ユーザー名の検索とハッシュタグの検索に対応している様子。

デスクトップ上のFirefoxとアンドロイドで動作するようですよ。

使ってみた様子

↑ハッシュタグで検索している様子

↑検索バーにTwitterからの検索が追加されます。

アドオンのソースコードもGithubにて公開されていましたよ。
https://github.com/mozilla/twitter-address-bar-search

いちいちhttpから入力したり、そのサイトに行くのが面倒だったりしますが、
アドオンなら簡単に使えて良いですね。

詳細＆ダウンロードは以下からどうぞ。

すでに知ってるものもあるかもしれませんが、備忘録的に残しておきます。

詳しくは以下

OmniMail

アドレスバーから、メールの作成が出来るChrome拡張機能。
Gmailをブラウザで使っている方は重宝しそうです。

↑アドレスバーに「mail」と「Tab」を続けて入力すると、拡張機能が待機状態になります。

その状態でメールアドレスを入力してEnterを押すと、メールの新規作成画面が開くように。

Google Contactを使用している方は最初の何文字かを記入すれば、サジェストでアドレスを表示してくれます。

Mailto:Gmail

mailtoをクリックした時にGmailが新しいウインドウで開くようになります。

Send from Gmail

今開いているサイトのタイトルとURLをGmailで送る時に使える便利拡張です。
後で読むサイトをメールで管理したい場合に使えますね。

AdBlock

Gmailの広告を非表示にする拡張機能。

Better Gmail

添付ファイルのアイコンを拡張子によって切り替えたり、必要のない広告やチャット、招待、フッタを非表示にしてくれます。

その他にも選択行のハイライトやmailtoリンクのクリックによるGMAILの起動など、様々な便利機能が追加できるようになります。おすすめ。

Google Mail Checker

Google Mail の受信トレイにある未読のメール数を表示します。

新着メールのデスクトップ通知

他にも標準機能ですが、新着メールのデスクトップ通知が可能になっているようです。

設定方法は、Gmailの設定画面からデスクトップ通知をオンにするだけです。GmailとChromeをよく使う方はいかがでしょうか。
こういった便利な機能を作成してくれた作者様に感謝感謝！

他にもGmail Labsには便利機能がいっぱい隠されています。

ちょっと変わったアイデアを試してみたい方はどうぞ。

いまやFirebugはWeb開発には必須の拡張機能ですが、Flashでも使いたいという方のために「FlashFirebug」という物がありました。

AS3で作れらたFlashのデバッグが、HTMLやJSをデバッグするように簡単に作業できるようになりそうです。

アドオンをインストールすると、FirebugにFlashパネルが追加され、閲覧ページ内のFlashをデバッグできるようになります。

Firebugのようなデバッグ

↑SWFにマウスオーバーした際に、HTMLのように要素を表示してくれます。

↑YouTubeのサイトで、パラメータを操作している様子。

↑エラーやトレースの出力ももちろん可能に。

これは開発が楽になりそうですね。

利用にはFlash Debug Playerバージョン10以上が必要との事。
ダウンロードは下のリンクからどうぞ。

Firefox4がリリースされてから1週間程度たちましたが、もうインストールされてますか？

本日はFirefox3と4を共存させて同時起動できる方法を調べたのでやり方をシェア。

Firefox 3 はインストール済みの状態から始めてます。

Windowsの設定方法
Macの設定方法

Windowsの設定方法

Firefox4をインストールする

Windowsでの設定方法です。
まずはFirefoxの公式サイトから最新版をダウンロードしてインストールを開始します。

↑インストール時にカスタムインストールを選択します。

↑インストール先をC:\Program Files\Mozilla Firefox 4にします。

あとは普通にインストールしてOKです。
ただし、まだ起動してはいけません。

Firefox4起動用のショートカットを作成

↑C:\Program Files\Mozilla Firefox 4\firefox.exe のショートカットを作成します。

↑ショートカットを右クリックして「プロパティ」を選択。

↑リンク先を以下のように変更します。

"C:\Program Files\Mozilla Firefox 4\firefox.exe" -p "firefox4"

これで、今後Firefox4を起動するときにこのショートカットを使用すればOKです。

Firefox3のショートカットを作成

Firefox4をデフォルトのブラウザに設定した際に、
メールや他のソフトなどからブラウザを起動する際にFirefox3が立ち上がらないように設定します。

↑C:\Program Files\Mozilla Firefox\firefox.exe のショートカットを作成します。

作成したショートカットのプロパティを開いてリンク先を以下のように変更します。

"C:\Program Files\Mozilla Firefox\firefox.exe" -p default -no-remote

↑既定のブラウザでは無い方に -no-remote オプションを追加します。
今後はFirefox3を立ち上げる際に、このショートカットを使用すればOKです。

Macでの設定方法

Firefox4をインストールする

まずはFirefoxの公式サイトから最新版をダウンロードしてきます。。

アプリケーションをリネーム

↑ダウンロードしてきたFirefoxのアプリケーション名を変更します。
今回はFirefox4に変更してみました。

起動時のプロファイルを変更する

このままだと既存のFirefoxのプロファイルを読み込みに行ってしまうので、新しくプロファイルを作成します。

↑Firefox4.appを右クリックして「パッケージの内容を表示」を選択します。

Finderから以下のファイルをテキストエディタで開きます。

Contents/MacOS/application.ini

↑Name=Mozillaの所を以下のように書き換えます。

今回はFirefox4という名前に変更しました。
これで普通に起動すれば完了です。

QuickSilverから起動する際にもリネームした名前で立ち上げる事ができるようになります。

導入にあたっては以下の記事を参考にさせていただきました。感謝！

[ Firefox ] Windows XP で Firefox 3 と Firefox 2 を共存させる方法
Macで複数のFirefoxを共存させる方法

インストールすると、ブラウザのステータスバーにCakeアイコンとデバッグレベルが表示されるようになります。

右クリックからデバッグレベルを選択、変更できるようになりました。
CakePHP開発者の方は全員入れて良いのではないでしょうか！

設定方法

コンポーネントをgithubからダウンロードして、コンポーネントに読み込むだけです。

app_controller.phpに設定すると良いでしょう。

class AppController extends Controller {
    var $components = array(
        'DebugControl',
    );
}

デバッグレベルが0の場合には動作しないようです。
必ず1以上の値を設定してください。

Configure::write('debug', 1);

PhotoShopでレイアウトを作成する際にガイド機能はとっても便利ですよね。

そんな便利なガイド機能をFirefoxのアドオンとして使える「foxGuide」をご紹介。

Webサイトに水平、垂直に線を引いてデザイン構造を思い通りに作れるようになりましょう！

以下、主な機能になります。

一度ガイドを設定すると、ブラウザ再起動後も保存されている

ウェブページ上でガイドを設定すると、そのガイドは自動的に保存され、次回訪問時にも表示できるようになっています。

タブを閉じたり、ブラウザを再起動しても使えるのは嬉しいですね。
もちろん削除する事もできます。

十分な長さ

10000ピクセルの画面サイズまで使用できるそうです！すごい！

たくさんのオプション

サイトのコンテンツが隠れてしまわないように、定規の透明度を変更することができるようになっています。 また、ガイドの色も変更可能です。

ダウンロードは下のリンクからどうぞ！