Merge pull request #80 from Ippey/feature/add-youtube-link

動画アーカイブリンク追加

Author: yasulab

_data/sessions.yml

@@ -1,12 +1,12 @@
-# - title: 
-#   time: 
-#   text: 
-#   tag: 
-#   speaker: 
-#   affiliation: 
-#   sns: 
-#   profile-img: 
-#   profile-text: 
+# - title:
+#   time:
+#   text:
+#   tag:
+#   speaker:
+#   affiliation:
+#   sns:
+#   profile-img:
+#   profile-text:
 
 
 
@@ -22,60 +22,65 @@
   profile-img: ishihara.jpg
   profile-text: 株式会社まちクエスト、合同会社つくる社においてウェブサービスやiPhoneアプリの開発を行うかたわら、CoderDojoの日本での立ち上げに関わり、現在はCoderDojo調布を主宰。著書に「Scratchではじめる機械学習」「Scratchで楽しく学ぶアート&サイエンス」「Raspberry Piではじめるどきどきプログラミング」。
   profile-id: sp01
+  archive-link: https://youtu.be/OKHXmMnYl0Y
 
 - title: 親子で楽しもう Scratch x 機械学習
   time: 13:00-13:20
   text: Scratchと機械学習系の拡張機能を組み合わせてどんな事ができるのか実験したり、地域の課題解決に取り組んだ事例を紹介します。
   tag: セミナー
   speaker: 小川智史
   affiliation: CoderDojo 嘉手納
-  sns: 
+  sns:
     - https://www.facebook.com/ogaworks/
     - https://twitter.com/ogaworks/
     - https://www.instagram.com/ogaworks/
     - https://www.ogaworks.com/"
   profile-img: ogawa.jpg
   profile-text: 2017年から沖縄県中部でCoderDojo 嘉手納 を運営しています。横浜生まれ東京育ち。2012年に沖縄県へ移住し、WEBサービスの開発や運営に携わっています。株式会社まちクエスト取締役。株式会社ゴーゴーラボ創業者。
   profile-id: sp02
+  archive-link: https://youtu.be/wxBx27BWJyM
 
 - title: やるだけで仲良しレベルが爆上がりするオンラインイベントTOP5
   time: 13:30-13:50
   text: CoderDojo瑞穂はオンライン活動に力を入れており、コロナ禍でも常連の数を1.5倍に増やすことができました。実際に活動した中から、やるだけで仲良しレベルが爆上がりするオンラインイベントTOP5をお伝えします。今後のオンライン活動でDojoの規模を広げる参考にしてください。
   tag: セミナー
   speaker: 佐原慎也
   affiliation: CoderDojo瑞穂チャンピオン
-  sns: 
+  sns:
     - https://twitter.com/DojoMizuho
   profile-img: sahara.jpg
   profile-text: プログラム作ってご飯を食べている30台半ばの関西人です。CoderDojo瑞穂を運営して2年経ちました。
   profile-id: sp03
+  archive-link: https://youtu.be/fpF3Wk4-v0A
 
 - title: 各地で活動して得られた経験、デモや紹介をしたあれこれ
   time: 14:00-14:20
   text: 年40回以上のペースでCoderDojoにメンターで参加し、コロナ禍の前は、東京・神奈川・埼玉・千葉の17のDojoに参加、コロナ禍でオンラインでの開催が行われるようになってからは、さらに愛媛・愛知・三重などの地域が主催のDojoにも参加しました。その中で見聞きし体験した各地のDojoの特色、印象的だったエピソード、自分が心がけたこと等についてお話しします。また、それら各地のDojoで紹介してきた、様々なプログラム・ガジェットを使った作品についても、デモを交えつつお話しします。
   tag: セミナー
   speaker: 豊田陽介
   affiliation: CoderDojo メンター
-  sns: 
+  sns:
     - https://twitter.com/youtoy
     - https://qiita.com/youtoy
     - https://note.com/youtoy"
   profile-img: toyota.jpg
   profile-text: 1980年、愛媛県生まれ。地元を離れて仙台で6年過ごし、その後は就職して埼玉へ。学生のころから子ども向けに、児童館・小学校・保育園などで、ワークショップ、マジック・バルーンアートなどのパフォーマンス、授業補助・保育補助等の様々な活動を続ける中で、プログラミングに関する活動も開始。20以上のCoderDojoにメンターとして参加。また、主に大人向けに、ビジュアルプログラミング・IoT・ガジェット等をテーマにした複数の技術コミュニティを単独・共同で主催し、イベント主催・運営を行っている。そして、イベントでの登壇や参加もしつつ、ちょっとした作品を作ったりもしている。ガジェットが大好きで、SNSのタイムラインには頻繁に購入したガジェットの写真がアップされている。これらの活動をプライベートで行いつつ、普段は企業の研究所に勤務。
   profile-id: sp04
+  archive-link: https://youtu.be/hRzR3oQVYZQ
 
 - title: コロナ禍でどう運営してる？事例やノウハウをディスカッション
   time: 14:30-15:00
   text: 新型コロナウイルスが世界中に蔓延する中、オンライン/オフラインでどの様にDojoの運営をしてきたか、名護、尾張、伊予のチャンピオンに事例やノウハウをパネルディスカッション形式でお話してもらいます。皆さんのDojo運営のヒントに繋がればと思います。
   tag: パネルディスカッション
-  speaker: 宇津義一(@名古屋) / 宇都宮真由美(@伊予) / 安藤元気(@名護) /  Katz Ueno (@尾張) / 
-  affiliation: 
-  sns: 
+  speaker: 宇津義一(@名古屋) / 宇都宮真由美(@伊予) / 安藤元気(@名護) /  Katz Ueno (@尾張) /
+  affiliation:
+  sns:
   profile-img: panel-discussion.png
-  profile-text: 
+  profile-text:
   profile-id: sp05
+  archive-link: https://youtu.be/agvzP9YBN8Y
   speakers:
-    - data: 
+    - data:
       role: モデレータ
       name: 宇津義一
       affiliation: CoderDojo 名古屋
@@ -84,7 +89,7 @@
       sns:
         - https://m.facebook.com/yoshikazu.utsu.5
 
-    - data: 
+    - data:
       role: スピーカー
       name: 安藤元気
       affiliation: CoderDojo 名護 Champion
@@ -95,7 +100,7 @@
         - https://www.facebook.com/CoderDojo.Nago
         - http://coderdojo-nago.com
 
-    - data: 
+    - data:
       role: スピーカー
       name: 宇都宮真由美
       affiliation: CoderDojo 伊予 Champion
@@ -104,7 +109,7 @@
       sns:
         - https://coderdojo-iyo.com/
 
-    - data: 
+    - data:
       role: スピーカー
       name: Katz Ueno
       affiliation: CoderDojo 尾張 Champion
@@ -120,23 +125,25 @@
   tag: セミナー
   speaker: 杉山美鈴
   affiliation: CoderDojo 久留米 Champion
-  sns: 
+  sns:
     - https://www.facebook.com/sugimisu
   profile-img: sugiyama.jpg
   profile-text: 株式会社クローバーソフト代表取締役。大学生の時に映画を見て漠然と海辺でパソコンを広げられるハッカーになりたいと思ったのが、プログラミングを始めたきっかけです。現在はWebシステム開発やサイト制作、プログラミング講師業などを行っています。
   profile-id: sp06
+  archive-link: https://youtu.be/KuL3KKrOj9I
 
 - title: 合同誌「Hello Dojo?」ができるまでをゆるーく・・
   time: 15:40-16:00
   text: CoderDojoに関わるチャンピオンやメンターの有志が集まり、プログラミングに関する技術的な内容やコミュニティ運営の知見などをまとめた合同誌「Hello Dojo?」を作りました。HelloDojo?を作る中で得られた知見や苦労話、ちょっとした裏話なども交えつつ、ゆるーく語らせていただきます。
   tag: セミナー
   speaker: おーらん
   affiliation: CoderDojo 小机 Champion
-  sns: 
+  sns:
     - https://twitter.com/wowsawa
   profile-img: osawa.jpg
   profile-text: CoderDojo小机を運営しつつ、近隣の小学校ではプログラミングイベントを開催（2020年は断念）。本職は父親。ついでに会社員。
   profile-id: sp07
+  archive-link: https://youtu.be/UdDV4CqRHiw
 
 
 - title: CoderDojo Japan 活動報告
@@ -145,14 +152,15 @@
   tag: コミュニティ
   speaker: 安川要平
   affiliation: 一般社団法人 CoderDojo Japan
-  sns: 
+  sns:
     - https://www.facebook.com/coderdojo.jp/
     - https://www.youtube.com/CoderDojoJapan
     - https://github.com/coderdojo-japan
     - https://twitter.com/CoderDojoJapan
     - https://coderdojo.jp/
-  
-  
+
+
   profile-img: cdj.png
   profile-text: 2012年に下北沢オープンソースCafeのメンバーと共に日本初の CoderDojo を立ち上げ、当時から現在に到るまで、CoderDojo コミュニティがより活動しやすくなるため、法人提携や海外連携、機能開発やドキュメント制作などのコミットを続けています。 https://github.com/coderdojo-japan/coderdojo.jp
-  profile-id: sp08
+  profile-id: sp08
+  archive-link: https://youtu.be/CJ6yjAqtd2Q

_sass/_page.scss

@@ -3,15 +3,19 @@
     padding: 1rem 1rem;
     border-left: 5px solid $main-color;
     background: #f4f4f4;
-      
+
 }
 
 .btn-main{
     background-color: $red;
     color: white;
 }
 
-
+.btn-secondary {
+    background-color: $light-blue;
+    color: white;
+    border: none;
+}
 
 .badge-must{
     font-weight: bold;
@@ -37,4 +41,4 @@
 
 .session-speaker-name{
     font-weight: bold;
-}
+}

session.html

@@ -15,7 +15,7 @@ <h1>セッション</h1>
     </div>
 
     <div class="row text-left">
-        
+
         {% for data in site.data.sessions %}
 
         <div class="col-md-6 col-12 p-3" id="{{data.title}}">
@@ -24,12 +24,12 @@ <h4 class="ws-title">{{data.title}}</h4>
             <p>
                 {{data.time}}
                 {% if data.tag %}
-                    <span class="badge badge-ws">{{data.tag}}</span> 
+                    <span class="badge badge-ws">{{data.tag}}</span>
                 {% endif %}
 
-                </p> 
+                </p>
+
 
-                
             {% if data.profile-img %}
                 <div class="my-3">
                     <img src="img/session/{{data.profile-img}}" class="w-100 px-5" alt="">
@@ -41,17 +41,19 @@ <h4 class="ws-title">{{data.title}}</h4>
             <p>{{data.text}}</p>
 
             <a href="#{{data.profile-id}}" role="button" data-toggle="collapse" class="btn btn-main btn-sm"><i class="fas fa-angle-down"></i> 登壇者プロフィール</a>
-
+            {% if data.archive-link %}
+            　<a href="{{data.archive-link}}" target="_blank" rel="noopener" class="btn btn-sm btn-secondary"><i class="fab fa-youtube"></i> セッションアーカイブ</a>
+            {% endif %}
             <div class="collapse mt-3" id="{{data.profile-id}}">
 
                 {% if data.tag == "パネルディスカッション" %}
 
                     {% for speaker in data.speakers %}
 
-                        <p class="session-speaker-name">{{speaker.name}}（{{speaker.affiliation}}）<span class="badge badge-main">{{speaker.role}}</span></p> 
+                        <p class="session-speaker-name">{{speaker.name}}（{{speaker.affiliation}}）<span class="badge badge-main">{{speaker.role}}</span></p>
 
                         <p>{{speaker.text}}</p>
-                        
+
                         <ul>
                         {% for link in speaker.sns %}
 
@@ -62,7 +64,7 @@ <h4 class="ws-title">{{data.title}}</h4>
 
                     {% endfor %}
 
-                
+
 
                 {% else %}
                 <p>{{data.profile-text}}</p>
@@ -75,12 +77,12 @@ <h4 class="ws-title">{{data.title}}</h4>
 
             </div>
 
-            
+
 
         </div>
 
         {% endfor %}
 
     </div>
 
-</div>
+</div>