- 1. Fletによる実機テスト
- 2. [Flutter]多言語化対応で、アプリをグローバル化しよう!
- 3. Swiftでframeworkを作って利用する
- 4. アプリ開発に参照した文章リスト
- 5. 【wip】RouteAPIのPolylineをMap上に表示するための前処理を考える
- 6. iOSDC Japan 2024 個人的に気になったセッションまとめ
- 7. 【Flutter】Cloud Functions for Firebaseの基本
- 8. IBOutletのUIImageViewで画像が表示されなくなった話
- 9. FlutterWebでレスポンシブ対応をする
- 10. iOSでサービスを見た時にinputタグでのズーム対策
- 11. iOS App 「積分ますたー」
- 12. [SwiftUI]データバインディングを理解する
- 13. エンジニア転職におけるアウトプットの重要性とそのメリット
- 14. 【Flutter】Google認証(ログイン/サインイン)の実装
- 15. SwiftUi ポップオーバーを実装
- 16. ipa形式iOSのアプリをiPhoneにインストールする方法
- 17. 【2024/10時点】iOSアプリでFCMを使った画像付き通知を受信する方法
- 18. [iOS] [リモート通知] APNSサーバーの認証処理を実装するときに役立ったツール
- 19. Xcode Cloudの導入〜App Store Connectへアップロードする手順
- 20. 【Flutter】TODO / タスク管理アプリを作成する方法
Fletによる実機テスト
# Fletで開発すると・・・
実機テストも簡単に行える。
対象は、iOS、android、webブラウザ、デスクトップアプリ(Windows、Linux)
なんでもありでした。# Android版Fletアプリ
以下のアドレスから、Android端末にアプリを入れる
https://play.google.com/store/apps/details?id=com.appveyor.flet&hl=jaFlet run appname –android
で起動すると、接続先へのQRが表示されるのでAndroid端末でURLを読み取るとAndroid用のFletアプリが起動される。# iOSアプリ版Fletアプリ
以下のアドレスから、iOS用アプリを入れる
https://apps.apple.com/us/app/flet/id1624979699Flet run appname –ios
で起動すると、接続先へのQRが表示されるのでiOS端末でURLを読み取るとiOSアプリ用のFletが起動される。# ブラウザ
特に何もいらない!
Flet run app
[Flutter]多言語化対応で、アプリをグローバル化しよう!
## 概要
少々大袈裟なタイトルですが・・・
どうせアプリをリリースするなら、日本だけでなく世界中の方に使ってもらいたいですよね!Flutterは、多言語対応を容易に行うことができます!
ユーザーの言語設定に応じた表示が可能になるということです。本記事では、Flutterアプリを日本語、英語、中国語
に対応させるための具体的な手順を解説します!### サンプル(日本語)
![スクリーンショット 2024-10-20 19.09.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/945342/99df716e-034e-f29a-f061-0cb25eb8729d.png)
### サンプル(英語)
![スクリーンショット 2024-10-20 19.09.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/945342/a80a4cbf-3fb5-2cb2-dc59-8012fbabad29.png)
Swiftでframeworkを作って利用する
# なぜframeworkを作ろうと思ったか
数値の配列からその特徴を抽出するクラスを生成しました。
割といい感じのクラスで、使いやすく、尚且つそのアルゴリズムが簡単…
ソースコードの中身がわかると「そんな程度でできるんだ…」と思われるのもなんか悔しい。
ならばソースコード非公開で利用してもらうのがいい!
その手法の一つがframeworkだったわけです。
# frameworkを作る
### Xcodeプロジェクトを作る
今回はmacOS、iOSの両方で使える`Multipratform`のframeworkを作ります。
数値計算だけのプログラムでGUIが関わらないため、macOS、iOSとも同じソースコードが利用できます。
`MyFramework`というプロジェクト名にしました。![スクリーンショット 2024-10-20 9.59.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202602/ef91f615-6719-a3ad-962c-5861e1fec04e.png)
実
アプリ開発に参照した文章リスト
アプリ開発に参照した文章リスト
1,【Mac不要】.NET製iOSアプリをiPhone実機配備する手順
https://qiita.com/kami_teru/items/58b6b5e4fd835248bf7a
(https://www.joshmorony.com/how-to-create-an-ios-provisioning-profile-and-p12-with-windows/)
【wip】RouteAPIのPolylineをMap上に表示するための前処理を考える
## 注意
この記事は作成中です—
## Routes APIとは
ドキュメントリンクは[こちら](https://developers.google.com/maps/documentation/routes?utm_source=Website&utm_medium=Blog&utm_campaign=Maps-global-demandgen-website-cs-GMP_UTM_Campaign_Blog&utm_content=routes_api_ga_docs&hl=ja)から
今回はCompute Routeを使用します
– RoutesAPIは、既存のDirections APIとDistance Matrix APIを拡張・統合した新しいAPI
– 2023年3月に一般提供が開始された新しいAP
– より有益で柔軟なルート検索と到着予測時刻の精度向上を目的としている—
## 必要なパッケージ
参考文献に記載
“`pubspec.yaml
dependencies:
google_maps_flutter: # googlemap表示用
iOSDC Japan 2024 個人的に気になったセッションまとめ
# day 1
## Track A
## 座談会 「Strict ConcurrencyとSwift 6が開く新時代: 私たちはどう生きるか?」 by shiz
https://fortee.jp/iosdc-japan-2024/proposal/5e7b95a8-9a2e-47d5-87a7-545c46c38b25
文字起こし・メモ
– Concurrency を軸に座談会の内容
– アンケート:使っている 75%
– いいねと答えた人も、好感触
– 学習コストが高い、使い方難しそうとの意見
– データ競合についての概要
– Data Isolation(データ隔離)
– 静的隔離と動的隔離の2種類がある
– 静的隔離の例: actor, @MainActor
– 動的隔離の例:MainActor.run (1時的なやつ)
– 基本はActor,例外あり
– Swift Concurrencyはスレッドをブロックしない思想
– Mutex, Atomicが新しくできる、それを使える, ただしiOS18,Swift6
– よくわからないエラーに悩んでい
【Flutter】Cloud Functions for Firebaseの基本
## 1. はじめに
FlutterとFirebaseは、モバイルアプリやウェブアプリの開発において強力なツールです。その中で**Cloud Functions for Firebase**は、バックエンドの処理を簡単にサーバーレスで実行できるサービスです。本記事では、Cloud Functions for Firebaseの基本的な使い方と、Flutterとの連携について解説していきます。## 2. Cloud Functionsとは
**Cloud Functions for Firebase**は、Google Cloudが提供するサーバーレスコンピューティングサービスです。サーバーレスとは、開発者がサーバーの管理・運用を行う必要がなく、ソースコードの記述のみでバックエンドの機能を実現できる仕組みです。Cloud Functionsでは、イベントがトリガーされた際に、バックエンドの処理を自動で実行することができます。
具体的に、以下のような用途で活用できます:
– Firebase AuthenticationやCloud Firestoreのデータベース変更に応じて処理
IBOutletのUIImageViewで画像が表示されなくなった話
# 起きた問題
タイトルの通り、IBOutletでstoryboadにて設定したUIImageViewに画像が表示されなくなったことがありました。
状況としては、コードでUIImageを設定した時に設定したはずの画像が表示されないというものです。# 実際のコード
以下実際の画像が表示できなくなったコードです。
`ChatIconView`というカスタムViewでUIImageViewがあり、`setupMyIcon`もしくは`setupTeamMemberIcon`で画像を設定するようになっています。
しかし、`setupTeamMemberIcon`では画像が表示されません。“`
class ChatIconView: UIView {// MARK: – IBOutlet property
@IBOutlet var iconImageView: UIImageView!
// MARK: – initialize Methods
required init?(coder aDecoder: NSCoder) {
super.init(coder:
FlutterWebでレスポンシブ対応をする
## やりたいこと
Flutter_webで作成したWebアプリケーションをレスポンシブに対応させる
というよりPC、タブレット、モバイル端末の判定をする## お急ぎの方(ソースコード)
– クラス定義
“`device_type.dart
import ‘package:flutter/material.dart’;
import ‘dart:html’ as html;const String PC = “PC”;
const String TABLET = “Tablet”;
const String MOBILE = “Mobile”;class DeviceType {
// モバイル端末かどうかiPhone,androidスマートフォン
static bool isMobileUserAgent() {
String userAgent = html.window.navigator.userAgent.toLowerCase();
return userAgent.contains(‘iphone’) ||
(u
iOSでサービスを見た時にinputタグでのズーム対策
## 原因
– iOSデバイスでサービスを閲覧して16px以下で指定している`input`タグのフォーカス時にズームされてしまうみたいです。
## 対策
– 今回の行った対策として、`meta`タグの`viewport`の中身に`maxmum-scale=1.0`を指定しました。しかし、参考記事にもよるとこの対策ではアクセシビリティ違反になるみたいです。今回、私が行っていた実装の中身を見ると`meta`タグの`content`属性の中身を見ると`width=375`が指定されていました。その副作用なのか、`initial-scale=1.0`がなかったのでそちらを指定したら改善されました。
## 参考記事
https://zenn.dev/rhirayamaaan/articles/f0209ad6574ed4
https://qiita.com/skwbr/items/b285cc312587c73a4812
iOS App 「積分ますたー」
# アプリの使い方
![Simulator Screenshot – iPad Air 13-inch (M2) – 2024-10-15 at 10.53.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2661763/967fd260-4c3f-c18c-385e-ae4413a95237.png)
![Simulator Screenshot – iPad Air 13-inch (M2) – 2024-10-15 at 10.54.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2661763/58cff462-1310-c397-0aa6-5575b28c1de6.png)
## 設定
ホーム画面の左上の歯車アイコンを押下するとシャッフルする問題の設定ができます。
– 不定積分だけ
– 定積分だけ
– 両方## 積分の問題を解く
ホーム画面で「スタート」を押下すると問題がシャッフルされ
[SwiftUI]データバインディングを理解する
## はじめに
SwiftUIで開発をしてると、**データバインディング**という言葉をよく聞くかもしれません。
**データバインディング**は、UIとデータの同期を自動で行う強力な機能です。**データバインディング**を学ぶと他にも
「MVVM」「状態管理」「プロパティラッパー」等、様々なワードが関係してきます。本記事は上記の説明だけでなく、
サンプルコードも紹介しますので参考になれば嬉しいです!## データバインディングとは?
データの状態を監視する仕組みを言います。データとビューの間の双方向のデータフローを自動的に管理できたり、
SwiftUIではユーザ操作により画面の表示をリアルタイムで変更が可能になります!:::note info
データが変更される
→そのデータを参照しているUI要素も自動的に更新される
※逆に、UIから入力された値をデータに反映も可能!
:::## MVVMとデータバインディングの関係
### 1. アーキテクチャを簡単にイメージしよう
アーキテクチャの種類に**MVVM**というのを聞いたことがありますでしょうか?
データバイン
エンジニア転職におけるアウトプットの重要性とそのメリット
## はじめに
**エンジニアとしての転職**を目指すなら、**アウトプット**は欠かせません。特に未経験や異業種からの転職を目指す人にとって、自分のスキルを証明するための手段として、アウトプットは**非常に効果的なアピール手段**です。この記事では、**アウトプットの重要性**とその**メリット**について解説し、エンジニア転職に向けて行動を迷っている方の後押しができればと思います。
あくまで私自身の意見のため**全て正しいと言う意味ではないので参考程度**にご覧いただけると幸いです。
## 想定している読者
* **未経験でエンジニア転職を目指している人**
* **アウトプットを始めるべきか迷っている人**
* **転職活動において発信の重要性を知りたい人**## なぜアウトプットが重要なのか?
エンジニアとしてのスキルは、履歴書や面接だけでアピールすることが難しいです。
企業は、「実際にどれだけの技術力があるのか?」を具体的に知りたがります。 アウトプットは、それを証明するための**最も直接的で効果的な手段**です。
### 実力をアピールしやすい
GitHubでの
【Flutter】Google認証(ログイン/サインイン)の実装
## 1. はじめに
Googleアカウントを利用したログインは、ユーザーにとって簡単でセキュアな方法です。多くのユーザーが既にGoogleアカウントを持っているため、Googleでのサインインはアプリへのスムーズなアクセスを提供し、ユーザーエクスペリエンスを向上させます。
Flutterでは、FirebaseというGoogleが提供するサーバーサイドのモバイルアプリ開発用プラットフォームを使用するのが定石です。Firebaseを利用する事で、Googleアカウントでのログインをセキュアかつシンプルに実装できます。
本記事では、Flutterを使用してFirebase Authenticationを利用したGoogleアカウントでのログインを実装する手順を詳しく解説します。
## 2. 事前準備
### 1. Firebaseの設定
**1.1 [Firebase Console](https://console.firebase.google.com/)でプロジェクトを作成します。****1.2 FirebaseプロジェクトにFlutterを追加します。**
初回
SwiftUi ポップオーバーを実装
iOS16.4からポップオーバーというものがあるみたいなのでこちら実装して見ようと思います。
こちらの吹き出しみたいな実装です。
![Simulator Screenshot – iPhone 16 Pro – 2024-09-27 at 12.05.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274615/18d701d9-ab8a-10f2-b2ec-9ff6549166f8.png)
# サンプルコード
“`PopoverSample.swift
struct PopoverSample: View {
@State private var isShowPopover = falsevar body: some View {
ZStack {
Button(“show popover”) {
isShowPopover = true
}
ipa形式iOSのアプリをiPhoneにインストールする方法
## 対象者
iOSアプリをビルドしたけど、ipa形式のアプリをどうやってiPhoneにインストールしたらいいのか悩んでいる人## 方法1
一つ目の方法にして、おそらく結論。これ以外の方法を使うことはないと思う。### 手順
– ipaファイルをAirDropでインストールしたいiPhoneに送信する
以上## 方法2
iPhoneを有線でmacに接続し、Xcode経由でインストールする方法### 手順
[Xcodeを使ってipaをiPhoneにインストールする](https://qiita.com/0ba/items/f0c52b73d40f0ac33d25)を参照
【2024/10時点】iOSアプリでFCMを使った画像付き通知を受信する方法
## 何をするのか
iOSにて、FCM(Firebase Cloud Messaging)を使って以下のような画像付き通知を受信します。
## 落とし穴
いくつか落とし穴があります。気をつけてください。
– **Firebase(GUI)から通知を送ると、受信するまでに1〜2分ほどラグが発生します**
– PythonやGoなどでアプリサーバーをたて、Firebaseのプッシュ通知サーバー(`https://fcm.googleapis.com/v1/projects/プロジェクト名//messages:send`)へリクエストを送りプッシュ通知を送信してください。これでラグ発生することなく通知を受信できます。
– **画像付き通知を受信するには、iOSアプリ側でNotification Servic
[iOS] [リモート通知] APNSサーバーの認証処理を実装するときに役立ったツール
# 目的
iOSでリモートプッシュ通知を実装する際、APNSサーバー(Appleのプッシュ通知サーバー)にリクエストを送るための認証処理で苦労したので、その時に役立ったツールを紹介します。この記事は備忘録を兼ねており、同じ問題に直面している方々にとっても参考になれば幸いです。# APNSサーバーでの認証について
リモートプッシュ通知を送るためには、APNSというAppleのサーバーに対してHTTPSリクエストを送る必要がありますが、リクエストがどのアプリのものかを識別するため、認証が必要です。不正なリクエストやなりすましを防ぐためにも重要なステップです。Appleが提供している認証方法は以下の2つです:
– [証明書による認証](https://developer.apple.com/documentation/usernotifications/establishing-a-certificate-based-connection-to-apns)
– [トークンベースの認証](https://developer.apple.com/documentation/usernot
Xcode Cloudの導入〜App Store Connectへアップロードする手順
## はじめに
本記事では [Xcode Cloud](https://developer.apple.com/xcode-cloud) を使用してCIを構築した際の手順を簡潔に紹介します。
**Xcode Cloudの導入 〜 ビルド成果物をApp Store Connectにアップロード** までの手順を紹介しています。ちなみに、現時点でのXcode Cloudでは無料で **25時間/月** のビルド時間が利用できるので、おそらく個人で使う分には無料プランで十分だと思います。
## 前提条件
Xcode Cloudを使用するための条件が [公式ドキュメント](https://developer.apple.com/documentation/xcode/requirements-for-us
【Flutter】TODO / タスク管理アプリを作成する方法
## 1. はじめに
この記事では、Flutterを使って基本的な機能を持ったTODO / タスク管理アプリを作成します。Flutterの基礎を学びながら、簡単なアプリを作ってみましょう。
## 2. タスク管理アプリの主な機能:
1. **タスクの追加(作成)**:
画面右下の「+」ボタンをタップすると、ダイアログが表示され、タスク名と締め切りを入力してタスクを追加できます。2. **タスクの編集**:
リスト上の任意のタスクをタップすると、編集ダイアログが表示され、タスク名や締め切りを変更することができます。3. **タスクの削除**:
タスクを左または右にスワイプすると削除されます。4. **タスクの完了/未完了の管理**:
リストの右側にあるチェックボックスをタップして、タスクの完了状態を切り替え、完了したタスクは削除します。5. **タスクのソート**
タスクの並び順として、締め切り日 (deadline) が近い順にタスクを並べています。6. **端末のストレージへのタスクの書き込み・読み込み**
端末のローカルストレージにタスクを保存し、アプリが