時間があまりとれなかったので本日は少なめです…が、習慣化したいので投稿はしていきたいと思います。

学習内容

昨日から引き続き。

CSS

枠線を消す

div {
  border: none;
}

デフォルトで入っている枠線を消すことが出来る。

任意部分に枠線を引く

div {
  border-bottom: 1px solid #d1d1d1;
}

上記の様に記入した場合領域の下部に1pxのグレーの実線が入る。例によりtop、right、leftにそれぞれ置き換える事で引かれる場所の指定が可能。

文字サイズ調整

div {
  font-size: 1.2em;
}

上記の場合だと元々設定された値の1.2倍の大きさになる。

角を丸める

button {
  border-radius: 5px;
}

この様にするとボタンの角が5ピクセル分丸くなる。

所感

本日は不完全燃焼…明日の休みに一気に進めていきたいところ。

はじめに
これまで依存関係にあるパッケージ等のライセンスを取得してくれるGitHub製のlicensedやこの他にも様々なライセンスチェッカーが開発されてきました。
特にlicensedはカバーされる範囲も広く個人的にかなり正確に取得してくれると感じていますが利用手順が多いということも挙げられます。
今回、3つの手順だけでこのようなライセンスチェック機能に加えライセンス遵守のためにするべきことを一つのテキストファイルにまとめて教えてくれるnpmパッケージを開発しました。(npmのみ対応)

doppelganger-license
https://medium.com/@hotmailyougo/folding-bikes-market-business-strategies-technological-innovation-trends-top-players-by-2030-c26cc68f9a69
今回開発したパッケージをdoppelganger-licenseと名付けました。
詳細はGitHub Repoに記載しています。
doppelganger-licenseは先述した通り、依存関係にあるライセンスを取得しライセンス遵守のためにすべきことを具体的に教えてくれます。
これらの機能は全てプロジェクトファイル内のpackage-lock.jsonに基づいています。

手順としては

１. doppelganger-licenseのインストール

$ npm install doppelganger-license
２. dependencies.txtとmemo.txtをお好きな場所に作成
　 dependencies.txtにライセンス条項が自動出力され、memo.txtにやることリストが出力されます。

３. doppelganger-licenseを実行

$ doppelganger-license
package-lock.json, dependencies.txt, memo.txtのパスが質問されるのでそれぞれ答えてください

以上の３手順で利用できます。

デモ動画はレポジトリでご確認いただけます。

仕組み
仕組みはそこまで複雑ではなく

package-lock.jsonのdependenciesにあるパッケージの名前・バージョンをfsを用いて抽出
　　　　　　　　　　　　　　　　　　　　↓
　　　　node-fetch経由でregistry.npmjs.orgにてパッケージのライセンスを取得
　　　　　　　　　　　　　　　　　　　　↓
　　　　　　node-fetch経由でjsdelivrにてパッケージのライセンス条項を取得
　　　　　　　　　　　　　　　　　　　　↓
　　　　　　取得したライセンス条項をfsを用いてdependencies.txtに出力
　　　　　　　　　　　　　　　　　　　　↓
　　　コピーレフトライセンスを発見した場合はそのライセンスの条件をmemo.txtに出力

という流れです。

今後の発展予定
現時点でライセンス間の矛盾などは考慮できておらず、一部のコピーレフトライセンスは検出できない場合がありまだまだ改善の余地はあるという状態です。
バグの修正や改善点の報告・要望などは早くお応えできるかと思いますので、よろしければGitHub Repoにてご報告いただけますと幸いです。よろしくお願いいたします。

K-Rintaro/doppelganger-license - GitHub

SIer企業で働く社会人4年目OLです。
仕事をやめる予定はないのですが、手に職をつけていつか副職ができるといいなと思いWEBアプリ開発の勉強し始めました。（2ヵ月くらい）

練習でWEBアプリ開発をしていますが、初めてつまったのがプルダウンメニューの作成なので勉強がてらまとめてみます。同じように悩んでる人の役に立てたらいいなと思います。

勉強始めたばかりなのでここ違うよ！っていうところがあればご指摘いただけると嬉しいです。

やりたいこと

DB(Gameモデル)に格納しているデータをプルダウン（ドロップダウン）で選択して別のDB(Stageモデル)に保存したい。

モデル設計

Gameモデル

カラム	型
id	integer
game_name	text

Stageモデル

カラム	型
id	integer
game_id ※	integer
stage_name	text

※Stageのgame_idがGameのidを外部参照しているイメージ

form_tagで実装

これまでユーザからの入力は全部form_tagで実現していたので、まずはそれでむりやり実装したみた。

新規登録用ページ（stage_a）のView

<!-- 新規登録アクション（stage_n）にデータ渡す -->
<%= form_tag("/stage_n") do %>
  <div class="form">
    <div class="form-body">
      <p>game_name</p>
      <select name="game_name">
        <%@games.each do |game|%>
          <option value=<%="#{game.game_name}"%>><%=game.game_name%></option>
        <%end%>
      </select>
      <p>stage_name</p>
      <input type="text" name="stage_name">
      <input type="submit" value="保存">
    </div>
  </div>
<% end %>

新規登録用のController

  def stage_a
    @games = Game.all
  end

  def stage_n
    @game = Game.find_by(game_name: params[:game_name])
    @stage = Stage.new(game_id: @game.id,stage_name: params[:stage_name])
    @stage.save
  end

新規登録用ページ（stage_a）のブラウザでの見え方

期待値通りにできた。のでこれでいいのかとも思ったが、ネットで検索してみるとそもそもモデルに紐づいたユーザ入力はform_tagではなくてform_forを使うのが一般的らしい。

form_forで実装

RailsのインプットはProgateでしかしていないのでform_forは初見だが、見よう見まねで実装してみた。

新規登録用ページ（stage_a）のView

<!-- 新規登録アクション（stage_n）にデータ渡す -->
<%= form_for("@stage", url: {controller: 'home', action: 'stage_n' }) do |f|%>
  <div class="form">
    <div class="form-body">
      <p>game_name</p>
      <%= f.collection_select(:game_id,@games,:id,:game_name)%>
      <p>stage_name</p>
      <%= f.text_field :stage_name%>
      <%= f.submit "保存"%>
    </div>
  </div>
<% end %>

新規登録用のController

  def stage_a
    @games = Game.all
    @stage = Stage.new
  end

  def stage_n
    Stage.create(stage_params)
    redirect_to("/stage_view")
  end

    private
    def stage_params
      params.require(:@stage).permit(:stage_name, :game_id)
    end

新規登録用ページ（stage_a）のブラウザでの見え方

なんとか期待値通りになった。無理にループを自分で実装しなくてもよくてすっきりと記述できた。

form_for("保存するモデルのインスタンス", url: {送信先のアクション}) do |f|

本来なら送信先のアクションについても記載しなくても自動でルーティングしてくれるらしいが、うまくルーティングできなかったため記載した。
プルダウン形式は以下のf.collection.selectで実現できた。

f.collection_select(保存カラム,参照インスタンス,保存する参照先カラム,表示する参照先カラム)

ついでに、通常のテキストボックス（1行）は以下のf.text_field。

f.text_field 保存カラム

form_forの使い方については【Rails】form_forの使い方をマスターしよう！のページがとても分かりやすかった。というよりRailsのヘルパーメソッドに基本的にこのサイトにまとめられているので今後参考にしていきたい。

form_withで実装

from_forについて調べていたら、Rails5.1以降はform_withを使用することが推奨されているとのこと。これについても見よう見まねで実装してみた。

新規登録用ページ（stage_a）のView

<!-- 新規登録アクション（stage_n）にデータ渡す -->
<%= form_with(model: @stage, url: {controller: 'home', action: 'stage_n'} ,local: true) do |form|%>
  <div class="form">
    <div class="form-body">
      <p>game_name</p>
      <%= form.collection_select(:game_id,@games,:id,:game_name)%>
      <p>stage_name</p>
      <%= form.text_field :stage_name%>
      <%= form.submit "保存"%>
    </div>
  </div>
<% end %>

新規登録用のController

  def stage_a
    @games = Game.all
    @stage = Stage.new
  end


  def stage_n
    @stage=Stage.new(game_id: params[:stage][:game_id],stage_name: params[:stage][:stage_name] )
    @stage.save
    redirect_to("/stage_view")
  end

新規登録用ページ（stage_a）のブラウザでの見え方

これも他と変わらずに期待値通り。正直form_forとそんなに変わらないじゃんと思った。参考にしたページの記述に似せたためControllerに多少違いはあるが、同じ書き方をしても問題ないと思っている。（試してはいない）

form_tagとform_forとform_withについて

それぞれの使い分けについてもざっくり調べてみた。まず、form_tagとform_forについては以下のサイトが参考になった。

Railsのform_for/form_tagの分け方の意図としては、

form_for: 任意のmodelに基づいたformを作るときに使う
form_tag: modelに基づかないformを作るときに使う

ということです。
つまり、あるuserモデルに基づいたuserを作成するときはform_forを使い、
そうではなく、検索窓のような何のモデルにも基づかないformを作りたいときはform_tagを使うのが原則です。

【Rails】form_for/form_tagの違い・使い分けをまとめた

モデルに紐づいたフォームか否かが使い分けの基準と理解した。

そして、form_withはform_tagとform_forの機能をまとめたヘルパーメソッドである。form_withの使用が推奨されていることから、Rails5.1以降を使用する場合はform_withを使用すべきと考えてよいと思う。

プルダウン同士の連携

プルダウンメニューは作れたが、次は別の問題が発生した。
1つ目のプルダウンを選択したら2つ目のプルダウンで選択できる内容が変更できるような入力フォームを作ろうと考えたが、Viewを更新しないとアクションにデータを渡せない。

これを解決するためにはAjaxを理解する必要があるようだが今は？？？状態なので調べて理解・実装したら、別の記事でまとめようと思う。

どうも7noteです。文字を行で省略して最後の文字を「…」にする方法。

IE非対応ですが、CSSだけで文字省略する方法が神がかり的に便利だったので使い方をまとめます。
YouTubeでもこの方法を使って動画タイトルを省略しているようです。

見本

ソース

style.css

.text-ellipsis {
  display: -webkit-box;          /* 魔法の呪文 */
  -webkit-box-orient: vertical;  /* 魔法の呪文 */
  -webkit-line-clamp: 2;         /* 表示行数を指定。0以上の整数。 */
  overflow: hidden;              /* はみ出た部分を非表示 */
}

たったこの4行だけで、文章が長くなってもスッキリ見せることができます。
表示させる行数が指定できるのはとても便利ですね。

レスポンシブ等で無効化にする時は以下のようにすることで打ち消しが可能です。

/* スマホだけ打ち消したい時は以下のように指定 */
@media screen and (max-width:768px) {
  .text-ellipsis {
    display: block;
    overflow: visible;
  }
}

注意点

• CSSで消しているので、ソース上ではすべての文書が記載されている。（ブラウザでソースを表示すると分かる）
• :hover時の下線（text-decorarion: underline;）等は効かない。透明度（opacity）も効かない。
• 「…」以外の記号や文字にしたり、「…」の文字色や大きさなどの装飾ができない。
• box-orientは非推奨のプロパティのため、のちのち動作しない可能性がある。

まとめ

phpだとUTF-8でバイト数が3になってしまったり、文字数で制限してもそもそもフォントによって文字幅が違うから綺麗に文末で省略（…）させるのが難しかったのですが、
これならCSSだけで簡単に装飾できるため、文字省略の決定版といっても過言ではない。

IEが非対応だが、phpでもある程度の省略をかましながら、両方使うことでそこそこ綺麗に見せることは可能だと思います。

参考：https://www.white-space.work/text-ellipsis-php-and-css/

1行だけならIEにも対応可能な書き方

style.css

.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

See the Pen Bootstrapでアコーディオン by 熊瀬川直也 (@momonoki1990) on CodePen.

• BootstrapはCSS・JSどちらも読み込む(https://getbootstrap.jp/)
• 全体をulで囲み、親+子の1セットをliで囲む(この辺はアコーディオンとは直接関係ないのでなんでもよし)
• 子要素にclass="collapse"をつけてつぶす。また、id="target1"もつけておく
• 親要素にdata-toggle="collapse" data-target="#target1"をつける。「トグル(スイッチ)」とは一般的に切り替えスイッチのことで、ここでは「開閉を切り替えるためのスイッチ」かな。
• data-toggle="collapse"を指定することでその要素がアコーディオンを開閉するためのスイッチとなる。
• data-targetで開閉対象を指定する。子要素のidをセットする。#をつけるのを忘れず。
• data-targetにセットするidは固有にすること。子要素すべてに同じidを付与(この時点で問題だが)してそれをセットすると、一つのボタンを押すことで全てが開閉してしまう。
• 親要素に付加するaria-expand="false" aria-controls="target1"はどちらも読み上げブラウザに付加情報を与えるもので、aria-expandは開閉状態、aria-controlsは開閉対象を示す。
• 矢印はposition: absoluteで浮かせて、position: relativeをセットした親要素に対する相対位置で位置を定める。

参考

とほほのBootstrap 4入門
http://www.tohoho-web.com/bootstrap/collapse.html