2021-02-04

JavaScriptでフルスクリーンを検知する

javascript

各ベンダーごとにイベントリスナーを追加して、fullscreenchangeイベントを検知する必要がある。（MDN見る限り、フルスクリーンAPIの諸々がSafariに対応してないのでちょっとめんどくさい）

developer.mozilla.org

document.addEventListener("webkitfullscreenchange", myFunc, false);
document.addEventListener("mozfullscreenchange", myFunc, false);
document.addEventListener("MSFullscreenChange", myFunc, false);
document.addEventListener("fullscreenchange", myFunc, false);

ただ、これらをいちいちadd/removeするのはめんどくさいので、まとめて扱えるようにする。 addで作ってるが、イベントリスナーを削除したいときはremoveでつくればよい。

const target = document;
addMultipleEventListener(
    target,
    "webkitfullscreenchange mozfullscreenchange MSFullscreenChange fullscreenchange",
    myFunc
)

---

const addMultipleEventListener = (element, eventNames, listener) => {
    const events = eventNames.split(" ");
    events.forEach(event => target.addEventListener(event, listener, false));
}

ハンドラーに関しては下記のように、fullScreenElementをチェックする。 nullが返ってきたらフルスクリーンではなく、対象となるDOMのnodeNameが返ってきたらフルスクリーンということ。

const myFunc() {
    const target = document;
    if (
        (target.webkitFullscreenElement &&
            target.webkitFullscreenElement !== null) ||
        (target.mozFullScreenElement &&
            target.mozFullScreenElement !== null) ||
        (target.msFullscreenElement &&
            target.msFullscreenElement !== null) ||
        (target.fullscreenElement && target.fullscreenElement !== null)
    ) {
        console.log("フルスクリーンです");
    } else {
        console.log("フルスクリーンじゃないです");
    }
}

下記参考URL

w3g.jp

qiita.com

2021-01-18

Netlify CMS+Nuxt.jsで管理画面を使えるようにする

nuxt.js netlify javascript

jamstack.jp

これを参考に各種設定してみた。一点、ブランチ名がmasterではなくmainになってるので、その点は注意。

2021-01-18

Nuxt.js+Netlify+GitHubでサイトを立ち上げる

javascript nuxt.js netlify github

Jamstackでポートフォリオサイト作りたかったので、いつも使ってるNuxt.jsをジェネレータとして、Netlifyにサイトをアップしてみた。

手順としては非常に簡単で、GitHubのリポジトリにNuxt.jsのプロジェクトをアップして、それをNetlifyに接続するだけ。 mainブランチにマージされたら、NetlifyのCI / CD BUILDが走る。

こちらを参考にした。

qiita.com

やってることはほぼこのままなのだけど、Yarnの場合はビルドコマンドを yarn generate にして、かつnuxt.config.jsに target: 'static'を加えた。

https://hyudoro.netlify.app/

2020-12-19

Vue.jsでTextareaフォーカス時にReturnキーを押したらSubmit処理する

javascript vue.js

KeyboardEventを型として、keyとcodeの両方で"Enter"を検出する。下記の例では、0文字のときは送信しなかったり、改行したいときの対策でShiftを押している時は送信しないようにしている。

<textarea v-model="text" @keypress="onInputKeyPress"></textarea>

onInputKeyPress(_e) {
    if (_e.key == "Enter" || _e.code == "Enter") {
        if (this.text.replace(/\s/g, "").length > 0 && !_e.shiftKey) {
            _e.preventDefault();
            // Submit系の処理
        }
    }
}

2020-11-21

mobile-device-detect を導入した

javascript vue.js

Vueプロジェクトでデバイス検出するためにmobile-device-detectを使ってみた。普段のサービス開発では、nuxt-device-detectを使っていて、これはそれに似たもの。

www.npmjs.com

導入

$ yarn add mobile-device-detect

Vueファイルの中でいちいち呼び出すこともできるか、冗長なので手軽に呼び出せるようにする。

plugins/DeviceDetect.jsみたいなファイルを作って、下記のようにインスタンスプロパティを追加する。

import { deviceDetect } from "mobile-device-detect";

export default Vue => {
    Vue.prototype.$deviceDetect = deviceDetect();
};

こうするとすべてのVueインスタンスの中でthis.$deviceDetect.isMobileという風に使うことができる。

さらにここでユーティルを作っていろんなとこで使っている。例えばこのライブラリではデバイスの向きは検出できないので、そこを補填して組み合わせるということができる。

import { deviceDetect, isMobileOnly } from "mobile-device-detect";

export default Vue => {
    Vue.prototype.$deviceDetect = deviceDetect();
    Vue.prototype.$deviceDetect.isSPLandscape = () => {
        return isMobileOnly && window.innerWidth > window.innerHeight;
    };
};