SH Lab の アプリ開発部屋

リリースしたアプリの告知とかサポートとか、技術的なお話とか、そんな感じでつぶやきます。

SwiftUI2.0で matchedGeometryEffect を使ってみる

SwiftUI2.0で追加されたAPI

SwiftUI2.0で追加された新機能のうち、Heroアニメーションを簡単に作れるAPIがあったのでちょっと触ってみました。

とりあえず完成形

こんな感じのSegmentControlっぽいUIを作ってみます。

https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7478/bf3ebbd6-0ab7-922c-1532-cd1b86dc1333.gif

Githubはこちらです。 github.com

開発環境

ボタンを作る

選択に使うボタンのViewを作ります。 そのまえに、適当にenumを定義しておきました。SF Symbolsから、適当に4つほど選出しています。

enum ButtonType: String, CaseIterable {
    case share = "square.and.arrow.up"
    case trash = "trash"
    case folder = "folder"
    case person = "person"
}

ボタンのビューはこんな感じで作ります。
AccentColorについては、適宜Assetsで好きな色を定義してください。

struct CustomButton: View {
    // 選択状態を表すプロパティ.
    @Binding var selected: ButtonType
    // 自分自身のボタンタイプ.
    let type: ButtonType
    
    var body: some View {
        ZStack {
            // 選択中だったら背景に円を描画する.
            if selected == type {
                Circle()
                    // AccentColorはAssetsで定義すること.
                    .fill(Color.accentColor) 
            }
            
            Button(action: {
                // ボタンをタップしたら選択状態を切り替える.
                selected = type
            }, label: {
                // enumから画像を表示する.
                Image(systemName: type.rawValue)
                    .resizable()
                    .renderingMode(.original)
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 44, height: 44)
            })
        }
        .frame(width: 80, height: 80)
    }
}

画面上にボタンを並べる

では、画面上にボタンを並べてみます

struct ContentView: View {
    
    @State private var selected = ButtonType.share // 選択状態の初期値.
    
    var body: some View {
        HStack {
            // enumをforeachで回して、CustomButtonを横に並べる.
            ForEach(ButtonType.allCases, id: \.self) { type in
                CustomButton(selected: $selected, type: type)
            }
        }
    }
}

では動かしてみます。 0002.gif

選択状態を切り替えて、見た目も変わるようになりましたね。では、ここからアニメーションを追加していきましょう。

アニメーションさせる

まずはボタンの選択時の状態変化がアニメーションを伴うように、ボタンタップ時の挙動を一部修正します。

// 一部抜粋.
            
Button(action: {
    // アニメーションを伴わせる
    withAnimation {
        selected = type
    }
}, label: {
    // 省略
})

.matchedGeometryEffectを設定する

アニメーションさせたいViewに対して.matchedGeometryEffectを指定します。 これは、識別子とNamespaceを与えて、同期したいアニメーションをグルーピングする感じです。

まずはnamespaceを宣言します。

struct CustomButton: View {
    // 省略

    var namespace: Namespace.ID // namespaceを追加する.
    
    // 省略
}

次に、アニメーションさせたい背景ビューに対して.matchedGeometryEffectを指定します。識別子は、アニメーションを同期したいグループ間で一致していれば何でもいいです。

// 選択中だったら背景に円を描画する.
if selected == type {
    Circle()
        .fill(Color.accentColor)
        .matchedGeometryEffect(id: "CustomButton", in: namespace)
}

次に、呼び出しているView側に修正を加えます

struct ContentView: View {
    
    @State private var selected = ButtonType.share

    // 追加する.
    @Namespace var namespace

    var body: some View {
        HStack {
            ForEach(ButtonType.allCases, id: \.self) { type in
                // 引数にnamespaceを与えるように修正する.
                CustomButton(
                    selected: $selected,
                    type: type,
                    namespace: namespace
                )
            }
        }
    }
}

以上で完成です! とても簡単にできちゃいますね!

まとめ

Heroアニメーションはテンション上がるので、他にも色々と試して記事にしたいと思います!

こちらの書籍はとても参考になったのでおすすめです!

基礎から学ぶ SwiftUI

基礎から学ぶ SwiftUI

やれたかも委員会 をリリースしました!

新作アプリを公開しました

f:id:hoshi0523:20180503135625p:plain:w300

みなさま、いつもご利用頂きありがとうございます。
Susumu Hoshikawaでございます。

今回は、新作マンガアプリ やれたかも委員会 のリリースご報告です!

やれたかも委員会

やれたかも委員会

  • Susumu Hoshikawa
  • ブック
  • 無料

ドラマでも絶賛放送中!

yaretakamoiinkai.com

現在、TBSにて、ドラマでも絶賛放送中の やれたかも委員会 を、この度マンガアプリとしてリリースさせていただきました!

やれたかも委員会って?

すでにTVでもご覧になった方もいらっしゃると思いますが、吉田貴司さん原作のマンガで、現在はnoteやマンガ on ウェブなどで連載中の作品です。

毎回、女性との「やれたかもしれない」(セックスできたかもしれない)思い出を持つ男性が、面接会場のような場所を訪れ、女性と甘酸っぱさやほろ苦さ残る思い出を独白形式で語る。聞き手である男性2名、女性1名で構成される「やれたかも委員会」メンバーが、最後に「やれた」か「やれたとは言えない」かを判定する。(wikipediaより抜粋)

第1巻は完全に無料で!

現在は2巻まで刊行中ですが、第1巻は完全無料となっております。第2巻の価格は¥240となっております。

ぜひこの機会にお試しください!

やれたかも委員会

やれたかも委員会

  • Susumu Hoshikawa
  • ブック
  • 無料

【ついに完結】特攻の島 最終巻 第9巻を公開しました

みなさま、いつも当アプリをご利用頂きまして、ありがとうございます。Susumu Hoshikawaでございます。

今回は、拙作アプリ無料で1巻!特攻の島に関するご報告です。

特攻の島

特攻の島

  • Susumu Hoshikawa
  • ブック
  • 無料

特攻の島 最終巻 ついに完結

佐藤秀峰さんが手がける漫画特攻の島が、長年の連載を経て、ついに完結いたしました。

そして、その最終巻である第9巻が、iPhoneiPadアプリ特攻の島にて、本日より配信を開始いたしました!

漫画「特攻の島」は、特攻兵機「回天」の搭乗員の姿を描いた物語で、当然舞台は太平洋戦争真っ只中。最後の作戦に挑む渡辺の運命は!?是非ともご覧下さい!

最終巻の表紙はこんな感じ!

最終巻の表紙はこのようになっています。

第1巻では、表情に幼さも残していた渡邊でしたが、物語をしめくくるこの最終巻で、何かを悟るような表情を見せています。どのような形で物語が完結するのかは、ぜひ皆様自身の目でお確かめください。

f:id:hoshi0523:20180221221906j:plain:w300


価格は¥240!

第2〜8巻と同様、価格は¥240となっております。書籍版と比べると、なんと半額以下です!

場所もとらずに安くあがる、いつでもどこでも読めるiPhone/iPadアプリ版の特攻の島、どうぞお楽しみください!

特攻の島

特攻の島

  • Susumu Hoshikawa
  • ブック
  • 無料

以上、今後とも当アプリをよろしくお願いいたします!

「ブラックジャックによろしく」の有料化に関するご連絡

f:id:hoshi0523:20140507192802p:plain

この度、2017年08月31日付で、電子書籍ブラックジャックによろしく」の取り扱いを有料とさせていただきました事をご連絡いたします。

価格は、全13巻セットで ¥120 となっております。

これまでの二次利用規約

漫画「ブラックジャックによろしく」は、2012年09月12日に二次利用のフリー化が行われ、誰でも規約に則り、自由に作品を利用することが可能となりました。

当アプリでも、この規約に則り、無料で作品を配布させていただいておりました(新ブラックジャックによろしくは無料配布の対象外です)。

有料化について

この度、作者様の意向により、この二次利用規約に改定が行われました。

改定された規約では、アプリでは無料での取り扱いができないものとなっております。

以下、改定後の規約の抜粋です。

5.「ブラックジャックによろしく」作品を電子書籍配信ストアにて配信する場合は、必ず 1円以上の有償販売としてください。なお、その場合に生じた利益については、弊社及び 佐藤秀峰に分配する必要はありません。

このため、本日 2017.08.31 に公開しましたバージョン(ver 6.0.0)からは、ブラックジャックによろしくは有料とさせていただいております。

旧バージョンのアプリについて

これまでのバージョンのアプリでは、ブラックジャックによろしくは閲覧できないようになっております。購読される場合は、新しいバージョンに更新していただいた上で、ご購入いただきますよう、よろしくお願いいたします。

無料での配布について

なお、作者様が運営されているサイトでは、引き続き無料での配布が行われております。当アプリでは無料での配布はできなくなりましたが、こちらをご利用いただくことで、引き続き無料での閲覧が可能となっておりますので、合わせてご利用いただければと思います。

Web漫画 Webコミック 無料で漫画読み放題 マンガonウェブ

以上です。 大変申し訳ございませんが、ご理解いただけますよう、よろしくお願いいたします。

史上最低のレガッタ, イカロスの山, コラソン、マンガアプリ3タイトルをリリースしました!

新作アプリを公開しました

みなさま、いつも当アプリをご利用頂きまして、ありがとうございます。
Susumu Hoshikawaでございます。

今回は、新作マンガアプリ 史上最低のレガッタ, イカロスの山, それに コラソン の3タイトルのご報告です!

塀内夏子さんのマンガ作品を追加!

この3つの作品は、マンガ家塀内夏子さんの作品であり、以前リリースした オフサイド, Jドリーム に続く塀内作品マンガアプリとなります。

3作品とも、塀内さんの作品としては比較的近年の作品であり、記憶に新しい方も多いかもしれませんね。

史上最低のレガッタとは

f:id:hoshi0523:20170126013316p:plain

この作品は、雑誌ヤングマガジンアッパーズに2003年 〜 2004年に連載されていた作品です。

さまざまな事情で少年院に入ることになった9人の少年たちが、少年院を出るためにボート競技「レガッタ」に取り組む、という一風変わったスポーツ青春マンガです。

舞台が舞台なだけに、色んなものを抱えた少年たちが、どのようにして団結してレガッタに取り組んでいくのか?

イカロスの山とは

f:id:hoshi0523:20170126013317p:plain

この作品は、2005年から2007にかけて、講談社発行の週刊モーニングに連載された、本格登山漫画です。

エベレストに人類が初めて登ってから半世紀、新たにヒマラヤの未踏峰が発見されたとのニュースが駆け巡る!

この山への遠征隊には、かつて数々の山々を制覇した名コンビ「三上」と「平岡」が加わる!

果たして、彼らはこの未踏の山を制覇することができるのだろうか!?

コラソンとは

f:id:hoshi0523:20170126013318p:plain

この作品は、2010年から2012年にかけて週刊ヤングマガジンに連載された作品です。

日本代表にスポットを当てたサッカーマンガで、「オフサイド」「Jドリーム」とは一味違った切り口で展開されるサッカーマンガです!

20XX年、日本代表はワールドカップ・アジア最終予選において、得点力不足から5試合を消化した時点で暫定4位に低迷した。日本サッカー連盟はスケジュールの空いていたヘルマン・ヴィースラーに監督就任を要請。

ヘルマンは「全権委任」を条件に要請を受け、ブラジル2部リーグで得点王となっている戌井凌駕を招集するが、彼はかつて暴力事件を起こして日本サッカー界を追放されたいわくつきの男だった…(wikipediaより)

第1巻は完全に無料で!

どの作品も、第1巻は完全無料となっております。

第2巻以降の価格は、それぞれ¥240となっております。

塀内夏子さんの最新作は、マンガonウェブにて!

現在刊行中のWeb雑誌マンガonウェブには、塀内夏子さんの連載も掲載されております。

アプリ内で取り扱っておりますマンガonウェブや、専用アプリからも確認できますので、合わせてこちらもチェックしてみてください!

マンガ on ウェブ

マンガ on ウェブ

  • Susumu Hoshikawa
  • ブック
  • 無料

以上、今後とも当アプリをよろしくお願いいたします!

Appleの Search Ads が始まったので、広告を出稿してみた

f:id:hoshi0523:20161007011024p:plain

Search Ads が始まったよ(アメリカで)

先日、アメリカのAppStoreにて、検索広告サービス Search Ads が始まりました!

アメリカのAppStoreを使っているユーザさんは、検索するたびに広告が表示されるようになったみたいです。

Search Ads ってなに?

Search Ads とは「AppStoreで検索したら、その検索ワードに関連するアプリの広告が表示されるようになる」というものです。

これはAppleが運営する広告サービスで、現在はアメリカのAppStoreのみで導入されています。

広告を出稿したい開発者さんは、Appleにお金を支払って、広告掲載アプリの候補にストックしてもらうような感じです。

ユーザにとっては厄介なサービスにも思えますが、一度の検索で表示される広告は1件のみ広告であることが一目でわかるレイアウトであったりと、一定の配慮はされているようです。

f:id:hoshi0523:20161007011638p:plain

わかりづらさが正義!なネイティブアドとは違うんですよ、と言いたげ。

でもまぁ、日本人にはあんまり関係ない話なんですよね...

お試しクーポンが配られた!

...と思っていたら、日本時間の 9/29 に、Appleさんが「広告サービ始めるから、とりえずお試しで $100.00 相当のクーポン配るでー」という感じで、開発者にばら撒き政策を実施しました。

開発者はみんな、お試しで約¥10,000分相当の広告が無料で打てますよーってことのようです。

アメリカさんしか関係ないサービスなので、追いかけるつもりはなかったのですが...まぁそこまで言うなら使ってみましょうか!

f:id:hoshi0523:20161007011807p:plain
こんな感じのメールが、開発者に届きました。

なお、開発アカウントを持っているユーザ全員に配ったわけではなく、2016/09/10までに iTunes Connect にちゃんと口座を登録している開発者、みたいな縛りがあるようです。

とりあえずアカウントを作る

メールには「Search Ads アカウントを作ったらプロモーションコードあげるでー」って書いてあったので、とりあえずアカウントを作ってみることにしました。

ここの Get started からアカウント登録ができました。

なお、アカウントを作っていた時点では記事にするつもりはなかったため、スクショや細かい手順のメモなどはないのですが...気をつけるポイントとしては

名前や住所は、全角じゃなくて英語で入力しろや!

ってことです。

Appleの開発関連のアカウントなので、全角入力しちゃうような うっかりさん なんていないと思っていたのですが...

知人がうっかり全角で登録して、そのせいでプロモーションコードが届かなくなってしまい、早速 contact us のお世話になっていました。

しかも アカウント名が全角だと、contact us もまともに動かなくなる というバグに遭遇してしまい、訳のわからない状況に陥っていました。

...皆さんはお気をつけください。

発行されたプロモーションコードを有効化する

アカウントを作ったら、無事にプロモーションコードを含んだメールが届きました。英語入力万歳。

f:id:hoshi0523:20161007015305p:plain

メールには「支払い用のクレジットカードを登録したらプロモーションコードを有効にしてやるでー」と書いてありますね...まぁそうですヨネ。おとなしく、クレジットカード情報をAppleに捧げましょう。

クレジットカードと個人情報を入力し、プロモーションコードを入力すると、こんな感じで有効化されるみたいです。

f:id:hoshi0523:20161007021358p:plain

キャンペーンを作る

広告を掲載するために、キャンペーンを作成します。まずは Search Ads の管理画面のトップにて Create Campaign を選択します。

f:id:hoshi0523:20161007024332p:plain

掲載するアプリを選択します。

f:id:hoshi0523:20161007024405p:plain 唯一、海外版のコンテンツが存在する「ブラックジャックによろしく」のアプリを選択しておきました(他に選択肢ないですし...)。

アプリを選択すると、いろいろと細かい入力欄が表示されるみたいですね。

f:id:hoshi0523:20161007024730p:plain

キャンペーン

広告出稿の大枠で、対象になるアプリとキャンペーンの名前、全体の予算を設定する。オプションで、1日ごとの予算も設定できるみたいでした。

  • App Name
    • キャンペーン対象のアプリ
  • Campaign Name
    • キャンペーンに対して名前をつける
  • Budget
    • キャンペーン全体のご予算
  • Maximum Daily Spend
    • キャンペーンの1日のご予算
    • オプションっぽいので、設定しなくても良さそう
  • Campaign Negative Keywords
    • キャンペーンの対象から外すキーワードを設定
    • このキーワードには反応させない、という設定ができる

グループ

キャンペーンには、複数のグループを紐づけられます。クリック単価や掲載スケジュールは、グループの単位で設定します。

  • Ad Group Name
    • グループに対して名前をつける
  • Storefronts
    • 対象地域を選ぶっぽいのですが、今はUSしか選択できない
  • Devices
  • Ad Scheduling
    • グループの実施期間を設定可能
  • Default Max CPT Bid
    • 1クリックに対していくらまで支払うか?を設定
    • ここで定義した金額で入札する、という扱いになるようです
    • 大きい方が掲載されやすい、とかでしょうかね

Search Match

キャンペーンごとに設定する情報。iTunes Connect に登録しているアプリのメタデータをもとに、いい感じで広告を掲載するスイッチ?そんなこと言われたら、ONにするしかないじゃない。

  • Search Match
    • 検索マッチ機能をON/OFFできる
    • アプリのメタデータをもとに、最適化して掲載してくれるらしい?
    • とりあえずONにしておけば良さそうな雰囲気

キーワードの設定

グループには、複数のキーワードが設定可能です。クリック単価は、紐付いているグループに依存します。

  • Recommended Keywords
    • アプリのメタデータで設定しているキーワードから選択
  • Ad Group Keywords
    • 直接入力して設定する
    • メタデータにいい感じのキーワードがないら、直接入力しよう
  • Ad Group Negative Keywords
    • 逆に、反応させないキーワードをここで設定する

ユーザの細かいターゲッティング

キャンペーンごとに設定する詳細設定です。広告を表示するユーザを、細かくターゲッティングできます。

  • Customer Types
    • 自分の他のアプリをもっているかどうか?などで絞り込める
  • Demographics
    • 性別
    • 年齢
  • Locations
    • 位置情報で絞る
    • 特定の地域で利用可能なサービスアプリなどであれば、これで絞るといい
    • まぁアメリカ内ということには変わりないんですけどね

キャンペーンのイメージ図

アプリ、キャンペーン、グループなど、登場人物が多いが、全体をまとめるとこんなイメージ。

f:id:hoshi0523:20161007035544p:plain

ちゃんと表示されるのかな

管理画面では、作成したキャンペーンやグループが確認できるようになりました。

f:id:hoshi0523:20161007035938p:plain

f:id:hoshi0523:20161007035951p:plain

f:id:hoshi0523:20161007035958p:plain

が、設定したキーワードでは、他のアプリの広告ばかりが表示されてしまい、ウチのアプリは全然表示してもらえないですね...ちゃんと表示されるんでしょうか (汗)

データを見ながらキーワードや単価を調整する

自分としては実験の域は出ませんが、もう少し様子を見ながら、掲載される瞬間を楽しみにしたいですね。

ですが、ちゃんと予算を組んで広告の掲載を行う場合は、管理画面に表示されるデータを見ながら、キーワードや単価を調整して、効果の高いやり方を探っていくことになりそうですね。

レポートもかなり細かく確認できるようですので、世の中的に情報が出回ってきたら、もう少し突っ込んで調査してみようと思います。

マンガ「オフサイド」と「Jドリーム」のアプリをリリースしました!

みなさま、いつも当アプリをご利用頂きまして、ありがとうございます。
Susumu Hoshikawaでございます。

今回は、新作マンガアプリ オフサイドJドリーム のご報告です!



塀内夏子さんのサッカーマンガ!

この2つの作品は、マンガ家塀内夏子さんが手がけたサッカーマンガです。

ともに少年マガジンを支え続けた作品で、オフサイドは1987年から1992年にかけて、Jドリームは1993年から1999年にかけて連載されていました。

30〜40代くらいの男性にとっては、懐かしい作品なのかもしれません。

オフサイドとは

オフサイドは、高校サッカーを舞台にしたサッカーマンガで、2001年にはアニメ化もされた作品です。

イラストからも分かる通り、主人公の熊谷五郎の連載開始時点でのポジションはキーパーであり、サッカーマンガの主人公としては珍しいイメージですね。

f:id:hoshi0523:20160813155746j:plain

Jドリームとは

Jドリームは、オフサイドの連載が終了した翌年から連載が開始された、同じくサッカーマンガです。ですが、高校サッカーではなく、プロサッカーリーグJリーグを舞台としています。

連載が開始された1993年とは、Jリーグが発足した年であり、日本中がサッカーで熱狂していた年です!

このJドリームも、Jリーグの開幕前後が舞台となっており、当時の日本のサッカー熱が見事に描かれております。

さらには、アメリカワールドカップやフランスワールドカップへと舞台が移っていき…是非とも続きはアプリでご賞味ください!

f:id:hoshi0523:20160813155747j:plain

第1巻は完全に無料で!

どちらも10巻を超える作品ですが、第1巻は完全無料となっております。

第2巻以降の価格は、それぞれ¥360となっております。

塀内夏子さんの最新作は、マンガonウェブにて!

現在刊行中のWeb雑誌マンガonウェブには、塀内夏子さんの連載も掲載されております。

アプリ内で取り扱っておりますマンガonウェブや、専用アプリからも確認できますので、合わせてこちらもチェックしてみてください!

マンガ on ウェブ

マンガ on ウェブ

  • Susumu Hoshikawa
  • ブック
  • 無料

以上、今後とも当アプリをよろしくお願いいたします!