ブログ

stage24: 画像をtwitterに上げる

ようやくここまできた。ときはすでにクリスマスイブ。さっそく実装を進めていこう。

swifterに連携する

これまでの実装でほとんどパーツは揃っているはず。投稿すべき画像は手元にあり、コード上で扱うことができ、twitterへ投稿するためのライブラリも導入済み。ということでswifterを使って投稿する改修を入れる。

// ImageView

+import Prephirences
+import SwifteriOS
+import Keys

...

+    let keychain = KeychainPreferences.sharedInstance
+    let watariKeys: WatariKeys = WatariKeys()

...

+                    if let credential = self.keychain.dictionary(forKey: "twitter"),
+                        let oauthToken = credential["accessToken"] as? String,
+                        let oauthTokenSecret = credential["secret"] as? String {
+                        let swifter = Swifter(consumerKey: self.watariKeys.tWITTER_CONSUMER_KEY,
+                                              consumerSecret: self.watariKeys.tWITTER_CONSUMER_SECRET,
+                                              oauthToken: oauthToken,
+                                              oauthTokenSecret: oauthTokenSecret)
+                        swifter.postTweet(status: "テスト投稿 from アドベントカレンダー", media: image.pngData()!, success: { _ in
+                            print("succeeded.")
+                        }, failure: { error in
+                            print("failed.")
+                            print(error)
+                        })
+                    }

実装本体はsave imageのところに入れる。

実行！

してみたところ。

SwifterError(message: "HTTP Status 413: Payload Too Large, Response とのこと。

調べてみると、

https://developer.twitter.com/en/docs/media/upload-media/uploading-media/media-best-practices

にある通り Image size <= 5 MB, animated GIF size <= 15 MB なので5MB以下じゃないといけないらしい。リサイズしないと。

リサイズ

let canvas = CGSize(width: 300, height: CGFloat(ceil(300/image.size.width * image.size.height)))
let resized = UIGraphicsImageRenderer(size: canvas, format: image.imageRendererFormat).image {
    _ in image.draw(in: CGRect(origin: .zero, size: canvas))
}

これで大丈夫なはず。（適当に300pxに縮小）

結果

post部分を以下のように修正して、

swifter.postTweet(status: "テスト投稿 from アドベントカレンダー", media: resized.pngData()!, success: { _ in
    print("succeeded.")
}, failure: { error in
    print("failed.")
    print(error)
})

実行すると

https://twitter.com/toriumi0118/status/1209124126993965057

まとめ

明日は少し作りながら思うところもあったのでそちらを書くことにするため、今日は作ったもののまとめをしていこう。

今回のテーマは「プロダクト開発」だった

課題感の模索、課題の選択と集中、解決した状態の妄想、解決策の構想、実現方法の選定、機能リストのリストアップ、目標数値の決定、環境構築、実装、開発環境整備
を行ってきた。

企業だともっと複雑なフローになるだろうし、一つ一つに様々なレイヤーの人が参加していて意思決定も一朝一夕というわけにはいかない。それぞれ考える軸が異なるし、頭の切り替えも必要だ。得意不得意もある。

プロダクトを作り切るということ

今回は「自分の課題（っぽいもの）」を解決するために実装に着手した。当初は全然間に合うであろうと未来の自分に期待していたのが、そんなこともなく旅行先にも全く間に合わず・・・ではあったが、やはり継続して開発するというのは必要なことだ。千里の道も一歩から。ぜんぜん未達だけど自分の問題が解決する製品が完成するまで地道にこのプロダクトをコーディングしていくしかない。

プロダクトを作りきるというのはとてもカロリーを使うことで、自分が諦めた時がプロダクトの終了する時になる。一方で、どこまで作ればいいのか分からない、いつリリースすればいいのかも悩ましい。どこまで作ったら出せばいいのか。そんな悩みとも戦いながら少しずつでも作り上げていくための自分への発破の意味でアドベントカレンダーとした。

+アルファで必要なこと

今回話が全然できなかった内容としては、コードのクオリティとかデザイン、またマーケティング（伝える）の部分がある。サービスやプロダクトのリリース基準にはクオリティとデザインが、サービスを開発したあとはすぐにマーケティングが大きく関わってくることになるが、今回はそこまで至らなかったために特に話はしていない。ではあるがある程度以下のような話になっていくかと思う。

クオリティとデザイン

プロダクトやサービスの特性は大きく以下のような優先度になる。
機能 > デザイン > ストーリー

上位を満たせば下位のものは後からでもいい。みたいな理解をしている。要するにこの世に一つしかない機能であれば全然ダメなデザインでも、全くストーリーがなくても使ってくれる人は現れるだろう。

しかし昨今は、機能的な優位性は速攻で真似される時代になっているため、どのプロダクトもきれいな見た目（デザインをしている）ことが多い。また、macが出てきてからパソコンはどれも同じような見た目になった。SNSだってsnapchatが流行ってfacebook storyが出てきて、顔を加工するカメラだって無限にある。これくらいまでになると機能的な優位性はほぼ差異はなく、デザインはどれも綺麗で、、、となる。すると「自分が、チームが、企業が、何を想って作っているのか」が大切な要因になる。

私は判断が01になりがちではあるが、この辺りはバランスで、現状のwatariはまったく機能がない。のでまずは主機能を作る。それでまぁ適当なデザインを付けて一度出す。のが目標である。もちろん01ではないので、実装しながらもデザインの概要を考えたり、自分はなぜこんな毎日コードを書いてるのかを自問しながらストーリーを掘り下げる。

今回のアドベントカレンダーでは機能実装重視だったので

1. textの投稿機能
2. 画像の投稿機能
3. twitter連携

が出来上がったところだ。まだ全然機能的には足りていない。が、あとはwebサイトを作ってデータを連携して記事になるようにしてみようと思う。

本質的な痛みの発見・解決まではまだまだ道は長い（と思う）。しかし、自分のサービスを自分で構築して回していければとても楽しいことではないか。とも思っているので、やりながら考えながら進めていければ良い。

マーケティング

全然専門ではないので、どうしようかなと思っている部分ではある。

先日読んだ本にわかりやすく載っていたので噛み砕くと、サービスには「集客、接客、増客」というのがある。マーケティングは「集客」に当たる。こと、アプリやサービスだとデザインをどうするとか機能をどうするとかの話になりがちだが、これらは全て「接客」部分だ。路地裏にカフェをオープンしたら一番にやることは駅前でビラ配りだろう？アプリも同じだ。

ということで、きっと出来上がったら誰かに使ってもらうように頼んだり、プレス出したり、勉強会で発表したりしていくのが良いのかなぁ。投稿にサービスのURLを含めるというのもありかもしれない。

その時がきたら考えよう。

次回は

クリスマスらしい話をして締めとしよう。

stage22: 画像投稿機能

さて、テキスト投稿の機能作成してからしばらく経ってしまったが、次は画像投稿機能だ。順を追ってやっていくことにしよう。

画像の表示、写真の撮影、写真の保存、twitterへの投稿。
こんな流れでやっていこう

画像表示の方針

localにある画像を表示できるようにしよう。そういえばiPhoneのストレージへのアクセスってどこまでできるのかな。あとアプリにだけ画像を保持しているようなサービスとかあるけど、どっちの設計の方がいいんだろう。

https://gist.github.com/y-takagi/9f2cea659fb3f55b56aa04530bf0af39

https://qiita.com/tetsufe/items/9ff5fe190ee190afa1bb

https://stackoverflow.com/questions/29159432/how-to-save-photos-to-storage-within-app-rather-than-ios-camera-roll

などをみると

• CoreDataに突っ込む
• Document/に突っ込む
• フォトライブラリに突っ込む
• （クラウド上のどこかに入れる）

が打ち手としてはありそうだ。

いったんフォトライブラリから呼び出してみるか。既に自分のローカルにある画像を上げる必要もあるし。フワッとした設計だけど、

フォトライブラリ => 画像読み込み => 投稿 => アプリにデータを保存

かな。こうするとフォトライブラリから画像が削除されたとしてもアプリ内には画像を保持しておくことができる。デメリットはデータ二重になるので圧縮とかしてあげないと肥大化がやばそう。

よし、フォトライブラリから画像を読み込んで表示してみよう。

ページの追加

まず、選んだ画像をpreview的に表示するためのボタンとページを追加しよう。

Add New Fileをして、SwiftUI Viewを追加する。名前は ImageView.swift とした。

まずはこの画面がbutton tapの際に表示されるようにしよう。

// ContentView.swift

    var body: some View {
        NavigationView {
            VStack {
                List {
                    ForEach(self.entryTexts, id: \.self) {entryText in
                        VStack {
                            Text(entryText.body!)
                            Text("\(entryText.createdAt!)")
                        }
....

                                                  oauthToken: oauthToken,
                                                  oauthTokenSecret: oauthTokenSecret)
                            swifter.postTweet(status: entryText.body!, success: { _ in
                                print("succeeded.")
                            }, failure: { error in
                                print("failed.")
                                print(error)
                            })
                        }
                    })
                    NavigationLink("add image", destination: ImageView())
                    Button("twitter signin", action: {
                        self.provider.getCredentialWith(nil) { credential, error in
                            if error != nil {
                                // Handle error.
                            }
                            if credential != nil {
                                Auth.auth().signIn(with: credential!) { result, error in

....

NavtionViewとNavigationLinkを追加。遷移先を新しく作ったImageViewにする。

これで新しいViewを表示することができるようになる。

フォトライブラリへのアクセス

https://developer.apple.com/documentation/photokit/requesting_authorization_to_access_photos

info.plist の NSPhotoLibraryUsageDescription に使用用途を記載する。

+       <key>NSPhotoLibraryUsageDescription</key>
+       <string>This app uses Photo Library to make content using images you stored.</string>

で、ImageViewを以下のようにする。

import SwiftUI
import Photos

struct ImageView: View {
    @State var image: UIImage?
    @State var showImagePicker: Bool = false

    var body: some View {
        VStack {
            if image != nil {
                Image(uiImage: image!)
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: 300, height: 300, alignment: .top)
                    .clipped()
            }
            Button("pick up image", action: {
                self.showImagePicker = true
            })
        }.sheet(isPresented: $showImagePicker) {
            ImagePickerController(image: self.$image)
        }
    }
}

struct ImagePickerController: UIViewControllerRepresentable {
    @Binding var image: UIImage?

    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }

    func makeUIViewController(context: Context) -> UIImagePickerController {
        let imagePickerController = UIImagePickerController()
        imagePickerController.sourceType = .photoLibrary
        imagePickerController.delegate = context.coordinator
        return imagePickerController
    }

    func updateUIViewController(_ uiViewController: UIImagePickerController, context: Context) {

    }

    class Coordinator: NSObject, UIImagePickerControllerDelegate, UINavigationControllerDelegate {
        var parent: ImagePickerController

        init(_ imagePickerController: ImagePickerController) {
            self.parent = imagePickerController
        }

        func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey: Any]) {
            defer {
                picker.dismiss(animated: true)
            }

            guard let image = info[.originalImage] as? UIImage else {
                return
            }

            self.parent.image = image
        }

        func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
            picker.dismiss(animated: true, completion: nil)
        }
    }
}

struct ImageView_Previews: PreviewProvider {
    static var previews: some View {
        ImageView()
    }
}

これで、画像選択して表示するくらいはできそう。

実行

次回は

写真撮影を行えるようにしていこう。