Merge pull request #2743 from fjordllc/feature/add_wsl2_to_using_os

登録画面の利用OSにWindows(WSL2)を追加
fjordllc · Aug 12, 2021 · d67efd5 · d67efd5
2 parents 66f78e0 + 4aead94
commit d67efd5
Show file tree

Hide file tree

Showing 8 changed files with 94 additions and 17 deletions.
diff --git a/app/assets/stylesheets/atoms/_a-form-help.sass b/app/assets/stylesheets/atoms/_a-form-help.sass
@@ -2,6 +2,21 @@
   font-size: .75rem
   margin-top: .5em
   color: $semi-muted-text
+  &.is-important
+    border: dashed 1px $border-shade
+    padding: 1em 1.25em
+    border-radius: 4px
+    color: $default-text
+    h2
+      +text-block(1.125em 1.4)
+      margin-bottom: .25em
+    [class*=is-select] + &
+      margin-top: .75rem
+    .a-horizontal-dashed
+      +margin(vertical, 1em)
+    .a-form-help-link
+      display: inline-block
+      margin-top: .25em
   &.is-text-align-right
     text-align: right
   &.is-text-align-center

diff --git a/app/assets/stylesheets/atoms/_a-horizontal-dashed.sass b/app/assets/stylesheets/atoms/_a-horizontal-dashed.sass
@@ -0,0 +1,3 @@
+.a-horizontal-dashed
+  +size(100% 1px)
+  border-top: dashed 1px $border-shade
diff --git a/app/assets/stylesheets/initializers/_reset.sass b/app/assets/stylesheets/initializers/_reset.sass
@@ -45,3 +45,6 @@ input[type="submit"]
 +placeholder
   color: $placeholder-text
   font-weight: 400
+
+hr
+  border: none
diff --git a/app/models/user.rb b/app/models/user.rb
@@ -22,7 +22,8 @@ class User < ApplicationRecord
   enum os: {
     mac: 0,
     mac_m1: 2,
-    linux: 1
+    linux: 1,
+    windows_wsl2: 3
   }, _prefix: true
 
   enum experience: {

diff --git a/app/views/users/form/_os.html.slim b/app/views/users/form/_os.html.slim
@@ -3,9 +3,11 @@
   .a-button.is-md.is-secondary.is-select.is-block
     - options = options_for_select(User.os.map { |k, _| [t("activerecord.enums.user.os.#{k}"), k] }, selected: f.object.os)
     = f.select :os, options, include_blank: '- 選択してください -'
-  .a-form-help
+  .a-form-help.is-important
+    h2
+      | M1 Mac or Intel Mac
     p
-      | Mac の場合、現在 Apple M1 チップを採用しているものと、
+      | Mac には現在 Apple M1 チップを採用しているものと、
       | Intel の CPU を採用しているものがあります。
       | どちらの Mac をお使いかで手順が異なるプラクティスがあります。
       | アドバイスをする際にその情報が必要なため、お答えいただいております。
@@ -15,16 +17,32 @@
           | M1 Mac or Intel Mac? の調べ方
         span.a-help
           i.fas.fa-question
+    hr.a-horizontal-dashed
+    h2
+      | Windows(WSL2)
     p
-      | カリキュラムは Mac 向けの内容のみ用意をしております。
-      | なので、現在は Windows では受講できません
-      | （ Windows でも学習ができるように準備を進めています）。
+      | Windows で学習をする場合、WSL2 という
+      | Windows 上で Linux を動作させる仕組みをを使います。
+      | WSL2 を使うには、学習に使うパソコンが Hyper-V に
+      | 対応していることが必要です。
+      | お持ちのパソコンが Hyper-V に対応しているかどうかを
+      | 下記の方法でご確認ください。
+      br
+      label.a-form-help-link.is-danger(for='modal-win')
+        span.a-form-help-link__label
+          | Hyper-V 対応の調べ方
+        span.a-help
+          i.fas.fa-question
+    hr.a-horizontal-dashed
+    h2
+      | Linux
     p
       | Linux 経験者であれば Linux で学習を行うことは可能ですが、
       | Linux であるがために学習が進まなかった場合にサポートが
       | できない場合がありますのでご注意ください。
-
-= render '/shared/modal', id: 'modal-mac', title: '🍏 M1 Mac or Intel Mac? の調べ方'
+= render '/shared/modal',
+  id: 'modal-mac',
+  title: '🍏 M1 Mac or Intel Mac? の調べ方'
   .modal__description.is-md
     .a-short-text
       p
@@ -40,4 +58,21 @@
         br
         | 「プロセッサ」という項目があり、そこに「Intel」とありましたら、Intel Mac です。
       p
-        = image_tag('signup/about-mac-popup.jpg', alt: 'この Mac についてのポップアップウインドウのキャプチャ')
+        = image_tag 'signup/about-mac-popup.jpg',
+          alt: 'この Mac についてのポップアップウインドウのキャプチャ'
+= render '/shared/modal',
+  id: 'modal-win',
+  title: 'Hyper-V対応の調べ方'
+  .modal__description.is-md
+    .a-short-text
+      p スタートボタンの右にある検索欄に「タスクマネージャー」を入力してタスクマネージャーを立ち上げます。
+      p = image_tag 'https://i.gyazo.com/53e17941316c04a75dbd7b953ccc7a3a.png'
+      p 「パフォーマンス」タブを選択します。
+      p 右下の「仮想化」の部分が「有効」になっていればHyper-Vに対応しています。
+      p = image_tag 'https://i.gyazo.com/de5e34f289843201d2246be964c26864.png'
+      p
+        span(style="color:red")
+          | 「無効」になっている場合でもパソコンが対応してれば
+          | 設定で有効にできる場合があります。
+      p 詳細は下記のページを参考にしてください。
+      p = link_to 'WSL2が使えるマシンとは？', 'https://bootcamp.fjord.jp/articles/15', target: :blank
diff --git a/app/views/welcome/_conditions.slim b/app/views/welcome/_conditions.slim
@@ -19,15 +19,17 @@ section.welcome-child-section.is-conditions
           .welcome-small-section__inner
             = image_tag('my-mac.svg', class: 'welcome-small-section__icon')
             h3.welcome-small-section__title
-              | 自分のMacを<br>用意できる
+              | 自分のパソコンを<br>用意できる
             .welcome-small-section__description
               p
-                | 用意しているカリキュラムはMacを使って学習することを前提に作られています。なので、最新のOSが動くMacを持っていることが必要です。これからMacを購入をする場合は、以下のリンク先を参考にしてください。
+                | Mac、Windows、LinuxそれぞれのOSで受講することができます。しかし、それぞれで最新のOSが動く必要があります。詳しい要件、おすすめのOSについては下記を参照してください。
             .welcome-small-section__actions
               .welcome-small-section__actions-items
                 .welcome-small-section__actions-item
-                  = link_to 'http://docs.komagata.org/5535', class: 'a-welcome-button is-sm', target: '_blank', rel: 'noopener' do
-                    | おすすめのMac
+                  = link_to '受講できるパソコンの要件',
+                    'https://bootcamp.fjord.jp/articles/32',
+                    class: 'a-welcome-button is-sm',
+                    target: '_blank', rel: 'noopener'
       .col-xs-12.col-md-4
         section.welcome-small-section
           .welcome-small-section__inner

diff --git a/app/views/welcome/_faq.slim b/app/views/welcome/_faq.slim
@@ -78,11 +78,29 @@
             section.faqs-item
               .faqs-item__inner
                 h3.faqs-item__title
-                  = image_tag('question.svg', class: 'faqs-item__title-icon')
-                  | Mac ではなく、 Linux で学習をしたいのですが可能ですか？
+                  = image_tag 'question.svg', class: 'faqs-item__title-icon'
+                  | Linuxで学習をしたいのですが可能ですか？
+                .faqs-item__body
+                  p
+                    | Linuxでも可能ですが条件があります。
+                    | 用意しているカリキュラムは Mac を想定して作られています。
+                    | そのため、Linux でカリキュラムを行う場合は自分自身でMac用のカリキュラムを
+                    | Linuxに合わせて操作方法などを変える必要があります。
+                    | それができるだけのLinuxのスキルがある方のみ、Linuxで学習をすることをOKとしています。
+          .col-md-4
+            section.faqs-item
+              .faqs-item__inner
+                h3.faqs-item__title
+                  = image_tag 'question.svg', class: 'faqs-item__title-icon'
+                  | Windowsで学習をしたいのですが可能ですか？
                 .faqs-item__body
                   p
-                    | Linux でも可能ですが、条件があります。用意しているカリキュラムは Mac を想定して作られています。そのため、Linux でカリキュラムを行う場合は自分自身で Mac 用のカリキュラムを Linux に合わせて操作方法などを変える必要があります。それができるだけの Linux のスキルがある方のみ、Linux で学習をすることを OK とします。
+                    | Windowsでも可能ですが、WSL2を使うのでWSL2対応のパソコンであることが必須です。
+                    | WSL2についてとWSL2に対応しているかの調べ方は下記にかいてあります。
+                    | そちらを読んで理解できないようであればMacを購入してから受講することをおすすめしております。
+                  p = link_to 'WSL2が使えるマシンとは？', 'https://bootcamp.fjord.jp/articles/32'
+                  p = link_to 'WSL2でLinuxを使おう', 'https://bootcamp.fjord.jp/articles/6'
+
           .col-md-4
             section.faqs-item
               .faqs-item__inner

diff --git a/config/locales/ja.yml b/config/locales/ja.yml
@@ -198,7 +198,7 @@ ja:
           vacation: 休職中
           unemployed: 働いていない
         os:
-          windows: Windows
+          windows_wsl2: Windows(WSL2)
           mac: Mac(Intel)
           linux: Linux
           mac_m1: Mac(M1 chip)