santa tracker web

Web用のGoogle Santa Tracker

このリポジトリには、12月の休日の教育的で面白い伝統であるGoogle Santa Trackerへのコードが含まれています。

このソースコードが面白いと思うことを願っています。一般に、私たちは一般からの外部貢献を受け入れません。バグレポートまたは機能リクエストを提出するか、エンジニアリングリードJez Swansonに連絡することができます。

（このテキストは貢献しています。md）

サポート

Santa Trackerは、Chrome、Firefox、SafariのEvergreenバージョンをサポートしています。また、他のクロムベースのブラウザ（エッジ、オペラなど）もサポートしています。

また、ユーザーが少数の歴史的なゲームをプレイできるIE11など、古いブラウザーに「フォールバックモード」を提示します。

サイト構造

サンタトラッカーはさまざまなシーンに分かれています。サンタトラッカーの各ページは、メインビレッジページのModvilを含む1つのシーンに対応しています。シーンは静的/シーン/ディレクトリにあります。各シーンはIFRAMEとしてロードされており、比較的自己完結型です。

サイトのホスト部分は、ゲームのスコアやチュートリアルなど、各シーンのロードと音楽や一般的なUIを処理します。ホストとシーンの間にはAPIがあります。これにより、ホストはシーンの読み込みなどのイベントが発生したときにシーンに通知することができ、ホストに曲を演奏したり、スコアを更新したりするようにホストに指示できます。

開発ガイド

ローカルで実行されます

yarnまたはnpmが必要です。また、Windowsに構築している場合はJavaが必要になる場合があります。閉鎖コンパイラのバイナリバージョンはそのプラットフォームにサポートされていないためです。

depsをインストールするためにyarnまたはnpm installして実行し、開発サーバーを実行するために./serve.jsを実行します。開発URLはクリップボードにコピーされます。

サービングスクリプト./serve.js 、デフォルトでポート8000​​と8080の両方で聞きます。ポート8000​​はサイトのホスト部分にサービスを提供します（これは生産https://santatracker.google.comドメインに対応し、ポート8080はシーンを含む静的コンテンツを提供します。

特定のシーンをロードするには、http：// localhost：8000/boatload.htmlを開きます。サイトがロードされたら、コンソールでsantaApp.route = 'sceneName'を実行して、プログラムでシーンを切り替えることもできます。

「ホスト」コードを使用して静的ドメインからシーンをロードしたい場合は、http：//127.0.0.1:8080/st/scenes/elfmaker/でロードできます。これは意図的に「LocalHost」と等しくないため、ProdとStatic Run Cross Domainです。 「ホスト」はスコア、オーディオ、いくつかのUIを提供するため、このモードですべての動作が利用可能であるわけではありません。

2020年現在、開発にはクロムまたはクロムベースのブラウザが必要です。これは、Chromiumが追加のヘッダーを指定するESMのインポート要求を識別する方法によるものです。 （これはバグであり、機能ではありません。）

新しいシーンを追加します

シーンは、基本的に<iframe>にロードされたページだけです。好きなように書くことはできますが、「ホスト」に声をかけて、オーディオを再生したり、スコアをレポートしたり、チュートリアルの表示などの他のものをリクエストしたりすることを確認してください。

新しいシーンを追加するには、次のようにする必要があります。

• static/scenes/sceneNameフォルダーを作成し、ESモジュールのみでコードを実行するindex.htmlを追加します。

  1. <script type="module">を含めることを確認してください。これには、 src/scene/api.jsをインポートして、Prod "Host"への接続を設定します。
  2. オプションで、「一時停止」、「履歴書」、「再起動」など、APIからのイベントを聞きます。およびapi.ready(() => { ... })コールバックを構成します。
  3. Magic URL ./:closure.jsをインポートする閉鎖スタイルのコードを書いている場合は、 js/下ですべてをコンパイルします
  4. 詳細については、BoatloadやSantaselfieなどの既存のシーンを参照してください。

• 関連するPNGを追加します：

  • static/img/scenes/sceneName_2x.png （950x564）およびsceneName_1x.png （475x282）
  • prod/images/og/sceneName.png （1333x1000）

• 文字列内のシーンに名前を付けます。

• シーンを生産にリリースしてはならない場合は、リリース内で無効にしてください。

環境

ビルドシステムは、開発に役立つさまざまなソースタイプを自動的にコンパイルし、多くのヘルパーを提供する仮想ファイルシステムを提供します。これには次のものが含まれます。

• .cssファイルは、対応する.scssに対して生成されます
• .json 、対応する.json5に対して生成されます
• static/scenes/sceneName/:closure.jsファイルを読んで、閉鎖コンパイラを備えた古いシーンのjs/フォルダーをコンパイルし、デフォルトのエクスポートを備えたJSモジュールに提供できます。

これらのファイルは実際には存在しませんが、使用時に自動的に作成されます。たとえば、 foo.scssが存在する場合、 foo.cssロードして自動的にコンパイルするだけです。

SASSヘルパー

SCSSを記述するとき、ヘルパー_rel(path.png)現在の.scssソースファイル（インポートさえ）に関連するファイルを指すurl()を生成します。

これは<link href="..." />またはWebコンポーネントの一部として、SCSSが最終的にどのように使用されるかに関係なく機能します。

JavaScript

ソースファイルstatic/src/magic.jsは、実際の関数がリリース時にインラリングされているさまざまなテンプレートタグヘルパーが提供されます。これらには以下が含まれます：

• _msg`msgid_here`​対応するi18n文字列を生成します
• _static`path_name`​ static内のファイルへの絶対的な参照を生成します

また、SantaトラッカーはJSモジュールを使用して構築されており、 node_modulesの非関連インポートを書き直します。たとえば、 import {LitElement} from 'lit-element'; 、これは、開発またはリリースのための完全な道に書き直されます。

輸入

JavaScript自体と同様に、Santa Trackerの開発環境では、CSS、JSON、HTMLの将来のモジュールタイプのインポートを許可します。

入力

可能な場合は、タッチ、キーボード、およびゲームパッド入力をサポートします。基本的なゲームパッドサポートは、keys.jsの合成キーボードイベントを介して提供されることに注意してください。

音

Santa Trackerは、製品に「ホスト」のみに存在する既知のオーディオライブラリを使用しますが、シーンのAPI呼び出しによってトリガーできます。これはほとんど文書化されておらず、外部ベンダーによって提供されます。オーディオソースファイルに興味がある場合は、 static/audioの下でリポジトリにあります（以下に言及したように、CC-Byのようにライセンスされています）。

オーディオライブラリは、一時的なサウンド（ボタンクリックなど）またはループ（オーディオトラック）を再生するオーディオトリガーを再生します。シーンは、以前のすべてのオーディオを停止させて、以前のゲームをシャットダウンするのに適している（ api.config({sound: [...]})を介して））から始めるために開始するように構成できます。

翻訳

Santa Trackerには、さまざまな言語の翻訳が含まれています。これらの翻訳は、Googleの内部翻訳ツールから供給されています。

開発用の文字列を追加する場合は、 en_src_messages.jsonを変更し、Googleの従業員に翻訳の実行をリクエストするように依頼してください。 Santa Trackerを生産用に構築する場合は、文字列を翻訳し、最終出力をlang/に含める必要があります。

生産

ソースコードにはリリーススクリプトが含まれていますが、エンドユーザーが実行されることを意図しておらず、Googleがサイトを展開するために使用されます。

歴史的なバージョン

2018年まで使用されているサンタトラッカーの以前のバージョンは、Archive-2018 Branchで入手できます。

ライセンス

すべての画像およびオーディオファイル（ *.png、 *.jpg、 *.svg、 *.mp3、 *.wavおよび *.oggを含む）は、CC-byライセンスの下でライセンスされています。他のすべてのファイルは、Apache 2ライセンスの下でライセンスされています。詳細については、ライセンスファイルを参照してください。

 Copyright 2020 Google LLC

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.