Q&A
その入力欄に、「半角・全角の英字」以外に入りうる正当な文字はどのようなものでしょうか？
前提・実現したいこと
Webシステムの入力項目に、アルファベットっぽいけどアルファベットではない文字が入力されてしまい困っています。
例えば「Ⅴ」や「Ⅽ」や「K」です。
入力経路は何となくは分かっていて、日本語入力モードの時に「ｖ」とうって変換ボタンを押した時にでてくる「V」っぽい文字を、どれが正しい「V」かわからず選んでしまっているようです。
こういった文字の入力があった場合に強調表示をしてユーザーに知らせたいのですが、どういう文字を抽出をしたらいいのかで困っています。
後述の通り、当初は上記の3文字だけ赤くする措置を取っていたのですが、さらに別の似たような文字が出てきてしまいました。
今は発覚するたびに1文字ずつ判定に追加してしのいでいる状態です。
全角文字を入れる必要がある項目で、通常はこういった文字の入力ミスをどうやてユーザーに伝えるのでしょうか？
もしくは、通常キーボードでうてないような文字の総称（「半角英数」のような感じ）はないでしょうか…。
そういう用語がわかれば何とか自分でも調べられそうなのですが、今はキーワードも思い浮かばない状態です。。
何かヒントでもいいのでアドバイス頂けたら嬉しいです。
※以前LinuxいうパソコンとWindowsでは文字の種類（コード？）が違うという話を聞いたことがあるのでタグに「Windows」を入れました。関係がなかったらすみません。。。
発生している問題・エラーメッセージ
アルファベットと似た文字を間違えて入力される。
※※追記※※
何が困っているか書いた方がいいとアドバイス頂いたので追記をします。
このシステムは社内の生産管理システムで、顧客から送られてきた原材料等を加工して返すラインの管理をしています。
該当の項目は顧客側で送ってきた原材料の個体（便宜上ロット番号と呼んでいます）を特定するためのコードや名前のようなものが入っています。
多くは半角英数なのですが、一部日本語だったり全角英数だったり見たことないような文字が入っていたりします。
顧客からデータを受け取る時は、4割ぐらいはデータで受け取り、6割は紙で届くので人間が入力しています。
加工が終わると、終わりましたよという書類としてそのデータや書面を顧客に送り返します。
数か月前から書面でやりとりしていた顧客（お得意様）のシステムが変わって、弊社⇒顧客への送り返しだけデータでやりとりするようになりました。
その時にこの項目を顧客側のシステムで原材料の個体を特定するキーに使用されているようなのです。
今まで見た目がVなら実質なんでもよかった（人間はVと認識してくれるから）のに、システムでは区別されるので顧客側からクレームが来てしまっています。
入力する側の人間も今まで全半角すら区別していなかったような人たちですし、見た目がそっくりなので何を気を付けていいのかわからないという状態です。
そこで赤くして「あなたたちは赤がなくなるまで頑張るのです」という指導をしようとしています。
普段から変わった文字を入力している人たちは、変わった文字に精通しているので「変な文字は赤くしますが気にしないでください」が通用しそうなので、エラーにはできないけど赤くするぐらいはセーフと考えています。
※※※
該当のソースコード
動作する環境
※フォーカスアウトで文字強調したdivをかぶせています。
html
1<div id="vue-element"> 2 <div class="input-group"> 3 <label>項目名</label> 4 <input type="text" v-model="komoku" @blur="highlightDisp=true" /> 5 <div v-html="highlight" class="over" v-show="highlightDisp" @click="click($event)"></div> 6 </div> 7</div>
javascript
1 new Vue({ 2 el: "#vue-element", 3 data(){ 4 return { 5 highlightDisp: true, 6 komoku: "ABＣDKＦＧH", 7 } 8 }, 9 computed:{ 10 highlight(){ 11 // ↓文字を判定しているところ 12 const text = this.komoku.replace(/[ⅠⅭⅤⅯKⅩLⅮ]/g, 13 function(s){ 14 return '<span class="highlight">' + s + '</span>'; 15 }); 16 return text; 17 } 18 }, 19 methods:{ 20 click(event){ 21 this.highlightDisp = false; 22 event.target.previousElementSibling.focus(); 23 } 24 } 25 });
css
1 .input-group{ 2 box-sizing: border-box; 3 width: 10rem; 4 position:relative; 5 } 6 7 input, .over{ 8 font-size:14px; 9 box-sizing: border-box; 10 height: 30px; 11 padding: 8px; 12 width: 100%; 13 border: 1px gray solid; 14 background-color: #FFFDE7 15 } 16 .over{ 17 background-color:#ECEFF1; 18 position:relative; 19 top:-30px; 20 vertical-align:middle; 21 display: flex; 22 align-items: center; 23 } 24 .highlight{ 25 font-weight:bold; 26 color:red; 27 }
試したこと
●半角英数記号以外は全部赤くする
⇒全角英数を入力する人たちから紛らわしいと苦情殺到
●単純に「Ⅴ」「Ⅽ」「K」だったら赤くする
⇒別の文字を入力する人が現れてしまいイタチごっこに・・・
補足情報（FW/ツールのバージョンなど）
ブラウザ：Google Chrome
OS（クライアント側）：windows 7～10
顧客が指定するコードのようなものなので全て把握しているわけではないのですが、「Å」（読み方不明）やローマ数字の「Ⅰ」や「Ⅱ」は入ってくることがあります。なのでエラーではなく強調表示をして「大丈夫ですか？」という問いかけにとどめようと思っています。
余談ですが、その記号は「オングストローム」です。
ありがとうございます。社内では「鼻と口みたいなAのやつ」で定着していたので、あまりにカッコいい呼び方に驚きました。
回答4件
0
ベストアンサー
ソースを見た限り、アルファベットっぽいけどアルファベットではない文字をブラックリストとして保持してその文字が入っているかどうかを判定している、と思います。
この方法だと、「アルファベットっぽいけどアルファベットではない文字」がどれだけあるかわからないため、そのような文字を見つける度にブラックリストに追加する必要があるかと思います。
ここは逆の発想で、ホワイトリストを作成し、ホワイトリストの文字だけで構成されているかどうかで判定してみてはどうでしょう？
指定の文字だけで構成されているかを判断するのは正規表現を使うのが一般的と思います。
例えば半角英数のみをホワイトリストとして指定する場合、このサイトが参考になるかと思います。（Vue.jsではないですが、正規表現の考えは同じかと）
https://javascript.programmer-reference.com/js-check-hankaku-eisu/
投稿2018/11/14 06:58
総合スコア351
私もホワイトリスト方式のほうが適当かと思います（仕様が明示されればそれももっと声を大にして言えるのですが・・・）
ありがとうございます。
mts10806さんに教えて頂くまでこんなに知らない文字が存在しているとは思わず「赤くしたい文字を登録するほうが早いはず！」と思っていました。
試したことに記載した通り半角英数以外は赤くするというのは一度やっていたのですが、馬鹿正直にA～Zまで全部文字を書いてました。正規表現は範囲で指定できるんですね。
日本語のことを考えると頭が痛くなりそうなので、半角英数と全角英数と一般的な記号だけ登録して試してみようと思います。
ありがとうございました！
>mts10806さん
仕様が不明でしたが、おそらくこれで解決しそうという不明確な理由で回答してしまいました(^^;
>SystemAjisai
正規表現、パターンチェック等でかなり使いますので覚えておいて下さい。わかりやすく説明していくれているサイトがいくつもありますので、ググってみて下さい。パターンのサンプルはいっぱいありますが、できれば理解してからコピペしてくださいね。
まさに質問前にコピペして試してみて、よくわからずコメントアウトした中に半角英数記号を範囲で指定しているものがありました…。ちゃんと勉強してきます。
日本語入力がある部署からもＯＫがもらえたので、直せ次第教えて頂いたホワイトリスト方式でリリースすることになりました。
色々アドバイス頂き本当にありがとうございました。
0
正直全部カバーするのは無理じゃないですかね。
特に機種依存文字の類ですから。
キーボードに直接なくても変換候補にはでてきます。
フォントによっても違ったりして、全て網羅は困難を極めるでしょう。
例えばこんな表がありますが、全てをブラックリストに入れてチェックするというと現実的ではないですよね。
どのようなWebシステムかは存じ上げませんが、
打たれた情報が正しい情報かどうかを判断する術はありません。
※「数字なのに英字が打たれた」とか「”カナ”なのに”かな”が打たれた」とかは除く
名前の漢字とか、それが本当にその人の名前なのかどうか確かめる術はないですよね。
例えば比較的自由に入力が可能な住所であってもマンション名まで行くと機種依存文字やら’やら入ってくることが多々あります。
国によっては必要な文字かもしれません。でもそれはその入力するユーザーによりけりです。
制限しすぎるのはかえって使い勝手が悪くなります。
それはもうそのまま受け入れるしかありません。
という前提ですが、
実際に何か問題が起きているのでしょうか？
「困っています」とありますが、何がどう困っているのかわかりませんし、
大きな問題が起きているのか、そのあたりが質問文からは読み取れませんでした。
もう少し背景や経緯・起きている問題を具体的に書かれたほうが良いと思います。
投稿2018/11/14 06:46
編集2018/11/14 06:49総合スコア80850
ご指摘ありがとうございます。困っていることの詳細を追記しました。
あの謎の文字たちは機種依存文字という名前なんですね。
用語がわからなくてどう調べて良いのか悩んでいたのでスッキリしました。
仰る通り驚くほど多かったです…世の中にはこんなに文字があるんですね…。
別の方の回答にコメントしてくださった通りホワイトリストというので検討してみようと思います。
ありがとうございました。
一応「人にとっては必要な文字の可能性がある」という部分は考慮してくださいね。
パッと見文字化けでよく見る文字であっても存在する字である以上はどこかで実用される可能性があるものですし。
ありがとうございます。
入力チェックでエラーにして登録できないようにするのではなくて、あくまでも強調表示だけして最終的な判断は入力者に任せることにします。
0
こういったWebシステムの場合、入力時のバリデーションも一つの方法ですが、逆に文字を受け入れて変換してしまう方法もあります。
JavaScriptにもnormalizeがありますので、NKFDやNKFCで変換して処理する方法も検討した方がいいと思います。
投稿2018/11/20 12:15
総合スコア96
回答ありがとうございます。参考になります。
私のケースでは正しい文字種がシステム側で不明なので受け入れて変換することはできないのですが、この方法を使えば候補がだせそうです。
これで毎日数十回来るようになった「直し方がわからない」という問合せから解放されます・・・。
ありがとうございました。
0
そういう「マスターがある」ものでしたら、相手方からマスターデータをもらってきて、フリー入力欄は底に対する検索という形にすることで解決させてはどうでしょうか。
投稿2018/11/14 07:20
総合スコア145183
> 通常はこういった文字の入力ミスをどうやてユーザーに伝えるのでしょうか？
コードなどで規格化する、プルダウンなどで選ばせることで、「全角文字をコードとして入力させること自体をしない」というのが正解かと思います。
私自身がこの業務に精通しておらず、説明が下手ですみません。。。
例えば「小麦粉」という製品があるとして、それには品番のようなコードがありマスタがあると思うのですが、この項目はその「小麦粉」がいつ、どこで、どの機械で作られてどの箱にはいってウチに届いたものかというような「個体」を特定するためのものです。
純粋に「●年●月●日●●で製造分」と日本語で入っていることもありますし、暗号のような文字の羅列の場合もあります。
基本的に重複が許されないような使い捨てのものなので、どこの顧客もマスタ化はされてないと思います。
うちの会社のロット番号とは感覚が違うので曖昧な言い方をしましたが、世間ではこれをロット番号と呼ぶそうです。
無知ですみません…。
あなたの回答
tips
プレビュー
