パソコンサポートの00H ～社長BLOG～

指定することは
できない…

以上 !!

そういやそんなことできたっけ？
と思ってたらやっぱりできないようです。

というわけでふて寝します…
人間だもの…

ここのところサポートと並行して
ホームページを作成しております。
実は今やりたいホームページもあり、
また依頼されかけているホームページもいくつかあり、
晴耕雨読ならぬ晴サポート雨ホームページてな状態です。

実はプログラムも結構好きなので
WordPress を使ってホームページを作る…
PHP / JavaScript / HTML /CSS の組み合わせは
自分に合ってるなぁと思ったりします。

なかなか一筋縄でいかない部分もあり、
結構大変なのですが、これがまた楽しかったりします。
この部分は進化や変化・変更もかなり速く
ちょっと離れるとあっという間に一変します。

最近 InternetExplorer がほぼ眼中になくなり、
開発もだいぶ楽になりました。
それまではこの無法者をどう手なずけるか？
が腕の見せ所だったりしましたが、
最近は逆にブラウザが新しい機能を
どんどん追加する…という方向に行っているため
それを追いかける方が大変かもしれません。

また集中力が必要なので体力を消耗するのも事実。
無茶じゃない程度に無理して頑張ります（笑）。

今日は Web リニューアルの打合せだったのですが、
ちょっと微熱が続いているので、
念のためオンラインでさせていただくことにしました。

正直 Zoom という手もあったのですが、
電話の音声だけで…とさせていただきました。
部屋が散らかってるので（というか物が多いねん…）
Web カメラでお見せできる状況ではない…と…。
じゃあなんで Web カメラを買ったのか…
っていうと…若気の至りですかねぇ…。
とりあえず屏風でも買いますかね… (´・ω・`)

ただやり方としてはリモートサポートで使っている
TeamViewer を使って遠隔操作をしながら、
ホームページの状況を見ていただく…というものなので、
これでも問題ないように思うんですが…。
そこまでして顔を合わせて話をしたいのか？みんな！
と思ったりもせんでもないのですが…。

最近は涼しくなったり暑くなったり、
体調を崩しやすくなりがちですので、
皆様もご自愛くださいませ。

GitHub – posabsolute/jQuery-Validation-Engine: jQuery form validation plugin

昔から何度も使っていたのですが、
久々に触るとだいぶ変わっているようです。

jQuery.validationEngine は
ホームページのフォームの
記入漏れをチェックするための
jQuery ライブラリです。

さて有名であるにもかかわらず、
古い情報しか見受けられなくて
『？？？』なトラブルだったので
どなたかのお役に立てれば…
（ここまで職人が丹精込めてコピペしました）

さて、ひょっとすると前からだったかもしれませんが、
実は jQuery.validationEngine には困った仕様があります。

form 要素の中にはそこにこんな値を入れて下さいね…
という placeholder という属性があります。
例えば以下のような感じ。

で、実は jQuery.validationEngine では
この placeholder と同じ値をフォームに入力すると
『入力してないよね？』とエラーが出ます。

これに『大阪府』と入力すると入力してください
と警告が出てしまいます。
で、なんかやらかしたっけ？
と悩んで一日つぶれたりします。

jQuery.validationEngine.js で
placeholder で検索をかけると
以下のようなところがあります。

default:
	var field_val      = $.trim( field.val()                               );
	var dv_placeholder = $.trim( field.attr("data-validation-placeholder") );
	var placeholder    = $.trim( field.attr("placeholder")                 );
	if (
		   ( !field_val                                    )
		|| ( dv_placeholder && field_val == dv_placeholder )
		|| ( placeholder    && field_val == placeholder    )
	) {
		return options.allrules[rules[i]].alertText;
	}
	break;

placeholder でこのような症状でお困りの場合は、
この赤の部分は不要ですので
削除またはコメントアウトしてかまいません。

昨日の jQueryValidationEngine の table タグの問題。
position: relative; で回避できました。

た・だ・し！

Firefox では position: relative; と border と
background-color が共存できずに
線が消える仕様というバグがあるので注意してください。
おすすめはレイアウトに table タグを使わない…
ということで dl / dt / dd を使うのがいいかと？
もともとレイアウト目的で table を使うのはどうか？
と思うので jQueryValidationEngine.js を使うなら
違う方法がいいかもしれません。

さて前向きな対応方法としては
after 疑似要素を使うという方法があります。

th::after,
td::after {
	position: absolute;
	z-index: 2;
	top: -1px;
	left: -1px;
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	border: 1px solid #cccccc;
}

th や td に position: relative; を指定している場合、
この方法が利用できます。
top 、left で動かしてるのは th や td に
border を 1px 指定している場合、
上の例のように 1px 戻してください。

GitHub – posabsolute/jQuery-Validation-Engine: jQuery form validation plugin

昔から何度も使っていたのですが、
久々に触るとだいぶ変わっているようです。

jQuery.validationEngine は
ホームページのフォームの
記入漏れをチェックするための
jQuery ライブラリです。

さて有名であるにもかかわらず、
古い情報しか見受けられなくて
『？？？』なトラブルだったので
どなたかのお役に立てれば…

まず設置のための書き方ですが、

<script type="text/javascript" src="./js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="./js/jquery.validationEngine-ja.js"></script>
<script type="text/javascript" src="./js/jquery.validationEngine.js"></script>
<link rel="stylesheet" href="./css/validationEngine.jquery.css">

こんな感じで書くのですが、大事なのは

jquery.validationEngine-ja.js
jquery.validationEngine.js

の順番。
以前は逆だったと思うのですが、
今はこの順番でないと動きません。

もちろん

$(function(){
    $( "フォームの ID 等" ).validationEngine();
});

も忘れないように。

また jQuery のバージョンが 3 以降では動かない
という情報もありましたが、現在は対応しています。

あとマイナーかもしれませんが、
恐らくバグだと思うのですが、
フォームのレイアウトを table タグでしている場合は
チェック後のエラーメッセージが変なところに出ます。

スタイルシートの設定で

#フォームの ID td {
    position: relative;
}

のようにしておく必要があります。

さて令和になってもうすぐ 3 年…。
昭和がすでに歴史の一部になっている今日この頃…
皆様いかがお過ごしでしょうか？

さて、自社のホームページの例の総額表示対応…。

いやぁ…諦めました…（ぉぃっ !! ）

ってかよく考えたら当時の 00H の
ホームページ制作のスペシャリスト R.O.(38) が作ったものを
結構お気に入りだったのでずっと延命してきましたが、
やっぱり寄る年波には勝てず…（？）
ってか

モバイル対応もしないのに
総額表示ってどうなん？

ってか

令和になった今でも
リモートサポートの申し込みが
FAX ってどうなん？

いやまぁ一応オンライン決済も用意しているのですが、
リモートサポートのページにリンクさえしていないという為体（ていたらく）

なんかこう、会社の机の上はめっちゃ片付いてるけど、
自分の部屋はごみ屋敷…みたいなのあるじゃないですか？
そうそうそんな感じ… (´・ω・`)
というわけでまずはお客様のホームページからやっていきます。

と勘違いするくらい来てたホームページ案件ですが、
とりあえず一個だけ大波を超えました。
やはり飲食業界のホームページは大変ですね。

消費税の総額表示と軽減税率のせいで、
それでなくてもコロナで大変な飲食業界に
とんでもない手間を負わせてる気がします。

店内飲食がメインで持ち帰りもできる場合、
さてどちらで表示すべきでしょう？
実はどっちで表示しても正解だそうで
どっちみちすぐに税率変えてくるでしょうし、
もういっそ JavaScript で処理した方がいいのかも？
ということで今回は JavaScript で対応しました。

実はリニューアルしたかったんですが、
費用もかかるし時間もかかる…
もうちょっと落ち着いたら提案してみます。

ただまだまだ大波がいくつかあります。
一所懸命波にのまれないように
頑張りたいと思います。

あ…自社の総額表示… (´・ω・`)

最近はめっきり Web 関連の仕事ですが、
やたらめったら Photoshop と Illustrator の
お世話になります。
その分、そのスキルはそれなりに上がってくるのですが、
正直かなり地味な仕事が多いです。

デザインの現場というと華やかなイメージがありますが、
こういう結構煩わしい作業の積み重ねが
結果につながってくる仕事です。
特に Web となるとこれらのデザインワーク以外にも
HTML 、CSS 、JavaScript 、
さらにそれらをまとめるフレームワーク、
場合によっては PHP や SQL 系の知識、
他にも SEO やマーケティングの知識も要求されます。

実は知っておく知識がかなり広いんですよね。
しかもこれら全部が結構頻繁にアップデートされてたり、
さらにはブラウザの対応状況や、
アップデートやバグなんかの知識もいったり、
ぶっちゃけ手間は多いわりに競合が多い…
というどちらかというとレッドオーシャン的な
仕事だったりします。

ここしばらくは本当に Illustrator 三昧で
もう目がショボショボ…いや細いのは元からですけど (´・ω・`)

ホームページ案件がやたらめったら続いております。
そのため一旦受注を停止しております。
ご迷惑をおかけいたしますが
よろしくお願いいたします。

今は他の業者さんがかなり前に作った
ホームページの修正中です。
正直言うとかなり辛いです…。
古いものなので…なのか、
あまりご存じなかったのか、
CSS がかなり無茶苦茶です…。

そこにつじつまを合わせながら修正を…
とするとなかなか大変です。
わかる人にしかわからないとは思いますが、

* {
margin-bottom: 10px;
}

とか入ってたりするので『あぁぁぁぁ……』
となってしまいます。

どうしても CSS や HTML は進化しているので
それを常に追いかけるのはなかなかに難しいですが、
それを追いかけるのがホームページ制作です。
あまり簡単なものじゃないでしょ？