Google Developers Japan: Polymer

サンタトラッカーについてサンタのエルフからアップデート

2016年9月6日火曜日

code { background-color: transparent }[この記事は Sam Thorogood、デベロッパープログラムエンジニアによる Google Developers Blog の記事 "A Google Santa Tracker update from Santa's Elves" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。]

google/santa-tracker-webgoogle/santa-tracker-android Android アプリ

サンタトラッカー Android アプリは、Ice Cream Sandwich（4.0）以上のスマートフォン、タブレット、TV などのすべての端末をサポートしている単一 APK です。アプリのソースコードはこちらにあります。

サンタトラッカーは Remote Config API、友人を招待できる App Invites、妖精たちがアプリのユーザーをよりよく理解できるようにする Firebase Analytics などの Firebase 機能を活用しています。

サンタ村は、スマートフォンやタブレットなどの複数の端末に対応した動画やゲーム、トラッカーのランチャーです。Leanback ユーザーインターフェースに対応した Android TV 用のランチャーも搭載されています。

サンタトラッカー Android のゲームは、JBox2D（ガムボールゲーム）、Android ビュー階層（メモリマッチゲーム）、OpenGL と特殊なレンダリングエンジン（ジェットパックゲーム）などのさまざまな技術を使って構築されています。Android TV、スマートフォン、Google Cardboard の VR 内で動作する楽しいゲーム Pie Noon のホリデーテーマ版も含まれています。

Android Wear

Android Wear 用のカスタムウォッチフェイスは、パーソナライズされています。サンタや愛らしい妖精たちが時間を教えてくれるので、みんな笑顔でいることができるでしょう。カスタムウォッチフェイスの構築はとても楽しいものですが、パフォーマンスの優れた、電池に優しいウォッチフェイスを作るためには、いくつかの事項を考慮する必要があります。ウォッチフェイスのソースコードは、こちらにあります。

サンタトラッカーは、サンタの旅が始まるとユーザーに通知を送信します。通知は、カスタムバックグラウンドとアプリ内へのディープリンクによって、ウェアラブル端末で快適な体験を提供するための拡張が加えられています。

ウェブ

サンタトラッカーはモバイルファーストです。今年のサンタトラッカーは、モバイルウェブ向けに作られています。まったく新しいサンタ村は、レスポンシブでインタラクティブなコンテンツです。3 つに区切られており、タッチジェスチャーとウェブアプリマニフェストもサポートされています。

大規模な開発が行えるよう、Polymer 1.0+ へのアップグレードも行われています。サンタトラッカーで Polymer が使われていることから、簡単にコードをパッケージ化して再利用可能なコンポーネントを作れることがわかるでしょう。サンタ村のすべての家にはカスタム要素があります。これらの要素は必要な場合のみロードされるので、サンタトラッカーは最小限のコストで起動できます。

Present Bounce などの多くの楽しい新ゲームは、最新の JavaScript 標準（ES6）に基づいて構築されており、Google Closure Compiler によって古いブラウザでもサポートされるようになっています。

サンタトラッカーは、アニメーションするコンテンツを統合できる標準 JavaScript API である Web Animations API を活用することによって、インタラクティブで楽しいコンテンツを実現しています。

今年は Chromecast のサポートを簡素化しており、スクリーンセーバーに注力しました。これは、12 月 24 日の大イベントをカウントダウンしつつ、ときおりサンタ村から何種類かのすばらしい動画コンテンツを自動再生するものです。

Yuichi Araki - Developer Relations Team

GDG DevFest Season 2015 が開催されます

2015年9月10日木曜日

【イベント概要】http://goo.gl/U13ZVA[10/2 update]https://goo.gl/lXKLrD[10/2 update]https://goo.gl/azBXMs[9/30 update]http://goo.gl/forms/ezT1lpQSsJ[10/13 update]http://goo.gl/TcGDkRこちらTakuo Suzuki - Developer Relations Team

Polymer 1.0 リリース

2015年7月22日水曜日

[この記事は Taylor Savage、Polymer プロダクトマネージャーによる Google Developers Blog の記事 "Polymer 1.0 Released!" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。][このブログの元記事は Google I/O 2015 が開催される前の 5 月 28 日に投稿されています。]

新しいライブラリを使いはじめるpolymer-project.org

まったく新しく、簡単に使えるデータバインドシステム

カスタム CSS プロパティを使った要素のテーマ化とスタイル化

サポート外ブラウザ向けの軽くて迅速な Shadow DOM シミュレータ

要素間で動作を共有する “Behaviors” メカニズム

Polymer チームが製作した新しい要素の使い方Polymer elements catalog Polymer Starter Kit でアプリを作り始めるPolymer Starter KitEiji Kitamura - Developer Relations Team

フォフォフォ！Santa Tracker がオープンソースになったんじゃ

2015年4月9日木曜日

[この記事は Software Engineer の Ankur Kotwal が Google Developers Blog に投稿した "Ho Ho Ho! Google's Santa Tracker is now open source" という記事を元に荒木が翻訳・加筆したものです]
季節はすっかり春ですね。クリスマスはずいぶん前のことのように感じられますが、お知らせがあります。Google サンタトラッカーがオープンソースとして GitHub (google/santa-tracker-web と google/santa-tracker-androidに公開されました。Web と Android 両方のアプリが Google の開発者向けプロダクトを使ってどのように実現されているのかご覧いただけます。

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

サンタトラッカーをインストールすれば、サンタさんや妖精がいつも側にいて時間を教えてくれるのです。カスタムの文字盤を作るのは楽しいですが、パフォーマンスやバッテリー消費に気を配って作ろうとするといろいろ考えなければなりません。文字盤のソースコードはこちらでご覧いただけます。

サンタトラッカーはサンタさんがプレゼント配達に出発したことを通知してくれます。通知機能も 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 の仕組みが元になっており、開発用にライブ更新も利用できますが、最適化用にビルドステップも備えています。

Yuichi Araki - Developer Relations Team

Polymer コードラボ資料の公開、およびイベントの開催について

2015年2月12日木曜日

HTML5 ConferencePolymer で作る次世代ウェブサイトPolymer のコードラボ資料の日本語版

Polytechnic Tokyo 概要イベント内容名称: 日時: 場所: 会費: 主催: ハッシュタグ: スタッフ:

Makoto Anjo (GDG Tokyo, Google Developer Expert)

Eiji Kitamura (Google)

Kensaku Komatsu (html5j, Google Developer Expert)

Toru Yoshikawa (html5j, Google Developer Expert)

Yasushi Ando (html5j, Google Developer Expert)

Yoichiro Tanaka (Google Developer Expert)

申し込み方法http://goo.gl/zm1iA2PolymerWeb Components詳しくはこちらをご覧下さいEiji Kitamura - Developer Relations Team

Polymer 関連の動画に日本語字幕が付きました

2015年2月10日火曜日

Polycasts シリーズ Polycasts: Core Icons with Rob Dodsoncore-iconこちらの記事 Polycasts: Core Iconset with Rob Dodsoncore-iconcore-iconset Polycasts: Core Toolbar with Rob Dodsoncore-toolbar Polycasts: Core Header Panel with Rob Dodsoncore-header-panel Polycasts: Core Drawer Panel with Rob Dodsoncore-drawer-panel Polycasts: What's new in Polymer 0.5.1 with Rob Dodsoncore-drawer-panelEiji Kitamura - Developer Relations Team

Polymer 紹介動画に日本語字幕が追加

2014年10月30日木曜日

I/O Bytes 2014Polymer 関連動画PolymerWeb Componentsplatform.jsウェブで Material Design を利用するウェブをコンポーネント化しよう Web Components の概要の解説や、Polymer 要素の開発方法を解説しています。seed-element から npm や bower を使って他の要素を継承する方法、Flexbox レイアウトの利用方法、GitHub への公開の仕方まで紹介しています。
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 を使ったアシスト、色彩を意識せず使えるデザインなどについてご紹介します。
Eiji Kitamura - Developer Relations Team

サンタトラッカーについてサンタのエルフからアップデート

GDG DevFest Season 2015 が開催されます

Polymer 1.0 リリース

フォフォフォ！Santa Tracker がオープンソースになったんじゃ

Polymer コードラボ資料の公開、およびイベントの開催について

Polymer 関連の動画に日本語字幕が付きました

Polymer 紹介動画に日本語字幕が追加

ラベル

ブログアーカイブ

Feed

サンタ トラッカーについてサンタのエルフからアップデート

GDG DevFest Season 2015 が開催されます

Polymer 1.0 リリース

フォフォフォ！Santa Tracker がオープンソースになったんじゃ

Polymer コードラボ資料の公開、およびイベントの開催について

Polymer 関連の動画に日本語字幕が付きました

Polymer 紹介動画に日本語字幕が追加

ラベル

ブログ アーカイブ

Feed

サンタトラッカーについてサンタのエルフからアップデート

ブログアーカイブ