[{"data":1,"prerenderedAt":761},["ShallowReactive",2],{"tag-Nuxt-1":3},{"items":4,"tagArticleCount":681,"categoryesArticleCount":746,"parPage":760,"PageCount":703,"currentPage":703,"selectedCategory":-1,"selectedTag":16},[5,425,561],{"_path":6,"_dir":7,"_draft":8,"_partial":8,"_locale":9,"title":10,"description":11,"category":12,"tags":14,"sumb":19,"sumb_alt":20,"createdAt":21,"updatedAt":21,"draft":8,"excerpt":22,"body":57,"_type":419,"_id":420,"_source":421,"_file":422,"_stem":423,"_extension":424},"\u002Fpost\u002F2026-07-20","post",false,"","ブログの編集をするのにVSCodeを使うのをやめた話","ブログ構築当初は記事書くのVSCodeでもいいか～と思っていたが、だんだんしんどくなってきて更新頻度が下がってきてしまっていた。",[13],"開発・技術",[15,16,17,18],"CMS","Nuxt","Python","VSCode","2026-07-20\u002F02.webp","writing blog","2026-07-20 22:01",{"type":23,"children":24},"root",[25,32,46],{"type":26,"tag":27,"props":28,"children":29},"element","p",{},[30],{"type":31,"value":11},"text",{"type":26,"tag":27,"props":33,"children":34},{},[35,37,44],{"type":31,"value":36},"なんでかな？と思って思い返してみると、やはり",{"type":26,"tag":38,"props":39,"children":41},"code",{"className":40},[],[42],{"type":31,"value":43},"VSCode開くのめんどい",{"type":31,"value":45},"ってことかな。と。",{"type":26,"tag":27,"props":47,"children":48},{},[49,51,55],{"type":31,"value":50},"ということで、思い切ってVSCodeで記事を書くのをやめてみた。",{"type":26,"tag":52,"props":53,"children":54},"br",{},[],{"type":31,"value":56},"\nというお話。",{"type":23,"children":58,"toc":401},[59,63,73,81,87,92,102,112,118,123,165,183,188,198,213,223,228,235,245,250,255,260,270,276,281,296,301,305,310,336,351,356,361,366,371,381,386,391],{"type":26,"tag":27,"props":60,"children":61},{},[62],{"type":31,"value":11},{"type":26,"tag":27,"props":64,"children":65},{},[66,67,72],{"type":31,"value":36},{"type":26,"tag":38,"props":68,"children":70},{"className":69},[],[71],{"type":31,"value":43},{"type":31,"value":45},{"type":26,"tag":27,"props":74,"children":75},{},[76,77,80],{"type":31,"value":50},{"type":26,"tag":52,"props":78,"children":79},{},[],{"type":31,"value":56},{"type":26,"tag":82,"props":83,"children":85},"h2",{"id":84},"変更前の構成",[86],{"type":31,"value":84},{"type":26,"tag":27,"props":88,"children":89},{},[90],{"type":31,"value":91},"構成っていうほどでもないんですが。",{"type":26,"tag":27,"props":93,"children":94},{},[95,97,100],{"type":31,"value":96},"NuxtContentsで構築したブログのPostフォルダをVSCodeで開き、Markdownを手打ちで編集していた。",{"type":26,"tag":52,"props":98,"children":99},{},[],{"type":31,"value":101},"\nPushもVSCode上からできるし結構便利じゃん？みたいな。",{"type":26,"tag":27,"props":103,"children":104},{},[105,107,110],{"type":31,"value":106},"公開はAmazon CodeCommitにPushされたのをトリガーにCodeBuildでビルドしてS3にアップロードしている。",{"type":26,"tag":52,"props":108,"children":109},{},[],{"type":31,"value":111},"\nのでランニングコストはほぼかかってない構成になってる。",{"type":26,"tag":113,"props":114,"children":116},"h3",{"id":115},"問題点",[117],{"type":31,"value":115},{"type":26,"tag":27,"props":119,"children":120},{},[121],{"type":31,"value":122},"問題点は以下の２点",{"type":26,"tag":124,"props":125,"children":126},"ol",{},[127,147],{"type":26,"tag":128,"props":129,"children":130},"li",{},[131,133],{"type":31,"value":132},"Frontmatter書くのがめんどい",{"type":26,"tag":134,"props":135,"children":136},"ul",{},[137],{"type":26,"tag":128,"props":138,"children":139},{},[140,142,145],{"type":31,"value":141},"記事の最初の部分に書く必要があるメタデータ的なアレ",{"type":26,"tag":52,"props":143,"children":144},{},[],{"type":31,"value":146},"\n記法が決まってるので手打ちするのは結構めんどい",{"type":26,"tag":128,"props":148,"children":149},{},[150,152],{"type":31,"value":151},"画像の管理が超めんどい",{"type":26,"tag":134,"props":153,"children":154},{},[155],{"type":26,"tag":128,"props":156,"children":157},{},[158,160,163],{"type":31,"value":159},"VSCodeで画像を管理するのであたりまえ・・・",{"type":26,"tag":52,"props":161,"children":162},{},[],{"type":31,"value":164},"\nフォルダに画像を入れた後は相対パスで記事中に参照の定義を書かないといけない。",{"type":26,"tag":27,"props":166,"children":167},{},[168,170,176,178,181],{"type":31,"value":169},"２点しかないじゃんって感じではあるが、",{"type":26,"tag":38,"props":171,"children":173},{"className":172},[],[174],{"type":31,"value":175},"記事を書く",{"type":31,"value":177},"という体験においては文章をどんどん打っていける快感みたいなのが重要で、挙げた２点はどちらもその文章を打っていくというところを致命的に中断させてしまう問題点である。",{"type":26,"tag":52,"props":179,"children":180},{},[],{"type":31,"value":182},"\n中断っていうか、１つ目については記事のつくりはじめのところで、いきなり腰を重くさせてしまう要因でもあった。",{"type":26,"tag":82,"props":184,"children":186},{"id":185},"変更後の構成",[187],{"type":31,"value":185},{"type":26,"tag":27,"props":189,"children":190},{},[191,193,196],{"type":31,"value":192},"リポジトリにPushして自動的にビルドするとかのところは変えていなくて、記事を書くというところだけ楽にできるようにした。",{"type":26,"tag":52,"props":194,"children":195},{},[],{"type":31,"value":197},"\n具体的には、PythonとFlaskを使ってちょっとしたWebアプリを作ってそこから編集できるようにした。",{"type":26,"tag":27,"props":199,"children":200},{},[201,203,206,208,211],{"type":31,"value":202},"DBとかあると管理が面倒なので、一覧系の機能とかタグ検索とかはPythonから直接フォルダをスキャンして実現している。",{"type":26,"tag":52,"props":204,"children":205},{},[],{"type":31,"value":207},"\n現状は記事の数が少ないのでこれでいいかなと。",{"type":26,"tag":52,"props":209,"children":210},{},[],{"type":31,"value":212},"\n今後記事が増えてきて動作が遅くなってきたら対策考えましょう。。。",{"type":26,"tag":27,"props":214,"children":215},{},[216,218,221],{"type":31,"value":217},"以下、各画面の紹介。",{"type":26,"tag":52,"props":219,"children":220},{},[],{"type":31,"value":222},"\nデザインはGeminiがやったんで、あんま気にしないでください。。。",{"type":26,"tag":113,"props":224,"children":226},{"id":225},"記事一覧",[227],{"type":31,"value":225},{"type":26,"tag":229,"props":230,"children":234},"article-image",{"preset":231,"src":232,"alt":233},"article_image","2026-07-22\u002Fimage.webp","記事の一覧画面",[],{"type":26,"tag":27,"props":236,"children":237},{},[238,240,243],{"type":31,"value":239},"メインの画面。記事の一覧を表示する。",{"type":26,"tag":52,"props":241,"children":242},{},[],{"type":31,"value":244},"\n公開ステータスとファイルの更新日が一応表示される。",{"type":26,"tag":27,"props":246,"children":247},{},[248],{"type":31,"value":249},"新規の時は右上のボタン、既存の記事は一覧を選択すれば記事の編集画面に遷移する。",{"type":26,"tag":113,"props":251,"children":253},{"id":252},"イメージライブラリ",[254],{"type":31,"value":252},{"type":26,"tag":229,"props":256,"children":259},{"preset":231,"src":257,"alt":258},"2026-07-22\u002Fimage_1.webp","イメージライブラリ画面",[],{"type":26,"tag":27,"props":261,"children":262},{},[263,265,268],{"type":31,"value":264},"画像の管理をする画面。",{"type":26,"tag":52,"props":266,"children":267},{},[],{"type":31,"value":269},"\nとりあえずで作ったが、編集画面からでもアップロードできるので今のところは間違って上げた画像を削除する用の画面になってる。",{"type":26,"tag":113,"props":271,"children":273},{"id":272},"pushボタン",[274],{"type":31,"value":275},"Pushボタン",{"type":26,"tag":229,"props":277,"children":280},{"preset":231,"src":278,"alt":279},"2026-07-22\u002Fimage_2.webp","Pushボタン画面",[],{"type":26,"tag":27,"props":282,"children":283},{},[284,286,289,291,294],{"type":31,"value":285},"記事の完成後にPushするボタン",{"type":26,"tag":52,"props":287,"children":288},{},[],{"type":31,"value":290},"\nコミットメッセージを自動でつけるか自分でつけるか一応選べる。",{"type":26,"tag":52,"props":292,"children":293},{},[],{"type":31,"value":295},"\nまあ自動といっても、日付と「自動でコミットしました」みたいな一言がつくだけだけど。",{"type":26,"tag":113,"props":297,"children":299},{"id":298},"記事の編集画面",[300],{"type":31,"value":298},{"type":26,"tag":229,"props":302,"children":304},{"preset":231,"src":303,"alt":298},"2026-07-22\u002Fimage_3.webp",[],{"type":26,"tag":27,"props":306,"children":307},{},[308],{"type":31,"value":309},"一番力が入ってる画面。（アタリマエ）",{"type":26,"tag":27,"props":311,"children":312},{},[313,315,318,324,326,329,331,334],{"type":31,"value":314},"真ん中にMarkdownエディタが表示されるのと、右上のほうに普段使いそうなボタンを配置してある。",{"type":26,"tag":52,"props":316,"children":317},{},[],{"type":26,"tag":38,"props":319,"children":321},{"className":320},[],[322],{"type":31,"value":323},"Tags\u002FCateogries",{"type":31,"value":325},"ボタンはタグとカテゴリをほかの記事から引っ張ってきて今開いてる記事に適用できるボタン。",{"type":26,"tag":52,"props":327,"children":328},{},[],{"type":31,"value":330},"\n問題点のところではFrontmatterで一括して書いちゃってたので言及してなかったけど、タグも結構負担だったんだよね。",{"type":26,"tag":52,"props":332,"children":333},{},[],{"type":31,"value":335},"\n記述を統一しないと、タグとかで記事がまとまってくれないので・・・",{"type":26,"tag":27,"props":337,"children":338},{},[339,341,344,346,349],{"type":31,"value":340},"しかも、なんと、この画面、Ctrl+Sで記事を保存できます。",{"type":26,"tag":52,"props":342,"children":343},{},[],{"type":31,"value":345},"\nめちゃ重要！！",{"type":26,"tag":52,"props":347,"children":348},{},[],{"type":31,"value":350},"\n仮保存のためにイチイチ右上のボタンをマウスで押すってのも微妙なので・・・",{"type":26,"tag":82,"props":352,"children":354},{"id":353},"今後追加したい機能",[355],{"type":31,"value":353},{"type":26,"tag":113,"props":357,"children":359},{"id":358},"画像の整理機能",[360],{"type":31,"value":358},{"type":26,"tag":27,"props":362,"children":363},{},[364],{"type":31,"value":365},"ファイルのフォルダ間移動とかリネームとか。",{"type":26,"tag":113,"props":367,"children":369},{"id":368},"プロフィールの編集画面",[370],{"type":31,"value":368},{"type":26,"tag":27,"props":372,"children":373},{},[374,376,379],{"type":31,"value":375},"あんまり変えないだろうけど、今後はVSCodeで開く機会がへるので変えたいときに変えられるといいなって感じ。",{"type":26,"tag":52,"props":377,"children":378},{},[],{"type":31,"value":380},"\n特にアイコンとかは頻繁に変えたいような気もする。",{"type":26,"tag":82,"props":382,"children":384},{"id":383},"まとめ",[385],{"type":31,"value":383},{"type":26,"tag":27,"props":387,"children":388},{},[389],{"type":31,"value":390},"ここまで書いててすでに楽しいので施策は成功！って気がする。",{"type":26,"tag":27,"props":392,"children":393},{},[394,396,399],{"type":31,"value":395},"改善案もどんどん出てくるのでモノづくり的な観点としてもいい感じですね。",{"type":26,"tag":52,"props":397,"children":398},{},[],{"type":31,"value":400},"\nやっぱツール作るのたのしい。",{"title":9,"searchDepth":402,"depth":402,"links":403},2,[404,408,414,418],{"id":84,"depth":402,"text":84,"children":405},[406],{"id":115,"depth":407,"text":115},3,{"id":185,"depth":402,"text":185,"children":409},[410,411,412,413],{"id":225,"depth":407,"text":225},{"id":252,"depth":407,"text":252},{"id":272,"depth":407,"text":275},{"id":298,"depth":407,"text":298},{"id":353,"depth":402,"text":353,"children":415},[416,417],{"id":358,"depth":407,"text":358},{"id":368,"depth":407,"text":368},{"id":383,"depth":402,"text":383},"markdown","content:post:2026-07-20.md","content","post\u002F2026-07-20.md","post\u002F2026-07-20","md",{"_path":426,"_dir":7,"_draft":8,"_partial":8,"_locale":9,"title":427,"description":9,"category":428,"tags":429,"sumb":430,"sumb_alt":431,"createdAt":432,"updatedAt":432,"excerpt":433,"body":455,"_type":419,"_id":558,"_source":421,"_file":559,"_stem":560,"_extension":424},"\u002Fpost\u002F2023-08-24","Aタグとnext-linkの使い方を間違えた話",[13],[16],"no-image-logo.png","no image image","2023-08-24 18:20",{"type":23,"children":434},[435,440],{"type":26,"tag":82,"props":436,"children":438},{"id":437},"何が起きたか",[439],{"type":31,"value":437},{"type":26,"tag":27,"props":441,"children":442},{},[443,445,448,450,453],{"type":31,"value":444},"このブログ、記事に貼り付けてある画像はnuxt-imageを使ってリサイズしている。",{"type":26,"tag":52,"props":446,"children":447},{},[],{"type":31,"value":449},"\n記事を開いた時のロード時間を短くするためだ。",{"type":26,"tag":52,"props":451,"children":452},{},[],{"type":31,"value":454},"\nただ、それだけでは等倍の画像を見れなくなってしまうので画像をクリックした時に等倍写真へ飛ぶようにリンクを張ってある。",{"type":23,"children":456,"toc":553},[457,461,473,488,498,503,508,518,533,538],{"type":26,"tag":82,"props":458,"children":459},{"id":437},[460],{"type":31,"value":437},{"type":26,"tag":27,"props":462,"children":463},{},[464,465,468,469,472],{"type":31,"value":444},{"type":26,"tag":52,"props":466,"children":467},{},[],{"type":31,"value":449},{"type":26,"tag":52,"props":470,"children":471},{},[],{"type":31,"value":454},{"type":26,"tag":27,"props":474,"children":475},{},[476,478,481,483,486],{"type":31,"value":477},"そのため、画像をクリックしたときには画像ファイルが開かれるのが期待した動作なのだが、クリックするとなぜかnuxtのNotFoundページを開いてしまう。",{"type":26,"tag":52,"props":479,"children":480},{},[],{"type":31,"value":482},"\nその時のブラウザのアドレスバーを見ると確かに画像のURLにはなっている。",{"type":26,"tag":52,"props":484,"children":485},{},[],{"type":31,"value":487},"\nその証拠としてアドレスを直接打ち込んで遷移すると確かに画像が開かれる。",{"type":26,"tag":27,"props":489,"children":490},{},[491,493,496],{"type":31,"value":492},"しかも、NotFoundページでF5を押すとなぜか画像のページを開ける。",{"type":26,"tag":52,"props":494,"children":495},{},[],{"type":31,"value":497},"\nアドレス直打ちと同じ挙動ということ？",{"type":26,"tag":27,"props":499,"children":500},{},[501],{"type":31,"value":502},"その後、色々調べてChromeの開発者ツールでログを追ってみたりしたが、問題の遷移時にはページをロードしてないらしいことがわかった以外収穫がなかった。",{"type":26,"tag":82,"props":504,"children":506},{"id":505},"結局何が起きていたか",[507],{"type":31,"value":505},{"type":26,"tag":27,"props":509,"children":510},{},[511,513,516],{"type":31,"value":512},"色々なキーワードで調べていたところ、Generate時の動的ルーティングの話に辿り着いた。",{"type":26,"tag":52,"props":514,"children":515},{},[],{"type":31,"value":517},"\nそういえば、nuxt-linkはrouter-linkの拡張なのでページ遷移扱いになるんだっけ。",{"type":26,"tag":27,"props":519,"children":520},{},[521,523,526,528,531],{"type":31,"value":522},"問題の画像を囲っているタグを確認したところ、Aタグではなくnuxt-linkになっていた。",{"type":26,"tag":52,"props":524,"children":525},{},[],{"type":31,"value":527},"\nなるほどなるほど。",{"type":26,"tag":52,"props":529,"children":530},{},[],{"type":31,"value":532},"\n遷移先のページがなかったのでNotFoundが出ていたのか。",{"type":26,"tag":82,"props":534,"children":536},{"id":535},"解決",[537],{"type":31,"value":535},{"type":26,"tag":27,"props":539,"children":540},{},[541,543,546,548,551],{"type":31,"value":542},"というわけで問題の箇所でAタグを使うように変更して一件落着。",{"type":26,"tag":52,"props":544,"children":545},{},[],{"type":31,"value":547},"\nファイルを直接貼り付けてダウンロードさせるような使い方の時も同じなのかな。",{"type":26,"tag":52,"props":549,"children":550},{},[],{"type":31,"value":552},"\n詳細はわからないが、まあ想定通りに動くようになったのでよしとしよう。",{"title":9,"searchDepth":402,"depth":402,"links":554},[555,556,557],{"id":437,"depth":402,"text":437},{"id":505,"depth":402,"text":505},{"id":535,"depth":402,"text":535},"content:post:2023-08-24.md","post\u002F2023-08-24.md","post\u002F2023-08-24",{"_path":562,"_dir":7,"_draft":8,"_partial":8,"_locale":9,"title":563,"description":564,"category":565,"tags":566,"sumb":430,"createdAt":568,"updatedAt":568,"excerpt":569,"body":575,"_type":419,"_id":678,"_source":421,"_file":679,"_stem":680,"_extension":424},"\u002Fpost\u002F2023-01-18","Wordpressやめました","ついにWordpressやめました！",[13],[16,567],"WordPress","2023-01-18 19:00",{"type":23,"children":570},[571],{"type":26,"tag":27,"props":572,"children":573},{},[574],{"type":31,"value":564},{"type":23,"children":576,"toc":669},[577,581,591,597,607,612,618,623,628,638,644,649,654,659],{"type":26,"tag":27,"props":578,"children":579},{},[580],{"type":31,"value":564},{"type":26,"tag":27,"props":582,"children":583},{},[584,586,589],{"type":31,"value":585},"レンタルサーバーを更新したばかりだったのでもう少し早く作業してればよかった。。。",{"type":26,"tag":52,"props":587,"children":588},{},[],{"type":31,"value":590},"\nひとまず昔のブログは以降が終わるまで残しておこうかと思います。",{"type":26,"tag":82,"props":592,"children":594},{"id":593},"cmsをやめて何に変えたのか",[595],{"type":31,"value":596},"CMSをやめて何に変えたのか",{"type":26,"tag":27,"props":598,"children":599},{},[600,602,605],{"type":31,"value":601},"最近Vueを触ることがおおいので nuxt.js + content でSSGする感じにしました。",{"type":26,"tag":52,"props":603,"children":604},{},[],{"type":31,"value":606},"\nAWSにあげてビルドしてもらってS3＋CloudFrontでホスティングしてます。",{"type":26,"tag":82,"props":608,"children":610},{"id":609},"これによって何がいいのか",[611],{"type":31,"value":609},{"type":26,"tag":113,"props":613,"children":615},{"id":614},"維持費がかなり安い",[616],{"type":31,"value":617},"維持費がかなり安い！",{"type":26,"tag":27,"props":619,"children":620},{},[621],{"type":31,"value":622},"これまではレンタルサーバーだったので年間で5000円くらいかかっていましたが、S3＋CloudFrontにすることでほぼ無料くらいの勢いになります。（無料ではない）",{"type":26,"tag":113,"props":624,"children":626},{"id":625},"デザインに自由度が出る",[627],{"type":31,"value":625},{"type":26,"tag":27,"props":629,"children":630},{},[631,633,636],{"type":31,"value":632},"CSSとか自前でやる感じになるのでデザインに自由度が出ます。",{"type":26,"tag":52,"props":634,"children":635},{},[],{"type":31,"value":637},"\nCSSフレームワークとかも使い放題。",{"type":26,"tag":113,"props":639,"children":641},{"id":640},"htmlタグとかjsとか触れて楽しい",[642],{"type":31,"value":643},"HTMLタグとかjsとか触れて楽しい",{"type":26,"tag":27,"props":645,"children":646},{},[647],{"type":31,"value":648},"楽しく触るにはたまに触るくらいがちょうどいいのでブログくらいの頻度で触れるのはいいんじゃないでしょうか。",{"type":26,"tag":82,"props":650,"children":652},{"id":651},"ということで",[653],{"type":31,"value":651},{"type":26,"tag":27,"props":655,"children":656},{},[657],{"type":31,"value":658},"今後はコチラを更新していこうと思います。",{"type":26,"tag":27,"props":660,"children":661},{},[662,664,667],{"type":31,"value":663},"記事ページのCSSはとりあえず暫定でコレで。",{"type":26,"tag":52,"props":665,"children":666},{},[],{"type":31,"value":668},"\n随時見直していこう。。。",{"title":9,"searchDepth":402,"depth":402,"links":670},[671,672,677],{"id":593,"depth":402,"text":596},{"id":609,"depth":402,"text":609,"children":673},[674,675,676],{"id":614,"depth":407,"text":617},{"id":625,"depth":407,"text":625},{"id":640,"depth":407,"text":643},{"id":651,"depth":402,"text":651},"content:post:2023-01-18.md","post\u002F2023-01-18.md","post\u002F2023-01-18",[682,684,686,687,688,689,691,693,695,697,699,701,704,706,708,710,712,714,716,718,720,722,724,726,728,730,732,734,736,738,740,742,744,745],{"tag":683,"count":407},"エディタ",{"tag":685,"count":407},"旧ブログ",{"tag":16,"count":407},{"tag":567,"count":402},{"tag":15,"count":402},{"tag":690,"count":402},"Sony",{"tag":692,"count":402},"グルメ",{"tag":694,"count":402},"TWS",{"tag":696,"count":402},"Ape",{"tag":698,"count":402},"iPad",{"tag":700,"count":402},"買ってよかったもの",{"tag":702,"count":703},"PC",1,{"tag":705,"count":703},"Windows",{"tag":707,"count":703},"Radeon",{"tag":709,"count":703},"Android",{"tag":711,"count":703},"Xperia",{"tag":713,"count":703},"スマホ",{"tag":715,"count":703},"Audio-Technica",{"tag":717,"count":703},"YAMAHA",{"tag":719,"count":703},"radius",{"tag":721,"count":703},"Noble Audio",{"tag":723,"count":703},"FALCON2",{"tag":725,"count":703},"レシピ",{"tag":727,"count":703},"ソーラー",{"tag":729,"count":703},"妄想シリーズ",{"tag":731,"count":703},"3Dプリンター",{"tag":733,"count":703},"ルーター",{"tag":735,"count":703},"OpenWrt",{"tag":737,"count":703},"Proxmox",{"tag":739,"count":703},"AWS",{"tag":741,"count":703},"Bedrock",{"tag":743,"count":703},"AI",{"tag":17,"count":703},{"tag":18,"count":703},[747,749,752,754,756,758],{"category":13,"count":748},8,{"category":750,"count":751},"ガジェット・オーディオ",4,{"category":753,"count":751},"ライフスタイル・雑記",{"category":755,"count":751},"ものづくり・DIY",{"category":757,"count":402},"クルマ・バイク",{"category":759,"count":703},"インフラ・NW",5,1785332692078]