たわごとの記～耽溺者の備忘録～

9/10/2024

更に画像一覧を見易くした

サーバのディレクトリ内の画像一覧を表示するのに画策してて、つい昨日「完璧だ」とか言ってたけど、画像同士がくっついてるのは見づらいので、CSSファイルで隙間開けた

span {
    margin: 5px
}

今度こそ完璧だ

9/09/2024

画像一覧を見易くした

数日前にサーバのディレクトリ内の画像を一覧できるようにした

サーバ内の画像一覧をブラウザで表示する

でも縦にずらっと並んでるのは見づらいので、画像名の表示は止めて、サムネイル画像だけが並ぶように修正

// ディレクトリ内の画像を表示する
while($file_name = $dir_name->read()){
    $path = $dir_name->path . "/" . $file_name;
    if (@getimagesize($path)){
        echo "<span><a href=\"$url" . $file_name . "\" target=\"_blank\">";
        echo "<img src=\"$url" . $file_name . "\" height=\"150\" title=\"$file_name\"></a></span>";
    }
}

サムネイル選択時には左下にURLが表示されるが、titleタグを使えば画像名がツールチップで出てきて、サムネイルをダブルクリックすれば元画像が開いてダウンロードもできる・・・完璧だ

9/08/2024

WordPressの削除

このブログを再利用するコトにしたので、WordPressの方は使用しなくなり、削除した

まず、画像データだけは何か別で使ってるか、あるいは今後使うかもなので、wp-content/uploadsはディレクトリごとダウンロードしておき、WordPressのトップディレクトリ内をすべて削除（自分はディレクトリ毎ごと削除した）

あとはデータベースで必要なモノ（wp-postなど）を一応.sqlファイルでダウンロード（エクスポート）しておいてから、削除

エクスポートしたwp-postデータ、開いてみたらとか、<figure class=\"wp-block-image size-full is-resized\">とか、勝手に挿入されたタグだらけになってたので、必要なテキスト部分だけを再利用するには、それらを一括削除しないとな～

9/07/2024

ルートディレクトリから始まる完全なパスの調べ方

まあドキュメントルートがわからなくても、PHPでエラーになればエラー箇所がどこにあるか、ルートディレクトリから始まる完全なパスを表示してくれるからそれでわかるのだが、事前に調べるコトももちろんできる（余りちゃんと事前に調べたことはないがね）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>パス表示</title>
</head>
<body>

<p>現在のスクリプトのディレクトリパスを表示</p>

<?php

echo __DIR__;

?>

<p>サーバのドキュメントルート（ルートディレクトリ）を表示</p>

<?php

echo $_SERVER['DOCUMENT_ROOT'];

?>

</body>
</html>

いや、HTMLにする必要は実際無くて、PHPの部分だけで十分なのだが、こうして並列して表示した方が違いがわかり易いのでね

ちなみにこのHTMLファイルをWEBのトップディレクトリに置けば、どちらも同じパスが表示される

それにしても「サーバの中身を扱うには、やはりPHPだよな」と2024年になっても思ってる自分はもうWEBの最先端からは遠いよな・・・

PythonのFlaskやDjangoなんかのフレームワーク使うのが一般的になるのは、近年のPython人気とそれに比してPHPの凋落ぶりからして、目前な気がする

ヨユーが出来たら、この辺をやってみようか・・・

9/06/2024

サーバ内の画像一覧をブラウザで表示する

サーバ内にある画像の一覧をブラウザから閲覧出来て、その際には画像のサムネイルと画像名が表示されて、画像をクリックすれば元のサイズで表示できるとなれば便利だろうと考えて、PHPでプログラム部分を書いて、こんなHTMLファイルをアップ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>画像一覧</title>
</head>
<body>

<p>画像一覧</p>

<?php

// ディレクトリ名(アップロード先に書き換える)
$dir_name = dir("/ルートディレクトリの完全なパス/gazo");
$url = ("https://ドメイン/gazo/");

// ディレクトリ内の画像を表示する
while($file_name = $dir_name->read()){
    $path = $dir_name->path . "/" . $file_name;
    if (@getimagesize($path)){
        echo "<a href=\"$url" . $file_name . "\" target=\"_blank\">";
        echo "<img src=\"$url" . $file_name . "\" height=\"150\"></a> ";
        echo "<p>$file_name</p>";
    }
}
$dir_name->close();

?>

</body>
</html>

これを画像がアップロードされてるディレクトリに置いて、URLをブラウザから開くと・・・

画像をクリックすると元画像が別タブで開く

HTMLで作成してあるので、CSSで見栄えよくしたら、サイトの１ページとして成り立つだろう

9/05/2024

画像の整理でまず拡張子を統一する

JPGとjpgが混在してると、プログラムで拾うのがメンドウだし、そもそもファイル名は基本的に全部小文字としておいた方が、間違える心配がなくていい

そこで変換バッチを使う

ren *.JPG *.jpg

エディタに上記のように書いて、例えば henkan.bat などと名前を付けて保存

これをJPGとjpgが混在してるフォルダに置いて、ダブルクリックすればすべてのファイルの拡張子が.jpgに統一される

【BEFORE】

　　↓↓↓

【AFTER】

但し、瞬間には変わらず、一旦、フォルダを閉じて開き直すと変わってる

9/04/2024

メディアクエリでモバイル表示対応

「本の旅」サイトはモバイル用の表示が酷い

右に寄っちゃってるし、横スクロールしないと読めぬ
幅が768px以下のブラウザでは、100％表示になるようにしよう

HTMLの構成がこんなで・・・

<!DOCTYPE html>
<html lang="ja">

<head>
    <link rel="stylesheet" href="hon-dana.css?<?php echo filemtime('hon-dana.css'); ?>" type="text/css">
</head>

<body>

<article>

    <header>

        <h1>本の旅</h1>

        <nav>
        目次
        </nav>

    </header>

    <section>

    </section>

    <footer>

    </footer>

</article>

    <script src="hon-dana.js"></script>

</body>

</html>

CSSでメディアクエリだな、article（本文部分）がブラウザの幅768px以下の表示に100％を指定

article {
    width: 768px;
    margin: 0px auto;
    padding: 0px;
    background: #fff;
    text-align: center;
}

@media (max-width: 768px) {
    article {
        width: 100%;
    }
}

で、100％表示されるようになった

それと背景色も真っ白（#fff）だったのを#e0f7ffに変更した

9/03/2024

「本の旅」サイトの引越し

昨年、よく考えずにhon-no-tabi.siteなんてドメインとって、「本の旅」なるサイトを新たに作ったのは、最終的に本に関するサイトをそこに統合する目論見があった

しかし、ちゃんとしたサイトに作り過ぎたせいで、更新がメンドウになってしまい、放置気味になってたし、ここは殆どアクセスが無かったので、今回、ドメイン解約して、サイトは新しいドメイン下に引っ越すコトにした

ついでに放置してるサイトも新しいドメイン下に持ってきて、要は2つのサイトを融合させてしまおうかなんて思いついたが、ふとGoogle Search Consoleを確認してみると、以外とアクセス数は多いのだった！

以前は確かにこのサイトからｱﾏｿﾞﾝでポチッとしてくれる方がいたので、まあそこそこアクセスはあるのかと思ってはいたが、今年はもうｱﾏｿﾞﾝのアフィリエイトリンクの画像が仕様変更で全部消えてしまい、貼り直してもいないからｱﾏｿﾞﾝからの収益は限りなく0に近くなったので、アクセス自体も減ったのだと思ってたがそうでもなかった！！

そうするとむやみに動かさずに、同じディレクトリ（URL）のまま、リンクの張り直しした方が良さそうな気が・・・

そして「本の旅」だけ無事に引っ越しを終えたが、このサイトモバイルファーストじゃなかったのだな、CSS書き換えなきゃ～

9/02/2024

「サイト引っ越しました」のお知らせはどう出す？

「ホームページ〇〇は引っ越しました」というお知らせを出したコトがある人、昔ならmetaタグに以下のように書いてたであろう、かくいう自分もそう

<meta http-equiv="refresh" content="30;URL=https://hachikuma.tan-deki.com/">

URLの前にある30は30秒って意味で、30秒待ってると自動的に新しいURLが開くけど、たいていはそこでじっと待たずにサイトに表示されてるリンクから開くよね

bodyタグにJavaScriptを書く方法もある

<body onload='setTimeout(function(){
    location.replace("https://hachikuma.tan-deki.com/");
    }, 3000);'>

この場合は3秒後に自動的に新しいURLを開こうと思ったら3000（ミリ秒）だ

サーバによっては.htaccessで飛ばすのも可能だが、そうするとユーザは旧サイトのページは開かずに新しいサイトが開いてしまうので、新しいURLになってるとは気付きにくいと思われ

9/01/2024

デザインが決まるまでCSSファイルの更新日時を反映させておくPHP

全部を１つのドメイン下に置こうと思うが、まず1番大変なのはhachikumaの引っ越しだな

https://hachikuma.tan-deki.com/

index.htmlを開いて、とりあえずCSSを以下のように書き換える

<link rel="stylesheet" type="text/css" href="hk.css?<?php echo filemtime('hk.css'); ?>" media="screen">

こうしておけば、CSSを書き換えてアップする度にその更新日時（filetime）を拾ってくるので、確実に再読み込みをしてくれるのだが、そうでないと頑固にキャッシュを表示するのでね

そしてデザイン（という程のモノではないが）に丸1日かかって、先月分までの写真もアップしたのは今朝・・・

登録: 投稿 (Atom)