モバイル対応

このサイトのモバイル対応をしゅこしゅこやりました。

---

モバイル表示に対応

やったことはこちらです。Head に viewport の設定をして、メディアクエリでモバイル用表示にしました。

もうひとつ、このサイトは、編集もサイト上でできるようになっているのですが、その編集ページもちょっといじりました。普段は、左にエディタ、右にプレビューを表示しているのですが、画面の横幅が狭いときは、上にプレビュー、下にエディタを表示するように変更しました。そのために、div の順を入れ替える方法を試したのですが、いまいちうまく行かなかったため、結局、

position:abusolute

は指定して、JavaScript のほうで top を設定して解決しました。

他にも、filexbox を使う方法もあるようです（要素の順番を入れ替えられる flexbox の order を活用しよう）。その辺を早く勉強しないと、ただただ面倒な方法で実装をしていくことになりそうです。

CodeMirror の挙動が変

私のモバイルでは日本語入力に ATOK を使っているのですが、その環境ですと、CodeMirror への入力が若干変なようです。調べてみたところ、こんな記事やこんな記事を見つけたので、試しに修正してみました。

やったことは、CodeMirror でスマホからの日本語入力をなんとかするという記事の内容です。IME 入力中にエディタの内容が外部から書き換わった場合に強制リロードされるという問題があるようですが、今回は同時編集などしないので、私の用途的には問題なさそうなので、導入してみました。

結論から言うと、いまいちうまくいきませんでした。症状がこちらで解決できる問題と違うのか、Android では別に考えないといけないのかもしれません。私の環境での動作は以下の感じです。

さすがになんとかしないと使えないので、調査継続です。ちなみに、CodeMirror6 の Demo にモバイルから入力してみたのですが、ちょっと挙動は違うものの、一文字目だけは確定されてしまったりと、やはりうまく動いてくれませんでした…残念…

作っていてわかったのですが、CodeMirror 生成時に

inputStyle: 'contenteditable'

を渡すと例えば、ハイライトされたテキストのあとに文字を入力すると、ハイライトを引き継いでしまうようなことがあり、あまり気持ちの良い動作になりませんでした。

モバイルの場合、それほどガッツリ書かないと思いますので、CodeMirror やめるというのも手かもしれないですね…（iPad とかで編集を目論んでいたのですが、それは別に考えることにします。）