こんにちは！
システムエンジニアの"とみー"です。
不安定な天気が増えており、低気圧に悩まされる方も多いのではないでしょうか？
私も起きると頭痛に苦しめられることがよくあります。
そしてもう１つ苦しめられているものがあります。
iOSのみ発生するテキスト入力フォーム(HTMLでの<textarea>)での動きです。
今日はiOSにおける動きの特徴を簡単に整理しつつ、ナノにて有料会員の皆さんに公開しましたテキスト入力用フォームにて解説をしていきます。
先ずはWebエンジニアや個人ホームページを運営している方が直面するiOSの仕様とナノでの直近の対応について整理させてください。
主に３点ありますのでそれぞれ見ていきましょう。
１つ目にiOSでは入力欄の選択時に欄内の文字サイズが16pt未満の場合は自動で表示を拡大します。
16pt未満のまま表示する際は拡大を行なわれないように表示時の最大倍率に制限をかける他ありませんが、もちろんそれに伴う弊害が発生する可能性があります。
ナノでは基本的には16pt、Android且つ小型の端末の場合は14ptに統一を行っています。
２点目としてiOSのアップデートによりフォント（文字の種類）のウエイト（太さ）が調整された場合、ウェブサイトの表示時にもその影響が及びます。
こちらは以前お知らせにて案内させていただいたようにアンリエイリアス「-webkit-font-smoothing: antialiased;」又はフォントウエイト「font-weight: 300」で対策が可能です。
３点目にテキスト入力（<textarea>）にて入力に合わせて高さ調整を行った場合、スクロールやカーソル移動時に影響を及ぼします。
この原因に関しては細かな解説をすると非常に長くなってしまうので省きますが、現在可能な方法では修正に必要な情報をiOSのSafariから受け取ることができないため完璧と言える対応は困難です。
おそらくナノ以外にも様々なサービス・サイトにて経験したという方は居られると思います。
ナノでは影響を抑える方向で対応を行ってきました。
先日のアップデートにて操作性を阻害する動きを抑えるアップデートを行いましたが、まだまだ解決されないという声を多くいただきました。期待していただいていたユーザーの皆様には大変申し訳ありませんでした。
サービス内の「お知らせ」にて告知させていただいた通りアップデート前と同じ状態へ一時戻していました。
そして今回、実験的な試みとして有料会員の方へ小説のページ、ブログの記事の一部の入力欄に「標準モード」と「拡張モード」の切り替えという形で新しい入力形式を試験公開する運びとなりました。
標準モードは従来と同じ形式で高さが自動調整されるものです。拡張モードはiOS独自の挙動を回避しつつ、iOS・Androidにて新機能を使用可能にした形式となります。
拡張モードは従来と異なる点が３つあります。
（１）入力欄のサイズをディスプレイと表示状態に応じて自動調整
編集中の入力欄のサイズ変更はスクロール等の動きに影響を与える可能性があります。
そこで個々の端末のディスプレイサイズや入力時のキーボードサイズを元に調整を行います。
アプリを使用している際の入力をイメージいただければ分かりやすいと思います。
（２）入力欄内の文字サイズ調整
入力欄の文字サイズを５段階で調整できるようにしました。
先ほどのiOSにて自動で拡大されるというお話をしましたがこちらは対策済みです。自動でズームされる心配はありません。
（３）独自タグのコピーボタン追加
入力欄の選択、フォーカスを行うとスクロール範囲は入力欄の内側となります。
ページ下部の独自タグをコピーするためにフォーカスを外してスクロールし、テキストを選択してコピー、それから……というのは大変ですよね。
そこで独自タグをワンタッチでコピーできるように拡張モードの入力欄直下にボタンを用意させていただきました。
３つの機能が加わった拡張モードですが、時期は未定ですが無料会員の皆さんにも公開予定です。
標準モードに関しても可能な限り（仕様変更により使用不可能になるような問題が発生しない限り）は維持・メンテナンスを行います。
更なる改良に関しては次回アンケートにて使用感をお聞きしますので、その結果も踏まえて検討させていただきます。こちらも準備を開始しますのでお待ちください。
少し長くなりましたが新機能についてでした。
今後も新たな機能や表示を任意の選択により使用できる形で試験実装する可能性があります。
その際は各サービスのお知らせと当ブログにて発表いたしますので、今後ともよろしくお願いいたします。
