Flutter CodePen チャレンジへの参加者募集
2020年7月8日水曜日
この記事はAnjan Narainによる Flutter - Medium の記事 "Flutter CodePen challenge" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。
Flutter の目標の 1 つは、デベロッパーが Flutter を使って素晴らしいユーザー エクスペリエンスを作れるようにすることです。そして世界中のデベロッパー コミュニティの皆さんは、日々 Flutter のクリエイティブな可能性を感じる無数のアプリやプロトタイプを多数発表されています。
本日は、CodePen と共同で開催する楽しいチャレンジ シリーズについてお知らせします。皆さんの Flutter のスキルをアピールするチャンスです。
多くのフロントエンド デベロッパーは、インターネット上で実験、共有、改善作業を行うために CodePen を使っています。4 月に CodePen との提携を発表して以来、私たちは皆さんが作成した Flutter Pen に驚かされ続けています。そこで、100 万人以上のデザイナーやプログラマーが集う CodePen コミュニティに向けて、皆さんのすばらしい Flutter デザインをアピールする機会を設けたいと考えました。
CodePen チャレンジは、実際に CodePan を使って自由に作品を作ることを通して、エンジニアリング スキルをレベルアップできるチャンスです。これまでのチャレンジでは、JavaScript やイメージ、カラーパレットなど、ウェブ開発に関するテーマを取り上げてきました。今回の Flutter CodePen チャレンジは、 7 月の1ヶ月の期間中に、CodePen の新しい Flutter エディタを使ってユーザー エクスペリエンスを開発する試みです。
内容:
日程: 第 1 週のチャレンジは、今週月曜日 2020 年 7 月 6 日に公開されています。
チャレンジ概要: 第 1 週は、Flutter の特に基本的な構成要素の 1 つである Stack ウィジェットから始まる予定です。Stack を使うと、描画順にウィジェットを重ねることができます。グラデーションの上にテキストを重ねる、素敵なカスタム デザインを作るなど、シンプルなシナリオで利用できます。
次に示す埋め込みの CodePen では、Stack ウィジェットを使って 3 パネルビューを作成しました。[Run Pen] をクリックして、実際のアプリをご覧ください。さらに [Flutter] をクリックすると、アプリの実装コードを確認できます。
CodePenチャレンジのページを確認して最新のチャレンジ内容を確認してください。チャレンジで作成したFlutter Pen や、皆さんがこれまでに Flutter Pen を使った作品もぜひ #FlutterPen ハッシュタグを使って共有してください。
Reviewed by Takuo Suzuki - Developer Relations Team and Hidenori Fujii - Google Play Developer Marketing APAC
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 週は、Flutter の特に基本的な構成要素の 1 つである Stack ウィジェットから始まる予定です。Stack を使うと、描画順にウィジェットを重ねることができます。グラデーションの上にテキストを重ねる、素敵なカスタム デザインを作るなど、シンプルなシナリオで利用できます。
次に示す埋め込みの CodePen では、Stack ウィジェットを使って 3 パネルビューを作成しました。[Run Pen] をクリックして、実際のアプリをご覧ください。さらに [Flutter] をクリックすると、アプリの実装コードを確認できます。
チャレンジに参加しましょう！
CodePenチャレンジのページを確認して最新のチャレンジ内容を確認してください。チャレンジで作成したFlutter Pen や、皆さんがこれまでに Flutter Pen を使った作品もぜひ #FlutterPen ハッシュタグを使って共有してください。
Reviewed by Takuo Suzuki - Developer Relations Team and Hidenori Fujii - Google Play Developer Marketing APAC