これまでのあらすじ
最後の鬼門、「8.ブラウザによる操作」です。
ブラウザによる操作
ユーザーインターフェイスはどうするか？もう答えは2つしかないわけで
- 専用アプリを開発
- Webベースで開発
専用アプリのほうが色々実装で来て楽しいんだけど、iOS、android、windowsとプラットフォーム毎に分けて作らないとだしプライベートで使うにはどうも気が進まないんですね。かといって、Webベースで作ろうにも・・・
ぼくCSS大嫌いなんすよ・・・
なぜって？CSSに限らず、全般的にレイアウトとかもあんま好きじゃないんです。センスがないからなんですけど。だって、SpriteKitとかUnityとか2Dエンジンでスプライトポンポン配置したほうが楽じゃないですか？(オイ)
CSSが嫌いなんで、必然的にJavaScriptも避けてきたわけなんです(笑)。ブラウザ毎に表示も動作もちょくちょく違いますし…。けど結局、葛藤した結果
Webベースのほうがコード量すくないかな？
という理由でWebベースにしました。
頑張ってこのセンスww
僕の頭は2000年ぐらいでHTMLのことは止まってます。とのあえず、トップのindex.htmlとbutton.css。button.cssといってもボタン以外のcssも入ってます。名前変えるのめんどくさかったです。というか、急速にやる気がそがれました。最後にGistからのリンクとコードを貼っておきます。
見てもらうとわかるかと思うんですが・・・ESP8266へのリクエストも XMLHttpRequest()を使ってみたりajaxを使ってみたり
どっちかにしろや！！
そう思います。JQueryのajaxのほうが使いやすそうですので統一したほうがいいです。両方知っとくためにもめんどくさいのでこのままにしときますw。これをESP8266のSPIFFに書き込んでサーバーとして開放します。
リモコン操作時に連続タップすると、Safariでは拡大表示されてしまうのでCSSに
touch-action: manipulation;
を入れたんですけど、どうも効かないです。というか、効いてたり効かなかったりです。調べたんですが、解決できませんでした。どなたか知りませんか・・・？
別記事でスケッチもだしますがポート80はfauxmoESPでアレクサが使っているので81ポートとしています。ほかのリモコン画面も、これとほぼ一緒です。これをSPIFFSに転送しておきます。SPIFFSの転送方法については下の記事を参考にしてください。
