iOSでプログラムからスクリーンショットを撮影する方法｜Swiftでの実装手順を解説

iOSでプログラムからスクリーンショットを撮影する方法

この記事では、iOSアプリの中でコードからスクリーンショット（画面キャプチャ）を撮影する方法を解説します。

サンプルとして、UITextField・UIButton・UIImageViewを1つずつ配置した画面を作成します。テキストフィールドの値を変更し、ボタンをタップすると画面がキャプチャされ、その画像がボタンの直下に設置したUIImageViewに表示されるという流れです。

なお、このキャプチャ処理はロングプレスなど他のジェスチャーにも組み込むことができますし、撮影した画像を端末に保存することも可能です。本記事では、まずシンプルに「キャプチャしてImageViewに表示する」部分に絞って説明していきます。

それでは始めましょう。

Step 1：プロジェクトの作成

Xcodeを開き、「New Project」→「Single View Application」を選択します。プロジェクト名は「TakeScreenShot」と付けましょう。

Step 2：StoryboardにUI部品を配置

Main.storyboardを開き、下図のようにUITextField・UIButton・UIImageViewを1つずつ配置します。

Step 3：IBOutletの接続

UIImageViewに対して@IBOutletを作成し、「snapShotImageView」という名前を付けます。ここがキャプチャした画像を表示するためのビューになります。

Step 4：IBActionの作成

「Take Snap Shot」ボタンのtouchUpInsideイベントに対して@IBActionを作成します。関数名は「takeSnapShotClicked」としてください。

Step 5：ImageViewに枠線を設定

ViewControllerクラスのviewDidLoadで、ImageViewに枠線の色と太さを設定しておきます。これにより、キャプチャ結果が表示される領域が画面上の他の部分と区別しやすくなります。

self.snapShotImageView.layer.borderColor = UIColor.red.cgColor
self.snapShotImageView.layer.borderWidth = 2.0

Step 6：スクリーンショットを撮影するコードを実装

キャプチャ処理では、以下の手順で画面を撮影します。

• グラフィックスコンテキストを開始する
• 現在のコンテキストを変数に取得する
• コンテキストに対して、現在表示中のビューのレイヤーを描画（レンダリング）する
• コンテキスト変数からUIImageを取得する（この時点のコンテキストには、ビューに表示されているすべての内容が含まれています）
• 取得した画像をImageViewにセットする
• グラフィックスコンテキストを終了する

これらの処理をすべてtakeSnapShotClickedメソッド内に記述すると、コードは次のようになります。

@IBAction func takeSnapShotClicked(_ sender: Any) {
    UIGraphicsBeginImageContextWithOptions(self.view.layer.frame.size, false, UIScreen.main.scale)
    guard let context = UIGraphicsGetCurrentContext() else { return }
    self.view.layer.render(in: context)
    self.snapShotImageView.image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
}

Step 7：ビルドして動作確認

プロジェクトをビルドして実行し、「Take Snap Shot」ボタンをタップしてみてください。下部のImageViewにスクリーンショットが表示されれば成功です。

たった数行のコードで画面キャプチャ機能を実装できました。応用すれば、撮影した画像の保存や共有機能への拡張も簡単に行えるので、ぜひ色々と試してみてください。