ぬるぬる動かせ！ Riveでアニメーション実装🐾

https://youtrust.jp/lp/knowledgenight-vol2-flutter

Transcript

1. ɹɹɹɹಈ͔ͤʂ
   3JWFͰΞχϝʔγϣϯ࣮૷ 
   .*9*
   *OD
   ,VOP
   "ZBOB
2. Έͳ͞Μ
   ΞϓϦɹɹɹɹͤͯ͞·͔͢ʁ
3. がんばってます！
4. !LVOP !,VOPEBZP@PCPFUF גࣜձࣾ
   .*9*
   ॴଐ
   NJYJ
   ͷΫϥΠΞϯτΞϓϦ୲౰
   'MVUUFS,BJHJ
   ӡӦελοϑ
   ࠷ٕۙज़ॻͷදࢴͱૠֆΛඳ͖·ͨ͠ Kuno Ayana
5. !LVOP !,VOPEBZP@PCPFUF גࣜձࣾ
   .*9*
   ॴଐ
   NJYJ
   ͷΫϥΠΞϯτΞϓϦ୲౰
   'MVUUFS,BJHJ
   ӡӦελοϑ
   ࠷ٕۙज़ॻͷදࢴͱૠֆΛඳ͖·ͨ͠ Kuno Ayana アニメーションで つかいやすい！ つかっててたのしい！を
6. シンプルな いいねアニメーション IUUQTHJUIVCDPNLOPB fl VUUFS@SJWF@TBNQMF
7. IUUQTHJUIVCDPNLOPB fl VUUFS@SJWF@TBNQMFQVMM AnimationController サンプル import 'dart:ui'; import 'package:flutter/material.dart'; class LikeButton extends StatefulWidget { final bool initialLiked; final ValueChanged<bool>? onChanged; const LikeButton({super.key, this.initialLiked = false, this.onChanged}); @override State<LikeButton> createState() => _LikeButtonState(); } class _LikeButtonState extends State<LikeButton> with TickerProviderStateMixin { late bool _liked; // ϦϯάΞχϝʔγϣϯ༻ late final AnimationController _burstController = AnimationController(
8. IUUQTHJUIVCDPNLOPB fl VUUFS@SJWF@TBNQMFQVMM color: ringColor.withAlpha((255 * opacity).toInt()), ), ), ); }, ), // ϋʔτΞΠίϯ ScaleTransition( scale: _scale, child: Icon( _liked ? Icons.favorite : Icons.favorite_border, size: size, color: _liked ? Colors.pink : Colors.grey, ), ), ], ), ), ); } }
9. color: ringColor.withAlpha((255 * opacity).toInt()), ), ), ); }, ), // ϋʔτΞΠίϯ ScaleTransition( scale: _scale, child: Icon( _liked ? Icons.favorite : Icons.favorite_border, size: size, color: _liked ? Colors.pink : Colors.grey, ), ), ], ), ), ); } } IUUQTHJUIVCDPNLOPB fl VUUFS@SJWF@TBNQMFQVMM ΞΠίϯ֦େॖখͱϦϯάͷ޿͕ΓͷͨΊʹ "OJNBUJPO$POUSPMMFS
   Λͭ༻ҙͯ͠ʜ
10. color: ringColor.withAlpha((255 * opacity).toInt()), ), ), ); }, ), // ϋʔτΞΠίϯ ScaleTransition( scale: _scale, child: Icon( _liked ? Icons.favorite : Icons.favorite_border, size: size, color: _liked ? Colors.pink : Colors.grey, ), ), ], ), ), ); } } IUUQTHJUIVCDPNLOPB fl VUUFS@SJWF@TBNQMFQVMM ΞΠίϯ֦େॖখͱϦϯάͷ޿͕ΓͷͨΊʹ "OJNBUJPO$POUSPMMFS
    Λͭ༻ҙͯ͠ʜ ͦΕͧΕͷ஋Λܭࢉͯ͠ʜ
11. color: ringColor.withAlpha((255 * opacity).toInt()), ), ), ); }, ), // ϋʔτΞΠίϯ ScaleTransition( scale: _scale, child: Icon( _liked ? Icons.favorite : Icons.favorite_border, size: size, color: _liked ? Colors.pink : Colors.grey, ), ), ], ), ), ); } } IUUQTHJUIVCDPNLOPB fl VUUFS@SJWF@TBNQMFQVMM ΞΠίϯ֦େॖখͱϦϯάͷ޿͕ΓͷͨΊʹ "OJNBUJPO$POUSPMMFS
    Λͭ༻ҙͯ͠ʜ ͦΕͧΕͷ஋Λܭࢉͯ͠ʜ ͦΕͧΕ
    4UBUF
    Λ؅ཧͯ͠ʜ
12. color: ringColor.withAlpha((255 * opacity).toInt()), ), ), ); }, ), // ϋʔτΞΠίϯ ScaleTransition( scale: _scale, child: Icon( _liked ? Icons.favorite : Icons.favorite_border, size: size, color: _liked ? Colors.pink : Colors.grey, ), ), ], ), ), ); } } IUUQTHJUIVCDPNLOPB fl VUUFS@SJWF@TBNQMFQVMM ΞΠίϯ֦େॖখͱϦϯάͷ޿͕ΓͷͨΊʹ "OJNBUJPO$POUSPMMFS
    Λͭ༻ҙͯ͠ʜ ͦΕͧΕͷ஋Λܭࢉͯ͠ʜ ͦΕͧΕ
    4UBUF
    Λ؅ཧͯ͠ʜ ΍΂ͬ
    EJTQPTF
    ๨Εͯͨʜ
13. color: ringColor.withAlpha((255 * opacity).toInt()), ), ), ); }, ), // ϋʔτΞΠίϯ ScaleTransition( scale: _scale, child: Icon( _liked ? Icons.favorite : Icons.favorite_border, size: size, color: _liked ? Colors.pink : Colors.grey, ), ), ], ), ), ); } } IUUQTHJUIVCDPNLOPB fl VUUFS@SJWF@TBNQMFQVMM ちょ〜たいへん！
14. color: ringColor.withAlpha((255 * opacity).toInt()), ), ), ); }, ), // ϋʔτΞΠίϯ ScaleTransition( scale: _scale, child: Icon( _liked ? Icons.favorite : Icons.favorite_border, size: size, color: _liked ? Colors.pink : Colors.grey, ), ), ], ), ), ); } } IUUQTHJUIVCDPNLOPB fl VUUFS@SJWF@TBNQMFQVMM Rive ͦ͜Ͱొ৔ʂ
15. IUUQTSJWFBQQ
16. w ϕΫλʔΞχϝʔγϣϯΛϦΞϧλΠϜʹ࠶ੜɾ੍ޚ
    w 8FC
    ϒϥ΢βͰ΋ૢ࡞ˍγΣΞՄೳ
    w IUUQTSJWFBQQT8'GDP;;2:&J0B%OR)$LC" SVOUJNFSJWFSFOEFSFS
    w 'MVUUFS
    ΍
    8FCɾJ04"OESPJE
    ͳͲͰ
    ಉ͡
    SJW
    όΠφϦΛ࢖͍ճͤΔ
    w 4UBUF
    .BDIJOF
    ͰΞϓϦͷঢ়ଶ΍Ϣʔβʔૢ࡞ʹԠͨ͡ಈ͖Λදݱ σβΠϯͱΞχϝʔγϣϯΛͻͱͭͷΤσΟλͰ੍࡞Ͱ͖Δπʔϧ Rive とは？
17. Rive Editor
26. State machine
30. Export .riv
31. Flutter code
32. _riveTap?.fire(); } @override Widget build(BuildContext context) { // ϋʔτΞΠίϯͷαΠζ const double size = 48; return GestureDetector( onTap: _handleTap, behavior: HitTestBehavior.opaque, child: SizedBox( width: size * 1.2 * 2, // AnimationControllerͷํͷେ͖͞ʹ߹Θͤͨ height: size * 1.2 * 2, child: RiveAnimation.asset( 'assets/like_button.riv', fit: BoxFit.contain, onInit: _onInit, ), ), ); } @override
33. _riveTap?.fire(); } @override Widget build(BuildContext context) { // ϋʔτΞΠίϯͷαΠζ const double size = 48; return GestureDetector( onTap: _handleTap, behavior: HitTestBehavior.opaque, child: SizedBox( width: size * 1.2 * 2, // AnimationControllerͷํͷେ͖͞ʹ߹Θͤͨ height: size * 1.2 * 2, child: RiveAnimation.asset( 'assets/like_button.riv', fit: BoxFit.contain, onInit: _onInit, ), ), ); } @override
34. _riveTap?.fire(); } @override Widget build(BuildContext context) { // ϋʔτΞΠίϯͷαΠζ const double size = 48; return GestureDetector( onTap: _handleTap, behavior: HitTestBehavior.opaque, child: SizedBox( width: size * 1.2 * 2, // AnimationControllerͷํͷେ͖͞ʹ߹Θͤͨ height: size * 1.2 * 2, child: RiveAnimation.asset( 'assets/like_button.riv', fit: BoxFit.contain, onInit: _onInit, ), ), ); } @override
35. bool _liked = false; @override void initState() { super.initState(); _liked = false; } void _onInit(Artboard artboard) { final controller = StateMachineController.fromArtboard( artboard, 'State machine', ); if (controller == null) return; artboard.addController(controller); _controller = controller; _riveIsLiked = controller.getBoolInput('isLiked'); _riveTap = controller.getTriggerInput('tap'); // ॳظঢ়ଶΛRive΁ಉظ _riveIsLiked?.value = _liked; }
36. bool _liked = false; @override void initState() { super.initState(); _liked = false; } void _onInit(Artboard artboard) { final controller = StateMachineController.fromArtboard( artboard, 'State machine', ); if (controller == null) return; artboard.addController(controller); _controller = controller; _riveIsLiked = controller.getBoolInput('isLiked'); _riveTap = controller.getTriggerInput('tap'); // ॳظঢ়ଶΛRive΁ಉظ _riveIsLiked?.value = _liked; }
37. bool _liked = false; @override void initState() { super.initState(); _liked = false; } void _onInit(Artboard artboard) { final controller = StateMachineController.fromArtboard( artboard, 'State machine', ); if (controller == null) return; artboard.addController(controller); _controller = controller; _riveIsLiked = controller.getBoolInput('isLiked'); _riveTap = controller.getTriggerInput('tap'); // ॳظঢ়ଶΛRive΁ಉظ _riveIsLiked?.value = _liked; }
38. _controller = controller; _riveIsLiked = controller.getBoolInput('isLiked'); _riveTap = controller.getTriggerInput('tap'); // ॳظঢ়ଶΛRive΁ಉظ _riveIsLiked?.value = _liked; } void _handleTap() { _liked = !_liked; // RiveͷBoolʹ൓ө _riveIsLiked?.value = _liked; // RiveͷTriggerΛൃՐ _riveTap?.fire(); } @override Widget build(BuildContext context) { // ϋʔτΞΠίϯͷαΠζ const double size = 48; return GestureDetector(
39. _controller = controller; _riveIsLiked = controller.getBoolInput('isLiked'); _riveTap = controller.getTriggerInput('tap'); // ॳظঢ়ଶΛRive΁ಉظ _riveIsLiked?.value = _liked; } void _handleTap() { _liked = !_liked; // RiveͷBoolʹ൓ө _riveIsLiked?.value = _liked; // RiveͷTriggerΛൃՐ _riveTap?.fire(); } @override Widget build(BuildContext context) { // ϋʔτΞΠίϯͷαΠζ const double size = 48; return GestureDetector(
41. import 'dart:ui'; import 'package:flutter/material.dart'; class LikeButton extends StatefulWidget { final bool initialLiked; final ValueChanged<bool>? onChanged; const LikeButton({super.key, this.initialLiked = false, this.onChanged}); @override State<LikeButton> createState() => _LikeButtonState(); } class _LikeButtonState extends State<LikeButton> with TickerProviderStateMixin { late bool _liked; // ϦϯάΞχϝʔγϣϯ༻ late final AnimationController _burstController = AnimationController( vsync: this, duration: const Duration(milliseconds: 820), ); // ͍͍ͶΞΠίϯΞχϝʔγϣϯ༻ late final AnimationController _scaleController = AnimationController( vsync: this, duration: const Duration(milliseconds: 100), ); // λοϓ࣌ͷεέʔϧʢ1.5ഒʣ late final Animation<double> _scale = Tween<double>(begin: 1.0, end: 1.5) .chain(CurveTween(curve: Curves.easeOut)) .animate(_scaleController); // ϦϯάΞχϝʔγϣϯʢ0→1Ͱ൒ܘͱϑΣʔυΞ΢τΛදݱʣ late final Animation<double> _ring = CurvedAnimation( parent: _burstController, curve: Curves.easeOutCubic, ); @override void initState() { super.initState(); _liked = widget.initialLiked; } @override void dispose() { _burstController.dispose(); _scaleController.dispose(); super.dispose(); } void _toggleLike() async { setState(() => _liked = !_liked); widget.onChanged?.call(_liked); if (_liked) { // ͍͍Ͷ࣌ɿ௨ৗͷϦϯάΞχϝʔγϣϯʢ಺ଆ͔Β֎ଆ΁ʣ _burstController.forward(from: 0); } else { // ͍͍Ͷղআ࣌ɿٯͷϦϯάΞχϝʔγϣϯʢ֎ଆ͔Β಺ଆ΁ʣ // forward Λ࢖͏͕ɼϦϯάͷܭࢉΛٯʹ͢Δ // ୯७ʹreverseΛ࢖͏ͱബ͍Ϧϯά͔Βೱ͍ϦϯάʹมԽͯ͠͠·͏ _burstController.forward(from: 0); } } void _onTapDown() { // λοϓμ΢ϯ࣌ʹεέʔϧΞοϓ _scaleController.forward(); } void _onTapUp() { // λοϓΞοϓ࣌ʹεέʔϧμ΢ϯ _scaleController.reverse(); } void _onTapCancel() { // λοϓΩϟϯηϧ࣌ʹεέʔϧμ΢ϯ _scaleController.reverse(); } @override Widget build(BuildContext context) { // ϋʔτΞΠίϯͷαΠζ const double size = 48; // Ϧϯάͷ࠷େ൒ܘʢsize * 1.2ʣ const double maxRingRadius = size * 1.2; return GestureDetector( behavior: HitTestBehavior.opaque, onTap: _toggleLike, onTapDown: (_) => _onTapDown(), onTapUp: (_) => _onTapUp(), onTapCancel: _onTapCancel, child: SizedBox( width: maxRingRadius * 2, height: maxRingRadius * 2, child: Stack( alignment: Alignment.center, children: [ // λοϓ࣌ͷϦϯά AnimatedBuilder( animation: _ring, builder: (context, _) { // Ξχϝʔγϣϯ͕ಈ͍͍ͯͳ͍ɼ͔ͭ஋͕0·ͨ͸1ͷ৔߹͸ඇදࣔ if (!_burstController.isAnimating && (_ring.value == 0.0 || _ring.value == 1.0)) { return const SizedBox.shrink(); } double radius; double opacity; Color ringColor; if (_liked) { radius = lerpDouble(size * 0.6, size * 1.2, _ring.value) ?? size * 0.6; opacity = lerpDouble(0.35, 0.0, _ring.value) ?? 0.0; ringColor = Colors.pink; } else { // ͍͍Ͷղআ࣌ɿ֎ଆ͔Β಺ଆ΁ॖΜͰফ͑ΔʢάϨʔʣ radius = lerpDouble(size * 1.2, size * 0.6, _ring.value) ?? size * 1.2; opacity = lerpDouble(0.35, 0.0, _ring.value) ?? 0.0; ringColor = Colors.grey; } return Container( width: radius * 2, height: radius * 2, decoration: BoxDecoration( shape: BoxShape.circle, border: Border.all( width: 4, color: ringColor.withAlpha((255 * opacity).toInt()), ), ), ); }, ), // ϋʔτΞΠίϯ ScaleTransition( scale: _scale, child: Icon( _liked ? Icons.favorite : Icons.favorite_border, size: size, color: _liked ? Colors.pink : Colors.grey, ), ), ], ), ), ); } } import 'package:flutter/material.dart'; import 'package:rive/rive.dart'; class RiveLikeButton extends StatefulWidget { const RiveLikeButton({super.key}); @override State<RiveLikeButton> createState() => _RiveLikeButtonState(); } class _RiveLikeButtonState extends State<RiveLikeButton> { StateMachineController? _controller; SMIInput<bool>? _riveIsLiked; SMITrigger? _riveTap; bool _liked = false; @override void initState() { super.initState(); _liked = false; } void _onInit(Artboard artboard) { final controller = StateMachineController.fromArtboard( artboard, ‘State machine’, ); if (controller == null) return; artboard.addController(controller); _controller = controller; _riveIsLiked = controller.getBoolInput('isLiked'); _riveTap = controller.getTriggerInput('tap'); // ॳظঢ়ଶΛRive΁ಉظ _riveIsLiked?.value = _liked; } void _handleTap() { _liked = !_liked; // RiveͷBoolʹ൓ө _riveIsLiked?.value = _liked; // RiveͷTriggerΛൃՐ _riveTap?.fire(); } @override Widget build(BuildContext context) { // ϋʔτΞΠίϯͷαΠζ const double size = 48; return GestureDetector( onTap: _handleTap, behavior: HitTestBehavior.opaque, child: SizedBox( width: size * 1.2 * 2, // AnimationControllerͷํͷେ͖͞ʹ߹Θͤͨ height: size * 1.2 * 2, child: RiveAnimation.asset( 'assets/like_button.riv', fit: BoxFit.contain, onInit: _onInit, ), ), ); } @override void dispose() { _controller?.dispose(); super.dispose(); } }
42. import 'dart:ui'; import 'package:flutter/material.dart'; class LikeButton extends StatefulWidget { final bool initialLiked; final ValueChanged<bool>? onChanged; const LikeButton({super.key, this.initialLiked = false, this.onChanged}); @override State<LikeButton> createState() => _LikeButtonState(); } class _LikeButtonState extends State<LikeButton> with TickerProviderStateMixin { late bool _liked; // ϦϯάΞχϝʔγϣϯ༻ late final AnimationController _burstController = AnimationController( vsync: this, duration: const Duration(milliseconds: 820), ); // ͍͍ͶΞΠίϯΞχϝʔγϣϯ༻ late final AnimationController _scaleController = AnimationController( vsync: this, duration: const Duration(milliseconds: 100), ); // λοϓ࣌ͷεέʔϧʢ1.5ഒʣ late final Animation<double> _scale = Tween<double>(begin: 1.0, end: 1.5) .chain(CurveTween(curve: Curves.easeOut)) .animate(_scaleController); // ϦϯάΞχϝʔγϣϯʢ0→1Ͱ൒ܘͱϑΣʔυΞ΢τΛදݱʣ late final Animation<double> _ring = CurvedAnimation( parent: _burstController, curve: Curves.easeOutCubic, ); @override void initState() { super.initState(); _liked = widget.initialLiked; } @override void dispose() { _burstController.dispose(); _scaleController.dispose(); super.dispose(); } void _toggleLike() async { setState(() => _liked = !_liked); widget.onChanged?.call(_liked); if (_liked) { // ͍͍Ͷ࣌ɿ௨ৗͷϦϯάΞχϝʔγϣϯʢ಺ଆ͔Β֎ଆ΁ʣ _burstController.forward(from: 0); } else { // ͍͍Ͷղআ࣌ɿٯͷϦϯάΞχϝʔγϣϯʢ֎ଆ͔Β಺ଆ΁ʣ // forward Λ࢖͏͕ɼϦϯάͷܭࢉΛٯʹ͢Δ // ୯७ʹreverseΛ࢖͏ͱബ͍Ϧϯά͔Βೱ͍ϦϯάʹมԽͯ͠͠·͏ _burstController.forward(from: 0); } } void _onTapDown() { // λοϓμ΢ϯ࣌ʹεέʔϧΞοϓ _scaleController.forward(); } void _onTapUp() { // λοϓΞοϓ࣌ʹεέʔϧμ΢ϯ _scaleController.reverse(); } void _onTapCancel() { // λοϓΩϟϯηϧ࣌ʹεέʔϧμ΢ϯ _scaleController.reverse(); } @override Widget build(BuildContext context) { // ϋʔτΞΠίϯͷαΠζ const double size = 48; // Ϧϯάͷ࠷େ൒ܘʢsize * 1.2ʣ const double maxRingRadius = size * 1.2; return GestureDetector( behavior: HitTestBehavior.opaque, onTap: _toggleLike, onTapDown: (_) => _onTapDown(), onTapUp: (_) => _onTapUp(), onTapCancel: _onTapCancel, child: SizedBox( width: maxRingRadius * 2, height: maxRingRadius * 2, child: Stack( alignment: Alignment.center, children: [ // λοϓ࣌ͷϦϯά AnimatedBuilder( animation: _ring, builder: (context, _) { // Ξχϝʔγϣϯ͕ಈ͍͍ͯͳ͍ɼ͔ͭ஋͕0·ͨ͸1ͷ৔߹͸ඇදࣔ if (!_burstController.isAnimating && (_ring.value == 0.0 || _ring.value == 1.0)) { return const SizedBox.shrink(); } double radius; double opacity; Color ringColor; if (_liked) { radius = lerpDouble(size * 0.6, size * 1.2, _ring.value) ?? size * 0.6; opacity = lerpDouble(0.35, 0.0, _ring.value) ?? 0.0; ringColor = Colors.pink; } else { // ͍͍Ͷղআ࣌ɿ֎ଆ͔Β಺ଆ΁ॖΜͰফ͑ΔʢάϨʔʣ radius = lerpDouble(size * 1.2, size * 0.6, _ring.value) ?? size * 1.2; opacity = lerpDouble(0.35, 0.0, _ring.value) ?? 0.0; ringColor = Colors.grey; } return Container( width: radius * 2, height: radius * 2, decoration: BoxDecoration( shape: BoxShape.circle, border: Border.all( width: 4, color: ringColor.withAlpha((255 * opacity).toInt()), ), ), ); }, ), // ϋʔτΞΠίϯ ScaleTransition( scale: _scale, child: Icon( _liked ? Icons.favorite : Icons.favorite_border, size: size, color: _liked ? Colors.pink : Colors.grey, ), ), ], ), ), ); } } import 'package:flutter/material.dart'; import 'package:rive/rive.dart'; class RiveLikeButton extends StatefulWidget { const RiveLikeButton({super.key}); @override State<RiveLikeButton> createState() => _RiveLikeButtonState(); } class _RiveLikeButtonState extends State<RiveLikeButton> { StateMachineController? _controller; SMIInput<bool>? _riveIsLiked; SMITrigger? _riveTap; bool _liked = false; @override void initState() { super.initState(); _liked = false; } void _onInit(Artboard artboard) { final controller = StateMachineController.fromArtboard( artboard, ‘State machine’, ); if (controller == null) return; artboard.addController(controller); _controller = controller; _riveIsLiked = controller.getBoolInput('isLiked'); _riveTap = controller.getTriggerInput('tap'); // ॳظঢ়ଶΛRive΁ಉظ _riveIsLiked?.value = _liked; } void _handleTap() { _liked = !_liked; // RiveͷBoolʹ൓ө _riveIsLiked?.value = _liked; // RiveͷTriggerΛൃՐ _riveTap?.fire(); } @override Widget build(BuildContext context) { // ϋʔτΞΠίϯͷαΠζ const double size = 48; return GestureDetector( onTap: _handleTap, behavior: HitTestBehavior.opaque, child: SizedBox( width: size * 1.2 * 2, // AnimationControllerͷํͷେ͖͞ʹ߹Θͤͨ height: size * 1.2 * 2, child: RiveAnimation.asset( 'assets/like_button.riv', fit: BoxFit.contain, onInit: _onInit, ), ), ); } @override void dispose() { _controller?.dispose(); super.dispose(); } } レビューしやすい！ デザイナさんとつくれる！
43. Lottie でいんじゃないの？
44. w -PUUJF
    
    ࠶ੜܕΞχϝʔγϣϯ
    w ͪͳΈʹ
    -PUUJF
    ϑΝΠϧ΋औΓࠐΊΔ
    w 3JWF
    
    ΠϯλϥΫςΟϒΞχϝʔγϣϯ vs Lottie?
    IUUQTSJWFBQQCMPHSJWFBTBMPUUJFBMUFSOBUJWF
45. Rive ならこんなことも！ IUUQTHJUIVCDPNLOPB fl VUUFS@SJWF@TBNQMFQVMM
47. Rive すごい！たのしい！
48. ちなみに
49. w ΞϓϦ಺ઃఆͰΦϯΦϑͰ͖ΔΑ͏ʹ
    w ෆཁͳ૷০Ξχϝʔγϣϯͱ
    ඞཁͳΞχϝʔγϣϯΛ෼͚ͯߟ͑Δ
    w ϩʔσΟϯά͸ඞཁ͚ͩͲ
    ͍͍ͶͷΤϑΣΫτ͸ෆཁͳͲ NJYJ
    Ͱ͸Ξχϝʔγϣϯͷઃఆը໘Λ༻ҙ
50. ࠓ೔͔Β͋ͳͨ΋
    ɹɹɹɹΤϯδχΞʂ