kii-memo-dev (開発メモ)

Android 15以降から画面のEdge-to-Edge表示が強制適用になって、同時に画面上部の時間やバッテリーの残量が表示される「ステータスバー」の背景が透明になりました。 「 パート２ 」では、強引にスタータスバーの背景色を設定する方法を確認しましたが、この方法だと背景色の色を設定できるタイミングに少しの制限が入ります。 なので今回は。違う方法でステータスバーの背景色を設定する方法をこの備忘録に残しておきます。 [目次] パート 1 Edge-to-Edge表示 (Android アプリ) テストアプリを使って確認 ターゲットSDKバージョンを35に変更 ステータスバーとAppBarが重ならない様にする例 (XMLレイアウト) ※:強制適用されるEdge-to-Edge表示を一時的に無効にする方法 (SDK 35) パート 2 Android15よりも前のデバイスでもEdge-To-Edge表示 ステータスバーの背景色 パート 3 (このメモ) パート２で確認した背景色を設定する方法 別の方法 例: JetPack Compose 例: Flutter 追記 パート２で確認した背景色を設定する方法 import android.graphics.Color import android.os.Build import android.view.View import android.view.Window import android.view.WindowInsets : : : : class MainActivity : ComponentActivity() { fun setStatusBarColor ( window : Window, color : Int) { ...

少し前に手持ちのAndroid携帯の一つにシステムのアップデートが入ったのですが、それ以降、いくつかのアプリで、画面の上下の表示がおかしくなってしまいました。。。 実は、このアップデートでアンドロイドOSが「 アップサイドダウンケーキ 」(Android 14, SDK 34)から「 バニラアイスクリーム 」 (Android 15, SDK 35) に更新されて、Android 15からはアプリの表示がデフォルトで Edge-to-Edge (端から端まで) 表示 の仕様、つまり全画面表示になったのが原因でした。 (👉「📑 動作の変更点: Android 15 以上をターゲットとするアプリ 」) これまでもアプリを画面の端から端までの全画面で表示する「 没入モード 」という機能があったので、そのモードでの画面表示がデフォルトになったという理解に少し近いのですが。。。 実際はそうではありません。 没入モードの場合は、アプリが全画面で表示される以外に、「 システムバー 」と呼ばれる、画面の上部に表示される「ステータスバー (Status Bar)」と下部に表示される「ナビゲーションバー」の表示を必要に応じて表示/非表示に出来るほか、非表示の場合でもユーザーの操作によっては再表示される仕様になっています。 (👉「📑 没入モードのシステムバーを非表示にする 」) Status Bar と App Bar Android 15よりも前のOSでは 、没入モード以外では、アプリは全画面にではなく、 自動的に 上下のシステムバーの分が差し引かれた部分だけに表示される仕様になっていて、アプリの表示が上下のシステムバーに重なって表示される事がない様になっていました。 Android 15以降からは 、システムバーの表示/非表示に関係なく、アプリの表示サイズが端から端までの全画面表示になるので、必要に応じて、 インセット(Inset) 情報などを使ってアプリの表示コンテンツがシステムバーの表示と重ならない様に調整する必要があります。。。。。 ...

「 Google Container Registry (GCR) 」が廃止されるとかで、保存されてりる内容が「 Artifact Registry 」に移動されるといったメールが10日ほど前にGoogleから届いたのですが、「Artifact Registry」って情報を保存してるだけで毎月課金されるサービスだと認識しているのですが、これから毎月いくら課金されるんでしょうか？？ [ 目次 ] Google Couldチームからのメール Artifact Registry を使う場合 Google Couldチームからのメール 平素より Google のサービスをご利用いただきありがとうございます。本日は、貴社の  App Engine  アプリに影響する重要な変更についてご連絡いたします。古い App Engine プロジェクトでは、 Google Container Registry  を使用して、デプロイされたソースコードから作成されたコンテナ イメージを保存している可能性があります。 Google Container Registry は サポート終了 となり、 Artifact Registry  に置き換えられます。したがって、Google Container Registry にコンテンツがある場合は、以下の手順に沿って、App Engine でデプロイフローを自動的に移行できるようにする必要があります。 この変更に関する追加情報は以下のとおりです。 ご注意いただきたい点 App Engine をデプロイする際、Cloud Build はソースコードをコンテナ イメージに変換します。このコンテナ イメージは、Google Container Registry に保存される場合があります。 Artifact Registry は、コンテナ イメージを保存するための次世代サービスであり、リージョン化されたストレージとセキュリティ機能が改善されています。今後、Artifact Registry は App Engine が使用す...

Flutterでアプリからの通知を表示させる機能を追加するプラグイン「 flutter_local_notifications 」のバージョンアップがあり、AndroidのターゲットAPIレベルがやっとAndroidのAPI 34 (コードネーム: 逆さケーキ)に対応しました。 2023年の3月 に開発者向けプレビューが公開されたAndroid 14 (API 34)が 今年の3月 (2024年) に一般リリースされたので、新しくリリースされるほとんどのFlutterのプラグインがターゲットAPIレベルが 34 になっている訳ですが、flutter_local_notificationsは長いことAPI 34ではなくAPI 33 のままでした。 [ 2025年 追記] flutter_local_notifications バージョン19 3月16日 (2025年) にLocal Notificationsプラグインの バージョンの19 が公開された様で、AndroidのターゲットレベルがAPI 35 (コードネーム: バニラアイス)になった他、必要となるJavaデベロッパーキット(JDK)のバージョンも8から11に更新されました。 このプラグインの最新情報についてはPub.devの 👉 プラグインの情報ページ で確認して下さい。 ターゲットAPIレベル 34に必要なGradleのバージョン flutter_local_notificationsは古い環境のシステムでもサポート出来る様に下位互換性を守る為にターゲットAPIレベルを 34 に移行しにくかったみたいですが、これによって同じアプリに組み込む他のプラグインはターゲットAPIレベルが34ではなく、 33 に対応した古いバージョンを使う必要がありました。 というのも、ターゲットAPIレベルが 34 だとビルド時に使われるGradleのバージョンが8.0以上が必須になりますが、これまでのflutter_local_notificationsのビルドがGradle 8.0に対応していなかったので、他のプラグインも以前のGradleバージョンに対...

Android/iOSアプリを開発してストアで公開していますが、どこのストアでも、アプリを登録するのに様々な必要事項がいくつかあリます。 最近、AppleのAppStoreにアプリを登録する際に必須となるアプリのスクリーンショットで「 どうやったら撮れる？ 」という事例があったのでここに備忘録としてメモしておきます。 ※: 「違うサイズのiPhoneでスクショを撮って画像エディタでサイズを変更する」などという解決法を紹介しているページが結構あるみたいですが、このメモではiOSシミュレータに iPhone 5.5インチディスプレイがスクショ出来るシミュレータを追加する方法 を紹介しています。 なので、編集無しでスクリーンショットをそのままAppStoreの登録に使う事が出来ます。 [ 目次 ] iOSアプリ登録にはアプリのスクショが必須 実機が無くてもiOSシミュレータで撮影 iPhone 5.5インチディスプレイ ??   👈 問題 iOS 16.4 シミュレータをインストールする手順   👈 解決方 追記 追々記 : 「資料: スクリーンショットの仕様」 ※: ( 2025年1月 追記) 現時点ではAppStore登録時にスクショが必要になるApple機種は現行のXcodeのシュミレーターでサポートされる機種になっていますが、今後も特定の画面サイズが現行のXcodeのシュミレーターでサポートされない古い機種になってしまった場合でも応用出来る方法になります。 iOSアプリ登録にはアプリのスクショが必須 AppleのストアにiOSアプリを登録して公開する際には、Appleが指定する解像度でアプリのスクショを撮ってアプリの登録ページにアップロードする必要があります。 👇はiOSアプリを登録する際に使うページの一部ですが、画面のサイズごとにアプ...

開発中のスマホアプリ 『コメ欄』 のFlutter版の配信画面に、任意の画像を配置出来る機能を追加するのに、Flutterの Transform ウイジェットの「 Tansform.scale 」コンストラクタを使って Image ウイジェットを縮小・拡大表示させる仕組みにした処、画像は設定した通りの大きさで表示されましたが、画像を表示している親ウイジェットの縦横が元の画像の大きさのままでした。。。 結果として、親ウイジェットの縦横も同様に縮小・拡大させるには Tansform.scale ではなく、 SizedBox や Container ウイジェットで縦横の大きさを指定しないといけなかったので、解決までの道のりをここにメモしておきます。 キーワード : #Tansform.scale #ウイジェットの大きさが変わらない #ImageStreamListener #縦横のサイズが必要 [目次] Tansform.scaleで画像サイズの変更 スタックオーバーフローにあったQ&A コード変更 Tansform.scaleで画像サイズの変更 Tansform.scaleを使った場合 右は、例として383x400のサイズに編集した「 いらすとや 」からのフリー素材の画像「 パスをするサッカー選手のイラスト（男性） 」を、アプリ内でTansform.scaleを使って0.45倍に縮小して、画面解像度が1080x2340のPixel 5エミュレータ上に表示した際のスクショになります。 ウイジェットの大きさが分かり易い様に、 BoxDecoration を使ってウイジェットに緑の枠を付けてありますが、イラストは0.45倍に縮小されて表示されているものの、ウイジェットの枠は元の画像の大きさのままの383x400で表示されて。。。 いや、1080x2340の画面上に388x400の画像を表示した場合なら、 画像の幅は画面の幅の半分位になるはず。。。 理論画素数と物理画素数 ...

最近、 FlutterのAPIドキュメント を良く眺めていますが、ドキュメントのページ内に含まれるサンプルコードの一部はブラウザ上で実際に実行して結果を確認出来る仕様になっています。 例： AnimatedList 、 FutureBuilder 、 PhysicalShape クラスなど 少し気になったので仕組みを検索した処、Webページのソースに『 DartPad 』というJavaScriptで書かれたオープンソースのスクリプトを組み込む事でFlutter/Dartで書かれた任意のコードがブラウザ上で実行可能になるそうです。 このサイトで、これまでに、いくつかのFluterコードを含む備忘録をメモしているので、今後のメモに使えるのではと思い、『 DartPad 』を使ってみました。 DartPadのWikiの 組み込みガイド にはGitHubのgistを表示する方法(①)と、タグ内にコードを埋め込む方法(②)の2つが紹介されていますが、この備忘録では後者の②を使った方法を簡単に紹介しています。 悲報: ②サポート終了 ②の方法はページが比較的重くなるという理由で廃止になった様です。 組み込みに使うスクリプト「inject_embed.dart.js」が削除されているので、以前②の方法でDartPadを表示していた場合は読み込みエラーになるのでDartPadは表示されなくなっています。 でも 、上記のガイドの通りにするだけだと、実際にページ内に表示されるDartPadの幅が300px程度しかなく、小さすぎて使い物になりませんでした。 そこで、CSSやJSを使って修正を加えたらDartPadをページ幅で表示が出来たので、 解決方法 もこの記事で紹介しています。 キーワード : #DartPadが小さい #DartPadをページ幅で表示する方法 [目次] DartPad組み込みガイド Converting code blocks to DartPad (コードブロックをDartPadに変換) ...

AnimatedSwitcher ウイジェットを使って、2つのウイジェットの表示をアニメーション効果付きで切り替える際、前後で表示されるウイジェットに BoxFitプロパティで全画面に拡大表示しているウイジェットがあると 実際の表示が全画面にならない場合があったのでその解決法をメモしておきます。 キ－ワード : #AnimatedSwitcher #全画面表示 #layoutBuilder #カスタムLayoutBuilder [目次] AnimatedSwitcherウイジェット AnimatedSwitcher.defaultLayoutBuilder Stackウイジェットを親ウイジェットの大きさに合わせる 結果 現在、開発環境をFlutterに移行中のスマホアプリ 『コメ欄』 に、設定した複数の画像から１つをアプリの背景画像として表示させる画面があります。 画像の表示には Image ウイジェットを使っていますが、表示する画像の画素サイズが、スマホ画面の大きさとは違う場合がほとんどなので、Imageウイジェットの fit プロパティに BoxFit を指定して背景に設定する画像を画面の大きさに合わせて拡大、縮小や、引き延ばしをして表示出来る様にしています。 例:『コメ欄』の画面 (1080x2220) 画素が610x800 (①)と 808x808 (②)の画像が画面上に拡大表示されています (BoxFit.cover) 背景画像表示例 ① 背景画像表示例 ② 背景画像表示例 として「 いらすとや 」のサンプル素材を背景画像として使わせてもらいました。 AnimatedSwitcherウイジェット 背景画像は複数設定可能なため、アプリ内で切り替える事が出来ますが、その際に瞬時に画像が切り替わるのではなく、フェードアウト・フェードインを組み合わせたクロスフェ...

Googleのストアで公開しているAndoridアプリの 『コメ欄』 Lite ( ライト ) は、これまで Android SDK ベースの開発環境下でJava/Kotlin言語で開発していましたが、現在は、Googleの Flutter(フラッター) というアプリ開発環境下に移行しようと作業を進めています。 Java/Kotlin言語で開発した『コメ欄』Liteでは、URLの入力の際に、 TextField を使っていますが、入力された文字列の 正しくない部分だけを赤字で表示 するJava/Kotlin言語のコードが組み込まれています。 このコードをFlutter版のコードに変換する時に、一筋縄には行かなかったのでここに備忘録として記録しておきます。 キーワード : #TextField #TextEditingController #buildTextSpan #buildTextSpanをオーバーライド [目次] Android SDKからFlutterへ移植 マテリアルデザインのTextField 間違えている部分を赤色で表示: Android SDKでは比較的簡単に可能 Flutterでは? 例: TextFieldに入力された文字列の一部を赤字で表示する方法 (buildTextSpanをオーバーライド) 終わりに Android SDKからFlutterへ移植 Android SDK はその名の通り、Android専用のアプリを制作するソフト開発キット(SDK)で、Androidアプリしか制作する事しか出来ません ※ 。 iOS用のアプリを制作したい場合は別に iOS SDK を使ってSwift又はObject-C言語で直接開発するか、Swift/Object-Cに互換性のある開発環境を使う必要があります。 上記の Kotlin もAndroid SDKがKotlinに対応している上に、KotlinがiOS SDKのAPIを呼ぶ事も出来ます。 なので、Kotlin上で、Android特有の機能の場合はAndro...