Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
ブロックエディタ利用を想定したテーマ制作と今後必要なこと / gifuwpm17
Koji Kuno
December 28, 2019
Programming
3
430
ブロックエディタ利用を想定したテーマ制作と今後必要なこと / gifuwpm17
Koji Kuno
December 28, 2019
Tweet
Share
More Decks by Koji Kuno
See All by Koji Kuno
oleindesign
1
200
oleindesign
0
35
oleindesign
3
25
oleindesign
0
200
oleindesign
0
290
oleindesign
0
53
oleindesign
0
69
oleindesign
1
73
oleindesign
1
170
Other Decks in Programming
See All in Programming
takara9
0
150
tourismgeek
1
130
masui_masanori
1
250
watilde
0
410
bbatsov
0
110
numeroanddev
1
220
yasaichi
30
7.6k
saten
1
170
hyodol2513
0
550
maito1201
1
820
bkuhlmann
4
270
dbrumann
0
110
Featured
See All Featured
jakevdp
774
200k
danielanewman
200
20k
chriscoyier
499
130k
hursman
107
9.2k
notwaldorf
15
1.8k
chrislema
173
14k
jacobian
255
20k
philhawksworth
192
8.8k
myddelton
109
11k
bkeepers
408
58k
destraynor
223
47k
roundedbygravity
242
21k
Transcript
ϒϩοΫΤσΟλར༻Λఆͨ͠ ςʔϚ੍࡞ͱࠓޙඞཁͳ͜ͱ ݄ʢʣ ΈΜͳͷ͗;ϝσΟΞίεϞε͔Μ͕͑ΔελδΦ 0MFJO%FTJHOٱߊ࢘
ࣗݾհ w ϑϦʔϥϯε8FC੍࡞ऀˏذෞࢢ w 8PSE1SFTT$POUSJCVUPS DPSF NFFUVQ USBOTMBUJPO QMVHJOEFW
UIFNFEFW w $PEFS%PKPذෞνϟϯϐΦϯ w άϥϑΟοΫσβΠϯग़8FCؔ࿈ձ ࣾۈྺͳ͠ w 8FCಠֶ8PSE1SFTTྺҎ্ w PMFJOEFTJHODPN!0MFJO@KQ
Έͳ͞ΜͲΜͳਓʁʢෳճՄʣ w ҰൠϢʔβʔʢۚમतडͳ͠ʣ w ఏҊଆʢσΟϨΫλʔӦۀʣ w ੍࡞ଆʢσβΠφʔΤϯδχΞʣ
લఏ w 8PSE$BNQ0TBLBͰةػײΛಘ͖ͯͨ w ނʹগʑݴ༿͕ڧ͍෦͕͋Γ·͢ w େࣄͳ͜ͱԿճݴٴ͍ͯ͠·͢ w ֶͼଓ͚·͠ΐ͏ʢࣗռʣ Ϗδωεతͳଆ໘Ͱ8PSE1SFTTͱؔΘ͍ͬͯΔਓʹಛʹ͍͑ͨ
ͲͪΒ͕৴༻Ͱ͖Δʁ w ͦͷຊΛಡΜͩ͜ͱ͕ͳ͍ॻళళһ͞ Μ w ͦͷຊΛಡΜͩ͜ͱ͕͋Δॻళళһ͞ Μ
ࢲͨͪͲ͏ͩΖ͏͔ʁ w ͍ͬͯΔͭΓͰࢭ·ͬͯͳ͍͔ w ͍ͬͯΔใ͕ݹ͘ͳ͍ͬͯͳ͍͔ w Α͔͘Βͳ͍ͷΛקΊ͍ͯͳ͍͔ ͍ͬͯ͏͔࣮ࡍʹͬͯΔʁ
ࣄͰ8PSE1SFTTʹܞΘΔͷͰ͋Ε ࠷৽ใΛ͍ͬͯ͘͜ͱࣄ Ͱ͋Δ ʢ(JGV8PSE1SFTT.FFUVQͰใަ͍͖ͯ͠·͠ΐ͏ʣ
ΞδΣϯμ w ϒϩοΫΤσΟλΛ׆༻͢ΔͨΊͷGVODUJPOTQIQ5JQT w ϒϩοΫΤσΟλ׆༻ͷఏҊʹ͍ͭͯ w ࠓޙͷ8PSE1SFTT։ൃͰҙ͖ࣝ͢͜ͱ
ϒϩοΫΤσΟλΛ׆༻͢ΔͨΊͷ GVODUJPOTQIQ5JQT
0MFJOTUSBQ IUUQT HJUIVCDPN0MFJOKQPMFJOTUSBQ ৗʹΞοϓσʔτ͍ͯ͠·͢
ಛ w ࠷ݶͷnpm scriptͰศརͳ։ൃڥ͕ར༻Ͱ͖Δ w 4BTTɺ+BWB4DSJQUɺ*NBHFͷίϯύΠϧ w ඞཁ࠷ݶͷςϯϓϨʔτϑΝΠϧΛ༻ҙ w ϞδϡʔϧϑΝΠϧΛฤू͢Δ͜ͱͰฤूը໘༻ελΠϧࣗಈతʹ࡞
ࠓޙɺ͕͍͍ࣗ͢Α͏ʹվྑ͍͖ͯ͠·͢
/// // Define block colors for in editor. /// @function
block-colors() { @return ( white : #ffffff, black : #000000, charcoal : #282c34, regent : #8c97a7, husk : #b9a364, red-stage : #b15330 ); }
/// // Return a single block color value by name
/// @function block-color( $name ) { @return map-get( block-colors(), $name ); }
//// /// Create CSS classes for color palette. /// ///
@author Koji Kuno <info@olein-design.com> //// @each $color-name, $color-value in block-colors() { .has-#{ $color-name }-color { color : #{ $color-value }; } .has-#{ $color-name }-background-color { background-color: #{ $color-value }; } }
.has-white-color { color: #ffffff; } .has-white-background-color { background-color: #ffffff; }
.has-black-color { color: #000000; } . . . .
ฤूը໘ͷελΠϧొ ग़དྷΔ͚࣮ͩࡍͷελΠϧͰฤूͰ͖ΔΑ͏ʹ
add_action( 'after_setup_theme', function() { add_theme_support( 'editor-styles' ); add_editor_style( 'assets/css/editor-style.min.css' );
}
͜ͷΑ͏ͳελΠϧΛࢦఆͯ͠ΈΔ body { background-color: yellow; }
ϒϩοΫΤσΟλͷ߹ .editor-styles-wrapper { background-color: yellow; } ΫϥγοΫΤσΟλͷ߹ body { background-color:
yellow; } ΫϥγοΫΤσΟλͷ߹ɺ<body id="tinymce" class="mce-content-body"> ͷதʹฤूը໘͕ͭ͘ΒΕ͍ͯΔͷͰ
෯ͷ༗ޮԽ ඞཁ͔Ͳ͏͔ཁ֬ೝ
<?php add_action( 'after_setup_theme', function() { add_theme_support( 'align-wide' ); } ?>
.alignfullͱ.alignwideͱ͍͏$44ΫϥεʹରԠ͢Δඞཁ͕͋Δ
.alignfull { width:100vw; margin-left: calc( (100vw - $content_width ) *
-0.5); ɹmax-width:100vw; } .alignwide { width:calc( $content_width + $added_width ); margin-left: $added_width / 2; max-width:100vw; }
ΧϥʔύϨοτ ϒϥϯυΧϥʔΛొ͓ͯ͘͠ͱتΕΔ എܠ৭ͱςΩετΧϥʔʹར༻Ͱ͖Δ
add_action( 'after_setup_theme', function() { add_theme_support( 'editor-color-palette', [ [ 'name' =>
__( 'Gray' ), 'slug' => 'gray', 'color' => '#555555' // use this for inline style. ], [ ... ] ] ); }
ςΩετΧϥʔͷ߹ .has-text-color .has-{slug}-color ͱ͍͏Ϋϥε͕༩͞ΕΔͷͰ .has-gray-color { color: #555555; } ͱϑϩϯτଆʹελΠϧΛ༻ҙ͢ΔʢΤσΟλଆʹඞཁͳ͠ʣ
എܠ৭ͷ߹ .has-background .has-{slug}-background-color ͱ͍͏Ϋϥε͕༩͞ΕΔͷͰ .has-gray-background-color { background-color: #555555; } ͱϑϩϯτଆʹελΠϧΛ༻ҙ͢ΔʢΤσΟλଆʹඞཁͳ͠ʣ
add_theme_support('editor-color-palette')ࣗମΛهड़͠ͳ͍ ߹ɺσϑΥϧτͰҎԼͷΧϥʔύϨοτ͕༻ҙ͞ΕΔ ελΠϧࣗମ8PSE1SFTT#MPDL-JCSBSZ͔Βৗ࣌ఏڙ
ϑΥϯταΠζηοτ
ϑΥϯταΠζΛஈ֊తʢδϟϯϓ͝ͱʣ ʹ͋Β͔͡Ίઃఆ͓ͯ͘͜͠ͱͰɺσβΠϯ όϥϯεΛอͭҰΛ୲͑Δ
add_action( 'after_setup_theme', function() { add_theme_support( 'editor-font-sizes', [ [ 'name' =>
__( 'Small' ), 'shortName' => __( 'S' ), 'size' => 12, // use this for inline style. 'slug' => 'small' ], [ ... ] ] ); }
.has-{slug}-font-sizeͱ͍͏Ϋϥε͕͘ͷͰɺ͜ͷ߹ .has-small-font-size { font-size: 12px; } ͱ͍͏۩߹ʹϑϩϯτଆͷελΠϧʹهड़
8PSE1SFTT#MPDL-JCSBSZ͔Βࣗಈతʹఏڙ͞ΕΔҎԼͷΑ͏ͳελΠϧ͕͋Δ .has-small-font-size { font-size: 13px } .has-normal-font-size,.has-regular-font-size { font-size: 16px
} . . ׆༻͢Δ͜ͱՄೳ ! XQJODMVEFTDTTEJTUCMPDLMJCSBSZTUZMFNJODTTߦลΓΛࢀর
ϒϩοΫΤσΟλ׆༻ͷఏҊʹ͍ͭ ͯ
ओͳ׆༻ํ๏ͷఏҊϑΣʔζ طଘϒϩοΫʹελΠϧΛ༩֦ͯ͠ு ϓνΧελϜϒϩοΫ ˠ্ͰରԠͰ͖ͳ͍͚ͲෳࡶߏͰͳ͍ͷ ΨνΧελϜϒϩοΫ ˠಈతʹϨϯμϦϯά͢Δ%ZOBNJD#MPDL
ͪͳΈʹ ΧελϜϒϩοΫΛఏڙͯ͘͠ΕΔ ϓϥάΠϯͳͲΛ׆༻͢Δͱ͍͏બࢶ͋Γ·͢ ͨͩ͠ɺґଘ͢Δ͜ͱʹͳΔͷͰ༻๏ʹ͝ҙΛ
8PSE1SFTTΛར༻͢Δར ʮϢʔβʔ͕ฤूͰ͖Δʯ
ͦͷମݧʢ69ʣΛཧ͢Δ͜ͱ ఏҊɾ੍࡞ଆͷ
طଘϒϩοΫʹ ελΠϧΛ༩͢Δߟ͑ํ
ίΞϒϩοΫͷछྨ DPSFQBSBHSBQI DPSFIFBEJOH DPSFJNBHF DPSFRVPUF DPSFHBMMFSZ DPSFMJTU DPSFBVEJP DPSFDPWFS DPSFpMF
DPSFWJEFP DPSFDPEF DPSFGSFFGPSN DPSFIUNM DPSFQSFGPSNBUUFE DPSFQVMMRVPUF DPSFUBCMF DPSFWFSTF DPSFCVUUPO DPSFDPMVNOT DPSFNFEJBUFYU DPSFNPSF DPSFOFYUQBHF DPSFTFQBSBUPS DPSFTQBDFS DPSFTIPSUDPEF DPSFBSDIJWFT DPSFDBUFHPSJFT DPSFMBUFTUDPNNFOUT DPSFMBUFTUQPTUT DPSFFNCFE DPSFFNCFEUXJUUFS DPSFFNCFEZPVUVCF DPSFFNCFEGBDFCPPL DPSFFNCFEJOTUBHSBN DPSFFNCFEXPSEQSFTT DPSFFNCFETPVOEDMPVE DPSFFNCFETQPUJGZ DPSFFNCFEqJDLS DPSFFNCFEWJNFP DPSFFNCFEBOJNPUP DPSFFNCFEDMPVEVQ DPSFFNCFEDPMMFHFIVNPS DPSFFNCFEEBJMZNPUJPO DPSFFNCFEGVOOZPSEJF DPSFFNCFEIVMV DPSFFNCFEJNHVS DPSFFNCFEJTTVV DPSFFNCFELJDLTUBSUFS DPSFFNCFENFFUVQDPN DPSFFNCFENJYDMPVE DPSFFNCFEQIPUPCVDLFU DPSFFNCFEQPMMEBEEZ DPSFFNCFESFEEJU DPSFFNCFESFWFSCOBUJPO DPSFFNCFETDSFFODBTU DPSFFNCFETDSJCE DPSFFNCFETMJEFTIBSF DPSFFNCFETNVHNVH DPSFFNCFETQFBLFSEFDL DPSFFNCFEUFE DPSFFNCFEUVNCMS DPSFFNCFEWJEFPQSFTT DPSFFNCFEXPSEQSFTTUW
ίΞϒϩοΫͷछྨ DPSFQBSBHSBQI DPSFIFBEJOH DPSFJNBHF DPSFRVPUF DPSFHBMMFSZ DPSFMJTU DPSFBVEJP DPSFDPWFS DPSFpMF
DPSFWJEFP DPSFDPEF DPSFGSFFGPSN DPSFIUNM DPSFQSFGPSNBUUFE DPSFQVMMRVPUF DPSFUBCMF DPSFWFSTF DPSFCVUUPO DPSFDPMVNOT DPSFNFEJBUFYU DPSFNPSF DPSFOFYUQBHF DPSFTFQBSBUPS DPSFTQBDFS DPSFTIPSUDPEF DPSFBSDIJWFT DPSFDBUFHPSJFT DPSFMBUFTUDPNNFOUT DPSFMBUFTUQPTUT DPSFFNCFE DPSFFNCFEUXJUUFS DPSFFNCFEZPVUVCF DPSFFNCFEGBDFCPPL DPSFFNCFEJOTUBHSBN DPSFFNCFEXPSEQSFTT DPSFFNCFETPVOEDMPVE DPSFFNCFETQPUJGZ DPSFFNCFEqJDLS DPSFFNCFEWJNFP DPSFFNCFEBOJNPUP DPSFFNCFEDMPVEVQ DPSFFNCFEDPMMFHFIVNPS DPSFFNCFEEBJMZNPUJPO DPSFFNCFEGVOOZPSEJF DPSFFNCFEIVMV DPSFFNCFEJNHVS DPSFFNCFEJTTVV DPSFFNCFELJDLTUBSUFS DPSFFNCFENFFUVQDPN DPSFFNCFENJYDMPVE DPSFFNCFEQIPUPCVDLFU DPSFFNCFEQPMMEBEEZ DPSFFNCFESFEEJU DPSFFNCFESFWFSCOBUJPO DPSFFNCFETDSFFODBTU DPSFFNCFETDSJCE DPSFFNCFETMJEFTIBSF DPSFFNCFETNVHNVH DPSFFNCFETQFBLFSEFDL DPSFFNCFEUFE DPSFFNCFEUVNCMS DPSFFNCFEWJEFPQSFTT DPSFFNCFEXPSEQSFTTUW
͜ΕΒͷίϯϙʔωϯτͰ ϖʔδ࡞Εͳ͍ʁ ஈམɾݟग़͠ɾը૾ɾҾ༻ɾΪϟϥϦʔɾϦετɾΧόʔը૾ɾ ϘλϯɾΧϥϜɾը૾ͱจষ
طଘϒϩοΫΛ্खʹར༻͢Δ͜ͱ ͰɺेόϦΤʔγϣϯ๛ͳϖʔ δΛ࡞Δ͜ͱ͕Ͱ͖Δͣ
͔͠͠ ϒϩοΫͷ׆༻ʹίϯϙʔωϯτ Λ׆༻ͨ͠σβΠϯࢥߟ͕ඞཁ
w اըɾఏҊ ˠ8PSE1SFTTͰԿ͕Ͱ͖Δͷ͔Βͳ͍ͱاըΛఏҊͰ͖ͳ͍ w σβΠϯ੍࡞ ˠ8PSE1SFTTͰԿ͕Ͱ͖Δͷ͔Βͳ͍ͱίϯϙʔωϯτԽͰ͖ͳ͍ w ߏங ˠϒϩοΫΤσΟςΠϒϧͳ8PSE1SFTTڥߏஙʹؔ͢Δݟ͕ͳ͍ͱߏஙͰ͖ͳ͍ 8PSE1SFTTΛ͍ͬͯͳ͍ͱઃܭͰ͖ͳ͚Εࢦࣔग़ͤͳ͍͠
ྑ͠ѱ͠ͷஅͰ͖ͳ͍͠࡞Εͳ͍
-FUTHFUCBDLPOUSBDL &YUFOEJOH%FGBVMU#MPDLT طଘϒϩοΫʹελΠϧΛ༩͢Δํ๏
ಡ͏ #MPDL&EJUPS)BOECPPL
0MFJO#MPDLT IUUQT HJUIVCDPN0MFJOKQPMFJOCMPDLT ϒϩοΫΛαϙʔτ͢ΔͨΊͷϓϥάΠϯͱͯ͠࡞͍ͬͯ·͢ ʢৗ࣌Ξοϓσʔτʣ
!XPSEQSFTTTDSJQUT ΊͬͪΌָͪΜ !XPSEQSFTTTDSJQUT
࡞ΓํͷྲྀΕ ϓϥάΠϯΛ࡞ΔʢςʔϚʹೖΕΔ͔அ͠Α͏ʣ ϝΠϯ1)1͔Βenqueue_block_editor_assetsIPPLͰ+4ϑΝΠ ϧΛಡΈࠐΉ +4͔ΒregisterBlockStyleͰొ $44Λ࡞ͯ͠ϝΠϯ1)1͔Βenqueue_block_assetsIPPLͰ
$44ϑΝΠϧΛಡΈࠐΉ
ϓϥάΠϯͷߏྫ - index.php /src - index.js - style.scss /build -
index.asset.php - index.js - style.css
index.php function ob_extending_blocks_enqueue() { wp_enqueue_script( 'ob-extending-blocks-script', plugins_url( 'build/index.js', __FILE__ ),
array( 'wp-blocks' ) ); } add_action( 'enqueue_block_editor_assets', 'ob_extending_blocks_enqueue' );
src/index.js wp.blocks.registerBlockStyle( 'core/button', { name: 'original-button', label: 'Original Button' }
);
TSDTUZMFTDTT .is-style-original-button { margin: 30px 0; .wp-block-button__link { background-color: darkblue;
} }
JOEFYQIQ function ob_extending_blocks_styles() { wp_enqueue_style( 'ob-extending-blocks-style', plugins_url( 'build/style.css', __FILE__ )
); } add_action( 'enqueue_block_assets', 'ob_extending_blocks_styles' );
ࠓޙͷ8PSE1SFTT։ൃͰҙ͖ࣝ͢͜ͱ w 1)1όʔδϣϯ w ૯߹తͳεΩϧʢඞཁͱߟ͑ΔͳΒʣ w 8PSE1SFTT3PBE.BQ IUUQTKBXPSEQSFTTPSHBCPVUSPBENBQ
1)1όʔδϣϯ όʔδϣϯ ϦϦʔε ΞΫςΟϒ ηΩϡϦςΟ
IUUQTXXXQIQOFUTVQQPSUFEWFSTJPOTQIQ
εΩϧͷόʔδϣϯΞοϓ ແ໊ؔɾྻɾ໊લۭؒɾ$PNQPTFSFUD
૯߹తͳεΩϧʢඞཁͱߟ͑ΔͳΒʣ w .PEFSO+BWB4DSJQU w $44ઃܭ w BZʢ8$"(""ʣͷཧղͱ࣮ྗ
8PSE1SFTT3PBE.BQ ࠓޙɺ8PSE1SFTTͲͷΑ͏ʹਐԽ͍ͯ͘͠ͷ͔ ྫ w φϏήʔγϣϯϝχϡʔΛϒϩοΫԽ w طଘΟδΣοτΛશͯϒϩοΫҠ২ ͜ͷಓے͔Βඞཁͳٕज़ใΛબ͢Δ
ηογϣϯΛ௨ͯ͠Βͳ͔ͬͨ͜ͱ͕̍ͭͰ͋ͬͨํͳΒ Θ͔Δͣ 8PSE1SFTTJT/05FBTZ
ઃܭ੍࡞ қ্͕ͬͯ·͢ʂ
ӡ༻ߟ༷͑ͨࡦఆ w ͲΜͳೖྗํ๏͕ඞཁ͔ w ඞཁͳίϯϙʔωϯτԿ͔
ϒϩοΫΤσΟλʔΛཧղ͢Δ w ͲΜͳϒϩοΫ͕͋Δ͔ w Կ͕Ͱ͖Δͷ͔ʢԿ͕Ͱ͖ͳ͍ͷ͔ʣ w ͲΜͳ)5.-͕ॻ͖ग़͞ΕΔͷ͔ w ίϯϙʔωϯτͷཧղͱઃܭ
ʢվΊͯʣ εΩϧΞοϓ͢ΔͨΊʹ
ެࣜυΩϡϝϯτͱ ༷ʑͳιʔείʔυΛ ಡΉ 8PSE1SFTT(JUIVC 8PSE1SFTT%FWFMPQFS3FTPVSDFT
ͦͯ͠ Γ͚ͨΕ͏
Ͳ͜ͷ୭͕ॻ͍͔͔ͨΒͳ͍Α͏ ͳϒϩάهࣄ͔ΒαΫοͱιʔε ίʔυίϐϖͯ͘͠Δਓʹݶͬͯ ެࣜυΩϡϝϯτΛಡ·ͳ͍ਓଟ͢ ͗ʢࣗռ
FYDVTF w ӳޠ͔ͩΒಡΈʹ͍͘ ˠ(PPHMF༁ͰͳΜͱ͔ͳΔ ˠ͔ͬͯͲ͔͜ͷ୭͔Θ͔Βͳ͍৴༻Ͱ͖ͳ͍ਓͷใΛӏವΈʹͪ͠ΌͩΊ FYDVTF w Ҋ݅ਐߦதͰಡΜͰཧղ͍ͯ͠Δ͕࣌ؒऔΕͳ͍ ˠͦΜͳΜ͔ͩΒ͍ͭ·ͰͨͬͯͰLT;͊ʀKCDʀTEKD͍ͭΔͷʁ
·ͱΊ
8PSE1SFTTʹܞΘΔਓؒͱͯ͠ ͋ͳͨɺͲ͏͍ͨ͠ʁ Ͳ͏ͳΓ͍ͨʁͲ͏͋Γ͍ͨʁ
ਖ਼ɺదʹͬͯͯ ʮಈ͚ྑ͍ʯϨϕϧͰࡁ·ͤΔͳ ΒͳΜͱ͔ͳΔ
ͰɺͦΕͬͯ ϓϩͱ͔ͯͬ͜͠ѱ͘Ͷʁ ϓϩʹগͳ͔ΒͣͦΕͰ͓ۚΛ͏ਓ
Ͱ͖Δ͜ͱΛҰͭͣͭ͜ͳ͍ͯ͘͠ ͔͠ͳ͍
ͩΕͰͰ͖Δ͜ͱ w 8PSE1SFTTΛʢ৮ΔͰͳ͘ʣ͏ w ͲΜͳϒϩοΫ͕͋Δͷ͔ɺԿ͕Ͱ͖Δͷ͔ΛΔ w ίʔυΛॻ͍ͯΈΔʢ࡞ͬͯΈΔʣ
ܹݩ ࡾప 5PSV.JLJ (VUFOCFSHҎ߱ͷςʔϚ࡞ʹ͚ͯɺࠓֶͿ ͖͜ͱ ୩ӡ༻࠷େݶߟྀʂίʔϙϨʔταΠτͰϒϩοΫΤ σΟλϑϧ׆༻ͷࣄྫհ
#MPDL&EJUPSΧελϚΠζೖ81NFFUVQ0TBLB εϥΠυɿӡ༻࠷େݶߟྀʂίʔϙϨʔταΠτͰϒϩοΫΤσΟλϑϧ׆༻ͷࣄྫհ εϥΠυɿ(VUFOCFSHҎ߱ͷςʔϚ࡞ʹ͚ͯɺࠓֶͿ͖͜ͱ
8PSE1SFTT.FFUVQʹࢀՃͯ͠ɺ ͨ͘͞Μ8PSE1SFTTͱؔΘΖ͏ʂ
͓ΘΓ