Local blog for Japanese speaking developers
AMP Playground の新機能
2020年9月3日木曜日
この記事は The AMP Blog の記事 "
New toys for the AMP Playground
" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。
編集者のメモ: 以下のゲスト投稿は、Jung von Matt のデベロッパー、Robin Van Opstal 氏と Matthias Rohmer 氏によるものです。
AMP Playground
を使うと、あらゆる種類の AMP プロダクトのアイデアをすばやく試作できます。ウェブサイトでも、ストーリーでも、広告やメールでも大丈夫です。そしてうれしいニュースがあります。ここ数週間で UX 全体が効率化され、たくさんの機能が追加されて、これまで以上に AMP の開発に役立つようになったことです。
AMP コンポーネントの自動インポート
AMP では、使用するコンポーネントの
<script>
要素をドキュメントの
<head>
に追加する必要があります。これを行い続けるのは面倒な作業です。script 要素や AMP コンポーネントがユースケースにとって適切なものかどうかを試すような場合は、特にそれが当てはまります。実際のプロジェクトでは、
AMP Optimizer
が足りないリソースヒントを追加したり、不要なものを削除したりしてくれます。これと同じ機能が、Playground でも利用できるようになりました。入力と同時に、使用するコンポーネントの
<script>
タグが追加されます。
ドキュメントのインポート
デベロッパーが、まったく新しいものを試すのではなく、既存の AMP サイトに機能を追加できるかどうかをテストしたい、と考えることも珍しくありません。テンプレート ダイアログで amp.dev のサンプルを選ぶと、それを開始点として使うことはできましたが、このたび、任意の AMP ドキュメントを AMP Playground に直接インポートできるようになりました。この操作は、インポートをクリックしてドキュメントの URL を貼り付けるだけで実行できます。
AMP メールをインポートすることもできます。EML 形式でローカル ディスクに保存し、AMP Playground にドロップするだけです。
AMP の状態を検査する
amp-bind
は、AMP のウェブサイトでインタラクティブ性を実現する強力なツールです。これを使えば、
ゲーム
を作ることさえできます。これほどの可能性があるにもかかわらず、この機能を使うと、わりと簡単に収拾がつかなくなってしまうことがあります。しかし、アップデートされた Playground では、ドキュメントで何が起きているのかをとても簡単に確認できます。
amp-bind
を使うドキュメントをインポートまたは作成し、AMP State fly-in を開いてみてください。プレビューすると、状態が更新される様子をリアルタイムに確認できます。
amp-script の自動ハッシュ
数か月前に、AMP を次のレベルに引き上げるコンポーネント
amp-script
が追加されました。これにより、有効な AMP にカスタム JavaScript を追加できます。ただし、注意事項があります。ページにインライン JavaScript を追加した場合、それが有効になるのは、スクリプトの内容がドキュメントの
<head>
で定義されているハッシュに一致した場合のみです。
スクリプトにわずかな内容を追加するたびにこのハッシュを手動で更新するのは、現実的ではありません。開発やテストを行う場合は、特にそれが当てはまります。この点をサポートするため、AMP Playground は、ドキュメントのすべてのインライン
amp-script
について自動的に CSP ハッシュを作成します。そのため、ハッシュの更新を気にすることなく、新機能の開発に集中できるようになります。
試験運用機能の有効化
新しい AMP 機能は、たくさんの AMP ドメインにロールアウトされる前に、慎重に開発やテストが行われます。新機能によって本番環境のサイトで問題が発生することがないようにしつつ、自分で AMP をビルドしなくてもテストできるように、Playground は試験運用版フラグを使って未完成の機能を隠蔽しています。試験運用版機能の詳細については、amp.dev の
試験運用版機能の有効化
をご覧ください。
Playground で試験運用版機能を有効化する場合、ブラウザのコンソールを開いて手動で
AMP.toggleExperiment()
を呼び出す必要はありません。Experiments fly-in を開き、リストから機能を選ぶだけで有効化できます。後ほど機能を無効化するのも簡単です。
共有する
そしてついに、たくさんのリクエストが寄せられていた機能が完成しました。Playground で作ったスニペットを URL で共有する機能です。その他の機能と同様、[SHARE] ボタンを押すと共有用の URL を含む fly-in が表示されます。
まとめ
これらの新機能によって、
Playground
がさらに便利なものになることを期待しています。いつものように、まだ足りない機能や期待どおりに動いていない機能がある場合は、
GitHub
からフィードバックをお送りください。
Reviewed by
Chiko Shimizu - Developer Relations Team
ラベル
.app
1
.dev
1
#11WeeksOfAndroid
13
#11WeeksOfAndroid Android TV
1
#Android11
3
#DevFest16
1
#DevFest17
1
#DevFest18
1
#DevFest19
1
#DevFest20
1
#DevFest21
1
#DevFest22
1
#DevFest23
1
#hack4jp
3
11 weeks of Android
2
A MESSAGE FROM OUR CEO
1
A/B Testing
1
A4A
4
Accelerator
6
Accessibility
1
accuracy
1
Actions on Google
16
Activation Atlas
1
address validation API
1
Addy Osmani
1
ADK
2
AdMob
32
Ads
73
Ads API
138
ads query language
2
ads scripts
2
ads search
1
advanced markers
1
Advanced Protection Program
3
AdWords API
25
adwords scripts
2
aerial view api
1
Agency
1
AI
21
AI Agent Summit
1
AIY
3
AIY Vision Kit
2
ALPN
1
AMP
120
AMP Cache
9
AMP Camp
2
AMP CSS
1
AMP Extension
1
AMP Fest
1
AMP for Email
4
AMP Optimizer
1
AMP Packager
1
AMP Playground
1
AMP Plugin
1
AMP SSR
1
AMP Story
4
AMP Toolbox
1
amp-bind
1
amp.dev
1
AMPHTML Ads
1
Analytics
9
Andorid
12
Android
402
Android 10
1
Android 11
20
Android 11 Compatibility
1
Android 11 final release
1
Android 11 meetups
1
Android 9
1
android api
1
Android App Bundle
1
Android App Development
23
Android Architecture
1
Android Architecture Components
1
Android Auto
1
Android Design Support Library
1
Android Developer
14
Android Developer Story
4
Android Developers
13
Android Enterprise
6
Android for cars
2
Android Go
1
Android Jetpack
6
Android N
18
Android O
14
Android Open Source Project
1
Android P
7
Android Pay
1
android privacy
1
Android Q
13
Android Ready SE Alliance
1
android security
6
Android Security Year in Review
1
Android StrongBox
1
Android Studio
47
Android Studio 4.1
1
android study jam
1
Android Support Library
6
Android Things
15
Android Tools
2
Android TV
11
Android Vitals
4
Android Wear
29
android11
6
androidmarket
3
androidstudio
1
AndroidX
6
Angular
2
Angular 2
2
AngularJS
2
Announcements
2
Anthos
2
antmicro
1
AoG
1
aosp
1
API
28
APIExpert
45
apk
2
APM
1
app
3
App Action
1
App Bundle
2
app check
1
app engine
24
App Indexing
7
App Invites
6
App Maker
2
App modernization
1
AppCompat
2
Apps Flutter eBay
1
Apps Script
12
AppSheet
1
aprilfool
4
AR
3
Architecture Components
7
ARCore
3
ArtTech
1
asset-based extensions
2
assets
1
Associate Android Developer Certificate
1
Attribution Reporting
1
Audio
7
Auth Code
1
Authentication
9
AuthSub
2
Autofill
5
AutoML
1
Autotrack
2
award
1
Awareness API
1
basemap
1
basic-card
1
Beacons
6
bento
2
BERT
1
Best Practices
1
beta
4
Better Ads Standards
3
BigQuery
10
Billing
1
Biometrics
1
BLE
4
Blink
1
Blockly
1
blogger
1
BodyPix
1
bootcamp
1
Brillo
1
Brotli
2
Budou
1
budoux
1
Buildbetterapps
2
Business and Leadership
1
C++
1
Calendar
3
call ads
1
campaign
2
campaignsharedset
1
Campus
1
Canvas
1
Cardboard
4
Career
1
Case Studies
1
Case Study
3
CCPA
1
CDS 2020
3
CDS Recap 2020
3
Certificate
8
changestatus
1
chrome
261
chrome 98
1
Chrome Apps
1
Chrome Custom Tab
4
Chrome Dev Summit
5
chrome extension
14
Chrome for Android
2
Chrome for iOS
3
Chrome OS
10
Chrome Root Program
1
Chrome Root Store
1
Chrome Tech Talk Night
4
chrome103
1
chrome104
1
chrome108
1
chrome90
1
Chromebook
5
Chromecast
7
chromewebstore
9
Chromium
20
CLI
1
ClientLogin
3
Closure Compiler
1
Cloud
29
Cloud AI Platform
2
Cloud Firestore
5
Cloud Functions
9
Cloud IoT Device SDK
1
cloud messaging
1
Cloud ML Summit
1
Cloud Next
19
Cloud OnAir
5
Cloud OnBoard
4
Cloud PubSub
1
Cloud Run
1
Cloud Storage
1
Cloud Study Jams
3
Cloud Summit
1
Cloud Test Lab
2
Cloudflare
1
CNN
1
Coalition for Better Ads
2
CocoaPods
1
code review
1
codejam
5
codelab
5
Codepen
1
Colaboratory
1
Common Criteria
1
Community
7
compatibility
1
Compose
1
compose camp
1
compute engine
3
consent
1
Contests
1
Context
1
controls
1
Conversation API
1
conversations
2
conversion
1
Cookie
10
Coral
3
core web vitals
1
COVID-19
2
Crash Reporting
2
Crashlytics
3
cryptography
1
Custom Element
1
Custom Model
1
CWV
2
dark theme
1
Dart
2
data retention
1
DataCenter
1
datacloudsummit
1
Daydream
4
deck.gl
2
Deep Learning
4
Delegation
1
Demo Party
1
Design Patterns
1
Design Sprint
3
DesignBytes
1
Designer
1
DevArt
3
DevBytes
6
Developer
15
Developer Console
4
Developer Library
1
Developer Preview
6
Developer Relations
3
Developer Review
1
Developer Student Club
1
DEVELOPERS
1
Developers Story
4
DevFest
12
DevFestX
3
DevOps
1
devtools
4
Dialogflow
1
Differential privacy
2
Digital Asset Links
1
Digital Goods API
1
directions api
1
DirectShare
1
Discover
1
distance matrix api
1
DNS-over-HTTPS
4
Domain
1
Doodle
1
DoubleClick
4
Doze モード
1
drive
2
DSA
1
DSC
1
DX
1
Dynamic Links
3
EarlGrey
1
Easter Egg
1
ECMAScript 2015
1
Eddystone
4
Edge
1
egypt
1
encoder
1
Encryption
1
English
2
environment api
1
Envoy
1
error
1
ES2015
1
ES2016
1
ES6
2
ES7
1
eta
1
Event
7
events
3
Explore
1
extensions
1
external
1
Featured
25
Feed
2
feed-based extensions
3
feeds
1
FIDO
7
filter
1
final release
1
Firebase
123
Firebase Admin SDK
6
Firebase Analytics
10
Firebase Auth
4
Firebase Cloud Messaging
10
Firebase Crashlytics
2
Firebase Database
5
firebase for games
1
Firebase Libraries
1
Firebase Notifications
1
Firebase Performance
3
Firebase Remote Config
6
firebase summit
1
Flash
1
FLEDGE
1
FLoC
2
Flutter
8
Flutter App Development
1
flutter3
1
font
3
fraud
1
G Suite
19
game
43
Game Developers Conference 2018
1
Game Developers Conference 2019
1
Game Development
1
gaming
1
gaql
8
Gboard
2
gc_datacloud
1
GCCN
1
GCP
17
GCPUG
1
GDC
1
GDD11JP
56
GDD2010JP
23
GDE
2
GDG
22
GDG Cloud
1
gdsc
4
Gemini
5
Gemma
1
generative AI
4
Geo
55
Gingerbread
1
GLIDE
5
global foundries
1
Gmail
6
Gmail API
3
Go
1
Go Checksum Database
1
golang
5
goo.gl
1
Google
8
Google account
1
Google Analytics
4
Google API
2
Google Apps
14
Google Apps Script
4
Google Assistant
13
Google Assistant SDK
2
Google Binary Transparency
1
Google Cast
8
Google Chat
3
Google Cloud
50
Google Cloud Day
10
google cloud innovators
2
Google Cloud INSIDE Digital
2
Google Cloud INSIDE Games & Apps
9
Google Cloud INSIDE Media
1
Google Cloud INSIDE Retail
3
Google Cloud Messaging
11
google cloud next
4
google cloud next tokyo
4
Google Cloud Platform
16
Google Code-in
1
Google Dev Library
1
Google Developer Experts
2
google developer groups
1
google developer student clubs
1
Google Developers Academy
1
Google Developers live
5
Google Developers Summit
2
Google Drive
6
Google Earth
1
Google Fit
2
Google for Games
3
Google for Mobile
2
Google for Startups
8
Google for Work
1
Google I/O
26
Google I/O 2024
3
Google Identity Services
6
Google Impact Challenge
1
Google Maps
72
Google Maps Platform
92
Google Meet
1
Google ML Summit
2
Google Open Source Peer Bonus
1
Google Pay
6
Google Photo
1
Google Play
148
Google Play App Safety
1
Google Play Billing
1
Google Play Console
15
Google Play developer distribution agreement
1
Google Play Developer Policies
2
Google Play Game Services
10
Google Play Instant
1
Google Play Services
23
Google Play Store
1
Google Play アプリ署名
1
Google Plus
14
Google Search
8
Google Sheets API
3
Google Sign-In
17
Google Slides API
5
Google Summer of Code
1
Google Tag Manager
1
Google Tensor
1
Google Trust Services
3
Google マップ
4
google_ads_api_v6
1
Google+
2
Googleapps
10
GoogleCloud
5
GoogleCloudDay
5
GoogleCloudInside
1
googlecloudlearn
1
googlecloudnext
2
GoogleGames
1
GoogleI/O
31
GoogleLabs
1
GooglePlay
3
GoogleTV
1
GPS
1
Gradle
1
Growth Academy
1
gRPC
2
GTUG
5
GWT
2
hack4jp
2
hackathon
7
handson
1
Hangouts Chat
3
hardware
2
Hosting
3
hotel
1
How-To Guide
1
HTML5
17
HTML5Rocks
1
HTTP/2
5
HTTPS
19
I/O Extended
7
ID Token
1
Identity
18
Identity Toolkit
1
IGF2010
4
IGF2020
2
Ignite
4
Imagen 2
1
IME
12
Indie Game
7
Indie Games Festival
7
Indie Games Festival 2018
2
Indie Games Festival 2019
12
Indie Games Festival 2020
7
Industry Trends
1
Inevitable ja Night
30
Influence
1
innovators hive
2
Insights
1
Instagram
1
Instant Apps
6
intern
2
Invites
1
IO19
3
iOS
22
IoT
7
IPv6
1
Issue Tracker
2
IWD
1
Japanese
6
Japanese Developer
1
Japanese Input
1
java
1
JavaScript
13
Jetpack
5
Jetpack Compose
6
Journeys
1
K-12
1
Kaggle
1
Key Transparency
1
Knowledge Graph
1
Kotlin
25
Kotlin Android Extensions
1
kotlin api
1
Kotlin Beginners
3
Kotlin Vocabulary
2
Kubernetes
4
l10n
8
latest
18
latest news
1
launch
1
LaunchPad
2
Learn
2
lifull
1
Lighthouse
1
LINE
1
Local AI
1
Location
1
Lollipop
10
Machine Learning
32
MAD Skills
2
MADSkills
2
Maker Faire Tokyo
1
maps compose
1
maps embed api
1
Maps JavaScript API
6
maps on air
1
maps sdk
2
maps transportation
1
Marshmallow
10
Material
1
Material Design
31
MDL
2
MDN
1
MediaPipe
1
Messaging
1
metrics
1
MIDI
2
migration
1
mikan
1
Mixed Contents
4
ML
3
ML Kit
12
mlops
1
Mobile
16
Mobile Bootcamp
4
mobile optimized maps
1
Mobile Sites certification
1
Mobile Vision
4
mod_pagespeed
1
Model Maker
1
monetization
2
monetize
3
Mozc
15
Music
1
NativeDriver
2
NativeScript
1
Navigation
1
NBU
1
ndk
3
Nearby
5
News
1
Next Extended
1
Next Tokyo
4
Nexus
2
Nexus S
1
NFC
1
NIST
1
Node.js
3
notifications
2
Noto CJK
1
Now in Android
13
NPAPI
2
NPN
1
oauth
17
officehour
1
One Tap
2
online security
2
open silicon
2
open source
9
OpenAI
1
opencensus
1
opencloudsummit
1
OpenGL
4
OpenID
3
OpenID Connect
4
OpenSocial
1
opensource
20
OpenTitan
1
Optimization
1
OSV
1
p-max
3
Page Experience
1
passkey
3
Password Manager
4
Payment
8
Payment Handler API
1
Payment Request API
2
PDF
1
PEM
33
people
2
People API
3
Performance
16
Performance budget
1
performance max
2
Performance Monitoring
1
performance report
1
permissions
1
personalization
1
PersonFinder
1
Phishing
2
ブログ アーカイブ
2025
2月
1月
2024
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2023
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2022
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2021
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2020
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2019
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2018
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2017
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2016
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2015
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
2014
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2013
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2012
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2011
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2010
12月
11月
Feed
Follow @googledevjp
"プロダクトに関するご意見は
プロダクトフォーラム
にお願いします"