Oz-Tech-Blog

 Neumorphism（ニューモーフィズム）とは？ ニューモーフィズムとは、要素が背景と同じ素材で作られており、シャドウを与えて押し出されたような窪んだようなスタイルです。 これは命名もnew + skeuomorphismから来ているそうです。 デザイン例 (Source)Dribble-Light Mode デザインのポイント Neumorphism (Soft UI) in User interface design - Tutorial by Kanhaiya Sharma (※） ニューモーフィズムをデザインするポイントは、正しいカラーパレットを使用することです。ニューモーフィズムには、同じカラーの3つの色合いが必要になります。  ・明るいシャドウのための明るいカラー  ・背景と要素のための中間色  ・暗いシャドウのための暗いカラー 上記（※）は以下のサイトの定義を引用してます。 ニューモーフィズムとは、デザインする時に知っておきたいポイント、CSSでの実装方法 試してみました。 中間色は以下のサイトを使用させて頂きました。 https://kotoritone.com/color/ 画面で表現した結果は以下になります。プロフィール画面を作り、その画面に適応してみました。 画面で表現した結果は以下になります。 色々なカラーも試してみました。以下は、instagram,dribbbleにカラーバリエーションについて記載した時のスクリーンショットになります。

Blenderの1機能として2Dでアニメーションが作れます。 Instagramで#greasepencilで検索するとヒットするもので個人的に良いなー。 思うものを掲載します。表現のご参考までに この投稿をInstagramで見る Miguel Angel Castilla(@itsa.me.guel)がシェアした投稿 この投稿をInstagramで見る elise(@leaselise)がシェアした投稿 この投稿をInstagramで見る alpaganimateur(@math_demo)がシェアした投稿 この投稿をInstagramで見る Queen Perri(@queen.perri)がシェアした投稿 この投稿をInstagramで見る IYUSH MNDR(@3dmndr)がシェアした投稿

🤔 グラスモーフィズムって？   すりガラスの表現を利用した半透明の表現方法でガラスの向こう側がすりガラスによって曇って見える表現が特徴です。iosでは今更ですが、MacOSのBig Surに利用されていることから、2021年のデザインのトレンドとして挙がっています。  🤔  では、どのような画面表現があるのか？ ・Dribbbleでは？ https://dribbble.com/tags/glassmorphism ・Pinterestでは？ Pinteresetで検索すると、Osamu Furukawaさんのボードに掲載がございます。以下にリンクを掲載します。 https://www.pinterest.jp/omfull/%E3%82%B0%E3%83%A9%E3%82%B9%E3%83%A2%E3%83%BC%E3%83%95%E3%82%A3%E3%82%BA%E3%83%A0glassmorphism/ 🤔 どんな表現が可能なのか？ 以下のスズキアユミさんのサイトがまとまってますので、リンクとして掲載します。 https://designmemo.jp/creative/glassmorphism.html 🤔 SwiftUIで表示できるの？ 試した結果、SwiftUIのみでは表現が難しそうです。Blurの表現ありますが、ただのViewに くもりガラス風の表現 をするのは難しく、UIViewRepresentableで拡張したUIVisualEffectViewというパーツが必要になるようです。 ここまでで、やったこととして、Figmaで以下のように簡単なデザインしました。 figmaのプラグインで、SwiftUIインスペクターを利用してSwiftUIのコードを出力してiPhone画面に表示してみました。以下のようになります。オレンジの四角形と黄色い三角形部分が上にのっているViewで薄く表示されてますが、 くもりガラス風な表現になってはいません。 UIVisualEffectViewを利用すると以下のような表現になります。オレンジの四角形と黄色い三角形部分が上にのっているViewがくもりガラスのようになりました。 くもりガラスのくもり具合については、Fi

曲線の描画については、UIBezierPathを利用します。 基本的な考え方については、下記のサイトがまとまっております。ご興味のある方はご参考までにご参照ください。 ・Alex Almost Engineerさんのサイト https://medium.com/flawless-app-stories/uibezierpath-lesson-how-to-draw-cuphead-on-layers-d164fd23cf61 ・iCHi.PROさんのサイト https://ichi.pro/ios-13-app-swift-5-no-setsumei-rei-uibezierpath-o-shiyoshite-pata-n-o-byogasuru-224408471526853 上記の考えを利用して、以下のような背景が作れます。 図形1,2では、ヘッダーの部分に曲線を表現をしています。 図形1のオレンジメニュー部分では四角形の1辺だけ曲線にしております。 ・図形背景１ ・図形背景2

 パララックス（parallax）は 英語で「視差」という意味があるそうです。 「部分ごとに動くスピードや、動く方向に差をつける」というイメージです。 スクロールやデバイスを傾けたときに背景がずれるなどして、画面内に奥行きを表現する視差効果です。  SwiftUIで表現をしてみました。 ・スクロールによる表現1 ・スクロールによる表現2 ・スクロールによる表現3 ・角度を変えた表現

 今回は、SwiftUIでPathを取り上げます。pathの基本については、下記のサイトにて、詳しく記載されている方がいらっしゃいますので、そちら掲載します。 ここでは、Pathを使った背景画面の表現をいくつか掲載してみます。 ■サイト ・高橋政明さんのサイト https://note.com/kaigian/n/ndbbcf82ee3e4 ・AnswerTopiaさんのサイト https://www.answertopia.com/swiftui/basic-swiftui-graphics-drawing/ ■Pathを利用した背景 いくつか表示を試してみたので以下に掲載します。 ・画面 ・コード 上記のようなPathを利用したコードを用いてい下記のような表現ができます。 ・表現１ ・表現2 ※引用画像について 以下になります。上記のサンプル表示のため画像を利用させて頂きました。ありがとうございました。 https://www.aflo.com/ja/pages/creative/sport https://pixta.jp/antenna/?p=21234

 今回は、iOS14で追加になったLink表示についてです。 試した画面表示とコードを掲載します。テキストリンクと画像アイコンの２パターンで表示してます。どちらのタップすると Appleのサイトに遷移するようになっております。 ・画面表示 遷移前と遷移後の画面を掲載します。 ・遷移前画面 ・遷移後画面 ・コード

今回はiOS14からのUI部品で利用できるようになったDisclosureGroup、OutlineGroupとについて取り上げます。 1.DisclosureGroupについて ・特徴 コンテンツを折りたためるビューです。 ・コード 画面での表示が見やすいようにSpacer()を入れてます。 ・画面表示 ・全部閉じる ・全部開く ・Sub-itemsだけ開く 2.OutlineGroup ・特徴 階層化データ構造を表示するのに便利です。ForEach、ネストされたビューを表示するために使用されます。 ・コード 区切り線を消したい場合は、「　.listStyle(SidebarListStyle()) 」を指定すると区切り線が消えます。 ・表示 別手法：階層データについての表示方法 OutlineGroupを利用せずにListの階層表現を使う方法がありました。SmallDeskSoftwareさんが紹介されております。以下のコードはSmallDeskSoftwareさんのコードを引用させて頂いております。 ・SmallDeskSoftwareさんのサイト https://software.small-desk.com/development/2020/09/20/swiftui-outline-withusinglist/#_List ・コード ・表示

今回は、iOS14で追加されたMenuについてとりあげます。 Appleの公式ドキュメントにあった例を試してみました。デザイン変更も試してみましたが、2021年4月時点メニュー内は変更が難しいようです。利用用途として、シンプルなメニューの表示として利用が良さそうです。 ・Apple Document Menu https://developer.apple.com/documentation/swiftui/menu 動画とコードを掲載します。 動画の画面上にプラスマークのアイコンと「Create」テキストで動作するメニューと「Action」というテキストで表示するメニューを２種類表示させてます。「Action」というテキストのメニューは、メニュー内のCopyという項目を押下した場合、更に、メニューが表示されています。 ・今後の課題 メニューの中のデザインを変更しよう試みましたが、うまくいきませんでした。試した内容は、以下の図で、「Create customStyle」というメニューを出すボタンのデザインの変更と、「Create customStyle」を押下後に出てくるメニューです。「Create customStyle」のみ変更されました。メニュー内のデザインの変更方法は、今後の課題としております。試した時のコードも記載します。 ・追加：できたこと 追加の確認でメニュー内のアイコンは表示できました。以下は、コードと画面表示になります。

iOS14で追加になった、ProgressiveViewについてみていきます。ProgressiveViewの種類は、CircularProgressViewStyleとLinearProgressViewStyleの２種類があります。前者はくるくる回るプログレス表現で後者は、バー状に伸びるプログレス表現です。 1. CircularProgressViewStyle いくつかのパターンを画面表示して、その時のコードを以下掲載します。 2. LinearProgressViewStyle バー状に伸びるプログレス表現については、.NETゆる〜りワークさんのサイトが大変参考になります。以下をご参照ください。 https://www.yururiwork.net/%E3%80%90swiftui%E3%80%91progressview%EF%BC%88uiactivityindicator%EF%BC%89%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9%E3%80%90xcode12ios14%E3%80%91/

今回はSwiftUIのNavigationView,NavigationLinkを利用した画面遷移 についてとりあげます。 以下の内容について記載します。 画面遷移時のソースコードケースについて NavigationbarのTitleについて 画面上部の余白について 二つ以上前の画面に戻ることについて コードで戻るの挙動 1 画面遷移のソースコートコードケース ケース１. NavigationViewのText ケース2. NavigationViewのButton表現と条件一致した場合の遷移 以下はボタン押下後に、isActiveフラグがtrueになります。NavigationViewのisActiveと一致するので、次の画面に遷移する挙動となります。 ・動画 上記1、２の動画です。挙動としては上記のコードだと変わらないです。 ケース3. NavigationViewのHStackでimageとText表現について ・スクリーンショット ※Twitterアイコンは表示のためのサンプル画像として利用していております。 2.NavigationbarのTitleについて .navigationBarTitleDisplayMode(表示モード)を用いて、タイトルの表示を変更ができます。表示モードについては以下の種類があります。 navigationBarTitleDisplayMode(.inline) 小さなタイトル文字 navigationBarTitleDisplayMode(.large) 大きなタイトルで表示。スクロールすると小さなタイトルになる navigationBarTitleDisplayMode(.auto) 前のナビゲーション項目の表示モードを継承 ・NavigationBarのカスタマイズをする場合 NavigationBarのカスタマイズは下記の@titaniumさんが記載しております。 変更の場合は、ご参照ください。 https://qiita.com/titanium/items/690b15c4471f4cd22516 3.画面上部の余白について .n

今回はダークモードについてです。 ダークモード未対応のアプリをそのままStoreに出した場合には、ユーザの端末の設定によっては、意図しない見た目になってしまう場合があります。ダークモードを対応しない、もしくは、ダークモードを対応する方針をとった方が良いです。 ・[記事抜粋(2021/5時点)]( 引用元 )  Supporting Dark Mode is strongly encouraged. Use the UIUserInterfaceStyle key to opt out only temporarily while you work on improvements to your app's Dark Mode support.  上記のAppleの記載理由のため、 ダークモード対応が可能な場合した方が良いです。このブログでは、ダークモードを対応しない場合と対応する場合を紹介致します。    ■ダークモードに対応しない場合  ライトモード固定にする場合は、下記のIganinのブログさんの記事が参考になります。 ・参考サイト： https://iganin.hatenablog.com/entry/2020/02/07/010757    ■ダークモードに対応する場合  カラーアセットを利用した管理方法をご紹介します。 手順は以下になります。 ・手順1.ダークモードとLightモードの色を管理するAssets Catalogを用意します。 Xcodeのメニューから「File」→「New」→「File」の以下の画面から追加します。今回は「Colors.xcassets」という名前で追加します。 ・手順２.以下の図のようにColorSetを追加して、「backGround」という名前にしました。 ・手順3.ダークモード用とLightモード用で色をセットします。 以下の図の、黄色の枠の「Any Appearance」は、ライトモード用の表示、オレンジの枠は「Dark Appearance」、Darkモード用の表示を設定します。両方の色が重なっている右側の枠は色の詳細を設定します。

今回は、アプリの背景は以下の設定が可能です。 背景色(単色)の指定 背景色(グラデーション)の指定 画像の指定 動画の指定 それぞれ、表示例を以下に記載します。 1. 背景色の指定 ・1色指定 safeエリアも指定する方法については、「edgesIgnoringSafeArea」 がありましたが、deprecatedになっています。代わりに「ignoresSafeArea」を指定するようです。 参照)Apple Document https://developer.apple.com/documentation/swiftui/view/edgesignoringsafearea(_:) [コード] struct ContentView: View { var body: some View { ZStack { //ignoresSafeArea(.all)でsafeエリアにも設定 Color.yellow.ignoresSafeArea(.all) Text("背景サンプル").font(.largeTitle) } } } 2グラデーション グラデーションは、線形で指定した場合と色の割合を変更した場合を挙げます。 ・線形 ２色を指定した場合を下記に表示します。 [スクリーンショット] [コード] var body: some View { ZStack { // 青から白の線形グラデーション //グラデーションの方向は画面上から下への報告 LinearGradient(gradient: Gradient(colors: [.green, .white]), startPoint: .top, endPoint: .bottom) .frame(maxWidth: .infinity, maxHeight: .infinity) .ign