nebel/chirimen-hands-on
1
0
Fork 0
mirror of https://github.com/kou029w/chirimen-hands-on.git synced 2025-01-18 16:08:13 +00:00
Code Issues Projects Releases Packages Wiki Activity
chirimen-hands-on/public/2023/okayama/index.html

649 lines
138 KiB
HTML
Raw Permalink Normal View History

archived 2023 okayama
2024-07-19 13:29:23 +09:00
<!DOCTYPE html><html lang="ja-JP"><head><title>Raspberry Pi Zero 版 CHIRIMEN</title><meta property="og:title" content="Raspberry Pi Zero 版 CHIRIMEN"><meta charset="UTF-8"><meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"><meta name="apple-mobile-web-app-capable" content="yes"><meta http-equiv="X-UA-Compatible" content="ie=edge"><meta property="og:type" content="website"><meta name="twitter:card" content="summary"><style>@media screen{body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container button{-webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none;background-color:transparent;border:0;color:inherit;cursor:pointer;font-size:inherit;opacity:.8;outline:none;padding:0;transition:opacity .2s linear}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button:disabled,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button:disabled,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button:disabled,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container button:disabled{cursor:not-allowed;opacity:.15!important}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button:hover,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button:hover,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button:hover,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container button:hover{opacity:1}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button:hover:active,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button:hover:active,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button:hover:active,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container button:hover:active{opacity:.6}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button:hover:not(:disabled),body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button:hover:not(:disabled),body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button:hover:not(:disabled),body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container button:hover:not(:disabled){transition:none}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=prev],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=prev],body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button.bespoke-marp-presenter-info-page-prev{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI1IiBkPSJNNjggOTAgMjggNTBsNDAtNDAiLz48L3N2Zz4=") no-repeat 50%;background-size:contain;overflow:hidden;text-indent:100%;white-space:nowrap}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=next],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=next],body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button.bespoke-marp-presenter-info-page-next{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ij
/*!
* Marp default theme.
*
* @theme default
* @author Yuki Hattori
*
* @auto-scaling true
* @size 16:9 1280px 720px
* @size 4:3 960px 720px
*/div#\:\$p>svg>foreignObject>section,div#\:\$p>svg>foreignObject>section [data-theme=light]{--color-prettylights-syntax-comment:#6e7781;--color-prettylights-syntax-constant:#0550ae;--color-prettylights-syntax-entity:#6639ba;--color-prettylights-syntax-storage-modifier-import:#24292f;--color-prettylights-syntax-entity-tag:#116329;--color-prettylights-syntax-keyword:#cf222e;--color-prettylights-syntax-string:#0a3069;--color-prettylights-syntax-variable:#953800;--color-prettylights-syntax-brackethighlighter-unmatched:#82071e;--color-prettylights-syntax-invalid-illegal-text:#f6f8fa;--color-prettylights-syntax-invalid-illegal-bg:#82071e;--color-prettylights-syntax-carriage-return-text:#f6f8fa;--color-prettylights-syntax-carriage-return-bg:#cf222e;--color-prettylights-syntax-string-regexp:#116329;--color-prettylights-syntax-markup-list:#3b2300;--color-prettylights-syntax-markup-heading:#0550ae;--color-prettylights-syntax-markup-italic:#24292f;--color-prettylights-syntax-markup-bold:#24292f;--color-prettylights-syntax-markup-deleted-text:#82071e;--color-prettylights-syntax-markup-deleted-bg:#ffebe9;--color-prettylights-syntax-markup-inserted-text:#116329;--color-prettylights-syntax-markup-inserted-bg:#dafbe1;--color-prettylights-syntax-markup-changed-text:#953800;--color-prettylights-syntax-markup-changed-bg:#ffd8b5;--color-prettylights-syntax-markup-ignored-text:#eaeef2;--color-prettylights-syntax-markup-ignored-bg:#0550ae;--color-prettylights-syntax-meta-diff-range:#8250df;--color-prettylights-syntax-brackethighlighter-angle:#57606a;--color-prettylights-syntax-sublimelinter-gutter-mark:#8c959f;--color-prettylights-syntax-constant-other-reference-link:#0a3069;--color-fg-default:#1f2328;--color-fg-muted:#656d76;--color-fg-subtle:#6e7781;--color-canvas-default:#fff;--color-canvas-subtle:#f6f8fa;--color-border-default:#d0d7de;--color-border-muted:#d8dee4;--color-neutral-muted:rgba(175,184,193,.2);--color-accent-fg:#0969da;--color-accent-emphasis:#0969da;--color-attention-subtle:#fff8c5;--color-danger-fg:#d1242f;color-scheme:light}div#\:\$p>svg>foreignObject>section [data-theme=dark],div#\:\$p>svg>foreignObject>section:where(.invert){--color-prettylights-syntax-comment:#8b949e;--color-prettylights-syntax-constant:#79c0ff;--color-prettylights-syntax-entity:#d2a8ff;--color-prettylights-syntax-storage-modifier-import:#c9d1d9;--color-prettylights-syntax-entity-tag:#7ee787;--color-prettylights-syntax-keyword:#ff7b72;--color-prettylights-syntax-string:#a5d6ff;--color-prettylights-syntax-variable:#ffa657;--color-prettylights-syntax-brackethighlighter-unmatched:#f85149;--color-prettylights-syntax-invalid-illegal-text:#f0f6fc;--color-prettylights-syntax-invalid-illegal-bg:#8e1519;--color-prettylights-syntax-carriage-return-text:#f0f6fc;--color-prettylights-syntax-carriage-return-bg:#b62324;--color-prettylights-syntax-string-regexp:#7ee787;--color-prettylights-syntax-markup-list:#f2cc60;--color-prettylights-syntax-markup-heading:#1f6feb;--color-prettylights-syntax-markup-italic:#c9d1d9;--color-prettylights-syntax-markup-bold:#c9d1d9;--color-prettylights-syntax-markup-deleted-text:#ffdcd7;--color-prettylights-syntax-markup-deleted-bg:#67060c;--color-prettylights-syntax-markup-inserted-text:#aff5b4;--color-prettylights-syntax-markup-inserted-bg:#033a16;--color-prettylights-syntax-markup-changed-text:#ffdfb6;--color-prettylights-syntax-markup-changed-bg:#5a1e02;--color-prettylights-syntax-markup-ignored-text:#c9d1d9;--color-prettylights-syntax-markup-ignored-bg:#1158c7;--color-prettylights-syntax-meta-diff-range:#d2a8ff;--color-prettylights-syntax-brackethighlighter-angle:#8b949e;--color-prettylights-syntax-sublimelinter-gutter-mark:#484f58;--color-prettylights-syntax-constant-other-reference-link:#a5d6ff;--color-fg-default:#e6edf3;--color-fg-muted:#7d8590;--color-fg-subtle:#6e7681;--color-canvas-default:#0d1117;--color-canvas-subtle:#161b22;--color-border-default:#30363d;--color-border-muted:#21262d;--color-neutral-muted:hsla(215,8%,47%,.4);--color-accent-fg:#2f81f7;--color-accent-emphasis:#1f6feb;--color-attention-subtle:rgba(187,128,9,.1
/* content:""; */display:table}div#\:\$p>svg>foreignObject>section:after{clear:both}div#\:\$p>svg>foreignObject>section>:first-child{margin-top:0!important}div#\:\$p>svg>foreignObject>section>:last-child{margin-bottom:0!important}div#\:\$p>svg>foreignObject>section a:not([href]){color:inherit;text-decoration:none}div#\:\$p>svg>foreignObject>section .absent{color:var(--color-danger-fg)}div#\:\$p>svg>foreignObject>section .anchor{float:left;line-height:1;margin-left:-20px;padding-right:4px}div#\:\$p>svg>foreignObject>section .anchor:focus{outline:none}div#\:\$p>svg>foreignObject>section :is(pre,marp-pre),div#\:\$p>svg>foreignObject>section blockquote,div#\:\$p>svg>foreignObject>section details,div#\:\$p>svg>foreignObject>section dl,div#\:\$p>svg>foreignObject>section ol,div#\:\$p>svg>foreignObject>section p,div#\:\$p>svg>foreignObject>section table,div#\:\$p>svg>foreignObject>section ul{margin-bottom:16px;margin-top:0}div#\:\$p>svg>foreignObject>section blockquote>:first-child{margin-top:0}div#\:\$p>svg>foreignObject>section blockquote>:last-child{margin-bottom:0}div#\:\$p>svg>foreignObject>section :is(h1,marp-h1) .octicon-link,div#\:\$p>svg>foreignObject>section :is(h2,marp-h2) .octicon-link,div#\:\$p>svg>foreignObject>section :is(h3,marp-h3) .octicon-link,div#\:\$p>svg>foreignObject>section :is(h4,marp-h4) .octicon-link,div#\:\$p>svg>foreignObject>section :is(h5,marp-h5) .octicon-link,div#\:\$p>svg>foreignObject>section :is(h6,marp-h6) .octicon-link{color:var(--color-fg-default);vertical-align:middle;visibility:hidden}div#\:\$p>svg>foreignObject>section :is(h1,marp-h1):hover .anchor,div#\:\$p>svg>foreignObject>section :is(h2,marp-h2):hover .anchor,div#\:\$p>svg>foreignObject>section :is(h3,marp-h3):hover .anchor,div#\:\$p>svg>foreignObject>section :is(h4,marp-h4):hover .anchor,div#\:\$p>svg>foreignObject>section :is(h5,marp-h5):hover .anchor,div#\:\$p>svg>foreignObject>section :is(h6,marp-h6):hover .anchor{text-decoration:none}div#\:\$p>svg>foreignObject>section :is(h1,marp-h1):hover .anchor .octicon-link,div#\:\$p>svg>foreignObject>section :is(h2,marp-h2):hover .anchor .octicon-link,div#\:\$p>svg>foreignObject>section :is(h3,marp-h3):hover .anchor .octicon-link,div#\:\$p>svg>foreignObject>section :is(h4,marp-h4):hover .anchor .octicon-link,div#\:\$p>svg>foreignObject>section :is(h5,marp-h5):hover .anchor .octicon-link,div#\:\$p>svg>foreignObject>section :is(h6,marp-h6):hover .anchor .octicon-link{visibility:visible}div#\:\$p>svg>foreignObject>section :is(h1,marp-h1) code,div#\:\$p>svg>foreignObject>section :is(h1,marp-h1) tt,div#\:\$p>svg>foreignObject>section :is(h2,marp-h2) code,div#\:\$p>svg>foreignObject>section :is(h2,marp-h2) tt,div#\:\$p>svg>foreignObject>section :is(h3,marp-h3) code,div#\:\$p>svg>foreignObject>section :is(h3,marp-h3) tt,div#\:\$p>svg>foreignObject>section :is(h4,marp-h4) code,div#\:\$p>svg>foreignObject>section :is(h4,marp-h4) tt,div#\:\$p>svg>foreignObject>section :is(h5,marp-h5) code,div#\:\$p>svg>foreignObject>section :is(h5,marp-h5) tt,div#\:\$p>svg>foreignObject>section :is(h6,marp-h6) code,div#\:\$p>svg>foreignObject>section :is(h6,marp-h6) tt{font-size:inherit;padding:0 .2em}div#\:\$p>svg>foreignObject>section summary :is(h1,marp-h1),div#\:\$p>svg>foreignObject>section summary :is(h2,marp-h2),div#\:\$p>svg>foreignObject>section summary :is(h3,marp-h3),div#\:\$p>svg>foreignObject>section summary :is(h4,marp-h4),div#\:\$p>svg>foreignObject>section summary :is(h5,marp-h5),div#\:\$p>svg>foreignObject>section summary :is(h6,marp-h6){display:inline-block}div#\:\$p>svg>foreignObject>section summary :is(h1,marp-h1) .anchor,div#\:\$p>svg>foreignObject>section summary :is(h2,marp-h2) .anchor,div#\:\$p>svg>foreignObject>section summary :is(h3,marp-h3) .anchor,div#\:\$p>svg>foreignObject>section summary :is(h4,marp-h4) .anchor,div#\:\$p>svg>foreignObject>section summary :is(h5,marp-h5) .anchor,div#\:\$p>svg>foreignObject>section summary :is(h6,marp-h6) .anchor{margin-left:-40px}div#\:\$p>svg>foreignObject>section summary :is(h1,marp-h1),div#\:\$p>svg>foreignObject>section summary :is(h2,marp-h2){b
border-bottom: 10px solid #F5CE52;
}
" lang="ja-JP" data-marpit-pagination="1" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
;" data-marpit-pagination-total="39">
<h1 id="2023-09-30-%E3%83%8F%E3%83%B3%E3%82%BA%E3%82%AA%E3%83%B3">2023-09-30 ハンズオン</h1>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-style="section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
" lang="ja-JP" data-marpit-pagination="2" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
;" data-marpit-pagination-total="39" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url(&quot;https://webiotmakers.github.io/static/images/2022/template/ogp.jpg&quot;);"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="2" data-paginate="true" data-style="section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
" lang="ja-JP" data-marpit-pagination="2" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
;" data-marpit-pagination-total="39" data-marpit-advanced-background="content"></section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-paginate="true" data-style="section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
" lang="ja-JP" data-marpit-pagination="2" style="" data-marpit-pagination-total="39" data-marpit-advanced-background="pseudo"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="3" data-paginate="true" data-style="section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
" lang="ja-JP" data-marpit-pagination="3" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
;" data-marpit-pagination-total="39">
<h1 id="raspberry-pi-zero-%E7%89%88-chirimen-%E3%83%8F%E3%83%B3%E3%82%BA%E3%82%AA%E3%83%B3">Raspberry Pi Zero 版 CHIRIMEN ハンズオン</h1>
<p>WebDINO Japan シニアエンジニア<br />
<a href="https://github.com/kou029w">渡邉浩平</a><br />
<img src="https://github.com/kou029w.png" alt="" style="width:200px;" /></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="4" data-paginate="true" data-style="section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
" lang="ja-JP" data-marpit-pagination="4" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
;" data-marpit-pagination-total="39">
<h2 id="chirimen-%E3%81%A8%E3%81%AF">CHIRIMEN とは</h2>
<p><img src="https://res.cloudinary.com/chirimen/image/fetch/c_limit,f_auto,q_auto,w_1200/https://tutorial.chirimen.org/raspi/imgs/section0/CHIRIMENforRaspberryPi3.png" alt="" style="height:480px;" /></p>
<p>JavaScript からハードウェアを制御するプロトタイピング環境<br />
センサーやモーターなど組み合わせたさまざまなものをつくることができます</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="5" data-paginate="true" data-footer="画像の引用元: Web×IoT メイカーズチャレンジ 作品ギャラリー https://webiotmakers.github.io/gallery/" data-style="section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
" lang="ja-JP" data-marpit-pagination="5" style="--paginate:true;--footer:画像の引用元: Web×IoT メイカーズチャレンジ 作品ギャラリー https://webiotmakers.github.io/gallery/;--style:section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
;" data-marpit-pagination-total="39">
<p><img src="./assets/webiotmakers-gallery.dio.png" alt="" style="height:600px;" /></p>
<footer>画像の引用元: Web×IoT メイカーズチャレンジ 作品ギャラリー <a href="https://webiotmakers.github.io/gallery/">https://webiotmakers.github.io/gallery/</a></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="6" data-paginate="true" data-style="section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
" lang="ja-JP" data-marpit-pagination="6" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
;" data-marpit-pagination-total="39">
<h2 id="%E6%9C%AC%E6%97%A5%E3%81%AE%E5%86%85%E5%AE%B9">本日の内容</h2>
<p>Raspberry Pi Zero 版 CHIRIMEN 導入編</p>
<ul>
<li>11:00 L チカしてみよう</li>
<li>12:00 〜昼休み〜</li>
<li>13:00 CHIRIMEN チュートリアル
<ul>
<li>GPIO に関する基礎知識</li>
<li>I2C に関する基礎知識</li>
<li>遠隔制御してみよう</li>
<li>常駐プログラム化してみよう</li>
</ul>
</li>
<li>16:50 片付け</li>
<li>17:00 解散</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="7" data-paginate="true" data-style="section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
" lang="ja-JP" data-marpit-pagination="7" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
;" data-marpit-pagination-total="39">
<h2 id="%E6%9C%AC%E6%97%A5%E3%81%AE%E3%82%B4%E3%83%BC%E3%83%AB">本日のゴール</h2>
<p>センサーやモーターの基本的な使い方を理解する</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="8" data-paginate="true" data-style="section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
" lang="ja-JP" data-marpit-pagination="8" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
;" data-marpit-pagination-total="39">
<h2 id="slack-%E3%81%AB%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9-%E3%81%BE%E3%81%A0%E3%81%AE%E6%96%B9">Slack にアクセス (まだの方)</h2>
<p>Web IoT Makers Challenge Slack: <a href="https://webiotmakerschallenge.slack.com">https://webiotmakerschallenge.slack.com</a></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="9" data-paginate="true" data-style="section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
" lang="ja-JP" data-marpit-pagination="9" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
;" data-marpit-pagination-total="39">
<h2 id="chirimen-%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB%E8%B3%87%E6%96%99">CHIRIMEN チュートリアル資料</h2>
<p><a href="https://tutorial.chirimen.org/pizero/">https://tutorial.chirimen.org/pizero/</a> にアクセス</p>
<p>または</p>
<p>「chirimen pi zero」で検索 <a href="https://www.google.com/search?q=chirimen+pi+zero"><img class="emoji" draggable="false" alt="🔍" src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@14.1.2/assets/svg/1f50d.svg" data-marp-twemoji=""/></a></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="10" data-paginate="true" data-style="section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
" lang="ja-JP" data-marpit-pagination="10" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
;" data-marpit-pagination-total="39">
<h2 id="%E5%9B%B0%E3%81%A3%E3%81%9F%E3%81%A8%E3%81%8D%E3%83%BB%E5%88%86%E3%81%8B%E3%82%89%E3%81%AA%E3%81%84%E3%81%A8%E3%81%8D%E3%83%BB%E6%B0%97%E3%81%AB%E3%81%AA%E3%82%8B%E3%81%93%E3%81%A8%E3%81%8C%E3%81%82%E3%82%8B%E3%81%A8%E3%81%8D">困ったとき・分からないとき・気になることがあるとき</h2>
<p>会場のスタッフにお気軽にお声がけください <img class="emoji" draggable="false" alt="🖐" src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@14.1.2/assets/svg/1f590.svg" data-marp-twemoji=""/><br />
Slack でも OK <img class="emoji" draggable="false" alt="👌" src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@14.1.2/assets/svg/1f44c.svg" data-marp-twemoji=""/></p>
<p>Web IoT Makers Challenge Slack: <a href="https://webiotmakerschallenge.slack.com">https://webiotmakerschallenge.slack.com</a></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="11" data-paginate="true" data-footer="https://tutorial.chirimen.org/pizero/#pcwifi" data-style="section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
" lang="ja-JP" data-marpit-pagination="11" style="--paginate:true;--footer:https://tutorial.chirimen.org/pizero/#pcwifi;--style:section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
;" data-marpit-pagination-total="39">
<h2 id="%E6%A9%9F%E6%9D%90%E3%81%AE%E7%A2%BA%E8%AA%8D">機材の確認</h2>
<ul>
<li>Raspberry Pi Zero W</li>
<li>CHIRIMEN スターターキット
<ul>
<li>microSD カード</li>
</ul>
</li>
<li>USB ケーブル</li>
</ul>
<footer><a href="https://tutorial.chirimen.org/pizero/#pcwifi">https://tutorial.chirimen.org/pizero/#pcwifi</a></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="12" data-paginate="true" data-footer="https://tutorial.chirimen.org/pizero/#a-hrefhttpschirimenorgpizerowebserialconsolepizerowebserialconsolehtmla-" data-style="section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
" lang="ja-JP" data-marpit-pagination="12" style="--paginate:true;--footer:https://tutorial.chirimen.org/pizero/#a-hrefhttpschirimenorgpizerowebserialconsolepizerowebserialconsolehtmla-;--style:section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
;" data-marpit-pagination-total="39">
<h2 id="raspberry-pi-zero-%E3%81%AE%E8%B5%B7%E5%8B%95">Raspberry Pi Zero の起動</h2>
<p><img src="https://chirimen.org/PiZeroWebSerialConsole/imgs/PiZeroW_OTG.JPG" alt="" style="height:360px;" /></p>
<ol>
<li>microSD カードを差し込む</li>
<li>パソコンと USB ケーブルで接続する</li>
<li>ターミナルに接続する</li>
</ol>
<footer><a href="https://tutorial.chirimen.org/pizero/#a-hrefhttpschirimenorgpizerowebserialconsolepizerowebserialconsolehtmla-">https://tutorial.chirimen.org/pizero/#a-hrefhttpschirimenorgpizerowebserialconsolepizerowebserialconsolehtmla-</a></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="13" data-paginate="true" data-style="section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
" lang="ja-JP" data-marpit-pagination="13" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
;" data-marpit-pagination-total="39">
<h2 id="%E3%82%BF%E3%83%BC%E3%83%9F%E3%83%8A%E3%83%AB%E3%81%AB%E6%8E%A5%E7%B6%9A">ターミナルに接続</h2>
<p><a href="https://chirimen.org/PiZeroWebSerialConsole/PiZeroWebSerialConsole.html">https://chirimen.org/PiZeroWebSerialConsole/PiZeroWebSerialConsole.html</a></p>
<ol>
<li>ターミナルにアクセス</li>
<li>[Connect and Login PiZero] を選択</li>
<li>[接続]</li>
</ol>
<p><img src="https://d33wubrfki0l68.cloudfront.net/2521683e759f053b3a77eb7d91f3849f0711267b/84e41/pizero/imgs/serialdialog.png" alt="" /></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="14" data-paginate="true" data-footer="https://tutorial.chirimen.org/pizero/#wifi" data-style="section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
" lang="ja-JP" data-marpit-pagination="14" style="--paginate:true;--footer:https://tutorial.chirimen.org/pizero/#wifi;--style:section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
;" data-marpit-pagination-total="39">
<h2 id="wi-fi-%E3%81%AE%E8%A8%AD%E5%AE%9A">Wi-Fi の設定</h2>
<ol>
<li>[wifi panel] &gt; [SSID] [PASS PHRASE] を入力</li>
<li>[SET WiFi] を選択</li>
<li>[Reboot] を選択</li>
<li>(もう一度) ターミナルにアクセス</li>
<li>[Connect and Login PiZero] を選択
<ul>
<li>シリアルポートが表示されていれば OK <img class="emoji" draggable="false" alt="✅" src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@14.1.2/assets/svg/2705.svg" data-marp-twemoji=""/></li>
<li>起動完了まで約 2 分間かかります</li>
</ul>
</li>
<li>[接続]</li>
</ol>
<footer><a href="https://tutorial.chirimen.org/pizero/#wifi">https://tutorial.chirimen.org/pizero/#wifi</a></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="15" data-paginate="true" data-footer="https://tutorial.chirimen.org/pizero/#section-3" data-style="section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
" lang="ja-JP" data-marpit-pagination="15" style="--paginate:true;--footer:https://tutorial.chirimen.org/pizero/#section-3;--style:section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
;" data-marpit-pagination-total="39">
<h2 id="%E3%83%96%E3%83%AC%E3%83%83%E3%83%89%E3%83%9C%E3%83%BC%E3%83%89%E3%81%A7%E3%81%AE%E9%85%8D%E7%B7%9A">ブレッドボードでの配線</h2>
<p><img src="./assets/led-blink.dio.png" alt="" style="height:600px;" /></p>
<footer><a href="https://tutorial.chirimen.org/pizero/#section-3">https://tutorial.chirimen.org/pizero/#section-3</a></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="16" data-paginate="true" data-style="section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
" lang="ja-JP" data-marpit-pagination="16" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
;" data-marpit-pagination-total="39">
<h2 id="%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0%E3%82%92%E6%9B%B8%E3%81%8F">プログラムを書く</h2>
<p>[myApp] &gt; [移動] &gt; [Create New Text] &gt; &quot;hello.js&quot; と入力</p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-js"><span class="hljs-keyword">import</span> { requestGPIOAccess } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;node-web-gpio&quot;</span>; <span class="hljs-comment">// WebGPIO を使えるようにするためのライブラリをインポート</span>
<span class="hljs-keyword">const</span> <span class="hljs-title function_">sleep</span> = (<span class="hljs-params">msec</span>) =&gt; <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve</span>) =&gt;</span> <span class="hljs-built_in">setTimeout</span>(resolve, msec)); <span class="hljs-comment">// sleep 関数を定義</span>
<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">blink</span>(<span class="hljs-params"></span>) {
<span class="hljs-keyword">const</span> gpioAccess = <span class="hljs-keyword">await</span> <span class="hljs-title function_">requestGPIOAccess</span>(); <span class="hljs-comment">// GPIO を操作する</span>
<span class="hljs-keyword">const</span> port = gpioAccess.<span class="hljs-property">ports</span>.<span class="hljs-title function_">get</span>(<span class="hljs-number">26</span>); <span class="hljs-comment">// 26 番ポートを操作する</span>
<span class="hljs-keyword">await</span> port.<span class="hljs-title function_">export</span>(<span class="hljs-string">&quot;out&quot;</span>); <span class="hljs-comment">// ポートを出力モードに設定</span>
<span class="hljs-comment">// 無限ループ</span>
<span class="hljs-keyword">for</span> (;;) {
<span class="hljs-comment">// 1秒間隔で LED が点滅します</span>
<span class="hljs-keyword">await</span> port.<span class="hljs-title function_">write</span>(<span class="hljs-number">1</span>); <span class="hljs-comment">// LEDを点灯</span>
<span class="hljs-keyword">await</span> <span class="hljs-title function_">sleep</span>(<span class="hljs-number">1000</span>); <span class="hljs-comment">// 1000 ms (1秒) 待機</span>
<span class="hljs-keyword">await</span> port.<span class="hljs-title function_">write</span>(<span class="hljs-number">0</span>); <span class="hljs-comment">// LEDを消灯</span>
<span class="hljs-keyword">await</span> <span class="hljs-title function_">sleep</span>(<span class="hljs-number">1000</span>); <span class="hljs-comment">// 1000 ms (1秒) 待機</span>
}
}
<span class="hljs-title function_">blink</span>();
</code></pre>
<p>コピー&amp;ペースト &gt; [Save] (保存)</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="17" data-paginate="true" data-style="section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
" lang="ja-JP" data-marpit-pagination="17" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
;" data-marpit-pagination-total="39">
<h2 id="%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0%E3%81%AE%E5%AE%9F%E8%A1%8C">プログラムの実行</h2>
<p>&quot;hello.js&quot; を実行する方法</p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code>node hello.js
</code></pre>
<p>停止するには <code>Ctrl</code>+<code>C</code></p>
<p>書式:</p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code>node [ファイル名]
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="18" data-paginate="true" data-style="section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
" lang="ja-JP" data-marpit-pagination="18" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
;" data-marpit-pagination-total="39">
<h2 id="%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89">サンプルコードのダウンロード</h2>
<p>CHIRIMEN panel &gt; Get Examples &gt; hello-real-world (L チカ) &gt; JS GET</p>
<p>他のサンプルコードや配線図を参照することができます</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="19" data-paginate="true" data-style="section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
" lang="ja-JP" data-marpit-pagination="19" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
;" data-marpit-pagination-total="39">
<h2 id="%E3%81%93%E3%81%93%E3%81%BE%E3%81%A7%E3%81%AE%E3%81%BE%E3%81%A8%E3%82%81">ここまでのまとめ</h2>
<ul>
<li>Raspberry Pi Zero W のセットアップ</li>
<li>LED を制御するプログラム (通称 LED チカチカ、L チカ) の実行</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="20" data-paginate="true" data-style="section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
" lang="ja-JP" data-marpit-pagination="20" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
;" data-marpit-pagination-total="39">
<h2 id="chirimen-%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB%E8%B3%87%E6%96%99-1">CHIRIMEN チュートリアル資料</h2>
<p><a href="https://tutorial.chirimen.org/pizero/">https://tutorial.chirimen.org/pizero/</a> にアクセス</p>
<p>または</p>
<p>「chirimen pi zero」で検索 <a href="https://www.google.com/search?q=chirimen+pi+zero"><img class="emoji" draggable="false" alt="🔍" src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@14.1.2/assets/svg/1f50d.svg" data-marp-twemoji=""/></a></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="21" data-paginate="true" data-style="section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
" lang="ja-JP" data-marpit-pagination="21" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
;" data-marpit-pagination-total="39">
<h1 id="2023-10-01">2023-10-01</h1>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="22" data-paginate="true" data-style="section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
" lang="ja-JP" data-marpit-pagination="22" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
;" data-marpit-pagination-total="39">
<h2 id="%E3%81%84%E3%82%8D%E3%81%84%E3%82%8D%E3%81%AA%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9%E3%82%92%E8%87%AA%E7%94%B1%E3%81%AB%E8%A9%A6%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86">いろいろなデバイスを自由に試してみよう</h2>
<ul>
<li>自由に進めてもらって OK <img class="emoji" draggable="false" alt="👌" src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@14.1.2/assets/svg/1f44c.svg" data-marp-twemoji=""/></li>
<li>席はどこでも OK <img class="emoji" draggable="false" alt="👌" src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@14.1.2/assets/svg/1f44c.svg" data-marp-twemoji=""/> (午前中)</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="23" data-paginate="true" data-style="section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
" lang="ja-JP" data-marpit-pagination="23" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
;" data-marpit-pagination-total="39">
<h2 id="%E6%9C%AC%E6%97%A5%E3%81%AE%E6%B5%81%E3%82%8C">本日の流れ</h2>
<p>Raspberry Pi Zero 版 CHIRIMEN 応用編</p>
<ul>
<li>10:00 はじめに</li>
<li>10:15 自由時間</li>
<li>11:45 片付け・ハッカソンチーム分け発表</li>
</ul>
<p>アイディアワークショップ</p>
<ul>
<li>13:00 ハッカソンに向けてのインプットトーク</li>
<li>13:30 アイディアワークショップ</li>
<li>14:30 ハッカソンに向けてのチーム相談タイム</li>
<li>16:20 各チームの進捗発表</li>
<li>16:40 ハッカソンについての説明、機材貸し出し、記念撮影</li>
<li>17:00 解散</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-footer="画像の引用元: Web×IoT メイカーズチャレンジ 作品ギャラリー https://webiotmakers.github.io/gallery/" data-style="section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
" lang="ja-JP" data-marpit-pagination="24" style="--paginate:true;--footer:画像の引用元: Web×IoT メイカーズチャレンジ 作品ギャラリー https://webiotmakers.github.io/gallery/;--style:section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
;--marpit-advanced-background-split:48%;" data-marpit-pagination-total="39" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url(&quot;./assets/webiotmakers-gallery.dio.png&quot;);background-size:800px auto;"></figure></div></section></foreignObject><foreignObject width="52%" height="720"><section id="24" data-paginate="true" data-footer="画像の引用元: Web×IoT メイカーズチャレンジ 作品ギャラリー https://webiotmakers.github.io/gallery/" data-style="section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
" lang="ja-JP" data-marpit-pagination="24" style="--paginate:true;--footer:画像の引用元: Web×IoT メイカーズチャレンジ 作品ギャラリー https://webiotmakers.github.io/gallery/;--style:section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
;--marpit-advanced-background-split:48%;" data-marpit-pagination-total="39" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h2 id="%E3%83%8F%E3%83%83%E3%82%AB%E3%82%BD%E3%83%B3%E3%81%AE%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88">ハッカソンのポイント</h2>
<ul>
<li>ときめくような素敵なアイディア</li>
</ul>
<footer>画像の引用元: Web×IoT メイカーズチャレンジ 作品ギャラリー <a href="https://webiotmakers.github.io/gallery/">https://webiotmakers.github.io/gallery/</a></footer>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-paginate="true" data-footer="画像の引用元: Web×IoT メイカーズチャレンジ 作品ギャラリー https://webiotmakers.github.io/gallery/" data-style="section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
" lang="ja-JP" data-marpit-pagination="24" style="" data-marpit-pagination-total="39" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="right"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="25" data-paginate="true" data-style="section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
" lang="ja-JP" data-marpit-pagination="25" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
;" data-marpit-pagination-total="39">
<h2 id="%E5%8F%82%E8%80%83%E9%81%8E%E5%8E%BB%E3%81%AE%E4%BD%9C%E5%93%81%E3%82%AE%E3%83%A3%E3%83%A9%E3%83%AA%E3%83%BC">【参考】過去の作品ギャラリー</h2>
<p>「Web×IoT メイカーズチャレンジ」で検索 &gt; ハッカソン作品集<br />
または<br />
<a href="https://webiotmakers.github.io/gallery/">https://webiotmakers.github.io/gallery/</a></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="26" data-paginate="true" data-style="section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
" lang="ja-JP" data-marpit-pagination="26" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
;" data-marpit-pagination-total="39">
<h2 id="%E5%8F%82%E8%80%83chirimen-%E5%AF%BE%E5%BF%9C%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9%E3%81%AE%E4%B8%80%E8%A6%A7">【参考】CHIRIMEN 対応デバイスの一覧</h2>
<p><a href="https://tutorial.chirimen.org/partslist">https://tutorial.chirimen.org/partslist</a></p>
<p>こちらに掲載がないデバイスについても「〇〇をやりたい」「〇〇できるか気になる」などあればご相談ください</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="27" data-paginate="true" data-style="section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
" lang="ja-JP" data-marpit-pagination="27" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
;" data-marpit-pagination-total="39">
<h2 id="%E5%8F%82%E8%80%83javascript-primer-%E3%81%AE%E7%B4%B9%E4%BB%8B">【参考】JavaScript Primer の紹介</h2>
<blockquote>
<p>これから JavaScript を学びたい人が、ECMAScript 2015 以降をベースにして一から JavaScript を学べる書籍です。<br />
プログラミングをやったことがあるが、今の JavaScript がよくわからないという人が、 今の JavaScript アプリケーションを読み書きできるように書かれています。</p>
</blockquote>
<p><a href="https://jsprimer.net/">JavaScript Primer - 迷わないための入門書 #jsprimer</a></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="28" data-paginate="true" data-style="section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
" lang="ja-JP" data-marpit-pagination="28" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
;" data-marpit-pagination-total="39">
<h2 id="%E8%A4%87%E6%95%B0%E3%81%AE%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9%E3%82%92%E6%89%B1%E3%81%86%E3%83%92%E3%83%B3%E3%83%88">複数のデバイスを扱うヒント</h2>
<ul>
<li>GPIO と I2C を組み合わせる</li>
<li>I2C で複数のデバイスを扱う</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="29" data-paginate="true" data-style="section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
" lang="ja-JP" data-marpit-pagination="29" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
;" data-marpit-pagination-total="39">
<h2 id="gpio-%E3%81%A8-i2c-%E3%82%92%E7%B5%84%E3%81%BF%E5%90%88%E3%82%8F%E3%81%9B%E3%82%8B">GPIO と I2C を組み合わせる</h2>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="30" data-paginate="true" data-footer="配線図省略 - コードをもとに想像して試してみよう！" data-style="section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
" lang="ja-JP" data-marpit-pagination="30" style="--paginate:true;--footer:配線図省略 - コードをもとに想像して試してみよう！;--style:section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
;" data-marpit-pagination-total="39">
<p>一定温度を超えたとき LED を点灯する例</p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-js"><span class="hljs-keyword">import</span> { requestGPIOAccess } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;node-web-gpio&quot;</span>;
<span class="hljs-keyword">import</span> { requestI2CAccess } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;node-web-i2c&quot;</span>;
<span class="hljs-keyword">import</span> <span class="hljs-title class_">SHT30</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@chirimen/sht30&quot;</span>; <span class="hljs-comment">// 温湿度センサー SHT30</span>
<span class="hljs-keyword">const</span> gpioAccess = <span class="hljs-keyword">await</span> <span class="hljs-title function_">requestGPIOAccess</span>();
<span class="hljs-keyword">const</span> gpioPort = gpioAccess.<span class="hljs-property">ports</span>.<span class="hljs-title function_">get</span>(<span class="hljs-number">26</span>);
<span class="hljs-keyword">await</span> gpioPort.<span class="hljs-title function_">export</span>(<span class="hljs-string">&quot;out&quot;</span>);
<span class="hljs-keyword">const</span> i2cAccess = <span class="hljs-keyword">await</span> <span class="hljs-title function_">requestI2CAccess</span>();
<span class="hljs-keyword">const</span> i2cPort = i2cAccess.<span class="hljs-property">ports</span>.<span class="hljs-title function_">get</span>(<span class="hljs-number">1</span>);
<span class="hljs-keyword">const</span> sht30 = <span class="hljs-keyword">new</span> <span class="hljs-title class_">SHT30</span>(i2cPort, <span class="hljs-number">0x44</span>);
<span class="hljs-keyword">await</span> sht30.<span class="hljs-title function_">init</span>();
<span class="hljs-keyword">while</span> (<span class="hljs-literal">true</span>) {
<span class="hljs-keyword">const</span> { temperature } = <span class="hljs-keyword">await</span> sht30.<span class="hljs-title function_">readData</span>();
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">`<span class="hljs-subst">${temperature.toFixed(<span class="hljs-number">2</span>)}</span> ℃`</span>);
<span class="hljs-keyword">if</span> (temperature &gt; <span class="hljs-number">30</span>) {
<span class="hljs-keyword">await</span> gpioPort.<span class="hljs-title function_">write</span>(<span class="hljs-number">1</span>);
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">await</span> gpioPort.<span class="hljs-title function_">write</span>(<span class="hljs-number">0</span>);
}
}
</code></pre>
<footer>配線図省略 - コードをもとに想像して試してみよう！</footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="31" data-paginate="true" data-style="section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
" lang="ja-JP" data-marpit-pagination="31" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
;" data-marpit-pagination-total="39">
<h2 id="i2c-%E3%81%A7%E8%A4%87%E6%95%B0%E3%81%AE%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9%E3%82%92%E6%89%B1%E3%81%86">I2C で複数のデバイスを扱う</h2>
<p>それぞれのデバイスの VCC/GND/SDA/SCL を並列接続<br />
<img src="https://res.cloudinary.com/chirimen/image/fetch/c_limit,f_auto,q_auto,w_1000/https://tutorial.chirimen.org/raspi/imgs/section3/bh1750-and-adt7410.jpg" alt="" style="height:450px;" /><br />
※ 画像にある I2C デバイスはあくまで例です<br />
スレーブアドレスが同じデバイスは同時に接続できません</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="32" data-paginate="true" data-footer="配線図省略 - コードをもとに想像して試してみよう！" data-style="section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
" lang="ja-JP" data-marpit-pagination="32" style="--paginate:true;--footer:配線図省略 - コードをもとに想像して試してみよう！;--style:section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
;" data-marpit-pagination-total="39">
<p>一定温度を超えたとき NeoPixel LED を点灯する例</p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-js"><span class="hljs-keyword">import</span> { requestI2CAccess } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;node-web-i2c&quot;</span>;
<span class="hljs-keyword">import</span> <span class="hljs-title class_">SHT30</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@chirimen/sht30&quot;</span>; <span class="hljs-comment">// 温湿度センサー SHT30</span>
<span class="hljs-keyword">import</span> <span class="hljs-variable constant_">NPIX</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@chirimen/neopixel-i2c&quot;</span>; <span class="hljs-comment">// NeoPixel I2C</span>
<span class="hljs-keyword">const</span> i2cAccess = <span class="hljs-keyword">await</span> <span class="hljs-title function_">requestI2CAccess</span>();
<span class="hljs-keyword">const</span> port = i2cAccess.<span class="hljs-property">ports</span>.<span class="hljs-title function_">get</span>(<span class="hljs-number">1</span>);
<span class="hljs-keyword">const</span> sht30 = <span class="hljs-keyword">new</span> <span class="hljs-title class_">SHT30</span>(port, <span class="hljs-number">0x44</span>);
<span class="hljs-keyword">await</span> sht30.<span class="hljs-title function_">init</span>();
<span class="hljs-keyword">const</span> npix = <span class="hljs-keyword">new</span> <span class="hljs-title function_">NPIX</span>(port, <span class="hljs-number">0x41</span>);
<span class="hljs-keyword">await</span> npix.<span class="hljs-title function_">init</span>(<span class="hljs-number">8</span>);
<span class="hljs-keyword">while</span> (<span class="hljs-literal">true</span>) {
<span class="hljs-keyword">const</span> { temperature } = <span class="hljs-keyword">await</span> sht30.<span class="hljs-title function_">readData</span>();
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">`<span class="hljs-subst">${temperature.toFixed(<span class="hljs-number">2</span>)}</span> ℃`</span>);
<span class="hljs-keyword">if</span> (temperature &gt; <span class="hljs-number">30</span>) {
<span class="hljs-keyword">await</span> npix.<span class="hljs-title function_">setGlobal</span>(<span class="hljs-number">20</span>, <span class="hljs-number">20</span>, <span class="hljs-number">0</span>);
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">await</span> npix.<span class="hljs-title function_">setGlobal</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>);
}
}
</code></pre>
<footer>配線図省略 - コードをもとに想像して試してみよう！</footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="33" data-paginate="true" data-style="section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
" lang="ja-JP" data-marpit-pagination="33" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
;" data-marpit-pagination-total="39">
<h1 id="enjoy-the-iot">Enjoy the IoT!</h1>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="34" data-paginate="true" data-style="section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
" lang="ja-JP" data-marpit-pagination="34" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
;" data-marpit-pagination-total="39">
<h2 id="%E2%9A%A0-raspberry-pi-%E3%81%AE%E3%82%AB%E3%83%A1%E3%83%A9%E3%81%AB%E9%96%A2%E3%81%99%E3%82%8B%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A0%85"><img class="emoji" draggable="false" alt="⚠" src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@14.1.2/assets/svg/26a0.svg" data-marp-twemoji=""/> Raspberry Pi のカメラに関する注意事項</h2>
<ul>
<li>接続端子・フラットケーブルは壊れやすい
<ul>
<li>引っ張らない</li>
<li>折り曲げない</li>
</ul>
</li>
</ul>
<p>カメラ接続確認コマンド:</p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code>$ vcgencmd get_camera
supported=1 detected=1, libcamera interfaces=0
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="35" data-paginate="true" data-style="section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
" lang="ja-JP" data-marpit-pagination="35" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
;" data-marpit-pagination-total="39">
<h2 id="%E2%9A%A0-%E7%89%87%E4%BB%98%E3%81%91%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A0%85"><img class="emoji" draggable="false" alt="⚠" src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@14.1.2/assets/svg/26a0.svg" data-marp-twemoji=""/> 片付け注意事項</h2>
<p>借りた電子部品は返却しましょう</p>
<ul>
<li>Raspberry Pi Zero W</li>
<li>USB ケーブル</li>
<li>各種貸し出しデバイス</li>
</ul>
<p>(詳しくは会場のスタッフが案内します)</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="36" data-paginate="true" data-style="section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
" lang="ja-JP" data-marpit-pagination="36" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
;" data-marpit-pagination-total="39">
<h2 id="%E3%83%8F%E3%83%83%E3%82%AB%E3%82%BD%E3%83%B3%E3%81%AB%E5%90%91%E3%81%91%E3%81%A6">ハッカソンに向けて</h2>
<p>Slack にてお気軽にご相談お寄せください</p>
<p>今回のハンズオンをスタートとして、それぞれの目指す方向に合わせて技術習得を進めていって頂ければ幸いです</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="37" data-paginate="true" data-style="section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
" lang="ja-JP" data-marpit-pagination="37" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
;" data-marpit-pagination-total="39">
<h2 id="%E5%8F%82%E8%80%83%E6%9D%90%E6%96%99%E8%AA%BF%E9%81%94-tips">【参考】材料調達 Tips</h2>
<blockquote>
<p>ネットショップ購入のリードタイムに注意。初動が重要。</p>
</blockquote>
<p><a href="https://gist.github.com/elie-j/8a27e7a65a40371e0cda5754ce0a063d">https://gist.github.com/elie-j/8a27e7a65a40371e0cda5754ce0a063d</a></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="38" data-paginate="true" data-style="section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
" lang="ja-JP" data-marpit-pagination="38" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
;" data-marpit-pagination-total="39">
<h2 id="%E9%81%8E%E5%8E%BB%E3%81%AE%E8%B3%87%E6%96%99">過去の資料</h2>
<ul>
<li><a href="/chirimen-hands-on/2022/tokyo/">2022 年度 東京版</a></li>
<li><a href="/chirimen-hands-on/2022/okayama/">2022 年度 岡山版</a></li>
<li><a href="/chirimen-hands-on/2022/ehime/">2022 年度 愛媛版</a></li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="39" data-paginate="true" data-style="section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
" lang="ja-JP" data-marpit-pagination="39" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
border-bottom: 10px solid #F5CE52;
}
;" data-marpit-pagination-total="39">
<h2 id="%E3%83%95%E3%82%A3%E3%83%BC%E3%83%89%E3%83%90%E3%83%83%E3%82%AF">フィードバック</h2>
<p><a href="https://github.com/kou029w/chirimen-hands-on/edit/main/README.md">このスライドを編集する</a> / <a href="https://github.com/kou029w/chirimen-hands-on/issues/new">問題を報告する</a></p>
<script type="module">
document.querySelectorAll("a").forEach(function (a) {
Object.assign(a, {
target: "_blank",
rel: "noreferrer",
});
});
</script>
</section>
<script>!function(){"use strict";const t={h1:{proto:()=>HTMLHeadingElement,attrs:{role:"heading","aria-level":"1"},style:"display: block; font-size: 2em; margin-block-start: 0.67em; margin-block-end: 0.67em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;"},h2:{proto:()=>HTMLHeadingElement,attrs:{role:"heading","aria-level":"2"},style:"display: block; font-size: 1.5em; margin-block-start: 0.83em; margin-block-end: 0.83em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;"},h3:{proto:()=>HTMLHeadingElement,attrs:{role:"heading","aria-level":"3"},style:"display: block; font-size: 1.17em; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;"},h4:{proto:()=>HTMLHeadingElement,attrs:{role:"heading","aria-level":"4"},style:"display: block; margin-block-start: 1.33em; margin-block-end: 1.33em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;"},h5:{proto:()=>HTMLHeadingElement,attrs:{role:"heading","aria-level":"5"},style:"display: block; font-size: 0.83em; margin-block-start: 1.67em; margin-block-end: 1.67em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;"},h6:{proto:()=>HTMLHeadingElement,attrs:{role:"heading","aria-level":"6"},style:"display: block; font-size: 0.67em; margin-block-start: 2.33em; margin-block-end: 2.33em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;"},span:{proto:()=>HTMLSpanElement},pre:{proto:()=>HTMLElement,style:"display: block; font-family: monospace; white-space: pre; margin: 1em 0; --marp-auto-scaling-white-space: pre;"}},e="data-marp-auto-scaling-wrapper",i="data-marp-auto-scaling-svg",n="data-marp-auto-scaling-container";class s extends HTMLElement{constructor(){super(),this.svgPreserveAspectRatio="xMinYMid meet";const t=t=>([e])=>{const{width:i,height:n}=e.contentRect;this[t]={width:i,height:n},this.updateSVGRect()};this.attachShadow({mode:"open"}),this.containerObserver=new ResizeObserver(t("containerSize")),this.wrapperObserver=new ResizeObserver(((...e)=>{t("wrapperSize")(...e),this.flushSvgDisplay()}))}static get observedAttributes(){return["data-downscale-only"]}connectedCallback(){var t,s,o,r,a;this.shadowRoot.innerHTML=`\n<style>\n svg[${i}] { display: block; width: 100%; height: auto; vertical-align: top; }\n span[${n}] { display: table; white-space: var(--marp-auto-scaling-white-space, nowrap); width: max-content; }\n</style>\n<div ${e}>\n <svg part="svg" ${i}>\n <foreignObject><span ${n}><slot></slot></span></foreignObject>\n </svg>\n</div>\n `.split(/\n\s*/).join(""),this.wrapper=null!==(t=this.shadowRoot.querySelector(`div[${e}]`))&&void 0!==t?t:void 0;const l=this.svg;this.svg=null!==(o=null===(s=this.wrapper)||void 0===s?void 0:s.querySelector(`svg[${i}]`))&&void 0!==o?o:void 0,this.svg!==l&&(this.svgComputedStyle=this.svg?window.getComputedStyle(this.svg):void 0),this.container=null!==(a=null===(r=this.svg)||void 0===r?void 0:r.querySelector(`span[${n}]`))&&void 0!==a?a:void 0,this.observe()}disconnectedCallback(){this.svg=void 0,this.svgComputedStyle=void 0,this.wrapper=void 0,this.container=void 0,this.observe()}attributeChangedCallback(){this.observe()}flushSvgDisplay(){const{svg:t}=this;t&&(t.style.display="inline",requestAnimationFrame((()=>{t.style.display=""})))}observe(){this.containerObserver.disconnect(),this.wrapperObserver.disconnect(),this.wrapper&&this.wrapperObserver.observe(this.wrapper),this.container&&this.containerObserver.observe(this.container),this.svgComputedStyle&&this.observeSVGStyle(this.svgComputedStyle)}observeSVGStyle(t){const e=()=>{const i=(()=>{const e=t.getPropertyValue("--preserve-aspect-ratio");if(e)return e.trim();return`x${(({textAlign:t,direction:e})=>{if(t.endsWith("left"))return"Min";if(t.endsWith("right"))return"Max";if("start"===t||"end"===t){let i="rtl"===e;return"end"===t&&(i=!i),i?"Max":"Min"}return"Mid"})(t)}YMid meet`})();i!==this.svgPreserveAspectRatio&&(this.svgPreserveAspectRatio=i,this.updateSVGRect()),t===this.svgComputedStyle&&requestAnimationFrame(e)};e()
</script></foreignObject></svg></div><div class="bespoke-marp-note" data-index="3" tabindex="0"><p>NOTE: 10-20年前は難しいプログラミングが必要でしたが、今はJavaScriptから簡単に作れるようになりました。</p><p>NOTE: 具体的にはWeb GPIO APIやWeb I2C APIと呼ばれるオープンな仕様に支えられているオープンソースソフトウェアです。</p></div><div class="bespoke-marp-note" data-index="4" tabindex="0"><p>NOTE: CHIRIMENを使い、アイディアを凝らしてさまざまな作品を作っています。</p></div><div class="bespoke-marp-note" data-index="23" tabindex="0"><p>NOTE: 昨日・今日と技術的な話を中心にやってきましたが、極端な話ハッカソンの本番は、技術的に優れているかどうかは一旦忘れてもらってOK、コピペでOK、人の真似でOK
ですが限られた時間しかないので、これからの時間で、やりたいことを周りのスタッフに相談したり、Slackで相談してみてください</p></div><div class="bespoke-marp-note" data-index="31" tabindex="0"><p>---
## I2C で複数のデバイスを扱う - 距離センサーと NeoPixel の例
指定の距離を下回ると NeoPixel LED を点灯する例:
```js
import { requestI2CAccess } from &quot;node-web-i2c&quot;;
import VL53L0X from &quot;@chirimen/vl53l0x&quot;;
import NPIX from &quot;@chirimen/neopixel-i2c&quot;;
const i2cAccess = await requestI2CAccess();
const port = i2cAccess.ports.get(1);
const vl53l0x = new VL53L0X(port, 0x29);
await vl53l0x.init();
const npix = new NPIX(port, 0x41);
await npix.init(8);
while (true) {
const distance = await vl53l0x.getRange();
console.log(`${distance} mm`);
if (distance &lt; 100) {
await npix.setGlobal(100, 100, 100);
} else {
await npix.setGlobal(0, 0, 0);
}
}
```</p></div><script>/*!! License: https://unpkg.com/@marp-team/marp-cli@3.4.0/lib/bespoke.js.LICENSE.txt */
!function(){"use strict";function e(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var t={from:function(e,t){var n,r=1===(e.parent||e).nodeType?e.parent||e:document.querySelector(e.parent||e),o=[].filter.call("string"==typeof e.slides?r.querySelectorAll(e.slides):e.slides||r.children,(function(e){return"SCRIPT"!==e.nodeName})),i={},a=function(e,t){return(t=t||{}).index=o.indexOf(e),t.slide=e,t},s=function(e,t){i[e]=(i[e]||[]).filter((function(e){return e!==t}))},l=function(e,t){return(i[e]||[]).reduce((function(e,n){return e&&!1!==n(t)}),!0)},c=function(e,t){o[e]&&(n&&l("deactivate",a(n,t)),n=o[e],l("activate",a(n,t)))},d=function(e,t){var r=o.indexOf(n)+e;l(e>0?"next":"prev",a(n,t))&&c(r,t)},u={off:s,on:function(e,t){return(i[e]||(i[e]=[])).push(t),s.bind(null,e,t)},fire:l,slide:function(e,t){if(!arguments.length)return o.indexOf(n);l("slide",a(o[e],t))&&c(e,t)},next:d.bind(null,1),prev:d.bind(null,-1),parent:r,slides:o,destroy:function(e){l("destroy",a(n,e)),i={}}};return(t||[]).forEach((function(e){e(u)})),n||c(0),u}},n=e(t);const r=document.body,o=(...e)=>history.replaceState(...e),i="presenter",a="next",s=["",i,a],l="bespoke-marp-",c=`data-${l}`,d=(e,{protocol:t,host:n,pathname:r,hash:o}=location)=>{const i=e.toString();return`${t}//${n}${r}${i?"?":""}${i}${o}`},u=()=>r.dataset.bespokeView,f=e=>new URLSearchParams(location.search).get(e),m=(e,t={})=>{var n;const r={location,setter:o,...t},i=new URLSearchParams(r.location.search);for(const t of Object.keys(e)){const n=e[t];"string"==typeof n?i.set(t,n):i.delete(t)}try{r.setter({...null!==(n=window.history.state)&&void 0!==n?n:{}},"",d(i,r.location))}catch(e){console.error(e)}},g=(()=>{const e="bespoke-marp";try{return localStorage.setItem(e,e),localStorage.removeItem(e),!0}catch(e){return!1}})(),p=e=>{try{return localStorage.getItem(e)}catch(e){return null}},v=(e,t)=>{try{return localStorage.setItem(e,t),!0}catch(e){return!1}},h=e=>{try{return localStorage.removeItem(e),!0}catch(e){return!1}},y=(e,t)=>{const n="aria-hidden";t?e.setAttribute(n,"true"):e.removeAttribute(n)},b=e=>{e.parent.classList.add(`${l}parent`),e.slides.forEach((e=>e.classList.add(`${l}slide`))),e.on("activate",(t=>{const n=`${l}active`,r=t.slide,o=r.classList,i=!o.contains(n);if(e.slides.forEach((e=>{e.classList.remove(n),y(e,!0)})),o.add(n),y(r,!1),i){const e=`${n}-ready`;o.add(e),document.body.clientHeight,o.remove(e)}}))},w=e=>{let t=0,n=0;Object.defineProperty(e,"fragments",{enumerable:!0,value:e.slides.map((e=>[null,...e.querySelectorAll("[data-marpit-fragment]")]))});const r=r=>void 0!==e.fragments[t][n+r],o=(r,o)=>{t=r,n=o,e.fragments.forEach(((e,t)=>{e.forEach(((e,n)=>{if(null==e)return;const i=t<r||t===r&&n<=o;e.setAttribute(`${c}fragment`,(i?"":"in")+"active");const a=`${c}current-fragment`;t===r&&n===o?e.setAttribute(a,"current"):e.removeAttribute(a)}))})),e.fragmentIndex=o;const i={slide:e.slides[r],index:r,fragments:e.fragments[r],fragmentIndex:o};e.fire("fragment",i)};e.on("next",(({fragment:i=!0})=>{if(i){if(r(1))return o(t,n+1),!1;const i=t+1;e.fragments[i]&&o(i,0)}else{const r=e.fragments[t].length;if(n+1<r)return o(t,r-1),!1;const i=e.fragments[t+1];i&&o(t+1,i.length-1)}})),e.on("prev",(({fragment:i=!0})=>{if(r(-1)&&i)return o(t,n-1),!1;const a=t-1;e.fragments[a]&&o(a,e.fragments[a].length-1)})),e.on("slide",(({index:t,fragment:n})=>{let r=0;if(void 0!==n){const o=e.fragments[t];if(o){const{length:e}=o;r=-1===n?e-1:Math.min(Math.max(n,0),e-1)}}o(t,r)})),o(0,0)},x=document,k=()=>!(!x.fullscreenEnabled&&!x.webkitFullscreenEnabled),$=()=>!(!x.fullscreenElement&&!x.webkitFullscreenElement),E=e=>{e.fullscreen=()=>{k()&&(async()=>{return $()?null===(e=x.exitFullscreen||x.webkitExitFullscreen)||void 0===e?void 0:e.call(x):((e=x.body)=>{var t;return null===(t=e.requestFullscreen||e.webkitRequestFullscreen)||void 0===t?void 0:t.call(e)})();var e})()},document.addEventListener("keydown",(t=>{"f"!==t.key&&"F11"!==t.key||t.altKey||t.ctrlKey||t.metaKey||!k()||(e.fullscreen(),t.preventDefault())}))},L=`${l}inactive`,S=(e=2e3)=>({parent:t,fire:n})=>{c
Reference in a new issue Copy permalink