ふたりの日記帳

[cssCode]
html { padding:1em .5em; }
a { text-decoration:none; }
#topDisp {
margin-bottom:2em;
}
#entryInfo { font:bold 96%/1.3 meiryo,"メイリオ"; padding:.25em .5em; }
#entryDisp {
background:url(files/kabe12.gif); padding:.5em;
font:110%/1.0 "Times New Roman"; color:#808080;
border:1px solid #ccc; border-radius:4px;
}
#entryDisp a { padding-left:.25em; padding-right:.25em; }
#entyDisp a:link { color:steelblue; }
#entryDisp a:hover { background-color:#ff9; color:#339; }
#entryDisp a:visited { color:#006; }
#entryDisp a:active { color:#0f0; }
.s-act { background-color:magenta; }
#entryDisp span.s-act a { color:#fff; }
.entry-label { color:darkgreen; background-color:#ff9; }
.entry-max { color:tomato; }


.dec-text { width:100%; font:100%/1.1 "MS Gothic"; background-color:#ffefff; }
.enc-text { width:100%; font:100%/1.1 "MS Gothic"; background-color:aliceblue; }

.s-none { background-color:red; color:#ff9; }
.s-level0 { backgound-color:#000; }
.s-level1 { background-color:tomato; }
.s-level2 { background-color:magenta; }
.s-level3 { background-color:#ffefff; }
.s-level4 { background-color:#ff9; }
.s-level5 { background-color:yellow; }
.s-level6 { background-color:lime; }

.idsDisp {
border-top:1px solid #000; padding-top:.5em;
margin:.5em .5em 1em .5em; font:96%/1.0 meiryo, "メイリオ";
background:url(files/kabe12.gif);
}
.idsDisp-info {
margin-bottom:.75em;
}
.idsDisp0, .idsDisp1 { width:50%; display:inline-block; margin-bottom:1em; }
.idsDisp textarea {
width:100%; border:1px solid #ccc;
border-radius:3px; margin-top:3px;
}
.ids1 { margin-bottom:.25em; }
.idsDisp0 div { padding-right:.5em; }
.idsDisp1 div { padding-left:.5em; }
textarea.ids-act { background-color:aliceblue; }
textarea.ids-weit { background-color:#ffefff; }
.idsa-act {
background-color:#ff9; border:1px solid tomato;
border-radius:3px; margin-bottom:1px; padding:0 3px;
}

.bdc-act { color:red; }


.up { font-size:116%; color:tomato; font-weight:bold; margin-left:.25em; }

#user1Disp .user-info { background:url(files/yosei_0.gif) no-repeat; }
#user2Disp .user-info { background:url(files/yosei_1.gif) no-repeat; }
#user3Disp .user-info { background:url(files/yosei_2.gif) no-repeat; }
.user-info {
padding-left:58px; height:62px;
}
.info1 { line-height:30px; font-size:120%; }

.listDisp {
border:1px solid #808080; padding:.5em;
border-radius:8px;
background:url(files/kabe12.gif);
}
#listDisp.weit { opacity:0.5 }
#listDisp td a:hover { color:magenta; }

.user-list {
color:orange;
font:110%/1.2 "Times New Roman"
}
.links {
border-top:1px dashed hotpink; margin-top:.5em; margin-bottom:.5em;
border-bottom:1px dashed hotpink;
padding:1em;
font:96%/1.35 meiryo,"メイリオ";
color:#d2691e;
background-color:#fff;
}
.links-1 {
width:350px;
text-align:center; padding-top:220px;
background:#fff url(files/yukikko2b.gif) no-repeat 0px 30px;
float:left;

}
.links-2 {
margin-left:350px;
}

.fg1 { color:red; font-weight:bold; }
.user-list a { line-height:1.5em; }
.list-1 .user-list a { }
.list-1 .user-list a:link { color:darkgreen; }
.list-0 .user-list a:link { color:#333; }
.list-0 .user-list a:hover { color:#000; background-color:#ff0; text-decoration:none; }
.list-0 .user-list a:active { color:red; background-color:#fff; }
.user-list .links a:link { color:steelblue; }
.user-list .links a:hover { color:magenta; background-color:transparent; text-decoration:underline; }
.links a.cmd:link { color:#333; }
.links a.cmd:hover { color:#000; background-color:#ff0; text-decoration:none; }

li { font:96%/1.4 meiryo,"メイリオ"; color:#000; }
td.num span { cursor:pointer; color:#000; }
#cmdDisp { margin:.5em 0; }
div.list1 .list2, div.list1 .list3,
div.list2 .list1, div.list2 .list3,
div.list3 .list1, div.list3 .list2 { display:none; }

.linkDisp {
border:1px solid #808080; padding:.5em;
border-radius:8px;
}
a.ua { font-size:130%; }
.user-list {
color:orange;
font:116%/1.1 "Times New Roman"
}
#listDisp table {
width:100%; font:96%/1.2 meiryo,"メイリオ";
background:url(files/kabe12.gif);
}
#listDispInfo table {font:96%/1.2 meiryo,"メイリオ";
background:url(files/kabe12.gif);
}
.add-table1 { width:50%; }
.add-table2 { width:25%; }
th { background-color:darkgreen; color:#fff; }
tr.sleep { background-color:#eee; }
.sleep .sort-line { backgrund-color:#eee; }
.num { text-align:right; font-family:"Times New Roman"; padding-right:.5em; }
.vnum { text-align:center; background-color:#ff9; color:#009; cursor:pointer; }
.vnum:hover { background-color:#00f !important; color:#fff !important; }
.vnum-c { text-align:center; background-color:brown; color:#fff; cursor:default; }

#dataListFooter { text-align:right; padding:.5em; color:#808080; }
.vle-disp { background-color:#fff; padding:1em; }
.sleep .vnum { background-color:#eee; }
.mid, .sel, .mid1 { text-align:center; font-family:"Times New Roman"; }
td.date { text-align:center; font-family:"Times New Roman"; }
.oid { padding-left:.5em; }

.act { background-color:#ffefff; color:#369; }
.act3 { background-color:#ffefff; color:#369; }
.act4 { background-color:#ff9; color:#009; }
.act5 { background-color:#ff9; color:#000; }
select.addSel { background-color:#ff9; color:#000; }
option { text-align:right; fpnt-family:"Times New Roman"; }
.exe { cursor:pointer; }
.exe:hover { background-color:#ffefff; color:steelblue; }
.sort-for { background-color:blue; color:#fff; cursor:pointer; }
.sort-rev { background-color:#ffefff; color:blue; cursor:pointer; }
.sort-for:hover, .sort-rev:hover { background-color:#ff9; color:red; }
.sort-line, .sort-for, .sort-rev {
border-left:1px solid orange; border-right:1px solid magenta;
}
#dataTable {
margin-top:1em; margin-bottom:1em;
font:96%/1.1 meiryo,"メイリオ"; width:100%;
}
.nsSleep .mid1 { background-color:#eee; }
.txn { background-color:#ff9; text-align:center; font-family:"Times New Roman"; }
.txd { color:#00f; text-align:center; font-family:"Times New Roman"; }
.tn { background-color:#ffefff; }
.tw { line-height:1.46em; }
.tws, .tw { padding-left:1em; }
.ts { background-color:#fff; }
.t9 { background-color:#f99; color:#fff;}
.t9 .wp { color:#000; }
.wb { color:red; }
.wb1 { font:96%/1.1 "MS Gothic"; color:red; }
.wp { color:red; font-size:80%; vertical-align:top; }
#dataTable a { font:96%/1.1 meiryo,"メイリオ"; color:steelblue; }
.caption { font:96%/1.1 meiryo,"メイリオ"; margin-top:0.5em; margin-bottom:0.5em; }
caption { text-align:left; }
caption a { font-family:"Times New Romain"; }
.caption span, caption span { font:96%/1.1 "MS Gothic"; color:darkgreen; }
.caption span.none, caption span.none { color:tomato; }
.btnTo {
float:right; margin-bottom:1px;
font:96%/1.0 meiryo,"メイリオ";
}
.caption .btnTo { margin-bottom:2px; }
.tr-none tr { display:none; }

.txc { vertical-align:top; padding-right:.5em; }
.txc li { line-height:1.5em; }
label:hover { text-decoration:underline; }
.mid2 { background-color:#ff9; text-align:center; line-height:1.3em; }
.mid3 { background-color:#ff9; text-align:center; line-height:1.0em; }
.mid4 { text-align:center; }
.area1, .area2 { ljne-height:1.6em; width:100%; background-color:#ffefff; }
.err2 { border:1px solid red; background-color:magenta; color:#fff; }
.err2 a { color:#fff; }
.err2 a:hover { color:#339; }

.err2:hover { background-color:#fff; }
.num2 { text-align:right; padding-right:.5em; }
#mainListTableInfo { margin-top:2em; margin-bottom:2em; }
#mlti { width:100%; }
#mlti table { width:96%; }
#mlti table td { border-bottom:1px solid #ccc; }
td.li2 { display:list-item; list-style-position:inside; }
.mlti-info { font:96%/1.1 meiryo,"メイリオ"; color:steelblue;

[/cssCode]

夜間工事の連続だから昼下がりのこの時間が一番くつろげる時間です。
少ない時間でも少しずつ更新したいと思います。

昨日から今日にかけてファビコン（お気に入り）のアイコンに興味がわいてきました。
いつも使っているFirefox、たまに確認するIE9のブラウザはタブブラウザです。
幾つものページを表示させておくことが出来ます。
その見出しの部分にあるタイトルの前にアイコンが表示されているものがあるよね。

今は指定しているほうが多いのじゃないかな。
エクラのサイトじゃ出来ないのかな。
ふと、そんなことを思い立って。。じゃ、作ってみようということにしました。

ふたりのファビコンは素敵なハートにしてサイトで色を変えます。

heart_empty.png 16x16 → favicon1.ico なんちゃんネット全般に使います。
heart.png 16x16 → favicon2.ico エクラのサイト全般に使います。

素材はhttp://nancyan.main.jp/image/icon/に全て入れて絶対パスで取り込むようにしました。
ファイルの変換はFavIcon from Pics （英語）で行いました。

なんちゃんネットの方はスクリプトで一括して挿入するか、ヘッダーに直接記述するか迷っています。
試しに、なんちゃんの工作室のトップ（ローカル用）でやってみました。
※リンクの下２つの中身はまだローカル内です。

エクラのサイトはを使うと決めているのですが。。
メインページとメニューページは素直に設置できますし、メインページを使ったシステムも反映されます。
が、サイト全体のフレーム定義ページに反映させないと余り意味がありません。

だからサイト全体はメニューページから操作させています。
var a = top.document.createElement("link");
a.rel = "shortcut icon";
a.href = "http://nancyan.main.jp/image/icon/favicon2.ico";
a.type = "image/vnd.microsoft.icon";
top.document.getElementsByTagName("head")[0].appendChild(a);

Firefox9,IE9ともに問題はありません。（特別なものをつかってはいないもの）
うん、これでサイトのタイトルも愛らしくなりました(*^(^* )

もうすぐ時計のふたつの針は真上で仲良く重なる合うところ。
久しぶりにメニューのリラックス音楽を聴きながら楽しんでいるのね。

長いこと風呂に入っておりました。
そして湯上りに美味しいビールを飲んだものだからほろ酔い加減です。
今日は夜間工事明けでのんびり出来たけど明日は朝が早いのね。
もうすぐ眠ろう。少しでも更新して。

今日は愛しい葉月が画像作りを頑張ってくれました。


/image/futari/n/nancyan_hazuki_snow1(2).gif 192x96 の２枚です。

それを取り込んでPhotoscapeでちょっとだけ加工してアップしました。


/image/little/top15(16).gif 204x108 の２枚です。

あ、そうそう。掲示板のスパムのこと。
さらりと何事もなかったように綺麗にしておきました(*^(^* )
さぁ、眠ろう。明日の為に(*^(^* )

　もう元旦から一週間が過ぎ去ってしまい今更な感じがします。
　領域は確保しているのですけれど時系列が変になるから今日の日記に書くね。

.
　■新年の目標

　あけましておめでとうございます。
　昨年は仕事を頑張りました！（当たり前のことなんですが）
　いつもの年の倍近くは頑張ったかも知れない。
　年末年始だって仕事だった。
　休日以外は滅多に休まなかった！（当たり前のことなんですが・・・）

　その分、サイトの更新に費やせる時間が減って疎かになったかな。

　今年は少し違うぞ。
　なんたって新しいノートパソコンがあるのだ！
　そろそろ本気になってみよう。

　今、サイトでやりたい事を纏めてみる。

　1.エクラの日記カテゴリ一覧表 2012/01/01版の完成させること。（80%の完成度）
　2.ソフトバンク携帯で気持ち良くサイトを表示させること。
　3.電話機能付カメラ（auS003 Cybershot）で写真を撮って「今日の一枚」とかのコンテンツを作ること。
　4.トップページを更新すること。（いつまでもクリスマスじゃ悲しい）
　5.掲示板のスパムを削除して綺麗にすること。

　幾つも掲げてもすぐには実行できないだろう。
　出来ることを少しずつ。

.
　■1.エクラの日記カテゴリ一覧表 2012/01/01版の完成させること。（80%の完成度）

　ファイルの作成期日をみると1/3だから既に5日が過ぎようとしています。これは勿論、FTPでアップしているから「なんちゃんネット」のローカル構築ページです。このコンテンツはとっても奥が深いのです。エディタでサクサクと打ってアップして完成という代物じゃないのです。
　残りの20%がとてつもなく難しいのです。満足がいくまで公開はしないです。なんちゃんネット版よりも新着日記研究室のほうが早く公開される予定です。eclat版はHttp-Requestを使い、cgi.nancyanはPHPを使ってデータの取得を行ってるけど検証に時間が掛かっちゃう。

　データのソートと抽出に便利な方法を独自に発見したことが嬉しい。
　目標：１月中に完成させること。

.
　■2.ソフトバンク携帯で気持ち良くサイトを表示させること。

　私の携帯の液晶のサイズは240x320です。可愛い携帯だから小さい表示領域です。ページを表示させると横にスクロール出来るから不満は余りありません（横800px位）。でも、唯一不満なものがあるのね。それはフレームセットです。メインページだけだと横に広がるのにframesetは実表示領域にしっかりと収まってくれます。とっても不満です。横が240ピクセルでフレームの割合が20%,80%だからメニューの幅は48pxということになります。一度、ブラウザの横サイズをぐぐっと縮めて表示させれば、あまりにも恐ろしく使いにくいのが分かると思います。

　というわけで携帯用にはフレームで表示しないようにスクリプトを取り付けます。menu.htmlで操作しようと思う。そして日記のページで携帯からは、上部にあるマウスを当てるとリストが表示させるのが出来ないから、トップページに小細工を施そうと思う。携帯向けに日記をトップへインポート出来る機能があるもの。

　そうすればストレスなくリンクを辿ることが出来そう。

　それと、日記帳などのページの一部の文字化け。これを何とかせなあかん。
　前々から思っていたのだが、あまり美しくないから何とかしよう。

　実は、とっても原因は簡単なのだが。
　CSSのafterやbeforeのcontentに日本語を使うと、携帯のブラウザ設定で文字コードがUTF-8なら問題がないけれど、自動になっていると文字化けするというもの。日記の日付の前に「縲」という文字が表示されているはず。

　※この「縲」という漢字が変換で出なかったから「IMEパッド - 手書き」を使ってみました。マウスで文字が認識されて感激しました。

　解決方法も簡単です。例えば下のCSSを

body:after {
display:block; font:80%/1.0 Verdana; color:#808080;
text-align:right; margin:2em 1em .5em;
content:"(C)2010-2011 ふたりの日記帳/diary.cgi nancyan & hazuki yadokari@eclat"
}

　次のように変えるだけです。

body:after {
display:block; font:80%/1.0 Verdana; color:#808080;
text-align:right; margin:2em 1em .5em;
content:"\0028\0043\0029\0032\0030\0031\0030\002d\0032\0030\0031\0031\0020\003075\00305f\00308a\00306e\0065e5\008a18\005e33\002f\0064\0069\0061\0072\0079\002e\0063\0067\0069\0020\006e\0061\006e\0063\0079\0061\006e\0020\0026\0020\0068\0061\007a\0075\006b\0069\0020\0079\0061\0064\006f\006b\0061\0072\0069\0040\0065\0063\006c\0061\0074";
}

　対象文字列は次のように求められます。

function enc(){
var str = echo("txt1");
for(var i = 0,s == ""; i ＜ str.length; i++){
s += "\\00" + str.charCodeAt(i).toString(16);
}
echo("txt1", s);
}

　このことはずーと前から知りえたことでした。フォームで置換すれば済むことでした。
　でも、私はこの方法は素のままじゃやりたくないというポリシーを持っていたのです！
　更新フォームで何が書かれていたか得体の知れないものを更新できるか。
　まぁ、ページで表示されているものを見れば分かりますが、センスがないのです。

　せっかくのパソコンなのに自動で置換してくれなきゃ、

　そこで、夕べ眠る前に（実際には更新中に寝てしまったが）素晴らしい事を発見したのです。
　エクラのスタイルシートの編集にはHttp-Requestを使ったeDispを使っています。
　素のままのフォーム送信をしていないのです。
　そこで取得時と送信時にパッチを当てれば済むことじゃないのかって。

　CSSファイルをロードするとき。
　　str = str.replace(/(content\s*:\s*")[^"]+(";)\/\*(.+?)\*\//gm, "$1$3$2");

　アップしたとき。
　str = str.replace(/(content\s*:\s*")([^"]+)(";)/gm, function(e0,e1,e2,e3){
　　　for(var i = 0,s = ""; i ＜ e2.length; i++){s += "\\00" + e2.charCodeAt(i).toString(16);}
　　　return e1 + s + e3 + "/" + "*" + e2 + "*" + "\/";
　　});

　こうすれば更新フォームのeDispには一切の「\0028\0043\0029\0032\0030・・・」が表示されないはず。
　うーん、これは素晴らしい方法です。

　目標：今日から一週間以内で完成させること。

.
　■3.電話機能付カメラ（auS003 Cybershot）で写真を撮って「今日の一枚」とかのコンテンツを作ること。

　夕べのことでした。愛しい葉月と一緒に話をしていたときに写真のことになったのです。
　12.1MのSybershotlllが勿体ないって。
　電話機能よりもカメラ機能のほうが高い（と思う）携帯だもの。
　ようするに、葉月はカメラが好きで写真を撮るのが大好きなんです。
　そこで、愛しいなんちゃんにも同じ趣味をさせたいわけなんです。

　まぁ、私はカメラは素人です。
　だからそれなりに準備しましたとも。

　・PhotoScape の評価・レビュー - フリーソフト100
　このサイトから前のノートで使っていた、お気に入りの編集ソフトをパッチも含めてダウンロード。

　・ソニー・エリクソンの携帯電話「S003」の製品情報
　このサイトでカメラ機能を十二分に堪能し、試し取りしてみた。

　ノートと携帯の遣り取りはUSBが便利だから「USBドライバー」もダウンロードしてセットアップ済み。

　あとはやる気です。
　目標：今月中に形をつくりたいなぁ。。。

.
　■4.トップページを更新すること。（いつまでもクリスマスじゃ悲しい）

　今すぐにでも更新したい、というより、しなければいけないものなんだろうけれど。
　気力が充実したときにしたいなぁ。

　目標：今週中にはなんとか。

.
　■5.掲示板のスパムを削除して綺麗にすること。

　少し前からスパムがうようよしていたのには気がついていたのだが。
　夕べ掲示板を見ると、おお、賑やかじゃん。。
　件数が多くて過去記事にも入り込んでいるし。
　
　そこでふと、あることを思って削除するのをやめたのです。
　削除なんてほんの数分もあれば出来ちゃうもの。

　エクラ全体のスパムはどれくらいなんだろう。
　それを調べるためのプログラムを作るのがまた楽しい。

　スパムを削除しないで放置しておくと「管理がぬるい」と思われるのもしゃくだし。
　スパムの内容がエロばっかりだし。
　微妙に悩むところです。

　そういえば昨年の正月に某彼女の掲示板に挨拶したのね。
　今年もしようとしたらスパムがうようよいて引き返しました。

　エロのすぐ上には書きたくないというポリシーがあるって。

.
　■今日の日記。

　時計の針はもう朝の９時を指しているから実際には昨日の日記になるのだが夢中になると止まらない。
　で、たしか５時頃に日記の領域を確保して書き始めたわけよ。
　そうしたらずらずらと文字が長く長く・・・続いているから、ここで画像をひとつ。



Kiss me ! ☺

*

*

*

*