この記事は Bento エンジニアリング、Alan Orozco による The AMP Blog の記事 "Introducing Bento" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。

AMP コミュニティから特に多く寄せられている要望の 1 つは、AMP の高パフォーマンスなコンポーネントを AMP 以外のページでも利用できるようにすることです。この度、Bento コンポーネントの第 1 ラウンドが完全リリースされたことをお知らせします。Bento コンポーネントは、高パフォーマンス、高ユーザー エクスペリエンスのコンポーネントで、ウェブ デベロッパーがページに機能を追加して優れたユーザー エクスペリエンスを実現する際に、直面する現実的な問題を解消できるようになっています。ぜひ試してみて、フィードバックをお送りください。Bento の詳細は、新しい Bento ブログで確認できます。

あらゆる場所で AMP コンポーネントを使う

AMP Project の目的は、常にユーザーファーストな体験を作れるようにデベロッパーをサポートすることです。この価値提案の中核にあるのは、高パフォーマンスでユーザー中心の AMP コンポーネントです。そこに Bento が加わり、これまで AMP でしか使えなかった高パフォーマンスな Web Component をお気に入りのフレームワークや CMS で使えるようになります。

たとえば、非 AMP ページにカルーセルを追加するなど、1 度限りのケースに Bento コンポーネントを使うことができます。また、AMP に注目し、徐々にページを有効な AMP に変換しようと考えているデベロッパーにも便利です。 

Bento と AMP の今後の方向性 

AMP は今後も、すぐに使えるソリューションをウェブサイトに提供し、ウェブページで優れたユーザー エクスペリエンスを実現し続けます。また、AMP Project では、AMP 形式のサポートと強化を継続します。同時に、ウェブサイトのパブリッシャーには、AMP と互換性のないサイトで機能を使いたいというニーズもあることも理解しています。そういったパブリッシャーは、サイトで Bento コンポーネントを使い、他の機能に妥協することなく、具体的な UX の課題に対処できるようになります。 

私たちが思い描いているのは、パブリッシャーが自由に AMP を活用して優れたユーザー エクスペリエンスを実現したり、Bento を使って個々のパフォーマンスの問題に対処したり、AMP や Bento の助けを借りることなくページ エクスペリエンスの目標を達成したりできる未来です。 

今すぐ Bento をお試しください！

Bento コンポーネントを試してみたい方は、スタートガイドをご覧ください。チームは、GitHub や Slack チャンネルからフィードバックを送ることを推奨しています。フィードバックは大歓迎です。ぜひご協力ください。質問や問題がある方も、遠慮なくご連絡ください。

Reviewed by Eiji Kitamura - Developer Relations Team

この記事は Google Pay、デベロッパー アドボケート、Soc Sieng による Google Developers Blog の記事 "Updated Google Pay button increases click-through rates" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。


Google Pay ボタンが改善され、クリックスルー率とご購入手続きのエクスペリエンスの向上にすばらしい効果を発揮しています。

アップデートされた Google Pay ボタンには、ユーザーのカード情報が表示されます。これにより、ユーザーがボタンを使う確率が 30%、コンバージョン率が 3.6% 上昇します。

カードの種類と下 4 桁を表示することで、ユーザーは支払いに使うカード情報が Google アカウントに保存済みであることを認識し、Google Pay が提供する素早く簡単な購入手続きを選ぶ可能性が高まります。

動作の仕組み

ユーザーが購入するときに、Google アカウントに有効な支払い方法が設定済みであれば、Google Pay ボタンに最後に使ったカードの種類と下 4 桁が表示されます。

図 1. 追加情報を含む Google Pay ボタンの例

図 2. 追加情報を含まない Google Pay ボタンの例

カード情報を表示する方法

デフォルトのボタン オプションで createButton API を使うと、Google Pay ボタンが自動的にアップデートされ、ユーザーのカード ネットワークと下 4 桁が表示されるようになります。

createButton API をカスタマイズして buttonType を plain または short に設定していた場合は、buy に設定すると、Google Pay ボタンにユーザーのカード情報が表示されます。

まだ createButton API を組み込んでいない方は、クリックすれば支払いの詳細が開くことをユーザーが認識できるように、今すぐ組み込むことをご検討ください。

実例

Google Pay ボタンをその他のボタン オプションで試すには、こちらのボタン カスタマイズ ツールをご確認ください。

次のステップ

Google Pay を始めるには、Google Pay の Business Console にアクセスします。新機能を使うには、createButton API を利用する必要があります。ご質問があれば、Twitter で #AskGooglePayDevs を使って @GooglePayDevs にツイートしてください。

Reviewed by Eiji Kitamura - Developer Relations Team

この記事はデベロッパー アドボケート、Soc Sieng による Google Developers Blog の記事 "Simpler Google Pay integration for React and web developers" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。

Google Pay API を使うと、迅速かつ簡単にウェブサイトで決済を行えます。
Google Pay JavaScript ライブラリは外部のライブラリやフレームワークに依存せず、ウェブサイトでどんなフレームワークが使われていても動作します（もちろん、使われていなくても動作します）。幅広い互換性が確保されているものの、ウェブサイトでフレームワークを使っている場合は、必ずしも簡単に統合できるとは限りません。そこで、この問題をどうにかしようとしています。

React 用の Google Pay ボタンの導入

React はウェブの UI の構築に特に広く使われているツールです。そこで、React 用の Google Pay ボタンをリリースし、効率良く統合できるようにしました。このコンポーネントを使えば、React の初心者でも経験豊富なベテランでも、また Google Pay を初めて組み込む方でも経験者でも、React を用いたウェブサイトに Google Pay を簡単に組み込むことができます。
このコンポーネントは GitHub のオープンソース プロジェクトとして公開されており、npm からも利用できます。この React コンポーネントは TypeScript で書かれており、対応しているエディタではコード補完が利用できます。また、ウェブサイトを TypeScript で構築している方は、入力中に型検証によってよくある問題を特定することもできます。

サポートされているエディタでは、リアルタイムでコードの補完と検証を行うことが可能

スタートガイド

最初のステップは、npm から Google Pay ボタン モジュールをインストールすることです。

npm install @google-pay/button-react

ボタンの追加と設定

Google Pay ボタンを React コンポーネントに追加するには、まずボタンをインポートします。

import GooglePayButton from '@google-pay/button-react';

その後、必要な設定値を使ってレンダリングします。

<GooglePayButton
  environment="TEST"
  paymentRequest={{ ... }}
   => {}}
  />

JSFiddle で試してみてください。
サポートされている設定プロパティの完全なリストは、コンポーネントのドキュメントをご覧ください。
統合を完了するには、paymentRequest.merchantInfo に 販売者 ID を設定する必要がある点に注意してください。販売者 ID は、Google Pay Business Console から取得できます。

販売者 ID は Google Pay Business Console で確認できる

その他のフレームワークのサポート

他のフレームワークを使っている、またはフレームワークをまったく使っていないデベロッパーのためのエクスペリエンスの改善も行っています。今回、Google Pay ボタン Custome Elementも同時にリリースしたのはそのためです。
Custom Element には次のような特長があります。

• Web Component 仕様の一部で、ほとんどのモダンブラウザでサポートされています。
• 他のフレームワークでうまく動作します（詳しくは、Custom Elements Everywhere をご覧ください）。
• フレームワークがなくても動作します。

React コンポーネントと同様に、Google Pay ボタンCustom Element も GitHub にホストされており、npm から利用できます。実は、React コンポーネントと Custom Element は同じリポジトリを共有しており、コードの大部分も共通です。そのため、両方のバージョンが同等の機能を維持し、同じレベルで考慮されることになります。
JSFiddle でお試しください。

Google Pay JavaScript ライブラリ

既存の Google Pay JavaScript ライブラリに変更はありません。React コンポーネントや Custom Element の代わりに、Google Pay JavaScript ライブラリを直接使い続けることもできます。2 つのコンポーネントは、どちらも内部的に Google Pay JavaScript ライブラリを使っており、Google Pay JavaScript ライブラリ上に便利なレイヤーを提供しています。

フィードバック

私たち（Google Pay チーム）がフレームワーク固有のライブラリをリリースするのは、今回が初めてです。ぜひ、皆さんのフィードバックをお聞かせください。
Web Component 版の Google Pay ボタンは、React 以外のほとんどのフレームワークで利用できます。メリットや需要に応じて、他のフレームワークのサポートを追加することも検討する可能性があります。
React コンポーネントや Custom Element で問題が発生した場合は、GitHub の Issue に登録してください。または、問題を特定してその解決策を思いついた方は、遠慮なくプル リクエストをお送りください。その他の Google Pay 関連のリクエストや質問は、Google Pay Business Console の Contact Support オプションからお知らせください。

ご意見をお寄せください

質問がある方は、以下のコメント欄か、#AskGooglePayDev を使ってツイートしてお知らせください。


Reviewed by Eiji Kitamura - Developer Relations Team

この記事は Malte Ubl、Ben Galbraith による Chromium Blog の記事 "The State of the Web at Google I/O 2018" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。

ウェブは世界にとって貴重な存在で、多くのメリットを備えています。ウェブは比類のない配信プラットフォームで、世界中の人々がさまざまなコンテンツにアクセスでき、企業はあらゆる場所の顧客にアプローチできます。ウェブの成功を支えているのはそのコミュニティとオープンな一連の規格です。こうしたコミュニティと規格のおかげで、ウェブのダイナミックな性質が維持され、すべての人々がウェブを利用できます。

Google は、PageRank から Chromium に至るまで、ウェブの継続的な成功に深く関与してきました。先月、毎年開催されるデベロッパー カンファレンスである Google I/O で、ウェブの現状について発表し、ウェブの継続的な発展を推進して、すべての人々に対して適切に機能させようとする Google の最近の取り組みの一部を紹介しました。主要なテーマを次にまとめていますが、YouTube ですべての発表を視聴することをおすすめします。

Service Worker
Service Worker API の導入は、ウェブに最近加えられた最も重要な改善の 1 つです。Service Worker はバックグラウンドで動作して、ネットワーク リクエストを横取りし、リクエストを処理して、ウェブアプリがオフラインで動作できるようにします。そのため、デベロッパーはページの限られたライフサイクルから解放されます。Service Worker を使用すると、サイトでプッシュ通知を受け取ったり、バックグラウンドでデータを同期したりできます。Apple は今年の 3 月、iOS および MacOS に搭載された Safari 11.1 に Service Worker のサポートを追加し、Microsoft Edge には先週から Service Worker が付属するようになりました。つまり、現在、すべての最新ブラウザでこの規格がサポートされています。Service Worker の使用はアーキテクチャに対する大きな変更になる可能性があるため、手軽に使用できるように、Google は Workbox を作成し、汎用的かつ強力な多くの Service Worker パターンを使いやすい API にまとめています。このライブラリのバージョン 3 がリリースされているので、モジュールにビルドして、必要な機能のみを使用することができます。

プログレッシブ ウェブアプリ（PWA）
Service Worker は PWA の多くの機能を根底から支えています。世界中のさまざまな業種の企業が、PWA をビルドして大きな成功を収めています。PWA サイトを昨年から公開している Starbucks では、毎日のアクティブ ユーザーの数が 2 倍に増えました。実際、Google が計測したアドバタイジング サイトでは、サイトが PWA に移行した後、モバイル コンバージョン率が平均して 20% 増加しました。

多くの初期 PWA はモバイルに重点を置いていましたが、そのメリットは PC にも広がっています。Chrome では、PC に PWA を「インストール」する機能が間もなく提供されます。サイトには独自のアイコンが付与され、スタンドアロンのウィンドウで表示されます。また、ページ内検索、共有可能な URL、Google Cast のサポートなど、ユーザーがブラウザに期待する強力な機能が維持されます。I/O では、Spotify がデスクトップ PWA としてリッチメディア エクスペリエンスをどのようにデプロイしているかを紹介しました。デスクトップ PWA の「インストール」サポートは、6 月上旬に ChromeOS の Chrome 67 に追加され、今年中に Windows および macOS にも導入される予定です。

WebAssembly
WebAssembly を使用すると、C や C++ などの言語で記述された、高パフォーマンスの低レベルコードをウェブサイトで実行し、ウェブ プラットフォーム上にまったく新しいクラスのコンテンツを展開することができます。3 月に、Autodesk の AutoCAD チームはウェブ自体よりも古い 35 年の歴史を持つコードベースをコンパイルし、WebAssembly を使ってブラウザ内で直接実行できるようにしました。AutoCAD の機能がリンクされるため、使用している端末やオペレーティング システムに関係なく、ブラウザ内で CAD 図面を直接編集できるようになりました。AutoCAD のエンジニアリング チームは、単一の C++ コードベースを使用して、デスクトップ チームが変更を加えたときに、ウェブアプリにも簡単に変更を組み込めるようにしました。

コードを移植したり、独自のコードを記述したりする方法については、C ライブラリと DOM の連携を解説している WebAssembly コードラボをご覧ください。C で記述された複雑なライブラリを使用しているか、新しいコーデックをウェブ プラットフォームに組み込む必要があるか、または Unity や Unreal Engine などのエンジンを使用しているかどうかに関係なく、どの場合でも WebAssembly は有用です。

Lighthouse
Lighthouse はウェブサイトの品質を分析するためのツールで、サイトのパフォーマンスを測定し、ユーザー エクスペリエンスを改善するためのガイダンスを提供します。Lighthouse は、Chrome の DevTools 内から直接アクセスできるほか、コマンドラインから実行したり、他の開発ツールと統合したりできます。2018 年だけで、50 万人のデベロッパーがサイトに対して Lighthouse を定期的に実行しています。Google はウェブの変化が速いことを認識しています。Lighthouse を使用すると、パフォーマンスに関する最新のベスト プラクティスを常に把握できます。I/O で発表された Lighthouse 3.0 はすでに一般公開されました。

Lighthouse により、制御された環境でサイトの読み込みパフォーマンスが明確に把握できるようになります。ただし、現実世界の実際のユーザーに対するサイトのパフォーマンスを知る必要がある場合は、Chrome ユーザー エクスペリエンス レポートをご覧ください。このレポートでは、最もアクセスが多い 400 万のウェブサイトについてオリジンレベルのパフォーマンス指標が提供されます。これらのツールやその他のツールでサイトのパフォーマンスを包括的に確認する方法の詳細については、スピードツールのインフォグラフィックをご覧ください。

AMP
AMP は、さまざまな優れたユーザー エクスペリエンスを備えた信頼性の高い高速のウェブサイトをビルドするための Web Component ライブラリおよびエコシステムです。現在、4600 万個のドメインに 60 億以上の AMP ページがあり、Google 検索からのページ読み込み時間の中央値は 1 秒未満です。企業は AMP を活用して成功を収めています。たとえば、世界規模のオンライン小売りマーケットプレイスである AliExpress は、AMP を活用したプログレッシブ ウェブアプリとして新しいモバイルサイトを最近公開しました。この新しいサイトでは、非検索トラフィックのコンバージョン率が 31% も増加しました。

モバイルでコンテンツを消費する方法は変化し続けており、全画面で短いストーリーを配信する方式の人気がますます高まっています。AMP プロジェクトでは、サイトオーナーのニーズを満たすため、モバイルファーストのストーリー配信用にビルドされた豊富なウェブ コンポーネントである AMP ストーリーの開発を最近発表しました。このフォーマットの開発は継続中であり、デベロッパーの皆さんには、独自のストーリーをビルドしてみることをおすすめします。AMP チームは、デベロッパーの皆さんからのフィードバックをお待ちしています。

Web Packaging
Web Packaging は一連の新しいテクノロジーであり、Google では、ウェブ コンテンツがウェブに配布されて、ユーザーに共有される方法が Web Packaging によって再定義されるだろうと考えています。Web Packaging を使用すると、サイトオーナーは、HTTPS の整合性保証を維持しながら、他のパーティから配布されるコンテンツをバンドルすることができます。Web Packaging によって可能になる新しいユースケースを探っているときに、AMP には興味深い使用方法があることに気づきました。AMP チームおよびウェブ コミュニティとの連携を通じて、AMP ドキュメントが AMP キャッシュから提供された際にサイトオーナーの元の URL を保持できるソリューションを設計することができました。

私たちの取り組みを示すものとして、AMP プロジェクトの協力企業である Food Network と Pinterest は、以下のような Web Packaging のデモを作成しています。さらに詳しく知りたい方のために、AMP チームは、Web Packaging がユーザーとサイトオーナーにどのようなメリットをもたらすかについて、こちらの記事で詳しく説明しています。AMP アプリケーションに加えて、Web Packaging テクノロジーが可能にする未来に期待するとともに、デベロッパーからの支援を通じて構想を洗練させていくことを楽しみにしています。

Google 検索から読み込まれた AMP ページでウェブ パッケージングを使用しているデモ

Polymer
Polymer とは、再利用可能なカスタム Web Component を作成して、他のデベロッパーと共有したり、そのコンポーネントを組み合わせて高性能なメンテナンス性の高いアプリをビルドしたりできるようにする JavaScript ライブラリです。I/O では、このライブラリのバージョン 3.0 を発表しました。これにより、Polymer エコシステムが大幅にアップグレードされています。パッケージ管理システムとして NPM を、そして構成単位として ES6 モジュールを使用するためのサポートが全面的に提供されるため、Polymer ベースの Web Component を他のお気に入りのウェブ開発ツールやフレームワークと簡単に併用できるようになりました。

また、Web Component の新しい基本クラスである LitElement が導入されました。このクラスでは、Lit-HTML の表現力と Web Component が組み合わされ、最新の表現力の高いテンプレート構文を使用して軽量のリアクティブ コンポーネントを作成することがより簡単になっています。

Web Component 駆動型の PWA をビルドするための包括的な開始点となる PWA Starter Kit もリリースしました。これらの PWA は、高速で信頼性と応答性が高く、テーマ設定が可能であり、Lighthouse PWA およびパフォーマンス基準において最高点を獲得しています。

Angular
今年の I/O で、Angular チームはコミュニティの成長に関する概要を発表し、コア フレームワーク、CLI、およびバージョン 6 の Angular マテリアル ライブラリに追加されたすばらしい新機能をいくつか紹介しました。Angular は何百万人ものデベロッパーによって使用されており、大きな推進力を得て、すばらしいエコシステムが構築されています。「ng update」や「ng add」など、バージョン 6 でリリースされた新しいコマンドを使用すると、アプリケーションを最新の状態に維持できるほか、Angular チームによって引き続き安定性と革新のバランスが保たれるため、デベロッパーは開発を加速させることができます。

また、Angular チーム は、Project Ivy で Angular に加えられるいくつかの改善点を少しだけ紹介しました。これらの改善により、Angular では既存のアプリケーションと連携しながら、デバッグが簡単になり、コンパイルおよび実行がさらに高速化されます。チームは、小さな Hello World アプリケーションの形式でこれらの改善のユーティリティを紹介し、使用されない Angular 機能がアプリケーションの JavaScript バンドルから自動的に削除されることを示しました。

Google および Chrome のミッションは、コミュニティと協力して、統合された高速かつ信頼性の高い魅力的なエクスペリエンスを構築することです。オープン ウェブ プラットフォームになった新しい強力な機能と、ユーザー向けに高品質のサイトをすばやく作成できるようにする包括的な一連のツールに大きな期待を寄せています。ウェブの最新の進化に関する情報を確認するには、デベロッパー ポータルにアクセスするか、Google Developers YouTube チャンネルで今年の I/O の動画をご覧ください。今年の後半に開催される Chrome Dev Summit でデベロッパーの皆さんとお会いするのを楽しみにしています。



Reviewed by Eiji Kitamura - Developer Relations Team

[この記事は Hayato Ito、Shadow DOM お抱え運転手による Chromium Blog の記事 "Chrome 53 Beta: Shadow DOM, PaymentRequest, and Android autoplay" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。]

特に記載のない限り、下記の変更は Android、Chrome OS、Linux、Mac、Windows 向けの最新の Chrome ベータ版に適用されます。

Shadow DOM V1

HTML、CSS、JavaScript は強力な開発言語ですが、大規模なコードベースのメンテナンスは難しい場合もあります。サードパーティのコンテンツを埋め込んだサイトでも、そこに含まれるスタイルがアプリの他のパーツに影響しないことを確認する必要があります。Chrome 53 は Shadow DOM V1 をサポートしています。これによって、要素のスタイルと子要素の DOM をカプセル化してメインのドキュメントから切り離せるようになるため、大規模なサイトや複合サイトのメンテナンス性が改善されます。Shadow DOM V1 は、バージョン V0 からいくつか重要な変更が行われており、主要なブラウザ ベンダーの広い同意を得ています。十分な数のデベロッパーが V1 に移行するまで、Chrome は両方のバージョンの API をサポートします。shadow root の動作は、どちらの API で作成されたかによって決まります。

PaymentRequest API

ウェブで支払いを完了するのはユーザーにとってわずらわしい操作であり、サイトでのコンバージョン率の低下につながる可能性があります。情報の入力はオートフィルによっていくらか簡単になりますが、モバイル端末で効率的にデータを入力するのは依然として難しい課題です。PaymentRequest は、クレジット カードまたは Android Pay を使用してウェブ上で高速、シームレスかつ安全な支払いを行う仕組みです。さらに、ユーザーは請求先住所、発送の詳細、支払者情報を手入力せずに設定できます。PaymentRequest は、Android 向け Chrome で利用できます。他のプラットフォームでのサポートも今後拡大する予定です。

Android 向け Chrome での muted ビデオの自動再生

ビデオはユーザーを獲得する優れた方法ではありますが、突然再生が始まると不快に感じる場合があります。このような現象は、特にユーザーが音声を再生させたくない環境にいる可能性があるモバイル端末で起こりがちです。Android 向け Chrome では、muted が指定されたビデオの再生をユーザーの操作なしに開始できるようになります。ビデオに muted が指定されており、autoplay 属性がある場合、Chrome はユーザーが見える状態になった際にビデオの再生を開始します。デベロッパーがスクリプトを使ってユーザーの操作なしに muted ビデオを再生することもできます。ユーザーがアクションを行う前に muted ビデオが音声の再生を始めようとすると、自動的に一時停止されます。

今回のリリースに追加されたその他の機能

• Android 6.0（Marshmallow）以降の Android 端末に通知を送るサイトは、ステータスバーに、Chrome ロゴの代わりにバッジを表示できるようになります。
• Notification オブジェクトに対して、通知アクション ボタンと振動パターンを読み出す getter が提供されるようになります。
• プラグイン設定に "Detect and run important plugin content." を設定しているユーザーには、5x5 ピクセルより小さいクロスオリジン プラグイン コンテンツがロードされなくなります。
• allow-presentation サンドボックス フラグによって、サイトで iframe を外部端末に表示するかどうかを制御できるようになります。
• input 要素の pattern 属性値で unicode フラグが使えるようになり、構文チェックなどの正規表現を用いた使い勝手の向上が図れるようになります。
• 3D で配置された要素は、先祖要素の opacity が 1 より小さい場合にフラット化されます。
• transform で scale の変更を行う場合、視覚的な副作用を防ぐために、すべてのコンテンツが再ラスタライズされます。ただし、コンテンツの CSS プロパティに will-change: transform が指定されている場合は除きます。
• Web Audio において、low-pass および high-pass biquad フィルタでさらに多くのフィルタ特性がサポートされるようになります。
• --webkit-filter は接頭辞なしの filter プロパティの別名となり、別の動作ではなく、まったく同じ動作をするようになります。
• --webkit-user-select が all プロパティをサポートするようになります。これによって、要素を選択したときに、強制的に要素全体とすべての子孫要素を含めるようにできます。
• いくつかのプラットフォームで Web Bluetooth API が オリジン トライアルとして実験的に利用可能になり、サイトが Bluetooth Generic Attribute Profile（GATT）を利用して近くにあるデバイスと通信できるようになります。
• text-size-adjust プロパティによって、モバイル端末に合わせて自動的にフォントサイズが縮小されるかどうかを制御できるようになります。

廃止の予定と相互運用性の改善

• スクリプトで生成されたイベント によってデフォルト アクションがトリガーされなくなります。これによって、仕様への準拠とブラウザの相互運用性が改善されます。
• レスポンス ヘッダーのサポートが追加されている HTTP/1.0 があるため、HTTP/0.9 は廃止予定となりました。
• M51 で廃止予定となった TLS Diffie-Hellman 暗号は、セキュリティ上の懸念のため、削除されました。
• TextEncoder API に引数を渡すことはできなくなり、常に utf-8 でエンコードされるようになります。
• 最新のセキュリティ上の問題により、Symantec Corporation または Symantec Corporation にチェーンされている CA が発行した新しい証明書は Chrome で信頼されなくなります。ただし、Certificate Transparency 情報が付加されているものは除きます。

Posted by Eiji Kitamura - Developer Relations Team

[この記事は 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 の仕組みが元になっており、開発用にライブ更新も利用できますが、最適化用にビルド ステップも備えています。

サンタ トラッカーを支える技術がどのようなものか、ぜひソース コードをご覧になって確認して下さい。開発者の皆様のお役に立つことを願っております。

Posted by Yuichi Araki - Developer Relations Team

先日より英語での動画が公開されていた Polymer の使い方を解説する Polycasts シリーズに日本語字幕が追加されましたのでご紹介します。

Polycasts: Core Icons with Rob Dodson

Polymer をはじめるに当たり、最もとっかかりやすい要素となる core-icon の使い方について解説します。こちらの記事も合わせてお読み下さい。 (6 分 10 秒)

Polycasts: Core Iconset with Rob Dodson

core-icon で使えるアイコンセットを自前で用意する際に利用できる core-iconset の使い方について解説します。SVG を使ったアイコンセットの作り方についても触れます。 (10 分 2 秒)

Polycasts: Core Toolbar with Rob Dodson

ウェブページにたいてい含まれるツールバーを手軽に実現できる core-toolbar の使い方について解説します。Polymer で利用できるレイアウト用の属性についても触れています。 (9 分 15 秒)

Polycasts: Core Header Panel with Rob Dodson

モバイルサイトに最適なページコンテナが作れる core-header-panel の使い方について解説します。DevTools のローカルサーバーと実端末を使ったデバッグ方法も合わせて紹介していますので、ぜひご覧ください。 (12 分 19 秒)

Polycasts: Core Drawer Panel with Rob Dodson

モバイルサイトでよく見られる、いわゆるハンバーガーメニューを手軽に実現できる core-drawer-panel の使い方について解説します。 (6 分 26 秒)

Polycasts: What's new in Polymer 0.5.1 with Rob Dodson

Polymer の新バージョン 0.5.1 (本記事執筆時点で最新版は 0.5.4 のため若干古くなります)に加え、core-drawer-panel に加わった便利な新機能について紹介します。(3 分 39 秒)

本シリーズは引き続き続編が制作されています。日本語字幕が準備でき次第またご案内いたします。


Posted by Eiji Kitamura - Developer Relations Team

Google は、モバイルアプリ ビジネスに携わる方を対象にしたイベント「Google for モバイルアプリ 〜 Google と切り開くアプリ ビジネスの未来」を2015 年 2 月 25 日（水）に開催します。

本イベントでは、「デザイン」「デベロップメント」「ディストリビューション」の観点からアプリ ビジネスを解説します。

イベント概要
【イベント名】 Google for モバイル アプリ ～ Google と切り開くアプリ ビジネスの未来
【日程】 2015 年 2 月 25 日（水）
【時間】 開場: 9:30 開演: 10:00
【会場】 六本木アカデミーヒルズ 49F
【地図】 http://forum.academyhills.com/roppongi/access/index.html

イベントの詳細はこちら。

午後のブレイクアウト セッションでは、モバイル アプリ開発にお役立ていただける下記のようなセッションを予定しています。

• 「Material Design 時代の最新アプリ UI/UX デザイン 〜 マルチデバイス対応とウェアラブル体験のために」
• 「モバイル ウェブ最前線」
• 「ゴミアプリと言わせないために 〜 Google Play で成功するための高品質 Android アプリ開発 Tips」
• 「Android TV と Chromecast で進化するリビングルーム対応アプリ開発」

その他のセッションについてはこちらをご覧ください。


※セミナーの内容は、予告なく変更させていただく可能性があります。ご了承ください。

参加お申し込み方法
参加をご希望される方は、こちらのイベントサイトよりお申し込みください。

※定員超過の場合はお申し込みをお受けできない場合がありますので予めご了承ください。なお、ご連絡は定員超過の場合のみいたします。
※イベント参加のお申し込みは、1 企業様 3 名様までとさせていただきます。
※参加をご希望される方は、それぞれ参加申し込み手続きを行っていただく必要があります。

開発者のみなさんの参加をお待ちしております

Posted by 鈴木拓生 Developer Relations Team

先日より英語での動画が公開されていた DevBytes: Web Components のシリーズに日本語字幕が追加されましたのでご紹介します。

DevBytes: Web Components - 概要

Web Components とは何なのか、何が優れているのか、そしてどうやって使うのか、概要を説明します。(7 分 1 秒)

DevBytes: Web Components - Template

Web Components のいち要素である <template> は、リソースの自動取得やスクリプトの実行などを無効にするテンプレート機能を提供します。 (4 分 1 秒)

DevBytes: Web Components - Shadow DOM

Web Components のいち要素である Shadow DOM は要素内にスコープすることで、外部との機能の衝突を防ぎ、再利用可能なコンポーネントの開発を可能にします。(5 分 17 秒)

DevBytes: Web Components - Custom Elements

Web Components のいち要素である Custom Elements は HTML ボキャブラリーに、新たなタグの追加を可能にします。 (8 分 15 秒)

DevBytes: Web Components - HTML Imports

Web Components のいち要素である HTML Imports は、HTML や CSS、JavaScript を HTML ファイルとして一括で取り込み、依存関係も解決します。 (8 分 11 秒)


Posted by Eiji Kitamura - Developer Relations Team