#トルク 　エンジンオイルドレイン 24N

メンテナンス

CT125

<img src="https://images.microcms-assets.io/assets/4af86827fd644951a38a28a3c81c4e37/2fffde72f0a34276b3e6bca26c81ffae/tomato.jpg" alt=""> #トマトの基本スペック 　嫌光性種子(発芽に光が不要) 　EC値　発芽初期1500　花芽が出たら2500 #使うアイテム 	DAISO 　ハンドルボウル ザル付 700ml 　マイクロファイバー布巾 　不織布シート 　バーミキュライト 　黒いゴミ袋 　アルミシート 　 　トマトの種 　メネデール 　ハイポネックス 　EC値の計測器 　バケツ15L 　エアレーション

1年目

水耕栽培とまと

<img src="https://images.microcms-assets.io/assets/4af86827fd644951a38a28a3c81c4e37/173d3b52b97e4411a0345d775f7a314e/kyuuri_.jpg" alt=""> ↑chatGPTによる作図 参考動画 	<a href="https://www.youtube.com/watch?v=BI4TGZKQW_8" target="_blank" rel="noopener noreferrer">みかんぼうや1987家庭菜園</a> 使用アイテム 　#ダイソー 　水切りざる2重タイプ @200 　バケツ @200 　不織布シート @100 　バーミキュライト @100 　ココヤシ @100 　きゅうりの種 @100 　微粉ハイポネックス <a href="https://www.amazon.co.jp/s?k=%E5%BE%AE%E7%B2%89%E3%83%8F%E3%82%A4%E3%83%9D%E3%83%8D%E3%83%83%E3%82%AF%E3%82%B9&amp;__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&amp;crid=1Y6LN03L028TH&amp;sprefix=%E5%BE%AE%E7%B2%89%E3%83%8F%E3%82%A4%E3%83%9D%E3%83%8D%E3%83%83%E3%82%AF%E3%82%B9%2Caps%2C261&amp;ref=nb_sb_noss_1" target="_blank" rel="noopener noreferrer">amazon</a>

水耕栽培 きゅうり

よくお勧めの店を聞かれるのでここに記します 地域別で上から順番におすすめです #ひろめ市場周辺 <a href="https://www.google.co.jp/maps/place/%E3%81%AF%E3%81%AA%E4%BD%90/@33.5605541,133.5364219,18.08z/data=!4m7!3m6!1s0x354e193719168e15:0x708e2b8f6de6f2c0!4b1!8m2!3d33.561995!4d133.538064!16s%2Fg%2F11c481bm38?entry=ttu" target="_blank" rel="noopener noreferrer">居酒屋 はな佐</a> (味系) <a href="https://www.google.co.jp/maps/place/%E3%81%B2%E3%82%8D%E3%82%81%E5%B8%82%E5%A0%B4/@33.5598699,133.5360385,18z/data=!3m1!5s0x354e193a12747571:0xaafc078250f6077b!4m14!1m7!3m6!1s0x354e193a0de80fd7:0x999d11b41bad0bdd!2z44Gy44KN44KB5biC5aC0!8m2!3d33.560116!4d133.535937!16s%2Fg%2F1trts38z!3m5!1s0x354e193a0de80fd7:0x999d11b41bad0bdd!8m2!3d33.560116!4d133.535937!16s%2Fg%2F1trts38z?entry=ttu" target="_blank" rel="noopener noreferrer">ひろめ市場</a> (雰囲気系) <a href="https://www.google.co.jp/maps/place/%E3%81%8A%E3%82%89%E3%82%93%E3%81%8F%E5%AE%B6+%E6%9C%AC%E5%BA%97/@33.5613602,133.5412749,18z/data=!3m1!4b1!4m6!3m5!1s0x354e1949c08a6807:0xf38b3fd07a88e7fc!8m2!3d33.561358!4d133.542565!16s%2Fg%2F1tg7_87_?entry=ttu" target="_blank" rel="noopener noreferrer">おらんくや本店</a> (雰囲気と味系) #はりまや橋周辺 <a href="unsafe:寿し柳 はりまや橋店">寿し柳 はりまや橋店</a> (味系) <a href="https://www.google.co.jp/maps/place/%E6%96%99%E4%BA%AD+%E6%BF%B1%E9%95%B7/@33.5571762,133.5424613,18z/data=!3m1!4b1!4m6!3m5!1s0x354e1947cf8e9dd7:0x6fdd8b1cf52343ef!8m2!3d33.5571747!4d133.5433476!16s%2Fg%2F1vmq_5k1?entry=ttu" target="_blank" rel="noopener noreferrer">料亭 濱長</a> (お座敷遊び系) #このサイトのQRコード <img src="https://images.microcms-assets.io/assets/4af86827fd644951a38a28a3c81c4e37/3ab977d2371343a598354d416d2fe83e/image.png" alt="">

毎日外食を7年間続けた高知県民がお勧めする飲食店

高知でお勧めの居酒屋

<img src="https://images.microcms-assets.io/assets/4af86827fd644951a38a28a3c81c4e37/724ed14782974ea6b043351f5ec4dfbc/bnr-kyushigai-sp.png" alt=""> 2024/03/01 11:30 #福岡 -ホテル <a href="https://www.google.co.jp/maps/place/%E3%83%89%E3%83%BC%E3%83%9F%E3%83%BC%E3%82%A4%E3%83%B3%E5%8D%9A%E5%A4%9A%E7%A5%87%E5%9C%92/@33.5937114,130.4080341,17z/data=!3m2!4b1!5s0x354191c05b70874f:0xb1959855bb1af3d0!4m10!3m9!1s0x354191c05b701373:0x94706ceaf9c29de1!5m3!1s2024-03-01!4m1!1i2!8m2!3d33.593707!4d130.412905!16s%2Fg%2F1tcy223l?entry=ttu" target="_blank" rel="noopener noreferrer">ドーミーイン博多祇園</a> -ライブ <a href="https://www.google.co.jp/maps/place/%E7%A6%8F%E5%B2%A1%E5%B8%82%E6%B0%91%E4%BC%9A%E9%A4%A8/@33.5984445,130.3963002,17z/data=!3m1!4b1!4m6!3m5!1s0x354191f2c4fde369:0x57b0499d66363418!8m2!3d33.5984401!4d130.3988751!16s%2Fg%2F1229qltp?entry=ttu" target="_blank" rel="noopener noreferrer">福岡市民会館 indigo la end</a> 18:00- -観光 <a href="https://www.google.co.jp/maps/place/%E5%A4%AA%E5%AE%B0%E5%BA%9C%E5%A4%A9%E6%BA%80%E5%AE%AE/@33.5517462,130.4299124,13z/data=!4m14!1m7!3m6!1s0x35419b9f2aebfbcd:0xb824d1aba75fae97!2z5aSq5a6w5bqc5aSp5rqA5a6u!8m2!3d33.5213697!4d130.5348239!16zL20vMDd2XzAz!3m5!1s0x35419b9f2aebfbcd:0xb824d1aba75fae97!8m2!3d33.5213697!4d130.5348239!16zL20vMDd2XzAz?entry=ttu" target="_blank" rel="noopener noreferrer">太宰府天満宮</a> -ショッピング <a href="https://www.google.co.jp/maps/place/GINZA%E3%82%B0%E3%83%AD%E3%83%BC%E3%83%90%E3%83%AB%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB+%E7%A6%8F%E5%B2%A1%E5%A4%A9%E7%A5%9E%E5%BA%97/@33.5880564,130.3934711,17z/data=!3m1!5s0x35419185dd42f1f5:0xe3a11d860232201f!4m14!1m7!3m6!1s0x35419185dc595ce7:0x894fc493f422fe50!2zR0lOWkHjgrDjg63jg7zjg5Djg6vjgrnjgr_jgqTjg6sg56aP5bKh5aSp56We5bqX!8m2!3d33.588052!4d130.396046!16s%2Fg%2F11gb3sd6ly!3m5!1s0x35419185dc595ce7:0x894fc493f422fe50!8m2!3d33.588052!4d130.396046!16s%2Fg%2F11gb3sd6ly?entry=ttu" target="_blank" rel="noopener noreferrer">GINZAグローバルスタイル 福岡天神店</a> #中洲区 3.<a href="https://www.google.co.jp/maps/place/%E5%8D%9A%E5%A4%9A%E5%B1%8B%E5%8F%B0+%E4%B8%AD%E6%B4%B2+%E5%8D%81%E7%95%AA/@33.5903041,130.4058046,17z/data=!3m1!5s0x35419195b58c2c57:0xfb714ae6ff7a489f!4m14!1m7!3m6!1s0x35419195caef43e5:0xed1dd8c29de49a19!2z5Y2a5aSa5bGL5Y-wIOS4rea0siDljYHnlao!8m2!3d33.5902997!4d130.4083795!16s%2Fg%2F11fylm6dpm!3m5!1s0x35419195caef43e5:0xed1dd8c29de49a19!8m2!3d33.5902997!4d130.4083795!16s%2Fg%2F11fylm6dpm?entry=ttu" target="_blank" rel="noopener noreferrer">博多屋台 中洲 十番</a> #博多区 2.<a href="https://www.google.co.jp/maps/place/%E5%8D%9A%E5%A4%9A%E5%85%83%E6%B0%97%E4%B8%80%E6%9D%AF!!/@33.6008354,130.4047694,17z/data=!4m14!1m7!3m6!1s0x354191e919a70f47:0x3f53894992ad4065!2z5Y2a5aSa5YWD5rCX5LiA5p2vISE!8m2!3d33.600831!4d130.4073443!16s%2Fg%2F1vg4gl0s!3m5!1s0x354191e919a70f47:0x3f53894992ad4065!8m2!3d33.600831!4d130.4073443!16s%2Fg%2F1vg4gl0s?entry=ttu" target="_blank" rel="noopener noreferrer">博多元気一杯!!</a> (☆3.5) 2.<a href="https://www.google.co.jp/maps/place/%E5%8D%9A%E5%A4%9A%E5%90%8D%E4%BB%A3+%E5%90%89%E5%A1%9A%E3%81%86%E3%81%AA%E3%81%8E%E5%B1%8B/@33.5925733,130.40638,17z/data=!3m1!4b1!4m6!3m5!1s0x35419195186bd411:0xfde6a1ce650943d4!8m2!3d33.5925689!4d130.4089549!16s%2Fg%2F11h_b85hfx?entry=ttu" target="_blank" rel="noopener noreferrer">博多名代吉塚うなぎ屋</a> 3.<a href="https://www.google.co.jp/maps/place/%E5%8D%9A%E5%A4%9A+%E7%81%AF%EF%BC%88%E3%81%A8%E3%82%82%E3%82%8A%EF%BC%89/@33.5907053,130.4074956,17z/data=!4m14!1m7!3m6!1s0x354191959c625555:0x52d93e335fb60d06!2z5Y2a5aSaIOeBr--8iOOBqOOCguOCiu-8iQ!8m2!3d33.5907009!4d130.4100705!16s%2Fg%2F11ss5nvcrk!3m5!1s0x354191959c625555:0x52d93e335fb60d06!8m2!3d33.5907009!4d130.4100705!16s%2Fg%2F11ss5nvcrk?entry=ttu" target="_blank" rel="noopener noreferrer">博多ともり</a> 3.<a href="https://www.google.co.jp/maps/place/%E3%82%82%E3%81%A4%E9%8D%8B+%E3%81%AA%E3%81%8C%E3%81%BE%E3%81%95+%E5%8D%9A%E5%A4%9A%E6%9C%AC%E5%BA%97/@33.5885104,130.4100058,17z/data=!3m1!5s0x354191bee8209fc3:0x1b8318f75830cff5!4m10!1m2!2m1!1z44KC44Gk6Y2L44CA44Gq44GM44G-44GV!3m6!1s0x354191bee9d26fcd:0xd8ab5924570ce26b!8m2!3d33.5885104!4d130.4147694!15sChjjgoLjgaTpjYvjgIDjgarjgYzjgb7jgZVaGyIZ44KC44GkIOmNiyDjgaog44GMIOOBvuOBlZIBEW9mZmFsX3BvdF9jb29raW5n4AEA!16s%2Fg%2F1xb2bblj?entry=ttu" target="_blank" rel="noopener noreferrer">もつ鍋ながまさ</a> #中央区 2.<a href="https://www.google.co.jp/maps/place/%E5%A4%A9%E9%BA%A9%E7%BE%85%E5%87%A6%E3%81%B2%E3%82%89%E3%81%8A+%E5%A4%A7%E5%90%8D%E5%BA%97/@33.5888387,130.3752343,15z/data=!4m10!1m2!2m1!1z5aSp6bqp576F5Yem44Gy44KJ44GK!3m6!1s0x3541918640345837:0xff3f78d25372271e!8m2!3d33.5888387!4d130.3942887!15sChXlpKnpuqnnvoXlh6bjgbLjgonjgYoiA4gBAVoaIhjlpKnpuqnnvoUg5YemIOOBsuOCiSDjgYqSARd0ZW1wdXJhX2Rpc2hfcmVzdGF1cmFudOABAA!16s%2Fg%2F11dftd9n5y?entry=ttu" target="_blank" rel="noopener noreferrer">天麩羅処ひらお 大名店</a> 3.<a href="https://www.google.co.jp/maps/place/%E5%8D%9A%E5%A4%9A%E3%82%82%E3%81%A4%E9%8D%8B+%E3%82%84%E3%81%BE%E4%B8%AD+%E8%B5%A4%E5%9D%82%E5%BA%97/@33.5875427,130.371792,15z/data=!3m1!5s0x3541918759cac11d:0x984c62619d5fd90c!4m10!1m2!2m1!1z44KC44Gk44Gq44G544CA5bGx5Lit!3m6!1s0x35419187582ebcdf:0xa01b7f01658ba8a1!8m2!3d33.5875425!4d130.3908465!15sChXjgoLjgaTjgarjgbnjgIDlsbHkuK1aFSIT44KC44Gk44Gq44G5IOWxseS4rZIBEW9mZmFsX3BvdF9jb29raW5n4AEA!16s%2Fg%2F1tjl3p45?entry=ttu" target="_blank" rel="noopener noreferrer">もつ鍋やま中</a> 4.<a href="https://www.google.co.jp/maps/place/on+the+deck+-+Bar+lounge/@33.585319,130.4168938,17z/data=!3m2!4b1!5s0x354191b742ae95c5:0x8c84b4b1492e7be0!4m6!3m5!1s0x354191b767c68a23:0x3a1b8aab957ebb87!8m2!3d33.5853146!4d130.4217647!16s%2Fg%2F1v82zwj_?entry=ttu" target="_blank" rel="noopener noreferrer">on the deck - Bar lounge</a> <img src="https://images.microcms-assets.io/assets/4af86827fd644951a38a28a3c81c4e37/839a6f2883b24ee1a69981389c6146e0/20220401_01.png" alt=""> 03/03 #佐賀 2.<a href="https://www.google.co.jp/maps/place/%E4%BD%90%E8%B3%80%E7%AB%B6%E9%A6%AC%E5%A0%B4/@33.229692,130.1160878,10.22z/data=!4m11!1m3!2m2!1z56u26aas5aC0!6e1!3m6!1s0x3541bb4c87955555:0xed71a442271174fd!8m2!3d33.3506433!4d130.4699647!15sCgnnq7bppqzloLRaDCIK56u26aasIOWgtJIBC3JhY2VfY291cnNlmgEjQ2haRFNVaE5NRzluUzBWSlEwRm5TVU4zYWtsMU9VaG5FQUXgAQA!16s%2Fg%2F1238mcck?entry=ttu" target="_blank" rel="noopener noreferrer">佐賀競馬場</a> <img src="https://images.microcms-assets.io/assets/4af86827fd644951a38a28a3c81c4e37/a6ff3c1a87554e4d83e157b14fad8953/PR3.png" alt=""> #熊本 -ホテル <a href="https://www.google.co.jp/maps/place/PLACE+HOTEL+Ascot/@32.8013448,130.7078745,17z/data=!3m1!4b1!4m9!3m8!1s0x3540f40c8462db85:0x5b08032855b09946!5m2!4m1!1i2!8m2!3d32.8013403!4d130.7104494!16s%2Fg%2F1tfvqr26?entry=ttu" target="_blank" rel="noopener noreferrer">PLACE HOTEL Ascot</a> #中央区 2.<a href="https://www.google.com/maps/place/%E3%80%92862-0942+%E7%86%8A%E6%9C%AC%E7%9C%8C%E7%86%8A%E6%9C%AC%E5%B8%82%E6%9D%B1%E5%8C%BA%E6%B1%9F%E6%B4%A5%EF%BC%91%E4%B8%81%E7%9B%AE%EF%BC%93%EF%BC%94%E2%88%92%EF%BC%93+%E3%82%B7%E3%82%A7%E3%83%BB%E3%82%BF%E3%83%8B%E6%B1%9F%E6%B4%A5%E5%BA%97/@32.7819176,130.7334997,430m/data=!3m1!1e3!4m15!1m8!3m7!1s0x3540f397b8d901cb:0x5b0e9810406b6757!2z44CSODYyLTA5NDIg54aK5pys55yM54aK5pys5biC5p2x5Yy65rGf5rSl77yR5LiB55uu77yT77yU4oiS77yTIOOCt-OCp-ODu-OCv-ODi-axn-a0peW6lw!3b1!8m2!3d32.7819154!4d130.7347439!16s%2Fg%2F11dxmfjy7m!3m5!1s0x3540f397b8d901cb:0x5b0e9810406b6757!8m2!3d32.7819154!4d130.7347439!16s%2Fg%2F11dxmfjy7m?entry=ttu" target="_blank" rel="noopener noreferrer">シェ・タニ江津店</a> 3.<a href="https://www.google.com/maps/place/%E9%B3%A5%E5%BA%B5/@32.800025,130.705847,17z/data=!3m1!4b1!4m6!3m5!1s0x3540f472a036e7c7:0x86f42ead3a2211be!8m2!3d32.800025!4d130.705847!16s%2Fg%2F1td6p_mn?entry=ttu" target="_blank" rel="noopener noreferrer">鳥庵</a> 3.<a href="https://www.google.co.jp/maps/place/%E3%81%82%E3%81%8B%E7%89%9B%E5%B0%82%E9%96%80%E5%BA%97+%E7%84%BC%E8%82%89+%E5%91%B3%E3%81%B2%E3%81%A8%E3%81%8D%E3%82%8C/@32.7968089,130.6958601,15.12z/data=!3m1!5s0x3540f4728345ec09:0x773a92f624ba0fed!4m14!1m7!3m6!1s0x3540f4729c84ede3:0x10ceb3265c335fbd!2z44GC44GL54mb5bCC6ZaA5bqXIOeEvOiCiSDlkbPjgbLjgajjgY3jgow!8m2!3d32.799279!4d130.7059886!16s%2Fg%2F11bv1xcx_y!3m5!1s0x3540f4729c84ede3:0x10ceb3265c335fbd!8m2!3d32.799279!4d130.7059886!16s%2Fg%2F11bv1xcx_y?entry=ttu" target="_blank" rel="noopener noreferrer">あか牛専門店 焼肉 味ひときれ</a> 3.<a href="https://www.google.co.jp/maps/place/%E3%81%AC%E3%81%9F%E5%B1%8B/@32.8002226,130.7042708,17z/data=!4m14!1m7!3m6!1s0x3540f5467a6ea2a1:0x31fc0fd7b8cc900a!2z44Gs44Gf5bGL!8m2!3d32.8002181!4d130.7068457!16s%2Fg%2F11h045s5dx!3m5!1s0x3540f5467a6ea2a1:0x31fc0fd7b8cc900a!8m2!3d32.8002181!4d130.7068457!16s%2Fg%2F11h045s5dx?entry=ttu" target="_blank" rel="noopener noreferrer">ぬた屋</a> 3.<a href="https://www.google.co.jp/maps/place/%E7%9B%B8%E6%92%B2%E5%AF%BF%E5%8F%B8%E5%A4%A7%E7%A0%B2%E9%83%A8%E5%B1%8B/@32.7998848,130.7033226,17z/data=!4m7!3m6!1s0x3540f472a02bae91:0x663d8d81fdd61992!4b1!8m2!3d32.7998848!4d130.7058975!16s%2Fg%2F1tgfb3yf?entry=ttu" target="_blank" rel="noopener noreferrer">相撲寿司大砲部屋</a> (☆5) 3.<a href="https://www.google.co.jp/maps/place/%E7%86%8A%E6%9C%AC+%E5%B1%85%E9%85%92%E5%B1%8B+%E9%85%92%E6%B9%8A(%E9%A6%AC%E5%88%BA%E3%81%97%2F%E3%82%A4%E3%82%AB%2F%E5%88%BA%E8%BA%AB)%E5%80%8B%E5%AE%A4/@32.7997142,130.7048034,18z/data=!3m1!5s0x3540f4729c9b4297:0x3e304ede10965882!4m14!1m7!3m6!1s0x3540f4729c804681:0x874410585827a955!2z54aK5pysIOWxhemFkuWxiyDphZLmuYoo6aas5Yi644GXL-OCpOOCqy_liLrouqsp5YCL5a6k!8m2!3d32.7994369!4d130.7060211!16s%2Fg%2F1td07pzr!3m5!1s0x3540f4729c804681:0x874410585827a955!8m2!3d32.7994369!4d130.7060211!16s%2Fg%2F1td07pzr?entry=ttu" target="_blank" rel="noopener noreferrer">酒湊(馬刺し/イカ/刺身)</a> 3.<a href="https://www.google.com/maps/place/%E7%86%8A%E6%9C%AC%E5%B8%82+%E7%84%BC%E3%81%8D%E3%81%A8%E3%82%8A%E9%85%92%E6%B9%8A(%E9%A3%B2%E3%81%BF%E6%94%BE%E9%A1%8C%E3%83%BB%E5%80%8B%E5%AE%A4)+%E3%83%AF%E3%82%A4%E3%83%B3/@32.8007605,130.7071073,17z/data=!3m1!4b1!4m6!3m5!1s0x3540f5b680aa8549:0xcbe8c6e7221879fb!8m2!3d32.8007605!4d130.7071073!16s%2Fg%2F11tk008z17?entry=ttu" target="_blank" rel="noopener noreferrer">焼きとり酒湊(飲み放題・個室)</a> 4.<a href="https://www.google.com/maps/place/BAR%E9%AB%99%E6%9D%BE/@32.8000429,130.705847,17z/data=!3m1!5s0x3540f40cfdf2566b:0xa891d526bae674c2!4m10!1m2!2m1!1sbar+!3m6!1s0x3540f40cfd8aa9c7:0xd6a6c9d246544ac3!8m2!3d32.8021556!4d130.7082718!15sCgNiYXJaBSIDYmFykgEDYmFy4AEA!16s%2Fg%2F1tfzdjm8?entry=ttu" target="_blank" rel="noopener noreferrer">bar高松</a> 4.<a href="https://www.google.com/maps/place/BAR+REST/@32.800564,130.7076727,18z/data=!4m10!1m2!2m1!1sbar++rest!3m6!1s0x3540f59460929ed3:0x3700ec38e0d8e0e7!8m2!3d32.8015806!4d130.7107574!15sCgliYXIgIHJlc3RaCiIIYmFyIHJlc3SSAQNiYXLgAQA!16s%2Fg%2F11mv_12lj2?entry=ttu" target="_blank" rel="noopener noreferrer">barRest</a>

なんとなく熊本が良さそうだから行ってみた旅行

九州旅行

・モードの切り替え tab ・選択 まとめて選択 Shift + Alt + LClick ・移動（固定） G + X or Y or Z ・延長 選択してE ・拡大縮小 選択してS ・カット？切り込みの追加 K ・べべる？ CMD + B ・頂点/辺/面の固定移動 G &gt; X or Y or Z ・厚みをつける オブジェクトモード &gt; オブジェクトを選択 モディファイアーを追加 &gt; ソリッド化 ※均一に厚みがつかない場合は不要な頂点があるので削除 ・不要な頂点を削除する 不要な頂点があるとモディファイアーで思わない結果になることがあるので定期的に削除しましょう ソリッドモードにする 対称を選択してM &gt; 距離でマージ ・面の向きを表にする 裏面にはテクスチャが効きません。表にしましょう。 ・面の向きの確認 ビューポートオーバーレイ &gt; 面の向き をオン 全て選択(A) &gt; 右クリック &gt; ALT + N &gt; 面の向きを外側に合わせる 参考 <a href="https://www.youtube.com/watch?v=O5vDasGXD48" target="_blank" rel="noopener noreferrer">https://www.youtube.com/watch?v=O5vDasGXD48</a>

ショートカットまとめ

Blendrの使い方

<h4 id="h7e1b8ac683">Google</h4> <a href="https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=ja" target="_blank" rel="noopener noreferrer">公式評価ツール Lighthouse</a> <h4 id="hb109fbdd18">対策</h4>GSCへのDNS登録 <a href="https://search.google.com/search-console/sitemaps?resource_id=https%3A%2F%2Fteppy.link%2F" target="_blank" rel="noopener noreferrer">サイトマップの登録</a> <a href="https://fwywd.com/tech/next-sitemap" target="_blank" rel="noopener noreferrer">サイトマップの作成(NEXT.js</a>

SEO対策のまとめ

<h4 id="h02cdd1801f">MagicaVoxcelのobjをBlenderで良い感じにテクスチャをつける 環境</h4>macOS 12.3 MagicaVoxcel 0.99.6.2 Blender 3.1.0 <h4 id="h10e6945b1f">MagicaVoxcel</h4>作成する .objとしてエクスポートする Blenderでアニメーションする場合は、.voxでエスクポート。 <a href="https://note.com/repunit_media/n/n26686ce33d7d" target="_blank" rel="noopener noreferrer">https://note.com/repunit_media/n/n26686ce33d7d</a> <h4 id="h3bd495fbf1">Blender</h4>インポート voxの場合 ・全てを選択 &gt; CMD + J =&gt; 結合 ・編集モード &gt; 全てを選択 &gt; M &gt; 距離でマージ =&gt; 不要な頂点を削除 ・対象の左右対称な位置を面選択 &gt; Shift + S &gt; カーソル選択物 &gt; ・スケールを0.1倍にする objの場合 ・照明を良い感じにあてる Texture Paintタブ 左ウィンドウで画像 &gt; 新規 を選択 ・名前をつける(末尾にbakeを推奨) <img src="https://images.microcms-assets.io/assets/4af86827fd644951a38a28a3c81c4e37/2fc9250c978b4073b313623f4348c04d/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-06-12%2014.42.45%20(1).png?w=300&amp;h=230" alt=""> 作成された画像を白く塗りつぶす Shadingタブ 追加 &gt; テクスチャ &gt; 画像テクスチャ ・先ほど新規作成した画像を選択 UV Editingタブ ・左ウィンドウで作成した画像を選択 ・右ウィンドウのオブジェクトデータプロパティでUVマップを追加してアクティブにする カメラもセレクトも 全てのオブジェクトを選択(A) ・スマートUV投影を実行 <img src="https://images.microcms-assets.io/assets/4af86827fd644951a38a28a3c81c4e37/b8b838f82dd64b22bd763f1aab5d9155/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-06-12%2014.58.42%20(1).png?w=300&amp;h=172" alt=""> UVマップの設定を下記の状態にする <img src="https://images.microcms-assets.io/assets/4af86827fd644951a38a28a3c81c4e37/87e06c206c3d47d6980b4ddca8e9bac6/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-06-12%2014.55.17%20(1).png?w=330&amp;h=294" alt=""> ・元ファイルをカメラ ・新規ファイルを選択 ・レンダープロパティを下記に変更 レンダーエンジン=Cycles ベイクタイプ=複合(combined) ベイクの実行 ・対象のオブジェクトを選択 ・対象のテクスチャを選択 ・ベイクを押す 成功したら下図のようなテクスチャが作成される <img src="https://images.microcms-assets.io/assets/4af86827fd644951a38a28a3c81c4e37/c91b2e2e5d9a47e7b806025159a5d30e/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-06-12%2016.46.53%20(1).png?w=300&amp;h=294" alt=""> shadingタグ ・作成されたテクスチャをノードで繋ぐ UV Editingタグ ・UVマップを新しいものを選択 ・元のUVマップを削除 Texture Paintタブ ・画像を全て保存 エクスポートオプション ・three.jsで使用するにはglbで出力 ・必要に応じてカメラやライトを追加 reactで使用する場合は下記サイトでjsxを作成すると簡単 <a href="https://gltf.pmnd.rs/" target="_blank" rel="noopener noreferrer">https://gltf.pmnd.rs/</a>

3Dモデリング

MagicaVoxcelからblenderで加工するまで

<h4 id="hdedf3bea9d">Planetscale Prisma</h4><img src="https://images.microcms-assets.io/assets/4af86827fd644951a38a28a3c81c4e37/080f78338358448997c6ed67f1e32f2f/prisma_flow.png" alt=""> #<a href="https://planetscale.com/" target="_blank" rel="noopener noreferrer">PlanetScale</a> #<a href="https://docs.planetscale.com/tutorials/planetscale-quick-start-guide" target="_blank" rel="noopener noreferrer">PlanetScale quickstart</a> #<a href="https://www.prisma.io/" target="_blank" rel="noopener noreferrer">Prisma</a> #<a href="https://www.prisma.io/docs/reference/api-reference/command-reference" target="_blank" rel="noopener noreferrer">リファレンス</a> 環境設定_ ブランチを作ったりはサイト上で行う <a href="https://app.planetscale.com/" target="_blank" rel="noopener noreferrer">https://app.planetscale.com/</a> 1.SHADOWブランチに接続 <pre><code>DATABASE_URL='mysql://root@127.0.0.1:3309/teppy-link'</code></pre>schema.prismaを編集<pre><code> url = env("SHADOW_DATABASE_URL")</code></pre>本番用のキーはサーバーに登録する必要がある? テーブルの変更_ 2.ブランチのローカルDBとして起動する<pre><code>pscale connect teppy-link main-shadow --port 3309</code></pre> .prisma/clientなどの更新 prisma/schema.prisma で schema 編集後<pre><code>npx prisma format &amp;&amp; npx prisma db push</code></pre>※pushのオプション <code>--force-reset </code><code>--accept-data-loss</code> 3.PlanetScaleにデプロイする デプロイリクエスト（pullrequest みたいなやつ）<pre><code>pscale deploy-request create teppy-link main-shadow</code></pre> 4.PlanetScaleのメインに反映する 変更点の確認とデプロイの実行はサイト上で行う 実行コマンドは割愛 prisma/clientへの反映？_<pre><code>npx prisma generate</code></pre> schema.prismaを本番用にもどす編集<pre><code> url = env("DATABASE_URL")</code></pre> 開発環境への反映<pre><code>npm run dev</code></pre> ここまでで開発環境に変更が反映される <h4 id="h0ceb80692e">本番にデプロイ</h4> Vercelにデプロイする時にエラーが出たらVercel側からキャッシュ無しでデプロイを実行<blockquote>残ったキャッシュを参照してprismaの型エラーになってるぽい</blockquote>Vercelにデプロイする前にnpm run buildが必要? <h4 id="ha739b3b8f6">その他</h4> 1.Prisma StudioでデータベースにアクセスしてGUIで確認<pre><code>npx prisma studio</code></pre> 2.scheme.prismaの取得<pre><code>npx prisma db pull</code></pre>※.envのアドレスから取得 ※scheme.prismaがある場合は上書きされる ※これで取得したらnextauthで必要な型と異なってログイン出来なくなる? <h4 id="h81c640daef">エラー時の対応</h4>next-auth/prisma-adapterの更新時は一度削除してからインストールする <a href="https://stackoverflow.com/questions/69899392/how-to-resolve-getuserbyaccount-is-not-a-function-in-next-auth/71089236#71089236?newreg=e4b37b54f74a4eceb95a163506fe9c0b" target="_blank" rel="noopener noreferrer">参考サイト</a><pre><code>npm uninstall next-auth @next-auth/prisma-adapter</code></pre> <pre><code>npm install @next-auth/prisma-adapter</code></pre> 本番でログインボタンが表示されなくなった場合 ※api/auth/errorに遷移する場合 <a href="https://stackoverflow.com/questions/65583091/nextauth-js-for-authentication-with-google-facing-client-fetch-error-with-next" target="_blank" rel="noopener noreferrer">参考サイト</a> <a href="https://zenn.dev/terrierscript/articles/2020-12-02-prisma-js-db-reset" target="_blank" rel="noopener noreferrer">requiredなどの整合性が取れない変更の場合</a> <h4 id="h4d849f4362">使い方</h4><a href="https://qiita.com/koffee0522/items/92be1826f1a150bfe62e" target="_blank" rel="noopener noreferrer">チートシート</a> そのうちやるやつ↓ <h2 id="h0508a933f0"><a style="color:inherit" href="https://crieit.net/posts/Prisma-PlanetScale#routines%3Atls_process_server_certificate%3Acertificate+verify+failed" target="_blank" rel="noopener noreferrer">routines:tls_process_server_certificate:certificate verify failed</a></h2>こんなエラーがでて接続できない時。 そもそもPlanetScaleにかかれている接続方法のDATABASE_URLの末尾にはSSL接続のために&nbsp;<code>?sslaccept=strict</code>&nbsp;というものがついている。コンテナ稼働でデプロイされていると証明書周りの問題でこのあたりがだめっぽいとのこと。 なので解決方法としては&nbsp;<code>sslaccept=accept_invalid_certs</code>&nbsp;にすれば良いとのこと。（本当にそれでいいかは不明） 参考） <a style="color:#5286bc" href="https://github.com/prisma/prisma/issues/884" target="_blank" rel="noopener noreferrer">https://github.com/prisma/prisma/issues/884</a>

　 

Planetscale/Prisma/NextAuth

リンク切れがあったらすみません。 <img src="https://images.microcms-assets.io/assets/4af86827fd644951a38a28a3c81c4e37/a716d738a5b44ae2b7ba01cec69e875d/kawari.png?w=600&amp;h=493" alt=""> <h4 id="h785b0e1177">公開</h4><a href="https://wwww.teppy.link/" target="_blank" rel="noopener noreferrer">会社での実績を圧縮したサイト</a> 💭さらに意味が分からないですね <a href="https://wwww.teppy.link/sub/jishuken_79/" target="_blank" rel="noopener noreferrer">定期的な社内プレゼンのサイトそのまま</a> 💭情報を詰め込みすぎ <a href="https://wwww.teppy.link/sub/41/" target="_blank" rel="noopener noreferrer">WEB技術で作業の効率化その1</a> 💭シングルコンピューター安くて凄い <a href="https://wwww.teppy.link/sub/56/" target="_blank" rel="noopener noreferrer">WEB技術で作業の効率化その2</a> 💭他社は2億と3年掛かったシステムを1週間と2人で開発 <a href="https://wwww.teppy.link/sub/08/?page=one.html" target="_blank" rel="noopener noreferrer">新しい作業教育のかたち</a> 💭国内の生産技術発表会 <a href="https://wwww.teppy.link/aboutMe/index.html" target="_blank" rel="noopener noreferrer">ポートフォリオ2021</a> 💭何してる人か分からないって言われます <h4 id="hda97d84365">近所のみ公開</h4><a href="http://192.168.11.3/41_web/myWeb/" target="_blank" rel="noopener noreferrer">国内関連企業向けの個人サイト</a> 💭講演会での説明用 💭作成したアプリ配布と開発状況公開 <h4 id="ha214098e44">まとめ</h4>このように専門的な事を理解してもらおうとすると情報が交錯して伝わらなくなります。小学生レベルですね。特に文章をまとめようとして更に逆効果になってますね。どうしたら伝わるか考えた結果、「対話式にすれば良いんじゃないか？」と思って茶番劇にしてみました。

会社員時代にプレゼンとかで作ったページ

昔つくったやつ

<h4 id="h8d027c8ed3">はじめに</h4>HTML + CSS + JavaScriptの構成で作成するのを目指します。 ・HTML： HPの骨格 ・CSS：見た目 ・JavaScript：骨格や見た目を動かす <a href="https://fastcoding.jp/blog/wp-content/uploads/2017/03/html_css_js_08.png" target="_blank" rel="noopener noreferrer">https://fastcoding.jp/blog/wp-content/uploads/2017/03/html_css_js_08.png</a> <h4 id="he1dd00b7e6">考え方</h4>なんとなく理解して自分のサイトを作成。サイトを更新しながら分からない知識を埋めていく。 <h4 id="h469a3e46eb">１.マークアップ言語</h4>HTMLとCSSを何となく理解する ・<a href="https://prog-8.com/lessons/html/study/1" target="_blank" rel="noopener noreferrer">プロゲートのHTML&amp;CSS初級編[全体のレイアウト]まで</a> <h4 id="h51a1e58450">2.プログラミング言語</h4>JavaScriptを何となく理解する ・<a href="https://prog-8.com/lessons/es6/study/1" target="_blank" rel="noopener noreferrer">プロゲートのJavaScript初級編レッスン1まで</a><h4 id="h1296ec5754"> 3.プログラミングソフトの準備</h4>Visual Studio Codeをインストール 拡張機能[Live Server]を追加 <h4 id="hdac99ed312">4.実際にページを作ってみよう</h4>自分の家からだけ見えるHPの作成 <h4 id="h1fb7f2b137">5.世界中に公開しよう</h4>GitHubのアカウントを作る ・<a href="https://github.co.jp/" target="_blank" rel="noopener noreferrer">GitHub公式</a> GitHub Pagesで公開 <h4 id="h108cab1998">6.見た目を簡単に整えよう</h4>プロジェクトにBootstrapを導入する ・<a href="https://getbootstrap.jp/" target="_blank" rel="noopener noreferrer">Bootstrap公式</a><h4 id="hbd68f7d5cd"> 7.必要に応じて学習していこう</h4>ここで学習した内容はフロントエンドの技術。他にもあるから調べてみてね。 ・<a href="https://roadmap.sh/frontend" target="_blank" rel="noopener noreferrer">フロントエンドロードマップ</a> youtube、Qiita、Zennを友達にして頑張ろう٩( ᐛ )و

初心者向け

HPの作り方

<h4 id="h985a73c4e6">画面サイズを取得する</h4>GetWindowSize.ts<pre><code>import { useEffect, useState } from "react";

export const getWindowSize = () =&gt; {
&nbsp;const [windowSize, setWindowSize] = useState({
&nbsp;&nbsp;width: 0,
&nbsp;&nbsp;height: 0,
&nbsp;});

&nbsp;useEffect(() =&gt; {
&nbsp;&nbsp;if (typeof window !== "undefined") {
&nbsp;&nbsp;&nbsp;const handleResize = () =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;setWindowSize({
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.innerWidth,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: window.innerHeight,
&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;};

&nbsp;&nbsp;&nbsp;window.addEventListener("resize", handleResize);
&nbsp;&nbsp;&nbsp;handleResize();
&nbsp;&nbsp;&nbsp;return () =&gt; window.removeEventListener("resize", handleResize);
&nbsp;&nbsp;} else {
&nbsp;&nbsp;&nbsp;return;
&nbsp;&nbsp;}
&nbsp;}, []);
&nbsp;return windowSize;
};</code></pre>Next.js はPre-redndering(SSR,SSG)がサポートされているので、 Hooksでブラウザ側にしか存在しないグローバルオブジェクトのwindowやdocumentを参照する場合には必ず<pre><code>if (typeof window !== "undefined") {</code></pre>を実装するようにしましょう。 使い方サンプル index.tsx<pre><code>import type { NextPage } from "next";
import { getWindowSize } from "../hooks/GetWindowSize";

const Home: NextPage = () =&gt; {
 const { height, width } = getWindowSize();
 return (
 &lt;div&gt;
 height:{height} width:{width}
 &lt;/div&gt;
 );
};

export default Home;</code></pre> <h4 id="h49fa527325">親コンポーネントから子コンポーネント内を実行する</h4>forwardRef&nbsp;,&nbsp;useImperativeHandle&nbsp;を使う ● 子コンポーネントで関数 showAlert() を登録 1. メソッドの追加<pre><code>import React, { useImperativeHandle, forwardRef, useRef } from "react";</code></pre> <pre><code>// 親コンポーネントの ref.current から実行できる関数を定義したオブジェクトを返す
useImperativeHandle(ref, () =&gt; ({
 childClick() {
 voucherOpenRef.current.click();
 },
}));</code></pre> 2. refを受け取れるようにする<pre><code>let voucher = (pops, ref) =&gt; {
 ...
};</code></pre> <pre><code>voucher = forwardRef(voucher);</code></pre> ● 親コンポーネントで ref を渡す<pre><code>import { useRef } from "react";</code></pre> <pre><code>const voucherRef = useRef(null); </code></pre> <pre><code>&lt;子コンポーネント
 ref={voucherRef}
/&gt;</code></pre> これで親コンポーネントから好きなタイミングで実行できるようになります。 <pre><code>&lt;Button
 onClick={() =&gt; {
 voucherRef.current.childClick();
 }}
&gt;実行ボタン&lt;/Button&gt;</code></pre>

Hooksの実装サンプル

Nextの使えるコンポーネント

<h4 id="h11791ef37a">ライブラリが動作しない</h4><a href="https://dev.classmethod.jp/articles/tried-chatjs-chart-sankey-with-nextjs/" target="_blank" rel="noopener noreferrer">Daynamic Importしてみる</a>

既知の不具合とたたかう

うまく動作しない時に見るページ

<h4 id="hec17325f84">clickイベントのthisはアロー関数では使えない</h4>e.targetで受け取る<pre><code>markup
//通常
&lt;button id="func" value="button func"&gt;function(e)&lt;/button&gt;
//アロー関数
&lt;button id="arrow" value="button arrow"&gt;(e)=&gt;&lt;/button&gt;

result &lt;input type="text" id="result"&gt;</code></pre> <pre><code>js
const result = document.getElementById("result");
//通常
const funcBtn = document.getElementById("func");
funcBtn.addEventListener("click", function (e) {
 result.value = this.value;
});
//アロー関数
const arrowBtn = document.getElementById("arrow");
arrowBtn.addEventListener("click", (e) =&gt; {
 result.value = e.target.value;
});</code></pre> 子要素のクリックでイベント発動させたくない場合は、e.currentTarget プロパティを使用。 <h4 id="h06690abbe8">取得したクラスのループ</h4><pre><code>const eles = document.getElementsByClassName(className);
for (var i = 0; i &lt; eles.length; i++) {
 eles[i].classList.remove("myChoice");
}</code></pre>

個人的に忘れやすい要素

JavaScriptのきほん

<h4 id="he2485005d0">目的</h4>歴史が長く派生したサイトの一元化。 応答速度の改善。 もんげ絵のブランド促進。<h3 id="hcf83e1357e"> </h3><h4 id="h22d664e195">現状</h4><a href="https://monge-e.com/" target="_blank" rel="noopener noreferrer">もんげ絵</a>(ウェルカムボード) <a href="http://eegao.yokochou.com/" target="_blank" rel="noopener noreferrer">似顔絵小町</a>(アイコンなど複数のアイテム) <a href="https://hudejii.com/" target="_blank" rel="noopener noreferrer">筆じぃ</a>(フリーフォント配布/自作) など他 <h4 id="h6bb66a5fcc">考察</h4>ココナラ手数料20%と高額--提案：海外からのWEB販売 <h4 id="h41e3d74fa9">作成中</h4><a href="https://wwww.teppy.link/example/monge/index.html" target="_blank" rel="noopener noreferrer">もんげ絵</a>(hub)--ドメインは既存を使用

双子の凄いイラスト

WEBサイト制作_もんげ絵様

<a href="https://fwywd.com/tech/next-chakra-ui" target="_blank" rel="noopener noreferrer">Next.js (JavaScript/TypeScript) に Chakra UI を導入する方法</a> <a href="https://chakra-ui.com/docs/styled-system/features/color-mode" target="_blank" rel="noopener noreferrer">chakra-ui</a><h5 id="hcf83e1357e"> </h5><h4 id="h66592d5016">TypeScriptの導入</h4> 途中から追加する場合 ・ルートにtsconfig.jsonを作成 ・TypeScriptとその他の必要なtypesをインストール<pre><code>npm install --save typescript @types/node @types/react @types/react-dom @types/jest</code></pre>・tsconfig.jsonが更新されている事の確認。 ・.jsを.tsxに変更して動作する事の確認。 <h4 id="h00d9b48dc4">useEffect</h4>マウント時に一回だけ実行 <code>useEffetct</code>に渡されるコールバック関数を、コンポーネントのマウント時に1回だけ実行するには、第2引数に空の配列を渡します。<pre><code>useEffect(() =&gt; { ... }, []);</code></pre><code>useEffect</code>の第2引数に配列を渡すと、マウント時とその要素に変更があった場合にコールバック関数を実行するように動作します。 例えば何らかの<code>id</code>に変更があった場合に、API通信してデータを取得する、などの使い方ができます。<pre><code>const [id, setId] = useState(0);
useEffect(() =&gt; { ... }, [id]); // idに変更があった場合に、コールバック関数を実行する。</code></pre> <h4 id="h6835f19a48">プログレスバー</h4><pre><code>npm install nextjs-progressbar</code></pre>/pages/_app.tsx<pre><code>import NextNprogress from 'nextjs-progressbar' 

&lt;NextNprogress /&gt;</code></pre><a href="https://www.npmjs.com/package/nextjs-progressbar" target="_blank" rel="noopener noreferrer">nextjs-progressbar</a> <h4 id="h20b4c98e2a">CSS</h4><pre><code>import styles from "../../styles/home.module.scss";

&lt;div className={styles.contain}&gt;&lt;/div&gt;</code></pre>複数の場合<pre><code>&lt;div className={`${styles.class1} ${styles.class2}`}&gt;&lt;/div&gt;</code></pre>html内で直接スタイルを書く<pre><code>&lt;div style={{ backgroundColor: `lightGray` }} &gt;&lt;/div&gt;</code></pre> <h4 id="h1e78d834f9">キーボードイベント</h4><pre><code>const handleKeyDown = (event: KeyboardEvent) =&gt; {
 // Escapeキーの場合処理を行う
 if (event.key === "Escape") {
 console.log("keydown Escape Key");
 }
};
useEffect(() =&gt; {
 document.addEventListener("keydown", handleKeyDown, false);
}, []);</code></pre> <h4 id="hd5dc5c5e15">oauth接続</h4>npm info next version = 12.1.6<pre><code>//pages/api/auth/[...nextauth].js
import axios from "axios";
import NextAuth from "next-auth";
import GithubProvider from "next-auth/providers/github";
import GoogleProvider from "next-auth/providers/google";
import { signIn } from "next-auth/react";

// prisma adaptor 使って、user データ、認証データを永続化する
// import { PrismaAdapter } from "@next-auth/prisma-adapter";
// import { PrismaClient } from "@prisma/client";
// const prisma = new PrismaClient();

const { GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, NEXT_PUBLIC_SECRET } =
 process.env;
// if (!GOOGLE_ID) throw new Error("You must provide GOOGLE_ID env var.");
// if (!GOOGLE_SECRET) throw new Error("You must provide GOOGLE_SECRET env var.");

const setting = {
 // adapter: PrismaAdapter(prisma),
 providers: [
 GoogleProvider({
 clientId: GOOGLE_CLIENT_ID,
 clientSecret: GOOGLE_CLIENT_SECRET,
 }),
 ],
 callbacks: {
 async signIn({ user, account, profile, email, credentials }) {
 console.log("サインイン");
 return true;
 },
 async jwt({ token, user, account, profile, isNewUser }) {
 console.log(`アカウント:${JSON.stringify(account)}`);
 return token;
 },
 },
 // callbacks: {
 // emailのドメイン制限を入れたい場合は以下のcallbacksを入れてください
 // signIn: async (user, account, profile) =&gt; {
 // if (
 // account.provider === "google" &amp;&amp;
 // profile.verified_email === true &amp;&amp;
 // profile.email.endsWith("@example.com")
 // ) {
 // return Promise.resolve(true);
 // } else {
 // return Promise.resolve(false);
 // }
 // },
 // },
 // ここに NEXTAUTH_SECRET を入れる?
 secret: NEXT_PUBLIC_SECRET,
};

export default (req, res) =&gt; NextAuth(req, res, setting);</code></pre> nextauthでprisma.adapterを使う場合はschema.prismaに下記が必要 ※prisma.adapterを使えばログイン情報が自動保存される ※nextauthの公式と違うのが気になるけど試してない <a href="https://next-auth.js.org/adapters/prisma" target="_blank" rel="noopener noreferrer">公式</a> <pre><code>model Account {
 id String @id @default(cuid())
 userId String @map("user_id")
 type String
 provider String
 providerAccountId String @map("provider_account_id")
 refresh_token String? @db.Text
 access_token String? @db.Text
 expires_at Int?
 token_type String?
 scope String?
 id_token String? @db.Text
 session_state String?

 user User @relation(fields: [userId], references: [id], onDelete: Cascade)

 @@unique([provider, providerAccountId])
 @@map("accounts")
}

model Session {
 id String @id @default(cuid())
 sessionToken String @unique @map("session_token")
 userId String @map("user_id")
 expires DateTime
 user User @relation(fields: [userId], references: [id], onDelete: Cascade)

 @@map("sessions")
}

model User {
 id String @id @default(cuid())
 name String?
 email String? @unique
 emailVerified DateTime? @map("email_verified")
 image String?
 accounts Account[]
 sessions Session[]

 @@map("users")
}</code></pre> 開発用env .gitignoreに含めてアップしないようにする<pre><code>//.env.local
コマンド叩いて値を取る
NEXT_PUBLIC_SECRET=# Linux: `openssl rand -hex 32` or go to https://generate-secret.now.sh/32

NEXTAUTH_URL=http://localhost:3000

こっちがfirebase
GOOGLE_CLIENT_ID=xxx
GOOGLE_CLIENT_SECRET=xxx</code></pre> 本番用env Vercelなどのホスティングサービスにアップする 参考サイト <a href="https://reffect.co.jp/react/next-auth" target="_blank" rel="noopener noreferrer">NextAuth.jsを使ったGoogle認証機能＋データベース(Prisma)の設定の理解</a> <a href="https://next-auth.js.org/configuration/providers/oauth#how-to" target="_blank" rel="noopener noreferrer">NextAuth.js公式フロー</a> Twitterの認証 readmeに記入 <h4 id="h13768aacc5">無限スクロール</h4><pre><code>import {useState} from 'react';
import InfiniteScroll from "react-infinite-scroller"

export default function Index() {
 const [list, setList] = useState([]); //表示するデータ
 const [hasMore, setHasMore] = useState(true); //再読み込み判定
 
 //項目を読み込むときのコールバック
 const loadMore = async (page) =&gt; {
 
 const response = await fetch(`http://localhost:3000/api/test?page=${page}`); //API通信
 const data = await response.json(); //取得データ

 //データ件数が0件の場合、処理終了
 if (data.length &lt; 1) {
 setHasMore(false);
 return;
 }
 //取得データをリストに追加
 setList([...list, ...data])
 }

 //各スクロール要素
 const items = (
 &lt;ul&gt;
 {list.map((value) =&gt; &lt;li&gt;{value}&lt;/li&gt;)}
 &lt;/ul&gt;);
 
 //全体のスタイル
 const root_style = {
 marginLeft : "50px",
 marginTop : "50px",
 }

 //ロード中に表示する項目
 const loader =&lt;div className="loader" key={0}&gt;Loading ...&lt;/div&gt;;

 return (
 &lt;div style={root_style}&gt;
 &lt;InfiniteScroll
 loadMore={loadMore} //項目を読み込む際に処理するコールバック関数
 hasMore={hasMore} //読み込みを行うかどうかの判定
 loader={loader}&gt; {/* 読み込み最中に表示する項目 */}

 {items} {/* 無限スクロールで表示する項目 */}
 &lt;/InfiniteScroll&gt;
 &lt;/div&gt;
 )
}</code></pre> GOOGLE_CLIENT_SECRET=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

Next.jsの歩き方

<a href="https://blog.microcms.io/microcms-next-jamstack-blog/" target="_blank" rel="noopener noreferrer">microCMS + Next.jsでJamstackブログを作ってみよう</a> <a href="https://vercel.com" target="_blank" rel="noopener noreferrer">https://vercel.com</a> <a href="https://zenn.dev/hirokikameda/scraps/06f31571e32660" target="_blank" rel="noopener noreferrer">microCMS + next.jsでブログ作成</a> <a href="https://qiita.com/cawauchi/items/ff6489b17800c5676908" target="_blank" rel="noopener noreferrer">next.js+microcmsでシンタックスハイライトの導入</a> 追加予定 <a href="https://www.framer.com/motion/" target="_blank" rel="noopener noreferrer">https://www.framer.com/motion/</a> <a href="https://chakra-ui.com/" target="_blank" rel="noopener noreferrer">chakra</a>

next.js+micoCMS+Vercel

JAMstack構成の作り方

<a href="https://qiita.com/yujiteshima/items/e4a2cf1574ad6e61feda" target="_blank" rel="noopener noreferrer">Nuxt.jsで好きなフォントを使う</a> <a href="https://yuji-ueda.hatenadiary.jp/entry/2020/02/26/221822" target="_blank" rel="noopener noreferrer">Nuxtタグの扱い</a>

Nuxt.js Tips

<h4 id="hcf83e1357e"> </h4><a href="https://www.yoheim.net/blog.php?q=20180418" target="_blank" rel="noopener noreferrer">cssを相対パスで読み込みたい</a>

React.js Tips

<a href="https://teppy.link/example/waka/" target="_blank" rel="noopener noreferrer"><img src="https://images.microcms-assets.io/assets/4af86827fd644951a38a28a3c81c4e37/1c3dacb29f0249509c12b0094e68acc8/waka_iphone.png?w=200&amp;h=406" alt=""></a><h4 id="hf7f8bf5652">to do</h4><a href="https://search.google.com/search-console/sitemaps?resource_id=https%3A%2F%2Fteppy.link%2F" target="_blank" rel="noopener noreferrer">サイトマップ</a> <a href="https://reffect.co.jp/react/next-auth" target="_blank" rel="noopener noreferrer">next-authにprismaを追加</a> プレゼンに対する雑記 👍 =オススメ <h4 id="h3f8af34278">目的(仮)</h4>・県外の新規様獲得 ・通販促進? <h4 id="h22d664e195">現状</h4>SEO：83点(12px以下のフォント) 物販：直売のみ？ uber：none 出前館：none 言語：日本語 サイト更新：不可 ページ数:１ <h4 id="h435ef549c8">ホームページの種類と相場</h4>1.簡易サイト-約4万円 　メリット：素人でも作成可能。独立直後向け。 　デメリット：デザインの変更が困難。ありきたりなデザインになりがち。∴ブランド感を出せない。 　※既にブランド化している場合に採用。 　<a href="https://studio.design/ja/template" target="_blank" rel="noopener noreferrer">サンプル</a> 2.ワードプレス👍 -約5-20万円 　メリット：FaceBookを編集する感覚で編集が可能(ブログ)。対応できる人が多い。 　デメリット：世界中のHPの30%で使われてる。よくあるデザイン。応答が遅い(3s-)。 　※多くのイタリアン料理店が採用。 　<a href="https://tcd-theme.com/wp-tcd" target="_blank" rel="noopener noreferrer">サンプル</a> 3.JAMstack-20-40万円 　メリット：デザインが自由。応答が速い(1s-)。 　デメリット：最新技術。対応できる人が少ない。 <h4 id="hc58172e619">素材</h4>・写真撮影 ・動画撮影--編集可能 <h4 id="he417acb963">機能追加</h4>・通信販売(県外のお客様) 　LINE or 楽天 or 外部販売サイト or ホームページ 　(左から順に手数料が高額) 　└ホームページの場合 　	クレジット支払い機能の追加 　 	<a href="https://qiita.com/hideokamoto/items/6bb5a17f4c948e55a906" target="_blank" rel="noopener noreferrer">JamstackのECサイト</a>←手数料が最安で固定費無し👍 ・アクセス解析(サイト訪問回数や何県からの訪問か等）👍 ・インスタとの連携👍 ・Googleマップの活用👍 ・対応可能な言語(インターネットの使用率) 　英語(60%) 　フランス語(2.6%) 　日本語(2.1%) 　中国簡体字(1.4%)ネイティブ 　※徳島の外国人割合は0.6%(約5000人)の為、直販は見込めません。 <h4 id="h0d28f87810">その他提案</h4>・<a href="https://monge-e.com/" target="_blank" rel="noopener noreferrer">イラストレーターもんげ絵</a> 　(納品が2ヶ月後) 　3万コースで訪問予定 <h4 id="h0544ccba1b">コンセプト</h4>・こだわりの食材と容器と空間 ・記念日 ・旅行 ・高級 ・イタリアと和の創作 ・小規模 ・イタリア語/英語に対応可能 <h4 id="h2cb83baadd">ターゲット</h4>・新規 ・旅行客(県外/海外) ・30代〜 <h4 id="hc9d0507f2b">ストーリー(仮)</h4>他イタリア料理店との違い ↓ 本日のおすすめ(ブログ) ↓ こだわり素材のイメージとテキスト ↓ 印象的な調理動画 ↓ シェフ紹介 ↓ 入店シーン(fr24) ↓ 予約 or 通販 or メール or 電話 など └土地勘がない人用の案内画像 <h4 id="hdd8b7fc5ed">プレゼン素材(本番は別途撮影)</h4>・テーマを表現した写真--食べログから引用(解像度が低い) ・カウンターなど店の雰囲気が分かる高級感がある写真/動画--none ・映える調理中の写真/動画--none ・入店の動画--none ・お店の外観(夜)--none ・食器へのこだわりが分かる写真--none <h4 id="h62ee8ef77d">提案イメージ</h4><a href="https://100spoons.com/azamino/" target="_blank" rel="noopener noreferrer">100本のスプーン</a>-重すぎ <a href="https://www.soujyu.megaminomori.com/" target="_blank" rel="noopener noreferrer">奏樹</a>