20200626のiOSに関する記事は3件です。

UITextDocumentProxyのsetMarkedTextを(まだ)使ってはいけない。

概要

iOSのKeyboard Extensionを自作するとき、必ず触ることになるのがUITextDocumentProxyです。

iOS13からはsetMarkedText(_:selectedRange)というメソッドが追加され、これを使うことで標準の日本語キーボードのような「入力中のテキストの背景の色が変わる」挙動が実現できるように思われます。

実際、4月に複数のキーボードで調べたところでは2つのKeyboard Extension(flickFlick SKK)がsetMarkedText()を用いていると思われる挙動を示していました。

挙動の詳細

チェックした環境はiOS 13.5.1のiPhoneSE(第1世代・第2世代)です。

ezgif-6-0ef87aa0999a.gif

少し何が起きているかわかりにくいですが、消える瞬間にテキストをタップしています。標準キーボードを利用してきたユーザが期待する動作はカーソルの移動ですが、(何故か)入力中のテキストが全く見えなくなる挙動を示します。
これはFlick SKKについても同一です。そもそもsetMarkedText(_:selectedRange)がこの挙動を示すので、当然といえば当然です。

まだ使うべきではない

入力中のテキストの背景の色が変わるのは標準キーボードで当然の動作ですし、できれば実装したほうがユーザフレンドリーな動作です。が、それによってできることが著しく制限されます。実際に制限されるのは

  • 入力中の(キーボードを介さない)カーソル移動
    • 入力中の(キーボードを介さない)変換範囲の指定
    • 入力中の(キーボードを介さない)誤字の修正
  • 入力中の範囲外タップによる入力終了
    • flickでは範囲外タップで入力中の文章が消滅する(仕様?)

などなどです。当然バグの温床でもあります。
さらに、この挙動を修正する方法は今のところありません。散々格闘しましたが、標準のキーボードはおそらくsetMarkedTextを使っていないんじゃないかと思います。もし詳しいことをご存知の方いらっしゃいましたら教えてください。
ただ、いろいろなKeyboard Extensionのレビューを見て見ると「入力中の文字の色が変わるようにしてくれ」という要望はかなり多いです。iOS12までは「appleに言ってくれ」が答えでしたが、iOS13では「appleに文句言ってくれ」と答えたいところでしょう。なんでappleはわざわざこんな使えないものを追加したんだ……。

参考

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【Swift】 Color Setを使うときのちょっとした注意

iOS11(Xcode9)からImage Setのように、色を定義することの出来るColor Setが実装され、Storyboard上での色管理の煩わしさから開放されました。
もちろん、コード上からも使うことが出来てとても便利なのですが、ちょっとした注意点があったので、備忘録として残しておこうかなと思いました。

あるプロジェクトで遭遇したことなのですが、Storyboard上で定義したLabelで、コード上からAttributedTextで色を変更しようとしたときのことです。
iOS13で起動したときは確かに色が変わっていたはずなのに、iOS11や12の端末で起動してみると、

色が変わらない

という現象が発生しました。
Great Scott!(BTTF大好き)と何度もつぶやきながら調べましたが、どうやら原因は「Storyboard上でColor Setを使用しているから」のようです。

特にサイトを調べたりしたわけではなく、Storyboardをいじっていたら発見したことなので本当かは定かではありませんが、少なくともStoryboard上で該当LabelのtextColorを、Xcodeで最初から定義されている色(black, white, default, etc...)に戻して再度アプリを実行すると、

ちゃんと色が変わってる!

という結果が得られました。

まとめ

iOS11や12を対象とするプロジェクトでColor Setを使う場合、Storyboardで設定した色を変更するときは注意が必要です。

意外と見落としがちなところかもしれないので、実際にそういったアプリを制作されている方は少しだけ注意したほうがいいかもしれません

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

MacでゼロからのFlutter環境構築

ゼロからFlutterの開発環境を構築するには以下の3つの手順が必要です。

  1. Flutterを導入する
  2. Xcodeを設定する
  3. Android Studioを設定する

Flutterを導入する

Flutterのインストール

Flutter公式からインストーラーをダウンロードします。
ダウンロードしたzipを解答して、flutterフォルダを任意の場所に置いてください。
私はアプリケーション直下に配置しました。

コマンドの有効化

  • flutterフォルダの中にあるflutter_console.batを実行します。 これでFlutter Consoleからflutterコマンドが使えるようになります。

Pathを通す

~/.bashrcまたは~/.bash_profileに以下を記述する。

$ export PATH=$PATH:/Applications/flutter/bin

Xcodeを設定する

Xcodeのインストール

App StoreでXcodeを検索してインストールします。
Xcodeのインストールにはかなり時間がかかります。時間の余裕がある時にインストールをしておくのをおすすめします。

Xcodeの設定を変更する

このコマンドを実装する。これでXcodeが使用できるようになる。

$ sudo xcode-select —switch /Applications/Xcode.app/Contents/Developer

ライセンスを表示して同意する。
コマンドから行ってもいいし、Xcodeを起動するでもOK。

$ sudo xcodebuild -license

Android Studio

Android Studioのインストール

App StoreでAndroid Studioを検索してインストールします。
こちらもなかなかお時間がかかりましたね。。

Flutter Pluginのインストール

メニュー>Android Studio>Preference...を選択する。
スクリーンショット 2020-06-26 0.55.05.png

横のメニューからPluginを選択。Flutterを検索してインストールする。
※画像はインストール済み

Android SDK toolsを設定する

Android SDK toolsのパケージ名がAndroid-SDK command line toolsに変わっていて、flutterからAndroid SDKをみにいくのに失敗するようになっていました。
なのでこちらを設定します。

先ほどと同様にメニュー>Android Studio>Preference...を選択します。
横のメニューのAndroid SDKを選択した、SDK Toolsの一覧をみます。

こちらしたの方にあるHide Obsolete Packagesのチェックを外すとAndroid SDK toolsが一覧に出てくるのでインストールします。

動作確認

ターミナルで以下を実行。こんな感じで返ってくれば完了です。
No devices availableこれはシミュレーターを起動していない時に出るので、実際作業するときはお忘れなく。

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.12.13+hotfix.9, on Mac OS X 10.15.4 19E266, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 11.5)
[✓] Android Studio (version 3.6)
[!] Connected device
    ! No devices available

! Doctor found issues in 1 category.
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む