picnic SDK チュートリアル

コンテンツを設定しておくことで、地図やAR、その他画面で適切なコンテンツ表示が自動的に行われます。
コンテンツは、jsonファイルで作成したものを読み込ませることで設定できます。

本ページの内容は、サンプルプログラム[TutorialSample.zip]に含まれています。

コンテンツは所定のjsonフォーマットで記述します。
作成したjsonファイルは、専用のクラスを使用してアプリで利用可能な形に読み込んで使います。
[jsonとは？]

まずは、サンプルプログラムTutorialSample内で既に用意されている contents.json を見てみましょう。 【jsonファイルのフォーマット】
所定のフォーマットに則ることで、コンテンツ情報を自分で追加/変更していくことができます。

・(*)となっている箇所は必須の項目。
・idは全てのコンテンツで重複が無いように指定する。

{
  "contents": [
    {
      "id": コンテンツID (*),
      "name": "コンテンツ名称" (*),
      "description": "コンテンツ説明文" (*),
      "images": { (*)
        "thumb": "地図やARに表示される画像のURL" (*),
        "picture": "コンテンツ詳細画面に表示される画像のURL" (*),
        "frame": "記念撮影画面に表示される画像のURL" (*)
      },
      "attrs": { (*)
        "address": "住所",
        "bizhours": "営業時間",
        "tel": "電話番号",
        "site": "サイトURL",
        "email": "メールアドレス",
        "other": "自由コメント欄"
      },
      "location": { (*)
        "lat": コンテンツの緯度, (*)
        "lon": コンテンツの経度 (*)
      }
    }
  ]
}

とはいえ、自分でjsonファイルを全て手書きするのは大変です。
以下のコンテンツ作成シートを使うことで、コンテンツの管理が容易になり、jsonファイルへの変換も可能になります。
[★コンテンツ作成シート]

作成したjsonファイルは、アプリのrawフォルダに格納します。

[アプリのプロジェクトルート]/res/raw/contents.json

サンプルプログラムTutorialSampleでも、この場所にcontents.jsonが格納されています。

コンテンツ読み込みの専用クラスであるContentLoaderにjsonファイルを読み込ませて、コンテンツ情報をアプリで使える形に取り出します。

// コンテンツ情報をjsonファイルから読み込む
ArrayList<Content> contents = ContentLoader.readJsonFromResource(this, R.raw.contents);
// 読み込んだコンテンツ情報をpicnicSDKに設定しておく
PicnicContentsManager.setContents(contents);

サンプルプログラムTutorialSampleでは、MainActivityのonCreateメソッドに記載されています。

コンテンツの詳細画面をHTMLで独自にデザインしたい場合、コンテンツ情報に「detailurl」を指定してください。
具体的には、次以降の手順を行ってください。

{
  "contents": [
    {
      "id": コンテンツID (*),
      "name": "コンテンツ名称" (*),
      "description": "コンテンツ説明文" (*),
      "detailurl": "コンテンツ詳細画面で表示するHTMLのファイル名", ←コレを指定する！
      "images": { (*)
        "thumb": "地図やARに表示される画像のファイル名" (*),
        "picture": "コンテンツ詳細画面に表示される画像のファイル名" (*),
        "frame": "記念撮影画面に表示される画像のファイル名" (*)
      },
      省略...
    }
  ]
}

assetsフォルダに、コンテンツ詳細画面で表示させたいHTMLをドラッグ＆ドロップします。 このようになります。
コンテンツ詳細画面でHTMLを表示させたいコンテンツに「detialurl」の項目を追加します。
※サンプルでは、２つ目のコンテンツにHTMLを設定しています。 実行して確認してみましょう。

HTMLを指定していないコンテンツは、以下のように表示されます。

HTMLを指定したコンテンツは、独自のHTMLに置き換わりました。