• 私の個人アプリを作る流れを全部見せます その8：グリッド表示

    本企画の全記事はこちらから

    今回も編集画面を触っていきます。

    グリッド線（マス目）を表示できるようにしましょう。

    EditorViewでグリッド表示

    isGridというフラグを追加して、それがtrueの場合にグリッドを描画するようにします。

    var isGrid = false {
    didSet {
        setNeedsDisplay()
    }
}

    didSetについては「Swift 4プログラミング入門」の「9.3 メンバー」で説明しています。

    描画ロジックは簡単で、1〜31までループを回してそこに線を引いていくだけです。

  • 私の個人アプリを作る流れを全部見せます その7：1色のドット絵

    本企画の全記事はこちらから

    いよいよドット絵を描けるようにします。（まだ1色だけですが）

    今回の内容は、「Swift 4プログラミング入門」の15章の内容を使って実装できます。

    カスタムビュー

    EditViewControllerのビューをEditorViewというカスタムクラスを使うように設定します。 このクラスにドット絵を描く機能を持たせていきます。

    データの持ち方

    Pixel Art Pocketでは32×32のドット絵をサポートすることにします。

    データはドット数分の配列を用意して、そこにUIColorで色情報を持たせます。後から変えるかもしれませんが。

    こんな感じで透明で初期化しています。

    // 32×32ドットとする
static let dotsPerRow: CGFloat = 32.0
// ドット数分の配列を用意
var dots = Array(repeating: UIColor.clear, count: Int(dotsPerRow * dotsPerRow))

    描画機能

    EditorViewのtouchesMoved(_:with)でタップした位置から、配列の該当箇所を計算し、そこに色を入れます。

    本来は選択した色を使いますが、ここでは黒で決め打ちしています。

  • 私の個人アプリを作る流れを全部見せます その6：編集画面編

    本企画の全記事はこちらから

    今回は仮の編集画面を作ります。

    一覧から編集画面への遷移

    Storyboardから編集画面用のコントローラーを追加します。 そして、EditViewControllerというUIViewControllerのサブクラスを作り、このクラスを使うように設定します。

    さらに、一覧からセグエをつなぎます。 セグエにはeditと名前を付けておきます。

    このセグエをIndexViewControllerのtableView(_:didSelectRowAt:)から呼び出して画面遷移させます。
    ※ この動きは仮で最終的にはアクションシートが表示される予定。

    この辺りの手順は「Swift 4プログラミング入門」のSection 13.2「画面遷移」や13.8「テーブルビューを簡単に使う」が参考になります。

    これで、一覧のアイテムをタップすると真っ白な画面に遷移するようになりました。

    編集画面のUIを作る

    以下のようにして編集画面を作っていきます。

    1. Viewに背景色を付ける
    2. 幅・高さ300のサブビューを中央に置く
    3. ツールバーにボタンを置く（いずれアイコンにする）

    2.は14章のオートレイアウトを参考に作業すれば簡単です。

    こんな感じになりました。

    プロジェクトは以下のリンクからダウンロードできます。

    https://github.com/tnantoka/PixelArtPocket/releases/tag/my-app-dev-flow-6

    次回は、ドット絵を描く機能を作り始めます。

  • 私の個人アプリを作る流れを全部見せます その5：アイコン・起動画面編

    本企画の全記事はこちらから

    前回はXcodeのプロジェクトを作成し、各種バーに色を設定しました。 色が決まったので、今回はアイコンと起動画面（Launch Screen）の設定を済ませます。

    アイコンの作成

    Xcodeにはアイコンを作成する機能はないため、画像編集ツールなどで別途作成する必要があります。

    私はあまり画像の作成が得意ではないので、シンプルな文字だけのアイコンをSwiftで作ることが多いです。 そのためのツールがIconCreatorです。

    これを使うと、以下のような少量のコードでアイコンを作成することができます。

    CreatorConfiguration.loadFont(name: "JF-Dot-K14B.ttf") let iconCreator = IconCreator() iconCreator.config.fontName = "JF Dot K14" iconCreator.lengths = [120.0, 180.0, 1024.0] iconCreator.config.string = "P" iconCreator.config.fontSizeScaleY = 0.74 iconCreator.config.backgroundColor = UIColor(red: 0.0 / 255.0, green: 150.0 / 255.0, blue: 136.0 / 255.0, alpha: 1.0) iconCreator.config.textColor = .white iconCreator.save()
    作成されたアイコン
    ...

  • 「Swift 4プログラミング入門」ボーナスPDFの小冊子が店頭に

    「Swift 4プログラミング入門」ボーナスPDFを小冊子にしたものが書店様で御覧いただけるようになりました。

    以下は「紀伊国屋書店 新宿本店様」でのご展開の様子です。

    ボーナスPDFはボリュームの都合で書籍に入れられなかった内容なので、こうして冊子として形になるのは嬉しいです。

    よろしければ是非ご覧ください。