独学!Webサイト構築日誌

4日目:今朝もニートごっこ。

9:00

今朝も、もぞもぞニートごっこしてました。
...が!今日も頑張るぞ!

  1. 製品一覧の右側に矢印付けて一覧に飛ばす。
  2. 1日1回最新記事&ランキングを更新するように変更。
  3. メニューバーのcss整える。
  4. 製品にhovevr付ける。
  5. サイトマップ自動作成。

1.製品一覧の右側に矢印付けて一覧に飛ばす。

利便性上げてこ。アゲアゲ。


9:30

同じ関数を2回読み込んだらイケナイ、て知ってました?
見事に罠にかかってました。


10:00

...一旦付けてみましたが、思いのほかダサかったので削除。次。


2.1日1回最新記事&ランキングを更新するように変更。

これを実装する利点は下記2つ。

...てことで必須です。さて、どうやるかな。
これまでと同様に、一旦txt形式でどこかに保存しておいて、引っ張るのが良さそうですね。

10:30

途中だけど昼飯食ってくる。

12:00

昼飯終了&夕飯の仕込み完了。


13:00

でけた。爆速。

            
html ※一部抜粋。
<?php include("php/mojicheck.php"); include("php/showNew.php"); ?>
<?php newSave('all'); newSave('excel'); newSave('html-css-js'); newSave('other'); ?>
            
        
            
<div class="topPage">
<div class="middleBody">
    <h4><span class="nameTitle name1">新着</span></h4>
    <?php showNew('all'); ?>
    <h4><span class="nameTitle name2">Excel</span></h4>
    <?php showNew('excel'); ?>
    <h4><span class="nameTitle name3">html/css/JS</span></h4>
    <?php showNew('html-css-js'); ?>
    <h4><span class="nameTitle name4">その他</span></h4>
    <?php showNew('other'); ?>
</div>
            
        
            
php ※showNew.php全文
<?php
    function newSave($productType){
        /*新着用--------------*/       
        $newRecord = 'another/new_'. $productType. '.txt';
        if(file_exists($newRecord)){//存在チェック
            if(date("Y m d") == date("Y m d", filemtime($newRecord)) ){//同日
                return;
            }else{
                unlink($newRecord);//.jpg削除
            }
        }

        $newBody = '';
        $newBody = $newBody. '<div class="item3">';

        // 更新日時順で並び替える関数
        $sort_by_lastmod = function($a, $b) {
            return filemtime($b) - filemtime($a);
        };
        //配列に入れる
        if($productType=='all'){
            $files = array_merge(glob('excel/*.*'),glob('html-css-js/*.*'),glob('other/*.*'));            
        }else{
            $files = array_merge(glob( $productType. '/*.*' ));
        }
        $num = 0; //記事数
        usort( $files, $sort_by_lastmod );
        foreach( $files as $file ) {
            if($num<3){
                $categoryPart = explode("/", $file);
                $imgURL = 'img/'. $categoryPart[0]. '.jpg';
                
                //記事からタイトル取ってくる。
                $url = 'https://software.ki-luck.info/'. mojicheck($file);
                $html = mb_convert_encoding(file_get_contents($url), "utf-8", "auto");
                preg_match('@<title>(.*)</title>@', $html, $result);
                $baseTitle = explode("|",$result[1]);

                $newBody = $newBody. '<div class="productBody">'.
                    '   <a href="'. mojicheck($file). '">'.
                    '   <img src="'. mojicheck($imgURL). '" alt="pro1">'.
                    '   <div>'. mojicheck($baseTitle[0]). '</div></a>'.
                    '</div>';
                $num++;
            }
        }
        $file = null;//解放
        $newBody = $newBody. '</div>';
        file_put_contents( $newRecord, $newBody, FILE_APPEND | LOCK_EX);
    }
    
    function showNew($productType){/*ランキング--------------*/
        $newRecord = 'another/new_'. $productType. '.txt';
        $str = file_get_contents($newRecord);
        echo $str;
    }
?>
            
        

14:00

3.メニューバーのcss整える。

まったり緑茶を飲みながら完了。

            
css ※一部抜粋。
.nameTitle{
font-size: 120%;
color: #ffffff;
padding: 0 1rem;
border-radius: 0.5rem;
}
.categoryName0{
border:2px solid #000000;
border-radius: 0.5rem;
}
.categoryName1{
border:2px solid #0099FF;
background-color: #0099FF;
}
.categoryName2{
border:2px solid #006400;
background-color: #006400;
}
.categoryName3{
border:2px solid#FF9900;
background-color: #FF9900;
}
.categoryName4{
border:2px solid  #000080;
background-color: #000080;
}
header ul li {
width: 20%;
display: inline-block;
text-align: center;
text-decoration: none;
color: #000;
margin: 0 auto;
transition-duration:0.5s;
}
header .categoryName0:hover{
background-color:#333333;
color: #ffffff;
}
header .categoryName2:hover{
background-color:#ffffff;
color:  #006400;
}
header .categoryName3:hover{
background-color:#ffffff;
color:  #FF9900;
}
header .categoryName4:hover{
background-color:#ffffff;
color:  #000080;
}
            
        

4.製品にhovevr付ける。

15:00

できた。

            
css ※一部抜粋。
/*製品関連*/
.productBody{
  display: inline-block;
  width:20%;
  margin:0 1rem;
  vertical-align: top;
}
.productBody a{
  text-decoration: none;
}
.categoryPic{
  width:100%;
  box-shadow: 0 0 8px #000000;
}
.categoryPic:hover{
  transform: translateY(-5px);
}
            
        

5.サイトマップ自動作成。

先にユーザー用のを作りましょう。

16:30

できた。

            
html ※全文
<?php $title = "サイトマップ"; $description="サイトマップ"; ?>
<?php include("../php/header.php"); ?>
<?php include("../php/siteMap.php"); ?>
<div class="middleBody siteMap">
    <h1>サイトマップ</h1>
    <div class="nameTitle categoryName0"><a href="/">HOME</a></div>
    <br>
    <div class="mapCon"><a href="another/index_excel"><span class="nameTitle categoryName2">Excel</span></a>
        <?php siteMap('excel'); ?>
    </div>
    <div class="mapCon"><a href="another/index_html-css-js"><span class="nameTitle categoryName3">html/css/JS</span></a>
        <?php siteMap('html-css-js'); ?>
    </div>
    <br>
    <div class="mapCon"><a href="another/index_other"><span class="nameTitle categoryName4">Other</span></a>
        <?php siteMap('other'); ?>
    </div>
    <div class="mapCon"><span class="nameTitle categoryName0">...etc</span>
        <div>  ┗ <a href="../another/privacy-policy.html">プライバシーポリシー/免責事項</a></div>
        <div>  ┗ <a href="../another/contact.html">お問い合わせ</a></div>
        <div>  ┗ <a href="../another/sitemap.html">サイトマップ</a></div>
    </div>
    <br><br><br>
</div>
<?php include("../php/footer.php"); ?>
            
        
            
php ※siteMap.php全文
<?php
    function siteMap($category){
        $files = glob('../'. $category. '/*.*');
        foreach($files as $file){
            $response = @file_get_contents($files, NULL, NULL, 0, 5);
            if(empty($response) == true){//存在チェック
                //相対パス→絶対パス
                $baseTitle=explode("../",$file);
                $file= 'https://software.ki-luck.info/'. $baseTitle[1];
                //記事からタイトル取ってくる。
                $html = mb_convert_encoding(file_get_contents($file), "utf-8", "auto");
                preg_match('@<title>(.*)</title>@', $html, $result);//$result[1]に抽出結果。
                $baseTitle = explode("|",$result[1]);
                echo '<div>  ┗ <a href="'. mojicheck($file). '">'. mojicheck($baseTitle[0]).'</a></div>';
            }else{
                break;
            }
        }
        $file=null;//解放    
    }
?>
            
        
            
css ※一部抜粋。
/*サイトマップ*/
.siteMap a{
    text-decoration: none;
}
.siteMap .mapCon{
    display: inline-block;
    vertical-align: top;
    width: 45%;
    padding:0 1rem;
}
.siteMap .nameTitle{
    display: inline-block;
    width: 90%;
    margin:1rem;
}
            
        

新しい技術はありませんが、mb_convert_encodingを使うときに相対パスだと判定してくれないので、絶対パスに変える必要があります。


PC用は前回を参考にちゃちゃっと完了。


さて、この後は保留している本が7冊程あるので、可能な限り読み終えようと思います。
にしても、終日晴れてるのに寒くない?

おつかれ~。



Before: 3日目

Before: 3日目

After: 4日目

After: 4日目



作成日:2021/02/04 - 更新日:2021/02/05

≪ 3日目≪ 一覧に戻る ≫5日目 ≫

HOME > 新日誌一覧 > 4日目:今朝もニートごっこ。