13

Feb

2011

SoftimageToolBoxのテーブル組みに向けて構想を練ります。
今回は、こんな感じになるように組み立てようと思っています。
 

■jQuery + csv2table での初期状態

これが、何もしていない、初期の状態。
「▼」は、ソート(並び替え)機能です。

A▼ B▼ C▼ D▼
A1 B1 C1 D1
A2 B2 C2 D2


<HTML>

<table>
<tr><th>A</td><td>B</td><td>C</td><td>D</th></tr>
<tr><td>A1</td><td>B1</td><td>C1</td><td>D1</td></tr>
<tr><td>A2</td><td>B2</td><td>C2</td><td>D2</td></tr>
</table>

 

■完成イメージ

2、3列目が結合して、
2列目が<dt></dt>、3列目が<dd></dd>にしたいのです。

A B▼ (C) D
A1 ・B1
   ・C1
D1
A2 ・B1
   ・C1
D2


<HTML>

<table>
<tr><th>A</td><td>B</td><td>C</td><td>D</th></tr>
<tr><td>A1</td><td> <dt>B1</dt> <dd>C1</dd> </td><td>D1</td></tr>
<tr><td>A2</td><td> <dt>B2</dt> <dd>C2</dd> </td><td>D2</td></tr>
</table


まだまだ、実際にできるかどうかの見当もついてないのですが、
jQueryやJavaScriptに詳しい方いらっしゃいましたら、
是非是非、アドバイスをおねがいできたらと思いますー。

+ 1クリックで応援してください +
にほんブログ村 Webデザイン
[ click ]

13

Feb

2011

前回でUTF-8の文字コードが解決したので、
jQueryで、試行錯誤しつつ、詰めていきたいと思います。

今回は、とりあえず、実験用にこちらのファイルで作業します。

SI_Tool_Box > index_test.html

CVSデータをHTMLにテーブル表示する仕組みを使うにあたって、
今回は、このjQueryプラグインを使わせていただきました。
作者様ありがとうございます!

csv2table
http://plugins.jquery.com/project/csv2table

■csv2tableのダウンロード

csv2tableのサイトには、
必要なファイル一式とサンプルがそろった
「csv2table-0.02-b-2.8.zip」のリンクがあるのですが、
なぜか、ダウンロードできない状態です。

「csv2table」単体のダウンロードは、可能ですが、
他にどんなファイル一式が必要なのか見当もつかないので(汗

「jQchart」という、「csv2table」と併用して、
テーブル表示だけではなくグラフ表示もできると言うプラグインで、
ファイル一式のダウンロードができたので、そちらで。

jQchart
http://plugins.jquery.com/project/jQchart

サイトの右上にある「v0.03-beta-1.zip」をダウンロードしたら、
解凍しておきます。

asiato0213.png
 

あと、この中にある「csv2table」のバージョンが
古いみたいなので、「csv2table」の最新もダウンロードしておきます。

現時点の最新は「0.2-b-2.8」です。

asiato0213_3.png
 

■設置手順

  1. 「v0.03-beta-1.zip」を解凍。「v003」フォルダができる。
     
  2. 今回、サンプルデータとかはいらないので、
    必要なものだけとって、任意のところに置くことに。

    v300 >libフォルダ内を全て

    これだけでいいみたい。
     
  3. 今回は、先ほどのフォルダ内の全てを下記に移動してみました。

    SI_Tool_Box > lib >jsフォルダ
     
  4. 「csv2table」のバージョンが古いので、新しいのに差し替えます。
    古いのは「jquery.csv2table-0.02-b-1.6.js」、
    新しいのは「jquery.csv2table-0.02-b-2.8.js」になってます。

    asiato0213_2.png
     
  5. テーブルに表示したい内容の元になるCSVファイルを用意。
    作り方等は、後々まとめたいと思います。

    SI_Tool_Box > lib >data >test.csv

    中身はテキストエディタで見れます。
    カンマで、仕切ってる感じです。こんな感じ。

    ,"A","B","C","D"
    ,"A1","B1","C1","D1"
    ,"A2","B2","C2","D2"
    ,"A3","B3","C3","D3"
    ,"A4","B4","C4","D4"
    ,"A5","B5","C5","D5"
  6. jQueryとプラグインが動くように「index_test.html」を編集します。
    <head></head>内に赤文字のように追記。

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>SoftimageToolBox_test</title>
    <script type="text/javascript" src="lib/js/jquery-1.2.3.min.js"></script>
    <script type="text/javascript" src="lib/js/jquery.csv2table-0.02-b-2.8.js"></script>
    <link rel="stylesheet" href="lib/themes/jquery_style.css" />
    </head>
  7. CSVを読み込むための処理の文字列を入れます。
    どこでもいいみたいなのですが、とりあえず<body>の下にしました。
    赤文字の部分が追加部分で、
    太字のところにファイルへのパスを書けば良さそうです。

    <body>
    <script>
    $(function(){
    	  $('#view0').csv2table('lib/data/test.csv');
    	});
    </script>
  8. テーブルを表示したいところに下記の文字列を入れればよいそうです。
    ちなみに、赤文字部分を編集すれば、
    複数のテーブルを設置できるそうですが、そのことはまた後々に。

    <div id="view0"></div>

これで、終わりです。
こんな感じで見えてると思います。

asiato0213_4.png

一部画像が出てない箇所がありますが、これは、また別の機会に。
ここから、いろいろといじっていきたいと思いますー。

+ 1クリックで応援してください +
にほんブログ村 Webデザイン
[ click ]

11

Feb

2011

まだまだ、完成への先行きが遠い、SoftimageToolBoxです。

当初、jQueryを使ったテーブル表示方法が、
NetViewで、使えなかったのは、『文字化け』の問題のため。

なので、そのへんをもう少し、そこを掘り下げてみることに。
 

■NetViewはなぜUTF-8文字コードに対応しない?

調べたところ、SoftimageのNetViewは、
IEと同じというか、そのまま、つながって使ってる感じ。
ブラウザ設定などもIEで設定してる情報をそのまま読み込んでいる。

UTF-8に、自動的に文字コード変換ができないのは、IEも。

そのため、IE側で、文字コードをUTF-8に固定すれば、
NetViewでも見れるようになりますが、

今回は、自動で見れるようにすることが前提で。
 

■UTF-8を宣言して解決できる?

HTMLのタイトルタグ(<TITLE>)の前で、
文字コードの宣言をする方法があって、試してみました。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

しかし、これだけではうまくいかないようです。

一応、上記の宣言する前の文字列に、日本語が含まれていると、
自動的にShift-JISになってしまう現象があるという情報もありましたが、
今回は、あてはまりませんでした。
 

■CSSファイルの文字コード宣言も忘れないで。

よくよく調べたら、
CSSファイルにも、文字コードの宣言が必要なのでした!

@charset ”UTF-8”;

すべてのCSSファイルの頭に上記の文字列を入れます。
・・・これで、表示できました!!

結局、振り出しに戻った感もないではないですが(汗

再度、jQueryを使って、構成していきたいと思います。

+ 1クリックで応援してください +
にほんブログ村 Webデザイン
[ click ]
1  2  3  4  5  6  7  8  9  10 LAST