https://textalive.jp/_next/static/chunks/4023-e06780cfd4293b1f.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4023],{807:e=>{e.exports={tips:"Tips_tips__VPiST",borderless:"Tips_borderless__mIEgz"}},4754:(e,r,s)=>{"use strict";s.d(r,{H:()=>n});var t=s(37876),a=s(60861),i=s.n(a);let n=()=>(0,t.jsxs)("span",{className:`brand-name ${i().brand}`,children:[(0,t.jsx)("span",{className:"text",children:"Text"}),(0,t.jsx)("span",{className:"alive",children:"Alive"})]})},9235:(e,r,s)=>{"use strict";s.d(r,{M:()=>N});var t=s(37876),a=s(14232),i=s(78029),n=s(98010),l=s(20206),o=s(89732),c=s(63218),p=s(48327),d=s(11983),h=s(48230),x=s.n(h),j=s(35948),m=s(13638),v=s(96116),A=s(41709);let g=()=>{let e=(0,a.useContext)(o.ProfileContext),r=(0,o.isJa)(e?.user);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(A.J,{}),(0,t.jsxs)(x(),{href:"/songs",className:"ui item",children:[(0,t.jsx)(v.D,{name:"music"}),(0,t.jsx)("span",{className:"tablet or lower hidden",children:r?"楽曲":"Songs"})]}),(0,t.jsxs)(x(),{href:"/videos",className:"ui item",children:[(0,t.jsx)(v.D,{name:"video_w"}),(0,t.jsx)("span",{className:"tablet or lower hidden",children:r?"動画":"Videos"})]}),(0,t.jsxs)(x(),{href:"/apps",className:"ui item",children:[(0,t.jsx)(v.D,{name:"program"}),(0,t.jsx)("span",{className:"tablet or lower hidden",children:r?"アプリ":"Apps"})]}),(0,t.jsx)(j.A,{item:!0,icon:"ellipsis horizontal",children:(0,t.jsxs)(j.A.Menu,{children:[(0,t.jsxs)(j.A.Item,{as:x(),href:"/templates",children:[(0,t.jsx)(m.A,{name:"code"}),(0,t.jsx)("span",{className:"tablet or lower hidden",children:r?"テンプレート":"Templates"})]}),(0,t.jsxs)(j.A.Item,{as:"a",href:"//fonts.textalive.jp",children:[(0,t.jsx)(v.D,{name:"font"}),(0,t.jsx)("span",{className:"tablet or lower hidden",children:r?"フォント":"Fonts"})]})]})})]})};var u=s(66694),f=s(99792),b=s(4754);let y=()=>{let[,e]=(0,a.useContext)(f.A),r=(0,a.useContext)(o.ProfileContext),s=(0,o.isJa)(r?.user),i=(0,a.useCallback)(()=>{r?.user?.id?u.$5.updateUser({language:"ja"}):e("ja")},[r,e]),n=(0,a.useCallback)(()=>{r?.user?.id?u.$5.updateUser({language:"en"}):e("en")},[r,e]);return(0,t.jsx)(j.A,{item:!0,icon:"question circle",children:(0,t.jsxs)(j.A.Menu,{children:[(0,t.jsx)(j.A.Item,{as:"a",href:"/#meta",children:s?(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(m.A,{name:"info"}),(0,t.jsx)(b.H,{}),"について"]}):(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(m.A,{name:"info"}),"About TextAlive"]})}),(0,t.jsxs)(j.A.Item,{as:"a",href:"/howto",children:[(0,t.jsx)(m.A,{name:"question"}),s?"使い方":"Usage guide"]}),(0,t.jsxs)(j.A.Item,{as:"a",href:s?"https://scrapbox.io/textalive/%E3%81%8A%E7%9F%A5%E3%82%89%E3%81%9B":"https://scrapbox.io/textalive/News",children:[(0,t.jsx)(m.A,{name:"announcement"}),s?"お知らせ":"News"]}),(0,t.jsxs)(x(),{href:"/events",className:"ui item",children:[(0,t.jsx)(m.A,{name:"calendar alternate outline"}),s?"イベント":"Events"]}),(0,t.jsx)(j.A.Divider,{}),(0,t.jsxs)(j.A.Item,{as:"a",href:"https://developer.textalive.jp",title:"TextAlive for Developers",children:[(0,t.jsx)(m.A,{name:"code"}),s?"開発者向けサイト":"Developers"]}),(0,t.jsx)(j.A.Divider,{}),(0,t.jsxs)(j.A.Item,{as:"a",onClick:s?n:i,children:[(0,t.jsx)(m.A,{name:"globe"}),s?"English":"日本語"]})]})})},_=({withoutProfile:e,onClick:r,children:s})=>(0,t.jsxs)(d.Y,{withoutProfile:e,onBarsClick:r,rightMenu:(0,t.jsx)(y,{}),children:[(0,t.jsx)(g,{}),s]});var k=s(98424),C=s(41109);let w=({visible:e,onHide:r,menus:s,children:a})=>(0,t.jsxs)(C.A.Pushable,{children:[(0,t.jsx)(C.A,{as:k.A,direction:"right",animation:"push",inverted:!0,vertical:!0,onHide:r,visible:e,children:s}),(0,t.jsx)(C.A.Pusher,{children:a})]}),P=({visible:e,onHide:r,children:s})=>(0,t.jsx)(w,{onHide:r,visible:e,menus:(0,t.jsx)(t.Fragment,{children:(0,t.jsxs)(k.A.Item,{as:"a",href:"/",children:[(0,t.jsx)(m.A,{name:"home"}),"ホーム"]})}),children:s}),N=({title:e,className:r,transparent:s=!0,withMasthead:d,noMargin:h,imageUrl:x,description:j,children:m,bare:v,withoutProfile:A=!1})=>{let g=(0,a.useContext)(c.A),u=(0,a.useContext)(o.ProfileContext);return(0,t.jsxs)(n.P,{title:`${"string"==typeof e?e:e?e(u):"TextAlive"} | ${"next"===g?"next.textalive.jp":"textalive.jp"}`,className:r,transparent:s,withMasthead:d,noMargin:h,imageUrl:x,description:j,children:[!v&&(0,t.jsx)(l.f,{children:(0,t.jsxs)(P,{visible:!1,onHide:void 0,children:[(0,t.jsx)(_,{withoutProfile:A,onClick:void 0}),(0,t.jsx)(i.q,{children:m}),(0,t.jsx)(p.F,{})]})}),v&&(0,t.jsx)(i.q,{children:m})]})}},9865:e=>{e.exports={breadcrumbContainer:"AppListBreadcrumb_breadcrumbContainer__GxAy7",attached:"AppListBreadcrumb_attached__cYVqh",footer

1:"AppListBreadcrumb_footer__wb2ex"}},17469:(e,r,s)=>{"use strict";s.d(r,{Q:()=>c});var t=s(37876),a=s(8435),i=s(85427),n=s(13638),l=s(19551),o=s(96116);let c=({icon:e,isNaIcon:r,title:s,subtitle:c,children:p})=>(0,t.jsx)(a.A,{className:"masthead",inverted:!0,vertical:!0,textAlign:"center",children:p||(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(i.A,{as:"h2",children:[r?(0,t.jsx)(o.D,{name:e}):(0,t.jsx)(n.A,{name:e}),s]}),c&&(0,t.jsx)(l.A,{className:"lead",children:(0,t.jsx)("p",{children:c})})]})})},22133:e=>{e.exports={pagination:"Pagination_pagination___3l_G",top:"Pagination_top__BZY17",goHome:"Pagination_goHome__XKJQj",goEnd:"Pagination_goEnd__hO0oK",active:"Pagination_active__K3_ZI"}},23376:(e,r,s)=>{"use strict";s.d(r,{d:()=>l});var t=s(37876),a=s(98424),i=s(22133),n=s.n(i);let l=({currentPage:e,totalPages:r,maxPages:s=15,attached:i,handlePageChange:l,className:o})=>{let c=Math.min(s,r),p=e-Math.floor(c/2);p=Math.max(0,Math.min(p,r-c));let d=Array.from(Array(c).keys()).map(e=>e+p+1);return(0,t.jsx)("div",{className:`${n().pagination}${"top"===i?` ${n().top}`:""} ${o}`,children:(0,t.jsxs)(a.A,{pagination:!0,fluid:!0,children:[(0,t.jsx)(a.A.Item,{icon:"angle left",disabled:e<1,onClick:()=>e>0&&l(e-1),className:n().goHome}),r>s&&d[0]>1&&(0,t.jsx)(a.A.Item,{children:"..."}),d.map((r,s)=>"number"==typeof r?(0,t.jsx)(a.A.Item,{active:r-1===e,onClick:()=>l(r-1),className:r-1===e?n().active:void 0,children:r},s):(0,t.jsx)(a.A.Item,{disabled:!0,children:r},s)),r>s&&d[d.length-1]<r&&(0,t.jsx)(a.A.Item,{children:"..."}),(0,t.jsx)(a.A.Item,{position:"right",icon:"angle right",disabled:e+1>=r,onClick:()=>e+1<r&&l(e+1),className:n().goEnd})]})})}},23863:(e,r,s)=>{"use strict";s.d(r,{S:()=>l});var t=s(37876),a=s(14232),i=s(89732),n=s(17469);let l=()=>{let e=(0,a.useContext)(i.ProfileContext),r=(0,i.isJa)(e?.user);return(0,t.jsx)(n.Q,{icon:"program",isNaIcon:!0,title:r?"リリックアプリを探そう":"Lyric apps",subtitle:r?"このページでは、音楽に合わせてタイミングよく歌詞が動くWebアプリケーション（リリックアプリ）を探すことができます。アプリの一覧から探すことも、アプリの対応楽曲（Alive カード）から探すこともできます。再生のたびに新鮮な体験が楽しめる「リリックアプリ」の世界をお楽しみいただけます。":"This page allows you to find lyric apps ― interactive web apps that play musical pieces and show lyrics synchronized with playback. You can search from the list of apps or by the musical pieces they support (Alive cards). Enjoy the world of lyric apps, where each playback offers a fresh experience."})}},29994:(e,r,s)=>{"use strict";s.d(r,{T:()=>d});var t=s(37876),a=s(14232),i=s(38847),n=s(89732),l=s(70190),o=s(54854),c=s(70307),p=s.n(c);let d=({borderless:e=!1,cardUrl:r})=>{let s=(0,a.useContext)(n.ProfileContext),c=(0,n.isJa)(s?.user);return(0,t.jsxs)(o.V,{title:c?"Aliveカードとは？":"What are Alive cards?",borderless:e,children:[c?(0,t.jsx)(t.Fragment,{children:(0,t.jsx)("p",{children:"Aliveカードは、リリックアプリに「挿して」使えるデジタルカードです。楽曲と歌詞に加えて、歌詞の発声タイミングやビート・サビのタイミングなど、アプリの起動に必要な情報がまとめられています。"})}):(0,t.jsx)(t.Fragment,{children:(0,t.jsx)("p",{children:"An Alive card is a digital card that can be inserted into a lyric app. It bundles a song and its lyrics with the timing, beat, and other analysis data required to run the app."})}),r&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(i.A,{}),(0,t.jsx)("p",{children:c?(0,t.jsxs)(t.Fragment,{children:["カードを「挿す」操作はアプリのユーザが行います。その内容は"," ",(0,t.jsx)("a",{href:"https://developer.textalive.jp/packages/textalive-app-api/interfaces/PlayerAppListener.html#onAppReady",target:"_blank",rel:"noopener noreferrer",children:"onAppReady"})," ","イベントや"," ",(0,t.jsx)("a",{href:"https://developer.textalive.jp/packages/textalive-app-api/interfaces/PlayerAppListener.html#onAppMediaChange",target:"_blank",rel:"noopener noreferrer",children:"onAppMediaChange"})," ","イベントで検知できますが、カードが明示的に指定されていないときに読み込むデフォルトのカードは、以下のように指定できます。"]}):(0,t.jsxs)(t.Fragment,{children:["The user of the app performs the operation of inserting a card. You can detect that with the"," ",(0,t.jsx)("a",{href:"https://developer.textalive.jp/packages/textalive-app-api/interfaces/PlayerAppListener.html#onAppReady",target:"_blank",rel:"noopener noreferrer",children:"onAppReady"})," ","event or the"," ",(0,t.jsx)("a",{href:"https://developer.textalive.jp/packages/textalive-app-api/interfaces/PlayerAppListener.html#onAppMediaChange",target:"_blank",rel:"noopener noreferrer",children:"onAppMediaChange"})," ","event, but you can specify a default card to load when no card is explicitly specified as follows."]})}),(0,t.jsx)("pre",{className:p().code,children:(0,t.jsxs)("code",{children:["import { ",(0,t.jsx)("a",{href:"https://developer.textalive.jp/packages/textalive-app-api/classes/Player.html",target:"_blank",rel:"noopener noreferrer",children:"Player"}),' } from "',(0,t.jsx)("a",{href:"https://developer.textalive.jp/packages/textalive-app-api/",target:"_blank",rel:"noopener noreferrer",children:"textalive-app-api"}),'";\nconst player = new ',(0,t.jsx)("a",{href:"https://developer.textalive.jp/packages/textalive-app-api/classes/Player.html",target:"_blank",rel:"noopener noreferrer",children:"Player"}),'({ app: { token: "',(0,t.jsx)("a",{href:"https://developer.textalive.jp/profile",target:"_blank",rel:"noopener noreferrer",children:"your token"}),'" } });\n\nplayer.addListener({\n  ',(0,t.jsx)("a",{href:"https://developer.textalive.jp/packages/textalive-app-api/interfaces/PlayerAppListener.html#onAppReady",target:"_blank",rel:"noopener noreferrer",children:"onAppReady"}),": (app) => {\n    if (!app.managed) {\n      player.",(0,t.jsx)("a",{href:"https://developer.textalive.jp/packages/textalive-app-api/classes/Player.html#createFromCardUrl",target:"_blank",rel:"noopener noreferrer",children:"createFromCardUrl"}),'("',(0,t.jsx)("a",{href:r,target:"_blank",rel:"noopener noreferrer",children:r}),'");\n    }\n  }\n});']})})]}),(0,t.jsx)(l.S,{href:"https://scrapbox.io/textalive/%E5%90%84%E7%A8%AE%E4%BB%95%E6%A7%98",external:!0,children:c?"TextAliveで扱える楽曲や歌詞の仕様":"Specification of songs and lyrics supported by TextAlive"})]})}},54854:(e,r,s)=>{"use strict";s.d(r,{V:()=>h});var t=s(37876),a=s(14232),i=s(19551),n=s(85427),l=s(13638),o=s(8435),c=s(89732),p=s(807),d=s.n(p);let h=({title:e,children:r,borderless:s=!1})=>{let p=(0,a.useContext)(c.ProfileContext),h=(0,c.isJa)(p?.user);return(0,t.jsx)("div",{className:`${d().tips}${s?` ${d().borderless}`:""}`,id:"tips",children:(0,t.jsx)(i.A,{children:(0,t.jsxs)("section",{children:[(0,t.jsxs)(n.A,{as:"h3",dividing:!0,children:[(0,t.jsx)(l.A,{name:"lightbulb"}),(0,t.jsx)(n.A.Content,{children:e||(h?"TextAliveについて知る":"Discover TextAlive")})]}),(0,t.jsx)(o.A,{basic:!0,children:r})]})})})}},60861:e=>{e.exports={brand:"BrandName_brand__2omr3"}},68658:(e,r,s)=>{"use strict";s.d(r,{b:()=>j});var t=s(37876),a=s(48230),i=s.n(a),n=s(14232),l=s(19551),o=s(70573),c=s(89732),p=s(96116),d=s(82643),h=s.n(d);let x=["apps","cards"],j=({section:e})=>{let r=(0,n.useContext)(c.ProfileContext),s=(0,c.isJa)(r?.user),a=(0,n.useMemo)(()=>[{menuItem:{as:i(),href:"/apps",key:"apps",icon:(0,t.jsx)(p.D,{name:"program"}),content:s?"アプリ一覧から選ぶ":"Choose from the app catalog"},render:()=>null},{menuItem:{as:i(),href:"/cards",key:"cards",icon:"file audio",content:s?"Alive カードから探す":"Browse Alive cards"},render:()=>null}],[s]);return(0,t.jsx)(l.A,{className:h().tabs,children:(0,t.jsx)(o.A,{activeIndex:x.indexOf(e),menu:{secondary:!0,pointing:!0,stackable:!0},panes:a})})}},70190:(e,r,s)=>{"use strict";s.d(r,{S:()=>p});var t=s(37876),a=s(87267),i=s.n(a);let n=({children:e,className:r,...s})=>(0,t.jsx)("p",{className:`${i().rightAligned} ${r||""}`,...s,children:e});var l=s(13638),o=s(48230),c=s.n(o);let p=({href:e,external:r,children:s,...a})=>(0,t.jsxs)(n,{...a,children:[(0,t.jsx)(l.A,{name:"arrow circle right"}),r?(0,t.jsx)("a",{href:e,children:s}):(0,t.jsx)(c(),{href:e,children:s})]})},70307:e=>{e.exports={code:"TipsForCards_code__pGIrN"}},80894:(e,r,s)=>{"use strict";s.d(r,{Z:()=>h});var t=s(37876),a=s(48230),i=s.n(a),n=s(19551),l=s(66556),o=s(13638),c=s(96116),p=s(9865),d=s.n(p);let h=({attached:e,footer:r,categoryName:s,eventName:a,songName:p,cardName:h,cardPath:x})=>{let j=h||s||a||p&&"楽曲ごとの一覧";return j?(0,t.jsx)("div",{className:`${d().breadcrumbContainer}${e?` ${d().attached}`:""}${r?` ${d().footer}`:""}`,children:(0,t.jsx)(n.A,{children:(0,t.jsxs)(l.A,{children:[(0,t.jsxs)(l.A.Section,{as:i(),href:"/apps",children:[(0,t.jsx)(c.D,{name:"program"}),"アプリ"]}

1),(0,t.jsx)(l.A.Divider,{icon:"right chevron"}),h?(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(l.A.Section,{as:i(),href:"/cards",children:[(0,t.jsx)(o.A,{name:"file audio"}),"カード"]}),(0,t.jsx)(l.A.Divider,{icon:"right chevron"}),x?(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(l.A.Section,{as:s||a?i():void 0,href:s||a?x:void 0,active:!s&&!a,children:h}),s&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(l.A.Divider,{icon:"right chevron"}),(0,t.jsxs)(l.A.Section,{active:!0,children:["カテゴリ: ",s]})]}),a&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(l.A.Divider,{icon:"right chevron"}),(0,t.jsxs)(l.A.Section,{active:!0,children:["発表先: ",a]})]})]}):(0,t.jsx)(l.A.Section,{active:!0,children:h})]}):(0,t.jsx)(l.A.Section,{active:!0,children:j})]})})}):null}},82643:e=>{e.exports={tabs:"AppCatalogTabs_tabs___UCm8"}},87267:e=>{e.exports={rightAligned:"RightAligned_rightAligned__JqYHI"}},90499:(e,r,s)=>{"use strict";s.d(r,{g:()=>o});var t=s(37876),a=s(14232),i=s(89732),n=s(70190),l=s(54854);let o=()=>{let e=(0,a.useContext)(i.ProfileContext),r=(0,i.isJa)(e?.user);return(0,t.jsxs)(l.V,{title:r?"リリックアプリとは？":"What are lyric apps?",children:[r?(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("p",{children:"リリックアプリは、音楽を聴きながら歌詞を楽しめる新しいメディア表現です。動画配信サービスで公開されるリリックビデオと異なり、プログラミングの力で再生のたびにコンテンツが生成されるため、音楽を聴くたびに新鮮な視聴体験を楽しむことができます。"}),(0,t.jsx)("p",{children:"リリックアプリは、リリックビデオに次ぐメディア表現として、2020年9月18日にTextAliveのプログラマ向け新機能「TextAlive App API」公開と同時に提唱されました。このAPIを使えば、一般的なWebアプリケーション用の開発環境で、必要に応じて three.js, PixiJS, p5.js など好みのライブラリと組み合わせながら、自由な映像表現をプログラミングできます。詳しくは開発者用サイト「TextAlive for Developers」をご覧ください。"})]}):(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("p",{children:"Lyric apps offer a new media experience allowing users to enjoy lyrics in sync with the music they listen to. Unlike lyric videos available on video streaming services, app content is created with each play through the power of programming, delivering a fresh viewing experience every time you listen to music."}),(0,t.jsx)("p",{children:'Lyric apps were introduced on September 18, 2020, as a new media expression following lyric videos, coinciding with the release of TextAlive\'s new feature for programmers, the "TextAlive App API." Using this API, developers can program freely expressive visuals in a typical web application development environment, integrating preferred libraries like three.js, PixiJS, or p5.js as needed. For more details, visit the developer site "TextAlive for Developers."        '})]}),(0,t.jsx)(n.S,{href:"https://developer.textalive.jp",external:!0,children:"TextAlive for Developers"})]})}},96116:(e,r,s)=>{"use strict";s.d(r,{D:()=>a});var t=s(37876);let a=({name:e,fitted:r,circular:s,color:a})=>(0,t.jsx)("i",{"aria-hidden":"true",className:`textalive-icons icon icon-${e}${r?" fittted":""}${s?" circular":""}${a?` ${a}`:""}`})}}]);