<< XOOPS-GNAVI(Ielog)ブロック表示のカスタム | main | カラーで迷ったら使う便利サイト >>

ExcelのCSVを読み込みHTMLで表に埋め込む

0
    クライアントからの更新の処理で面倒なのが、予定表の更新です。 
    ワードのデータで表になって、曜日、予定、場所、時間が一覧になっています。 
    毎回テーブルタグの中にチマチマ打ち込んでいたんですが。 
    ずぼらな私には神のような方法がありました。ありがとうございます!!

     参考サイト:http://ryu-tan.net/blog/?p=72


    以下ほぼコピペの覚書

    手順1 CSVファイルを用意する

    Excelファイルを作成し、 「whatsnew.csv」として書き出しました。

    ※CSVはExcelで言う横(A列B列C列・・・)をカンマで区切ったデータです。
     また、縦(1行2行3行・・・)は、改行で表現されます。
     名前を付けて保存を選択し、「ファイルの種類」から「CSV(カンマ区切り)」を選択します。

    □Excelの表
    日付,URL,内容(35文字以内)
    2011.04.03,http://○○○/,ブログを更新しました!
    2011.04.03,http://○○○/,ブログを更新しました!
    2011.04.03,http://○○○/,ブログを更新しました!

    手順2 jquery.csv.jsを準備する 

    jquery.csv.jsは、jQueryでCSVを読み込むためのプラグインです。
    そのままだと改行コードの問題が発生するので、一部変更しています。
    以下のコードをコピーし、「jquery.csv.js」として保存します。
    私の場合は文字コードはUTF-8、改行コードはCRLFとしました。

    -------------------------------------------------------------
    /* Usage:
     *  jQuery.csv()(csvtext)               returns an array of arrays representing the CSV text.
     *  jQuery.csv("¥t")(tsvtext)           uses Tab as a delimiter (comma is the default)
     *  jQuery.csv("¥t", "'")(tsvtext)      uses a single quote as the quote character instead of double quotes
     *  jQuery.csv("¥t", "'¥"")(tsvtext)    uses single & double quotes as the quote character
     */
    ;
    jQuery.extend({
        csv: function(delim, quote, linedelim) {
            delim = typeof delim == "string" ? new RegExp( "[" + (delim || ","   ) + "]" ) : typeof delim == "undefined" ? ","    : delim;
            quote = typeof quote == "string" ? new RegExp("^[" + (quote || '"'   ) + "]" ) : typeof quote == "undefined" ? '"'    : quote;
            //以下で"¥r"となっている箇所は元は"¥r¥n"でした。うまく改行されないのを防ぐため変更しました
            lined = typeof lined == "string" ? new RegExp( "[" + (lined || "¥r") + "]+") : typeof lined == "undefined" ? "¥r" : lined;
     
            function splitline (v) {
                // Split the line using the delimitor
                var arr  = v.split(delim),
                    out = [], q;
                for (var i=0, l=arr.length; i<l; i++) {
                    if (q = arr[i].match(quote)) {
                        for (j=i; j<l; j++) {
                            if (arr[j].charAt(arr[j].length-1) == q[0]) { break; }
                        }
                        var s = arr.slice(i,j+1).join(delim);
                        out.push(s.substr(1,s.length-2));
                        i = j;
                    }
                    else { out.push(arr[i]); }
                }
     
                return out;
            }
     
            return function(text) {
                var lines = text.split(lined);
                for (var i=0, l=lines.length; i<l; i++) {
                    lines[i] = splitline(lines[i]);
                }
                return lines;
            };
        }
    });
    ------------------------------------------

    ■手順3 readcsv.jsを用意する

    readcsv.jsは、csvファイルを読み込み、HTMLとして出力するためのscriptです。
    以下のコードをコピーし、「readcsv.js」として保存します。
    私の場合は文字コードはUTF-8、改行コードはCRLFとしました。

    ------------------------------------------
    function loadTextFile(){
    $(function(){
        $.get('whatsnew.csv',function(data){
            var csv = $.csv()(data);
            //indexを使ってくり返し回数をカウントします
            $(csv).each(function(index){
                //indexが0の場合はタイトル行なのでリンク無し、それ以外はリンクを作成
                if(index == 0){
                    if(this[0] && this[1] && this[2]){
                        $("#result table").append("<tr><th>"+this[0]+"</th><th>"+this[2]+"</th></tr>");
                    }
                } else {
                    if(this[0] && this[1] && this[2]){
                        $("#result table").append("<tr><td>"+this[0]+"</td><td><a href=¥""+this[1]+"¥">"+this[2]+"</a></td></tr>");
                    }
                }
            })
        })
    })
    }

    ----------------------------------------------------------------
    尚、$(csv).each(function(index){…}には、見慣れたtableタグ等がありますが、
    この部分を書き換えると、HTMLへの出力の方法を変えることができます。

    ※this[0] はCSVファイルの一番左列です。

    ■手順4 読み込み元のページを用意する

    仮にindex.htmlとして作成する場合は、
    文字コードをUTF-8,改行コードをCRLFとするといいでしょう。
    -----------------------------------------------------------------
    <html>
    <head>
    <META http-equiv="ROBOTS" content="index,follow">
    <META http-equiv="content-type" content="text/html; charset=UTF-8">
    <META http-equiv="Content-Style-Type" content="text/css">
    <META NAME="keywords" CONTENT="jQuery,Ajax,Excel,CSV読み込みサンプル">
    <title>読み込みサンプル</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
    <script type="text/javascript" src="jquery.csv.js"></script>
    <script type="text/javascript" src="readcsv.js"></script>
    </head>
     
    <body onLoad="loadTextFile()">
        <div>CSV読み込みのサンプル</div>
        <div id="result"><table border=1></table></div>
        <noscript>
            <p>JavaScriptがオフになっています。オンにして実行してください。</p>
        </noscript>
    </body>
    </html>
    -------------------------------------------------------------------

    ■手順5 .htaccessを作成する

    最後にさらなる文字化け対策に、以下の内容をテキストエディタで作成し、ファイル名を「.htaccess」として保存します。
    ----------------------------------------------------------
    AddType "text/plain; charset=SHIFT-JIS" .csv
    ----------------------------------------------------------
    ※OSによってはファイル名の頭に「.」をつけるとファイルが見つからなくなりますので、その場合は「htaccess」として保存し、サーバーにアップロードしてから「.htaccess」としてリネームしましょう。

    ※.htaccessを許可していないサーバーもあります。
    サーバー会社の仕様をご確認ください。
    尚、無料のレンタルスペースはほぼ間違いなく機能しませんのでご注意ください。

    ■手順6 ファイルをアップロードして確認する

    上記の「whatsnew.csv」、「jquery.csv.js」、「readcsv.js」、「index.html」、「.htaccess」、(必要な方はjquery-1.6.min.js)が用意できたら、サーバーの同階層にアップします。
    アップ後、URLにアクセスして、無事中身が表示されれば完了です。

    ひゃほぉ〜!
    これで今まで1時間かかっていた作業がわずか1分で終わるー!

    と、わくわくしながら上記方法をサイトに埋め込み。

    ん、、あれ?

    できないー><なんでなんでー!と色々探ったら。
    ------------------------------------------------
    <body onLoad="loadTextFile()">
    ------------------------------------------------
    onLoad が実は先に居たんです。
    アコーディオンスライドショーで使ってる
    --------------------------------------------------------------------
    <body onLoad="slideMenu.build('sm',625,10,10,1)">
    --------------------------------------------------------------------
    これが先にいたんですぅ。。
    onLoadって複数組むにはどうすればいいの?
    意外にも簡単なようで面倒でした。
    javascriptで複数設定が可能なようです。
    --------------------------------------------------
    <head>
    <script type="text/javascript">
    function a(){loadTextFile();
    }
    function b(){slideMenu.build('sm',625,10,10,1);
    }
    </script>
    </head>
    <body onload="a();b();">
    --------------------------------------------------

    これで無事表示完成〜!
    時短できました。ありがとうございます。




    コメント
    コメントする









    calendar
      12345
    6789101112
    13141516171819
    20212223242526
    2728293031  
    << January 2019 >>
    amazon


    selected entries
    categories
    archives
    recent comment
    profile
    search this site.
    others
    mobile
    qrcode
    powered
    無料ブログ作成サービス JUGEM
    JUGEMのブログカスタマイズ講座