独学!Webサイト構築日誌

12日目:また本気出す。

9:00

ちょっと冬眠したくなるぐらい今日も寒いですが、頑張っていきましょう。
  1. ファビコン設定。
  2. 日誌ごとの画像一覧。
  3. 検索フォームの作成。
  4. パンくずリストの作成。
  5. サイト内で評価順に条件ソート。

1.ファビコン設定。

ファビコンのhtmlicoファイルの作成方法参考。他のページにも同様に貼り付けて終了。
※head部分に入力してね。headerじゃないよ。
            
html
<link rel="icon" type="image/vnd.microsoft.icon" href="../img/icon.ico">
            
        

10:00

2.日誌ごとの画像一覧。

現在文章で一覧を作っていますが、日誌ごとに画像があるので、画像ごとの一覧を作りたいと思います。歯抜け状態で画像が無い日は、適当に画像をあてがいましょう。

11:00

JSで画像一覧は出来ましたが、見栄えが悪いのと、タイトルも併せて表示したいので、昼飯後に。

12:00

奥歯~喉にかけて、大きな内出血発見。唾のみ込むだけでも痛いです。内科の診療時間終わってるので明日行こう…。

14:00

プログラム=世界一優秀な指示待ちくんだな!
たった1カ所入れ替えるだけで2時間も掛かったぞwww
画像と説明文の参考サイト。
            
css
div.pic_frame {
display: inline-block;
text-align: center;
margin: 0 1rem 2rem 0;
width: 30%;
}


JS
for(i=0;i<=12;i++){//全日の画像を格納
let picsURL = '../diary/day' + i + '.html';
let allpics_src = '../img/day' + i + '.jpg';
//    let allpics_title = picsURL.getElementsByTagName('h1')[0].childNodes[0].nodeValue;
document.write(
'<div class="pic_frame"><p><a href="' + picsURL + '" target="_top"><img class="all-pics" src="' + allpics_src + '" alt="day' + i + '" title="day' + i + '"></p></a><p><a href="' + picsURL + '" target="_top">' + i + '日目</p></a></div>'
)
}
            
        

15:00

手作業で配置するのが面倒だったので、jsで実装しています。数が10程度ならhtmlで手書きの方が良いと思う。
リンク先のタイトル(h1)を自動で取得しようと頑張ってみたんですが、今のところ解決策が見つからないので後回しにします。

3.検索フォームの作成。

Google先生が簡単に設置できるものを提供してくれているようですが、頼りきるのは嫌なので手作りしていきましょう。

16:30

JSだけだと、現在開いているページの操作ぐらいしか出来ないようなので、PHPとか他の言語が必要みたい。2.のタイトルも同じ理由ですね。
無理やり全部のリンクを開いて、indexOfで引っ張ってくることも出来そうですが、考えただけでも動作が重すぎるので、これも飛ばします。

4.パンくずリストの作成。

ココを参考にしていただければ分かる通り、htmlで作成すること自体は簡単なようで、Googleの検索エンジンに有効な作り方も詳しく記載してくれています。
…が、上記の方法だと随時手直しが必要なので面倒。PHPでカテゴリー分けした後に、動的に変化させたいな、てことで後回し。

18:00

5.サイト内で評価順に条件ソート。

今日はこれで最後にしよう。
直近で必要になるわけではないが、今後使う予定があるので知識として作成してみる。夕飯食ってから。

20:30

よし、やるぞ。
これまた動的に配列内容を変更したいので、ココを参考に初っ端から変数を突っ込む。ちなみに変数使わないやつは簡単なので、自分でやってみてね。
・テーブルから値取得
・ソート
・結果上書き の流れ。

…さて。
この文章は翌日(2020/12/25)に書いていますが、結論からいうと上記のオブジェクト{}を使う方法では実装していません。多次元配列(2次元)に値を代入して、並び替え変えた方が自分にとって理解しやすく、変更も楽だと考えたためです。ちょっと長くなりますが、詳細は下記。
実装物はコチラ。
            
html
<table id="itembox">
<thead>
<tr>
    <th><input type="button" value="商品名" onclick="btnClick(1)" /></th>
    <th><input type="button" value="在庫数" onclick="btnClick(2)" /></th>
    <th><input type="button" value="価格" onclick="btnClick(3)" /></th>
</tr>
</thead>
<tbody>
<tr>
    <td>あんず</td>
    <td>10</td>
    <td>200</td>
</tr>
<tr>
    <td>なし</td>
    <td>7</td>
    <td>1500</td>
</tr>
<tr>
    <td>いちじく</td>
    <td>5</td>
    <td>90</td>
</tr>
<tr>
    <td>かき</td>
    <td>15</td>
    <td>100</td>
</tr>
</tbody>
</table>

JS
//商品ソート
let baseBox = document.getElementById('itembox');
let baseRows = baseBox.rows.length;//テーブルの行数
let baseCells = baseBox.rows[0].cells.length;//テーブルの列数
let items=[];

//テーブルの値全部格納
for(let i=1;i<baseRows;i++){//行 縦方向
items[i]=[];
for(let j=0;j<baseCells;j++){//列 横方向
items[i][j] = baseBox.rows[i].cells[j].textContent;
}
}

function btnClick(btn){
let Xaa = 0;
if(btn == 1){//文字列のソート
Xaa = 0;
items.sort(function(a,b){
if(a[Xaa] < b[Xaa]) return -1;
if(a[Xaa] > b[Xaa]) return 1;
return 0;
});
}else{//数字のソート
if(btn == 2){
Xaa = 1;       
}else if(btn == 3){
Xaa = 2;
}
items.sort(function(a,b){
return a[Xaa] - b[Xaa];
});
}

//ソートで並び替えを行うと、空白の配列に要素がズレるので、items[i-1][j];
for(let i=1;i<baseRows;i++){//行 縦方向
for(let j=0;j<baseCells;j++){//列 横方向
    baseBox.rows[i].cells[j].textContent = items[i-1][j];
}
}
}
            
        

後述1:比較方法について。

下図を見ると分かる通り、正しく比較出来ているのは、文字列比較:不等号、在庫数・価格比較:減算のときだけです。なので、今回の仕様では、文字列(btn==1)かで場合分けし、そのあと数字(btn==2 or 3)で再度場合分けしています。

after

後述2:配列ズレについて。

上記の後述1の内容については、下記のように強引に内容を確認しました。
                
JS
alert('0: '+items[0][0]+' '+items[0][1]+' '+items[0][2]); 
alert('1: '+items[1][0]+' '+items[1][1]+' '+items[1][2]); 
alert('2: '+items[2][0]+' '+items[2][1]+' '+items[2][2]); 
alert('3: '+items[3][0]+' '+items[3][1]+' '+items[3][2]);
alert('4: '+items[4][0]+' '+items[4][1]+' '+items[4][2]);
                
            
その際に、for文はi=1で1から開始しているので1-4に格納されるかと思いきや、0-3に値が格納されており、4は空白に変わっていることに気が付きました。
元々i=0を省略した理由としては、1行目(配列で考えると0行目)に項目が入っており、比較する内容ではないためですが、比較の際には空白も比較対象として扱われるのか、後述1のようにi=0部分に詰めた状態になっています。
その為、ソート内容を戻してやる際には items[i-1][j]; のように(i-1)と1つ引いてやる必要があります。i=2で始める場合は、(i-2)で上手く行くはずです。



深夜1:00

仕様自体は完成していますが、ちょっと情報量が多いので、明日にでも丁寧にまとめます。



Before: 11日目

Before: 11日目

After: 12日目

After: 12日目



作成日:2020/12/24 - 更新日:2021/01/26

≪ 11日目≪ 一覧に戻る ≫13日目 ≫

HOME > 日誌一覧 > 12日目:また本気出す。