Why not login to Qiita and try out its useful features?

We'll deliver articles that match you.

You can read useful information later.

464
373

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

KDDIใ‚ขใ‚ธใƒฃใ‚คใƒซ้–‹็™บใ‚ปใƒณใ‚ฟใƒผใฎpiyonakajimaใงใ™ใ€‚
็ช็„ถใงใ™ใŒใ€ใ‚ใชใŸใฏ็™ปๅฃ‡ใ‚นใƒฉใ‚คใƒ‰ใฎไฝœๆˆใซใฉใ‚Œใใ‚‰ใ„ใฎๆ™‚้–“ใ‚’ใ‹ใ‘ใฆใ„ใพใ™ใ‹๏ผŸ

6/21-22ใซ้–‹ๅ‚ฌใ•ใ‚ŒใŸScrum Fest Osaka 2024ใซ็™ปๅฃ‡ใ—ใŸ้š›ใ€Markdown+็”ŸๆˆAIใ‚’ๆดป็”จใ—ใฆ็™ปๅฃ‡ใ‚นใƒฉใ‚คใƒ‰ใ‚’ไฝœๆˆใ—ใพใ—ใŸใ€‚ใใฎ้š›ใ€45ๅˆ†ใฎ็™ปๅฃ‡่ณ‡ๆ–™ไฝœๆˆใ‚’75%ๅŠน็އๅŒ–๏ผˆ่‡ชๅˆ†ๆฏ”๏ผ‰ใงใใพใ—ใŸใ€‚
ๆ™ฎๆฎตใ‹ใ‚‰Markdownใง่ณ‡ๆ–™ใ‚’ไฝœๆˆใ—ใฆใ„ใ‚‹ๆ–นใ‹ใ‚‰ใ™ใ‚‹ใจใ€ใ“ใ‚Œใพใงๆ™‚้–“ใ‹ใ‘ใ™ใŽใ‚„ใ‚ใ€ใจใ„ใ†ใƒ„ใƒƒใ‚ณใƒŸใŒ่žใ“ใˆใฆใใใ†ใงใ™ใŒใ€็™ปๅฃ‡่ณ‡ๆ–™ใฎไฝœๆˆๆ™‚้–“ใซๆ‚ฉใพใ‚Œใ‚‹ๆ–นใฏๆฒขๅฑฑใ„ใ‚‰ใฃใ—ใ‚ƒใ‚‹ใฎใงใฏใชใ„ใ‹ใจๆ€ใ„ใพใ™ใ€‚ไปŠๅ›žใฏใ“ใฎๆ™‚ใซๅฎŸๆ–ฝใ—ใŸๅทฅๅคซใ‚’ใŠ่ฉฑใ—ใพใ™ใ€‚
ไปฅไธ‹ใŒMarkdown(Marp)ใจ็”ŸๆˆAIใ‚’ไฝฟใฃใฆๅŸท็ญ†ใ—ใŸ45ๅˆ†ใฎ็™ปๅฃ‡่ณ‡ๆ–™ใงใ™ใ€‚ไธ€้ƒจPowerPointใงไฝœๅ›ณใ—ใŸ้ŽๅŽป่ณ‡ๆ–™ใ‹ใ‚‰ๆต็”จใ—ใฆใ„ใพใ™ใ€‚

Marpใงใฏใ€ใŸใจใˆใฐไปฅไธ‹ใฎใ‚ˆใ†ใชmarkdownใ‚’ๆ›ธใใจใ€

---

# ่ฑกใ€ๆญปใ‚“ใ ้ญšใ€ๅ˜”ๅใจใฏ

## Airbnb ใ‚ธใƒงใƒผใ‚ฒใƒ“ใ‚ขๆฐใŒๆๅ”ฑใ—ใŸใตใ‚Šใ‹ใˆใ‚Š

> โ‘ ใ€Œ่ฑกใ€ใฏๅฃใซๅ‡บใ•ใชใ„ใ‘ใ‚Œใฉๅ…จๅ“กใŒ็Ÿฅใฃใฆใ„ใ‚‹็œŸๅฎŸใ€‚
> โ‘กใ€Œๆญปใ‚“ใ ้ญšใ€ใฏใ€ๆ—ฉใใ”ใ‚ใ‚“ใชใ•ใ„ใ‚’ใ—ใŸใปใ†ใŒใ„ใ„ๆ‚ฉใฟใฎใ‚ฟใƒใ€‚ใปใฃใฆใŠใใจไบ‹ๆ…‹ใŒๆ‚ชๅŒ–ใ™ใ‚‹ใ€‚
> โ‘ขใ€Œๅ˜”ๅใ€ใฏใ€ไบบใ€…ใŒๆ–ญ็ฝชใ•ใ‚Œใšใซ่ƒธใฎๅ†…ใ‚’่ฉฑใ™ใ“ใจใ€‚ใคใพใ‚Šใ€Œใถใฃใกใ‚ƒใ‘ใ€ใ€‚

## <img src="./img/piyonakajima_icon.jpeg" class="icon"> <div class="balloon-left">ใ“ใ‚Œใ‚„ใฃใŸใปใ†ใŒใ‚ˆใ„๏ผ๏ผ๏ผ๏ผ</div>

## ใ€Œๅ‰ๅ‘ใใซใชใ‚‰ใชใใ‚ƒใ„ใ‘ใชใ„ใ€ใจๆ€ใฃใฆใ„ใ‚‹ไบบใฏใใฎไบ‹ใ‚’่จ€ใ„ๅ‡บใ›ใชใ„๏ผˆๅฎŸไฝ“้จ“๏ผ‰

---

ไปฅไธ‹ใฎใ‚ˆใ†ใช่ณ‡ๆ–™ใŒ็”Ÿๆˆใ•ใ‚Œใพใ™ใ€‚

ใ‚นใ‚ฏใƒชใƒผใƒณใ‚ทใƒงใƒƒใƒˆ 2024-06-29 15.15.50.png

ๆœฌ่จ˜ไบ‹ใงใฏๅ…ทไฝ“็š„ใชใ‚„ใ‚Šๆ–นใ‚ˆใ‚Šใ‚‚่€ƒใˆๆ–นใซใƒ•ใ‚ฉใƒผใ‚ซใ‚นใ—ใฆ่จ˜่ผ‰ใ—ใพใ™ใ€‚ๅ…ทไฝ“็š„ใซใฉใ†ใ‚„ใฃใฆใ‚„ใ‚‹ใ‹ใ€ใฎ้ƒจๅˆ†ใซใคใ„ใฆใฏ่ฉณ็ดฐใช่จ˜ไบ‹ใ‚’ๆ›ธใ‹ใ‚Œใฆใ„ใ‚‹ๆ–นใŒใ„ใฃใฑใ„ใ„ใพใ™ใ€‚่จ˜ไบ‹ใ‚’ๅผ•็”จใ—ใฆใ„ใ‚‹ใฎใงใใกใ‚‰ใ‚’ใ”ๅ‚็…งไธ‹ใ•ใ„ใ€‚
ใพใŸใ€็™ปๅฃ‡ใ—ใŸ้š›ใฎ่ณ‡ๆ–™ใฎใƒฌใƒใ‚ธใƒˆใƒชใจ่จ˜่ผ‰ใ—ใŸMarkdownใ‚‚ไน—ใ›ใฆใŠใใพใ™ใฎใงใ€ๅฟ…่ฆใซๅฟœใ˜ใฆ่ฆ‹ใฆใ„ใŸใ ใ‘ใ‚‹ใจๅ‚่€ƒใซใชใ‚‹ใ‹ใจๆ€ใ„ใพใ™ใ€‚

ใฏใ˜ใ‚ใซ

ไปŠๅนดScrum Fest Osaka้€š็งฐใ‚นใ‚ฏใƒ•ใ‚งใ‚นๅคง้˜ชใงใฎ็™บ่กจๆบ–ๅ‚™ใฏใ€็งใซใจใฃใฆๅคงใใชใƒใƒฃใƒฌใƒณใ‚ธใงใ—ใŸใ€‚ใ‚นใ‚ฏใƒ•ใ‚งใ‚นๅคง้˜ชใงใฏใ€ใ‚ชใƒผใƒ—ใƒณใƒ—ใƒญใƒใƒผใ‚ถใƒซๅฝขๅผใŒๆŽก็”จใ•ใ‚Œใฆใ„ใพใ™ใ€‚็™ปๅฃ‡ๅ†…ๅฎนใ‚’proposalใจๅ‘ผใฐใ‚Œใ‚‹ๅฝขๅผใซใฆ็”ณ่พผใ—ๅ…ฌ้–‹ใ•ใ‚ŒใŸไธŠใงใ€ใ‚ณใƒŸใƒฅใƒ‹ใƒ†ใ‚ฃใฎ้‹ๅ–ถใ‚’ใ•ใ‚Œใฆใ„ใ‚‹ๆ–นใซใ‚ˆใฃใฆใƒ—ใƒญใ‚ฐใƒฉใƒ ใŒ้ธใฐใ‚Œใพใ™ใ€‚
ไปŠๅ›ž็งใฏๅ‹ขใ„ใงใ‚นใ‚ฏใƒ•ใ‚งใ‚นๅคง้˜ชใฎproposalใ‚’ๆ›ธใ„ใŸใ‚‚ใฎใฎใ€ๅฟ™ใ—ใ•ใฎใŸใ‚ใซ่พžใ‚ใ‚ˆใ†ใจ่€ƒใˆใฆใ„ใพใ—ใŸใ€‚ใ—ใ‹ใ—ใ€ๆ‰‹้•ใ„ใงproposalใŒๅ€™่ฃœใซๆฎ‹ใ‚Šใ€้‹ๅ–ถใฎๆ–น(ๆฒ–็ธ„ใƒˆใƒฉใƒƒใ‚ฏ)ใซๆŽกๆŠž้ ‚ใใ“ใจใซใชใ‚Šใพใ—ใŸใ€‚็™ปๅฃ‡ใซใคใ„ใฆใฏ่ฟทใฃใŸใฎใงใ™ใŒๆŒ‡ๅใ‚’้ ‚ใ„ใŸใ‹ใ‚‰ใซใฏ่ฉฑใ—ใŸใ„ใจๆ€ใ„ใพใ—ใŸใ€‚ใ—ใ‹ใ—ใชใŒใ‚‰ใ€ไปŠๅ›žใฏๆฅญๅ‹™ใ‚„ใƒ—ใƒฉใ‚คใƒ™ใƒผใƒˆ๏ผˆใฎๆ›ฒไฝœใ‚Š๏ผ‰ใŒใชใ‹ใชใ‹้€ผ่ฟซใ—ใฆใ„ใ‚‹็Šถๆณใง่ณ‡ๆ–™ไฝœๆˆใฎๆ™‚้–“ใŒๅ–ใ‚Œใใ†ใซใ‚ใ‚Šใพใ›ใ‚“ใงใ—ใŸใ€‚45ๅˆ†ใฎ็™ปๅฃ‡ใฏๅคงๅค‰ใงใ™ใ€‚ไฝ•ๆ•…ใชใ‚‰ใฐ๏ผ‘ๅ›žใฎ็ทด็ฟ’ใซ45ๅˆ†ใ‹ใ‹ใ‚‹ใ‹ใ‚‰ใงใ™ใ€‚

PowerPointใ‚„Google Slideใซใ‚ˆใ‚‹่ณ‡ๆ–™ไฝœๆˆใงใฏใจใฆใ‚‚้–“ใซๅˆใ‚ใชใ„ใจๆ„Ÿใ˜ใ€ๅˆฅใฎๆ–นๆณ•ใ‚’ๆจก็ดขใ—ใพใ—ใŸใ€‚ใใ“ใงๆ€ใ„ใคใ„ใŸใฎใŒใ€Markdownใจ็”ŸๆˆAIใ‚’ไฝฟใฃใŸใ‚นใƒฉใ‚คใƒ‰ไฝœๆˆใงใ—ใŸใ€‚ใ“ใฎๆ–นๆณ•ใ‚’่ฉฆใ—ใŸใจใ“ใ‚ใ€ๅพ“ๆฅใฎๆ–นๆณ•ใ‚ˆใ‚Šใ‚‚็ˆ†้€Ÿใง่ณ‡ๆ–™ใ‚’ไฝœๆˆใ™ใ‚‹ใ“ใจใŒใงใใพใ—ใŸใ€‚

Marpใจใฎๅ‡บไผšใ„

ใ‚นใ‚ฏใƒฉใƒ ใƒ•ใ‚งใ‚นๅคง้˜ชใงใฎ็™บ่กจๆบ–ๅ‚™ไธญใ€้šฃใฎใƒใƒผใƒ ใซ็”ŸๆˆAIใ‚’ไฝฟใฃใฆ่‡ชๅ‹•ใง้ฉๅฝ“ใชใƒ—ใƒฌใ‚ผใƒณ่ณ‡ๆ–™ใ‚’่ฉฆไฝœใ—ใฆใ„ใ‚‹ไบบใŒใ„ใพใ—ใŸใ€‚ๅฝผใŒไฝฟใฃใฆใ„ใŸใฎใŒMarpใงใ—ใŸใ€‚็งใ‚‚ใ“ใฎใƒ„ใƒผใƒซใซ่ˆˆๅ‘ณใ‚’ๆŒใกใ€่ชฟในใฆใฟใ‚‹ใ“ใจใซใ—ใพใ—ใŸใ€‚

Marp๏ผˆMarkdown Presentation Ecosystem๏ผ‰ใฏใ€Markdownๅฝขๅผใงใƒ—ใƒฌใ‚ผใƒณใƒ†ใƒผใ‚ทใƒงใƒณใ‚นใƒฉใ‚คใƒ‰ใ‚’ไฝœๆˆใงใใ‚‹ใƒ„ใƒผใƒซใงใ™ใ€‚ใ‚ทใƒณใƒ—ใƒซใชMarkdown่จ˜ๆณ•ใ‚’ไฝฟใฃใฆใ‚นใƒฉใ‚คใƒ‰ใ‚’ไฝœๆˆใงใใ‚‹ใŸใ‚ใ€ๅŠน็އ็š„ใง็›ดๆ„Ÿ็š„ใชใ‚นใƒฉใ‚คใƒ‰ไฝœๆˆใŒๅฏ่ƒฝใงใ™ใ€‚ใพใŸใ€ใƒ†ใƒผใƒžใ‚„ใ‚นใ‚ฟใ‚คใƒซใฎใ‚ซใ‚นใ‚ฟใƒžใ‚คใ‚บใŒๅฎนๆ˜“ใงใ€ใ‚นใƒฉใ‚คใƒ‰ใฎใƒ‡ใ‚ถใ‚คใƒณใ‚‚่‡ช็”ฑใซ่ชฟๆ•ดใงใใพใ™ใ€‚
ใพใŸใ€MarkdownๅฝขๅผใฎใŸใ‚ใ€็”ŸๆˆAIใ‚’ไฝฟใฃใฆใ‚ณใƒณใƒ†ใƒณใƒ„ใ‚’็ฐกๅ˜ใซ็”Ÿๆˆใƒป็ทจ้›†ใงใใพใ™ใ€‚

ๅ‚™่€ƒ๏ผšSlidevใ‚‚ๆคœ่จŽใ—ใŸ

ๅŒๆ™‚ใซSlidevใจใ„ใ†ๅˆฅใฎใƒ„ใƒผใƒซใ‚‚ๆคœ่จŽใ—ใพใ—ใŸใŒใ€ไปŠๅ›žใฏใ€ใ‚ทใƒณใƒ—ใƒซใงไฝฟใ„ใ‚„ใ™ใใ†ใชMarpใ‚’ๆŽก็”จใ—ใพใ—ใŸใ€‚Slidevใงใ‚‚ใ‚ˆใ‹ใฃใŸใ‚ˆใ†ใซๆ€ใฃใฆใ„ใพใ™ใ€‚GitHubใฎStarๆ•ฐ็š„ใซใฏใ“ใฃใกใฎๆ–นใŒๅคšใ„ใ‚ˆใ†ใงใ™ใ€‚

Markdownใจ็”ŸๆˆAIใ‚’ไฝฟใฃใŸใ‚นใƒฉใ‚คใƒ‰ไฝœๆˆ่ก“

่ณ‡ๆ–™ไฝœๆˆใซใŠใ„ใฆใ€็งใฏใ€Œ็ตŒ้จ“ใ‚’Learning Outcomeใซใ—ใฆๆ›ธใใ€ใ€Œใƒ—ใƒญใƒƒใƒˆใ‹ใ‚‰ๆ›ธใใ€ใ“ใจใ‚’ๅคงๅˆ‡ใซใ—ใฆใ„ใพใ™ใ€‚

็ตŒ้จ“ใ‚’Learning Outcomeใซใ—ใฆๆ›ธใ

LAPRASใฎใ“ใจใญใ•ใ‚“ใŒไปฅไธ‹ใฎ่ณ‡ๆ–™ใง็™บ่กจใ•ใ‚ŒใŸๅ†…ๅฎนใงใ™ใ€‚
่‡ชๅˆ†ใฎ็ตŒ้จ“ใ‹ใ‚‰Learning Outcome(=่ชญ่€…ใŒ่ฆ‹ใ‚‹ใ“ใจใซใ‚ˆใฃใฆๅพ—ใ‚‰ใ‚Œใ‚‹ใƒกใƒชใƒƒใƒˆ๏ผ‰ใ‚’่€ƒใˆใฆใ‹ใ‚‰ๆ›ธใใจใ„ใ†่€ƒใˆๆ–นใงใ™ใ€‚

ใƒ—ใƒญใƒƒใƒˆใ‹ใ‚‰ๆ›ธใ

ๅผŠ็คพใฎใƒ†ใ‚ฏใƒ‹ใ‚ซใƒซใ‚จใƒใƒณใ‚ธใ‚งใƒชใ‚นใƒˆใฟใฎใ‚‹ใ‚“ๆฐใŒไปฅไธ‹ใฎQiita่จ˜ไบ‹ใซใฆ่จ˜่ผ‰ใ—ใฆใ„ใ‚‹ใ‚„ใ‚Šๆ–นใ‚’ๅคงๅˆ‡ใซใ—ใฆใ„ใพใ™ใ€‚ใ„ใใชใ‚Š่ณ‡ๆ–™ๆœฌๆ–‡ใ‹ใ‚‰ไฝœใ‚Š่พผใ‚€ใฎใงใฏใชใใ€Markdownใงใ‚ขใ‚ธใ‚งใƒณใƒ€ใ‚’ๆ›ธใ„ใฆใ„ใใพใ™ใ€‚

ใ“ใฎ๏ผ’็‚นใ‚’้‡่ฆ–ใ—ใชใŒใ‚‰ใ€็”ŸๆˆAIใจไผš่ฉฑใ‚’ใ™ใ‚‹ใ‚ˆใ†ใซ่ณ‡ๆ–™ใ‚’ๆ›ธใ„ใฆใ„ใ

ไพ‹ใˆใฐใงใ™ใŒไปฅไธ‹ใฎใ‚ˆใ†ใชใƒ—ใƒญใƒณใƒ—ใƒˆใ‚’ๆ›ธใใ€็”ŸๆˆAIใจ้›‘่ซ‡ใ‚’ใ—ใชใŒใ‚‰ใพใจใ‚ใฆใ„ใใพใ™ใ€‚

็งใŒไฝ“้จ“ใ—ใŸใ€Œ่ฑกใ€ๆญปใ‚“ใ ้ญšใ€ๅ˜”ๅใ€ใ‚’ไผš็คพๅ†…ๅค–ใซๅบƒใ‚ใŸ็ตŒ้จ“ใ‹ใ‚‰็™ปๅฃ‡่ณ‡ๆ–™ใ‚’marpใงไฝœๆˆใ—ใพใ™ใ€‚
Learning Outcomeใ‚’ๆ›ธใใŸใ‚ใซ็งใซๅ•ใ„ใ‚’ใ„ใใคใ‹ๆŠ•ใ’ใ‹ใ‘ใฆไธ‹ใ•ใ„ใ€‚
็งใŒๅ›ž็ญ”ใ—ใŸใ‚‰ใใ‚Œใ‚’ๅ…ƒใซ็™ปๅฃ‡่ณ‡ๆ–™ใ‚’marpใง่จ˜่ผ‰ใ—ใฆใใ ใ•ใ„ใ€‚

ใ“ใฎใ‚ˆใ†ใซใ€็”ŸๆˆAIใ‚’ๅฃๆ‰“ใก็›ธๆ‰‹ใจใ—ใฆๆดป็”จใ™ใ‚‹ใ“ใจใซใ‚ˆใ‚Šใ€ๅŠน็އ็š„ใซๆง‹ๆˆๆกˆใ‚’ไฝœๆˆใ—ใ€ใ‚นใƒ ใƒผใ‚บใซ่ณ‡ๆ–™ไฝœๆˆใŒ้€ฒใฟใพใ—ใŸใ€‚ใ‚จใƒ‡ใ‚ฃใ‚ฟใฏCursorใ‚’ไฝฟใ„ใ€็”ŸๆˆAIใซๆ‚ฉใฟ็›ธ่ซ‡ใ—ใชใŒใ‚‰markdownใ‚’ๅŸ‹ใ‚ใฆใ„ใใพใ—ใŸใ€‚Cursorใ‚’ไฝฟใ†ใ“ใจใงใ€ๅŸท็ญ†ๅŽŸ็จฟใฎMarkdownใ‚’ไธธใ”ใจ็”ŸๆˆAIใซ่ชญใฟ่พผใพใ›ใฆไผš่ฉฑใ™ใ‚‹ใ“ใจใŒใงใใพใ™ใ€‚๏ผˆไปฅไธ‹ใฏใ‚คใƒกใƒผใ‚ธ็”ปๅƒ๏ผ‰

ใ‚นใ‚ฏใƒชใƒผใƒณใ‚ทใƒงใƒƒใƒˆ 2024-06-29 13.59.44.png

ใใฎไป–ๅทฅๅคซใ—ใŸ็‚น

ไปฅไธ‹ใฏใ‚นใƒฉใ‚คใƒ‰ใฎใƒ‡ใ‚ถใ‚คใƒณใ‚„ไฝœๆ–‡ใงๅฟƒใŒใ‘ใŸ็‚นใงใ™ใ€‚

่‡ช็คพใฎใ‚นใƒฉใ‚คใƒ‰ใƒ†ใƒณใƒ—ใƒฌใƒผใƒˆใ‹ใ‚‰่ƒŒๆ™ฏ็”ปๅƒใ‚’ไฝœๆˆใ™ใ‚‹

ใ•ใ‚‰ใซใ€่‡ช็คพใฎใ‚นใƒฉใ‚คใƒ‰ใƒ†ใƒณใƒ—ใƒฌใƒผใƒˆใ‚’ไฝœๆˆใ™ใ‚‹ใŸใ‚ใซใ€PowerPointใฎ่ƒŒๆ™ฏใ‚’png็”ปๅƒใงๅ‡บๅŠ›ใ—ใ€Marpใงไฝฟ็”จใ™ใ‚‹ใ‚นใƒฉใ‚คใƒ‰ใซ้‡ใญๅˆใ‚ใ›ใพใ—ใŸใ€‚ใ“ใ‚Œใซใ‚ˆใ‚Šใ€็ตฑไธ€ๆ„Ÿใฎใ‚ใ‚‹ใƒ‡ใ‚ถใ‚คใƒณใ‚’ไฟใกใชใŒใ‚‰ใ€Markdownใงใฎใ‚นใƒฉใ‚คใƒ‰ไฝœๆˆใŒๅฏ่ƒฝใจใชใ‚Šใพใ—ใŸใ€‚๏ผˆไธŠ่จ˜ใƒฌใƒใ‚ธใƒˆใƒชใฏ่ƒŒๆ™ฏใ‚นใƒฉใ‚คใƒ‰ใฎใฟ .gitignore ใ—ใฆใ„ใพใ™)

ใƒ‡ใ‚ถใ‚คใƒณใ‚’ๅฟ…่ฆไปฅไธŠใซใ„ใ˜ใ‚‰ใชใ„๏ผˆMarkdownใง่กจ็พใ—ใซใใ„่กจ็พใฏใคใใ‚‰ใชใ„๏ผ‰

Google Slideใ‚„PowerPointใ ใจใคใ„ใ€้ซ˜ๅบฆใชใ‚ฐใƒฉใƒ•ใ‚ฃใƒƒใ‚ฏใซใ“ใ‚ŠใŸใใชใ‚Šใพใ™ใŒใ€ๆ•ขใˆใฆไฝœใ‚Š่พผใพใชใ„ใ‚ˆใ†ใซๅฟƒใŒใ‘ใพใ—ใŸใ€‚

ใใ‚Œใงใ‚‚ใ“ใ ใ‚ใ‚ŠใŸใ„้ƒจๅˆ†ใฏ็”ŸๆˆAIใซCSSใงไฝœใ‚‰ใ›ใ‚‹

ไธ€ๆ–นใงใ€ใ“ใ ใ‚ใ‚ŠใŸใ„้ƒจๅˆ†๏ผˆไปŠๅ›žใฎๅ ดๅˆใ€ๅ‡บไผšใฃใŸไบบใจใฎไผš่ฉฑใ‚ทใƒผใƒณ๏ผ‰ใฏCSSใง็‹ฌ่‡ชใƒ‡ใ‚ถใ‚คใƒณใ‚’ไฝœใ‚Šใพใ—ใŸใ€‚
ใ“ใฎใƒ‡ใ‚ถใ‚คใƒณใ‚‚็”ŸๆˆAIใซ้ ผใ‚Šใ€ไปฅไธ‹ใฎใ‚ˆใ†ใชใ‚นใƒฉใ‚คใƒ‰ใ‚’ไฝœๆˆใ—ใพใ—ใŸใ€‚

ไปฅไธ‹ใฏๅนใๅ‡บใ—ใฎCSSใฎไพ‹ใงใ™ใ€‚

ๅนใๅ‡บใ—ใฎCSS(้•ทใ„ใฎใงๆŠ˜ใ‚ŠใŸใŸใ‚“ใงใพใ™)
/* ๅนใๅ‡บใ—ใฎใ‚นใ‚ฟใ‚คใƒซ */
.balloon-left {
  position: relative;
  display: inline-block;
  margin-left: 64px;
  padding: 32px 64px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  background: #e0edff;
  border-radius: 20px; /* ่ง’ใ‚’ไธธใใ™ใ‚‹ */
  text-align: center;
}

.balloon-left:before {
  content: '';
  position: absolute;
  top: 50%;
  left: -60px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-right: 50px solid #e0edff;
}

.balloon-left p {
  margin: 0;
  padding: 0;
}
.balloon-right {
  position: relative;
  display: inline-block;
  margin-right: 64px;
  padding: 32px 64px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  border-radius: 20px; /* ่ง’ใ‚’ไธธใใ™ใ‚‹ */
  background: #e0edff;
}

.balloon-right:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -15px;
  border: 15px solid transparent;
  border-left: 50px solid #e0edff;
}

.balloon-right p {
  margin: 0;
  padding: 0;
}

ไธŠ่จ˜CSSใ‚’ๆดป็”จใ—Markdownใง่จ˜่ผ‰ใ—ใŸใ‚นใƒฉใ‚คใƒ‰ๆœฌๆ–‡ใŒไปฅไธ‹ใงใ™ใ€‚

---

# ใถใฃใกใ‚ƒใ‘ใฆ่ฉฑใ›ใ‚‹ใ‚ˆใ†ใซใชใฃใŸ Fun Done Learn ใจใใฎ็†็”ฑ

## ๆฅญๅ‹™ใŒ็ต‚ใ‚ใ‚Š้›‘่ซ‡ใ‚’ใ—ใฆใ„ใŸใ‚ใ‚‹ๆ—ฅใ€ไผš่ฉฑใฎๆตใ‚Œใ€‚

## <div class="balloon-right">โ€ฆใงใ€็ตๅฑ€ใดใ‚ˆใ•ใ‚“ใฏใฉใ†ใ—ใŸใ„ใฎ๏ผŸ</div> <img src="./img/person.png" class="icon">

## <img src="./img/piyonakajima_icon.jpeg" class="icon"> <div class="balloon-left">โ€ฆใตใ‚Šใ‹ใˆใ‚Šใง่จ€ใ„ใŸใ„ใ“ใจใŒใ„ใˆใชใ„ใ€ใ“ใฎ็ŠถๆณใŒใคใ‚‰ใ„ใงใ™</div>

ๅŒใ˜ใ‚ˆใ†ใซๆฒˆ้ป™ใฏๆตใ‚ŒใŸใ€‚ใงใ‚‚ใใฎๅ ดใซใ„ใŸๅ…จๅ“กใŒๆœ€ๅพŒใพใง่ฉฑใ‚’่žใ„ใฆใใ‚ŒใŸ
ใใ‚Œใ‚’ใใฃใ‹ใ‘ใซๅฐ‘ใ—ใšใคใ‚ชใƒผใƒ—ใƒณใชใ‚ณใƒŸใƒฅใƒ‹ใ‚ฑใƒผใ‚ทใƒงใƒณใŒใงใใ‚‹ใ‚ˆใ†ใซใชใฃใŸ

---

ๅฎŸ้š›ใซใงใใ‚ใŒใฃใŸใ‚นใƒฉใ‚คใƒ‰ใŒไปฅไธ‹ใฎ็”ปๅƒใงใ™ใ€‚

ใ‚นใ‚ฏใƒชใƒผใƒณใ‚ทใƒงใƒƒใƒˆ 2024-06-29 13.53.37.png

ใ‚ชใƒใ‚’่€ƒใˆใฆใ‚‚ใ‚‰ใ†

ๆœ€ๅพŒใฉใ†ใ‚ชใƒใ‚’ใคใ‘ใ‚‹ใ‹่€ƒใˆใ‚‰ใ‚Œใฆใ„ใพใ›ใ‚“ใงใ—ใŸใ€‚็”ŸๆˆAIใซไธธๆŠ•ใ’ใ—ใŸ็ตๆžœ็”Ÿใพใ‚ŒใŸใ‚ชใƒใŒไปฅไธ‹ใฎใจใŠใ‚Šใงใ™ใ€‚

---

# ่ฑกๆญปใ‚“ใ ้ญšๅ˜”ๅใงใ€็ตถๅฏพใถใฃใกใ‚ƒใ‘ใŸ่ฉฑใŒใงใใ‚‹๏ผŸ

## ็ญ”ใˆใฏ No

- ใใ‚Œใžใ‚Œ่จ€ใˆใชใ„ใ“ใจใฏใ‚ใ‚‹
- ไฝ•ใ‚’ใ‚„ใฃใŸใจใ—ใฆใ‚‚็š†ใŒใถใฃใกใ‚ƒใ‘ใฆใ„ใ‚‹ไฟ่จผใฏใชใ„

## ใงใ‚‚ใ€ๅคงๅˆ‡ใชใฎใฏใ€Œใถใฃใกใ‚ƒใ‘ใฆ่ฉฑใ›ใ‚‹ๅ ดใ€ใ‚’ไฝœใ‚Š็ถšใ‘ใ‚‹ใ“ใจ

- ไธ€ๅบฆใงๅฎŒ็’งใชๅ ดใฏไฝœใ‚Œใชใ„
- ็ถ™็ถš็š„ใซใ‚ซใ‚คใ‚ผใƒณใ—ใฆใ„ใๅงฟๅ‹ขใŒ้‡่ฆ
- ใพใŸๆฐ—ใฅใ„ใŸใ‚‰ proposal ๅ‡บใ—ใพใ™

---

ใ‚นใ‚ฏใƒชใƒผใƒณใ‚ทใƒงใƒƒใƒˆ 2024-06-29 14.02.03.png

็ดๅพ—ๆ„ŸใŒใ‚ใฃใŸใฎใงใ€ๅฐ‘ใ—ใ ใ‘ไฟฎๆญฃใ—ใฆใใฎใพใพๆŽก็”จใ—ใพใ—ใŸใ€‚๏ผˆ่ณ‡ๆ–™ใฎ่ฉฑใซใชใ‚Šใพใ™ใŒใ€่ชฐใ‚‚ใŒใถใฃใกใ‚ƒใ‘ใ‚‰ใ‚Œใ‚‹ใ‚ˆใ†ใชๅ ดใ‚’ไฝœใ‚ŒใŸไฟ่จผใฏใชใ„ใงใ™ใŒใ€็Šถๆณใซๅˆใ‚ใ›ใฆ่ฉฆ่กŒ้Œฏ่ชคใ—ใคใฅใ‘ใ‚‹ใ“ใจใŒๅคงไบ‹ใ ใจๆ€ใฃใฆใ„ใพใ™ใ€‚๏ผ‰
ๆœ€็ต‚็š„ใซXใงใใ“ใซๅ…ฑๆ„Ÿใ—ใฆใ„ใŸใ ใ„ใŸๆ–นใŒใ„ใพใ—ใŸใ€‚็”ŸๆˆAIใŒไฝœๆˆใ—ใŸ้ƒจๅˆ†ใงใฏใ‚ใ‚Šใพใ™ใŒใ€่‡ชๅˆ†ใŒไปŠๅ›žใฎproposalใงไผใˆใŸใ‹ใฃใŸใ€ไปŠใ‚‚ๆ‚ฉใฟ็ถšใ‘ใฆใ„ใ‚‹้ƒจๅˆ†ใ ใฃใŸใฎใงๅฌ‰ใ—ใ‹ใฃใŸใงใ™ใ€‚

ไป–ใซใ‚‚่ณ‡ๆ–™ใŒใ™ในใฆMarkdownใซใชใฃใฆใ„ใ‚‹ใŸใ‚ใ€Cursorใ‚’ไฝฟใฃใฆๆ”นๅ–„็‚นใฎๆŒ‡ๆ‘˜ใ‚’ไพ้ ผใ™ใ‚‹ใจใ€่ถณใ‚Šใฆใ„ใชใ„่ฆณ็‚นใ‚’ใƒ•ใ‚ฃใƒผใƒ‰ใƒใƒƒใ‚ฏใ—ใฆใใ‚Œใพใ™ใ€‚ใ™ในใฆ้ตœๅ‘‘ใฟใซใ›ใšใ€่‡ชๅˆ†ใฎ่€ƒใˆๆ–นใจๅˆ่‡ดใ™ใ‚‹ใƒ•ใ‚ฃใƒผใƒ‰ใƒใƒƒใ‚ฏใฎใฟใ‚ซใ‚คใ‚ผใƒณใ—ใฆใ„ใใพใ—ใŸใ€‚

Marpใงๆ›ธใ„ใŸๅŠนๆžœ

ใ“ใ†ใ—ใฆๅฎŒๆˆใ—ใŸใ‚นใƒฉใ‚คใƒ‰ใฏใ€ๅพ“ๆฅใฎๆ–นๆณ•ใซๆฏ”ในใฆๅคงๅน…ใซๆ™‚้–“็Ÿญ็ธฎใงใใพใ—ใŸใ€‚
ๆ˜จๅนด็™ปๅฃ‡ใ—ใŸ่ณ‡ๆ–™ใงใฏไฝœๆˆใซ32ๆ™‚้–“ใ‹ใ‹ใ‚Šใพใ—ใŸใŒใ€1ๆ—ฅ2ๆ™‚้–“ใฎ4ๆ—ฅ้–“ใ€่จˆ8ๆ™‚้–“ใงๅฎŒไบ†ใ—ใพใ—ใŸใ€‚
ใ“ใ‚Œใฏๆ™‚้–“ใซใ—ใฆ็ด„75%ใฎๅŠน็އๅŒ–ใ‚’ๅฎŸ็พใ—ใŸใ“ใจใซใชใ‚Šใพใ™ใ€‚ๅŠน็އๅŒ–ใงใใŸ็†็”ฑใจใ—ใฆใ€MarkdownใฎใŸใ‚ๅ†…ๅฎนใ‚’ๆ›ธใใ“ใจใซ้›†ไธญใงใใ‚‹ใ€้Žๅ‰ฐใชใƒ‡ใ‚ถใ‚คใƒณใซใ“ใ ใ‚ใ‚‰ใชใใฆใ™ใ‚€ใ€Cursorใงๆ›ธใใ“ใจใงใƒชใ‚ขใƒซใ‚ฟใ‚คใƒ ใซ็”ŸๆˆAIใซๅฃๆ‰“ใกใ—ใชใŒใ‚‰ๆ›ธใ‘ใŸใ‹ใ‚‰ใชใฎใงใฏใชใ„ใ‹ใจ่€ƒใˆใฆใ„ใพใ™ใ€‚
ไฝœๆˆใ—ใŸใ‚นใƒฉใ‚คใƒ‰ใฏใ‚นใ‚ฏใƒ•ใ‚งใ‚นๅคง้˜ชใง็™บ่กจใ—ใ€ใใฎๅพŒใ‚ชใƒณใƒฉใ‚คใƒณใงใ‚‚ๅ…ฑๆœ‰ใ•ใ‚Œใพใ—ใŸใ€‚็ตๆžœใจใ—ใฆ6/29็พๅœจใซ4.3k้–ฒ่ฆงใ•ใ‚Œใ€ใใ‚Œใชใ‚Šใซๅคšใใฎไบบใซ่ˆˆๅ‘ณใ‚’ๆŒใฃใฆใ‚‚ใ‚‰ใ†ใ“ใจใŒใงใใŸใ‚ˆใ†ใซๆ€ใ„ใพใ™ใ€‚๏ผˆๅ‰ๆใงใ™ใŒPageViewใฎๆ•ฐใŒๅ†…ๅฎนใฎ่ณชใ‚’่กจใ—ใฆใ„ใ‚‹ใ‚ใ‘ใงใฏใ‚ใ‚Šใพใ›ใ‚“๏ผ‰
็งใฏใพใ ใงใใฆใ„ใพใ›ใ‚“ใŒใ€VSCodeใฎLiveshareใ‚’ไฝฟใˆใฐใ€ใƒขใƒ–ใƒ—ใƒญใ‚ฐใƒฉใƒŸใƒณใ‚ฐใฎใ‚ˆใ†ใซ็™ปๅฃ‡่ณ‡ๆ–™ใ‚’ไฝœใ‚‹ใ“ใจใ‚‚ๅฏ่ƒฝใงใ™ใ€‚PowerPointใ‚„Google Slideใ‚‚ไปŠๅพŒMicrosoft Copilotใ‚„Geminiใซใ‚ˆใฃใฆๅŒๆง˜ใฎไฝ“้จ“ใงๅŸท็ญ†ใงใใ‚‹ๆ—ฅใŒใ™ใๆฅใ‚‹๏ผˆๆฅใฆใ„ใ‚‹)ใจ่€ƒใˆใฆใ„ใพใ™ใŒใ€Markdown+็”ŸๆˆAIใงๆ›ธใไฝ“้จ“ใฏๆ˜ฏ้žๆ„Ÿใ˜ใฆใฟใฆ้ ‚ใใŸใ„ใงใ™ใ€‚ใ‚‚ใ—่ˆˆๅ‘ณใ‚’ๆŒใฃใŸๆ–นใŒใ„ใŸใ‚‰่ฉฆใ—ใฆใฟใฆไธ‹ใ•ใ„ใ€‚

464
373
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up

@piyonakajima's pickup articles

kddiagile
KDDIใ‚ขใ‚ธใƒฃใ‚คใƒซ้–‹็™บใ‚ปใƒณใ‚ฟใƒผๆ ชๅผไผš็คพใฎๅ…ฌๅผใ‚ขใ‚ซใ‚ฆใƒณใƒˆใงใ™ใ€‚ ใ‚ขใ‚ธใƒฃใ‚คใƒซ้–‹็™บๆ‰‹ๆณ•ใ‚„ใ‚ตใƒผใƒ“ใ‚นใƒ‡ใ‚ถใ‚คใƒณใฎๅฎŸ่ทต็ŸฅใซๅŸบใฅใ„ใŸใƒ—ใƒญใ‚ปใ‚นใ‚’็”จใ„ใฆใ€ๆœฌ่ณช็š„ใชไพกๅ€คใฎ่ฟฝๆฑ‚ใ‚’ใƒ‘ใƒผใƒˆใƒŠใƒผใจๅ…ฑใซ่กŒใ†ๅ…ฑๅ‰ตไบ‹ๆฅญใ‚’ๆไพ›ใ€‚ noteใงๆƒ…ๅ ฑ้…ไฟกไธญ https://note.com/kddi_agile

Today's trending articles

Linked from these articles

Comments

This comment has been deleted for violation of our Terms of Service.

Let's comment your feelings that are more than good

Qiita Advent Calendar is held!

Qiita Advent Calendar is an article posting event where you post articles by filling a calendar ๐ŸŽ…

Some calendars come with gifts and some gifts are drawn from all calendars ๐Ÿ‘€

Please tie the article to your calendar and let's enjoy Christmas together!

464
373

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Login to continue?

Login or Sign up with social account

Login or Sign up with your email address