LINEスタンプ素材からSticker Packを作った
概要
- LINEスタンプを作ったので、そのイラストを使ってSticker Packをリリースする
リンク
- Sticker Pack (無料)
環境
制作の流れ
- この動画をみるとだいたいの流れがつかめる (4:45)
ステッカー素材の修正
- LINEスタンプを、300 x 300 pxに修正
- 背景は透過のまま
素材の作成
- アイコン作成
- スクリーンショット作成 (実際の時間軸ではアプリが出来てから作成した)
管理画面から登録
- Certificates, Identifiers & Profiles の設定はiOSアプリと同様でOK
- iTunes ConnectのMy Apps登録もiOSアプリと同様でOK
- スクリーンショットはAppと同様のものをiMessage App側にも登録した
- iPad用のスクリーンショットも必要になる
Xcode
File > New > Project...から、Sticker Pack Applicationを選択Stickers.xcstickersのiMessage App Iconにアイコンを登録Stickers.xcstickersのSticker Packに- ステッカーを登録
Sticker Sizeで一覧表示されるサイズを決めるAccessibilityに代替テキストを設定 ※今回は設定していない
TARGETSのDisplay Nameにアプリ名をいれるStickerPacEXtension側が反映される- ビルドしてアップロード
iTunes Connect
- 申請
LINEスタンプをSticker Packにする場合、必要になること
その他
ステッカーについて
アイコンサイズ一覧 (名前は適当、単位: px)
- icon-27@2x.png: 54 × 40
- icon-27@3x.png: 81 × 60
- icon-29@2x.png: 58 × 58
- icon-29@3x.png: 87 × 87
- icon-32@2x.png: 64 × 48
- icon-32@3x.png: 96 × 72
- icon-60@2x.png: 120 × 90
- icon-60@3x.png: 180 × 135 ※必須
- icon-67@2x.png: 134 × 100
- icon-74@2x.png: 148 × 110
- icon-1024@3x.png: 1024 × 768 ※必須
- iTunesArtwork@2x.png: 1024 × 1024 ※iTunes Connectから登録
スクリーンショットサイズ一覧 (単位: px)
Sticker Sizeについて
- ステッカーが一覧表示される時のサイズを決める
Sticker Sizeは3種類ある。iPhone7の場合、Smallだと、横に4つ並ぶ (300 x 300 px)Mediumだと、横に3つ並ぶ (408 x 408 px)Largeだと、横に2つ並ぶ (618 x 618 px)
- ここの値を変えてもステッカーのサイズが変わるわけではない
ステッカーの大きさ
- ユーザーは大きさを変えたり、回転させたりできる
- スタンプのように使うのと貼り付けて使うのは基本同サイズ
解決できていないこと/不明点
Simulatorがエラーになる
- SimulatorでiPad RetinaとiPhone5を選んだ場合、以下のエラーが出て確認ができなかった
- iPad Retina:
Could not attach to pid : “10699” - iPhone5:
Could not attach to pid : “10849”
透過のビット数について
- PNGのSupports transparencyが8-bit transparencyとなっている部分が理解できていない
- PNG-8でもPNG-24でも透過は問題なさそう (書き出しに使ったソフト: Illustrator CC)
- PNG-24がNGってこととは違うのか？
ステッカーの最低数、最高数
- LINEスタンプは40個のみだが、Sticker Packは数の決まりがわからなかった
ローカライズ
- 多言語対応は未調査
参考サイト
雑感
- Xcodeをさわったことがないと少し戸惑うかもしれない
- LINEスタンプの素材があれば比較的かんたんにリリース出来る
Apple Pencilを使ってLINEスタンプを作った
リリースまでの流れについて
まずはLINE CREATORS MARKETに登録
- ここから登録を完了させる
スタンプ作成
使ったもの
- Apple iPad Pro 9.7インチ
- Apple Pencil
- Adobe Illustrator Draw (以下、Draw)
- Adobe Illustrator CC
(以下、CC)
- スキル: Illustratorもスタイラスペンもほぼはじめて
作成の流れ
Drawにてイラストを描く
- CCはほとんど使ったことがなく、Drawで着色まで完了させて、CC側では書き出しのみを行う予定で進めた
- スタンプ画像はだいたい以下のようなルールがある
- W 370 × H 320 (最大)
- 画像の余白(10px程度)が必要
- サイズは偶数
- 1MB以下
- 背景は透過
- 詳細は、制作ガイドラインを確認してください
- Drawはグリッド表示が可能なので、160 ptsに設定し、4マスを超えないような大きさでイラストを書いていった (下の画像は少し小さ目)
- レイヤーは『キャラクター』と『セリフ』に分けて書いた
- 最終的にセリフはCCにて作成したので、セリフ部分をレイヤー分けしたことは便利だったが、書いている途中にレイヤー違いで書き直したりしたので、これくらいだったらわざわざレイヤー分けしなくても良かったかもしれない
- Drawは『取り消し』『やり直し』や『範囲内の塗りつぶし』などタッチジェスチャーが充実しているで、おおむね気持ちよくイラストを書いていけた
- 特にDrawからボタン1つでCC上にファイルが送信できるのは便利だった
- 使いづらかった点は以下の通り
- 手のひらに誤反応して、点や線を書いてしまったり、アプリが切り替えられたりした
- オブジェクト単位でのコピーができない？ プロジェクト単位、キャンパス単位、レイヤー単位ではコピー可能
- オブジェクト単位で移動が出来ない？キャンパス上もレイヤーの移動も出来なそうだった
CCで書き出し処理を行う
- 当初の予定を変えて、セリフはCCで作成することにした
- 文字はこちらの手書き風フォントを利用させていただいた。子供が書いたような丸みを帯びたフォントがかわいい
- キャラクターに沿ってセリフを入れたかったので、以下のように進めたがもっといいやり方がありそうだった
ペンツールでキャラクターの近くにパスを書くパス上文字 (縦) ツールで文字を追加する- ファイルの書き出しはこちらのテンプレートを利用させていただいた
- Drawから受信したファイルからコピペでイラストをテンプレートにペーストしていく
- メイン画像とタブ画像は画像サイズが固定なので特にやることはなかったが、スタンプ画像はスタンプ毎にアートボードのサイズ (=画像サイズ)がかわるので修正方法が大変だった
- スタンプをひとつ選択してから、メニューバーの
オブジェクト > アートボード > 選択オブジェクトにあわせるとすると、透過の余白部分をトリミングしてくれる - ここから上下左右に10 Pxが必要になるので、メニューバーの
ウィンドウ > アートボードからアートボードウィンドウを表示させて、幅高さをプラス20していった (このとき、サイズが奇数になるようだったら偶数に調整) - 最後に書き出し作業。メニューバーの
ファイル > 書き出し > 書き出し形式...から書き出すと、『アートボードごとに作成』のチェック項目があり、全画像を一度に書き出せるのだが、なぜかアートボードサイズが微妙にずれて奇数値になってしまった - ので、各アートボードを個別に選択してから、メニューバーの
ファイル > 書き出し > Web用に保存 (従来)...からひとつひとつ書き出した - ここらへんの作業はもう少し効率良く出来そうな気がする
LINE CREATORS MARKETにてスタンプを登録
- 各画像をアップロードし、諸情報を入力して申請した
- LINE CREATORS MARKETではストアのプレビュー以外に、シュミレータもあるので画像のそこから画像の確認ができる
その他、CCで困ったこと
- 文字を傾けたからか
アウトラインを作成すると文字が若干汚くなった パス上文字 (縦) ツールで、パスに文字をのせてから文字/パスを修正する方法がわからなかった- 文字の始点を移動する
- パスを変形させる
- パスを短くさせる
NCMBのプッシュ通知 (開封率、インクリメント) について (iOS)
開封率
開封状態にするには
- ドキュメント: 開封率
- リファレンス: NCMBAnalytics Class Reference
- ドキュメントやリファレンスをみると
NCMBAnalytics.trackAppOpenedWithLaunchOptions(launchOptions)またはNCMBAnalytics.trackAppOpenedWithRemoteNotificationPayload(userInfo)が呼び出されると開封扱いになるようだ launchOptionsがnilだった場合には開封扱いにはならない- それぞれ
application(_:didFinishLaunchingWithOptions:)、application(_didReceiveNotification:)内にて呼び出すこととなっている - 以前の記事では以下のように実装していたが、
func application(application: UIApplication, didReceiveRemoteNotification userInfo:[NSObject : AnyObject], fetchCompletionHandler completionHandler: (UIBackgroundFetchResult) -> Void){
// 以下の行を追加
if application.applicationState == .Active {
NCMBAnalytics.trackAppOpenedWithRemoteNotificationPayload(userInfo)
}
}
Background Modes > Remote notificationsの利用がなければ、メソッドはapplication(_didReceiveNotification:)が呼ばれる- さらに上記では
application.applicationState == .Activeとの条件をいれていたので、.Inactiveや.Backgroundが呼ばれた時に開封が取得出来ていなかった - こちらの記事を参考にすると、
application(_didReceiveNotification:)は、必ず呼ばれるとなっているが、アプリが未起動の場合は呼ばれないような気がした (application(_didReceiveNotification:)でNCMBAnalytics.trackAppOpenedWithRemoteNotificationPayload(userInfo)を呼び出すだけでは、アプリ未起動時の開封が取得できなかった) Background Modes > Remote notificationsがオンの場合は、application(_didReceiveNotification:fetchCompletionHandler:)が呼び出されるようだ- この場合は、アプリ未起動時にも呼ばれているようだった (
application(_:didFinishLaunchingWithOptions:)内のNCMBAnalytics.trackAppOpenedWithLaunchOptions(launchOptions)も呼びだされて開封率200%になった) - Background Modes > Remote notificationsは、Silent Remote Push Notificationなどに使える
- NCMBから使う場合は
content-availableを有効にしてプッシュを送る - mBaaSからSilent Remote Push Notificationを送ってみよう
インクリメント
バッジをインクリメントする
バッジ件数 > インクリメントするにするとデータストア上のbadgeに+1された数値がバッジに表示される(通知を受信するとbadge数があがる)
インクリメントがリセットされるとき
バッジ件数 > インクリメントするにした通知を開封すると、badgeが0になる
Sketch3で透過部分をトリミングしないでエクスポートする
内容
- Sketch3で上下左右に余白(透過)がある画像を書き出す場合、透過部分がトリミングされてしまう
- トリミングしないで画像を書き出したい
現状
- 余白を含めた画像サイズは360 x 360
- この画像を選択し
Make Exportable>ナイフボタンを押すと、Trim Transparent Pixcelsといったオプションがあるのだが、このオプションがオフでもトリミングされてしまう - このまま書き出すと、画像サイズが316 x 316になってしまう
解決策 その1
- 該当画像を選択
option + Aを押し、右上のAround Selectionをクリック
- Artboardが追加されるので (必要であればArtboard名を変更する)
- Artboardを選択し、
Make Exportableをクリック - 書き出す
解決策 その2
option + RなどからRectangleを作成し、サイズを書き出しサイズにする- Rectangleの色を透過にする
- 該当画像とRectangleの位置をあわせ
command + Gでグループ化する - Group配下のRectangleを選択し、
Make Exportableをクリック (注意: Groupを選択ではない)
- 右下にある
ナイフボタンを押す
- Rectangleと同サイズの書き出しエリアが作成される
- 書き出す
.gitignoreの作り方 (iOSアプリ開発)
giboを使って.gitignoreを作成する
やり方
準備
Homebrewのインストール
$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"- Homebrewがインストールされてない場合に実行
giboのインストール
$ brew install gibo- giboがインストールされていない場合に実行
作成
.gitgnoreの作成
$ gibo Swift >> .gitignore- Swift用のテンプレートで
.gitignoreを作成
テンプレートのアップデート
$ gibo -u- テンプレートは自動でアップデートされないので手動で行う
参考
『プログラマ脳を鍛える数学パズル』を解く (Swift)
本の紹介
- 技術本・ビジネス書大賞2016の技術書部門大賞
今日やった問題
Q01: 10進数で回文
使ったメソッド
- 2進数や8進数に変換する
String(num, radix: 2)、String(num, radix: 8)とするとnumが2進数や8進数に変換される- 文字列を逆順にする
String(String(num).characters.reverse())とするとnumが逆順になる
tvOSアプリのGameCenter対応
GameCenter対応
- iOS版とtvOS版のLeaderboardを共通のものとして使いたい
Xcode側
- iOS用のコードをそのまま利用しようとしたら以下の様なエラーが出た
- エラー:
viewState is unavailable - エラー:
leaderboardIdentifier is unavailable - tvOSではこれらは使われないようなので
viewStateとleaderboardIdentifierの設定は削除 - tvOSでは
leaderboardIdentifierはAssets.xcassetsから行う
手順
Assets.xcassetsにてGame Center > New Apple TV Leaderboardからアセットを追加- 追加した
Leaderboardに画像を登録 LeaderboardのAttributes inspectorにてIdentifierを登録- tvOS側のBundle IDをiOSと同じものにする (同じじゃない場合)
参考
iTunes Connect側
- Game Center プログラミングガイドには以下のようにある
ゲームグループ
「ゲームグループ」もiTunes Connectの機能で、Game Centerに対応した複数のゲームを1つのグルー プにまとめ、Game Centerのコンテンツの一部を共有できます。グループに属する各ゲームは、iTunes Connect上にそれぞれレコードを持つ独立したゲームですが、アセットの一部を共有します。
App Storeで公開する、次のようないくつかの版を、すべて同じゲームとして扱える、という利点があります。 iOS版とOS X版(別々に用意する場合)。 無料版と有料版。
- Game Centerグループに関して別資料: iTunes Connect向けCame Center構成ガイド > グループ
iTunes Connect > App Store > tvOS APPから既存(iOS用)のLeaderboardを追加すると以下の様なエラーが出る (エラーはiOS APP側にも出る)Leaderboardは1つ以上のLeaderboardセットに属している必要があります。- 上記作業をしている最中にiOS版の審査が通る
- 上記エラーが出なくなった
- 別の問題でGame Centerグループを作成しようとするもエラーが出る
- グループ化の必要の有無、グループ作成方法がわからないが、グループ化していないLeaderboard IDにてスコアのアップロードを確認できた (Sandbox)
