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

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

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

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

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

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

    このセグエをIndexViewControllertableView(_: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はボリュームの都合で書籍に入れられなかった内容なので、こうして冊子として形になるのは嬉しいです。

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

  • 私の個人アプリを作る流れを全部見せます その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を検討するアプリの場合、ここでペーパープロトタイピングをします。 紙に画面を描いて、実際の操作をイメージして使ってみるというプロトタイピング手法です。

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

    また、