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

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

iOS15のmobile Safariに搭載されたWeb Share APIを試す 📱

developer.mozilla.org developer.mozilla.org以前からAndroidのChromeには搭載されていたものの、iOSのSafariには搭載されてなかったWeb Share APIですが、iOS15にてついに有効になったとのことなので、早速実装してみました。一番ハマったところは、naviga…

iOS15のmobile Safariに搭載されたPull to Refresh(引っ張って更新)を強引に無効にする 📱

iOS

❶ 画面全体をoverflow-y: scrollの要素で囲う ❷ overflow-y: scrollの要素をちょっとスクロールさせておく ❸ overflow-y: scrollの要素のスクロール位置を監視してscrollTopが0にならないようにするの3点を実装することで、Pull to Refreshを強引に無効にす…

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

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

position: fixedで位置を指定した要素の親要素にoverflow: hiddenを指定を併用したい場合、親要素のtransform, perspective, filterを指定する 👀

CSS

通常、positionをfixedにした要素の親要素のoverflowをhiddenにしても、はみ出した部分は隠れません。 HTML <div class="parent"> <div class="child"></div> </div> CSS .parent { position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 160px; height: 160px; background: red; overfl…

改めてwidnow.closeの挙動を確認する(target="_blank"で開いたwidowを閉じる) 🚪

developer.mozilla.orgMDN Web Docsにてwindow.closeの仕様を確認してみると、 Window.close() メソッドは、現在のウィンドウ、またはそのページ上で呼び出されたウィンドウを閉じます。このメソッドが許可されるのは、window.open() メソッドを用いたスクリ…

Reactでchildrenにpropsを渡す 👨‍👩‍👧

基本的には、React.cloneElementを使い、propsを固定した状態のcomponentを作るのがセオリーのようです。ja.reactjs.orgイメージ的には、Function.prototype.bindを使って引数を固定した関数を作るのに似ている気がしました。developer.mozilla.org実際に例…

TypeScriptでthisの型を指定する 👨‍🏫

functionで宣言した関数の中でthisを使うと、 'this' implicitly has type 'any' because it does not have a type annotation. とエラーが出ます。アローファンクションと近い、functionによる関数宣言は実行方法によってthisが変化するからです。TypeScrip…

Node.jsでimport・exportを使う 💻

Node.jsで普通にimportを使おうとすると、 SyntaxError: Cannot use import statement outside a module と怒られます。いままではおとなしくrequireを使ってきましたが、世間はもう2021年。子供の頃思い描いていた未来です。 そう。流石にimportを使いたい…

Macでelectronとserialportを組み合わせてアプリを作る ⚡️

4年ぐらいぶりにシリアル通信を行うElectronアプリを作りました。おぼろげながら、 electronとserialportを普通に組み合わせるとエラーが出る rebuildすると使える という4年前の記憶がありまして、まずは、electron + serialportで中身が空っぽのアプリを作…

webpackでバンドルするスクリプト内で実行したスクリプト名を取得する 💻

process.env.npm_lifecycle_event で取得できます。Next.jsのexport設定を本番とステージング環境用で分ける際、 "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint", "export-staging": "next build && n…

jQueryのclosestをjQuery無しで使いたい時は、Element.closestの出番 🔍

jQueryのclosetとは querySelectorは己の子要素を検索するメソッドですが、closetは逆に己の親を検索する、jQueryオブジェクトのメソッドです。api.jquery.com Given a jQuery object that represents a set of DOM elements, the .closest() method searche…

microCMSのYouTube埋め込みの横幅を100%に変更する 📝

microCMSのリッチエディタですが、下記サービスの埋め込みに対応しています。 YouTube(https://www.youtube.com/) Vimeo (https://vimeo.com/) Twitter (http://www.twitter.com/) Instagram (https://instagram.com) Facebook (https://www.facebook.com/…