0-0mfuji
私は22歳の組み込みシステム電子エンジニアで、主にロボティクス、低レベルのコーディング、そして自作開発に興味があります。
Zola
2025-01-01T00:00:00+00:00
https://0-0mfuji.com/ja/atom.xml
機能リスト
2025-01-01T00:00:00+00:00
2025-01-01T00:00:00+00:00
Unknown
https://0-0mfuji.com/ja/posts/feature-list/
<h2 id="1-uikonponento">1. UIコンポーネント</h2>
<h3 id="1-1-kodoburotuku">1.1 コードブロック</h3>
<pre class="giallo" style="color: #24292E; background-color: #FFFFFF;"><code data-lang="rust"><span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #1B1F234D;">1</span><span style="color: #D73A49;">pub fn</span><span style="color: #6F42C1;"> main</span><span>() {</span></span>
<span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #1B1F234D;">2</span><span style="color: #6F42C1;"> println!</span><span>(</span><span style="color: #032F62;">"High performance routing!"</span><span>);</span></span>
<span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #1B1F234D;">3</span><span>}</span></span></code></pre><h3 id="1-2-suraidosiyo">1.2 スライドショー</h3>
<div class="slideshow-container" id="slideshow-features-slideshow">
<div class="slideshow-viewport" style="aspect-ratio: 1816&#x2F;1938;">
<img src="https://placeholder.pics/svg/800x400/222/00b7ff/Feature%201"
class="slideshow-image active"
data-index="0"
alt="Slide 1">
<img src="https://placeholder.pics/svg/800x400/181818/ddd/Feature%202"
class="slideshow-image "
data-index="1"
alt="Slide 2">
</div>
<p class="slideshow-caption">各種機能のイメージ図</p>
<div class="slideshow-controls">
<span class="slideshow-status">clk <span class="current-step">1</span></span>
<button class="slideshow-button prev" aria-label="Previous">
<svg viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
</button>
<button class="slideshow-button play-pause" aria-label="Play/Pause">
<svg class="icon-pause" viewBox="0 0 24 24"><path d="M6 6h4v12H6zM14 6h4v12h-4z"/></svg>
<svg class="icon-play" viewBox="0 0 24 24" style="display:none;"><path d="M8 5v14l11-7z"/></svg>
</button>
<button class="slideshow-button stop" aria-label="Stop">
<svg viewBox="0 0 24 24"><path d="M6 6h12v12H6z"/></svg>
</button>
<button class="slideshow-button next" aria-label="Next">
<svg viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
</button>
</div>
</div>
<script>
(function() {
const container = document.getElementById('slideshow-features-slideshow');
const images = container.querySelectorAll('.slideshow-image');
const stepDisplay = container.querySelector('.current-step');
const playPauseBtn = container.querySelector('.play-pause');
const playIcon = playPauseBtn.querySelector('.icon-play');
const pauseIcon = playPauseBtn.querySelector('.icon-pause');
let currentIndex = 0;
let isPlaying = false;
let intervalId = null;
function showImage(index) {
images[currentIndex].classList.remove('active');
currentIndex = (index + images.length) % images.length;
images[currentIndex].classList.add('active');
stepDisplay.textContent = currentIndex + 1;
}
function togglePlay() {
if (isPlaying) {
clearInterval(intervalId);
playIcon.style.display = 'block';
pauseIcon.style.display = 'none';
} else {
intervalId = setInterval(() => showImage(currentIndex + 1), 2000);
playIcon.style.display = 'none';
pauseIcon.style.display = 'block';
}
isPlaying = !isPlaying;
}
container.querySelector('.prev').addEventListener('click', () => {
if (isPlaying) togglePlay();
showImage(currentIndex - 1);
});
container.querySelector('.next').addEventListener('click', () => {
if (isPlaying) togglePlay();
showImage(currentIndex + 1);
});
container.querySelector('.stop').addEventListener('click', () => {
if (isPlaying) togglePlay();
showImage(0);
});
playPauseBtn.addEventListener('click', togglePlay);
})();
</script>
<h3 id="1-3-shu-shi">1.3 数式</h3>
<span class="katex-wrapper">
$$\mathcal{L} = \sum_{i=1}^{n} (y_i - f(x_i))^2 + \lambda \int [f''(x)]^2 dx$$
</span>
<h3 id="1-4-toguru-burotuku">1.4 トグル・ブロック</h3>
<div class="toggle-block" id="toggle-feature-toggle">
<div class="toggle-panels"><div class="toggle-panel active" data-index="1"><span class="katex-wrapper">
$$\text{Sigmoid}(x) = \frac{1}{1 + e^{-x}}$$
</span></div><div class="toggle-panel " data-index="2">def sigmoid(x):
return 1 / (1 + math.exp(-x))</div><div class="toggle-panel " data-index="3">fn sigmoid(x: f64) -> f64 {
1.0 / (1.0 + (-x).exp())
}</div></div>
<div class="toggle-tabs"><button class="toggle-tab active"
data-target="1"
onclick="switchToggle('feature-toggle', 1)">Formula</button><button class="toggle-tab "
data-target="2"
onclick="switchToggle('feature-toggle', 2)">Python</button><button class="toggle-tab "
data-target="3"
onclick="switchToggle('feature-toggle', 3)">Rust</button></div>
</div>
<script>
if (typeof switchToggle !== 'function') {
window.switchToggle = function(id, index) {
const container = document.getElementById('toggle-' + id);
const tabs = container.querySelectorAll('.toggle-tab');
const panels = container.querySelectorAll('.toggle-panel');
tabs.forEach(tab => {
tab.classList.toggle('active', parseInt(tab.getAttribute('data-target')) === index);
});
panels.forEach(panel => {
panel.classList.toggle('active', parseInt(panel.getAttribute('data-index')) === index);
});
};
}
</script>
<h3 id="1-5-sukurorulian-dong-xing">1.5 スクロール連動型</h3>
<div class="code-scroller">
<div class="code-scroller-steps">
<div class="code-scroller-step" data-lines="1-2">
<ul>
<li><strong>初期評価</strong></li>
</ul>
</div>
<div class="code-scroller-step" data-lines="4-6">
<ul>
<li><strong>メインループ</strong></li>
</ul>
</div>
</div>
<div class="code-scroller-code">
<pre class="giallo" style="color: #24292E; background-color: #FFFFFF;"><code data-lang="rust"><span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #1B1F234D;">1</span><span style="color: #D73A49;">fn</span><span style="color: #6F42C1;"> process</span><span>(data</span><span style="color: #D73A49;">: &</span><span style="color: #6F42C1;">Vec</span><span><</span><span style="color: #6F42C1;">i32</span><span>>) {</span></span>
<span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #1B1F234D;">2</span><span style="color: #D73A49;"> if</span><span> data</span><span style="color: #D73A49;">.</span><span style="color: #6F42C1;">is_empty</span><span>() {</span><span style="color: #D73A49;"> return</span><span>; }</span></span>
<span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #1B1F234D;">3</span></span>
<span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #1B1F234D;">4</span><span style="color: #D73A49;"> for</span><span> item</span><span style="color: #D73A49;"> in</span><span> data {</span></span>
<span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #1B1F234D;">5</span><span style="color: #6F42C1;"> println!</span><span>(</span><span style="color: #032F62;">"Processing: {}"</span><span>, item);</span></span>
<span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #1B1F234D;">6</span><span> }</span></span>
<span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #1B1F234D;">7</span><span>}</span></span></code></pre>
</div>
</div>