Web site create

ベーシック認証制限 .htaccess ファイル指定 最後の一行に改行。マーカーの部分で制限するファイルのURLをフルパスで指定。

  1. <Files image.php>
  2. AuthUserFile /home/users/your-site/.htpasswd
  3. AuthGroupFile /dev/null
  4. AuthName "Member Only"
  5. AuthType Basic
  6. require valid-user
  7. </Files>

サイトのフルパスの確認方法。

  1. <?php
  2. echo __FILE__;
  3. ?>

.htaccessによるIP制限

  1. # AccessControl IP/HOST
  2. order deny,allow
  3. deny from all
  4. allow from 111.111.111.123

cgi時間表示。このような並びで表示。 Fri, 04 Dec 2020 16:24:06 +0900

  1. my($time, $date) = @_;
  2. my($sec, $min, $hour, $mday, $mon, $year, $wday) = localtime(($time));
  3. $wday = ("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat")[$wday];
  4. $mon = ("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec")[$mon];
  5.   
  6.     
  7. my $dcdate = sprintf("%s, %02d %s %04d %02d:%02d:%02d ",$wday,$mday,$mon,$year+1900,$hour,$min,$sec);

このような並びで表示。2020-12-05T00:16:21+09:00

  1.       my($time, $date) = @_;
  2.       my($sec, $min, $hour, $mday, $mon, $year) = (localtime($time))[0..5];
  3.       $year += 1900;
  4.       $mon++;
  5.       if (defined $date) {
  6.             $year = substr($date, 0, 4);
  7.             $mon = substr($date, 4, 2);
  8.             $mday = substr($date, 6, 2);
  9.       }
  10.       my $dcdate = sprintf("%04d-%02d-%02dT%02d:%02d:%02d", $year, $mon, $mday, $hour, $min, $sec);

リンク切れに代替画像を表示

リンク切れ画像の代替画像表示について何個か。リンク切れ画像は非表示にする。

  1. <img src="original.png" alt="title" onerror="this.style.display='none'"/>

代替画像を表示にする。

  1. <img src="original.png" alt="title" onerror="this.src='https://your-site-url-image'"/>

スタイルシートで。これを採用した。

  1. <style>
  2.  <!--
  3. img:before {
  4.   content: " ";
  5.   display: block;
  6.   position: absolute;
  7.   top: -20px;
  8.   margin-left : 0px;
  9.   height: calc(100% + 40px);
  10.   width: 100%;
  11.   background-color: #fff;
  12.   border-radius: 10px;
  13. }
  14. img {
  15.   position: relative;
  16. }
  17. /* Broken link koriki */
  18. img[alt]:after {
  19.   display: block;
  20.   position: absolute;
  21.   width: 85px;
  22.   height: 85px;
  23.   margin-top : -56px;
  24.   margin-left : 46px;
  25.   background: #ebebeb url('https://') no-repeat center;
  26.   background-color: #fff;
  27.   font-family: 'Helvetica';
  28.   font-weight: 300;
  29.   line-height: 2;
  30.   text-align: center;
  31.   content: attr(alt);
  32. }
  33. -->
  34. </style>

JavaScript。

  1. <!-- Broken link koriki -->
  2. document.addEventListener('DOMContentLoaded', () => {
  3. const images = [].slice.call(document.querySelectorAll('img'));
  4. images.forEach((image) => {
  5. image.addEventListener('error',() => {
  6. image.setAttribute('src','https://');
  7.  });

もしリンク切れの場合は代替画像が表示されます。わざとリンク切れさせてみますね。

パーやん

43歳のおじさんがこんなものを夜な夜な作って妻が切れてます。

akiary.cgi

akiaryのインターネットアーカイブ

過去の日記作成支援

2002年、デザインのカスタマイズ性に優れ、月別にログファイルを出力してくれるakiaryは自分のイメージにピッタリだった。

しかし10年以上離れている間に、配布サイトがなくなってしまった。

時を戻すべくakiaryにテコ入れ。v.0.51→v.0.61にバージョンアップする。

全てのファイルのエンコードを変更。Shift_JIS→UTF-8
多言語対応エディタ


akiary.cgiを弄り出力するファイルもUTF-8へ変更。その後、改造している方のサイトを見る。Akiary本体の改造§v.0.61向けの軽い改造こちらの方が良さそうなので、追加する。タイムスタンプ追加。

投稿フォームでの改行にスタイルシートを適応させるため、改造したakiary.cgiの設定

  1. newline => '<div class="br1"></div>\n',

に変更。

このままだと修正する時に一行で表示されてしまうので。650行辺りを、  

  1.    # 更新/削除
  2.     ($date,$title,$body)
  3.     =($date{$FORM{'did'}},$title{$FORM{'did'}},$body{$FORM{'did'}});
  4.     ($syear,$smon,$smday)=($date=~/^(\d{4})(\d{2})(\d{2})/);
  5. # if ($acfg->{newline} eq '<br>') {
  6.      $body=~tr/\x0D\x0A//d; # 改行コード削除
  7.      $body=~s/<div class="br1"><\/div>/\n/ig;
  8. # }

上記のマーカーの部分を変更。気をつけなければいけないのは、投稿フォームでの改行イコール、

  1. <div class="br1"><\/div>

になる。スタイルシートが適応されてしまうので、ソースタグなど物によっては一行にしないといけない。

改造した1476行目付近、a name属性をidに変更。idはアルファベットから始まらないといけないらしいので、力技で変更。RSSフィードの日付参照のために必要なので、$bndate{$_}は残す。    

  1.       foreach(@k){
  2.        print FH qq(<a id="d$_"></a>);
  3.        print FH "<!--akiary_diary did=$_ date=$bndate{$_}-->";

同じく1778行目付近も変更。  

  1.     foreach(@k){
  2.     $ret .= qq(<a id="d$_"></a>);
  3.     $ret .= qq(<!--akiary_diary did=$_ date=$date{$_}-->);
  4.       $tmp=$match;
  5.       # 日付

akiaryからrdfを出力するaki2rss.cgiは15年前に使っていた。いつのまにか、index.rdfのリンクをクリックするとダウンロードするようになったので、サーバーにある.htaccessファイルに

  1. AddType application/xml .rdf

一行足すだけでダウンロードされなくなった。時代遅れ?いやこれで最先端。ではなくても最南端の陸の孤島にはなった。

参考記事

改造1693行目 ログページの1月2月とかの数字にスタイルシート。

  1.   $tmp =~ s/%M0/sprintf("%d",$m)/eg; # 月
  2.        $tmp =~ s/%M1/sprintf("%02d",$m)/eg; # 月(0付き)
  3.        $tmp =~ s/%M2/$m2[$m-1]/g; # 月(英語短縮)
  4.        $tmp =~ s/%M3/$m3[$m-1]/g; # 月(英語)
  5.        if (defined($index{$y})){
  6.             $index{$y} .= $CFG{'index_format_between_months'};
  7.        }
  8.        $index{$y} .= "<span class=\"moon23\"><a href=\"$rp$_\">$tmp</a></span>";
  9.       }
  10.       # 各年を入れたり

php アップローダー 削除機能付き

  1. <?php
  2. $tempfile = $_FILES['file']['tmp_name'];
  3. $filename = './img/'.$_FILES['file']['name'];
  4. if (is_uploaded_file($tempfile)) {
  5.     if (move_uploaded_file($tempfile, $filename)) {
  6.         echo $filename . "をアップロードしました。";
  7.     }
  8. }
  9. ?>
  10. <html lang="ja">
  11. <head>
  12.     <meta charset="UTF-8">
  13.     <title>kimiite.アップロード</title>
  14.       <style>
  15.        <!--
  16.       BODY{
  17.        background-color :#fff;
  18.        margin: auto;
  19.        max-width: 800px;
  20.        /* 最大幅 */
  21.        min-width: 340px;
  22.        /* 最小幅 */
  23.       }
  24.     .br1 {
  25.        padding: 5px;
  26.        }
  27.        -->
  28.       </style>
  29. </head>
  30. <body>
  31. <h3>画像アップロード</h3>
  32. <form action="./image.php" method="post" enctype="multipart/form-data">
  33.     <div id="drop-zone" style="border: 1px solid; padding: 30px;">
  34.         <p>ファイルをドラッグ&ドロップもしくは</p>
  35.         <input type="file" name="file" id="file-input">
  36.     </div>
  37.     <h3>アップロードした画像</h3>
  38.     <div id="preview"></div>
  39.     <input type="submit" style="margin-top: 50px">
  40. </form>
  41. <script type="text/javascript">
  42.     var dropZone = document.getElementById('drop-zone');
  43.     var preview = document.getElementById('preview');
  44.     var fileInput = document.getElementById('file-input');
  45.     dropZone.addEventListener('dragover', function(e) {
  46.         e.stopPropagation();
  47.         e.preventDefault();
  48.         this.style.background = '#e1e7f0';
  49.     }, false);
  50.     dropZone.addEventListener('dragleave', function(e) {
  51.         e.stopPropagation();
  52.         e.preventDefault();
  53.         this.style.background = '#ffffff';
  54.     }, false);
  55.     fileInput.addEventListener('change', function () {
  56.         previewFile(this.files[0]);
  57.     });
  58.     dropZone.addEventListener('drop', function(e) {
  59.         e.stopPropagation();
  60.         e.preventDefault();
  61.         this.style.background = '#ffffff';
  62.         var files = e.dataTransfer.files;
  63.         if (files.length > 1) return alert('アップロードできるファイルは1つだけです。');
  64.         fileInput.files = files;
  65.         previewFile(files[0]);
  66.     }, false);
  67.     function previewFile(file) {
  68.         /* FileReaderで読み込み、プレビュー画像を表示。 */
  69.         var fr = new FileReader();
  70.         fr.readAsDataURL(file);
  71.         fr.onload = function() {
  72.             var img = document.createElement('img');
  73.             img.setAttribute('src', fr.result);
  74.             preview.innerHTML = '';
  75.             preview.appendChild(img);
  76.         };
  77.     }
  78. </script>
  79. <?php
  80. //ディレクトリ名
  81. $dir_path = "./img";
  82. if (is_dir($dir_path))
  83. {
  84. if(is_readable($dir_path))
  85. { // ? ファイルが読み込み可能かどうか
  86. $ch_dir = dir($dir_path); //ディレクトリクラス
  87. }
  88.  }
  89. ?>
  90. <?php
  91. // img以下の画像ファイルを表示
  92.        echo '<p>アップロードされたファイル一覧</p>';
  93.        foreach(glob('img/{*.gif,*.jpg,*.jpeg,*.png,*.tif,*.tif}',GLOB_BRACE) as $file)
  94. ?>
  95. <?php
  96. // img以下の画像ファイルを削除
  97.  if (array_key_exists('delete_file', $_POST)) {
  98.   $filename = $_POST['delete_file'];
  99.   if (file_exists($filename)) {
  100.     unlink($filename);
  101.     echo 'File '.$filename.' has been deleted';
  102.   } else {
  103.     echo 'Could not delete '.$filename.', file does not exist';
  104.   }
  105. }
  106. ?>
  107. <div>
  108.             <?php
  109.             $files = glob("img/*");
  110.             foreach(glob('img/{*.gif,*.jpg,*.jpeg,*.png,*.tif,*.tif}',GLOB_BRACE) as $file){
  111.                 echo htmlspecialchars($file) . '<br />';
  112.                 echo "<div class='divimages'>";
  113.                 echo "<a href = \"".$file. "\" target = \"_blank\" >";
  114.                 echo '<img src="'.$file.'" width="200\'"/></a>';
  115.                 echo '<form method="post">';
  116.   echo '<input type="hidden" value="'.$file.'" name="delete_file" />';
  117.   echo "<div class='br1'></div>";
  118.   echo '<input type="submit" value="Delete image" />';
  119.   echo '</form>';
  120.                 echo "</div>";
  121.             }
  122.             ?>
  123. </div>
  124. </body>
  125. </html>

Googleフォトにある画像を世界中に見せつけよう。

ブログや日記に自分の写真や画像を載せるときはサーバーにアップロードしなくても、Googleフォトを使うと楽ちん。

Googleフォトのアルバムを作成から共有アルバムを作る。位置情報を削除に設定。撮った場所が知られてもいいのならそのまま。共有アルバムの名前はなんでもいい。

そこにブログやなんやらに載せたい画像を送る。間違っても全裸画像とか卑しい画像は放り込まないように。

共有アルバムのシェアボタンからリンク作成をクリック。共有アルバムのURLを取得してコピーする。

ここからが大切。Chromeブラウザーに戻りシークレットウインドウですよ。Chromeのスパイ&スパイのおっさんみたいなのがでてくるのですよ。

そのシークレットウインドウを立ち上げて、さきほどコピーしたURLをアドレスバーにペーストしてGoogleフォトにアクセスする。

右上にログインボタンがあれば成功。必ずログインしていない状態でなければなりません。

そのシークレットウインドウでアスセスしたログインしていない状態のGoogleフォトの、先ほど作成した共有アルバムのURLをブックマークする。

あとは画像を右クリックして画像のURLをコピー。

このURLをimgタグやウェブにペーストすればその画像をTwitterでもホームページでも見せつけられます。

毎回必ずシークレットウインドウを立ち上げてから、ブックマークしたGoogleフォトにアクセスして画像のURLを取得してください。そうしないと自分しかその画像が見られません。

シークレットウインドウでログインしていない状態でURLを取得するのが大自慢ブラザーズです。

あとはこのサービスいつまで続くか。Googleのことなので、あっという間に終わってしまってリンク切れになることも念頭に。

もうひとつ当然といえば当然だが、共有アルバムから画像を削除すると、ブログやなんやらに貼った画像は見られなくなります。

しかし昔みたいに自分のサーバースペースにアップロードしなくても、画像が貼れたり管理が楽になったものだ。

画像多くなるとFTPだと管理が変態なのよ。大変でした。お疲れ様です。

<img class=”imgs” src=”https://” alt=”検索ロボットさん用” title=”俺たち用”>

wordpressページネーションで次のページへ行けなくなった。

途中でパーマリンクの設定を変更したいと思い、投稿名に変更したところペジネーションで次のページへいけなくなっていまいました。

アーカイブページのペジネーションは404にならず、topページindex.phpから2ページ目以降にいけませんでした。

パーマリンク設定を基本以外にすると、2ページ目のurlは、https://kimiita.org/page/2となり表示できなくなり、再度パーマリンク設定を基本に戻すと、https://kimiita.org/paged=2となりペジネーションが正常に動作します。基本設定以外ペジネーションで2ページ目以降にいけません。

パーマリンクの設定を変更すると/paged=2から/page/2に移動したとよとリダイレクトしているようです。お前ずっとそこに居るんや本当は。幸子騙されちゃいかん!

ということで、/page/2へリダイレクトさせないように以下のように設定しました。なにかあると大変なので、必ず子テーマで作業します。以下を子テーマのfunctions.phpにコピペします。

  1. //functions.phpに以下を記述。リダイレクトさせない。
  2. add_filter('redirect_canonical','my_disable_redirect_canonical');
  3. function my_disable_redirect_canonical( $redirect_url ) {
  4.     if ( is_archive() ){
  5.         $subject = $redirect_url;
  6.         $pattern = '/\/page\//'; // URLに「/page/」があるかチェック
  7.         preg_match($pattern, $subject, $matches);
  8.         if ($matches){
  9.         //リクエストURLに「/page/」があれば、リダイレクトしない。
  10.         $redirect_url = false;
  11.         return $redirect_url;
  12.         }
  13.     }
  14. }

index.phpにあるペジネーション部分の所に、マーカー2行を足しました。要約すると本当はここにいるから戻って来いよ。

  1. <?php endwhile;  // ?>
  2. //index.phpのペジネーションbaseとformatを足す。
  3.         <?php
  4.             the_posts_pagination( array(
  5.                 'prev_text' => __( '? Previous', 'first' ),
  6.                 'next_text' => __( 'Next ?', 'first' ),
  7.                  'base' => get_pagenum_link(1) . '%_%',
  8.                  'format' => '?paged=%#%',
  9.             ) );
  10.             ?>