お疲れ様です！
T.R.Imagination北野です！
今回は久々にWEB系の開発系です。
MyASP（マイスピー）というメール配信スタンドを
提携先の仕事でも、個人事業でも使っています。
MyASPでフォームを頻繁に使うのですが、
今回はこのMyASPで作ったフォームを、
WordPressの記事の中に埋め込んでみよう！
ということをやってみました。
目次
やりたいこと
どんなフォームなのかというと、
パソコンサポート系のコミュニティチャットのメンバーに、
パソコンのスペックを聞くものです。
で、分からない人も多そうな感じなので、
JavaScript使ってブラウザ情報を取得して、
そこからOSとブラウザぐらいは自動で表示しておこう
というものです。
埋め込むだけなら、
埋め込み用のコードを貼り付けるだけなのですが、
今回苦労したのは、
オリジナルのJavaScriptが動作しない！って問題。
MyASPの登録フォームデザイン画面で、
ヘッダー部分に次のオリジナルJSを書き込みました。
// JavaScript Document
var userAgent = window.navigator.userAgent.toLowerCase();
var userOS;
if(userAgent.indexOf("windows nt") !== -1) {
userOS = 'Microsoft Windows';
} else if(userAgent.indexOf("android") !== -1) {
userOS = 'Android';
} else if(userAgent.indexOf("ipad") !== -1) {
userOS = 'iPadOS';
} else if(userAgent.indexOf("iphone") !== -1) {
userOS = 'iOS';
} else if(userAgent.indexOf("mac os x") !== -1) {
userOS = 'macOS';
} else {
userOS = '';
}
var userBrowser;
if(userAgent.indexOf('msie') != -1 || userAgent.indexOf('trident') != -1) {
userBrowser = 'Internet Explorer';
} else if(userAgent.indexOf('edge') != -1) {
userBrowser = 'Edge';
} else if(userAgent.indexOf('chrome') != -1 || userAgent.indexOf('crios')) {
userBrowser = 'Google Chrome';
} else if(userAgent.indexOf('safari') != -1) {
userBrowser = 'Safari';
} else if(userAgent.indexOf('firefox') != -1) {
userBrowser = 'FireFox';
} else if(userAgent.indexOf('opera') != -1) {
userBrowser = 'Opera';
} else {
userBrowser = '';
}
$(document).ready(function(){
$("#Userfree1").val(window.navigator.userAgent);
$("#Userfree2").val(userOS);
$("#Userfree3").val(userBrowser);
$("#Userfree4").val(window.parent.screen.width + " × " + window.parent.screen.height);
});このコード自体は、特に難しいことはやってなくて、
ググって調べたらすぐに書けるコードです。
MyASPで作ったMyASP発行のフォームだと問題なく動作しました。
ところが、これをWordPressの記事に埋め込むと、
フォームは表示されましたが、JavaScriptで取得したブラウザ情報が表示されない！
昨晩3時間ぐらいググって調べてみましたけど、
どーもうまく行かない。
ググって駄目なら、一つずつ原因を探って句しかないか…
ということで、やってみた結果うまく行ったのでメモ残しておきます！
まずそもそもヘッダーに書いたJSは読み込まれているのか？
そもそもコードが読み込まれていなかったら、動くはずもないですね。
そして、読み込まれていませんでした！
MyASPのヘッダーに書いたオリジナルコードは、
埋め込みすると読み込まれませんでした！
ということで、MyASPのJS埋め込みコード2行の下に、
マイJSコードの読み込みコードも追記。
どのタイミングで動作しているのか？
更新後、ソースコードを確認。
うむ、読み込まれておる。
読み込んでいるURLを開くときちんとコードが表示される。
だがしかし！
動かない！
いや、動いているのか？
Chromeのデベロッパーツールを使って、
JavaScriptでフォームのテキストを書いているところでSTOPをかけてみる。
止まった！
動いてはいる！
しかし！
止まったタイミングで表示したいテキストボックスが表示されていない！
DOMの構築が完了していない状態で走っているのか！
そりゃアウトプット先が無い状態でスクリプト走っても、反映されませんねー。
readyからloadに変えてみる
ここでまたちょっとググって調べてみました。
DOMが構築された後に処理をするには、
document.ready
ではなく
window.load
を使うと良い
と。
フムフム。
ということで、書き換えてみました。
$(window).load(function(){
$("#Userfree1").val(window.navigator.userAgent);
$("#Userfree2").val(userOS);
$("#Userfree3").val(userBrowser);
$("#Userfree4").val(window.parent.screen.width + " × " + window.parent.screen.height);
});さぁ、どうか？
…、動かんがねー。。
window.loadに変えた後、
改めてデベロッパーツールで走るタイミングで止めてみました。
まだテキストボックスが出来てない。。
きっと、window.loadの後で
MyASPの埋め込みJSがフォームを書き出しているのでしょう。。
ん？
じゃぁ、少しタイミングずらせばいいんでない？？
タイミングをずらしてみた
ということで、
setTimeoutを使って少し動作タイミングをずらしてみました。
$(window).load(setTimeout(function(){
$("#Userfree1").val(window.navigator.userAgent);
$("#Userfree2").val(userOS);
$("#Userfree3").val(userBrowser);
$("#Userfree4").val(window.parent.screen.width + " × " + window.parent.screen.height);
},500));さぁ、どうか？
やった！
動いた！
ということで、
window.loadでも動作しない場合は、
setTimeoutで少し動作タイミングをずらしてやるとうまくいく、かも？！
というお話でした！
