フラメンコに関すること、フェスティバル・デ・ヘレスに関することを書き散らしています。ヨロシクね。
2021年09月18日 (土) | 編集 |
「問い合わせフォーム」のHTMLを作るだけで丸一日つかっちまった
まぁ、難い。

■以下のような「問い合わせフォーム」を作った。
HTML
<form id="mailform">
 <label>お名前 <span id="inpNmeErr"></span>
  <input type="text" name="お名前" id="inpName" />
 </label>
 <label>メール <span id="inpMailErr"></span>
  <input type="text" name="メール" id="inpMail" />
 </label>
 <label>ご用件 <span id="msginpMsgErr"></span>
  <textarea name="ご用件" id="inpMsg"></textarea>
 </label>
 <button name="btn">確認画面を出しません。<br />このボタンで一発送信するので気を付けて</button>
<form>

よくある<input type="submit" value="送信" />を使わないのは
valueの中に改行しないと読みにくいような長文を書きたくても書けないから。

こーなっちゃう
ところが<button>要素にすると

って苦もなく改行入りの文章をボタン要素の中に書けるんですな~

お名前


メール


ご用件



※確認画面に遷移せず、いきなり送信するので慎重にお願いします。

お名前


メール


ご用件


要素が4つしかないし
今時そんな小さな画面のスマホの人はいないかと思うけど
ヘッダに黒帯で時計があったり、フッタにナビゲーションがあったりして
コンテンツを表示する画面の高さがまぁまぁ短いことがあるから
スクロールしないと注意書きが読めない状態で「送信ボタン」を押しちゃうとマズいやも?
入力チェックはやっているから空要素が1つでもあるとメール送信はできず
エラーメッセージを表示するようにはなっている。
なのでメール送受信自体は特に問題ないんだけどぉ、どぉ、どぉ、、、
一般的には「この内容でよろしいですか? 修正する場合は戻るボタン」みたいな
ワンクッションあるインターフェースなので
「送信ボタン」でいきなしメール送信にぶっ飛ぶと想定外って人がいるかと?
パソコンとかガラケとかの時代からネットをやっている人は焦ると思う。
だからって確認画面を出しても記入項目にちゃんと目を通して送信する人は希少
確認画面を落ち着て見直せば妙なメアドにきづくはずなんだけど
ドットが抜けているとか、逆にドットが連続して2つ入っているとか
おかしなメアドのメールを受け取ります\(^o^)/
そんなの目で見ればわかるので
よきにはからって手打ちで修正して返信メールを出すけど
スマホない時代でもすでに確認画面の表示は無意味 になっていた。

ましてスマホ相手では
画面遷移が余分なインターフェースNGな時代かと?
あの小さい画面でフォームをちまちま埋めるのって面倒くさいから
「送信ボタン」を押してはじめて入力チェックが走ってエラー表示する(溜息)
みたいなインターフェースは古くて煩わしい!
楽天市場のインターフェースがそれ系の古色蒼然としたやつ。
おそらく欧米のスマホ対応サイトでは画面遷移を減らしているし
グローバル企業のサイトは日本の企業でも画面遷移しない方向かと。
画面遷移があるとパケット通信料も喰うしね。
時代は変わったのです。
スマホでストレスなくインターネットできるようにJavascriptの機能も充実してきている。

■記入したそばから入力チェックをしてエラーを出す
お名前 3~10文字の範囲で入力してください。


メール


ご用件


ジュゲム的な名前の人なんかいない、、、と、いーたいところだけど、、、、
ピカソってフルネームが長くて有名だよねぇ。
そういう可能性もあるから100文字くらいの入力を許可してしまってもいいんだけど、、、
あんまり長大な文字数を受け入れてしまうと
名前を書く欄に悪意あるスクリプトを書く人がいるんですよ。
外部にある、たとえばスパムメールを送るスクリプトを読み込ませるとか。
ぢぶんところのレンタルサーバーでスパムスクリプトを走らせると怒られるから
見ず知らずの人のサーバー上のメールサーバーを使って送り倒す的、な。
以前使っていたメール送信スクリプトに脆弱性があって
ウチのスタジオサイトに設置した「問い合わせフォーム」が攻撃された結果
鯖屋さんから
「メル鯖に負荷かかっているから早急にスクリプトの脆弱性を修正してください」
ってお叱りのメールをもらったことがあります。
なのでこういうサーバーで入力データを受け取る系のコンテンツは注意が必要。
ジュゲムさんはきっと通名を使っていると思うので、それ使えや! と(笑)。
ピカソほどじゃなくてもミドルネームのある在日外国人さんはミドルネーム抜け、と。
どんなに頭いい人でも10文字こっきりじゃロクなスクリプトを書けないので
文字数制限はしたほうがいい。
もちろん、HTMLコードはエスケープすることも忘れずに。
で、ハッカーがバカ正直にウチのウェブサイトに接続して
あたしが丁寧に入力チェックを施したメールフォームから送信するとも限らないので
メール送信PHP側でも重複するのは承知でしっかり入力チェックはします。
HTMLのフォーム部品にJavascriptで入力チェックするのは
サーバー上のPHPが受け取るデータに安全なデータを渡すというよりは
本当にあたしに用のある人≠悪質ハッカーが
ケアレスミスしたことを画面遷移した先で指摘されうんざり、、、イラっとくる?
のを避けるためだけにやっています。
そーゆーのもインターフェース。
こだわりたいヵ所です。

で、「お名前」欄に記入して「メール」欄をタップするなり、tabキーで移動するなり
「お名前」欄にあたっていたfocusが外れたタイミングで
「お名前」フィールドの記入をチェックする、と。
入力に問題があればエラーメッセージを表示する、と。
こいつは以下のコードで実現できる。
JS
document.getElementById("mailform").addEventListener('focusout', (event) => {
 if( !document.getElementById("inpName").value.match(/^.{3,20}$/){
   document.getElementById("inpNameErr").innerText = "3~10文字の範囲で入力してください"
   document.getElementById("inpName").focus();
 }

 if( !document.getElementById("inpMail").value.match(/^[a-zA-Z0-9_+-]+(\.[a-zA-Z0-9_+-]+)*@([a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]*\.)+[a-zA-Z]{2,}$/){
   document.getElementById("inpMailErr").innerText = "アドレスの形式がおかしいにょろ"
   document.getElementById("inpMail").focus();
 }
});
みたいなコードで入力値チェックと、エラーメッセージ処理ができる。
ただ、プログラミンできる人ならすぐにわかると思うけど
この書き方だと、「お名前」だか「メール」だか「ご用件」だか知らないけど
どっかの項目を入力し終えると(=フォーカスが外れると)
全<input>要素をででーっとチェックしちゃうので
単純にまだ記入してないフィールドまでエラーメッセージを出しちゃうからマズい。
document.getElementById("mailform").addEventListener('focusout', (event) => {
   switch( event.target.id){
      case "inpName":
         上記の入力チェックとエラー表示処理
         document.getElementById("inpName").focus();
         break;
      case "inpMail":
         上記の入力チェックとエラー表示処理
         document.getElementById("inpMail").focus();
         break;
      case "inpMsg":
         上記の入力チェックとエラー表示処理
         document.getElementById("inpMsg").focus();
         break;
   }
});
とかって直前までフォーカスを保持した(=入力していた)フィールドだけチェックして
break; でほかのフィールドのチェックをスキップするコードにしました。
ちなみに入力内容がよろしくないとDOMにfocus()を指定して
別のフィールドに移ってしまっているfocusを
入力し直しさせたいフィールドに戻す記述をしているんだけど、、、
FireFoxで利きません
フォーム要素をeventListenerしている最中に別イベントを発生させる記述がマズいらしく?
focus()が無視されます。
幸いなことに無視されるだけとも言える。
Javascriptが動作を停止するほどのシリアスな不正コードじゃないし
他のブラウザでは動作するので
エラーを出したフィールドにfocus()をあてて入力待ちさせたほうが便利

■フォームを送信させる
<form id="mailForm">としか書いてなくてactionもmethodも書いてない。
この状態でテストすると「送信ボタン」を押すと自ページをリロードします。
action書いてないからあたりまへ。
で、「送信ボタン」をクリック or タップした後ブラウザのリロードを実行すると
「すでに送信したフォーム内容を再度送信するのけ(▼▼メ)」的な
止めはしないけど、感心しないみたいなアラートが起動します。

↓このコードで表示される
<button name="btn">確認画面を出しません。<br />このボタンで一発送信するので気を付けて</button>
↓このボタンのクリック or タップでPHPに接続させるには


JS
document.getElementById("mailform").btn.addEventListener("click", (e) => {
  document.getElementById("mailform").btn.type = "submit";
  document.getElementById("mailform").action = "mailform.php";
  document.getElementById("mailform").method = "post";
});
とやると、フォーム要素をPHPスクリプトに投げるボタンになりまする。
つか、、、その予定、、、(汗)。
この画面遷移しない入力データチェックのコーディングに鬼ほど時間がかかって
PHP側のチェックは今日はもうやる気力なし
思ったように動作しなくて泣き暮らす未来がみーえーるー。

document.getElementById("mailform").btn.type = "submit"; は
<form></form>内で<button name="btn">としか記述してなくて
type="〇〇〇" を省略しているんだけど、規定値が submit。
<button name="btn" type="submit"> と書いたのとおなじことだから
わざわざ
document.getElementById("mailform").btn.type = "submit";
なんて書かなくてもいんだけど~
むしろ、こーゆーsubmitしないで入力チェックするようなコードを書くときに
submitされてhtmlファイルをロードされるとウザいから
<button name="btn" type="button">
とか書いてページ遷移を抑止する目的で使います。
入力項目は
フィールドに入力し終わる(=フォーカスが外れる)たびにデータチェックしてるけど
エラーがでたままでも「送信ボタン」は押せてしまうので
「送信ボタン」が押されたタイミングで全項目が埋まっているかチェックする必要がある。
空項目があったり、なにがしかのエラーがあったとき
<button name="btn" type="button">
で、フォームの送信を殺すコードを書くわけですね。
こっちは正常だからフォームをPHPに引き渡すよ! という処理に
可読性のためだけに冗長な
document.getElementById("mailform").btn.type = "submit";
をムダを承知で記述しているだけなので、この行はなくても正常動作します。
PHPに飛ばさないで action="index.html" でJavascriptのチェックをしているんだけど
思ったとおり動いています。
全項目を入力済で、なおかつエラーがないときは index.html に遷移するし
入力チェックで問題があるとPHPでゆーところの $_SELF のリロードすら発生しません。
カチーンと固まって一切の再レンダリングをしないから
入力済み項目に影響ないし、エラーメッセージもでます。
おそらくJavascript部分は書きあがった
「送信ボタン」でPHPが動かなかったり、サーバーエラーを吐いたら
$_POSTがちゃんと渡っていないってコトを疑えばいいカンジ。
2021年09月16日 (木) | 編集 |
eperanza.jpg
エスペのフェスブ
おお、エスペランサのほうもじわじわ進行してる~。

カウンターもタブラも物置の壁もとっぱらっての全面改装をしてます。
新オーナー三枝祐輔氏のコンセプトは表明されているんだけど、、、
 ・観客で遠近法
 ・圧巻の観客
 ・球体中心のバイレ
 ・立体的なハレオ
 ・狭小ながら大劇場感覚のタブラオ
 ・千利休の小宇宙タブラオ
 ・世界のバイレが体験したことのない
 ・ミニマム宇宙
 ・日本的タブラオ
 ・テアトロ・エスペランサ
言葉面がスペイシー寄りでありつつの
エスペの坪数で宇宙をイメージするのは苦行すぎて(苦笑)
まったくイメージ湧きません! 押忍っ。
でも、構造はなんとなく想像ついた。
2階部分をどう使うか想像通りならだいたい近い線をイメージできてる気がする。

田代さんの人柄にあっていたし
高円寺という土地柄や
田代さんや悦子ママのお客さんには居心地よかったと思うし
田代さん自体がお兄さんから引き継いだ古い店だし
基本的に昭和臭強めの若干だちゃい造りだったので
オシャレさんなタブラオに変身しそ~。
世代交代のいい面が発揮されそうで楽しみ~
2021年09月16日 (木) | 編集 |
まぢかーーーーー!
叩いても叩いてもポンチで穴あかないよ~
表面の薄皮すら切れないカンジ。
ただただ跡がつくだけ。
お徳用カシメで練習したはぎれの皮は難なく穴あいた。
この財布の皮は手触り的にはそれよりはるかに柔らかい皮ってカンジ。
もしかして”皮なめし”って皮の表面に粘り的なものを持たせる役割あったりする?

スペインって馬も産出するし、、、つか
おなじみのへレスが馬の産地として名高い。
フラメンコ祭りの約ひと月後に盛大な馬祭りがあるくらい。
ってわけで馬具をつくる職人さんも伝統的な職業としてある。
日本では”皮なめし”とゆーとイタリアってイメージだと思うけど
スペインもなかなかのもので、靴やバッグも質のいいものを作っているのです。
デシグアルの製品は中国で縫製しているっぽいんだけど
※タグにめちゃくちゃmade in chinaって書いてあるし(汗)
材料の皮はスペイン本国から持ち込んでいるんじゃないかな~???

でた! 電ドリ!!
スクリュードライバーで穴をあけるので避けたかったんだけど
穴のまわりは金具で隠れるのでちっとやそっと口が汚くなってもいいや
と、スクリュードライバーをぶち込んでやりました

    04_20210916172622a9f.jpg
あら思ったより口が汚くならなかった\(^o^)/
汚くなったとしてもへーきだけどね。
ノーマルなカシメでも口周辺は隠れるけど、それよりさらに大きな飾り金具だから。

とはいえ、、、
ファスナー端の側は想像した以上にカシメを打ち込むのが難しかった。
ファスナー端から向こうは大きく開かないから
わずかな隙間から覗いて作業するしかなかった。
どうにかこうにかカシメの足を受けカシメに刺すことはできたけど
めちゃくちゃ時間かかったわ~
どんだけ難しかったかというと
足を受けにハメようとすると受けカシメが指から落ちるから
最終的には木工用ボンドをつけてカシメを軽く指先に貼ることを思いついた。
安定させた状態でくっと足を差し込むと軽くハマったのでめでたくハンマー作業へ。
棚を作ったときに余らせたこんな金具があったので
こいつをファスナーポケットのなかに差し込んでカシメをボコってやりました
お徳用カシメで練習したときあんがい打ちこまないとかっちり咬まなかったので
飾りを潰すかもと心配しながらさんざボコってやりました。
案外潰れないもんですね~。
お徳用カシメのほうがよほど軟くて”ぷっくり頭”がフラット気味に潰れたわ。
2021年09月14日 (火) | 編集 |
後払い決済paidy
日本でサービス展開しているのを知らなかったんだけど
アメリカで学生とかが使っててなかなかの取り扱い嵩なのは知っていた。

クレカを持てない未成年者
クレカ枠が少ないか、使いすぎて足りないとき
ネットショッピングの際のクレカ生情報隠蔽

なんかに使うそうだ。
テレビ番組のリポートなので話し半分でいいかと思うんだけど
いかに流行っているかをさんざ煽ったリポートの中で
Qoo10の社員へインタビューして「最近利用が増えている」と言っていた。
どーなんでしょーねー???
そんなに冴えたサービスとは思えないんですが。
政府は国民の鏡なので
ITとかフィンテックに弱いのは
なにも政府だけじゃなく、国民の大半が弱いってコトかと(?)
ちなみにあたしはそう感じています。

さて、Paidyなんですが、、、どこがいいんだ?
返済方法が銀行振込、口座振替、コンビニの時点でおわってる

クレカを持てない未成年者
クレカなしでネットショッピングの決済手段を提供してくれるのでナイス。
って思ってしまいそうだけど、、、
今時デビクレカが付帯してないキャッシュカードなんてないから
未成年者だからって困ってないんじゃないかなぁ?
ゲーム課金系 で無駄遣いするのを親に禁じられていて
銀行口座はあってもカードを持たせてもらっていない可能性はあるので
Paidyに払ってもらって後からコンビニ返済できるのはいいのかもしれないけど
は? それそんなに冴えてますか?
こんな新参の決済手段に対応しているショップは
ハナからコンビニ決済も対応してるわ
わざわざpaidyを経由させる意味がわからん

クレカ枠が少ないか、使いすぎて足りないとき
インタビューに答えていた人が
自営業なのでクレカ枠が少ないから林檎ノーパソをPaidyで支払ったらしい。
オンライン林檎ストアってクレカ決済のみなんですかね?
関心ありませんが
クレカじゃないと支払えない場面ってのはたしかにある。
でぇ~、想定外に歯医者にもっていかれとか(←経験者)
クレカの限度額がごっそり減ってしまったんだけど銀行口座に現金はある
って場合
クレカの枠をつかわないでPaidyで払えたら便利かもね(?)
いやいや、さっきも書いたけどキャッシュカードにデビカ付帯してるから~。
その番号をつっこめば銀行口座にただちに引落にいくんで
Paidyに建て替えてもらって後日Paidyに入金するほうが手間だろーが。

ネットショッピングの際のクレカ生情報隠蔽
PayPalでよくない?
あちこちのショッピングサイトに生クレカ情報を保存しちゃうと漏洩が心配。
ごもっとも。
なのであたしはPayPalを使っている。
キャッシュカードにデビカ付帯があたりまえなんでクレカない人なんていないけど
宗教上の理由(笑)でクレカ忌避の人がいるにはいるらしい。
クレカなしキャッシュカードの人も皆無ではないみたいよ。
PayPalの決済手段はクレカ決済以外に
銀行口座振込、振替もあるのでPaidyだけの機能ってわけじゃない

そしてPayPalだと
登録してあるクレカで弁済できるからクレカの還元がつくぶん得

林檎ノーパソを買った人なんて20万円以上払っているんだろうし
クレカの還元を受け取らないなんてありえないわ!

つぅわけでPayPalはPaidyの完全上位互換です
しかも老舗フィンテックなので対応している国も多いです。
スペインに関しては鉄道や航空会社はPayPal対応だけど、Paidyなんて知りません。
ちょっと気の利いたアカデミアならPayPal対応だけど、Paidyなんて知りません。
ビジャマルタ劇場は気が利かないのでPalPal非対応 かつPaidy知らず。

日本人って友達が使っているから使う的に
使いどころかよくわからないモノはどんなに奨められても調べないし、使わない
ってカンジですかね~???
テレビなんかで宣伝されるととくにどってことないサービスでも
わけ知り顔の人が使い始めて、そこから周囲に広がるって印象あります。
フラメンカのみなさんはPaidyなんて無視してPayPalのアカウントにしておきなされ。
どーせPayPalに買収されるらしいので
Paidyのウェブサイトの使い方を覚えるのは無駄です。
こんな記事を読んでフィンテック企業の口座をつくる人は
調べるのがキライなものぐささんだと思うので
(クサしてないです。ものぐさいいと思います)
最初からPayPalの使い方を覚えてしまうのが手間なくていいと思います。

先日、美穂先生のお誕生日を祝うライブを卒業生が開催したんですが
コロ助禍なので現地ちょびっと&ライブ配信方式にしていました。
で、美穂先生は古参のフラメンカなので
生徒さんたちのなかには高齢の人も多いです。
高齢じゃないけどIT苦手な主婦やOLさんや販売員さんもそこそこいます。
ライブ配信の受信に踏み切らせるのがなかなかの難行だったみたいです。
みなさんYouTubeくらいは見るので受信自体はそれほどでもなかったようだけど
支払い
3Dセキュアって呼ぶんだけど、クレカ署名欄にある3桁CVV以外に
クレカ会員用のウェブサイトにログインして
オンライン決済を有効にする作業をしておかないと
不正利用防止の観点からオンライン決済を跳ねる決済代行業者があるんです。
つか、IT後進国の日本国内のショップやサイト以外は
3Dセキュアの設定なしにクレカでオンライン決済できる会社って皆無です。
VISAの場合は、VpassのログインIDとパスワードがそのまま3Dセキュになるし
JCBだと、クレカ会員サイトにログインしたら「J/secureの設定」って項目がある。
アメックスもJCBとおなじで、「American Express Safekey」。
VISAだけが3Dセキュアがこれほど重要でもなく、知らない人が多かったころから
カード会員全員がなにも意識しなくても3Dセキュアを使えようにしていた、と。
人任せにしがちな日本人向けの仕組みで悪いやりかたとも言い切れないんだけど
クレカ会員サイトへのログインID+パスワードと
オンライン決済用のログインID+パスワードはちがうものにしたほうがセキュアなわけで
セキュリティにちょっと問題あるってゆー諸刃の刃です。

ともかく
かように現代生活とフィンテックは切っても切れない関係になりつつあるので
なんにも準備してない人はそろそろ理解しておかないとキツいかな~。

で、フラメンカさんたちは
周囲の人たちが踊らされてPaidyのアカウントを作ってしまっても
それに流されずPayPalのアカウントを取りましょう!
どうせPayPalに買収されて一体化するんだから下位互換を使う意味ない。
なんだったらPayPalがPaidyの上位互換だよ!
とマウントとってやってもよろしいかと。
ってお話しでした。
m(__)m おあとがよろしいよーでー。
2021年09月12日 (日) | 編集 |
じゃらじゃら~。
ハンクラし放題ですな!

茶封筒がビニール袋に封入されていました。
昨日、今日ってところによっちゃ雨だったからね。
ショップも偉いけど、日本郵便もありがたい。
土日なのに発送、配達やってくれたんだね~。

しかーしっ、まだポンチを入手できてない~
稽古の帰りにキャン★ドゥに寄ったんだけど置いてなかった。
やっぱダイソーか。
ま、明日オープンだからいっか。
おそらく大規模に店内のレイアウト変わってるんだろうなぁ、、、。
けっこう大きなダイソーなんで探しまくるんだろうなぁ。