mirror of
https://github.com/kou029w/chirimen-hands-on.git
synced 2025-01-18 16:08:13 +00:00
483 lines
116 KiB
HTML
483 lines
116 KiB
HTML
|
<!DOCTYPE html><html lang="C"><head><title>CHIRIMEN ハンズオン</title><meta property="og:title" content="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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj
|
|||
|
|
* 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{--color-prettylights-syntax-comment:#6e7781;--color-prettylights-syntax-constant:#0550ae;--color-prettylights-syntax-entity:#8250df;--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:#24292f;--color-fg-muted:#57606a;--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:#cf222e;color-scheme:light}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:#c9d1d9;--color-fg-muted:#8b949e;--color-fg-subtle:#484f58;--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:#58a6ff;--color-accent-emphasis:#1f6feb;--color-attention-subtle:rgba(187,128,9,.15);--color-danger-fg:#f85149;color-scheme:dark}div#p>svg>foreignObject>section{-ms-text-size-adjust:100%;-webkit-text
|
|||
|
|
/* 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 sup>a:before{content:"["}div#p>svg>foreignObject>section sup>a:after{content:"]"}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 ol.no-list,div#p>svg>foreignObject>section ul.no-list{list-style-type:none;padding:0}div#p>svg>foreignObject>section ol[type="1"]{list-style-type:decimal}div#p>svg>foreignObject>section ol[type=a]{list-style-type:lower-alpha}div#p>svg>foreignObject>section ol[type=i]{list-style-type:lower-roman}div#p>svg>foreignObject>section div>ol:not([type]){list-style-type:decimal}div#p>svg>foreignObject>section ol ol,div#p>svg>foreignObject>section ol ul,div#p>svg>foreignObject>section ul ol,div#p>svg>foreignObject>section ul ul{margin-bottom:0;margin-top:0}div#p>svg>foreignObject>section li>p{margin-top:16px}div#p>svg>foreignObject>section li+li{margin-top:.25em}div#p>svg>foreignObject>section dl{padding:0}div#p>svg>foreignObject>section dl dt{font-size:1em;font-style:italic;font-weight:600;margin-top:16px;padding:0}div#p>svg>foreignObject>section dl dd{margin-bottom:16px;padding:0 16px}div#p>svg>foreignObject>section table th{font-weight:600}div#p>svg>foreignObject>s
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
" data-marpit-pagination="1" data-marpit-pagination-total="35" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
;">
|
|||
|
|
<h1>1 日目</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;
|
|||
|
|
}
|
|||
|
|
" data-marpit-pagination="2" data-marpit-pagination-total="35" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://webiotmakers.github.io/static/images/2022/template/ogp.jpg");"></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;
|
|||
|
|
}
|
|||
|
|
" data-marpit-pagination="2" data-marpit-pagination-total="35" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
;" 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;
|
|||
|
|
}
|
|||
|
|
" data-marpit-pagination="2" data-marpit-pagination-total="35" style="" 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;
|
|||
|
|
}
|
|||
|
|
" data-marpit-pagination="3" data-marpit-pagination-total="35" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
;">
|
|||
|
|
<h1>CHIRIMEN ハンズオン</h1>
|
|||
|
|
<p>2022-10-08/2022-10-09 in 岡山</p>
|
|||
|
|
<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;
|
|||
|
|
}
|
|||
|
|
" data-marpit-pagination="4" data-marpit-pagination-total="35" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
;">
|
|||
|
|
<h2>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>Web ブラウザーからハードウェアを制御するプロトタイピング環境<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;
|
|||
|
|
}
|
|||
|
|
" data-marpit-pagination="5" data-marpit-pagination-total="35" 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;
|
|||
|
|
}
|
|||
|
|
;">
|
|||
|
|
<h2>作品例</h2>
|
|||
|
|
<p><img src="./assets/webiotmakers-gallery.dio.png" alt="" style="height:550px;" /></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;
|
|||
|
|
}
|
|||
|
|
" data-marpit-pagination="6" data-marpit-pagination-total="35" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
;">
|
|||
|
|
<h2>本日の流れ</h2>
|
|||
|
|
<p>準備編 (11:20-12:00)</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>セットアップ</li>
|
|||
|
|
</ul>
|
|||
|
|
<p>基礎編 (13:00-17:00)</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>L チカしてみよう</li>
|
|||
|
|
<li>GitHub アカウントの登録</li>
|
|||
|
|
<li>GPIO に関する基礎知識</li>
|
|||
|
|
<li>I2C に関する基礎知識</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;
|
|||
|
|
}
|
|||
|
|
" data-marpit-pagination="7" data-marpit-pagination-total="35" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
;">
|
|||
|
|
<h2>本日のゴール</h2>
|
|||
|
|
<p>基礎編</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>センサーやモーターの基本的な使い方を理解する</li>
|
|||
|
|
</ul>
|
|||
|
|
</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;
|
|||
|
|
}
|
|||
|
|
" data-marpit-pagination="8" data-marpit-pagination-total="35" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
;">
|
|||
|
|
<h2>Slack にアクセス (まだの方)</h2>
|
|||
|
|
<p><a href="https://webiotmakerschallenge.slack.com">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;
|
|||
|
|
}
|
|||
|
|
" data-marpit-pagination="9" data-marpit-pagination-total="35" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
;">
|
|||
|
|
<h2>ハンズオン資料</h2>
|
|||
|
|
<p><a href="https://tutorial.chirimen.org/raspi/">tutorial.chirimen.org/raspi</a><br />
|
|||
|
|
または<br />
|
|||
|
|
「chirimen チュートリアル」で検索</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;
|
|||
|
|
}
|
|||
|
|
" data-marpit-pagination="10" data-marpit-pagination-total="35" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
;">
|
|||
|
|
<h2>困ったとき・分からないとき・気になることがあるとき</h2>
|
|||
|
|
<p>会場のスタッフにお気軽にお声がけください <img class="emoji" draggable="false" alt="🖐" src="https://twemoji.maxcdn.com/v/14.0.2/svg/1f590.svg" data-marp-twemoji=""/><br />
|
|||
|
|
(Slack でも OK <img class="emoji" draggable="false" alt="👌" src="https://twemoji.maxcdn.com/v/14.0.2/svg/1f44c.svg" data-marp-twemoji=""/>)</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/raspi/section0#section-1" data-style="section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
" data-marpit-pagination="11" data-marpit-pagination-total="35" style="--paginate:true;--footer:https://tutorial.chirimen.org/raspi/section0#section-1;--style:section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
;">
|
|||
|
|
<h2>機材の確認</h2>
|
|||
|
|
<p>必要なもの</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>クリアボックス
|
|||
|
|
<ul>
|
|||
|
|
<li>ディスプレイ/HDMI ケーブル/変換アダプター/AC アダプター (Type-C)</li>
|
|||
|
|
<li>AC アダプター付き電源タップ/Type-C ケーブル</li>
|
|||
|
|
<li>Raspberry Pi 本体/ヒートシンク</li>
|
|||
|
|
<li>有線マウス</li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li>キーボード</li>
|
|||
|
|
<li>CHIRIMEN スターターキット
|
|||
|
|
<ul>
|
|||
|
|
<li>microSD カード</li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
<p>(必要なもの以外はクリアボックスに片付けておきましょう)</p>
|
|||
|
|
<footer><a href="https://tutorial.chirimen.org/raspi/section0#section-1">https://tutorial.chirimen.org/raspi/section0#section-1</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="画像の引用元: Get started with your OKdo Pi Kit in a flash - OKdo https://www.okdo.com/getstarted/" data-style="section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
" data-marpit-pagination="12" data-marpit-pagination-total="35" style="--paginate:true;--footer:画像の引用元: Get started with your OKdo Pi Kit in a flash - OKdo https://www.okdo.com/getstarted/;--style:section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
;">
|
|||
|
|
<h2>ヒートシンクの取り付け</h2>
|
|||
|
|
<blockquote>
|
|||
|
|
<p><img src="https://www.okdo.com/wp-content/uploads/2019/10/1-mount-heatsinks.jpg" alt="" /></p>
|
|||
|
|
</blockquote>
|
|||
|
|
<footer>画像の引用元: Get started with your OKdo Pi Kit in a flash - OKdo <a href="https://www.okdo.com/getstarted/">https://www.okdo.com/getstarted/</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-footer="https://tutorial.chirimen.org/raspi/section0#chirimen-for-raspberry-pi--1" data-style="section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
" data-marpit-pagination="13" data-marpit-pagination-total="35" style="--paginate:true;--footer:https://tutorial.chirimen.org/raspi/section0#chirimen-for-raspberry-pi--1;--style:section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
;">
|
|||
|
|
<h2>Raspberry Pi の起動</h2>
|
|||
|
|
<p><img src="./assets/setup-raspi.jpg" alt="" style="height:600px;" /></p>
|
|||
|
|
<footer><a href="https://tutorial.chirimen.org/raspi/section0#chirimen-for-raspberry-pi--1">https://tutorial.chirimen.org/raspi/section0#chirimen-for-raspberry-pi--1</a></footer>
|
|||
|
|
</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/raspi/section0#wifi-" data-style="section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
" data-marpit-pagination="14" data-marpit-pagination-total="35" style="--paginate:true;--footer:https://tutorial.chirimen.org/raspi/section0#wifi-;--style:section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
;">
|
|||
|
|
<h2>Wi-Fi の設定</h2>
|
|||
|
|
<p>Raspberry Pi の起動後、画面右上のパネルをクリックして設定を行います</p>
|
|||
|
|
<p><img src="./assets/setup-wifi.png" alt="" /></p>
|
|||
|
|
<p>(接続情報は会場で確認しましょう)</p>
|
|||
|
|
<footer><a href="https://tutorial.chirimen.org/raspi/section0#wifi-">https://tutorial.chirimen.org/raspi/section0#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/raspi/section0#section-7" data-style="section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
" data-marpit-pagination="15" data-marpit-pagination-total="35" style="--paginate:true;--footer:https://tutorial.chirimen.org/raspi/section0#section-7;--style:section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
;">
|
|||
|
|
<h2>ブレッドボードでの配線</h2>
|
|||
|
|
<p><img src="./assets/led-blink.dio.png" alt="" style="height:600px;" /></p>
|
|||
|
|
<footer><a href="https://tutorial.chirimen.org/raspi/section0#section-7">https://tutorial.chirimen.org/raspi/section0#section-7</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-footer="CHIRIMEN Examples https://chirimen.org/chirimen/gc/top/examples/" data-style="section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
" data-marpit-pagination="16" data-marpit-pagination-total="35" style="--paginate:true;--footer:CHIRIMEN Examples https://chirimen.org/chirimen/gc/top/examples/;--style:section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
;">
|
|||
|
|
<h2>サンプルコードの実行</h2>
|
|||
|
|
<p>ブラウザー > Examples > GPIO Examples > GPIO-Blink > CSB (CodeSandbox)</p>
|
|||
|
|
<p><img src="./assets/link-to-led-blink-csb.jpg" alt="" style="height:480px;" /></p>
|
|||
|
|
<footer>CHIRIMEN Examples <a href="https://chirimen.org/chirimen/gc/top/examples/">https://chirimen.org/chirimen/gc/top/examples/</a></footer>
|
|||
|
|
</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;
|
|||
|
|
}
|
|||
|
|
" data-marpit-pagination="17" data-marpit-pagination-total="35" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
;">
|
|||
|
|
<h2>ここまでのまとめ</h2>
|
|||
|
|
<ul>
|
|||
|
|
<li>CHIRIMEN for Raspberry Pi の起動</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="18" data-paginate="true" data-style="section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
" data-marpit-pagination="18" data-marpit-pagination-total="35" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
;">
|
|||
|
|
<h2>GitHub アカウントの登録</h2>
|
|||
|
|
</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;
|
|||
|
|
}
|
|||
|
|
" data-marpit-pagination="19" data-marpit-pagination-total="35" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
;">
|
|||
|
|
<h2>GitHub アカウントの登録</h2>
|
|||
|
|
<p><a href="https://github.com/signup">GitHub > Sign up</a> からアカウントを作成します<br />
|
|||
|
|
アカウントに必要な項目を入力します</p>
|
|||
|
|
<p><img src="./assets/signup-github.png" alt="" style="height:480px;" /></p>
|
|||
|
|
</section>
|
|||
|
|
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="20" data-paginate="true" data-footer="Join GitHub https://github.com/signup" data-style="section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
" data-marpit-pagination="20" data-marpit-pagination-total="35" style="--paginate:true;--footer:Join GitHub https://github.com/signup;--style:section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
;">
|
|||
|
|
<h2>GitHub アカウントの登録</h2>
|
|||
|
|
<p><img src="./assets/signup-github-verify.png" alt="" style="height:480px;" /></p>
|
|||
|
|
<footer>Join GitHub <a href="https://github.com/signup">https://github.com/signup</a></footer>
|
|||
|
|
</section>
|
|||
|
|
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="21" data-paginate="true" data-footer="Join GitHub https://github.com/signup" data-style="section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
" data-marpit-pagination="21" data-marpit-pagination-total="35" style="--paginate:true;--footer:Join GitHub https://github.com/signup;--style:section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
;">
|
|||
|
|
<h2>GitHub アカウントの登録</h2>
|
|||
|
|
<p>入力したメールアドレスに登録用のメールが届くので確認します</p>
|
|||
|
|
<p><img src="./assets/signup-github-verify-code.png" alt="" style="height:480px;" /></p>
|
|||
|
|
<footer>Join GitHub <a href="https://github.com/signup">https://github.com/signup</a></footer>
|
|||
|
|
</section>
|
|||
|
|
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="22" data-paginate="true" data-footer="GitHub https://github.com/" data-style="section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
" data-marpit-pagination="22" data-marpit-pagination-total="35" style="--paginate:true;--footer:GitHub https://github.com/;--style:section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
;">
|
|||
|
|
<h2>GitHub アカウントの登録</h2>
|
|||
|
|
<p>次のような画面になれば OK</p>
|
|||
|
|
<p><img src="./assets/github.png" alt="" style="height:480px;" /></p>
|
|||
|
|
<footer>GitHub <a href="https://github.com/">https://github.com/</a></footer>
|
|||
|
|
</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;
|
|||
|
|
}
|
|||
|
|
" data-marpit-pagination="23" data-marpit-pagination-total="35" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
;">
|
|||
|
|
<h2>CodeSandbox の使い方</h2>
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="https://csb-jp.github.io/docs/usage">CodeSandbox の基本的な使い方</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</section>
|
|||
|
|
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="24" data-paginate="true" data-style="section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
" data-marpit-pagination="24" data-marpit-pagination-total="35" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
;">
|
|||
|
|
<h2>後付</h2>
|
|||
|
|
</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;
|
|||
|
|
}
|
|||
|
|
" data-marpit-pagination="25" data-marpit-pagination-total="35" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
;">
|
|||
|
|
<h2>その他</h2>
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="https://tutorial.chirimen.org/raspi/debug">デバッグ・トラブルシューティング</a></li>
|
|||
|
|
<li><a href="https://tutorial.chirimen.org/raspi/tips">Tips・テクニック</a></li>
|
|||
|
|
<li><a href="https://tutorial.chirimen.org/raspi/faq">良くある質問と回答</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</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;
|
|||
|
|
}
|
|||
|
|
" data-marpit-pagination="26" data-marpit-pagination-total="35" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
;">
|
|||
|
|
<h1>2 日目</h1>
|
|||
|
|
</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;
|
|||
|
|
}
|
|||
|
|
" data-marpit-pagination="27" data-marpit-pagination-total="35" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
;">
|
|||
|
|
<h2>いろいろなデバイスを触ってみよう</h2>
|
|||
|
|
<p>自分の席に着き次第、自由に進めてもらって OK <img class="emoji" draggable="false" alt="👌" src="https://twemoji.maxcdn.com/v/14.0.2/svg/1f44c.svg" data-marp-twemoji=""/></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;
|
|||
|
|
}
|
|||
|
|
" data-marpit-pagination="28" data-marpit-pagination-total="35" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
;">
|
|||
|
|
<h2>本日の流れ</h2>
|
|||
|
|
<p>ハンズオン講習会</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>10:00-10:10 はじめに</li>
|
|||
|
|
<li>11:30-12:00 片付け</li>
|
|||
|
|
</ul>
|
|||
|
|
<p>アイディアワークショップ</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>13:00-13:30 インプットトーク</li>
|
|||
|
|
<li>13:30-16:00 各チームの作戦会議</li>
|
|||
|
|
<li>16:00-16:20 各チームの進捗共有</li>
|
|||
|
|
<li>16:30-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;
|
|||
|
|
}
|
|||
|
|
" data-marpit-pagination="29" data-marpit-pagination-total="35" 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-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("./assets/webiotmakers-gallery.dio.png");background-size:800px auto;"></figure></div></section></foreignObject><foreignObject width="52%" height="720"><section id="29" 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;
|
|||
|
|
}
|
|||
|
|
" data-marpit-pagination="29" data-marpit-pagination-total="35" 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-advanced-background="content" data-marpit-advanced-background-split="right">
|
|||
|
|
<h2>ハッカソンのポイント</h2>
|
|||
|
|
<ul>
|
|||
|
|
<li>ときめくような素敵なアイディア</li>
|
|||
|
|
<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;
|
|||
|
|
}
|
|||
|
|
" data-marpit-pagination="29" data-marpit-pagination-total="35" style="" 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="30" data-paginate="true" data-style="section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
" data-marpit-pagination="30" data-marpit-pagination-total="35" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
;">
|
|||
|
|
<h2>応用編</h2>
|
|||
|
|
<ul>
|
|||
|
|
<li>I2C で複数のデバイス扱う</li>
|
|||
|
|
<li>遠隔制御</li>
|
|||
|
|
</ul>
|
|||
|
|
</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;
|
|||
|
|
}
|
|||
|
|
" data-marpit-pagination="31" data-marpit-pagination-total="35" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
;">
|
|||
|
|
<h2>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 />
|
|||
|
|
スレーブアドレスが同じデバイスは同時に接続できません<br />
|
|||
|
|
<a href="https://tutorial.chirimen.org/raspi/section3#section-7">https://tutorial.chirimen.org/raspi/section3#section-7</a></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-style="section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
" data-marpit-pagination="32" data-marpit-pagination-total="35" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
;">
|
|||
|
|
<h2>I2C で複数のデバイス扱う - 温湿度センサーと距離センサーの例</h2>
|
|||
|
|
<iframe src="https://codesandbox.io/embed/sht30-vl53l0x-pz620y?autoresize=1&codemirror=1&fontsize=14&hidenavigation=1&theme=dark"
|
|||
|
|
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
|
|||
|
|
title="sht30-vl53l0x"
|
|||
|
|
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
|
|||
|
|
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
|||
|
|
></iframe>
|
|||
|
|
</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;
|
|||
|
|
}
|
|||
|
|
" data-marpit-pagination="33" data-marpit-pagination-total="35" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
;">
|
|||
|
|
<h2>遠隔制御</h2>
|
|||
|
|
<p>ブラウザー > Examples > Remote Examples > REMOTE-I2C-SHT30 > CSB</p>
|
|||
|
|
<p><a href="https://codesandbox.io/s/github/chirimen-oh/chirimen/tree/master/gc/contrib/examples/remote-i2c-SHT30"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="" /></a></p>
|
|||
|
|
<ul>
|
|||
|
|
<li><code>relay.subscribe("{ここは書き換えて使用してください}")</code></li>
|
|||
|
|
</ul>
|
|||
|
|
</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;
|
|||
|
|
}
|
|||
|
|
" data-marpit-pagination="34" data-marpit-pagination-total="35" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
;">
|
|||
|
|
<h2><img class="emoji" draggable="false" alt="⚠" src="https://twemoji.maxcdn.com/v/14.0.2/svg/26a0.svg" data-marp-twemoji=""/> 片付け注意事項</h2>
|
|||
|
|
<ol>
|
|||
|
|
<li>借りたセンサーをすべて返却します</li>
|
|||
|
|
<li>Raspberry Pi の電源を切ります</li>
|
|||
|
|
<li>microSD カードは必ず抜き取り、CHIRIMEN スターターキットを片付けます</li>
|
|||
|
|
<li>クリアボックスを片付けます
|
|||
|
|
<ul>
|
|||
|
|
<li>できるだけ元の状態に戻してください</li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
</ol>
|
|||
|
|
<p>(詳しくは会場のスタッフが案内します)</p>
|
|||
|
|
</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;
|
|||
|
|
}
|
|||
|
|
" data-marpit-pagination="35" data-marpit-pagination-total="35" style="--paginate:true;--style:section :is(h1, h2, h3, h4, h5, h6) {
|
|||
|
|
border-bottom: 10px solid #F5CE52;
|
|||
|
|
}
|
|||
|
|
;">
|
|||
|
|
<h2>ハッカソンに向けて</h2>
|
|||
|
|
<p>リードタイムに注意 特に海外からの発送は時間がかかるので余裕を持って<br />
|
|||
|
|
品薄なものもあるので早めに調達を<br />
|
|||
|
|
<a href="https://gist.github.com/elie-j/8a27e7a65a40371e0cda5754ce0a063d">https://gist.github.com/elie-j/8a27e7a65a40371e0cda5754ce0a063d</a></p>
|
|||
|
|
</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="28" tabindex="0"><p>NOTE: 昨日・今日と技術的な話を中心にやってきましたが、極端な話ハッカソンの本番は、技術的に優れているかどうかは一旦忘れてもらってOK、コピペでOK、人の真似でOK
|
|||
|
|
ですが限られた時間しかないので、これからの時間で、やりたいことを周りのスタッフに相談したり、Slackで相談してみてください</p></div><script>/*!! License: https://unpkg.com/@marp-team/marp-cli@2.2.0/lib/bespoke.js.LICENSE.txt */
|
|||
|
|
!function(){"use strict";"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;const e=document.body,t=(...e)=>history.replaceState(...e),n="presenter",r="next",o=["",n,r],a="data-bespoke-marp-",i=(e,{protocol:t,host:n,pathname:r,hash:o}=location)=>{const a=e.toString();return`${t}//${n}${r}${a?"?":""}${a}${o}`},s=()=>e.dataset.bespokeView,l=e=>new URLSearchParams(location.search).get(e),c=(e,n={})=>{var r;const o={location,setter:t,...n},a=new URLSearchParams(o.location.search);for(const t of Object.keys(e)){const n=e[t];"string"==typeof n?a.set(t,n):a.delete(t)}try{o.setter({...null!==(r=window.history.state)&&void 0!==r?r:{}},"",i(a,o.location))}catch(e){console.error(e)}},d=(()=>{const e="bespoke-marp";try{return localStorage.setItem(e,e),localStorage.removeItem(e),!0}catch(e){return!1}})(),u=e=>{try{return localStorage.getItem(e)}catch(e){return null}},f=(e,t)=>{try{return localStorage.setItem(e,t),!0}catch(e){return!1}},m=e=>{try{return localStorage.removeItem(e),!0}catch(e){return!1}},g=(e,t)=>{const n="aria-hidden";t?e.setAttribute(n,"true"):e.removeAttribute(n)},p=e=>{e.parent.classList.add("bespoke-marp-parent"),e.slides.forEach((e=>e.classList.add("bespoke-marp-slide"))),e.on("activate",(t=>{const n="bespoke-marp-active",r=t.slide,o=r.classList,a=!o.contains(n);if(e.slides.forEach((e=>{e.classList.remove(n),g(e,!0)})),o.add(n),g(r,!1),a){const e=`${n}-ready`;o.add(e),document.body.clientHeight,o.remove(e)}}))},v=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(`${a}fragment`,(i?"":"in")+"active");const s=`${a}current-fragment`;t===r&&n===o?e.setAttribute(s,"current"):e.removeAttribute(s)}))})),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:a=!0})=>{if(a){if(r(1))return o(t,n+1),!1;const a=t+1;e.fragments[a]&&o(a,0)}else{const r=e.fragments[t].length;if(n+1<r)return o(t,r-1),!1;const a=e.fragments[t+1];a&&o(t+1,a.length-1)}})),e.on("prev",(({fragment:a=!0})=>{if(r(-1)&&a)return o(t,n-1),!1;const i=t-1;e.fragments[i]&&o(i,e.fragments[i].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)},h=document,y=()=>!(!h.fullscreenEnabled&&!h.webkitFullscreenEnabled),b=()=>!(!h.fullscreenElement&&!h.webkitFullscreenElement),w=e=>{e.fullscreen=()=>{y()&&(async()=>{return b()?null===(e=h.exitFullscreen||h.webkitExitFullscreen)||void 0===e?void 0:e.call(h):((e=h.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||!y()||(e.fullscreen(),t.preventDefault())}))},x="bespoke-marp-inactive",k=(e=2e3)=>({parent:t,fire:n})=>{const r=t.classList,o=e=>n(`marp-${e?"":"in"}active`);let a;const i=()=>{a&&clearTimeout(a),a=setTimeout((()=>{r.add(x),o()}),e),r.contains(x)&&(r.remove(x),o(!0))};for(const e of["mousedown","mousemove","touchend"])document.addEventListener(e,i);setTimeout(i,0)},E=["AUDIO","BUTTON","INPUT","SELECT","TEXTAREA","VIDEO"],$=e=>{e.parent.addEventListener("keydown",(e=>{if(!e.target)return;const t=e.target;(E.includes(t.nodeName)||"true"===t.contentEditable)&&e.stopPropagation()}))},L=e=>{window.addEventListener("load",(()=>{for(const t of e.slides){const e=t.querySelector("marp-auto-scaling, [data-auto-scaling], [data-marp-fitting]");t.setAttribute(`${a}load`,e?"":"hideable")}}))},S=({interval:e=250}={})=>t=>{document.addEventListener("keydown",(e=>{if(" "===e.key&&e.shiftKey)t.prev();else if("ArrowLeft"===e.key||"ArrowUp"===e.key||"PageUp"===e.key)t.prev({fragment:!e.shiftKey});else i
|