- 1. 子供向けにチャットアプリを作ってみた
- 2. ReactNativeの環境構築をしてみた
- 3. 【Flutter】ボタンの連打を無効にする対応メモ。onPressedの処理中は押せないボタンを作成する方法
- 4. Compose MultiplatformとAppiumの相性の悪さに絶望している
- 5. FlutterでiOSの独自ライセンスを自動取得/表示まで
- 6. FlutterのPlatform Viewsの表示モードを整理する
- 7. 2次元配列と1次元配列の相互変換
- 8. CreateMLでマルチラベル分類をしようとしたら詰まった話
- 9. iOS Simulator で Loaded CoreSimulatorService is no longer valid for this process のエラーが出た時の解決方法
- 10. Storyboardをつかわない、UITabBarControllerをルートとしたのプロジェクト作成
- 11. 【Flutter】PlatformException(Unexpected security result code, Code: -25299, Message: The specified item already exists in the keychain., -25299, null)
- 12. 今更ながらXcodeで開発しているiOSアプリのデバッグをiPadで行った記録
- 13. (前編・文法やビルトインの機能中心)数ヵ月くらいDartとFlutterを触ったので個人の所感と学んだことを全体的ににまとめてみる
- 14. 【SwiftUI】View を簡単にドラッグして移動したい
- 15. 【Flutter】画面タップでキーボードをしまう方法
- 16. Flutter で開発した iPhone アプリを実機で起動する際の躓きメモ
- 17. pod update で CDN: trunk URL couldn’t be downloaded: https://cdn.cocoapods.org/Specs/…. Response: Failure when receiving data from the peer というエラーが発生
- 18. 【SwiftUI】TextEditorの見た目をTextFieldっぽくする
- 19. iOSにおける非同期型イベント駆動
- 20. Compose Multiplatformで利用できるようになったNavigationを使ってみた
子供向けにチャットアプリを作ってみた
## はじめに
ここ数年間React Nativeを触れる機会がなかったのですが、キャッチアップのために子供が使えそうなチャットのアプリを作ってみました。普段からWebのフロントエンドもReactで実装することがほとんどなのでやはり大きく迷うことはなく、Expo(特にEASのよるビルド、デプロイ)とFirebase、React Native Paperでかなりスムーズに進んだ印象です。本記事では使用した開発スタックと少し実装面の説明、出来上がったアプリの紹介などをしたいと思います。## 開発Stack
ざっとこのような感じです。
– [Expo](https://expo.dev/)(EAS、Expo Routerが便利)
– [Firebase](https://firebase.google.com/)(Authentication、Firestore)
– [React Native Paper](https://reactnativepaper.com/)(Material Designのコンポーネントライブラリ)
– [RevenueCat](https://www.
ReactNativeの環境構築をしてみた
:::note
カスタマイズ性が高い`Developer Build`を諦めて`Expo Go`で環境構築をしています。
詳しくは「Expo Goで開発することにした経緯」をご覧ください。
:::# React Nativeとは
ネイティブアプリのユーザインターフェイスを作る為のJavaScriptライブラリです。# Expoとは
React Nativeのフレームワークです。
ファイルベースのルーティング、高品質のユニバーサルライブラリ、ネイティブファイルを管理することなくネイティブコードを変更するプラグインを記述する機能などの機能を提供します。# 環境構築
:::note
Nodeをダウンロードされていない方はこちらから
https://nodejs.org/en
特にこだわりがなければLTSをダウンロードして下さい。
`node -v`でバージョンが表示されたら成功です。
“`terminal
node -v
v18.18.0
“`
:::## プロジェクトの作成
https://reactnative.dev/docs/environment-setup
【Flutter】ボタンの連打を無効にする対応メモ。onPressedの処理中は押せないボタンを作成する方法
## この記事でやりたいこと・紹介すること
:::note info
ボタンを押した後の処理を実行中は、ボタンを押せないようにするボタンを作成して、ユーザーが連打や実行中に比較的短い時間内でボタンを再度タップする動作等をしても二重で処理が発生しないようにする
:::## 実施した概要
ボタンクラスのラッパークラスを作成して、処理中はボタンの”onPressed”パラメータにNullを渡すことでタップ動作を無効にする。:::note info
上記の実装をすることで、容易に連打防止対応をしたボタンをコード全体で簡単に何度も使用することができます。
:::## 実際の方法とソースコード
実際の導入方法を紹介します。
### ボタンクラスのラッパークラスを作成
ボタンクラスのラッパークラスである`WaitableElevatedButton`クラスと`WaitableOutlinedButton`クラスを作成
以下のファイルを任意の場所に作成します。
:::note info
私は、基本的にUtilディレクトリ等を作成して、その配下に以下の`waitable_butt
Compose MultiplatformとAppiumの相性の悪さに絶望している
このチュートリアルを参考に
Compose Multiplatformでアプリを作って
Appiumのテストをやってみようと思ったんですよ。https://www.jetbrains.com/help/kotlin-multiplatform-dev/compose-multiplatform-create-first-app.html
Android, iOSそれぞれのアプリの起動ができて
おおっと思いました。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258506/2a34e692-4493-d2f5-a4f8-acdb3945e4d9.png)
で、Appium Inspectorで中身をのぞいてみたんですよ。
そうしたら、iOSアプリのほうですが、中身に意味のあるものが無いんです。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25850
FlutterでiOSの独自ライセンスを自動取得/表示まで
## はじめに
とあるPJでFlutterを使用したアプリ開発中、セキュリティ診断等でiOSが独自で使用しているライブラリのライセンスの記載が不足しているとの診断結果を受け追加することに。
ですがライブラリが追加されるたびにライセンスファイルを都度追加するのは、メンテナンスコストがかかるため自動化しようということになりました。ということで本記事では、iOSの独自ライセンスの取得方法とFlutter標準ライセンスに追加する方法までをご紹介します!
## 目次
1\. 使用ライブラリ / ツール紹介2\. 手順
1. ライセンスファイルの取得
2. ライセンスファイルからライセンス本文を参照
3. Flutter標準ライセンス一覧追加3\. まとめ
## 使用ライブラリ / ツール紹介
① Flutterの標準ライブラリのライセンスを表示する方法https://api.flutter.dev/flutter/material/showLicensePage.html
② iOSの独自ライセンスファイルを取得するツール
こちらはCocoaPodsを使ってコマ
FlutterのPlatform Viewsの表示モードを整理する
## はじめに
FlutterはiOSやAndroidなど複数のプラットフォームで動作するUIフレームワークです。Flutterは独自のUIレンダリングの仕組みを持っており、基本的には各プラットフォームのネイティブUIを使用しないため、プラットフォーム間での動作の差異がほとんどないという特徴があります。しかしながらマップやウェブビューなど、プラットフォームが提供しているUIをFlutterで表示したいことがあります。そのようなケースに対応するための仕組みが **Platform Views** です。
あるプラットフォーム上でそのプラットフォーム向けのUIを表示する(例えばiOSで`UIButton`を表示する)というのは当たり前なことです。しかし、それをFlutterで構築されたアプリの中で表示する場合、Flutterが独自にレンダリングするUIとプラットフォームのUIを同時に組み合わせて表示しなければならないことになります。
iOS/Androidにおけるそのような課題をFlutterはどのように解決しているのか?を整理する機会があったため、こちらの記事にまとめます。
:
2次元配列と1次元配列の相互変換
【 Swift 】2次元配列と1次元配列の相互変換 🤔 https://t.co/X1BKRtRcZB
— chanzmao (@maochanz) May 16, 2024
ロジックとしては以下だけの模様。
“`swift
p.x = index / 3;
p.y = index % 3;
“`
どの言語であれ、競プロであれ、配列の処理は大事。CreateMLでマルチラベル分類をしようとしたら詰まった話
## はじめに
趣味の開発でcreateMLを用いて多ラベル分類の検証を簡単に行おうとしていましたが、データを読み込む過程でハマってしまい3時間ほど時間を溶かしてしまいました。ググっても答えがパッと見当たらなかったので、備忘として残しておきます。CreateMLによる機械学習(画像認識)のやり方は[公式ドキュメント](https://developer.apple.com/documentation/createml/creating-an-image-classifier-model)を参照して下さい。
## 前提条件
[公式ドキュメント](https://developer.apple.com/documentation/CreateML/creating-a-multi-label-image-classifier)に準い、学習データのディレクトリ構成は以下とします。
“`direct
train/
├── image1.jpg
├── image2.jpg
├── …
└── annotations.json
“`## 問題
[公式ドキュメント](https
iOS Simulator で Loaded CoreSimulatorService is no longer valid for this process のエラーが出た時の解決方法
# これなに
CoreSimulatorService がも使えないよと言われた時の対応方法# エラー内容
Simulator 起動しようと思ったらこんなエラーが
“`zsh
Loaded CoreSimulatorService is no longer valid for this process.
Simulator services will no longer be available.
Error=Error Domain=NSPOSIXErrorDomain Code=61 “Connection refused”
UserInfo={NSLocalizedDescription=CoreSimulator.framework was changed while the process was running.
This is not a supported configuration and can occur if Xcode.app was updated while the process was running.
Service version (947
Storyboardをつかわない、UITabBarControllerをルートとしたのプロジェクト作成
## はじめに
タブバーからのアプリの立ち上げ方メモ
今回のサンプルリポジトリhttps://github.com/kabikira/SampleTabBar
## できるもの
2つのタブバーで画面きりかえをする。
## ストーリーボードを使用しない設定をする
以下記事を参考にしてください。https://qiita.com/Imael/items/e908aef1e6fc077f29fc
## ViewControllerを2つ作成
下記のよ
【Flutter】PlatformException(Unexpected security result code, Code: -25299, Message: The specified item already exists in the keychain., -25299, null)
# なんかiOSだとエラーがでてくるんだけど?
Androidの方ではうまく動いていたのに、iOSの方ではうまく動かなくなった。
下のようなエラーが“`secureStorage.write(Key:key, value,value);“`のところで出てきて解決に時間がかかったので備忘録として残しておく。
“`
PlatformException(Unexpected security result code, Code: -25299, Message: The specified item already exists in the keychain., -25299, null)
“`# エラーの調査と解決策
まったく同じエラーの内容がGitHubの[issue](https://github.com/mogol/flutter_secure_storage/issues/711)に上がっていた。
ただ、ここの内容では、インスタンスの初期化とwriteを呼び出すところを分けるとうまくいったよと書かれているのみだった。
はぁ…詰んだ…と思って、あきらめそうになっ
今更ながらXcodeで開発しているiOSアプリのデバッグをiPadで行った記録
# はじめに
自分でどうやったのか人に教えるのが面倒なので,立てた記録.
それぞれのデバイスのバージョンは以下の通り.
MacOS Sonoma 14.4.1
Xcode 15.3
iPadOS 16.7最新情報にはなってないかもので,ご注意ください.
# Xcodeの準備
iOSやiPadOS, MacOS向けのモバイルアプリケーションをビルドするために必要なXcodeを準備する!### Xcodeのインストール
App storeでXcodeと検索してインストール![スクリーンショット 2024-05-13 20.39.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680423/10638561-9749-6c6f-6a8f-91df0c0e80f2.png)
### iOSのインストール
今回はiPadでのデバッグを行うので,iOSをインストールしてデバック可能にする.
(MacOSは標準でインストールされているので問題ない)
最初にXcodeを起動したときに設定できるが,
(前編・文法やビルトインの機能中心)数ヵ月くらいDartとFlutterを触ったので個人の所感と学んだことを全体的ににまとめてみる
お仕事で数か月程度DartとFlutterでのスマホアプリ開発をしていたので触ってみて感じた所感や学んだことなど、追加で調べたことなどを雑多に全体的にまとめておきます。
(個人の復習や知識の漏れの補完・その他チームメンバーへの共有も兼ねて)※DartやFlutterの基礎であったり、ビルドインやサードパーティのライブラリ含め利用しているものも全体的に触れていきます。
※色々まとめていたら長くなったので前編後編で分けます。本記事では所感やDart周りなどを中心に触れ、後編はFlutterの細かい点も触れていきます(考えなしに書いていたらとても長くなったのでほぼ自分の勉強用の記事となってきています・・・w)。
# 前置き
:::note warn
専任のアプリクライアントエンジニアやフロントエンジニアなどをやってきているわけではないので専門の方々からすると色々知識が荒い点はご了承ください(仕事でサーバーやクラウドなどを触っている時間なども多めです)。もし専門の方から見て間違いなど気づかれましたらこっそりコメントなどで優し目にマサカリ投げていただけますと幸いです。
:::#
【SwiftUI】View を簡単にドラッグして移動したい
https://twitter.com/maochanz/status/1790297337665056921
いつものように簡単な記述で書いていきたい。
“`swift
struct TestDragGesture: View {
@State private var location = CGPoint(x: 150, y: 150)var body: some View {
ZStack {
VStack(alignment: .trailing) {
Text(“location.x: \(location.x)”)
Text(“location.y: \(location.y)”)
}
.monospaced()Circle()
.fill(.red.opacity(0.5))
.frame(width: 100)
.position(location)
.gesture(
DragG
【Flutter】画面タップでキーボードをしまう方法
# はじめに
TextFormFieldを実装した時、キーボードを開く処理は特に必要ありません。
ただ、画面のキーボード以外の部分を触った時に、キーボードをしまう処理は意図的に設定しないといけません。とても簡単なので、真似してみてください。
# 開発環境
[Flutterバージョン]
3.16.1[使用端末]
PC: Macbook Air(M1)[開発ツール]
VSCode# キーボードをしまう処理
対象とするWidgetの親要素に、GestureDetectorを置き、onTapパラメータとbehaviorパラメータに、以下のコードを渡します。
“`dart
GestureDetector(
onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
behavior: HitTestBehavior.opaque,
child: ~画面要素~
)
“`# コード全体
“`dart
class Demo extends StatelessWidget {
Flutter で開発した iPhone アプリを実機で起動する際の躓きメモ
# はじめに
Flutter を使って iPhone アプリを開発するにあたり、実機でのデバッグ・インストール・起動にちょっと手間取ったので、その時のメモ。
普段 Mac を触らないので、超初歩的な部分でも引っかかりました。。そんなに触らない分、また忘れそうなので備忘も兼ねて記載。# 環境
– macOS Sonoma 14.1.2 (Macbook Pro 2020 Intel CPU)
– iOS 17.4.1 (iPhone12, iPhone15 Pro)
– Xcode 15.3
– Flutter 3.19.6# Mac への Flutter 開発環境インストール
基本的に[公式のインストール手順](https://docs.flutter.dev/get-started/install/macos/mobile-ios)に沿えば問題ありません。
英語ですが、そんなに難しくはないです。
「Configure your target iOS device」の部分で開発したアプリをインストールする iOS デバイスのセットアップをします。「Virtual Device」
pod update で CDN: trunk URL couldn’t be downloaded: https://cdn.cocoapods.org/Specs/…. Response: Failure when receiving data from the peer というエラーが発生
# 背景
CocoaPods を使用しているプロジェクトで `pod update` を行った際に以下のエラーが発生しました。“`sh
$ pod update
Update all pods
Updating local specs repositories
Analyzing dependencies
[!] CDN: trunk Repo update failed – 2 error(s):
CDN: trunk URL couldn’t be downloaded: https://cdn.cocoapods.org/Specs/0/3/5/Firebase/10.24.0/Firebase.podspec.json Response: Failure when receiving data from the peer
CDN: trunk URL couldn’t be downloaded: https://cdn.cocoapods.org/Specs/0/3/5/Firebase/10.25.0/Firebas
【SwiftUI】TextEditorの見た目をTextFieldっぽくする
# 概要
TextFieldでは入力欄が空の時に薄い文字を表示することができますが、TextEditorではできません。そこで今回は、TextEditorでもTextFieldっぽく薄い文字を表示する方法を解説していきます。# ゴール
本来のTextEditorは以下の左のような見た目ですが、今回は以下の右のような見た目を目指します。# 基本のTextEditor
基本的なTextEditorです。これは、Viewが真っ白で何も見えません。### コード
“`: SwiftUI: 基本のTextEditor
import SwiftUIstruct QiitaView: View {
// TextEditor用
@State private var memo: String = “”
var body: some View {
// 基本
TextEditor(text: $memo)
}
}#Preview {
QiitaView()
}
“`### 見た目
iOSにおける非同期型イベント駆動:::note info
本記事は [技術書典16](https://techbookfest.org/event/tbf16) で無料配布する同人誌「ゆめみ大技林 ’24」の寄稿です。加筆や修正などがある場合はこの記事で行います。
:::iOS アプリの開発において、あるイベントに合わせて処理を実行したい、たとえばボタンタップのタイミングで処理を実行したい場合は、次のようなコードを書けば実現できます。
“`swift
Button(“Sign in”) {
signIn()
}func signIn() {
// …
}
“`これは、イベント発生(ボタンタップ)と処理実行(関数実行)が同期されています。一方で、実装仕様や設計のため、イベント発生と処理実行を非同期(異なるタイミングや場所)で行いたいとき、どうすればいいでしょうか。
本記事はイベント発生と処理実行を非同期で実現するいくつかの方法をまとめました。なお、それらを解決する便利なサードライブラリもありますが、今回はアップルが提供するライブラリで実現できる方法を扱います。
### 免責事項
Compose Multiplatformで利用できるようになったNavigationを使ってみた
## はじめに
[Compose Multiplatform](https://www.jetbrains.com/ja-jp/lp/compose-multiplatform/)は、[Jetpack Compose](https://developer.android.com/develop/ui/compose/) をベースにKMP(Kotlin Multiplatform)プロジェクトでUIを構築するためのフレームワークです。
ここ最近は、目まぐるしいスピードで進化をしており、Resource周りも共通で実装できるようになっています!
そして、alpha版ではありますが、ついに `Navigation` も利用できるようになりました🎉実際に `Navigation` を利用したところ体験が良かったため、本記事で紹介します!
## Navigationとは?
[Navigation](https://developer.android.com/guide/navigation)は、アプリ内の様々なコンテンツ間を遷移するためのAndroidでのライブラリです。
このライブラ