みかづきブログ・カスタム

基本的にはちょちょいのほいです。

HTML

SVGの属性に複数の値を渡す際、最後の値にセミコロンをつけるべからず 😱

blog.kimizuka.org 先日の記事 をiPhoneで見ていた際に気づきました。 問題なくアニメーションしているSVGと、アニメーションしないSVGがあることに。(現在は修正済みです) DEMO こちら、地道に検証したところ、SVGの属性にセミコロン区切りで複数の値を渡…

SVGのpathを線形保管でアニメーションさせる 📹

DEMO SVGをアニメーションさせる場合、animate要素を使えば割と簡単に実現できます。developer.mozilla.orgただし、パスを線形保管でアニメーションさせたい場合は、変形前、変形後のコマンドの数を同数にする必要があるので、線形変形可能なSVGデータを作る…

windowのサイズを計測するページをつくる 🪟

以前、まったく同じものをつくった気がしなくもないのですが、見当たらなかったので作成しました。develop.kimizuka.orgFullScreenAPI に対応しているブラウザであれば、全画面にすることもできます。 ソースコード(抜粋) index.js handleResize(); window…

Google Chromeの印刷機能でWebサイトをA4のPDFに変換する際、1ページに表示できるDOMの大きさ何pxになるのか調査する 📄

はじめに 結論 px指定 mm指定 調査 ❶ グリッドを表示して計測 ソースコード 結果 調査 ❷ DOMの大きさをmmで指定して計測 ソースコード 結果 結論 はじめに 最近、HTMLをPDFに変換したいと思うことが増えてきまして、いろいろ調査していたのですが、そんな中…

animateTransformを使ってSVGにアニメーションを埋め込む 🎥

これまでSVGを動かす場合、CSSの@keyframesを使ってました。developer.mozilla.org具体的には、こちらのSVGを回転させたい場合、 CSS(抜粋) svg { animation: rotate .8s linear infinite; } @keyframes rotate { 0% { transform: rotateZ(0deg); } 100% {…

textareaを使ってHTMLの特殊文字をアンエスケープする 📝

特殊文字をアンエスケープしたいと思って、もろもろ調べました。Mozillaのサイトによると、 < &lt; > &gt; " &quot; ' &apos; & &amp;こちらの5文字が特殊文字として挙げられています。developer.mozilla.org最小の構成であれば、この5文字をreplaceす…

JavaScriptの力でユーザーのクリック無しでファイルをダウンロードできるか検証する 📦

developer.mozilla.orgaタグに付与することで、クリックした際にファイルをダウンロードできるdownload属性。 非常に便利に使えるので、これまでも、aタグのダウンロード属性をつかった検証は何度か行ってきました。blog.kimizuka.org blog.kimizuka.org今回…

iOS15のSafari、MacOSのSafari 15からmetaタグでテーマカラーが指定できるようになった模様 📱

今朝、iOSを15にアップグレードしつつ、Mac版のSafariも最新にしてみたところ、どちらもサイトによってメニューバーやナビゲーションバーの色が変わるようになってました。Safari15から、theme-colorを評価するようになったようです。developer.mozilla.org…

MediaDevices.getUserMediaが使えるか確認するページをつくった 📱

2022年に終了と噂のAndroid Things。developer.android.comAndroid Thingsのおかげなのかはわからないですが、IoT系のプロダクトでOSにAndroidを採用しているものは、まあまあ多いように感じます。最近、OSがAndroidのIoT機器のブラウザで、MediaDevices.get…

iOS14からhref属性にbase64を指定しても画像が開けなくなった模様 📱

base64 👈 こちら、hrefにbase64を設定したaタグです。 <a href="data:image/png;base64,..." target="_blank">base64</a> このリンクをタップした時の挙動が、iOS13 → 画像が開く iOS14 → ブランクのページが開くとなっていることに気づきました。気づいた理由としては、前回の記事の続きで、iOS13でのダウンロード属性…

iOS13からdownload属性の挙動が変わった模様 📱

先日、10文字ホラージェネレーター たるものを制作させていただきました。10.ujiqn.com「ユーザーが入力した文字をCanvasにレンダリングして画像として書き出す」という非常にシンプルな仕様のサイトです。 生成した画像をローカルにダウンロードしてもらう…

metaタグを使ってGoogleの検索結果に引っかからないようにする 🔍

developers.google.comGoogle検索ディベロッパーガイドたるものがあるので、これに従いましょう。ものすごくざっくり結論を書けば、 <meta name="robots" content="noindex" /> というmetaタグをhead要素内に書いておけば、検索結果に表示されなくなります。 そんなケースはないような気がしますが、G</meta>…

Vimeoにホスティングしたビデオをiframeからしか呼び出せなくする(vimeo.com上で非表示にする) 🎥

個人的には、ウェブページでビデオを表示したいときにvideoタグを直接書くことはほとんどなくて、YouTubeやVimeoにホスティングして、API経由で表示したり、iframe埋め込みをすることが多いです。その際、例えばログインしたユーザーのみなど、限られたユー…

formタグを入れ子にすると、子のformが消える 😱

すごく単純な話なのですが、 <form id="parent"> <form id="child"></form> </form> という感じで書くと がレンダリングされません。消えます。コンポーネント単位で開発していて、僕が作ったformが表示されずに、なんでだろうと思って調べると、他の人が作ったformと入れ子になっていることが原因ということに…

ドラッグ&ドロップでファイルをアップロードする(HTML Drag and Drop API無しバージョン) 📦

ウェブサイトにファイルをアップロードする際、ファイルをドラッグ&ドロップするUIをよく見かけます。 そういったUIを実装しようとすると、HTML Drag and Drop APIを使いたくなることでしょう。developer.mozilla.orgしかし、実はinputタグでも簡単に作成す…

inputタグのinputmode属性によるキーボードの見栄えを調査する(iOS編) 🔍

はじめに 見栄え一覧 none text decimal numeric tel search email url kana kana-name katakana おわりに はじめに HTML5.2にて廃止予定なので、できることなら使いたくないことでおなじみのinputmode属性ですが、なんだかんだで便利なので使いたくなるケー…

base64でbrank.gifを生成する 🖼

ウェブサイト制作中、まれに1px × 1pxの透過画像が欲しいなと思うことがあります。 主に、IEやAndroidのバグ回避のときなどなんですが。そんなとき、画像ファイルを用意するのは面倒なので、base64をつかってました。1px × 1pxの透過pngならこんな感じです。…

GAFAのviewportの書き方を調べて、最強のviewportを検討する 💻

結論 viewportは環境ごとに設定すべきか Apple Google Amazon Facebook viewport-fit=coverをつけるべきか viewport一覧 Macで観覧 iPhoneSE(320px)で観覧 iPhoneX(375px)で観覧 Pixel2(411px)で観覧 iPad(768px)で観覧 iPad Pro(834px)で観覧 Nex…

IE11でdatasetをつかってdata属性を動的に更新すると属性セレクタで指定したスタイルが反映されない 💻

結論 IE11ではdatasetでdata属性を更新してもスタイルが反映されない IE11でもsetAttributeでdata属性を更新すればスタイルが反映される! 詳細 かれこれ、ずーっと悩んでいたことだったのですが、IE11では、 属性セレクタをつかってスタイルを指定 dataset…