まっこり

東京工業大学▶︎Android & iOS開発者 AndroidやiOS開発のチュートリアル販売, 個人開発報告, テキトウな学習記録を投稿してます 好きな言語: Kotlin, TypeScript

まっこり

東京工業大学▶︎Android & iOS開発者 AndroidやiOS開発のチュートリアル販売, 個人開発報告, テキトウな学習記録を投稿してます 好きな言語: Kotlin, TypeScript

    マガジン

    • JetpackCompose初心者向けチュートリアル集

      Android開発初心者~初級者向け JetpackComposeの初心者から中級を目指すためのチュートリアル集

      • JetpackCompose初心者向けチュートリアル集

    最近の記事

    【初心者向けチュートリアル3】JetpackComposeでTodoリストアプリを作ろう

    こんにちはまっこりです。今回の記事はJetpackComposeの初心者向けチュートリアルの第三弾となっております。第一弾、第二弾を通じてJetpackComposeでのUIの作成方法、ViewModelを使ったデータの管理方法を学んできました。第三弾では、これまで学んできたUIの作成方法やViewModelを使用しつつ、リスト、ダイアログ表示の作成や、より難しいDB操作をするTodoリストアプリを作っていきます。 初心者向けチュートリアルの第一弾、第二弾をやっていない方は

    スキ
    1
    有料
    250
      • 【初心者向けチュートリアル2】JetpackComposeでBMI計算アプリを作ろう

        注意: この記事には一部誤りが含まれています <- Hilt関連 TODO: 修正 こんにちはまこりです。今回の記事はJetpackComposeの初心者向けチュートリアルの第二弾となっております。第一弾で学んだJetpackComposeでの基本的なUIの作成をおさらいしつつ、ViewModelを使ったデータの管理やテキストフィールドによるユーザーインプットの扱い方などを学んでいきます。 ユーザーが入力した身長と体重をもとにBMIを計算し、画面に表示するというアプリをハ

        有料
        250
        • 【初心者向けチュートリアル】Jetpack Composeで自己紹介アプリを作ろう

          こんにちはまっこりです。今回の記事はJetpackComposeの初心者向けチュートリアルとなってます。JetpackComposeでのテキストや画像の表示、ボタンクリックによる表示の変更といった基本的な部分を習得できる内容になっているかと思います。 作るアプリについて自己紹介アプリというとどんなアプリなのか想像しにくいかと思います。名前や会社名、趣味といった自己紹介で話すような項目をただ表示するだけのアプリです。イメージとしては名刺が近いかと思います。 完成図は以下のよ

          スキ
          7
          有料
          250
          • 【JetpackCompose】Realmを使ってTodoアプリを作ろう

            こんにちはマッコリです。今回のnoteはAndroidアプリ開発のチュートリアル記事です。Realmを使ってTodoアプリを作っていきます。Realmを使ったCRUDの実装方法、MVVM+Rアーキテクチャの実装方法、DIライブラリのHiltの使い方を学べる内容となっています。 完成版のソースコードはGitHubにアップロードしてあります。必要な場合は参照ください。 1. 新規プロジェクトの作成では、早速プロジェクトの作成を行なっていきます。 テンプレート選択 プロジェ

            有料
            250

          マガジン

          マガジンをすべて見る すべて見る
          • JetpackCompose初心者向けチュートリアル集
            まっこり
            ¥1,280

          記事

          記事をすべて見る すべて見る

            【JetpackCompose】Roomを使ってTodoアプリを作ろう

            注意: この記事にはリメイク版があります。 こんにちはまっこりです。今回のnoteはAndoridアプリ開発のチュートリアル記事です。SQLiteを扱うためのライブラリであるRoomを使ってTodoアプリを作っていきます。Roomを使ったCRUDの実装方法と、MVVM+Rアーキテクチャの実装方法を学べる内容となっています。 完成版のソースコードはGitHubにアップロードしてあります。必要な場合は参照してください。 1. 新規プロジェクトの作成コードを書いていく前に、プ

            有料
            250

            JetpackComposeでQiitaのクライアントアプリを作ろう

            こんにちは、まっこりです! 今回の記事では、JetpackComposeを使ってQiitaのクライアントアプリを作っていきます。Retrofitを使ったHTTP通信の方法や、MVVMアーキテクチャのシンプルな実装方法を知ることができる内容となっています。 完成時のソースコードをGitHubにアップしてます。必要な場合は確認してみてください。 1. 新規プロジェクトの作成まずは、新規プロジェクトの作成とフォルダ構成を作っていきます。 プロジェクトのテンプレートはEmpty

            スキ
            1
            有料
            250

            【Android/Kotlin】CameraXでQRコードリーダーを作ろう

            こんにちはAndroidアプリエンジニアをしているまっこりです! 今回のnoteは、CameraXとMLKitを使ってQRコードリーダーアプリを作るチュートリアルとなってます。UIはJetpackComposeで実装していきます。 完成するとこんな感じになります。 CameraXはカメラアプリの開発を容易にすることを目的としたライブラリで、developerサイトでも新しいアプリを開発する場合はCameraXの使用を推奨しています。 完成版のソースコードはこちらにアップ

            スキ
            1
            有料
            250

            【SwiftUI】Realmを使ってTodoアプリを作ろう

            こんにちはまっこりです。今回のnoteでは、データベースパッケージのRealmを使ってTodoアプリを作っていきます。Realmデータベースを使ったCRUDの実装を知ることができます。 完成版のソースコードはこちらにアップロードしてあります。必要な場合は参照してください。 Realmのドキュメントは以下です。 1. 新規プロジェクトの作成まずはプロジェクトを新規作成します。 プロジェクトテンプレートはAppを選択して、RealmTodoという名前でプロジェクトを新規作成

            スキ
            3
            有料
            250

            SwiftUIでQiitaのクライアントアプリを作ろう

            こんにちは、まっこりです! 今回の記事では、SwiftUIを使って簡単なシングルページのQiitaのクライアントアプリを作っていきます。WebAPIとの通信の仕方、UIKitをSwiftUIの中で使う方法、MVVMのシンプルな実装方法を知ることができます。 完成時のソースコードをGitHubにアップロードしてます。必要な場合は確認してみてください。 1. 新規プロジェクトの作成まずは、新規プロジェクトの作成とフォルダ構成を作っていきます。プロジェクトテンプレートはAppを

            スキ
            7
            有料
            250

            ReactとTailwindでお問合せフォームを作る

            今回はReactとTailwind.cssを使って問合せフォームを作ったので、その実装方法を紹介します。 フォームの完成イメージデスクトップでの見た目は下の画像見たいな感じです。 入力するフィールドとしては、 ・苗字 ・氏名 ・メールアドレス ・お問合せ内容 の四つです。 フォームを入力した状態で送信ボタンを押すと、axiosでバックエンド側にPOSTリクエストが飛ばされ、送信完了のメッセージが表示されます。一つ一つのフィールドにReactのstateを割り当てて入力値

            スキ
            1

            Reactアプリへの Reduxの導入手順

            この記事では、ReduxをReactアプリに導入する手順を書いていきます。 コード自体はTypescriptですが、Javascriptでも同じような手順でできます。 注: 勉強メモ程度に書いているので、説明が結構雑です。 記事内のコードは公開していないインターフェースなども含んでいるので、例程度に見てください。 1. 利用するパッケージのインストールまずは、redux周りのパッケージをインストールしています。今回は、Reduxの中で非同期な処理を行うことを想定して、re

            スキ
            1

            【React/Typescript】      Cannot find module 'filename.mp3'.ts(2307).エラーの回避方法

            Cannot find module 'filename.mp3'.ts(2307).エラーの回避方法は非常に簡単なんですが、mp3ファイル用の型定義ファイル(d.ts)を作成するだけです。 stackoverflowではmp3ファイルのインポート時にES6のimportではなくES5のrequireを使用すると解決できるというQAもあり、実際にその方法でも今回のエラー自体は回避できたのですが、mp3を再生するときに別の問題が出てきてしまうことがわかったので、型定義ファイル

            スキ
            3

            【DjangoREST】DjangoにReactを結合する方法

            DjangoRESTframeworkのフロントエンドとして、Reactを結合する方法を勉強したので、その方法について復習しながら、まとめていきたいと思います。 この記事では、ReactをDjangoのプロジェクトに組み込む方法を中心にしたいので、DjangoRESTframeworkやReact自体の使い方には触れません。 Reactに関して初心者なので、認識が間違っている点とかあるかもしれないです。ご注意ください。 参考にした資料 環境: python 3.9.6

            スキ
            4

            【Vue】 Syntax Error: TypeError: this.getOptions is not a functionの解決方法

            エラー内容vueのstyle部分にlang="suss"と設定すると以下のようなエラーが出ることがある。 この記事では、このエラーが出た時の解決方法をひとつ紹介します。 参考にしたstackoverflowの記事: https://stackoverflow.com/questions/66082397/typeerror-this-getoptions-is-not-a-function 解決方法 vueのバージョンとsass-loaderのバージョンの組み合わせが悪

            スキ
            3

            【Unity】Can't add scriptの対処方法

             こんにちは、最近Unityを使い始めたまっこりです。  この記事では、UnityでオブジェクトにC#スクリプトを関連づけるときに時々発生する"The script don't inherit a native class that can manage a script."の原因と対処方法について紹介します。 原因 このエラーが発生する原因は、スクリプトのファイル名とクラス名が異なるからです。Unityではファイル名を変えても、クラス名の自動変換がされないので、ファイル

            スキ
            2

            ブックマークアプリをGoogle Playで公開しました!「Bookmark Directory」

             パソコンのファイル管理アプリのように、ブックマーク(url)を管理できるAndroid アプリを「Bookmark Directory」という名前でGoogle Playで公開しました!今回の記事ではその特徴を紹介をしていこうと思います。 ちなみに、Google Play StoreのUrlはこちらです。https://play.google.com/store/apps/details?id=com.jp_funda.urlfolder youtubeでデモ操作をした

            スキ
            1