CSSで水平スクロールを実装する

• box1
• box2
• box3
• box4

ポイントは次のとおり。
• - ulおよびliを使ってリスト構造を表現する
• - ulに対してoverflow-x: auto;
• white-space: nowrap;を指定
• - liに対して、display: inline-block;を指定
• - liに対してwidth: 90%;のような横幅を指定すると、コンテンツが見切れて見えるhorizontalになる
  横スクロールできることがuserに伝わりやすい

qiita.com

Array#each_cons(cnt) について

Rubyのメソッドeach_consについて

• Array#each_cons(cnt)はselfからcnt個ずつ要素を取り出す
• ブロックに渡す。
• ブロック引数には配列で渡される。
• 取り出す要素は、[要素1, 要素2, 要素3], [要素2, 要素3, 要素4] ...と1つづ前に進みます。
• 似たメソッドにArray#each_slice(cnt)がある。

arr = (1..30).to_a
container = []

arr.each_cons(7) do |i|
  container << i
end

p container

# [[1, 2, 3, 4, 5, 6, 7], 
# [2, 3, 4, 5, 6, 7, 8], 
# [3, 4, 5, 6, 7, 8, 9], 
# [4, 5, 6, 7, 8, 9, 10], 
# [5, 6, 7, 8, 9, 10, 11], 
# [6, 7, 8, 9, 10, 11, 12], 
# [7, 8, 9, 10, 11, 12, 13], 
# [8, 9, 10, 11, 12, 13, 14], 
# [9, 10, 11, 12, 13, 14, 15], 
# [10, 11, 12, 13, 14, 15, 16], 
# [11, 12, 13, 14, 15, 16, 17], 
# [12, 13, 14, 15, 16, 17, 18], 
# [13, 14, 15, 16, 17, 18, 19], 
# [14, 15, 16, 17, 18, 19, 20], 
# [15, 16, 17, 18, 19, 20, 21], 
# [16, 17, 18, 19, 20, 21, 22], 
# [17, 18, 19, 20, 21, 22, 23], 
# [18, 19, 20, 21, 22, 23, 24], 
# [19, 20, 21, 22, 23, 24, 25], 
# [20, 21, 22, 23, 24, 25, 26], 
# [21, 22, 23, 24, 25, 26, 27], 
# [22, 23, 24, 25, 26, 27, 28], 
# [23, 24, 25, 26, 27, 28, 29], 
# [24, 25, 26, 27, 28, 29, 30]]

arr = (1..30).to_a
container = []

arr.each_cons(7) do |i|
  container << i
end

p container.length

#24

(1..10).each_slice(3) {|arr| p arr }

# <実行結果>
# [1, 2, 3]
# [4, 5, 6]
# [7, 8, 9]
# [10]

form練習

form練習

その1

ユーザー名：

パスワード：

好きな果物：りんごぶどう

性別：malefemale
コメント：
見えない入力欄：

ユーザー名：<input type="text" name="username" placeholder = "username"><br><br>
パスワード：<input type="password" name="password" placeholder = "password"><br><br>
好きな果物：<input type="checkbox" name="fruits[]" checked>りんご<input type="checkbox" name="fruits[]" >ぶどう<br><br>
性別：<input type="radio" name="sex" checked>male<input type="radio" name="sex">female<br>
コメント：<textarea name="comments", placeholder = "sample"></textarea><br>
見えない入力欄：<input type="hidden" name="token"><br>
<input type="submit" value="送信">

その2

メール（type="email"）:

URL（type="url"）:

検索（type="search"）:

電話（type="telephone"）:

数値（type="number"）:

日付（type="date"）:

日時（type="datetime"）:

ローカル日時（type="datetime-local"）:

月（type="month"）:

週（type="week"）:

時間（type="time"）:

レンジ（type="range"）:

色（type="color"）:

<form method="post"><label>メール（type="email"）:<input type="email" name="email"></label><input type="submit" value="送信"></form>
<form method="post"><label>URL（type="url"）:<input type="url" name="url"></label><input type="submit" value="送信"></form>
<form method="post"><label>検索（type="search"）:<input type="search" name="search"></label><input type="submit" value="送信"></form>
<form method="post"><label>電話（type="telephone"）:<input type="tel" name="tel"></label><input type="submit" value="送信"></form>
<form method="post"><label>数値（type="number"）:<input type="number" name="number"></label><input type="submit" value="送信"></form>
<form method="post"><label>日付（type="date"）:<input type="date" name="date"></label><input type="submit" value="送信"></form>
<form method="post"><label>日時（type="datetime"）:<input type="datetime" name="datetime"></label><input type="submit" value="送信"></form>
<form method="post"><label>ローカル日時（type="datetime-local"）:<input type="datetime-local" name="datetime-local"></label><input type="submit" value="送信"></form>
<form method="post"><label>月（type="month"）:<input type="month" name="month"></label><input type="submit" value="送信"></form>
<form method="post"><label>週（type="week"）:<input type="week" name="week"></label><input type="submit" value="送信"></form>
<form method="post"><label>時間（type="time"）:<input type="time" name="time"></label><input type="submit" value="送信"></form>
<form method="post"><label>レンジ（type="range"）:<input type="range" name="range"></label><input type="submit" value="送信"></form>
<form method="post"><label>色（type="color"）:<input type="color" name="color"></label><input type="submit" value="送信"></form>

エラー "You must use Bundler 2 or greater with this lockfile. (Bundler::LockfileError)"

190419 18:24:22 udemyのカリキュラムを学習中 詰まったところ、解決方法をかく

• 開発環境cloud9
• rubyのversion2.6.0

ruby のversion 違いでエラー

$ ruby -v

$ rvm install 2.4.0
$ rvm --default use 2.4.0

これで再起動した時もversion が変化しない。

irb をしようとした時に

エラー　You must use Bundler 2 or greater with this lockfile. (Bundler::LockfileError)

どうやら bundlerのversionエラーのようだ

解決方法 gemfile.lock内の

BUNDLE WITH
2.0.1→1.17.3

に変えたらエラーが解決した。

追記：191003 23:27:22

$ bundle exec　をつけたところ無事解決した。

stackoverflow.com

SQL 4つの構文

今回のテーマ：SQLで主に扱う4つの構文について

• 書いた理由：SELECT, UPDATE, INSERT, DELETE など学習していく中でそれぞれの書き方を整理するため。
• SQLで主に扱う4構文についての備忘録

[目次]

• 取得
• 挿入
• 更新
• 削除

[本題]

取得

SELECT カラムA, カラムB
FROM テーブル名;

挿入

INSERT INTO テーブル名 (カラムA, カラムB...)
VALUES (値1, 値2...);

更新

UPDATE テーブル名
SET カラムA = 値1, カラムB = 値2
WHERE 条件;

削除

DELETE FROM テーブル名
WHERE 条件;

jquery イベントメソッド：マウス編

今回のテーマ：jQueryイベントメソッドmouse〜を使ってみよう

• マウスをクリックした時（click）
• マウスが要素にかかった時（mouseover）
• マウスがそこから離れた時（mouseout）
• そしてマウスが動いた時（mousemove）
• マウスボタンがはなされた時（mouseup）
• マウスボタンが押下された時（mousedown）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>jQueryの練習</title>
</head>
<body>
    <p>jQueryの練習</p>
    <div id="box" style="width:100px;height:100px;background:purple;"></div>

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script>
        $(function() {
            // click
            // mouseover, mouseout, mousemove
            $('#box').fadeOut(5000, function() {
                alert("hello");
            });
            $('#box')
                .mouseover(function() {
                    $(this).css('background', 'blue');
                })            
                .mouseout(function() {
                    $(this).css('background', 'yellow');
                })
                .mousemove(function(e) {
                    $(this).text(e.pageX);
                }); 
                /* .mouseup(function(){
                    $(this).css('background-color', 'Red');
                })*/
                //マウスボタンがはなされた時
                /* .mousedown(function(){
                    $(this).css('background-color', 'Blue');
               }) */
                //マウスボタンが押下された時
        });
    </script>
</body>
</html>

公式ドキュメント

api.jquery.com

jquery コールバック関数練習

今回のテーマ：コールバック関数

• コールバックの練習
• Q.そもそもコールバックとは？
• A.何らかの処理が終わった後に何らかの処理をすること。

具体的な方法

まずはコールバック関数無しで。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>jQueryの練習</title>
</head>
<body>
    <p>jQueryの練習</p>
    <div id="box" style="width:100px;height:100px;background:blue;"></div>

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script>
        $(function() {
            $('#box').fadeOut(800);
        });
    </script>
</body>
</html>

単純に四角形が消えるだけ。
この後にアラートを表示したい。そこでコールバック関数が使える。

さあ、やってみよう！！

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>jQueryの練習</title>
</head>
<body>
    <p>jQueryの練習</p>
    <div id="box" style="width:100px;height:100px;background:blue;"></div>

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script>
        $(function() {
            $('#box').fadeOut(800, function() {
                alert("gone!");
            });
        });
    </script>
</body>
</html>

• 第2引数にfunctionをとる。
• その中で「alert("gone!");」とすると、
  この要素が fadeOut で消えたときこの処理を実行してくれる。