#Instagramのストーリーにシェアしてみよう!#
#今回学べること#
- 日時の取得
- ViewをUIImageに変換
- インスタのストーリに画像をシェアする。
- iPhponeに特定のアプリがあるかを確認する。
#完成はこんな感じのイメージ!#
アプリ側 | Instagramのストーリー |
---|---|
ViewにImageとLabelを表示させて、そのViewをimageに変換してInstagramのストーリに渡す処理をしています。 |
#日時の取得#
今回は、表示した時に値が変更されたことを確認しやすいように日付を表示するようにしました。Labelにユーザー名等の変数を加えるとよりインスタ映えしやすいデザインになります。
ViewController.swift
@IBOutlet weak var dateLable: UILabel! //StoryboardのLabelと接続
//------------------------------------------------------
//super.viewDidLoad()の中に記述
let format = DateFormatter()
format.timeStyle = .medium
format.dateStyle = .long
format.locale = Locale(identifier: "ja_JP")
let date = Date()
dateLable.text = format.string(from: date)
#ViewをUIImageに変換#
Storyboardで作成したViewを@IBOutleを利用してViewControllerに接続しましょう!
接続したらUIViewをextensionして以下のコードを追加して変換したいタイミングでimage = の部分を呼び出してみよう。
ViewController.swift
@IBOutlet weak var screensShotView: UIView! //StoryboardのViewと接続
//------------------------------------------------------
//UIVIewのextensionとして以下のコードを追加しておきましょう。
//view.asImage()でいつでもViewをImageに変換することができます。
extension UIView {
//UIViewをUIImageに変換するコード
func asImage() -> UIImage {
let renderer = UIGraphicsImageRenderer(bounds: bounds)
return renderer.image { rendererContext in
layer.render(in: rendererContext.cgContext)
}
}
}
//view.asImage()でUIImageに変換できます。ボタンが押されるタイミングで呼び出すのが良いでしょう。
let image = screensShotView.asImage()
#インスタのストーリに画像をシェアする#
インスタグラムの詳しいスキーム一覧は、公式ドキュメントより確認してください。
ViewController.swift
private func setupOpenInstagram() {
let image = screensShotView.asImage()
let items: [[String: Any]] = [[
"com.instagram.sharedSticker.stickerImage": image,
"com.instagram.sharedSticker.backgroundTopColor": "#000000",
"com.instagram.sharedSticker.backgroundBottomColor": "#FFFFFF"
]]
UIPasteboard.general.setItems(items, options: [:])
guard let shareInstagramStoryURL = "instagram-stories://share".convertURL else { return }
UIApplication.shared.open(shareInstagramStoryURL, options: [:], completionHandler: nil)
}
素材は、イラスト屋さんの画像を利用しています。
https://www.irasutoya.com/2019/04/blog-post_34.html
特定のアプリのスキームキーがあるか確認する。
https://qiita.com/nagaoyuriko/items/67c5e262f6e88cd88885