注意！ この記事は前回の記事を読んでいることを前提に作られています。 まだ読んでいない方は下のリンクからどうぞ。 Flutter:スマホからVRChatの表情をコントロールする 前編 🔗目次 まえがき 最終的なコード 実装 完成品 あとがき 🔗まえがき みなさんどうもこんにちは、株式会社ECN所属のFuseです。 前回はスマホからデータを送信しVRChatのアバターを制御することに成功しました。 ですが表情を覚えられない問題の解決には至っていません。なので今回は各アバターのジェスチャーごとの表情名をPalletというクラスで管理し Hiveという軽量なキーバリューストアライブラリを使ってローカルに保存することで パレットを永続化していつでも読み込めるようにしていこうと思います。 ↑目次に戻る 🔗最終的なコード ↑目次に戻る 🔗実装 それでは御託は抜きにしてさっそく実装していきます。

🔗目次 まえがき VRChatの表情変更難しい問題 OSCとはなんぞや そうだ、スマホ使おう。 実装 Unity側で行う準備 完成品 あとがき ↑目次に戻る 🔗まえがき みなさんどうもこんにちは、株式会社ECN所属社員のFuseです。 突然ですが、皆さんはVRChat、遊んでますか？ 私は前回の記事でも言及した通りドはまりしてます。 そんな私ですが、最近ある悩みがあります。 表情が覚えられません。 ↑目次に戻る 🔗VRChatの表情変更難しい問題 私が使っているデスクトップ版のVRChatでは基本的にシフトキー+ファンクションキーで表情を変更します。 表情はニュートラルのF1を除くとアバターごとにF2~F8と左シフト、右シフトの組み合わせで7*2の14通あります。 さらにどの組み合わせがどの表情というのはアバターごとに違い、あるアバターでは笑顔になるキーの組み合わせがほかのアバターだ

2024.05.20 Flutterで同期的にJava, Objective-Cのネイティブコードを呼び出す(2024年5月版) はじめに Flutterでネイティブな機能を呼び出すためにはMethodChannelを使用することが一般的ですが、 その場合非同期での処理が前提になります。 そのため頻繁に呼び出しが発生するような場面にはあまり向かなかったり、そもそも非同期処理だと使えない場面というのもありそうです。 今回はそんな状況に対応するためのネイティブコードの同期的な呼び出しについて考えます。 【そんな状況】 ロケールに応じたソートをしたい つい先日、文字列のロケールに応じたソートが必要になりました。 記事執筆時点では 文字列のロケールに応じたソートができる標準の機能はDartから提供されていない 公開されているパッケージにも該当するものがなさそう そうなるとネイティブで提供されている

はじめに yosuke2です。 最近Flutterに触れていますが、触れ始めて月日が浅いためまだまだ知らないことがたくさんあります。 そんな中タイトル通りテキスト下線の位置を調節したいということがありました。 調べてもそこまで情報が無かったのでここに書いておこうと思います。 本題 まず、2021/12/06時点でFlutterのテキスト下線の位置を調節する正規の方法はありません。 そのためこの記事では疑似的にテキスト下線の位置を調節する方法を記載します。 text-underline-offset - CSS: カスケーディングスタイルシート | MDN 一応ウェブブラウザではこのようにtext-underline-offsetというものがあるため、今後Flutterにも追加される可能性は十分あるのではないかと思います。 GitHubでissueもあり議論されています。 Space bet

2021.12.10 Flutter: RenderObjectWidgetを使いはみ出た分が切り取られるウィジェットを作る 今回はこういう表示が出来るようになるウィジェットを作ってみたいと思います。 (Floating Action Buttonが半分切れてるが工事中マークが出ていない事に注目、さらに言えばDEBUGの帯もちょっと欠けてる) はじめに Flutterのウィジェットとそのレイアウトシステムは基本的にウィンドウ(画面)サイズに合わせてその中身をレイアウトするようになっており、ウィンドウサイズが小さくなれば中身もその分小さくレイアウトしようとします。 例えばこのようなアプリ のウィンドウサイズを小さくすれば中身もそれに応じてレイアウトされていきますが、 Flutterアプリは中身がウィンドウサイズより大きくならざるを得ない状況になった場合にブラウザでのHTML表示のように自動的

本記事ではproviderの一部機能を自作してみることで、Flutterにおける「ウィジェットが子孫にデータとサービスを提供するためのメカニズム」の理解を深めてみようと思います。 本記事で言及するFlutter 公式サイトの内容、記述は執筆時点(2021年8月)のものとなります はじめに Flutterでのアプリ開発においていわゆる「アプリの状態管理」はいつもHOTな話題であり、これまで様々な手法や概念、ライブラリが現れ、シンプルなものから大規模で複雑な状況まで様々な場面に応じて使い分けられて来ています。 Flutterの公式Webサイトでも状態管理について触れられており、アプリの状態管理については「Simple app state management」という章で具体的な例と共に述べられています。 さて、その「Simple app state management」を読みはじめると冒頭か

BPSの福岡拠点として一緒にお仕事させていただいております、株式会社ウイングドアのミノハラです。 去年の4月に入社して、主にFlutterを使ってスマホアプリ開発を行っています。 今月の初めにFlutterはメジャーバージョンが2.0にアップデートされました。 参考: Flutter 2.0.0 release notes - Flutter いままでの開発で使っていたボタンのウィジェットが今回のアップデートによって非推奨になってしまいました。 そこでどのように変わったのかまとめていきたいと思います。 なにが非推奨になったのか RaisedButton・FlatButton・OutlineButtonの3つです。 Flutter1.22から変更はありましたが、今回のアップデートにより、非推奨となりました。 この3つのボタンが非推奨になり、以下のボタンを使ってくださいとなっています。 旧ボタ

BPSの福岡拠点として一緒にお仕事させていただいております、株式会社ウイングドアのミノハラです。 去年の4月に入社いたしました。 入社してから半年ほどは、研修や既存の案件に着手することが主だったのですが、 10月から新規の案件に携わる形になり、先日その案件が概ね完了いたしましたので、 よかったことや改善点について振り返っていきます。 よかったこと お客様とのやりとりを経験できた点 今までは直接私がお客様とのやりとりを行っていませんでしたが、今回は私自身でお客様とのやりとりを行い、いい経験になりました！ お客様とのやりとりは主にSlackを使っていたのですが、文章を考えるのが苦手なので、先輩社員に確認をいただいておりました。 敬語や文章構成などは社会人としての必須スキルなので、先輩社員の文章などを見て学んでいきます！ 初めて一から案件に取り組めた 先述したとおり、入社してから一つの案件を最初

BPSの福岡拠点として一緒にお仕事させて頂いてます、株式会社ウイングドアの田上と申します。 普段はWeb Developerとして開発業務を担当させていただいております🐈 2020年の12月をもちまして、ウイングドアに入社させて頂いてから1年が経ちましたので、 自分の感想も含めつつウイングドアがどんな会社かについてご紹介させていただこうと思います。 ウイングドアという会社について 弊社では、主に受託開発をメインとして行っています。 案件の種類は様々で、Webアプリ開発からモバイルアプリ開発まで幅広く請け負っております。 お客様との距離が近く、フレンドリーにコミュニケーションを取りながらお仕事を進めていくことが特徴です。 最近ではモバイルアプリ開発にFlutterを採用するなど、新しい技術についても良いものは積極的に取り入れていこうという風土があり、開発者フレンドリーな面があります。 ウイ

こんにちは。 BPSの福岡拠点として一緒にお仕事させてもらっています、ウイングドアのウメバヤシです。 Flutterでローカルに値を保存したい時はFlutter公式のshared_preferencesパッケージを使うと思いますが、実はこのパッケージではネイティブアプリをリプレイスする際に、以前のネイティブアプリバージョンで保存していたローカルデータまでは取得することができません。 ⚓ 前提 対象のshared_preferencesパッケージは現時点で最新Verの0.5.12+4です。 shared_preferences | Flutter Package - Pub.Dev ⚓ なぜネイティブアプリで保存されたデータが取得できないのか？ 結論からいうと、shared_preferencesパッケージでは読み書きの際に「flutter.」というプレフィックスをキーに付与してデータを扱っ

Providerとの違い Providerは直感的で使いやすく、かつ高機能で非常に優れたパッケージですが、以下のような不都合もありました。 この問題は僕も実際に使用していて要所要所で感じていました🤔 Providerで包んだツリー以外からアクセスしようとすると実行時にProviderNotFoundExceptionが発生する。 この問題に関しては確実に防ぐ方法がなく、コーディング中に気をつけて使うしかありませんでした。 同じ型を複数同時に使用できない ProviderはWidgetツリーを遡って最寄りの型を探してくるので、複数同じ型を使用することができませんでした。（使用できるけどWidgetツリーの中で一番近い型にしかアクセスできない） Widgetツリーが肥大化する Provideするオブジェクトが増えていくと、DevToolsなどで確認する際にWidgetツリーが肥大化して少し見

突然ですが、通常アプリを作成するとUIはこのぐらいの大きさかと思いますが このように全体を大きくしたくなったことはありませんでしょうか。 これは1つ1つの文字やボタンの大きさを丹念に設定していったわけではなく、昨今のWebブラウザに搭載されているズーム機能 と似たような形で、Flutterの描画全体を大きくする事で実現しています。 今回はこれのやり方をご紹介致します。 注意 本記事で取り上げた内容はおそらくFlutter SDKの本来想定された使い方の範囲を超えており、実装に際して使用した手段もプロダクションコードに採用すべきものではありません。 あくまでFlutterの特性上こういうことも出来る、という一例としてお楽しみ下さい。 環境 執筆時点のstableを使います。 $ flutter --version Flutter 1.20.3 • channel stable • https

2020.08.12 Flutter: popUntilで「Bad state: No element」となった時に確認すること BPSの福岡拠点として一緒にお仕事をさせていただいています、株式会社ウイングドアのウメバヤシです。 最近は主にFlutterでのアプリ開発に携わっております。 複数の画面を一気に戻りたい場合に、おもむろにpopUntilメソッドを呼び出した時でした。 Bad state: No elementとなって戻れずに、「あれ？」ってなったことがあったので、 今回はそのときの解決法を紹介しようと思います。 先に結論 結論から言うと、今回の原因はpushした時にRouteSettingsを指定していなかったことが原因でした。 参考: RouteSettings class - widgets library - Dart API ほとんどのルーティングをMaterialAp

こんにちは！ BPSの福岡拠点として一緒にお仕事をさせていただいています、株式会社ウイングドアのウメバヤシです。 iOSやAndroidのアプリで下タブ（BottomNavigationBarやUITabBar）などを実装することはよくあるかと思います。 その際、アイコンをオリジナルの画像にすることも多いと思いますが、通常は端末ごとに適正サイズの画像ファイルを何サイズか組み込みます。 ただ、Flutterではちょっと違った方法で設定した方がスマートそうだったので、今回はその方法を紹介します。 画像ファイルを設定するだけじゃダメなの？ iOSやAndroidネイティブだと端末の画素密度ごとに適正サイズの画像ファイルを設定すると思いますが、 FlutterではUIもコードで書いて作成していくので、アイコン画像をカスタムするときなども、 コード中に画像の表示サイズを数値で指定してあげないと、いい

こんにちは。ウイングドアの田上です🐈 最近弊社ではFlutter™の機運が高まっておりまして社内勉強会も行われています💪 FlutterではコードでUIを組まないといけないので、なかなかむずかしいな〜😰と思っていたところ、 Flutter Studioという便利なツールがあったのでご紹介させていただきます❗️ Flutter Studioとは Webブラウザ上でFlutterのUIを組むことができるツールです。 マウス操作でWidgetの配置を行ってレイアウトを作成することができます。 Flutter StudioのUI説明 Flutter Studio にアクセスをすると、まずこの画面が表示されます。 ①Widget一覧 Flutterで使えるWidgetが選択できます。 レイアウトを組む際は、ここからWidgetを選択して、シミュレータへとドラッグ&ドロップをします。 ②シミュレ

BPSの福岡拠点として一緒にお仕事させて頂いてます、株式会社ウイングドアのアリタです。 だいぶ前の振り返りになるのですが、1月の終わりに福岡でFlutter勉強会があり、そこでFlutterのアニメーションについて発表させていただきました。 （実は、2月1日に開催された株式会社ウイングドアとM社の合同勉強会でも同じ資料を利用していたりします・・） Flutter を触ってみた所感 FlutterはWidgetの組み合わせで画面を構築するのですが、 https://flutter.dev/docs/development/ui/widgets にWidgetのパーツが用意されているので、シンプルなアプリであればWidgetの組み合わせだけで簡単にアプリが出来ます（便利）。 ただ、最初はdartファイル（FlutterはDart言語で開発します）やリソースの配置に悩むので BLoC（Busin

追記（2020/07/20） 記事投稿から1年7ヶ月、本記事で題材にしたスクロールバーの太さの変更についてカスタマイズ可能になるコミットが3日前にmasterへマージされました。 https://github.com/flutter/flutter/commit/1840b7121a6a721484afca300265c7866e82dc77 flutter.ioより 突然ですがFlutterは面白いですよ！ クロスプラットフォーム開発ファンとして最近の一押しです。 12/5 Flutter Live '18 で 1.0.0 が発表されました🎊 そこでFlutterでちょっとアドベントカレンダー記事を書いてみます。 はじめに モバイルアプリ開発においては、画面上にはボタンやツールバーなど様々なUIウィジェットを配置します。 iOS/AndroidのSDKも標準で豊富なUIウィジェットを持