<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>CloudFunction</title>
	<atom:link href="https://techgrowup.net/tag/cloudfunction/feed/" rel="self" type="application/rss+xml" />
	<link>https://techgrowup.net</link>
	<description>エンジニアを強くする</description>
	<lastBuildDate>Wed, 02 Oct 2024 10:31:28 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://techgrowup.net/wp-content/uploads/2021/05/hp-icon-150x150.png</url>
	<title>CloudFunction</title>
	<link>https://techgrowup.net</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Flutter開発入門35 FlutterでFirebase Cloud Functionsを利用する方法</title>
		<link>https://techgrowup.net/flutter-firebase-cloud-function/</link>
					<comments>https://techgrowup.net/flutter-firebase-cloud-function/?noamp=mobile#respond</comments>
		
		<dc:creator><![CDATA[techgrowup]]></dc:creator>
		<pubDate>Wed, 02 Oct 2024 10:31:27 +0000</pubDate>
				<category><![CDATA[Flutter]]></category>
		<category><![CDATA[プログラミング]]></category>
		<category><![CDATA[CloudFunction]]></category>
		<category><![CDATA[Dart]]></category>
		<category><![CDATA[Firebase]]></category>
		<category><![CDATA[アプリ開発]]></category>
		<guid isPermaLink="false">https://techgrowup.net/?p=1901</guid>

					<description><![CDATA[はじめに 　Firebase Cloud Functionsは、Googleが提供するサーバーレス環境で、バックエンド処理をクラウド上で実行することができる強力なツールです。FlutterアプリにFirebase Clo [&#8230;]]]></description>
										<content:encoded><![CDATA[
<h1 class="wp-block-heading">はじめに</h1>



<p>　<strong>Firebase Cloud Functions</strong>は、Googleが提供するサーバーレス環境で、バックエンド処理をクラウド上で実行することができる強力なツールです。Flutterアプリに<strong>Firebase Cloud Functions</strong>を導入することで、サーバーサイドのコードを手軽に実装・実行でき、ユーザーの操作やデータベースの変更に基づいて自動的にバックエンドのロジックを実行できます。</p>



<p>　本記事では、<strong>FlutterアプリでFirebase Cloud Functions</strong>を利用する方法を解説します。Cloud Functionsのセットアップ方法から、実際にバックエンド処理を行うサンプルまでをステップバイステップで紹介します。</p>



<h2 class="wp-block-heading">Firebase Cloud Functionsとは</h2>



<p>　<strong>Firebase Cloud Functions</strong>は、Google Cloudのサーバーレスプラットフォームで、クラウド上でバックエンドコードを実行できるサービスです。ユーザーの操作やデータベースの変更、認証の成功など、さまざまなイベントに基づいて関数がトリガーされ、自動的に処理が行われます。サーバーの管理が不要で、スケーラビリティに優れているため、必要に応じてスムーズにスケールするのが特徴です。AWSを利用したことがある方はLambdaと似ていると思って頂ければ分かりやすいです。</p>



<h3 class="wp-block-heading">Firebase Cloud Functionsの主な特徴：</h3>



<ul class="wp-block-list">
<li><strong>セキュリティ</strong>：Google Cloudのセキュリティで保護されており、安全にバックエンド処理を実行できる。</li>



<li><strong>サーバーレス</strong>：サーバー管理が不要。バックエンド処理をコードだけで実装可能。</li>



<li><strong>リアルタイムトリガー</strong>：データベース変更、認証イベント、ストレージの更新などをトリガーにして関数を実行。</li>



<li><strong>スケーラビリティ</strong>：負荷に応じて自動的にスケールするため、大規模な処理にも対応。</li>
</ul>



<h2 class="wp-block-heading">前提条件</h2>



<p>　Firebase AuthenticationをFlutterアプリに組み込むためには、以下が必要です：</p>



<ul class="wp-block-list">
<li><strong>Firebaseプロジェクト</strong>（Firebase Consoleで作成済み）</li>



<li><strong>Flutter SDK</strong>がインストールされている</li>



<li><strong>FlutterFire CLI</strong>が設定済み</li>
</ul>



<p>　まだ完了していない方は以下の記事を参考にFirbeaseを導入してください。</p>



<figure class="wp-block-embed aligncenter is-type-wp-embed is-provider-techgrowup wp-block-embed-techgrowup"><div class="wp-block-embed__wrapper">

<a target="_self" href="https://techgrowup.net/flutter-firebase-setup" title="Flutter開発入門29 FlutterFireを使ってFirebaseをFlutterにセットアップする方法" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img decoding="async" width="160" height="90" src="https://techgrowup.net/wp-content/uploads/2024/09/flutter-firebase-setup-160x90.webp" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" srcset="https://techgrowup.net/wp-content/uploads/2024/09/flutter-firebase-setup-160x90.webp 160w, https://techgrowup.net/wp-content/uploads/2024/09/flutter-firebase-setup-1024x585.webp 1024w, https://techgrowup.net/wp-content/uploads/2024/09/flutter-firebase-setup-768x439.webp 768w, https://techgrowup.net/wp-content/uploads/2024/09/flutter-firebase-setup-120x68.webp 120w, https://techgrowup.net/wp-content/uploads/2024/09/flutter-firebase-setup-320x180.webp 320w, https://techgrowup.net/wp-content/uploads/2024/09/flutter-firebase-setup-376x212.webp 376w, https://techgrowup.net/wp-content/uploads/2024/09/flutter-firebase-setup.webp 1200w" sizes="(max-width: 160px) 100vw, 160px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">Flutter開発入門29 FlutterFireを使ってFirebaseをFlutterにセットアップする方法</div><div class="blogcard-snippet internal-blogcard-snippet">FlutterFireを使って、FlutterアプリにFirebaseをセットアップする方法を詳しく解説。Firebaseの認証、クラウド機能の導入をステップごとに説明します。</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img decoding="async" src="https://www.google.com/s2/favicons?domain=https://techgrowup.net" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">techgrowup.net</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2024.09.22</div></div></div></div></a>
</div></figure>



<h2 class="wp-block-heading">ステップ1 : Cloud Functionsのセットアップ</h2>



<h3 class="wp-block-heading">1.1 Cloud Functionsのコード作成</h3>



<p>　 Functionsのコードは、Node.jsを使用して記述します。プロジェクトディレクトリ内の<code>functions</code>フォルダに移動し、関数を記述していきます。</p>



<p>　<strong>例：簡単なHTTPリクエストを処理する関数</strong></p>



<div class="wp-block-kevinbatdorf-code-block-pro" data-code-block-pro-font-family="Code-Pro-JetBrains-Mono" style="font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E"><svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14"><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5"></circle><circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5"></circle><circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5"></circle></g></svg></span><span role="button" tabindex="0" data-code="const functions = require('firebase-functions');

// HTTPリクエストに応答する関数
exports.helloWorld = functions.https.onRequest((request, response) =&gt; {
  response.send(&quot;Hello from Firebase Cloud Functions!&quot;);
});" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button"><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path></svg></span><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><span class="line"><span style="color: #569CD6">const</span><span style="color: #D4D4D4"> </span><span style="color: #4FC1FF">functions</span><span style="color: #D4D4D4"> = </span><span style="color: #DCDCAA">require</span><span style="color: #D4D4D4">(</span><span style="color: #CE9178">&#39;firebase-functions&#39;</span><span style="color: #D4D4D4">);</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6A9955">// HTTPリクエストに応答する関数</span></span>
<span class="line"><span style="color: #4EC9B0">exports</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">helloWorld</span><span style="color: #D4D4D4"> = </span><span style="color: #9CDCFE">functions</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">https</span><span style="color: #D4D4D4">.</span><span style="color: #DCDCAA">onRequest</span><span style="color: #D4D4D4">((</span><span style="color: #9CDCFE">request</span><span style="color: #D4D4D4">, </span><span style="color: #9CDCFE">response</span><span style="color: #D4D4D4">) </span><span style="color: #569CD6">=&gt;</span><span style="color: #D4D4D4"> {</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #9CDCFE">response</span><span style="color: #D4D4D4">.</span><span style="color: #DCDCAA">send</span><span style="color: #D4D4D4">(</span><span style="color: #CE9178">&quot;Hello from Firebase Cloud Functions!&quot;</span><span style="color: #D4D4D4">);</span></span>
<span class="line"><span style="color: #D4D4D4">});</span></span></code></pre></div>



<p>　この例では、HTTPリクエストが送信されると、「Hello from Firebase Cloud Functions!」という応答を返します。</p>



<h3 class="wp-block-heading">1.2 デプロイ</h3>



<p>　コードをデプロイするには、次のコマンドを使用します。</p>



<div class="wp-block-kevinbatdorf-code-block-pro" data-code-block-pro-font-family="Code-Pro-JetBrains-Mono" style="font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E"><svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14"><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5"></circle><circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5"></circle><circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5"></circle></g></svg></span><span role="button" tabindex="0" data-code="firebase deploy --only functions" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button"><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path></svg></span><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><span class="line"><span style="color: #DCDCAA">firebase</span><span style="color: #D4D4D4"> </span><span style="color: #CE9178">deploy</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">--only</span><span style="color: #D4D4D4"> </span><span style="color: #CE9178">functions</span></span></code></pre></div>



<p>　これにより、作成した関数がFirebaseにデプロイされ、クラウド上で利用可能になります。</p>



<h2 class="wp-block-heading">ステップ2：FlutterアプリからCloud Functionsを呼び出す</h2>



<h3 class="wp-block-heading">2.1 <code>cloud_functions</code>パッケージのインストール</h3>



<p>FlutterアプリからCloud Functionsを利用するために、<strong><code>cloud_functions</code>パッケージ</strong>をインストールします。</p>



<ol class="wp-block-list">
<li><code>pubspec.yaml</code>**に次の依存関係を追加します。</li>
</ol>



<div class="wp-block-kevinbatdorf-code-block-pro" data-code-block-pro-font-family="Code-Pro-JetBrains-Mono" style="font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E"><svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14"><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5"></circle><circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5"></circle><circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5"></circle></g></svg></span><span role="button" tabindex="0" data-code="dependencies:
  firebase_core: ^3.5.0
  cloud_functions: ^5.1.3" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button"><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path></svg></span><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><span class="line"><span style="color: #569CD6">dependencies</span><span style="color: #D4D4D4">:</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #569CD6">firebase_core</span><span style="color: #D4D4D4">: </span><span style="color: #CE9178">^3.5.0</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #569CD6">cloud_functions</span><span style="color: #D4D4D4">: </span><span style="color: #CE9178">^5.1.3</span></span></code></pre></div>



<ol start="2" class="wp-block-list">
<li>パッケージをインストールします。</li>
</ol>



<div class="wp-block-kevinbatdorf-code-block-pro" data-code-block-pro-font-family="Code-Pro-JetBrains-Mono" style="font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E"><svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14"><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5"></circle><circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5"></circle><circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5"></circle></g></svg></span><span role="button" tabindex="0" data-code="flutter pub get" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button"><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path></svg></span><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><span class="line"><span style="color: #DCDCAA">flutter</span><span style="color: #D4D4D4"> </span><span style="color: #CE9178">pub</span><span style="color: #D4D4D4"> </span><span style="color: #CE9178">get</span></span></code></pre></div>



<h3 class="wp-block-heading">2.2 Cloud Functionsの呼び出し</h3>



<p>　<code>cloud_functions</code>パッケージを使って、Flutterアプリから関数を呼び出すことができます。以下は、先ほど作成した<code>helloWorld</code>関数をFlutterから呼び出すコードです。</p>



<div class="wp-block-kevinbatdorf-code-block-pro" data-code-block-pro-font-family="Code-Pro-JetBrains-Mono" style="font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E"><svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14"><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5"></circle><circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5"></circle><circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5"></circle></g></svg></span><span role="button" tabindex="0" data-code="import 'package:flutter/material.dart';
import 'package:cloud_functions/cloud_functions.dart';

void main() =&gt; runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Firebase Cloud Functions Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CloudFunctionsDemo(),
    );
  }
}

class CloudFunctionsDemo extends StatefulWidget {
  @override
  _CloudFunctionsDemoState createState() =&gt; _CloudFunctionsDemoState();
}

class _CloudFunctionsDemoState extends State&lt;CloudFunctionsDemo&gt; {
  final HttpsCallable callable = FirebaseFunctions.instance.httpsCallable('helloWorld');

  Future&lt;void&gt; _callFunction() async {
    try {
      final result = await callable();
      print(result.data);  // &quot;Hello from Firebase Cloud Functions!&quot;を出力
    } catch (e) {
      print('Error: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Cloud Functions Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _callFunction,
          child: Text('Call Cloud Function'),
        ),
      ),
    );
  }
}" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button"><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path></svg></span><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><span class="line"><span style="color: #569CD6">import</span><span style="color: #D4D4D4"> </span><span style="color: #CE9178">&#39;package:flutter/material.dart&#39;</span><span style="color: #D4D4D4">;</span></span>
<span class="line"><span style="color: #569CD6">import</span><span style="color: #D4D4D4"> </span><span style="color: #CE9178">&#39;package:cloud_functions/cloud_functions.dart&#39;</span><span style="color: #D4D4D4">;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #569CD6">void</span><span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">main</span><span style="color: #D4D4D4">() =&gt; </span><span style="color: #DCDCAA">runApp</span><span style="color: #D4D4D4">(</span><span style="color: #4EC9B0">MyApp</span><span style="color: #D4D4D4">());</span></span>
<span class="line"></span>
<span class="line"><span style="color: #569CD6">class</span><span style="color: #D4D4D4"> </span><span style="color: #4EC9B0">MyApp</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">extends</span><span style="color: #D4D4D4"> </span><span style="color: #4EC9B0">StatelessWidget</span><span style="color: #D4D4D4"> {</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #569CD6">@override</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #4EC9B0">Widget</span><span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">build</span><span style="color: #D4D4D4">(</span><span style="color: #4EC9B0">BuildContext</span><span style="color: #D4D4D4"> context) {</span></span>
<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #C586C0">return</span><span style="color: #D4D4D4"> </span><span style="color: #4EC9B0">MaterialApp</span><span style="color: #D4D4D4">(</span></span>
<span class="line"><span style="color: #D4D4D4">      title: </span><span style="color: #CE9178">&#39;Firebase Cloud Functions Demo&#39;</span><span style="color: #D4D4D4">,</span></span>
<span class="line"><span style="color: #D4D4D4">      theme: </span><span style="color: #4EC9B0">ThemeData</span><span style="color: #D4D4D4">(</span></span>
<span class="line"><span style="color: #D4D4D4">        primarySwatch: </span><span style="color: #4EC9B0">Colors</span><span style="color: #D4D4D4">.blue,</span></span>
<span class="line"><span style="color: #D4D4D4">      ),</span></span>
<span class="line"><span style="color: #D4D4D4">      home: </span><span style="color: #4EC9B0">CloudFunctionsDemo</span><span style="color: #D4D4D4">(),</span></span>
<span class="line"><span style="color: #D4D4D4">    );</span></span>
<span class="line"><span style="color: #D4D4D4">  }</span></span>
<span class="line"><span style="color: #D4D4D4">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #569CD6">class</span><span style="color: #D4D4D4"> </span><span style="color: #4EC9B0">CloudFunctionsDemo</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">extends</span><span style="color: #D4D4D4"> </span><span style="color: #4EC9B0">StatefulWidget</span><span style="color: #D4D4D4"> {</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #569CD6">@override</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #4EC9B0">_CloudFunctionsDemoState</span><span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">createState</span><span style="color: #D4D4D4">() =&gt; </span><span style="color: #4EC9B0">_CloudFunctionsDemoState</span><span style="color: #D4D4D4">();</span></span>
<span class="line"><span style="color: #D4D4D4">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #569CD6">class</span><span style="color: #D4D4D4"> </span><span style="color: #4EC9B0">_CloudFunctionsDemoState</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">extends</span><span style="color: #D4D4D4"> </span><span style="color: #4EC9B0">State</span><span style="color: #D4D4D4">&lt;</span><span style="color: #4EC9B0">CloudFunctionsDemo</span><span style="color: #D4D4D4">&gt; {</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #569CD6">final</span><span style="color: #D4D4D4"> </span><span style="color: #4EC9B0">HttpsCallable</span><span style="color: #D4D4D4"> callable = </span><span style="color: #4EC9B0">FirebaseFunctions</span><span style="color: #D4D4D4">.instance.</span><span style="color: #DCDCAA">httpsCallable</span><span style="color: #D4D4D4">(</span><span style="color: #CE9178">&#39;helloWorld&#39;</span><span style="color: #D4D4D4">);</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #4EC9B0">Future</span><span style="color: #D4D4D4">&lt;</span><span style="color: #569CD6">void</span><span style="color: #D4D4D4">&gt; </span><span style="color: #DCDCAA">_callFunction</span><span style="color: #D4D4D4">() </span><span style="color: #C586C0">async</span><span style="color: #D4D4D4"> {</span></span>
<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #C586C0">try</span><span style="color: #D4D4D4"> {</span></span>
<span class="line"><span style="color: #D4D4D4">      </span><span style="color: #569CD6">final</span><span style="color: #D4D4D4"> result = </span><span style="color: #C586C0">await</span><span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">callable</span><span style="color: #D4D4D4">();</span></span>
<span class="line"><span style="color: #D4D4D4">      </span><span style="color: #DCDCAA">print</span><span style="color: #D4D4D4">(result.data);  </span><span style="color: #6A9955">// &quot;Hello from Firebase Cloud Functions!&quot;を出力</span></span>
<span class="line"><span style="color: #D4D4D4">    } </span><span style="color: #C586C0">catch</span><span style="color: #D4D4D4"> (e) {</span></span>
<span class="line"><span style="color: #D4D4D4">      </span><span style="color: #DCDCAA">print</span><span style="color: #D4D4D4">(</span><span style="color: #CE9178">&#39;Error: $</span><span style="color: #9CDCFE">e</span><span style="color: #CE9178">&#39;</span><span style="color: #D4D4D4">);</span></span>
<span class="line"><span style="color: #D4D4D4">    }</span></span>
<span class="line"><span style="color: #D4D4D4">  }</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #569CD6">@override</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #4EC9B0">Widget</span><span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">build</span><span style="color: #D4D4D4">(</span><span style="color: #4EC9B0">BuildContext</span><span style="color: #D4D4D4"> context) {</span></span>
<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #C586C0">return</span><span style="color: #D4D4D4"> </span><span style="color: #4EC9B0">Scaffold</span><span style="color: #D4D4D4">(</span></span>
<span class="line"><span style="color: #D4D4D4">      appBar: </span><span style="color: #4EC9B0">AppBar</span><span style="color: #D4D4D4">(</span></span>
<span class="line"><span style="color: #D4D4D4">        title: </span><span style="color: #4EC9B0">Text</span><span style="color: #D4D4D4">(</span><span style="color: #CE9178">&#39;Cloud Functions Demo&#39;</span><span style="color: #D4D4D4">),</span></span>
<span class="line"><span style="color: #D4D4D4">      ),</span></span>
<span class="line"><span style="color: #D4D4D4">      body: </span><span style="color: #4EC9B0">Center</span><span style="color: #D4D4D4">(</span></span>
<span class="line"><span style="color: #D4D4D4">        child: </span><span style="color: #4EC9B0">ElevatedButton</span><span style="color: #D4D4D4">(</span></span>
<span class="line"><span style="color: #D4D4D4">          onPressed: _callFunction,</span></span>
<span class="line"><span style="color: #D4D4D4">          child: </span><span style="color: #4EC9B0">Text</span><span style="color: #D4D4D4">(</span><span style="color: #CE9178">&#39;Call Cloud Function&#39;</span><span style="color: #D4D4D4">),</span></span>
<span class="line"><span style="color: #D4D4D4">        ),</span></span>
<span class="line"><span style="color: #D4D4D4">      ),</span></span>
<span class="line"><span style="color: #D4D4D4">    );</span></span>
<span class="line"><span style="color: #D4D4D4">  }</span></span>
<span class="line"><span style="color: #D4D4D4">}</span></span></code></pre></div>



<p>　このコードでは、<code>helloWorld</code>関数が呼び出され、関数からの応答がFlutterアプリ内に表示されます。</p>



<h2 class="wp-block-heading">Firebase Cloud Functionsの活用例</h2>



<ol class="wp-block-list">
<li><strong>ユーザー認証の管理</strong>
<ul class="wp-block-list">
<li>ユーザーがサインアップした際に、バックエンドで自動的にデータベースを更新したり、メール通知を送信することができます。</li>
</ul>
</li>



<li><strong>データ処理</strong>
<ul class="wp-block-list">
<li>Firebase FirestoreやRealtime Databaseのデータが更新されたときに、Cloud Functionsを使って特定のロジックを実行し、データの整合性を保つことが可能です。</li>
</ul>
</li>



<li><strong>サードパーティAPIの呼び出し</strong>
<ul class="wp-block-list">
<li>ユーザーのリクエストに基づいて、外部のサードパーティAPIと連携する処理をバックエンドで実行することができます。</li>
</ul>
</li>
</ol>



<h2 class="wp-block-heading">まとめ</h2>



<p>　<strong>Firebase Cloud Functions</strong>を利用することで、Flutterアプリにサーバーレスなバックエンド機能を手軽に追加することができます。リアルタイムでのデータ処理や、ユーザーの操作に応じたバックエンドロジックをクラウド上で実行することで、アプリの機能を大幅に拡張できます。また、サーバーの管理が不要で、スケーラビリティに優れているため、複雑なサーバー管理を行わずに、柔軟なバックエンド処理を実現できます。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://techgrowup.net/flutter-firebase-cloud-function/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>

<!--
Performance optimized by W3 Total Cache. Learn more: https://www.boldgrid.com/w3-total-cache/?utm_source=w3tc&utm_medium=footer_comment&utm_campaign=free_plugin

Disk: Enhanced  を使用したページ キャッシュ

Served from: techgrowup.net @ 2026-05-16 02:48:50 by W3 Total Cache
-->