サンタ トラッカーを使ってみるには、GitHub（google/santa-tracker-web および google/santa-tracker-android）からコードをチェックアウトします。どちらのリポジトリにも説明が記載されていますので、自分用にビルドすることができます。

サンタ トラッカーは、12 月 24 日にサンタがプレゼントを配る状況を見るだけのものではありません。サンタが休日の旅の準備をしている間、サンタ村を探検して冬にまつわる体験やゲーム、教育用コンテンツを楽しむことができます。

オープンソースとして公開されたサンタ トラッカーの概要は次のとおりです。

Android アプリ

  • サンタ トラッカー Android アプリは、Ice Cream Sandwich（4.0）以上のスマートフォン、タブレット、TV などのすべての端末をサポートしている単一 APK です。アプリのソースコードはこちらにあります。
  • サンタ トラッカーは Remote Config API、友人を招待できる App Invites、妖精たちがアプリのユーザーをよりよく理解できるようにする Firebase Analytics などの Firebase 機能を活用しています。
  • サンタ村は、スマートフォンやタブレットなどの複数の端末に対応した動画やゲーム、トラッカーのランチャーです。Leanback ユーザー インターフェースに対応した Android TV 用のランチャーも搭載されています。




Android Wear



  • Android Wear 用のカスタム ウォッチフェイスは、パーソナライズされています。サンタや愛らしい妖精たちが時間を教えてくれるので、みんな笑顔でいることができるでしょう。カスタム ウォッチフェイスの構築はとても楽しいものですが、パフォーマンスの優れた、電池に優しいウォッチフェイスを作るためには、いくつかの事項を考慮する必要があります。ウォッチフェイスのソースコードは、こちらにあります。
  • サンタ トラッカーは、サンタの旅が始まるとユーザーに通知を送信します。通知は、カスタム バックグラウンドとアプリ内へのディープリンクによって、ウェアラブル端末で快適な体験を提供するための拡張が加えられています。

ウェブ



  • サンタ トラッカーはモバイル ファーストです。今年のサンタ トラッカーは、モバイルウェブ向けに作られています。まったく新しいサンタ村は、レスポンシブでインタラクティブなコンテンツです。3 つに区切られており、タッチ ジェスチャーとウェブアプリ マニフェストもサポートされています。
  • 大規模な開発が行えるよう、Polymer 1.0+ へのアップグレードも行われています。サンタ トラッカーで Polymer が使われていることから、簡単にコードをパッケージ化して再利用可能なコンポーネントを作れることがわかるでしょう。サンタ村のすべての家にはカスタム要素があります。これらの要素は必要な場合のみロードされるので、サンタ トラッカーは最小限のコストで起動できます。



  • Present Bounce などの多くの楽しい新ゲームは、最新の JavaScript 標準（ES6）に基づいて構築されており、Google Closure Compiler によって古いブラウザでもサポートされるようになっています。
  • サンタ トラッカーは、アニメーションするコンテンツを統合できる標準 JavaScript API である Web Animations API を活用することによって、インタラクティブで楽しいコンテンツを実現しています。
  • 今年は Chromecast のサポートを簡素化しており、スクリーンセーバーに注力しました。これは、12 月 24 日の大イベントをカウントダウンしつつ、ときおりサンタ村から何種類かのすばらしい動画コンテンツを自動再生するものです。

今回のアップデートによって刺激を受けた皆様が、サンタ トラッカーを作り上げているすばらしいコンポーネントを活用して、魔法のようなコンテンツを生み出すことを楽しみにしています。


Posted by Yuichi Araki - Developer Relations Team

【イベント概要】

●GDG 信州
タイトル：WebComponents&Polymer コードラボ
概要：Polymer を使ったウェブサイトやコンポーネントの作成ステップを学びます
日程：2015 å¹´ 9 月 12 日 (土) 13:00 - 18:00　（※コードラボ終了後、懇親会を開催する予定）
場所：えんぱーく　304会議室（長野県塩尻市）
定員：20 名
主催：GDG 信州
詳細：http://goo.gl/U13ZVA

●GDG 東京 [10/2 update]
タイトル：Android 最新事情 + Firebase + マテリアルデザイン
日程：2015 å¹´ 10 月 10日 （土）13:00 - 18:00
場所：イベント＆コミュニティスペース dots.
定員：250 名
主催：GDG 東京
詳細：https://goo.gl/lXKLrD

●GDG 京都 [10/2 update]
タイトル：GDG DevFest Kyoto 2015
概要：Android, Chrome, Polymer, GAS等、様々なセッションとなります。
日程：2015 å¹´ 10 月 17日 (土) 13:00 - 19:00
場所：京都リサーチパーク (京都市)
詳細：https://goo.gl/azBXMs
定員：50 名
主催：GDG 京都

●GDG 九州
タイトル：スタート Android
日程：2015 å¹´ 10 月 （日時未定）
概要：ハッカソン/他コミュニティとも合同で行う予定
場所：AIp Cafe（福岡市中央区）
定員：15 名
主催：GDG 九州

●GDG 神戸 [9/30 update]
タイトル：GDG DevFest Kobe Firebaseハンズオン勉強会
日程：2015å¹´10 月11 日（日） 13:00 - 18:00（※終了後、懇親会を開催予定）
場所：さくらインターネット
定員：16 名
主催：GDG 神戸
詳細：http://goo.gl/forms/ezT1lpQSsJ

●GDG 四国 [10/13 update]
タイトル：DevFest Shikoku Android Wear Watch Face ハンズオン
概要：Android Wear の Watch Face を作るハンズオンを実施します。
日程：2015 å¹´ 11月 28 日（土） 13:00 - 18:00
場所：e-とぴあ・かがわ（香川県高松市）
定員：30 名
主催：GDG 四国
詳細：http://goo.gl/TcGDkR

GDG Devfest Season 2015 全体に関する情報はこちらをご覧ください。

Posted by Takuo Suzuki - Developer Relations Team

5 月 28 日、Google は Polymer ライブラリの 1.0 バージョンをリリースしました。Polymer はウェブ アプリケーション構築についての新しい考え方です。Web Components の上部にシュガーとなるレイヤーを置き、双方向性のあるカスタム要素を簡単に作成することができます。こうした要素を集めて使うことで、ウェブ上でネイティブアプリのような臨場感のあるアプリを作成することができるようになります。

Google では “Developer Preview” リリース後、開発者にとっての使いやすさをそのままに、クロスブラウザのパフォーマンスを向上させるため、ライブラリをゼロから作成しなおしました。新しいライブラリでは、Chrome では約 3 倍、Safari では約 4 倍のスピード改善を実現し、コード量は Developer Preview と比較して 3 分の 1 程度に減らすことができした。

新しいライブラリを使いはじめる

今回、1.0 リリースに合わせて、ドキュメントを含む polymer-project.org サイトをアップデートしました。主な新機能やアップデートは次のとおりです。
  • まったく新しく、簡単に使えるデータ バインド システム
  • カスタム CSS プロパティを使った要素のテーマ化とスタイル化
  • サポート外ブラウザ向けの軽くて迅速な Shadow DOM シミュレータ
  • 要素間で動作を共有する “Behaviors” メカニズム
Polymer を使うと、高品質な要素をこれまでにないほど簡単に作成できるようになり、アプリで使用したり、他の開発者と共有したりすることができます。

Polymer チームが製作した新しい要素の使い方

Polymer チームが製作した数多くの新しい要素プロダクト ラインを Polymer elements catalog でご確認ください。ご自分のウェブアプリの製作や機能追加に役立つ要素をブラウズすることができます。要素にはボタン、レイアウト、Google マップ、プッシュ通知などがあります。ウェブで解決したいどんな問題にでも、そのための要素があります（There's an element for that）。

Polymer Starter Kit でアプリを作り始める

Polymer を使ってウェブ アプリケーションを作り始める早くて簡単な方法をお探しであれば、 Polymer Starter Kit をお試しください。Polymer Starter Kit は最新の要素、すぐに使えるボイラープレート、E2E のツール チェインなど、開発からプロダクションの展開まで、さまざまな場面で活用できるため、開発者のみなさんは機能の追加に集中できます。

皆さんがこのリリースを活用し、すばらしいアプリの構築に役立てていただくことを楽しみにしています。

Posted by Eiji Kitamura - Developer Relations Team

サンタ トラッカーといっても、ただ単にクリスマス イブのサンタさんのプレゼント配達状況を追跡するだけではありません。クリスマス シーズンを通して、冬をテーマにした数々のゲームで遊んだり、北極にあるサンタ村でサンタさんか配達の準備をする様子を見ることができるんですよ。

オープンソースとしてリリースしたのは以下のようなものです。

Android アプリ

  • Android の サンタ トラッカー アプリはひとつの APK ファイルで Ice Cream Sandwich (4.0) 以降のすべての端末をサポートしています。アプリのソースコードはこちらでご覧いただけます。
  • サンタ村はビデオやゲームやトラッカー (地図) のランチャーになっています。横幅 1 万ピクセルにも及ぶサンタ村を実現するため、Android のリソース階層をちょっと変わったふうに利用しています。これによって画面解像度ごとに別々の画像を用意する必要をなくし、APK のサイズを削減しています。
  • サンタ トラッカーのゲームは様々な技術を組み合わせて作られています。Gumball は JBox2D、Memory Match は Android の View、Jetpack は OpenGL と特製のレンダリング エンジンを使っています。
  • ユーザー エンゲージメント向上のため、App Indexing API を使って Google 検索からサンタ トラッカーのゲームを開くことができるようにしています。Deep Linking を利用して実現されています。

Android Wear


Web 版


  • Web 版のサンタ トラッカーは Polymer を使って実装されています。Polymer は Chrome チームが Web Component に基づいて作り出した新しいライブラリです。サンタ トラッカーでの利用方法をご覧になれば、コードを再利用可能なコンポーネントとしてまとめるのも Polymer を使えば簡単だということがお分かりいただけるでしょう。サンタ村での各シーン (ゲーム、ビデオ、インタラクティブなページ) はすべてカスタム要素になっていて、必要なときだけ読み込むようにすることで起動のコストを最小化しています。
  • サンタ トラッカーのインタラクティブで楽しい体験は Web アニメーション API を使って作られています。JavaScript でコンテンツのアニメーションをを統一的に扱うための標準化された API です。CSS アニメーションから大きな進歩です。Web アニメーションはインタラクティブに記述することができ、ポリフィルを使えば全てのモダンなブラウザーをサポートすることができます。Polymer 自体もマテリアル デザインの効果を実現するために内部で Web アニメーションを利用しています。アニメーションの例は GitHub を検索すればたくさん見つかります。

  • サンタさんはモバイル ファーストを推進しています。今年はモバイル Web での最適化を主眼に据えて設計しました。完全なレスポンシブ デザイン、Polymer によるタッチ ジェスチャーのサポートなどです。また、theme-color やホーム画面に追加するための Web Application Manifest といった新機能もあります。
  • 徹底的なローカリゼーションのため、Web Component として新しく i18n-msg コンポーネントを開発しました。Chrome Extension の i18n の仕組みが元になっており、開発用にライブ更新も利用できますが、最適化用にビルド ステップも備えています。
サンタ トラッカーを支える技術がどのようなものか、ぜひソース コードをご覧になって確認して下さい。開発者の皆様のお役に立つことを願っております。

Posted by Yuichi Araki - Developer Relations Team

とはいえ、ひとりでこのコードラボをこなすには、モチベーションと根気が必要です。決まった時間枠を設け、一緒に取り組む仲間がいれば、もっと捗ると思いませんか？
そこで今回 GDG Tokyo 主催で、このコードラボに取り組むイベントを開催する運びになりました。

Polytechnic Tokyo 概要

2015 å¹´ 3 月 7 日に GDG Tokyo 主催で Polymer のコードラボ「Polytechnic Tokyo」を開催します。

今回のコードラボでは、Polymer を使ったウェブサイトやコンポーネントの作成に必要なステップを手順に沿ってなぞることで、実際の開発を疑似体験して頂きます。コードラボの余った時間は、ご自身の Polymer アプリケーションに取り組んで頂き、懇親会の際、LT として発表して頂く予定です。

イベント内容

名称: Polytechnic Tokyo
日時: 2015 å¹´ 3 月 7 日（土） 13:00 - 18:00 （受付 12:30 - 13:30）
場所: Google 東京オフィス 六本木ヒルズ森タワー
会費: 無料
主催: GDG Tokyo
ハッシュタグ: #polymerjp
スタッフ:
終了後、懇親会（軽食付き）を行う予定です。

申し込み方法

申し込みフォームよりお申し込みください：
http://goo.gl/zm1iA2
先着順による受付です。定員は 50 名です。定員になり次第、受付を締め切ります。

なお、参加証は 2 月 27 日（金）より順次ご登録いただいたメールアドレス宛にお送りする予定です。

多くの皆様のご参加をお待ちしております。


※ Polymer とは、Web Components をさらに使いやすく、便利にしてくれるライブラリです。
※ 今回のコードラボは東京での開催となっておりますが、オンラインでの参加も可能です。詳しくはこちらをご覧下さい。また、日本各地の GDG にも協力を打診しています。コードラボ資料を流用して、独自にイベントを開催して頂いても全く構いません。


Posted by Eiji Kitamura - Developer Relations Team



Polymer: HTML だけで Google Service と連携する

Google では Polymer を使って Google API を利用する要素を数多く制作しています。その中から <google-map>、<google-sheets> ã®ç´¹ä»‹ã‚’通じて、Polymer と Web Components の便利さをご紹介します。


Polymer: レスポンシブ UI の作り方

レスポンシブ ウェブ デザインにおいて小さなメニュー バーにツールバーを集約する UI はよく利用されます。このビデオでは、Polymer の <core-media-query> ã‚’使ってどのようにしてこれを実現するかを解説します。


Polymer: Web Components をアクセシブルにする

アクセシビリティはウェブ デザインにおいて、障害を持った人たちに情報を正確に伝達する上で、なくてはならないものです。このビデオでは、Polymer を使ったキーボードによるナビゲーション、WAI-ARIA を使ったアシスト、色彩を意識せず使えるデザインなどについてご紹介します。



みなさんが Polymer を使った素晴らしいアプリケーションを制作されるのを楽しみにしています。

Posted by Eiji Kitamura - Developer Relations Team
Share on Twitter Share on Facebook