Google Cloud Platform

Cloud Shell のコード エディタがベータに

昨年 10 月、Google Cloud Shell にウェブ ベースのコード エディタが試験的に追加され、ブラウザ内でソース コードが簡単に編集できるようになりました。このたび、このエディタ機能がベータとなり、Cloud Shell でコードを書くことがより快適になるように、さまざまな改良が施されました。

新エディタは Cloud Shell のウィンドウと並んで表示されるため、編集作業からビルドやテストに移る際にタブを移動する必要がなくなりました。エディタを立ち上げるには、Cloud Shell 内のアイコンをクリックするか、こちらの URL から直接利用してください。

6326.png
進行中のソフトウェア プロジェクトに取り組んでいる場合だけでなく、新しい API やオープンソース ライブラリを学習したり試用したりしている場合でも、Cloud Shell を使えばブラウザ内でとても簡単にコードを書くことができます。

このエディタはオープンソースの Eclipse Orion プロジェクトをベースとしており、便利な機能がいくつも用意されています。ここでは、その一部を紹介します。

  • コードのナビゲーションやフォーマット、編集を行うにあたって、キーの割り当てが可能です。割り当て可能なキーの詳細は、“Options > Keyboard Shortcuts” で参照するか、“Alt+Shift+?”(Mac OS X の場合は “Ctrl+Shift+?”)を入力してください。
_C9eGm8KfmR73wfcgmnVHfuaoA1cDjlMj-bn1PMlA5feY40hnYz44EyYd5Pbmol8GbvKEsPGh7FCcVUmRjiNLRY4B1y-ku1UiUs7U7YxO4x31OF7E6vF4nNJMNZ0yPwA9YUdLnVP7ecy.PNG

  • JavaScript、HTML、CSS、Java などの構文をハイライト表示できます。JavaScript、CSS、HTMLファイルを対象にした基本コンテンツのアシスト機能も備わっています。“Ctrl+Space” を押せば、エディタの現在のカーソル位置でコンテンツ アシスト機能を利用できます。

nyJfu-MQYffamo6VUp17eiZFeY1N9opv76za1hUXN0Wq1dcA-kC4jI5O1SaRqdeGvtL7nh9ChvrdpTROHZB-sT3PcjQwz-rRiwfaTx53C2la9dx5_19hcJAK10D1XcUK0Bxr5rZTasdf.GIF

  • 検索と置き換え機能を利用できます。

HBoJoNx_1esNlzjibOQVVYvc6GRRaHeXKXqWmVzf7u5g6yFLNqjHLcGBb7XOeSZ8qHDvdoT8Mt2DwE0zzqt_MT8161YQKgitRIP5dUJgwdO9Vg4sdA92wFHWxY__x4zcTSM8M9POmcgm.PNG

  • フォントや UI のカスタマイズ機能も用意されています。

Yp30n7pLkeCx_FOr3dRulzp-5lFmiYGn9na8QvWJbE0-hLI9-7JmfcbOgWN5vsBXGuNe82vwHuy__dD36iB9RPGmFGCfQINNb-SZ4BQ5lT4QuaLeNn4Gh1SgoM7dThKhNocHxanNof1z.PNG

アプリのテストとコード修正

前回のブログ記事では、Cloud Shell による App Engine アプリケーションのデプロイとデバッグの方法を説明しました。今回は、Express.js フレームワークを使って書かれた Node.js アプリケーションのテストおよび修正方法の簡単なチュートリアルを紹介します。

  1. ツールバーの右上セクションにある Shell のアイコンをクリックし、Cloud Shell を開きます

ov2vjzntRNwf4vTaC6StiEhJqFgPeRtjKnqjqvFxuS5p4oheBGcjoWA31KTXl1uF-r2b8TBcCPOffoqdBSXVLxFUD0Pijl2FSq_GeF63J1uW7FNlCyZQ7VTJHkfLayd_BTETLdDxcame.PNG

2.サンプル コードを入手します。プロンプトに以下のコマンドを入力して、Google Cloud Platform(GCP)の Node.js サンプルが含まれているリポジトリをクローンし、ディレクトリをナビゲーションして Hello World コードを探します。

  git clone 
https://github.com/GoogleCloudPlatform/nodejs-docs-samples
cd nodejs-docs-samples/appengine/hello-world

3. 依存ファイルをインストールし、アプリケーションをスタートさせます

  npm install
npm start

4. アプリケーションをプレビューします。スクリーン右上のウェブ プレビュー アイコンをクリックし、ポート 8080 を開きます。

8xrFC2Llr78VfGtyZE_ul8KQXX-4VJgRCdplKZ1mR8IrjUr158KPliaet04C93H0pfiBnYN6mjosacLTM66jaLruImR-zcnD1VbyeOMT4VP6GXCMdkCW8t0vAPG2rMRlJeG8hsjC9j2m.PNG

5. アプリケーションを修正し、現在時刻が表示されるようにします

  • Cloud Shell ツールバーからコード エディタを開きます。
  • エディタの左側にあるファイル ツリーから “~/nodejs-docs-samples/appengine/hello-world” というディレクトリを探し、app.js をクリックします。
  • 23 行目以降の app.get 関数の内容を以下に置き換えます(変更部分は太字になっています)。その際、“date.toTimeString()” と入力するとオート コンプリート機能が働き、Data オブジェクトで利用可能なすべての関数が表示されます。

  app.get('/', (req, res) => {
  var date = new Date();
  var time = date.toTimeString();
  res.status(200).send('Hello, world! It is now ' + time).end();
});

  • シェル パネルの一番下に “ctrl+c” と入力することで稼働中のアプリケーションを停止し、以下のコマンドで再起動させます。

  npm start

  • “Hello World” というメッセージが表示されたタブをリフレッシュし、どのように見えるかを確認します。
おめでとうございます。一度もブラウザから離れることなく、新しい Node.js アプリケーションを作成できました。今回紹介したサンプルの詳細や、App Engine フレキシブル環境にアプリケーションをデプロイする方法については、こちらを参照してください。また、Cloud Shell の詳細はこちらをご覧ください。

* この投稿は米国時間 7 月 25 日、Product Manager である Sachin Kotwani によって投稿されたもの(投稿はこちら)の抄訳です。

- By Sachin Kotwani, Product Manager