• 私の個人アプリを作る流れを全部見せます その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で

  • 私の個人アプリを作る流れを全部見せます その1:アイディア編

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

    今回は個人アプリなので自分で全部決めます。 会社やチームで作成する場合は、流れが違ってくるでしょう。
    (本当は個人アプリでもこの段階でデザイナーさんにお手伝いいただいた方が絶対に良いのですが…。)

    作るものを決める

    まずは作るものを決めます。

    私が作るものは以下のようなものが多いです。

    • 自分が使うもの
    • 家族が使うもの
    • 売れそうなもの、儲かりそうなもの
    • 新しい技術を使って作れそうなもの(勉強になるもの)
    • 思いつき

    今回は完全に思いつきで「ドット絵を描けるアプリ」を作ることにしました。

    どんな機能が必要か

    作ると決めたアプリにだいたいどんな機能が必要そうか、書き出します。

    • ドット絵を描くエディター機能
    • 絵のサイズは32などの固定でよい。
    • 色の選択
    • Undo/Redo
    • 保存
    • 編集・複製・削除
    • SNSへのシェア
    • 一覧表示
    • 広告表示(マネタイズ)
    • アニメーションGIFとかできたらおもしそう。

    後で詳細化するので、ここではあまり難しく考えずに思いつくままです。

    名前を決める

    名前を考えるのはとても大変です。

    しかし、今は便利な指標があります。それは「ドメインを取れるか」です。

    私は以下のような流れで決めています。

    1. 思いつく名前をいくつかあげる。
    2. ムームードメインなどで検索して、.com.netを取得できるか確認する。
      (末尾にappを付けたドメインで許容することもある。)
    3. ドメインが取れたものの中から一番気に入ったものをアプリの名前にする。

    この流れのデメリットは、気に入った名前のドメインが取れなかった時に結構ショックを受けることです…。

    今回は実際にドメインは取りませんが、以下のような案からドメインを取れるものを探しました。

    • dotdot
    • pictdot
    • pixelart
    • picturecellart
    • pixelput
    • dottoe
    • pixela
    • ...
  • 「私の個人アプリを作る流れを全部見せます」という企画を始めます

    「iOSアプリを作りたくて、入門書で勉強した。サンプル程度のアプリなら作れるようになった。でもいざ自分のオリジナルアプリを作ろうとすると何から始めていいかわからない…。」

    初心者の方が陥りがちな状況かもしれません。

    そのような方々に向けて、私が実際に1つの個人アプリを作り始めてリリースするまでの流れを赤裸々に見せる企画を始めたいと思います。

    Swift 4プログラミング入門 iOS 11+Xcode 9対応」は、初めてアプリを作る人でも、実際にストアのリリースまで行って欲しいなという思いで書きました。 この企画が、初めてストアにアプリをリリースする方々の背中を押せれば幸いです。

    実際の記事は下のリンクから読めます。

    記事は随時更新して追加いきます。