常連

railsでform_withを使って送信フォームを作っています。
フォームを入力必須にしたいのですが、うまくいきません。
htmlに変換されるときに、inputタグにrequiredをつけるだけなのですが、どうすればよいでしょうか？

下記のようにしたら、
<input html="required">
とhtml=がついてしまい、ダメでした

```haml
= form_with url:article_path, local: true do |f|
  = f.text_field :title, html:"required"
  = f.text_field :content

  = f.submit "送信"

```

railsのform_withを入力必須にする

### 前提・実現したいこと

現在、フリマの仮装アプリを制作しております。
商品編集ページの実装ですが
カテゴリーが呼び込めません。

自分の中で
色んな記事を噛み砕いた内容になってますが、記述ミス、いらない内容あるかもです。
（カテゴリーと画像の導入以外のjsは触ってない箇所もあります）


■商品編集機能実装中にカテゴリーの機能を実装中に以下のエラーメッセージが発生しました。

### 発生している問題・エラーメッセージ

```
ActiveRecord::RecordNotFound in ProductionsController#edit
Couldn't find Category without an ID

```

### 該当のソースコード

```ここに言語名を入力
production_controller.rb

def edit
    @production = Production.find(params[:id])
    @category = Category.where(ancestry: "")
~~~~~~~~~~~~省略~~~~~~~~~~~~~~~~~~~~~~~
end

category.js

$(document).ready(function(){
  $(function(){
    function appendOption(category){
      var html = `<option value="${category.id}" data-category="${category.id}">${category.name}</option>`;
      return html;
    }
    // 子カテゴリーの表示作成
    function appendChidrenBox(insertHTML){
        var childSelectHtml = '';
        childSelectHtml = `<div class='exhibitionPage__main__contents__detail__category__choose__added' id= 'children_wrapper'>
                            <div class='exhibitionPage__main__contents__detail__category__choose1'>
                              <i class='fas fa-chevron-down exhibitionPage__main__contents__detail__category__choose--arrow-down'></i>
                              <select class="exhibitionPage__main__contents__detail__category__choose--select" id="child_category" name="production[category_id]">
                                <option value="---" data-category="---">---</option>
                                ${insertHTML}
                              <select>
                            </div>
                          </div>`;
        $('.products_new-product_explanation__category').append(childSelectHtml);
      }
  
      // 孫カテゴリーの表示作成
      function appendGrandchidrenBox(insertHTML){
        var grandchildSelectHtml = '';
        grandchildSelectHtml = `<div class='exhibitionPage__main__contents__detail__category__choose__added' id= 'grandchildren_wrapper'>
                                  <div class='exhibitionPage__main__contents__detail__category__choose2'>
                                    <i class='fas fa-chevron-down exhibitionPage__main__contents__detail__category__choose--arrow-down'></i>
                                    <select class="exhibitionPage__main__contents__detail__category__choose__box--select" id="grandchild_category" name="production[category_id]">
                                      <option value="---" data-category="---">---</option>
                                      ${insertHTML}
                                    </select>
                                  </div>
                                </div>`;
        $('.products_new-product_explanation__category').append(grandchildSelectHtml);
      }
  
      // 親カテゴリー選択後のイベント
      // 親はクラスのIDの方を選択してあげる
      $('#production_category').on('change', function(){
        var parent_category_id = document.getElementById('production_category').value; //選択された親カテゴリーの名前を取得
        if (parent_category_id != "選択してください"){ //親カテゴリーが初期値でないことを確認
          $.ajax({
            url: '/productions/category/get_category_children',
            type: 'GET',
            data: { parent_id: parent_category_id },
            dataType: 'json'
          })
          .done(function(children){
            $('#children_wrapper').remove(); //親が変更された時、子以下を削除する
            $('#grandchildren_wrapper').remove();
            var insertHTML = '';
            children.forEach(function(child){
              insertHTML += appendOption(child);
            });
            appendChidrenBox(insertHTML);
          })
          .fail(function(){
            alert('カテゴリー取得に失敗しました');
          })
        }else{
          $('#children_wrapper').remove(); //親カテゴリーが初期値になった時、子以下を削除する
          $('#child_category').remove();
        }
      });
  
      // 子カテゴリー選択後のイベント
      // これは元々HTMLに表示されているクラスをレシーバーとして指定する必要がある
      $('.products_new-product_explanation__category').on('change', '#child_category', function(){
        var child_category_id = $('#child_category option:selected').data('category'); //選択された子カテゴリーのidを取得
        if (child_category_id != "--"){ //子カテゴリーが初期値でないことを確認
          $.ajax({
            url: '/productions/category/get_category_grandchildren',
            type: 'GET',
            data: { child_id: child_category_id },
            dataType: 'json'
          })
          .done(function(grandchildren){
            if (grandchildren.length != 0) {
              $('#grandchildren_wrapper').remove(); //子が変更された時、孫以下を削除する
              var insertHTML = '';
              grandchildren.forEach(function(grandchild){
                insertHTML += appendOption(grandchild);
              });
              appendGrandchidrenBox(insertHTML);
            }
          })
          .fail(function(){
            alert('カテゴリー取得に失敗しました');
          })
        }else{
          $('#grandchildren_wrapper').remove(); //子カテゴリーが初期値になった時、孫以下を削除する
        }
      });
    });
  });

vies/production/edit.html.haml
~~~~~~~~~~~~~~~~~~~~~~~省略~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 .category-wrapper
          = form_with model: @production :@category, local: true do |f|
            = f.label :category_id , class: 'wrapper__label category-wrapper-label', id: "wrapper__label--category" do
              カテゴリー：
              %span.required ※必須
              .category-wrapper-box
                .category-wrapper-select
                  .category-wrapper-select__box
                    = f.collection_select :category_id, Category.roots, :id, :name, {selected:@production.category.parent.parent.name}, { class: 'category-wrapper__category form-control', id: 'parent_category_edit', name: "" }
                .category-wrapper-select#children_wrapper
                  .category-wrapper-select__box
                    = f.collection_select :category_id,  @production.category.parent.parent.children, :id, :name{prompt: "選択してください", selected: @production.category.parent_id}, {class: 'listing-select-wrapper--edit__child--select', id: 'child_category_edit', name: "" }
                  .category-wrapper-select__box
                    = f.collection_select :category_id, @production.category.parent.children, :id, :name,{prompt: "選択してください", selected: @production.category.id}, {class: 'listing-select-wrapper--edit__grandchild--select', id: 'grandchild_category_edit', name: "product[category_id]" }

~~~~~~~~~~~~~~~~~~~~~~~省略~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


get_category_children.json.jbuilder

json.array! @category_children do |child|
  json.id child.id
  json.name child.name
end

get_category_grandchildren.json.jbuilder

json.array! @category_grandchildren do |grandchild|
  json.id grandchild.id
  json.name grandchild.name
end
```

### 試したこと

付与した、クラスの名前
記述ミスないか
@production(:category_id)or@production(:category.id)
など、思いつくことは行ったのですが、うまくいかないのでご教授いただけると幸いです！！汗


### 補足情報（FW/ツールのバージョンなど）

rails 6.0.0

ここにより詳細な情報を記載してください。

カテゴリーの取得ができない　Couldn't find Category without an IDエラー

### 前提・実現したいこと

漫画閲覧サイトを作ろうとしています。
モーダル内でスライダーで閲覧できるようにしたいのですが、
知識不足でエラーが解決できません。
皆様のお力貸していただければと思っております。

eachで回して動的にid名を生成させようとしてましたらエラーが発生し、
前に進めれない状況です。
何卒、よろしくお願いいたします。

### 発生している問題・エラーメッセージ

```
ActionView::Template::Error (undefined method `map' for "modal-content-1":String):
```

### index.html.haml

```ruby
  - @mangas.each do |manga|
        - manga_pages = manga.to_s.length
        - manga.manga_image.each.with_index(1) do |manga_img, i|
          %label.mpo-modal-close{:for => "mpo-modal-controller"} ×
          -if i == 1
            %input{id = "modal-content-#{i}"}.modal-radio{:checked => "checked", :hidden => "", :name => "content-nav", :type => "radio"}/
          -else
            %input{id = "modal-content-#{i}"}.modal-radio{:hidden => "", :name => "content-nav", :type => "radio"}/
          %div(class="content-#{i}, mpo-modal-slide")
            .mpo-modal-content
              = image_tag manga_img.to_s, alt: "#{manga_img}"
              .mpo-modal-nav
              - if i > 1
                %label.prev-slide{:for => "modal-content-#{i - 1}"} ‹‹
              - else
                = nil

              - if i < manga_pages
                %label.next-slide{:for => "modal-content-#{i + 1}"} ››
              - else
                = nil
```


### 補足情報（FW/ツールのバージョンなど）
centos
ruby 2.5.1p57 (2018-03-29 revision 63029) [x86_64-linux]
Rails 5.2.0
gem 'mysql2', '>= 0.4.4', '< 0.6.0'
gem 'carrierwave'
→2.7.6

下記のサイトを参考にスライダーを作成しようとしておりました。
https://codepen.io/marv117/pen/WvZdGV/

undefined method `map' for の解決方法がわかりません

`haml-rails'を使って、HTMLをhamlに変換しました。
逆に、hamlをHTMLに変換したいのですが、どうすればよいですか？

hamlをHTMLに変換するには

### 環境
haml、Bootstrap４

### やりたいこと
ヘッダーを２段にしたい
![イメージ説明](8ee7a7ac1b773e8852ef83cfaa5f4b30.png)

```haml
%nav.navbar.navbar-header.navbar-expand-lg.fixed-top
  .col-12
    %a.navbar-brand.align-items-left{:href => "/"} 
      = image_tag("logo.png", width: '100%',alt: "logo")
    .text-rigth
      メールはこちら  

    #navbarSupportedContent.collapse.navbar-collapse
      %ul.navbar-nav.mx-auto
        %li.nav-item.active.justify-content-center.align-items-center
          %a.nav-link{:href => "#"}
            ナビ１
        %li.nav-item.justify-content-center
          %a.nav-link{:href => "#"} ナビ２
        %li.nav-item.justify-content-center
          %a.nav-link{:href => "#"} ナビ３
        %li.nav-item.justify-content-center
          %a.nav-link{:href => "#"} ナビ４
        %li.nav-item.justify-content-center
          %a.nav-link{:href => "#"} ナビ５

```

### できたこと
ナビを５つ２段目に並べることができた

### できないこと
メールが画像と同じ並び且つ右寄せ

### 調べたこと
flex-column　を navbar-collapseに入れてみて２段になりましたが、
ロゴの横にナビが来てしまった。

containerでヘッダーとナビを分けたが、ナビが右に寄ったため
text-centerにしたが変化がなかった。


ご教授よろしくお願いいたします。

【Bootstrap】ヘッダーを２段にしたい

### 実現したいこと

gl.enchant.jsで作ったゲームが、最新のブラウザーでも正しく表示されるようにしたい！

### 前提

お世話になります。
古いモジュールですので、あきらめるのも手ですが、できれば対応したいと考えています。
PCや古いスマホでは、正しく表示されるのですが、
新しいスマホでは、ポリゴンが崩れて表示されます。
新しいスマホでもedgeでは大丈夫だったりと、まだブラウザーによってはまちまちなのですが、流れからして、今大丈夫なブラウザーも今後は見れなくなっていくと思われます。

つまりgl.enchant.js中に、最新のjavascriptでは廃止されてしまった構文が使われているのではと考えています。

問題個所を探しやすくするために、code9leapに、次のように必要最小限のコードを書きおろしました。

enchant()
const game = new Game()
game.onload = () => {
    const sn = new Scene3D, cb = new Cube
    sn.addChild(cb)
}
game.start()

これは、画面にただ立方体を表示するだけの単純なコードです。
しかし、これを最近のandroid端末で実行すると、ポリゴンが崩れて6面ある立方体のうち、1面だけが薄く表示されるだけになってしまいます。

次のアドレスから上のコードを実行できますので、試していただきたいです。
https://coderun.9leap.net/codes/211902/

そして、
gl.enchant.jsのどこをどう修正すれば良いか解説をお願いします。

gl.enchant.jsを最新のブラウザーに対応させる！？

①分からないこと：NoMethodError  private method `select' called for # の解決方法

②エラーが発生した機能：課題に対し回答を行うアプリの、回答に対するいいね機能の、いいね削除

③いいねをつけること、いいね数をカウントしてビューに表示することはできます



```postsIndexHtmlHaml
.posts__a__post__like
          - like = Like.where(post_id: post.id).where(user_id: current_user.id)

          - if like.present?
            .posts__a__post__liked__icon
　　　　　　　　　-# エラー発生箇所
              - like_id = Like.find_by(copy_id: copy.id, user_id: current_user.id).select("id")
              = link_to kadai_post_like_path(post.kadai_id,post.id,like_id),method: :delete do
                %i.fas.fa-heart

          - else
            .posts__a__post__like__icon
              = link_to kadai_post_likes_path(post.kadai_id,post.id),method: :post do
                %i.far.fa-heart

          .posts__a__post__like__count
            - count = Like.where(post_id: post.id).count
            = count
```

```likesContoroller
class LikesController < ApplicationController

  def create
    Like.create(post_id: params[:post_id], user_id: current_user.id)
  end

  def destroy
    like = Like.find(params[:id])
    like.destroy if like.user_id == current_user.id
  end

  private

  def like_params
    params.permit(:post_id)
  end
  
end
```

```postsController
  def index
    @posts = Post.order("created_at DESC")
  end
```

```postsRb
class Post < ApplicationRecord
  has_many :likes, dependent: :destroy
  has_many :comments, dependent: :destroy
  belongs_to :user
  belongs_to :kadai


  mount_uploader :image, ImageUploader
end
```

```likeRb
class Like < ApplicationRecord
  belongs_to :user
  belongs_to :post
  validates :user_id, presence: true
  validates :post_id, presence: true
end

```

NoMethodError  private method `select' called for # の解決方法がわからない

link_toを用いて、リンクパスを指定しました。
下記のようなコードになったのですが、
font awesomeを使用していて、font awesomeの下に下線ができました。
```
.tweets
  = link_to new_tweets_path do
    %i.fas.fa-pen
```
font awesomeのscssはこのようになっています。
```
.fa-pen {
  line-height: 90px;
  text-align: center;
  display: block;
  font-size: 30px;
  color: white;
  text-decoration: none;
}
```
```
text-decoration: none;
```
これを当ててみても下線は消えません。
一体、何が原因でしょうか？
ご回答お願い致します。