※ Contentful と Nuxt.js の説明は省きます。www.contentful.com ja.nuxtjs.orgContentfulとNuxt.jsをつかってウェブサイトを使う場合、こちらの公式のドキュメントを参考にしていました。www.contentful.comが。Nuxt.jsの2.13からdotenvの扱いがより便利に…

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

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

先日、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を実行すれば削除できます。

<nuxt-link to="#hash">hashchange</nuxt-link> とか、 <nuxt-link to="{ hash: '#hash' }">hashchange</nuxt-link> というリンクをクリックしてhashを変化させた時、 window.addEventListener('hashchange', () => { console.log('hashchange!'); }); と、設定したハッシュチェンジイベントが発火せずにとても困っていました。※ nuxt 2.12.2の…

developer.mozilla.org text-decoration-style: wavy; を使えば、 波線を引くことができます。 実際は、text-decoration-lineも指定する必要があるので、下線として波線を引く場合は、 span { text-decoration: underline wavy; } という感じになります。

mounted で window.twttr.widgets.load を実行すればOKです。 nuxt.config.js export default { mode: 'spa', head: { script: [{ src: 'https://platform.twitter.com/widgets.js' }] } } ウィジェットを埋め込んだコンポーネント <script lang="ts"> import { Component, Vue…

具体例を書くと、jQuery + Slickを使っているサイトをNuxt.jsに移植している際に発生しました。 import $ from 'jquery'; import 'slick-carousel'; import 'slick-carousel/slick/slick.css'; という感じで、slickをインポートしているComponentをテストし…

Nuxt.jsにて、 import '~/assets/css/common.scss'; という感じで、scssをインポートしているComponentをテストしようとすると、 SyntaxError: Unexpected identifier と、SCSSがパースできずJestがコケて困ってました。解決策を探してみたところ、 vue-jest…

Null合体演算子たるものを教えてもらいました。 Null 合体演算子 (??) は論理演算子の一種です。この演算子は左辺が null または undefined の場合に右の値を返し、それ以外の場合に左の値を返します。 https://developer.mozilla.org/ja/docs/Web/JavaScrip…

最近、ウェブサイトを作る際、IEを非対応にして良いというケースが増えてきたため、ついに position: sticky を使い始めました。 position: sitickyとは 要素は文書の通常のフローに従って配置され、直近のスクロールする祖先および包含ブロック (直近のブロ…

developer.mozilla.orgIEに対応しなくてよいのであれば、object-fitを使えば実現できます。object-fitで指定できる値は4つあって、デフォルトはfillです。 contain 置換コンテンツはアスペクト比を維持したまま、要素のコンテンツボックスに収まるように拡大…

最近、久しぶりにGoogleアシスタント向けアプリをつくろうと思ったのですが、制作手段として、Actions BuilderというIDEが誕生していることに気づきました。昔は、Actions on Google + Dialogflow という感じで2つのサービス（内部的にCloud Functionsも使っ…

ja.reactjs.orguseRefといえば、DOMにアクセスする手段としておなじみ ですが、なんとなく使い所がわかったようなわからないような気がしたのでメモを残しておきます。ja.reactjs.org1秒間に1回、useStateを使ってtextを更新するコードを書いた際、下記の書…

blog.kimizuka.org昨日は、React.callbackを使って子コンポーネントのレンダリングをスキップすることに成功しました。今回はその続きです。React.memoを使っても、子コンポーネントのレンダリングをスキップできないケースがあります。それが、propsとして…