In my head.

感想と考え事とメモ

App MakerのHTMLwidget

 

G Suiteのビジネスプランに加入すると使えるようになっちゃうApp Maker

App Makerを使うと、

いい感じのアプリケーションがペタペタっと手早く作れるっぽいです。

 

f:id:smspring0426:20180722150728p:plain

(これは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.

Display Widgets  |  App Maker  |  Google Developers

英語あまり得意じゃないから自信はないけど、公式のドキュメントにも

scriptは動作しないよって書いてある・・・よね?笑

まあ実際にHTMLwidget内の<script>に色々書いてみたけど

実行されなかったので、多分間違いないと思います。

 

  • EventsプロパティのonAttachに実行させたい事を書こう

本来htmlの<script>に書きたい事は、HTMLwidgetのEventsプロパティonAttachに

書いとけば期待通りに動いてくれる。実際動いてくれた。

f:id:smspring0426:20180722153445p:plain

こんな感じ

 

  • そもそもallowUnsafeHtmlにチェック入れないと動かないよ

f:id:smspring0426:20180722153830p:plain

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