- 1. Ionic+ReactでNFCタグを読み取れるアプリを作る
- 2. 【macOS】Flutterの環境構築【iOS / Android対応】【4つの手順】
- 3. Execution failed for task ‘:app:kaptDevelopDebugKotlin’. > A failure occurred while executing org.jetbrains.kotlin.gradle.internal.KaptExecution > java.lang.reflect.InvocationTargetException (no error message) というエラーが出た時
- 4. Android振動のさせ方
- 5. AndroidStudioのemulatorで’No device definitions are available’や’AVD has terminated’
- 6. JetPackComposeをマルチモジュールで使ったときのNoSuchMethodError
- 7. 【React Native】位置情報アクセス許可要求とAppStateの相性が悪い件
- 8. android:layout_width=”0dp”て何?
- 9. Flutter環境構築(Mac Intel-chip)
- 10. JetpackComposeを使ってFlutterの初期プロジェクトと同じものを作ってみる
- 11. Android の Wi-Fi 関連の実装についての話
- 12. 角丸のプログレスバー 実装方法
- 13. Git HookでSpotlessとktlintを使った自動コードチェック
- 14. Ktorで、ファイルのダウンロードでプログレスを表示する
- 15. JetpackComposeのLazyRowでタップしたアイテムを中央にスクロールする
- 16. Androidアプリで端末の言語設定を取得する
- 17. Androidアプリで端末の位置情報を取得する
- 18. Androidアプリでリンクを開けるようにする
- 19. Jetpack Composeでシンプルなリストビューを表示してみる
- 20. VSCodeの拡張機能のAndroid iOS Emulatorを動かす
Ionic+ReactでNFCタグを読み取れるアプリを作る
## 必要な条件
このチュートリアルでは, アンドロイドアプリを作っていきます。同じ手順でiPhoneアプリも作れるはずですが、テストしてみたことはありません。 Ionicは、Angular、Vue、React、およびvanilla Javascriptで使用できます。 でも、このチュートリアルでは、React/Typescriptと一緒にIonicを使います。 チュートリアルに沿っていくには、次の条件が必要になります:
– android studio
– VsCode (他のIDEでも良い)
– Node (npm)
– Reactの基礎知識
– Typescriptの基礎知識## 準備
コマンドラインを使用してionicCLIをダウンロードします: `$ npm install -g @ionic/cli`
IDEでIonicアプリを入れたいフォルダを開きます。 IDEのターミナルで、`ionic start`を実行します。アプリ作成ウィザードを使用するかどうか表示されるので、`Y` (yes)を選びます。初めて使う方は、アカウントを作る必要があります。良ければ、簡
【macOS】Flutterの環境構築【iOS / Android対応】【4つの手順】
# はじめに
「Flutter SDKのインストール」から「iOSとAndroidでFlutterアプリを実行」までを、以下の手順で解説します。1. Flutter SDKのインストール
1. シンプルなFlutterアプリの作成
1. iOSでFlutterアプリを実行
1. AndroidでFlutterアプリを実行# 環境
OSはmacOSを利用します。macOS以外ではiOSの環境構築ができないためです。FlutterのインストールとアップデートにGitが利用されているため、事前にXCodeをインストールしておくことをお勧めします。
[Webダウンロード](https://developer.apple.com/xcode/) / [Mac App Store](https://apps.apple.com/us/app/xcode/id497799835)Homebrewを利用するため、事前にHomebrewをインストールしておくことをお勧めします。
[インストール方法](https://qiita.com/zaburo/items/29fe23c1ceb60
Execution failed for task ‘:app:kaptDevelopDebugKotlin’. > A failure occurred while executing org.jetbrains.kotlin.gradle.internal.KaptExecution > java.lang.reflect.InvocationTargetException (no error message) というエラーが出た時
# 初めに
ビルド実行時に AndroidStudioで
>Execution failed for task ‘:app:kaptDevelopDebugKotlin’.
> > A failure occurred while executing org.jetbrains.kotlin.gradle.internal.KaptExecution
> > java.lang.reflect.InvocationTargetException (no error message)というエラーが発生した時の対処をここに残します
※エラー自体を解消するものではありません、エラーの内容を把握するためのものです# 翻訳
> タスク’:app:kaptDevelopDebugKotlin’の実行に失敗しました。
> >org.jetbrains.kotlin.gradle.internal.KaptExecutionの実行中にエラーが発生しました
> > java.lang.reflect.InvocationTargetException(エラーメッセージなし)エ
Android振動のさせ方
今回はAndroidの実装で振動をさせることになったので、やり方を残しておこうと思います。
※こちらAPI level 26以上 API level 31未満のやり方です。
API level 31ではDeprecatedになっており、VibratorManagerを使用します。# Manifestの設定
AndroidManifest.xmlでVIBRATEの許可します。
“`AndroidManifest.xml
“`# Activity
“` MainActivity.kt
val vibrator = getSystemService(Context.VIBRATOR_SERVICE) as Vibrator
val vibrationEffect = VibrationEffect.createOneShot(500, 200)
vibrator.vibrate(vibrationEffect)
“`これで振動できます。
AndroidStudioのemulatorで’No device definitions are available’や’AVD has terminated’
# 結論
APIを32から31に落とす
JetPackComposeをマルチモジュールで使ったときのNoSuchMethodError
マルチモジュールでJetpackComposeを使おうとして以下遭遇。
Android: java.lang.NoSuchMethodError
composeを使うモジュールのbuild.gradleに以下が必要でした。
“`build.gradle
android {
・・・
buildFeatures {
compose = true
}
composeOptions {
kotlinCompilerExtensionVersion = “X.X.X”
}
}
“`モジュール作成時のデフォルトだと設定されないのに気づかず地味にはまったので備忘
【React Native】位置情報アクセス許可要求とAppStateの相性が悪い件
## はじめに
React Nativeを仕事で扱い始めてから、早半年以上が過ぎました。
いろいろ躓くところはありましたが、一番躓いたといっても過言ではない件を備忘録として残しておこうと思います。### まず、結論から言わせて
今回根本的な解決はできておりません!!!
実装に合わせた修正をいれて対応したけど、あくまで __「こういった事象が発生したよ。」__ というものになります。## 位置情報アクセス許可要求とAppStateの相性が悪い件
厳密には相性が悪いという訳ではなく、想定外の動きをしてしまったというのが正しいです。
ちょっと盛りましたね。
※ちなみにAndroidのみで発生。### AppStateとは?
[React Native公式ドキュメント – AppState](https://reactnative.dev/docs/appstate)
公式ドキュメントを読んでもらったほうが早いですが、アプリがフォアグラウンドにあるかバックグラウンドにあるかを通知してくれるものです。
### AppStateを使用した背景
位置情報を監視したかったのですが、一
android:layout_width=”0dp”て何?
# この記事は
Androidで画面を構成していく時、`height`や`width`などを指定することは頻繁にあることと思います。このような時に、多くの場合は、`wrap_content`や`match_parent`を使いますが、たまに`android:layout_width=”0dp”`のような表現を見ることがあります。
ではこれらの違いを見ていきましょう# wrap_content:子に合わせる
これはその中に入るビューの大きさに任せるよ、という意味です。
つまり、例えば`layout_height=”wrap_content”`で指定されたButtonの中に`layout_height=”100dp”`のTextViewを入れたとします。その場合、Buttonの高さはTextViewに合わせて100dpになります。# match_parent:親に合わせる
これは、親(1つ上のビュー)の大きさに合わせるよ、という意味です。
例えば、`layout_height=”100dp”`としているButtonの中に`layout_height=”match_paretn
Flutter環境構築(Mac Intel-chip)
基本的には下記の記事通りでよかったけど・・・。
https://qiita.com/ruru9yoonsic/items/1d21826f9b591577d307
最後に一つだけWarningが残ったので備忘。
警告内容は以下。:::note warn
Android toolchain – develop for Android devices (Android SDK version 32.1.0-rc1) ! Some Android licenses not accepted. To resolve this, run: flutter doctor –android-licenses
:::以下を実行して、y/Nと聞かれるので全て「y」を選択。
~~~.zsh
flutter doctor –android-licenses
~~~その後、再度以下を実行
~~~
flutter doctor
~~~No issues found!
JetpackComposeを使ってFlutterの初期プロジェクトと同じものを作ってみる
# 初めに
こんにちは。Androidエンジニアのバナナです。今日もJetpack Composeを触っていきます。
今回はカウントアップアプリを作ってみます。
Flutterで自動生成されるアプリと同様のアプリですね。
# レイアウト作成
まずはレイアウトを作っていきます。
要素としては下記の3つがありますね– ①トップバー
– ②画面中央のカウントを表示するテキスト
– ③右下のアクションボタン次のように実装します。
`Scaffold` を使うことで、レイアウト指定がなくてもマテリアルデザインに沿った配置にしてくれるのに感激しました。“`kotlin:MainActivity.kt
@Composable
fun Counter() {
Android の Wi-Fi 関連の実装についての話
## はじめに
今更ながら Android で Wi-Fi まわりの実装を行う機会があったので個人的にまとめました。
いくつかのメソッドは `This method was deprecated in API level 29.` なので注意が必要です。> Android Developers Reference
– [WifiManager](https://developer.android.com/reference/android/net/wifi/WifiManager)
– [WifiInfo](https://developer.android.com/reference/android/net/wifi/WifiInfo)
## パーミッション
AndroidManifest.xml に以下を追加します。
“`
角丸のプログレスバー 実装方法 # 初めに
今回、記事にするのは進捗率を表す際に使用するプログレスバーの角丸実装方法です。
通常の実装ではただの長方形になりますが、少し手を加えることで角丸のプログレスバーが実装できます### 実装方法
一般的にはプログレスバーを利用する場合、通信中であることを示すためのサークルのものがほとんどだと思います。
しかし、プログレスバーに下記の設定を追加することで最初に書いた様な長方形の進捗率を表すためのViewに変わります。“`xml:
style=”@style/Widget.AppCompat.ProgressBar.Horizontal”
“`
![スクリーンショット 2022-03-25 18.07.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638092/b19515ee-c78d-9bbf-a103-bf831f57364f.png)実際に使うとなると、角丸で実装することの方が多いかと思います。
そこで利用するのが今回のメインである`progressDrawable`で
Git HookでSpotlessとktlintを使った自動コードチェック
チームで開発する時に一律でフォーマット揃ってたり、
既存のコードも一律に綺麗にしたりを今後維持できるようにできたらいいなと思ったので
とりあえずやってみました。## Git Hookとは
Gitでコマンドを実行する際に、前後でスクリプトを実行できるGitの機能。
今回使う`pre-commit`の場合、commitを行うとその前にスクリプトが実行され、
問題があればcommitを中止し、なければcommitを通すといったことが出来ます。例としては
* commit時にテストを流す
* commit時にlinterでチェック、あるいはフォーマッターをかける
* 特定のブランチへのcommitを禁止(masterやdevelopなど)
* …etc## Spotlessとは
https://github.com/diffplug/spotless
Javaのコードチェック、フォーマットが出来るLinterです。
指定したフォーマットに従ってJavaのコードをいい感じにフォーマットしてくれます。## Ktlintとは
https://github.com/
Ktorで、ファイルのダウンロードでプログレスを表示する
### Ktorで、ダウンロード
ktorの導入は、下記を参照してください。
https://qiita.com/shimizu-you/items/86ca6fa7d7d6cbd17e02
Ktorで、ダウンロードする際にプログレスを表示したいと思ったのですが、公式サイトに記載されてる内容が動作しなかったので、実際に動作する実装を記載します。
### KtorのonDownloadを使う
onDownloadを使う場合、callbackFlowで受信する必要があります。
callbackFlowを使用する場合、callbackFlowをクローズする際にonDownloadを初期化する必要がありますので、awaitCloseで初期化します。“`kotlin
suspend fun downloadFile(url: String, context: Context): Flow= callbackFlow {
val httpClient = HttpClient(OkHttp) {
JetpackComposeのLazyRowでタップしたアイテムを中央にスクロールする
### animateScrollBy()を使用してLazyRowの中央にアイテムスクロールさせる
#### こんな感じの動き
Eをタップ → Gをタップ → Eをタップ
#### コード全体
“`kotlin
@Composable
fun ScrollList(
horizontalPadding: Dp = 20.dp,
horizontalItemSpace: Dp = 10.dp,
itemWidth: Dp = 60.dp,
) {
BoxWithConstraints(
modifier = Modifier
.fillMaxSize()
.background(Color.Bl
Androidアプリで端末の言語設定を取得する
#はじめに
Androidアプリで端末の言語設定を取得する。
使用したプラグイン`cordova-plugin-globalization`。#コード
プラグインをインストールする。“`
cd src-cordova
cordova plugin add cordova-plugin-globalization
“`コード
“`javascript
document.addEventListener(“deviceready”, function(){
window.navigator.globalization.getPreferredLanguage (
function(language) {
let deviseLang = language.value;
console.log(deviseLang)
}
)
}
, false);
“`app/res/xml/config.xmlに下記を追加する。
“`html
Androidアプリで端末の位置情報を取得する
#はじめに
Androidアプリで、Cordovaプラグインを使用して端末の位置情報を取得する。#コード
最終的なコード“`typescript
document.addEventListener(“deviceready”, function(){let permissions = window.cordova.plugins.permissions;
permissions.requestPermissions(
[
permissions.ACCESS_FINE_LOCATION
,permissions.ACCESS_COARSE_LOCATION
]
,function( status ){
if( status.hasPermission ){
navigator.geolocation.getCurrentPosition(
function(position) {
let latitude = position.coords.la
Androidアプリでリンクを開けるようにする
#はじめに
Cordovaプラグインを使用して、Androidアプリでリンクを開けるようにする。
使用したのは`cordova-webintent`。https://github.com/cordova-misc/cordova-webintent
iOSでは`InAppBrowser`を使用する必要がある。
#コード
src-cordovaディレクトリにインストール。“`
cd src-cordova
cordova plugin add github:cordova-misc/cordova-webintent.git
“`関数を作成。
“`typescript
openLink() {
window.plugins.webintent.startActivity(
{
action : window.plugins.webintent.ACTION_VIEW
,url : ‘https://~~~’
}
,function(){}
,function(){ alert (‘Failed to
Jetpack Composeでシンプルなリストビューを表示してみる
# 初めに
近年、Android界隈ではJetpack Composeがもっぱらの話題ですね。
勉強会などのテーマにも頻出しています。
乗り遅れないよう、今日はJetpac Composeを使ったリストビューの表示をしていきたいと思います。# 前提
下準備として、チュートリアルを ~~コピペ~~参考に、リスト要素の実装をしておきます。
コードとしてはこんな感じですね。
“`kotlin
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MessageCard(Message(“Android”, “Jetpack Compose”))
}
}
}data class Message(val author: String, val body: String)
VSCodeの拡張機能のAndroid iOS Emulatorを動かす
### はじめに
Android Studioでよくね?って思われる方が多いと思う。実際その通りだと思うが、他の拡張機能との
関連でVSCodeを使いたかったため、こちらの拡張機能を使った。### VSCodeの以下の拡張機能を使う
https://marketplace.visualstudio.com/items?itemName=DiemasMichiels.emulate### まずやること
Andorid Studioをいれて、エミュレータをダウンロードする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1859803/326cbe19-fe4a-f65f-a5ef-2b6b26d4973d.png)### パスを設定に追加する
拡張機能の歯車マークを押下すると以下の画面が表示される。
OSに応じたエミュレータのパスを入れると動く。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazona