【iOS】Interpolateでオシャレウォークスルー
Interpolateというライブラリを試してみました。
まずはCocoaPodsでインストールします。
target 'MyApp' do use_frameworks! pod 'Interpolate' end
次に実際に実装してみます。
今回は画面をスワイプすると色が黒から白に変わるというものを作ってみようと思います。
まずは下のようにInterpolateをwhiteとblackを渡して初期化します。
import UIKit import Interpolate class ViewController: UIViewController { var interpolate: Interpolate? override func viewDidLoad() { super.viewDidLoad() interpolate = Interpolate(from: UIColor.white, to: UIColor.black, apply: { [weak self] color in self?.view.backgroundColor = color }) } }
Interpolateは、下のようにprogressをセットして使います。
下のように0.5を入れれば、applyに灰色(初期化時に渡したfromとtoの中間色)を引数に呼び出されます。
progressに1.0を入れればtoの黒色が引数に渡され、0.0の場合はfromの白色が渡されます。
interpolate = Interpolate(from: UIColor.white, to: UIColor.black, apply: { [weak self] color in self?.view.backgroundColor = color }) interpolate?.progress = 0.5
次はスワイプに応じてprogressを渡す処理を実装します。
下のようにUIPanGestureRecognizerをセットします。
class ViewController: UIViewController { var interpolate: Interpolate? override func viewDidLoad() { super.viewDidLoad() interpolate = Interpolate(from: UIColor.white, to: UIColor.black, apply: { [weak self] color in self?.view.backgroundColor = color }) view.addGestureRecognizer(UIPanGestureRecognizer(target: self, action: #selector(self.swipeView(sender:)))) } @objc func swipeView(sender: UIPanGestureRecognizer) { let translation = sender.translation(in: view) let translatedCenterX = view.center.x + translation.x let progress = translatedCenterX / view.bounds.size.width interpolate?.progress = progress } }
これでスワイプに応じて白から黒に変わる処理が実装できました。
Interpolateですが、色だけでなくCGPointやCGFloatなども渡す事ができます。
Interpolate(from: CGPoint(x: 0, y: 0), to: CGPoint(x: 100, y: 100), apply: { [weak self] point in })
【iOS】静的ライブラリ(.aファイル)を作ってみる
iPhoneアプリ開発をしているとよく出てくる静的ライブラリですが、自分が作ったことはなかったので試しに作ってみました。
静的ライブラリの作成
まずはXcodeの新規プロジェクトで、Static Libraryを選択します。
プロジェクトを作成すると下のようなフォルダ構成になっています。
まずはログを出力するだけのメソッドを実装します。
@interface MyLibrary : NSObject - (void)outputLog; @end
#import "MyLibrary.h"
@implementation MyLibrary
- (void)outputLog {
NSLog(@"MyLibrary!");
}
@end
ビルドすると下のフォルダに.aファイルが生成されます。
ライブラリを使う時は、使いたいプロジェクトに.aファイルとヘッダーファイルを移動します。
あとはBridgingHeaderでimportをする事でライブラリを使えます。
#import "MyLibrary.h"
import UIKit class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() MyLibrary().outputLog() } }
参考URL
HEARTフレームワークでアプリの指標を考える
Googleが使っているHEARTフレームワークというものを使ってアプリの指標を考えてみました。
指標を考えたのは、運営中の体重管理アプリです。
HEARTフレームワークは下記事を参考にしました。
HEARTフレームワークとは
HEARTフレームワークとは指標を「ハピネス(Happiness)」「エンゲージメント(Engagement)」「アダプション(Adoption)」「リテンション(Retention)」「タスクの成功(Task success)」の5種類に分類する事で、利用する指標を選べるようにする事です。
それぞれは下のような意味になります。
・ハピネス(Happiness) 顧客調査を通じて得られるユーザーの態度に関する指標を指します。例えばユーザーの満足度、UIの使いやすさ、NPS(カスタマー・ロイヤルティを計測する指標）などが挙げられます。
・エンゲージメント(Engagement) ユーザーの関与レベルに関する指標を指します。ユーザーが一週間にサービスを利用した回数の平均、一日にアップロードした写真数の平均、シェア数など、一定期間内におけるユーザーインタラクションの深さや強さ、頻度を測ることによって得られます。
・アダプション(Adoption) プロダクトの全体や一部の機能を初めて使うユーザーに関する指標を指します。例えば、過去7日間で作られたアカウント数やラベル機能を使ったGmailユーザーの割合などです。
・リテンション(Retention) 既存ユーザーが戻ってくる割合を指します。例えば、ある期間内のアクティブユーザーがある一定期間後にどれだけ残っているか？または「チャーン」という言葉で知られているように継続をやめてしまった人の割合などが挙げられます。
・タスクの成功(Task success) これは作業効率(タスク完了までの時間など)、有効性(タスク完了率など)、エラー率などといった、昔から使われている指標を含みます。これは検索やアップロードのフローなど作業にフォーカスされたプロダクトにもっとも適用されるカテゴリーです。
HEARTフレームワークの使い方
HEARTフレームワークはGoals-Signals-Metricsというステップの中で利用するようです。
ゴールはアプリや機能の目標、シグナルはユーザーの具体的なアクション、メトリクスは具体的な数字です。
HEARTのそれぞれのGoals-Signals-Metrics事でより指標を分かりやすくするもののようです。
体重管理アプリに置き換えて考える
体重管理アプリではアクティブユーザー数が重要なので、「リテンション(Retention)」について考えてみました。
体重管理アプリのゴールとしてはユーザーが毎日利用してくれる事です。
1人が起動する回数は増やしにくいので、離脱する人を減らす事が重要になります。
シグナルとしては日々の体重の入力が考えられます。
カレンダー表示もグラフ表示も、体重を入力しないと意味がないので体重入力が一番大切なアクションです。
メトリクスはインストールした人の何割が7日後も入力しているかというものが良さそうだと思いました。
Firebaseで見る事ができるので、それを使って指標を追いかけてみようと思いました。
参考URL
Photoshopで写真の色相を調整する
色相調整を試してみました。
バージョンはCS3、画像はぱくたそ様のものを使っています。
色相を変えるのは「イメージ → 色調補正 → 色相・彩度」から行います。
ポップアップの色相を移動すれば色を変更する事ができます。
特定の色だけ変更したい時は「編集」プルダウンを使います。
対象色を細かく調整したい時は、一番下のスライドバーで調整します。
選択範囲の指定をすれば、そこだけ色相などの変更をする事もできます。
Photoshopで写真を切り抜き
Sketchでヒヨコを描いてみる
Sketchを使ってヒヨコを描いてみました。
バージョンはv43.2を使っています。
まずは黄色い楕円を描きます。
RGBは#FFF572です。
色相を色々調整したところ、ややオレンジよりの方がヒヨコっぽくなった気がします。
続けて三角形(Triangle)を追加して、角度調整して設置します。
RGBは#F29D17です。
続けて目を追加します。
次に足を作ります。
色はくちばしと同じです。
「足の上側を少し長めにする」「下側の真ん中の線は短くする」というところを意識したら良くなりました。
最後に尻尾を追加します。
まずは円を2つ描きます。
それをSubtractでグループ化すると下のような三日月型ができます。
あとはそれをサイズ調整しつつ配置してあげれば完成です。
Sketchでの画像切り抜きと画像加工
Sketchを使って画像加工をしてみました。
Sketchはv43.2、元画像はぱくたそ様の物を利用しています。
画像の切り抜き
まずは画像をダブルクリックします。
ダブルクリックすると、第3カラムに「Selection」というメニューが表示されます。
最後に「Selection」を選んで画像の部分選択、Cropボタン押下で切り抜き完了です。
複雑な形の切り抜き
MagicWandを複雑な形の切り抜きをする事ができます。
少し範囲の調整が難しいので、複数回に分けて実施すると良いかもしれません。
画像の色相/彩度/明度の変更とぼかし
色相/彩度/明度の変更とぼかしは第3カラムの下のメニューを調整する事でできます。
