ファーストステップガイド

OpenPNE3.8から新しく導入された、スマートフォンAPI。このAPIはスマートフォンだけでなくPCブラウザからでも、利用できるように設計されています。本ガイドでは、本APIを使うための第一歩をチュートリアル形式で説明します。

APIでメンバー情報を取得する

それではまず最初に、SNSのメンバー情報にアクセスするやり方を見ていきましょう。数行のJavaScriptコードを埋め込むだけでアクセスできます。

0. 管理画面にログイン

管理画面のHTML挿入機能でHTML挿入Aを選択します。

• 

1. JavaScriptコードを入力

スマートフォンAPIを利用するJavaScriptコードを入力します。まずは以下のコードすべてをコピーして、HTML挿入のフォームに入力してください。

管理画面に挿入するコード

<script>
$(document).ready(function(){
  var params = {};
  params.apiKey = openpne.apiKey;
  params.target = "member";
  params.target_id = 1;
  $.get('/api.php/member/search.json',params,function(json){
    console.log(json);
    alert("ID番のニックネームは[" + json.data[0]["name"] + "]です。");
  });
});
</script>

2. 動作確認

SNSにログインしホーム画面を開くと、次のようなダイアログが表示されます。

3. APIの解説

apiKey

OpenPNEログイン後の全ページのHTMLにはapiKeyがあらかじめセットされています。このキーをスマートフォンAPIのリクエストに含めることで、認証を行うことができます。

APIエントリポイント

メンバー検索では、エントリポイントとして、/api.php/member/search.json を利用します。

リクエストデータ メンバー検索ではリクエストデータとして、target target_idのふたつのパラメータを使用します。これらをdataにセットします。 $.get()メソッド スマートフォンAPIを呼び出す際には、jQueryの$.get()メソッドを利用します。 今回の例ではサーバからのレスポンスは、jsonデータに格納されます。

コミュニティリストをAJAX化する

今度はHTMLタグを使って、実際にデザインを埋めこんでみます。OpenPNE3.8からは、デザインにjquery-templという、JavaScriptのテンプレートエンジンを使っています。スマートフォンAPI+jQuery+jquery-tmplで既存の9面テーブルを置き換えます。

APIコール

今回はapi.php/member/community.jsonを利用します。このAPIを使えば自分が所属するコミュニティのリストを取得することができます。member_id=5というように、引数を指定すればそのメンバーのコミュニティリストが取得できます。指定しない場合はAPIを呼び出した自分（閲覧者）のリストを取得します。

http://sns.example.com/api.php/member/community.json?apiKey=APIKEYAPIKEYAPIKEYAPIKEYAPIKEYAPIKEYAPIKEYAPIKEY

呼び出しが成功した場合は、次のようなJSONデータが返ります。