minimum版の参加表実装

app/assets/stylesheets/example.scss

@@ -0,0 +1,16 @@
+.a8-container {
+  display: grid;
+  color: red;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  height: 297mm; /* A4の高さ */
+  width: 210mm; /* A4の幅 */
+}
+
+.a8 {
+  border: 1px solid black; /* 各A8の境界線 */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+

app/controllers/profiles_controller.rb

@@ -5,6 +5,7 @@ class ProfilesController < ApplicationController
   before_action :set_current_profile, only: [:edit, :update, :destroy, :checkin, :entry_sheet]
   skip_before_action :logged_in_using_omniauth?, only: [:new]
   before_action :is_admin?, :find_profile, only: [:destroy_id, :set_role]
+  before_action :set_current_user, :set_speaker, only: [:entry_sheet]
 
   def new
     @profile = Profile.new
@@ -131,6 +132,12 @@ def set_current_profile
     @profile = Profile.find_by(email: @current_user[:info][:email], conference_id: set_conference.id)
   end
 
+  def set_speaker
+    if @current_user
+      @speaker = Speaker.find_by(email: @current_user[:info][:email], conference_id: set_conference.id)
+    end
+  end
+
   def profile_params
     params.require(:profile).permit(
       :sub,

app/javascript/packs/qr_reader1.js

@@ -0,0 +1,25 @@
+document.addEventListener("DOMContentLoaded", function() {
+  const video = document.getElementById('video');
+  const canvas = document.getElementById('canvas');
+  const snapBtn = document.getElementById('snap');
+
+  navigator.mediaDevices.getUserMedia({ video: true })
+    .then(function(stream) {
+      video.srcObject = stream;
+      video.play();
+    })
+    .catch(function(err) {
+      console.log("カメラの起動に失敗しました: " + err);
+    });
+
+  snapBtn.addEventListener('click', function() {
+    const context = canvas.getContext('2d');
+    context.drawImage(video, 0, 0, canvas.width, canvas.height);
+
+    // キャプチャした画像をデータURLとして取得
+    const imageData = canvas.toDataURL('image/jpeg');
+    console.log(imageData);
+
+    // ここで取得したデータURLをサーバーに送信するなどの処理を行う
+  });
+});

app/javascript/stylesheets/_entry_sheet.scss

@@ -12,9 +12,12 @@
   justify-content: flex-start;
   flex-direction: column;
   align-items: center;
-  .logo-image{
+  .logo-image {
     margin-top: 3rem;
   }
+  .attendance {
+    font-size: xxx-large;
+  }
   .profile {
     display: inherit;
     margin-top: 2rem;
@@ -28,12 +31,26 @@
       display: inherit;
       margin-left: 2rem;
       flex-direction: column;
+      font-size: x-large;
+    }
+    img.avatar-image{
+      width: 80px;
+      margin: 20px;
     }
   }
 }
 
+#printButton {
+  text-align: center;
+  margin: 0 auto;
+  margin-top: 3rem;
+}
+
 @media print {
   .a8-container {
     page-break-after: always; // コンテンツの後に改ページ
   }
+  #printButton {
+    display: none;
+  }
 }

app/javascript/stylesheets/cnds2024.scss

@@ -10,6 +10,7 @@
 @import "./_tracks.scss";
 @import "./_admin.scss";
 @import "./_booth.scss";
+@import "./_entry_sheet.scss";
 @import "./_links.scss";
 @import "./_talks.scss";
 @import "./_team.scss";
@@ -20,4 +21,4 @@
 @import "./_contents.scss";
 @import "./cnds2024/_cnds2024.scss";
 // Import custom utilities
-@import "./cnds2024/_utilities.scss";
+@import "./cnds2024/_utilities.scss";

app/views/profiles/entry_sheet.html.erb

@@ -10,6 +10,7 @@
       <div class="a8">Content 3</div>
       <div class="a8">Content 4</div>
     </div>
+    <button class="btn btn-secondary btn-xl" id="printButton" onclick="window.print();">印刷する</button>
   </body>
 </html>
 

app/views/profiles/partial_entry_sheet/_up_left_cell.html.erb

@@ -1,16 +1,31 @@
 <div class="a8">
   <div class="logo-image">
-    <%= image_tag "cndt2023/header_logo.png", class: "img-fluid header_logo" %>
+    <%= image_tag "#{@conference.abbr}/header_logo.png", class: "img-fluid header_logo" %>
+  </div>
+  <div class="attendance">
+    <% if @speaker.present? %>
+      <%= h("登壇者") %>
+    <% else %>
+      <%= h("一般参加") %>
+    <% end %>
   </div>
   <div class="profile">
     <div class="qrcode">
       <img src=<%= "data:image/png;base64,#{@profile.qrcode_image}" %> />
       <%= h("受付用QRコード") %>
     </div>
     <div class="detail">
-      <%= h("<Attendee>") %>
-      <%= image_tag @profile.public_profile.avatar_url(:small) %>
-      Name: <%= @profile.public_profile.nickname %>
+      <% if @speaker.present? %>
+        <%= image_tag @speaker.avatar_url(:small), class: "avatar-image" %>
+        Name: <%= @speaker.name %>
+      <% elsif @profile.public_profile.present? %>
+        <%= image_tag @profile.public_profile.avatar_url(:small), class: "avatar-image" %>
+        Name: <%= @profile.public_profile.nickname %>
+      <% end %>
+      <% if @profile.public_profile.present? %>
+        </br>
+        X(Twitter) ID: <%= @profile.public_profile.twitter_id %>
+      <% end %>
     </div>
   </div>
 </div>