TAの日々ブログ（＋α）

2025年5月3日土曜日

【Flutter】Riverpodに関するサイト

Riverpodに関するサイトを調べたのでリンクしておきます

https://tech.anycloud.co.jp/articles/provider-vs-riverpod-discard-state/

https://www.wantedly.com/companies/zeroichi/post_articles/906588

https://zuma-lab.com/posts/flutter-future-provider-of-riverpod

https://co-creation.wesionary.team/n/n54d90e0b0fdc

https://qiita.com/Harx02663971/items/6465dea27599a3afa7c7

https://qiita.com/mochi_2225/items/278ff8e154cb0a84e9ac

https://www.udemy.com/course/riverpod/?utm_source=adwords&utm_medium=udemyads&utm_campaign=Search_DSA_Beta_Prof_la.JA_cc.JP&campaigntype=Search&portfolio=Japan&language=JA&product=Course&test=&audience=DSA&topic=&priority=Beta&utm_content=deal4584&utm_term=_._ag_167497668918_._ad_711539479618_._kw__._de_c_._dm__._pl__._ti_dsa-2344929247843_._li_9198378_._pd__._&matchtype=&gad_source=5&gclid=EAIaIQobChMI-63X3qDoiwMVT20PAh22SwYiEAAYASAAEgKT7PD_BwE

https://www.youtube.com/watch?v=DeNegYMBRCM&t=10s

2024年11月30日土曜日

【Flutter】Flutterサンプル

個人的によく使いそうな

サンプルのURLをまとめていました

・Draggable (Widget of the Week)

https://www.youtube.com/watch?v=q4x2G_9-Mu0&list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG&index=22

・ DropdownMenu

https://www.youtube.com/watch?v=giV9AbM2gd8&list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG&index=13&t=27s

・DropdownButton

https://www.youtube.com/watch?v=ZzQ_PWrFihg&list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG&index=50

・CustomPaint

https://www.youtube.com/watch?v=kp14Y4uHpHs&list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG&index=151

・ClipRRect

https://www.youtube.com/watch?v=eI43jkQkrvs&list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG&index=153

・Tooltip

https://www.youtube.com/watch?v=EeEfD5fI-5Q&list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG&index=150

・SizedBox

https://www.youtube.com/watch?v=EHPu_DzRfqA&list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG&index=139

・IndexedStack

https://www.youtube.com/watch?v=_O0PPD1Xfbk&list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG&index=123

・Stack

https://www.youtube.com/watch?v=liEGSeD3Zt8&list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG&index=120

・AlertDialog

https://www.youtube.com/watch?v=75CsnyRXf5I&list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG&index=111

・ExpansionPanel

https://www.youtube.com/watch?v=2aJZzRMziJc&list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG&index=72

【 All Samples】

https://flutter.github.io/samples/#

https://www.flutter-gallery.com/ja

https://github.com/flutter/gallery?tab=readme-ov-file#flutter-gallery

2024年11月5日火曜日

【JavaScript】画面の座標に関するものCSSだけで吹き出しをつくる

仕事で、吹き出し用の部品を作らなければならなくなったので、実装方法しらべてみました。以下の参考URLが分かりやすかったので、これを参考にしたら対応できました。

【参考URL】

https://pico-cre.com/wp-memo/post-4925/

https://blog.codecamp.jp/css_balloon

2024年11月4日月曜日

【JavaScript】画面の座標に関するもの

要素の幅、高さや他のジオメトリの特徴を関する情報を読み取ることのできる JavaScript のプロパティがたくさんあります。

JavaScript では、要素を移動したり配置するときに、座標を正しく計算するためにしばしばそれらを必要とします。

以下が参考にした情報です。

https://www.buildinsider.net/web/jqueryref/021

(1) 位置情報・要素の位置座標を取得する（「position()」と「offset()」） https://www.sejuku.net/blog/65040 　

⇒「position()」は、特定のHTML要素の位置座標を取得することができるメソッドで、画面上の座標ではなくあくまでも親要素から見た位置座標である　

⇒「position()」が親要素からの位置座標なのに対して「offset()」は画面上の位置になる

(2) サイズ

https://taneppa.net/jquery-size/

ページ全体のサイズは

$(document).width();

$(document).height();

ブラウザサイズは

$(window).width();

$(window).height();

(3) スクロール

どれだけページをスクロールしたかは「scrollTop」関数を使用します

var vScrollDistance = $(window).scrollTop();

また、横方向にどれだけスクロールしたかも「scrollLeft」関数で取得出来ます。

var hScrollDistance = $(window).scrollLeft();

①スクロール位置を取得・設定する方法

・画面のスクロール位置取得設定

// 画面の水平方向のスクロール位置を取得

var x = window.scrollX;

// 画面の垂直方向のスクロール位置を取得

var y = window.scrollY;

// 画面の左上にスクロール位置を設定する

window.scroll(0, 0);

// 画面の左から50ピクセル、上から100ピクセルにスクロール位置を設定する

window.scroll(50, 100);

// scrollTo()も動きは同じ

window.scrollTo(50, 100);

②要素のスクロール位置取得設定

// 要素を取得

var ele = document.getElementById('ele');

// 要素の水平方向のスクロール位置を取得

var x = base.scrollLeft;

// 要素の垂直方向のスクロール位置を取得

var y = base.scrollTop;

// 画面の左上にスクロール位置を設定する

ele.scrollLeft = 0;

ele.scrollTop = 0;

<a href="https://usagidoki.com/js-get-set-scroll/">https://usagidoki.com/js-get-set-scroll/</a>

(4) ジオメトリ

参考URL：

https://ja.javascript.info/size-and-scroll

(5)getBoundingClientRect()

要素の寸法と、そのビューポートに対する相対位置に関する情報を返します。

var element = document.getElementById('myElement'); var rect = element.getBoundingClientRect();

console.log('要素の幅:', rect.width); console.log('要素の高さ:', rect.height); console.log('要素の上端からの距離:', rect.top); console.log('要素の左端からの距離:', rect.left); console.log('要素の下端からの距離:', rect.bottom);

console.log('要素の右端からの距離:', rect.right);

https://developer.mozilla.org/ja/docs/Web/API/Element/getBoundingClientRect

(6) マウス座標系

https://qiita.com/yukiB/items/31a9e9e600dfb1f34f76

2024年6月18日火曜日

【Flutter】Widget の活用方法～実装参考動画

Widget の活用方法についてですが、 Text/Center/FloatingActionButton などの Widget
は、こういう Widget があるというのを知らないと使えません。

では、どのような Widget があるのかをどうやって探せば良いのでしょうか？

目的に合わせた Widget をインターネットで検索すれば良いのですが、YouTube に

Flutter 公式チャンネルが配信する「Flutter Widget of the　Week」

という動画リストがあります。

そこではよく使われる便利な Widget を短い動画でわかりやすく紹介しています。

こちらを見ることで、様々な Widgetの情報を効率よく収集できます。

https://www.youtube.com/@flutterdev/videos

2024年6月15日土曜日

【Flutter】勉強用動画

一からこつこつ勉強するのによい動画ありました。

これを１からみていくと、理解しやすかったです。

●#20 Flutter入門講座 font編

（要約）Googleフォントの使い方や、ライセンスなどの説明がされています。

https://www.youtube.com/watch?v=Ef_P-7TQ0Eg

●#21 Flutter入門講座 flavor編

（要約）dev(開発）/stg（試験）/Prd（製品）版別での開発方法の説明

https://www.youtube.com/watch?v=U9kdK1bWifM

●#22 Flutter入門講座アコーディオン編

（要約）ExpansionTitleの使い方、引数の話

https://www.youtube.com/watch?v=3GBxlMPhP7o

●#23 Flutter入門講座 Firebase Analytics編

（要約）クラウド(firebase)の使い方

https://www.youtube.com/watch?v=BWTQkkLC-Mo

●#24 Flutter入門講座 Firebase Auth編

（要約）ログインといった認証系のお話。ribarpodでの状態管理や、アカウントの問題の話もあり勉強になる、

https://www.youtube.com/watch?v=KsixooHekJE

●#31 Flutter入門講座 Firebase Firestore編

（要約）DBのお話

https://www.youtube.com/watch?v=ZKww9U0jvAM

2024年5月12日日曜日

【Flutter】Flutter 勉強

こらから会社でスマホ開発用にFlutterを使うことになりました。

早速本を買ったのです、短時間で覚えるのに理解するには大変と感じました。

とくに環境設定とかわかりづらかったです。

Flutter勉強するのに、本で行うのとは別にYoutubeで覚えると便利です。

ここでは、検索で見つけた動画を紹介します。

【FlutterとDartの学習ロードマップ】

https://www.youtube.com/watch?v=h9utcR2i2Sw

【FlutterとDartのざっとの学習】

長い動画ですが、AndroidStudioの設定から一から説明しているので、流れを覚えるのにいいです

https://www.youtube.com/watch?v=9IqUQ2TXacI&t=9s

その他の動画は以下みると勉強になります。

【Flutterとは？できることやメリット・デメリットまで分かりやすく】

https://www.youtube.com/watch?v=OdHwH_Zif64

【Flutter開発におけるAndroidStudioデバッグ入門】

https://www.youtube.com/watch?v=vZbPdUiFiFw

【Flutterテストについて】

https://www.youtube.com/watch?v=H5ShtF4f94Q

https://www.youtube.com/watch?v=-G7nW26N7_4

登録: 投稿 (Atom)