プリチャンにあったら良いなと思うサービス/機能について

この記事は プリッカソン Advent Calendar 2018 - Adventar 15日目の記事です。

過去6回開催されたプリッカソンでは毎度,プリティーシリーズのアニメや筐体に触れた女児(理論値)たちがこんなことを実現したい!或いはこんなサービスがあったら良いなぁという気持ちから手を動かし,実現された成果物が多く出てきています。

今後,プリチャンをプレイするにあたって実装されてほしい機能やサービスの妄想を書き連ね,今後自分自身またはプリッカソンのコミュニティなどから成果物が出てきてほしいという夢や,既に女児たちによって実装されつつあるサービスを紹介します。

マイページ

プリチャンには無いようですが,プリパラ時代にはWebのマイページがあったと聞きます。ちなみに現アイカツフレンズにはマイページは存在します。 アイカツフレンズのマイページを参考に,ほしい情報としては

  • 自分のチャンネルランク
  • 弾別コーデの所持状況
  • イベントの進捗
  • フォローフォロワー数
  • フォローフォロワー関係
  • フォロワーランキング
  • スコアランキング

こんな感じでしょうか。

特にコーデの所持状況とフォローフォロワー関係の確認ができたら良いのに・・・!というのは誰もが思うところ。 プリチャン自体が自分のチャンネルを持って誰でも簡単にライブを配信できちゃう!というコンセプトなので,webのマイページとの相性はかなり良いはず。いつかは実装されるんじゃないかなーという淡い期待を持っています。

しかし現状は実装されておらず,今後実装される予定もなさそうというのが現実です。 そこで,このマイページで提供されるはずの機能をなんとかして補おうと様々な試行錯誤がなされてきました。

コーデ管理

【プリチャン】ARコーデ管理アプリ作ってみた その1 ~Vuforia編~ note.mu

こちらはカメラをかざして所持しているかどうかをその場でARで示してくれるアプリです。 コーデの画像データそのものをARマーカーとして認識させているようです。ただしコーデの特徴によっては認識精度に差があるようです。とはいえ素晴らしい試みなので今後の発展に期待しています。

フォロー状況確認

一定数のマイキャラをフォローしていくと,誰をフォローしたのかがわからなくなってくることがよくあります。自分のマイキャラが複数いた場合には更に困難です。さらに,4弾からのデートタイム機能の追加により,1回のプレーでフォロチケをスキャンできる機会は1度のみとなってしまったため,総当たりでフォローしていない人を確認する手法も断たれてしまいました。 そのため,フォロー管理ツールはかなりありがたい機能と言えます。

すでにこの問題もプログラマー女児によって解決されつつあるようです。

フォロー管理 for プリチャン play.google.com

QRをスキャンして,既にフォローしているマイキャラちゃんかどうかを確認できるツールとのことです。 複数のマイキャラに対応しているため,既に手に負えなくなっている数のマイキャラちゃんを養っていても安心です。

所持コーデ一覧と同じく,公式に用意してほしい機能なのですが,リアル女児がwebページをわざわざ確認するか?といった疑問と費用対効果などでなかなか実装するのが難しいのではないかと感じております。やはり我々の力でなんとかするしかありませんね・・・!

着せ替え,試着アプリ

これも以前はプリチケメーカーという公式アプリがあったようです。このアプリを利用していたファンの方曰く,かなりの神アプリだったとか。 やればできる公式様,余力があればおねがい致しますm( )m。

これも我々の力でなんとかならないでしょうか・・・? 3D素材が公式から提供されていないので,コーデの画像データ(カードにプリントされているもの)を駆使してなんとかできないかなと考えています。 私は以前アバターサービスに関わっていたことがあるので,画像データの組み合わせといえど各パーツをいい感じにくっつけてひとつのコーデとするのは相当骨が折れ,難しいということは理解しています。 敢えてやるとしたら,

  • 公式が公開している画像データを保存して利用
  • 各パーツのscaleとoffsetをメタデータとして1つづつ指定
  • メタデータを元に各パーツの画像を合成

こんな感じでしょうか・・・。 途方もない作業量になりそうですね・・・。

こちらもすでにWebページのシミュレータは存在しているようです。

プリパラコーデシミュレータ

かなり気合を入れてカテゴリ分けされているのが素晴らしいですね。ぜひ利用したいです。

デモ画面でいいねを送りたい

筐体のデモ画面ではその日に遊んだ人のライブ映像が流れたりしますが,コインを入れる前にいいねが連打できたらよいなぁってよく思います。自演ができるので報酬的な要素はなしで,次にプレイしたときにわちゃわちゃ会で見知らぬだれかが(プリスタグラムではなく本当のライブ映像を)いいねと思ってくれているという情報が通知されたら素敵かもって。

公式サイトでみんなのライブが観たい

「ただいまの配信」といった触れ込みで誰かのライブがほぼリアルタイムかつランダムで見れたら素敵ですよね。プリチャンって感じがして。 さっきの話に戻りますけど,そこからもいいねが送れたりしたらさらに最高!ただし,公式様の負荷も最高潮へ・・・。

こういう筐体直結系のサービスの実現は我々女児には難しいので,例えばプリッカソンの成果物一覧にあるような プリスタグラムを現実のWebサービスにしてみる という試みなどで妄想を現実にしていくしかありません。

以上, を語ってみました。

夢を夢で終わらせたくない・・・?じゃあプリッカソンで実現しましょう。

Aikatsu Music Medley

これは アイカツ! Advent Calendar 2018 の5日目の記事です。

アイカツの魅力の一つは,素晴らしい楽曲が数多く存在していることだと思います。

本記事では,アニメ歴代のOP/EDを中心に個人的に気に入っている曲や盛り上がりそうな曲を公式アイチューブチャンネルの動画からピップアップし,Webアプリ上で繋げてみました!

僕個人はアイカツ!の世界へは楽曲から入門し,アニメを観始めるまでに約2年要したのですが,その間も飽きることなく頻繁にアイカツ!の楽曲を聴いていたのを思い出します。それだけ素晴らしい音楽コンテンツが充実していることだと思うのですが,未聴の方はこの記事をキッカケにしてアイカツ!楽曲に対して興味を持っていただけると幸いです。

Aikatsu Music Player

いつかやってみたかったカレンダーガール風音楽Playerアプリ,元ネタは初代アイカツ!アニメのED映像です。好きすぎてやってしまいました。開くと楽曲が自動再生されます。作業用BGMに是非是非。

https://gomachan7.github.io/aikatsu-music-player/

f:id:azaraseal_7:20181205052406p:plain
Aikatsu Music PlayerのUI

解説

  • 動画はYoutubeにアップロードされている公式のものを利用しています。
  • 仰々しくUIを作っていますが,操作はできません^^;
  • Youtube動画のクロスフェードは https://github.com/johndimi/youtubeMixer を利用して実現しました。(そのままでは動かなくなっており,結構手を加えています。)

注意点!

  • Chromeで再生してください
  • エラー対処が甘いです。通信環境が悪いと止まっちゃうかも。
  • バックグラウンド再生に対応していません。楽曲同士のクロスフェードタイミングがズレます。作業用BGMに是非といいつつ,このざまです。WebWorker…。

当日になって突貫で作ったので許してください。

セットリスト

多くは語りません。やっぱりアイカツ!の楽曲は最高ですね。

www.youtube.com www.youtube.com www.youtube.com www.youtube.com www.youtube.com www.youtube.com www.youtube.com www.youtube.com www.youtube.com www.youtube.com www.youtube.com www.youtube.com www.youtube.com www.youtube.com

プリッカソン #4でらぁらちゃんを出荷するゲームを作りました

プリッカソンについて

プリッカソンとはプリティシリーズのハッカソンです。 詳しくは下記のイベントページをご覧ください。 prickathon.connpass.com

成果物

らぁらちゃんを出荷するゲームを作りました。

ルールは簡単,「かしこま」と呟くらぁらちゃんが流れてきたら画面をタップし,「かしこまり」と呟く,やや品質に問題があるらぁらちゃんが流れてきたら画面をフリックして違反チケットを貼ります。タイムオーバーになるか,誤った操作をするとそこでゲーム終了となります。一応らぁらちゃん人形という体です。生首じゃないよ。

僕は1日である程度体裁の整った成果物を出したいと考えていたので,使い慣れたフレームワークを用いて簡単なミニゲームを作成することにしました。また,絵を描いても良いとの触れ込みがあったので,その場で素材も用意しました。

使っているフレームワーク/言語は以下の通り

  • TypeScript
  • Phaser
  • webpack

Phaserなら簡単な2Dブラウザゲームが割とすぐできて良い と宣伝しておきます。

参加者について

多様です。Webフロント/サーバサイド/スマホアプリ/機械学習などの分野は軽くカバーしていました。また,作品を作るために絵を描いても音楽を作ってもよいというスタンスが面白く,実際にDTMする人がいたり,僕もiPadで絵を描いていました。

プリッカソンの雰囲気について

僕はプリパラをアニメから知って,まだアイドルタイムも履修していないにわかですが, プリティシリーズが好きなら誰でもウェルカムといった雰囲気で,また,技術レベルを限定することなく,まずはやってみることを大切にしている様子でした。えもちゃん曰く「やってみなくちゃわからない、分からなかったらやってみよう」。まさにそんな雰囲気です。

当日はプリチャン放送日ということもあり,まずは最新話をみるところからはじめたり,途中キンプリとキンプラを同時に流しながら開発するというお茶目な場面もありましたが,ガチで開発したい人は黙々と(ペースを崩されるようなことはなく)作業を続けられていました。みんなで好きなものを共有したい,一方,新しく出会う技術者としての交流/知識共有もしっかりしたい,というバランス感覚があり,主催の方もそのように配慮しているように感じられました。

好きな作品をテーマにしたハッカソンは面白い

参加してよかったです。今後もプリティシリーズをより一層たのしめそうです。

あとは「アイカッ!ソン」なんてものがあったら更に面白くなりますね!?

ビットコインが暴落すると沈没するヴィーナスアーク

なんかできました

最近仮想通貨をはじめたというフォロワーさんが見たいというので作りました。

ヴィーナスアークとはアイカツスターズ!に出てくる,豪華客船型のアイドル学園です。このアイドル学園,資料があまりないので公式の画像を雑に切り抜いてWebからの値を流し込んで30分くらいでこしらえました。

ちょっとした解説

コインチェックのWebSocketAPIを利用して,次々と流れてくる取引額をみて,あらかじめ決めておいたレンジのどの辺りに居るかを正規化して,船の縦のオフセットをいじってるだけです。サムネ映えを狙って,レンジは今の取引額周辺の1430000から1450000円を設定しています。つまり今日の昼間には完全沈没していたことになります。

現実的には1400000-1800000あたりに設定しておいて,気がついたら沈没,あるいは浮上していたといった楽しみ方が良いかと思われます。

コインチェックのAPIはサイトのトップページから見える情報概ね公開API経由で取得できるようです。

完全にアウトな画像を使って居るので,Webサービスとしての公開予定はありません。

ちなみに

僕の資産も沈没中です。

その後の様子

画像を抜いたリポジトリ

https://github.com/gomachan7/btc-venusark

RxSwiftでObservable<Void>をonNext()する方法

もしかしたらRx本来の使い方から逸れているかもしれませんが,引数のいらない連続したイベントを通知するのにも, Rxは便利ですよね。

そこで Observable<Void> ,あるいは PublishSubject<Void> というようなObservableを定義したことがある方も多くいるのではないでしょうか。

ただ,このVoidが流れるObservableは,onNext() あるいは onNext(Void)という形でVoidを送り込んでやろうとすると,引数を与えてやれという旨のエラーが発生します。

そんなときは onNext(()) としてやると良いです。これは値の入ってない空のTupleを与えてあげていることになりますが,これで通るようになります。

いっそのこと,Void型を取るObservableには,引数を必要としないようなExtensionを定義するとより直感的になりますね。

extension ObserverType where E == Void {
    public func onNext() {
        onNext(())
    }
}

RxSwiftでBindTo可能な独自プロパティを生やす方法

MVVM的なアーキテクチャを採用しようとしたとき,KRProgressHUD のような簡単にLoadingViewを出せるライブラリを使っていると,そのViewのOn/Offの制御をどうしようかと少し悩みます。ViewModelのOutputを普通にSubscribeして制御しても良いですが,できればRxCocoaで拡張されたUIView同様,BindToで見た目を制御したいです。

そこで,そもそもBindToをどうやって実現しているのか本家ソースコードを除くと一目瞭然で,Binder というコンポーネントを利用すれば良いことがわかりました。ObservableのbindにBinderを渡してやることで他のUIViewと同様,自動的にsubscribeしてくれます。

具体的な使い方として,たとえばUIViewControllerに以下のようなextensionを定義してあげると良さげです。 以下の例におけるComputedPropertyのloadingViewはBindTo可能なプロパティを定義している本家コードほぼそのまま持ってきています。 第一引数で渡したインスタンスが,クロージャの第一引数へ,クロージャの第二引数に渡ってくる値が入っています。

extension UIViewController {
    
    func showLoadingView() {
        KRProgressHUD.show()
    }
    
    func hideLoadingView() {
        KRProgressHUD.dismiss()
    }
    
    var loadingView: Binder<Bool> {
        return Binder(self) {(vc, value: Bool) in
            value ? vc.showLoadingView() : vc.hideLoadingView()
        }
    }
}

これで,なんの違和感もなくBindできました。

class TestViewController: UIViewController {
    
    private let disposeBag = DisposeBag()
    
    override func viewDidLoad() {
        super.viewDidLoad()

        // ローディングViewを一定間隔でOnOffさせる。
        Observable<Int>
            .interval(1.0, scheduler: MainScheduler.instance)
            .scan(true) { current, _ in !current }
            .take(3)
            .bind(to: self.loadingView)
            .disposed(by: self.disposeBag)
    }
}

ちなみにUILabelのその他のプロパティも本家の定義と同様にextensionを定義してやることで,Bindableにすることができます。