So-net無料ブログ作成
 [ひらめき]スイカが好きのサイトマップ(記事一覧)  
もくじ ブログトップ

スイカが好きブログ・10月に出かけた旅行のもくじ [もくじ]

 2001年からの写真の整理を兼ねてブログで更新しています。
 アルバムのようにできないかと思って目次を作成中です。
10月に出かけた旅行のもくじ  更新日: 2018年7月1日
     飛んでいる番号は「旅行以外の記事」です
 
 
1.越谷キャンベルタウン・野鳥の森(2001)
10-1m.jpg 
 
2.長瀞・紅葉はもう少し先でした。(2003)
10-2m.jpg 
 
3.土浦花火大会(2005)
10-3m.jpg 
 

続きを読む


タグ:もくじ
nice!(12) 
共通テーマ:旅行

スイカが好きブログ・9月に出かけた旅行のもくじ [もくじ]

 2001年からの写真の整理を兼ねてブログで更新しています。
 アルバムのようにできないかと思って目次を作成中です。
9月に出かけた旅行のもくじ  更新日: 2018年7月1日
     飛んでいる番号は「旅行以外の記事」です
 
 
1.イタリア2006:バチカン、コロッセオ、トレビの泉、真実の口(入れなかった)
9-1m.jpg 
 
2.イタリア2006:1日目続き(マシンガンで警備中の人と記念写真を撮ったアヴェンティーノの丘 、フォロ・ロマーノ、スペイン広場、夕食)1日目終了
9-2m.jpg 
 
3.イタリア2006:2日目(カプリ島・青の洞窟、高台からのカプリ湾)
9-3m.jpg 
 

続きを読む


タグ:もくじ
nice!(8) 
共通テーマ:旅行

スイカが好きブログ・8月に出かけた旅行のもくじ [もくじ]

 2001年からの写真の整理を兼ねてブログで更新しています。
 アルバムのようにできないかと思って目次を作成中です。
8月に出かけた旅行のもくじ  更新日: 2018年7月1日
     飛んでいる番号は「旅行以外の記事」です
 
 
9.熱海の花火
8-11m.jpg 
 
10.清里高原ハイランドホテルと野辺山電波天文台
8-10m.jpg 
 
11.鬼押し出し、軽井沢(2003年)
8-11m.jpg 
 

続きを読む


タグ:もくじ
nice!(8) 
共通テーマ:旅行

「旅行アルバム用ブログ」の目次:javascript [もくじ]

もくじページで使用しているファイルの内容です。

webを調べながら作ったので一生懸命にコメントを付けています。(;^ω^)


もくじ ページにリンク

mokujiNo2.JPG


必要なファイル 

  ryokoumokuji.htm   
  ryokoumokuji.js     ・・・CSVから「もくじ」を表示
  cellline.css        ・・・罫線を表示
  ryokoumokuji.csv    ・・・「もくじ」データ、エクセルからcsvでファイル

      4つのファイルはソネットのu-page+にファイルしています。


CSVファイル

#更新日時はデータ更新日時
#場所は「場所+α」で表示される検索キーになります
シャープ 以外の行は「もくじ」のデータです。(javascriptに dim_mokuji配列の構造で取り込んでいます)

    #更新日時,2017/10/16,,,,,,,,,
    #場所,北海道,青森,岩手,宮城,秋田,山形,福島,茨城,栃木,群馬
    #場所,埼玉,千葉,東京,神奈川,新潟,富山,石川,福井,山梨,長野
    #場所,岐阜,静岡,愛知,三重,滋賀,京都,大阪,兵庫,奈良,和歌山
    #場所,鳥取,島根,岡山,広島,山口,徳島,香川,愛媛,高知,福岡
    #場所,佐賀,長崎,熊本,大分,宮崎,鹿児島,沖縄,,,
    #場所,オーストラリア,イタリア,,,,,,,,
    #場所,CSS,エクセル,,,,,,,,
    #年,月,場所,タイトル,番号,URL,,,,,
    2008,10,栃木,茶臼岳・山頂駅、牛ヶ首、峠の茶屋跡避難小屋(2008), ,2017-10-11,,,,,
    2007,10,栃木,一泊2日で茶臼岳、鹿の湯、殺生石、那須温泉神社(2007), ,2017-10-10,,,,,

csvファイルはエクセルで作成し、更新日時はエクセルの=today()で更新しています。 
タイトル、url、はブログの記事管理ページから手動でコピペしています。
番号は未使用です。


htmlファイル 色が付いている部分はjavascriptで書換えています。

<html lang="ja">
  <head>
    <title>ブログ目次 JavaScriptでcvsを配列に読み込み、目次を更新</title>
    <script language="javascript" src="./ryokoumokuji.js" charset="utf-8"></script>
    <link rel="stylesheet" href="cellline.css" type="text/css">
  </head>
<body>
<a name="TOP"></a>
  <font color="#FFFFFF" style="background-color:#9999FF">ブログの目次</font>
  <font size="1">もくじ更新日:<dev id="idupdate">更新日</dev></font>
  <br><br>
  <input type="button" value="場所 +α" onClick="functionAlbamListPlace()">
  <input type="button" value="年月" onClick="functionAlbamYYMMlist()">
  <input type="button" value="検索" onClick="functionLookUp()">
  <input type="button" value="旅行以外" onClick="functionAlbamSoftlist()">
  <input type="button" value="すべて" onClick="functionAlbamListAll()">
  <p id="idmokuji"><font color="#FFFFFF" style="background-color:#9999FF">javascriptで目次を読み込み中</font></p>
  <a href="#TOP">トップへ戻る</a><br>
  <input type="button" value="ブログ・トップページに移動" onClick="document.location='http://suikasuship.blog.so-net.ne.jp/';">
</body>
</html>  



javascriptファイル(ryokoumokuji.jsファイル)

    定数、グローバル変数部分
   CSVファイルの読み込みと配列への格納
   「年月」の検索キーを作成(画像①)
   「場所+α」の検索キーを作成(画像②)
   タイトル部を検索するテキスト入力エリアを作成(画像③)
   種類別の もくじ メイン
   配列から もくじ 用のhtml作成部分
   javascriptのメイン部分
 
画像①

mokuji_yymm.jpg
 
 
画像②mokuji_basho.jpg
 
 
画像③

mokuji_kensaku.jpg
       
 
var C_csvFileName = "./ryokoumokuji.csv";          //もくじcsvファイル名(utf-8 年、月でsort済とする)
var C_parentUrl   = "http://suikasuship.blog.so-net.ne.jp/";    //-------- ソネットブログの親url
 
//-------- dim_mokuji配列の構造
var C_mokuji_yyyy   = 0;        // 旅行した年(旅行以外は"")
var C_mokuji_mm    = 1;        // 旅行した月
var C_mokuji_place  = 2;        // 旅行した場所
var C_mokuji_title    = 3;        // ブログのタイトル
var C_mokuji_no      = 4;        // 補助sort番号(未使用)
var C_mokuji_url      = 5;        // ブログリンクurl
//--------
var Cyy  ;                           //現在の年
var CstartYY   = 2000;        //プルダウンの開始年
var dim_Place  = [];           //旅行場所
var dim_mokuji = [];         //csvから読み込んだ目次データの格納配列
 
//-------■ ryokoumokuji.csvファイルのオープン
function functionOpen_csv_file(csvFileName){
    var req = new XMLHttpRequest();
    req.onload = function(){                                       //onload(ファイルの読み込みが完了したら)
        if (req.readyState == 4 && req.status==200) { // 4=データ受信完了 200=OK
            functionCsv2dim(req.responseText);             //読み込みデータでdim_mokuji配列に格納
            functionAlbamListAll();                                //もくじを表示
        }
        else{
            alert("ryokoumokuji.csvファイルの読み込みエラー");
        }
    }
    req.open("get", csvFileName, true);                    //csvFileNameの読み込みを非同期通信(true)指定
    req.setRequestHeader('Pragma', 'no-cache');       //キャッシュファイルを無効にする
    req.setRequestHeader('Cache-Control', 'no-cache');
    req.setRequestHeader('If-Modified-Since', 'Thu, 01 Jun 1970 00:00:00 GMT');
    req.send(null);                                                 //読み込み開始指示
}
//-------■ 読み込んだcsvをdim_mokuji配列、dim_Place配列に格納
function functionCsv2dim(str){
    var tmp = [];
    var str = str.split("\n");
    for(var i = 0; i < str.length; ++i){        //行数分くり返す
        if(str[i].indexOf("#場所") == 0){       //dim_Place配列に検索用の文字列を設定
            tmp = str[i].split(',');                   //カンマ区切りのcsvを分解
            tmp.shift() ;                                //先頭(#場所)を削除
            Array.prototype.push.apply(dim_Place, tmp);    //dim_Place配列に追加
        }
        dim_mokuji[i] = str[i].split(',');                         //カンマ区切りのcsvを分解
        if(dim_mokuji[i][0].indexOf("#更新日") == 0){   //データ更新日時を取り出して画面に表示
            //htmlのidが"idupdate"の部分を置き換え
            var elem = document.getElementById("idupdate");    
            elem.innerHTML = dim_mokuji[i][1];;
        }
    }
}
//-------■ 旅行した年か月をキーに検索するリンクを作成
function functionAlbamYYMMlist(){
    var str = "旅行した年か月をキーに検索<br><font size='5'>";
    for(i = 1; i <= 12; ++i){
        tmp =  '<a href="javascript:functionAlbamListMM(\'@A@\')">@B@月</a> ';
        tmp = tmp.replace("@A@",i);
        str += tmp.replace("@B@",i);
    }
    str += "<br>";
    for(i = CstartYY + 1; i <= Cyy; ++i){
        tmp =  '<a href="javascript:functionAlbamListYY(\'@A@\')">@B@年</a> ';
        tmp = tmp.replace("@A@",i);
        str += tmp.replace("@B@",i);
    }
    str += "</font>";
    var elem = document.getElementById("idmokuji");    //htmlのid"idmokuji"を置き換え
    elem.innerHTML = str;
    //console.log('html   : %s', str);
}
//-------■ 旅行場所indexLISTの作成
function functionAlbamListPlace(){
    var str = "47都道府県 + α のキーで検索<br><font size='5'>";
    for(var i = 0 ; i < dim_Place.length ; ++i){
        tmp =  '<a href="javascript:functionAlbamListPlaceMake(\'@A@\')">@B@</a> ';
        tmp = tmp.replace("@A@",dim_Place[i]);
        str += tmp.replace("@B@",dim_Place[i]);
    }
    str += "</font>";
    var elem = document.getElementById("idmokuji");    //htmlのid"idmokuji"を置き換え
    elem.innerHTML = str;
    //console.log('html   : %s', str);
}
//-------■ 場所別のアルバムリストの作成
function functionAlbamListPlaceMake(place){
    functionAlbamListMake(C_mokuji_place , place , "");
}
//-------■ 全アルバムリストの作成
function functionAlbamListAll(){
    functionAlbamListMake(-1 , "all" , "すべて");
    functionTag_set();
}
//-------■ その他のアルバムリストの作成
function functionAlbamSoftlist(){
    functionAlbamListMake(C_mokuji_yyyy , "" , "その他");    //年が入っていないデータでアルバムリストの作成
    functionTag_set();
}
//-------■ //月に合致するアルバムリストの作成
function functionAlbamListMM(mm){
    functionAlbamListMake(C_mokuji_mm , mm , "月");
}
//-------■//年に合致するアルバムリストの作成
function functionAlbamListYY(yy){
    functionAlbamListMake(C_mokuji_yyyy , yy , "年");
}
//-------■ タイトル部を検索するテキスト入力エリアを作成

function functionLookUp(){
    var str = "<form name='LookUp_form' action='ryokoumokuji.htm'>" +
          "<input type='text' name='textbox'>" +
          "<input type='button' value='タイトル検索'" +
          "onclick='functionLookUpTitle()'>";
    var elem = document.getElementById("idmokuji");    //htmlのid"idmokuji"を置き換え
    elem.innerHTML = str;
    //console.log('html   : %s', str);
}
//-------■ タイトル部を検索して合致するアルバムリストの作成
function functionLookUpTitle(){
    var str= LookUp_form.textbox.value;  //テキストエリアの値を取得
    functionAlbamListMake(C_mokuji_title , str , "");
}
//-------■ dim_mokuji配列から指定されたアルバムリストの作成
//        iSearchDimSuffix    dim_mokuji配列の添え字(iSelectPulldownと比較する配列データを指定)
//        iSelectPulldown        検索する文字列(プルダウンで選択された文字列)
//        msg                    タイトル
function functionAlbamListMake(iSearchDimSuffix , iSelectPulldown , msg){
    var str = iSelectPulldown + msg + "のリスト";
    var gyou = 0 ;
    for(var i = 0 ; i < dim_mokuji.length-1 ; i++){               //dim_mokujiデータ分くり返し
        if(dim_mokuji[i][0].charAt(0) == "#")    continue;      //コメントはスキップ
        if(iSearchDimSuffix == C_mokuji_yyyy ||
           iSearchDimSuffix == C_mokuji_mm){
                if(dim_mokuji[i][iSearchDimSuffix] != iSelectPulldown){
                    continue ;        //指定された文字列以外はskip
                }
        }
        if(iSearchDimSuffix == C_mokuji_place ||        //場所別のアルバムリスト
           iSearchDimSuffix == C_mokuji_title){          //タイトル検索のアルバムリスト
            if(dim_mokuji[i][iSearchDimSuffix].indexOf(iSelectPulldown) == -1){
                continue ;                              //指定された文字列が無い
            }
        }
        str += '<div class="CELL' + (gyou % 2) + '">' ; // css class指定
        gyou = gyou + 1;
        //もくじhtmlの生成
        iMm = dim_mokuji[i][C_mokuji_mm];
        if(iMm != "")    iMm = " " + iMm + "月";
        iUrl = C_parentUrl + dim_mokuji[i][C_mokuji_url] ;
        iTitle = gyou + ". " + dim_mokuji[i][C_mokuji_title] + iMm;
        tmp = '<a href="@A@" target="_blank">@B@</a></div>';
        tmp = tmp.replace("@A@",iUrl);
        str += tmp.replace("@B@",iTitle);
    }
    if(gyou == 0)    str =  iSelectPulldown + msg +  " のリストはありません<br>";
    var elem = document.getElementById("idmokuji");    //htmlのid"idmokuji"を置き換え
    elem.innerHTML = str;
    console.log('html   : %s', str);
}
//-------■ 目次データの準備と初期もくじ表示
window.onload = function() {                     //onload(HTMLの読み込みが完了してから実行)
    iday = new Date();
    Cyy = iday.getFullYear();                       //現在の年を取得
    functionOpen_csv_file(C_csvFileName);  //ryokoumokuji.csvファイルの読み込みと初期もくじ表示
}
 
 
 
cssファイル(cellline.cssファイル)

div.CELL0{
 background:#7fffd4; border-top: 1px #000000 dashed; padding-top:4px; padding-bottom:4px;}
div.CELL1{
 background:#FFFFFF; border-top: 1px #000000 dashed; padding-top:4px; padding-bottom:4px;}

 

 

以上です。


もくじ ページにリンク


スポンサードリンク

タグ:JavaScript
nice!(2)  コメント(0) 
共通テーマ:旅行

「旅行アルバム用ブログ」の目次 [もくじ]

旅行写真を整理しているブログページが増えてきたので「もくじ」を作りました。(^。^)

mokuji.jpg
 
 
もくじ へリンク
 
 「もくじ」は以下の条件で表示します。
  ・旅行した「都道府県」
  ・旅行した「年」
  ・旅行した「月」
  ・指定した「文字列」を含むブログ(タイトル検索)
  ・「旅行以外」のブログもくじ
  ・「すべて」のブログもくじ 

目次ページの画面

mokuji01.jpg
 
 ・「場所+α」ボタンで表示する、旅行した「都道府県」の指定mokuji_basho.jpg
 
 ・「年月」ボタンで表示する、旅行した「月」か「年」の指定mokuji_yymm.jpg
 
 

・「検索」ボタンで指定する、「文字列」を入力して「もくじ」を表示。
  ブログのタイトルを検索します

mokuji_kensaku.jpg
・「旅行以外」ボタン、旅行以外のブログ「もくじ」を表示 
 
・「すべて」ボタン、すべてのブログ「もくじ」を表示 
 
 「もくじ」のページ例。(場所+αで栃木を指示した結果) mokuji_list.jpg


もくじはjavascriptで表示させています。


もくじ にリンク
 


スポンサードリンク

nice!(2)  コメント(0) 
共通テーマ:旅行
もくじ ブログトップ

旅行・観光ランキング