alt » mixiアプリ http://blog.alt-scape.com alt-scape weblog Sat, 03 Dec 2011 18:00:33 +0000 http://wordpress.org/?v=2.8.4 ja hourly 1 ソーシャルアプリの置き場としてGoogle App Engine for JavaのEclipse Pluginを利用してみる http://blog.alt-scape.com/archives/211 http://blog.alt-scape.com/archives/211#comments Thu, 21 Jan 2010 17:28:32 +0000 alt http://blog.alt-scape.com/?p=211 今後、mixiアプリなどのソーシャルアプリを作っていく際に
置き場所としての候補が今借りてるhetemlとさくらの共用サーバーしかない。。
ストレージよりも大量アクセスに耐えうる負荷分散や帯域を気にしたいところ。
調べていくとGoogle App Engineがよいという情報を入手したので
今のうちに使い込んでおこうと思います。

理由は単純。
・Eclipseプラグインとして簡単に作成、テスト、アップロードができる
・Googleのインフラで安心
・目的がソーシャルアプリの置き場として利用
・負荷分散も自動で行われる
・無料アカウントで始められるのでAmazon EC2に比べてコストが抑えられる
・共同開発やバージョン管理ができる
・管理画面が超充実している

アプリケーションは、JavaかPythonのランタイム環境で実行できるみたいなのですがどちらも馴染みがない・・・
（自由度が少ないとあったけど、cron使えるし、Quercusを入れればPHPも動かせる）
とりあえず、Javaで開発環境を作ってみます。
以下、設定メモ。


１．Javaを入れてない場合は
ここを参考にして「JDK 6 Update 18」をインストールする。
http://www.db.is.kyushu-u.ac.jp/rinkou/javaintro/javac.html


２．Eclipseを入れてない場合は
ここを参考にして「Eclipse3.4.2」をインストールする。
http://www.db.is.kyushu-u.ac.jp/rinkou/javaintro/eclipse.html

※もしEclipseの起動時にエラーが出た場合は
eclipse.iniの先頭2行
　-showsplash
　org.eclipse.platform
を消すとうまくいく。


３．Eclipseを立ち上げると、ワークスペースの設定画面になるのでディレクトリを「C:\workspace」に設定する。
「Window」→「Preferences(設定)」→「Java」→「Installed JREs」を確認し、
「C:\Program Files\Java\jre6」だった場合は
さきほどインストールした「C:\Program Files\Java\jdk1.6.0_14」に設定しなおす。


４．日本語化は
Pleiadesから安定版の1.3.1をダウンロードし、解凍したものをEclipseディレクトリにそれぞれ上書きする。
eclipse.iniの最後の行に
-javaagent:plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar
を追加する。
Eclipseディレクトリの「eclipse.exe -clean.cmd」を起動する。
日本語化終了。


５．ここを参考にしてEclipseにGoogle App Engine for Javaを入れる。
「ヘルプ」→「ソフトウェア更新」→「使用可能なソフトウェア」→「サイトの追加」→「http://dl.google.com/eclipse/plugin/3.4」で次の3つをインストール。
　- Google App Engine Plugin
　- Google App Engine Sdk
　- Google Web Tool Kit


６．Eclipseを再起動して「ファイル」→「Web Application Project」からプロジェクト作成。
※今回はGoogle Web Toolkitは使わない。
Google App Engineプロジェクト作成

７．構成ファイルは以下のようになっている。
Google App Engine構成ファイル
Test/src/test/TestServlet.java　・・・　サーブレット
Test/war/WEB-INF/web.xml　・・・　サーブレットのマッピングを行う


８．WEBアプリケーションのローカルテスト。
プロジェクト・エクスプローラーもしくはナビゲーターから
「Test」を右クリック→「実行」→「Webアプリケーション」を実行するとコンソールに
The server is running at http://localhost:8080/
が出力される。
※xamppなどのサーバーソフトを入れている場合はApacheを停止にしておく。
ブラウザでhttp://localhost:8080/testにアクセスすると「Hello, world」が出力される。
Google App Engineテスト起動

９．アプリケーションをGoogle App Engineのインフラで動かすため、まずはサイトにアプリを登録する。
以下にアクセス。
http://appengine.google.com/

「Create an Application」ボタンをクリックして
Application IdentifierにアプリケーションIDを登録。
「Check Availability」でユニークIDが出るまでがんばる。
Application Titleは適当に入力してSaveボタンをクリック。
以上で登録は完了。
Create an Application

１０．GAEクラウド環境へアプリをアップロードする。
ナビゲーターから「Test」を右クリックし、「Google」→「Deploy to App Engine」を選択。
Email、PasswordにはGoogleアカウント情報を入れる。
このままデプロイすると
appengine-web.xmlにアプリケーションIDとバージョンが登録されていないため警告が表示されるが、
左下の「App engine project settings」をクリックして新規にIDを取得する。
Deploy Project to Google App Engine

Application IDはさきほどサイトに登録したアプリケーションIDを、Versionには適当な値を入れてOKボタン。
（サーバに保持できるVersion数は10個が上限）
「Deploy」ボタンをクリックして再度デプロイする。
※Test/war/WEB-INF/appengine-web.xmlを開くと先ほどのアプリケーションIDが情報が登録されているはず。
Properties for Test

１１．アップロードが完了したら以下のURLへアクセスしてみる。
http://アプリケーションID.appspot.com/

]]> http://blog.alt-scape.com/archives/211/feed 0 mixiアプリの便利な開発環境「OSDE」 http://blog.alt-scape.com/archives/370 http://blog.alt-scape.com/archives/370#comments Tue, 19 Jan 2010 17:07:26 +0000 alt http://blog.alt-scape.com/?p=370 mixiアプリに限らず、流行のソーシャルアプリを開発しようと思うと、
毎回サイト上で動作確認しながらデバッグするのや
OpenSocialに基づいたXML書式やJSを書くのに幾分良い環境がないかなあと探していたら
Eclipseのプラグインとして「OSDE」というのがありました。

OSDEのオフィシャルサイト
http://code.google.com/p/opensocial-development-environment/

SNS上でのユーザ間の関係や、
テストデータを簡単に作成・設定できます。
OpenSocialのview(preview, home, profile, canvas)を
開発環境で開くことができるのも超便利。

以下、設定方法。


１．Eclipse を起動してメニューから「ヘルプ」→「ソフトウェアの更新」を選択。
２．「使用可能なソフトウェア」タブを選択し、「サイトの追加」ボタンをクリック。
３．「http://opensocial-development-environment.googlecode.com/svn/update-site/site.xml」を入力してOK。
４．追加されたURLにチェックをしてインストールボタンをクリック。
５．インストールが完了したら、Eclipseを再起動。
６．OSDEプロジェクトを新規作成します。
※このとき、workspaceとなるフォルダへのパスに半角スペースが入ると正常に動かないようなので、Cドライブ直下にosdeディレクトリを作りました。
osde1

７．アプリケーション情報を入力。
osde2

８．とりあえずキャンバスタブの型：HTMLのみチェック入れて完了。
osde3

９．「関連付けられたパースペクティブを開きますか？」に「はい」を選択。

１０．Eclipseメニューから「OSDE」→「Launch Apache Shindig」を選択してApacheを起動します。
※xamppなどのサーバーソフトが起動している場合は停止にさせておく。

１１．Eclipseメニューから「OSDE」→「Create sample data in Shindig」を選択するとサンプルのデータが追加されます。
osde4

１２．ナビゲーター内のgadgets.xmlをクリックし、
Eclipseメニューから「OSDE」→「Run this application locally」を選択。
ダイアログが開くので、そのままOK。ブラウザで開く場合は「Use an external Web browser」にチェックを。
osde5

↓こんなかんじで出力される。
osde6

]]> http://blog.alt-scape.com/archives/370/feed 0 MyMixlockのInternetExplorerバグ修正 http://blog.alt-scape.com/archives/318 http://blog.alt-scape.com/archives/318#comments Thu, 14 May 2009 04:07:39 +0000 alt http://blog.alt-scape.com/?p=318 先日公開したMyMixlock（マイミクロック）ですが
InternetExplorerで画像読み込み時にエラーが発生していました。
うっかりFirefoxでしかテストしてなかったので見逃してました。
ごめんなさい。今は直ってるはずです。


症状は
AS3のcasalibを使ってマイミクの複数画像を一括読み込みしていたのですが
途中、not foundの画像があったせいでIOErrorが発生していました。
Firefoxだとスルーしてくれてたので気づきませんでした。
casalibのGroupLoadで一括読みしたときの
IOErrorのリスナー登録したかったのですがドキュメントになかったので
casaは諦めてflashパッケージのLoaderクラスでひとつずつ読み込むようにしました。

これと同じケースではないと思いますが、こちら でも
複数画像読み込みのトラブル対策として記事があがっていたので参考にさせていただきました。

もし他のブラウザやOSで不具合がありましたらコメントでお知らせください。

]]> http://blog.alt-scape.com/archives/318/feed 0 mixiアプリ「MyMixlock」（マイミクロック）をリリース http://blog.alt-scape.com/archives/316 http://blog.alt-scape.com/archives/316#comments Sun, 10 May 2009 18:38:41 +0000 alt http://blog.alt-scape.com/?p=316 MyMixlock MyMixlock

勉強がてらmixiアプリをちまちまテストばっかしていたので
ここらへんでかたちになるものをひとつリリースします。

ちょっと前にCUBACLOCKやEGACLOCKなどのUNIQLOCKのパロディものが流行ったので
それのmixiアプリ版（時計）を作ってみました。
他との違いは動画部分をマイミクのプロフィール画像にしたところです。
さらに画像にニックネームを表示させてクリックでその人のプロフィールページへ遷移します。


ソーシャルデータをFlashvarsで渡したり
毎回キャッシュクリアしたり
セキュリティサンドボックス侵害でビットマップコピーできなかったり
Flashで作るのは何かと不都合が多くないですかね。
次はGoogle Mapと連携で何か作ろうと思ってたのですが
できるだけJSで完結させたいです。

■インストール方法は

１．mixiアプリ オープンβ コミュニティ に参加します。
２．MyMixlock（マイミクロック）から「アプリを追加する」をクリックしてください。
３．ホームを開くと自分のページに追加されます。

]]> http://blog.alt-scape.com/archives/316/feed 1 はじめてのmixiアプリ その2 http://blog.alt-scape.com/archives/315 http://blog.alt-scape.com/archives/315#comments Thu, 07 May 2009 15:52:22 +0000 alt http://blog.alt-scape.com/?p=315 前回、大まかに手順を書きましたが
さらに掘り下げていくつか分かったことを羅列します。

Gadget XMLにはガジェットの中身を記述するタグがあり
ここにHTMLやらJavascriptやらを記述していきます。
このタグにviewという属性があって
それぞれ「home」、「profile」、「canvas」と3つの値を使い分けます。


homeはログイン直後の自分のページ。右側の小窓表示。（※キャプチャーはUNIQLOCK）
home画面

profileは自分も他人も見るプロフィール画面。右側の小窓表示。（※キャプチャーはUNIQLOCK）
profile画面

canvasはhomeやprofileの小窓から遷移したガジェット用の画面。（※キャプチャーはUNIQLOCK）
canvas画面

ガジェットの内容やビジュアルを変えたいときはそれぞれタグをわけて記述しないといけません。
ソースコードは以下。

■home、profile、canvasすべてに適用の場合
<Content type="html" view="home, profile, canvas">

    <![CDATA[

        all test

    ]]>

</Content>

■homeのみ適用の場合
<Content type="html" view="home">

    <![CDATA[

        home test

    ]]>

</Content>

■profileのみ適用の場合
<Content type="html" view="profile">

    <![CDATA[

        profile test

    ]]>

</Content>

■canvasのみ適用の場合
<Content type="html" view="canvas">

    <![CDATA[

        canvas test

    ]]>

</Content>

あと、
デバッグ段階でサーバーにXMLのキャッシュが残っていたりするので
自身のアプリトップ→アプリ設定変更→ガジェットURLの横「キャッシュ消去」を押してから確認する。
そもそもmixi上でのデバッグはめんどいのでこのへんを参考にするとよさそう。
Google Gadget Editor


]]> http://blog.alt-scape.com/archives/315/feed 5 はじめてのmixiアプリ http://blog.alt-scape.com/archives/314 http://blog.alt-scape.com/archives/314#comments Wed, 06 May 2009 16:42:42 +0000 alt http://blog.alt-scape.com/?p=314 mixiアプリ

先月、mixiプラットフォーム上に個人で開発したアプリを表示できる
「mixiアプリ」のオープンベータ版がスタートしました。
さらにmixiアプリを開発する法人・個人に対して、
出資や融資のほか、アプリケーションの買い取りといった方法で支援する「mixiファンド」の設立により
iPhoneアプリやモゲラ、Cteamといったクリエイターへ対価を支払う支援プラットフォームとしても
大変興味深い環境が形成されてきてこれから楽しみです。
単純に考えても自分の作ったアプリが国内の1500万人ユーザーにアプローチできるのってすごいですね。


まずお試しに何か作ってみたいと思います。
以下、ココ を参考にmixiアプリ作成手順と取得情報をメモ。

１．mixiアプリオープンβコミュニティに参加登録する。

２．mixiアプリオープンベータ版にアクセスして「アプリ」ってメニューを押す。

３．一番右の「アプリを作成する」を押して「Developer登録」する。

４．先ほどの「アプリを作成する」に戻ってアプリ名やカテゴリ、公開・非公開設定、ガジェットURL、説明文、写真、アイコン設定などの情報を入力して投稿。

上記手順でmixiプロフィールの窓や画面一杯に展開する専用ページに表示することができます。
肝心のアプリ（Flash）を表示するための書式としてGadget XMLを記述しないといけませんが
シンプルに書くとこんなかんじ。
<?xml version="1.0" encoding="UTF-8" ?>

　　<Module>

　　　　<ModulePrefs title="タイトル">

　　　　<Require feature="flash" />

　　</ModulePrefs>

　　<Content type="html"><![CDATA[



　　　　<div id="flashContent"></div>

　　　　<script type="text/javascript">

　　　　gadgets.util.registerOnLoadHandler(function () {

　　　　var element = document.getElementById("flashContent");

　　　　var uri = "SWFのURL";

　　　　gadgets.flash.embedFlash(uri, element, 9,

　　　　{ width: 幅, height: 高さ ,id: "flashobject",

　　　　allowScriptAccess: "always",

　　　　allowNetworking: "all",

　　　　wmode: "transparent" });

　　　　</script>



　　]]></Content>

</Module>
※allowScriptAccess : “always”を記述しないとSWFが表示されないのでご注意を！

swfが表示されない、JavascriptとFlashのやりとりができない、外部サービス呼び出しがおかしいなどの
トラブルはこちらが参考になります。
http://mixi.jp/view_bbs.pl?id=41567209&comm_id=3217244&page=all
http://mixiapp.rash.jp/wp/?p=72

Flashからmixi opensocial JavaScript API にアクセスするライブラリ「flixi」（フリクシィ）もあるみたいです。
http://www.serialgames.co.jp/~jun/mixi/flixi/index.html

取得できるデータはこちら
http://developer.mixi.co.jp/appli/javascript-api
占いなんかは必須ですが、インストールユーザー・閲覧者のmixiプロフィール、マイミクシィ・コミュニティ一覧などなど。

ガジェットサイズは横幅212px、縦幅は上限212pxとなってます。
（※iFrameとして表示されるのでFlashサイズはそれ以上で作ってもいけそう。スクロールは出るけど。）
アプリは最大3つまでしか登録できません。

]]> http://blog.alt-scape.com/archives/314/feed 4