Next.jsでUniversal Viewerのnpmパッケージを使用する
概要 Next.jsでUniversal Viewerのnpmパッケージを使用する方法の備忘録です。 インストール 以下でインストールします。 n p m i u n i v e r s a l v i e w e r 実装 useEffectを使うため、クライアントコンポーネントとして実装する必要があるようでした。 またdivタグにuvクラスを与えることで、cssが当たるようになりました。 ' i i i } f } c } e u m m n u o ) x s p p t m c x n u } r n s l ) p e o o e a v y コ c s , e S s s o , o r r r n ? w ン t e c r i t < S t r a < r c t t f i : h ポ i E o e n [ u d R : d d / t l a f ? ー o f n q i m r i を V i i s } ビ d i { d c e n : ネ n f u s u t a n v 無 i f n v t } ュ i d e y e s u ン e n t i ( n 効 e a g y w h d j a b ー v e n u n t m s ト V c i r ' i ( i 化 w l : l i e i u l a ワ > f t s a V : b t の i t v { e u f d し e s e d i s s i c ー a ' e m i e r 実 e ( e ( v e = 、 r e = t g p t g k を u E i e s r i 装 w ( r i ' ' s " ク , { h h l i n g 読 l f c w t n e ) s n u , t u ラ = { : t a f I r み t f e r g r a i n , v イ = : y y t o 込 e f r i C = l t i { " ア d > ' : C e u み V c r P n o > v v c ン y 1 ' o m n 中 i t o r g m i } e m v c ト n 0 6 ' n s d . e m o p { e r a , l サ a 0 0 f t : : . w } p o w = s n a イ m % v l e . e ' s n e a i x s ド i ' h e n ' ' r f n e r r l f y s で c , ' x t c # r e { n を e v e w N の ( , ' : e f o x t イ q i s h a み ( , n 0 m t ( ン u e t ] m レ ) ' t f { ポ i w , ) e ン c e 0 ' d ー r e = ダ = e r f r y m ト e r c " リ > n ' 0 e n a し ( a u ン t , ' a a n て ' d n v グ P e , c m i 初 u i v " す r r t i f 期 n s a る o ' ' c e 化 i t s s コ m , ' s v / I t ン i t e e n y ポ s , r s d l ー e s m e e ネ . c a / x = ン r v l i : { ト e , v n { s i d c o x e e v w l y w x , i v w e . d e h r c x t ( ' s y h V } ) s w : i : ' h e ) ' w V } 1 e i ) 0 r e 0 C w % o e ' m r , p P o r h n o e e p i n s g t ) h ) t , { : { ' 6 0 v h ' } } > < / d i v > 他にも使用可能なオプションがあるかと思いますが、cvで処理ロードするcanvasのインデックス、xywhで表示する矩形を指定することができました。 ...