sikaku

jQueryで作ったものすごく単純な名前変換機能

notice(2023/02/17)

近々、当記事はjQueryを抜いた、JavaScriptのみで動作するものの配布と差し替えます。

現在配布中のjQuery使用版について
  • 2023年末までは内容確認できるようにしておくつもりです。
  • 以降は掲載並びに配布終了予定。
差し替え予定時期
  • JavaScript版の使用方法説明を書き終え次第。
JavaScript版について
  • script自体はできています。
  • jQuery版でできることは全部できます。
  • 新規導入を検討している方は未だ説明不十分な点もあり申し訳ないのですが、こちらの使用をおすすめします。

差し替え予定のJavaScript版
説明書きかけです……

sessionStrage,localStrageの仕様把握がてら作ったので置いておきます。

ついでに文字の置き換えプラグインの使用例。

source code

demo

設定中：#名称1##名称2#

別ページでも設定は保持されています。確認

HTML
  1. <div>
  2. <input type="text" data-text="名称1" />
  3. <input type="text" data-text="名称2" />
  4. <input type="submit" id="changeSet" value="SET" />
  5. <input type="submit" id="changeClr" value="CLEAR" />
  6. </div>
  7. <p>設定中：#名称1##名称2#</p>
jQuery
  1. $(function(){
  2. var dflt = {
  3. '名称1': 'デフォ１',
  4. '名称2': 'デフォ２'
  5. };
  6. var $set = $('#changeSet');
  7. var $clr = $('#changeClr');
  8. var $area = $('body');
  9. var storage = sessionStorage;
  10. var path = 'textchanger';
  11. var data = JSON.parse( storage.getItem(path) );
  12. if( $.type(data)!='object' ) data={};
  13. $.each(dflt,function(k,v){
  14. var txt = data[k]||v;
  15. var $tgt = $area.wrapText(RegExp('#'+k+'#','g')).text(txt);
  16. var $inpt = $('input[data-text="'+k+'"]').val(txt);
  17. if( !$inpt.length ) return true;
  18. $set.on('click',function(){
  19. data[k] = $inpt.val();
  20. $tgt.text(data[k]);
  21. });
  22. $clr.on('click',function(){
  23. delete data[k];
  24. $tgt.text(v);
  25. $inpt.val(v);
  26. });
  27. });
  28. $set.on('click',function(){
  29. storage.setItem(path, JSON.stringify(data) );
  30. });
  31. $clr.on('click',function(){
  32. var s = JSON.stringify(data);
  33. if(s.length<3) storage.removeItem(path);
  34. else storage.setItem(path,s);
  35. });
  36. });
  38. (function( $ ){
  40. $.fn.replaceText = function(pattern,replacement,nofollow) {
  41. var $not = this.find(nofollow||'script,style').find('*').addBack();
  42. this.find('*').addBack().not($not).contents().each(function(){
  43. if( this.nodeType != 3 ) return true;
  44. var str = htmlEsc( $(this).text() );
  45. if( !str.match(pattern) ) return true;
  46. $(this).replaceWith( str.replace(pattern,replacement) );
  47. });
  48. return this;
  49. function htmlEsc(str){
  50. return str.replace(/[&<>'"`]/g, function(s){ return '&#'+s.charCodeAt(0)+';'; });
  51. }
  52. };
  53. $.fn.wrapText = function(pattern,tagname,nofollow) {
  54. var pattern = pattern || /&#\d+;|\S/g;
  55. var tagname = tagname || 'span';
  56. var $adv = this.find(tagname);
  57. return this.replaceText(pattern,'<'+tagname+'>$&</'+tagname+'>',nofollow).find(tagname).not($adv);
  58. };
  60. })( jQuery );
機能選択
HTMLでの記述

ストレージ

調整用情報

変換設定

：'key': 'text'を,区切りで必要数記述

key： HTML上の#key#やdata-text="key"と紐づけられます。
お好きに設定してください。HTML上でエスケープした方がいい文字(<>&"')や環境依存文字、絵文字は避けた方が無難です。
text： 閲覧者側が未設定時のデフォルト採用テキスト

最低でもここさえ編集しておけば使用できます。

設定ボタンの紐づけ
： #changeSetクリック時に変換,設定保存させる要素のセレクタ
： #changeClrクリック時に初期化させる要素のセレクタ
入力欄の紐づけ
： input[data-text="'+k+'"]入力欄のセレクタ
'+k+'部分に「変換設定」で言うkeyが入ると思って下さい。

他と競合して困る場合に編集を。

変換範囲
： body 変換を反映させる要素のセレクタ。
デフォルトはbodyでページ全域にしていますが、idなりを設定した特定要素内に範囲を絞った方が初期動作が速くなります。

機能選択について

独自タグの使用

HTML上でより感覚的に操作できるよう、#名称1#等の記述が閲覧者設定テキストに置き換わるよう処理しています。

実表示時にはテキストを内包したspan要素になります。

独自タグの編集

#'+k+'#にて使用する独自タグを編集できます。

'+k+'に、「変換設定」で言うkeyが入ると思って下さい。

正規表現上でエスケープした方がよい記号を使う際はエスケープを。

例

あ'+k+'いならHTML上ではあ名称1い

「'+k+'」ならHTML上では「名称1」

\['+k+'\]ならHTML上では[名称1]

ストレージ

閲覧者がページをまたいでも変換設定を保持できるよう、HTML5の機能であるsessionStorage,localStorageを利用し、閲覧者のブラウザに記憶を保持させています。

不使用選択の場合、変換はそのページのみに反映され、ブラウザバック等含め移動後は初期化されます。

sessionStorageとlocalStorageの違い
sessionStorage： 同タブ内のみ有効(※)、ブラウザやタブを閉じると記憶は破棄される
※：一部ブラウザではtarget="_blank"でのリンク先には反映されたりと差異有
localStorage： いつでもどこでも有効、基本記憶は消えない

一度変換設定をした閲覧者の以降のアクセス時に必ず変換内容を反映させたい場合はlocalStorageを採用してください。

ストレージのあつかいについて

ストレージはドメイン単位で管理されており、パスで呼び出し、保存します。

つまり同ドメインで同パスだと同じ記憶が呼び出され、保存時には上書き保存されます。

同ドメイン内に他者が管理する別サイトのあるサービス(ナノ、ALICE+等)だと、他サイトと閲覧者の変換設定が共有されることがあります。

避けたい場合はにてパスを設定しているので、textchangerを他者と被りにくい物に変更する等工夫してください。

変換フォーム設置ページに「ナノ間で設定共有される可能性がある」等の旨を記載しておくといいかもしれません。

一応上記のスクリプトでは、ドメイン+パス+変換用のkeyが同一でないと共有されないようにはしています。

記憶領域がドメイン毎に5MB↑とcookieに比べれば中々に膨大ではありますが、塵も積もればなので特に強い理由が無ければkey含め被らせておいた方が閲覧者の容量的にありがたいんじゃないかなーと個人的には思います。(特にlocalStorage採用時)

おまけ

フォームデザイン

CSS
  1. @import url('https://fonts.googleapis.com/css?family=Bungee&display=swap');
  3. textarea ,select ,input {
  4. box-sizing: border-box;
  5. position: relative;
  6. width: 100%;
  7. max-width: 400px;
  8. margin: 3px 0;
  9. padding: 0 1em;
  10. border-radius: 1em / 50%;
  11. border: none;
  12. outline: 0;
  13. background: rgba(0,0,0,0.05);
  14. background-repeat: no-repeat;
  15. box-shadow: 0 1px rgba(0,0,0,0.05) inset;
  16. color: #ffffff;
  17. line-height: 2em;
  18. font-size: inherit;
  19. font-family: inherit;
  20. letter-spacing: inherit;
  21. -webkit-appearance: none;
  22. appearance: none;
  23. -webkit-tap-highlight-color: rgba(0,0,0,0);
  24. }
  26. .sizeL { width:100%;max-width:400px}
  27. .sizeM { width: 50%;max-width:200px}
  28. .sizeS { width: 25%;max-width:100px}
  29. .size0 { width:auto;max-width:none}
  32. textarea {
  33. height: 90px;
  34. min-height: 3em;
  35. border-radius: 1em;
  36. padding-top: 0.5em;
  37. padding-bottom: 0.5em;
  38. vertical-align: top;
  39. }
  41. select {
  42. padding-right: 2em;
  43. background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpolyline fill="none" stroke="%23ffffff" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" points="4 8 12 16 20 8" /%3E%3C/svg%3E');
  44. background-size: 0.7em 0.7em;
  45. background-position: right 0.8em center;
  46. cursor: pointer;
  47. }
  48. option {
  49. background-color: #000000;
  50. }
  52. input[type="submit"] ,input[type="button"] {
  53. width: auto;
  54. min-width: 3em;
  55. top: -1px;
  56. background-color: rgba(255,255,255,0.15);
  57. background-image: linear-gradient(rgba(255,255,255,0.08) 50%,transparent 50%);
  58. box-shadow: 0 1px rgba(0,0,0,0.05);
  59. cursor: pointer;
  60. font-family: 'Bungee', cursive;
  61. }
  62. input[type="submit"]:active ,input[type="button"]:active {
  63. top: 0;
  64. box-shadow: none;
  65. background-image: none;
  66. }
  68. input[type="radio"] ,input[type="checkbox"] {
  69. width: 1em;
  70. height: 1em;
  71. margin: 0 3px 0 0;
  72. padding: 0;
  73. background-size: 0.5em 0.5em;
  74. background-position: center center;
  75. vertical-align: middle;
  76. cursor: pointer;
  77. }
  78. input[type="radio"] {
  79. border-radius: 50%;
  80. }
  81. input[type="radio"]:checked {
  82. background-image: radial-gradient(closest-side,#fff 80%,transparent 80%);
  83. }
  84. input[type="checkbox"]:checked {
  85. background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpolyline fill="none" stroke="%23ffffff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" points="4 12 9 16 20 6" /%3E%3C/svg%3E');
  86. }
  88. input[type="file"] ,input[type="image"] {
  89. width: auto;
  90. max-width: none;
  91. margin: 0;
  92. padding: 0;
  93. border-radius: 0;
  94. background-color: transparent;
  95. box-shadow: none;
  96. color: inherit;
  97. cursor: pointer;
  98. }
demo
配色

白黒濃淡のみの描画なので発色の良いの背景色のページで映えると思います。

パーツサイズ

基本的に文字のサイズ準拠で設定しています。例外

margin(外余白)

width(幅)

max-width(最大幅)

幅はsizeMかsizeSのクラス付与で固定サイズへ縮小できるようにしました。

要素

(01)：<textarea></textarea>

(02)：<select></select>

以降全て：<input />

input要素について

type属性値radiocheckboxsubmitbuttonのみ設定済み、

他はfileimageを除いて(03)と同表示になります。