未踏ジュニア on Jekyll - 小中高生クリエータ支援プログラムを支える技術

🆕 動画版も公開! → https://youtu.be/YT9NwUEvt6U
📜 お知らせ記事 → https://note.com/yasslab/n/nf5837dabdf8c

銀座Rails#39で発表したスライド資料です。
https://ginza-rails.connpass.com/event/229348/

未踏ジュニア - Web https://jr.mitou.org/
未踏ジュニア - GitHub https://github.com/mitou/jr.mitou.org
未踏ジュニア - Twitter https://twitter.com/MitouJr

※ 各画像およびスクリーンショットの著作権は、その保有者に属します。

【Q. 未踏ジュニアとは？】
未踏ジュニアは独創的なアイデアを持つ17歳以下のクリエータに対し、メンターや専門家による指導、最大50万円の開発資金や開発場所・機材を提供し、ソフトウェア・ハードウェアの開発を約５か月間にわたって支援するプログラムです。

⛰ 未踏ジュニア - 夢をカタチにしよう https://jr.mitou.org/
🔰 未踏ジュニアとは? - YouTube 動画 https://youtu.be/1KNkEAh9AK4

詳しくは以下の動画再生リストをぜひ！

🗣 成果報告会まとめ https://www.youtube.com/c/mitoujr/playlists?view=50&sort=dd&shelf_id=6
📑 応募者向けまとめ https://youtube.com/playlist?list=PLNObH2jlC6lc3c-gRpILyQrMhlqBIRjKr
🎤 未踏インタビュー https://www.youtube.com/playlist?list=PLNObH2jlC6leiUTypiJYO2zUcwBg7M0Bg

【未踏ジュニア公式アカウント】
最新情報はWebサイトやTwitter/Facebookで公開しています。よければぜひチェックしてみてください。

Web: https://jr.mitou.org/
Twitter: https://twitter.com/mitoujr
Facebook: https://facebook.com/mitoujr

ハッシュタグ『#未踏ジュニア』
https://twitter.com/hashtag/%E6%9C%AA%E8%B8%8F%E3%82%B8%E3%83%A5%E3%83%8B%E3%82%A2

Transcript

1. 未踏ジュニア on Jekyll U-17 小中高生クリエータ支援プログラムを支える技術 Po w er ed by R ub y
2. ちょっとした Web サイトを 作ろうかな。
3. でも複雑な機能は (認証とかDBとか) 必要ないのよねぇ
4. そんなときに!! Jekyll on GitHub （Ruby) のススメ
6. なぜ、今、Jekyll？ 1. Jekyll × Pages = 安全 2. Ruby × Actions = 自由 3. YAML × GitHub = 連携
7. Pages = 静的サイト特化
8. なるべく手軽で、安全に
9. Actions で制限を突破 約70ページを自動生成
10. Actions で制限を突破 約70ページを自動生成 ページをどんどん投稿！
11. 誰でも更新できる仕組み
12. 誰でも更新できる仕組み
13. Jekyll + GitHub の Webサイト制作例
14. Remote in Japan ー remotework.jp
15. カンファレンス ー dojocon2021.coderdojo.jp
16. 未踏ジュニア ー jr.mitou.org
17. ちょっとずつ良くした話
18. お品書き 1. 未踏ジュニアとは 2. jr.mitou.org の役割 3. 仕組みのウラガワ
19. お品書き 1. 未踏ジュニアとは 2. jr.mitou.org の役割 3. 仕組みのウラガワ
20. 未踏ジュニア 独創的アイデアと卓越した技術を持つ 小中高生クリエータ支援プログラム
21. 未踏ジュニア 独創的アイデアと卓越した技術を持つ 小中高生クリエータ支援プログラム Accessibility Hardware/CPU VR Fitness Mobile App
22. 未踏ジュニア 127 件 Accessibility Hardware/CPU VR Fitness Mobile App 115 件 105 件 123 件 41 件 15 件 2016 2017 2018 2019 2020 2021 年度別の応募件数の推移（1プロダクト = １件） https://jr.mitou.org/stats
23. 未踏ジュニア www.sfc.keio.ac.jp/news/013292.html cs.sd.tmu.ac.jp/admission_of ce.html newscast.jp/news/1055602 プロダクト開発が推薦入試で評価される時代 fi https://jr.mitou.org/about
24. 毎年プロダクトを公開 fi https://jr.mitou.org/ nal
25. お品書き 1. 未踏ジュニアとは 2. jr.mitou.org の役割 3. 仕組みのウラガワ
26. jr.mitou.org の役割 • プロダクト の周知 • URL で成果を共有 • 数字 で採択者支援
27. プロダクト紹介データ _data/projects.yml
28. プロダクトの一覧作成 fi https://jr.mitou.org/ nal
29. プロダクトの一意 URL https://jr.mitou.org/projects/2021/telport
30. 応募数などもYAMLで! _data/stats.yml
31. 評価者向け統計データ https://jr.mitou.org/stats
32. 計算式を変えた海外用 https://jr.mitou.org/english/stats
33. データは YAML で持ち、 Ruby (Jekyll) で自動生成
34. お品書き 1. 未踏ジュニアとは 2. jr.mitou.org の役割 3. 仕組みのウラガワ
35. Why YAML?
36. Itʼs because ... Ruby (Jekyll) + YAML + GitHub = 共同編集ツール!
37. YAML なら 気軽に更新
38. ブラウザで簡単に更新可能
39. 好きなタイミングで公開！
40. 仕組みのウラガワ • YAML で共同編集 • Ruby で自動生成 • Actions で CI/CD
41. 仕組みのウラガワ • YAML で共同編集 • Ruby で自動生成 • Actions で CI/CD
42. Ruby × Actions = ∞ 約70ページを自動生成
43. Ruby × Actions = ∞ 約70ページを自動生成 YAML + Ruby で投稿！
44. Web Koten（個展）
45. １つの URL、１つの成果 https://jr.mitou.org/projects/2021/web_koten
46. ʻWeb個展ʼ [検索]
47. 動画編集フレームワーク
48. 動画編集フレームワーク
49. 競争激しめの検索でも…!?
50. 仕組みのウラガワ • YAML で共同編集 • Ruby で自動生成 • Actions で CI/CD
51. データの流れ (旧) YAML Pages Jekyll ̲data/*.yml ブラウザで共同編集 Ruby ̲post/1.md ̲post/2.md tasks/*.rb 自動でビルドとデプロイ データ処理スクリプト (※ 制限あり) *.html *.css *.js (gh-pages branch) 静的ファイルのみ出力 ※ GitHub Pages では指定のライブラリのみ使用可能 → https://pages.github.com/versions/
52. データの流れ (新) YAML ̲data/*.yml ブラウザで共同編集 Ruby tasks/*.rb fl データ処理スクリプト Pages Actions Test & Build Jekyll .github/ work ows/ *.yml ̲post/1.md ̲post/2.md ̲post/3.md ... テストとビルドとデプロイを自動化 (特に制限は無く、自由に組める） *.html *.css *.js (gh-pages branch) 静的ファイルのみ出力
53. Demo on GitHub! → mitou / jr.mitou.org
54. 次の一歩
55. Jekyll を学ぶ jekyllrb.com railstutorial.jp
56. Pages の留意点 docs.github.com/en/github/site-policy/github-terms-for-additional-products-and-features
57. 例: EC × Jekyll shopify.github.io/liquid/basics/variations
58. 例: EC × Jekyll shopify.jp/blog/partner-shopify-template-language-liquid-overview
59. まとめ
60. お品書き 1. 未踏ジュニアとは 2. jr.mitou.org の役割 3. 仕組みのウラガワ
61. Happy Coding!
62. 未踏ジュニア on Jekyll U-17 小中高生クリエータ支援プログラムを支える技術 Th an ks !