">mixi Developer Center (mDC)

mixi Apps

mixi Apps (English) » Technical Specification » PC » Developing a First mixi App

Developing a First mixi App

The structure of mixi App is so simple that the developer can start developing it right away. This page introduces the procedure of developing a mixi App by sharing how to develop a simple mixi App as an example.
Here, it is assumed that "Developer Registration" has already been completed.

Gadget XML Files

One file the developer must always create when developing the mixi App is a file written in XML format called a "Gadget XML file." The Gadget XML file is the smallest unit comprising the mixi App. All the code for a mixi App can be written and developed in this file alone. This Gadget XML file conforms to OpenSocial and Gadgets specifications.
Here, as an example, let us take up the "Hello, world!" application used frequently as an introduction to programming languages. Since the mixi App is a social application, let us make a simple application that displays "Hello, <user name> !" to incorporate the social elements.
The code of the example is shown in the list below.

<?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>

A Gadget XML file is composed of the followings:

  • Module elements written as root elements.
  • ModulePrefs elements described information about this mixi App and the APIs used in this mixi App.
  • Content elements where specific mixi App content is written.

In the JavaScript code above, the user name for this mixi App is acquired by newFetchPersonRequest().

There are no predefined file names for Gadget XML files; you can save the file with any file name you like. Since a Gadget XML file is in XML format, .xml is often customarily used as the file’s extension.

Uploading to Web Server

By uploading the file the developer has saved in the previous step to the Web server, it must be accessible from a certain location on the Internet. In the case that SSH is supported in the server, tools supporting SFTP has to be prepared. If the server accepts FTP, it may be a good idea to use some type of FTP client.
In the example above, only a single Gadget XML file is required. Thus, only one file is to be uploaded as well. If utilizing JavaScript files, CSS files, and/or image files in the future, these files also need to be uploaded to the Web server.
mixi Apps are registered by registering the "URL where the Gadget XML file is placed." Please confirm if the uploaded Gadget XML file is accessible from the Web browser.

Registration of mixi App

By registering the Gadget XML file uploaded to the Web server as the mixi App, it enables the developers and other entities involved to the development to check the application to confirm the operations. The mixi App can be registered through the following steps.

  • Access the mixi Apps development page.
  • Enter information for the mixi App.
  • Check the operations of the mixi App.
Accessing the mixi Apps Development Page

First, you access a page for developing and registering a new mixi App. Click the following image.

Let's Develop a mixi App!

After logging in to the page, the application list appears. Click the link of the application development page on the upper part of the left to the application list. This page is not displayed if you have not finished developer registration.
sapp_list

Required Information for Registration

In the mixi App development page, the description of the mixi App as well as the URL of the Gadget XML file has to be registered. These information is very important to promote the mixi App to the users.

add_appli

The following shows each required item

Application name Name of the mixi App to be registered.
Photo A logo image for the mixi App to be registered.
Icon An icon image for the mixi App to be registered.
Mail Address for Inquiry An mail address receiving the inquiry about the application from user.
Gadget URL the URL of the Gadget’s XML file
Introduction Short description used at the featured applications page.
アプリ対応範囲 PCとモバイルのどちらに対応するかを決定します。(モバイルの設定についてはこちらをご覧ください。)
画面横幅 run_appli.pl (canvas) の表示サイズ変更を行います。詳しくはこちらをご覧ください。
Application description Description for the mixi App to be registered. The description should be easy for the users to understand the nature of the application.
Capture Image アプリの説明画面で表示するキャプチャ画像を最大三つまで指定できます。
Confirmation of the Terms of Use The developer must read the details and select whether they agree to them.

After filling out these items, click the "Confirm Entry" button. After confirming the entries, click the "Register" button:
With that, the registration of the mixi App is completed and the Application Top page appears.

Confirming the mixi App Performance

When the mixi App is registered, the Application Top page appears. This page displays explanation on the registered mixi App and other information.
In order to confirm the performance of the registered mixi App, click the "Start Application" button on the green bar and the mixi App is executed.
If the Gadget XML files stored in the web server performs properly, a nickname is displayed following "Hello."

TOP OF THIS PAGE