このエントリーをはてなブックマークに追加

2017年2月10日金曜日

Swift3でSCLAlertViewを使ってみた

こんにちは、onukiです。

今回はSwiftでフラットなデザインの
アニメーション付きアラートビューが扱える
SCLAlertViewを試してみたいと思います。

準備

おなじみCocoaPodでインストールします。
pod 'SCLAlertView'

実装

今回はボタン付きのアラートを表示したいと思います。
まずはSCLAlertViewをインポートします。
import SCLAlertView
アラートビューを表示します、ボタンは二つ用意します。
let alertView = SCLAlertView()
//ボタンの追加
alertView.addButton("ボタン1") {
    //タップ時の処理
    print("ボタン1をタップしました")
}
alertView.addButton("ボタン2") {
    print("ボタン2をタップしました")
}
//表示実行
alertView.showSuccess("ボタン付きアラート", subTitle: "説明")
そうするとこのように表示されます。

今回は基本的なボタン付きのアラートでしたが、
他にもテキスト入力できるもの、ボタンなしで時間指定で閉じるもの等
色々あるので、興味を持たれた方は作者のgithubを拝見してみてください。

2017年2月9日木曜日

はじめの一歩 -Rails ActiveRecord編- UPDATE2


どうも、はじめです。
前回はUPDATEについて書いてみました。
はじめの一歩 -Rails ActiveRecord編- UPDATE
今回はUPDATEの際readonlyやvalidationで更新ができなかった場合に関して書いていこうと思います。


はじめに


今回も前回と同じテーブルを使用しようと思います。
usersテーブル
[id: 1, user_name: 'Aさん'],
[id: 2, user_name: 'Bさん'],
[Id: 3, user_name: 'Cさん']

itemsテーブル
[id: 1, item_name: 'Rubyの本'],
[id: 2, item_name: 'Railsの本'],
[id: 3, item_name: 'PHPの本']

user_itemsテーブル(userが持っているitemを管理するテーブル)
[id: 1, user_id: 1, item_id: 1],
[id: 2, user_id: 1, item_id: 2],
[id: 3, user_id: 2, item_id: 3]

関連性
user : user_item => 1 : n
item : user_item => 1 : n


ではまず【readonly】で更新できなかった場合の対処法を書いてみます。

readonly


下のように更新をしてみます。
[id: 2, user_id: 1, item_id: 2]
↓
[id: 2, user_id: 1, item_id: 3]
手元でなかなかreadonlyになる状況を再現できなかったため
以下の方法でreadonlyにしました。
user_item = UserItem.readonly(true)

この状態で変更しようとしても更新できません。
user_item.find(2).update(item_id: 3)
# ActiveRecord::ReadOnlyRecord: UserItem is marked as readonly

これだとreadonlyでrollbackされてしまいます。

モデルからインスタンスを取得する際にreadonlyをfalseにしてあげれば更新が可能になります。
user_item = UserItem.readonly(false)
user_item.find(2).update(item_id: 3)


次に【validation】でエラーになった場合です。

validation


ユーザーの登録の際、user_nameを入力必須にしていたとします。
入力必須のバリデーションを定義するにはUserモデルに対し以下のように定義します。

# app/models/user.rb
class User < ApplicationRecord
 validates :user_name, presence: true
end

この状態でユーザー名を空で登録しようとするとエラーになります。
user = User.new
user.save

次のように記述することで一時的にバリデーションを無効にすることができます。
user = User.new
user.save(:validate => false)


最後に


validationを一時的に無効にすることは可能ですが、
今回例としてあげたのケースの場合、
DBでuser_nameにnot null制約がかかっているとバリデーションを無視することができても、
DBへの登録時にエラーになってしまいますので気をつけましょう。

次回はupdate_attributeとupdate_attributesを使ってみようと思います。

2017年2月8日水曜日

アニメーション









どうもーデザイナーのnottyです。

先日AirbnbDesignからAfter Effectsで作成したアニメーションをレンダリングして
iOS・Android・React Native向けのアニメーションに変換してくれる、『Lottie』が公開されました!

In the past, building complex animations for Android, iOS, and React Native apps was a difficult and lengthy process. You either had to add bulky image files for each screen size or write a thousand lines of brittle, hard-to-maintain code. Because of this, most apps weren’t using animation — despite it being a powerful tool for communicating ideas and creating compelling user experiences. One year ago, we set out to change that.
複雑なアニメーションを作るためには、保守が大変で大量のコードを書かないといけない必要だったが、Lottieによって、それは変わりました。的なことが書かれています。

『Lottie introducing』




現在、私が使用しているアプリで
お気に入りや、ローディング、いいねボタンなど
いたるところにアニメーションが使用されています。

ユーザーにとって、ストレスにもなりうるウォークスルーなどに
見てて気持ちの良いアニメーションを作成すると非常に効果的かもしれません。

このライブラリがでて非常に良かったのですが、
それ以上に事業会社からこういった技術(デザイン)をシェアするという事に
毎回興奮します。日本からもこういうプロダクト(技術)などもっといっぱいでると良いなと思う次第でございます。

2017年2月7日火曜日

2017年2月6日月曜日

配牌からあがれる可能性を予測する!(その5 実際にテストしてみる)

こんにちは、Taroです。
前回の記事の記事の続きになります。
配牌からあがれる可能性を予測する!(その4 勾配を求める際に詰まったこと)
今回は実際にテストしてみたいと思います。

テストに使用した配牌について


Youtubeであがっていた○凰のプレイ動画を1半荘分試しました。

結果


# 第一要素があがれる方、第二要素があがれない方
# 重み
[[-0.09800755  0.09915648]    # 順子
  [ 0.15426824 -0.17342399]    # 対子
  [-0.61190551  0.61323983]]  # 暗刻

# バイアス
[-0.84420447  0.84420447]
この結果だけ見ると、対子の数があがれる方に寄与しているように見えます。
逆に暗刻があるとあがりにくいようです笑
ちょっとリャンメンやカンチャンの形も要素に入れた方が良かったかな、と後悔し始めておりますが、とりあえずこのまま進めたいと思います。

結果を記載しますが、配牌を記載するとおさまりきらないので、「あがれた」か「あがれなかった」を記載します。
結果 あがれる確率 あがれない確率
東1局 あがれない 17% 83%
東2局 あがれない 29% 71%
東3局 あがれない 7% 93%
東3局1本場 あがれない 17% 83%
東4局 あがれない 33% 67%
南1局 あがれる 20% 80%
南1局1本場 あがれない 26% 74%
南2局 あがれない 17% 83%
南3局 あがれる 26% 74%
南4局 あがれる 23% 77%

パッと見、ちゃんと予測できているようには見えないです。
よく考えたら、麻雀は4人のうち1人があがれるゲームなので、単純計算でアガれる確率は25%です。
教師データが足りないのかもしれないと思い、とりあえずプロの対局1局分追加してみました。

結果②


# 第一要素があがれる方、第二要素があがれない方
# 重み
[[ 0.17258578  -0.17396835]    # 順子
  [ 0.20088727 -0.20564398]    # 対子
  [-0.33262621  0.34681625]]  # 暗刻

# バイアス
[-1.07893278  1.07893278]
先ほどとは重みが変わり、順子もアガれる確率に寄与するようになりました。
それではこちらのパラメータをもとに同じテストデータで実験してみます。
比較しやすいよう先ほど求めた結果を①とし、アガれない確率のみ記載します。
結果 結果①のアガれない確率 結果②のアガれない確率
東1局 あがれない 83% 73%
東2局 あがれない 71% 64%
東3局 あがれない 93% 92%
東3局1本場 あがれない 83% 80%
東4局 あがれない 67% 72%
南1局 あがれる 80% 85%
南1局1本場 あがれない 74% 79%
南2局 あがれない 83% 80%
南3局 あがれる 74% 79%
南4局 あがれる 77% 73%

結果の方も変化しました。
10局のうち、6局の「アガれない確率」が下がっています。
つまり「アガれる確率」が上昇しています。
このことから、結果①の時点では、「アガれる」可能性を過少評価していることが考えられます。

おわりに


今後の目標としては、
  • 教師データを増やす
  • レイヤーのノードを追加(リャンメン、カンチャン、ペンチャン)の数

とりあえず、まずは教師データを作成するのが楽になるインターフェースを実装したいと思います。
参考のソースコードはこちらになります。
https://github.com/naoki85/python_mahjong

2017年2月4日土曜日

Swift3でLTMorphingLabelを使ってみた

こんにちは、onukiです。

今回はLTMorphingLabelというライブラリが
面白そうなので使ってみました。

LTMorphingLabelとは


ラベルのテキスト変更時にエフェクトをつけてくれるライブラリです。
作者のgithubにエフェクトのサンプルがあるのですが、
見ているだけで試してみたい欲に駆られますね。

準備


今回はCocoaPodsで追加します。
ただし、現在Swift3ではブランチの指定をしないと
ビルドが通らないみたいなので気をつけて下さい。
pod 'LTMorphingLabel', :git => 'https://github.com/lexrus/LTMorphingLabel.git', :branch => 'swift3'

実装


まずはLTMorphingLabelをimportします。
import LTMorphingLabel

StoryboardにUILabelを適当に用意し
ClassにLTMorphingLabelを指定してください。
それをIBOutlet接続します。
@IBOutlet weak var morphingLabel: LTMorphingLabel!

エフェクトの定義を行います。
morphingLabel.morphingEffect = .evaporate
エフェクトの種類、サンプルに関しては作者のgithubを参照してください。

これでmorphingLabelのtextを変更すると
エフェクトがかかるようになります。

これだけだとイマイチエフェクトの切り替わりを実感できないのでTimerで
morphingLabelのtextを更新するようにしてみたいと思います。
    @IBOutlet weak var morphingLabel: LTMorphingLabel!
    
    //表示制御用タイマー
    private var timer: Timer?
    //String配列のindex用
    private var index: Int = 0
    //表示するString配列
    private let textList = ["シンプルであることは、", "複雑であることよりも", "難しい"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // エフェクトの定義
        morphingLabel.morphingEffect = .evaporate
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        //タイマーの追加
        timer = Timer.scheduledTimer(timeInterval: 3.0,
                                     target: self,
                                     selector: #selector(update(timer:)), userInfo: nil,
                                     repeats: true)
        timer?.fire()
    }
    
    override func viewDidDisappear(_ animated: Bool) {
        super.viewDidDisappear(animated)
        
        timer?.invalidate()
    }
    
    func update(timer: Timer) {
        //ここでtextの更新
        morphingLabel.text = textList[index]
        
        index += 1
        if index >= textList.count {
            index = 0
        }
    }
これでLTMorphingLabelのエフェクトを堪能できると思います。

実装も簡単ですし、見た目も素晴らしいので色々使ってみたいですね。

2017年2月3日金曜日

Swift3でTTTAttributedLabelリンク表示の指定をやってみた

こんにちは、onukiです。

以前、TTTAttributedLabelでのリンク表示を紹介しましたが
今回は応用でLabelにリンクを表示したくない時などに使える
リンク表示の指定をやって見たいと思います。

準備

前回の記事を参照してください。

実装

今回は表示の文字列から「URL」の部分をタップできるようにします。
//リンクをタップできるように設定
linkLabel.enabledTextCheckingTypes = NSTextCheckingResult.CheckingType.link.rawValue
//リンクのタップを制御するために設定
linkLabel.delegate = self
let label = "URLをタップできます。"
linkLabel.text = label
//labelから“URL”を部分を選択
let range = NSRange.init(location: 0, length: 3)
//タップした時の接続先
let url = URL(string: "https://www.google.co.jp/")
//TTTAttributedLabelにリンクを指定
linkLabel.addLink(to: url, with: range)

実行するとこのような表示になります。


「URL」をタップすると以下のメソッドが呼ばれます。
func attributedLabel(_ label: TTTAttributedLabel!, didSelectLinkWith url: URL!) {
    print(url)//url => https://www.google.co.jp/
}

遷移するURLを画面に表示しないので色々使えると思います。

2017年2月2日木曜日

はじめの一歩 -Rails ActiveRecord編- UPDATE


どうも、はじめです。
前回はJOINについて書いてみました。
はじめの一歩 -Rails ActiveRecord編- SELECT4
今回はUPDATEに関して書いていこうと思います。


はじめに


今回も前回と同じテーブルを使用しようと思います。
usersテーブル
[id: 1, user_name: 'Aさん'],
[id: 2, user_name: 'Bさん'],
[Id: 3, user_name: 'Cさん']

itemsテーブル
[id: 1, item_name: 'Rubyの本'],
[id: 2, item_name: 'Railsの本'],
[id: 3, item_name: 'PHPの本']

user_itemsテーブル(userが持っているitemを管理するテーブル)
[id: 1, user_id: 1, item_id: 1],
[id: 2, user_id: 1, item_id: 2],
[id: 3, user_id: 2, item_id: 3]

関連性
user : user_item => 1 : n
item : user_item => 1 : n


UPDATEを行うには主に以下の二つの方法があります。
・saveメソッドを使用する。
・updateメソッドを使用する。

でははじめに【saveメソッド】を使用した方法から書いていきます。


save


user_itemsを以下のように変更したいと思います。
[id: 3, user_id: 2, item_id: 3]
↓
[id: 3, user_id: 3, item_id: 3]

1.変更したいモデルインスタンスを取得
user_item = UserItem.find(3)

2.変更したい値を代入
user_item.user_id = 3

3.代入が完了したら登録
user_item.save

以上の手順でupdateが完了します。
2で複数のカラムを変更することも可能です。


次に【updateメソッド】を使用した方法を書いてみます。

update


updateでも同様にuser_itemsを以下のように変更したいと思います。
[id: 3, user_id: 2, item_id: 3]
↓
[id: 3, user_id: 3, item_id: 3]

updateメソッドを使用する際も2つの方法があります。
一つはsaveメソッドと同じように変更したいモデルインスタンスを取得し、
updateという流れになります。

user_item = UserItem.find(3)
user_item.update(user_id: 3)

もう一つは一度変数にインスタンスを取得するという工程を飛ばす方法です。

UserItem.find(3).update(user_id: 3)

どれも結果は同じになります。


まとめ


updateをする際変更したいレコードがreadonlyになっていた場合や、
validation等の関係で更新が失敗する場合があります。
その場合の対処法等を次回書いてみようと思います。

2017年2月1日水曜日

作業用BGMについて

デザイナーの nottyです。今日は普段、作業する際に聞く音楽を紹介したいと思います。
音楽を聴くと捗る場合や、逆に捗らない時もあります。
どんな時に聴いているかも記載するので、参考になればと思います。

ルーチンワーク系

主にMIXをかけています。同じトーン,テンポが続く曲は繰り返し行う作業系に向いてると思います。またMIXなので変化があり、飽きずに聴くことができます。
こういう音楽は特に集中すると聴こえなくなります。


【日本語ラップ MIX】DJ KRO 
TOKYO AFTERNOON JAPANESE HIPHOP MIX

Nujabes - Modal Soul

クリエイティブ系

製作する内容にあわせて音楽を変えています。クラブイベントのフライヤーを作成するときは、
出演するDJが流す曲、主にイベントで流れる曲を聴いて作成します。
サウンドクラウドでDJを検索するとMIXが上がっていたりします。



他にもゲームのデザインをした時は名作ゲームの音楽を聴いてました。



ブレスト/資料作成系
気分をあげたり、リラックスしたり感情の浮き沈みがあるタスクの時は
Spotify
・気分によってプレイリストを選択

Prime music
・プライムラジオで垂れ流し
と使い分けています。

他にも
ジ・居酒屋サウンド
http://413tmks.s3.amazonaws.com/izakayasound/index.html


おと風景
http://otofukei.com/
などの環境音を作業用BGMにします。

気分に合わせて、捗る音楽をチョイスできるのもスキルだと思うので、
普段聴かない音楽を聴いてタスクへ向かうのも良いのではないでしょうか。

個人的にはEDMをガンガンにかけて体を揺らしながらデザインがしたいものです。