App MakerのHTMLwidget
G Suiteのビジネスプランに加入すると使えるようになっちゃうApp Maker
App Makerを使うと、
いい感じのアプリケーションがペタペタっと手早く作れるっぽいです。
(これはApp Maker上にあったサンプルです)
なんでペタペタっと作れるかというと、
ボタンとかテキストボックスとか主要な機能がwidget化されていて
それをドラッグ&ドロップで任意の箇所に配置すれば作れちゃうから。
htmlを書くことなく、 且つcssのmarginやflexboxとかで調整しなくても
リストやボタンとかが生成できて好きな場所に配置できます。
あんまり勉強にはならないけど、
自由にカスタマイズできるからちょっと楽しい。(個人的な意見)
提供されているwidgetもかなり多いのですが
その中の1つ、HTMLwidgetについての備忘録。
HTMLwidget
- HTMLwidget内の<script>は動作しないっぽい
Use the HTML widget to display arbitrary HTML. In the editor, the HTML widget doesn't execute scripts or inherit global styles, so the widget might look slightly different when you preview or publish your app.
英語あまり得意じゃないから自信はないけど、公式のドキュメントにも
scriptは動作しないよって書いてある・・・よね?笑
まあ実際にHTMLwidget内の<script>に色々書いてみたけど
実行されなかったので、多分間違いないと思います。
- EventsプロパティのonAttachに実行させたい事を書こう
本来htmlの<script>に書きたい事は、HTMLwidgetのEventsプロパティonAttachに
書いとけば期待通りに動いてくれる。実際動いてくれた。
こんな感じ
- そもそもallowUnsafeHtmlにチェック入れないと動かないよ
HTMLwidgetのプロパティ欄にあるallowUnsafeHtml
これにチェックを入れないと、
HTMLwidget内のDOMを操作する事はできないみたい。実際そうでした。
<script>だけじゃなくて、HTMLwidget内に書いた<style>も適用されなくなった。
でも、XSSの危険性があるから推奨されてはいないね。
Disables HTML sanitization allowing a potentially dangerous HTML markup like scripts, applets, frames, etc.
Note: It is advisable to keep this property disabled to allow only safe HTML. If an unsafe html is allowed and user input can affect
html
property of the widget, it can lead to a cross-site scripting (XSS) attack.
とりあえずHTMLwidgetについてわかった事はこんな感じですね。
まだ本格的にApp Makerでアプリケーション作りに取り組んでいるわけじゃないから
全て把握はできてないんだけど
HTMLwidgetが必要な場面ってあるのかな、、、笑
他のwidgetが本当に種類豊富で、わざわざHTMLwidget使ってカスタマイズしなくても
事足りるんじゃないかっていう見解があるんだけど
まあ、世の中100%の事はないもんね。すみません、精進します。
参考にしたもの
Display Widgets | App Maker | Google Developers
appmaker - How to Call HTML Id in App Maker - Stack Overflow