はてなCMSでFigmaを取り込むシステムに使われている技術

Kyoto.js 24

Transcript

1. ,ZPUPKT
    id: nanimono_demonai ͸ͯͳCMSͰFigmaΛऔΓࠐΉγεςϜʹ ࢖ΘΕ͍ͯΔٕज़
2. ࣗݾ঺հɾΠϯτϩ AIΤʔδΣϯτͷߏங FigmaϓϥάΠϯͷߏங Server-Sent Events 2
3. ࣗݾ঺հɾΠϯτϩ 3
4. ࣗݾ঺հ • id: nanimono_demonai • @NanimonoDaemon • ͸ͯͳϒϩάɺ͸ͯͳCMSͷ։ൃͱɺλεΫ؅ཧΛߦ͏ • େֶͰ͸ػցֶशʢػց຋༁ʣΛݚڀ͍ͯͨ͠ 4
5. ͸ͯͳCMSͱ͸ 5 ·Ί͖ͪ͠ ϩΰ͸ϖϯϩʔζͷࡾ֯ܗ https://www.hatena.ne.jp/cms/ ௚ײతͳૢ࡞ੑ ڧݻͳηΩϡϦςΟ ॊೈͳίϯςϯπ؅ཧ ࠷৽ػೳΛ͍ͭͰ΋ • ͸ͯͳͷ๏ਓ޲͚αʔϏε
6. ͸ͯͳCMSͷΞʔΩςΫνϟ 6 ·Ί͖ͪ͠ https://speakerdeck.com/nanimonodemonai/hatenacmsnoakitekutiya-ju-da-naji- cun-sisutemutogong-cun-sitezui-xin-ji-shu-woqu-riru-reru Next.js੡ͷTypeScriptΞϓϦέʔγϣϯ ࠷ۙ/FYU
   ʹͯ͠5VSCPQBDLʹ͠·ͨ͠ɻ݁ՌϏϧυߴ଎Խ͞Εͨͷ͸·ͨผͷ࿩ʜ
7. Figma to ͸ͯͳCMSͱ͸ 7
8. • ʮσβΠϯʯͱʮ࣮૷ʯͷ෼அΛຒΊΔαʔϏεΛ࡞Γ͍ͨ • FigmaͷσβΠϯσʔλΛ͸ͯͳCMSʹࣗવͳίʔυͱͯ͠൓ө͍ͨ͠ • ͔͠͠ɺFigmaͷσʔλ͸MarkdownͷΑ͏ʹHTMLͱશવରԠ͍ͯ͠ͳ͍ • ๏ਓ޲͚ͷαʔϏεͱͯ͠࡞ΔʢͳͷͰɺݸਓͰ͸࢖͑·ͤΜ…ʣ ՝୊: FigmaͰ࡞ͬͨσʔλΛऔΓࠐΊΔFigmaϓϥάΠϯΛ࡞Γ͍ͨ 8 ·Ί͖ͪ͠ ࠓ͸'JHNB΋3FBDUʹ͢ΔαʔϏεग़͍ͯ͠·͢ AIʹΑΔΞϓϦέʔγϣϯ࡞੒͕੒ख़͍ͯ͠Δੈͷத͔ͩΒ AIΛ׆༻ͯ͠ΞϓϦέʔγϣϯΛ࡞Ζ͏
9. ౰࣌ͷઌߦࣄྫௐࠪ • FigmaΛHTMLʹ͢ΔͨΊͷɺϧʔϧϕʔεͷΦʔϓϯιʔε͕͋Δ • Coding AgentͰFigma৯ΘͤΕ͹ɺHTMLͱCSSΛॻ͍ͯ͘ΕΔ • Gemini 2.5 Proʹ৯ΘͤΕ͹ɺHTMLͱCSSΛԠ౴ͯ͘͠ΕΔ • ௐࠪͷ੒Ռͱͯ͠ϓϩϯϓτҰൃͰม׵͢ΔPOC΋࡞ͬͯɺօͷධՁ΋্ʑ 9 ઌߦࣄྫΛ͋ͨͬͯΈΔͱ… ͔͠͠ɺAIʹ͓೚ͤͰ͸͏·͍͔͘ͳ͔ͬͨ
10. AIΤʔδΣϯτͷߏங 10
11. Figma࿈ܞͰ͸ • ҰճͷLLMݺͼग़͠Ͱ͸ɺ͢΂ͯͷHTMLΛग़ྗ͢Δ͜ͱ͕Ͱ͖ͳ͍ • ग़ྗτʔΫϯͷݶք͕͋ΔͨΊ • ͔͠͠ɺग़ྗτʔΫϯΛ૿΍ͨ͢Ίʹɺ࠶ؼతʹೖྗͤͨ͞΋ͷΛग़ྗͤ͞Δ ࢓૊ΈͰ͸඼࣭͕ྼԽͯ͠͠·͏ 11 ׬ᘳͳࢦࣔจʢਆϓϩϯϓτʣʹ͸ݶք͕͋ͬͨ ͦ͜ͰɺAIΤʔδΣϯτతΞϓϩʔνͷ࣮૷ʹ੾Γସ͑Δ͜ͱʹ
12. AIΤʔδΣϯτΛ࡞ΔͨΊʹ͸ • ٻΊΔ඼࣭ͷग़ྗ͕ಘΒΕΔ·Ͱɺग़ྗʹԠͯ͡৽ͨͳਪ࿦ΛߦΘ͍ͤͨ • ͜Ε·Ͱͷग़ྗΛอଘ͍ͨ͠ • ͜ΕΒΛAIαʔϏεͷΠϯλʔϑΣʔεʹґଘͤͣʹ࡞Γ͍ͨ 12 ʮAIʹ͓೚ͤʯͰ͸ͲΜͲΜखʹෛ͑ͳ͍࣮૷ͷෳࡶ͕͞ొ৔ͯ͘͠Δ ͜ΕΒΛղܾ͢ΔϥΠϒϥϦͱͯ͠զʑ͸LangChainͱLangGraphΛ࠾༻
13. Agentic Work fl owΛࢧ͑Δٕज़ 13 Agent Framework Agent Runtime Agent Harness • LangChain.js :͞·͟·ͳAIαʔϏεΛ౷Ұͨ͠ΠϯλʔϑΣʔεͰѻ͑Δ • αʔϏεΛந৅Խ͢ΔͨΊͷϨΠϠʔ https://blog.langchain.com/agent-frameworks-runtimes-and-harnesses-oh-my/ • LangGraph.js: ΤʔδΣϯτͷ಺෦ঢ়ଶΛ؅ཧ͢Δ • ReactͰ͍͏ͱ͜ΖͷReduxͳͲͷεςʔτ؅ཧϥΠϒϥϦͷงғؾ • Deep Agents: جຊతͳΤʔδΣϯτΛ࡞ΔͨΊͷϑϨʔϜϫʔΫ
14. Figma࿈ܞ͸࠷ऴతʹͲ͏࡞ΒΕ͍ͯΔΜ͚ͩͬʁ • LangGraph.jsΛ༻͍ͨAgentic Work fl ow • LangChain.jsͰݺͼग़͍ͯ͠ΔAIαʔϏε ͸Vertex AI (Gemini 2.5 pro) • ΞʔΩςΫνϟ͸Re fl ectionͱݺ͹ΕΔ΋ ͷͰɺAIʹࣗ਎ͷग़ྗΛ൑ఆͤ͞ɺظ଴͢ Δग़ྗΛಘΒΕΔ·Ͱग़ྗΛॻ͖௚ͤ͞Δ ࢓૊Έ 14 ·Ί͖ͪ͠ ਪ࿦ʹ͸͕͔͔࣌ؒΔ͔Βɺ"QQͷ֎Ͱಈ͔͍ͯ͠·͢
    "NB[PO
    424ͰΩϡʔΠϯά͍ͯ͠Δ
15. Figma Pluginͷߏங 15
16. Figma Pluginͷ֎؍ 16 https://developers. fi gma.com/docs/plugins/how-plugins-run/ FigmaͷηΩϡϦςΟʹΑΓɺΠϯλʔωοτ΁ͷΞΫηε͕ݫ͍͠
17. Figma PluginͰͷೝূ 17 ࢀর: https://developers. fi gma.com/docs/plugins/how-plugins-run/ ͜ͷՕॴΛ Ͳ͏ϥΫʹ࡞Ζ͏͔ʁ
18. Server-Sent Events 18
19. ͳͥServer-Sent Events͕ඞཁ͔ʁ • AIʹΑΔਪ࿦͸ɺΞϓϦέʔγϣϯͷ֎Ͱ͕͔͔࣌ؒΔඇಉظॲཧ • ม׵ͷਐḿ΍݁ՌΛϦΞϧλΠϜʹΫϥΠΞϯτ΁௨஌͢Δͱྑ͍ • FigmaϓϥάΠϯͷೝূ͸ɺΞϓϦέʔγϣϯͷ֎Ͱ͕͔͔࣌ؒΔඇಉظॲཧ • ͍ͭऴΘΔ͔Θ͔Βͳ͍ϢʔβʔͷॲཧΛ଴ͨͳ͍ͱ͍͚ͳ͍ 19 Ͳ͔͜ʹɺ؆୯ʹ࣮૷Ͱ͖Δ௨஌ٕज़͕ͳ͍͔ͳ͋ʁ
20. Server-Sent Events 20 https://html.spec.whatwg.org/multipage/server-sent-events.html#server-sent-events • αʔόʔ͔ΒΫϥΠΞϯτʹҰํ޲ʹσʔλΛૹ৴͢Δ͜ͱʹಛ Խٕͨ͠ज़ • ૒ํ޲ʹ͚ͨ͠Ε͹WebSocket͕͍͍ͩΖ͏ • HTTPϓϩτίϧͰಈ࡞ • γϯϓϧ͔ͭɺ࣮૷͕༰қ • ΫϥΠΞϯτ͕Web APIͷEventSource ʹؚ·Ε͓ͯΓར༻͕༰ қ
21. Server-Sent Eventsͷ࣮૷ 21 async function * readPolling(readKey: string) { const encoder = new TextEncoder(); while (true) { const code = await getCodeForReadKey(readKey); if (code.type = = = 'pending') { yield encoder.encode('event: pending\ndata: pending\n\n'); await sleep(1000); continue; } if (code.type = = = 'expired') { yield encoder.encode('event: expired\ndata: expired\n\n'); return; } if (code.type = = = 'denied') { yield encoder.encode('event: denied\ndata: denied\n\n'); return; } if (code.type = = = 'success') { yield encoder.encode(`event: success\ndata: ${code.code}\n\n`); return; } return; } } • ͜Μͳײ͡ͷδΣωϨʔλ ؔ਺Λ༰қ͢Δ
22. Server-Sent Events 22 export function GET(request: NextRequest) { const searchParams = request.nextUrl.searchParams; const readKey = searchParams.get('readKey'); if (!readKey) { return new Response('bad request', { status: 400 }); } const iterator = readPolling(readKey); const stream = iteratorToStream(iterator); request.signal.onabort = async () = > { await clearReadKey(readKey); }; return new Response(stream, { headers: { 'Content-Type': 'text/event - stream', 'Cache-Control': 'no - cache, no - transform', 'Connection': 'keep - alive', 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS', 'Access-Control-Allow-Headers': 'Content-Type, Authorization', }, }); } function iteratorToStream(iterator: AsyncGenerator<Uint8Array>) { return new ReadableStream({ async pull(controller) { const { value, done } = await iterator.next(); if (done) { controller.close(); } else { controller.enqueue(value); } }, }); } • Next.jsͳΒ͹ɺ RouteϋϯυϥʹδΣω Ϩʔλؔ਺Λ ReadableStreamʹม׵͠ ͨ΋ͷΛ౉ͯ͠΍Ε͹׬੒
23. Figma to ͸ͯͳCMSʹ͓͚ΔServer-Sent Eventsͷ۩ମతͳར༻γʔϯ • ೝূϑϩʔͰͷϙʔϦϯά • FigmaϓϥάΠϯ͔ΒͷOIDCೝূετϦʔϜʹ͓͍ͯɺreadKeyʹอଘ͞Εͨೝ ূίʔυͷঢ়ଶΛϙʔϦϯά͢Δͷʹར༻ • ม׵݁ՌͷετϦʔϛϯά͸΍͍ͬͯͳ͍΋ͷͷ… • ͔͠͠ɺServer-Sent Events͸AI͕ੜ੒ͨ͠ίʔυยΛϢʔβʔʹܧଓతʹૹ৴ ͠ϦΞϧλΠϜʹ൓ө͢Δ͜ͱʹΑ͘࢖ΘΕΔٕज़ 23 Next.jsͰ؆୯ʹServer-Sent EventsΛ࡞Δํ๏͕ݟ͔ͭͬͨͷͰɺ ࠓޙ׆༻͍͖͍ͯͨ͠
24. ·ͱΊ: ࠓճ͝঺հͨ͠΋ͷ • AIΤʔδΣϯτΛ࡞੒͢ΔͨΊͷٕज़ • Figma Pluginͷ࡞੒ʹ͓͚Δೝূܥϑϩʔ͸ෳࡶ • ৭ʑͳՕॴͰར༻ՄೳͳServer-Sent Eventsͷϓϩτίϧ֓ཁ • ͦͯ͠Next.jsͰͷ࣮૷ํ๏ 24
25. ऴΘΓ 25