おすすめ記事

おすすめ記事一覧

Adalo Resource・Google Admobとカレンダー(スクリーンとコンポーネントセクション)について

Adalo - Build Your Own No Code App

みなさん、こんにちは。いかがお過ごしでしょうか。首都圏の1都3県では緊急事態宣言が解除される方針がたち、またこの年度末に職場や学校などの環境の変化がある方もいらっしゃるかと思います。そんなお忙しい生活の中、記事に目を通していただき、誠にありがとうございます。今日の記事は引き続きノーコードツールAdaloのAdalo Resource内のスクリーンとコンポーネントセクションより、「Google Admobとカレンダー」の日本語解説をお届けします。それでは早速Let’s Go!

Google Admob

Googleでセットアップする

1) Google AdMobアカウントの作成
以下のリンクをクリックして、AdMobアカウントを設定またはログインします。

https://admob.google.com/home/

リクエストが完全に通過して承認されるまでには通常数日かかりますので、アカウントがすぐに使えるようになったことを示すメールが届いていることをご確認ください。アカウントが完全に承認されていない場合、広告は機能しません

2) iOSのAdMobアプリの設定
サイドパネルの “App “セクションに移動し、”Add App “をクリックします。アプリが公開されているかどうかを尋ねられたら、「いいえ」をクリックします。アプリ名を入力し、ユーザーメトリクスを有効にするかどうかを決定します。また、アプリがiOSかAndroidかを選択するプロンプトが表示されます。 AdMobのインターフェースはプラットフォームによって異なるため、iOS用とAndroid用のバージョンを1つずつ作成する 必要があります。ここでは、iOSを選択します。App IDをコピーして、Adaloの左パネルにあるAdMobコンポーネントの “AdMob iOS App ID “に貼り付けます。

3) Android AdMobアプリの設定
ステップ2を繰り返して別のアプリを作成しますが、今回はiOSではなくAndroidを選択します。App IDをコピーして、”AdMob Android App ID “の下に貼り付けます。iOSとAndroidのApp IDが異なることを確認してください。

4) 広告ユニットの追加
iOSアプリの「Ad Units」セクションに移動します。「Add Ad Unit」をクリックし、タイプを聞かれたら「Banner」を選択します。広告IDをコピーして、”AdMob iOS Ad ID “の下に貼り付けます。Androidアプリでもこのプロセスを繰り返し、”AdMob Android Ad ID “の下に広告IDを貼り付けます。
アプリに掲載したいすべての広告について、この手順を繰り返します。それぞれのAdalo AdMobコンポーネントは、Ad IDのペアは異なりますが、App IDのペアは同じである必要があります。AdMobが新しい広告ユニットのリクエストを完全に処理するには、通常1時間ほどかかりますのでご注意ください。

Adaloでセットアップする

1) Adalo MarketplaceからAdmobコンポーネントをインストールする

2) プラスボタンをクリックして、Admobコンポーネントを検索し、アプリ内の画面にドラッグする

3) バナーの外観をカスタマイズする
Adaloのサイドパネルで、広告のサイズを「標準」「大」「中」のいずれかで指定します。お客様のAdMobアカウントを操作する必要はなく、お好みのオプションを選択するだけです。

4) AdmobアカウントからApp IDとAd IDを入力する

5) アプリのデザイン中に、「Show placeholder on web preview」オプションを有効にする
これにより、アプリのプレビューを実行して、広告が掲載されるプレースホルダー画像を確認することができます。 モバイルアプリのPWA(ウェブ)バージョンを共有する予定の場合は、アプリを他の人と共有する前にこのオプションをオフにしておきましょう。  Admob広告は、アプリストアで公開されたiOSおよびAndroidアプリでのみ機能 します。

ネイティブアプリのテスト

ネイティブビルド(iOS用のTestflight、またはAndroid端末に.apkファイルを直接インストールしたもの)でテストしている間は、Admobはリアル広告を表示しません。 リアル広告が表示されるのは、アプリをアプリストアに公開し、次のセクションの手順を実行した後です。 ネイティブビルドでコンポーネントをテストしたい場合は、Googleが提供するテスト広告IDを使用する必要があります。

iOS Ad ID: ca-app-pub-3940256099942544/2934735716

Android Ad ID: ca-app-pub-3940256099942544/6300978111

テストが終わったら、テスト用の広告IDをAdmobアカウントの本物の広告IDと入れ替えて、新しいiOSとAndroidのビルドを作成してアプリストアに申請してください。

アプリを公開する

Adaloアプリが公開されたら、AdMobアカウントに戻り、各アプリの “App Settings “に移動します。iOS版はApp Storeにあるあなたのアプリに、Android版はGoogle Playにあるあなたのアプリにリンクします。

チェックリスト/ベスト・プラクティス

Adaloコンポーネントにアプリと広告のIDが正しく入力されていることを確認してください。Adaloはお客様のアカウントにアクセスできないため、入力された情報を検証する方法はありません。また、広告はアプリが公開されて初めて完全に有効になります。 正しい情報が正しいフィールドに入力されているかどうかを再確認してください 

AdaloコンポーネントのiOSとAndroidのフィールドを混同しないでください。AdMobはプラットフォームによって動作が異なるため、情報を混ぜるとうまくいきません。

各AdMobアプリのiOS版とAndroid版が同一であることを確認してください。各ペアは同じ数のAd Unitを持つ必要があります。

同じAd IDを複数回使用しないでください – 各IDは一度しか使用できません。新しい広告ごとに、新しいAd Unitを作成します。

すべてのAdMobコンポーネントが同じApp IDを持っていることを確認してください – Adaloアプリごとに2つのAdMobアプリを作成する必要があります。

Adaloアプリがローンチされたら、AdMobアプリの公開を忘れないでください。アプリを公開しないと、アプリにテスト広告が表示されてしまいます。

カレンダー

イベントの一覧をカレンダーに表示し、オプションでアジェンダ表示も可能です。イベントをクリックすると、イベントの詳細画面が表示されます。

まず、Adalo Marketplaceからカレンダーコンポーネントがインストールされていることを確認し、左パネルのプラスボタンをクリックして、カレンダーコンポーネントを探し、アプリ内の画面にドラッグします。

1, “Trips “など、カレンダーに表示したいイベントがあるコレクションを選択します。

2, データにフィルタリングや最大項目などの条件を追加します。注:ソート順を設定しても効果はありません。

3, カレンダーの言語を設定します。 この設定は、カレンダー上の月や日の表示に影響します。

4, 週の最初の日として、日曜日と月曜日のどちらを表示するかを選択します。

5, 開始日と終了日を設定するには、各フィールドのマジックナンバーボタンをクリックし、選択したコレクションのプロパティで各イベントの開始日と終了日を示して選択します。

6, 複数の日にまたがるイベントを、各日の下にドットで表示するか、複数の日にまたがるバーで表示するかを選択します。

7, 複数のイベントがある日をクリックすると、カレンダーには常にその日のアジェンダビューが表示されます。 ただし、イベントが1つしかない日は、クリックしてもアジェンダビューを表示するように指定したり、イベントの詳細画面に直接リンクするなどのアクションを実行することができます。

8, 「色」セクションでは、カレンダーのさまざまな部分の色をカスタマイズできます。

9, 「ナビゲーション」では、ユーザーがカレンダーの月を変更できるかどうか、選択できる日付に早いものと遅いものがあるかどうか、選択するデフォルトの日付を設定することができます。 デフォルトの日付を設定しない場合は、自動的に現在の日付が選択されます)。

10, アジェンダビューでは以下のことができます。

・”Show Preview “トグルを使用すると、Adaloエディタにアジェンダビューの例が表示され、デザインの変更をプレビューすることができます。

・時間表示を12時間表示にするか、24時間表示にするかを指定できます。

・イベントの色の設定

・イベントのタイトルとサブタイトルの設定

・ユーザーがイベントをクリックしたときに起こるアクションを追加する(イベントの詳細画面へのリンクなど)

まとめ

いかがだったでしょうか。特にGoogle Admobの操作は複雑な部分がありますので、一つ一つのプロセスを丁寧に仕上げることが求められますね。それではまた別の記事でお会いしましょう。See You Soon!

 

岡澤克信

岡澤克信

自動車評論家
主に自動車業界のDXというテーマで自動車業界で使用され
ているウェブサービスを紹介







関連記事

  1. Adalo Resource・アプリ内課金のためのデジタル購入(スクリーンとコンポーネントセクション…

  2. adalo

    Adalo

  3. 記事作成

    Bubble・Segment(セグメント)とGoogle Optimize(オプティマイズ)

  4. 記事作成

    Bubbleのビジュアルエディタの一般原則について解説!!

  5. 記事作成

    Bubble・データベースクエリに関する説明、タイプとタイプを結びつける

  6. 記事作成

    BubbleのSlugと再利用可能な要素について解明してみた!!

  7. SaaSロゴ

    Tiger(Jungleworks)

  8. 記事画像

    Web製作が誰でもできるノーコードツール8選をご紹介

  9. Adalo Resource・リスト(スクリーンとコンポーネントセクション)について

人気記事

  1. topimage
  2. 記事画像
  3. 特集記事
  4. Collaboration

おすすめ記事一覧

  1. 飲食店 会計
  2. 記事画像
  3. 記事画像
  4. maidoh concept picture
  5. 記事画像
PAGE TOP