Swift Playgroundsで学ぶiOSプログラミング

ジェスチャーと最小限のビューコントローラーでブラウザーアプリを強化

文●柴田文彦 編集●吉田ヒロ

2017年03月13日 17時00分

画面にアラートを表示する

 はじめに、今回新たに登場したアラートについて見ていきましょう。入力機能付きのアラートを扱うには、それを表示するだけでなく、ユーザーの入力に対して応答し、ユーザーが入力した情報(今回はURLを表す文字列)を読み込む処理が必要となります。

 まずは単純なアラートを表示するコードを書いてみます。アラートは、何もないところからポップアップしてくるように見えるのが特徴ですが、実際にはそんなことはありません。必ずどれかのビューコントローラーに属しているのです。そこで、アラートを表示するためのコードもビューコントローラーの中に書くことになります。

 いつものように最小限のビューコントローラーを用意して、その中でアラートを表示してみましょう。とりあえず、ビューコントローラーが最初にビューを表示するloadViewメソッドの中で、メインのビューの作成と同時に表示してしまいます。以下に、アラートに関する部分のコードだけを抜き出して示します。

let pgAlert = UIAlertController(title: "アラート", message: "いきなり表示してみた。", preferredStyle: .alert)
self.present(pgAlert, animated: true, completion: nil)

 実質的にこの2行だけで表示できます。1行目でアラートコントローラーのオブジェクトを作成し、2行目でそれを画面に表示しているのです。

 1行目では、タイトルに「アラート」、メッセージに「いきなり表示してみた。」という文字列を指定し、スタイルとして「.alert」を設定しています。このスタイルには、ほかにアクションシート(.actionSheet)も指定可能ですが、今回のアラートではもちろん「.alert」です。

 2行目のpresentというメソッドは、その前にselfが付いているので、ビューコントローラー(UIViewController)に含まれるものだとわかります。このメソッドは、最初の引数で指定したビューコントローラー(この場合はアラートコントローラー)を表示するものです。その際、animatedに「true」を指定すれば、アニメーション付きで表示します。3番目の引数のcompletionは、アラートが表示し終わったときに実行するメソッドを指定するものですが、この場合は何も実行すべきものがないので、nilを指定しています。

 これをビューコントローラーの中に組み込んでSwift Playgroundsのグラフィック画面に表示するようにしたコード全体と、その実行結果は画面で確認しましょう。

ビューコントローラーの中で作成したデフォルトのビュー(背景は黒)の上に、タイトルとメッセージを指定しただけのシンプルなアラートを表示しました

 デフォルトの真っ黒なビューの上に、タイトルとメッセージを指定しただけのアラートが表示されました。しかし、これだけでは何も操作することができません。アラートを閉じることすらできないのです。

文字列を入力できるようにアラートをアップグレードする

 表示したアラート上でURLを入力できるようにするには、まずURLをタイプするテキストフィールドが必要です。これをアラートに追加するのは驚くほど簡単です。単にアラートコントローラーのaddTextFieldメソッドを実行すればいいのです。

 次に、ユーザーが入力したURLの文字列をプログラムに読み込むには、なんらかのボタンを付けることが必要です。ユーザーがそれをタップすると、アラートを閉じると同時に、その文字列を読み込んで処理するためです。実は、それもアラートコントローラーのaddActionというメソッド1つで実現できます。

 アラートにテキストフィールドとボタンを加え、入力された文字列を読み込むための2行を以下に示します。

pgAlert.addTextField()
pgAlert.addAction(UIAlertAction(title: "OK", style: .default, handler: { [weak pgAlert] (_) in
let pgTextField = pgAlert?.textFields?[0]
print(pgTextField!.text!)
}))

 Swift 3.0特有の文法に戸惑うこともあるかもしれませんが、現時点ではそれらは気にせず、大きなポイントだけを押さえましょう。ここではテキストフィールドを加えたあと、さらに「OK」ボタンを配置し、それがタップされた場合のハンドラーを定義しています。その中では、アラート上のテキストフィールドの配列の最初の要素を取り出し、その中のテキストをprintしています。アラートには複数のテキスフィールドを配置できるわけですが今回は1つだけで、それは0番目の要素ということになります。

 上のコードを、ビューコントローラーの中に組み込んだものは、画面で確認してください。

アラートにテキストフィールドと「OK」ボタンを追加し、ボタンをタップするとテキストフィールドに入力した文字列を読み込んでソースコードの右端に表示するプログラム全体です

 このプログラムを動かすと、テキストフィールドと、「OK」ボタンを備えたアラートが表示されます。

上のプログラムを実行すると、今度は空のテキスフィールドと「OK」ボタンを備えたアラートが表示されるはずです

 しかし、ここで困ったことが起こります。テキスフィールドに文字列を入力しようとしてタップすると、キーボードが表示されるのはいいのですが、そのためにアラートを含む画面が上に押しやられて、テキスフィールドが見えなくなってしまうのです。こんなときは、iPadを縦に持ってポートレート画面にしましょう。これでテキスフィールドを見ながらキーボードで文字列が入力できます。

テキスフィールドに文字列を入力する際には、iPadを縦に持ってポートレートモードにしないと全体が表示されません

 入力した文字列は、実行後にprintコマンドのコードの右側に表示される「abc」というボタンをタップすることで確認できます。

テキスフィールドに入力した文字列は、ボタンをタップしたあと、コードの右端に表示される「abc」ボタンをタップすることで確認できます

 これで、文字列を入力可能なダイアログを表示して、その文字列を受け取ることができるようになりました。

アラートで入力したURLをウェブビューで開く

 これで今回の目的のために必要な要素がすべて揃いました。あとは、それを1つにまとめるだけです。

 今回は、長押しのジェスチャー(UILongPressGestureRecognizer)を使ってアラートを表示することにします。ただし、1本指の長押しは、ウェブビューで文字列を選択するために利用されているので、ここでは2本指で長押しすることにします。

 アラートに表示する文言はURLを入力するために変更します。追加したテキスフィールドには、あらかじめ「http://」という文字列を入力しておいて、URL入力の手間を軽減することにしましょう。

 コード全体は、画面で確認してください。これまでに説明したことの組み合わせなので、細かな説明は省きます。1つだけ上の例と違うのは、アラートから取得したURLの文字列の使い方です。ここでは、もちろん単にプリントするのではなくURLオブジェクトに変換し、さらにリクエストに変換してからウェブビューのloadメソッドで読み込んでいます。

2本指による長押しで、URL入力用のアラートを表示して任意のページを開くことを可能にしたウェブブラウザーの前半にあたる、ジェスチャーの定義部分です。前回と同じ2本指スワイプを検出する機能も含んでいます

今回のプログラムの後半部分、2本指による長押しの結果を処理する部分です。テキスフィールドとボタン付きのアラートを表示し、読み込んだURLのページをウェブビューで開いています。なお前回説明した「戻る」部分のコードは省いています

 実行結果も画面で確認してください。

今回のプログラムの実行結果です。表示されたウェブページの上を2本指で長押しすると、URL入力用のアラートが表示されるので、あらかじめ入力されている「http://」に続けて目的のURLを入力し、「Go」ボタンをタップすれば、そのページを開くことができますす

 これで、2本指による画面の長押しでアラートが開き、そこに入力したURLのページにジャンプできるようになりました。もちろん、2本指による左スワイプで元のページに戻ることも可能です。

次回の予定

 今回までで、なんとか使えるウェブブラウザーができました。もちろん、これにもっと機能を追加していくことも可能ですが、ウェブビューについては、ここで一区切りとします。次回からは、また少し地味な内容に戻りますが、iOSアプリで多用されているテーブルビューをSwift Playgroundsで実現する方法を探求していく予定です。

mobileASCII.jp TOPページへ

mobile ASCII

Access Rankingアクセスランキング