読者です 読者をやめる 読者になる 読者になる

WonderPlanet DEVELOPER BLOG

ワンダープラネットの開発者ブログです。モバイルゲーム開発情報を発信。

Apple Watchで文字入力をするには

エンジニアブログ担当の近藤です

今回はApple Watchでの文字入力をする部分の実装をしてみます。
Apple Watchには画面が小さくて全部のアルファベットを表示することができないので、キーボードがありません。
そこで、文字入力をするには以下の方法を取ります。

  • あらかじめいくつかの定型文を作成して選択する
  • 音声で入力

では、実装方法を紹介します。

プロジェクト作成

最新のXcodeのバージョン7ではWatchKitアプリのプロジェクトの作成方法が変わっています。

  • メニューから「File」->「New」->「Project」を選択します

  • 最初の「iOS App with WatchKit App」を選択します

  • project
  • 次の画面でいつもどおりproject nameなど、プロジェクトの設定をします

  • これでプロジェクトの作成は終わり。
    以前のバージョンではプロジェクト作成後にWatchKit用のターゲットを追加する必要がありましたが、簡単になりましたね。

    storyboardで部品を配置

    音声入力の画面を立ち上げるボタンと、入力した文字を表示するラベルを配置します。
    storyboard

    ボタンはIBActionで「textInput」メソッドを呼び出すように設定します。
    ラベルはIBOutletで「textLabel」という変数名でコード側から操作できるようにしておきましょう。
    outlet

    文字入力の画面を呼び出す

    音声入力の画面は「presentTextInputControllerWithSuggestions」メソッドで呼び出します。
    先ほど作った「textInput」メソッドに下記のように追記してみましょう。

        NSArray* suggestions = @[@"こんにちは",@"ハロー",@"グーテンモルゲン"];  
          
        [self presentTextInputControllerWithSuggestions:suggestions  
                                       allowedInputMode:WKTextInputModeAllowEmoji  
                                             completion:^(NSArray *results){  
                                                 if (results && results.count > 0) {  
                                                     //入力した文字の取り出し  
                                                     id text = [results objectAtIndex:0];  
                                                     //入力した文字列をラベルに表示  
                                                     [_textLabel setText:(NSString*)text];  
                                                 }  
                                             }  
         ];  
    

    引数

    【一個目の引数】
    1個目の引数にはNSArrayで定型文を3つ渡しています。
    これで3つのボタンが表示され、押したボタンの文字がラベルに表示されます。

    【allowedInputMode:】
    2番目の引数で、文字入力の画面のモードを選択します。

    ・WKTextInputModeAllowAnimatedEmoji
    アニメーション画像、絵文字、音声入力で文字入力ができます。
    絵文字のボタンを押すと、静止画なのでアニメーションする様子がわかりませんが、わかりませんがアニメーション画像を選択する画面が出てきます。
    (※アニメーション画像はラベルには表示できないようです)
    emoji1 animationemoji

    ・WKTextInputModeAllowEmoji
    絵文字、音声入力で文字入力ができます。
    絵文字のボタンを押すと絵文字を選択する画面が出てきます。
    emoji1 emoji2

    ・WKTextInputModePlain
    音声入力で文字入力ができます。
    マイクボタンを押すと音声入力ができます。
    plain1 voice

    【completion:】
    このブロックで入力した文字を受け取り、その後の動作を記述していきます。
    今回はここでラベルに表示する文字列を書き換えています。

    実行

    定型文のボタンを押すと、選択した定型文がラベルに表示されます。
    run3

    絵文字を選択するすると、ちゃんと絵文字でもラベルに表示されました。
    run2

    音声入力はシミュレーターでは動作しないので実機で試してみましょう。
    音声入力モードの時にApple Watchに向かって恥ずかしがらずに喋りかけましょう。
    音声入力した言葉がラベルに表示されます。
    run4

    このようにApple Watchでは文字の入力が行えます。
    たとえば音声操作によりアプリを操作して、iPhone側のカメラアプリを立ち上げたりするなど、遠隔操作っぽいことも可能になります。
    使い方次第で面白いことがいろいろできるのではないでしょうか?

    次回、僕にブログの担当がまわってくる頃にはwatchOS 2がリリースされていると思いますので、また新機能を紹介できればいいなぁと思っています。