オートコンプリート
「オートコンプリート」機能はブラウザの入力支援機能で、身近な例がブログページの検索枠です。 検索枠をクリックすると、過去にその検索窓に入力した文字列がリスト表示されます。 リストに今必要な検索文字があれば、リストのクリックだけで再検索が素早く出来ます。
他のユーザーのブログで同様の検索窓をクリックしても、やはり自分の検索履歴が出ます。 つまりこれは、自分が使っているブラウザが記憶した検索履歴を表示しているだけで、他のユーザーに履歴内容が知れるわけではありません。
「画像URL入力枠」は新Edgeだけオートコンプリートが機能する
検索窓の様な1行入力枠は、たいてい「input要素」で作られています。「input要素」には、何かを書き込んだり、値を設定したり、単にボタンでユーザーの選択を受け取ったりと、色々なタイプがあります。 これはプログラムにとって、インターフェイスの要ですね。
で、「Skin Coordinate」で画像URLを設定する入力枠で、新Edgeでは「オートコンプリート」が動作するのに、Chrome / Firefox では動作しない事に気付きました。
このツールでは、画像URLの入力枠で「オートコンプリート」は余り必要な機能ではありません。 ユーザー画像の位置を何度も微調整する様な場合は、便利かも知れませんが、需要は限られ、むしろ邪魔で要らないと感じるかも知れません。
ただ私は、Chromeや Firefoxで機能が働かない理由を知りたくなりました。
「オートコンプリート」はブラウザの扱いに幅があるらしい
色々な記事を調べると、 「オートコンプリート」機能は規則が厳密ではなく、ブラウザによる扱いに差があり、スマホの用途拡大で更に仕様に幅が出来た様に思えてきました。 以下のページの情報は、「オートコンプリート」の原則的な部分について書かれています。
この情報の以下の部分で、Chrome と Firefoxの場合に「オートコンプリート」が働かない理由が判りました。
自動補完を提供するために、ユーザーエージェントは<input>/<select>/<textarea> 要素に次のことを要求することがあります。
1. name や id 属性を持つこと
2. <form> 要素の子孫であること
3. フォームが submit ボタンを持つこと
「form」は、ブラウザへのユーザ入力を受取り、システムに送信する基本構造です。 ブログページの「検索窓」もやはり「form」の一種で、検索文字を入力すると、アメブロのシステムにそれを送信して、検索結果を別ページに表示します。「form」の大規模な例は「ブログ編集画面」で、私達は最後に「公開」ボタンを押しますが、やっている事の本質は「ブログ検索窓」と同じです。
それに対して、「Skin Coordinate」の「画像URL入力枠」には「form」の設定はなく、スクリプトで入力を受取っているだけです。 それは何も送信をしない「input要素」で、その理由で「オートコンプリート」が機能しなかったわけです。
ただ、上の引用に「要求することがあります」とある様に、新Edgeの場合は「form」の一部ではない「input要素」にも「オートコンプリート」が機能する様です。
Firefoxで formを設定してみました
Firefoxでも「オートコンプリート」が動作するのを確かめたくなり、スクリプトのコードに「form」設定を割込ませました。 ネットを調べると、送信を目的としないのに「form」を生成するのは、特にHTMLの規則違反にはならない様です。
青文字の部分が「画像URL入力枠」の「input要素」で、それを「formタグ」の中にラップしています。 これでこの入力枠も「form」の子要素となります。
このフェイクの「form設定」で、めでたく「オートコンプリート」が動作する事が確認できました。
ただし、この様な何も指定がない「form」でも、入力枠内で「Enter」を押さない限り「オートコンプリート」のリストに入力した文字列が追加されません。 そして、文字列を覚えさせるために「Enter」を押すと、ページがリロードされ「送信」が実行されます。（それを受信する機能は、アメブロの何処にもありませんが）
リロードが生じると作業が無化するので、送信をせずに「オートコンプリート」機能を利用する方法を調べると、「onsubmit="return false"」を「formタグ」に追加すると書かれています。 確かに、これで「送信」は行われずリロードが発生しませんが、「オートコンプリート」のリスト記録は「送信」した時に追加されるので、結局は目的が達せられません。
という事で、Chrome / Firefox で「オートコンプリート」を利用するのは、この「画像URL入力枠」では困難だと判りました。 効果的なマヌーバーでブラウザを騙せば、「送信」なしで「オートコンプリート」に文字列を追加できるかも知れませんが、苦労の割に意味が無いのでツールのコードに手を加えない事にしました。