mixi Developer Center (ミクシィデベロッパーセンター)

mixiアプリ

mixiアプリ » mixiアプリ for PC » mixiアプリを作ってみよう » はじめてのmixiアプリ

はじめてのmixiアプリ

mixiアプリの構造はとてもシンプルであり、すぐに開発を開始することができます。ここでは、簡単なmixiアプリを題材として、mixiアプリの開発手順について紹介します。

「デベロッパー登録」については、既に行っていることとします。

Gadget XMLファイルの作成

mixiアプリを開発する際に、必ず作成しなければならないファイルが1つあります。それは「Gadget XMLファイル」と呼ばれるXML形式で記述されるファイルです。Gadget XMLファイルは、mixiアプリを構成する最小単位であり、このファイルのみで開発するmixiアプリの全てのコードを記述することが可能となっています。このGadget XMLファイルは、OpenSocialおよびGadgetsの仕様に準拠したものです。

ここでの題材として、プログラミング言語の入門としてよく使われる「Hello, world!」アプリケーションを取り上げましょう。mixiアプリはソーシャルアプリケーションですので、その要素を取り入れるために、「Hello, <ユーザ名>!」と表示するシンプルなアプリケーションとしましょう。

題材のコードを、以下のリストに示します。

<?xml version="1.0" encoding="UTF-8"?>

<Module>
  <ModulePrefs title="Hello, world!">
    <Require feature="opensocial-0.8" />
  </ModulePrefs>
  <Content type="html"><![CDATA[

<div>Hello, <span id="target"></span>!</div>

<script type="text/javascript">
function init() {
  var req = opensocial.newDataRequest();
  req.add(req.newFetchPersonRequest(opensocial.IdSpec.PersonId.VIEWER), "viewer");
  req.send(function(data) {
    var viewer = data.get("viewer").getData();
    var name = viewer.getDisplayName();
    document.getElementById("target").innerHTML = name;
  });
}
gadgets.util.registerOnLoadHandler(init);
</script>

  ]]></Content>
</Module>

Gadget XMLファイルの構成は、

ルート要素としてModule要素を記述する。
このmixiアプリを説明するための情報や利用するAPIについて、ModulePrefs要素に記述する。
具体的なmixiアプリのコンテンツを、Content要素に記述する。

となります。また、上記のリストのJavaScriptコードでは、newFetchPersonRequest()関数を利用することにより、このmixiアプリの利用ユーザの名前を取得しています。

Gadget XMLファイルに決められたファイル名はありませんので、任意のファイル名で保存します。Gadget XMLファイルの形式はXMLですので、慣例的にファイルの拡張子もxmlとすることが多いです。

Webサーバへのアップロード

先ほど保存したファイルをWebサーバにアップロードすることにより、インターネットの任意の場所からアクセスすることができるようにします。もし WebサーバがSSHを受け付けるのであれば、SFTPに対応したツールを利用します。また、FTPを受け付けるのであれば、何らかのFTPクライアントを利用するのも良いでしょう。

上記の題材でのファイルはGadget XMLファイル1つだけですので、アップロードするファイルもそれだけです。もし今後JavaScriptファイルやCSSファイル、画像ファイルなどを使ったmixiアプリを開発した場合には、それらもWebサーバにアップロードしておくことが必要となります。

mixiアプリの登録は「Gadget XMLファイルが配置されたURL」を登録することによって行われます。アップロードしたGadget XMLファイルについて、WebブラウザからURLを指定して取得できることを確認しておきましょう。

mixiアプリの登録

WebサーバにアップロードしたGadget XMLファイルをmixiアプリとして登録することで、開発者やその他開発に参加している方々がそのアプリケーションを利用し動作確認を行うことができるようになります。mixiアプリの登録手順は以下のステップとなります。

mixiアプリの作成画面にアクセスする。
mixiアプリの情報を入力する。
mixiアプリの動作を確認する。

mixiアプリの作成画面にアクセスする

まず、mixiアプリを新規に登録するための作成画面にアクセスします。以下の画像をクリックしてください。

ログイン後、mixiアプリの作成画面が表示されます。デベロッパー登録を行っていない場合は表示されませんので、ご注意ください。

mixiアプリの情報を入力する

mixiアプリの作成画面では、Gadget XMLファイルのURLのほかに、登録したいmixiアプリの説明文などを入力することになります。これらの入力情報は、ユーザにmixiアプリの面白さを伝えるための非常に重要な内容となります。

各入力項目と入力すべき内容について、以下に示します。

項目名 – 入力すべき内容
アプリ名 – 登録するmixiアプリの名前です。
カテゴリ – 登録するmixiアプリが所属するべきカテゴリです。アプリケーションの内容に沿ったカテゴリを選択してください。
プライバシー設定 – 登録するmixiアプリの利用を許可する範囲です。
ガジェットURL – Gadget XMLファイルのURLです。
アプリの説明 – 登録するmixiアプリの説明文です。これを読んでユーザはどのようなアプリケーションなのかを知ることができる必要があります
写真 – 登録するmixiアプリのロゴ画像です。
アイコン – 登録するmixiアプリのアイコン画像です。

利用規約の確認 – 内容を読んで同意するかどうかを選択します。

これらの項目を入力後、「入力内容を確認する」ボタンをクリックすると、入力内容の確認画面が表示されます。内容を確認後、「作成する」ボタンをクリックすることで、mixiアプリとして登録が完了し、アプリトップ画面が表示されます。

mixiアプリの動作を確認する。

mixiアプリの登録が完了すると、アプリトップ画面が表示されます。この画面は、登録されたmixiアプリの説明文などが表示され、ユーザがそのmixiアプリの概要を知ることができる画面となっています。

登録されたmixiアプリの動作確認を行うために、緑のバー上にある「アプリを開く」ボタンをクリックします。これにより、先ほど登録したmixiアプリが実行されます。

Gadget XMLファイルの内容が正しければ、「Hello, 」に続けて、ニックネームが表示されます。非常に簡単ですが、立派なソーシャルアプリケーションの完成です。

このページの上部へ

mixi Developer Center (ミクシィ デベロッパーセンター)