スクリーンリーダーを使って、Android, iOSアプリを作れるだろう環境を作ってみた #iOS

背景 or 拝啓

この記事をご覧になっていらっしゃる方は「アクセシビリティ」という単語をご存じの方が多いのだろうと思う。しかしながら、まだまだこの単語とその重要性についてご存じないエンジニアの方も少なくないと聞く。私を含めたアクセシビリティ機能を必要としている者にとっては、もう少し認知度が上がってくれればなと切に願っている。せめて「バリアフリー」という単語程度には認知度が上がってくれれば。

さて、質の高いアクセシビリティ機能を実装するためには、その機能を必要としているユーザーからのフィードバックはとても重要である。英語圏で開発されたアプリケーションを日本語化する際、日本語が分かる人がレビューしたり提案したほうが質の高い日本語化ができるのに似ている。翻訳だけでは気が付かない日本語特有の使いやすさに気が付きやすいのは、やはり日本語を母国語としているか日本語がわかる人なのだと思う。

ということは、アクセシビリティ機能を必要としている人（以下、当事者と書く）からのフィードバックの質が上がれば、アクセシビリティ機能も向上していくだろう。

さて、ここからが問題である。フィードバックにはおそらくいくつかの段階がある。

なんとなく使いにくいな、という抽象的フィードバック
具体的に使いにくいところを示したフィードバック
具体的にどうなって欲しいかを示したフィードバック
ソースコードがあるならば、それに対するパッチやプルリクエスト

3つ目と4つ目はアプリケーションやOS内部知識やプログラミング技術が必要なので、難易度は高い。が、もし当事者がこのような具体的フィードバックを送ることができるならば、アクセシビリティ機能はかなり向上する。そして、プロプライエタリなソフトウェアでこんな具体的フィードバックを送っている人がいらっしゃれば、その当事者は開発している会社で具体的な貢献をしているということになるだろう。

こんな状況を実現するためには、当事者はプログラミングができる必要がある。大規模なアプリケーションを一人で作成することはそもそも不可能だ。それに加えて、画面デザインなどは完全に視力がないならばなおさら難しいだろう。が、開発できる分野はまだまだある。そうやって、スマートフォンのアプリはどうやって作るのか、アクセシビリティ機能はどうやって実装するのか、どんな実装をするとアクセシビリティ的にまずいものができるのかを、具体的に知っていれば、より質の高いフィードバックを送ることができるだろう。

ということで、実際にAndroid/iPhoneのアプリを作っている方が複数人いらっしゃるので、私もその後追いということで、どこまでできるのかを確認してみようと思う。

これを読んで、自分もプログラミングしてみようかなと思われた当事者の方がいらっしゃれば嬉しい。また、アクセシビリティ機能に興味を持っていただいたエンジニアの方がいらっしゃれば嬉しい。

環境など

試している環境を書いておく。要するに、MacとWindowsのコンピュータがある、そんな環境だ。

コンピュータ: iMac (Retina 5K, 27-inch, 2020)
OS: macOS Monterey 12.6
Screen Reader: VoiceOver
XCode: 14.0
Flutter (Channel stable, 3.0.5, on macOS 12.6 21G115 darwin-x64, locale en-JP)
Android toolchain - develop for Android devices (Android SDK version 33.0.0)
VS Code (version 1.71.2)
GNU Emacs 28.2
Homebrew 3.6.4
VMWare Fusion 12.2.4
Windows 11
Screen Reader: JAWS 2022 JPN, NVDA 2022.3
Git for Windowsに付属しているGit Bash
Android SDKとFlutterはWindows側にもインストール

基本的に現段階の最新バージョンである。このバージョンでなければ動かないということではないし、動かなければ動くように修正されるべきである。

戦略

先人たちの知恵を最大限お借りしよう。どうやらWindowsでは、Visual Studio Codeを使って開発を行うのが、スクリーンリーダー使用時には良さそうである。また、コマンドライン系のOSの方が使いやすいだろうと私は信じているので、UNIX系のOSを使う、ということでmacOSである。これについてはWSLでも良いかもしれないが、iOS用のアプリも作るんだからmacOSを選択しておいたほうが無難なのではないか。

開発用のプラットフォームもたくさんあるんだけど、Flutterを使ってAndroidとiOSのアプリを両方リリースしている方がいらっしゃるので、これはもう従うのが早道だろう。ただ、私はVisual Studio Codeも興味あるが、長いことEmacsを使ってきた。ということで、Flutterの開発環境をEmacsにも設定しておく。

これで基本的なことはできるはずだ。では勧めてみよう。

インストール手順

この記事は、すでにWindowsにある程度の開発環境を設定できている私がどうインストールしたかをトレースしたものになってる。なので、Macから設定を始めた。しかしよく考えてみたら、この記事を読んでいる当事者の方は、そもそも開発環境をちゃんと設定できてないかもしれない。

前提として、Windows側に、ターミナルエミュレータ（この場合はgit Bash）がインストールされていることが必要である。Macの操作は、Windows側からssh経由でログインして行う。この辺の事情は
このへん
に書いている。

ということで、このドキュメントをフルスペックで試したい方は、まずgit Bashをインストールすることから始めてみよう。

macOS側のセットアップ

上記環境をせっせとセットアップすればよい。

### XCode

とりあえず、App StoreからXcodeをインストールする。特に悩まないと思う。

その他のツール

他はほとんどコマンドラインからインストールできるだろう。ターミナルを開いて、粛々とインストール。

$ xcode-select --install
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
$ brew install cocoapods emacs git flutter android-studio

その後に、Android SDKのコマンドラインツールをインストールする。
Android Studioのダウンロードページ
の「Command line tools only」セクションから、お使いのプラットフォーム用のものをダウンロードする。私はこれを、~/Library/Android/sdk/cmdline-tools/ディレクトリに展開した。で、展開して出てきたcmdline-toolsディレクトリをlatestにリネームする。

たぶん上記な感じ。もう試せないい。

$ flutter doctor

してみて問題がないかを確認してほしい。問題があったら修正。

続いて、sdkmanagerを使って必要なパッケージをインストール。本来ならば、この作業は先にインストールしたAndroid Studioを起動して、このUIで行う。Windowsならば可能なのだが、どうやらmacOSではアクセシビリティ上の問題でうまくいかない。改善されてる可能性があるので、一度やってみてから下記の方法を試してみてほしい。できるならAndroid Studioを使ってインストールするほうが楽だからだ。

2022年10月現在、WindowsでもMacでも、スクリーンリーダーを使ってSDKやらエミュレータやらをインストールすることができるようになっている。操作が煩雑なので、コマンドラインでインストールしちゃってもかまわないと思う。

build-tools, platforms, platform-tools, cmdline-toolsの四つが必要のようだ。

$ ~/Library/Android/sdk/cmdline-tools/latest/bin/sdkmanager --list

とすると、インストールされているパッケージと入手可能なパッケージが表示されるので、お好みでインストール。

$ ~/Library/Android/sdk/cmdline-tools/latest/bin/sdkmanager --install <パッケージ名>

みたいにする。

最後にライセンスに同意する。

$ flutter doctor --android-licenses

同意できるならば、yキーを押して同意。

Emacsの設定

ぶっちゃけ長いので他に譲りたい。lsp-modeを使えるようにして、これをベースにflutterとかdart-modeとかcompanyとかflycheckとかをセットアップする。正直好みでどうぞ。

ところで、Flutterで使われる言語はDartという言語である。Dartにもいろいろと親しみたい。Dart単一の勉強もしたい。そうすると、dart-mode単一で使ってもちゃんとlspが動いたほうがうれしい。

やってみると、Language Serverが見つからないとか言われてうまく行かない。探してみたらFlutterのインストールディレクトリ内にあった。

.zshrc

export PATH=/usr/local/Caskroom/flutter/2.0.5/flutter/bin/cache/dart-sdk/bin:$PATH

みたいにしておくと、Dart言語で書かれたファイルを単一で開いてもちゃんと動くと思う。Flutterをアップデートしたら書き換えなければならないのが面倒だけど。うまいことシンボリックリンクとか使ってやればいいかな。

ひょっとすると、lsp-modeにしてLanguage Serverが動き出した瞬間にmacOSのセキュリティに引っかかってしまうかもしれない。適当に許可を与えれば動く。

Windows側の設定

スクリーンリーダーはインストールされているだろうか。まだならば、
NVDA日本語版
を確認してインストールする。JAWSは有償のソフトなのでこちらはオプションで。

Git for Windowsのセットアップ

WindowsでもGitが使えると便利だからというのもあるが、これに付属しているMSYS2のサブセットがほしいのだ。これでMacがわにリモート接続できる。

Git for Windowsのページ
を確認して、最新版をインストール。

Git Bashはインストールできただろうか。開いてみよう。ひょっとしたら、スクリーンリーダーによっては正しく読み上げが行われないかもしれない。
このページ
とかを参考に、JAWSは設定する。NVDAはそのままでも動きそうだ。フォントをラスターにすると動くという情報もある。Git Bashが使うターミナルをminttyではないものにすると、NVDAのレスポンスは向上するかもしれない。

Bashが起動したら、とりあえずMacに接続してみよう。<ホスト名>.localで接続できるはずだ。私はホスト名がsentaroなので、

$ ssh sentaro.local

となる。macOS側でリモート接続を受けられるようにしておく必要がある。

Visual Studio Codeのインストール

参考サイトもたくさんあるので、それらを参考にインストールする。

ここらへん
から希望のものをダウンロードしてインストールする。特別難しそうなところはないと思う。必要ならば日本語化をするのが良さそう。

スクリーンリーダーでの読み上げがうまくいかなかったりするようならば、
ここ
とかを参考にどうぞ。

Android開発環境のインストール

公式のページ
にアクセスして、パッケージをダウンロードしてインストールする。

残念ながら、Android Studioのアクセシビリティはそれほど高くない。新しければ新しいほど使える可能性はある。少なくとも、初回起動するとスクリーンリーダーを検出しようとしているので、アクセシビリティについてなんらかの対応をしようとしているのだと思われる。

少し調べてみると、JAWSでは思ったように動作しない。NVDAを使うほうがよい。
このページ
にかなり詳しく説明されている。

Flutterのインストール

ここらへん
を見て、インストールする。Git Bashを開いて、下記コマンドを実行するのもありなんだって。

~$ git clone https://github.com/flutter/flutter.git -b stable

VSCodeの拡張機能をインストール

拡張機能のインストールに関しては参考サイトがたくさんあるので、そちらも参考にしてほしい。

簡単な手順はこんな感じ。

Ctrl+Shift+Xを押す。
拡張機能の検索ボックスにフォーカスが行くので、"flutter"と入力。
Tabキーを何度か押して検索された拡張機能のリストにフォーカスを置く。
上下矢印キーで、"flutter"を探す。
あったら、Tabキーを押して[インストール]ボタンを探して押す。

他にも入れたいプラグインがあったらここでごそごそ入れる。

最後に

長かった、本当に長い。まだアプリは一つもできてない。これが準備だとはね。

でもね、これで開発ができるのです。ほしいと思っているアプリを開発する準備はできたのです。次はアプリを開発するための学習と、なんとしてもアプリを作ってやろうという根気と執念と怨念（なにを恨むんだ？）です。

そして、ここまで読んでくださったソフトウェア業界の人事の方、ひょっとしたら当事者をエンジニアとして採用すると、十分に開発に貢献してくれるかもしれないですよ。執念は必要ですが、開発チームに加わっていける環境はなんとか整います。まだまだいろいろと改善されるべきですし、社会的環境も整わなければならないでしょう。でも、あなたの会社がその一歩を踏み出すことで、社会的環境は改善されるのです。どうか検討してみてください。

お・ま・け

マイコン関連も同じようなものだよお。とりあえず趣味でやるなら、Arduinoも使える。SPresenseはハードウェア持ってないけど、要するにC++コンパイラだから使えるだろう。

やってみたいことができるだけハードル低く試せる時代になるために、もう少し頑張らないとね。

では、この先、開発編に続くのである（いつ書くんだ？）。