今回作ったのは、記事の下書きを音声入力でざっくり作る。でも段落の入れ替えはしながら、全体の構成を作りたい。そんなときのためのツール。
音声投稿ツール
実際に投稿する部分は作っていないので、「音声投稿ツール」という名前はどうかと思ったが、とりあえずスルー。
なぜ作ろうと思ったか
iPadでWordPressの記事を書こうとしたときのこと。
仮想キーボードを打つのが面倒なので、音声入力を試してみた。WordPressの入力には驚くほど使えない。物理キーボードがないと記事投稿は厳しい。
そこで、音声入力で快適に記事を書けるように自作してしまおう、というのがきっかけです。
誰のため
iPhoneやiPadで、音声入力を使って、記事やドキュメントの全体の構成を作りたい人向け。
何ができるのか
実際にできることは超シンプル。
- 音声入力を使ったテキスト入力（もともとのブラウザの機能）
- 段落ごとの入力
- 入力した全体のコピー
検討した結果、見送ったこと
- 入力データのWordPress投稿
→ WordPressに限定しまうこと、結局ドラフトレベルなのでコピペで十分と判断。また投稿までできてしまうとセキュリティのケアや一般公開ができないので、重要度は低いと判断した。 - 保存、呼び出し機能
→ 正直、これはあったほうがいいな、とは思っているが、実際に使い続けるなかで判断しようとミニマム要件から除外した。 - 他デバイス、他ブラウザでの実装
→ Web Speech API を使ってPCからでも利用できたりしようと思ったが、PCならキーボード使うし、実際の利用シーンはiPhoneかiPadだけなので、ターゲットデバイス・ブラウザは最小限に限定した。
こだわったのは「使いやすさ」
基本的にはWordPressの投稿画面と同じ仕様にしている（良いところの動きは踏襲しようとしたら、結構実装するのに時間がかかってしまった…）。
- テキストエリアの枠は非表示
→段落ごとにテキストエリアを表示しているが、枠がないことで可読性が向上し、全体が確認しやすくなる。 - テキストエリアの自動高さ調整
→ テキストエリアごとにスクロールが発生せず、適切な高さになるように設定する。 - 改行を2回打つと、次の段落に新規段落を追加
→ テキストエリアの途中で改行2回打った場合にもケアする。 - 段落のマージ
→ 段落の最初でバックスペースを押すと、その前の段落にマージする。 - 段落の上下移動
→ 段落を上下移動できることで、全体の構成を把握しやすくなる。 - 段落ごとに削除ボタン、上下ボタンを常時表示する
→ 使いやすさ重視。より全体を把握しやすいように、プレビューも用意している。プレビュー時には段落ごとの各ボタンは表示しない - タブバーは下部ではなく上部に設置
→ 下から仮想キーボードが表示されるシーンが多いため、上部におくことで全体を把握しやすくしている。
最後に
あとは実際に使いながら、使う頻度と調整しつつ改善していこうと思う。
ご意見やご要望などありましたら、お気軽にコメントください。