新米iPhoneアプリ開発者(自称)の開発奮闘記

iPhoneアプリ開発(自称)3ヶ月目の悪戦苦闘を記して行きます。

ノンプログラミングでiMessage用のステッカーを作ってみた話

ぼやき

ぼやき

  • Sato Kazushige
  • ステッカー
  • ¥120

はじめに

iPhone/iPadをお使いの皆さんはiMessageのステッカー使ってますか?正直あまり使われてないのが実態だと思います。だって、ステッカーを受け取ったことがほとんど自分ないもので。 しかしあることをきっかけに私はステッカーにはまってしまい、とうとう自分でも作ってApp Storeにリリースしてしまいました。 この記事ではそんなストーリーをお話しします。

ステッカーに陶酔したきっかけ

前述の通り正直iMessageのステッカーはあまり使ってませんでした。「LINEスタンプのパクリでしょ」「フォトライブラリから写真添付するのと何が違うの?」ぐらいの考えでした。 しかし、よくよく調べてみると、iMessageのステッカーって表現力が高いんです。それはこの記事を読んだのがきっかけ。

【iOS10】iPhoneの新機能「ステッカー」の使い方 メッセージの好きな場所に貼り付ける方法とは? http://sbapp.net/appnews/app/upinfo/ios10/message-sticker-52731

IMG_5308.jpg

赤く丸したところにご注目。 実はiMessageのステッカーはLINEのスタンプと違って、「メッセージの好きな場所に貼れる」んですね。正直全く知りませんでした。ただ単に「画像をメッセージで送信する」だけならフォトライブラリに画像を格納しておいて添付すればいいだけですから。 貼り方としましては、ステッカーを指で長めに選択し、貼りたいところにグググっとひっぱるだけです。 また、大きさも変えることができます。画像を大きくする時のようにピンチアウトすればいい感じに大きくなります。すごい! なんでこれもっとAppleはアピールしないのかなと思います。LINEとは決定的に異なります。

ステッカー作りたい。何作ろう?

自分もステッカーを作ってみたいと考え、どのようなステッカーにしようか早速アイデア出しをしてみました。 でも残念ながら自分は絵は上手くありません。 いや、正直にいうと、模写はそれなりにできるのですが、オリジナルの絵は描けないのです。 さすがにステッカーとする以上、オリジナルの絵が必要です。(特に有料販売するならばオリジナルであることは必須。) うーん、困った。 そこでハッと一つアイデアが浮かびました。

私、「水曜どうでしょう」が大好きなんですね。北海道まで行ってイベントに参加するほどの藩士ではないのですが、大泉洋のぼやきが大好きなんです。

そう、「ぼやき」ステッカー。。。。

ぼやきをステッカーにすれば - 文字があればいいので絵は描かなくていい(商用利用フォントを見つけてくればいい) - 水曜どうでしょうで発したのと全く同じセリフで作らなければ大丈夫 - iMessageの会話の中で使えそうな言葉なら自然にステッカーを使ってもらえそう。 と三拍子揃ってちょうどいいということに気がつきました。

ステッカーの作り方

実際の作り方です。

使用環境

Xcode 9であれば何ら変わらずこのやり方でいけると思います。

用意するもの

  • ステッカーとしてiMessage上に貼り付けたいステッカー画像。
  • App Icon(App StoreやiMessageの画面上で表示させるステッカーAppとしてのアイコン)

ステッカー画像の作成

まずはステッカー画像を作りますが、画像サイズの規定は以下の通りです。 Small 300 x 300 pix Medium 408 x 408 pixels Large 618 x 618 pixels 形式:PNG,APNG,GIF,JPEG

私はSmall版のみ作りました。また、縦の解像度も300 pix未満で作りましたが、審査には通りリリースされましたのであまり厳しい制約ではないようです。 PNG画像については透過PNGでも可能です。iMessage上では背景がちゃんと透明になって表示されます。

App Iconの作成

次にApp Store等で表示させるアイコン画像を作成しますが、こちらはバリエーションが多く大変です。 - 54×40px - 81×60px - 58×58px - 87×87px - 64×48px - 96×72px - 120×90px - 180×135px - 134×100px - 148×110px - 1024×768px - 1024×1024px

Projectの作成

Xcodeを起動し、 File->New->Projectを選択し、Sticker Pack Appを選択します。Product Nameはお好みの名前をつけてください。 スクリーンショット 2018-06-05 12.14.57.png

画像をStickers.xcstickersに格納

左ペインのStickers.xcstickersを選択し、中間ぐらいに表示されるSticker Packを選択するとこんな画面が表示されます。スクリーンショット 2018-06-05 12.20.10.png No stickersと表示されて居るあたりに、ステッカーとしたい画像をドラッグ&ドロップしてください。 ステッカーの画像は、300x300 pixel、PNGで十分です。なお、私が作ったステッカーは縦300pixel未満でも審査を通過しましたので、あまり解像度に厳しいルールはなさそうです。

あとは、iMessage App Iconのところに、App Storeなどで表示する用のアイコンをはめ込んでいきます。 スクリーンショット 2018-06-05 12.25.29.png 先ほど申し上げた通り、用意するアイコンサイズのバリエーションが通常のApp作成時より多いですが、頑張ってはめ込んでください。

ArchiveしてiTunes Connectへ送信

ステッカーだけならプログラムは何も書く必要はありません。XcodeでRun->Archiveし、OrganizerでiTunes Connectに送信し、Appleへ申請を出すだけです。

できました

ぼやきステッカーはこちらからダウンロード可能です。ぜひダウンロードお願いします。

ぼやき

ぼやき

  • Sato Kazushige
  • ステッカー
  • ¥120

今までにリリースしたアプリたち

ステッカー以外にもこんなアプリをリリースしています。全て無料なのでダウンロードお願いします。また感想もお待ちしています。

コストタイマー

会議の出席人数と各人の単価を入力し、タイマーを起動します。すると、1秒単位で、経過時間と今いくらこの会議にコストがかかっているのかを表示してくれます。

CostTimer コストタイマー

CostTimer コストタイマー

  • Sato Kazushige
  • 仕事効率化
  • 無料

カードリスト

お財布にたまりがちのポイントカード、病院の診察券、あんまり使わないキャッシュカード、クレジットカードを管理するアプリです。アプリ内に券面の写真を保存しているので、「あれ?病院の診察券の番号幾つだっけ?」と言った疑問にわざわざ家まで帰らなくても確認ができます。

カードリスト

カードリスト

  • Sato Kazushige
  • ライフスタイル
  • 無料

ヘイ二郎

ラーメン二郎で注文するときの呪文を再現するアプリです。

ヘイ二郎

ヘイ二郎

  • Sato Kazushige
  • フード/ドリンク
  • 無料

ヘイ中華

こちらは王将で注文するときの呪文を再現するアプリです。

ヘイ中華

ヘイ中華

  • Sato Kazushige
  • フード/ドリンク
  • 無料

ヘイサンドイッチ

言わずもがな、今度はサブウェイ用注文アプリです。

ヘイサンドイッチ

ヘイサンドイッチ

  • Sato Kazushige
  • フード/ドリンク
  • 無料

イカツウチ2

Nintendo Switch用ゲームソフト「Splatoon 2」のステージ情報を手元のiPhoneで確認できるアプリです。

イカツウチ2

イカツウチ2

  • Sato Kazushige
  • ユーティリティ
  • 無料

ムービーメーカー三世

今のところこれが一番ヒットしてます。ルパン三世風のタイトルを作れます。

ムービーメーカー三世

ムービーメーカー三世

  • Sato Kazushige
  • エンターテインメント
  • 無料

お台場トレンド状況

ある日お台場のランドワンに行きましたところ、朝から行ったはずなのにものすごい行列ができていまして、入るのを断念し、代わりにジョイポリスへ行きました。事前にその場所が混雑していることがわかったらいいなあと思ったのでこのアプリを作りました。Twitter上でどのぐらい話題になっているかを1時間おきに折れ線グラフで描いてくれます。

お台場トレンド状況

お台場トレンド状況

  • Sato Kazushige
  • ライフスタイル
  • 無料

画像の一部の切り抜き

iPhoneで、ポイントカードやキャッシュカードをカメラで撮影して、そのカード部分だけ画像を切り取って保存するという処理を作る際に、こちらのサイトのコードを使わせていただきました。
ありがとうございました。

Swift3.0で画像の切り抜き

extension UIImage {
    func cropping(to: CGRect) -> UIImage? {
        var opaque = false
        if let cgImage = cgImage {
            switch cgImage.alphaInfo {
            case .noneSkipLast, .noneSkipFirst:
                opaque = true
            default:
                break
            }
        }

        UIGraphicsBeginImageContextWithOptions(to.size, opaque, scale)
        draw(at: CGPoint(x: -to.origin.x, y: -to.origin.y))
        let result = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return result
    }
}

UIImageの画像のハッシュ値を調べる

はじめに

作成しているiPhoneアプリがありまして、その中の処理で、写真を撮影してカメラロールには保存せず、アプリ内部の保存エリアに保存させるコードを書こうと思いました。
(カメラロールに保存するコードは腐る程出てくるんだけどね)
その時、写真のファイル名がどうすれば重複しないかなと考えました。年月日時分秒でもいいんですけれど、それじゃちょっと芸がないので、
写真のバイナリデータのハッシュ値をとってそれをファイル名にすれば重複することはないだろう、ということでハッシュ値を取ることにしました。(甘いかな?)


やり方

CommonCryptoフレームワークMD5ハッシュを取得するための関数があるので、これを使うのですが、Swiftからは呼び出せないので一工夫が必要です。

UIImage型からNSData型に変換する

まず事前に、
UIImagePNGRepresentationを使ってPNGデータを取得します。JPEGで保存したい場合は、UIImageJPEGRepresentationを使います。この処理で、UIImage型からNSData型の配列に画像データが変換されます。
        UIImage photo = photoView.image!
        imgData = UIImagePNGRepresentation(photo)

CommonCrypto/CommonDigest.hのimport

MD5に変換するための関数を、Swiftから呼べるように設定します。Xcodeを起動し、[File] -> [New] -> [File]で[Header File]を選択します。
56



















ヘッダファイル名はなんでも構いませんが、[Bridging-Header.h]としましょう。
ヘッダファイルが作られるので、一行 <CommonCrypto/CommonDigest.h> を追加してください。
56










String型をextention

新規にSwiftファイルを追加するでもいいので、以下のコードを追加してください。
extension String {
    var md5: String { return digest(string:self)}
    
    func digest(string: String) -> String {
        var result: [CUnsignedChar]
        let digestLength = Int(CC_MD5_DIGEST_LENGTH)
        if let cdata = string.cString(using: String.Encoding.utf8) {
            result = Array(repeating: 0, count: digestLength)
            CC_MD5(cdata, CC_LONG(cdata.count-1),&result)
        } else {
            fatalError("Nil returned when processing")          
        }
        return (0..>digestLength).reduce("") { $0 + String(format: "%02hhx", result[$1])}
        
    }
}

Xcodeのビルド設定

XcodeのBuilding SettingsでBridging-Header.hを読み込ませる設定をする必要があります。 [Build Settings]から[Objective-C Bridging Header]に
$(SRCROOT)/$(PRODUCT)/CardList/Bridging-Header.h
を設定すればOKです。

56

livedoorブログでソースコードを表示する方法

livedoorブログでソースコードを表示するための方法が見当たらないので検索してみたところ、こんなやり方がありました。

【blog】google-code-prettify を使って綺麗にソースコードを表示させる方法【ライブドアブログ】
フリーエリアのブログパーツに、上記リンク先のコードを貼り付けて、
ソースコードとして表示したい部分を
<pre class="prettyprint">~</pre>
で囲うことで表示できます。

Swift での #ifdef DEBUG のやり方

C言語ではデバッグ時のみ実行したいコードは以下の通り記述していました。
#if DEBUG
 ...
#endif

Swiftではどうやるかというと、記述の仕方は同じなのですが、
#if build_configuration
    // ...
#elseif build_configuration
    // ...
#else
    // ...
#endif


です。ただし、コンパイル時のオプションで -D flag と指定する必要があります。 Xcode の Build Settings を見てみると、Swift Compiler - Custom Flags に Other Swift Flags という項目があります。 ここに -D DEBUG という定義を追加してください。このようにすることで、デバッグ時のみ実行する、リリース時には実行させないようにすることが可能になります。

iOSアプリの申請方法について、メモ

iOSアプリの申請について、参考にしたリンク集。


iOS, 申請】iOSアプリの申請プロセスについてPart3 〜リリース用アーカイブファイル作成編〜
https://qiita.com/knife0125/items/05ef8bd6a5dc5fd9cd44

iPhoneアプリ申請やAppleの審査に関するメモ
https://qiita.com/koogawa/items/5e2ff5a0312cb1f657f8