• 私の個人アプリを作る流れを全部見せます その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はボリュームの都合で書籍に入れられなかった内容なので、こうして冊子として形になるのは嬉しいです。

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

  • 私の個人アプリを作る流れを全部見せます その4：プロジェクト作成編

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

    今回はいよいよXcodeのプロジェクトを作成し、製作を進めていきます。

    プロジェクトの作成

    「Swift 4プログラミング入門」のSection 1.6等を参考にSingle View Appテンプレートを使ったプロジェクトを作成します。 実行するとおなじみの真っ白画面が表示されます。

    テーブルビューコントローラー

    Initial View ControllerをTable View Controllerに変更します。 操作方法はSection 13.8などに載っています。

    ここでは、ダミーでアイテムをいくつか表示しておきます。

    また、ナビゲーションコントローラーに入れて、ツールバーも表示しておきます。
    この辺りはボーナスPDFのSection 1.2が参考になります。

    色の設定

    このタイミングでアプリのメインとなる色も決めてしまいましょう。

    アプリのイメージや競合アプリとの比較など、色を決める際に考えるべきことはいろいろあります。

    今回はあまり深く考えず、Material Designのカラーパレットから選ぶことにしました。 使う色はGreenの600です。

    https://material.io/guidelines/style/color.html#color-color-palette

    色が決まったので、各種バーの色を設定します。 この手順もボーナスPDFのSection 1.2に掲載されています。

    また、Section 13.4に従ってステータスバーの色をLight Contentにしておきます

    ここまで終わると以下のようになりました。

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

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

    以降はこのプロジェクトにいろいろと機能を追加していくことになります。 次回は、コードを書き始める前に、アイコンと起動画面の設定を済ませてしまう予定です。

    ...

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

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

    今回は画面構成を考えて、実際に作業に入るためのタスク化をしていきます。

    画面構成

    私は紙で考えるのが好きです。 画面上でやるのが好きという人は、draw.ioなどの作図ツールを使うのもいいと思います。

    今回はこんな感じになりました。

    2画面構成のシンプルなアプリです。 （この程度の構成でも実はかなり書き直しており、これで6枚目ぐらいです。）

    テーブルビューをタップした時にメニュー（ActionSheet）が出るのは微妙ですが、ひとまずこれで行きます。

    没案（2018/03/28 追記）

    書き直した過程も見せて欲しいという声をいただきました。 残念ながらいつもの癖で失敗作は捨ててしまいましたが、今度何かアプリを作る時は残しておいてアップしようと思います。

    今回のアプリでは以下のような理由で没にした記憶があります。

    没にしたもの 理由
    一覧の左上にinfoボタンを置いて画面を出す ライセンスぐらいしか表示する情報がないので
    テーブルビューのタップで編集に遷移して、長押しでメニュー表示 長押しできることに気づけなさそうなので
    テーブルビューのスワイプでメニュー表示 ライブラリを増やしたくなかったので（スワイプで複数の操作をするためにはライブラリを使うのが楽）
    編集右上にアクションボタンを置いてメニューを出す 編集に関係ない操作は一覧に集約するため
    字が汚くなった、絵が失敗した、広告を付けるのを忘れていた 単純ミス

    ペーパープロトタイピング

    もっと真面目にUI/UXを検討するアプリの場合、ここでペーパープロトタイピングをします。 紙に画面を描いて、実際の操作をイメージして使ってみるというプロトタイピング手法です。

    紙はなんでもいいですが、マルマンのニーモシネというメモパッドが、書きやすく、高価でもないのでオススメです。

    また、

  • 私の個人アプリを作る流れを全部見せます その2：技術調査編

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

    前回の記事で作るものは「Pixel Art Pocket - ドット絵ポケット」というドット絵エディターに決まりました。 今回は、それが実際に作れるかどうかを確かめていきます。

    以下が、今回のアプリに必要そうな機能です。

    1. エディター
    2. 絵の保存
    3. 一覧表示
    4. SNSへのシェア
    5. 色の選択
    6. Undo/Redo
    7. アニメーションGIF

    それぞれ自分に実装できそうか確認していきます。

    1. エディター → ◎

    タップした位置にドットを描画し、完成した絵を画像にする機能です。

    拙著 15章の図形描画（15.1）や画像作成（15.5）の応用で実装できそうです。 UIはタップした座標を使って処理（17.1）するか、UIButton（12.1）を並べればなんとかなると思います。

    2. 絵の保存 → ◎

    作成したドット絵のデータを保存する機能です。

    各ドットの色情報を構造体に配列で持っておき、Codable（9.11）でテキストに変換し、テキストファイルとして保存（18.1）すればよいでしょう。

    3. 一覧表示 → ◎

    今まで保存したデータを一覧表示する機能です。

    テーブルビュー（11.7、13.8）を使えば簡単です。エディター画面との画面遷移にはナビゲーションコントローラー（13.6）を使うことにします。

    4. SNSへのシェア → ◎

    ドット絵をSNSにシェアする機能です。

    これはUIActivityViewController（13.14）に画像を渡すだけでよさそうです。

    5. 色の選択 → ◯

    エディターをタップした時にどの色でドットを描くか、ユーザーが選択する機能です。

    iOSには色を選択する標準部品はありません。 GitHubで