Git Product home page Git Product logo

swift3pushapp's Introduction

【iOS10 Swift】
プッシュ通知を組み込もう!

2016/09/27作成(2017/09/13更新)

画像1

概要

ニフティクラウドmobile backendとは

スマートフォンアプリのバックエンド機能(プッシュ通知・データストア・会員管理・ファイルストア・SNS連携・位置情報検索・スクリプト)が開発不要、しかも基本無料(注1)で使えるクラウドサービス!

画像2

注1:詳しくはこちらをご覧ください

準備

準備するもの

  • ニフティクラウド mobile backend 会員登録
  • Mac と以下の環境
    • Xcode ver.8 以上推奨
  • 動作確認用端末
    • iPhone ver.10 以上推奨
  • Lightning ケーブル
#### 参考:検証済み動作環境 * macOS Sierra 10.12.5 * Xcode ver. 8.3.3 * iPhone 6+ ver. 10.0.1 * このサンプルアプリは、実機ビルドが必要です

プッシュ通知の仕組み

  • ニフティクラウドmobile backendのプッシュ通知は、iOSが提供している通知サービスを利用しています
  • iOSの通知サービス APNs(Apple Push Notification Service)

画像1

  • 上図のように、アプリ(Xcode)・サーバー(ニフティクラウドmobile backend)・通知サービス(APNs)の間でやり取りを行うため、認証が必要になります
  • 認証に必要な鍵や証明書の作成は作業手順の「0.プッシュ通知機能使うための準備」で行います

作業の手順

0.プッシュ通知機能使うための準備

【iOS】プッシュ通知の受信に必要な証明書の作り方(開発用)

  • 上記のドキュメントをご覧の上、必要な証明書類の作成をお願いします
  • 証明書の作成にはApple Developer Programの登録(有料)が必要です

画像i002

1. ニフティクラウド mobile backend の準備

画像3-1

  • 新しいアプリを作成します
  • アプリ名を入力し、「新規作成」をクリックします
    • 例)PushDemo

画像3

  • mobile backend を既に使用したことがある場合は、画面上方のメニューバーにある「+新しいアプリ」をクリックすると同じ画面が表示されます
  • アプリ作成されると下図のような画面になります
  • この2種類のAPIキー(アプリケーションキーとクライアントキー)はこの後 iOSアプリ との連携のために使用します

画像4

  • 続けてプッシュ通知の設定を行います
  • 「APNs用証明書(.p12)」を設定します

画像5

2. サンプルプロジェクトのダウンロード

3. Xcodeでアプリを起動

  • ダウンロードしたフォルダを開き、「Swift3PushApp.xcworkspace」をダブルクリックしてXcode開きます(白い方です)
    • 「Swift3PushApp.xcodeproj」(青い方)ではないので注意!

画像9

画像8

画像6

4. APIキーの設定

  • AppDelegate.swiftを編集します
  • 先程ニフティクラウド mobile backend のダッシュボード上で確認したAPIキーを貼り付けます

画像7

  • それぞれ YOUR_NCMB_APPLICATION_KEYYOUR_NCMB_CLIENT_KEY の部分を書き換えます
  • このとき、ダブルクォーテーション(")を消さないように注意してください!
  • 書き換え終わったらcommand + sキーで保存をします

5. 実機ビルド

  • 始めて実機ビルドをする場合は、Xcodeにアカウント(AppleID)の登録をします
  • メニューバーの「Xcode」>「Preferences...」を選択します
  • Accounts画面が開いたら、左下の「+」をクリックします。
  • Apple IDとPasswordを入力して、「Add」をクリックします

画像i29

  • 追加されると、下図のようになります
    • 追加した情報があっていればOKです

画像i30

  • 確認できたら閉じます
  • 次に「TARGETS」 >「General」を開きます

画像14

  • 「Idenrity」>「Bundle Identifier」を入力します
  • 「Bundle Identifier」には AppID 作成時に指定した「Bundle ID」を入力してください
  • 続けて「Signing(Debug)」>「Provisioning Profile」を設定します
  • 使用するプロビジョニングプロファイルをプルダウンから選択します
    • プロビジョニングプロファイルはダウンロードしたものを一度 ダブルクリック して認識させておく必要があります(プルダウンに表示されない場合はダブルクリックを実施後設定してください)
  • 選択すると以下のようになります

画像15

  • 最後に「TARGETS」>「Capabilities」を開き、「Push Notifications」を ON に設定します
  • 設定すると以下のようになります

画像16

  • これで準備は完了です

6.動作確認

  • lightningケーブルで登録した動作確認用iPhoneをMacにつなぎます
  • Xcode画面で左上で、接続したiPhoneを選び、実行ボタン(さんかくの再生マーク)をクリックすると端末にアプリがインストールされます
  • インストールしたアプリを起動します
    • 注意:プッシュ通知の許可を求めるアラートが出たら、必ず許可してください!
  • 起動されたらこの時点でデバイストークンが取得されます
  • ニフティクラウド mobile backend のダッシュボードで「データストア」>「installation」クラスを確認してみましょう!

画像12

  • ここで端末側で起動したアプリは一度閉じておきます

7. プッシュ通知を送りましょう!

  • いよいよです!実際にプッシュ通知を送ってみましょう!
  • ニフティクラウド mobile backend のダッシュボードで「プッシュ通知」>「+新しいプッシュ通知」をクリックします
  • プッシュ通知のフォームが開かれます
  • 必要な項目を入力してプッシュ通知を作成します

画像13

  • 端末を確認しましょう!
  • 少し待つとプッシュ通知が届きます!!!

画像17

解説

サンプルプロジェクトに実装済みの内容のご紹介

SDKのインポートと初期設定

ロジック

  • AppDelegate.swiftdidFinishLaunchingWithOptionsメソッド内に、「APNsに対してデバイストークンを要求するコード」を記述しています
    • デバイストークンの要求はiOSのバージョンによってコードが異なるため、場合分けして記述しています

画像18

  • デバイストークン取得後、didRegisterForRemoteNotificationsWithDeviceTokenメソッドが呼ばれ、取得したデバイストークンをニフティクラウド mobile backend 上に保存しています

画像19

swift3pushapp's People

Contributors

oonoyosp avatar natsumo avatar k0sek1r avatar hounenhounen avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.