はじめての方へ
無料で通勤時間を
有効に有意義にする方法
通勤ドットコム Tips
通勤PSP Tips
通勤テキストコレクターTips
通勤iPod Tips
通勤PSP資料集（１）ユーザー画面デザイン資料
通勤PSPマネージャーでは、ユーザーが簡単に通勤PSPデスクトップ画面をデザインすることができます。ビデオマニュアル：ユーザー画面デザイン参照
しかし、デスクトップ画面のHTML(及びFalsh)などを独自で作成したいというユーザーさまのご意見を多くいただきました。
そこで、通勤PSPの構造、内部リンク先、ユーザー画面デザインで作成されるHTMLの解説、Flashデスクトップのサンプル素材（flaデータ）を資料として提供します。
また、通勤PSPマネージャー１．３２以上からは、作成されたデスクトップをユーザー同士で交換することが可能でになっております。 その場合の公開用ファイルの作成方法も同時に説明します。
通勤PSPの構造
通勤PSPは、Windwowsアプリケーション（通勤PSPマネージャー）で集めたWebサイトのテキスト情報を、PSP内のメモリースティックに転送し、PSPブラウザで表示します。SPのメモリステッィクに作成される構造
| root | file | 機能 | |||
| tuukin | index.html | ||||
| data | daily | mypsp | index.html + data.js + data | 収集テキスト | |
| memo | index.html + data.js | メモ | |||
| calender | index.html | カレンダー | |||
| mydata | jikoku | index.html + data.js | 時刻表データ | ||
| link | index.html + data.js | リンクデータ | |||
| renraku | index.html + data.js | 連絡表データ | |||
| shoko | shokomenu | index.html + data.js | 書庫用メニュー | ||
| 書庫 | 書庫データ | 書庫ファイル | |||
| tuukindotcom | 予約 | ||||
| tool | 電卓などのツール類 | ||||
| lib | javascript,cssの専用ライブラリー | ||||
| tuukinpspimage | 表示用グラフィックス | ||||
| myset.js | バージョンアップ用 | ||||
| user | ユーザーデザイン用 |
水色 → 転送で書き換わる部分 dailyファルダ ＋ myset.js
ピンク色 →パーソナルデータ作成で書き換わる部分 index.html + mydata + shokomenu + shoko
つまり、日々情報として送る部分（データ転送）とパーソナルデータ作成は分離しており、特にユーザー画面デザインに関してはtuukin>index.html(とそれに必要な素材)を自由に変更しても動作自体には影響がないと仕様になっています。ただしリンク先に不都合が起きないようにしてあげる必要があります。
内部リンク先
ユーザー画面デザインでは、tuukin>index.htmlを作成しています。このindex.htmlからのリンク先を正しく設定すれば、デザインを自由に変更できます。index.htmlから呼び出す tuukin\data のリンク先一覧
| 自動収集データ（マイＰＳＰ） | data/daily/mypsp/index.html |
| メモ(今日のメモ) | data/daily/memo/index.html |
| 住所録 | data/mydata/renraku/index.html |
| 時刻表 | data/mydata/jikoku/index.html |
| リンク集 | data/mydata/link/index.htmｌ |
| 書庫 | data/shoko/shokomenu/index.html |
| 電卓 | data/tool/dentaku/index.html |
| webカレンダー | data/daily/calender/index.html |
ユーザー画面デザインで作成されるindex.htmlの解説
通勤PSPマネージャーのユーザー画面デザインは、１）[PSPのメモステのパス]\tuukin\index.html
２）[PSPのメモステのパス]\tuukin\user の中のファイル群
の２つを作成するツールです。
このindex.htmlおよびそれに使われる素材を変更（又は新規に作成）することでオリジナルの初期画面を作成できます。index.htmlには、アイコンのサイズ、位置、リンク先など全て記述してあります。
以下に作成されるHTMLを載せますので、自由に改変（又は新規に作り直して）して、オリジナルのデスクトップ画面を作成してください。
■スタイルシート
.s_title ウインドウタイトルの文字
.s_icon アイコンの文字
A:hover {color:Red} アンカーの反応色
A {color:White} アンカーの色
.s_calender カレンダーの基本文字サイズ・色
.s_sunday カレンダーの日曜日の色
.s_satday カレンダーの土曜日の色
.s_glayday カレンダーのその月以外の日の色
.s_today カレンダー・当日の色
A.s_today カレンダー・当日の色の反応
.s_title ウインドウタイトルの文字
.s_icon アイコンの文字
A:hover {color:Red} アンカーの反応色
A {color:White} アンカーの色
.s_calender カレンダーの基本文字サイズ・色
.s_sunday カレンダーの日曜日の色
.s_satday カレンダーの土曜日の色
.s_glayday カレンダーのその月以外の日の色
.s_today カレンダー・当日の色
A.s_today カレンダー・当日の色の反応
■Javascript
<script src='data/myset.js'></script>
※Webカレンダーを呼び出すための変数を格納（myset.jsは通常転送時に作ります）
win_hide_left=-500;
※ウインドウを消すときのLeft PSPのブラウザで<div>をｈｉｄｄｅｎにすると、
画面が書き換わらないことが多かったので表示できないところに<div>を移動するときのLeftです。ちなみに、ウインドウを表示するときは、これを「0」にしています。
win_util_left=100;
※tool Windowを出すときのLeft 今のところ電卓のみに使います
function UpdateMyClock()
※時計用のＪＳです。document.myClock.nowTimeのinputを直接書き換えます。
function add_0(i)
※時計用 1桁の要素を２桁にしています。
function tuki_lastday
※カレンダー用 その月の日数を割り出しています
unction myCalender_Make
※カレンダー作成部分です。テーブル内の要素をつくっています。スタイルシートのs_calenderと連携しています。また、外部ｊｓの「data/myset.js」から変数を取っています。
function ShowMainWindow(num)；
※通常ウインドウ<<div id='window_*' >を表示させるためのコマンドです。Ｌｅｆｔを「0」にします。
function ShowMainWindowTool(num)；
※ツール用ウインドウ<<div id='window_*' >を表示させるためのコマンドです。Ｌｅｆｔを win_util_left にしています。
function HideMainWindow(num)
※ウインドウ<<div id='window_*' >を消すためコマンドです。Ｌｅｆｔを win_hide_left にしています 。
ShowMainWindow、ShowMainWindowTool、HideMainWindowの引数Numが、<div>要素のid='window_*' の*の部分と対になっています
<script src='data/myset.js'></script>
※Webカレンダーを呼び出すための変数を格納（myset.jsは通常転送時に作ります）
win_hide_left=-500;
※ウインドウを消すときのLeft PSPのブラウザで<div>をｈｉｄｄｅｎにすると、
画面が書き換わらないことが多かったので表示できないところに<div>を移動するときのLeftです。ちなみに、ウインドウを表示するときは、これを「0」にしています。
win_util_left=100;
※tool Windowを出すときのLeft 今のところ電卓のみに使います
function UpdateMyClock()
※時計用のＪＳです。document.myClock.nowTimeのinputを直接書き換えます。
function add_0(i)
※時計用 1桁の要素を２桁にしています。
function tuki_lastday
※カレンダー用 その月の日数を割り出しています
unction myCalender_Make
※カレンダー作成部分です。テーブル内の要素をつくっています。スタイルシートのs_calenderと連携しています。また、外部ｊｓの「data/myset.js」から変数を取っています。
function ShowMainWindow(num)；
※通常ウインドウ<<div id='window_*' >を表示させるためのコマンドです。Ｌｅｆｔを「0」にします。
function ShowMainWindowTool(num)；
※ツール用ウインドウ<<div id='window_*' >を表示させるためのコマンドです。Ｌｅｆｔを win_util_left にしています。
function HideMainWindow(num)
※ウインドウ<<div id='window_*' >を消すためコマンドです。Ｌｅｆｔを win_hide_left にしています 。
ShowMainWindow、ShowMainWindowTool、HideMainWindowの引数Numが、<div>要素のid='window_*' の*の部分と対になっています
■Body内要素
それぞれのリンク先は、ＩＦＲＡＭＥで呼び出しています。また同時にレイヤーにidを持たせてその名前で画面外か画面内かに移動させて表示・非表示をさせています。
<div>ウィンドウ id=window_* この＊の部分が全て関連します
<div>クローズアイコン</div><br>
<div>タイトル文字</div><br>
<div>中身のＩＦＲＡＭＥで、各ＨＴＭＬを呼び出し</div><br>
</div>
iFrameの src='data/daily/mypsp/index.html' のリンク先を変更すればアイコンからウインドウの中身を変えられます。
■アイコンとウィンドウの要素
<!-- マイＰＳＰ用 -->
<!-- アイコン -->
<div name=dt_base style='position:absolute;top:26;left:0;width:64;;height:32;z-index:10' class=s_icon>
<!-- アイコンの画像 リンクさせたい場合はこれにリンク -->
<img src='user/icon_0.png' width=32 height=32 border=0 /><br>
<!-- アイコンの文字のリンク -->
<a href='javascript:void(0);' onClick='ShowMainWindow(0)'>マイＰＳＰ</a>
</div>
<!-- ウインドウ -->
<!-- ウインドウベース画像 -->
<div id='window_0' name=icon_0 style='position:absolute;top: 18;left:-500;width:480;height:254;z-index:50;background-image:url(user/windowbase.png)'>
<!-- クローズボタン -->
<div name=icon style='position:absolute;top: 8;left:458 ;width:16;height:16;z-index:1'>
<a href='javascript:void(0);' onClick='HideMainWindow(0)'><img src='user/windowclose.png' width=16 height=16 border=0 /></a>
</div>
<!-- ウインドウタイトル -->
<div name=title style='position:absolute;top: 10;left:22 ;width:300;height:16;z-index:2' class=s_title>
マイＰＳＰ
</div>
<!-- ウインドウ中身のIFlame -->
<div style='position:absolute;top:28;left:6;width:300;height:16;z-index:3;'>
<IFRAME SRC='data/daily/mypsp/index.html' frameborder=1 scrolling=no marginwidth=0 marginheight=0 width=470 height=222 align='left'>
</IFRAME>
</div>
</div>
■その他のbodyの要素
----------------------------------------------------------------
<body leftmargin=0 marginheight=0 marginwidth=0 topmargin=0 onLoad='UpdateMyClock()'> ←時計の呼び出しのために
<!-- 背景 -->
<div name=dt_base style='position:absolute;top:0;left:0;width:480;;height:272;z-index:0;background-image:url(user/background.jpg)'>
</div>
<!-- カレンダー -->
<div name=dt_base style='position:absolute;top:166;left:342;width:137;;height:105;z-index:1;background-image:url(user/windowcalender.png)'>
<!-- カレンダーの中身 -->
<div name=cd2 style='position:absolute;top:11;left:5;width:121;height:83;z-index:0'>
<table width='130' border='0' cellpadding='0' class='s_calender'>
<SCRIPT LANGUAGE=JavaScript>myCalender_Make();</SCRIPT>
</table>
</div>
</div>
<!-- バー -->
<div name=dt_base style='position:absolute;top:0;left:0;width:480;;height:18;z-index:2;background-image:url(user/topbar.jpg)'>
</div>
<!-- バー用のアイコン -->
<div name=dt_base style='position:absolute;top:1;left:0;width:16;;height:16;z-index:3'>
<!-- バー用のアイコン リンクさせたい場合はこれにリンク -->
<img src='user/myicon.png' width=16 height=16 border=0 />
</div>
<!-- 時計 -->
<div name=today style='position:absolute;top:0;left:337;width:138;height:16;z-index:30;text-align:center;font-size:11px;color: #FFFFFF'>
<form name='myClock'>
<input name='nowTime' type=text style='background-color: #333333; color: #CCCCCC; font-size: 10px; text-align: right; border-width: 0;' size='18' readonly>
</form>
</div>
それぞれのリンク先は、ＩＦＲＡＭＥで呼び出しています。また同時にレイヤーにidを持たせてその名前で画面外か画面内かに移動させて表示・非表示をさせています。
<div>ウィンドウ id=window_* この＊の部分が全て関連します
<div>クローズアイコン</div><br>
<div>タイトル文字</div><br>
<div>中身のＩＦＲＡＭＥで、各ＨＴＭＬを呼び出し</div><br>
</div>
iFrameの src='data/daily/mypsp/index.html' のリンク先を変更すればアイコンからウインドウの中身を変えられます。
■アイコンとウィンドウの要素
<!-- マイＰＳＰ用 -->
<!-- アイコン -->
<div name=dt_base style='position:absolute;top:26;left:0;width:64;;height:32;z-index:10' class=s_icon>
<!-- アイコンの画像 リンクさせたい場合はこれにリンク -->
<img src='user/icon_0.png' width=32 height=32 border=0 /><br>
<!-- アイコンの文字のリンク -->
<a href='javascript:void(0);' onClick='ShowMainWindow(0)'>マイＰＳＰ</a>
</div>
<!-- ウインドウ -->
<!-- ウインドウベース画像 -->
<div id='window_0' name=icon_0 style='position:absolute;top: 18;left:-500;width:480;height:254;z-index:50;background-image:url(user/windowbase.png)'>
<!-- クローズボタン -->
<div name=icon style='position:absolute;top: 8;left:458 ;width:16;height:16;z-index:1'>
<a href='javascript:void(0);' onClick='HideMainWindow(0)'><img src='user/windowclose.png' width=16 height=16 border=0 /></a>
</div>
<!-- ウインドウタイトル -->
<div name=title style='position:absolute;top: 10;left:22 ;width:300;height:16;z-index:2' class=s_title>
マイＰＳＰ
</div>
<!-- ウインドウ中身のIFlame -->
<div style='position:absolute;top:28;left:6;width:300;height:16;z-index:3;'>
<IFRAME SRC='data/daily/mypsp/index.html' frameborder=1 scrolling=no marginwidth=0 marginheight=0 width=470 height=222 align='left'>
</IFRAME>
</div>
</div>
■その他のbodyの要素
----------------------------------------------------------------
<body leftmargin=0 marginheight=0 marginwidth=0 topmargin=0 onLoad='UpdateMyClock()'> ←時計の呼び出しのために
<!-- 背景 -->
<div name=dt_base style='position:absolute;top:0;left:0;width:480;;height:272;z-index:0;background-image:url(user/background.jpg)'>
</div>
<!-- カレンダー -->
<div name=dt_base style='position:absolute;top:166;left:342;width:137;;height:105;z-index:1;background-image:url(user/windowcalender.png)'>
<!-- カレンダーの中身 -->
<div name=cd2 style='position:absolute;top:11;left:5;width:121;height:83;z-index:0'>
<table width='130' border='0' cellpadding='0' class='s_calender'>
<SCRIPT LANGUAGE=JavaScript>myCalender_Make();</SCRIPT>
</table>
</div>
</div>
<!-- バー -->
<div name=dt_base style='position:absolute;top:0;left:0;width:480;;height:18;z-index:2;background-image:url(user/topbar.jpg)'>
</div>
<!-- バー用のアイコン -->
<div name=dt_base style='position:absolute;top:1;left:0;width:16;;height:16;z-index:3'>
<!-- バー用のアイコン リンクさせたい場合はこれにリンク -->
<img src='user/myicon.png' width=16 height=16 border=0 />
</div>
<!-- 時計 -->
<div name=today style='position:absolute;top:0;left:337;width:138;height:16;z-index:30;text-align:center;font-size:11px;color: #FFFFFF'>
<form name='myClock'>
<input name='nowTime' type=text style='background-color: #333333; color: #CCCCCC; font-size: 10px; text-align: right; border-width: 0;' size='18' readonly>
</form>
</div>
通勤PSPデスクトップFlashのソースファイル
あまりきれいな参考になるサンプルではありませんが、参考にしていただけたら幸いです。■iPhone風通勤PSPFlashデスクトップ ソースのダウンロード（Macromedia Flash8）
