HTMLを貼る
さて、現実的な話として、HTMLに貼り付けるだけで動くというのが特徴にしている筈なので、実際のところどうだろうというところを実証実験も含めて行った現状がある。
編集画面「コードモード」に切り替え、README.mdやsample-*.htmlのまんまである
JavaScriptを読み込ませる
<script src="/wp-content/uploads/hv-amsacmx/h-v-ams_ac_mx_calc.js?v=1.0.0.2026.07.12"></script> <script src="/wp-content/uploads/hv-amsacmx/h-v-ams_ac_mx_ui.js?v=1.0.0.2026.07.12"></script>
このコードの周りは、WordPressがコード変更を加えたがるところなので注意してもらいたい。
保存後、もう一回この<script src=”～”></script>まわりのタグが増えていたら、只管、この２行のコードに書き換える必要があると思ってくれた方がいい。２～３回でWordPressが「諦め」ました 笑
<div id="HV-AMSACMX-App"> <canvas id="BodyAnatomy" width="600" height="830"></canvas><script src="/wp-content/uploads/hv-amsacmx/canvas.js?v=1.0.0.2026.07.12"></script>
CSSで制御するためにcanvas領域に展開する範囲についてブロックをid属性でつけて囲ってしまいます
次いで制御コードになります。
保険負担割合:<select id="BurdenRatio"> <option value="1">１割</option> <option value="2">２割</option> <option value="3">３割</option> <option value="10">全額(10割)</option> </select>負担で<input id="HomeVisitedOfMassage" type="button" value="計算" onClick="runCalculator()" /> <input id="AMS_AC_MX_Mode" type="hidden" value="0" data-autoform="true" data-autotable="true" /> 同一住所のご利用者人数:<select id="HeadCount"> <option value="1">ご自宅</option> <option value="1">１人</option> <option value="2">２人</option> <option value="3">３～９人</option> <option value="10">１０～１９人</option> <option value="20">２０人以上</option> <option value="0">訪問施術料含まない</option> </select> <div id="amsArea"></div> <div id="acmxArea"></div> <div id="tableArea"></div> <div id="amsArea"></div> <div id="acmxArea"></div> <div id="AnswersBodyAnatomy"></div> </div> <div id="tableArea"></div> <footer><a href="https://github.com/ZeR0PointEnergy/h-v-ams_ac_mx_calc" target="_blank">Powered by HV-AMS/AC/MX Project Practitioner-Led Stewardship License</a></footer>
動く
一旦、この状態で動作を確認しました。
その後CSSなどを変更したりしました。
WordPress側に何か触られる
保存する時点では<input type=”button” onClick=”runCalculator()” />のonClick属性があります。
何度か行っているうちに、この保存後の、次ぎ開くとこのonClick属性が消えるということが現行のWordPressで起きています。
<script> 周辺を確認する
<span>などでタグが挿入されることがわかっています。実害はありませんがこれにより壊れたオブジェクトを示すアイコンが表示されるような仕掛けとなっています。あえて壊れていないのでそこは上記に書いた通り、「２行のコードに書き換える」ことにします。
DOMやイベントの問題が出る
「その後CSSなどを変更した」ワケでこの時点でonClick属性を消されてしまいます。
[計算]ボタンを押しても動かなくなりました 苦笑
最終的にどういう埋め込み方法にしたか
WordPress側で、保存・再編集後に属性が保持されないケースがあるようです。
再度編集画面を開くときは要注意です。
現時点では、<input type=”button” onClick=”runCalculator()” />のonClick属性を挿入してから保存というスタンスを取ります。この時点ではプログラムは動くことが確認できています。
