Google Cloud
Cloud Shell のコード エディタがベータに
2017年8月8日
Google Cloud Japan Team
昨年 10 月、Google Cloud Shell にウェブ ベースのコード エディタが試験的に追加され、ブラウザ内でソース コードが簡単に編集できるようになりました。このたび、このエディタ機能がベータとなり、Cloud Shell でコードを書くことがより快適になるように、さまざまな改良が施されました。
新エディタは Cloud Shell のウィンドウと並んで表示されるため、編集作業からビルドやテストに移る際にタブを移動する必要がなくなりました。エディタを立ち上げるには、Cloud Shell 内のアイコンをクリックするか、こちらの URL から直接利用してください。
このエディタはオープンソースの Eclipse Orion プロジェクトをベースとしており、便利な機能がいくつも用意されています。ここでは、その一部を紹介します。
- コードのナビゲーションやフォーマット、編集を行うにあたって、キーの割り当てが可能です。割り当て可能なキーの詳細は、“Options > Keyboard Shortcuts” で参照するか、“Alt+Shift+?”（Mac OS X の場合は “Ctrl+Shift+?”）を入力してください。
- JavaScript、HTML、CSS、Java などの構文をハイライト表示できます。JavaScript、CSS、HTMLファイルを対象にした基本コンテンツのアシスト機能も備わっています。“Ctrl+Space” を押せば、エディタの現在のカーソル位置でコンテンツ アシスト機能を利用できます。
- 検索と置き換え機能を利用できます。
- フォントや UI のカスタマイズ機能も用意されています。
アプリのテストとコード修正
前回のブログ記事では、Cloud Shell による App Engine アプリケーションのデプロイとデバッグの方法を説明しました。今回は、Express.js フレームワークを使って書かれた Node.js アプリケーションのテストおよび修正方法の簡単なチュートリアルを紹介します。- ツールバーの右上セクションにある Shell のアイコンをクリックし、Cloud Shell を開きます。
2.サンプル コードを入手します。プロンプトに以下のコマンドを入力して、Google Cloud Platform（GCP）の Node.js サンプルが含まれているリポジトリをクローンし、ディレクトリをナビゲーションして Hello World コードを探します。
読み込んでいます...
3. 依存ファイルをインストールし、アプリケーションをスタートさせます。
読み込んでいます...
4. アプリケーションをプレビューします。スクリーン右上のウェブ プレビュー アイコンをクリックし、ポート 8080 を開きます。
5. アプリケーションを修正し、現在時刻が表示されるようにします。
- Cloud Shell ツールバーからコード エディタを開きます。
- エディタの左側にあるファイル ツリーから “~/nodejs-docs-samples/appengine/hello-world” というディレクトリを探し、app.js をクリックします。
- 23 行目以降の app.get 関数の内容を以下に置き換えます（変更部分は太字になっています）。その際、“date.toTimeString()” と入力するとオート コンプリート機能が働き、Data オブジェクトで利用可能なすべての関数が表示されます。
読み込んでいます...
- シェル パネルの一番下に “ctrl+c” と入力することで稼働中のアプリケーションを停止し、以下のコマンドで再起動させます。
読み込んでいます...
- “Hello World” というメッセージが表示されたタブをリフレッシュし、どのように見えるかを確認します。
* この投稿は米国時間 7 月 25 日、Product Manager である Sachin Kotwani によって投稿されたもの（投稿はこちら）の抄訳です。
- By Sachin Kotwani, Product Manager
