iPhoneやiPadのブラウザでBloggerの投稿画面をスクロールできるようにするブックマークレット

2017年1月2日
iPhoneやiPadのブラウザからだと記事を投稿しづらいBloggerですが、それを解消する為のブックマークレットを作成しました。


経緯


画面のレイアウトだとか最適化だとは置いといて。

投稿そのものとか文字入力はできるんだけど、ブログ記事本文の入力フォームを、パソコンみたいにスクロールできないんですよね。
（HTML的にはフォーム部品では無いけど、なんて呼べばいいのかな？）

画面読み込み時に表示されている範囲内しか編集できないっていうか・・・文章が途切れてしまうんですよ・・・



↑の画像は投稿画面なんですけど、「ザクもグフもキュベレイもガンダム」以下の行がスクロールできず、表示されている部分しか編集できないんです。

2本指でもスクロールできないので、どうしたもんかと。


だからパソコンで入力した長い文章とか、iPhoneやiPadから編集しようとしてもできないってことがチラホラ。入力フォームがスクロールできないからね！！


まあ、アプリからであれば普通に入力できるんです・・・が・・・
や、やっぱりブラウザからできた方が色々と便利なんですよ！！
ぶっちゃけ公式のアプリって使いづらいんだよね。


ブラウザの管理画面はPC用だから、仕方がないんですけどね。
その為にアプリが用意されているんですから。変なタグ入るから使いたくないんだけど。

・・・でも、Androidのスマホからだと入力フォーム、スクロールできるんですよねぇ・・・

「もしかしたらiOSでもそのうちスクロールできるようになるのでは？」と、管理画面がアップデートされる度に期待しては打ち砕かれ・・・期待してはまた打ち砕かれ・・・


なので


iPhoneやiPadのブラウザからBloggerの本文入力フォームをスクロールできるようにするブックマークレットを作ったんですよ！！！
・・・一応、2014年ぐらいから作ったものなので、iOS9以下でも使えると思います。


ブックマークレット


javascript:var e=document.getElementsByClassName('editorHolder');e[0].style.overflow='scroll';e[0].style.webkitOverflowScrolling='touch';
view raw gistfile1.txt hosted with ❤ by GitHub

↑例によって、上のソースコードをブックマークレットに登録してください。


使い方は非常に簡単。

iPhoneやiPadのブラウザ（Safari、chrome）でBloggerの投稿画面を開いて、上記のブックマークレットをタップするだけ。
それだけで、本文入力フォームをスクロールすることができるようになります。


そもそも、どうしてiPhoneやiPadでは本文入力フォームがスクロールできないかと言うと・・・

overflowがhiddenになっていると、スマホやタブレットなどのタッチ操作のみのデバイスではスクロールができないっぽいです。

今回は本文入力フォームを構成するdiv要素（class="editorHolder"）、こいつのoverflowがhiddenになっていたのが原因だった模様。
overflowがhiddenになっていると、要素からはみ出した部分が表示されないので、そこんとこが影響していたんでしょうか？

だったらそのoverflowを、CSS的にautoなりscloolに書き替えてしまえ、と。

（そもそもタッチデバイスの使用は想定されてないので、『原因』だなんて言ってしまうのはちょっと乱暴のような気もするんですけどね）


今回はautoに書き換えることでうまくいきましたが、この先どうなるか分かんないですよね。
投稿画面が変われば使用できなくなっちゃうわけですし。
まあ、iOSを使っていくうちは対応するつもりですが・・・


iPhoneやiPadのブラウザから、記事を投稿したいけど画面をスクロールできなくて困っているという方はお試し頂いては如何でしょうか？