「jQuery」の記事 - Crieit

脱jQuery メモ

2022-04-30T00:03:10+09:00

経緯

Bootstrap でブレークポイント未満(スマホ時)のナビゲーションリンクにアンカーリンクがある場合、アンカーリンクをタップしてもナビゲーションリンクのメニューが開いたままアンカーリンクへ遷移するので、それを制御するコードを自前で書いていました。その部分を脱 jQuery したのでメモしておきます。

コード

jQuery

まずは Bootstrap 4 までの jQuery でのコード。

// ナビゲーションバー
const $navbar = $('#navbar');
// ブランド名とドロップダウンコンポーネント以外のナビゲーションリスト
$navbar.find('.navbar-brand, .nav-item:not(.dropdown) a, .dropdown-item').on('click', function (e) {
    // 略
    const navBarListID = 'navbarList';
    if ($(e.currentTarget).closest('#' + navBarListID).length > 0) {
        let breakpoint = 0;
        if (/(^|\s)navbar-expand-(\S*)/g.test($navbar.children('.navbar').prop('class'))) {
            switch (RegExp.$2) {
                case 'sm':
                    breakpoint = 576;
                    break;
                case 'md':
                    breakpoint = 768;
                    break;
                case 'lg':
                    breakpoint = 992;
                    break;
                case 'xl':
                    breakpoint = 1200;
                    break;
                default:
                    breakpoint = 0;
                    break;
                }
            }
            if ($(window).outerWidth() < breakpoint && !$navbar.find('.navbar-toggler[data-target="#' + navBarListID + '"]').hasClass('collapsed')) {
                // 現在の表示がハンバーガーメニューの場合
                $navbar.find('.navbar-toggler[data-target="#' + navBarListID + '"]').trigger('click'); // 移動したらハンバーガーを折りたたむ
            } else if ($(e.currentTarget).hasClass('dropdown-item') && $(e.currentTarget).closest('.dropdown').hasClass('show')) {
                // 現在の表示がハンバーガーメニューではなく、ドロップダウン内のメニューをクリックした場合
                $(e.currentTarget).closest('.dropdown').trigger('click'); // 移動したらドロップダウンを折りたたむ
            }
        }
        return false;
    }
};

ざっくりこんなコードでした。やっていることとしては

ブランド(.navbar-brand), ドロップダウンではないナビゲーションリンク(.nav-item:not(.dropdown) a, ドロップダウン内のリンク(.dropdown-item) がクリックされた場合
- クリック(タップ)された要素の直近の祖先要素に #navbarList の id属性がある要素が存在する場合
  - ナビゲーションバー要素のクラスにある .navbar-expand-XX のクラスのブレークポイントの文字列を取得してブレークポイント値をセット
  - その値と現在のウィンドウの幅を比較してウインドウ幅の方が小さい (=ハンバーガーメニューに表示が切り替わっている) 、かつ .navbar-toggler 要素が .collapsed のclass属性を持っている (=メニュー展開) 場合
    - ハンバーガーメニューを折りたたむ (ハンバーガーアイコンを1度クリックする)
  - またはクリックされた要素が .dropdown-item class属性を持っている (=ドロップダウンメニュー) 、かつ直近の祖先要素で .dropdown class属性を持つ要素が .show class属性を持っている (=ドロップダウンが開かれている) 場合
    - ドロップダウン要素を折りたたむ

という挙動。

プレーン JavaScript

これを Bootstrap 5 対応でプレーンな JavaScirpt に書き換え。

const navbar = document.querySelector('#navbar');
const navBarListID = 'navbarList';
if (
    typeof e.currentTarget.closest(`#${navBarListID}`) !== 'undefined'
     && e.currentTarget.closest(`#${navBarListID}`) !== null
) {
    let breakpoint = 0;
    if (/(^|\s)navbar-expand-(\S*)/g.test(navbar.className)) {
        switch (RegExp.$2) {
            case 'sm':
                breakpoint = 576;
                break;
            case 'md':
                breakpoint = 768;
                break;
            case 'lg':
                breakpoint = 992;
                break;
            case 'xl':
                breakpoint = 1200;
                break;
            case 'xxl':
                breakpoint = 1400;
                break;
            default:
                breakpoint = 0;
                break;
        }
    }
    if (window.innerWidth < breakpoint) {
        // ブレークポイント未満の幅のとき
        const navbarTogglers = navbar.querySelectorAll(`.navbar-toggler[data-bs-target="#${navBarListID}"]`);
        navbarTogglers.forEach((navbarToggler) => {
            if(!navbarToggler.classList.contains('collapsed')) {
                // 現在の表示がハンバーガーメニューの場合、
                // 移動したらハンバーガーを折りたたむ
                navbarToggler.dispatchEvent(new Event('click'));
            }
            else if(
                e.currentTarget.classList.contains('dropdown-item')
                 && e.currentTarget.closest('.dropdown').classList.contains('show')
            ) {
                // 現在の表示がハンバーガーメニューではなく、ドロップダウン内のメニューをクリックした場合
                // 移動したらドロップダウンを折りたたむ
                e.currentTarget.closest('.dropdown').dispatchEvent(new Event('click'));
            }
        });
    }
}

やっていることは大体同じです。ただし、いくつか置き換えが必要な部分があったので以下その点について触れていきます。

置き換えた部分

複数のクラス指定で要素を取得

const elms = document.querySelectorAll('.hoge, .fuga');

jQuery のようにカンマ区切りで document.querySelectorAll() でOK。

.on()

脱jQuery .on() .off() | q-Az

普通に .addEventListener('eventName', function) でOK。

複数の要素に対するイベントハンドラ

どうして！？document.querySelectorAll(selector).addEventListener()が動かないわけ | フロントエンドBlog | ミツエーリンクス

const elms = document.querySelectorAll('.hoge, .fuga');
elms.forEach(elm => {
    elm.addEventListener('click', process);
},
false);

.querySelectorAll() で取得した要素を .forEach() で反復処理させます。

親要素・祖先要素

【Javascript】親要素や祖先要素を取得する方法 parentNode\/closest | ゆうやの雑記ブログ

普通に .closet('.parent') 。

子要素

jQuery の .children('selectorName') は一応プレーンな JavaScript にも .childrenプロパティがある模様。

ただし、 jQuery のように .children へセレクタ指定はできなさそうなので、この部分は HTML のクラスを子要素の方に付けることで回避しました。

クラス名全てを取得

クラス名（class属性の値）をすべて取得 | JavaScript逆引き | Webサイト制作支援 | ShanaBrian Website

jQuery では .prop('class') としていたところですが、 .className でOK。

子孫要素の中から探す

脱jQuery .find() | q-Az

jQueryでは .find() だったところを、 elm.querySelector('selectorName') と指定すればOK。

ウインドウ幅

jQuery で $(window).outerWidth() としてたところを、今回の用途では window.innerWidth へ置き換えました。

クラスの存在チェック

脱jQuery .addClass() .hasClass() .removeClass() .toggleClass() | q-Az

jQuery では .hasClass('className') だったところを、 .classList.contains('className') へ置き換え。

イベントハンドラの指定とイベント発火要素の取得

普通に関数指定で elm.addEventListener('click', hoge(elm), false) と書いてしまっていました。

しかし、参考記事に拠るとこれだとその関数の実行結果が渡されるとのこと。しかもイベント発火時ではなく該当コード読み込み時に実行されてしまうため、挙動がおかしくなってしまいます。

これについては第二引数はオブジェクト (または JavaScript の純粋な関数) なので elm.addEventListener('click', hoge, false) と関数名だけにしなければならず、その通りに書けばOK。

一方、 const hoge = (e) => { /* 処理 */ }; で普通にイベントは渡ってくるので、「クリックされた要素」をイベントハンドラ内で利用したい場合は e.currentTarget とすれば問題ないですね。

最初これに気付かずしばらく嵌まっていました。参考記事に感謝。

イベント発火

jQueryを使わない書き方 ajax, each, trigger, on\/off, extend, deferred, animate, css編 | maesblog

イベントがクラスで渡す必要がありますがほぼ同じで、 elm.dispatchEvent(new Event('click')) とすればOK。

このような形でガシガシ書き換えていけば大きな問題はなさそうです。

とはいえ、この置き換えは地味にアンカーリンクへのスクロールアニメーションを scroll-behavior: smooth; に移行したおかげで上述以外の大半の JS を破棄しても問題ないと判断できたのが非常に大きいですね。そうでなければもっと大きなボリュームと対峙する必要がありました……。

しかも Scroll-margin-top で上部固定ナビゲーションバーの裏側にアンカーリンクが隠れてしまう問題を回避できる、というのも JS コードを削減できた要因の一つなので、この2つのプロパティは個人的にかなり神がかっていると感じます。細かいイージングは犠牲になりますが、今回は全然目を瞑ることができるレベルなので良しとします。

参考

複数のクラス指定で要素を取得

子要素

クラス名全てを取得

クラス名（class属性の値）をすべて取得 | JavaScript逆引き | Webサイト制作支援 | ShanaBrian Website

子孫要素の中から探す

脱jQuery .find() | q-Az

ウインドウ幅

クラスの存在チェック

脱jQuery .addClass() .hasClass() .removeClass() .toggleClass() | q-Az

イベントハンドラの指定とイベント発火要素の取得

イベント発火

jQueryを使わない書き方 ajax, each, trigger, on\/off, extend, deferred, animate, css編 | maesblog

その他

JQueryをVanilla JSに緩やかに置き換える - Qiita

Bootstrap 5 のブレークポイント

モーダルの中で Slick を動かす場合の諸注意(setPotion指定、 Uncaught TypeError: Cannot read property 'add' of null エラー回避のために slick-initialized クラスの確認、 unslick 指定)

2020-12-15T00:06:21+09:00

モーダルのような、初期状態で display: none; がかかっているような要素の中で Slick を動かす場合にハマった事項のメモです。

slick - the last carousel you'll ever need

やりたかったこと

lazyLoad
モーダルの中で Slick を動かす
複数のモーダルがある(それぞれに Slick あり)

シチュエーションとしてはこんなところ。

サンプル

以下に一つずつ解説してきますが、動作確認のためのサンプルを置いておきます。

Slick Test

リポジトリも。

Slick Test

1. lazyLoad

まずは lazyLoad ですが、これについては slick で用意されている lazyLoad プロパティが使えます。

$('slick').slick({
    lazyLoad: 'ondemand'
});

プロパティはスライドする度に画像を読み込む ondemand とページ読み込み後に読み込む progressive の2つ。

また、 lazyLoad で画像が読み込まれたときに発火するイベント lazyLoaded とエラー時に発火する lazyLoadError があるので、ケースによってはこれらも利用できそう。

$('slick').on('lazyLoaded', function (event, slick, image, imageSource) {
    // lazy load succeed
    console.log(`${event.type}: ${imageSource} / ${image[0].alt} の読み込みが完了しました。`);
    // 「lazyLoaded: http://placehold.jp/667x375.jpg / Slick 1-4 の読み込みが完了しました。」のようなメッセージを出力
});
$('slick').on('lazyLoadError', function (event, slick, image, imageSource) {
    // lazy load failed
    console.log(`${event.type}: ${imageSource} の読み込みが失敗しました。`);
});
$('slick').slick({
    lazyLoad: 'ondemand'
});

ちなみに、 lazyLoad は JS 側だけではなく、 HTML 側にも既述が必要です。

img タグの src 属性は画像が読み込まれるまでのダミー画像の指定、本番のスライドショーで表示させたい画像は独自の data-lazy 属性で指定、となります。

ここまでがサンプルの「Slick 1」のケース。

2. モーダルの中で Slick を動かす

2.1. 普通に Slick

さてここからが本題。

例として Bootstrap 4 のモーダルコンポーネントを利用しますが、モーダルのような初期状態で display: none; となっている要素の中に Slick をセットすると動かないようです。

原因としては、親要素が display: none; なので、 Slick の要素が width: 0px; で潰れてしまうようです(ついでに height: 1px; でもあった)。

※サンプルの「Slick 2」の「モーダルを開く (setPotion 指定なし)」のケース

2.2. setPotion

ここで Slick 公式やいくつかの記事を見ると「 setPotion を指定すると良い」という記述が散見されます。

これは setPotion を指定したタイミングで Slick 要素のサイズを再計算してくれるようです。

今回は「モーダルが開いた時」なので、ボタンの click イベントにバインドすると良さそうです。これならば複数モーダル + Slick でもクリックされたモーダルのみ Slick が動くようになるので処理も軽減できます。

注意点としては、 click イベント直後だとまだモーダルがフェードのエフェクトで表示されている途中なのでせっかく再計算しても潰れてしまう可能性があること。

そのため、 setTimeout で処理する時間を指定しましょう。

$('#setPotionModalButton').on('click', function () {
    // 0.3s 後に setPosition 付きで Slick 実行
    const slickInit = setTimeout(() => {
        const $setPotion = $('#setPotion');
        // Slick
        $setPotion.slick({
            lazyLoad: 'ondemand'
        });
        $setPotion.slick('setPosition');
    }, 300);
});

※サンプルの「Slick 2」の「モーダルを開く (setPotion 指定あり)」のケース

これでモーダルの中でも開くようになりました。よしよし……ではなかった。

3. Uncaught TypeError: Cannot read property 'add' of null エラーの回避 → .not('.slick-initialized')

先程のモーダル、1回開くだけならば良いのですが、2回目以降モーダルを開こうとすると

Uncaught TypeError: Cannot read property 'add' of null

というエラーが発せられます。既に Slick が動いているところに、 click イベントでもう一度 Slick をバインドしようとしたので怒られてしまったわけです。

回避策としては、 .not('.slick-initialized') を追加すること。

Slick は初期化を完了すると該当要素に slick-initialized を付与するため、 .not('.slick-initialized') で「まだ Slick の初期化が済んでいない要素」と指定することでエラーを回避できる、ということですね。

$('#unInitializedModalButton').on('click', function () {
    // 0.3s 後に setPosition 付きで Slick 実行
    const slickInit = setTimeout(() => {
        const $unInitialized = $('#unInitialized');
        // Slick
        $unInitialized.not('.slick-initialized').slick({ // .not('.slick-initialized') を追加
            lazyLoad: 'ondemand'
        });
        $unInitialized.slick('setPosition');
    }, 300);
});

※サンプルの「Slick 3」のケース

console.log() 等で拾うと2回目以降 $unInitialized.not('.slick-initialized') は undefined になっていますが、エラーは回避できています。これで良し……ではなかった。

4. unslick

稀ですが、高速でモーダルを開いたり閉じたりして(あるいは何らかの理由で Slick の初期化が遅れて)しまうと、それ以降モーダルを開いても正常に Slick が表示されない現象が発生します。

画像が多かったり重かったりすると出やすくなるかもしれません。

ページ再読み込みすれば大丈夫と言えば大丈夫ですが……今回のシチュエーションではこの頻度がわりと大きく、無視できない状態でした。そのため、さらに対策を講じる必要がありました。

そこで、以下のような処理を行うことにしました。

モーダルを開くボタンクリック時
1. click イベント発火
2. setTimeout で 0.3s 後に Slick 実行 (const slickInit = setTimeout())
  - .not('.slick-initialized') 付き
モーダルを閉じる時
1. hidden.bs.modal イベント発火(Bootstrap 独自イベント)
2. jqueryObject.slick('unslick'); で unslick 発動、 Slick を解除
3. clearTimeout(slickInit); によって見初期化であろうとも上述「モーダルを開くボタンクリック時 2.」の動作を解除
4. modalButtonjqueryObject.off('hidden.bs.modal'); でhidden.bs.modal イベントもバインド解除

// setPosition ありで モーダル内 Slick を実行させる
const $unSlickModalButton = $('#unSlickModalButton');
const unSlickModalID = $unSlickModalButton.attr('data-target');
const $unSlickModal = $(unSlickModalID);
const slickInitializedClass = 'slick-initialized';
$unSlickModalButton.on('click', function () {
    const $unSlick = $('#unSlick');
    // 0.3s 後に setPosition 付きで Slick 実行
    const slickInit = setTimeout(() => {
        // Slick
        $unSlick.not('.slick-initialized').slick({
            lazyLoad: 'ondemand'
        });
        $unSlick.slick('setPosition');
    }, 300);
    $unSlickModal.on('hidden.bs.modal', function () {
        // Bootstrap のモーダルを閉じるイベントが発火したら
        if ($unSlick.hasClass(slickInitializedClass)) {
            // Slick 対象要素が slick-initialized クラスを持っていたら
            // unslick で Slick をアンバインド
            $unSlick.slick('unslick');
        }
        // setTimeout 発動前にモーダルを閉じると setTimeout が生き残っているので、すぐまたモーダルを開いたりすると Slick のバインドが2回走ったりしておかしくなるので clearTimeout する
        clearTimeout(slickInit);
        // モーダルを閉じる度に hidden.bs.modal イベントがバインドされて重複処理してしまうので閉じられたらアンバインドする
        $unSlickModal.off('hidden.bs.modal');
    });
});

※サンプルの「Slick 4」のケース

ここまでやって、ようやく納得のいく挙動になりました。思ったよりも紆余曲折ありました……。

参考

Slick

lazyLoad

「slick.js」の使い方応用編 | takblog

setPotion

Uncaught TypeError: Cannot read property 'add' of null

カーソルを特定要素にホバーすると画像を表示するマウスストーカーのサンプル

2020-12-14T21:10:33+09:00

マウスストーカーが盛んに取り上げられるようになって早数年。さすがにそろそろやり方くらいは……と思い、試してみることにしました。

コード

まずは成果物を。

要素ホバーで拡大: Home - Vampire Stoker
要素ホバーで背景画像表示: Home - Vampire Stoker

最初の方(要素ホバーで拡大)は参考コードほぼそのままです。次のものはマウスストーカーが大きくなるだけでなく、背景画像をスポットライト的に切り抜いて表示する機能も付けたものになります。

arm-band/test_vampire_stoker

リポジトリ。

HTML

HTMLはいたってシンプル。カーソル用の要素とディレイがかかって追いかけてくる要素の2つの div を用意します。

今回はさらにラッパーで覆って overflow: hidden; をかけることで、画面端にカーソルが移動した際にディレイ要素の大きさ分だけはみ出てスクロールバーが表示されないようにしました。

それから、今回はサクッと試すために CDN で TweenMax を読み込むようにしました。

css(Scss)

body {
    position: relative;
    // 元々のマウスカーソルを消す
    cursor: none;
}

.c-mouseStalker {
    // イベント反応させなくする
    pointer-events: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    &_wrapper {
        // イベント反応させなくする
        pointer-events: none;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        // 端にカーソルを持って行ったときにディレイの部分だけはみ出てスクロールバーが表示されてしまうのを抑止
        overflow: hidden;
    }
    &_cursor,
    &_delay {
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none; // イベント反応させなくする
    }
    &_cursor {
        width: 0.5rem;
        height: 0.5rem;
        background-color: f.$color;
        z-index: 10001;
        border-radius: 50%;
    }
    &_delay {
        $delayRadius: 100px / 4;
        width: 100%;
        height: 100%;
        background-color: f.$main-color;
        z-index: 10000;
        transition: clip-path ease 0.1s; // 遅くするともっさりした感じになる
        opacity: 0.4;
        // at 以降は円の中心の定義
        clip-path: ellipse($delayRadius $delayRadius at 50% 50%);
        &.active {
            $activeTimes: 4;
            background: {
                image: url("../img/img.jpg");
                attachment: fixed;
                size: cover;
                position: center center;
            }
            opacity: 1;
            clip-path: ellipse($delayRadius * $activeTimes $delayRadius * $activeTimes at 50% 50%);
        }
    }
}

body の cursor: none;: デフォルトのマウスカーソルを非表示に
.c-mouseStalker と .c-mouseStalker_wrapper:
- pointer-events: none;
- どちらも表示画面サイズいっぱいまで拡大
.c-mouseStalker_wrapper: overflow: hidden; で端にカーソルを持って行ったときにディレイの部分だけはみ出てスクロールバーが表示されてしまうのを抑止
.c-mouseStalker_delay: 肝
- 要素自体は透明。 clip-path で切り取った円形の範囲のみ見える状態にする
  - デフォルトは単色半透明のマスク
  - 特定要素にホバーしたとき、 jQuery でクラス付与 (ホバー解除時にクラスも削除)
    - クラスが付与されたとき、背景を単色から background-image で指定した画像にする
      - 背景画像は background-attachment, background-size, background-position 指定あり
- transition: clip-path ease 0.1s; でホバー時の拡大縮小等の切り替えを easing
  - 0.3s にすると TweenMax のディレイも相まってもっさりした動きになってしまうので、 0.1s で

JavaScript (jQuery + TweenMax)

// mouse stalker
const mouseStalker = () => {
    const $cursor = $('#c-mouseStalker_cursor');
    const $delay = $('#c-mouseStalker_delay');
    const paramsArray = {
        cursor: {
            width: $cursor.outerWidth(),
            coorX: 0,
            coorY: 0,
            delay: 0.001,
        },
        delay: {
            width: $delay.outerWidth(),
            coorX: 0,
            coorY: 0,
            delay: 6,
        },
    };
    const activeClass = 'active';
    let clipRadius = 100 / 4;
    let clipScale = 1;
    let clipPathCoor = `ellipse(${clipRadius * clipScale}px ${clipRadius * clipScale}px at 50% 50%)`;
    // カーソルの遅延アニメーション
    // ほんの少しだけ遅延させる (0.001秒)
    TweenMax.to(
        {},
        paramsArray.cursor.delay,
        {
            repeat: -1,
            onRepeat: function() {
                paramsArray.delay.coorX += (paramsArray.cursor.coorX - paramsArray.delay.coorX) / paramsArray.delay.delay;
                paramsArray.delay.coorY += (paramsArray.cursor.coorY - paramsArray.delay.coorY) / paramsArray.delay.delay;

                clipPathCoor = `ellipse(${clipRadius * clipScale}px ${clipRadius * clipScale}px at ${paramsArray.delay.coorX}px ${paramsArray.delay.coorY}px)`;
                // delay
                TweenMax.set(
                    $delay,
                    {
                        css: {
                            clipPath: clipPathCoor,
                        }
                    }
                );

                // cursor
                TweenMax.set(
                    $cursor,
                    {
                        css: {
                            left: paramsArray.cursor.coorX - (paramsArray.cursor.width / 2),
                            top: paramsArray.cursor.coorY - (paramsArray.cursor.width / 2),
                        }
                    }
                );
            }
        }
    );

    // mouse hover
    $('#hoverElmID').on({
        mouseenter: function () {
            $cursor.addClass(activeClass);
            $delay.addClass(activeClass);
            clipScale = 4;
        },
        mouseleave: function () {
            $cursor.removeClass(activeClass);
            $delay.removeClass(activeClass);
            clipScale = 1;
        },
    });

    // get mouse coordinate
    $(document).on('mousemove', function (e) {
        paramsArray.cursor.coorX = e.pageX;
        paramsArray.cursor.coorY = e.pageY;
    });
};

window.addEventListener('load', () => {
    mouseStalker();
});

だいたいサンプルコードに則ったコード
カーソルとディレイ要素の各種パラメータは別の変数で持っていると個人的に分かりづらかったのでオブジェクトにまとめました
変数 clipPathCoor で指定した値が実際の clip-path で切り取られるディレイ要素の指定
- カーソル用はほぼ弄らず
- ディレイ要素の方は TweenMax の to で指定するパラメータが top, left から clip-path のみに変更
特定要素のホバー時に上述 Scss の指定が反映されるようにクラスの付け外しを実施
- 同時に clip-path で切り取られる範囲を拡大縮小(拡大率の数値を変更している)

今回はこれで望んだ挙動になりました。

参考

マウスストーカー

背景画像切り抜き

要素内座標(未使用)

要素内のマウスカーソルの座標を取得する！スマホ対応【Javascript】 | MUUMV

熨斗（のし）の王様を作ったときに気をつけたこと

2019-10-13T23:43:10+09:00

まとめ

のし王というWebサービスを作った。
のし作成サービスが既に存在する中で、下記に気をつけたというお話。
- サービス作成のきっかけになった不満点・ニーズをもれなく仕様に落とし込む
- 仕様策定時は技術的な楽さに甘えず、ユーザー体験を優先する
- 上記を実現するため必要最低限の技術を選定する

不満点の解消、ニーズを仕様に落とし込む

ちょっとした贈り物に「のし」をつけたかった。
既存サービスは、以下の点で不満が残った。
- 「のし紙」のテンプレート（背景画像）だけが提供されており、Wordなどに貼り付けた後、自分で文字を描かないとダメだった
- Web上で任意の文字まで入れられるサービスでは、最後になるまで仕上がり具合がが分からなかった
- 最終画像にサービス名のロゴが入ってしまい、贈り物には不向きだった
- フォントがしょぼかった
- 水引き（背景画像）や表書き（御礼などの上部の文字）をどう選んでよいか分からなかった
不満点の解消をもれなく仕様に落とし込んだ。
- 背景画像と任意の文字を組み合わせてPDFで出力できるようにする
- 最終出力結果には広告を入れない
- 有料でもカッコいいフォントを採用する
- 用途に応じて自動で「水引き」と「表書き」が選択できるようにする
マッスルの神様＝マ神　→　熨斗の王様＝のし王

ユーザー体験を最優先する

	技術的な楽さを優先	ユーザー体験を優先
文字描画	ユーザー自身がWordなどで描画	Webサービス上で描画
仕上がり確認	プレビュー不可 or プレビューボタンクリックで表示	リアルタイムプレビュー表示
水引き、表書き	ユーザーの選択したものを表示	用途を選ぶと最適な水引き、表書きを自動で選択
描画フォント	無料の範囲で選択可能	有料で質の良いフォントが選択可能
ユーザーが泥酔状態	酔いが冷めてから使う	泥酔状態でも直感で使える

仕様の実現方法を考える

使用した技術
- Webサービス上で文字描画しPDF出力
  - 水引きの種類や表書きなどの情報をブラウザ上で選択させる
  - サーバーでPDFを作成してダウンロードさせる(Golang/Google App Engine)
- リアルタイムプレビュー表示
  - サムネイル描画サーバー(Golang/Google App Engine)を準備
  - 水引きの種類や表書きなどの情報が変更されたらAjax(jQuery)でサーバーからサムネイル画像を取得し、ブラウザ上に即時反映
- 用途を選ぶと最適な水引き、表書きを自動で選択
  - Bulma-ExtensionsのQuickViewで用途一覧を表示
  - 用途を入力させて絞り込み(jQuery)
  - 用途クリックで「水引き」と「表書き」を最適なものに変更(jQuery)
選定理由
- 仕様実現に際して最低限／シンプルなものを選ぶ
- 最新の技術よりも枯れて安定した技術を選ぶ
- なるべくメンテナンスが不要なものを選ぶ

Webpack4 ビルドするフロントエンド環境で jQuery に依存したライブラリを使う

2019-07-11T00:15:45+09:00

バックエンドにPython3+bottle, フロントエンドにJavascript+jQueryを使って個人Webサービスを開発しています。
(いまだに jQuery なん? というツッコミは甘んじて総受けいたします…)

GUI を作り込んでいくにあたり、型安全の安心に包まれて開発したいので Typescript への移行を目論んでいます。
ついでに Javascript のモジュールの仕組もモダンな ES Modules を導入したかったので、ビルドツールとして Webpack4 を導入しました。

現在は