ホーム 変更履歴

Flutter SDK クイックスタート

1. インストール

1.1. パッケージの追加

pubspec.yaml に admel_sdk パッケージを追加します。

dependencies:
  admel_sdk: ^1.0.6

その後、依存関係をインストールします：

flutter pub get

1.2. プラットフォーム要件

プラットフォーム 最小バージョン
Flutter 3.3 以降
Dart 3.5 以降
iOS 12.0 以降
Android API 21 (Android 5.0) 以降

1.3. iOS の設定

ios/Podfile の先頭でプラットフォームバージョンを設定します：

platform , '13.0'

1.4. Android の設定

android/app/build.gradle で minSdkVersion を確認します：

android {
    defaultConfig {
        minSdkVersion 21
    }
}

2. SDK の初期化と広告の表示

2.1. 基本的な実装

以下は最小限の実装例です。

import 'package:admel_sdk/admel_sdk.dart';
import 'package:flutter/material.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const AdExamplePage(),
    );
  }
}

class AdExamplePage extends StatefulWidget {
  const AdExamplePage({super.key});

  @override
  State<AdExamplePage> createState() => _AdExamplePageState();
}

class _AdExamplePageState extends State<AdExamplePage> {
  final _admelSdk = AdMelSdk();

  @override
  void initState() {
    super.initState();
    _initAd();
  }

  Future<void> _initAd() async {
    // 1. メディアIDの設定
    await _admelSdk.setMediaId('your_media_id');

    // 2. （オプション）ユーザーIDの設定（S2Sコールバック用）
    await _admelSdk.setUserId('your_user_id');

    // 3. SDKの初期化
    await _admelSdk.initialize(AdMelEnvironment.development);

    // 4. 広告の表示
    await _admelSdk.showAd(
      'your_slot_id',
      position: 'top-right',
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('AdMel Example')),
      body: const Center(child: Text('広告が右上に表示されます')),
    );
  }
}

2.2. 環境設定

AdMel SDK は 開発環境 と 本番環境 の 2 種類の環境をサポートしています。

環境 設定 説明
開発環境 AdMelEnvironment.development 開発用のテスト広告を表示します
本番環境 AdMelEnvironment.production 実際の広告を配信します 
// 開発環境
await _admelSdk.initialize(AdMelEnvironment.development);

// 本番環境
await _admelSdk.initialize(AdMelEnvironment.production);

開発が完了し、アプリをリリースする際には AdMelEnvironment.production が適用されていることを確認してください。

2.3. 広告の表示

showAd() を呼び出すと、広告のロードと表示が行われます。
初回のみ呼び出しが必要で、その後は オートリフレッシュ機能 により自動的に広告が更新されます。

await _admelSdk.showAd(
  'your_slot_id',
  position: 'top-right',
  offsetX: 0.0,
  offsetY: 0.0,
);

3. 広告の表示位置

position パラメータで広告の表示位置を指定できます。

値 位置
top-left 左上
top-right 右上
bottom-left 左下
bottom-right 右下 (デフォルト)
center 中央

offsetX / offsetY を指定することで、表示位置を微調整できます。

// 右上に表示し、右に10px、下に20pxオフセット
await _admelSdk.showAd(
  'your_slot_id',
  position: 'top-right',
  offsetX: 10.0,
  offsetY: 20.0,
);

4. 広告ライフサイクルイベント

広告の再生状態に応じてコールバックを受け取ることができます。

_admelSdk.setAdEventListeners(
  onAdStarted: () {
    print('広告の再生が開始されました');
  },
  onAdStopped: () {
    print('広告の再生が停止しました');
  },
  onAdCompleted: () {
    print('広告の再生が100%完了しました');
  },
);

5. オートリフレッシュ

オートリフレッシュはデフォルトで有効です。広告は一定間隔で自動的に更新されます。

// オートリフレッシュの有効化（間隔：30秒）
await _admelSdk.setAutoRefresh(enabled: true, interval: 30);

// オートリフレッシュの無効化
await _admelSdk.setAutoRefresh(enabled: false);

// オートリフレッシュの状態確認
final isEnabled = await _admelSdk.isAutoRefreshEnabled();

6. 再生制御

// 一時停止
await _admelSdk.pause();

// 再開
await _admelSdk.resume();

// 停止してバナーを非表示
await _admelSdk.stopAudioAndHideBanner();

画面遷移やアプリのライフサイクル変更時には、pause() / resume() を適切に呼び出してください。

7. コインリワード演出（オプション）

広告の再生完了時に、コインが飛び出す演出を表示できます。

コインリワード演出にはオーバーレイ表示のため NavigatorKey が必要です。

final navigatorKey = GlobalKey<NavigatorState>();

MaterialApp(
  navigatorKey: navigatorKey,
  // ...
);

7.2. コインリワードの有効化

_admelSdk.enableCoinReward(navigatorKey: navigatorKey);

コインの画像はサーバーから自動的に取得されます。カスタマイズも可能です：

_admelSdk.enableCoinReward(
  navigatorKey: navigatorKey,
  config: AdMelCoinRewardConfig(
    coinSize: 40.0,
    animationDuration: const Duration(seconds: 2),
  ),
);

7.3. コインリワードの無効化

_admelSdk.disableCoinReward();

8. 次のステップ