kii-memo-dev (開発メモ)

Google PlayとAppストアで公開しているアプリのバンドルIDを更新しないといけなくなってしまったのですが、その時の工程をここにメモしておきます。 どちらのストアでも、アプリは「バンドルID」で識別されいて、バンドルIDが違うと別のアプリだと認識されます。 また、既存のアプリのバンドルIDを変更する事はどちらのストアでも出来ないらしいので、新しいバンドルIDでアプリを新規登録する必要があります。 バンドルIDは。一度設定したら普通は変更する必要はないのですが、今回はアプリにFirebaseを導入する際に、Firebaseのツールが正しく動作せず、泣く泣くアプリのバンドルIDを変更せざるを得なくなりました。 結論としては、Google Playの場合は至って簡単で、 新しいバンドルIDでアプリを新規で登録した後、古いアプリの設定を更新すれば良かったのですが、Appストアの場合はやり方が悪いとアプリ公開の審査が通らず却下されるみたいで、まず既存のアプリを非公開にしないと新しいアプリは登録出来ない仕様みたいです。 またバンドルID変更に関するApple公式のドキュメントも見つける事もできませんでした。 [目次] GoolgeのPlayストアでバンドルID変更 AppストアでバンドルID変更 結果 GoolgeのPlayストアでバンドルID変更 Playコンソールのサイドバー Google Playの場合は、 新しいバンドルIDでアプリを登録 古いアプリの公開状況を「非公開」に設定 といった工程で、変更が割とスムーズに完了しました。 1. 新しいバンドルIDでアプリを登録 既存のアプリとは別に、新しいAndroidアプリを新しいバンドルIDで作成してPlayコンソールで登録。 ただ、新しいアプリを同じ名前では登録出来ないので、 「...

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バージョンに対...

Flutterはマテリアルデザインをサポートしているので、マテリアルデザインのカラースキーム(色構成)を使うと無難な見た目のアプリを比較的簡単に作る事が出来ます。 Flutterの入門的な事を扱っているネット記事だったりすると、アプリデザインのプライマリカラーを既定値の青色 (MaterialColor.blue)から他の色に変更するのに、Flutterでマテリアルデザイン対応のアプリの基礎としてコード内で使う MaterialApp の theme プロパティに、使いたい色を指定したテーマデータ (ThemeData)を渡す方法だけが紹介されていたりする場合があったりします。 Status Bar と App Bar デバッグモードで開発中のアプリをいじっている時点だとそこまで気にならない事かもしれませんが、これだけだと、アプリのタイトルなどを表示する App bar の色が既定値の水色のままで表示されたり、時間やバッテリー残量が表示される Status bar の色がおかしかったりたりする場合があります。 アプリとして一般リリースする際にアプリの動作の再確認をしていると、こういった事は絶対NGなので、MaterialAppのthemeプロパティ以外にも必要な設定をここに備忘録としてまとめておきます。 [目次] 好みの色に変更する方法 (マテリアルデザイン) MaterialAppのプロパティ設定 SystemUIOverlayStyle設定 SafeArea + AppBarのバグ？ そもそもSafeAreaって? 07/2025 追記 Android 15 から、デフォルトでアプリが全画面 (Edge-to-Edge)で表示される使用になった為、アプリが「ステータスバー (Status Bar)」や「ナビゲーションバー (Navigation Bar)」に重ならない様にアプリのウイジェットの表示位置を調整する必要があります。 Andr...

「 flutter build ipa 」や「 flutter build applebundle 」といったFlutterのビルドコマンドで、macOSやiOS用のアプリをビルドする際に、 「 pod repo update 」コマンドを実行するように といった エラーメッセージ が返ってくる事がしばしばあります。 そこで、指示の通りにターミナルを開いてプロジェクトのディレクトリで「 pod repo update 」を実行すると、リポジトリ情報は更新されるみたいですが、再度ビルドをしても前と同じエラーが返ってくる場合があります・・・。 この場合、エラーメッセージの指示にある「 pod repo update 」ではなく、別のコマンドを実行すれば次のステップに進める場合がほとんどなのでここに備忘録としてメモしておきます。 キーワード : #CocoaPods [目次] エラーメッセージ 対処方法 最後に エラーメッセージ 問題のエラーメッセージは: Error: CocoaPods's specs repository is too out-of-date to satisfy dependencies. To update the CocoaPods specs, run: pod repo update Exception: Error running pod install で、メッセージの意味は、CocoaPadsのリポジトリ情報が古いので、ターミナルでプロジェクトのディレクトリに移動して「pod repo update」というコマンドを実行して情報を更新してくれ(下さい)という意味になります。 また、最後の「Exception: Error running pod install」の部分から、「pod install」コマンドを実行した時に起きたエラーというのがわかります。 CocoaPads は、macOSやiOSのアプリなどを開発するのに使われるIEDの Xcode において、オープンソー...

開発中のスマホアプリ 『コメ欄』 の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...