まずは、mixiアプリを使ってみよう、作ってみよう

■ 【2】キャンバスビュー

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

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

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

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

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

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

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

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

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

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

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

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

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

Google App Engineで手軽に試すJavaクラウド via kwout

■ 簡単な「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　「アプリトップ」画面

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

図6　「Hello World！」と表示

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

1-2-3

INDEX
基礎から分かる、mixiアプリ作成入門（1） まずは、mixiアプリを使ってみよう、作ってみよう
	Page1 mixiのアプリ？ それって何？ mixi（OpenSocial）アプリ作成入門の連載です サンプルに見るmixiアプリの3つの表示形式
	Page2 mixiアプリを使うには？ 登録するには？
	Page3 登録したmixiアプリを軽く改造してみよう jQueryで作った「ひとこと」アプリの中身 次回は、OpenSocial APIをいろいろ

ご意見、ご感想は Smart＆Social 会議室へどうぞ

Smart＆Social フォーラム トップページへ