Oz-Tech-Blog

 iOSアプリをリリースしました！🎉🎉 試行錯誤したことを記載することで 思考の整理に役立てるアプリです。 アプリのダウンロードURL: https://apps.apple.com/jp/app/id1612021152 アプリの概要ページ： https://oz-app.blogspot.com/ Instagram画面  この投稿をInstagramで見る smart_tech_ozawa711(@smart_tech_ozawa711)がシェアした投稿

・問題のUI構成 UI構成として、TextFildが数多く並んだリストが上部で、 最下部に、固定入力フィールドがある構成のUIは キーボード回避をした時に、おかしな挙動になるので、 UIデザインを検討する際に避けた方が良いです。 例えば以下のようなコードの構成で、 ScrollViewの画面下の方にあるTextFieldをタップすると、 画面下部の固定のTextFieldも一緒にリストアップする。 タップしたのが、 ScrollView中のTextFieldであるにも関わらず、 他のTextFieldも、キーボードと一緒にリフトアップされる。 この動作が人により違和感を感じることだろうと思います。 これは、キーボードによりViewの下部が迫り上げられるため、 本現象は発生します。 VStack { 　// 表示量が画面の高さをこめる量とする ScrollView ForEach { TextField } } TextField } ・代替案 固定のTextFieldを上部に配置して、その下部に、 TextFieldを並べたScrollViewを配置した場合は、 キーボード回避に違和感はなくなリます。 →そもそも、ScrollView内に、すべてTextFieldを 配置してしまう場合もありでしょう。 ・検討案 もし、どうしても上部に TextFieldを並べた ScrollViewで、 下部に固定のTextFieldに したい場合は、以下の方法を検討してみてはいかがでしょうか。 上部のScrollViewと下部の固定のTextFieldを キーボード回避を無効にして、 キーボード出現時に、 上部のScrollView内部のoffsetと下部の固定の TextFieldのOffsetをそれぞれタップされ、 Focusが あたったときに、 導き出す。 この動作が可能な場合、それぞれで キーボード回避の挙動が実現できるのではないでしょうか。

前回の記事でGemetory Readerを利用したコードを記載しましたが、利用せずに、ZStackのViewでキーボード回避ができることがわかったので以下にコードを掲載します。 サンプルコード 上記の例で利用したコードです

 iOS14、edgesIgnoringSafeAreaがdeprecateに表示になり、safeAreaへの表示の拡張はignoreSafeAreaを利用します。 https://developer.apple.com/documentation/swiftui/view/edgesignoringsafearea(_:) また、 ignoreSafeAreaは、表示の拡張だけではなく、キーボードを表示した際に、キーボードの下とTextFieldと重ならないようにする設定も可能です。 設定については、先駆者の方のサイトとして 以下サイトがわかりやすかったです。 ・カピ通信さんのサイト https://capibara1969.com/3617/ ■ZStackの構成のサンプル ZStackで、一部のViewはキーボード回避を無効させ、一部のViewは、キーボード回避をさせたい場合は、ハマりました。 以下のようなコードで実施するとうまくいきました。 Gemetoryを一番外側にする構成です。 残念ながら理由については、定かではありません。 stackOverFlowで、ZStackを利用した場合にキーボード回避を無効にしたい場合は、Geometoryを利用している記事があり、その成功事例からのサンプルコードになります。 ・サンプル画面の構成について [画面] [画面構成について] ・Z座標で一番上にくるのが中央のリストです。textFieldを並べたリストです。placeHolderに、Item+アイテム要素番号が表示されています。 ・上記のリストの奥のViewでは、画面下に「入力してください」というplaceholderのあるTextViewを配置しております。中央のリストとの重なりで、「入力して」というplaceHolderのみ見えています。 ・一番後ろにある黄色の画面は、背景の想定でセーフエリア外に表示して、キーボードが出現した場合にリフトアップしない想定です。 [動作] ・リストの要素のitem+15のTextFieldをタップ キーボード出現に伴い、item+15が隠れないようにリフトアップします。 ・リストの後ろの「入力して」のTextField部分をタップ キーボード出現に伴い、「入...

RealmファイルをiCloudにバックアップ・リストアする方法を挙げます。この辺りの環境設定とコードの記載がある記事は、あまりないため、まとめました。 [実行環境] Xcode13.1 Realm 10.19.0（SwiftPMから導入） [手順] 手順は以下となります。 1). 事前準備 Realmを導入した後、何かしらデータを登録してある状態とします。 2). iCloudの環境設定 2-1). apple developer program側の設定 　apple developer programで「Certificates, Identifiers & Profiles」のサイドメニューで、以下の画面で、画面右側の虫眼鏡マークの右横を「iCloud Containers」変更をして 「identifiers」の右のプラスマークからiCloud Containerの登録をします。（ご注意：追加したiCloud Containerは消せないので、登録はタイプミスがないようにご注意ください。削除ができないことは以下の記事にもあります。 https://developer.apple.com/forums/thread/5547 ） iCloud Containerの登録で「identifire名」が重要です。登録作業を進めると以下の画面が表示されます。画面の「identifire名」欄には、「 We recommend using a reverse-domain name style string (i.e., com.domainname.appname).」とあります。仮に例のように指定するとiCloud.com.domain.appnameと頭に、「iCloud.」 が含まれて登録となります。 2-2). Xcode側の設定 2-2-1). signinig&Capabilityの設定 Xcodeの設定で、「signinig&Capability」の＋選択から「iCloud」を選択してください。以下の画面のようにiCloudの設定をできる画面が表示されるます。Xcode側でApple Idと紐付け設定済みの場合(※)は、以下の画面の白色で塗りつぶされている箇所には、2-...

zennにも技術情報を掲載始めました。 https://zenn.dev/ozawa711/scraps/c441c782a37f30

題記の件について、iOS15でpickerが動かないことがあり、  Qiitaに投稿しました。Pickerを横並びに複数並べる場合は いち参考情報として頂ければ幸いです。 https://qiita.com/ozawa0711/items/652cb4fbd06228713729

ここ1年で言われてるSwiftuiの不具合報告についてまとめてみました。 ■ NavigationViewで遷移すると遷移直後で画面が戻ってしまう現象があり。 ・iOS14.4、14.5 ・デベロッパーサイトやstackoverflowに記載あり →対策方法：空のEmptyViewを入れる。t https://developer.apple.com/forums/thread/677333 https://stackoverflow.com/questions/67686125/swiftui-unexpectedly-navigationlink-pops-automatically https://forums.swift.org/t/14-5-beta3-navigationlink-unexpected-pop/45279/37 Twitterにもすぐに戻ってしまうとの記事があります。 遅延実行すると良いとも記載がありました。 https://twitter.com/kansa_mon/status/1410943681406722050?s=20 ■SwiftUIでtoolbarのToolbarItem内にTextFieldを実装したいんだけどTextFieldをタップした時に即座にキーボードが消えてしまうバグ https://twitter.com/natumn_/status/1372762134593990659?s=20 ■SwiftUIでtoolbarのToolbarItem内にTextFieldを実装したいんだけどTextFieldをタップした時に即座にキーボードが消えてしまうバグ https://twitter.com/natumn_/status/1372762134593990659?s=20 ■NavigationViewがTabView内にネストされていると、ステータスバーを非表示にできません。 https://developer.apple.com/forums/thread/653153 ■BottomBarが消えるバグが存在する iOS14.4 https://qiita.com/r0227n/items/1e938797b5c80191c739 ■TabViewとNavigationViewのスタックがリセット ・iOS13で...

はじめに  iOSアプリ開発で利用するアイコン素材をネットで探してみた アイコン画像について、ネットのアイコンを利用するとき ライセンスを確認すると思いますが、直近調べたものを記載しました。

iOS14で追加になった、@StateObjectについてみていきます。親Viewが状態が変化され、再描画されると状態が破棄される@ObservedObjectとは異なり、@StateObjectは状態は保持されます。下記簡単なサンプルを掲載します。 1. 例について 親VIewに乱数のテキストと乱数の更新する青いボタンがあり、子のViewにそれぞれHStackで更新ボタンと更新ボタンを押下するとカウントアップするViewを配置します。下のスクリーンショットは、子のViewに緑と赤の更新ボタンを配置しております。青いボタンのあるViewには、@ObservedObjectが定義されており、赤いViewには@StateObject定義されてます。 親Viewにある乱数の更新ボタンを押下すると親Viewが更新され、その時に、子のViewがどうなるかを見るサンプルです。 2. SampleView,SampleView2を更新 青と赤の更新ボタンを押下してそれぞれ、４までカウントアップします。 3. 親Viewを更新 乱数の更新ボタンを押下すると親Viewが更新され、乱数の表示が変わります。この時、子Viewのそれぞれは下図のように変わります。@StateObjectを定義した赤いボタンを含むViewは0にならずリセットされませんでした。 4. サンプルコード 上記の例で利用したコードです

今回の記事は、ダウンロード数が多い、または、AppStoreのランキング上位の個人開発アプリのサブスク、広告、アプリ内課金について興味があり調べてみました。調べた中でいくつかピックアップ致します。個人アプリ開発で、サブスクや課金周りの金額設定をする１資料として参考情報になります。 1つ目のアプリ： QuickMemo ・公式Twitter https://twitter.com/flickfrogDev   ・どんなアプリ？ 付箋メモアプリ。 メモは内容に合わせて自由に大きさが変わり、付箋のデザインや壁紙を変更できる。作成した メモは共有ができ、パスコードでロックできるアプリ ・ダウンロード数 139万DL（※本記載時期の公式Twitterのプロフィール欄より抜粋） ・ 広告・ 課金・サブスク アプリ内広告あり、プレミアムプランが以下のようにあります。 ・所感 デザインや付箋アプリで使いやすく、個人好みにカスタマイズできるので、ユーザーにとって好印象のアプリだと思います。 2つ目のアプリ： スマホを止めれば魚が育つ ・サイト: https://sumayame.mystrikingly.com/ ・ランキング: ジャンル: 仕事効率化 32位 ※本記事記載時点 ・課金・サブスク： 広告非表示：370円 アイテム課金型、ゲーム内のコインを購入して、泳がせたい魚を買う。 ・所感： ・ゲーム感覚で、スマホ依存解消をしようとするアプリで、 集中力を高めるアプリは、最近の流行りつつあるのでその流れからかと思われます。仕事効率化でゲーム要素を盛り込むアイディアが良いですね。 3つ目のアプリ： Treeカレンダー ※こちらは、会社の記載がなかったのでおそらく、 個人の方だと考え記載します。 ・サイト: https://hapilf.com/ ・App Storeランキング ジャンル: 仕事効率化 39位 ※本記事記載時点 ・ 広告・ 課金・サブスク アプリ内広告あります。アプリ内課金とサブスクがあり、それぞれ以下のようになっているようです。 アプリ内課金  ・広告を外すのに、250円 サブスク　  ・画面 ・所感 ...

 以下の動画より追加される機能について、iOSに関わりそうなところを調べてみました。 ■動画 https://devstreaming-cdn.apple.com/videos/wwdc/2021/10018/4/C1412BB4-40EE-418F-BCFD-09796128093C/cmaf.m3u8 ■追加される機能 ・AsyncImageの追加 　・非同期で画像の取得ができる ・ListにPullRefreshの追加 ・ListのSeparatorの色の変更、Separatorのhidden制御 ・swipeアクションの追加 ・Symbolの表現追加 　・renderingModeの追加    ・varientの追加  https://developer.apple.com/documentation/swiftui/symbolvariants ・Canvasの追加 　・UIKItのDrawRect()に近い、ダークモードに対応 ・TimeLineViewの追加 　ビデオでは、TimeLineでCanvasを用いたSymbolのアニメーションが表示されていた。 https://developer.apple.com/documentation/swiftui/timelineview/ ・Materialsの追加(25:02) ・SafeAreaInsetの追加 ・textでMackDownをサポート(27:17) ・AttributeStringの追加 　文字列の一部を太字やリンク、MarkDonwにできる https://developer.apple.com/documentation/foundation/attributedstring/ ・TextFieldFormatting(30:43)  　ループのような書き方出なくても、結合して表現ができる ・TextFieldにonSubmitの追加 　Returnキーを押すなどして、フィールドのテキストがユーザーによって送信されたときの補足アクションを簡単に追加できる ・TextFieldにSubmitLabelの追加(31:59) 　ソフトウェアキーボードでは、これはReturnキーのラベルとして使用されます。 ・キーボードにtoolbarの追加 ・...

マイクロインタラクションを既に、SwiftUIで表現されている方がいますので、記載致します。 1. jean-Marc Boullianneさんの記事 Mediumの jean-Marc Boullianneさんの記事に掲載がありました。 https://jboullianne.medium.com/  執筆されたいくつかの記事にはコードも記載があるので、ご興味がある方はご参照ください。 UI表現1：プログレスバーからサブミットボタン UI表現2 : 画面の切り替え Micro-interactions: Animating Wave Mask from Trailing Closure on Vimeo . 2. Sarahさんの記事 Mediumの Sarahさんの記事 に掲載がありました。 https://medium.com/@sarah.h.alsharif 執筆された記事にはコードも記載があるので、ご興味がある方はご参照ください。 UI表現: いいねボタン

1. マイクロインタラクションとは？ 「マイクロインタラクション UI/UXデザインの神が宿る細部」という書籍によると、「マイクロインタラクションとは、単一のシナリオに基づいてひとつの作業だけをこなす最小単位のインタラクションのこと」と記載されています。 インタラクションとは、人間から何らかの作用を受けたシステムや機器が、その作用に応じた動作を返すことを表すようですのでアプリ上のマイクロインタラクションとは、人がアプリで何か操作した際に、アプリがその操作に対して何かしらの動作を返す最小単位の表現を指すのかと考えられます。 2. マイクロインタラクションを取り入れる目的？ ユーザーのアクションに対して、システム側のステータスの変化を伝える（フィードバックする）ことや、正しい操作を促して目的の箇所に誘導する、あるいは特徴的なアニメーションを使用することによるブランディング効果を狙うなど多岐に渡ります。 例) ・タスクの進行状況を伝える 　（例：プログレスバー） ・現在のステータスを伝える 　（例：タブを切り替えて、現在の画面の状態を伝える） https://cdn.dribbble.com/users/414694/screenshots/14777237/media/7b83fe55090782a43db675e1ec1841e6.mp4 ・アクションに対してのフィードバックする 　（例：いいね） 3. マイクロインタラクションを用いた効果 株式会社つみきさんが、マイクロインタラクションを用いた効果に関しての記事をnoteに記載してます。 機能の利用回数が26%上昇したそうです。 以下の掲載文をご覧ください。 https://note.tsumikiinc.com/n/na0dd9ee70ea0 ■事例 1)サインイン エラーだった場合どこがエラーになっているのか、 パスワードがバリデーションがOKの場合チェックマークがつく https://cdn.dribbble.com/users/414694/screenshots/10491392/media/c57cc04445ba1fc045e0074a768de0cf.mp4 2)ローディング ダウンロードまでの状態を表現 https://cdn.dribbb...

 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にカラーバリエーションについて記載した時のスクリーンショットになります。