猫ブームにのってAR猫転送装置を作っています ↀωↀ

猫ブームにのってAR猫転送装置を作っています ↀωↀ

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

最近猫ブームが非常に盛り上がっておりますね。そこに便乗したアプリを開発して一発稼いでみたい!!というゲスな極みとして現在製作途中のAR猫転送装置(仮)をご紹介いたします。

◼︎AR猫転送装置(仮)について

アプリを起動するとカメラ越しの映像が表示されて、画面に円をなぞっていくと、そこにかわいい猫が転送されてくるアプリです。

◼︎出来上がり動画

◼︎画面キャプチャ

画面をなぞっていくと。。。。
image05

image07

image08

image03

なんと!!

なぞった円の中に猫が転送されてきます!!!

猫が転送される瞬間の動画はgif画像に出力をおこない、
そのうちSNSなどに投稿ができるように考えております。

自分の飼っている猫を転送できるのもいいかもしれませんね。。。

ARなので転送場所は問いません。
・オフィスの中で
・東京スカイツリーの頂上で
なぞった場所が転送場所です。

◼︎猫転送装置とは??

そもそも猫転送装置とは何でしょうか?

参考外部リンク
http://inumo-nekomo.jp/entertainment/%E3%80%8C%E7%8C%AB%E8%BB%A2%E9%80%81%E8%A3%85%E7%BD%AE%E3%80%8D%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E7%8D%A3%E5%8C%BB%E5%B8%AB%E3%81%AB%E8%81%9E%E3%81%84%E3%81%A6%E3%81%BF%E3%81%9F

私はどちらかというと犬派なのでわかりませんが、猫というのは狭いところが好きな傾向にあるようです。

テープで床に円があると猫が円の中に入っていくという習性を利用したものを猫転送装置というのだそうです。
AR猫転送装置は床だけでなく、空にでも転送が可能です!!

◼︎開発者向けの実装方法

さてこの「AR猫転送装置」のiOSアプリ実装方法についてですが、大きく3つあります。

①カメラからの入力情報を画面上に表示する

②1の画面の上になぞるようのViewを用意する

③なぞり完了後1と2のViewを合体させgifに出力する

①こちらについては以前の私の投稿に似たような内容がありますので、下記URLをみてください。
https://bitwave.showcase-tv.com/%E8%BA%AB%E8%BF%91%E3%81%AA%E3%82%82%E3%81%AE%E3%81%A7iot%EF%BC%81%E4%BD%BF%E3%82%8F%E3%81%AA%E3%81%8F%E3%81%AA%E3%81%A3%E3%81%9Fiphone%E3%81%A7%E9%A1%94%E8%AA%8D%E8%AD%98/

②UIVIewのタッチ検出機能として、3つあります。
 touchesBegan なぞり開始(タッチ開始)
 touchesMoved なぞり中(タッチ中)
 touchesEnded なぞり終了(タッチ終了)

なぞっている箇所の実装はUIBezirePathというものを使います。

touchesBegan
    UITouch *touch = [touches anyObject];    
    self.currentPath = [UIBezierPath bezierPath];
    currentPath.lineWidth = 6.0;
    [currentPath moveToPoint:[touch locationInView:self]];

タッチ中はどんどんこのBezirePathにaddしていきます。

touchesMoved 
  UITouch *touch = [touches anyObject];
    [self.currentPath addLineToPoint:[touch locationInView:self]];

タッチが終了したらBezirePathをクローズして、BezirePathの開始から終了までの形状の中に猫用のUIImageViewをaddSubViewします。

touchesEnded
   [self.currentPath closePath];
    UIImageView* img = [[UIImageView alloc]init];
    UIImage* image = [UIImage imageNamed:@"nekos"];
    [img setImage:image];
    [img setContentMode:UIViewContentModeScaleAspectFit];
    
    CGRect frame = self.currentPath.bounds;
    [img setFrame:CGRectMake(frame.origin.x, frame.origin.y, frame.size.width,frame.size.height)];
    [img setTag:1];
    [img setAlpha:0];
    
    [self addSubview:img];

③gif画像への出力は「カメラ入力VIew」と「なぞりVIew」を足したimageを
 配列にaddしていきます

2つのViewを足したキャプチャ画像の生成(画面全体をキャプチャしています。)

    UIWindow *window = [[UIApplication sharedApplication] keyWindow];
    UIGraphicsBeginImageContextWithOptions(window.bounds.size, NO, 0.0f);
    CGContextRef context = UIGraphicsGetCurrentContext();
    for (UIWindow *aWindow in [[UIApplication sharedApplication] windows]) {
        [aWindow.layer renderInContext:context];
    }
    UIImage *capturedImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    [gifImages addObject:capturedImage];

これを0.5秒間隔で取得しております。
 
完了後にgif画像に出力です。
実装方法は長いため省略。

細かい部分は除き、ざっとこんな感じで作っております!!

猫好きの皆様のご要望お待ちしております!!!

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

【週刊bitWave】(メルマガ)始めました!

登録はこちらからメールアドレスを入力してお申込みください。

ご登録いただいたメールアドレスは 【週刊bitWave】の更新情報の配信にのみ使用します。

個人情報の取扱いに関しては、「プライバシーポリシー」をご確認ください。解除はいつでもこちらから行うことが可能です。

あなたにおすすめ