しめ鯖日記

swift, iPhoneアプリ開発, ruby on rails等のTipsや入門記事書いてます

【チュートリアル実践】Illustratorで金色の文字を描く

こちらのチュートリアルを参考に下のような画像を作ってみました。

illustratorのグラデーションで文字を金色&メタリックな輝きにするチュートリアル

f:id:llcc:20171207162013p:plain

学んだことなど

  • グラデーションで、暗い色と明るい色を隣接させるときれいな色になる
  • 影になっている文字は、半分くらいしか見えないようにした方が良かった
    • 影の部分は、元サイトに比べるとイマイチだった

Photoshopでパターンを定義できない時の対処法

PhotoshopのCS3で「パターンを定義を定義」しようとしたのですが、下のように選択できない状態になってしまいました。

f:id:llcc:20171201150303p:plain

「パターンを定義を定義」が選択できない時の対処法

こちらですが、モードが32 bit/チャンネルを選んでいるのが原因でした。
これを16 bit/チャンネルに変更することで「パターンを定義を定義」を選べるようになりました。

f:id:llcc:20171201150411p:plain

「webおよびデバイス用に保存」が選択できない場合

「webおよびデバイス用に保存」が選択できない問題も、モードを「16 bit/チャンネル」に変更する事で解消できました。

f:id:llcc:20171201150510p:plain

そもそもモードとは何か

RGB 画像では、3 つのカラー(チャンネル)を使用して、画面上にカラーを再現します。1 チャンネルが 8 ビットの画像では、これらの 3 つのチャンネルは 1 ピクセル当たり 24(8 ビット × 3 チャンネル)ビットのカラーを表現します。24 ビット画像では、3 つのチャンネルによってピクセルあたり最大 1,670 万色を再現できます。48 ビット画像(16 bit/チャンネル)および 96 ビット画像(32 bit/チャンネル)では、さらに多くのカラーを再現できます。RGB モデルは、Photoshop で新規画像を作成する際の初期設定モードです。また、モニターでは常に RGB モデルを使用してカラーを表示します。このため、Photoshop では、CMYK などの RGB 以外のカラーモードを使用する画像の場合は、画面に表示するために CMYK 画像が RGB に変換されます。

Photoshop のカラーモードについて

RGBモードの場合、ビット数は1pxの1色のビット数を表すようです。
つまり8ビットは赤・青・緑のそれぞれに8ビットを割り当てる状態です。

Illustratorのメッシュツールを使って複雑なグラデーションを表現する

Illustratorメッシュツールを試してみました。

まずは画面上に四角形を配置します。

f:id:llcc:20171125144039p:plain

次に、ツールボックスのメッシュツールを選びます。

f:id:llcc:20171125144105p:plain

その状態でオブジェクトをクリックするとメッシュラインが作成されます。

f:id:llcc:20171125144350p:plain

メッシュラインを選んだ状態で、カラーを変更するとオブジェクトにグラデーションが設定されます。

f:id:llcc:20171125144426p:plain

f:id:llcc:20171125144433p:plain

メッシュラインは複数配置する事もできます。

f:id:llcc:20171125144514p:plain

ラインを曲げると、それに合わせてグラデーションも変化します。

f:id:llcc:20171125144533p:plain

MYBlurIntroductionViewを使ったチュートリアル作成

MYBlurIntroductionViewというウォークスルーを作るライブラリを試してみました。

f:id:llcc:20171106132253g:plain

github.com

インストールはCocoaPodsで行います。

target 'MyApp' do
  use_frameworks!

  pod 'MYBlurIntroductionView'
end

実際に使うにあたって、まずは適当なアイコンをプロジェクトに追加します。

f:id:llcc:20171106141433p:plain

アイコンは下サイトのものを利用しました。

icooon-mono.com

アイコンを追加したら実際に実装していきます。
おおまかな流れとしては「MYIntroductionPanel(ウォークスルーの各ページに相当)を複数個作成、それを元にMYBlurIntroductionViewを作って画面にセットする」という流れです。

import UIKit
import MYBlurIntroductionView

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let headerView = UIView(frame: CGRect(x: 0, y: 0, width: view.frame.size.width, height: 100))
        headerView.backgroundColor = UIColor.blue
        
        let panel1 = MYIntroductionPanel(frame: view.bounds, title: "Welcome to MYBlurIntroductionView", description: "MYBlurIntroductionView is a powerful platform for building app introductions and tutorials. Built on the MYIntroductionView core, this revamped version has been reengineered for beauty and greater developer control.", image: #imageLiteral(resourceName: "book"), header: headerView)
        panel1?.backgroundColor = UIColor.darkGray
        
        let panel2 = MYIntroductionPanel(frame: view.bounds, title: "Automated Stock Panels", description: "Need a quick-and-dirty solution for your app introduction? MYBlurIntroductionView comes with customizable stock panels that make writing an introduction a walk in the park. Stock panels come with optional overlay on background images. A full panel is just one method away!", image: #imageLiteral(resourceName: "pen"))
        panel2?.backgroundColor = UIColor.lightGray
        
        let introductionView = MYBlurIntroductionView(frame: view.bounds)
        introductionView.buildIntroduction(withPanels: [panel1, panel2])
        view.addSubview(introductionView)
        introductionView.backgroundImageView.image = #imageLiteral(resourceName: "pen")
    }
}

アプリを起動すると、下のように2ページだけのウォークスルーを作成できました。

f:id:llcc:20171106141614g:plain

各ラベルへのアクセスできるので、フォントや文字色も簡単に変更できます。

let panel1 = MYIntroductionPanel(frame: view.bounds, title: "Welcome to MYBlurIntroductionView", description: "MYBlurIntroductionView is a powerful platform for building app introductions and tutorials. Built on the MYIntroductionView core, this revamped version has been reengineered for beauty and greater developer control.", image: #imageLiteral(resourceName: "book"), header: headerView)
panel1?.panelTitleLabel.textColor = UIColor.darkGray
panel1?.panelDescriptionLabel.textColor = UIColor.lightGray

f:id:llcc:20171106142014p:plain

delegateで、下のイベントを取ることが可能です。

extension ViewController: MYIntroductionDelegate {
    func introduction(_ introductionView: MYBlurIntroductionView!, didFinishWith finishType: MYFinishType) {
    }
    
    func introduction(_ introductionView: MYBlurIntroductionView!, didChangeTo panel: MYIntroductionPanel!, with panelIndex: Int) {
    }
}

【読書メモ】Hooked ハマるしかけ

こちらの本を読んでみました。
Hookedというモデルを通して、インスタグラムなどの有名アプリのヒットの仕組みについて書かれています。

メモ

  • フックモデルは人間を習慣づけさせる為のフレームワークで、4ステップで構成されている
  • ステップは「トリガー」「アクション」「リワード」「インベストメント」の4つ
  • トリガーはアクションを起こすためのきっかけ、外的トリガーと内的トリガーの2種類がある
  • 外的トリガーはアプリインストールの為の広告や口コミなど
  • 内的トリガーは良い景色を見た時に投稿したくなるなど
  • 内的トリガーを増やすためには、ユーザーのニーズを把握する事が重要
  • アクションはトリガーの次のステップで、実際に行動する部分
  • 行動するために必要なのは「モチベーション」「行動するための能力」「トリガー」の3つが必要
  • 行動するための能力はできるだけ低くする方が良い(プロダクトを簡単に使えるようにする)
  • 希少効果でモチベーションを高めることができる(例: Amazonの「残り○点」という表示で購買意欲を高める)
  • エンダウド・プログレス効果という、「ゴールに近い状態だとモチベーションが上がりやすい」という法則がある
  • エンダウド・プログレス効果を使った例として、WEBサービスのプロフィール完成度の表示などがある
  • リワードは予測不能な事が重要、予想可能だと喜びが減る
  • 報酬は「トライブ」「ハント」「セルフ」の3つがある
  • 「トライブ」は周囲に認められることで、Facebookのいいねなどがある
  • 「ハント」は何かを探し求めること、スロットマシンで当たりを出したりTwitterで良い情報を見つけることなどがある
  • 「セルフ」は何かの達成するなどの報酬、ゲームでのレベルアップ時の満足感などがある
  • 人は自主性を損なうと抵抗を感じる
  • 「インベストメント」はユーザーに求める行動
  • 人は行動すればするほど価値を感じる(例: 長い時間を使ったゲームに価値を感じる)

Embedded Frameworkを作ってみる

iOS8から導入されたEmbedded Frameworkを試してみました。
Embedded Frameworkは動的なライブラリで、プロジェクト分割によってコンパイル速度が早くなる・Extensionとの共通処理を書きやすいと言った利点があるようです。

まずは新規プロジェクトの作成をします。

f:id:llcc:20171104134037p:plain

次に、Targetの追加を押します。

f:id:llcc:20171104133817p:plain

下の方にあるCocoa Touch Frameworkを選びます。

f:id:llcc:20171104133830p:plain

これでEmbedded Frameworkを作る事ができました。
作ると下のようにターゲットが追加されます。

f:id:llcc:20171104134141p:plain

同時に、下のようにフォルダが作られます。

f:id:llcc:20171104134156p:plain

続けてEmbedded Frameworkのコードを読み取ってみようと思います。
Embedded Frameworkにファイルを追加します。

f:id:llcc:20171104134229p:plain

外部からクラスを参照する場合はpublicを付ける必要があります。

import UIKit

public class MyClass: NSObject {
}

作ったクラスをプロジェクトから呼び出すには、下のようにimportします。

import UIKit
import MyLibrary

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        _ = MyClass()
    }
}

PalauでUserDefaultsの管理を簡単に

Palauというライブラリを試してみました。

github.com

インストールはcocoapodsで行いました。

target 'MyApp' do
  use_frameworks!

  pod 'Palau'
end

使い方は下の通りです。
下のようにまずは変数を定義します。

import UIKit
import Palau

extension PalauDefaults {
    static var name: PalauDefaultsEntry<String> {
        get { return value("myName") }
        set { }
    }
}

定義した変数は下のように使えます。

print(PalauDefaults.name.value) // → nil
PalauDefaults.name.value = "MyString"
print(PalauDefaults.name.value) // → MyString

String以外にも対応しています。

extension PalauDefaults {
    static var count: PalauDefaultsEntry<Int> {
        get { return value("myCount") }
        set { }
    }
}

デフォルト値は下のようにwhenNilで定義します。

extension PalauDefaults {
    static var name: PalauDefaultsEntry<String> {
        get { return value("myName").whenNil(use: "myDefaultString") }
        set { }
    }
}

didSetを使ってセット時のイベントを取る事ができます。
ブロックの第一引数が新しい値、第二引数が古い値です。

extension PalauDefaults {
    static var name: PalauDefaultsEntry<String> {
        get { return value("myName").didSet { print($0, $1) } }
        set { }
    }
}

下のように条件付き値を扱う事もできます。
ここでは10以下場合は10がセットされるようにしています。

extension PalauDefaults {
    static var count: PalauDefaultsEntry<Int> {
        get { return value("myCount").ensure(when: { ($0 ?? 0) < 10 }, use: 10) }
        set { }
    }
}

PalauDefaults.count.value = 5
print(PalauDefaults.count.value) // → 10
PalauDefaults.count.value = 11
print(PalauDefaults.count.value) // → 11