ど素人から毛を生やす。<延>

Web

scriptタグの中のURLはHTMLエスケープしちゃダメ…のはずが。

Web > javascript 2019年6月19日(最終更新:6日前)

どもです。

とある旧いWebシステムのアップデートを行いました。
どれくらい旧いかといえば、推奨環境がIE5~8という旧さです。

で、アップデートの直後、窓口の方から「ボタンを押したらエラーになった!」と報告があったのですが、詳しく状況を伺うと推奨環境のIEでなくGoogleChromeでアクセスしていること、そもそも今回アップデートした箇所とは無関係であることがわかりました。ヲイ。

で、肝心の何がエラーを起こしていたのか、ですが。

window.open("xxx.php?para1=1&pra2=2");

これでした。

正確には、これをjsファイルの中で書いたことでした。

確かにURLの「&」を「&」で書くことは推奨されていますが、これはあくまでhtml中の場合です。

jsファイルは当然、srciptタグの中もjsのルールで動きます。
そして... 続きを読む »

CSSだけで要素を裏返すアニメーションを実装する

Web > css 2019年6月5日(最終更新:20日前)

どもです。
所用でツールを作っていたときに、コインが裏返るようなアニメーションが欲しかった。

というわけで実装してみました。

シンプルに裏返す

本件のミソは、transform:rotateY()とbackface-visibility:hiddenです。

transform:rotateY()は昨今よく見かけると思います、要素をY軸で回転させるスタイルです。
本件は2つの要素を同座標に重ね、Y軸回転させてアニメーションを実装。
条件を満たす(今回は:hover)ことで表示する要素を切り替えることで実装しています。

が、普通は要素を裏返すと、薄い紙を裏から透かして見たように、表面の内容が鏡写しになるだけです。

ここで必要なのが、backface-visibility:hidden。
この「表面の内容が鏡写し」をbackface-visibility要素が管理しており、hiddenにすることで回転させたときに「裏面を表示しない」要素になります。

裏面を表示しない要素同士を同座標に重ね、片方を初期値裏に設定。トリガーで表面を裏返し非表示に、裏面を表返し表示状態にする、という寸法です。


参考サイト:... 続きを読む »

$(document).keypress(function(){})はスマホの個体差で爆死することを僕は学んだ。

Web > javascript 2019年5月23日(最終更新:1月前)

どもです。

バーコードリーダをBluetoothでスマホに接続するタイプのウェブシステムを作っていたのですが、いざ実機(AndroidのGoogleChrome)で動かしてみると稀にホーム画面に飛んでしまう。なにゆえ?

再現条件を調査したところ、
①alertでOKを押した直後、またはalertのフォーカスを外した直後
②Enterに相当するキー(CR)が入力されると
③ブラウザのツールバーの先頭(最左)が実行される

らしい。
アプリのChromeでは先頭がホームへのリンクのため、ホームに飛んでしまったわけです。
ホームへのリンクを非表示にしたところ、今度はURL欄の「サイト情報を表示」がヒットしました。

しかもこの現象、同じサイト上でも起きるページと起きないページがあるのです。
どうやらアラートウィンドウのOKボタンに初めからフォーカスが当たっている場合と無い場合があり、当たっている場合がアウトのよう。この差はなんだ。

$(document).keypress(function(){})で着火しているとアウトッッッ!!!

以前、iPhoneで検証したページをマイナーな実機で起動したら、$(document).keypress(function(){})が着火しなかった事件、あったなぁ…。(遠い目)

今回は.keypressで着火はOK、その後の処理も概ね問題なく、アラート時のフォーカスだけがバグった、と。... 続きを読む »

XMLなのにresponseXMLがnullでresponseTextに値が入るときに確認すること

Web > javascript 2019年5月17日(最終更新:1月前)

どもです。

XMLをjsで読み込む簡単なプログラムを作っていたはずなのですが、何故か読み取ったファイルのresponseXMLがnullになる。
responseTextには読み込んだファイルの中身が入っているので、読込後のエラーのはずです。

overrideMimeType()など試してみましたが、どうにもダメ。テキストでしか読めない。何故だ…

と思っていたら、思わぬところにヒントを発見。

XMLデータは階層構造になっています。HTMLと比較しても曖昧な構造にはなっていません。HTMLでは適当にタグを記述してもブラウザがうまく処理してくれましたが、XMLの場合には適当にやってしまうと正しく処理されません。
OpenSpace サーバー上のXMLファイルを読み込む

もしかして…と思い、件のXMLをGoogleChromeで開いてみることにしました。

XMLエラー

こここ、これだぁああああ!!

件のXMLが元はHTMLファイルだったことで、HTMLタグが残ってしまっていたんですねえ!!!

で、少しでもエラーがあると、XMLはXMLとして機能してくれなくなるんですねえ!!!!

それによりXMLとは認識されなくなって、responseXMLに入ってくれなかったんですねえ!!!!!

はぁ。しょーもな。_(:3」∠)_

この記事は役に立ちましたか?
... 続きを読む »

array_search()やin_array()する前には、ちゃんとarray_map('trim', $array)するんだぞ!ってメモ。

Web > PHP 2019年4月23日(最終更新:2月前)

どもです。
しょーもないことでハマったので備忘。

外部から貰ったCSVを取り込むのに、その項目が何列目にあるかをarray_search()で照合しようとしたら、特定の項目でfalse食らってしまったわけですね。

array_search()でやらかし易いミスといえば、

・第三引数にtrueを設定しないことで、文字列型と数値型の比較になってしまう。
・返り値0を考慮せず、if文にて「===false」を省略する

の2種類と思われます。
これはarray_search()の関数としての特性に由来することなので、探したらすぐに事例が出ます。

が、本件はもっと下らない話。

外部業者がCSVの出力でミスって、

"項目名1","項目名2","項目名3"

なんてCSVをくれやがったことで、項目名1が「項目名1... 続きを読む »

file_get_contents()はhttpでないと持ち帰るものが変わってしまう?

Web > PHP 2019年4月11日(最終更新:1月前)

どもです。
file_get_contents()に関する備忘録。

PDFを生成し、添付したメールを送信。そのためには作成したPDFをいちど取得しなければなりません。
しかし使用しているPDF作成ライブラリの仕様として、header()を変更してechoしてしまいます。
このため、include()でなくfile_get_contents()を使って生成データを「取得」することが求められます。

PDFを作成するソース自体は同ディレクトリにあるので、

$pdf = file_get_contents('./sauce.php')

としてみたところ、$pdfの中身はsauce.phpがそのまま入ってしまいました。
また、クエリストリングをつけるとNo such file or directoryです(これは当然か)。... 続きを読む »

PHPでファイルをダウンロードさせようとしたら空の実行ファイルがダウンロードされた事案のたぶんレアケース。

Web > PHP 2019年3月26日(最終更新:2月前)

どもです。

DBからcsvをダウンロードするphpを移植したら、空の(実行ファイル名).phpがダウンロードされてしまう事象が起きました。
開発や検証中にはそのような事例は一度も無かったのですが、はて。

この原因ですが、端的に言えば何も出力できないのに出力しようとしたことによるものでした。

解説しますと、最終的に出力するための記載がこれです。

header("Pragma: public");
header("Expires: 0");
header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
... 続きを読む »

Ajaxで403エラーを食らった原因がファイル拡張子だった話。

Web > javascript 2019年3月25日(最終更新:3月前)

どもです。
AjaxでデータをPHP処理しようとしたところ、403エラーになりました。

ForbiddenYou don't have permission to access /***/****/ajax.inc
on this server.

普段からAjaxを普通にやっているサーバーなので、パーミッションエラーというのは考えにくいのだけれど。

とか思っていたら、ファイルの拡張子が原因でした。

ajax.inc ... 続きを読む »

jQueryのイベント発火順を理解して、簡単に「それ以外を押したら閉じるサイトメニュー」を実装する。

Web > javascript 2019年3月20日(最終更新:3月前)

どもです。

HTML&CSSコーダーから離れて久しい僕ですが、久しぶりにまともにスマホ用ページを作ることに。
というわけでタッチで開閉するメニューを…

と思ったのですが、スマホ用ブラウザやアプリが使い勝手良く進化しているので、4年前の記事では不足。
具体的には「タッチで開閉するメニュー」に加え、「メニュー以外をクリックしたら閉じる」ようにしてやらないと、今どきは不親切です。

... 続きを読む »

Yahoo!出荷ステータス変更APIなのに「Request Parameter Error : Pay」

Web > EC 2019年2月14日(最終更新:4月前)

※2019/02/19 内容に間違いがあったので修正して再投稿。

どもです。
Yahoo!出荷ステータス変更APIにデータを送ったのですが、

<Code>od90101</Code>
<Message>Request Parameter Error : Pay</Message>

というレスをいただいてしまいました。
が、「Pay」がパラメータエラーとか言われても、リクエストデータに「Pay」入って無いんだけどナー???

それでこれ、原因は送信先のAPIを間違えていたという凡ミス。
出荷ステータス変更API(orderShipStatusChange)に送るはずが、
入金ステータス変更API(orderPayStatusChange)に送っていた。... 続きを読む »

1 2 3 4 5 6 22