// simpleNavi 20221031 koyama88@cameo.plala.or.jp // // 20221001 (1) CookieからWebStorageに変更 (2) Newの表示 (3) ?キーワード // simplenavi.jsを準備し、htmlは以下参考 // // // // // // simpleNavi // // // //

//
// //
//
// // // // // 使い方: // 1. ジャンルの一覧が表示され、それぞれのジャンルに▼印が付く // 2. ▼をクリックすると見出しの一覧が表示される // 3. 見出しの[リンク]をクリックすると設定されたページにジャンプする // 4. 見出しの[photo]をクリックするとPHOTO画面に切り替わる // 5. PHOTO画面の画像(jpg,png,gif)をクリックするとその画像が新しいタブで表示される // (ただし巨大画像を「width=」で指定した場合は表示しない) // 6. 「○○.html?白神」のようにキーワードを指定するとPHOTO画面を直接呼び出せる // (従来どおり「○○.html?kw=白神」でもよい) // // NAVIDATAの書き方: // タブなしの行は「ジャンル」で、タブ区切りでurlを書けばリンクとなり、また次行以降に見出しがあれば▼が表示される // タブ1段の行は「見出し」(ただし[...]は「分類名」)で▼のクリックでその一覧が表示される // タブ区切りでurl(複数可)を書けば表示箇所がリンクになる // タブ2段(以上)の行は「見出し」に対応する「画像(jpg,png,gif,mp4)」または「説明テキスト」 // [photo]の表示が出てクリックでPHOTO画面に切り替わる // タブ区切りで複数の画像を横に配置(幅は自動調整) // 複数行を記載可 // 行頭が「//」ならその行はコメント // 画像の一部を切り出して表示する記載例 // 20221018 // (map.pngの表示領域を 左上の座標 X=1000px Y=800pxでサイズ 600px × 400px とする場合) // map.png width=600 height=400 style='object-position:-1000px -800px;object-fit:none;' // 作成されるメニューデータ: // 20221001 New表示のために「更新日」を追加 // menu=[ // [ // menu[0] // ジャンル, url, // menu[0][0], menu[0][1] // [更新日,見出し,[url1,url2,...],[画像,...],[画像,...],...], // menu[0][2][0～] // ... // [更新日,見出し,[url1,url2,...],[画像,...],[画像,...],...] // ],[ // menu[1] // ... // ] // ]; var ExpGenre=2*60*60*1000; // ジャンルの有効期限は2時間 var ExpNew=30*24*60*60*1000; // New表示の期限は30日 var NEWstr="New"; // Newのデザイン var TITLE; var menu=[], lastMenu; window.onload=function(){ // localStorage.clear(); // *** localStorageの初期化 *** with(document.body.style){ lineHeight="140%"; margin="0"; padding="0";} // 全体のstyle $("CONTENT1").style.display=""; $("CONTENT2").style.display="none"; // 初期表示 $("NAVIDATA").style.display="none"; // 20220320 NAVIDATAを非表示 var text=$("NAVIDATA").value; // 20220320 iframeからtextarea(NAVIDATA)に変更 var line=text.replace(/\r\n/g,"\n").replace(/\s+\n/g,"\n") .replace(/^\n+/,"").replace(/\n+$/,"").split(/\n+/); // 改行記号を統合 行末のスペースを削除 冒頭の空行を削除 末尾の空行を削除 改行で分割 var item=[], depth=[]; for(var i=0;i1?item[i][1]:"")]); // ジャンル名とurl }else if(depth[i]==1){ // タブ1段は新規見出し var url=[]; for(var j=2;j=2){ // タブ2段(以上)は画像やテキスト menu[menu.length-1][menu[menu.length-1].length-1].push([]); for(var j=1;j"+menu[i][0]+""; }else s+="
  • "+menu[i][0]; if(menu[i].length>2){ s+=" "+(i==genre?"▲":"▼")+""; s+=""+(i==genre?"":NewGenre(i))+""; // 20221001 genreのNew表示 s+=""; } s+="

    "; } $("MENU").innerHTML=s+""; var params=getParams(); // 20210522 index.html?kw=北アルプス if(params["kw"]) // 20221001 index.html?北アルプス も可 for(var i=0;iGo"; S+="

    "; var S1=""; console.log(menu[i][j].length) for(k=3;k]*$/))){ // S1にまとめて if(menu[i][j][k][0].match(/^\(.*\)$/)) S1+="
    "+menu[i][j][k][0]+"
    " else if(menu[i][j][k][0].match(/^\[.*\]$/)) S1+=menu[i][j][k][0].replace(/^\[(.*)\]$/,"

    --- $1 ---

    "); else S1+="

    "+menu[i][j][k][0]+"

    "; }else{ if(S1!=""){ // S1を表示(行頭を揃える) S+="
    "+alignstr(S1)+"
    "; S1=""; } S+=""; for(var l=0;l") +"
    "; }else{ S+=""; } }else if(menu[i][j][k][l].match(/\.mp4/)){ // 動画 S+=""; } } S+="
    " +"" +"" +""+alignstr(menu[i][j][k][l])+"
    "; } } if(S1!=""){ // S1を表示(行頭を揃える) S+="
    "+alignstr(S1)+"
    "; } S+="
    "; $("CONTENT2").innerHTML=S; $("CONTENT1").style.display="none";$("CONTENT2").style.display="";// コンテンツ表示 window.addEventListener('popstate', function(e){ // [戻る]操作で document.title=TITLE; // タイトルを復旧 $("CONTENT1").style.display=""; $("CONTENT2").style.display="none";// 初期表示 }); history.pushState(null, null, location.href); // [戻る]操作で現在ページ } function alignstr(str){ return "
    "+str+"
    "; } function expand(id){ for(var i=0; i2){ $("MENU"+id).style.display="none"; $("NAVI"+id).innerText="▼"; $("NEW"+id).innerHTML=NewGenre(id); // 20221001 ジャンルにNew表示 } } function getParams(){ var params=new Array(); if(location.search){ var requests=location.search.substring(1).split("&"); for(var i in requests){ var items=requests[i].split("="); if(items.length==2) params[items[0]]=items[1]; else params["kw"]=items[0]; } } return params; } function setWS(name, value, expdays){ // 20221001 WebStorageへの保存 var ws_name=location.pathname+"_"+name; if(expdays==null) expdays=0; else expdays+=Date.now(); var ws_value={"value":value, "expdays":expdays}; //alert("set:"+ws_value.expdays) localStorage.setItem(ws_name, JSON.stringify(ws_value)); } function getWS(name){ // 20221001 WebStorageからの取得 var ws_name=location.pathname+"_"+name; var ws_value=JSON.parse(localStorage.getItem(ws_name)); if(!ws_value) ws_value={"value":0, "expdays":0}; //alert("get:"+ws_value.expdays); if(ws_value.expdays==0 || Date.now()