フロントエンドカンファレンス沖縄2022の登壇資料です。 -- https://front-okinawa.connpass.com/event/263836/
タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
ウェブフロントエンジニアから見る Flutter Webの 現在地点 / Flutter web as of now
フロントエンドカンファレンス沖縄2022の登壇資料です。 -- https://front-okinawa.connpass.com/event/263836/
3秒まとめ 現役薬剤師がFlutter Webを使ってシフト配布用アプリを開発、無料公開しました🎉 カンタンに作成できるシフト作成ツールが必要 印刷可能で、カンタンに作成できて、おしゃれなシフトをつくれる！ ちょっとしたWebアプリを作成するのにFlutter Webはとっても便利😉 ペライチを作るのはTailwind CSSがとても良いぞ。 薬剤師はシフトを配布しなきゃいけないんです 私の仕事は薬剤師です。病院いったあとに薬をもらいに行きますよね？あそこで白衣着て薬を渡してくれる人。薬局にいるあの人です。 薬剤師も薬ばっか見てないで、患者さんと関わることを大切にしろよ！ということで、2016年から 「かかりつけ薬剤師」 という制度が運用されています。この制度は、患者さんに薬剤師を指名してもらって、責任もって薬やサプリメント、健康の相談に乗りましょうって制度。 薬剤師なんて誰でもいいわ
この記事でできあがるもの はじめに 自分の作ったものが web に公開されるのはうれしいことだ。 そのうれしさまず体験することで開発モチベが高まると思う。 10 分くらいでできるのでお試しあれ。 やっていくこと Flutter のサンプルアプリを Firebase Hosting を使って web 上に公開する。 開発環境 マシン: M1 MacBook Air エディタ: VSCode Flutter: 1.26.0-2.0.pre.402 • channel master 作業の全体像 Flutter アプリを作成 GitHub と連携 Firebase に新規プロジェクト作成 Firebase CLI のインストール GitHub Actions の手直し PUSH & DEPLOY 1. Flutter アプリを作成
Goのサーバーの管理画面をFlutter Webで作ってみるための調査 | フューチャー技術ブログ
Dart/Flutter連載の3本目はFlutter Webを紹介します。 Flutter 2になって、Web向けに出力する機能もStableになりました。 Flutter for Webは標準のHTMLにするHTMLレンダラーと、CanvasKitレンダラーと2種類あります。後者はSkiaという2DグラフィックスのライブラリをWebAssembly化したものを使います。Skiaはウェブ向けではないFlutterでも使っているため、モバイルとの互換性の高さが期待されます。 現状では明示的に指定しなければauto（モバイルはHTMLレンダラー、PCはCanvasKitレンダラー）になりますが、明示的に指定もできます。これらの違いはまた後で触れますが、せっかくウェブが出せるようになったので、ウェブフロントエンドをFlutterで作ってみるための色々調査をしてみました。React/Vue/Ang
アドベントカレンダーの担当日を早めにしてさっさと終わらせてしまえば気持ちが楽だと思ったのに前日になっても書き終わっていないのは一体誰でしょう？そう、私(ふそやん@azihsoyn)です。 こちらの記事は Gunosy Advent Calendar 2020 の2日目の記事です。 昨日の記事はかとうさんの 長年稼働しているサービスの全体感をすばやく把握するには でした。 さて、先日プレスリリースでも発表されましたが、グノシーにラジオコーナーが出来ました。 現在ラジオコーナーにはオリジナル番組と、他社の提供するPodcastの2つのコンテンツがあるのですが、オリジナルコンテンツを入稿するための管理画面をFlutter Webで作ったのでその知見をまとめたいと思います。 管理画面の主な機能は、 コンテンツのCRUD(GraphQL) 番組管理(CRUD) 番組に紐付くエピソード管理(CRUD)
2024年2月16日、Flutter 3.19.0がリリースされました。 同時に、Dart 3.3.0がリリースされています。 この、Dart 3.3の目玉機能がextension typeです。この機能は、ぱっと見だと「どこで利用するんだろう」という印象のある機能なのですが[1]、Flutter Webにおいては非常に大きな影響を与える機能となっています。 以下、公式の紹介テキストです。 Evolving JavaScript Interop Dart 3.3 introduces a new model for interoperating with JavaScript libraries and the web. It starts with a new set of APIs for interacting with JavaScript: the dart:js_interop
Google、Dart 3.3正式リリース。Flutter WebのWebAssemblyへのコンパイルも準備開始
Googleは、Dart言語の新バージョンとなる「Dart 3.3」正式版と、Dart言語を用いたアプリケーションフレームワークの新バージョンとなる「Flutter 3.19」正式版のリリースを発表しました（Dart 3.3の発表、Flutter 3.19の発表）。 Flutterは単一コードでiOS/Android対応のネイティブアプリ開発を可能にするフレームワークとして登場し、現在ではMac、Windows、そしてWebアプリケーションも単一コードでカバーするクロスプラットフォーム対応を目指して開発が進められています。 Flutter 3.19ではGeminiを組み込むためのSDKが追加 Flutter 3.19の新機能としては、Google AI Dart SDKがベータ版として追加され、Googleの最新AIモデルであるGeminiをアプリケーションに容易に組み込めるようになりまし
先日、実験的にFlutter Webを使い数ヶ月かけて開発を進め、最終的に、結局パフォーマンスの問題からReactにすべて書き換えたことがあった。 同じ失敗をする人ができるだけ少ないように、現状のFlutter Webの課題点について、主に以下のIssueから引用して共有しておこうと思う。 前提として、Flutterはとても積極的に更新が行われているので、上記Issueで挙げられている問題点は徐々に解決すると思う。現状ではまだ関連IssueはOpenのままで、少なくともここ数ヶ月は変わりなく、執筆時点で最新版のFlutter 2.5.3ではまだ未解決な問題点を挙げていく。 初期読み込みが非常に重い 実際に flutter build web --releaseをしてアプリをデプロイしてみると分かるけれど、どんなに小さいアプリを作っても、main.dart.jsのサイズがめちゃくちゃ大きい。
Flutter Web AppをAWS CDKでCloudFront+S3にデプロイしてみた | DevelopersIO
こんにちは、CX事業本部 IoT事業部の若槻です。 Flutterで作成したアプリの公開を試してみようと思うのですが、モバイル開発初学者にとってはいきなりiOSやAndroid Appのデプロイは難易度が高そうでした。 そこで今回は一番ハードルが低そうなFlutter Web AppをAWS CDKのCloudFront + S3へのデプロイを試してみました。 環境 MacOS Big Sur Version 11.6 Google Chrome 100.0.4896.75（Official Build） （x86_64） Flutter 2.10.4 やってみた CDKプロジェクト作成 $ mkdir aws_cdk_app $ cd aws_cdk_app $ npx cdk init --language typescript Flutterプロジェクト作成 $ flutter cr
Flutter Webの話を聞く機会が増え、触ってみたくなったので簡単なサイトを作ってみました。 最近カメラを買ったので自分が撮った写真をまとめるサイトで、データの管理&APIはmicroCMS、サイトのホスティングはVercelで作りました。 つくったもの 写真のギャラリーサイトです。 「京都」「神戸」など、アルバムごとに写真がまとまっていて、 プルダウンでアルバムを切り替えられ、 サムネをクリックすると写真が拡大して表示されます。 このサイトを作りながら学んだことを書いてみます。 Flutter Webの雛形を作成 まず、Flutter Webでプロジェクトを作成し、Chromeで動かしてみます。 Flutter開発でおなじみのカウンターアプリですね。この雛形のコードを修正して作っていきます。 microCMSでAPIを作成する microCMSは「管理画面つきのAPI」を提供してくれ
Flutter Webで注意した方が良さそうなこと
[✓] Flutter (Channel stable, 2.5.0, on macOS 11.4 20F71 darwin-x64, locale ja-JP) • Flutter version 2.5.0 at /Users/tsuruoka/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 4cc385b4b8 (10 days ago), 2021-09-07 23:01:49 -0700 • Engine revision f0826da7ef • Dart version 2.14.0 基本的なこと 2021年3月に発表された Flutter 2で Flutter Web が stable チャンネルでも利用できるようになりました。※それまでは F
Our vision for Flutter is to be a portable UI framework for building beautiful app experiences on any platform. Today, as part of Flutter 2, we’re announcing that Flutter’s web support has hit the stable milestone. The first Flutter release supported iOS and Android, and has been used to bring over 150,000 apps to mobile app stores. Now, adding web support means that those same apps can reach an e
皆さんこんにちは、はがくんです。 はがくん＠検索していくぅ薬剤師｜note ふだんはnoteで記事を書いているのですが、技術的な話はQiitaにかけ！と誰かに言われた気がするので初投稿してみます！ 📗想定読者 Flutter初心者 Flutter WebでWebアプリのデプロイ経験がないヒト Flutter Webでの開発に役立つpackageが知りたいヒト Flutterでコードをバリバリ書いている方や仕事で使いこなしてる方にとっては当たり前の内容しか書いてないと思われます。 あくまで開発経験がほとんどない方が、どんな道筋を立てて学び、モノを作れば良いのかというひとつの例を示すものです。 まだ何から始めていいのかわからない方のためになれば嬉しいです。 🤔そもそもFlutterとは Flutter - Beautiful native apps in record time Flutt
How to use JS with Flutter Web
How to use JS with Flutter Web Flutter Web opens the door to building progressive web apps (PWAs) entirely in Dart. However, your Dart code will likely need to interop with JavaScript at some point to access browser APIs and/or your own custom JS apps. The following snippet demonstrates how access JS from a Flutter web app. Using JavaScript in Dart & Flutter Dart.js is a built-in library that can
Flutter2.0出ましたね。テンション上がりますよね。 日本語で分かり易かった記事↓ stableで大丈夫そ？ 結論から言うと、まだダメです。 理由を書いていきます。 2020年2月からあったFlutter Webの不具合 3月1日にリリースしたCodeBoyはFlutterのbeta channelで開発してきました。 基本的にはbetaの最新でやってきましたが、2020年2月のアプデあたりからFlutter Webでの表示がおかしくなりました。（後述） そのため、CodeBoyでは、Github Actionsで自動デプロイする際にbetaの'1.25.0-8.3.pre'にバージョンを固定しています。 比較 わかりやすい例を出して比較してみましょう。フォントがおかしくなって、絵文字が表示できなくなってしまいました。「講師を探す」というフォントに注目すると分かりやすいかも。 bet
Flutter web support updates
Almost a year ago, we shared our first technical preview of Flutter’s support for targeting the web. Our vision for Flutter is to provide a portable toolkit for building beautiful experiences wherever you might want to paint pixels on the screen. Given the pervasiveness of the web, it’s a natural place to experiment with Flutter, but its characteristics are different from a mobile platform like An
Announcing Flutter Web and Desktop support for AWS Amplify Storage, Analytics and API libraries | Amazon Web Services
Front-End Web & Mobile Announcing Flutter Web and Desktop support for AWS Amplify Storage, Analytics and API libraries Earlier this year, AWS Amplify announced a Developer Preview for web and desktop support for its Flutter libraries in the Auth category and Amplify UI Authenticator for creating authentication flows. Today, the Amplify Flutter team is announcing web and desktop support for REST an
【個人開発】Flutter webでLINEグルチャメンバーの子どもの顔と名前がわかる「かおなまいっち」というサービスを作った話 - Qiita
技術選定 フロントエンド 私は普段モバイルアプリ(iOS/Android/Flutter)をよく開発しています。 Webは管理コンソール用にAngularJsを使う程度。 しかし多くのユーザーに使ってもらうために、LINE上で動くLIFFアプリ(つまりWebアプリ)として開発する必要がありました。 まずVue,React,Angularあたりを考えていたんですが、以下の理由でFlutter webを採用することにしました。 Angular以外はTypeScriptがまだ使いにくそう(素のjavascriptは触りたくない) materialみたいなライブラリあるとはいえ、CSSの微調整とかちょっとだるいな(←時間あまり取れないから本格的にキャッチアップもしにくい) Flutter web使うか決めるにあたって事前に以下の技術検証をしておきました。 どちらもできることがわかったので、まぁ技術
Many times online the question has been asked “Is flutter good for web”, and what many developers fail to truly understand is that is a very broad and open question and there are many factors that go into saying yes, no or maybe. While I am most certainly no expert, I have been around the block for a little over a decade and have spent the last 2+ years working with flutter for mobile and web and
The web has a long and rich history dating back to the nineties at CERN. Back then Tim Berners-Lee laid the foundation of HTML that is still around today. There have been attempts to replace it with varying success but none have been successful, for good reason. HTML and the later invention of CSS are a remarkably powerful set of tools to build all kinds of experiences on the web. People are still
iOS向けに作った子供向けのアプリをFlutter Webでpublishしてみたら思いの外良かった - エムスリーテックブログ
エムスリー エンジニアの岩本です。 4月から小学生1年生になる子供を育てています。 最近子供と図鑑を見ていました。そのとき目次をから目的のページが250ページにあるということがわかったようです。 しかし、一度開いた150ページあたりから250に向かうのではなく、100ページの方に戻っていってしまいました。 それを見て「あれ？もしかして数字の概念が全くわかってない？」と心配になってしまいました。 とはいえ、数字は1〜100まで数えられるし、一桁の足し算引き算は指などを使ってできます。 数字の概念がわかっていないのはまずいので確認しようと考えました。 そこでどうせなら最近業務で触り始めたFlutterを使って理解度を確認するアプリを作ってみることにしました。 作ったもの 単純に0〜49までの数字をランダムで押してもらうというだけのアプリです。 ただし、数字の概念の理解と繋がりやすいように、数字
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
現役薬剤師がちょっぴりおしゃれなシフト配布アプリをFlutter Webで無料公開した話
【Flutter】Web アプリを🚀爆速🚀で Firebase Hosting にデプロイする
管理画面にGraphQL + Flutter Webを採用してみた - Gunosy Tech Blog
Dart 3.3がFlutter Webに与える影響について
Flutter Webの現状と課題 (2021年11月時点) - Qiita
Flutter Web + microCMSで写真ギャラリーサイトを作る
Flutter web support hits the stable milestone
Flutter Webを使って3日でWebアプリをデプロイするまでのロードマップ - Qiita
Flutter2.0出たけどFlutter Web採用して大丈夫そ？
Flutter Web: Should I use it? (Part 1 — SEO)
Flutter Web: A Fractal of Bad Design
kakuyomu.jp
shonenjumpplus.com
sorae.info
qiita.com/tokio-mori
ryjkmr.com
san-tatsu.jp