チームスピリットデベロッパーブログ

チームスピリット開発者のブログ

Flutter から Salesforce へ繋げてみた。

こんにちは。

株式会社チームスピリットの古川(id:furukawa-hisakatsu)です。

前回に引き続き、技術的な話となります。 今回は私自身も初めて触ってみましたが、昨年(2017年)からリリースされており、じわじわと人気が上がっている「Flutter」を使用してSalesforceと繋げてみました。

後、この記事はチームスピリット Advent Calendar 2018の16日目です。(大遅刻)

adventar.org

How to Flutter

Flutterとは?

そもそもFlutterとはなんぞやという人向けに、まずFlutterに関して軽く説明します。

Flutter自体は、Googleにて開発されており、主な用途としてはAndroidやiOS(iPhone)向けのモバイルアプリケーションとして利用されます。 メインの言語としてはあまり有名ではないが「Dart」言語を使用して開発します。 また、XamarinやReact Nativeと同様、一つのソースコードでAndroidやiOS(iPhone)開発ができるクロスプラットフォーム開発も行うことができます。

そのため、今回はAndroidやiOS(iPhone)にて動作し、Salesforceに接続して情報を取得しよう!が目的となります。

Flutter開発をしてみよう

Flutter開発に関してはそこまで敷居は高くなく、公式HPからインストール手順に従うことにより、手軽に開発することができます。 (iOS開発を行う場合は、Apple Developer Programの契約とMacOSが必要ですが)

flutter.io

また、Flutterに関しては他のライブラリに比べて、親切にも正常に設定されているかを検査する「doctor」機能が実装されており、 手軽さに拍車がかかります。

また、開発用IDEとしてAndroid StudioやXcodeにてそれぞれ機種のエミュレーションが可能となりますが、 実際の開発、検証を行う場合は実機による開発や検証をおすすめします。 (今回サンプル作成時も色々と悩まされました…)

実際に接続しよう

今回のサンプルコード

github.com

実行方法

  1. 上記URLから、Gitで取得する、もしくはzipファイルをダウンロードして適当なフォルダに解凍してください。
  2. Salesforceにログインを行い、接続アプリケーションの作成を行い、「コンシューマ鍵」と「コールバック URL」を「lib/settings.dart」の5~6行目に格納してください。
    (詳細な設定方法は以下「接続アプリケーションの設定」をご確認ください!)
  3. 該当フォルダかたコマンドプロンプトやターミナルを開き、「flutter run」を実行すれば、できるはずです!
    (できなかった場合、記載されているコマンドを実行してみたり、「flutter docter」で設定が問題ないかを確認してみてください。)

説明

今回のサンプルではSalesforceとの認証を行い、ユーザ情報を表示するだけのシンプルな画面となっております。

f:id:furukawa-hisakatsu:20181225203429p:plain
FlutterToSalesforce

処理の流れ

  1. まずエントリとして「main.dart」に接続され、「settings.dart」からスマートフォンのストレージにて保存されている情報を取得します。
  2. 保存されている情報がなければ「connect/connect.dart」に移動し、WebViewにてSalesforceのログイン画面を表示し、認証します。
    認証後には「setting.dart」からスマートフォンのストレージにて保存され、「main.dart」に移動します。
  3. 「settings.dart」に保存されている情報があるため、「user/user.dart」に移動し、ユーザ情報を取得して表示されます。
  4. 右上の「ログアウト」をタップし、「はい」を選ぶことにより、「settings.dart」からスマートフォンのストレージにて保存されている情報をクリアし、「main.dart」に移動します。

Salesforceとの接続の話

今回のSalesforceとの接続に関しては、ユーザ情報の取得に関しては、よくあるREST API Queryを使用しているため、説明は割愛します。

認証に関しても、一般的なWeb サーバ OAuth 認証フローにて行っており、リダイレクト先自体は自身である「localhost」を指定し、URL情報から認証コードを取得する形となります。 ですが、今回は一般配布向けのアプリケーションであるため、通常で使用される「コンシューマの秘密」は使用せず、「コンシューマ鍵」のみを使用した認証方法となります。 それにより、以下の接続アプリケーションの設定がほんの少し違う形となっております。

接続アプリケーションの設定

さて、Salesforceと接続するための設定を行いましょう。 基本的な設定に関しては前回記事を参考にしてください。以下は変更点のみを記載します。

f:id:furukawa-hisakatsu:20181225215537p:plain
接続アプリケーションの変更点

  • コールバックURLには自身である「localhost」を指定しましょう。(例:「http://localhost:25640」)
  • 今回は「コンシューマ鍵」だけで認証を行うため、「Web サーバフローの秘密が必要」にチェックを外しましょう。

実行してみましょう

f:id:furukawa-hisakatsu:20181225221020p:plain

少し苦戦するところはありますが、簡単にモバイルアプリケーションができました。

締め

今回Flutterにてモバイルアプリケーションを開発してみましたが、まだまだ不具合等もちらほら見えており、まだまだ発展途上ではある状態となっております。 ですが、クロスプラットフォーム開発ができるメリットはそれぞれの言語習得や労力を上回る成果を出してくれます。 Flutter以外にもいくつか選択があります為、自分に合った言語やライブラリを探してみてください。

(自分としてはUnityでモバイルゲームを作ってみたいですね)