KubeCon ゆるいドック拡張機能の作成

KubeCon EU 2022 の期間中、当社の Docker チームは、 Linux 用 Docker Desktop や Docker Extensions など、多くの最新リリースを披露することができました。 これらに関するコミュニティのフィードバックは圧倒的に肯定的です! 利用可能な拡張機能の種類を示すために、ディスク使用量拡張機能のデモを行い、会議専用の独自の拡張機能であるFlappy Dockを作成しました。 拡張機能とその構築方法について詳しく見ていきましょう。

 

 

拡張機能の構成

独自の拡張機能を構築していない場合、拡張機能は、フロントエンドとオプションのバックエンドサービスを含む特別にフォーマットされたDockerイメージです。 フロントエンドは、イメージから抽出され、Docker デスクトップ内にレンダリングされる単なる Web アプリです。 したがって、Webブラウザで実行できるものはすべて拡張機能として実行できます。 拡張機能の(詳細は後で説明します)構成ファイルは、 metadata.json Docker Desktopにインストール方法と使用方法を指示します。

KubeCon の楽しいアイデアを探し回ったとき、簡単なゲームを実行することにしました。 幸いなことに、私たちは GitHub で Flappy Bird のウェブ適応を見つけました — nebez/floppybird に感謝します! これは完璧な出発点になります。

ゆるい鳥をゆるいドックに変換する

ゆるい鳥は楽しいですが、MobyとMollyを使いながら航海のテーマに合わせてみませんか? 幸いなことに、これは次の手順で行うのが非常に簡単な変更です。

1)NGINXコンテナの使用

リポジトリをローカルに複製した後、コンテナーを使用して nginx アプリを起動できます。 新しい [アイキャッチ画像] ページを使用すると、数回クリックするだけでコンテナーを開始できます。 コンテナを起動し nginx 、リポジトリのクローンを作成したディレクトリを選択してサイトを開くと、Flappy Birdが表示されます。1つか2つのゲームを自由にプレイしてください(マウスまたはスペースバーのいずれかを使用してゲームをプレイしてください)!

 

 

2)画像の交換

ゲームをカスタマイズするには、いくつかの画像をDockerをテーマにした画像と交換する必要があります。 次の各画像は assets フォルダーに入ります。

• Moby
• モリー
• 海の背景 (空を置き換える)
• 海の天井
• 海底 (陸地の代替)

 

3)あなたのCSSを変更する

を変更して、元の空、天井、土地のアセットを新しい画像に置き換えます css/main.css 。 ブラウザを更新すると、次のようになります。

 

 

これで画像が配置されましたが、画像が使用されていない色を調整する必要があります。 次にそれを行います!

css/main.css ファイルで、次の変更を行います。

1. #sky 宣言で、背景色の値を #222D6D に設定します
2. #land 宣言で、背景色の値を # に設定します094892

 

あなたは私たちのゲームが一緒になるのを見ることができます!

 

 

4) ゲームコードの更新

両方の CSS クラスを配置したら、ゲーム コードを更新してキャラクターをランダムに選択しましょう。 また、ページを更新せずにゲームを複数回プレイできるため、前のキャラクターの選択をクリアする必要があります。 js/main.js ファイルで、関数を見つけます showSplash 。その関数の先頭に、以下を追加します。

const useMolly = Math.floor(Math.random() * 2) === 0;
$("#player")
  .removeClass("moby").removeClass("molly")
  .addClass(useMolly ? "molly" : "moby");

 

最後に、ゲームをチェックしてください。 これで、フラッピードックをプレイしている間、モービーまたはモリーのどちらかを主人公として正常に使用できるはずです。

 

 

 

ゆるいドックをエクステンションに変える

Webベースのゲームの準備ができたので、それを拡張機能に変える時が来ました! 前述したように、拡張機能は、構成を持つ metadata.json を含む特殊なイメージです。

Docker 拡張機能コマンドを使用するには、まず Docker 拡張機能 SDK プラグインをインストールします (手順については、 こちらを参照してください)。 これは現在、拡張機能マーケットプレイスにリストされていない拡張機能をインストールする唯一の方法です。

1)ルートへの構成の追加

プロジェクトのルートで、次の内容のファイルを作成します metadata.json 。

{
 "icon": "docker.svg",
 "ui": {
   "dashboard-tab": {
     "title": "Flappy Dock",
     "root": "ui",
     "src": "index.html"
   }
 }
}

 

この構成では、拡張機能のタイトルと、Web ベースのアプリケーションを含むコンテナー イメージ内の場所を指定します。

2)画像の作成

あとはコンテナイメージを作成するだけです。 これを行うには、以下 Dockerfile を使用できます。

FROM alpine
LABEL org.opencontainers.image.title="Flabby Dock" \
   org.opencontainers.image.description="A fun extension to play Flappy Bird, but Docker style!" \
   org.opencontainers.image.vendor="Your name here" \
   com.docker.desktop.extension.api.version=">= 0.2.3" \
   com.docker.extension.screenshots="" \
   com.docker.extension.detailed-description="" \
   com.docker.extension.publisher-url="" \
   com.docker.extension.additional-urls="" \
   com.docker.extension.changelog=""
 
COPY metadata.json .
COPY index.html ui/
COPY assets ui/assets
COPY css ui/css
COPY js ui/js

 

ここでは Dockerfile 、をルートに配置し、 metadata.json 構成で指定した場所に他のキーファイルをコピーします。 さまざまなラベルを使用して画像を説明することもできます(これはMarketplaceの画像に役立ちます)。

この時点で、次のコマンドを使用してイメージをビルドしてインストールできます。

docker build -t flappy-dock .
ドッカー拡張機能インストールフラッピードック

 

3)ドッカーデスクトップ内で確認する

Dockerデスクトップ内で、サイドバーにFlappy Dockが表示されるはずです。 クリックするとゲームが遊べます!

 

 

 

KubeCon では、累計スコア、実行回数、パイプ間に余分なスペースがある利用可能な "簡単モード" など、アプリにいくつかの変更を追加しました。 もっと詳しく知りたいですか? この GitHub コード リポジトリのコードのバージョンを確認してください。

要約

Flappy Dockを拡張機能に構築するというかなり基本的な例ですが、Webベースのインターフェイスを拡張機能に変換する方法を示しました。 独自のツール、ドキュメント、さらにはゲームのアイデアがある場合は、このブログ投稿がお役に立てば幸いです。

Docker 拡張機能の詳細と、SDK を通じて提供される追加機能 (Docker コマンドの実行、コンテナーとイメージの一覧表示など) を調べる場合は、以下のリソースにアクセスしてください。 フィードバックや、Docker拡張機能で構築したいものについてお聞かせください。

 

• 拡張機能 SDK ドキュメント – 独自の拡張機能を構築し、SDK を探索するときに役立ちます
• 拡張機能 SDK リポジトリ – フィードバックの共有、バグの報告、機能要求の送信に役立ちます