CloudStack GUI改造のためのお役立ちツール

  • 2
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

こんにちは。CUPA荒井です。
巷では正月休みということですが、こちらはようやく仕事納め?という感じです。

今日はCloudStack Advent Calendarネタ(かなり遅れてますが、、)も兼ねてCloudStack GUIをカスタマイズする上で、知っておいて損のないツールを説明します。
Cloudstackをサービスとして使い始めると特定のメニューを消したい、追加したい、操作を制限したいなど思うことがあります。この場合にはCloudStackのJavaScriptファイルをいじることになります。

CloudStackのGUIを編集するにあたりこれから紹介するようなツールを使うか使わないかで大きく生産性が変わるので、最低限知っておきたいツールを紹介します。

Firebug

Web開発者であれば押さえて置かないと行けないツール(だと自分は思っている)のですが、インフラエンジニアも入れておくと非常に便利なツールです。

インストール方法:
FirebugはFirefoxのaddonなので簡単にインストールすることが可能です。
以下のサイトからダウンロードを選択し、手順通りクリックするだけでインストールできます。
https://addons.mozilla.org/ja/firefox/addon/firebug/

インストールするとFixfoxの右上に「虫」のアイコンが現れるので、こちらをクリックするだけで起動できます。

CloudStackでの主な使い方:

1) 「スクリプト」タブにて各JavaScript(js)ファイルの内容を確認し、デバッグを行うことができます。
スクリーンショット 2014-12-27 18.32.12.png
2) 「ネット」タブにてブラウザとMSサーバのAPI発行とそのリクエスト/レスポンンス内容を確認することができます。
エラー応答やCloudStackの応答が遅いなどの問題の切り分けに非常に重宝します。

スクリーンショット 2014-12-27 18.32.31.png

ここで紹介するのはほんの一部でFirebugには非常に豊富な機能があります。是非インストールしておくことを奨励します。

Charles Proxy

HTTP Proxyとして動作し、その通信内容を表示できる他、
指定したファイルを書き換える等の機能ももっています。

インストール方法:
こちらも各OS毎のパッケージが提供されているのでインストールは非常に簡単です。以下のHPよりDownloadを選択し、利用しているOSに併せたパッケージをインストールしましょう。
http://www.charlesproxy.com/

インストールしたら Charles Proxy を起動します。
起動後、ブラウザのProxy設定にて Charles Proxy のポート(デフォルトでは 8888)を指定します。
スクリーンショット 2014-12-26 1.20.56.png

この状態でブラウザで通常どおりアクセスを行うだけで、通信内容がCharles Proxyによって解析され表示されるようになります。
スクリーンショット 2014-12-26 1.21.33.png

さらに特定のファイルを置換えることも可能です、
以下の例では CloudStack のロゴをローカルのものと置換えています。
スクリーンショット 2014-12-31 22.40.15.png

ロゴが変換され、僕と契約して(以下略
スクリーンショット 2014-12-31 22.43.53.png

上記は画像ファイルですが、同様に JavaSciprtファイルも指定することも可能です。こうすることで、サーバ上のファイルを変更することなく、JavaScriptファイルの改変内容をチェックし、動的にデバッグすることが可能になります。

是非皆さんも 僕と契約してCloudStackユーザに これらのツールを利用して環境に適した CloudStackを作りましょう!