2015年10月15日 yutanp

TinderUIをやってみたお【Objective-C】

tinder

tinder

ようやくアプリ開発をやってもいいよ許可が降りたので、

とりあえずTinderUIなるものをやってみた。(途中省きすぎ)

TinderUIは説明する必要ないかもしれないですが、
Tinderと言う位置情報を使った出会い系サービスで、
左右のスワイプのみで相手の写真を見てLike/Nopeを判別しているアプリで、
34ヶ国語対応までしている超人気アプリ
最近のリリースでは誤スワイプ対応のためundo機能も追加され、
より使い勝手が良くなってきている・・・・

とまあ前置きはこのくらいで、

要は二者択一の場合にわかりやすいUI

ということですね。

tinder

TinderUIを採用しているサービスを調べてみるとでるわでるわ。

Switch

JSwipe

Twindr

Stylect

PITCHER

HomeSwipe

Yahoo! Sonomy

blonk

Weave

SoSho

キャリアトレック

Wishfeed

Babyname

SENSY

Mallzee

Shoe Swipe

Flic

やはりTinderUIが使われるのは、直感的にわかりやすいからなんですかね。

YesかNoか半分か。半分はないですね。

保留って迷うくらいならNoだろう、置いといても変わんねえんだから決めろやってことですね。

じゃあ即採用。明日中に作れと言われても

なにげにViewを移動させたり左右判定でデータ変えたりアニメーション追加したりで面倒。

でも僕らには強い味方がいる。

そう、ライブラリが

MDCSwipeToChoose

https://github.com/modocache/MDCSwipeToChoose

今回はこれを使ってみました。

CocosPodなのであら簡単

使用したいプロジェクトにてPodfileを作成し、以下を記述

pod "MDCSwipeChoose"

後は

pod install

したら使えるように。

実装したいViewControllerに以下を記述。

XXX.m

#import <MDCSwipeToChoose/MDCSwipeToChoose.h>

// ... in a view controller

#pragma mark - Creating and Customizing a MDCSwipeToChooseView

- (void)viewDidLoad {
    [super viewDidLoad];

    // You can customize MDCSwipeToChooseView using MDCSwipeToChooseViewOptions.
    MDCSwipeToChooseViewOptions *options = [MDCSwipeToChooseViewOptions new];
    options.delegate = self;
    options.likedText = @"Keep";
    options.likedColor = [UIColor blueColor];
    options.nopeText = @"Delete";
    options.onPan = ^(MDCPanState *state){
        if (state.thresholdRatio == 1.f && state.direction == MDCSwipeDirectionLeft) {
            NSLog(@"Let go now to delete the photo!");
        }
    };

    MDCSwipeToChooseView *view = [[MDCSwipeToChooseView alloc] initWithFrame:self.view.bounds
                                                                     options:options];
   view.imageView.image = [UIImage imageNamed:@"photo"];
    [self.view addSubview:view];
}

#pragma mark - MDCSwipeToChooseDelegate Callbacks

// This is called when a user didn't fully swipe left or right.
- (void)viewDidCancelSwipe:(UIView *)view {
    NSLog(@"Couldn't decide, huh?");
}

// Sent before a choice is made. Cancel the choice by returning `NO`. Otherwise return `YES`.
- (BOOL)view:(UIView *)view shouldBeChosenWithDirection:(MDCSwipeDirection)direction {
    if (direction == MDCSwipeDirectionLeft) {
        return YES;
    } else {
        // Snap the view back and cancel the choice.
        [UIView animateWithDuration:0.16 animations:^{
            view.transform = CGAffineTransformIdentity;
        }];
        return NO;
    }
}

// This is called then a user swipes the view fully left or right.
- (void)view:(UIView *)view wasChosenWithDirection:(MDCSwipeDirection)direction {
    if (direction == MDCSwipeDirectionLeft) {
        NSLog(@"Photo deleted!");
    } else {
        NSLog(@"Photo saved!");
    }
}

一応これだけで、表示内容は空っぽだけど、スワイプに合わせてViewが動き、左右判定までしてくれます。

Screen Shot 2015-03-03 at 20.56.10
Screen Shot 2015-03-03 at 20.56.08

Viewを変更したい場合は

view.imageView.image = [UIImage imageNamed:@"photo"];

この部分を変えてあげれば良いだけなので汎用性もあるように作られています。

所感
・Viewを個別に実装してしまえば複数パターンも簡単に表示ができる。
・swipe以外のトリガーでも動作できるように予め実装してある
・swipeの最適化はすでに実用レベル

サンプルも中に入っているので、動かしてみるとわかりますが、もうほぼTinderです。

Objective-C以外にもSwiftでやってみた人や、Android版もあったのでぺたっと。

【Swift】
SwiftでTinderUIを実装してみた(Swift, Xcode6 beta5)

http://qiita.com/kiiita/items/1c7f44add59b390ea786

【Android】
Swipeable-Cards

https://github.com/kikoso/Swipeable-Cards

Swipecards

https://github.com/Diolor/Swipecards

以下のサイトの解説はすごいわかりやすかったです。

http://naoty.hatenablog.com/entry/2014/11/23/162709

ベルギービールを堪能 ヘイメル ミヤマス【渋谷】

image

先日会社の人たちと不定期で開催している
ベルギービール会に行ってきました。

セミナーを開催した後だったのでめっちゃ疲れてて
うんまーでした。

今回行ったのは渋谷駅から徒歩5分
あんまり騒がしくない側の宮益坂にお店を構える
ヘイメル ミヤマスに行ってきました。

http://www.hemel-miyamasu.jp

ベルギービール会は主にデュセス・デ・ブルゴーニュという
ビールなのにワインの味がする!という
謎のビールを堪能するのが始まりで、
そのビールが飲みたいが為にお店を探して飲み歩いているという経緯があります。

image
ちなみにボトルはこれ。

特に特徴的というわけではないので、
頭に残りづらく、
名前もなんかよーわからんので覚えづらいです。

でも飲んだ時の衝撃だけは忘れられず、
この記事を書ききながらも飲みたさが溢れてきます。

ブルゴーニュとつくのでワインかと思うと
赤っぽい色なのでやっぱワインか、でも泡立っている?
と言う風に感じます。

一緒に行った人たちも美味しい美味しい言いながら飲んでました

他にも色々頼んだのですが全てお任せしていたので全然名前を覚えられてないですw

ビールはもちろんお料理も美味しく、
目、鼻、口で楽しめる、渋谷らしからぬ(?)お店です

image

image

image

image

天井のデザインが可愛らしくて気に入りました

【写真】雨乞いのイチョウ

IMG_9458.JPG

IMG_9458.JPG

本物は宮城県柴田町にあり、国の特別記念物に指定までされています。
樹齢600年とも言われ、昔、人々が雨乞いの祈りを捧げた場所でもあり、
イチョウの根元付近の湧き水は一度も枯れたことがないと言われています。

せっかく秋めいてきたかなと思ったところで雨

黄色く色づいてきたイチョウの葉も落ちてしまいました。

写真をとっていると、秋冬が一番色鮮やかでいいのですが

期間が短くてすぐに枯れ葉になってしまう・・・

切ない。

冬は冬でスノボのシーズンなので待ち遠しいのですがね。

写真やったり、物作ったり、スノボやったり

好奇心が強いのか・・・

三日坊主なのか・・・

そこが器用貧乏の悪いところ。

ちなみにブログのタイトルにしている、

「Yutanp of all trades」

ですが、「Jack of all trades」をもじっています。

直訳で器用貧乏ですが、

良い意味での器用貧乏ではないので、

自分を蔑む意味でも使っています(笑)

Chorme Developer Toolで知ったこと

たまには趣味の話ではなく、
仕事に関係したお話。

先日から社内メンバーに向けたセミナーの準備をしているわけですが、
とは言ってもWeb開発者歴1年半。
まだまだ知っていることより、知らなきゃいけないことのほうが多くあります。

過去には端末開発がメインであったため、言語を複数使う機会と言うのは滅多になく、
Androidが開発されてから複数言語(C,C++,Java)を使うことが多くなりました。

とは言ってもAndroidの言語は横割り。
C→C++→Javaの右から左へデータを渡すだけだったので、あまり非同期的に考えることはなく、
あってもスレッドがあるかないか見ればなんとかなる状態でした。

しかしWebにはそのような考えが少なく、すべてユーザーによるイベントに始まるという感覚が強いです。

普通にHTMLしか知らなかったYutanp少年はJavaScriptなるものに触れ驚愕しました。

「なんでタグが勝手に追加されるの!?」

はい、前置きが長いですね。
そこで今回はChrome Developer Toolを使用してDOMの制御について調べています。
あ、もちろん今はJavaScriptは使えますよ。上の文書はあくまでも「前置き」です。

調べてびっくりしたのは、
普通にJavaScriptのコードに対してBreakPointを貼るのはできることは知っていました。

指定した要素を右クリックすると以下の選択肢が有りました。

chrome_dev

  • Subtree modifications
  • Attributes modifications
  • Node removal

???

コード以外にも特定の要素が変わった時にもBreakpointが張れる!!

それぞれ日本語に訳すと

  • 要素内に変更があった時にブレーク
  • 要素の属性に変更があった時にブレーク
  • 要素が取り除かれた時にブレーク

と、い・う・こ・と・は!

ボタンを押した時に要素が変わってしまった時でも!
時間が立って要素が変化してしまった時でも!
コードの内容を把握していなくてもBreakpointが張れて、なおかつどのコードのどこで実施されているかもわかるということですね

なんて素晴らしい。
なんでChromeさん日本語で教えてくれなかったの・・・

今まではそれらしいコードのあらゆるところにBreakpointを張って、
Try and Errorを繰り返していたのは過去のこと。

ちなみに
・要素内に変更があった時にブレーク
とは、
よく在りがちなのはボタンを押したら画像がニュって出てきたり、
入力フォームでパスワード入力したらその場で一致してないですよってメッセージが挿入されたりするやつです。
(CSSでdisplay:none;がblock;になるのは別)

・要素の属性に変更があった時にブレーク
とは、
検索窓でテキスト入力した時や、
マウスをリンクに載せた時などです。
(CSSのhoverとは別)

・要素が取り除かれた時にブレーク
とは、
そのままの通り、もともと表示されていた要素が消える。
(CSSでdisplay:block;がnone;になるのは別)

更に、要素が変更されてしまうのはわかったけど、
ロードの時に読み込まれて追加されてしまう広告などは・・・

心配ありません!!

スクリーンショット 2014-11-24 20.25.46

別タブにある「Source」を選択し、右下にあるEvent Listener BreakpointからLoadを選択すると
Loadされたタイミングで自動でBreakします。
なお、非同期処理もあるかと思うのでEvent Listener Breakpointの上のほうにCall Stackという欄の右側に
「Async」とあるのでチェックを入れておくと良いです。

はい。そんな感じでかなりバクっとした内容ですが参考になればと思います。

【富士見台駅】高パフォーマンスで有名な『焼肉問屋 牛蔵』に行ってきた

image

image

image

焼肉問屋 牛蔵

昨日は会社の先輩たちに連れられて、
西武池袋線にて池袋から約15分の富士見台駅にある
焼肉店 牛蔵に行ってきました。

なぜわざわざそんな所要駅でもない駅のお店に行くかというと
「質の良いお肉」

「低コスト」
で食べれるで有名なのです。

食べログの評価も見てわかる通り、
口コミ件数が多いにも関わらず、
評価点が4.1点(2014/11/22時点)

あまりにも人気であるため、お店には予約しなければ休日はほぼ入れず
しかし予約は1ヶ月前までのみしか受けていないとのこと。
あとは当日の朝、開店前に並び、夕方からの席を予約するしかないというほど。

昨日は先輩が朝から並んでくれたおかげで予約を取ることができたが、
開始時間がなんと22:30…

知らせがあったのがお昼の12時過ぎ。
さすが有名店。。。取れただけでもよかった。。。

そしていざ22:30

肉祭りが始まる。

ロース、ハンバーグ、三角、カルビ、牛タン、冷麺、ビビンバ、ロース、ピートロ、牛タン、ロース。。。

もうロースなんて7人で何人前食べたのかわからないよ。。。

とりあえずせんぱいたちが頼むまま食べ、飲み
普通の人の倍は食べる自分でも腹8分くらいになる量を食べ、
いざお会計

1人4500円

✳︎皆様忘れないでほしい。気持ち悪くなるほどの量で最高品質の肉を食べてこの値段なのである。

予約するまでのハードルは高いが、
行ってみる価値はそれを超えるほどあると思う。

是非とも時間に余裕のある方は朝から並んで楽しみにして待ってもらいたいと思います。

ACIDMAN 10th Album 「有と無」

image

image

待ちに待ったACIDMANのニューアルバム

「有と無」

もう10枚目になるんだね。

枚数を重ねるごとにどんどん大人びたサウンドになってきていて、

激しさの中にもノスタルジックが含まれているようなそんな感じ。

シングル・カットの

3. EVERLIGHT
4. Stay in my hand
7. 世界が終わる夜

が、いいのはもちろんのこと、

2. 永遠の底
5. star rain
11. 黄昏の街

がなかなか好き。

star rainとかは絶対ライブで盛り上がって頭飛んじゃいそうな予感

2015年4月18日(土)には武道館ライブが決定しているので、

半年先だけどワクワクが止まらない。

武道館やるレベルのアーティストなのに

メディア露出が少ないからなかなか知っている人が少なくて

会話することが少ないから残念。

とりあえずガンガン聞きながら集中して仕事しますか。

「有と無」track list
1.有と無(introduction)
2.永遠の底
3.EVERLIGHT
4.Stay in my hand
5.star rain
6.EDEN
7.世界が終わる夜
8.ハレルヤ
9.en (instrumental)
10.your soul
11.黄昏の街
12.最期の景色

DIYでpendant作り

image

image

最近モノの作りたい欲が高まってきており、

金属の板(真鍮)と革紐だけで作ったペンダントです。

はさみで切って(もちろん専用の)角をヤスリで削って

ペンチでちょっとずつ曲げて

紐通すために穴開けて。

穴開けるときに手のひら切って(笑)

原価200円くらい?

知り合いにこれいくらで買ったと思う?って聞いたら

「1500円くらい?」

と言われたので、儲け1300円ですね(笑)

30分くらいで作ったので時間もあんまりかかってないです。

今回は思いつきだったのでハンズで材料揃えましたが、

ネットとかでいろいろまとめて買えばもっと安く揃えられそう。

器用貧乏ここに極まれり!

これを期に熱が上がり、

スワロフスキーやらいろいろ仕入れてます。

シルバークレイも久しぶりに始めようと思ってます。

↓この前記事にしたウロボロスのリングがシルバークレイで作ってます。
snake

Micro Bluetooth Earphone

screen-shot-2014-09-05-at-2-34-08-am

ca53e70d1e0a82cb1efe3242b5cd69e1_large

https://www.kickstarter.com/…/earin-the-worlds-smallest-wir…

このBluetoothイヤフォンほしい!!!

けど再生時間が2時間・・・・

カナル式且つボディが小さいBluetoothイヤフォン探して早3年

モトローラが一番小さくて、でも耳からはみ出るっていうのを超えてきたなと思ったんだけど・・・

でも怖いのはこのデザインだとちゃんと耳の中に引っかかるのだろうか・・・

走ったりした日には取れるのではなかろうか・・・

screen-shot-2014-09-05-at-2-34-08-am

http://www.motorola.com/…/acce…/Moto-Hint/moto-hint-pdp.html

ならばデザイン良くないがこっちのほうが現実的なのか・・・

最大再生時間10時間だし・・・

モトローラさん頑張ってサイズもうちょっと小さくしてくださいな!!

小さくできなかった結果のデザイン選べますよ。

木のカバーとか付けられますよ。

という風にしか感じない・・・

どちらにせよ耳の中に小さな爆弾(まだ不安定なLiバッテリー)入れることになるのか・・・

まずは人柱の様子を見てからですね。

logo designなんかもやるよ

image

image

昔フットサルチーム用にロゴデザインして、

チロルチョコにした時のもの。

猫が球遊びしているような感じで作ってみた。

本当は犬好きなんだけどね。

別にデザイナーとかではなく

ただのプログラマなので

IllustratorとかPhotoshopなんかあるわけもなく

macユーザーでもないため

ペイントで作るという荒技

器用貧乏はやる手法が雑なのです。

image

image

そのあとにチームユニフォームのデザイン

ワッペン風にしなきゃということで

デザイン一新

もちろん

またペイントで作ってます(笑)

シルバークレイでsnake ringを作った

427505_273862872683178_146401875_n

昔作ったシルバーアクセ。

427505_273862872683178_146401875_n

蛇の形

ウロボロスのリング

ウロボロスの語源は、「尾を飲み込む(蛇)」の意

蛇は、脱皮して大きく成長するさまや、長期の飢餓状態にも耐える強い生命力などから、

「死と再生」
「不老不死」

の意味を持つ。

その蛇が自身を食べることで、

「始まりも終わりも無い完全なもの」

を意味する。

シルバークレイで作ったものなので、焼成不足が祟り

4つに別れてしまったんですけどね(笑)切ない。

完全どころか全くの不完全すな。

また気が向いた時に作ります。

器用貧乏はこんなことまで手を出してしまうんです。