Oz-Tech-Blog

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

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がくもりガラスのようになりました。 くもりガラス...

曲線の描画については、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