う-02

IT-デザイン-UI

Just1factory

iOSアプリ開発関連のTIPS集を中心に技術書を販売しています。 https://just1factory.net/ 著者のGithub: こちらに販売している書籍のサンプルコードを掲載しています。 https://github.com/fumiyasac/

チェックする

iOSアプリ開発「UI実装であると嬉しいレシピブック」

同人誌・142ページ・8部頒布・紙・1,000円

チェックする

✨ 概要

「少しの工夫とアイデアでできる表現集」として、これまでサンプル開発や実務の中で培ったノウハウ等から、UI実装いくつかのまとまったサンプル実装を例にUI構築をする上で重要な実装ポイントやアイデアを紹介していく形式にしてみました。

これからiOS アプリを本格的に開発していこうと考えている方や、UI 実装や表現に関する部分にさらなる磨きをかけていきたい方にとって本書が少しでもお役に立つことができれば幸いです。

✨ 収録サンプルのダウンロードについて

下記URLにこの中で解説を行なっているサンプルコードのGithubリポジトリも公開しておりますので、是非実際のコードとご一緒に活用して頂ければと思います。

https://github.com/fumiyasac/ios_ui_recipe_showcase

✨ 目次

まえがき

動作環境及びバージョン
サンプルに関して
誤表記などに関するお問い合わせに関して
サンプルのURLと見た目

第1章サイドナビゲーション型のUI

1.1 ContainerViewに関するおさらい
1.2 ContainerViewの活用ポイント
1.3 スライドするメニュー表示の概要と実装
1.4 StoryBoard構成とコードの解説
1.5 コーヒーブレイク

第2章写真を拡大する画面遷移UI

2.1 View実装に関するTips集
2.2 使用したライブラリのご紹介
2.3 カスタムトランジションの基本実装
2.4 画面遷移前の一覧画面の実装
2.5 画面遷移後の詳細画面の実装
2.6 本サンプルにおける画面遷移表現のまとめ
2.7 コーヒーブレイク

第3章 Tinder風のUI

3.1 実装する上でのポイント
3.2 処理の橋渡しを行うプロトコル実装
3.3 画面に追加した際の演出
3.4 カード状のViewとUIPanGestureRecognizer
3.5 UIViewControllerとの連携部分の実装
3.6 UIScrollViewを利用した画像表示の実装
3.7 コーヒーブレイク

第4章入力フォームの実装例

4.1 入力に関するView部品の実装
4.2 使用したライブラリのご紹介
4.3 UITableViewを利用した表現Tipsの紹介
4.4 入力フォームの部分に関する画面実装
4.5 コーヒーブレイク

あとがき

今回の執筆に当たって
筆者プロフィール

電子版を購入

iOSアプリ開発「UI実装であると嬉しいレシピブック Vol.2」

商業誌・196ページ・8部頒布・紙・1,000円

チェックする

✨ 概要

iOSアプリ開発「UI実装であると嬉しいレシピブック Vol.2」では前回の技術書典5で頒布致しました書籍の続編となります。内容は少し趣向を変えて更にアプリのUIを一つ上のステージへ上げるためのテクニックやGithub等で公開されているOSSのUIライブラリを上手に活用するためのTipsを紹介しております。

✨ 収録サンプルのダウンロードについて

https://github.com/fumiyasac/2nd_ios_ui_recipe_showcase

✨ 目次

まえがき

動作環境及びバージョン
サンプルに関して
誤表記などに関するお問い合わせに関して

サンプルのURLと見た目

第1章
第2章
第3章

第1章 TabBar Animation & Layout

1.1 事前準備に関して
1.2 本章で収録しているサンプル実装における概要
1.3 利用したライブラリの紹介
1.4 このサンプルで利用している便利なExtension集
1.5 TabBarControllerの切り替え時にアニメーションを付与する
1.6 部品となるViewを実装する
1.7 このサンプルで利用しているアーキテクチャ
1.8 UITableViewでのコンテンツ一覧表示に関する実装
1.9 UICollectionViewでの画像コンテンツ表示に関する実装
1.10 コーヒーブレイク

第2章 API Connection & Layout

2.1 事前準備に関して
2.2 本章で収録しているサンプル実装における概要
2.3 利用したライブラリの紹介
2.4 このサンプルで利用しているアーキテクチャや画面構成について
2.5 各種画面表示をするViewControllerから見る実装ポイント
2.6 API通信処理に関連する部分テストコードについて
2.7 コーヒーブレイク

第3章 Modify Transition & Layout

3.1 事前準備に関して
3.2 このサンプル実装における概要
3.3 利用したライブラリの紹介
3.4 このサンプルで利用しているアーキテクチャや画面構成について
3.5 各種画面表示をする ViewController から見る実装ポイント
3.6 コーヒーブレイク

あとがき

今回の執筆に当たって
筆者プロフィール

電子版を購入

iOSアプリ開発「UI実装であると嬉しいレシピブックまかない編」

同人誌・174ページ・8部頒布・紙・1,000円

チェックする

✨ 概要

これまでの書籍ではUI実装のアイデアや具体的な手法についてフォーカスを当てた書籍を2冊執筆してきましたが、どうしても誌面の分量の関係等もあって見送ってしまったものもありました。

本書では、Vol.1及びVol.2では惜しくも紹介ができなかったUI実装に関する実装解説を「まかない編（番外編）」として簡単でありますがまとめたものになります。また、iOS13以降で新しく登場した新機能を利用して実装したサンプルについても少しだけ触れているものもあります。

これまでの実務の中で培ってきた知識や知見に加えて、一見するととても複雑に見えそうではあれども、実装時の少しの工夫やライブラリの有効活用をすることで実現することができるUI実装に関するサンプルを3点収録しております。

✨ 収録サンプルのダウンロードについて

https://github.com/fumiyasac/meals_ios_ui_recipe_showcase

✨ 目次

まえがき

動作環境及びバージョン
サンプルに関して
誤表記などに関するお問い合わせに関して

第1章: メディアアプリ型のUI

事前準備に関して
本章でのサンプル実装における概要
それぞれの画面における実装と役割について
一覧表示画面における無限スクロール型の表現を実装する
詳細表示画面における UIScrollView の性質を利用した表現を実装す
指の動きで閉じることができるセミモーダルビューを実装する
コーヒーブレイク

第2章: 構造が複雑な写真表示UI

事前準備に関して
本章でのサンプル実装における概要
それぞれの画面における実装と役割について
利用したライブラリの紹介
複雑な形のサムネイル画像の縦横比を意識したタイル状の表示画面を実装する
記事一覧をタブ型表示とスクロール切り替えを伴う画面を実装する
カスタムトランジションやスクロールの変化に応じた動きをする詳細画面を実装する
コーヒーブレイク

第3章: iOS13からの機能を使ったUI

事前準備に関して
本章でのサンプル実装における概要
それぞれの画面における実装と役割について
利用したライブラリの紹介
APIモックサーバーから表示データを取得する部分をCombineで実現する
UICollectionViewCompositionalLayout を利用してセクション毎のレイアウトを構築する
DiffableDataSourceを利用した差分更新を意識した表示用データを構築する
Combine Frameworkを利用したMVVMアーキテクチャを実現する
UITableViewについてもDiffableDataSourceを利用する
API通信処理に関連する部分テストコードについて
その他UICollectionViewCompositionalLayoutを利用した例
コーヒーブレイク

あとがき

今回の執筆に当たって
筆者プロフィール

電子版を購入

iOSアプリ開発「UI実装であると嬉しいレシピブックおもしろ編」

商業誌・162ページ・8部頒布・紙・1,000円

チェックする

✨ 概要

これまでの書籍ではUI実装のアイデアや具体的な手法についてフォーカスを当てた書籍を3冊執筆してきましたが、急遽Vol.3の前段として更に番外編として表現や動きが特徴的でかつ、ユーザーにもほんの少しだけ遊び心を与えるような楽しい感覚を抱かせてくれるようなUI実装に関する解説を「おもしろ編（番外編Vol.2）」として簡単でありますがまとめたものになります。Chapter1及びChapter2で紹介しているサンプル実装についてはUIKitをベースに構築したサンプルとなっていますが、Chapter3ではiOS13から登場したSwiftUIを利用して構築したサンプルとなっております。

これまでの実務の中で培ってきた知識や知見に加えて、一般的なiOSアプリに対しては利用可能なケースは限られてしまうかもしれませんが、アニメーションやインタラクションにひと工夫を加えることによって、見た目にも美しく触っていて思わず楽しくなりそうな感じのUI実装のエッセンスと、これからの普及が見込めるSwiftUIとOSSのライブラリをうまく利用するアイデアを紹介しておりますので、ほんの少しでもiOSアプリ開発におけるUI実装の道標となることができれば嬉しく思います。