なうろーでいんぐ
キーボード↑↓
でもいいぞ
旧サイト形式へ帰りたい人
製作者コメントのcsvとの連動とリンク遷移追加
2010年11月30日15時10分
http://tanukinoori.sakura.ne.jp/csv/index2.html
製作者コメントをcsvから取得して表示可能になり、
同じ種類の画像の場合は文言からリンクできる形に。
いよいよ使いやすくなってきました。
コードの整理が結構大変かな。
レイアウトもそろそろ弄りたい所
・・・だが、まだまだ先は遠い。
以下、csvデータ詳細。
data.csv
this[0] :ファイルインデックスNo.(数字)
this[1] :ファイル名(*.拡張子)
this[2],this[3] :サムネイルの描画位置(左上基準x,y)
this[4] :遷移リンク総数(数字)
this[5] :初期画像コメント(文言)
this[6] :初期リンク文言(文言)
this[7]~ :遷移先画像url(url)

comment.csv
this[0] :ファイルインデックスNo.(数字)
this[奇数] :画像コメント順列
this[偶数] :リンク文言順列

同日 17:10
画像サイズの大きさに合わせて
ウィンドウの下の余白も自動調節させた。
詳しくはリンク2をクリック。
処理としては比較的単純で、
画像サイズ取得時は
ウィンドウサイズが一定サイズを超えた場合に
jqueryのセレクタでidからdivを取得し、
cssの高さを調節させただけ。
戻る時は逆の動作。
if(newheight>600){ $("#speacer").css({
"height" : newheight/2+100+'px'
});
}

リンク関係一連を整えて
想定内だったバグを一通り修正。
もちろんまだまだバグはのこっとる。
・・・コメント機能と保存ボタン作れるな、
まぁ完成してからその辺りは考えよう。
backgroundImageなので右クリ保存出来ない。
これはボタン仕様にして統計取りやすくする為、
という後付の言い訳を準備しておいた藁。

同日 23:11
レイアウト整理と、ボックスの大きさ変更。
コメントの置き場所決めたり色々確認。
リンクで画像サイズ違う場合も大きさを
変化させる事出来そうだな・・・。
まぁ、それも後日検討。そろそろ保存ボタン作るか。
レイアウトIEで確認してなかったから
これは酷いwwwチクチク直すかぁ。
大体相対座標と絶対座標の違いが致命的なんだよ。

12/1 0:32
画像保存前の確認遷移ボタン作成。
現在拡大中のウィンドウの画像を保存できる。
これに関しては勝ったも同然だな。
若干挙動は怪しいが、リンク2の動作を改良。
画像サイズによりウィンドウ可変で遷移するようにした。
また、リンクサイズをボックスの大きさに
合わせられるようになった。
そろそろ重たいコメント部分考え始めるかなぁ?
・・・試験勉強忘れてた、そっちに集中しよう。
ついでに絵も再開しようかな、そろそろ。
記事カテゴリ:プログラム関連
試作機
2010年11月28日21時32分
コード整理されてないですが、
ギャラリー用の内部構成がほぼ完成した。
onload挙動とか、外部レイアウトとかまだ全然。
http://tanukinoori.sakura.ne.jp/csv/index2.html
csvの中身は、
this[0] :ファイルインデックスNo.(数字)
this[1] :ファイル名(*.拡張子)
this[2],this[3] :サムネイルの描画位置(左上基準x,y)
this[4] :内部文言
解析したい人はソース表示させて
読んでみればいい、但し全然整理されてねーけど。
動作確認はFireFoxとIEのみ。
次は表示ページ切替部分かな。
記事カテゴリ:プログラム関連
本日は
2010年11月27日21時38分
読書の一日だった・・・仕事もちょっとはしたけど。
まぁ、これからが本当の時間。
とりあえず体力温存してから、頑張るで。

11/28 4:54
若干のプログラムのずれがあったので修正。
IEにも対応しておいた。
まさか正規表現が役立つ事になろうとは・・・。
if(jQuery.browser.mozilla){
img.src=""+str[0]+"";
var tmp = new Array(2) ;
tmp=img.src.split("%22");
var img2 = new Image();
img2.src=tmp[1];
var newwidth = img2.naturalWidth*1.23;
var newheight = img2.naturalHeight*1.20;
$currentBox.css({
"backgroundPosition" : newwidth/2-img2.naturalWidth/2+'px'
});
}else{
str=""+str+"";
re = new RegExp("image/[0-9]+.jpg", "i");
if(str.match(re)){
str=str.match(re);
}
img.src=str;
var newwidth = img.width*1.23;
var newheight =img.height*1.20;
$currentBox.css({
"backgroundPositionX" : newwidth/2-img.width/2+'px',
"backgroundPositionY" : newheight/2-img.height/2+'px'
});
}
次は座標保持と座標計算だな・・・
これも一癖ある模様;
記事カテゴリ:プログラム関連
寒いので
2010年11月26日19時00分
ラザニアを生地から自作してみた。
薄力粉+オリーブオイル+タマゴを混ぜた生地を
薄く広げてグラタン皿の大きさに3~4枚程度作り、
茹で上げ、後はミートソースとホワイトソースと
ミルフィーユ状態にして上からチーズとオレガノ。
電子レンジでグラタンチン、終了。
ファイル 229-1.jpg
余りの生地も余ったホワイトソースと絡めて、
おいしく頂きました。
箸で食うのはアレですがw

11/27 0:41
とうとう出来た・・・。
本来の画像サイズ取得。
var box = document.getElementById('t');
box.style.backgroundImage =
"url(image/" + this[0] + ".jpg)";
var img = new Image();
var str=box.style.backgroundImage;
str=str.split("(");
str=str[1].split(")");
img.src=""+str[0]+"";
var tmp = new Array(2) ;
tmp=img.src.split("%22");
tmp[1]=tmp[1].split("%22");
var img2 = new Image();
img2.src=tmp.join('');
document.getElementById('u').style.
backgroundImage="url("+img2.src+")";
document.write(img2.naturalWidth);
なんという無理矢理感。
ともあれdivに指定した背景画像の本来のサイズを取得する事には成功。
naturalWidthは使ってるブラウザがFireFoxの為。
あと、別のブラウザでも動くようにするには、
http://dogmap.jp/2009/06/17/javascript-image-natural-size-2/
で条件分岐する必要があるわけね。
頑張った俺・・・orz
記事カテゴリ:プログラム関連