連載
» 2009年06月17日 00時00分 公開

基礎から分かる、mixiアプリ作成入門(1):まずは、mixiアプリを使ってみよう、作ってみよう (2/3)

[志田裕樹,アークウェブ株式会社]

【2】キャンバスビュー

 ホームビューの右下の「ひとこと」のボックスのタイトル部分をクリックすると、画面一杯に展開したページが表示されます。

図2 サンプルのキャンバスビュー 図2 サンプルのキャンバスビュー

 このページでは、友人の発言も表示しますし、新しく発言することもできます。このようにmixiアプリが画面一杯を利用できるモードを「キャンバスビュー」と呼びます。

【3】プロフィールビュー

 ホームから「プロフィールを見る」ボタンで、他人が自分のプロフィールを見た場合の見え方を確認できますが、ここでも「ひとこと」のmixiアプリを表示できます(ホームビュー上で「ひとこと」の公開設定を適切に設定する必要があります)。

 このページでは、「ホーム」と同様に自分の発言のみが表示されますが、新しく発言することはできません。

図3 サンプルのプロフィールビュー 図3 サンプルのプロフィールビュー

 この「プロフィール」でのmixiアプリの表示のされ方を、「プロフィールビュー」と呼びます。

mixiアプリを使うには? 登録するには?

 繰り返しますが2009年6月現在、mixiアプリを使うにはオープンβ環境が必要です。8月公開予定の正式版では、オープンβ環境を使わなくてもmixiアプリを使えるようになる予定です。

オープンβ環境へのアクセス方法

 オープンβ環境にアクセスするためには、次の手順が必要になります。

  1. mixiにログイン後、デベロッパー登録画面にアクセスし、画面の指示に従って登録
  2. mixiのコミュニティ「オープンβコミュニティ」に参加
  3. オープンβ環境にアクセス

mixiアプリの検索とインストール

 オープンβ環境にアクセスしたら、まずは、ほかのユーザーが作ったmixiアプリをインストールしてみましょう。2009年4月17日の時点でmixiアプリの数は、200以上(参考:「ネギ振りミク」から「やる夫時報」まで mixiアプリ、200以上公開中)、6月17日現在では500以上になっています。

図4 オープンβ環境の「アプリ」ボタン 図4 オープンβ環境の「アプリ」ボタン

 ヘッダの「アプリ」というボタンをクリックします(図4)。すると、「トップ」「ランキング」「おすすめ」「認定」「mixi公式」「インディーズ」というタブがありますが、現状では「インディーズ」からのみ探せる状態のようです。「インディーズ」タブを押すと、一般ユーザーが登録したmixiアプリを登録数順やカテゴリなどから探せます。


 今回のサンプルは、カテゴリ「チャット」にあると思います。一覧ページから目的のアプリをクリックすると、「ひとこと」のアプリトップ画面が表示されます。ここで「アプリを追加する」ボタンを押すと、「アプリ内容」の画面になります。「アプリのプライバシー設定」をして「mixiアプリ利用に関する注意事項の確認」に「同意する」と、そのアプリを「マイアプリ」に登録できます。

mixiアプリの登録にはWebサーバが必要!

 アプリを登録するには、まずマイページのヘッダの「アプリ」をクリックします。すると、表示される画面上に「アプリを作成する」というリンクがあります。これを押すと、アプリの登録画面が表示されます。

 アプリ名、説明など各項目をすべて埋めれば、アプリが登録されます。必須項目として、「ガジェットURL」という項目があります。

 mixiアプリを登録するためには、「ガジェットXML」というファイルを用意して、どこかのWebサイト上かレンタルWebサーバ、または自作のWebサーバにアップロードし、そのURLを「ガジェットURL」の欄に入力する必要があります。

 サーバを用意するのが難しい方は「Google App Engine」という無料のWebサーバがあるので、試してみてはいかがでしょうか。Google App Engineについては、以下の記事が参考になると思います。


簡単な「Hello World!」アプリを作ろう

 「Hello World!」と表示するだけのガジェットXMLを用意して登録してみましょう。ガジェットXMLは、GoogleガジェットのガジェットXMLの仕様に基づいて作成します(参考:ガジェット XML リファレンス)

 「Hello World」と表示するガジェットXMLは、次のようになります。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Hello World!" />
  <Content type="html">
    <![CDATA[
        Hello, world!
    ]]>
  </Content>
</Module>
  • <Module>
    ガジェットXMLのルート要素
  • <ModulePrefs>
    アプリケーションのタイトルや説明、作者、そのほかのオプション機能などを記述
  • <Content type="html">
    この要素の中にガジェットの中身をHTMLで記述。HTMLタグがXMLとして処理しないようにCDATAセクションで囲む

作ったアプリを登録するには?

 このガジェットXMLをWebサーバ上にアップロードし、そのURLを先ほどの「アプリを作成する」画面の、「ガジェットURL」にセットしてmixiアプリを登録してみましょう。登録すると、そのmixiアプリの「アプリトップ」画面が表示されます。

図5 「アプリトップ」画面 図5 「アプリトップ」画面

 「アプリを開く」タブを開くと、先ほど作ったmixiアプリが表示されます。

図6 「Hello World!」と表示 図6 「Hello World!」と表示

 次ページでは、作成した簡単なアプリを改造して「ひとこと」アプリになるようにしてきます。

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。