Firebase で Flutter モバイルアプリを作成する方法を学びます。

ブロッキング関数を使用して多要素認証を実装し、カスタム認証要件を作成する方法について学びます。

この Codelab では、Cloud Functions for Firebase を使用してチャットアプリのユーザーに通知を送信する方法について学習します。

この Codelab では、既存の Firebase ウェブアプリを新しいモジュラー Firebase JS SDK に移行し、使用していないコードを削除してアプリの読み込みを高速化します。

この Codelab では、チャットアプリを構築して、ウェブで Firebase プラットフォームを使用する方法について学習します。

この Codelab では、ウェブアプリに Firebase Performance Monitoring を設定し、エンドユーザーにとってアプリが適切に動作するようにする方法について学習します。

この Codelab では、わずか数行のコードで Flutter アプリに Firebase Authentication を追加する方法を学びます。

Firebase と StackBlitz オンライン エディタを使用して、ウェブアプリを一から構築します。基本的な HTML と JavaScript を使用して Firebase と通信します。これは、Firebase コンソールを使用して Firebase をアプリに統合するための入門ガイドとして最適です。前もって知識を蓄える必要もソフトウェアをインストールする必要もありません。

ウェブページの読み込みに必要なバイト数のうち、画像が占める割合は平均で 60%以上 です。AVIF を使用すると、画像のサイズを小さくしてウェブサイトの読み込みを高速化できます。 AVIF は、AV1 動画ビットストリームから派生した画像形式です。AVIF は圧縮効率を重視して構築されています。 AVIF 画像は、同じ画質またはそれ以上の画質の JPEG、PNG、GIF、WebP 画像よりもはるかに小さくなります。 Squoosh は画像圧縮ウェブアプリです。Squoosh

この Codelab を実施するには、いくつかの前提条件が必要です。各要件には、「ローカルテスト」と「集計サービス」のどちらに必要かが表示されます。 ローカルテストを行うには、ローカルテストツールをダウンロードする必要があります。このツールは、暗号化されていないデバッグ レポートから概要レポートを生成します。 ローカル テストツールは、 GitHub の Lambda JAR アーカイブ からダウンロードできます。 LocalTestingTool_{version}.jar

所要時間: 1 ～ 2 時間 この Codelab を実施するモードは、 ローカル テスト と 集約サービス の 2 つがあります。ローカルテストモードでは、ローカルマシンと Chrome ブラウザが必要です（Google Cloud リソースの作成や使用は不要です）。集計サービス モードでは、Google Cloud に集計サービスを完全にデプロイする必要があります。 この Codelab

この Codelab では、Dart バックエンド サービスを使用して検証および管理する Flutter アプリにアプリ内購入を追加します。

この Codelab では、Cloud Firestore を使用するウェブアプリの作成方法を学びます。

この Codelab では、Flutter でアニメーションを使用する方法について学習します。サイズと色の両方をアニメーション化するウィジェットを作成し、3D カード フリップ エフェクトを追加します。また、アニメーション パッケージのエフェクトを使用し、Android の予測型「戻る」ジェスチャーのサポートを追加します。

この Codelab では、自動スケーリング ビルダー エージェントを含む、GKE に Jenkins のインスタンスをデプロイする手順について説明します。

入札およびオークション サービス（B&A） は、購入者と販売者が Protected Audience オークションを実施するための 4 つのサービスで構成されています。 購入者のスタック: 販売者のスタック: この Codelab では、ローカル環境でエンドツーエンドの設定とテストを行います。チュートリアルの所要時間は、最初のサービスのビルド時間を除いて約 1 時間です。

この Codelab では、人間のエージェントと bot のエージェント間の会話転送を管理する方法を学びます。最後に、基本的なウェブ インターフェースが表示されます。このインターフェースでは、エージェントとの進行中のすべての会話を表示したり、会話にライブで参加したり、会話から退出したりできます。

この Codelab では、Places API へのリクエストを実行する前に、Firebase AppCheck と reCAPTCHA を使用してウェブ アプリケーションを検証する方法について学習します。

この Codelab は、 ウェブ用 Google Pay API 101: 基本 の続きであり、その Codelab で作成したコードを使用します。この Codelab を完了するには、まずその Codelab を完了してください。 ButtonOptions の概要は次のとおりです。詳細な説明については、ドキュメントをご覧ください オプション 必要性 値 _trackEvent() 必須 JavaScript イベント ハンドラの名前 allowedPaymentMethods 任意

この Codelab では、gecko@003 モデルとは何か、そしてそのアプリケーションの実際のユースケースについて学びます。

Procurement DocAI を使用して請求書をインテリジェントに解析する方法を学びます。

この Codelab を完了すると、Google Pay が統合された最小限のウェブサイトが完成します。このプロジェクトは、処理のために支払いサービス プロバイダに送信される可能性のある支払いトークンを取得します。 Google Pay の支払いリクエストには、リクエスト オブジェクトが必要です。ここで baseGooglePayRequest として定義されているオブジェクトには、すべてのリクエストに共通する最小設定が含まれています。リクエストに応じて追加の設定が追加されます。この

Flutter を使用して、効果音、バックグラウンド ミュージック、ダイナミック オーディオをゲームに追加する方法を学びます。

この初心者向けの Codelab では、Angular v14 スタンドアロン コンポーネントを使用してサンプルアプリを構築する方法を学びます。

事前構築済みのマテリアル コンポーネントを、任意のウェブ フレームワークのコンポーネントに拡張する方法を学びます。

最初からやり直すことなく、既存のウェブコードベースに個々のマテリアル コンポーネントを組み込む方法を学びます。

Firebase Emulator Suite を使用してウェブアプリを開発する方法について学習します。

ウェブで構造とレイアウトにマテリアルを使用する方法について学びます。

このラボでは、Keras 分類器の構築方法について学びます。花を認識するためのニューラル ネットワーク層の完璧な組み合わせを見つけるのではなく、まず転移学習という手法を使用して、事前トレーニングされた強力なモデルをデータセットに適応させます。このラボには、ニューラル ネットワークに関する必要な理論的な説明が含まれており、ディープ ラーニングについて学習する出発点として適しています。

セキュリティ ルールで Firestore データを保護する方法

この Codelab では、BBC の micro:bit ボードを操作して 5x5 の LED ディスプレイに画像を表示するウェブページを作成します。Web Serial API の概要と、読み取り、書き込み、変換が可能なストリームを使用して、ブラウザ経由でシリアル デバイスと通信する方法について説明します。

Flutter での開発中に Firebase Emulator Suite を使用する方法の概要を説明する Codelab。この Codelab では、Auth エミュレータと Firestore エミュレータを使用して、エミュレータの使用方法を確認します。

この Codelab では、Flutter がサポートしている 6 つのプラットフォームで、マテリアル 3 を使い、流れるようなアニメーションで表示されるアダプティブなデザインのアプリケーションを作成する経験が得られます。

この Codelab では、セキュリティ キーを使用した 2 要素認証をサイトまたはウェブ アプリケーションに追加します。

In this codelab, you’ll add a user verifying strong authentication to a website with a simple form based sign-in system.

この Codelab では、Angular フレームワークから独立して動作し、任意のフレームワークにインポートして簡単に組み込める画像スライダーを作成します。

この Codelab では、響きの良いランダムな名前を生成する Flutter アプリの作成方法を学びます。

この Codelab では、コマンドライン インターフェースを使用して DLP API を紹介します。ユーザーはプロジェクト コードをダウンロードし、サンプル ディレクトリのいくつかのツールとその基礎となる機能を確認します。

この Codelab では、まったく新しいウェブ API やフラグでのみ利用できるウェブ API をいくつか試してみます。

Google Chrome の最新の API を使って、ウェブアプリに迅速なナビゲーションとシームレスなページ遷移を追加する方法を学びます。

アダプティブ ウェブフォームを構築する方法について説明します。このフォームでは、各ユーザーが、その時点での好みを反映したカスタマイズされたインターフェースを受け取ることができます。

この Codelab では、Accelerated Mobile Pages の主なコンセプトと従来の HTML ドキュメントとの違いについて紹介します。そのためには、AMP ドキュメントを作成して検証します。

この Codelab では、Accelerated Mobile Pages の主なコンセプトと従来の HTML ドキュメントとの違いについて紹介します。そのためには、AMP ドキュメントを作成して検証します。

この Codelab では、Dataproc Serverless の開始方法、豊富な機能セットへのアクセス方法など、Dataproc Serverless のすべてを学びます。

この Codelab では、iOS または Android 向けの Flutter アプリ用のホーム画面ウィジェットを作成します。基本的な Flutter ニュースアプリから始めます。その後、ネイティブ フレームワークを使用してウィジェット自体の UI を作成します。最後に、リソースを共有し、ウィジェットとメインアプリ間の通信を確立する方法を学びます。

この Codelab では、Spark ML ジョブを Google の Dataproc サービスに送信します。

この Codelab では、Google Compute Engine（GCE）で Dataproc を使用する方法を学びます。

Dialogflow には、ウェブ、Google アシスタント、ソーシャル メディア、Phone Gateway など、多くのインテグレーションがあらかじめ組み込まれています。しかし、chatbot をモバイル デバイスで使用できるようにするには、カスタム統合を作成する必要があります。このラボでは、Dialogflow Essentials を Flutter アプリに統合する方法について学習します。

この Codelab では、ウェブ コンポーネントを一から作成し、段階的に Lit Element に拡張します。

この Codelab では、Google Cloud Functions を使用して Google Cloud Composer で Apache Airflow ワークフロー（DAG）をトリガーする方法について説明します。この DAG は、BashOperator を使用して単純な bash コマンドを実行します。

JavaScript だけで、初期の Web Bluetooth API を使って LED フレームレス キャンドルを制御するウェブアプリを作成できます。

この Codelab では、Go で実装される Common Expression Language で式を記述します。変数の作成、論理演算子や演算子の使用、JSON の作成、proto の作成、式の調整を行います。

この Codelab では、Dataflow を使用して大量のデータを読み込んで読み取る際の Bigtable の書き込み/読み取りをモニタリングする方法を学びます。

この Codelab では、Model Maker を使用して、コメント スパム モデルを再トレーニングして、事前トレーニング済みモデルで処理できなかったエッジケースを考慮し、新しいモデルをウェブ アプリケーションに再デプロイする方法を学びます。

この Codelab では、TensorFlow.js の事前トレーニング済みモデル（COCO-SSD）のいずれかを読み込んで使用し、それを使用してトレーニングされた一般的なオブジェクトを認識する方法を学びます。

2 つのブラウザ間でメディアやデータをストリーミングする方法について説明します。WebRTC のコア API とテクノロジーについて理解する。getUserMedia、CSS、キャンバス要素を使用して、画像の取得と操作を行います。ピア接続を設定し、データチャネルを使用してブラウザ間で直接データを交換します。最後に、Node.js を使用してシグナリング サーバーを設定します。

2D 物理エンジンの Forge2D を使って、Flutter や Flame のゲームでゲームの仕組みを作る方法を学びましょう。

この Codelab では、Flutter 上に構築されたゲームエンジンである Flame の使用方法を学びます。Flame のコンポーネントと効果、Flame を Flutter の状態管理と統合する方法について学習します。

コンピューティング負荷の高い Flutter アプリを作成し、Flutter の滑らかなインタラクティビティを維持する方法を説明します。

コア コンポーネントを使用して簡単なアプリを作成することで、ウェブ向けマテリアル コンポーネントを使用する方法の基本を学びます。

ウェブ向けのマテリアル コンポーネントを使用すると、デザインを通じて商品を差別化し、ブランドを表現することがいかに容易になるかを学習します。

この Codelab では、SavedModel 形式の既存の Python ML モデルを TensorFlow.js 形式に変換してウェブブラウザで実行できるようにする方法と、変換時に発生する可能性のある一般的な問題への対処方法を学びます。

この Codelab では、プッシュ通知をウェブアプリに追加する方法を学びます。

マテリアル デザインのアダプティブ デザインの原則を使用して、画面サイズに一貫性を持たせる方法を学びます。この Codelab では、モバイル デザインをタブレット形式にし、レスポンシブ グリッド、アダプティブ コンポジション パターン、正しいコンポーネントについて学びます。

マテリアル 3 を使った手軽でパーソナライズされたテーマとブランドの作り方を学びます。

この Codelab では、Flutter と Flame Engine を使用して Doodle Dash というプラットフォーマー ゲームを作成します。

この Codelab では、既存のネイティブ C ライブラリを使用するために、FFI を使用してモバイルとパソコンの両方プラットフォーム向けに Flutter プラグインを作成します。

Angular の新しいリアクティブ モデルであるシグナルについて紹介します。シグナルにより、よりきめ細かい対応を可能にする高品質のツールが提供される

シンプルな Flutter アプリのログインページを作成して、マテリアル コンポーネントの基本的な使用方法を学びます。

Flutter アプリの構造とレイアウトの作成にマテリアルを使用する方法について学習します。

この Codelab では、シンプルな Flutter アプリを作成してテストします。

この Codelab では、Flutter でサポートされているプラットフォーム（Android、iOS、ウェブ、Windows、macOS、Linux）のすべてに適応する Flutter アプリを作成します。

デザインを改良する作業を通じて、Flutter 向けの高度なコンポーネントである背景メニューの使用方法を学習します。

Flutter 用のマテリアル コンポーネントを使用すると、デザインを通じて商品を差別化し、ブランドを表現することがいかに容易になるかを学習します。

アニメーション パッケージの移行を使用して、マテリアルのモーション システムを返信アプリに組み込みます。

この Codelab では、Flutter アプリにバナー広告、インタースティシャル広告、リワード広告を追加する方法を学びます。

この Codelab では、Document AI API と Python を使用するチュートリアルの作成に焦点を当てます。

この Codelab では、Firebase インフラストラクチャを使用して ML モデルをデプロイする方法について学びます。TensorFlow.js を使用して、デプロイしたモデルをご自身のウェブサイトで使用することができます。

この初心者向けの Codelab では、Angular でウェブアプリを構築する方法を学びます

Flutter は、1 つのコードベースからネイティブにコンパイルして、モバイル、ウェブ、デスクトップの美しいアプリケーションを作成できる Google の UI ツールキットです。Flutter は既存のコードと組み合わせることも可能です。世界中のデベロッパーの皆様にご利用いただける、無料のオープンソースです。 この Codelab では、Flutter 音楽アプリケーションを拡張して、退屈なアプリを魅力的なものにしていきます。これを実現するため、この Codelab では マテリアル 3

TensorFlow Lite Model Maker を使用して特定の種類のスパムを検出するようにスパム検出モデルを再トレーニングする方法を学びます。

テキストを分類し、その結果を UI に表示する Flutter アプリを作成する方法について説明します。

TensorFlow Lite Model Maker を使用してコメントスパム検出モデルをトレーニングする方法を学びます。

この Codelab では、Model Maker を使用して、コメント スパム モデルを再トレーニングして、事前トレーニング済みのモデルが処理できなかったエッジケースを考慮し、新しいモデルをウェブ アプリケーションに再デプロイする方法を学びます。

この Codelab では、ブログ投稿と同様のコメント機能を持つシンプルなウェブページを作成し、事前トレーニング済み機械学習モデルと統合してスパムコメントの投稿を検出する方法について学びます。これにより、スパムコメントの投稿を事前に除外できます。あらゆるバックエンド データベースに格納されるため、サーバーの処理時間とコストを削減できます。

この Codelab では、ウェブで Google Maps Platform を使用するための基本事項について説明します。事前の設定、Maps JavaScript API の読み込み、最初の地図の表示、マーカーとマーカー クラスタリングの操作、地図上での図形の描画、ユーザー操作の処理など、あらゆる基本事項を習得できます。 この Codelab では、以下の機能を備えたシンプルなウェブアプリを作成します。 この Codelab

TensorFlow Serving を使用して画像を分類するシンプルなウェブサイトを作成する方法をご覧ください。

この Codelab では、色とユーザー補助の関係、カラー コントラストのガイドライン、さらに Material Theme Builder で使いやすいテーマを作成し、コントラストを簡単に確認する方法について説明します。

この Codelab では、WebGL を使った Maps JavaScript API の機能による、3 次元的なベクターマップの制御とレンダリングについて解説します。 この Codelab は、JavaScript と Maps JavaScript API に関する中級レベルの知識を前提とした内容です。Maps JS API の使い方の基礎を学ぶ場合は、 Codelab「ウェブサイトに地図を追加する（JavaScript）」 がおすすめです。 以下の有効化の手順では、 Maps

この Codelab では、可変フォント、そのメリット、可変フォントを使用してデザインする方法、Google Fonts API を使用して CSS 内で可変フォントを実装する方法について学びます。

この Codelab では、Firebase と Angular を使用してリアルタイム ウェブ アプリケーションを作成します。

[Recorder]（レコーダー）パネルを使用して、ユーザーフローを記録、再生、測定できます。 新しい [Recorder] パネル（プレビュー機能）の概要は、こちらの動画でご覧いただけます。 次の手順で [Recorder] パネルを開きます。 こちらのコーヒー注文のデモページを使用します。購入手続きは、ショッピングのウェブサイトで一般的なユーザーフローです。 以降のセクションでは、[Recorder] パネルで以下の購入手続きフローを記録、再生、測定する方法について説明します。

低コントラストはウェブ アクセシビリティにおける最大の問題 です。ここでは、DevTools を使用してこの問題を理解し、検出、修正する方法を学習します。 ウェブページの低コントラストの問題を修正します。 次のリンクをクリックすると、低コントラストのテキストを含むページが開きます。 次に、開いたページで Chrome DevTools を起動 します。 およそ 20 人に 1 人

この Codelab では、iOS / Android 用の高品質なネイティブ エクスペリエンスを開発できる Flutter モバイルアプリ SDK を使って、Google マップを組み込んだエクスペリエンスを構築します。

地図に掲載したい場所が多数あり、その場所がどこにあるか、どの場所に行けばよいかをユーザーに知らせたいとします。一般的な例として、次のようなものがあります。 この Codelab では、特殊な場所のライブ データフィードからデータを取得し、ユーザーの出発点に最も近い場所を見つけるスポット検索アプリを作成します。このフルスタックのスポット検索アプリでは、店舗拠点が 25 か所に制限されている 簡単な店舗検索アプリ よりも多くの場所を処理できます。 この Codelab

この Codelab では、Maps JavaScript API と、WebGL アクセラレーテッドのオープンソース データ可視化フレームワークである deck.gl を使って、大量の地理空間データを可視化する方法について説明します。 Google Maps Platform を使用したことがない場合は、以下の手順を行います。 まだお持ちでない場合は、 https://nodejs.org/ に移動し、Node.js ランタイムをパソコンにダウンロードしてインストールします。 Node.js

DevTools で CSS グリッドのデバッグ 機能が強化されました。 ページの HTML 要素に display: grid または display: inline-grid が適用されている場合、 [要素] パネル でさまざまなオプションを選択して、グリッドを詳しく検証できるようになりました。 この Codelab では、Chrome DevTools を使用して CSS グリッドをデバッグする方法について説明します。 CSS グリッドのデバッグツールを使用して、このパズルを完成させます。

フレームワークに組み込まれているツールセットを使用して、ユーザー補助に関するベスト プラクティスを Angular アプリに取り入れる方法について学びます。

ウェブサイトで最も一般的な機能のひとつは、ビジネス拠点や施設など、物理的に存在する場所を示した Google マップ を表示することです。地図の実装方法は、場所の数や変更頻度などの要件によって大きく異なります。 この Codelab

この Codelab では、デスクトップ版 Flutter で GitHub クライアントを作成します。

この Codelab では、webview_flutter プラグインを Flutter アプリに追加する方法を学びます。

WebXR Device API で拡張現実機能を使用する方法と、シーン認識機能を使用して、3D オブジェクトを現実世界に配置する方法について学びます。

Flutter 是 Google 的界面工具包，可用于通过单一代码库为移动设备、网络和桌面设备制作本机编译的精美应用程序。在此 Codelab 中，您将学习如何构建移动端的 Flutter 应用，此应用可使用能生成随机词对的软件包延迟加载无限列表。

Flutter 是 Google 的界面工具包，可用于通过单一代码库为移动设备、网络和桌面设备制作本机编译的精美应用程序。在本 Codelab 中，您将扩展简单的移动应用，以添加交互性和导航，并更改其主题颜色。

了解如何将用 Java 编写的简单示例转换为 Dart 代码，后者简洁、常用且易于学习。

了解 Material Components for Flutter 如何让您的产品与众不同并通过设计表达您的品牌。

利用核心组件构建一个简单的应用，学习使用 Material Components for Flutter 的基础知识。

学习如何将 Material 用于 Flutter 上的结构和布局。

在此 Codelab 中，您将构建一个网页，与 BBC micro:bit 板进行交互，以便在其 5x5 LED 显示屏上显示图像。您将了解 Web Serial API，以及如何使用可读、可写和转换流通过浏览器与串行设备进行通信。

了解如何保护自己的在线信息、识别钓鱼式攻击、为 Google 帐号启用高级保护，以及如何在社交媒体上确保安全。