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

オーストラリア2002:3日目(ケアンズに移動、熱帯植物園とバンジージャンプ) [旅行:オーストラリア]

シドニーから飛行機でケアンズに移動して海岸近くのホテルにチェックイン。
その後は、ケアンズから10分ぐらいの熱帯植物園と
バンジージャンプも近くにあったようですが写真を撮っていませんでした
 
 
1.ケアンズ  マトソンリゾートホテル
PA121207a.JPG 
 
2. 上の写真の後方
PA121207b.JPG 
 
3.ホテルにチェックインする前にケアンズ市内を車で案内してもらいました。
目の前が海岸です。
 
 


 

続きを読む


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

オーストラリア2002:2日目続き(シドニー・タワー、ナイトクルーズ) [旅行:オーストラリア]

シドニーに帰ってきてシドニー・タワーに登った後、ナイト・クルージングの晩御飯でした。(^。^)
 
 
 
1.シドニー・タワー:高さ309m、2011年にシドニー・タワー・アイに名前を変更しています。
PA111082.JPG 
 
2.
 PA111093.JPG
 
3.
PA111102.JPG 
 
4.初日に観光したセント・メアリー大聖堂
PA111105.JPG 
 

続きを読む


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

オーストラリア2002:2日目(ブルーマウンテン、コアラ、目つきが悪い鳥、お母さんカンガルー) [旅行:オーストラリア]

シドニーから車で約2時間のブルーマウンテンに行った後で
動物園でコアラ、笑いカワセミ?(目つきが悪い)、お母さんカンガルー、ウォンバットと会いました。
 
・ブルーマウンテン:ユーカリの葉から蒸発したオイル成分が大気中で青ずんで見えることからその名が付いたとのこと。


・3シスターズ:美しい3姉妹が、村の長老によって岩に変えられてしまったというアボリジニの伝説


・Featherdale Wildlife Park:シドニー市で野生動物観察が体験できる。
 
 
1.シドニーから車で約2時間のブルーマウンテン。3シスターズもなんとか見えます。
PA111045.JPG 
拡大

PA111045a.JPG

  
2.展望台に降りるケーブルカーに乗車
PA111045b.JPG 
 
3.展望台に降りるケーブルカー(23秒無音)
 
 

続きを読む


nice!(3)  コメント(2) 
共通テーマ:旅行

オーストラリア2002:1日目続き(シドニーでのホテル、シドニー・セント・メアリー大聖堂) [旅行:オーストラリア]

昼を食べた後はホテルにチェックインしてから教会を見学したりして晩御飯まで市内を散歩しています。

 
 
1.シドニーでのホテル
PA100957.JPG 
 
2.
PA100957b.JPG 
 
3.ホテルの窓からの景色
PA100962.JPG 
 

続きを読む


nice!(3)  コメント(1) 
共通テーマ:旅行

オーストラリア2002:1日目(シドニー、オペラハウス、モータボートからのシドニー湾、ギャリソン教会) [旅行:オーストラリア]

2002年、オーストラリア。
シドニーとケアンズに宿泊、コアラ抱っこ、キュランダ・スカイレール、グレートバリアリーフでヘリコプターに乗って観光、最終日は蟻塚を見たりブーメランしています。

 

 

初日、オペラハウスからモーターボートでハーバーブリッジの下を通り、
昼を食べてからロックス・エリアのホーリートリニティ教会を見学しています。
 
 
1.オペラハウス
PA100841.JPG 
 
2.オペラハウスからのシドニーのビル
PA100845.JPG 
 
3.オペラハウスからのハーバーブリッジ
PA100847.JPG 
 

続きを読む


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

富士山・富士宮口五合目の駐車場、河口湖、精進湖、本栖湖方面から(2003) [旅行:山梨]

1. 10月10日ですが雲が多い。
PA105712.JPG 
 
2.富士宮口五合目の駐車場(富士スバルラインと違って無料でした(^。^))
PA105712b.JPG 
 
3.
 PA105712c.JPG
 
4.
PA105785.JPG
 

続きを読む


nice!(3)  コメント(1) 
共通テーマ:旅行

「旅行アルバム用ブログ」の目次: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) 
共通テーマ:旅行

荒船山の絶壁、艫(とも)岩(2005) [旅行:群馬]

ドライブの途中、荒船山を撮りました。

艫(とも)は船の後部。船尾だそうです。

 
 
1.IMG_7829.JPG
 
 
2.IMG_7833.JPG
 
 
3.IMG_7847.JPG
 
 

続きを読む


タグ:荒船山 艫岩
nice!(2)  コメント(2) 
共通テーマ:旅行

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

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

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

目次ページの画面

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

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

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


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


もくじ にリンク
 


スポンサードリンク

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

西伊豆・富士山の写真11枚(2006) [旅行:静岡]

両親との家族旅行で西伊豆に一泊2日。

〇 の付いている写真は富士山が見えます。(^。^)


1.温泉ホテルの晩御飯ですIMG_2175.JPG
 
 
2.碧(みどり)の丘IMG_2204.JPG
 
 
3.〇IMG_2205.JPG
 
4.〇IMG_2215.JPG
 
 

続きを読む


nice!(2)  コメント(1) 
共通テーマ:旅行

旅行・観光ランキング