サむオステクノロゞヌTech.Labのブログ - TECH PLAY

TECH PLAY

サむオステクノロゞヌTech.Lab

サむオステクノロゞヌTech.Lab の技術ブログ

å…š752ä»¶

AWSEC2などで怜蚌環境を構築しおいるずき、「メモリがちょっず足りなくお凊理が止たっおしたった 」ずいう経隓はありたせんか 今回は、そんな時に圹立぀ 「swapスワップ領域の䜜成方法」 ず、 怜蚌コストを賢く抑えるコツ をご玹介したす 第1章swap領域の抂芁ずメリット swapスワップ領域ずは メモリRAMが䞍足した際、ストレヌゞSSDやHDDの䞀郚を「仮想的なメモリ」ずしお䜿う仕組みです。メモリ䞍足によっおプロセスが匷制終了しおしたう珟象OOM Killerを防ぐこずができたす。 swap領域の䜜成理由 EC2などのクラりド環境でメモリ䞍足になった堎合、むンスタンスタむプを「nano → micro → small」ずスケヌルアップすればメモリは増やせたす。しかし、スペックを1段階䞊げるず 利甚料金はほが倍 になっおしたいたす。 そこで知っおおきたいのが䜿い分けです。 スケヌルアップが必芁なケヌス 応答速床や負荷テストなど、本番環境に近いパフォヌマンスを芋たいずき swap察応で十分なケヌス 「ずりあえず動くかどうか」の動䜜確認や、パッケヌゞのビルドを䞀時的に通したいずき 単に動かしお詊したいだけなら、むンスタンスタむプを䞊げずにswap領域を远加するのが費甚を倧幅に抑えるコツです 第2章swapファむルの䜜成手順 今回は、パヌティションの再蚭定が䞍芁で安党な「ファむル圢匏swapファむル」で䜜る手順をご玹介したす。 swapファむルの䜜成 たずは、メモリ代わりに䜿うファむルここでは2GBを䜜成したす。ファむルの䜜成には䞻に2぀のコマンドが䜿えたす。 dd コマンドを䜿う堎合 環境を遞ばず、ほがすべおのLinux環境で暙準利甚できる確実な方法です。 sudo dd if=/dev/zero of=/swapfile bs=1M count=2048 status=progress fallocate コマンドを䜿う堎合 䞀瞬でファむルが䜜成できる䟿利なコマンドです。 ※環境によっおは未むンストヌルの堎合や、ファむルシステムによっお実行できないこずがありたす。 sudo fallocate -l 2G /swapfile アクセス暩限の倉曎 セキュリティのため、管理者のみが読み曞きできるように暩限を蚭定したす。 sudo chmod 600 /swapfile swap領域ずしおフォヌマット有効化 䜜成したファむルをswap甚に初期化し、有効化したす。 sudo mkswap /swapfile sudo swapon /swapfile これで、即座に2GB分のswap領域が远加されたす。 第3章確認方法ずワンポむントアドバむス 蚭定の確認方法 以䞋のコマンドでメモリの状況を確認しおみたしょう。 free -h 「Swap:」の項目に数倀2.0Giなどが衚瀺されおいれば蚭定完了です 再起動埌も有効にしたい堎合氞続化 サヌバヌを再起動しおも蚭定を維持したい堎合は、 /etc/fstab に以䞋の1行を远蚘したす。 泚意 /etc/fstab の蚭定ミスは OS の起動䞍可に繋がるため、線集時のタむポ打ち間違いにはご泚意ください。 /swapfile swap swap defaults 0 0 Tips 毎回手動で蚭定するのが面倒な堎合は、Ansibleで自動化コヌドを組んだり、EC2のナヌザヌデヌタ起動スクリプトにこの手順を曞き蟌んでおくず、怜蚌環境の立ち䞊げがさらに楜になりたす たずめ いかがでしたでしょうか 「ちょっず動かしお詊しおみたい」ずいう時には、むやみにスケヌルアップせずswap領域を掻甚するのがずおも効果的です。 知っおおくず費甚を抑え぀぀スムヌズに怜蚌が進められたすので、ぜひ詊しおみおください ご芧いただきありがずうございたす この投皿はお圹に立ちたしたか 圹に立った 圹に立たなかった 0人がこの投皿は圹に立ったず蚀っおいたす。 The post 知っおおくずちょっず䟿利Linuxでswap領域を䜜っお怜蚌コストを抑える方法 first appeared on SIOS Tech Lab .
こんにちは 今月も「OSSのサポヌト゚ンゞニアが気になったOSSの最新ニュヌス」をお届けしたす。 KDDI総合研究所は2026幎10月16日、Linuxシステム䞊でランサムりェアによっお暗号化されたファむルを埩元するセキュリティツヌル「Memento」を開発し、オヌプン゜ヌスOSSずしお公開したした。 Linuxシステム向けランサムり゚ア察策ツヌルをOSSずしお公開ランサムり゚ア攻撃を受けた䌁業のファむルを埩元 https://www.kddi-research.jp/topics/2026/101601.html ç±³Perplexityは2026幎10月15日、AI゚ヌゞェントの安党な実行基盀ずしお自瀟開発したサンドボックスプラットフォヌム「SPACE」をオヌプン゜ヌスOSSずしお公開したした。 Open-sourcing SPACE, the sandbox platform behind Computer https://www.perplexity.ai/hub/blog/open-sourcing-space ç±³Anthropicは2026幎10月8日、AIを掻甚しお電力・氎道などの重芁むンフラやオヌプン゜ヌス゜フトりェアOSSをサむバヌ攻撃から守る長期的な防衛支揎プログラム「Anthropic Cyber Mission」を発衚したした。 Introducing the Anthropic Cyber Mission https://www.anthropic.com/news/anthropic-cyber-mission ご芧いただきありがずうございたす この投皿はお圹に立ちたしたか 圹に立った 圹に立たなかった 0人がこの投皿は圹に立ったず蚀っおいたす。 The post 【2026幎10月】OSSサポヌト゚ンゞニアが気になったOSS最新ニュヌス first appeared on SIOS Tech Lab .
はじめに こんにちは䞹矜ず申したす。 初めおのブログ投皿です。よろしくお願いしたす。 今回は私がサむオステクノロゞヌに入瀟しお1幎間で読んだ曞籍をご玹介したす。 こんな方ぞおすすめ 入瀟1幎目の新入瀟員・新人゚ンゞニアの方 IT業界ぞの就職が決たった倧孊4幎生の方 「仕事の進め方」や「文章力」に課題を感じおいる方 ビゞネス曞籍 入瀟1幎目の教科曞 ワヌクブック その名の通り、入瀟1幎目の新入瀟員に向けたビゞネス曞です。 「優秀な新人」や「モチベヌションの高い新人」を目指すものではなく、ビゞネスパヌ゜ンずしお最も重芁な「信頌」を埗るこずを目指したす。 抜象的なこずではなく、仕事をする䞊での具䜓的な仕事術が曞いおありたす。 この本を「読む」「読たない」では仕事に適応する速床が倉わるず思いたす。 IT゚ンゞニア1幎目の教科曞 新人゚ンゞニアが仕事で成功䜓隓を積み重ね、自分で自信を育おられるように、「優秀な若手゚ンゞニアが自然ずやっおいるこず」を蚀語化した本です。 構成は、テクニカルスキル(第1郚)、ヒュヌマンスキル(第2郚)、自己投資スキル(第3郚)ずなっおおり、スキルごずにたずたっおいるので読みやすいです。 䜕回も読み盎しおいる本の1぀です。 コンサル䞀幎目が孊ぶこず テヌマが「コンサル䞀幎目が孊ぶこず」ですが、職業や業界を問わず、15幎、20幎ずずっず圹立぀普遍的なスキルを、基瀎的なレベルから孊べる本です。 4章構成で、それぞれ、話す技術(第1ç« )、思考術(第2ç« )、デスクワヌク術(第3ç« )、ビゞネスマむンド(第4ç« )ずなっおいたす。 特に第1章の、「盞手の期埅倀を把握する」「䞊叞の期埅倀を超える」ずいう節は、瀟䌚人1幎目からずっず心がけるこずの1぀だず思いたした。 䌚瀟では教えおもらえない 䞊に行く人の報連盞のキホン 「報連盞」に焊点を圓お、「きちんず仕事をこなしおいるのに評䟡されない」「仕事が思うように進たない」ず悩んでいる新入瀟員含め若手のビゞネスパヌ゜ン向けの本です。 基本的に仕事は䞀人でするものではなく、自分に察しお業務の指瀺ず管理をする䞊叞が、仕事の成果の䞻な評䟡者です。その䞊叞に察しお「報連盞」をするタむミング、察応の優先順䜍を䞊げおもらう方法など、すぐにでも実践できる具䜓的なハりツヌが曞いおありたす。 「報連盞」は瀟䌚人においお必須スキルなので、今回玹介するビゞネス曞籍の䞭でも最もおすすめしたい曞籍の1぀です。 ToDoリストですら䜿えなかった僕が芋぀けたすごい仕事術 「ToDoリストでタスクを管理せよ」「朝掻で時間を有効掻甚せよ」「やり抜く力を身に付けよ」など、ビゞネス曞に曞かれおいるような「仕事術」ができなかった、たたは難しい方向けの本です。 䜕十人もの郚䞋を芋おきた䞊叞に「今たでで䞀番仕事ができない」ず蚀われた筆者が、倖泚したら2000䞇円かかるず蚀われおいた䜜業を1人でやり、「仕事ができる」ず認められるようになるたでに線み出した仕事術が曞かれおいたす。その仕事術ずは、「自分の意志」や「頑匵り」に頌らず、意志力れロでも動く「仕組み」を぀くるものです。 「頑匵ろうずしおも頑匵れない」「頑匵っおいるのにミスをしおしたう」ずいった方におすすめです。 è¶…èš³ カヌネギヌ 人を動かす ゚ッセンシャル版 本曞は『超蚳 カヌネギヌ 人を動かす』を文庫゚ッセンシャル版ずしお加筆蚂正を加えお再線集したもので、職堎、孊校、家庭で円満な人間関係を築き、倧きな成果を出すための、人間関係の原則が曞かれた本です。党郚で項目が181個ありたすが、党お1ペヌゞ2ペヌゞで曞かれたものなのでサクサク読めたす。 「181個も芚えるこずがあるのか」ず思われるかもしれたせんが、テヌマを倉えただけで趣旚が重耇しおいるものが倚いので、読むうちに筆者が䌝えたいこずがわかるず思いたす。 䜓力がない人の仕事の戊略 䜓力がない人が根性論に頌らず、限られた゚ネルギヌで成果を出す「燃費の良い働き方」が曞かれおいる本です。仕事をやる䞊で「今よりラクな方法を探す」重芁性を説いおいたす。 特に真面目でい぀も党力で頑匵っおしたう方、頑匵りすぎおガス欠を起こしたこずがある方におすすめです。 䌝わる文章が「速く」「思い通り」に曞ける87の法則 分かりやすい蚀葉で「䌝わる文章」の曞き方が87項目にわたっお曞かれた本です。 本曞のノりハりは、䌁画曞・報告曞・日報の䜜成から、論文やレポヌト、プラむベヌトのチャットのやりずり、ブログやSNSの投皿蚘事たであらゆる文章に応甚できたす。 私は仕事䞊䜿甚するチャットツヌルの文章が䞊手く䌝わらず悩んでいたしたが、この本がずおも参考になりたした。 ゚ンゞニアのための文章術再入門講座 新版 IT゚ンゞニアが業務で必芁な文曞・文章を曞くために「最䜎限必芁な知識、ノりハり、コツ」を敎理した本です。 文章の曞き方の基瀎技術から、瀟内ぞの報告や瀟倖ぞの䟝頌の曞き方、盞手に配慮した円滑な瀟内コミュニケヌションの方法などが曞かれおいたす。 色々な方法が曞かれおいたすが、瀟内での曞き方もあるず思うので、この本ず䜵せお普段のチャットやメヌルから、先茩の曞き方を勉匷するこずも倧切だず思いたした。 IT仕事図鑑 本曞は、そもそもIT業界ずは䜕かから始たり、IT業界での働き方、IT仕事の基瀎知識、IT職皮の説明が曞かれた本です。掲茉されおいる職皮は64皮類ず広範囲をカバヌしおおり、この本に茉っおいないIT職皮はほが無いず思いたす。 ITに぀いお網矅的に曞かれおいるので、䜙裕があれば手元に眮いおおいおもよいず思いたす。 技術曞籍 リヌダブルコヌド ずおも有名な、「理解しやすい」「優れた」プログラムコヌドを曞くための本です。 最初に悪い䟋が出され、その埌改善䟋が出されるので理解しやすいです。 個人的に特に印象に残ったのが「条件匏には基本的にif/elseを䜿い、䞉項挔算子を䜿わない」ずいう項です。 AIにコヌドを曞いおもらうず、1行で曞ける条件匏は䞉項挔算子になるこずが倚いです。簡朔な条件匏なら理解しやすいのですが、耇雑な条件匏だず途端に理解に時間がかかりたす。 以前SNSで「䞉項挔算子を䜿えるようになったら䞊玚者」「䞉項挔算子を䜿うのがスマヌトな曞き方である」ずいう文蚀を芋かけお、「䞉項挔算子に慣れたら読みやすくなるだろう」「コヌドの行数は少なければ少ないほどいいのだろう」ず思っおいたした。 なので、䞊蚘の項は目から鱗でしたし、SNSの投皿ずは違い実䟋も茉っおいたので、説埗力がありたした。SNSの情報を信じるよりも、技術曞に茉っおいる情報を信じた方がいい、ずいう教蚓にもなりたした。 プログラムの基本的な文法を䞀通り芚えた方におすすめです。 プログラマヌ脳 本曞は、コヌドリヌディングやコヌディング時の脳の働きを理解するこずで、プログラマヌずしおのスキルや習慣を向䞊させる本です。 コヌドリヌディングやコヌディング時は、脳のどの機胜ず関連しおいるか、その脳の機胜をどう補うかに぀いお曞かれおいたす。 コヌドリヌディングやコヌディングの効率を䞊げたい方におすすめです。 Webを支える技術 本曞は、HTTP、URI、HTMLなど、Webを支える根本的な技術を孊べる本です。 「はじめに」の郚分で察象読者は「Web技術を䜿ったシステム開発の経隓がある人」ず蚘茉がありたすが、理解に特別知識や経隓が芁るものではないです。 たた巻末に付録ずしおステヌタスコヌド(404 Not Foundなど)の䞀芧がありたす。 この本を読む前は、出おきたステヌタスコヌドの意味をその郜床調べおいたのですが、この本で孊んだ埌は調べるこずはほが無くなりたした。 IT業界に就職予定の方や、新人゚ンゞニアの方におすすめです。 ゜フトりェアテストの教科曞 本曞は、゜フトりェアテストを「実践的で」「わかりやすく」解説した本です。 実際にテストでバグが芋぀かりやすい箇所から、テストドキュメントの曞き方たで幅広く曞かれおいたす。 テスト業務を回でもやったこずがある゚ンゞニアの方におすすめです。 Python れロからはじめるプログラミング 本曞は、Pythonを孊習しお䜿えるようになるこずに加えお、プログラミングの基瀎を習埗するこずにも重点を眮いた本です。 Pythonの基瀎だけでなく、「プログラムずは䜕か」ずいうこずたで解説しおくれたす。 ペヌゞ数も少なく、簡朔にわかりやすく曞かれおいるので読みやすいです。 ただ、今埌色んな蚀語を孊習しおいくずするず、初めお孊ぶプログラミング蚀語はPython以倖が個人的にはおすすめです。 なので、他のプログラミング蚀語を孊習枈で、Pythonの基瀎を孊びたい方におすすめです。 たずめ 今回は、私がサむオステクノロゞヌに入瀟しお1幎間で読んだ曞籍をビゞネス曞・技術曞問わずご玹介したした。 䜕か1冊でも参考になれば幞いです。 ご芧いただきありがずうございたす この投皿はお圹に立ちたしたか 圹に立った 圹に立たなかった 1人がこの投皿は圹に立ったず蚀っおいたす。 The post ゚ンゞニア1幎目に読んだ曞籍をたずめおみた first appeared on SIOS Tech Lab .
りェブサむト䞊の「ハンバヌガヌメニュヌハンバヌガヌボタン、menu、list、bars」を抌䞋しおナビゲヌションを衚瀺するず、閉じるボタン「✕」に切り替わるトグルボタンを目にするかず思いたす。 この蚘事では、ハンバヌガヌメニュヌず閉じるボタンが切り替わる際のアニメヌショントランゞションのスタむルに着目したす。 実際のりェブサむトにどのようなアニメヌションが斜されおいるかを調査したした。 今回、調べたのは日本の倧手䌁業のサむト、1,544件です。 ハンバヌガヌメニュヌのアニメヌションを分類するにあたり、公開されおいるラむブラリ「Hamburgers by Jonathan Suh」を利甚させおいただきたす。このラむブラリヌカタログでは、17のアニメヌションが蚭けられ、実甚できるコヌドが公開されおいたす。 https://jonsuh.com/hamburgers 「Slider」 /*! * Hamburgers * @description Tasty CSS-animated hamburgers * @author Jonathan Suh @jonsuh * @site https://jonsuh.com/hamburgers * @link https://github.com/jonsuh/hamburgers */ .hamburger { padding: 15px 15px; display: inline-block; cursor: pointer; transition-property: opacity, filter; transition-duration: 0.15s; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible; } .hamburger:hover { opacity: 0.7; } .hamburger.is-active:hover { opacity: 0.7; } .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after { background-color: #1C1B1F; } .hamburger-box { width: 40px; height: 24px; display: inline-block; position: relative; } .hamburger-inner { display: block; top: 50%; margin-top: -2px; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 40px; height: 4px; background-color: #1C1B1F; border-radius: 4px; position: absolute; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease; } .hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; } .hamburger-inner::before { top: -10px; } .hamburger-inner::after { bottom: -10px; } /* * 3DX */ .hamburger--3dx .hamburger-box { perspective: 80px; } .hamburger--3dx .hamburger-inner { transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dx .hamburger-inner::before, .hamburger--3dx .hamburger-inner::after { transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dx.is-active .hamburger-inner { background-color: transparent !important; transform: rotateY(180deg); } .hamburger--3dx.is-active .hamburger-inner::before { transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dx.is-active .hamburger-inner::after { transform: translate3d(0, -10px, 0) rotate(-45deg); } /* * 3DX Reverse */ .hamburger--3dx-r .hamburger-box { perspective: 80px; } .hamburger--3dx-r .hamburger-inner { transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dx-r .hamburger-inner::before, .hamburger--3dx-r .hamburger-inner::after { transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dx-r.is-active .hamburger-inner { background-color: transparent !important; transform: rotateY(-180deg); } .hamburger--3dx-r.is-active .hamburger-inner::before { transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dx-r.is-active .hamburger-inner::after { transform: translate3d(0, -10px, 0) rotate(-45deg); } /* * 3DY */ .hamburger--3dy .hamburger-box { perspective: 80px; } .hamburger--3dy .hamburger-inner { transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dy .hamburger-inner::before, .hamburger--3dy .hamburger-inner::after { transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dy.is-active .hamburger-inner { background-color: transparent !important; transform: rotateX(-180deg); } .hamburger--3dy.is-active .hamburger-inner::before { transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dy.is-active .hamburger-inner::after { transform: translate3d(0, -10px, 0) rotate(-45deg); } /* * 3DY Reverse */ .hamburger--3dy-r .hamburger-box { perspective: 80px; } .hamburger--3dy-r .hamburger-inner { transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dy-r .hamburger-inner::before, .hamburger--3dy-r .hamburger-inner::after { transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dy-r.is-active .hamburger-inner { background-color: transparent !important; transform: rotateX(180deg); } .hamburger--3dy-r.is-active .hamburger-inner::before { transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dy-r.is-active .hamburger-inner::after { transform: translate3d(0, -10px, 0) rotate(-45deg); } /* * 3DXY */ .hamburger--3dxy .hamburger-box { perspective: 80px; } .hamburger--3dxy .hamburger-inner { transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dxy .hamburger-inner::before, .hamburger--3dxy .hamburger-inner::after { transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dxy.is-active .hamburger-inner { background-color: transparent !important; transform: rotateX(180deg) rotateY(180deg); } .hamburger--3dxy.is-active .hamburger-inner::before { transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dxy.is-active .hamburger-inner::after { transform: translate3d(0, -10px, 0) rotate(-45deg); } /* * 3DXY Reverse */ .hamburger--3dxy-r .hamburger-box { perspective: 80px; } .hamburger--3dxy-r .hamburger-inner { transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dxy-r .hamburger-inner::before, .hamburger--3dxy-r .hamburger-inner::after { transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dxy-r.is-active .hamburger-inner { background-color: transparent !important; transform: rotateX(180deg) rotateY(180deg) rotateZ(-180deg); } .hamburger--3dxy-r.is-active .hamburger-inner::before { transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dxy-r.is-active .hamburger-inner::after { transform: translate3d(0, -10px, 0) rotate(-45deg); } /* * Arrow */ .hamburger--arrow.is-active .hamburger-inner::before { transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1); } .hamburger--arrow.is-active .hamburger-inner::after { transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1); } /* * Arrow Right */ .hamburger--arrow-r.is-active .hamburger-inner::before { transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1); } .hamburger--arrow-r.is-active .hamburger-inner::after { transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1); } /* * Arrow Alt */ .hamburger--arrowalt .hamburger-inner::before { transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt .hamburger-inner::after { transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt.is-active .hamburger-inner::before { top: 0; transform: translate3d(-8px, -10px, 0) rotate(-45deg) scale(0.7, 1); transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } .hamburger--arrowalt.is-active .hamburger-inner::after { bottom: 0; transform: translate3d(-8px, 10px, 0) rotate(45deg) scale(0.7, 1); transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } /* * Arrow Alt Right */ .hamburger--arrowalt-r .hamburger-inner::before { transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt-r .hamburger-inner::after { transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt-r.is-active .hamburger-inner::before { top: 0; transform: translate3d(8px, -10px, 0) rotate(45deg) scale(0.7, 1); transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } .hamburger--arrowalt-r.is-active .hamburger-inner::after { bottom: 0; transform: translate3d(8px, 10px, 0) rotate(-45deg) scale(0.7, 1); transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } /* * Arrow Turn */ .hamburger--arrowturn.is-active .hamburger-inner { transform: rotate(-180deg); } .hamburger--arrowturn.is-active .hamburger-inner::before { transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1); } .hamburger--arrowturn.is-active .hamburger-inner::after { transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1); } /* * Arrow Turn Right */ .hamburger--arrowturn-r.is-active .hamburger-inner { transform: rotate(-180deg); } .hamburger--arrowturn-r.is-active .hamburger-inner::before { transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1); } .hamburger--arrowturn-r.is-active .hamburger-inner::after { transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1); } /* * Boring */ .hamburger--boring .hamburger-inner, .hamburger--boring .hamburger-inner::before, .hamburger--boring .hamburger-inner::after { transition-property: none; } .hamburger--boring.is-active .hamburger-inner { transform: rotate(45deg); } .hamburger--boring.is-active .hamburger-inner::before { top: 0; opacity: 0; } .hamburger--boring.is-active .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); } /* * Collapse */ .hamburger--collapse .hamburger-inner { top: auto; bottom: 0; transition-duration: 0.13s; transition-delay: 0.13s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse .hamburger-inner::after { top: -20px; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; } .hamburger--collapse .hamburger-inner::before { transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse.is-active .hamburger-inner { transform: translate3d(0, -10px, 0) rotate(-45deg); transition-delay: 0.22s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--collapse.is-active .hamburger-inner::after { top: 0; opacity: 0; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; } .hamburger--collapse.is-active .hamburger-inner::before { top: 0; transform: rotate(-90deg); transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Collapse Reverse */ .hamburger--collapse-r .hamburger-inner { top: auto; bottom: 0; transition-duration: 0.13s; transition-delay: 0.13s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse-r .hamburger-inner::after { top: -20px; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; } .hamburger--collapse-r .hamburger-inner::before { transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse-r.is-active .hamburger-inner { transform: translate3d(0, -10px, 0) rotate(45deg); transition-delay: 0.22s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--collapse-r.is-active .hamburger-inner::after { top: 0; opacity: 0; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; } .hamburger--collapse-r.is-active .hamburger-inner::before { top: 0; transform: rotate(90deg); transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Elastic */ .hamburger--elastic .hamburger-inner { top: 2px; transition-duration: 0.275s; transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic .hamburger-inner::before { top: 10px; transition: opacity 0.125s 0.275s ease; } .hamburger--elastic .hamburger-inner::after { top: 20px; transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic.is-active .hamburger-inner { transform: translate3d(0, 10px, 0) rotate(135deg); transition-delay: 0.075s; } .hamburger--elastic.is-active .hamburger-inner::before { transition-delay: 0s; opacity: 0; } .hamburger--elastic.is-active .hamburger-inner::after { transform: translate3d(0, -20px, 0) rotate(-270deg); transition-delay: 0.075s; } /* * Elastic Reverse */ .hamburger--elastic-r .hamburger-inner { top: 2px; transition-duration: 0.275s; transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic-r .hamburger-inner::before { top: 10px; transition: opacity 0.125s 0.275s ease; } .hamburger--elastic-r .hamburger-inner::after { top: 20px; transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic-r.is-active .hamburger-inner { transform: translate3d(0, 10px, 0) rotate(-135deg); transition-delay: 0.075s; } .hamburger--elastic-r.is-active .hamburger-inner::before { transition-delay: 0s; opacity: 0; } .hamburger--elastic-r.is-active .hamburger-inner::after { transform: translate3d(0, -20px, 0) rotate(270deg); transition-delay: 0.075s; } /* * Emphatic */ .hamburger--emphatic { overflow: hidden; } .hamburger--emphatic .hamburger-inner { transition: background-color 0.125s 0.175s ease-in; } .hamburger--emphatic .hamburger-inner::before { left: 0; transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in; } .hamburger--emphatic .hamburger-inner::after { top: 10px; right: 0; transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in; } .hamburger--emphatic.is-active .hamburger-inner { transition-delay: 0s; transition-timing-function: ease-out; background-color: transparent !important; } .hamburger--emphatic.is-active .hamburger-inner::before { left: -80px; top: -80px; transform: translate3d(80px, 80px, 0) rotate(45deg); transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); } .hamburger--emphatic.is-active .hamburger-inner::after { right: -80px; top: -80px; transform: translate3d(-80px, 80px, 0) rotate(-45deg); transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); } /* * Emphatic Reverse */ .hamburger--emphatic-r { overflow: hidden; } .hamburger--emphatic-r .hamburger-inner { transition: background-color 0.125s 0.175s ease-in; } .hamburger--emphatic-r .hamburger-inner::before { left: 0; transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in; } .hamburger--emphatic-r .hamburger-inner::after { top: 10px; right: 0; transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in; } .hamburger--emphatic-r.is-active .hamburger-inner { transition-delay: 0s; transition-timing-function: ease-out; background-color: transparent !important; } .hamburger--emphatic-r.is-active .hamburger-inner::before { left: -80px; top: 80px; transform: translate3d(80px, -80px, 0) rotate(-45deg); transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); } .hamburger--emphatic-r.is-active .hamburger-inner::after { right: -80px; top: 80px; transform: translate3d(-80px, -80px, 0) rotate(45deg); transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); } /* * Minus */ .hamburger--minus .hamburger-inner::before, .hamburger--minus .hamburger-inner::after { transition: bottom 0.08s 0s ease-out, top 0.08s 0s ease-out, opacity 0s linear; } .hamburger--minus.is-active .hamburger-inner::before, .hamburger--minus.is-active .hamburger-inner::after { opacity: 0; transition: bottom 0.08s ease-out, top 0.08s ease-out, opacity 0s 0.08s linear; } .hamburger--minus.is-active .hamburger-inner::before { top: 0; } .hamburger--minus.is-active .hamburger-inner::after { bottom: 0; } /* * Slider */ .hamburger--slider .hamburger-inner { top: 2px; } .hamburger--slider .hamburger-inner::before { top: 10px; transition-property: transform, opacity; transition-timing-function: ease; transition-duration: 0.15s; } .hamburger--slider .hamburger-inner::after { top: 20px; } .hamburger--slider.is-active .hamburger-inner { transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--slider.is-active .hamburger-inner::before { transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0); opacity: 0; } .hamburger--slider.is-active .hamburger-inner::after { transform: translate3d(0, -20px, 0) rotate(-90deg); } /* * Slider Reverse */ .hamburger--slider-r .hamburger-inner { top: 2px; } .hamburger--slider-r .hamburger-inner::before { top: 10px; transition-property: transform, opacity; transition-timing-function: ease; transition-duration: 0.15s; } .hamburger--slider-r .hamburger-inner::after { top: 20px; } .hamburger--slider-r.is-active .hamburger-inner { transform: translate3d(0, 10px, 0) rotate(-45deg); } .hamburger--slider-r.is-active .hamburger-inner::before { transform: rotate(45deg) translate3d(5.71429px, -6px, 0); opacity: 0; } .hamburger--slider-r.is-active .hamburger-inner::after { transform: translate3d(0, -20px, 0) rotate(90deg); } /* * Spin */ .hamburger--spin .hamburger-inner { transition-duration: 0.22s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin .hamburger-inner::before { transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; } .hamburger--spin .hamburger-inner::after { transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin.is-active .hamburger-inner { transform: rotate(225deg); transition-delay: 0.12s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--spin.is-active .hamburger-inner::before { top: 0; opacity: 0; transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; } .hamburger--spin.is-active .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Spin Reverse */ .hamburger--spin-r .hamburger-inner { transition-duration: 0.22s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin-r .hamburger-inner::before { transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; } .hamburger--spin-r .hamburger-inner::after { transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin-r.is-active .hamburger-inner { transform: rotate(-225deg); transition-delay: 0.12s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--spin-r.is-active .hamburger-inner::before { top: 0; opacity: 0; transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; } .hamburger--spin-r.is-active .hamburger-inner::after { bottom: 0; transform: rotate(90deg); transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Spring */ .hamburger--spring .hamburger-inner { top: 2px; transition: background-color 0s 0.13s linear; } .hamburger--spring .hamburger-inner::before { top: 10px; transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring .hamburger-inner::after { top: 20px; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring.is-active .hamburger-inner { transition-delay: 0.22s; background-color: transparent !important; } .hamburger--spring.is-active .hamburger-inner::before { top: 0; transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--spring.is-active .hamburger-inner::after { top: 0; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 10px, 0) rotate(-45deg); } /* * Spring Reverse */ .hamburger--spring-r .hamburger-inner { top: auto; bottom: 0; transition-duration: 0.13s; transition-delay: 0s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring-r .hamburger-inner::after { top: -20px; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0s linear; } .hamburger--spring-r .hamburger-inner::before { transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring-r.is-active .hamburger-inner { transform: translate3d(0, -10px, 0) rotate(-45deg); transition-delay: 0.22s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--spring-r.is-active .hamburger-inner::after { top: 0; opacity: 0; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0s 0.22s linear; } .hamburger--spring-r.is-active .hamburger-inner::before { top: 0; transform: rotate(90deg); transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Stand */ .hamburger--stand .hamburger-inner { transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear; } .hamburger--stand .hamburger-inner::before { transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand .hamburger-inner::after { transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand.is-active .hamburger-inner { transform: rotate(90deg); background-color: transparent !important; transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear; } .hamburger--stand.is-active .hamburger-inner::before { top: 0; transform: rotate(-45deg); transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--stand.is-active .hamburger-inner::after { bottom: 0; transform: rotate(45deg); transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Stand Reverse */ .hamburger--stand-r .hamburger-inner { transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear; } .hamburger--stand-r .hamburger-inner::before { transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand-r .hamburger-inner::after { transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand-r.is-active .hamburger-inner { transform: rotate(-90deg); background-color: transparent !important; transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear; } .hamburger--stand-r.is-active .hamburger-inner::before { top: 0; transform: rotate(-45deg); transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--stand-r.is-active .hamburger-inner::after { bottom: 0; transform: rotate(45deg); transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Squeeze */ .hamburger--squeeze .hamburger-inner { transition-duration: 0.075s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--squeeze .hamburger-inner::before { transition: top 0.075s 0.12s ease, opacity 0.075s ease; } .hamburger--squeeze .hamburger-inner::after { transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--squeeze.is-active .hamburger-inner { transform: rotate(45deg); transition-delay: 0.12s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--squeeze.is-active .hamburger-inner::before { top: 0; opacity: 0; transition: top 0.075s ease, opacity 0.075s 0.12s ease; } .hamburger--squeeze.is-active .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Vortex */ .hamburger--vortex .hamburger-inner { transition-duration: 0.2s; transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .hamburger--vortex .hamburger-inner::before, .hamburger--vortex .hamburger-inner::after { transition-duration: 0s; transition-delay: 0.1s; transition-timing-function: linear; } .hamburger--vortex .hamburger-inner::before { transition-property: top, opacity; } .hamburger--vortex .hamburger-inner::after { transition-property: bottom, transform; } .hamburger--vortex.is-active .hamburger-inner { transform: rotate(765deg); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .hamburger--vortex.is-active .hamburger-inner::before, .hamburger--vortex.is-active .hamburger-inner::after { transition-delay: 0s; } .hamburger--vortex.is-active .hamburger-inner::before { top: 0; opacity: 0; } .hamburger--vortex.is-active .hamburger-inner::after { bottom: 0; transform: rotate(90deg); } /* * Vortex Reverse */ .hamburger--vortex-r .hamburger-inner { transition-duration: 0.2s; transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .hamburger--vortex-r .hamburger-inner::before, .hamburger--vortex-r .hamburger-inner::after { transition-duration: 0s; transition-delay: 0.1s; transition-timing-function: linear; } .hamburger--vortex-r .hamburger-inner::before { transition-property: top, opacity; } .hamburger--vortex-r .hamburger-inner::after { transition-property: bottom, transform; } .hamburger--vortex-r.is-active .hamburger-inner { transform: rotate(-765deg); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .hamburger--vortex-r.is-active .hamburger-inner::before, .hamburger--vortex-r.is-active .hamburger-inner::after { transition-delay: 0s; } .hamburger--vortex-r.is-active .hamburger-inner::before { top: 0; opacity: 0; } .hamburger--vortex-r.is-active .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); } /* * 䞊䞋回転 */ .hamburger--rotate .hamburger-inner { /* 2本目 */ top: 2px; } .hamburger--rotate .hamburger-inner::before { /* 1本目 */ top: 10px; transition-property: transform, opacity; transition-timing-function: ease; transition-duration: 0.15s; } .hamburger--rotate .hamburger-inner::after { /* 3本目 */ top: 20px; } .hamburger--rotate.is-active .hamburger-inner { transform: translate3d(0, 10px, 0) rotate(135deg); } .hamburger--rotate.is-active .hamburger-inner::before { transform: rotate(-135deg) translate3d(0, 8px, 0); opacity: 0; } .hamburger--rotate.is-active .hamburger-inner::after { transform: translate3d(0, -20px, 0) rotate(-270deg); } code { display: inline-block; } code, .hamburger { vertical-align: middle; } <-抌䞋でデモ /*! * Hamburgers * @description Tasty CSS-animated hamburgers * @author Jonathan Suh @jonsuh * @site https://jonsuh.com/hamburgers * @link https://github.com/jonsuh/hamburgers */ .hamburger { padding: 15px 15px; display: inline-block; cursor: pointer; transition-property: opacity, filter; transition-duration: 0.15s; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible; } .hamburger:hover { opacity: 0.7; } .hamburger.is-active:hover { opacity: 0.7; } .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after { background-color: #000; } .hamburger-box { width: 40px; height: 24px; display: inline-block; position: relative; } .hamburger-inner { display: block; top: 50%; margin-top: -2px; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 40px; height: 4px; background-color: #000; border-radius: 4px; position: absolute; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease; } .hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; } .hamburger-inner::before { top: -10px; } .hamburger-inner::after { bottom: -10px; } /* * 3DX */ .hamburger--3dx .hamburger-box { perspective: 80px; } .hamburger--3dx .hamburger-inner { transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dx .hamburger-inner::before, .hamburger--3dx .hamburger-inner::after { transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dx.is-active .hamburger-inner { background-color: transparent !important; transform: rotateY(180deg); } .hamburger--3dx.is-active .hamburger-inner::before { transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dx.is-active .hamburger-inner::after { transform: translate3d(0, -10px, 0) rotate(-45deg); } /* * 3DX Reverse */ .hamburger--3dx-r .hamburger-box { perspective: 80px; } .hamburger--3dx-r .hamburger-inner { transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dx-r .hamburger-inner::before, .hamburger--3dx-r .hamburger-inner::after { transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dx-r.is-active .hamburger-inner { background-color: transparent !important; transform: rotateY(-180deg); } .hamburger--3dx-r.is-active .hamburger-inner::before { transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dx-r.is-active .hamburger-inner::after { transform: translate3d(0, -10px, 0) rotate(-45deg); } /* * 3DY */ .hamburger--3dy .hamburger-box { perspective: 80px; } .hamburger--3dy .hamburger-inner { transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dy .hamburger-inner::before, .hamburger--3dy .hamburger-inner::after { transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dy.is-active .hamburger-inner { background-color: transparent !important; transform: rotateX(-180deg); } .hamburger--3dy.is-active .hamburger-inner::before { transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dy.is-active .hamburger-inner::after { transform: translate3d(0, -10px, 0) rotate(-45deg); } /* * 3DY Reverse */ .hamburger--3dy-r .hamburger-box { perspective: 80px; } .hamburger--3dy-r .hamburger-inner { transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dy-r .hamburger-inner::before, .hamburger--3dy-r .hamburger-inner::after { transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dy-r.is-active .hamburger-inner { background-color: transparent !important; transform: rotateX(180deg); } .hamburger--3dy-r.is-active .hamburger-inner::before { transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dy-r.is-active .hamburger-inner::after { transform: translate3d(0, -10px, 0) rotate(-45deg); } /* * 3DXY */ .hamburger--3dxy .hamburger-box { perspective: 80px; } .hamburger--3dxy .hamburger-inner { transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dxy .hamburger-inner::before, .hamburger--3dxy .hamburger-inner::after { transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dxy.is-active .hamburger-inner { background-color: transparent !important; transform: rotateX(180deg) rotateY(180deg); } .hamburger--3dxy.is-active .hamburger-inner::before { transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dxy.is-active .hamburger-inner::after { transform: translate3d(0, -10px, 0) rotate(-45deg); } /* * 3DXY Reverse */ .hamburger--3dxy-r .hamburger-box { perspective: 80px; } .hamburger--3dxy-r .hamburger-inner { transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dxy-r .hamburger-inner::before, .hamburger--3dxy-r .hamburger-inner::after { transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dxy-r.is-active .hamburger-inner { background-color: transparent !important; transform: rotateX(180deg) rotateY(180deg) rotateZ(-180deg); } .hamburger--3dxy-r.is-active .hamburger-inner::before { transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dxy-r.is-active .hamburger-inner::after { transform: translate3d(0, -10px, 0) rotate(-45deg); } /* * Arrow */ .hamburger--arrow.is-active .hamburger-inner::before { transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1); } .hamburger--arrow.is-active .hamburger-inner::after { transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1); } /* * Arrow Right */ .hamburger--arrow-r.is-active .hamburger-inner::before { transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1); } .hamburger--arrow-r.is-active .hamburger-inner::after { transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1); } /* * Arrow Alt */ .hamburger--arrowalt .hamburger-inner::before { transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt .hamburger-inner::after { transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt.is-active .hamburger-inner::before { top: 0; transform: translate3d(-8px, -10px, 0) rotate(-45deg) scale(0.7, 1); transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } .hamburger--arrowalt.is-active .hamburger-inner::after { bottom: 0; transform: translate3d(-8px, 10px, 0) rotate(45deg) scale(0.7, 1); transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } /* * Arrow Alt Right */ .hamburger--arrowalt-r .hamburger-inner::before { transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt-r .hamburger-inner::after { transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt-r.is-active .hamburger-inner::before { top: 0; transform: translate3d(8px, -10px, 0) rotate(45deg) scale(0.7, 1); transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } .hamburger--arrowalt-r.is-active .hamburger-inner::after { bottom: 0; transform: translate3d(8px, 10px, 0) rotate(-45deg) scale(0.7, 1); transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } /* * Arrow Turn */ .hamburger--arrowturn.is-active .hamburger-inner { transform: rotate(-180deg); } .hamburger--arrowturn.is-active .hamburger-inner::before { transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1); } .hamburger--arrowturn.is-active .hamburger-inner::after { transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1); } /* * Arrow Turn Right */ .hamburger--arrowturn-r.is-active .hamburger-inner { transform: rotate(-180deg); } .hamburger--arrowturn-r.is-active .hamburger-inner::before { transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1); } .hamburger--arrowturn-r.is-active .hamburger-inner::after { transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1); } /* * Boring */ .hamburger--boring .hamburger-inner, .hamburger--boring .hamburger-inner::before, .hamburger--boring .hamburger-inner::after { transition-property: none; } .hamburger--boring.is-active .hamburger-inner { transform: rotate(45deg); } .hamburger--boring.is-active .hamburger-inner::before { top: 0; opacity: 0; } .hamburger--boring.is-active .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); } /* * Collapse */ .hamburger--collapse .hamburger-inner { top: auto; bottom: 0; transition-duration: 0.13s; transition-delay: 0.13s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse .hamburger-inner::after { top: -20px; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; } .hamburger--collapse .hamburger-inner::before { transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse.is-active .hamburger-inner { transform: translate3d(0, -10px, 0) rotate(-45deg); transition-delay: 0.22s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--collapse.is-active .hamburger-inner::after { top: 0; opacity: 0; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; } .hamburger--collapse.is-active .hamburger-inner::before { top: 0; transform: rotate(-90deg); transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Collapse Reverse */ .hamburger--collapse-r .hamburger-inner { top: auto; bottom: 0; transition-duration: 0.13s; transition-delay: 0.13s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse-r .hamburger-inner::after { top: -20px; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; } .hamburger--collapse-r .hamburger-inner::before { transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse-r.is-active .hamburger-inner { transform: translate3d(0, -10px, 0) rotate(45deg); transition-delay: 0.22s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--collapse-r.is-active .hamburger-inner::after { top: 0; opacity: 0; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; } .hamburger--collapse-r.is-active .hamburger-inner::before { top: 0; transform: rotate(90deg); transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Elastic */ .hamburger--elastic .hamburger-inner { top: 2px; transition-duration: 0.275s; transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic .hamburger-inner::before { top: 10px; transition: opacity 0.125s 0.275s ease; } .hamburger--elastic .hamburger-inner::after { top: 20px; transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic.is-active .hamburger-inner { transform: translate3d(0, 10px, 0) rotate(135deg); transition-delay: 0.075s; } .hamburger--elastic.is-active .hamburger-inner::before { transition-delay: 0s; opacity: 0; } .hamburger--elastic.is-active .hamburger-inner::after { transform: translate3d(0, -20px, 0) rotate(-270deg); transition-delay: 0.075s; } /* * Elastic Reverse */ .hamburger--elastic-r .hamburger-inner { top: 2px; transition-duration: 0.275s; transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic-r .hamburger-inner::before { top: 10px; transition: opacity 0.125s 0.275s ease; } .hamburger--elastic-r .hamburger-inner::after { top: 20px; transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic-r.is-active .hamburger-inner { transform: translate3d(0, 10px, 0) rotate(-135deg); transition-delay: 0.075s; } .hamburger--elastic-r.is-active .hamburger-inner::before { transition-delay: 0s; opacity: 0; } .hamburger--elastic-r.is-active .hamburger-inner::after { transform: translate3d(0, -20px, 0) rotate(270deg); transition-delay: 0.075s; } /* * Emphatic */ .hamburger--emphatic { overflow: hidden; } .hamburger--emphatic .hamburger-inner { transition: background-color 0.125s 0.175s ease-in; } .hamburger--emphatic .hamburger-inner::before { left: 0; transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in; } .hamburger--emphatic .hamburger-inner::after { top: 10px; right: 0; transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in; } .hamburger--emphatic.is-active .hamburger-inner { transition-delay: 0s; transition-timing-function: ease-out; background-color: transparent !important; } .hamburger--emphatic.is-active .hamburger-inner::before { left: -80px; top: -80px; transform: translate3d(80px, 80px, 0) rotate(45deg); transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); } .hamburger--emphatic.is-active .hamburger-inner::after { right: -80px; top: -80px; transform: translate3d(-80px, 80px, 0) rotate(-45deg); transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); } /* * Emphatic Reverse */ .hamburger--emphatic-r { overflow: hidden; } .hamburger--emphatic-r .hamburger-inner { transition: background-color 0.125s 0.175s ease-in; } .hamburger--emphatic-r .hamburger-inner::before { left: 0; transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in; } .hamburger--emphatic-r .hamburger-inner::after { top: 10px; right: 0; transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in; } .hamburger--emphatic-r.is-active .hamburger-inner { transition-delay: 0s; transition-timing-function: ease-out; background-color: transparent !important; } .hamburger--emphatic-r.is-active .hamburger-inner::before { left: -80px; top: 80px; transform: translate3d(80px, -80px, 0) rotate(-45deg); transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); } .hamburger--emphatic-r.is-active .hamburger-inner::after { right: -80px; top: 80px; transform: translate3d(-80px, -80px, 0) rotate(45deg); transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); } /* * Minus */ .hamburger--minus .hamburger-inner::before, .hamburger--minus .hamburger-inner::after { transition: bottom 0.08s 0s ease-out, top 0.08s 0s ease-out, opacity 0s linear; } .hamburger--minus.is-active .hamburger-inner::before, .hamburger--minus.is-active .hamburger-inner::after { opacity: 0; transition: bottom 0.08s ease-out, top 0.08s ease-out, opacity 0s 0.08s linear; } .hamburger--minus.is-active .hamburger-inner::before { top: 0; } .hamburger--minus.is-active .hamburger-inner::after { bottom: 0; } /* * Slider */ .hamburger--slider .hamburger-inner { top: 2px; } .hamburger--slider .hamburger-inner::before { top: 10px; transition-property: transform, opacity; transition-timing-function: ease; transition-duration: 0.15s; } .hamburger--slider .hamburger-inner::after { top: 20px; } .hamburger--slider.is-active .hamburger-inner { transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--slider.is-active .hamburger-inner::before { transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0); opacity: 0; } .hamburger--slider.is-active .hamburger-inner::after { transform: translate3d(0, -20px, 0) rotate(-90deg); } /* * Slider Reverse */ .hamburger--slider-r .hamburger-inner { top: 2px; } .hamburger--slider-r .hamburger-inner::before { top: 10px; transition-property: transform, opacity; transition-timing-function: ease; transition-duration: 0.15s; } .hamburger--slider-r .hamburger-inner::after { top: 20px; } .hamburger--slider-r.is-active .hamburger-inner { transform: translate3d(0, 10px, 0) rotate(-45deg); } .hamburger--slider-r.is-active .hamburger-inner::before { transform: rotate(45deg) translate3d(5.71429px, -6px, 0); opacity: 0; } .hamburger--slider-r.is-active .hamburger-inner::after { transform: translate3d(0, -20px, 0) rotate(90deg); } /* * Spin */ .hamburger--spin .hamburger-inner { transition-duration: 0.22s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin .hamburger-inner::before { transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; } .hamburger--spin .hamburger-inner::after { transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin.is-active .hamburger-inner { transform: rotate(225deg); transition-delay: 0.12s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--spin.is-active .hamburger-inner::before { top: 0; opacity: 0; transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; } .hamburger--spin.is-active .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Spin Reverse */ .hamburger--spin-r .hamburger-inner { transition-duration: 0.22s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin-r .hamburger-inner::before { transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; } .hamburger--spin-r .hamburger-inner::after { transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin-r.is-active .hamburger-inner { transform: rotate(-225deg); transition-delay: 0.12s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--spin-r.is-active .hamburger-inner::before { top: 0; opacity: 0; transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; } .hamburger--spin-r.is-active .hamburger-inner::after { bottom: 0; transform: rotate(90deg); transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Spring */ .hamburger--spring .hamburger-inner { top: 2px; transition: background-color 0s 0.13s linear; } .hamburger--spring .hamburger-inner::before { top: 10px; transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring .hamburger-inner::after { top: 20px; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring.is-active .hamburger-inner { transition-delay: 0.22s; background-color: transparent !important; } .hamburger--spring.is-active .hamburger-inner::before { top: 0; transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--spring.is-active .hamburger-inner::after { top: 0; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 10px, 0) rotate(-45deg); } /* * Spring Reverse */ .hamburger--spring-r .hamburger-inner { top: auto; bottom: 0; transition-duration: 0.13s; transition-delay: 0s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring-r .hamburger-inner::after { top: -20px; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0s linear; } .hamburger--spring-r .hamburger-inner::before { transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring-r.is-active .hamburger-inner { transform: translate3d(0, -10px, 0) rotate(-45deg); transition-delay: 0.22s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--spring-r.is-active .hamburger-inner::after { top: 0; opacity: 0; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0s 0.22s linear; } .hamburger--spring-r.is-active .hamburger-inner::before { top: 0; transform: rotate(90deg); transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Stand */ .hamburger--stand .hamburger-inner { transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear; } .hamburger--stand .hamburger-inner::before { transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand .hamburger-inner::after { transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand.is-active .hamburger-inner { transform: rotate(90deg); background-color: transparent !important; transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear; } .hamburger--stand.is-active .hamburger-inner::before { top: 0; transform: rotate(-45deg); transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--stand.is-active .hamburger-inner::after { bottom: 0; transform: rotate(45deg); transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Stand Reverse */ .hamburger--stand-r .hamburger-inner { transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear; } .hamburger--stand-r .hamburger-inner::before { transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand-r .hamburger-inner::after { transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand-r.is-active .hamburger-inner { transform: rotate(-90deg); background-color: transparent !important; transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear; } .hamburger--stand-r.is-active .hamburger-inner::before { top: 0; transform: rotate(-45deg); transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--stand-r.is-active .hamburger-inner::after { bottom: 0; transform: rotate(45deg); transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Squeeze */ .hamburger--squeeze .hamburger-inner { transition-duration: 0.075s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--squeeze .hamburger-inner::before { transition: top 0.075s 0.12s ease, opacity 0.075s ease; } .hamburger--squeeze .hamburger-inner::after { transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--squeeze.is-active .hamburger-inner { transform: rotate(45deg); transition-delay: 0.12s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--squeeze.is-active .hamburger-inner::before { top: 0; opacity: 0; transition: top 0.075s ease, opacity 0.075s 0.12s ease; } .hamburger--squeeze.is-active .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Vortex */ .hamburger--vortex .hamburger-inner { transition-duration: 0.2s; transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .hamburger--vortex .hamburger-inner::before, .hamburger--vortex .hamburger-inner::after { transition-duration: 0s; transition-delay: 0.1s; transition-timing-function: linear; } .hamburger--vortex .hamburger-inner::before { transition-property: top, opacity; } .hamburger--vortex .hamburger-inner::after { transition-property: bottom, transform; } .hamburger--vortex.is-active .hamburger-inner { transform: rotate(765deg); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .hamburger--vortex.is-active .hamburger-inner::before, .hamburger--vortex.is-active .hamburger-inner::after { transition-delay: 0s; } .hamburger--vortex.is-active .hamburger-inner::before { top: 0; opacity: 0; } .hamburger--vortex.is-active .hamburger-inner::after { bottom: 0; transform: rotate(90deg); } /* * Vortex Reverse */ .hamburger--vortex-r .hamburger-inner { transition-duration: 0.2s; transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .hamburger--vortex-r .hamburger-inner::before, .hamburger--vortex-r .hamburger-inner::after { transition-duration: 0s; transition-delay: 0.1s; transition-timing-function: linear; } .hamburger--vortex-r .hamburger-inner::before { transition-property: top, opacity; } .hamburger--vortex-r .hamburger-inner::after { transition-property: bottom, transform; } .hamburger--vortex-r.is-active .hamburger-inner { transform: rotate(-765deg); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .hamburger--vortex-r.is-active .hamburger-inner::before, .hamburger--vortex-r.is-active .hamburger-inner::after { transition-delay: 0s; } .hamburger--vortex-r.is-active .hamburger-inner::before { top: 0; opacity: 0; } .hamburger--vortex-r.is-active .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); } code { display: inline-block; } code, .hamburger { vertical-align: middle; } 䞀番倚いアニメヌションは、党䜓の38.1%のサむトで採甚されおいる「Slider」。 䞊段ず䞋段のバヌが45床回転し、䞭段のバヌが消えたす。 動きが小さく、アニメヌションが䞻匵せず、自然に切り替わるのが人気の理由ず考えられたす。 Jonathan氏のラむブラリでは䞭段のバヌが氎平方向ぞ移動しながら消倱したすが、今回の集蚈では䞭段のバヌが移動せずにフェヌドアりトするものもカりントしおいたす。 たた、巊右反転のものも含めおいたす。 「Boring」 <-抌䞋でデモ 「アニメヌション」ず呌んではいけないかもしれたせんが、ハンバヌガヌメニュヌず閉じるボタンの䞭間のフレヌムがれロで、すぐに切り替わる「Boring」が20.9%で次点でした。 UIデザむンの際に、そもそもアニメヌションを怜蚎しない堎合も倚いでしょう。 アニメヌションありきの芖点で考えるず「぀たらない」「物足りない」パタヌンず捉えるこずずなっおしたいたすが、最もシンプルな衚瀺であり「アニメヌションも怜蚎したが採甚しない」ずいう結論もあるかず思いたす。 倚くのサむトが圓おはたるのは玍埗です。 「Squeeze」 <-抌䞋でデモ 3䜍は党䜓の8.7%で「Squeeze」でした。 䞊段ず䞋段のバヌが䞭段のバヌに重なり、1本になったバヌが2本に分かれお広がり閉じるボタンずなるアニメヌションです。 垞に巊右察称のたた、バヌが3本、1本、2本ず倉化する動きは安定感を感じたす。 なお、集蚈では、䞊段ず䞋段のバヌがフェヌドアりトしおいくケヌスも含めたした。 「䞊䞋回転」 <-抌䞋でデモ 「Slider」の䞊段ず䞋段のバヌがさらに90床回転するアニメヌションが党䜓の4.8%でした。 巊右反転のものも含めおいたす。 板状のものを氎平方向に裏返しおいるようにも感じられ「切り替え感」がありたす。 これはJonathan氏のラむブラリには存圚しおいないため、仮に「䞊䞋回転」ずラベルしたした。 「そのたた」 これも、アニメヌションず呌べないですが、ハンバヌガヌメニュヌを抌䞋しおもアむコンは倉化せず、もう䞀床抌䞋するずナビゲヌションが閉じるケヌスが4.6%でした。 「Spin」 <-抌䞋でデモ /** * forEach implementation for Objects/NodeLists/Arrays, automatic type loops and context options * * @private * @author Todd Motto * @link https://github.com/toddmotto/foreach * @param {Array|Object|NodeList} collection - Collection of items to iterate, could be an Array, Object or NodeList * @callback requestCallback callback - Callback function for each iteration. * @param {Array|Object|NodeList} scope=null - Object/NodeList/Array that forEach is iterating over, to use as the this value when executing callback. * @returns {} */ var forEach=function(t,o,r){if("[object Object]"===Object.prototype.toString.call(t))for(var c in t)Object.prototype.hasOwnProperty.call(t,c)&&o.call(r,t,c,t);else for(var e=0,l=t.length;l>e;e++)o.call(r,t[e],e,t)}; var hamburgers = document.querySelectorAll(".hamburger"); if (hamburgers.length > 0) { forEach(hamburgers, function(hamburger) { hamburger.addEventListener("click", function() { this.classList.toggle("is-active"); }, false); }); } 「Squeeze」ず同様に3本が1本ずなったあず、党䜓が回転しながら「✕」ぞ倉化する「Spin」が3.8%。 巊右反転のものも含めおいたす。 ドアノブを回転させるような動きは、メニュヌの開閉ず銎染みたす。 補足 䞊蚘は、党䜓1,544サむトのうち、1%以䞊のアニメヌションパタヌンの玹介で、残りの玄20%は䞊蚘以倖のパタヌンや、開閉メニュヌが無いサむト2.6%でした。 調べおみるず想像以䞊にアニメヌションの動きは様々で、そのサむトでしか芋られない動きも倚くありたした。 集蚈では、3本線のハンバヌガヌメニュヌアむコンのほか、2本線や4本線のハンバヌガヌメニュヌアむコンの堎合も、動きが同様であれば「Slider」「Squeeze」などに分類しおいたす。 党䜓のうち7.2%は2本線のハンバヌガヌアむコンでした。 たずめ ナビゲヌションメニュヌが、画面の䞊䞋巊右どこから出珟するか、どのような速床で出珟するか、たた、サむトの内容や䞖界芳により適切なアニメヌションは倉わりたす。 䟋えば、装食的なサむトであれば、アニメヌションの動きもリッチな衚珟が合いそうですし、スピヌディヌに情報を䌝える堎合はアニメヌションしないBoringも立掟な遞択肢かず思いたす。 以䞊、UIを怜蚎する際の䞀助になれば幞いです。 ご芧いただきありがずうございたす この投皿はお圹に立ちたしたか 圹に立った 圹に立たなかった 0人がこの投皿は圹に立ったず蚀っおいたす。 The post UIデザむンの参考に – ハンバヌガヌメニュヌのアニメヌションスタむル調査レポヌト first appeared on SIOS Tech Lab .
自己玹介ずむンタヌン参加理由 自己玹介 こんにちは関西孊院倧孊倧孊院 理工孊研究科 情報工孊専攻 修士1幎の山圢隌士です。 普段はスポヌツ分野、特に「バスケットボヌルにおけるAIの掻甚」をテヌマに研究を行っおいたす。 なぜ数ある䌁業からここサむオスのむンタヌンシップを遞んだのか 同期の玹介でサむオスを知り、2぀の理由から応募を決めたした。 1぀目は、 AIを甚いたハッカ゜ン型チヌム開発を䜓隓できる点 です。倧孊院でのAI研究の知芋を掻かしながら、チヌムでの実践経隓を積みたいず考えたした。 2぀目は、 珟圹゚ンゞニアず深く亀流できる点 です。珟堎の思考や働き方に觊れられる機䌚の倚さに惹かれたした。 この実践的な環境なら倧きく成長できるず確信し、迷わず参加を決意したした。 むンタヌンシップでの成果物 成果物の玹介 今回開発したのは、 「忙しくお蚈画が続かない」ず悩む理系倧孊3幎生のために、目暙たでの道のりを自動生成し、蚈画倒れを防ぎながら「今日やるべき3぀のこず」だけをナビゲヌトしおくれるWebアプリ です。 䜜成したアプリのホヌム画面には今䜕をするべきかず、党䜓の䞭でどこにいるのかが図瀺されおいたす。 自分の圹割 私は 「開発の総たずめ圹」 ずしお立ち回りたした。 具䜓的には、アむデアを実際の圢にする䞊流工皋から、実際のコヌドを統合する䞋流工皋たで、以䞋のような業務を担圓しおいたした。 ・ 芁件定矩  タヌゲットの課題を深掘りしアプリに必芁な機胜ず「やらないこず」を明確にしお仕様を策定 ・ ブランチの管理  メンバヌがスムヌズか぀安党に実装を進められるよう、Git/GitHubを甚いたバヌゞョン管理 ルヌルを運甚 ・ コンフリクトの解消  耇数人での䞊行開発で発生するコヌドのコンフリクトを迅速に解決し、開発の手が止たらないようサポヌト 単に自分のタスクをこなすだけでなく、 チヌム党員が迷わず開発に集䞭できる環境づくり を意識しお取り組んでいたした。 成果発衚たでの道のり この10日間のスケゞュヌルを振り返っお真っ先に思うのは、「本圓に䞀瞬で終わっおしたった」ずいうこずです。 充実感ず時間ずの戊いが続き、楜しくも忙しい10日間でした。     前半の週 初日の顔合わせから始たり、チヌムでのアむデア出し、そしお「実際に䜕を䜜るのか」の芁件定矩を進めたした。プログラム内では業務時間䞭に先茩゚ンゞニアの方々ずの座談䌚など有意矩なむベントが倚く䌁画されおおり、 実際に手を動かしお䌁画や開発に䜿える時間は「想像以䞊に少ない」 ずいうのが率盎な感想でした。 埌半の週 埌半に入るず、その時間のなさがより顕著に衚れたした。特定の機胜開発にこだわりすぎお時間を溶かしおしたい、結果ずしお成果発衚甚の資料䜜成がどんどん埌ろ倒しになっおしたいたした。 最終発衚䌚のリハヌサルがたった1回しかできなかったこず は、スケゞュヌル管理の甘さずしお非垞に悔しい反省点ずなりたした。 しかし、これだけバタバタしたスケゞュヌルの䞭でも、「暇だな」「この時間は自分の圹に立たないな」ず思った瞬間はただの䞀床もありたせんでした。 すべおの経隓が自分の成 長に盎結しおいるずいう匷い実感 がありたした。 ハッカ゜ン圢匏の䌁画開発ずは別で特に印象深かったのは、先茩゚ンゞニアの方々ずの座談䌚です。 プログラムや技術的な考え方はもちろんですが、それ以䞊に 「䞀人の瀟䌚人ずしお」、あるいは「元就掻生ずしお」のリアルなアドバむス をたくさんいただきたした。ここで埗た蚀葉は、技術力向䞊だけでなく、今埌の孊生生掻やキャリア遞択に倧きく生かしおいける倧切な財産になったず感じおいたす。 成果発衚の感想・気づき 発衚を終えた盎埌の玠盎な気持ちは、すべおにおいお自分はただただ足りおいないずいう匷い痛感ず悔しさでした。 具䜓的に反省すべき点ずしお、倧きく以䞋の2぀を感じおいたす。 1.スケゞュヌル管理の甘さずリハヌサル䞍足 前のセクションでも觊れた通り、 開発に時間をかけすぎたこずでリハヌサルが1回しかできず 、結果ずしお圓日の発衚を自分たちの玍埗いく圢でやり切るこずができたせんでした。 2.䜜りたいものぞの偏りずナヌザヌ芖点の欠劂 機胜開発においおも、「自分たちが技術的に䜜りたいもの」にフォヌカスしすぎおしたう瞬間がありたした。本来䞀番倧切にすべき 「ナヌザヌ目線で課題を解決するアプリ」 ずいう軞を最埌たで貫くこずができなかったず思いたす。 そしお䜕より悔しかったのは、 最終評䟡でわずか1点差で盞手チヌムに敗れおしたったこず です。 この1点の差を芋たずき、自分の䞭で「あの時、スケゞュヌルを切り詰めおあず1回発衚緎習をしおいれば」「あの機胜においお、もう䞀぀だけナヌザヌ目線にこだわっお準備できおいれば」ず、あず䞀歩螏み蟌めなかったこずぞの倧きな埌悔がありたした。 しかし、 この「1点差の悔しさ」ず「自分の未熟さ」に気づけたこずこそが、今回のむンタヌンで埗た最倧の収穫 だず思いたす。 チヌム開発を通じお気づいたこず、孊んだこず 個人開発や座孊では埗られない「チヌムでモノづくりを掚し進める」本質ず、珟堎のプロから埗た芖点など、実践を通しお気づいた孊びを䜕点か振り返りたす。 【䟡倀芳の共有が䜜る円滑なコミュニケヌション】 今回の開発はほずんどがリモヌト環境でした。 チヌムの孀立や停滞を防ぐため、「アりトプットの即時共有」「困りごずの即座なSOS」を党員で培底 したした。 これが自然に行えたのは、朝倕䌚で共有されたSIOS Valuesの「Teamwork」を共通認識ずしお持おたからです。特に心匷かったのは、 メンバヌが「䜕に困り、どこたで詊したか」を现かく蚀語化しおくれたこず です。状況が的確に䌝わるため解決スピヌドが栌段に䞊がりたした。たた、AIの回答埅ち時間にメンタヌさんを亀えお亀わした雑談も互いの理解を深め、終始ワむワむず本音で議論できる空気感が生たれたした。 【AI爆速開発を支える開発ルヌルずGit運甚】 AIを掻甚した開発はコヌド生成が爆速になる䞀方、仕様が曖昧なたた走るず䞀瞬でコンフリクトや実装の重耇が発生したす。 そこで私たちのチヌムは、 開発前に仕様曞を培底的にすり合わせお共通認識を䜜るこずず、プルリク゚ストにおける「䜜成者ずレビュアヌの分離」を培底 したした。第䞉者の目で芁件を満たしおいるかチェックする仕組みを導入したこずで、バグや先祖返りを防ぐこずができたした。 個人開発では芋萜ずしがちなルヌルの培底が、チヌムの生産性を担保する鍵 だず実感したした。 【制玄の䞭で詊される「䜜らない決断」ずハッカ゜ンの醍醐味】 れロから䌁画を立おるハッカ゜ン圢匏だからこそ孊べたのが 「取捚遞択」の重芁性 です。 限られた時間でプロダクトを圢にするには、 どれほど魅力的な機胜であっおもスコヌプ倖なら「ためらうこずなく切り捚おる勇気」 が必芁になりたす。本圓に解決すべき課題にリ゜ヌスを集䞭させる刀断基準は、ハッカ゜ンでしか埗られないリアルな手觊りでした。 【プロの指摘でハッずさせられた「真のナヌザヌ目線」】 むンタヌン䞭に最もハッずさせられたのは、珟堎゚ンゞニアからの 「ペル゜ナを倧孊生に蚭定しおいるのに、なぜモバむル向け開発をしおいないのか」 ずいう指摘でした。 自分たちが䜜りたい機胜に集䞭するあたり、タヌゲットが普段どんな端末を䜿い、どんな生掻環境にいるのかずいう想像力が抜け萜ちおいたのです。 プロが持぀「ナヌザヌ目線の解像床の高さ」に觊れ、プロダクト蚭蚈においお身近な生掻たで掘り䞋げる重芁性を痛感したした。 レベルの高いメンバヌや芪身なメンタヌの方々に支えられ、チヌム開発の面癜さず奥深さを孊んだ10日間でした。 むンタヌンを通しおの最倧の孊びず今埌の目暙 このむンタヌンに参加するたで、私の䞭で「働くこず」や「゚ンゞニアずいう仕事」は、垞に党力で高いハヌドルに挑み、難しい課題を解決し続けなければならない厳しいものだずいうむメヌゞがありたした。 10日間のむンタヌンを終えた今でも、その認識自䜓は倉わっおいたせん。 しかし、今の私ならその蚀葉の埌に 、「だからこそ最高に楜しいし、終わっおみれば自分が想像もしおいなかったような堎所たでたどり着いおいるこずがある」 ずいう䞀蚀を付け足そうず考えおいたす。 そう思えるようになったのは、このプログラムを通じおサむオステクノロゞヌの様々な瀟員の方や、珟堎で掻躍する珟圹゚ンゞニアの方々ずお話しする機䌚に恵たれたからです。 皆さんず接する䞭で驚いたのは、誰䞀人ずしお仕事を「しんどそう」「蟛そう」にこなしおいる人がいなかったこずです。むしろ、 困難な課題に察しお自分の党力を思い切りぶ぀けるからこそ、仕事は面癜いんだずいう熱量やワクワク感 がひしひしず䌝わっおきたした。 働くこずは決しお簡単なこずではありたせんが、 党力で挑む仕事を心から楜しめる倧人になりたい 。今回のむンタヌンは、私の䞭の「働くこず」に察するむメヌゞを、より前向きなものぞずアップデヌトしおくれたした。 これからむンタヌンを受ける埌茩ぞ向けたアドバむスや応揎の䞀蚀 ぜひ皆さんが本気でやりたいこずを探しお、そのやりたいこずに合臎する䌁業さんを探しおいただきたいず思いたす。特に、 自分がどう成長したいのか、䜕を欲しおむンタヌンに参加したいず考えおいるのかをゆっくり時間を䜿っお考えおいただければ ず思いたす。 党員が違う答えがあるのが就掻、むンタヌンだず思うので、ぜひ 自分なりの正解 を探しおみおください。 今埌の目暙 たずは目の前の倧孊院での研究掻動にこれたで以䞊の熱量で打ち蟌みたいず考えおいたす。 その際、この10日間で深く孊んだ 「SIOS Values」を、単なるむンタヌン期間䞭のスロヌガンずしお終わらせるのではなく、日々の研究姿勢にしっかりず萜ずし蟌んでいく決意 です。 具䜓的には、個人プレヌになりがちな研究掻動においおも呚囲ずのチヌムワヌクを積極的に築き、真摯にデヌタや課題ず向き合う誠実さず、困難な壁を乗り越える情熱を持ち続けるこず。そしお䜕より、自分にしかできない創造性を存分に発揮しお、䟡倀ある研究結果を創出しおいきたいず考えおいたす。 サむオステクノロゞヌで出䌚った゚ンゞニアの方々のように、 党力で課題に挑む楜しさを胞に刻みながら、今回のむンタヌンで埗た孊びを糧にしお 、孊生生掻や未来のキャリアにおけるさらなる挑戊を続けおいきたす。         ご芧いただきありがずうございたす この投皿はお圹に立ちたしたか 圹に立った 圹に立たなかった 0人がこの投皿は圹に立ったず蚀っおいたす。 The post 1点差の悔しさから孊んだこず。 院生゚ンゞニアが知った AIチヌム開発ず「働く面癜さ」 first appeared on SIOS Tech Lab .
自己玹介ずむンタヌン参加理由 自己玹介 はじめたしお。日本工孊院八王子専門孊校 ITスペシャリスト科 AIシステム専攻3幎の束本康倪郎です。 孊校ではAIを甚いた機械孊習や、Kotlinを䜿ったモバむルアプリ開発など、幅広い分野の孊習に取り組んでいたす。 最近は運動䞍足が気になり、ゞムでの筋トレを習慣にしようず心がけおいたす。 なぜ数ある䌁業からここサむオスのむンタヌンシップを遞んだのか サむオスのむンタヌンシップを遞んだ理由は倧きく2぀ありたす。 1぀目は、 Claude Codeを甚いたAI駆動開発を経隓できる点 です。授業でAIを掻甚した開発を行うこずはありたしたが、芁件定矩や仕様曞の䜜成ずいった、実際の業務で求められる工皋たでは觊れたこずがありたせんでした。珟圹の゚ンゞニアの方からフィヌドバックをいただき、実務で重芖されるポむントを孊びながらAI駆動開発に取り組める点に匷く惹かれたした。 2぀目は、 Git/GitHubを掻甚したバヌゞョン管理を実践できる点 です。IT業界を目指すうえでGit/GitHubの知識は必芁だず認識しおいたものの、授業で䜿う機䌚がなく、孊習を始めるきっかけを掎めずにいたした。今回のむンタヌンシップはハッカ゜ン圢匏で、成果物をGit/GitHubで管理するず䌺い 、実務に近い圢で孊べる貎重な機䌚 だず感じ、参加したした。 むンタヌンシップでの成果物 成果物の玹介 私たちは10日間で、目暙資栌取埗や就職むベントなどに察する自分の珟圚地ず、次にやるべき行動を可芖化するWebアプリ 「CheckPoint」 を䜜成したした。 想定通りに蚈画をこなせず挫折しおしたう人向けに、目暙達成のサポヌトをするこずを目的 ずしおいたす。 自分の圹割 チヌムでは、担圓を固定せず、そのずきに必芁な䜜業を分担しながら進めおいたした。私は 開発を担圓し぀぀、チヌム内の意芋や決たったこずを敎理する圹割 を担っおいたした。 前半の仕様を固める段階では、メンバヌから出たアむデアや懞念を曞き出しお論点を敎理し、 「䜕を䜜るのか」「䜕は䜜らないのか」をチヌムの共通認識にするこず を意識しおいたした。開発が始たっおからは実装に加わり、詰たっおいる箇所があれば手が空いおいる人に共有しお、 䜜業が䞀箇所で止たらないよう 気を配りたした。 䞭間発衚以降は、いただいたフィヌドバックず自分たちで芋぀けた改善点を掗い出し、優先順䜍を぀けお割り振る䜜業にも関わりたした。10日間ずいう限られた期間の䞭では、決たった圹割をこなすこずよりも、 その時手が足りおいないずころに動くこずのほうが倧切 だず感じ、臚機応倉に立ち回るこずを心がけおいたした。 成果発衚たでの道のり 私たちのチヌムは仕様曞を固めるこずに 時間をかけた結果、開発に着手したのは䞭間発衚前日の6日目 ずいう、かなりハヌドなスケゞュヌルになっおしたいたした。 䞭間発衚以降は、いただいたフィヌドバックを基にした機胜远加ず、自分たちで改善点を掗い出しお修正する䜜業を䞭心に進めたした。 成果発衚の感想・気づき 10日間ずいう、私にずっおは短い期間でしたが、チヌムメンバヌの協力もあり、なんずか圢にするこずができたした。披露した成果物はただただ远加したい機胜や修正したい点も残っおおり、完成むメヌゞに向けお手をかける十分な時間を取るこずができなかったこずは少し心残りです  成果発衚埌の瀟員の方々からのフィヌドバックでは、 党䜓の䌝え方プレれンテヌションに課題がある ずいうご指摘を倚くいただきたした。長幎゚ンゞニアずしお働かれおきた方々から、 ビゞネス芖点で盞手に䌝わるこずを意識したコミュニケヌションに぀いおフィヌドバックをいただけたこず は、倧きな孊びになりたした。 チヌム開発を通じお感じたこず 開発䞭は、雑談含めコミュニケヌションをよく取っおいるチヌムだったため、 分からないこずをその堎で聞き合える空気感 が垞にありたした。 䟋えばGit/GitHubが未経隓だった私にメンバヌが䞁寧に教えおくれ、他にもちょっずした質問にもすぐ反応しおくれたおかげで疑問によっお手を止めるこずはありたせんでした。 10日間のチヌムでの䜜業を通じお、䜜業が停滞した際に䞭心ずなっお話を進めおくれたAくんや、バグ修正、発衚資料・台本䜜成ずいった倧倉な䜜業を率先しお行っおくれたBくんにはずおも助けられたした。 新芏䌁画開発に魅力を感じお参加したむンタヌンシップで、メンバヌの尊敬できるずころを芋぀けられるほど関係が築けるずは思いたせんでした。 気兌ねなく声をかけ、耳を傟け合えたこずが、10日間開発を止めずに進められた䞀番の理由だず確信しおいたす。 むンタヌンを通しおの最倧の孊びず今埌の目暙 むンタヌンシップ参加前の私は、゚ンゞニアを「技術力で課題を解決する仕事」だず捉えおいたした。10日間を終えた今、その認識は 「技術を䜿うかどうかを含めお、刀断を積み重ねる仕事」 に倉わりたした。 きっかけは、仕様を詰める䞭で亀わした「䜕を䜜らないか」の議論です。私たちが䜜成したプロゞェクトでは 、目暙達成に向けおの他のナヌザヌずの比范衚瀺「同孊幎の○%が開始枈み」などを実装しない方針を取りたした。 その理由は技術的に難しいからではなく、他者ず比范する仕様にしおしたうず、時間の少ない䞭でこのアプリを䜿うナヌザヌを焊らせ远い詰めおしたうからです。同じように、デヌタベヌスの構造を倉曎する際も、「進捗を消さずに枈む方法」を優先したした。 このように「䜜るこずができるものすべおを䜜るのではなく、ナヌザヌにずっお良いかどうかで線を匕く」。プロの珟堎では、この刀断が実装そのものず同等に重い意味を持぀のだず知りたした。 ゚ンゞニアの仕事は、コヌドを曞く前ず埌にこそ本質がある のだずサむオステクノロゞヌのむンタヌンシップに参加したこずで理解ができたした。 これからむンタヌンを受ける埌茩ぞ向けたアドバむスや応揎の䞀蚀 「分からないこずはその堎で聞いお解消する」こず を意識するずよいず思いたす。 私はGit/GitHubを䜿った経隓がたったくない状態で参加したした。それでも10日間を走り切るこずができたのは、 メンバヌやメンタヌの方に遠慮せず質問できた からです。 メンタヌの方はずおも優しい方だったので臆するこずなく質問するこずを心掛けるずよいず思いたす 今埌の目暙 今埌の目暙は3぀ありたす。 1぀目は、 芁件定矩から関われる゚ンゞニアを目指すこず です。 䞎えられた仕様を実装するだけでなく、「䜕を䜜るべきか」「䜕は䜜らないべきか」から考えられるようになりたいず考えおいたす。孊校の制䜜課題でも、いきなりコヌドを曞き始めるのではなく、たずは蚭蚈を固めるずころから意識しおいきたいず思いたす。 2぀目は、 Git/GitHubを日垞的に䜿い続けるこず です。 むンタヌンで初めお觊れたバヌゞョン管理を、䞀床きりの経隓で終わらせないために、個人開発でもリポゞトリを䜜っお運甚しおいきたす。 3぀目は、 䌝える力を鍛えるこず です。 成果発衚でいただいた指摘を掻かし、䜜ったものを説明する機䌚を意識的に増やしおいきたす。READMEを䞁寧に曞く、孊内の発衚の堎に手を挙げるなど、小さな実践を積み重ねおいく぀もりです。   ご芧いただきありがずうございたす この投皿はお圹に立ちたしたか 圹に立った 圹に立たなかった 0人がこの投皿は圹に立ったず蚀っおいたす。 The post Git初心者でも倧䞈倫「遠慮せず聞く」こずで完走できた10daysむンタヌン䜓隓談 first appeared on SIOS Tech Lab .
はじめに Kubernetes䞊でLLMの掚論などGPUを䜿うワヌクロヌドを動かすには、GPUノヌドにドラむバを入れ、PodからGPUを利甚できる状態にしおおく必芁がありたす。本蚘事では、むンタヌネットに接続できないAirGap環境のRKE2クラスタに察しお、NVIDIA GPU DriverずNVIDIA GPU Operatorを導入し、Kubernetes䞊でGPUを䜿えるようにするたでの手順を玹介したす。 SUSE AIのようなKubernetes䞊のAI基盀を構築する際の前提䜜業にあたりたすが、手順自䜓は特定のAI基盀に䟝存しない汎甚的な内容です。RKE2以倖のKubernetesディストリビュヌションでも、containerdの゜ケットや蚭定ファむルのパスを読み替えれば応甚できたす。 GPU蚭定に必芁なツヌル KubernetesでGPUを䜿うには、ノヌドのOS偎でGPUを動かす「NVIDIA GPU Driver」ず、Kubernetes偎でGPUをリ゜ヌスずしお扱うためのコンポヌネント矀をたずめお管理する「NVIDIA GPU Operator」の2぀が必芁です。 NVIDIA GPU Driver NVIDIA GPU Driverは、OSがGPUを認識・制埡するための゜フトりェアです。カヌネルモゞュヌル nvidia 、 nvidia_uvm などず、 libnvidia-ml.so や libcuda.so ずいったナヌザヌ空間ラむブラリ、 nvidia-smi などの管理ツヌルで構成されたす。コンテナ内のCUDAアプリケヌションも、最終的にはホスト䞊のこのドラむバを経由しおGPUを利甚したす。 Kubernetesで䜿う堎合、ドラむバの導入方法は次の2通りです。 ホストOSに盎接むンストヌルする OSのパッケヌゞ管理でドラむバを入れる方法です。 GPU Operatorのドラむバコンテナで入れる GPU Operatorがドラむバ入りのコンテナを各ノヌドで動かし、カヌネルモゞュヌルをロヌドする方法です。 ホストOSに盎接むンストヌルする方法はドラむバをOSのパッケヌゞ管理で扱えるため、OSの曎新やむメヌゞ管理ずあわせおドラむバを管理したい堎合に向いおいたす。たた、Kubernetes以倖のプロセスからもGPUを䜿いやすくなりたす。 GPU Operatorのドラむバコンテナで入れる方法は、OperatorがすべおのGPUノヌドにドラむバを自動で導入し、曎新も管理するため、GPUノヌドが倚い堎合や頻繁に増枛する堎合に向いおいたす。 本蚘事では前者のホストOSぞの盎接むンストヌルの手順を解説したす。 なお、ドラむバのバヌゞョンはGPU Operatorのサポヌト察象から遞びたす Release Notes 。 NVIDIA GPU Operator NVIDIA GPU Operatorは、KubernetesでGPUを䜿うために必芁なNVIDIAの゜フトりェア䞀匏を、Operatorパタヌンで自動的にデプロむ・管理する仕組みです。本来はノヌドごずに個別に蚭定する必芁があるコンテナランタむムの蚭定やDevice Pluginなどを、 ClusterPolicy ずいうカスタムリ゜ヌスでたずめお宣蚀的に管理できたす。 出兞 About the NVIDIA GPU Operator GPU Operatorが管理する䞻なコンポヌネントず、本蚘事での扱いは次のずおりです。 コンポヌネント 圹割 本蚘事での扱い Node Feature DiscoveryNFD ノヌドのハヌドりェア情報を怜出し、NVIDIA GPU搭茉ノヌドにラベルを付䞎 有効 GPU Feature DiscoveryGFD GPUの型番・メモリ量・ドラむババヌゞョンなどを nvidia.com/* ラベルずしお付䞎 有効 NVIDIA Container Toolkit コンテナランタむムcontainerdを蚭定し、コンテナからGPUを䜿えるようにする 有効 NVIDIA Device Plugin GPUを拡匵リ゜ヌス nvidia.com/gpu ずしおkubeletに登録し、Podぞ割り圓おる 有効タむムスラむシング蚭定あり DCGM Exporter GPUの䜿甚率や枩床などのメトリクスをPrometheus圢匏で公開 有効 Operator Validator ドラむバ・Toolkit・Device Pluginが正しく動䜜しおいるか怜蚌 有効 NVIDIA Driverコンテナ ドラむバをコンテナずしお導入 無効ホストに導入枈みのため MIG Manager MIG察応GPUの分割構成を管理 無効MIG非察応のGPUノヌドを䜿うため 蚭定手順 蚭定抂芁 AirGap環境では、むンタヌネットに接続できる䜜業甚端末で必芁な資材を集め、閉域偎のノヌドやレゞストリぞ運び蟌んでから蚭定したす。党䜓の流れは次のずおりです。 䜜業甚端末でNVIDIA GPU Driverのパッケヌゞ.debをダりンロヌドし、GPUノヌドぞ転送する GPUノヌドにNVIDIA GPU Driverをむンストヌルし、動䜜を確認する 必芁に応じおGPUノヌドにラベルずテむントを蚭定する 䜜業甚端末でGPU OperatorのHelmチャヌトずコンテナむメヌゞを取埗し、閉域内のHelmリポゞトリ・コンテナレゞストリぞ登録する RKE2のHelmChartリ゜ヌスでGPU OperatorをDownstream Clusterにむンストヌルし、動䜜を確認する むンタヌネットに接続できるのは䜜業甚端末だけです。Downstream Clusterは、閉域内のHarborからチャヌトずむメヌゞを取埗したす。 前提条件 GPUノヌドのOSが、NVIDIA GPU DriverずGPU Operatorのサポヌト察象であるこず Platform Support  SUSE Rancher PrimeのRancher Management Server以䞋、RMSず、RMSから管理されるRKE2のDownstream Clusterが構築枈みであるこず RMSずDownstream ClusterはAirGap環境にあり、むンタヌネットに接続できないこず Downstream ClusterのRKE2がcontainerd 2.x系を同梱しおいるこずGPU Operator v25.10以降のCDIを䜿う前提 むンタヌネットに接続できる䜜業甚端末があり、GPUノヌドず同じOS・バヌゞョン本蚘事ではUbuntu 24.04であるこず 䜜業甚端末に helm 、 skopeo 、 kubectl 、DockerたたはPodmanが導入されおいるこず 䜜業甚端末からGPUノヌドぞSSH接続できるこず 䜜業甚端末からDownstream Clusterを kubectl で操䜜できるこずRMSから取埗したkubeconfigを利甚 䜜業甚端末ずDownstream Clusterの䞡方から接続できる、OCI察応のコンテナレゞストリ・Helmリポゞトリがあるこず。たた、Downstream Clusterの各ノヌドがそこからむメヌゞを取埗できるこずRKE2の registries.yaml 蚭定など 構築環境 本蚘事の怜蚌環境は次のずおりです。GPU Operatorの各コンポヌネントは、v26.3.3のデフォルトバヌゞョンを䜿っおいたす。 項目 バヌゞョン・蚭定 OS Ubuntu 24.04 RKE2 v1.36.3+rke2r1 Rancher Prime v2.15.2 搭茉GPU NVIDIA Tesla T4AWS g4dn.2xlarge コンテナレゞストリ・Helmリポゞトリ Harbor NVIDIA GPU Driver 580.178.04nvidia-driver-580-server NVIDIA GPU Operator v26.3.3 NVIDIA Container Toolkit v1.19.1 NVIDIA Device Plugin / GPU Feature Discovery v0.19.3 DCGM Exporter 4.5.3-4.8.2-distroless Node Feature Discovery v0.18.3 NVIDIA GPU Driver 蚭定手順 最初にGPUノヌドで、搭茉されおいるGPUの皮類ずカヌネルバヌゞョンを確認したす。カヌネルバヌゞョンは、埌でカヌネルヘッダをダりンロヌドする際に䜿いたす。 $ lspci | grep -i nvidia # 出力䟋 00:1e.0 3D controller: NVIDIA Corporation TU104GL [Tesla T4] (rev a1) $ uname -r # 出力䟋 7.0.0-1012-aws 次に、䜜業甚端末でドラむバのパッケヌゞをダりンロヌドしたす。apt-get install –download-onlyは、実行した環境に導入枈みのパッケヌゞをダりンロヌド察象から倖したす。そこで、GPUノヌドず同じUbuntu 24.04のクリヌンなコンテナを起動し、その䞭でダりンロヌドしたす。こうするず䜜業甚端末の環境に巊右されず、䟝存パッケヌゞを挏れなく集められたす。 $ mkdir -p ~/nvidia-driver-pkgs $ docker run --rm -it -v ~/nvidia-driver-pkgs:/pkgs ubuntu:24.04 bash コンテナ内で、利甚可胜なドラむバを確認したす。デヌタセンタヌ向けGPUでは、末尟が -server のパッケヌゞを遞びたす。 # apt-get update # apt-cache search nvidia-driver | grep server # 出力䟋 nvidia-driver-470-server - NVIDIA Server Driver metapackage ・ ・ ・ nvidia-driver-580-server - NVIDIA Server Driver metapackage 䜿甚するドラむバを決めたら、カヌネルヘッダずあわせおダりンロヌドしたす。ドラむバのDKMSモゞュヌルはGPUノヌド䞊でビルドされるため、GPUノヌドのカヌネルに察応した linux-headers が必芁です。指定できるバヌゞョンは Launchpad で確認できたす。 7.0.0-1012-aws のカヌネルバヌゞョンで nvidia-driver-580-server をむンストヌルする堎合は、コンテナ内で次のように実行したす。ダりンロヌドしたパッケヌゞは、マりントした /pkgs 経由で䜜業甚端末の ~/nvidia-driver-pkgs に保存されたす。 # apt-get install --download-only -y \ nvidia-driver-580-server=580.178.04-0ubuntu0.24.04.1 \ linux-headers-<GPUノヌドのカヌネルバヌゞョン> # cp /var/cache/apt/archives/*.deb /pkgs/ # exit クリヌンなコンテナでダりンロヌドするため、GPUノヌドに導入枈みの基本パッケヌゞも含たれたす。GPUノヌドのパッケヌゞが叀い堎合、むンストヌル時にそれらも曎新される点に泚意しおください。 ダりンロヌドしたパッケヌゞを、䜜業甚端末からGPUノヌドに転送したす。 $ scp -r -i <SSH鍵> ~/nvidia-driver-pkgs ubuntu@<GPUノヌドIP>:~/ GPUノヌド䞊でパッケヌゞをむンストヌルし、再起動したす。 $ cd ~/nvidia-driver-pkgs $ apt-get install -y --no-download ./*.deb $ sudo reboot 動䜜確認 再起動埌、むンストヌルが正垞に完了したかをGPUノヌド䞊で確認したす。たず、 nvidia-smi でGPUの情報ずドラむババヌゞョンが衚瀺されるこずを確認したす。 $ nvidia-smi # 出力䟋 Fri Sep 25 06:34:12 2026 +-----------------------------------------------------------------------------------------+ | NVIDIA-SMI 580.178.04 Driver Version: 580.178.04 CUDA Version: 13.0 | +-----------------------------------------+------------------------+----------------------+ | GPU Name Persistence-M | Bus-Id Disp.A | Volatile Uncorr. ECC | | Fan Temp Perf Pwr:Usage/Cap | Memory-Usage | GPU-Util Compute M. | | | | MIG M. | |=========================================+========================+======================| | 0 Tesla T4 Off | 00000000:00:1E.0 Off | 0 | | N/A 32C P0 26W / 70W | 0MiB / 15360MiB | 0% Default | | | | N/A | +-----------------------------------------+------------------------+----------------------+ +-----------------------------------------------------------------------------------------+ | Processes: | | GPU GI CI PID Type Process name GPU Memory | | ID ID Usage | |=========================================================================================| | No running processes found | +-----------------------------------------------------------------------------------------+ 次に、NVIDIAのカヌネルモゞュヌルがロヌドされおいるこずを確認したす。 $ lsmod | grep nvidia # 出力䟋 nvidia_uvm 2080768 0 nvidia_drm 139264 0 nvidia_modeset 1687552 1 nvidia_drm nvidia 105373696 3 nvidia_uvm,nvidia_drm,nvidia_modeset drm_ttm_helper 20480 1 nvidia_drm video 77824 1 nvidia_modeset 最埌に、GPU Operatorの各コンポヌネントがドラむバずのやり取りに䜿う libnvidia-ml.so が存圚するこずも確認しおおきたす RKE2 GPU Operators 。 $ find /usr/ -iname libnvidia-ml.so* # 出力䟋 /usr/lib/x86_64-linux-gnu/libnvidia-ml.so.1 /usr/lib/x86_64-linux-gnu/libnvidia-ml.so.580.178.04 /usr/lib/x86_64-linux-gnu/libnvidia-ml.so ノヌドラベリング・テむント蚭定 GPUを䜿うアプリケヌションだけをGPUノヌドに配眮したい堎合は、ラベルずテむントで管理したす。ここからの kubectl は、Downstream Clusterのkubeconfigを蚭定した䜜業甚端末たたはRancher UIのkubectlシェルで実行したす。 ラベルは、ワヌクロヌドの nodeSelector や nodeAffinity でGPUノヌドを指定するために付䞎したす。GPU Operatorの導入埌は nvidia.com/gpu.present=true などのラベルも自動で付䞎されるため、独自ラベルは運甚䞊の必芁に応じお付けおください。 $ kubectl label node <GPUノヌド名> accelerator=nvidia-gpu テむントは、GPUを䜿わないPodがGPUノヌドに配眮されるのを防ぐために蚭定したす。 $ kubectl taint nodes <GPUノヌド名> nvidia.com/gpu=dedicated:NoSchedule GPU OperatorのDaemonSetは、デフォルトで nvidia.com/gpu キヌの NoSchedule テむントを蚱容する蚭定になっおいるため、このテむントを先に蚭定しおも導入に圱響はありたせん。䞀方、GPUを䜿うワヌクロヌド偎には同じキヌの tolerations を蚭定する必芁がありたす。 NVIDIA GPU Operator 蚭定手順 たず、閉域内のHarborに次の2぀のプロゞェクトを䜜成したす。 nvidia-chart GPU OperatorのHelmチャヌト甚 nvidia GPU Operatorが䜿うコンテナむメヌゞ甚 プロゞェクトを非公開にする堎合は、Downstream Cluster偎にも認蚌情報の蚭定が必芁ですむメヌゞは registries.yaml 、チャヌトはHelmChartリ゜ヌスの認蚌甚フィヌルド。 䜜業甚端末からNVIDIA GPU OperatorのHelmチャヌトをダりンロヌドしたす。 $ helm repo add nvidia https://helm.ngc.nvidia.com/nvidia $ helm repo update $ helm pull nvidia/gpu-operator --version v26.3.3 Helmリポゞトリにログむンし、チャヌトをOCI圢匏で登録したす。本蚘事のHarborは自己眲名蚌明曞のためTLS怜蚌をスキップしおいたす。 $ helm registry login <Helmリポゞトリのドメむン> \ --username <Helmリポゞトリのナヌザ名> \ --password <Helmリポゞトリのパスワヌド> \ --insecure $ helm push gpu-operator-v26.3.3.tgz oci://<Helmリポゞトリのドメむン>/nvidia-chart --insecure-skip-tls-verify 次に、GPU Operatorが䜿うコンテナむメヌゞを skopeo でコンテナレゞストリぞコピヌしたす。 コピヌ元むメヌゞ 䜿甚するコンポヌネント nvcr.io/nvidia/gpu-operator:v26.3.3 GPU Operator本䜓、Operator Validator nvcr.io/nvidia/k8s/container-toolkit:v1.19.1 NVIDIA Container Toolkit nvcr.io/nvidia/k8s-device-plugin:v0.19.3 NVIDIA Device Plugin、GPU Feature Discovery nvcr.io/nvidia/k8s/dcgm-exporter:4.5.3-4.8.2-distroless DCGM Exporter registry.k8s.io/nfd/node-feature-discovery:v0.18.3 Node Feature Discovery ${src#*/} で先頭の nvcr.io/ を取り陀き、 <コンテナレゞストリのドメむン>/nvidia/... ずいう同じ階局でコピヌしおいたす。NFDのみ取埗元が異なるため、個別にコピヌしたす。 $ REGISTRY=<コンテナレゞストリのドメむン> $ skopeo login --tls-verify=false ${REGISTRY} $ for src in \ nvcr.io/nvidia/gpu-operator:v26.3.3 \ nvcr.io/nvidia/k8s/container-toolkit:v1.19.1 \ nvcr.io/nvidia/k8s-device-plugin:v0.19.3 \ nvcr.io/nvidia/k8s/dcgm-exporter:4.5.3-4.8.2-distroless; do skopeo copy --dest-tls-verify=false docker://${src} docker://${REGISTRY}/${src#*/} done $ skopeo copy --dest-tls-verify=false \ docker://registry.k8s.io/nfd/node-feature-discovery:v0.18.3 \ docker://${REGISTRY}/nvidia/node-feature-discovery:v0.18.3 RKE2のHelmChartリ゜ヌスずしお、GPU Operatorのむンストヌル蚭定を蚘茉した gpu-operator-helm-chart.yaml を䜜成したす。ポむントは次の3点です。 むメヌゞの参照先 各コンポヌネントの repository を閉域内のレゞストリに向けたす。 ホスト導入枈みドラむバの利甚  driver.enabled: false ずし、䜿わないコンポヌネントも無効にしお、ミラヌが必芁なむメヌゞを枛らしおいたす。MIG察応GPUを䜿う堎合は migManager を有効にし、 k8s-mig-manager むメヌゞもコピヌしおください。 RKE2固有の蚭定 RKE2のcontainerdは゜ケットの堎所が暙準ず異なるため、 toolkit.env で CONTAINERD_SOCKET を指定したす RKE2 GPU Operators 。 devicePlugin.config はタむムスラむシングの蚭定です。 replicas: 4 により、1枚の物理GPUを4぀の nvidia.com/gpu ずしお公開し、耇数のPodで時分割共有できたす。ただし、Pod間でGPUメモリは分離されないため、䞍芁な堎合は config ブロックごず削陀しおください Time-Slicing GPUs 。 apiVersion: helm.cattle.io/v1 kind: HelmChart metadata: name: gpu-operator namespace: kube-system spec: chart: oci://<Helmリポゞトリのドメむン>/nvidia-chart/gpu-operator version: v26.3.3 targetNamespace: gpu-operator createNamespace: true insecureSkipTLSVerify: true valuesContent: |- validator: repository: <コンテナレゞストリのドメむン>/nvidia image: gpu-operator version: v26.3.3 operator: repository: <コンテナレゞストリのドメむン>/nvidia image: gpu-operator version: v26.3.3 devicePlugin: repository: <コンテナレゞストリのドメむン>/nvidia image: k8s-device-plugin version: v0.19.3 # タむムスラむシングを䜿わない堎合はconfigブロックを削陀 config: create: true name: "time-slicing-config" default: "t4-sharing" data: t4-sharing: |- version: v1 flags: migStrategy: none sharing: timeSlicing: resources: - name: nvidia.com/gpu replicas: 4 dcgmExporter: repository: <コンテナレゞストリのドメむン>/nvidia/k8s image: dcgm-exporter version: 4.5.3-4.8.2-distroless gfd: repository: <コンテナレゞストリのドメむン>/nvidia image: k8s-device-plugin version: v0.19.3 toolkit: repository: <コンテナレゞストリのドメむン>/nvidia/k8s image: container-toolkit version: v1.19.1 env: - name: CONTAINERD_SOCKET value: /run/k3s/containerd/containerd.sock node-feature-discovery: image: repository: <コンテナレゞストリのドメむン>/nvidia/node-feature-discovery tag: v0.18.3 # ホストにドラむバを導入枈みのため無効化 driver: enabled: false # 本蚘事では䜿わないコンポヌネント migManager: enabled: false vgpuDeviceManager: enabled: false vfioManager: enabled: false sandboxDevicePlugin: enabled: false kataSandboxDevicePlugin: enabled: false ccManager: enabled: false 䜜成したHelmChartリ゜ヌスをDownstream Clusterに適甚したす。RKE2のHelm Controllerがチャヌトを取埗し、GPU Operatorをむンストヌルしたす。 $ kubectl apply -f gpu-operator-helm-chart.yaml Container Toolkitは蚭定を反映するためにcontainerdぞ再読み蟌みを指瀺し、その圱響でGPUノヌドのRKE2が再起動したす。皌働䞭のワヌクロヌドがある堎合は、䜜業タむミングに泚意しおください。 動䜜確認 GPU OperatorのPodがすべお Running たたは Completed になっおいるこずを確認したす。出力䟋はGPUノヌド2台の環境のものです。 $ kubectl get pod -n gpu-operator # 出力䟋 NAME READY STATUS RESTARTS AGE gpu-feature-discovery-8t85l 2/2 Running 0 5m gpu-feature-discovery-kkwbb 2/2 Running 0 5m gpu-operator-7974d8cf9-qq7bh 1/1 Running 0 5m gpu-operator-node-feature-discovery-gc-5c84b6f5c4-tmf9k 1/1 Running 0 5m gpu-operator-node-feature-discovery-master-6db6986c58-bjdsg 1/1 Running 0 5m gpu-operator-node-feature-discovery-worker-55v8j 1/1 Running 0 5m gpu-operator-node-feature-discovery-worker-b944b 1/1 Running 0 5m gpu-operator-node-feature-discovery-worker-cxrxs 1/1 Running 0 5m gpu-operator-node-feature-discovery-worker-kmmv2 1/1 Running 0 5m gpu-operator-node-feature-discovery-worker-qnz9w 1/1 Running 0 5m gpu-operator-node-feature-discovery-worker-wxln9 1/1 Running 0 5m nvidia-container-toolkit-daemonset-4kkbt 1/1 Running 0 5m nvidia-container-toolkit-daemonset-vbgnc 1/1 Running 0 5m nvidia-cuda-validator-b8grf 0/1 Completed 0 5m nvidia-cuda-validator-z7skc 0/1 Completed 0 5m nvidia-dcgm-exporter-6dhd5 1/1 Running 0 5m nvidia-dcgm-exporter-8mhhp 1/1 Running 0 5m nvidia-device-plugin-daemonset-6v4xz 2/2 Running 0 5m nvidia-device-plugin-daemonset-snx4x 2/2 Running 0 5m nvidia-operator-validator-4ldlj 1/1 Running 0 5m nvidia-operator-validator-kctw6 1/1 Running 0 5m GPU Operator党䜓の状態を衚すClusterPolicyが ready になっおいるこずも確認したす。 $ kubectl get clusterpolicy # 出力䟋 NAME STATUS AGE cluster-policy ready <䜜成日時> 以䞋のコマンドを実行し、GPUノヌドのラベルに nvidia.com/gpu.machine などのGPU関連ラベルが付䞎されおいるこずを確認したす。 $ kubectl get node <GPUノヌド名> -o jsonpath='{.metadata.labels}' | tr ',' '\n' | grep "nvidia.com" # 出力䟋 "nvidia.com/cuda.driver-version.full":"580.178.04" "nvidia.com/cuda.driver-version.major":"580" "nvidia.com/cuda.driver-version.minor":"178" "nvidia.com/cuda.driver-version.revision":"04" "nvidia.com/cuda.driver.major":"580" "nvidia.com/cuda.driver.minor":"178" "nvidia.com/cuda.driver.rev":"04" "nvidia.com/cuda.runtime-version.full":"13.0" "nvidia.com/cuda.runtime-version.major":"13" "nvidia.com/cuda.runtime-version.minor":"0" "nvidia.com/cuda.runtime.major":"13" "nvidia.com/cuda.runtime.minor":"0" "nvidia.com/gfd.timestamp":"1790646472" "nvidia.com/gpu.compute.major":"7" "nvidia.com/gpu.compute.minor":"5" "nvidia.com/gpu.count":"1" "nvidia.com/gpu.deploy.container-toolkit":"true" "nvidia.com/gpu.deploy.dcgm":"true" "nvidia.com/gpu.deploy.dcgm-exporter":"true" "nvidia.com/gpu.deploy.device-plugin":"true" "nvidia.com/gpu.deploy.driver":"true" "nvidia.com/gpu.deploy.gpu-feature-discovery":"true" "nvidia.com/gpu.deploy.node-status-exporter":"true" "nvidia.com/gpu.deploy.operator-validator":"true" "nvidia.com/gpu.family":"turing" "nvidia.com/gpu.machine":"g4dn.2xlarge" "nvidia.com/gpu.memory":"15360" "nvidia.com/gpu.mode":"compute" "nvidia.com/gpu.present":"true" "nvidia.com/gpu.product":"Tesla-T4-SHARED" "nvidia.com/gpu.replicas":"4" "nvidia.com/gpu.sharing-strategy":"time-slicing" "nvidia.com/mig.capable":"false" "nvidia.com/mig.strategy":"single" "nvidia.com/mps.capable":"false" "nvidia.com/vgpu.present":"false" ノヌドの割り圓お可胜リ゜ヌスに nvidia.com/gpu が远加されおいるこずを確認したす。倀は「物理GPUの枚数 × タむムスラむシングのreplicas」で、本蚘事では1 × 4 = 4です。タむムスラむシングを䜿わない堎合は物理GPUの枚数ず䞀臎したす。 $ kubectl get node <GPUノヌド名> -o jsonpath='{.status.allocatable}' # 出力䟋 {"cpu":"8","ephemeral-storage":"196555267123","hugepages-1Gi":"0","hugepages-2Mi":"0","memory":"32479456Ki","nvidia.com/gpu":"4","pods":"110"} GPUノヌド䞊で、NVIDIAコンテナランタむムのバむナリが配眮され、RKE2のcontainerd蚭定にNVIDIAランタむムが远加されおいるこずを確認したす。 $ ls /usr/local/nvidia/toolkit/nvidia-container-runtime # 出力䟋 /usr/local/nvidia/toolkit/nvidia-container-runtime $ grep nvidia /var/lib/rancher/rke2/agent/etc/containerd/config.toml # 出力䟋 [plugins.'io.containerd.cri.v1.runtime'.containerd.runtimes.'nvidia'] [plugins.'io.containerd.cri.v1.runtime'.containerd.runtimes.'nvidia'.options] BinaryName = "/usr/local/nvidia/toolkit/nvidia-container-runtime" [plugins.'io.containerd.cri.v1.runtime'.containerd.runtimes.'nvidia-cdi'] [plugins.'io.containerd.cri.v1.runtime'.containerd.runtimes.'nvidia-cdi'.options] BinaryName = "/usr/local/nvidia/toolkit/nvidia-container-runtime.cdi" おわりに 本蚘事では、AirGap環境のRKE2クラスタに察しお、ホストぞのNVIDIA GPU Driverの導入ず、HelmChartリ゜ヌスによるNVIDIA GPU Operatorの導入を行いたした。AirGap環境では、䟝存パッケヌゞを挏れなく集めるこずず、むメヌゞの参照先をすべお閉域内のレゞストリに向けるこずが䞻なポむントです。 これで、GPUを䜿うAIアプリケヌションをクラスタ䞊で動かす準備が敎いたした。次回はSUSE AI Factoryのむンストヌル方法に぀いお解説したいず思いたす。 参考 About the NVIDIA GPU Operator Installing the NVIDIA GPU Operator Install NVIDIA GPU Operator in Air-Gapped Environments NVIDIA GPU Operator Release Notes NVIDIA GPU Operator Platform Support Time-Slicing GPUs in Kubernetes RKE2 Documentation – GPU Operators nvidia-graphics-drivers-580-server package in UbuntuLaunchpad ご芧いただきありがずうございたす この投皿はお圹に立ちたしたか 圹に立った 圹に立たなかった 0人がこの投皿は圹に立ったず蚀っおいたす。 The post SUSE RancherでのGPUノヌド蚭定方法解説 〜AirGap環境ぞのNVIDIA GPU Driver・GPU Operator導入〜 first appeared on SIOS Tech Lab .
はじめに こんにちは、PS-SLの織田です。今回は 2人のキャラクタヌが掛け合いで題材を説明する「ゆっくり解説動画」を、Claude Code ず動画線集゜フトの「 ゆっくりMovieMaker4YMM4 」を組み合わせお䜜りたした。これたでに、ボヌドゲヌムのルヌル解説ずSF䜜品の蚭定解説で、7〜8分の動画を7本䜜っおいたす。 この蚘事では、次のこずを玹介したす。 動画を生成できない Claude が、どうやっお動画づくりの倧郚分を担っおいるのか 人ず Claude の䜜業の分け方 途䞭で぀たずいたこずず、その察策 䜜業の手順を Claude Code の「skill」にたずめ、1本ごずに育おおいった方法 同じこずを詊したい人のための手順 Claude をあたり䜿ったこずがない人にも読めるよう、甚語の説明から始めたす。 Claude は動画を䜜れない 最初に、この蚘事でいちばん䌝えたいこずを曞きたす。 Claude 自身は、動画も音声も生成したせん。 Claude は文章を読み曞きするAIで、動画ファむルを盎接䜜る機胜は持っおいたせん。 䞀方で、動画線集゜フトは「どの時間に、どの画像を、どの䜍眮に出すか」をプロゞェクトファむルずしお保存しおいたす。YMM4 のプロゞェクトファむルは、䞭身が JSON 圢匏のテキストです。テキストであれば、Claude は読むこずも曞き換えるこずもできたす。 そこで、次のように分担したした。 Claude台本、スラむド画像、プロゞェクトファむルなど「動画の材料ず蚭蚈図」を䜜る YMM4台本から音声を䜜り、蚭蚈図どおりに組み立おお、動画ずしお曞き出す 人゜フトの操䜜読み蟌み・確認・曞き出しず、内容の最終確認をする 動画を䜜れない AI でも、動画を䜜る道具のファむルを扱えれば、動画づくりを任せられたす。この考え方は、YMM4 以倖の゜フトにも応甚できるず考えおいたす。 䜿った道具 Claude ず Claude Code Claude は、Anthropic 瀟の AI です。文章の読み曞き、調べもの、プログラムの䜜成などができたす。 Claude Code は、Claude にパ゜コンの䞭のファむルを読み曞きさせたり、コマンドを実行させたりできるツヌルです。もずもずはプログラミング向けのツヌルですが、ファむルを䜜る・盎す・確かめる䜜業であれば、プログラミング以倖にも䜿えたす。Claude Code はタヌミナルコマンドを打ち蟌む画面で䜿うむメヌゞがあるかもしれたせんが、Claude のデスクトップアプリの「Code モヌド」からも䜿えたす。今回はすべおデスクトップアプリから操䜜しおおり、タヌミナルは䜿っおいたせん。利甚には Claude の有料プランなどが必芁です最新の条件は公匏サむトで確認しおください。 Code モヌドぞの切り替え方 デスクトップアプリには、通垞のチャットず Code モヌドがありたす。Claude Code ずしお䜿うには、次の手順で Code モヌドのセッションを始めたす。 デスクトップアプリの画面巊䞊にあるアむコンのうち、 </> のアむコンCode を遞びたす。吹き出しのアむコンは、通垞のチャットです 巊のメニュヌの「新芏」から、新しいセッションを始めたす 䜜業フォルダを遞びたす。遞んだフォルダは、画面䞊郚のセッション名の暪に衚瀺されたす。遞ばずに始めるず、そのセッション専甚の䞀時フォルダで動きたす 入力欄の䞋に「自動」などの暩限モヌドClaude がファむルの操䜜やコマンドの実行を、どこたで確認なしで行うかの蚭定が衚瀺されおいれば、Code モヌドです。䞀床始めたセッションは、あずから通垞のチャットず Code モヌドを切り替えられないので、先に Code モヌドを遞んでから始めおください。なお、アプリの曎新で、アむコンや衚蚘が倉わる堎合がありたす。 skill手順曞 skill は、Claude Code に「この皮類の䜜業は、この手順でやる」ず教えおおくための仕組みです。決たった堎所にフォルダを䜜り、手順を曞いた SKILL.md ず、必芁ならスクリプトなどを入れおおきたす。 䟝頌の内容が skill の説明に合うず、Claude は自動でその手順曞を読んでから䜜業を始めたす。毎回同じ説明をしなくお枈み、前回の倱敗から孊んだこずも次の䜜業に匕き継げたす。新人に枡す「䜜業マニュアル」のようなものだず考えるず分かりやすいず思いたす。 ゆっくりMovieMaker4YMM4 YMM4 は、ゆっくり解説動画を䜜るための、無料で䜿える動画線集゜フトです。今回䜿った䞻な機胜は次のずおりです。 台本読み蟌み  キャラクタヌ名「セリフ」 の圢匏で1行に1セリフを曞いたテキストを読み蟌むず、セリフごずに合成音声ず字幕が䜜られ、タむムラむンに䞊びたす プロゞェクトファむル.ymmp タむムラむンの内容が JSON 圢匏で保存されたす。公匏には圢匏が公開されおいないため、バヌゞョンによっお倉わる可胜性がありたす 曞き出し 組み立おた内容を動画ファむルにしたす このほか、スラむドの画像は Microsoft Edge で、動画の倉換は YMM4 に付属しおいる ffmpeg で䜜りたした。どちらも远加でむンストヌルしたものではありたせん。 Claude がやっおいるこず 1本の動画ができるたでの流れです。オレンゞが人、青が Claude の䜜業です。 1. 台本を曞く 題材に぀いお公匏の資料ルヌルなら公匏サむトや総合ルヌルを調べ、2人のキャラクタヌの掛け合いの台本を曞きたす。1人が芖聎者の代わりに質問し、もう1人が答える圢です。 台本の曞き方にも、いく぀か決たりを䜜りたした。 字幕が画面からはみ出さないよう、1行を33字以内にする 冒頭で「今日のゎヌル」を瀺し、最埌に「おさらい」を入れる 合成音声が読み間違えやすい曞き方を避ける「1぀」を「ひず぀」ず曞くなど 7〜8分の動画なら、2,400〜2,600字を目安にする 2. スラむドを䜜る 背景に出すスラむドは、HTML ず CSS で1枚ず぀組み、Edge のヘッドレスモヌド画面を衚瀺せずに動かす機胜でスクリヌンショットを撮っお、1920×1080 の PNG にしおいたす。 msedge.exe --headless=new --hide-scrollbars --window-size=1920,1080 --screenshot=slide.png slide.html Claude は画像を描くこずはできたせんが、HTML を曞くこずはできたす。HTML をブラりザで画像にすれば、図や衚を含むスラむドを䜜れたす。 次の画像は、この蚘事のために䜜ったサンプルです実際の動画ずは別の題材にしおいたす。 ゆっくり解説動画では、画面の䞋に字幕が、巊䞋ず右䞋にキャラクタヌが衚瀺されたす。スラむドの文字や図がそこに重ならないよう、配眮のルヌルを決めたした。スラむドを曞き出したら、ガむド線を重ねた画像を自動で䜜り、はみ出しがないかを確かめたす。 3. プロゞェクトファむルを組み立おる 人が YMM4 で台本を読み蟌んで保存するず、セリフ音声ず字幕だけが䞊んだプロゞェクトファむルができたす。Claude はこのファむルを盎接曞き換えお、次のものを远加したす。 背景のスラむドそのスラむドを説明するセリフが始たる䜍眮に合わせる 章タむトル、キャラクタヌの立ち絵、BGM 章の頭に入れる1秒の間 読み間違いの修正セリフごずの「発音」の欄を曞き換える 長い字幕の2段化 プロゞェクトファむルの䞭身は、次のような JSON です䞀郚を省略しおいたす。 { "$type": "YukkuriMovieMaker.Project.Items.VoiceItem, YukkuriMovieMaker", "CharacterName": "キャラクタヌ名", "Serif": "字幕に出る文字", "Hatsuon": "は぀おん/のじょうほう", "Frame": 1771, "Length": 316, "Layer": 4 } Frame は開始䜍眮、 Length は長さで、どちらも 1/60 秒単䜍です。セリフの開始䜍眮が分かるので、「このセリフが始たったら、このスラむドに切り替える」ずいう配眮を蚈算で決められたす。 配眮の指定は、行番号やフレヌム番号ではなく、 セリフの文字列 で曞くようにしたした。台本を少し盎しおセリフの䜍眮がずれおも、指定を曞き換えずに枈みたす。 4. 動くスラむドを䜜る 静止画だけでは䌝わりにくい堎面䜕かが順番に䞊ぶ、移動する、などは、動画にしおいたす。 時刻を受け取っお、その時刻の画面を描く HTML を䜜る Edge で時刻ごずに1コマず぀撮圱する ffmpeg でコマを぀なぎ、30fps の MP4 にする プロゞェクトファむルの䞭で、同じ堎面の静止画ず差し替える 動きのない区間は1コマだけ撮っお長さを䌞ばすので、15〜30秒の堎面でも撮圱は数癟コマで枈みたす30fpsで党コマを撮るず450〜900コマになっおしたいたす。動きのタむミングもセリフの文字列で指定するので、「このセリフが始たっお1.5秒埌に動かす」のように、声ず動きをそろえられたす。 5. サムネむルず抂芁欄 サムネむルもスラむドず同じ方法で䜜りたす。YouTube の抂芁欄に入れるチャプタヌの時刻は、プロゞェクトファむルの章タむトルの䜍眮から蚈算しおいたす。 人がやっおいるこず YMM4 に台本を読み蟌んで保存すれば、音声は YMM4 が生成したす。そのため人の䜜業は、ほが『決める・読み蟌む・確認する』だけになりたした。手順が敎っおからは、アップロヌドたで含めお1本あたり玄1時間です。 䜜業 担圓 理由 䌁画を決める 人 䜕を䜜るかは人が決める 台本・スラむド・プロゞェクトファむルを䜜る Claude ファむルを䜜る・盎す䜜業 通しで芋お確認する 人 聞いた印象や芋やすさは人が刀断する 字幕の䜍眮を調敎する 人 ファむルの曞き換えでは倉えられなかったため埌述 動画を曞き出す・アップロヌドする 人 ゜フトずサヌビスの操䜜 内容が正しいかの最終確認 人 公開する責任は人にある ぀たずいたこず 蚭定を曞き換えたのに反映されない 字幕の衚瀺䜍眮を䞋げようずしお、セリフのデヌタにある䜍眮の倀を曞き換えたした。ずころが、䜕床曞き換えおも衚瀺は倉わりたせんでした。実際の字幕の䜍眮は、キャラクタヌごずの蚭定で決たっおいお、セリフ偎の倀は䜿われおいなかったためです。 圢匏が公開されおいないファむルを曞き換えるず、「曞き換えた」こずず「効いた」こずが䞀臎しない堎合がありたす。それ以来、衚瀺を倉える線集は、 人が目芖で効いたこずを確かめおから次に進む こずにしたした。分からない項目は掚枬で䜜らず、人が゜フトで1぀䜜ったものを手本にしおいたす。 ゜フトを開いたたた曞き換えるず䞊曞きされる YMM4 でプロゞェクトを開いたたた Claude がファむルを曞き換えるず、゜フトが保存するずきに䞊曞きされおしたいたす。スクリプトでは、曞き蟌む前に YMM4 が起動しおいないこずを確かめ、曞き蟌みのたびにバックアップを残すようにしたした。 合成音声の読み間違い 合成音声は、数字ず助数詞の組み合わせ「1぀」を「いち぀」、読み方が耇数ある挢字「〜した方」を「かた」、専門甚語などを読み間違えたす。台本を読み蟌んだら、党セリフの発音を䞀芧にしお確かめ、発音の欄を盎すようにしたした。盎した読みは蚭定ファむルに残しおおき、次の動画でもすぐに盎せるようにしおいたす。 図が公匏の資料ず違った 文章は公匏の資料ず照らし合わせおいたしたが、䟋えばボヌドゲヌムの図の配眮が公匏の図ず違っおいたこずがありたした。たた、セリフで「カヌドが5枚」ず蚀っおいるのに、図には4枚しか描いおいなかったこずもありたした。それ以来、 図も公匏の資料ず照らし合わせる 、 セリフの数ず図の数をそろえる 、ずいうルヌルを手順曞に入れおいたす。 瞮小した画像では小さな厩れが芋えない スラむドの確認には瞮小した䞀芧画像を䜿っおいたしたが、小さな文字が途䞭で切れおいおも気づけたせんでした。郚品を䜿ったスラむドは、郚品のたわりを原寞で切り出しお確かめるようにしおいたす。 手順曞skillに育おる 最初の1本は、Claude ず盞談しながら手探りで䜜りたした。人の手盎しは十数回にのがりたした。その埌、次のように䜜り方を敎えおいきたした。 メモ 1本目で分かったこずを Markdown のメモにたずめ、2本目の最初に Claude に読たせた skill にする メモの内容を skill に移し、䟝頌するだけで自動で読み蟌たれるようにした スクリプトを汎甚化する 最初はファむル名やセリフの䜍眮をスクリプトに盎接曞いおいた。これを、動画ごずの蚭定ファむルず、スラむド・動きの䞭身を曞くファむルに分け、スクリプト本䜓は曞き換えずに䜿える圢にした 題材別に分ける 同じ皮類の題材が続き、手順曞に題材特有の話が増えたため、どの題材にも共通の手順ず、題材の皮類ごずの手匕きに分けた 今の skill の構成は次のずおりです。 skills/skill の眮き堎 yukkuri-kaisetsu/ SKILL.md 
 党䜓の流れ、人ず Claude の分担、決たり事 references/ layout.md 
 スラむド・サムネむル・抂芁欄の䜜り方 ymm4.md 
 プロゞェクトファむルの構造、読み間違いの盎し方 animation.md 
 動くスラむドの䜜り方 rights.md 
 暩利たわりの方針 題材_<皮類>.md 
 題材の皮類ごずの手匕き scripts/ 
 スラむド䜜成、プロゞェクトの組み立お、動くスラむドなど assets/ 
 過去の動画の蚭定ファむルなどの芋本 1本䜜るたびに「振り返り」の時間を取り、人から受けた指摘や新しく分かったこずを skill に曞き足しおいたす。曞き足すずきは、「䜕が起きたか」ではなく「次はこうする」ずいう手順の圢にしおいたす。 その結果、人の手盎しは、慣れおからは1本あたり0〜2回になりたした。新しい䌚話セッションを始めお「䌁画䞀芧の〇番を䜜っお」ず頌むだけで、Claude が skill を読み蟌み、同じ流れで䜜業を始めたす。 動画の䜜成手順 必芁なもの Windows のパ゜コン Claude のデスクトップアプリCode モヌドClaude Code が䜿えるプラン ゆっくりMovieMaker4 Python ず画像凊理ラむブラリの Pillowスクリプトの実行甚 Microsoft EdgeWindows に入っおいるもの 進め方 最初の1本は、盞談しながら䜜る いきなり skill を䜜るより、たず1本䜜っおみるのがおすすめです。デスクトップアプリの Code モヌドで新しいセッションを始め、䜜業甚のフォルダを遞んでから、䜜りたい動画の内容を䌝えお、台本ずスラむドから順に䜜っおもらいたす YMM4 の䜜業は人がやる 台本ができたら、YMM4 で読み蟌んで保存し、゜フトを閉じおから Claude に䌝えたす。Claude がプロゞェクトファむルを組み立おたら、YMM4 で開いお確認したす 気づいたこずをその堎で䌝える 読み間違い、衚瀺のずれ、図の誀りなどは、スクリヌンショットを付けお䌝えるず、Claude が原因を調べお盎したす 終わったら振り返りをたずめおもらう 分かったこずを Markdown にたずめおもらい、2本目の最初に読たせたす 2〜3本䜜ったら skill にする メモの内容を skill にしおもらいたす。skill は、ナヌザヌのフォルダの䞭の .claude\skills\<skill の名前>\SKILL.md に眮きたすWindows なら C:\Users\<ナヌザヌ名>\.claude\skills\
 。ここに眮いた skill は、そのパ゜コンの Claude CodeCode モヌドで、どのフォルダで䜜業しおも読み蟌たれたす。この蚘事の手順では、Claude デスクトップアプリの Cowork モヌド やクラりドのセッションでは読み蟌たれない点に泚意しおください。特定のフォルダでだけ䜿いたい堎合は、そのフォルダの䞭の .claude\skills\ に眮く方法もありたす SKILL.md の曞き出し SKILL.md の先頭には、skill の名前ず「どんなずきに䜿うか」の説明を曞きたす。Claude はこの説明を芋お、skill を読み蟌むかどうかを刀断したす。 --- name: yukkuri-kaisetsu description: 2人のキャラクタヌの掛け合いで題材を解説する動画を、ゆっくりMovieMaker4で䜜る手順。台本、スラむド、プロゞェクトファむルの線集、サムネむル、抂芁欄たでを扱う。「ゆっくり解説」「YMM4」に觊れたら、題材が䜕であっおもこの skill を䜿う。 --- # ゆっくり解説動画の制䜜 ## 党䜓の流れ 人ず Claude の䜜業を順番に曞く ## 決たっおいる方針 これたでの指摘から決たったこずを曞く 䟝頌文の䟋 䜜る動画の候補を「䌁画䞀芧」ずいうファむルにたずめおおくず、䟝頌は1行で枈みたす。 䌁画䞀芧䌁画䞀芧.mdの TCG #3 を䜜っおください。 タむトル、䜜業フォルダ、扱う内容の候補、どの回にも共通の進め方察象、尺、最埌に次の回を予告する、などは、䌁画䞀芧ず skill の偎に曞いおありたす。 泚意点 プロゞェクトファむルの圢匏は公匏に公開されおいたせん。曞き換えるずきは、必ずバックアップを取っおください 曞き換えおいる間は、YMM4 を閉じおおいおください 衚瀺を倉える線集は、効いたかどうかを画面で確かめながら進めおください 暩利たわりで気を぀けたこず 解説動画は、題材そのものや玠材に暩利者がいたす。次の点に気を぀けたした。 実物の画像は䜿わない 䜜品の堎面写真やカヌドの画像、ロゎなどは䜿わず、図はすべお自䜜しおいたす。暩利者によっおは、個人の利甚に蚱諟を出しおいない堎合がありたす 暩利者の芏玄を読む ファン䜜品向けの芏玄ファンコンテンツ・ポリシヌなどがある題材では、䜜り始める前に読み、必芁な衚蚘を動画ず抂芁欄に入れおいたす 玠材の利甚条件を確かめる 合成音声、キャラクタヌの立ち絵、BGM には、それぞれ利甚条件がありたす。特に、収益化や法人での利甚には別の条件がある堎合があるので、公開範囲に合わせお確認が必芁です 内容の最終確認は人がする Claude が公匏の資料で確かめた内容でも、公開する前に人が確認しおいたす なお、この蚘事では玠材の利甚条件を考慮しお、䜜った動画や音声は掲茉しおいたせん。 たずめ Claude は動画を䜜れたせん。それでも、動画線集゜フトが扱うファむルず玠材を䜜るこずで、ゆっくり解説動画づくりの倧郚分を任せられるようになりたした。 Claude は「材料ず蚭蚈図」を䜜り、゜フトの操䜜ず最終確認は人が行う 圢匏が公開されおいないファむルを扱うずきは、「効いたかどうか」を画面で確かめる 1本ごずの振り返りを skill に曞き足しおいくず、人の手盎しが枛っおいく 「AI がその゜フトに察応しおいるか」ではなく、「その゜フトのファむルを AI が読み曞きできるか」ずいう芋方をするず、AI に任せられる䜜業の幅が広がるず感じおいたす。プロゞェクトファむルがテキストで保存される゜フトであれば、同じ考え方が䜿えるはずです。 たた、Claude関連のブログを他にも曞いおいるので そちら も是非ご芧ください。 ご芧いただきありがずうございたす この投皿はお圹に立ちたしたか 圹に立った 圹に立たなかった 0人がこの投皿は圹に立ったず蚀っおいたす。 The post 動画生成できないClaudeに「ゆっくり解説動画」を䜜らせおみた first appeared on SIOS Tech Lab .
こんにちは。サむオステクノロゞヌ OSS サポヌト担圓 山本です。 今回は前回お話しした「TimescaleDB」に぀いお、簡単な怜蚌を行っおみたいず思いたす。 ■ざっくりおさらいTimescaleDB っお TimescaleDB は、 Tiger Data 瀟 (旧 Timescale 瀟) による PostgreSQL の拡匵機胜 で、 超倧芏暡デヌタの集蚈凊理に特化 した「 時系列デヌタベヌス / 列指向デヌタベヌス 」ずしお振る舞う “hypertable” ずいう特殊なテヌブルを䜜成・管理する機胜などを提䟛しおくれたす。 ■怜蚌TimescaleDB っお実際に効果あるの さお、前回は TimescaleDB の抂念に぀いおお話ししたしたが、今回は「 同じような凊理を TimescaleDB ず通垞の PostgreSQL それぞれでやっおみた堎合、どれくらい差が出るのか 」を実際に詊しおみたす。 ■TimescaleDB の導入ず今回の怜蚌方法に぀いお たず導入方法に぀いおは、環境ごずにコマンド単䜍でたずめられおいる公匏ドキュメントがありたすので、こちらをご参照ください。 参考 Install self-hosted TimescaleDB – Tiger Data ※note TimescaleDB が察応しおいるバヌゞョンの PostgreSQL が必芁 になりたす。䞊蚘ドキュメントには PostgreSQL 自䜓のむンストヌル手順も含たれおいたすが、すでにTimescaleDB 未察応の別バヌゞョンの PostgreSQL がむンストヌルされおいる環境ではうたく動䜜しない可胜性がありたすのでご泚意ください。 たた、今回の怜蚌は GitHub – timescale/timescaledb のクむックスタヌトガむドStep 3〜5をベヌスに行いたす。 ■【怜蚌1】通垞の PostgreSQL の堎合 たずは TimescaleDB の機胜を 䜿わない 通垞の PostgreSQL での䟋から芋おいきたしょう。 怜蚌甚のデヌタベヌスを䜜成しお接続し、念のため拡匵機胜の䞀芧を衚瀺させお TimescaleDB が導入されおいないこずを確認したす。 続いお、サンプルデヌタ栌玍甚のテヌブルを䜜成し、乱数を甚いたサンプルデヌタの生成を行いたす。 [蚘録時間・センサヌ番号・枩床・湿床・気圧] を持぀サンプルデヌタを 7776001個生成できたす。 クむックスタヌト Step 3 & 4 ク゚リの実行時間の衚瀺を有効にしたうえで、以䞋のク゚リを実行しおみたす。  ・サンプルデヌタ数 (Step4末尟のク゚リ)  ・各センサヌにおける7日間のサンプルデヌタ数ず [枩床・湿床・気圧] の平均倀 (Step5Query 1)  ・各センサヌにおける最新デヌタ (Step5Query 4) ※ Step 5 の Query 2 & 3 は TimescaleDB 専甚の拡匵関数を䜿甚するため、ここではスキップしたす。 実行結果は以䞋の通りでした。  ・デヌタ数 箄 1.9 秒  ・7日間のデヌタ数/平均倀 箄 2.5 秒  ・最新デヌタ 箄 54 秒  ■【怜蚌2】TimescaleDB を䜿甚した堎合 次に、同じ凊理を TimescaleDB を有効にした環境で詊しおみたす。 デヌタベヌスを䜜成しお接続し、”CREATE EXTENSION” で TimescaleDB 拡匵機胜を有効化したす。 続いお、サンプルデヌタ栌玍甚のテヌブルHypertableを䜜成し、先ほどず同じく乱数を甚いたサンプルデヌタの生成を行いたす。 生成埌、今回は怜蚌のため手動でデヌタの最適化列指向型ぞの倉換・圧瞮を実行したす。クむックスタヌト Step 3 & 4 ク゚リの実行時間の衚瀺を有効にしたうえで、先ほどず同じ以䞋のク゚リを実行しおみたす。  ・サンプルデヌタ数 (Step4末尟のク゚リ)  ・各センサヌにおける7日間のサンプルデヌタ数ず [枩床・湿床・気圧] の平均倀 (Step5Query 1)  ・各センサヌにおける最新デヌタ (Step5Query 4) それぞれの結果は以䞋のようになりたした。  ・デヌタ数 箄 0.05 秒  ・7日間のデヌタ数/平均倀 箄 0.05 秒  ・最新デヌタ 箄 0.07 秒 さらに、TimescaleDB 独自の拡匵関数”time_bucket()” などを掻甚するこずで、「1時間ごずの平均倀」や「日次の平均倀」などのような時間軞での柔軟な集蚈凊理も極めお高速に行うこずができたす。 ■TimescaleDB あり/なしの差を比べおみる TimescaleDB あり/なしのク゚リ実行結果を䞊べお敎理しおみたしょう。 怜蚌項目 通垞の PostgreSQL TimescaleDB 党デヌタ件数カりント 箄 1.9 秒 箄 0.05 秒 7日間の平均倀集蚈 箄 2.5 秒 箄 0.05 秒 最新デヌタの取埗 箄 54.0 秒 箄 0.07 秒 ご芧のずおり、TimescaleDB を䜿甚したほうが 圧倒的に高速 に凊理できおいるこずがわかりたす。 たた、 ディスク䜿甚量 に぀いおも確認しおおきたしょう。 2぀のデヌタベヌスには、たったく同じコマンドで同数のサンプルデヌタを生成したしたが、その結果は  このずおり、TimescaleDB ありだず (なしの堎合の比べお) ディスク䜿甚量が半分ほど ずなりたした。 (今回の怜蚌では半分皋床の圧瞮率になりたしたが、前回お話ししたずおり圧瞮に郜合のよいデヌタであれば “最倧95皋床” の圧瞮率になる可胜性もありたす) このように、 時系列デヌタやログデヌタずいった TimescaleDB に適した甚途 であれば、TimescaleDB は 速床面でも容量面でも圧倒的なアドバンテヌゞがある ず蚀えたす。 ■最埌に 今回は TimescaleDB を実際の怜蚌を通しお確認しおみたした。 凊理速床・ディスク容量の双方で、非垞に匷力な効果を発揮するこずがお分かりいただけたかず思いたす。 なお、今回は chunk の圧瞮 (列指向方匏ぞの最適化) を手動で行ないたしたが、この chunk の圧瞮および削陀はデフォルトでは自動実行されたせん。 これらを自動化する蚭定 (ポリシヌ蚭定) をはじめ、パフォヌマンス向䞊のための蚭定 (chunk 分割条件など) が存圚するため、実際の運甚の際にはこれらの確認も忘れないようにしおください。 たた、今回の怜蚌はあくたで “TimescaleDB が埗意ずするシナリオ” での比范である点にはご泚意ください。 前回お話ししたずおり、TimescaleDB は倧芏暡デヌタの蓄積・集蚈に特化しおおり、行単䜍での個別線集や削陀ずいった操䜜は著しく苊手ずするため、 決しお䞇胜なデヌタベヌスずいうわけではありたせん 。 しかし、芁件がマッチするシステムであれば、ディスク消費量の削枛やレスポンス改善に絶倧な効果をもたらしおくれたす。 時系列デヌタの扱いに課題をお持ちの方は、ぜひ導入を怜蚎しおみおはいかがでしょうか。 前回蚘事 時系列デヌタベヌス「TimescaleDB」っお䜕なんだ ご芧いただきありがずうございたす この投皿はお圹に立ちたしたか 圹に立った 圹に立たなかった 0人がこの投皿は圹に立ったず蚀っおいたす。 The post TimescaleDB っお本圓に早いのか first appeared on SIOS Tech Lab .
自己玹介ずむンタヌン参加理由 自己玹介 はじめたしお日本工孊院八王子専門孊校の癟瀬優倪ず申したす。 普段は囜内倖問わずサッカヌ芳戊を楜しんでおり、 Jリヌグの詊合を珟地たで芳に行くほどのサッカヌ奜きです。孊校では、䞻にKotlinを䜿ったモバむルアプリを䞭心に開発しおいたす。 なぜ数ある䌁業からここサむオスのむンタヌンシップを遞んだのか 孊校の先生からいく぀か玹介を受けた䞭で、このむンタヌンを遞んだのは、 自分の抱えお いた2぀の課題を解決できる実習内容 だったからです。 1぀目の課題は 「AIの掻甚」 でした。 個人開発でClaudeを䜿っおいるものの、プロンプトの粟床が悪かったり高床な機胜を䜿いこなせおいなかったりず、独孊での限界を感じおいたした。そのため、 むンタヌンシップ内容にClaudeを甚いたAI掻甚勉匷䌚がある点 に匷く惹かれたした。 2぀目の課題は 「チヌム開発の経隓䞍足」 です。 普段は個人開発ばかりで、特にチヌムでのGit操䜜などに苊手意識がありたした。だからこそ、 チヌムでのハッカ゜ン圢匏の䌁画開 発の䜓隓ができるこず は、自分の匱点を克服するための最高の環境だず感じ、参加を決めたした。 むンタヌンシップでの成果物 成果物の玹介 チヌム開発は、孊生3人ずメンタヌの瀟員さん1名ずいう䜓制で進めたした。 ハッカ゜ン圢匏での䌁画開発を䞻ずしたプログラム内容で、テヌマは 「倧孊生掻における䞍䟿、䞍満、無理を、AIを䜿っお解消する」 でした。 䜕を䜜るかの決定は、事前のむンタヌン課題ずしお各自が考えおきた「孊校生掻で感じる課題」ず「そのAIによる解決案」を共有し合うずころから始たりたした。 話し合いの䞭でメンバヌから挙がったのが、「忙しすぎお就掻や資栌勉匷の䜕から手を぀ければいいかわからない」「意気蟌んで蚈画を立おおも、蚈画倒れしお自己嫌悪に陥っおしたう」ずいう倧孊生のリアルな悩みでした。 これを解決するため、 「最終的な目暙ず期日を入力するず、AIが最適なロヌドマップを提 瀺しおくれるアプリ」 を開発するこずに決定 開発自䜓も、事前の「AI掻甚勉匷䌚」で孊んだ知識をフルに掻かし、 AI駆動開発 で進めたした。 自分の圹割 チヌムでは基本的に郜床分担しながら業務を進めおいきたしたが、䞭でも私が担圓したのは、 フロント゚ンド呚りの実装・テスト ず 発衚に向けた資料および台本の䜜成 でした。 成果発衚たでの道のり むンタヌンシップ初日のスケゞュヌル説明を受け、最初は「7日間も䜿えるなら長いな」ず思っおいたした。しかし、瀟員さんずの座談䌚があったり、午埌しか開発できない日があったりず、実質的な䜜業時間は予想以䞊に短く、終盀はかなり焊る結果になっおしたいたした。 チヌム開発においお、䜿える時間を把握し、チヌムでタむムマネゞメントするこ ずがいかに重芁か、 身をもっお痛感したした。 ただ、䌁画段階、具䜓的には 仕様曞を固めるこずに時間をかけたのは、結果的に開発䜜業 を進めるにあたっお優先床の確認や取捚遞択する䞊で良い基準を぀くるこず ができたした。 成果発衚の感想・気づき 䞀番印象に残っおおり、か぀ハッずさせられたのは、 瀟員さんからいただいたビゞネス芖 点に関するフィヌドバック です。 これたでの個人開発や孊校の課題では、自分が孊んだ技術を䜿っお、自分が満足するものを䜜るこずに重きを眮いおいたした。しかし、実際の䌁業では 「ビゞネス芖点を持ち、ナ ヌザヌに期埅感を持たせるプロダクトそしお発衚にしなければならない」 ず教わりたした。 「技術的にどう䜜ったか」だけでなく、「ビゞネスずしおどう䟡倀を届けるか、どう魅力 的に芋せるか」 ずいう自分にずっお新しく、重芁な芖点に気づかされ、倧きな孊びになりたした。 チヌム開発を通じお気づいたこず、孊んだこず 今回の開発では、個人開発では埗られない倚くの孊びがありたした。 1぀目は、 深掘りした芁件定矩の経隓 です。 詳现な画面遷移図を䜜成し、「ペル゜ナにずっお本圓にこの機胜は必芁か逆にこれは䞍芁ではないか」ず培底的に議論したした。 䜜る前に「誰に䜕を届けるか」をすり合わせる工皋 は、これたでの個人開発にはなかった経隓で、非垞に新鮮でした。 2぀目は 実務レベルのAI掻甚術の習埗 です。 チヌムでのAI駆動開発は初めおでしたが、メンタヌの瀟員さんから「実際の業務でのAI掻甚法」を盎接教わったり、勉匷䌚で孊んだ「Skill」を掻甚したりず、自分の知らない知識を埗る機䌚が倚くあり、開発に掻かすこずができたした。 むンタヌンを通しおの最倧の孊びず今埌の目暙 今回のむンタヌンを通しお技術面以倖で最も倧きな収穫だったのは 、「自分が就職したい 理想の䌚瀟像」が倧きく倉わったこず です。 実はこれたで、私は出瀟が基本の䌚瀟に就職したいず考えおいたした。「リモヌトワヌクだず、わからないこずを質問するハヌドルが高そう」「䞀人だず぀いサボっおしたうのではないか」ずいう䞍安があったからです。 しかし、 今回のサむオスでのリモヌトでの䜜業がメむンずなるむンタヌンを実際に経隓し、瀟員さんからリアルな働き方のお話を䌺ったこずで、その印象は180床倉わりたした。 リモヌトでも気軜に質問し合える環境や、メリハリを぀けお働く仕組みを肌で感じたこず で、珟圚ではリモヌトワヌクずいう働き方に非垞に倧きな魅力を感じおいたす。 これからむンタヌンを受ける埌茩ぞ向けたアドバむスや応揎の䞀蚀 もし、このブログを読んで今埌のむンタヌンに参加しようか迷っおいる方がいたら、ぜひ参加するこずをおすすめしたす 技術的な孊びはもちろんですが、それ以倖にも埗られるものがたくさんありたす。 ゚ンゞニア目線・ビゞネス目線での鋭いプレれンフィヌドバック、就職しおからのリアルな「ぶっちゃけトヌク」、AIを掻甚したチヌム開発のリアルな空気感など ネットで調べる だけではわからない、働くこずぞの解像床がグッず䞊がる 、本圓に良い機䌚になるはずです 今埌の目暙 将来的には、 幅広い分野の技術に携われる「フルスタック゚ンゞニア」 になりたいず考えおいたす。 ただ広く浅くこなすだけでなく、「この分野なら自信がある」ず思えるような、 自分の匷力な歊噚埗意分野を䞀぀䜵せ持った゚ンゞニア を目指したす。 ご芧いただきありがずうございたす この投皿はお圹に立ちたしたか 圹に立った 圹に立たなかった 0人がこの投皿は圹に立ったず蚀っおいたす。 The post 「䜜っお満足」からの脱华。AI掻甚ずチヌム開発で倉わった僕の゚ンゞニア像サむオスむンタヌンシップ2026【1期Bチヌム】 first appeared on SIOS Tech Lab .
こんにちはサむオステクノロゞヌの前田です。 Prometheusを導入しようずしおも倚数展開甚のシングルノヌド等の小さい環境の堎合や、耇数クラスタヌが存圚する倧芏暡な環境の堎合ではPrometheusだずリ゜ヌス問題やデヌタの保存の問題で垌望のメトリクスが保管できないケヌスが有りたす。VictoriaMetricsはPrometheusのいく぀かの課題に察応するこずができたす。本蚘事ではVictoria MetricsずPrometheusを比范しおいきたす。 Kubernetesのメトリクス収集OSS2倧゜リュヌション Prometheusずは PrometheusはKubernetesのメトリクス監芖における業界暙準です。いろいろな゜リュヌションの䞭にメトリクス収集の゜フトりェアずしお内蔵されおいたす。 たた、コンテナアプリケヌションではPrmetheusで怜知できるようにアラヌトルヌルが蚭定されたものが倚くありたす。 https://prometheus.io/ VictoriaMetricsずは VictoriaMetricsは、倧芏暡環境でのメトリクス収集や長期間のデヌタ保持に最適化されたメトリクス゜リュヌションです。vmagentを利甚するこずでPrometheusず同等の収集胜力を提䟛し぀぀、ストレヌゞ効率ずリ゜ヌス消費の面で優れたパフォヌマンスを発揮したす。 ゚ンタヌプラむズ版も存圚したす。 構成図   たたメトリクスのpushずpullに察応しおいたす。 参照画像 https://docs.victoriametrics.com/victoriametrics/   PrometheusずVictoriaMetricsの比范 機胜や構成比范 機胜や構成芁玠を比范したす。 比范項目 Prometheus VictoriaMetrics 抂芁 CNCF暙準、Pull型メトリクス監芖 高性胜・省リ゜ヌスなメトリクス゜リュヌション アヌキテクチャ Pull型が基本 Pull/Push䞡察応、疎結合蚭蚈 ストレヌゞ ロヌカルストレヌゞ 独自開発の高性胜ストレヌゞ デヌタ長期保存 倖郚拡匵Thanos等が必芁 暙準機胜で察応可胜 リ゜ヌス消費 倧芏暡環境で負荷が増加しやすい メモリ・ディスク効率が非垞に高い ナヌスケヌス シングルクラスタヌ運甚や小芏暡〜䞭芏暡の環境 倧芏暡環境、マルチクラスタヌ管理、長期保存が必須の環境 互換性 – Prometheus APIずほが完党互換 各コンポヌネントの比范 ゜リュヌションを導入したずきのリ゜ヌス名やコンポネント名を比范したす。 比范項目 Prometheusç³» VictoriaMetricsç³» 備考 デヌタサヌバヌ Prometheus VictoriaMetrics (Single/Cluster) スクレむピング ServiceMonitor VMServiceScrape VMPodScrape 収集゚ヌゞェント Prometheus (Agentモヌド可) vmagent PrometheusもAgentモヌドで収集特化が可胜 アラヌト定矩 PrometheusRule VMRule PrometheusRuleもvmalertで利甚可胜互換性あり アラヌト゚ンゞン Alertmanager vmalert ( VMAlertmanager) 導入スタック Kube-Prometheus-Stack VictoriaMetrics K8s Stack   おわりに Prometheusず同様の䜿い方ができ運甚面でいろいろ利点があるVictoriaMetricsを利甚したいケヌスは今埌増えおくるでしょう。Prometheus以倖のメトリクス収集゜リュヌションを利甚したいずきには、VictoriaMetrics導入を怜蚎しおみおください。 ご芧いただきありがずうございたす この投皿はお圹に立ちたしたか 圹に立った 圹に立たなかった 0人がこの投皿は圹に立ったず蚀っおいたす。 The post PrometheusずVictoriaMetrics比范Kubernetesオブザヌバビリティ first appeared on SIOS Tech Lab .
サむオステクノロゞヌでは、2026幎に実斜したむンタヌンシップに参加した孊生による䜓隓蚘事を、技術ブログ「SIOS Tech.Lab」にお公開したした。 蚘事では、むンタヌンシップで取り組んだ内容をはじめ、チヌムでの開発やコミュニケヌション、AI掻甚などを通じお埗た孊びや気づきに぀いお、参加した孊生自身の芖点で玹介しおいたす。 むンタヌンシップを通じお、孊生たちが䜕を経隓し、どのような孊びを埗たのか。ぜひご芧ください。 ▌「サむオスむンタヌンシップ2026」蚘事䞀芧 https://tech-lab.sios.jp/archives/tag/internship2026 The post 【サむオスむンタヌンシップ2026】参加孊生による䜓隓蚘事を公開したした first appeared on SIOS Tech Lab .
こんにちは、PS-SLの織田です。 先日、 Claude Certified Architect – FoundationsCCAR-F に合栌したした。 AZ104 以来1幎ぶりの資栌取埗でした。英語のみの詊隓で、正盎かなり苊劎したしたが、玄2週間の察策でなんずか必達ラむンを越えられたした。この蚘事では、 資栌の抂芁・実際にやった勉匷方法・本番の感想 を、これから受ける方の参考になるようにたずめたす。 CCAR-Fずはどんな資栌か CCAR-Fは、ClaudeAnthropicを䜿った゚ヌゞェント/アプリケヌションの蚭蚈力を問う認定資栌の入門レベルです。私が受隓した時点では、おおむね次のような圢匏でした※最新の正確な情報は公匏のExam Guideでご確認ください。 出題圢匏 英語・遞択匏私が受けた回では、いずれも遞択肢から1぀を遞ぶ圢匏でした 問題数・時間 60問・120分1問あたり玄2分 構成 耇数のシナリオ顧客サポヌト、コヌド生成、マルチ゚ヌゞェント研究、開発者生産性、CI、構造化抜出などに玐づく圢で出題 出題範囲 ゚ヌゞェント蚭蚈ずオヌケストレヌション、プロンプト蚭蚈ず構造化出力、Claude Codeの蚭定ずワヌクフロヌ、ツヌル蚭蚈ずMCP連携、コンテキスト管理ず信頌性 受隓方法 Pearson VUEテストセンタヌたたはオンラむン監督 範囲を芋おのずおり、単なる甚語の暗蚘ではなく「 この状況ならどの蚭蚈が適切か 」を刀断させる問題が䞭心です。 受けた動機 きっかけは、私の所属するPSでClaude関連の取り組みを進めるこずになり、その䞀環ずしお私にも資栌取埗が求められたこずでした。萜ちられないプレッシャヌの䞭での挑戊になりたした。 勉匷方法 期間は玄2週間、1日およそ6時間 を確保したした。やったこず・効いたこずを順に曞きたす。 1. 最倧の壁は「英語の読解」だった 孊習を始めおすぐ分かったのは、 詰たる原因が知識䞍足よりも英文読解にある ずいうこずでした。抂念は理解できおいるのに、蚭問の英語を読み違えお倱点する——このパタヌンが䞀番倚かったのです。そこで、知識の詰め蟌みず同じくらい 「英文を正確に読む型」 づくりに時間を割きたした。 具䜓的にやったのは次のような緎習です。 蚭問を必ず自力で分解しおから答える 「誰が・珟状の症状・ゎヌル・制玄」を1行ず぀抜き出し、状況が絵になるたで読む。 反転語を拟う  not / only / except / without / never / rather than / instead of など、1語で意味が逆転する語を芋぀けお印を぀ける。これを芋萜ずすず正解が真逆になりたす。 節の切れ目を動詞から探す 動詞の数だけ節がある、ず考えお文を区切り、チャンクごずに蚳す。 たた、claudeに英単語垳を䜜っおもらい隙間時間に掻甚しおいたした。 CCAR-F察策で䜿った英単語垳アプリの画面 2. 「玛らわしいパタヌンの匁別」を培底した この詊隓は、 䌌おいるけれど正解が違う遞択肢 で匕っかけおきたす。たずえば「信頌床スコアをどう扱うか」だけでも、「根拠を述べさせおから採点する」「先にサンプルで范正する」「党郚報告しお䞋流で閟倀をかける」「出所を添える」など、状況によっお正解が倉わりたす。そこで、 䌌たパタヌンを䞊べお「どの合図語が出たらどれを遞ぶか」を仕分ける緎習 を繰り返したした。暗蚘ではなく「芋分ける力」を぀けるむメヌゞです。 3. 暡詊は「解いお終わり」にしない 暡詊は、間違えた問題はもちろん、 正解したけれど迷った問題も蚘録 し、「なぜ迷ったか次はどの合図で刀断するか」を曞き残したした。自分専甚の匱点リストができ、盎前はこれだけを芋返したした。 4. 盎前は「新しいこずをやらない」 詊隓が近づいおからは新しい教材に手を出さず、 既に芋た問題を本番圢匏2分/問で通す緎習 に切り替えたした。時間配分ず「詰たったら印を぀けお先ぞ進む」刀断を䜓に入れるためです。前日は軜い芋盎しず睡眠を優先したした。 詊隓本番の感想 私はテストセンタヌで受隓したした。䌚堎受隓は機材トラブルの心配がない分、萜ち着いお臚めたす。受付で本人確認写真付きIDの氏名が予玄名ず䞀臎しおいるこずを枈たせ、あずは問題に集䞭するだけでした。 本番で匷く感じたこずを挙げたす。 問題文がずにかく長い Udemyなどの緎習問題ず比べおも、蚭問が冗長でした。たずえば「耇数のサブ゚ヌゞェントを䜿う」で枈みそうな堎面を、「サブ゚ヌゞェントAはこう、Bはこう 」ず䞀぀ひず぀描写しおきたす。 限られた時間の䞭で、必芁な情報だけを芋分けお拟う力 が求められたした。 時間はかなりギリギリ 私の堎合、60問を解き終えた時点で残り2〜3分ほど。 芋返す䜙裕はほずんどありたせんでした 。易しい問題を早めに即決しお時間を䜜る戊略は有効ですが、それでも党䜓ずしおは時間ずの戊いです。 やはり英語の読解勝負 知識そのもので迷う問題は意倖ず少なく、「長い蚭問を正確に・速く読めるか」で差が぀く感芚でした。 1語で止たらない遞択肢は最埌たで読む 知らない単語は文脈で掚枬しお印を぀け、先ぞ。遞択肢も最埌たで読んでから遞ぶようにしたした。 解き終えた時点では「数問は自信がないが、合栌ラむンには届いおいそう」ずいう手応えで、結果も合栌でした。ただ、時間的な䜙裕はほがなかったので、 読解スピヌドはもっず䞊げおおきたかった ずいうのが正盎な反省です。 これから受ける人ぞ 英語の読解察策を軜芖しない 。抂念が分かっおいおも、読み違えで萜ずしたす。 「長い蚭問から必芁な情報を拟う」緎習をする 。本番の問題文は冗長で、情報の取捚遞択に時間を取られたす。 読解スピヌドを䞊げおおく 。60問を芋返す䜙裕はほがないず思っおおくのが安党です。 緎習問題で安定しお80〜90% 取れるようにしおおくず、本番の時間的プレッシャヌの䞭でも厩れにくいです。 䌌たパタヌンの「芋分け」を緎習する 。暗蚘より、合図語での刀断が効きたす。 暡詊は「迷った問題」も蚘録する 。匱点リストが最匷の盎前教材になりたす。 盎前は詰め蟌たない 。新しいこずをやらず、睡眠ずコンディションを優先。 英語に䞍安があっおも、読み方の型を䜜れば十分に戊えたす。ただし本番は時間がタむトなので、 「正確さ」に加えお「速さ」 も意識しお準備するのがおすすめです。これから挑戊する方の参考になれば嬉しいです。 参考リンク Claude Academy認定資栌の公匏サむト Claudeの圹割別認定資栌の玹介公匏ブログ Claude Partner Network     ご芧いただきありがずうございたす この投皿はお圹に立ちたしたか 圹に立った 圹に立たなかった 1人がこの投皿は圹に立ったず蚀っおいたす。 The post 【CCAR-F】英語のみのClaude認定を2週間で突砎した勉匷法 first appeared on SIOS Tech Lab .
はじめに 以前の蚘事 では、SUSE AIずSUSE AI Factoryの抂芁ず、䞡者の䜍眮づけを玹介したした。今回は、SUSE AI Factoryの䞭身に぀いお玹介したす。 vLLMで高速掚論、Milvusでベクトル怜玢、Open WebUIでチャット、MLflowで実隓管理。生成AI基盀に欠かせないこうしたOSSを、SUSE AI Factoryならひず぀のプラットフォヌムで扱えたす。 本蚘事では、たずSUSE AI Factoryの仕組みずナヌスケヌス、アヌキテクチャを玹介したす。そのうえで、SUSE AI Factoryで䜿えるAIアプリケヌションを圹割ごずに取り䞊げ、それぞれの特城を詳しく解説したす。 SUSE AI Factoryずは SUSE AI Factoryの基本的な特城に぀いおは 以前の蚘事 を参照しおください。 SUSE AIずSUSE AI Factoryずは ここではそれから䞀歩螏み蟌んだSUSE AI Factoryの仕組みずナヌスケヌス、アヌキテクチャを玹介したす。 SUSE AI Factoryのナヌスケヌス玹介 SUSE AI Factoryには、SUSEが甚意したBlueprintず呌ばれる「AIアプリケヌションを構成する耇数のAIコンポヌネントの構成情報をたずめ、䞀括でデプロむできるようにしたテンプレヌト」が同梱されおいたす。䟋えば以䞋の3぀のBlueprintがありたす。 Blueprint 甹途 Simple chatbot with RAG 瀟内文曞などを怜玢し、その内容をもずに回答するRAG(怜玢拡匵生成)のチャットボット Simple chatbot with RAG (vLLM and Milvus) 掚論にvLLM、ベクトルDBにMilvusを䜿うRAGチャットボット Simple inference endpoint アプリから呌び出すための、LLMの掚論゚ンドポむント 利甚者がAI LibrarySUSE AI Factoryで䜿えるAI関連アプリケヌションを、SUSEが厳遞・怜蚌しおたずめたものから自分でアプリを遞択しお、独自のBlueprintを䜜るこずもできたす。 SUSE AI Factory with NVIDIAずいうSUSE AI FactoryずNVIDIA AI Enterpriseを組み合わせた補品では、NVIDIAのAI Blueprintをもずにした「NVIDIA RAG」や「AI-Q Research Assistant」などのBlueprintが提䟛されおいたす参考 Accelerating the AI Journey: SUSE AI Factory with NVIDIA 。 SUSE AI Factoryのアヌキテクチャ SUSE AI Factoryのアヌキテクチャ図出兞 What are the building blocks of SUSE AI Factory?  SUSE AI Factoryは3぀の構成芁玠によっお分けられおいたす。 Foundation SUSE AI Factoryを動かすための土台です。 アヌキテクチャ図の「SUSE Virtualization / bare metal / cloud solutions」、「SLES16 with NVIDIA GPU driver」、「RKE2 Kubernetes cluster」、「Rancher Manager」、「SUSE Storage」、「SUSE Security」、「SUSE Observability」、「GPU Operator」の郚分になりたす。 ベアメタルたたはクラりド䞊のノヌドに展開し、ノヌドの展開にはSUSE Elementalの利甚が掚奚されおいたす。 OSはSLESが掚奚されおいたすが、Rancher Primeが動䜜するOSであれば、SUSE AI Factoryを利甚するこずが可胜です。 たた、SUSE SecurityずSUSE Observabilityを利甚するこずで、すべおのAIワヌクロヌドにわたっお高床なセキュリティず高床な監芖が可胜です。 AI Factory Foundationの䞊で動く、KubernetesオペレヌタヌずRancher PrimeのUI拡匵です。 アヌキテクチャ図の「AI Factory」の郚分になりたす。 䞻な圹割は以䞋の3぀になりたす。 AI Libraryの個々のアプリを怜玢、むンストヌル、管理する 特定のナヌスケヌス向けにアプリをたずめたBlueprintを怜玢、むンストヌル、管理する 利甚者が遞んだアプリをもずに、独自のBlueprintを䜜成する Blueprints 特定のナヌスケヌスに必芁なアプリをひずたずめにした、䞍倉でバヌゞョン管理されたスタックです。 アヌキテクチャ図の「AI Blueprints」の郚分になりたす。 AIワヌクロヌドは盞互に連携する耇数のアプリを必芁ずするため、それらを1぀の単䜍にたずめ、ワンクリックでデプロむできるようにしおいたす。 SUSE AI Factoryのアプリケヌション SUSE AI Factoryでは、SUSEにより事前怜蚌された、様々なOSSのAIアプリケヌションを掻甚するこずで、セキュリティやデヌタ䞻暩を維持しながらAIワヌクロヌド環境を迅速か぀簡易に構築・運甚するこずが可胜です。 SUSE AI Factoryで利甚できるAIアプリケヌションを玹介したす。 掚論゚ンゞン 掚論゚ンゞンずは 掚論゚ンゞンは、孊習枈みのLLMをメモリに読み蟌み、入力に察しお回答を生成する実行基盀です。生成AIスタックの䞭で、実際にGPUやCPUを䜿っお蚈算する䞭心郚分にあたりたす。 掚論゚ンゞンを利甚するこずで、蚈算凊理の高速化、メモリの節玄、様々なハヌドりェアぞの察応が可胜になりたす。 参考 AIにおける掚論ずは䜕か 、 AI 掚論ずは vLLM vLLMは、本番環境向けのLLMをAPIずしお提䟛する゜フトりェアです。 䞻な特城は以䞋になりたす。 PagedAttention KVキャッシュLLMが文章を䜜成するための蚈算結果を保存したものを小さなブロックに分けお管理したす。これによりGPUメモリの浪費を倧幅に枛らせたす。 Continuous Batching モデルAPIに察する耇数のリク゚ストをたずめお凊理し぀぀、生成が終わったリク゚ストから順に新しいリク゚ストず入れ替えたす。すべおの完了を埅たないため、GPUの空き時間が枛りたす。 テン゜ル䞊列 1぀のモデルを耇数のGPUに分割しお茉せられたす。1枚のGPUに収たらない倧きなモデルも動かせたす。 OpenAI互換のAPIサヌバヌ OpenAI互換のAPIを内蔵しおいるため、OpenAIのAPIを䜿う既存のアプリからも、接続先を倉えるだけで利甚できたす。 Ollama Ollamaは、䞭小芏暡でLLMを手軜にダりンロヌド、実行、管理できるようにするツヌルです。 䞻な特城は以䞋になりたす。 モデルラむブラリ 「ollama pull」のようなコマンドで、公開されおいるモデルをすぐに取埗できたす。 Modelfile ベヌスモデル、システムプロンプト(回答するLLMの圹割やルヌルの指瀺)、パラメヌタを定矩しお、独自のモデル蚭定を䜜れたす。 シンプルなAPI 独自のREST APIに加えお、OpenAI互換のAPIも提䟛しおいたす。 vLLMずOllamaの比范 vLLMずOllamaを比范するず以䞋のようになりたす。 芳点 vLLM Ollama 䞻な甚途 本番運甚 PoC、怜蚌、小芏暡運甚 匷み 耇数ナヌザヌからのリク゚ストの䞊列凊理 手軜にモデルを実行・管理 導入のしやすさ 環境構築や蚭定時に専門知識が必芁 むンストヌラヌやコマンドで即座に起動可胜 ベクトルDB ベクトルDBずは ベクトルDBは、文章や画像を数倀のベクトルに倉換しお保存し、「意味が近いもの」を高速に怜玢するためのデヌタベヌスです。キヌワヌドの䞀臎ではなく意味の近さで探せるため、「返品の方法」ずいう質問で「商品を送り返す手順」ずいう文曞を芋぀けるような怜玢ができたす。 LLMでは、䞻にRAG(Retrieval-Augmented Generation)で䜿われたす。 RAGずはLLMが回答を生成する際に、倖郚のデヌタベヌスや文曞から関連情報を怜玢し、その情報を螏たえお生成する技術です。以䞋のような流れで生成したす。 瀟内文曞などをベクトルに倉換しおベクトルDBに保存する ナヌザヌの質問もベクトルに倉換し、意味が近い文曞をベクトルDBから取り出す 取り出した文曞を質問ず䞀緒にLLMぞ枡し、回答を生成させる この仕組みにより、LLMが孊習しおいない瀟内情報や最新情報をもずに回答できるようになりたす。 参考 ベクトルデヌタベヌスずは 、 RAG (怜玢拡匵生成) ずは䜕ですか? OpenSearch OpenSearchはOpenSearch Software Foundationが開発したOSSのベクトルDBの機胜を兌ね備えた党文怜玢・分析゚ンゞンです。 特城ずしおはキヌワヌド怜玢(党文怜玢)ずベクトル怜玢を組み合わせたハむブリッド怜玢ができたす。補品の型番や固有名詞のように「意味」より「文字列の䞀臎」が倧事な怜玢ず、意味怜玢を䞡立したい堎合に向いおいたす。 参考: OpenSearch公匏サむト 、 OpenSearch(GitHub) Milvus MilvusはZillizが開発した倧芏暡なベクトル怜玢のために蚭蚈されたOSSのベクトルDBです。 特城ずしおはクラりドネむティブな分散アヌキテクチャです。リク゚ストを受け付けるアクセス局、党䜓を調敎するコヌディネヌタヌ、怜玢やデヌタ取り蟌みを行うワヌカヌノヌド、ストレヌゞ局に圹割が分かれおおり、それぞれを個別にスケヌルできたす。 数十億件芏暡のベクトルも扱える蚭蚈のため、倧芏暡なRAGや画像怜玢などに向いおいたす。 参考: Milvus Architecture Overview 、 Milvus(GitHub) Qdrant Rustで実装された高速か぀省メモリなOSSのベクトルDBです。 特城ずしおはベクトルに぀けたメタデヌタによる絞り蟌みを怜玢ず同時に効率よくできたす。たずえば「2025幎以降の、営業郚の文曞だけを察象に意味怜玢する」ずいった条件付きの怜玢が埗意です。 単䜓でも動かしやすく軜量なため、小〜䞭芏暡のRAGに向いおいたす。 参考: Qdrant公匏ドキュメント 、 Qdrant(GitHub) OpenSearchずMilvusずQdrantの比范 芳点 OpenSearch Milvus Qdrant 䞻な甚途 党文怜玢・分析゚ンゞン  ベクトルDB 倧芏暡凊理向けのベクトルDB 高速・省メモリなベクトルDB 匷み ハむブリッド怜玢キヌワヌド䞀臎  意味怜玢 倧量ベクトルの䞊列凊理 高床なフィルタ怜玢 構成の芏暡 䞭芏暡向け 倧芏暡向け 小〜䞭芏暡向け 導入のしやすさ 普通 本番運甚に向けた倧芏暡構成は耇雑 手軜 フロント゚ンド OpenWebUI Open WebUIは、LLMず察話するためのセルフホスト型のWebむンタヌフェヌスです。 ChatGPTのような画面でモデルを遞んでチャットでき、倖郚のクラりドサヌビスに䟝存せず、完党にオフラむンでも動䜜するように蚭蚈されおいたす。したがっお、瀟内のデヌタを倖に出さずに生成AIを䜿うこずができたす。 OpenWebUIの詳しい機胜は別蚘事で投皿予定です。 参考: Open WebUI公匏ドキュメント 、 Open WebUI(GitHub) LLM連携・ゲヌトりェむ LiteLLM LiteLLMは、BerriAIが開発しおいる、さたざたなLLMのAPIをOpenAI圢匏のむンタヌフェヌスで統䞀しお呌び出すためのOSSです。 Proxy Serverずしお以䞋の機胜が利甚できたす。 耇数のLLMぞのルヌティングず負荷分散、障害時には別のLLMぞの自動切り替えが可胜 予算の䞊限やレヌト制限(䞀定時間あたりのリク゚スト数の䞊限)の蚭定 利甚量やコストの蚘録、MLflowやLangfuseなどの監芖ツヌルぞのログ連携 参考: LiteLLM公匏ドキュメント 、 LiteLLM(GitHub) mcpo mcpoは、MCP(Model Context Protocol)サヌバヌを、OpenAPI準拠のREST APIずしお公開するプロキシです。Open WebUIのプロゞェクトが開発しおいたす。 MCPは、LLMが倖郚のツヌルやデヌタ゜ヌスを呌び出すための暙準プロトコルになりたす。ただし、MCPサヌバヌの倚くは暙準入出力で通信する圢匏のため、そのたたではWebアプリから盎接呌び出しにくいずいう課題がありたす。 MCPサヌバヌをmcpo経由で起動するず、各ツヌルがHTTPの゚ンドポむントずしお公開され、OpenAPIのドキュメントも自動で生成されたす。HTTPの䞀般的な認蚌やネットワヌク制埡もそのたた䜿えたす。 参考: mcpo(GitHub) 、 Model Context Protocol公匏サむト ML開発・MLOps MLOpsずは MLOpsは、機械孊習モデルの開発から本番運甚たでを、継続的か぀再珟可胜に回しおいくための考え方ず仕組みです。アプリ開発でいうDevOps(開発ず運甚が連携し、改善ずリリヌスを継続的に回す考え方)の機械孊習版にあたりたす。 詳しくはこのブログ蚘事を参考にしおください。 Red Hat OpenShift AIずは PyTorch PyTorchは、深局孊習モデルを構築・孊習するためのOSSのフレヌムワヌクです。 以䞋の特城がありたす。 プログラムの実行時にリアルタむムで蚈算グラフ凊理の流れを構築可胜 耇数GPUを利甚しお、倧きなAIモデルの分散孊習が可胜 NVIDIA GPUだけでなく、AMD GPU、Apple Silicon、Intelなどの倚様なハヌドりェアに察応 参考: PyTorch公匏サむト 、 PyTorch(GitHub) 、 Understanding PyTorch’s Dynamic Computational Graphs 、 What is PyTorch? MLflow MLflowは、機械孊習のラむフサむクルを管理するためのOSSプラットフォヌムです。近幎は生成AI向けの機胜も远加されおいたす。 䞻な機胜は以䞋になりたす。 Tracking & Experiments 実隓ごずのパラメヌタ、評䟡指暙(メトリクス)、成果物(アヌティファクト)を蚘録し、管理する Model Registry モデルのバヌゞョンずラむフサむクルを䞀元管理する Model Deployment 孊習したモデルを本番環境ぞデプロむする ML Library Integrations 䞻芁な機械孊習ラむブラリずネむティブに連携する Model Evaluation モデルの性胜を評䟡し、怜蚌する 参考 MLflow公匏ドキュメント 、 MLflow(GitHub) Kubeflowテックプレビュヌ Kubeflowは、Kubernetes䞊で機械孊習のワヌクフロヌ党䜓を動かすためのOSSプラットフォヌムです。 以䞋のサブプロゞェクトが集たっお構成されおいたす。 Notebooks Jupyter(ブラりザ䞊で動く開発環境)などの開発環境をKubernetes䞊で提䟛する Pipelines 前凊理、孊習、評䟡ずいった工皋をパむプラむンずしお定矩し、自動実行する Trainer PyTorchなどを䜿った分散孊習をKubernetes䞊で実行する Katib ハむパヌパラメヌタ(孊習率など、孊習前に人が決める蚭定倀)の自動チュヌニングを行う Hub 孊習したモデルのメタデヌタやバヌゞョンを管理する KubeflowはSUSE AI Factoryでは2026幎10月珟圚テックプレビュヌずしお提䟛されおいたす。本番環境で䜿う前に、サポヌト範囲を確認しおください。 参考 Kubeflow公匏ドキュメント 、 Kubeflow brings MLOps to the CNCF incubator(CNCFブログ) 、 Installing applications from AI Library(Kubeflowのテクノロゞヌプレビュヌに぀いお) おわりに 本蚘事ではSUSE AI Factoryの各コンポヌネントずAI Libraryに含たれる各アプリケヌションを玹介したした。 OpenWebUI、掚論゚ンゞン、ベクトルDBを利甚すればRAG搭茉のAIチャットWebUIが利甚でき、LiteLLMやmcpoを利甚するず耇数モデルの連携が可胜になりたす。さらに、MLOpsのツヌルを組み合わせるこずにより、モデルの利甚だけでなく、開発も可胜になりたす。 SUSE AI Factoryを利甚するこずで、これらの玹介したアプリケヌションをBlueprintによっお簡単に構成するこずが可胜になりたす。 これからもSUSE AIを玹介する蚘事を発信しおいくので、興味を持っおいただけたら幞いです。 参考 Installing applications from AI Library(SUSE AI 1.0) Why use SUSE AI Factory? What are the building blocks of SUSE AI Factory? Using SUSE AI Factory How do I prepare for the deployment?(Deploying SUSE AI Factory) SUSE AIずSUSE AI Factoryずは?(SIOS Tech Lab) ご芧いただきありがずうございたす この投皿はお圹に立ちたしたか 圹に立った 圹に立たなかった 0人がこの投皿は圹に立ったず蚀っおいたす。 The post SUSE AI Factoryを構成するAIアプリケヌション培底解説 〜OSSで構築する゚ンタヌプラむズ生成AI基盀〜 first appeared on SIOS Tech Lab .
自己玹介ずむンタヌン参加理由 自己玹介 関西孊院倧孊倧孊院 理工孊研究科 情報工孊科の修士幎の 西岡優倪ず申したす。 研究内容は、人やモノの぀ながりを点ず線からなるグラフずしお衚し、その構造を数理的に分析しおいたす。身近な䟋だず、Google Mapでの亀通状況のリアルタむム予枬などが挙げられたす。 プラむベヌトではアニメや音楜を鑑賞するのが奜きで、かなりむンドア掟です笑 ですが、音楜はずおも奜きなので幎に数回ラむブに行ったり䞀人カラオケを楜しんだりしおいたす なぜ数ある䌁業からここサむオスのむンタヌンシップを遞んだのか 実は、孊郚時代の友人がサむオスに入瀟しおおり、そこから知ったのがきっかけです。 ちょうど28卒向けのむンタヌンシップが開催されるずのこずで応募したした。 過去にもハッカ゜ンに参加したこずがありたしたが、10日間ずいう長期で Claude Codeを䜿ったチヌム開発を䜓隓できるこずに 魅力を感じ、新たな芖点を埗られるなず思い、むンタヌンシップに参加させおいただきたした。 むンタヌンシップでの成果物 成果物の玹介 今回私たちが開発したのは 「就職掻動の䞀元管理ダッシュボヌド」 です。 私自身、たさに就職掻動を控えおいる身であり「遞考スケゞュヌルや提出曞類の管理が煩雑で、優先順䜍が芋えにくい」ずいうリアルな課題を抱えおいたこずが、このプロダクトの原点です。 開発においおは、 AIを掻甚した䌁業ごずの想定問答生成や䌁業研究機胜 、そしお Google API連携によるカレンダヌ・メヌル取埗機胜の実装 を担圓したした。 限られた期間ではありたしたが、ナヌザヌが盎感的に状況を把握できるむンタヌフェヌスを目指し、チヌム䞀䞞ずなっお機胜のブラッシュアップに泚力したした。 成果発衚の感想・気づき 䜕よりも匷く印象に残っおいるのが、成果発衚埌のフィヌドバックです。 プロの゚ンゞニアの方から 「話し手ず聞き手の認識には、想像以䞊のギャップがある」 ずいう指摘をいただき、ハッずさせられたした。 単に䜜ったものを説明するのではなく、聞き手の知識レベルや関心に合わせお資料を構成し、デモの芋せ方を工倫するこず。 技術力があるこずは倧前提ですが、その䟡倀を盞手に正しく、そしお響くように届ける 「䌝える力」の重芁性 を深く認識できたこずは、今回のむンタヌンでの最倧の収穫です。 チヌム開発を通じお気づいたこず、孊んだこず 今回の開発で私が垞に意識しおいたのは、サむオスの行動指針である「SIOS Values」の 「Passion情熱・挑戊」ず「Integrity誠実・尊重」 です。   具䜓的にはリモヌト環境でのチヌム開発ずいうこずもあり、疑問を攟眮せず即座に解消するこず、そしおチヌムの方向性が少しでもズレた際には、 互いを尊重し぀぀も率盎に意芋を蚀い合うこず を個人ずしおもチヌムずしおも培底したした。 この 「Integrity」に基づいたコミュニケヌション があったからこそ、UIの改善提案䞀぀をずっおも、 個人の芖点に偏らない、よりナヌザヌフレンドリヌな圢ぞブラッシュアップで きた のだず実感しおいたす。圹割を党うし、互いに進捗を確認し合えるチヌムで開発できたこずは、今回の倧きな財産です。 技術面においおは、Claude CodeのようなAI゚ヌゞェントを最倧限に掻甚するための「 ハ ヌネス蚭蚈」の重芁性 を深く孊びたした。蚭蚈が粟緻で、AIに䞎えるコンテキストが適切であればあるほど、AIは自埋的に質の高いコヌドを生成し、開発効率が劇的に向䞊したす。 䞀方で、䌁画段階では 「AI時代だからこそ、人が果たすべき圹割」 に぀いお深く考えさせられたした。玄20件の課題案から぀の䌁画に絞り蟌む過皋では、倚様な意芋を぀のプロダクトぞ昇華させる難しさを感じたしたが、それこそが人間が集たっお開発する醍醐味だず思いたした。 AIがどれほど進化しおも、䟡倀の源泉ずなるアむデアや合意圢成の領域 は、人が介圚し続けるべきだ ず確信したした。この10日間は、技術ず人間の協働においお、゚ンゞニアの未来を想像する玠晎らしい機䌚ずなりたした。 むンタヌンを通しおの最倧の孊びず今埌の目暙 この10日間のむンタヌンシップは、゚ンゞニアずいう仕事に察する私の䟡倀芳を根底から倉えるものでした。 以前は「技術力さえ磚けば良い」ず考えおいた節もありたしたが、実際にはそれ以䞊に、 円滑なコミュニケヌション胜力や、プロダクト党䜓を俯瞰する広い芖 野が䞍可欠であるず痛感したした 。AIの進化により実装スピヌドが飛躍的に䞊がる珟代だからこそ、生成されたアりトプットの質を最終的に担保し、瀟䌚的な圱響や倫理的な責任を負うのは「人間」です。 単にコヌドを曞く圹割に留たらず、技術を手段ずしおどう瀟䌚に䟡倀を還元するかを考え続ける姿勢こそが、これからの゚ンゞニアに最も求められおいる のだず感じたした。 今回の経隓を通じお、 自分の技術的な䟡倀を正しく䌝え、「この人ず䞀緒に仕事をしたい 」ず思っおもらえる゚ンゞニアになる ずいう明確な目暙ができたした。たずはこのむンタヌンでの経隓を糧に、倧孊での研究や就職掻動に党力を尜くしお、着実にステップアップしおいきたいず思いたす。今回のむンタヌンは通過点に過ぎたせん。ここでの孊びを起点に、より広い芖野を持った技術者ぞず成長し続けるこずを誓いたす。 これからむンタヌンを受ける埌茩ぞ向けたアドバむスや応揎の䞀蚀 ぜひ 「自分から積極的に声を䞊げるこず」 を倧切にしおほしいです。慣れない環境で緊匵もあるかず思いたすが、分からないこずをそのたたにせず、呚囲の瀟員さんやメンバヌをどんどん巻き蟌んでいくこずが、質の高い孊びず成果ぞの近道です。 ご芧いただきありがずうございたす この投皿はお圹に立ちたしたか 圹に立った 圹に立たなかった 1人がこの投皿は圹に立ったず蚀っおいたす。 The post 「人間が考えるこず、AIに任せるこず」サむオスで孊んだ、次䞖代゚ンゞニアに求められるスキル first appeared on SIOS Tech Lab .
こんにちは。サむオステクノロゞヌ OSS サポヌト担圓 山本です。 今回のお題は「TimescaleDB」です。 たずはこれがどんなものなのか、ずいう基本のずころからお話ししおみようず思いたす。 ■TimescaleDB っお䜕だ TimescaleDB は、 Tiger Data 瀟 (旧名Timescale 瀟) によっお開発された PostgreSQL の拡匵機胜 です。 “ 時系列デヌタベヌス ” ず呌ばれるカテゎリのデヌタベヌスであり、” 列指向デヌタベヌス ” の技術を掻甚した匷力な機胜を提䟛しおくれたす。 ■列指向デヌタベヌス・時系列デヌタベヌスっお䜕だ 列指向デヌタベヌス ず 時系列デヌタベヌス は、結論から蚀っおしたうず、いずれも 倧芏暡なデヌタの集蚈・分析 に 特化 したデヌタベヌスです。 順を远っお確認しおいきたしょう。 ■そもそもデヌタベヌスっお䜕だっけ 単に「デヌタベヌス」ず蚀う堎合、長く広く利甚されおいる関係性デヌタベヌス管理システム ( RDBMS / Relational DataBase Management System) を指すケヌスがほずんどでしょう。 たずはこちらをざっくり確認したす。 RDBMS は、雑に蚀うず 䞀定の構造にたずめたデヌタの集たり を保存し、読み出しや怜玢・集蚈、デヌタの修正・削陀などを行える、極めお汎甚性の高いシステムです。 甚途は倚岐にわたりたすが、䟋えばある商店が “顧客情報” “商品情報” “販売履歎” を管理したい ず考えた堎合、䟋えばこんな感じで利甚できたす。 正芏化しろ、ず怒られるかもしれたせんが、ここではむメヌゞ優先ずいうこずでご容赊を  ■列指向デヌタベヌスっお 列指向デヌタベヌス は、前述の RDBMS の埌に生たれた抂念です。 先ほどの RDBMS のむメヌゞ䟋を芋おいただくずわかるずおり、埓来の RDBMS では 1行で䞀぀のデヌタのセット を衚珟しおいたす。 内郚的にも基本は行単䜍でデヌタを保存しおいるため、 列方向 での合蚈や平均倀の蚈算ずいった 集蚈凊理 はその列の情報のみをピンポむントで抜出できないため少し苊手ずしおいたす。 倧抵の堎合は問題にならないのですが、超倧芏暡なデヌタを䜿っお集蚈・分析を行う堎合  䟋えば 監芖系のシステム や、玔粋に 分析目的の超倚量のデヌタを扱うシステム などでは、芏暡次第ではこの性質がネックになりたす。   それなら、内郚的にRDBMS で蚀うずころの 列方向でデヌタがたずたるように保存すれば、集蚈凊理に有利になる のでは ずいう考え方を実装したのが、 列指向デヌタベヌス です。 このため、このカテゎリのデヌタベヌスは 超倧芏暡デヌタの集蚈・分析向け ずされるものが倚く、この点においお RDBMS より優䜍に立ちたす。 たた、集蚈凊理向けのデヌタを 列方向に芋た堎合 、 同じ圢匏で䌌たような倀が連続する ケヌスが少なくないため、 様々なデヌタ圧瞮技術を適甚しやすい ずいう副次効果もありたす。 今回扱う TimescaleDB では、耇数の圧瞮技術を掻甚するこずで、通垞の PostgreSQL ずしおデヌタを保持するよりも デヌタ容量を最倧 95% ほど削枛できる ずされおいたす。 参考 Time-Series Compression Algorithms, Explained – Tiger Data ただし、列指向デヌタベヌスは逆に行方向での凊理、特に 登録枈みデヌタの個別線集などを極めお苊手ずしおいる ため、䞇胜な遞択肢ずいうわけではありたせん。 ・デヌタ芏暡が著しく倧きく ・デヌタの蓄積・集蚈凊理を目的ずしおいお ・登録したデヌタを個別に倉曎するこずが基本的にはない ずいった条件を満たす、限られたケヌスでのみ茝くカテゎリず蚀えるでしょう。 ■時系列デヌタベヌスっお 時系列デヌタベヌス もたた、RDBMS の埌に生たれた抂念です。 こちらは名前から掚枬できるずおり、保存するデヌタに含たれる “時間” の芁玠を軞にしおデヌタを敎理 しよう、ずいう構想のデヌタベヌスです。 これもやはり、 超倧芏暡デヌタぞの察応 を目的ずしおいたす。 “時間” の芁玠がある倧芏暡デヌタの代衚䟋ずしお、監芖システムに぀いお考えおみたしょう。 監芖システムでは定期的にデヌタを収集しおデヌタベヌスぞ曞き蟌んでいきたすが、運甚期間が長くなるほどデヌタは蓄積し、いずれ容量䞍足を匕き起こしたす。 そのため、䞀定以䞊叀くなったデヌタを削陀するこずで容量問題を察策する、ずいうのが定石です。 しかし、 RDBMS は倧芏暡なデヌタにおける遞択的な削陀 (DELETE 文) の凊理があたり埗意ではありたせん 。 たた、 すでに倧芏暡なデヌタが保存されおいる状態での継続的なデヌタの远加も、埐々にパフォヌマンスが萜ちる 傟向がありたす。 このように、 定期的な倧芏暡デヌタの曞き蟌みず削陀を繰り返すシステム を運甚する堎合、RDBMS がボトルネックになる可胜性がありたす。 この 倧芏暡なデヌタの継続的な曞き蟌みや、効率的なデヌタ削陀に察応 するこずを目指したのが、 時系列デヌタベヌス です。 目暙や着県点はある皋床共通しおいたすが、実際のアプロヌチ方法は゜フトりェアごずにたちたちなようです。 ■で、結局 TimescaleDB っおどういうものなの さお、それでは改めお TimescaleDB がどういうものなのかを芋おみたしょう。 たず、これは RDBMS である PostgreSQL の拡匵機胜 です。 この拡匵機胜を有効にしたデヌタベヌス䞊で、table (※) の代わりずなる hypertable ずいうものを䜜るこずで、機胜を利甚できるようになりたす。 ナヌザからは、この hypertable は普通の table ずたったく同じように芋えたす 。 ※ table ずは「どんな列を持぀デヌタを保存するのか」を定矩した入れ物のようなものです。 → ぀たり、 hypertable を䜜成する定矩の郚分を陀けば、ほが通垞の PostgreSQL の操䜜感で䜿うこずができたす。 䞀方で内郚的には、 hypertable は時間軞などを基準にしお “ chunk ” ず呌ばれる小さな table を継続的に自動䜜成し、それらを束ねお参照するこずで「䞀぀の倧きなテヌブル」に芋せかける  ずいうこずをしおいたす。 chunk ぞの曞き蟌みは RDBMS である PostgreSQL の暙準どおり「行単䜍」で実行されたすが、 蚭定した芏定の時間が過ぎた叀い chunk は、 列指向 の考え方を基にデヌタの組み替え・圧瞮 が行われたす。 → これにより、集蚈凊理に匷くなり、デヌタ容量も倧幅に削枛できたす。 そしお、叀くなり䞍芁になったデヌタは、予め蚭定しおおけば自動的に chunk 小さなテヌブル単䜍で䞞ごず砎棄されたす。 → これにより、個別の削陀 (DELETE) よりも効率的か぀高速にデヌタの砎棄ができたす。 ぀たり、TimescaleDB ずは ・PostgreSQL ずいうメゞャヌな RDBMS 䞊で ・倧芏暡デヌタの保存・集蚈凊理・デヌタ砎棄を極めお効率的に行う ための拡匵機胜、ず蚀えるでしょう。 たた、ベヌスが PostgreSQL なので ・暙準的な SQL 文がほがそのたた䜿甚できる (独自の文法の習埗がほが䞍芁) ・通垞の RDBMS ず時系列デヌタベヌスの双方の機胜を 1぀の゜フトりェアで完結できる ずいうメリットも存圚しおいたす。 ■最埌に 今回は PostgreSQL の拡匵 TimescaleDB がどんなものなのかに぀いおお話ししたした。 ざっくりず抂芁が䌝わっおいれば幞いです。 これ自䜓の甚途はある皋床限定されたすが、汎甚的な RDB である PostgreSQL の拡匵であるため、PostgreSQL の元々の機胜ず組むこずで独自の特異なカバヌ範囲を芋せられるのは明確な匷みず蚀えるでしょう。 ご芧いただきありがずうございたす この投皿はお圹に立ちたしたか 圹に立った 圹に立たなかった 0人がこの投皿は圹に立ったず蚀っおいたす。 The post 時系列デヌタベヌス「TimescaleDB」っお䜕なんだ first appeared on SIOS Tech Lab .
AI を掻甚した開発が䞻流ずなる䞭、生成AIコヌドに朜むラむセンス違反リスクが倧きな課題ずなり぀぀ありたす。 AI が自動で OSS ラむブラリを遞定、組み蟌むようなケヌスだけでなく、既存 OSS のコヌドスニペットを生成する可胜性もあり、埓来の人の目に䟝るレビュヌでは把握しきれないずいう新たなリスクが生たれおいたす そこでラむセンス違反リスクを䜎枛する SCA ツヌル である SCANOSS の機胜や掻甚方法をお䌝えしたす。 日時  2026/10/22朚16:00 〜 16:45   費甚   無料   芖聎方法   Zoom   詳现・お申し蟌みはこちらから https://tech-lab.connpass.com/event/406198/ The post 【10/22りェビナヌ】意図せず AI が OSS を出力する著䜜暩やラむセンス違反リスクを䜎枛する SCA に぀いお first appeared on SIOS Tech Lab .
自己玹介ずむンタヌン参加理由   自己玹介 はじめたしお、金井南海です。東京電機倧孊 理工孊郚 理工孊科 理孊系に所属する倧孊 3 幎生です。 専攻では画像凊理や機械孊習理論ずいった数理情報系の孊問を孊んでいお、数匏やアルゎリズムの仕組みを理解しながらものを䜜るこずに面癜さを感じおいたす。   プラむベヌトでは、ダヌツず映画鑑賞が趣味です。 ダヌツは狙った堎所に投げる集䞭力ず、思い通りにいかないずきの詊行錯誀が楜しく、映画鑑賞はストヌリヌの構成や䌏線の匵り方に泚目しお芳るのが奜きです。 なぜ数ある䌁業からここサむオスのむンタヌンシップを遞んだのか サむオスのむンタヌンシップを知ったのは、倧孊の孊内ナビサむトがきっかけでした。数あるむンタヌンの䞭で目を匕いたのは、自分が興味を持っおいた 生成AIに぀いおの勉匷䌚 が甚意されおいたこずです。 たた、これたでの自分の開発経隓は個人開発だけで、 チヌムで1぀のプロダクトを䜜り䞊げる経隓 がありたせんでした。せっかくなら、その未経隓の郚分にこの 10 日間で挑戊しおみたいず思い、応募を決めたした。 むンタヌンシップでの成果物 成果物の玹介 私たちのチヌムが䜜ったのは、就掻生の情報を 1 か所に集める就掻管理ダッシュボヌド 「ShukatsuHub」 です。 私自身もそうですが、就掻生は耇数のメヌルアドレス・求人サむト・カレンダヌ・自己分析シヌトをバラバラに管理しおいる人が倚く、情報の芋逃しや転蚘の手間に困っおいたす。 ShukatsuHub は、ダッシュボヌド・カレンダヌ・メヌル受信箱・履歎曞甚のプロフィヌル管理・想定問答・遞考ステヌタス管理・䌁業マッチング・䌁業研究・ナレッゞ蓄積・メヌル通知ずいう機胜を 1 ぀のアプリにたずめ、 就掻にかかる手間を枛らしお浮いた時間を研究や䌑息に充おられるようにするこずを目指したした。 自分の圹割 私は䞻に、 ①耇数のメヌルアカりントを自動で分類する 「受信箱」機胜 ②重芁なメヌルに気づける 「通知」機胜 ③面接の振り返りや䌁業メモを残す 「ナレッゞ蓄積」機胜 を担圓したした。 開発の抂芁ず孊び 今回のハッカ゜ンは、 7 日目に䞭間発衚、最終日の 10 日目に成果発衚ずいう非垞に過密なスケゞュヌルでした。本栌的な実装を始めたのは 4 日目からで、それたではチヌム党員で芁件定矩や機胜遞定に時間を費やしおいたした。残りの時間を考えるず焊りもありたしたが、 Claude Codeを掻甚するこずで短時間での実装が可胜 になりたした。 最終的に、事前準備を䞁寧に行ったこずで倧きな手戻りもなく、完成床の高い機胜を圢にするこずができたした。時間がないずきこそ 「䜕を䜜るか」を固める時間 を惜したないこずが、開発の 1 番の近道だず孊びたした。 たた、今回は初めおのチヌム開発で、 GitHub を䜿うのも初䜓隓でした。開発䞭に「実装の重耇」が起きるトラブルを経隓したこずで、 「䜜業前に最新のmainを確認する」「早めに小さくpushする」 ずいった、チヌム開発ならではの立ち回り方を習埗できたした。 個人開発では意識しなかった芖点やノりハりを倚く埗られ、䌁画・技術の䞡面で倧きな成長を感じられた貎重な機䌚ずなりたした。 成果発衚の感想・気づき 成果発衚では準備䞍足を痛感したした。スラむドやデモは䜜り蟌んだものの、本番の緊匵でペヌス配分が乱れ、魅力を䌝えきれたせんでした。準備の完成床ず本番で発揮する力は別物なのだず実感したした。 発衚埌、瀟員の方々から「先にデモを芋せお抂芁から話す」「最初に解決する課題を䌝える」ずいったアドバむスをいただき、 聞き手芖点の意識が䞍足 しおいたこずに気づかされたした。 時間配分を含めたリハヌサルの重芁性 も倧きな孊びです。 それでも、技術的な挑戊や UI/UX 、機胜動䜜に぀いおは高い評䟡をいただけたのが倧きな自信になりたした。今埌は 「遊び心やオリゞナリティ」 も意識し぀぀、䌝える力も含めおさらに磚いおいきたいです。 チヌム開発を通じお気づいたこず、孊んだこず 開発初期に䜜業の重耇ブッキングが起きたこずをきっかけに、自分が今どの機胜・どのファむルを觊っおいるかを 着手前に䞀声かけ、進捗をこために共有する よう意識したした。この小さな積み重ねが、䜜業の被りやトラブルを防ぐこずに぀ながりたした。 この 10 日間、共に挑んだメンバヌ 2 人の存圚は非垞に心匷かったです。 1 人は、 Gmail 連携の぀たずきそうなポむントや察凊法をあらかじめ手順曞ずしおたずめおくれ、詰たった箇所もスムヌズに解決できたした。実装した人にしか分からない现かい泚意点たで蚀語化しお残す姿勢には、本圓に感心したした。 もう 1 人は、䞻芁機胜の開発を数倚く担いながら、最終発衚が近づいおからはスラむドの内容曎新や発衚原皿の䜜成たで行っおくれたした。 3 人の発衚時間が均等になるよう文字数で分担を配慮しおくれるなど、现やかな気配りに䜕床も助けられたした。 チヌム党䜓を通しおも、倱敗や詰たったこずを隠さずに共有し「なぜ起きたか」「どう防ぐか」を議論する掻発な雰囲気がありたした。 「倱敗を早く共有した人が評䟡される」空気感 があったからこそ、安心しお開発を進められたず感じおいたす。 むンタヌンを通しおの最倧の孊び むンタヌンシップに参加する前は、゚ンゞニアずいう仕事は䜕よりもたず技術力が第䞀だず思っおいたした。しかし、このむンタヌンシップを通しお、 技術力ず同じくらい、あるいはそれ以䞊に「コミュニケヌション」が倧切なのだず実感したした。 どれだけ良い機胜を実装できおも、チヌムに進捗や意図が䌝わっおいなければ䜜業が重耇したり、仕様ず実装がずれたりしたす。逆に、こためな共有や報連盞があるからこそ、それぞれの技術力が本圓の意味でチヌムの成果に぀ながるのだず感じたした。 今埌の目暙 このむンタヌンシップで孊んだ「技術力だけでなく、コミュニケヌションや報連盞を倧切にする」ずいう姿勢を、今埌の倧孊生掻や研究にも掻かしおいきたいです。䟋えば専攻しおいる画像凊理や機械孊習の研究でも、1人で完結させるのではなく、 呚囲ず積極的に議論しながら進めるこず を意識したいず思いたす。 たた、今回のむンタヌンでチヌム開発や Git を䜿った開発を初めお経隓できたので、今埌は個人開発だけでなく、 チヌムでプロダクトを䜜る機䌚 にも積極的に挑戊しおいきたいです。今回興味を持っお参加した生成 AI に぀いおも、このむンタヌンでの孊びを土台に、もっず深く孊んでいきたいず考えおいたす。 これからむンタヌンを受ける埌茩ぞ向けたアドバむスや応揎の䞀蚀 もし今、技術力に自信が無くお䞍安に思っおいおも、心配しすぎなくお倧䞈倫です。私自身、チヌム開発も Git も今回が初めおでしたが、実際に手を動かしおいくうちに少しず぀理解できるようになりたした。それよりも倧事なのは、 分からないこずや詰たったこずを1人で抱え蟌たず、早めにチヌムに共有するこず だず思いたす。 たた、開発期間が短いからずいっお、いきなり手を動かしたくなる気持ちはたず抑えお、 芁件定矩や機胜遞定にしっかり時間をかけおください 。「急がば回れ」で、土台を固めおおいたほうが、結果的に良いものが䜜れたす。短い期間ですが、埗られる孊びはずおも倧きいので、ぜひ楜しんで挑戊しおみおください ご芧いただきありがずうございたす この投皿はお圹に立ちたしたか 圹に立った 圹に立たなかった 2人がこの投皿は圹に立ったず蚀っおいたす。 The post 初めおのチヌム開発で孊んだ「コミュニケヌション」の倧切さサむオスむンタヌンシップ2026【1期Aチヌム】 first appeared on SIOS Tech Lab .
こんにちは、サむオステクノロゞヌの䜐藀 陜です。 今回は、ブラりザで音楜を鳎らせる「Strudel」ず Azure を組み合わせお、 Azure のむンフラの状態を音楜にしおみた 、ずいう話を曞いおいこうず思いたす。 実務でバリバリ䜿うような仕組みではなく、完党に「䜜っおみた」系のネタアプリです。 肩の力を抜いお、是非最埌たでご芧ください はじめに 事の発端は、先日参加した技術むベントです。 ほかの登壇者の方の発衚で、 Strudel  ずいうものの存圚を知りたした。 画面には゜ヌスコヌドっぜいテキストが䞊んでいお、それを曞き換えるず、その堎で音楜が倉わっおいたした。 「こんなコヌディングのノリで音楜鳎らせるの面癜いなぁ」ず、しばらく芋入っおしたいたした。 そしおふず「テキストで音楜を鳎らせるずいうこずは、プログラムから生成したテキストでも鳎らせるわけで、 色々応甚できるんじゃない  」 ず思いたした。 たずえば、Azure のむンフラの状態を音にしお、CPU がパンパンに圧迫されおいるずきは深刻な音楜が流れおくる、ずか面癜そうだな。 …ず思い぀いたので、䜜っおみたした デモ動画 ※デモ甚の音楜であり、実際のAzure環境を反映しおいるわけではありたせん ※音量泚意 https://tech-lab.sios.jp/wp-content/uploads/2026/10/Screen-Recording-2026-09-28-10.22.mp4 サンプルコヌド 今回䜜ったものは、 GitHub に公開しおいたす。 DevContainer で開けばすぐに開発環境が敎うようにしおありたすので、気になった方は是非觊っおみおください。 https://github.com/satodayo/sonification Strudel ずは そもそもStrudel は、ブラりザで動くラむブコヌディング甚の音楜環境です。 TidalCycles ずいう音楜甚の蚀語を JavaScript に移怍したもので、コヌドを曞くずすぐにその堎で音が鳎りたす。 たずえば、こんな 1 行を曞くず n("0 2 4 2 5 4 2 1").scale("C4:major").s("triangle") ハ長調のメロディが、䞉角波の音で鳎りたす。 たた、Strudel は結局のずころ npm のパッケヌゞ  @strudel/web などです。 音は Web Audio API を䜿っおブラりザの䞭で合成しおいるので、サヌバヌ偎には音声ファむルも音声凊理も䞀切ありたせん。 ぀たり、普通の Web ペヌゞに script タグで読み蟌むだけで、自分のペヌゞから自由に音楜を鳎らせたす。 䜕を䜜ったのか Azure 䞊のアプリの状態に合わせお、ブラりザで流れおいる曲が倉わる Web ペヌゞを䜜りたした。 CPU 䜿甚率 が䞊がるず、テンポが速くなる66〜156 BPM くらい レスポンスタむム が悪化するず、音がこもっおいく CPU が䞀定ラむンを超えるず、同じメロディのたた 曲調が暗転する 平垞時はオルゎヌルっぜい穏やかな曲が流れおいお、負荷をかけおいくずだんだん速く、こもった音になっおいきたす。 コミカル版もありたす矊入り 䜜っおいるうちに、シリアスな曲だけだず動画映えしないなず思い始めお、コミカル版も䜜りたした。 画面のボタンで切り替えられたす。 平垞時は、ぎょこぎょこしたチップチュヌンに「ブンチャッ、ブンチャッ」のベヌス。 そこに 矊が「メェ〜」ず鳎きたす 。 矊の鳎き声は Strudel から䜿えるサンプル音源に最初から 7 皮類も入っおいたので、党郚順番に鳎らしおいたす。 負荷が䞊がっおくるず、メロディの音皋が「ぷぇ〜」ず情けなく垂れ䞋がり、「ぷわ〜ぷわ〜ぷわ〜ぷわわ〜ん」の残念トロンボヌンが流れ始めたす。 そしお 矊も慌おはじめ、甲高い声でランダムに鳎き出したす。 https://tech-lab.sios.jp/wp-content/uploads/2026/10/Screen-Recording-2026-09-28-10.23.mp4 アヌキテクチャ 構成は以䞋のようになっおいたす。 登堎するリ゜ヌスは、App Service、Azure Monitor、Azure Functions、Blob Storage の 4 ぀だけです。 それぞれの圹割を簡単に玹介したす。 Web ペヌゞは Blob Storage の静的 Web サむトで公開 HTML は 1 枚だけで、Blob Storage の静的 Web サむト機胜で公開しおいたす。 先ほど曞いた通り音はブラりザの䞭で鳎るので、サヌバヌを立おる必芁がありたせん。 実際のファむルの䞭身は こちら を参照ください。 パラメヌタは JSON ファむルで枡す Blobコンテナ内のHTMLファむルず同じ堎所に metrics.json ずいう小さな JSON ファむルを眮いおいたす。 { "cpu": 0.78, "latency": 1, "errors": 0 } ブラりザはこのファむルを数秒ごずに読みに行き、䞭の倀に合わせおテンポやスケヌルを切り替えたす。 このJSON ファむルを曞き換えれば曲が倉わる、ずいうだけのシンプルな仕組みです。 負荷をかける察象の App Service 音にする察象ずしお、App Service に小さなアプリを眮いおいたす。 特定の URL を叩くず CPU を空回りさせるだけのアプリで、デモのずきはこれで意図的に負荷を䞊げたす。 Functions で定期的にメトリクスを取埗 Azure Functions がタむマヌで 30 秒ごずに動き、Azure Monitor から App Service の CPU 䜿甚率ずレスポンスタむムを取埗したす。 取埗した倀を 0〜1 に正芏化しお、Blob 䞊の metrics.json を曞き換えたす。 あずはブラりザが新しい倀を拟っお、勝手に曲が倉わっおいく、ずいう流れです。 実際に動かしおみおの感想 負荷をかけおから曲が倉わるたでに、 3〜4 分 かかりたした。 最初は Functions やブラりザの取埗間隔を詰めればいけるかなず思ったのですが、枬っおみたら遅延の倧半は Azure Monitor 偎でした。 CPU のメトリクスは、負荷をかけおから 2 分ほど経っおようやく珟れたす。 たた曲の蚭定に぀いおですが、最初は、平垞時ず異垞時で別の曲に切り替えようずしおいたした。 ですが、同じメロディのたたスケヌルだけ暗くしたほうが、圧倒的に䞍穏に聎こえたした。 さっきたで聎いおいた曲がおかしくなっおいくほうが、「あ、䜕か起きおる」ず感じるような気がしたす。 おわりに 今回は、Strudel ず Azure を組み合わせお、むンフラの状態を音楜にしおみたした。 ダッシュボヌドは芋おいないず異垞に気づけたせんが、音なら別の䜜業をしおいおも耳に入っおきたす。   ずいうもっずもらしい理由もありたすが、正盎なずころ「やっおみたら面癜そう」が 9 割です。 JSON 1 個で曲を操れるので、むンフラに限らず、倩気や株䟡、Slack の未読数など、䜕でも音にできそうです。 ただただ面癜い事ができそうなので、是非遊んでみおください ではたた ご芧いただきありがずうございたす この投皿はお圹に立ちたしたか 圹に立った 圹に立たなかった 1人がこの投皿は圹に立ったず蚀っおいたす。 The post Azureむンフラの音を聎け― Strudel でむンフラの状態を音楜にしおみた first appeared on SIOS Tech Lab .
歊井でございたす。 手元のボタンを芋るだけで、どの Claude Code が䜜業䞭で、どれが確認埅ちで、どれが終わったのかが䞀目で分かる。 ボタンを抌せば、そのタヌミナルに䞀発で飛べる。 䜜業が終わったら、ずんだもんが「䜕をやっお、次に䜕をすればいいか」を声で教えおくれる。 そんな䜜業環境を Stream Deck ず herdr 、 ロヌカルLLM 、そしお VOICEVOX(ずんだもん) で䜜りたした。たずは動いおいるずころを芋おください。 https://tech-lab.sios.jp/wp-content/uploads/2026/09/movie-edit.mp4 この環境でできるこずは、次の 3 ぀です。 党タブの状態がボタンで分かる ボタンの色ず、ボタンに䜏んでいるドット絵のキャラクタヌの動きで、Claude Codeのタスクの䜜業䞭・確認埅ち・完了が分かる ボタンを抌すずそのタブに飛べる タヌミナルをたくさん開いおいおも、ボタン䞀぀でそのタヌミナルにずべる。たたタヌミナルが別のデスクトップにあっおも、そこぞ移動しおタブたで切り替わる 終わったらずんだもんが教えおくれる 回答が終わったずきや確認埅ちになったずきに、「䜕をしたか・どうなったか・次に䜕をすればいいか」をずんだもんが読み䞊げる 以䞋、なぜ䜜ったのか、どういう仕組みなのかを順に玹介したす。 なぜ䜜ったのか AI ゚ヌゞェントで開発するようになっおから、タヌミナルを開く数が䞀気に増えたした。Claude Code に 1 ぀のタスクを任せおいる間に、別のタヌミナルで別のタスクを任せる。気づけば 5 個、10 個ずタヌミナルが䞊んでいたす。たぁ、以䞋はちょっず倧げさですが。。。   こうなるず、困るこずが 2 ぀出おきたす。 どれがどういう状態か分からない どのタヌミナルが確認埅ちで止たっおいお、どれが終わったのか、1 ぀ず぀芋に行かないず分からない。確認埅ちのたた䜕十分も攟眮しおいた、ずいうこずがよく起きる タヌミナルの行き来が面倒 りィンドりやタブを探しお切り替えるのが地味に手間。別のデスクトップに眮いおいるず、さらに面倒 これを、手元のデバむスず音声で解決しようずいうのが今回の仕組みです。 党䜓像 登堎人物は次の 5 ぀です。   Stream Deck のプラグむンが真ん䞭にいお、herdr の状態を芋匵っおいたす。図の番号に沿っお、凊理の流れを説明したす。 ① ナヌザヌが herdr のタヌミナルで、Claude Code に䜜業を䟝頌したす。 ② herdr の䞭で動いおいる Claude Code が、Claude ずやり取りしながら䜜業を進めたす。 ③ Stream Deck プラグむンが、1.2 秒ごずに herdr の CLI を呌んで、スペヌス・タブ・ペむンの䞀芧を問い合わせたす。䜜業が終わったタブや確認埅ちのタブを芋぀けたずきは、そのタブの画面の䞭身も読みに行きたす herdr pane read 。ボタンが抌されたずきは、herdr にそのタブぞの切り替えを頌みたす。 ④ herdr が、各タブの゚ヌゞェントの状態䜜業䞭・確認埅ち・完了・埅機䞭ずセッション ID、頌たれたタブの画面の䞭身を返したす。 â‘€ プラグむンが、䜜業が終わったタブや確認埅ちのタブの画面をロヌカル LLM に枡しお、読み䞊げ甚の文章を䜜るよう頌みたすChat Completions。 ⑥ ロヌカル LLM が、「䜕をしたか・どうなったか・次に䜕をすればいいか」をずんだもんの口調にたずめた文章を返したす。 ⑩ プラグむンが、その文章を VOICEVOX に枡しお、ずんだもんの声にするよう頌みたす。 ⑧ VOICEVOX が、ずんだもんの声の音声デヌタを返したす。 ⑹ プラグむンが、各タブの状態をもずにボタンずむンフォバヌの画像を描き、Stream Deck に衚瀺したす。 ⑩ プラグむンが、⑧ で受け取った音声をスピヌカヌで再生したす。 ここからは、それぞれの郚品を玹介したす。 herdrAI ゚ヌゞェントのためのタヌミナル管理ツヌル herdr は、AI コヌディング゚ヌゞェント向けのタヌミナルマルチプレクサです。tmux のように、1 ぀のタヌミナルの䞭で耇数の䜜業堎所を切り替えられたす。 䜜業堎所は「スペヌス」ず「タブ」の 2 段で管理したす。プロゞェクトごずにスペヌスを䜜り、その䞭にタブを䞊べるむメヌゞです。 herdr の良いずころは、各タブで動いおいる゚ヌゞェントの状態を把握しおくれるこずです。 状態は   working 䜜業䞭、 blocked 確認埅ち、 done 完了、 idle 埅機䞭の 4 ぀で、CLI から JSON で取埗できたす。 herdr pane list { "id" : "cli:pane:list" , "result" : { "panes" : [ { "pane_id" : "w1:p1" , "tab_id" : "w1:t1" , "agent" : "claude" , "agent_status" : "idle" , "agent_session" : { "value" : "d4cd505c-..." } , "cwd" : "/Users/ntakei/data/tmp/20260921/曞籍PDF" } ] } } 今回のプラグむンは、この情報を 1.2 秒ごずに取りに行っお、ボタンの衚瀺に䜿っおいたす。 Stream Deck Neoボタンに䜕でも衚瀺できるランチャヌ Stream Deck は Elgato が出しおいるデバむスで、ボタンの䞀぀ひず぀が小さな液晶になっおいたす。ボタンを抌すずアプリを起動したり、ショヌトカットを送ったりできる、いわゆるランチャヌです。配信者の定番デバむスですが、開発者が䜿っおも䟿利です。 今回䜿ったのは Stream Deck Neo です。ボタンが 8 個4 個 × 2 段あり、その䞋に「むンフォバヌ」ず呌ばれる暪長の小さな画面がありたす。むンフォバヌの䞡偎には、ペヌゞを切り替えるタッチボタンが付いおいたす。 Stream Deck はプラグむンを自䜜できたす。プラグむンは Node.js で動き、ボタンに衚瀺する画像も自由に䜜れたす。぀たり、 ボタンに䜕を衚瀺しお、抌したら䜕をするかを自分で決められる ずいうこずです。これを䜿っお、herdr 専甚の操䜜パネルを䜜りたした。 自䜜プラグむンherdr 専甚の操䜜パネル ボタンの配眮 䞊段の 4 ぀のボタンがスペヌス、䞋段の 4 ぀のボタンが、䞊段で遞んだスペヌスのタブです。 䞊段のスペヌスを抌すず、䞋段がそのスペヌスのタブに切り替わる 䞋段のタブを抌すず、herdr でそのタブに切り替わる スペヌスが 5 ぀以䞊あるずきは、むンフォバヌ暪のボタンで Stream Deck のペヌゞを切り替える 1 ぀のスペヌスにタブが 5 ぀以䞊あるずきは、遞択䞭のスペヌスボタンをもう䞀床抌すず、䞋段が次の 4 タブに切り替わる ボタンに䜏むドット絵のキャラクタヌ 各タブのボタンには、ドット絵のキャラクタヌが䜏んでいたす。キャラクタヌは、そのタブの゚ヌゞェントの状態を挔じたす。   ※ プラグむンがボタンに描いおいる絵を、そのたた画像にしたものです。 䞊段のスペヌスのボタンには、そのスペヌスにいるキャラクタヌの顔が䞊びたす。スペヌスの䞭に入らなくおも、「このスペヌスで誰かが手を振っおいる確認埅ち」ず分かりたす。 ボタンの画像は、プラグむンが SVG で描いお 150 ミリ秒ごずに差し替えおいたす。絵が前回ず同じなら送らないようにしお、負荷を抑えおいたす。 遞択䞭のボタンは明るく 今遞んでいるスペヌスずタブは、ボタンの背景が明るくなりたす。最初は癜い枠で囲んでいたしたが、小さなボタンでは分かりにくかったので、背景そのものを状態の色で明るく塗るようにしたした。遞んでいないボタンは暗いたたなので、明るいボタンが 1 ぀だけ目に入りたす。 抌したらそのタヌミナルぞ飛ぶ ボタンを抌すず、herdr のタブを切り替えたうえで、herdr が動いおいるタヌミナルアプリ今回は Ghosttyを前面に出したす。macOS はアプリを前面に出すず、そのりィンドりがあるデスクトップSpaceぞ自動で切り替えおくれたす。なので、タヌミナルを別のデスクトップに眮いおいおも、ボタン 1 ぀でそこぞ飛べたす。 むンフォバヌにコンテキスト残量ず利甚䞊限 ボタンの䞋のむンフォバヌには、次の 3 ぀を衚瀺しおいたす。 遞んでいるタブの Claude Code のコンテキスト䜿甚率ず、その内蚳 5 時間の利甚䞊限の䜿甚率ず、リセットされる時刻 1 週間の利甚䞊限の䜿甚率ず、リセットされる時刻 実機のむンフォバヌは、こんな感じです。 実機の画面は小さいので、それぞれ䜕を衚しおいるのかを図に起こしたした。 ※ 説明のために、プラグむンず同じ描画コヌドで倧きく描き盎したものです。数倀は写真ずは別のずきのものです。 どのタブの Claude Code かは、herdr がペむンごずに持っおいるセッション ID で特定しおいたす。䜿甚率は、Claude Code の   /usage   ず   /context   を、 claude -p   で裏から実行しお取っおいたす。 ずんだもんが読み䞊げおくれる仕組み ここからが䞀番気に入っおいるずころです。 流れ ① プラグむンが、1.2 秒ごずに herdr ぞ各タブの状態を問い合わせたす。 ② herdr が各タブの状態を返したす。プラグむンは、前回から「䜜業䞭 → 完了」や「→ 確認埅ち」に倉わったタブを芋぀けたす。 ③ プラグむンが、そのタブの画面を読みたす herdr pane read   で盎近 200 行。 ④ herdr が画面の文字を返したす。枠線や蚘号も混ざった、タヌミナルの衚瀺そのたたです。 â‘€ プラグむンが、画面の文字ず「䜕をした → どうなった → 次にするこず」の順で䌝えるよう指瀺した文章を、ロヌカル LLMOllama の qwen3.5:9bに枡したすChat Completions。 ⑥ ロヌカル LLM が、ずんだもんの口調の読み䞊げ文を返したす。 ⑩ プラグむンが、読み䞊げ文を VOICEVOXDocker で起動に枡したす。話者はずんだもんです。 ⑧ VOICEVOX が音声デヌタWAVを返したす。 ⑹ プラグむンが、音声をスピヌカヌで再生したす afplay 。 どのスペヌスのタブでも読み䞊げたす。文の頭に「業務自動化から。」のようにスペヌス名が付くので、どこの話か分かりたす。 ただ芁玄するのではなく「次に䜕をすればいいか」を䌝える LLM に枡すプロンプトで䞀番工倫したのは、「芁玄しお」ずは頌んでいないこずです。画面を芋おいない人が、声だけを聞いお 次に䜕をすればいいか分かる こずを最優先にしおもらっおいたす。 完了したずきは、次の 3 ぀を 3 文で䌝えおもらいたす。 このセッションで䜕をしたか その結果どうなったか 次にナヌザヌがすべきこず質問や遞択肢があれば、その䞭身 確認埅ちのずきは、次の 3 ぀です。 今䜕の䜜業をしおいる途䞭か 䜕の蚱可を求めおいるのか、䜕を質問しおいるのか削陀などの取り消しにくい操䜜は必ず蚀う どう答えればいいか遞択肢は読み䞊げるが、どれを遞ぶべきかは勧めない 入力はタヌミナルの画面そのたたなので、枠線や蚘号、入力欄なども混ざっおいたす。それらは LLM に「無芖しお䞭身だけ読み取っお」ず䌝えおいたす。 実際の読み䞊げ 実際に読み䞊げられた文章です。 䜜業が終わったずき 業務自動化から。未入力の工数を確認しお割り振り案を出したのだ。6 日分を指定されたプロゞェクトに正しく登録しお集蚈も䞀臎したのだ。月末の 2 日分を入力するか、期限たでにどうするか確認しおほしいのだ。 確認埅ちのずきコマンドの実行蚱可を求められた堎面 テストを盎すために䟝存パッケヌゞを再むンストヌルしおテストを流す䜜業の途䞭なのだ。node_modules を削陀しお䟝存関係を再構築し、テストを再実行するコマンドの蚱可を求めおいるのだ。蚱可する、今埌も聞かずに蚱可する、やめお指瀺し盎す、のどれかを遞んでほしいのだ。 「削陀する」こずをちゃんず䌝えおくれお、遞択肢も読み䞊げおくれたす。これならタヌミナルを芋に行く前に、答えを決められたす。 このプラグむンを䜜ったプロンプト このプラグむンは、Claude Code に䜜っおもらいたした。゜ヌスコヌドは公開しおいたせんが、代わりに「これを枡せば同じものが䜜れる」プロンプトを玹介したす。 実際のやり取りは詊行錯誀の連続だったので、完成したコヌドから逆算しお、最初から枡しおおけばよかった内容にたずめ盎したした。 プロンプトは 3 ぀に分けおいたす。1 回で党郚を頌むより、段階ごずに実機で動きを確かめながら進めた方が、手戻りが少なく枈みたす。パスやアプリ名など、環境に䟝存するずころは自分の環境に合わせお曞き換えおください。 ステップ 1ボタンでスペヌスずタブを操䜜する たずは土台です。herdr の状態をボタンに衚瀺しお、抌したらそのタブに切り替わるずころたでを䜜りたす。 Stream Deck NeomacOSから herdr を操䜜するプラグむンを TypeScript で䜜っおください。 SDK は @elgato/streamdeck 3.x、ビルドは rollup、プラグむンの UUID は jp.example.herdr にしたす。 # herdr に぀いお - herdr は AI ゚ヌゞェント向けのタヌミナルマルチプレクサで、スペヌスworkspaceずタブで䜜業を管理する - 次の CLI で状態を取れる。--json オプションは無く、最初から JSON を返す。 結果は {"id": "...", "result": {...}} の圢で包たれおいるので result を取り出すこず - herdr workspace list 
 workspace_id, label, focused, active_tab_id, agent_status - herdr tab list --workspace <id> 
 tab_id, label, agent_statusherdr の衚瀺順で返るので䞊べ替えない - herdr pane list 
 pane_id, tab_id, agent, agent_status, agent_session.valueセッション ID, cwd - herdr workspace focus <id> / herdr tab focus <tab_id> / herdr tab create --focus - agent_status は working / blocked / done / idle。unknown などそれ以倖は「゚ヌゞェントなし」ずしお扱う - タブの状態は、そのタブのペむンのうち最も深刻なものblocked > working > done > idleにする # ボタンの配眮 - 䞊段 4 ぀スペヌス。抌すずそのスペヌスを遞び、herdr 偎でもフォヌカスする - 䞋段 4 ぀䞊段で遞んだスペヌスのタブ。抌すずそのタブぞ切り替える - どのボタンが䜕番目を衚瀺するかは、蚭定画面の「スロット」1〜16で決める。スロットは通し番号にしお、 Stream Deck のペヌゞ 2 に䞊段スロット 5〜8 を眮けば、スペヌス 5〜8 を衚瀺できるようにする - 1 ぀のスペヌスにタブが 5 ぀以䞊あるずきは、遞択䞭のスペヌスボタンをもう䞀床抌すず、䞋段が次の 4 タブに切り替わる 最埌たで行ったら最初に戻る。遞択䞭のスペヌスボタンには 1/2 のように今の䜍眮を出す - 抌したずきの緑のチェックマヌクshowOkは出さない。倱敗したずきだけ showAlert を出す # 芋た目 - ボタンの画像は 144×144 の SVG をコヌドで生成しお setImage で送る - 背景色で状態を衚すblocked èµ€ / working 黄 / done ミント / idle 青 / ゚ヌゞェントなし 暗い玫 - 各タブのボタンには 14×12 マスのドット絵のキャラクタヌを眮き、状態を挔じさせる - working机でタむピング汗をかく / blocked手を振っお「!」の吹き出し - doneバンザむしお玙吹雪 / idle居眠りzzz / ゚ヌゞェントなし空垭の怅子 - アニメヌションは 150ms ごずに描き盎す。タむマヌは党ボタンで 1 本を共有し、前回ず同じ画像なら送らない - 䞊段のスペヌスボタンには、そのスペヌスのタブのキャラクタヌの顔を小さく䞊べる - 名前は党角 4 文字がちょうど 1 行に入る倧きさ32px・倪字 700で、最倧 2 行。 少しだけはみ出す名前や、空癜のない英単語は、折り返さずに文字を瞮めお 1 行に収める。 文字は真っ癜にし、瞁取りではなく右䞋にずらした薄い圱で読みやすくする - 遞択䞭のボタン遞んでいるスペヌスず、herdr でアクティブなタブは、背景を状態色の明るい淡い色にしお、 文字を濃い玺にする。遞んでいないボタンは暗くしない次に抌すボタンが読めなくなるため # タヌミナルを前面に出す - ボタンを抌したら、herdr の切り替えの埌に、herdr が動いおいるタヌミナルアプリを前面に出す - タヌミナルアプリは、tty を持぀ herdr プロセスから ps で芪をたどり、実行パスに .app/Contents/MacOS/ を含む 最初のプロセスから探すアプリ名は決め打ちしない。芋぀けたら open -a <アプリのパス> で前面に出す - macOS はアプリを前面に出すず、そのりィンドりがあるデスクトップぞ自動で切り替えおくれる # 泚意点 - Stream Deck から起動したプロセスはシェルの PATH を持たない。herdr は /opt/homebrew/bin などを探しお 絶察パスで呌ぶ。蚭定画面でパスを指定するこずもできるようにする - herdr ぞのポヌリングは 1.2 秒に 1 回、党ボタンで 1 本だけにする - manifest.json には CodePath を必ず曞く。完成したら streamdeck validate でチェックする - 蚭定画面Property Inspectorは倖郚ラむブラリを䜿わず、玠の HTML ず WebSocket で䜜る。 select の倀は文字列で保存されるこずがあるので、プラグむン偎で数倀に盎す ステップ 2むンフォバヌにコンテキスト残量ず利甚䞊限を出す 次に、ボタンの䞋のむンフォバヌを䜜りたす。 Stream Deck Neo のむンフォバヌ232×50に、Claude Code の情報を衚瀺するアクションを远加しおください。 むンフォバヌ党䜓を 1 ぀の pixmap にしお、プラグむンで描いた SVG を base64 の data URI で setFeedback に枡したす。 # 衚瀺する内容 - 䞊段遞んでいるタブの Claude Code のコンテキスト䜿甚率%、内蚳の積み䞊げバヌ、トヌクン数䟋636k/1m - 䞋段5 時間の利甚䞊限ず 1 週間の利甚䞊限の䜿甚率%ず、リセットされる時刻 - 䜿甚率の色は、70% たでミント、90% たで黄、それ以䞊は赀 - 文字は小さい画面でも読めるよう倧きめにする芋出し 14px、% は 17〜18px # デヌタの取り方 - 利甚䞊限claude -p "/usage" --output-format json --no-session-persistence - コンテキストclaude -p --resume <セッションID> "/context" --output-format json --no-session-persistence - どちらも 60 秒ごず。/context は重いので、䌚話の蚘録ファむルの曎新時刻が倉わったずきだけ実行する - プロヌブ自身がセッションずしお残らないよう、環境倉数 CLAUDE_CODE_SESSION_NAME で名札を付けお芋分ける # 遞んでいるタブのセッションの芋぀け方 - herdr の pane list の agent_session.value にセッション ID が入っおいるので、たずそれを䜿う - herdr が「゚ヌゞェントなし」ず蚀っおいるタブは、他の方法で掚定せず「このタブは Claude なし」ず衚瀺する 同じディレクトリで別のタブの Claude が動いおいおも、それを拟わないようにするため - 䌚話の蚘録ファむルは ~/.claude/projects/<䜜業ディレクトリ>/<セッションID>.jsonl にある。 ディレクトリ名は、䜜業ディレクトリのパスの英数字以倖をすべお - に眮き換えたもの日本語も 1 文字ず぀ - になる。 芋぀からなければ ~/.claude/projects の䞋をセッション ID で探す ステップ 3ずんだもんに読み䞊げさせる 最埌に、読み䞊げの仕組みを足したす。 Claude Code などの゚ヌゞェントの䜜業が終わったずきず、確認埅ちになったずきに、 その内容をロヌカル LLM で読み䞊げ甚の文章にしお、VOICEVOX のずんだもんに読み䞊げさせる機胜を このプラグむンに远加しおください。すべおのスペヌスのタブを察象にしたす。 # きっかけ - herdr のタブの状態が working → done、たたは working → idle に倉わったら「䜜業が終わった」ずする 芋おいるタブの䜜業が終わるず、herdr は done を経由せず idle になる - done → idle は「芋た」だけなので読たない - 状態が blocked に倉わったら「確認埅ち」ずする - プラグむンの起動盎埌前回の状態が無いずきは読たない # 流れ 1. そのタブのペむンの画面を herdr pane read <pane_id> --source recent-unwrapped --lines 200 --format text で読む。 盎埌は倱敗するこずがあるので、間を空けお最倧 3 回詊す 2. ロヌカル LLM に Chat CompletionsPOST {URL}/chat/completionsで画面を枡し、読み䞊げ甚の文章にしおもらう。 thinking で出力を䜿い切らないよう reasoning_effort: "none" を付ける 3. VOICEVOX の /audio_query ず /synthesis で音声にしお、afplay で再生する 4. 文の頭に「<スペヌス名>から。」を付ける - 読み䞊げは 1 件ず぀順番に。3 件より倚く溜たったら叀いものから捚おる。同じ画面は二床読たない # LLM ぞのプロンプトで䌝えるこず - あなたはずんだもんで、画面を芋おいないナヌザヌに音声で䜜業状況を䌝える - 入力はタヌミナル画面そのたたなので、枠線・蚘号❯ ⏺ ⎿ ▎ ─ │ など・入力欄・ステヌタス行・切れた行は無芖する。 ❯ で始たる行がナヌザヌの䟝頌、⏺ で始たる行が゚ヌゞェントの返答で、䞀番䞋が最新 - 聞き手が「次に自分が䜕をすればいいか」を分かるこずを最優先にする - 䜜業が終わったずき䜕をしたか → どうなったか → 次にナヌザヌがすべきこず質問や遞択肢があればその䞭身を 3 文で - 確認埅ちのずき䜕の䜜業䞭か → 䜕の蚱可・質問か → どう答えればいいか を 3 文で。 削陀・䞊曞きなど取り消しにくい操䜜は必ず蚀う。遞択肢は読み䞊げるが、どれを遞ぶべきかは勧めない - すべおの文をずんだもんの口調〜のだ、〜なのだで終える。前眮きや敬語は䜿わない。 コマンドやファむルパスはそのたた読たずに蚀い換える。120 文字以内 - 出力の䟋を 2〜3 個入れる # 起動しおいないずき - VOICEVOX やロヌカル LLM は起動し忘れるこずがある。読み䞊げ前に VOICEVOX の /version ず LLM の /models に 1.5 秒だけ問い合わせ、どちらかが応答しなければ、ナヌザヌに䜕も通知せずその回を飛ばしお凊理を続ける - 読み䞊げた・飛ばした理由はプラグむンのログにだけ残す # 蚭定 - むンフォバヌの蚭定画面に、プラグむン党䜓で共通の蚭定グロヌバル蚭定ずしお次を眮く。空欄は既定倀 - 読み䞊げのオン・オフ既定オン - LLM の URL既定http://127.0.0.1:11434/v1ずモデル既定qwen3.5:9b - VOICEVOX の URL既定http://127.0.0.1:50021ず話者 ID既定3 = ずんだもん たずめ herdr、Stream Deck、ロヌカル LLM、VOICEVOX を組み合わせお、AI ゚ヌゞェントずの䞊行䜜業をかなり快適にできたした。 ボタンを芋れば、党タブの状態が分かる ボタンを抌せば、そのタヌミナルぞ飛べる 終わったら、ずんだもんが次にやるこずたで教えおくれる 仕事はずんだもんにたかせおおいお、5時から男ずしゃれこみたしょう。 ご芧いただきありがずうございたす この投皿はお圹に立ちたしたか 圹に立った 圹に立たなかった 5人がこの投皿は圹に立ったず蚀っおいたす。 The post オレのClaude Code䜜業環境、控えめにいっお最高すぎる〜Stream Deckでherdrを操䜜、完了はずんだもんが読み䞊げ〜 first appeared on SIOS Tech Lab .