Local blog for Japanese speaking developers
Flutter CodePen チャレンジへの参加者募集
2020年7月8日水曜日
この記事はAnjan Narainによる Flutter - Medium の記事 "
Flutter CodePen challenge
" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。
CodePen で美しい UI を作って Flutter のスキルをアピールしましょう
Flutter の目標の 1 つは、デベロッパーが Flutter を使って素晴らしいユーザー エクスペリエンスを作れるようにすることです。そして世界中のデベロッパー コミュニティの皆さんは、日々 Flutter のクリエイティブな可能性を感じる
無数のアプリやプロトタイプ
を多数発表されています。
本日は、CodePen と共同で開催する楽しいチャレンジ シリーズについてお知らせします。皆さんの Flutter のスキルをアピールするチャンスです。
多くのフロントエンド デベロッパーは、インターネット上で実験、共有、改善作業を行うために CodePen を使っています。4 月に
CodePen との提携
を発表して以来、私たちは皆さんが作成した Flutter Pen に驚かされ続けています。そこで、100 万人以上のデザイナーやプログラマーが集う CodePen コミュニティに向けて、皆さんのすばらしい Flutter デザインをアピールする機会を設けたいと考えました。
チャレンジの詳細
CodePen チャレンジは、実際に CodePan を使って自由に作品を作ることを通して、エンジニアリング スキルをレベルアップできるチャンスです。これまでのチャレンジでは、
JavaScript
や
イメージ
、
カラーパレット
など、ウェブ開発に関するテーマを取り上げてきました。今回の Flutter CodePen チャレンジは、 7 月の1ヶ月の期間中に、CodePen の新しい Flutter エディタを使ってユーザー エクスペリエンスを開発する試みです。
内容:
Flutter CodePen チャレンジは
、週単位のチャレンジ課題 4 つで構成され、それぞれ異なる Flutter のトピックを扱います。各課題は週の初めに公開され、基本的なものから高度なものへと進化し、前の週の成果が次の週のベースになります。
ヒントとして、構築する内容や推奨リソース、サンプルの Pen などを共有します。
Pen が完成したら、
FlutterPen
タグを使って CodePen コミュニティと共有することをおすすめします。Twitter や LinkedIn で
#FlutterPen
を使い、さらに広いデベロッパー コミュニティと共有することもできます。CodePen コミュニティが優れた Pen を選び、選ばれた Pen が CodePen のホームページに掲載されます。
日程:
第 1 週のチャレンジは、今週月曜日 2020 年 7 月 6 日に公開されています。
チャレンジ概要:
第 1 週は、Flutter の特に基本的な構成要素の 1 つである
Stack ウィジェット
から始まる予定です。Stack を使うと、描画順にウィジェットを重ねることができます。
グラデーションの上にテキストを重ねる
、素敵なカスタム デザインを作るなど、シンプルなシナリオで利用できます。
次に示す埋め込みの CodePen では、Stack ウィジェットを使って 3 パネルビューを作成しました。
[Run Pen]
をクリックして、実際のアプリをご覧ください。さらに
[Flutter]
をクリックすると、アプリの実装コードを確認できます。
https://medium.com/media/2f56f466630d2fef6503917efa02b6e0/href
チャレンジに参加しましょう!
CodePenチャレンジのページ
を確認して最新のチャレンジ内容を確認してください。チャレンジで作成したFlutter Pen や、皆さんがこれまでに Flutter Pen を使った作品もぜひ
#FlutterPen
ハッシュタグを使って共有してください。
Reviewed by
Takuo Suzuki - Developer Relations Team
and Hidenori Fujii - Google Play Developer Marketing APAC
ラベル
.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
143
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
22
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
403
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
23
GDG Cloud
1
gdgoc
2
gdsc
5
Gemini
6
Gemma
2
generative AI
4
Geo
55
Get Inspired
1
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
12
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
27
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
8
ID Token
1
Identity
18
identity check
1
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