独学!Webサイト構築日誌

10日目:仕上がって来てるんでは

9:00

おはようございます。
今日は少し温かくて嬉しいです。

私、肩が凝ったこと殆どない人生だったのですが、ここ1週間は痛みを感じるほど肩凝ってまして…その対策として1時間に1回は席を経って何か別のことをしようと思います。健康的に生きたいよね。

あ。今後JavaScript=JSて記載するのでよろしく。 今日の目標はコチラ!
  1. 投稿日、更新日の自動入力。
  2. 前へ、次へボタンをすべてJSで。
  3. Twitterの遅延読み込み。
  4. スライドショーの作成。
  5. スライドショーにリンク付与。
  6. 前へ、次へボタン装飾。

1.投稿日、更新日の自動入力。

投稿日の自動入力に関してはJSで実装するのは無理そう。本文自体を弄るか、どこかに値を保持し続ける必要があるので、そりゃ無理か。

10:45

でけた。
            
html
<script src="../js/update-time.js"></script>


css
/*更新日*/
.update-time{
text-align: right;
}


JS
//最終更新日
let lastDay = new Date(document.lastModified);
document.write(
'<p class="update-time">更新日:' + lastDay.toLocaleDateString() + '</p>');
            
        

2.前へ、次へボタンをすべてJSで。

出来た。ので、全部の既存データに適用していく。
            
JS
let frontTextNo = location.href.indexOf('/diary/day');
let backTextNo = location.href.indexOf('.html');
let nowTextNo = Number(location.href.substring(frontTextNo+10,backTextNo));//現在の日付 数値変換
let fileLink = location.href.substring(frontTextNo+10,0);//~~dayまでのURL
let backDay = nowTextNo-1;
let nextDay = nowTextNo+1;

if(nowTextNo=0){//0日のとき
backText ='TOP画面';
backURL = 'https://ki-luck.info';
}else{
backText='≪ '+ backDay + '日目';
backURL = fileLink + backDay + '.html';
}
nextText=nextDay + '日目 ≫';
nextURL = fileLink + nextDay + '.html';

document.write(
'<p class="back-next">' +
'<a id="diary-back" href="' + backURL + '" target="_top">' + backText + '</a>' +
'<a id="diary-all" href="../other/diary_index.html" target="_top">日誌一覧</a>' +
'<a id="diary-next" href="' + nextURL + '" target="_top">' + nextText + '</a>' +
'</p>'
)
            
        
・JS内で「"」を使うとき、「'」で囲うと文字として扱ってくれる。逆も然り。
・数字を扱うとき、Number()で数字に直していても文字扱いに戻ってしまうことがあるので、先に別途計算したものを変数として渡してやると良い。
・時刻についてはココを参考にした。自分の好みで良いと思う。




…今思ったんだが、JSゴリ押しでWebサイト作れるな…と。
JS拒否られたら白紙ページになるかw

11:30

3.Twitterの遅延読み込み。

遅延種類についてはココを参考にした。deferを最後に加えただけ。
            
<a class="twitter-timeline" data-width="300" data-height="700" data-theme="light" href="https://twitter.com/ki_luck_master?ref_src=twsrc%5Etfw">Tweets by ki_luck_master</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8" defer></script>
            
        

4.スライドショーの作成。

すんごい雑なのが出来たので、食後に手直ししようw

13:00

した。 …が。
別件でエラーが発生したようなので、一時中断。

18:30

ちょっと時間かかりましたが、どうにか修正終わりました。

5.スライドショーにリンク付与。

            
html
<a id="slideURL" href="https://ki-luck.info" target="_top"><img id="slidePic" data-src="../img/title.jpg"></a>
<!-- ココからJavaScript読み込み -->
<script src="../js/slide-show.js"></script>


JS
//スライドショー
const pics_src = ['../img/day1.jpg'];
for(i=1;i<=10;i++){//全日の画像を格納
pics_src[i-1]='../img/day' + i + '.jpg'
}
function slideshow_timer(){
let num = Math.floor(Math.random() * pics_src.length);//ランダム抽出
document.getElementById("slidePic").src = pics_src[num];
document.getElementById("slideURL").href
='../diary/day' + num + '.html'

}
setInterval(slideshow_timer, 2000);
            
        
htmlでベースを作っておいて、JSで変更するという流れを覚えればそんなに難しい話じゃないな、と。


・・・わざわざスライドショー作ったにも関わらず、「必要なのか?」という疑問が拭え切れないので、これ見よがしにTOPページに載せることにした。

6.前へ、次へボタン装飾。

今のままだと寂しいのでちょっと装飾。


・・・なんかウニウニ動くようになったwww
思うようにならんから、見せしめにこのままにして終わる。



Before: 9日目

Before: 9日目

After: 10日目

After: 10日目



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

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

HOME > 日誌一覧 > 10日目:仕上がって来てるんでは