ノンプログラミングでiMessage用のステッカーを作ってみた話
はじめに
iPhone/iPadをお使いの皆さんはiMessageのステッカー使ってますか?正直あまり使われてないのが実態だと思います。だって、ステッカーを受け取ったことがほとんど自分ないもので。 しかしあることをきっかけに私はステッカーにはまってしまい、とうとう自分でも作ってApp Storeにリリースしてしまいました。 この記事ではそんなストーリーをお話しします。
ステッカーに陶酔したきっかけ
前述の通り正直iMessageのステッカーはあまり使ってませんでした。「LINEスタンプのパクリでしょ」「フォトライブラリから写真添付するのと何が違うの?」ぐらいの考えでした。 しかし、よくよく調べてみると、iMessageのステッカーって表現力が高いんです。それはこの記事を読んだのがきっかけ。
【iOS10】iPhoneの新機能「ステッカー」の使い方 メッセージの好きな場所に貼り付ける方法とは? http://sbapp.net/appnews/app/upinfo/ios10/message-sticker-52731
赤く丸したところにご注目。 実は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はお好みの名前をつけてください。
画像をStickers.xcstickersに格納
左ペインのStickers.xcstickersを選択し、中間ぐらいに表示されるSticker Packを選択するとこんな画面が表示されます。 No stickersと表示されて居るあたりに、ステッカーとしたい画像をドラッグ&ドロップしてください。 ステッカーの画像は、300x300 pixel、PNGで十分です。なお、私が作ったステッカーは縦300pixel未満でも審査を通過しましたので、あまり解像度に厳しいルールはなさそうです。
あとは、iMessage App Iconのところに、App Storeなどで表示する用のアイコンをはめ込んでいきます。 先ほど申し上げた通り、用意するアイコンサイズのバリエーションが通常のApp作成時より多いですが、頑張ってはめ込んでください。
ArchiveしてiTunes Connectへ送信
ステッカーだけならプログラムは何も書く必要はありません。XcodeでRun->Archiveし、OrganizerでiTunes Connectに送信し、Appleへ申請を出すだけです。
できました
ぼやきステッカーはこちらからダウンロード可能です。ぜひダウンロードお願いします。
今までにリリースしたアプリたち
ステッカー以外にもこんなアプリをリリースしています。全て無料なのでダウンロードお願いします。また感想もお待ちしています。
コストタイマー
会議の出席人数と各人の単価を入力し、タイマーを起動します。すると、1秒単位で、経過時間と今いくらこの会議にコストがかかっているのかを表示してくれます。
カードリスト
お財布にたまりがちのポイントカード、病院の診察券、あんまり使わないキャッシュカード、クレジットカードを管理するアプリです。アプリ内に券面の写真を保存しているので、「あれ?病院の診察券の番号幾つだっけ?」と言った疑問にわざわざ家まで帰らなくても確認ができます。
ヘイ二郎
ラーメン二郎で注文するときの呪文を再現するアプリです。
ヘイ中華
こちらは王将で注文するときの呪文を再現するアプリです。
ヘイサンドイッチ
言わずもがな、今度はサブウェイ用注文アプリです。
イカツウチ2
Nintendo Switch用ゲームソフト「Splatoon 2」のステージ情報を手元のiPhoneで確認できるアプリです。
ムービーメーカー三世
今のところこれが一番ヒットしてます。ルパン三世風のタイトルを作れます。
お台場トレンド状況
ある日お台場のランドワンに行きましたところ、朝から行ったはずなのにものすごい行列ができていまして、入るのを断念し、代わりにジョイポリスへ行きました。事前にその場所が混雑していることがわかったらいいなあと思ったのでこのアプリを作りました。Twitter上でどのぐらい話題になっているかを1時間おきに折れ線グラフで描いてくれます。
画像の一部の切り抜き
ありがとうございました。
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]を選択します。ヘッダファイル名はなんでも構いませんが、[Bridging-Header.h]としましょう。
ヘッダファイルが作られるので、一行 <CommonCrypto/CommonDigest.h> を追加してください。
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です。
livedoorブログでソースコードを表示する方法
【blog】google-code-prettify を使って綺麗にソースコードを表示させる方法【ライブドアブログ】
フリーエリアのブログパーツに、上記リンク先のコードを貼り付けて、
ソースコードとして表示したい部分を
<pre class="prettyprint">~</pre>
で囲うことで表示できます。
Swift での #ifdef DEBUG のやり方
#if DEBUG ... #endifSwiftではどうやるかというと、記述の仕方は同じなのですが、
#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アプリの申請プロセスについてPart3 〜リリース用アーカイブファイル作成編〜
https://qiita.com/knife0125/items/05ef8bd6a5dc5fd9cd44
iPhoneアプリ申請やAppleの審査に関するメモ
https://qiita.com/koogawa/items/5e2ff5a0312cb1f657f8