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

Web

CSSで円錐台を作りたい。

Web > css 2019年8月7日(最終更新:10日前)

どもです。

CSSで台形を作るのは、borderを使えば簡単です。
原理は以前に書きましたCSSで三角形を作るのと同じで、borderの一辺のみを表示させればOK。
三角形の場合は要素のwidthを0にしましたが、台形は要素のwidthを上辺、border-bottomを下辺にします。

また、CSSで円柱を作ることも可能です。
長方形を作り、border-radius:50%/25%;を設定してやれば、円柱のシルエットができます。
その中に色違いの楕円を入れてやれば、円柱の完成です。

さて、これらを組み合わせて円錐台を作ろうと思うと、borderで台形を作る方法ではborder-radiusの利き方が狂うため、作れません。

というわけで、border-radiusを利かせられる(borderではなく要素そのもので作る)台形の作り方を模索します。

(*'ω'*)
... 続きを読む »

IEはfor..ofループ使えないし、IE8はarray.indexOfすら使えない

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

どもです。
タイトル10割の備忘録。

モダンブラウザで動かすなら、これだけの処理。

まず、IE11すらfor..ofは使えないので、こうなります。

しかしIE10以下はletが使えないので、こうなります。

随分とダサくなりましたが、まあ仕方ないでしょう。
と思いきや、配列.indexOf()がIE8で使えないそうです。

いや今どきIE8て。
旧いシステムで対応ブラウザが指定されているような例を除いて、IE8とかもはや情弱ツールでしょ…

対応しなきゃダメ?なんでさ。

この辺から溜息が憤りに変わってきます。

読み辛ッ…読み辛い!!


参考サイト
[Qiita]ES2015(ES6) 入門... 続きを読む »

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

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

どもです。

とある旧い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日(最終更新:2月前)

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

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

シンプルに裏返す

本件のミソは、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日(最終更新:2月前)

どもです。

バーコードリーダを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日(最終更新:2月前)

どもです。

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日(最終更新:3月前)

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

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

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

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

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

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

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

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

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

1 2 3 4 5 6 22