epgrec をスマホ向けに改造してみる

携帯をスマホに乗り換えたのを機にスマホのブラウザで epgrec を使う機会が増えてきたんだけど、普通にスマホで使おうとすると、

• 録画しようとして番組表をクリックすると表示される簡易予約の確認ダイアログが画面のかなり斜め下の方に表示されてしまう。（かなり使い辛い)
• ヘッダ部分（番組説明とかが表示される所）が常に画面の上に表示されるのと、時間帯表示の帯が常に画面左に表示されてしまい、表示領域が狭い。

の2点がかなり気になります。

まあ気になるなら自分でなんとかしようよ、というノリで、やっつけで改造してみました。

この変更を加えると、

• 録画しようとして番組表をクリックすると、確認画面をスキップしてダイレクトに予約録画される。また予約済みの番組の場合はダイレクトに予約がキャンセルされる。
  (番組説明が確認できなくなるので、それは予約済み一覧等で代用が必要)
• ヘッダ部分と、時間帯表示の帯が固定される。
  (画面をスクロールしても追従してこなくなる)

という風に動きが変わるので、同じ悩みを抱えている人は良かったら試してみてください。

$ diff -uNr index.html.orig index.html
--- /var/www/epgrec/templates/index.html.orig	2011-02-07 00:30:56.000000000 +0900
+++ /var/www/epgrec/templates/index.html	2011-10-16 18:24:45.000000000 +0900
@@ -51,12 +51,16 @@
 				'<div class="prg_duration" style="clear: left"><span class=" labelLeft">録画時間：</span><span class="bold">' + parseInt(duration / 60) +'</span>分' + ((duration % 60)>0?'<span class="bold">' + parseInt(duration % 60) + '</span>秒':'') + '</div>' +
 				'</div>';
 			if ($(this).hasClass('prg_rec')) {
-				str += '<div style="margin:2em 0 1em 0;text-align:center;"><a href="javascript:PRG.cancel(' + prgID + ')" class="ui-state-default ui-corner-all ui-dialog-buttonpane button">予約キャンセル</a></div>';
+				// str += '<div style="margin:2em 0 1em 0;text-align:center;"><a href="javascript:PRG.cancel(' + prgID + ')" class="ui-state-default ui-corner-all ui-dialog-buttonpane button">予約キャンセル</a></div>';
+				// dialog をスキップして直接キャンセル
+				PRG.cancel(prgID);
 			} else {
-				str += '<div style="margin:2em 0 1em 0;text-align:center;"><a href="javascript:PRG.rec(' + prgID + ')" class="ui-state-default ui-corner-all ui-dialog-buttonpane button">簡易予約</a>　<a href="javascript:PRG.customform(' + prgID + ')" class="ui-state-default ui-corner-all ui-dialog-buttonpane button">予約カスタマイズ</a></div>';
+				// str += '<div style="margin:2em 0 1em 0;text-align:center;"><a href="javascript:PRG.rec(' + prgID + ')" class="ui-state-default ui-corner-all ui-dialog-buttonpane button">簡易予約</a>　<a href="javascript:PRG.customform(' + prgID + ')" class="ui-state-default ui-corner-all ui-dialog-buttonpane button">予約カスタマイズ</a></div>';
+				// dialog をスキップして直接簡易予約
+				PRG.rec(prgID);
 			}
-			$('#floatBox4Dialog').html(str);
-			$('#floatBox4Dialog').dialog('open', 'center');
+			// $('#floatBox4Dialog').html(str);
+			// $('#floatBox4Dialog').dialog('open', 'center');
 		};
 		$('.prg').hover(
 			function(){
@@ -255,7 +259,7 @@
 			$('#float_titles').width(INISet.num_all_ch * INISet.ch_width + 80);
 			$('#tv_chs').width(INISet.num_all_ch * INISet.ch_width );
 			$('#tvtimes2').css( { left: INISet.num_all_ch * INISet.ch_width  + 40 } ).show();
-			tvtimes_scroll();
+			//tvtimes_scroll();
 			$('#ch_title_bar div.ch_title_skip').show();
 			$('#tv_chs div.ch_set_skip').show();
 			nowBar.INI();
@@ -266,7 +270,7 @@
 			$('#float_titles').width( INISet.num_ch * INISet.ch_width + 80 );
 			$('#tv_chs').width( INISet.num_ch * INISet.ch_width );
 			$('#tvtimes2').css( { left: INISet.num_ch * INISet.ch_width  + 40 }).show();
-			tvtimes_scroll();
+			//tvtimes_scroll();
 			nowBar.INI();
 		},
 		toggle:function() {
@@ -398,7 +402,7 @@
 	$(document).ready(function () {
 		MDA.Cookie.CookieName = 'tvProgmas_';
 		CTG.toggle();
-		tvtimes_scroll();
+		//tvtimes_scroll();
 		prg_hover();
 		var DG = $('#floatBox4Dialog');
 		DG.dialog({title:'録画予約',width:600});

タグ：EPGrec スマホ linux