[{"data":1,"prerenderedAt":348},["ShallowReactive",2],{"article-2025-hosting-storybook":3,"articles-[]":202},{"id":4,"title":5,"alt":5,"body":6,"category":189,"cover":190,"createDate":191,"description":192,"extension":193,"homepage":194,"meta":195,"navigation":194,"path":196,"recommend":194,"seo":197,"showCover":194,"slug":198,"stem":199,"tag":200,"updated":191,"__hash__":201},"articles\u002Farticles\u002F2025\u002Fhosting-storybook.md","Storybookのダッシュボードを公開する",{"type":7,"value":8,"toc":181},"minimark",[9,13,25,48,56,60,63,68,71,76,132,151,155,162,165,168,171,177],[10,11,12],"h2",{"id":12},"はじめに",[14,15,16,17,24],"p",{},"以前から ",[18,19,23],"a",{"href":20,"rel":21},"https:\u002F\u002Fgithub.com\u002Ftakasqr\u002Fvanilla-vue-ui",[22],"nofollow","Vue の UI ライブラリ","を Storybook を使って作っていました。その UI ライブラリの Storybook を静的サイトにビルドしてホスティングしてみました。",[26,27,28,40],"ul",{},[29,30,31,35,36],"li",{},[32,33,34],"strong",{},"できたサイト",": ",[18,37,38],{"href":38,"rel":39},"https:\u002F\u002Fui.takasqr.dev\u002F",[22],[29,41,42,35,45],{},[32,43,44],{},"GitHub",[18,46,20],{"href":20,"rel":47},[22],[14,49,50],{},[51,52],"img",{"src":53,"alt":54,"loading":55},"https:\u002F\u002Fasset.hirameki.dev\u002Fimg%2Fblog%2Ftech%2Fstorybook%2Fhosting-storybook%2Fhosting-storybook_010.webp?alt=media","dify-self-hosted-guide_010","lazy",[10,57,59],{"id":58},"ビルド-デプロイ","ビルド & デプロイ",[14,61,62],{},"下に手順を紹介します。",[64,65,67],"h3",{"id":66},"_1-ビルド","1. ビルド",[14,69,70],{},"Storybook をビルドします。",[14,72,73],{},[32,74,75],{},"package.json",[77,78,83],"pre",{"className":79,"code":80,"language":81,"meta":82,"style":82},"language-json shiki shiki-themes github-light github-dark","{\n  \"scripts\": {\n    \"build-storybook\": \"storybook build\",\n  }\n}\n","json","",[84,85,86,95,105,120,126],"code",{"__ignoreMap":82},[87,88,91],"span",{"class":89,"line":90},"line",1,[87,92,94],{"class":93},"sVt8B","{\n",[87,96,98,102],{"class":89,"line":97},2,[87,99,101],{"class":100},"sj4cs","  \"scripts\"",[87,103,104],{"class":93},": {\n",[87,106,108,111,113,117],{"class":89,"line":107},3,[87,109,110],{"class":100},"    \"build-storybook\"",[87,112,35],{"class":93},[87,114,116],{"class":115},"sZZnC","\"storybook build\"",[87,118,119],{"class":93},",\n",[87,121,123],{"class":89,"line":122},4,[87,124,125],{"class":93},"  }\n",[87,127,129],{"class":89,"line":128},5,[87,130,131],{"class":93},"}\n",[77,133,137],{"className":134,"code":135,"language":136,"meta":82,"style":82},"language-bash shiki shiki-themes github-light github-dark","npm run build-storybook\n","bash",[84,138,139],{"__ignoreMap":82},[87,140,141,145,148],{"class":89,"line":90},[87,142,144],{"class":143},"sScJk","npm",[87,146,147],{"class":115}," run",[87,149,150],{"class":115}," build-storybook\n",[64,152,154],{"id":153},"_2-デプロイ","2. デプロイ",[14,156,157,158,161],{},"ビルドが成功すると",[84,159,160],{},"storybook-static","にファイルが生成されます。これを好きなホスティングサービスにデプロイすれば完了です。",[14,163,164],{},"私は Firebase Hosting にデプロイします。",[10,166,167],{"id":167},"さいごに",[14,169,170],{},"割と簡単に自分の UI ライブラリのカタログサイトを公開することができました。今回は Vue で行いましたが、React でも同じことができると思います。",[14,172,173],{},[51,174],{"src":175,"alt":176,"loading":55},"https:\u002F\u002Fasset.hirameki.dev\u002Fimg%2Fblog%2Ftech%2Fstorybook%2Fhosting-storybook%2Fhosting-storybook_020.webp?alt=media","dify-self-hosted-guide_020",[178,179,180],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}",{"title":82,"searchDepth":97,"depth":97,"links":182},[183,184,188],{"id":12,"depth":97,"text":12},{"id":58,"depth":97,"text":59,"children":185},[186,187],{"id":66,"depth":107,"text":67},{"id":153,"depth":107,"text":154},{"id":167,"depth":97,"text":167},"storybook","https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fl_text:MPLUS1p-Black.ttf_88_bold:Storybookの%0Aダッシュボードを%0A公開する,co_rgb:fff,w_720,c_fit\u002Fv1712091289\u002Fcover_2025_rpwog8.png","2025\u002F05\u002F28","以前から Vue の UI ライブラリを Storybook を使って作っていました。その UI ライブラリの Storybook を静的サイトにビルドしてホスティングしてみました。","md",true,{},"\u002Farticles\u002F2025\u002Fhosting-storybook",{"title":5,"description":192},"hosting-storybook","articles\u002F2025\u002Fhosting-storybook",[],"ix0vOv8k-6IUgFm_m8xYAHnJA7ZKR3NFmC-xWVbkr-k",{"items":203,"total":347},[204,214,223,229,237,245,252,256,263,273,283,290,297,307,314,323,333,340],{"_path":205,"title":206,"description":207,"cover":208,"alt":206,"category":209,"categoryBasePath":210,"tags":211,"createDate":212,"homepage":194,"recommend":194,"showCover":194,"lang":213},"\u002Farticles\u002F2026\u002Fmy-app-stack\u002F","2年半のフルプラットフォーム開発について全部書く","2年半前、人生で一番追い詰められたプロジェクトが終わりました。少しだけ時間に余裕ができたので、個人で運用していたWebアプリをリプレイスすることにしました。そしてあれこれ試行錯誤していたら、2年半経っていました。やりたかった事を一通りやり切ることができたので、こだわり部分を紹介します。","https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fl_text:MPLUS1p-Black.ttf_72_bold:フルプラットフォーム開発について全部書く,co_rgb:fff,w_720,c_fit\u002Fv1712091289\u002Fogp_my-web-app-stack_ztafxo.webp","other","\u002Farticles\u002Fcategory\u002Fother\u002F",[],"2026\u002F04\u002F08","ja",{"_path":215,"title":216,"description":217,"cover":218,"alt":218,"category":82,"categoryBasePath":219,"tags":220,"createDate":221,"homepage":222,"recommend":222,"showCover":222,"lang":213},"\u002Farticles\u002F2026\u002Fthe-goal\u002F","『ザ・ゴール ― 企業の究極の目的とは何か』を読んだ","「ザ・ゴール ― 企業の究極の目的とは何か」を読みました。",null,"\u002Farticles\u002Fcategory\u002F",[],"2026\u002F02\u002F10",false,{"_path":224,"title":225,"description":226,"cover":218,"alt":218,"category":82,"categoryBasePath":219,"tags":227,"createDate":228,"homepage":222,"recommend":222,"showCover":222,"lang":213},"\u002Farticles\u002F2026\u002Ftidy-first\u002F","『Tidy First? ―個人で実践する経験主義的ソフトウェア設計』を読んだ","「Tidy First? ―個人で実践する経験主義的ソフトウェア設計」を読んだ。",[],"2026\u002F01\u002F31",{"_path":230,"title":231,"description":82,"cover":232,"alt":231,"category":233,"categoryBasePath":234,"tags":235,"createDate":236,"homepage":194,"recommend":194,"showCover":194,"lang":213},"\u002Farticles\u002F2025\u002Fcapacitor\u002F","Vueでスマホアプリ開発【Capacitor】","https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fl_title_cover_001_lu3vq4\u002Fl_title_cover_001_lu3vq4\u002Fl_text:MPLUS1p-Black.ttf_88_bold:Vue.jsで%0Aスマホアプリ%0A開発,co_rgb:374151,w_720,c_fit\u002Fv1712091289\u002Fthumbnail__003_prznvl.webp","vuejs","\u002Farticles\u002Fcategory\u002Fvuejs\u002F",[],"2025\u002F12\u002F27",{"_path":238,"title":239,"description":240,"cover":241,"alt":239,"category":209,"categoryBasePath":210,"tags":242,"createDate":243,"updated":244,"homepage":222,"recommend":222,"showCover":194,"lang":213},"\u002Farticles\u002F2025\u002Fthe-land-of-playful-fellows\u002F","紅白もちのひみつ『めっきらもっきら どおん どん』","奥さんに言われて「はっ」としました。もんもんびゃっこ達は赤いおもちを食べていて、かんたは白いおもち。これはなんらかの意味がこめられてるのでは？と思い考えてみました。","https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fv1712091289\u002Fthe-land-of-playful-fellows_vgkvsf",[],"2025\u002F12\u002F20","2025\u002F12\u002F22",{"_path":246,"title":247,"description":248,"cover":249,"alt":247,"category":209,"categoryBasePath":210,"tags":250,"createDate":251,"updated":251,"homepage":194,"recommend":194,"showCover":194,"lang":213},"\u002Farticles\u002F2025\u002Fpixel-astrophotography\u002F","星空写真をAndroid Pixelでキレイに撮る","キャンプ場での夜空はやっぱりキレイでした。星がよく見れます。肉眼で見れるこのキレイな星空を写真に残せたら嬉しいなーと思いながら、タイマーが終わるのを待ちます。","https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fl_title_cover_001_lu3vq4\u002Fl_title_cover_001_lu3vq4\u002Fl_text:MPLUS1p-Black.ttf_88_bold:星空写真を%0APixelで%0Aキレイに撮る,co_rgb:374151,w_720,c_fit\u002Fv1712091289\u002Fpixel-astrophotography",[],"2025\u002F09\u002F29",{"_path":253,"title":5,"description":192,"cover":190,"alt":5,"category":189,"categoryBasePath":254,"tags":255,"createDate":191,"updated":191,"homepage":194,"recommend":194,"showCover":194,"lang":213},"\u002Farticles\u002F2025\u002Fhosting-storybook\u002F","\u002Farticles\u002Fcategory\u002Fstorybook\u002F",[],{"_path":257,"title":258,"description":259,"cover":260,"alt":258,"category":209,"categoryBasePath":210,"tags":261,"createDate":262,"updated":262,"homepage":222,"recommend":222,"showCover":194,"lang":213},"\u002Farticles\u002F2025\u002Fmemo\u002F","メモは脳の排水","紙、デジタルどちらでもなんでもメモに書き出します。書き出すことで考えが整理され、ネタ帳になってくれるので重宝しています。この「脳の排水」という言葉にグッときました。","https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fl_text:MPLUS1p-Black.ttf_88_bold:メモは脳の排水,co_rgb:fff,w_720,c_fit\u002Fv1712091289\u002Fcover_2025_rpwog8.png",[],"2025\u002F05\u002F27",{"_path":264,"title":265,"description":266,"cover":267,"alt":265,"category":268,"categoryBasePath":269,"tags":270,"createDate":272,"updated":272,"homepage":194,"recommend":194,"showCover":194,"lang":213},"\u002Farticles\u002F2025\u002Fa2a-guide\u002F","A2A 試してみた","A2AとはAIエージェントとAIエージェントが連携するための規格です。Googleが2025年4月に発表しました。Googleのサンプルコードを動かしてみます。","https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fl_text:MPLUS1p-Black.ttf_88_bold:A2A 試してみた,co_rgb:fff,w_720,c_fit\u002Fv1712091289\u002Fcover_2025_rpwog8.png","ai","\u002Farticles\u002Fcategory\u002Fai\u002F",[271],"AI","2025\u002F05\u002F01",{"_path":274,"title":275,"description":276,"cover":277,"alt":275,"category":278,"categoryBasePath":279,"tags":280,"createDate":281,"updated":282,"homepage":194,"recommend":194,"showCover":194,"lang":213},"\u002Farticles\u002F2025\u002Fdify-self-hosted-guide\u002F","Dify をセルフホストで立ち上げる","Dify をセルフホストで立ち上げる機会があったので、手順を紹介します。Dify（ディファイ）は、AIアプリを簡単に開発できるオープンソースのプラットフォームです。クラウド版とセルフホスト版があります。今回は Dify をセルフホストで立ち上げてみます。公式と同じ手順で実行する。","https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fl_text:MPLUS1p-Black.ttf_88_bold:Dify を%0Aセルフホストで%0A立ち上げる,co_rgb:fff,w_720,c_fit\u002Fv1712091289\u002Fcover_2025_rpwog8.png","dify","\u002Farticles\u002Fcategory\u002Fdify\u002F",[],"2025\u002F04\u002F29","2025-04-29",{"_path":284,"title":285,"description":286,"cover":287,"alt":285,"category":209,"categoryBasePath":210,"tags":288,"createDate":289,"updated":289,"homepage":222,"recommend":222,"showCover":194,"lang":213},"\u002Farticles\u002F2025\u002Fphysical-bookstore\u002F","リアル書店の選書体験","今回で改めて書店の良さに気付けたのが良かったです。ただ、ネット通販や電子書籍には手軽に買えるなど別の良さがあると思ってます。なのでうまく使い分けていきたいです。","https:\u002F\u002Fasset.hirameki.dev\u002Fimg%2Fblog%2Fjournal%2F2025%2F20250425%2F20250425_010.webp?alt=media",[],"2025\u002F04\u002F25",{"_path":291,"title":292,"description":293,"cover":294,"alt":292,"category":268,"categoryBasePath":269,"tags":295,"createDate":296,"updated":296,"homepage":194,"recommend":194,"showCover":194,"lang":213},"\u002Farticles\u002F2025\u002Fcline-guide\u002F","Cline やってみた","Clineは自分自身でコマンドを実行できるようになっています。暴走しても被害がコンテナの中だけで済むようにDevContainersを使って今回試してみました。","https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fl_text:MPLUS1p-Black.ttf_88_bold:Cline%20やってみた,co_rgb:fff,w_720,c_fit\u002Fv1712091289\u002Fcover_2025_rpwog8.png",[271],"2025\u002F04\u002F16",{"_path":298,"title":299,"description":300,"cover":301,"alt":299,"category":302,"categoryBasePath":303,"tags":304,"createDate":306,"updated":306,"homepage":194,"recommend":222,"showCover":194,"lang":213},"\u002Farticles\u002F2025\u002Fmy-oss-projects\u002F","今まで作った OSS プロジェクト","今まで、いくつか OSS プロジェクトを作ってきたので紹介します。番外編まで含めると全部で5つあります。","https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fl_text:MPLUS1p-Black.ttf_88_bold:今まで作った%0AOSS%20プロジェクト,co_rgb:fff,w_720,c_fit\u002Fv1712091289\u002Fcover_2025_rpwog8.png","oss","\u002Farticles\u002Fcategory\u002Foss\u002F",[305],"OSS","2025\u002F04\u002F02",{"_path":308,"title":309,"description":310,"cover":311,"alt":309,"category":209,"categoryBasePath":210,"tags":312,"createDate":313,"updated":313,"homepage":194,"recommend":194,"showCover":194,"lang":213},"\u002Farticles\u002F2025\u002Fbuilt-custom-keyboard\u002F","キーボードを自作した","ずっと興味のあった自作キーボードに挑戦した記録で、遊舎工房でキットやキーキャップを選び、秋葉原で工具を買い、久しぶりのはんだ付けに苦戦しながら完成させました。","https:\u002F\u002Fasset.hirameki.dev\u002Fimg%2Fblog%2Fjournal%2F2025%2F20250309_built-custom-keyboard%2F20250309_built-custom-keyboard_010.webp?alt=media",[],"2025\u002F03\u002F09",{"_path":315,"title":316,"description":317,"cover":318,"alt":316,"category":319,"categoryBasePath":320,"tags":321,"createDate":322,"updated":322,"homepage":194,"recommend":194,"showCover":194,"lang":213},"\u002Farticles\u002F2025\u002Fcloudflare-workers-cache-layer\u002F","Cloudflare Workers でキャッシュ層を作る","画像サーバーの前段に Cloudflare Workers でキャッシュ層を作ったら転送量が大幅に減ったので記録です。やりかたです。1. 以下のコードで Workers を作りカスタムドメインを当てる。2. ソースコードの URL を Workers に割り当てたドメインに変更する。","https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fl_text:MPLUS1p-Black.ttf_88_bold:Cloudflare Workers で%0Aキャッシュ層を%0A作る,co_rgb:fff,w_720,c_fit\u002Fv1712091289\u002Fcover_2025_rpwog8.png","web","\u002Farticles\u002Fcategory\u002Fweb\u002F",[],"2025\u002F02\u002F23",{"_path":324,"title":325,"description":326,"cover":327,"alt":325,"category":328,"categoryBasePath":329,"tags":330,"createDate":331,"updated":332,"homepage":194,"recommend":222,"showCover":194,"lang":213},"\u002Farticles\u002F2022\u002Flearn-programming\u002F","プログラミング勉強のコツを調べてみた","エラーに対する態度は3パターンあります。上達が早いのはもちろん3番目のパターンです。事前に知っておくことで、エラーに直面した時に少し落ち着いて対処できそうです。","https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fl_title_cover_001_lu3vq4\u002Fl_title_cover_001_lu3vq4\u002Fl_text:MPLUS1p-Black.ttf_88_bold:プログラミング%0A勉強のコツを%0A調べてみた,co_rgb:374151,w_720,c_fit\u002Fv1642574453\u002Falfons-morales-YLSwjSy7stw-unsplash_2_1_xnt6z7.png","programming","\u002Farticles\u002Fcategory\u002Fprogramming\u002F",[],"2022\u002F05\u002F23","2025\u002F02\u002F12",{"_path":334,"title":335,"description":336,"cover":337,"alt":335,"category":209,"categoryBasePath":210,"tags":338,"createDate":339,"updated":339,"homepage":194,"recommend":194,"showCover":194,"lang":213},"\u002Farticles\u002F2025\u002Flearn-9-years\u002F","９年間、毎日プログラミングの勉強をしてる話","仕事から帰ってきて、ご飯食べたりお風呂に入って、一息ついたらパソコンにむかって12時まで作業する。初めはビジネス書とか経済の本を読んだりしてた。それから9年経った。","https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fl_title_cover_001_lu3vq4\u002Fl_title_cover_001_lu3vq4\u002Fl_text:MPLUS1p-Black.ttf_88_bold:９年間、毎日%0Aプログラミングの勉強をしてる話,co_rgb:374151,w_720,c_fit\u002Fv1712091289\u002Fthumbnail__001_tdrr4g.webp",[],"2025\u002F02\u002F10",{"_path":341,"title":342,"description":343,"cover":344,"alt":342,"category":209,"categoryBasePath":210,"tags":345,"createDate":346,"updated":346,"homepage":222,"recommend":194,"showCover":194,"lang":213},"\u002Farticles\u002F2021\u002Fstudy-5-years\u002F","5年間ほぼ毎日プログラミングの勉強をするためにやったこと","人生の節目で一時的に勉強してない時期もありました。ですが、それ以外のほとんどの期間で毎日プログラミングを勉強しています。楽しいので、あまり勉強と思っていませんが。","https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fl_text:MPLUS1p-Black.ttf_88_bold:5年間ほぼ毎日%0Aプログラミングの%0A勉強をする為に%0Aやったこと,co_rgb:fff,w_720,c_fit\u002Fv1642574453\u002Faaron-burden-QJDzYT_K8Xg-unsplash_1_xaxykh.png",[],"2021\u002F08\u002F01",18,1776498755549]