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

履歴一覧

Image7.jpg

感謝

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


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

opensocial-jquery-1.0.5を導入

からダウンロード。
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もスッキリしたので


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

タブ化


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

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

としただけで・・・

名称未設定-1.gif


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



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

あ、この簡単さが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かなにかで
人生１行メモを入力して保存できるようにしたいなぁ♪