2009-09-12mixiアプリ開発日記

感謝

スパイスラボ神部師匠のもとで
素人である僕が人生時計をmixiアプリ化する企画、
さっそく超ご丁寧なフィードバックと次の課題を与えて頂きました！

• mixiアプリ「人生時計」プロジェクト -step 2- ( ラボブログ )

全て自分で学ばないといけないベンチャーにいる自分にとってこんなに手取り足取り導いてくださる機会は本当にありがたいです。

opensocial-jquery-1.0.5を導入

• opensocial-jquery - Project Hosting on Google Code

からダウンロード。
featuresフォルダの中の
opensocial-jquery.jsが人に読みやすい形態で
opensocial-jquery.min.jsがコンピュータに読みやすい形態みたいです。
なんか色んなことが簡単にできるっぽいです。

外部ファイルの共通化

GadetXML の中に view="home, profile, canvas" という複数のビューの名前をしていしたコンテンツペインを作ると、そこのところはどのビューでも共通で読み込まれます。

http://blog.spicebox.jp/labs/2009/09/mixi_step_2.html

とのことでしたので

<Content type="html" view="home,profile,canvas"><![CDATA[
	<link rel="stylesheet" href="http://nishikokura.com/lifewatch/css/set.css" type="text/css" media="screen,print" />
	<script type="text/javascript" src="http://nishikokura.com/lifewatch/js/main.js"></script>	
	<script type="text/javascript" src="http://nishikokura.com/lifewatch/js/opensocial-jquery.min.js"></script>		
]]></Content>

としまして全てに反映させるようにしました。
だいぶソースがすっきりした～
CSSをいじったらprofileとhomeもスッキリしたので

• Dynamic-height | mixiアプリ.info

の件は後回しにさせて頂きますね。
たぶん近いうちに必要になりそうです。

タブ化

• opensocial @ ウィキ - タブの設置

を参考に設定画面のモック作りました。

<ModulePrefs title="lifewatch" >
<Require feature="tabs" />
</ModulePrefs>

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

<script type="text/javascript">
  jQuery(function($) {
    $('#tabs').tabs();
  });
</script>


<p>これはCANVASビューです。</p>


<div id="tabs">
<ul>
	<li><a href="#index1" title="人生時計">人生時計</a></li>
	<li><a href="#index2" title="人生メモ">人生メモ</a></li>
</ul>
<div id="index1">

	<div id="contents_home">
		<div id="timef"></div>
		<div id="messagef"></div>
　　</div>　　

</div>
<div id="index2">
    <form>
	<div id="0">０歳：<input type="text" value="誕生した年です。 "></div>
	<div id="1">１歳：<input type="text" value="たかや保育園ぱんだ組です。"></div>	
	<div id="2">２歳：<input type="text" value="たかや保育園きりん組です。"></div>	
	<div id="3">３歳：<input type="text" value="たかや保育園らいおん組です。"></div>	
	<div id="4">４歳：<input type="text" value="西浦小学校入学"></div>	
	<div id="5">５歳：<input type="text"></div>	
	<div id="6">６歳：<input type="text"></div>	
	<div id="7">７歳：<input type="text" value="４年生になり西浦東小学校へ"></div>	
	<div id="8">８歳：<input type="text"></div>	
	</form>
	<div align="center">コンテンツ２</div>
</div>
</div>


]]></Content>

としただけで・・・

・・・。
でできちゃいました。



めっちゃ簡単ですやん！！

あ、この簡単さがopensocial-jqueryなわけですね。

アツイなぁ。

↓今回のソースはこちら
http://nishikokura.com/lifewatch/log/20090912/opensocial.xml
http://nishikokura.com/lifewatch/log/20090912/css/set.css
http://nishikokura.com/lifewatch/log/20090912/js/main.js

そろそろRailsかなにかで
人生１行メモを入力して保存できるようにしたいなぁ♪