Plesk Obsidianリリース記念!Plesk最大7カ月無料キャンペーン

2012/10/25

【実証】GMOクラウド Publicではじめるソーシャルアプリ(後編)

GMOクラウドの芦田です。前回、OpenSocialに対応したSNSの「OpenPNE」をインストールしたので、今回はソーシャルアプリを作ってOpenPNE上で公開してみます。また、作ったアプリをmixiアプリとしてmixiにも登録してみましょう。

1 OpenPNE の初期設定

まずWebブラウザからOpenPNEにアクセスしてみましょう。サーバーのドメインがkumolabo-test.example.com だとすると、「http://kumolabo-test.example.com/mysns/」にアクセスすれば、最初に次のようなログイン画面が表 示されます。

初期状態ではユーザー名(メールアドレス)が「sns@example.com」、パスワードが「password」というユーザーが一人だけ登録されています。このアカウントでログインすると「OpenPNE」さんのホーム画面が表示されます。

管理者としてOpenPNEの設定を行うには、「http://kumolabo-test.example.com/mysns /pc_backend.php」からログインしてください。管理者の初期アカウント名は「admin」、パスワードは「password」です。

管理画面は図1.4のようになっています。

まずは「SNS設定」をクリックして、サイト名などの基本的な設定を行いましょう。

また、管理者アカウントに関する設定は「管理画面設定」で行えるので、最初に必ずadminユーザーのパスワードを変更しておきましょう。

2 ソーシャルアプリケーションを作成する

SNSソフトウェアの準備ができたので、今度はその上で動かすソーシャルアプリを作ってみましょう。とりあえずは、シンプルに「こんにちは!」と画面に表示するだけのアプリとして、次のようなコードを用意しました。
リスト2.1 greeting.xml


<xml version="1.0" encoding="UTF-8">
 <Module>
 <ModulePrefs title="GreetingApp">
 </ModulePrefs>
 <Content view="canvas" type="html">
 <![CDATA[
 <h1>こんにちは!</h1>
 <p>キャンバスビューです。</p>
 ]]>
 </Content>
 <Content view="home" type="html">
 <![CDATA[
 <h1>こんにちは!</h1>
 <p>ホームビューです。</p>
 ]]>
 </Content>
 </Module>

細かい説明は省きますが、ModulePrefsタグのtitle属性に指定している「GreetingApp」がアプリ名で、 Contentタグの間にある「」に囲まれたHTMLの部分が、画面に表示されるコンテンツになります。 Contentタグはここでは2つ用意していて、view属性が「canvas」となっている方がSNSのアプリ表示画面(キャンバスビューと呼ぶ)で表 示される内容であり、「home」となっている方がホーム画面のアプリケーションウィンドウ(ホームビューと呼ぶ)で表示される内容です。 このファイルを、Webサーバー(Apache)上のインターネットからアクセスできる場所に配置します。今回はkumolabo-test の「/var/www/html/apps/」ディレクトリに置いたことにします。したがってアクセスするときのURLは 「http://kumolabo-test.example.com/apps/greeting.xml」になります。 アプリの配備はこれだけです。
ソーシャルアプリはSNSソフトウェアと同じWebサーバーに配備する必要はないので、別の仮想サーバーを作ってApacheの設定を行い、そこで公開するような形にしても構いません。ソーシャルアプリと言っても、基本的には通常のWebアプリと同様に ApacheなどのWebサーバー上に配置すればよくて、特別な設定は必要ありません。違うのは、アプリの入り口の部分だけは必ずXMLで記述しなければ ならないという点です。もちろん、アプリ内部ではJavaScriptを使ったり、ライブラリを読み込んで利用したりすることができます。また、外部のサービスと連携させて使うようなケースもよくあります。

3 OpenPNE にアプリケーションを登録する

続いて、設置したGreetingAppをOpenPNEで使えるようにしてみましょう。OpenPNEにソーシャルアプリを登録するには、 管理画面から「プラグイン設定」のページを開き、「opOpenSocialPlugin」の左のチェックボックスにチェックを入れて有効にした上で、右端の「設定」リンクをクリックします。

「アプリ設定」の画面が表示されます。SNSメンバーが自由にアプリを追加できるようにしたい場合には、「SNSメンバーのアプリ追加を許 可」の項目を[許可]にしておきましょう。[禁止]にした場合、管理者が追加したアプリのみ利用できるようになります。また、モバイル向けのアプリを使えるようにする場合は「モバイルアプリを有効にする」にチェックを入れておきます。[変更]ボタンで設定が反映されます。

コンテナに関する警告が出ていますが、本番環境ではこの警告にしたがってってSNSソフトウェアとアプリを実行するコンテナは、別のドメインに分けて 環境を構築する必要があります。今回はテスト環境ということで、OpenSNEに付属するコンテナを使っているため、このような警告が表示されます。詳細はこのページを参照してください。 さて、アプリを追加するには、上部にある「アプリ追加」のリンクをクリックします。図3.3のページが表示されるので、ここで先ほど設置したソーシャルアプリのURLを入力してください。

[追加]ボタンをクリックして、図3.4のようなアプリ詳細画面が表示されたら成功です。

ユーザーがこのアプリを使うためには、ホーム画面の上部のメニューから「アプリ」のページを開き、「アプリギャラリー」のリンクをクリックします。このアプリギャラリーに、図3.5のように「GreetingApp」が追加されているはずです。

ここで、追加したいアプリ(今回はGreetingApp)の「このアプリを追加」のリンクをクリックして、確認画面で[はい]を押せば、アプリが追加されて図3.7のようにキャンバスビューでアプリが表示されます。

追加したアプリはデフォルトでユーザーのホームにも表示されるようになっているので、ホームに戻れば図3.8のようにホームビューでの表示が確認できます。

4 mixi にアプリケーションを登録する

さて、せっかくなのでGreetingAppをmixiアプリとしてmixiに登録してみましょう。mixiにはソーシャルアプリを実行する ための「mixiプラットフォーム」と呼ばれるプラットフォームが用意されています。mixiプラットフォームはOpenSocialもサポートしている ので、GretingAppもそのまま登録して実行することができます。
mixiプラットフォームを利用するには「mixi Developer Center」にてパートナー登録をしておく必要があります。パートナー登録を行ってログインしたら、メニューから[mixiアプリ]-[アプリ作成]を選択します。図4.1の ようにアプリの登録画面が表示されるので、アプリ名やURLを含む必要な情報を入力してください。最後に、下部の利用規約の[同意する]にチェックを入れて[入力内容を確認する]のボタンをクリックします。確認画面が表示されるので、[作成する]ボタンを押せばアプリが登録されます。

登 録されたアプリは「管理アプリ一覧」のメニューに表示されるようになります。ステータスが「開発中」となっているものは、作成者が許可した ユーザー以外は使うことができません。全ユーザー向けに公開するには、アプリの設定画面で「カテゴリ掲載申請」を行う必要があります。

アプリ名のリンクをクリックすれば、図4.3のようにそのアプリの詳細情報の表示や、設定の変更を行うことができます。

「アプリ実行ページ」のリンクをクリックすると、図4.4のようにアプリを実行した様子が確認できます。

登録の方法は違いますが、Facebookなどの他のSNSでも作成したOpenSocialのアプリを公開することができます。ぜひGMOクラウド Publicを使って、ソーシャルアプリにチャレンジしてみてください!

さて、今回は設定編という事で「webアクセスできるところ」までの記事を書いてみました。
管理画面の癖を覚えてしまえば、結構な速さでサーバー環境の構築が可能になると感じました。
皆様もどうぞβ版を触ってみて下さい!!


コラム一覧へ