www.npmjs.comNuxt.jsでSVGをいい感じに使いたいときはnuxt-svg-loaderを使うと便利です。 <template> <div> <icon /> </div> </template> <script lang="ts"> import Icon from '~/assets/svg/icon.svg'; @Component({ components: { Icon } }) export default class Button extends Vue {} </script> こんな感じで、SVGをコンポ…

DEMO develop.kimizuka.orgFacebookのいいねボタンはパラメータで言語を変えることができます。例えば、 ja_JP ja_KS en_US en_UD he_IL といった感じです。言語によって横幅が変わってくるのと、左寄せになるもの右寄せになるものがあるので、注意が必要で…

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

npmでユーザー名が数字のみで構成されるアカウントをつくろうとしたとき、 400 Bad Request - PUT https://registry.npmjs.org/-/user/org.couchdb.user:123456 - That word is not allowed. Please contact support (support@npmjs.com) if you believe you…

タイトルにすべてを書いてしまいましたし、当たり前のことなんですが、そういうことです。まず、保存容量は https://drive.google.com/drive/quota から確認できます。 無料プランだと15GBが上限です。drive.google.comいままでは全然容量に困ったことはなか…

keyframeアニメーションでcontentって差し替えられるのかな。と思って試してみたところ動いた。 使いようによっては便利かもしれない。

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

Nuxt.jsやNext.jsを使った開発の時は、loaderに任せてしまうので特に気にすることはないのですが、稀に開発環境無しでウェブサイトを作ることがあり、その際、画像の圧縮をどうしたものかなと考えることになります。少数であれば、 ImageAlpha と ImageOptim…

もろもろ、調べた結果、 /[^\x01-\x7E\uFF61-\uFF9F]/ この正規表現にマッチすれば、全角文字という結論に達しました。 1バイトの文字と半角カタカナ以外を全角文字と定義した書き方です。 /^[^\x01-\x7E\uFF61-\uFF9F]+$/.test('あいうえお'); // => true /…

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

先日、こちらの npmパッケージ をちょっと改造して、プロコンをMacに接続することに成功しました。www.npmjs.comblog.kimizuka.org同じ要領で、リングコンをMacに繋げようとしたのですが、どう頑張ってもJoy-Con（R）として認識されてしまいます。Bluetooth…

DEMO See the Pen Fixed Header by kimmy (@kimmy) on CodePen.ヘッダーってfixedで実装されることが多いのですが、個人的には2つだけ心掛けて欲しいことがありまして、例えば、コードレビューのレビュアーになることがあったら、少なくとも❶は確実に指摘し…

https://obniz.io/ja/products/m5stickc/obniz.io obnizとは 株式会社 CambrianRobotics（カンブリアンロボティクス）がつくっている、obnizという名のデバイスです。 そしてobnizOSという名のOSのことを指すこともあります。 M5StickC[obniz無期限ライセン…

OSXのコマンドに afplay というものがありまして、これを使うとターミナルから音楽が再生できます。おそらく Audio File Play ということなんだと思います。違うかもしれません。 もうちょっと調べようと思ったのですが、OSXのコマンド一覧や、afplayのドキ…

2台のiPhoneが着信時に同時に鳴り始める現象を有効活用できないかと考えた結果、片方の着信音に「Berryz工房」の「Because happiness」、もう片方の着信音に「℃-ute」の「幸せの途中」を設定してみた。着信があると、同時に再生されて、ばっちり1曲に聴こえ…

www.pixijs.comPixiJS をつかって、全面Canvasのサイトをつくっているときには気づかなかったのですが、ファーストビューがCanvas（PixiJSでレンダリング）で、その下にコンテンツがつづくページを実装していた際に気付きました。PixiJSのviewに設定したCanv…

ひょんなことから調べてみたのですが、ブラウザ版のツイッターでは背景透過の画像がTwitterカードに設定可能でした。（2020年7月7日現在） 裏に単色が敷かれることもなく、透過のまま表示されます。 つまりタイムラインの背景色と併せれば不可視にすることも…

Macが接続しているWiFiのSSIDなどステータスバーを見れば一目瞭然なのですが、今回はSSIDをコードから取得する方法を調査しました。 ターミナルから調べる Node.jsで調べる ターミナルから調べる /System/Library/PrivateFrameworks/Apple80211.framework/Ve…

Gamepad APIをつかって、ブラウザからコントローラーの入力を取得。https://t.co/EQ4CxCylO6 pic.twitter.com/JuQ3At6RNP— 君塚史高 (@ki_230) 2020年7月3日 昨日はNode.jsをつかって、Macに接続されたコントローラーの入力を取得しましたが、今日はGamepad …

接続方法 ボタンイベントのコールバックを登録する ソースコード プルリクエストをつくる Nintendo Switch Proコントローラー、通称プロコン。www.nintendo.co.jp 世界のアソビ大全用に購入したのですが、複数人でのプレイ時には使用できず、どうしたものか…

ひょんなことからGETパラメータを基にキューブを生成してくれるサイトをつくってみました。develop.kimizuka.org 使い方 ❶ https://develop.kimizuka.org/cube/?1,1,1,1,1,1,1,1という形でGETパラメータにカンマ区切りで1を渡すと、1x1のcubeを8個並べてcube…