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

SegoeUIはマイクロソフトがよく使用するフォントであり、Windowsに搭載されていますが、Macには搭載されていません。 なので、ウェブサイトでSegoeUIを使い、絶対に表示させたい場合、ウェブフォントを導入することになります。まず、Googleフォントで探して…

blog.kimizuka.org やら Netlify やら Firebase Hosting + Cloud Functions にBasic認証をかけることはあったのですが、単純なApacheにBasic認証を掛けたことがなかったので調べました。 ❶ Basic認証をかけるディレクトリのパスを調べる PHPが動く環境だった…

久しぶりにNuxt.jsでプロジェクトを作成したところ、コンポーネントの自動インポート周りでエラーが起こりました。 結論 結論を先に書くと、Nuxt.js（v15.0）からnuxt/componentsがv2に切り替わったことと、僕がAtomic Designのルールにのっとり、components…

久しぶりにNuxt.jsでプロジェクトを作成したところ、sass-loaderがエラーを吐きました。 Module build failed (from ./node_modules/sass-loader/dist/cjs.js): TypeError: this.getOptions is not a function at Object.loader Nuxt.js（2.15.7）とsass-loa…

久しぶりにWebARを実装する機会があり、自分の記事を読み返していたのですが、いつの間にか動かなくなっていました。。blog.kimizuka.org「何もしてないのに壊れた！」と思ったりしましたが、検証してみた結果、 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/master/three.js"></script> <script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/GLTFLoader.js">

developer.mozilla.org最近、clip-pathを使い、DOMにクリッピングマスクを掛けることが多いのですが、クリップしたDOMにbox-shadowで影を落とそうとすると上手く行きませんでした。 影が落ちない例 div { width: 200px; height: 100%; background: #fff; cli…

threejs.org最近、ドキュメント に、 シーンからメッシュを削除すると、そのジオメトリとマテリアルも破棄されますか？ いいえ、dispose()を使用してジオメトリとマテリアルを明示的に破棄する必要があります。ジオメトリとマテリアルはメッシュなどの3Dオブ…

vercel.comVercelにBasic認証をかけることに成功したので手順をメモしておきます。 ❶ ホスティングしたいファイルをpublicディレクトリに入れる ❷ プロジェクトルートにapp.jsをつくる app.js const protect = require('static-auth'); const safeCompare = …

nextjs.orggithub.comすべては上記のドキュメントとサンプル通りなのですが、useRouterとrouter.eventsを使えば、ページ遷移時にコールバックイベントを設定することができます。 import { useRouter } from 'next/router'; export default function Page() …

<Link href="#hash"> hashchange </Link> というリンクをクリックしてhashを変化させた時、 window.addEventListener('hashchange', () => { console.log('hashchange!'); }); と、設定したハッシュチェンジイベントが発火せずにとても困っていました。※ next 10.1.3にて確認手っ取り早…

Nuxtでいうところの、nuxt-svg-loaderのようなパッケージを探していたのですが、公式のサンプルを参考に、babel-plugin-inline-react-svgを使うことにしました。github.com github.comNext.jsの設定、TypeScriptの設定をメモしておきます。 パッケージのイン…

useEffect で window.twttr.widgets.load を実行すればOKです。 declare global { interface Window { twttr: any } } export default function BtnTweet() { useEffect(() => { window!.twttr!.widgets!.load(); }, []); return ( <p className="btn-tweet"> </p>

String.prototype.localeCompare という非常に便利なメソッドを発見しました。引数に'ja'を渡しつつ、Array.prototype.sortと組み合わせることで、日本語を五十音順にソートすることができるようです。developer.mozilla.org [ 'オギノ', 'マーティン', 'ナ…

結論 childrenに型をつけなければならない場合は、 import { ReactNode } from 'react'; function Parent({ children }: { children: ReactNode }) { return ( <div>{ children }</div> ); という感じで、ReactNodeを使うことにしました。 ことの発端 Reactでコンポーネ…

コンソールからは削除できず、firebase-toolsを使い、 firebase hosting:disableを実行すれば削除できます。