Flutterで実装するSNSシェア

はじめに

Flutterで特定のSNSのアカウントページや投稿画面を開きたいケースがあります。
本記事では、その実装例や注意点についてまとめてみました。

SNSシェアの実装パターンは2つ

① OSの共有シートを出す

share_plusでiOS/Androidの共有UIを出し、ユーザーがSNSを選ぶ方式。

• メリット: 対応先が広い / 審査リスクが低い / 壊れにくい
• デメリット: 「この SNS に誘導したい」が弱い（ユーザーが選ぶ）

② 特定SNSを“直”で開く

url_launcherで、Xなら x://post?text=...、LINEなら line://msg/text/... のようにSNSごとのURLを組み立てて開く方式。

• メリット: ワンタップで目的の SNS へ誘導できる
• デメリット: SNS 側仕様変更に弱い / アプリ有無の分岐が必要 / SNS により制限が多い

どちらを採用するか

「② 特定SNSを“直”で開く」パターンの場合、例えばLINEだと「line://」から始まるURLスキームは非推奨と明言されています。
LINE URLスキームでLINEの機能を使う #サポートされているLINE URLスキーム | LINE Developers

他のSNSアプリでも公式にURLスキームが用意されてない場合があり、動作が保証されるものではありません。

ですが、共有シートより特定のSNSをシェアするUXはわかりやすいため、どちらも採用し併用するのが良さそうと思いました。
ただしURLスキームが廃止されるリスクがあるため、十分な動作確認が必要です。

また、「SNSアプリを開き〇〇へ遷移」のような要件が実現可能か? も選定基準になるかと思います。

Flutter実装例

① OSの共有シートを出す

1. share_plus をインポート
2. ボタン押下で以下を呼び出し

await SharePlus.instance.share(
  ShareParams(
    // シェアしたい項目を設定
  ),
);

② 特定SNSを“直”で開く

1. url_launcher をインポート
2. アプリがインストールされているか? を判定し アプリ or ブラウザ を開ける関数を用意

class UrlLauncherService {
  Future<void> _launchUrl(
    Uri uri, {
    LaunchMode mode = LaunchMode.platformDefault,
  }) async {
    if (await canLaunchUrl(uri)) {
      await launchUrl(uri, mode: mode);
    } else {
      final Error error = ArgumentError('Could not launch $uri');
      throw error;
    }
  }

  Future<void> launchNativeApp({
    required String nativeUrl,
    required String webUrl,
  }) async {
    final nativeUri = Uri.parse(nativeUrl);
    final webUri = Uri.parse(webUrl);
    if (await canLaunchUrl(nativeUri)) {
      // アプリがインストールされている場合はアプリを起動
      await _launchUrl(nativeUri);
    } else {
      // インストールされていない場合はwebブラウザを起動
      await _launchUrl(webUri);
    }
  }
}

3. 対応するアプリの スキーム を設定する

参考：url_launcher #configuration

AndroidManifest.xml

<queries>
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="http" />
    </intent>
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="https" />
    </intent>
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="line" />
    </intent>
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="x" />
    </intent>
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="instagram" />
    </intent>
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="fb" />
    </intent>
</queries>

Info.plist

<key>LSApplicationQueriesSchemes</key>
<array>
	<string>line</string>
	<string>twitter</string>
	<string>instagram</string>
	<string>facebook</string>
</array>

4. launchNativeApp()に渡すURLスキームを用意する（一例）

LINE

テキストメッセージを送る

• nativeUrl: line://msg/text/$text
• webUrl: https://line.me/R/share?text=$text

参考：LINE URLスキームでLINEの機能を使う | LINE Developers

X（旧：twitter）

アカウントプロフィールを開く

• nativeUrl:
  • Android: x://user?screen_name=$id
  • iOS: twitter://user?screen_name=$id
• webUrl: https://twitter.com/$id

ポストする

• nativeUrl:
  • Android: x://post?text=$text
  • iOS: twitter://post?text=$text
• webUrl: https://x.com/intent/post?text=$text

Instagram

アカウントプロフィールを開く

• nativeUrl: instagram://user?username=$username
• webUrl: https://www.instagram.com/$username/

Facebook

アカウントプロフィールを開く

• nativeUrl:
  • Android: fb://profile/$id
  • iOS: facebook://profile/$id
• webUrl: https://www.facebook.com/$id

投稿する

• nativeUrl:
  • Android: fb://facewebmodal/f?href=https://www.facebook.com/sharer/sharer.php?u=$text
  • iOS: facebook://facewebmodal/f?href=$text
• webUrl: https://www.facebook.com/sharer/sharer.php?u=$text

ハマりどころ

URLスキームがサポートされていない場合がある

Facebookでシェア機能を実装するには、FacebookSDKの導入とShareDialogが公式から提供されており、URLスキームで対応する方法はなさそうでした。

スキームがサポートされていない場合がある

Androidではxですが、iOSではtwitterでないと正しく動作しない場合があります。

まとめ

サービスにとってシェア機能は重要なSNSへの動線なので、正しく要点を押さえて実装していきたいなと思いました。