ラジオボタンとチェックボックスの値のマルチバイト対応を選択できるように修正

[1000-x-t30]

エスケープシーケンスですが、URIのエンコードなので値が長くなると文字量が多くなってしまうことが気になりました。
以下の記事を参考にハッシュ化にしようか悩んでいるのでご意見があればいただきたいです。
https://qiita.com/economist/items/768d2f6a10d54d4fa39f

[uidev1116]

@1000-x-t30
ラベルが 「エスケープシーケンス」だとなんのためのチェックボックスかよくわからないと感じました。
例えば、「マルチバイト文字をエスケープしてIDを生成する」など少し詳しめのラベルにするのはいかがでしょうか？

[uidev1116]

マルチバイト文字をエスケープしてID属性を生成するのほうが良いかも

[1000-x-t30]

@uidev1116
ありがとうざいます。その通りなのでラベルの案をいただきました！

[uidev1116]

@1000-x-t30
実装お疲れ様です。

エスケープシーケンスですが、URIのエンコードなので値が長くなると文字量が多くなってしまうことが気になりました。
以下の記事を参考にハッシュ化にしようか悩んでいるのでご意見があればいただきたいです。
https://qiita.com/economist/items/768d2f6a10d54d4fa39f

自分は長くても実害がなければそのままでよい派であることは前提ですが、ID生成ロジックを変えるとしても提示していただいた記事だとHTTP 環境で crypto.subtle.digest メソッドが動かないようなのでこの記事の方法ではないほうが良いと思います。（カスタムフィールドメーカーは開発環境で使うことのが多いと思いますのでHTTPSでしか動かないのは困ってしまいます。）

[1000-x-t30]

@uidev1116

@1000-x-t30 実装お疲れ様です。

エスケープシーケンスですが、URIのエンコードなので値が長くなると文字量が多くなってしまうことが気になりました。
以下の記事を参考にハッシュ化にしようか悩んでいるのでご意見があればいただきたいです。
https://qiita.com/economist/items/768d2f6a10d54d4fa39f

自分は長くても実害がなければそのままでよい派であることは前提ですが、ID生成ロジックを変えるとしても提示していただいた記事だとHTTP 環境で crypto.subtle.digest メソッドが動かないようなのでこの記事の方法ではないほうが良いと思います。（カスタムフィールドメーカーは開発環境で使うことのが多いと思いますのでHTTPSでしか動かないのは困ってしまいます。）

その通りですね...
ライブラリ（jssha？）があるようですが、入れるほどでもないと思うのでこのままにしておきます。
ありがとうございます。

[atsu666]

@uidev1116

@1000-x-t30 実装お疲れ様です。

エスケープシーケンスですが、URIのエンコードなので値が長くなると文字量が多くなってしまうことが気になりました。
以下の記事を参考にハッシュ化にしようか悩んでいるのでご意見があればいただきたいです。
https://qiita.com/economist/items/768d2f6a10d54d4fa39f

自分は長くても実害がなければそのままでよい派であることは前提ですが、ID生成ロジックを変えるとしても提示していただいた記事だとHTTP 環境で crypto.subtle.digest メソッドが動かないようなのでこの記事の方法ではないほうが良いと思います。（カスタムフィールドメーカーは開発環境で使うことのが多いと思いますのでHTTPSでしか動かないのは困ってしまいます。）

その通りですね... ライブラリ（jssha？）があるようですが、入れるほどでもないと思うのでこのままにしておきます。 ありがとうございます。

こちら現状だと、ASCII文字も変換されてしまうので、以下のようにASCII文字はそのままで、マルチバイト文字だけASCII文字に変換するのはいかがでしょうか。

変更前

return btoa(encodeURI(encodeURIComponent(input)))
    .replace(/=/g, '') // = 記号を除去
    .replace(/\+/g, '-') // + をハイフンに置換
    .replace(/\//g, '_'); // / をアンダースコアに置換

変更後

return Array.from(input)
    .map((ch) => {
      if (ch.charCodeAt(0) < 128) {
        // ASCII はそのまま
        return ch;
      } else {
        // 日本語など非ASCIIだけエンコード
        const encoded = btoa(encodeURIComponent(ch))
          .replace(/=/g, '') // = を除去
          .replace(/\+/g, '-') // + → -
          .replace(/\//g, '_'); // / → _
        return encoded;
      }
    })
    .join('');

[1000-x-t30]

@atsu666

こちら現状だと、ASCII文字も変換されてしまうので、以下のようにASCII文字はそのままで、マルチバイト文字だけASCII文字に変換するのはいかがでしょうか。

ご指摘ありがとうございます。修正しました！

[atsu666]

ありがとうございます！承認します。マージは任せます。