わかると便利なforeach

あんまりにもあんまりなコードを書いていたので、少しは進歩している事をおしらせすべく、お絵かき掲示板交流サイトのトップページで使っているphpのソースの一部を…。

<?php
$arr = array();
foreach(glob('cgi/{foo,bar,baz}/index.html', GLOB_BRACE) as $filename) {
$arr[$filename] = $filename;
}
$i = 1;
foreach($arr as $key => $value){
var_dump($key);
if($i >= 3){break;}
$i++;
}
?>

よくわからないけれど動いていたもの。

foreachは配列の数だけループするのでもし3ならbreakという処理は必要ありませんでした。

globで配列に入れる必要もありませんでした。その配列を別の配列に入れる必要もありませんでした。

<?php
$arr=array('cgi/foo/index.html','cgi/bar/index.html','cgi/baz/index.html');
for($i = 0; $i <= 2; $i++){
$filename = $arr[$i];
var_dump($filename);
}
?>

foreachがよくわからなかったので、forで記述。
しかしやや煩雑なコード…。

<?php
$arr=array('cgi/foo/index.html','cgi/bar/index.html','cgi/baz/index.html');
foreach($arr as $filename){
var_dump($filename);
}
?>

foreachが便利な事がわかったので書き直し。
配列の数だけループ。

お絵かき掲示板はこちら。

配列の最後の値を取得するコードの速度を比較

サーバの負荷が気になるので、お絵かき掲示板交流サイトのトップページのphpのコードを書き直しているところです…。

ディレクトリ内の画像から最新の画像を1枚表示したいだけなのに、ディレクトリ内に1000枚画像があったら配列の数が1000個…それをタイムスタンプで逆順でソートしてまた配列に格納…。

ファイル名の数字が同じ桁数で新しいほど数値が増えるのなら、globでディレクトリ内の画像を呼びした時点でソートがかかっているのでタイムスタンプを使った処理をしなくても…。

その処理を省略するだけで、少なくとも00.1秒は速くなるようですね。サーバの処理速度にもよりますが…。

ふと思ったのですが…。

ディレクトリに1000枚の画像が存在していたらglobで古い画像から順番に配列に格納されるので、最新の画像は1000番目になりますね…。

foreach(glob('cgi/poti/src/{*.png,*.jpg}', GLOB_BRACE) as $filename) {
}

foreachで配列の数だけループするけれど何もしない。しかしループが終わったあとに残る$filenameは配列の最後の値…。(必ずそうなる訳では無いようですが…)

$filenameに1000枚の画像のファイル名が入るので処理速度は期待できない…。

そこで…
$filename=glob("cgi/poti/src/{*.jpg,*.png}", GLOB_BRACE);
$filename=$filename[count($filename)-1];

最新の画像が表示されるので結果は同じ。ループしていないのでforeachを使うより軽い…はずだったのですがcountが重いのか…。

配列の最後の値を取得するコードの処理速度 php

$filename=glob("cgi/poti/src/{*.jpg,*.png}", GLOB_BRACE);
$filename=array_slice($filename, -1)[0];

foreach(glob('cgi/poti/src/{*.png,*.jpg}', GLOB_BRACE) as $filename) {
}

の処理速度がほぼ同じ…。

むしろforeachでループして最後に残った値を取得する下側の書き方のほうが処理時間が短くて…。

$filename=$filename[count($filename)-1];

が一番遅い…。

$filename=glob("cgi/poti/src/{*.jpg,*.png}", GLOB_BRACE);
$filename=end($filename);

配列の最後の値を取得したいのならendという関数が…と思いましたがなぜかあまり速くない。

配列の最後の値を取得するコードの処理速度 php

一番速かったのは…。一番遅いと思っていたforeachで配列を最後まで読み込んで最後に残った値…でした。

お絵かき掲示板はこちら。

配列の数だけループ

foreachで配列の数だけループできたんですね。試しに簡略化したプログラムを書いて実行…。
<?php
$arr = array('Apple', 'Google', 'Microsoft');
foreach($arr as $filename) {
var_dump($filename);//配列の値
}
foreach($arr as $kye => $filename) {
var_dump($kye);//配列のキー
}
結果。
string(5) "Apple" string(6) "Google" string(9) "Microsoft" int(0) int(1) int(2)
単純化してみてやっと理解できたような…。
という事は…。
さくらのレンタルサーバのOSのバージョンアップでphpの動作が変わった: STP^3
お絵かき掲示板交流サイトのトップページのコードを書きましたが…。
<?php
$arr = array();
foreach(glob('cgi/{foo,bar,baz}/index.html', GLOB_BRACE) as $filename) {
$arr[$filename] = $filename;
}
$i = 1;
foreach($arr as $key => $value){
var_dump($key);
if($i >= 3){break;}
$i++;
}
?>
配列の数が3でカウンターが3になったらbreak…。
エラーメッセージはでないし実行結果も問題ないのですが、この人配列の数だけループする事を知らないんじゃない?とphpの基礎がわかっている方は思ったでしょうね。

カウンターを回してbreakする必要があるとしたら例えば配列の数が30で上位3件でループを終了したい時ですね…。

他にも…。

php Brackets 変数 シングルクオート

書き間違いがあればエラーになるから文法がわからなくても何とかなる…ではまずいのでコードを調べて無駄な動作を減らし、メモリを消費する変数がループ外に残らないようにunset。

お絵かき掲示板交流サイトのトップページの負荷がこれで軽く?
<?php
$time_start = microtime(true);
(ここに処理が入る)
$time = microtime(true) - $time_start;
echo "{$time} 秒";
?>
書き直し前の速度を計測するのを忘れていました…。
書き直し後に計測してみたところ、0.097969055175781 秒…でした。

POTI-board用テンプレートPINKの動的パレットを修正しました。

動的パレットスクリプトのMatrix関連の不具合を修正しました。

発生していた問題。

お絵かき掲示板 POTI−board 動的パレットスクリプト

モノクロを「現在」で「取得」。

お絵かき掲示板 POTI−board 動的パレットスクリプト

「取得」した書式が正しくないので正しく色が「セット」されない。

お絵かき掲示板 POTI−board 動的パレットスクリプト

書式を修正して「セット」すれば正しく色が入るが「あいうえお」というパレット名が「あいうえ」になる。
14番目のパレットの色が正しくセットされない。

POTI-boardの動的パレットスクリプトはテンプレートに組み込まれているので、修正されたテンプレートに入れ替えればこれらの不具合は解消します。

POTI-board用テンプレート PINKは、lot.190516で対応しました。

お絵かき掲示板交流サイトの動的パレットの不具合も解消していますのでMatrix機能をぜひ使ってみてください。
パレットをインポートしたり、エクスポートしたりする事ができる便利な機能です。

Brackets 1.14 PHPランタイムが見つかりません。"executablePath"を更新してください。

プログラムエディタBracketsを1.14にバージョンアップしたら、「PHPランタイムが見つかりません。"executablePath"を更新してください。」というエラー表示。

Brackets1.14 PHPランタイムが見つかりません。
windows version update 1.14 => "PHP runtime not found. " ・ Issue #14783 ・ adobe/brackets
GitHubにもこの件についての質問がでてますね…。

Brackets1.14 PHPランタイムが見つかりません。

XAMPPのPHPのパスを設定ファイルに追加するだけだったのですが…。
//のコメント行を入れてエラーになったり , の打ち方でエラーになったりと…。
"php": {
"executablePath": "C:/xampp/php/php-win.exe"
}
にコンマを必要に応じて追加でなんとかなりました。

使ってみると…。

Brackets1.14 PHPランタイムが見つかりません。

実行可能ならファイル形式のPHPの横のマークが緑色になり…。

Brackets1.14 PHPランタイムが見つかりません。

Fatalエラーが発生して実行できない場合は問題がある行を表示。

XAMPPで実行してエラーが出たらエディタで行番号を指定してチェックして、またXAMPPで実行という作業が必要でしたが、この機能のおかげでXAMPPとBracketsを何度も往復しなくてもよくなりました。
posted by さとぴあ at 2019/05/10 01:42 | Web制作

Painter2019 x Core i5-8400

2012年に購入したノートパソコンのCeleron B820でPainter2019を使っていましたからCeleronでも使えると思いますが、CPUに負荷のかかるブラシを使ってさらにサイズを大きくするとCore i5-8400でもCPU使用率100%になります。

テストに使用したのは、AcerのデスクトップパソコンAspire Core i5-8400 XC-885-N58F

Painter2019 x Core i5-8400

Painterのリアル水彩のフラクタルウォッシュ (境界)のサイズを300pxにしてストロークした時のリソースモニターの様子。

CPU 0からCPU 5、合計6個のCPUの使用率が全体的にあがりCPU使用率100%になりました。
Painterのパフォーマンス設定のマルチコアの使用は3。

これは、Corei5のPCにインストールしたときにPainterが設定した値です。
Celeronならここが1になります。
デジタルアート & ペイント ソフトウェア - Corel Painter 2019

マルチコア プロセッサや、AVX2 拡張を使用し、コード最適化を行う CPUへのサポートが強化されたおかげで、これまでで最高速の Painter が生み出されました。

クリスタ x Core i5-8400

クリスタのにじみ水彩を300pxにしてストロークした時のリソースモニターの様子。

描画は遅延しますがCPU使用率は50%以下です。
CPU 0とCPU 5の使用率は100%ですが、その他のCPUを活用している様子はありません。

MediBang Paint x Core i5-8400

MediBang PaintはCPU 5に負荷が集中、その他のCPUを活用している様子はありません。

「Painter 2019」|ソースネクスト
posted by さとぴあ at 2019/04/29 17:03 | Painter

さくらのレンタルサーバのOSのバージョンアップでphpの動作が変わった

サーバのOSのバージョンがあがっただけなのにお絵かき掲示板交流サイトの掲示板の並び方が変わってしまいました。
phpのバージョンは7.2のままです。
XAMPPでは意図通りの動作をするし、さくらのレンタルサーバでも昨日まで問題ありませんでした。
メンテナンスの内容。
FreeBSDのアップデートに伴う変更点 (2019/4/9 更新) – さくらのサポート情報

レンタルサーバのOSである「FreeBSD」のバージョンを9.x系から11.x系へ変更します。
問題が発生したプログラム。
<?php
$arr = array();
foreach(glob('cgi/{foo,bar,baz}/index.html', GLOB_BRACE) as $filename) {
$arr[$filename] = $filename;
}
$i = 1;
foreach($arr as $key => $value){
var_dump($key);
if($i >= 3){break;}
$i++;
}
?>
これまでは、
string(18) "cgi/foo/index.html" string(18) "cgi/bar/index.html" string(18) "cgi/baz/index.html"
foo,bar,baz だったのに、

string(18) "cgi/bar/index.html" string(18) "cgi/baz/index.html" string(18) "cgi/foo/index.html"
bar,baz,foo の順になってしまいました。
foreach(glob('cgi/{foo,bar,baz}/index.html', GLOB_BRACE) as $filename) {
$arr[$filename] = $filename;
}
このコードでは期待通りに並ばないので書き直す事にしました。
<?php
$arr = array('cgi/foo/index.html', 'cgi/bar/index.html', 'cgi/baz/index.html');
for($i = 0; $i <= 2; $i++){
$filename = $arr[$i];
var_dump($filename);
}
?>
XAMPPでも、さくらのレンタルサーバでも、
string(18) "cgi/foo/index.html" string(18) "cgi/bar/index.html" string(18) "cgi/baz/index.html"
が返ってくるようになりました。

POTI-board改のメンテナンスに参加した経験が無かったら書き直せなかったかも…。

お絵かき掲示板 ネコ娘 paintBBS NEO
お絵かき掲示板はこちら。

POTI-board用テンプレートPINKをバージョンアップしました。

POTI-board改の配布用テンプレートをlot.190225にバージョンアップしました。

カタログモードをPCの時はよりギャラリー的に、スマートフォンの時はより作品を探しやすくなるようにしました。
ファイルサイズが小さくなるようにCSSを書き直しました。
横幅の指定方法を見直しました。

POTI-board用テンプレートPINKPOTI-board用テンプレートPINKPOTI-board用テンプレートPINK

iPad Pro iPad iPhoneをエミュレート。

POTI-board用テンプレートPINK

タイトルが長くて改行が入ると画像の横並びがそろわないので…
入らなかった文字を三点リーダで省略表示 - Qiita
を使いました。

POTI-board用テンプレートPINK

長い文字列を三点リーダーで省略する事ができました。
satopian/pink: POTI-board用テンプレート PINK

テンプレートのダウンロードはこちらから。

お絵かき掲示板はこちら。

古い日記の過去ログにハンバーガーメニューをつけました

フレームセットを使った古い日記のHTMLを書き直しました: STP^3
この作業で、フレームを撤去しましたが…。
スマートフォンでアクセスすると記事本体の上にメニューが並んでしまって…。

やはりタップするとメニュー一覧が出てくる三本線のハンバーガーメニューが必要…という事で…。

らくがき絵日記 レスポンシブデザイン

PC。

らくがき絵日記 レスポンシブデザインらくがき絵日記 レスポンシブデザイン

スマートフォンの時は、ハンバーガーメニューのタップでメニューが開閉。
HTMLとCSSだけ!要素の表示・非表示を切り替える方法

CSSだけでできるんですね。
inputのタップする場所をlabelで決めて、チェックボックスは非表示。
チェックが入ったら表示してはずれたら表示しない。

【らくがき絵日記】の過去ログはこちら。
posted by さとぴあ at 2019/03/01 15:54 | Web制作

フレームセットを使った古い日記のHTMLを書き直しました

フレームセットを使った古い日記のHTMLを書き直しました

<frameset>で左にメニュー、右にコンテンツ…。
画像は横幅360pxで表示するスマートフォンをエミュレートしたものです。
googleのモバイルユーザビリティテストでモバイルフレンドリーではないと出てしまいます。
仕方がないので、モバイル端末の時は左側のメニューページにリダイレクトがかかるようにしていましたが…。
Google ウェブマスター向け公式ブログ: モバイル ファースト インデックスを開始します

モバイル ファースト インデックスとは、モバイル版のページをインデックスやランキングに使用し、主にモバイル ユーザーが探しているものを見つけやすくすることを意味します。
コンテンツではなく、メニューだけインデックスされるようになりました。

フレームセットを使った古い日記のHTMLを書き直しました

だったら、<iframe src=""></iframe>、つまりインラインフレームを使ってPCで表示する時は左右分割フレームのようにして、スマートフォンの時はメニューが上に移動するようにすれば…。
HTML5で<frameset>タグが廃止されたのはおそらく、代わりに<iframe src=""></iframe>を使えという事なんだろうな…と思いました。

ところが、CPU使用率が100%になり、「このページは応答していません」になってしまいます。
インラインフレームで長い縦スクロールは…想定されている操作ではないのかもしれません。

PCでも負荷が高くなってブラウザが固まる…となると、モバイル端末ではさらに…。

書き直す事にしました。

フレームセットを使った古い日記のHTMLを書き直しました

左のメニューの位置を固定したので、スクロールするのは右側のコンテンツだけ。
まるで左右分割フレームのようになりました。

しかし、この書き方では…。
すべてのページに左側のメニューが必要です。
フレームを使っていたのは、それが面倒だったからなのですが…。

秀丸エディタのgrepして置換を使ってどうにかしました。

フレームセットを使った古い日記のHTMLを書き直しました

スマートフォンの時は、メニュー上、コンテンツが下、どちらもスクロールするように。

フレームセットを使った古い日記のHTMLを書き直しましたフレームセットを使った古い日記のHTMLを書き直しました
/*疑似フレーム*/

.menu {
width: 218px;
margin: 18px 0 0 16px;
position: fixed;
top: 0;
}
.content {
width: calc(100% - 258px);
position: absolute;
left: 250px;
margin: 8px 0 0 0;
}
左メニューの幅は8+18+218=242です。最初の8pxはbodyのデフォルトのマージンです。
右側のコンテンツは、左から250pxの位置から…。
250-242=8px分の余白を確保するためです。
右側のコンテンツの幅は 100%-258px 。100%-250pxにすると、右側の余白が0になるので、8px分幅を狭くしました。

フレームセットを使った古い日記のHTMLを書き直しました

ChromeでiPadをエミュレート。コンテンツの左右に8px分の余白。

フレームセットを使った古い日記のHTMLを書き直しました

文字フォントがMS P ゴシックだったので、メイリオに変更して見た目を近代化…。

レガシーなタグがまだたくさん残っていますが、どうにか…。

らくがき絵日記

今回作業したページはこちら。
posted by さとぴあ at 2019/02/10 22:07 | Web制作