String型から別の型に変換することはFlutter開発ではよくあることなので、その方法を紹介したいと思います。 あらゆる型変換の方法のまとめて解説した動画を『Flutterラボ』で公開しているので、こちらもご覧ください。 String から int に変換 int.parse('100'); // String から int に変換 String から double に変換 double.parse('0.8'); // String から double に変換

List型は、同じ型の値を複数格納するオブジェクトです。Flutterでのアプリ開発でもよく使う型ですので、基本的な使い方とメソッドを紹介します。 変数宣言型を指定して宣言します。 List<int> numbers = [ 2, 4, 6,]; 型推論を使って宣言することもできます。 List numbers = [ 2, 4, 6,]; var numbers = [ 2, 4, 6,]; 値を取得numbers[0]; // 2numbers[1]; //

時間に関するDateTime型は、Flutterでのアプリ開発には欠かせないものなので、宣言、よく使うメソッド、パッケージを使った応用についてまとめます。 型宣言DateTime a; DateTimeは 年、月、日、時間、分、秒、ミリ秒、マイクロ秒 までの指定することが可能になっています。 今回は、2020年10月2日12時10分を指定します。 DateTime a = DateTime(2020, 10, 2, 12, 10); now (DateTime)いま

Map型は、keyと呼ばれる値とvalueと呼ばれる値を紐付けて格納するオブジェクトです。 この記事の内容はFlutter専門の学習サイト『Flutterラボ』で、より詳しく動画で解説しているので、興味のある方はそちらもご確認ください。 変数宣言まずは、型を指定して宣言します。 今回はフレームワーク名をkeyにして、対応言語名を格納します。 Map<String, String> frameworks = { 'Flutter' : 'Dart', 'Rails' :

いつもFlutterラボをご利用いただきましてありがとうございます。 長期休暇にプログラミング学習でアプリ開発のスキルアップを目指しましょう！GWの学習者応援として本日から5/6までセールを開始いたします。 通常は年額19,200円（1ヶ月あたり1,600円）のところ、11,400円（1ヶ月あたり950円）に大幅値引きしております。 料金プランの年額コース『お支払い』ボタンからご決済いただけます。

Nuxt.jsはVue.jsをベースにしたフレームワークですが、バージョンが上がったことでどのように変わったのか簡単にまとめておきます。 Vue.jsのバージョンNuxt2はVue2をベースにしていましたが、Nuxt3ではVue3をベースにしています。 コンポジションAPINuxt2では、コンポジションAPIをVue2に追加するための別途プラグインが必要でしたが、Nuxt3では、Vue3にもともと組み込まれているため、デフォルトで使用できます。 ViteのサポートNux

TypeScriptで使う主な型を簡単にまとめておきます。 基本型String 文字列型 number 数値型 boolean 真偽値型 （true or false） null 値が存在しない型 undefined 値が未定義の型 オブジェクト型オブジェクト型を定義するためにインターフェースや型エイリアスを使用できます。 インターフェース(Interface) interface User { id: number; name: string;

UI開発でよく使うWidget30選 → 50選 にアップデートしました。 こちらの教材ではFlutterでよく見かけるWidgetを30個取り上げて解説をしておりましたが、新たに20個追加解説しました。 Flutterの学習を始めたばかりの初心者の方はもちろん、Flutter中級者や上級者の方にとっても備忘録としてWidgetの使い方の復習に活用していただける教材となっております。 いろいろなWidgetの使い方を一緒に学んでいきましょう！ 視聴はこちら

Vue.jsとNuxt.jsは、共にJavaScriptフレームワークですが、どのように違うのか簡単にまとめたいと思います。 開発目的Vue.jsは、JavaScriptによるシングルページアプリケーション（SPA）の構築に特化しており、ユーザーインターフェースを構築するための主要なフレームワークです。 一方、Nuxt.jsは、Vue.jsをベースにしたサーバーサイドレンダリング（SSR）の機能を提供するためのフレームワークです。SSRにより、ユーザーがページにアクセスす

Nuxt.jsはVue.jsをベースにしたフレームワークですが、バージョンが上がったことでどのように変わったのか簡単にまとめておきます。 Vue.jsのバージョンNuxt2はVue2をベースにしていましたが、Nuxt3ではVue3をベースにしています。 コンポジションAPINuxt2では、コンポジションAPIをVue2に追加するための別途プラグインが必要でしたが、Nuxt3では、Vue3にもともと組み込まれているため、デフォルトで使用できます。 ViteのサポートNux

TypeScriptで使う主な型を簡単にまとめておきます。 基本型String 文字列型 number 数値型 boolean 真偽値型 （true or false） null 値が存在しない型 undefined 値が未定義の型 オブジェクト型オブジェクト型を定義するためにインターフェースや型エイリアスを使用できます。 インターフェース(Interface) interface User { id: number; name: string;

Nuxt3がstableになったので早速触ってみました。まずはFirebaseを導入するところから始めましたが、結構序盤で躓きました。 Nuxt3の公式ページ Firebase 9公式ドキュメント 参考にしたドキュメント FirebaseとNuxtのバージョン "firebase": "^9.16.0","firebase-admin": "^11.4.1","firebase-functions": "^4.1.1","firebase-functions-tes

Googleが開発するAIを導入したアプリ開発が学べる動画です。 画像から文字認識して翻訳するまでの開発方法を紹介しています。 年内は無料で公開しているので、ぜひこの機会に学習してみてください！

昨年に引き続き、大阪市が主催に携わっている『梅田あるくフェス』で1ヶ月間、開催されるスタンプラリーにシステム提供を行います！ ↓ 大阪市からの発表 我々が開発しているARスタンプラリー『Videre』のシステムを使ってイベント開催を行います。 開催期間は、2022年10月1日から31日までの1ヶ月間で、スタンプを集めて豪華賞品に応募できますので、ぜひ梅田に来た際にはご参加ください！

Flutterラボとコワーキングスペース『OBPアカデミア』が共同で、ハッカソンを大阪で開催することになりました。 プログラミング初心者やFlutterに触れたことのない方に向けて、初日にはプログラミング講座を受けることができます。 参加費用は無料で、優勝者にはなんと10万円分のAmazonギフト券と副賞が贈られます。 Flutterを広めたい『Flutterラボ』と、IT分野の方が集まる場をつくりたい『OBPアカデミア』の実験的な試みで、何かおもしろくて人が集まること

┌─ Flutter Fix ────────────────────────────────────────────────────────────────────────────────┐│ [!] Your project requires a newer version of the Kotlin Gradle plugin. ││ Find the latest version on https://kotlinlang.

ColumnやRow等のchildrenを使うWidgetで、childrenの中身を自動で生成したいときはよくあります。 .map() toList()で生成する方法を以前紹介しましたが、for文で記述することもできるので紹介したいと思います。 例として、0から3まで生成してTextで表示してみたいと思います。 Column( children: [ for(int i = 0; i < 4; i++) ... { Text('${i}') }

Flutterアプリ開発で頻出Widgetの『AppBar』ですが、初心に戻って改めて使い方を解説したいと思います。 AppBarはStatefulWidgetですので、childやchildrenの中に入れて使うこともできますが、ScaffoldのappBarプロパティの中で使用するケースがほとんどです。 return Scaffold( appBar: AppBar(),); AppBarのなかでもよく使うプロパティをいくつか紹介したいと思います。 ちなみに、A

変数宣言List<String> list = ['Apple', 'Banana', 'Grape']; この3つのStringを使用して動的にWidgetをしてリスト表示してみましょう。 ループ文を使用して表示するList<Widget> buildItems(){ List<Widget> items = []; list.forEach((String text){ items.add(Text(text)); }); retu

Flutter開発でのリスト表示を作成するときによく使う、ListTileウィジェットについて紹介したいと思います。 titleおそらく一番よく使われるプロパティで、ListTileの中に表示したいものを指定するプロパティです。 ListTile( title: Text('title'),) subtitle titleの下に小さめに表示したいものを指定するプロパティです。 ListTile( title: Text('title'), subtitle: Text

今日はVPSのssh設定や、リモートアクセスの設定を行いました。 Dart開発には直接関係の無い内容なので割愛しますが、もし興味のある方がいればそれも記事にしたいと思います。

今日したことデプロイするためのVPSを用意 VPSを契約デプロイするためのサーバーをさくらのVPSで契約しました。 そのVPSにubuntuをインストールしておきました。 今日は時間がなかったのでここまでです。 明日はDartのインストールぐらいはしたいと思います。

昨日までのおさらいDartSDKをインストールして、バックエンド開発の環境構築 パッケージを利用してMySQLに接続、SQL文でデータ取得 GETかPOSTかを判定して分岐 今日したことGETリクエストのパラメータを取得する request.uri.queryParameters でパラメータを取得することができます。 今回は、http://localhost:4040?sort=old のようにsortがoldかnewかを判断して、userテーブルからidの昇順か降順

昨日までのおさらいDartSDKをインストールして、バックエンド開発の環境構築 パッケージを利用してMySQLに接続、SQL文でデータ取得 今日したことGETかPOSTかを判定して分岐させる。 HttpRequestの『method』でGETかPOSTかなどのリクエスト方法が取得できるので、GETの場合は『GET』、POSTの場合は『POST』と表示してみます。 switch (request.method) { case 'GET' : { request.res

はじめにSource Treeとは①〜⑥までに学んだ全ての処理をコマンドを使用することなく、全てUI上で行うことができます。Git GUIを使用すればGitコマンドを覚える必要がありませんが、実際にコマンドを打つことでどのような処理が行われているのか把握することが目的で前章のような説明を行いました。 Source Treeのダウンロード 下記のリンクからSource Treeのダウンロードを行ってください。 ホーム画面の表示ダウンロードが完了したら、アプリを開いてホーム画

今回はこれまでに作成したプロジェクトをGithubサーバーに保存しようと思います。リモート上にプロジェクトを格納しておくことで、ポートフォリオとしても共同プロジェクトをプールしておくことができます。 GitHubアカウントの作成今回はGitHubを使用してプロジェクトをプッシュします。 リポジトリの作成ログインに成功した後、ヘッダーの右上にある＋ボタンをクリックします。 出てきたポップアップのNew repository(新しいレポジトリの作成)をクリックします。 レ

今回はGitのブランチ機能を使っていきたいと思います。ブランチという単語は日本語で木の枝を指しており、全体のプロジェクトを木(ツリー)として、複数人または個人でも作業を分担することが可能です。 はじめにまずは前回作成したテストブランチに移動します。 Macbook-pro $ cd test git branchコマンドで現在のブランチを確認します。 test $ git branch 結果 * master と出れば成功です。masterクラスとはgit in

全章ではbranchを新しく作成し、変更を加えました。今回はブランチを結合させてみましょう。 masterブランチに移動masterブランチにcheckoutしましょう。 test % git checkout master developブランチを作成今回はdevelopブランチを作成してfeature/1ブランチをマージしていきます。 test % git branch develop test % git checkout develop これでdevelo