スーパーウルトラグレートデリシャスワンダフルブログ

初心者の初心者による初心者のためのブログ

アコーディオンメニューを開いたときにコンテンツの一番初めからスクロールさせる

  • list

余計な余白


<button type="button" id="scroll">scroll()</button>
<ul id="scrollTarget">
    <li style="height: 500px;">list</li>
</ul>
<div style="height: 300px;">
    <p>余計な余白</p>
</div>
<script>
  var $scrollTarget = $("#scrollTarget");
  //開閉メニューのボタン
  var $scroll = $("#scroll");
  //topからの位置を取得
  var $scrollInt = $("#scroll").offset().top;
  
  //初期設定
  $scrollTarget.hide();
  
  $scroll.on("click",function(){
    $scrollTarget.slideToggle("normal",function(){
      //表示状態であれば、topからの位置分スクロールトップに移動
      if($scrollTarget.is(":visible")) {
        $("body,html").animate({scrollTop: $scrollInt},"fast");
      }
    });
  });
</script>

パーミッション確認方法など覚書

FTPで画像アップロード後にパーミッションが正しくなくて表示されないとかよくあったのでまとめておく

記号 意味 数字 権限 使用例
r read 4 読み出し 読むだけのHTML,CSS,画像ファイルなど
w write 2 書き込み データの書き込みや書き換えが必要なファイル
x exec 1 実行 サーバー上で実行が必要なファイル touch,rmなどはできない

記述例

数字 記号 意味
644 rw-r--r-- 所有者読み書き可能/所有者以外読み出しのみ (ファイルのデフォルトの権限)
755 rwxr-xr-x 所有者以外書き込み不可 (ディレクトリのデフォルトの権限)
700 rwx------ 所有者のみ読み書き実行可能
666 rw-rw-rw- 読み書きのみ

777 (rwxrwxrwx) はセキュリティ上良くない

$ ls -l は隠しファイルが表示されないので

$ ls -all {パス}

で指定パスのパーミッションを確認する

例:

drwxr-xr-x   18 user  staff     96 12  1 19:48 directory_name
1 2 3 4 5 6 7 8 9 10 11 12
d rwx r-x r-x 18 user staff 96 12 1 19:48 directory_name
  1. ディレクトリかファイルか
    d:ディレクト
    -:ファイル
    |:シンボリックリンク

  2. 所有者の権限

  3. グループの権限

  4. その他のアクセス権限

  5. そのディレクトリにあるディレクトリorファイル数

  6. 所有者名

  7. グループ名

  8. ファイルサイズ

  9. 作成日時もしくは変更日時の月

  10. 作成日時もしくは変更日時の日

  11. 作成日時もしくは変更日時の時間

  12. ファイルもしくはディレクトリ名

変更するときはchmod(change mode)で変更可能

$ chmod {変更したい権限} {パス}

SSH接続時にログインメッセージを表示する

/etcディレクトリにmotdファイルの作成

$ sudo touch /etc/motd

書き込む

$ sudo vi /etc/motd

次回ログイン時に表示されるのを確認

表示されなければパーミッションを644にする

田原年彦は下記サイトで作成しました
他にもメッセージを動的にする方法とかもあるみたいなので時間があれば試したい

tool-taro.com

GitLabのSSHキー設定方法覚書

たぶん大分端折ってる


$install -m 0600 -d ~/.ssh

ホームディレクトリに.sshフォルダの作成

$ssh-keygen -t rsa -b 4096 -f ~/.ssh/id_rsa

鍵ファイルの作成
ssh-keygensshの鍵の作成 key generator
-t:鍵ファイルのタイプ RSAを指定
-b:鍵ファイルのビット数 デフォルトは2048bit
-f:ファイル名を含むフルパス

Enter passphrase (empty for no passphrase): 
Enter same passphrase again:

鍵ファイルのPWを求められるので設定

~/.sshに作成された公開鍵(id_rsa.pub)をGitLabのsshkeyに登録

$ ssh -T git@gitlab.com

本当にgitlabにつなげて良いかみたいなことを聞かれるのでyes

Welcome to GitLab, @{ユーザー名}!

が表示されればOK

繋がらなければ~/.sshの中に自動的に生成されるknown_hostsファイルの鍵ファイルのキャッシュを削除する

秘密鍵を登録する

$ssh-add ~/.ssh/id_rsa 
Enter passphrase for ~/.ssh/id_rsa: {PW入力}
Identity added: ~/.ssh/id_rsa (~/.ssh/id_rsa)

参考にしたサイト

qiita.com

qiita.com

繋がらない時に参考にしたサイト

sbkro.hatenablog.jp

jQueryのDOM操作メソッド 〜要素の追加・削除編〜

after - 指定した要素の後ろに引数で指定した要素を追加

$("#after").on("click",function(){
  $(this).after($(this).clone());
});

insertAfter - 指定した内容を引数で指定した要素の後ろに追加

$("#insertAfter").on("click",function(){
  $(this).clone().insertAfter($(this));
});

append - 指定した要素の中の後ろに引数で指定した要素を追加

$("#append").on("click",function(){
  $(this).append($(this).clone());
  console.log(this);
});

appendTo - 指定した内容を引数で指定した要素の中の後ろに追加

$("#appendTo").on("click",function(){
  console.log(this);
});

before - 指定した要素の前に引数で指定した要素を追加

$("#before").on("click",function(){
  $(this).before($(this).clone());
});

insertBefore - 指定した内容を引数で指定した要素の前に追加

$("#insertBefore").on("click",function(){
  $(this).clone().insertBefore($(this));
});

prepend - 指定した要素の中の前に引数で指定した要素を追加

$("#prepend").on("click",function(){
  $(this).prepend($(this).clone());
});

prependTo - 指定した内容を引数で指定した要素の中の前に追加

$("#prependTo").on("click",function(){
  $(this).clone().prependTo($(this));
});

clone - 指定した要素の前に追加

記述済みなので省略

detach - 要素の削除

削除後もjQueryから参照可能

var detachTarget = $("#detachTarget");
$("#detach").on("click",function(){
  var isDetachClass = $(this).toggleClass("detach");
  if(isDetachClass.hasClass("detach")) {
    detachTarget.detach();
  }else {
    $(this).after(detachTarget);
  }
});

remove - 要素の削除

$("#remove").on("click",function(){
  $(this).remove();
});

empty - 要素の削除

親を残して削除

$("#empty").on("click",function(){
  $(this).empty();
});

html - 指定したhtmlの取得・セット

$("#html").on("click",function(){
  console.log($(this).html());//指定セレクタを除いたhtmlを返す
  $(this).html($(this).clone());
});

replaceAll - 引数で指定した要素を指定した要素と入れ替える

$("#replaceAll").on("click",function(){
  $("<p>入れ替え</p>").replaceAll($(this));
});

replaceWith - 指定した要素と引数で指定した要素を入れ替える

$("#replaceWith").on("click",function(){
  $(this).replaceWith($("<p>入れ替え</p>"));
});

text - テキストの取得と書き換え

$("#text").on("click",function(){
  alert($(this).text());//テキストの取得
  $(this).text("差し替え");//差し替え
});

wrap - 指定した親要素で囲む

$("#wrap").on("click",function(){
  $(this).wrap("<div style='padding: 10px; background-color: red;' />");
});

unwrap - 親要素を削除

$("#unwrap").on("click",function(){
  $(this).children("p").unwrap();
});

wrapInner - 指定した要素の中に子要素を入れる

$("#wrapInner").on("click",function(){
  $(this).wrapInner("<p style='padding: 10px; background-color: red;' />");
});

wrapAll - 指定した要素全てを親要素で囲む

$("#wrapAll").on("click",function(){
  $("button").wrapAll("<div style='padding: 10px; background-color: red;' />");
});

jQueryのDOM操作メソッド 〜エフェクト編〜

fadeOut - 要素をフェードアウトして非表示

fadeOutTarget
$("#fadeOut").on("click",function(){
  $(this).next(".fadeOutTarget").fadeOut("fast",function(){
    console.log(this);//アニメーション完了後にしたい処理
  });
});

fadeIn - 要素をフェードインして表示

$("#fadeIn").on("click",function(){
  $(this).next(".fadeInTarget").fadeIn("slow",function(){
    console.log(this);//アニメーション完了後にしたい処理
  });
});

fadeToggle - fadeInとfadeOutの切り替え

fadeToggleTarget
$("#fadeToggle").on("click",function(){
  $(this).next(".fadeToggleTarget").fadeToggle("normal",function(){
    console.log(this);//アニメーション完了後にしたい処理
  });
});

fadeTo - 指定したアニメーションでフェード処理

fadeToTarget
$("#fadeTo").on("click",function(){
  $(this).next(".fadeToTarget").fadeTo(1000,0.3,function(){
    console.log(this);//アニメーション完了後にしたい処理
  });
});

toggle - showとhideの切り替え

toggleTarget
$("#toggle").on("click",function(){
  $(this).next(".toggleTarget").toggle(1000,function(){
    console.log(this);//アニメーション完了後にしたい処理
  });
});

slideDown - スライドで要素を表示

$("#slideDown").on("click",function(){
  $(this).next(".slideDownTarget").slideDown(1000,function(){
    console.log(this);//アニメーション完了後にしたい処理
  });
});

slideUp - スライドで要素を非表示

slideUpTarget
$("#slideUp").on("click",function(){
  $(this).next(".slideUpTarget").slideUp(1000,function(){
      console.log(this);//アニメーション完了後にしたい処理
  });
});

slideToggle - slideDownとslideUpの切り替え

slideToggleTarget
$("#slideToggle").on("click",function(){
  $(this).next(".slideToggleTarget").slideToggle(1000,function(){
      console.log(this);//アニメーション完了後にしたい処理
  });
});

animate - 指定したcssのアニメーションの指定

animateTarget
$("#animate").on("click",function(){
  var animeteData = ({
    "background-color":"red",
    "color":"black",
    "height":"100px"
  });
  $(this).next(".animateTarget").animate(animeteData,"normal","linear",function(){
    console.log(this);//アニメーション完了後にしたい処理
  });
});

jQueryのDOM操作メソッド 〜属性編〜

jQueryのDOM操作系のメソッドについてまとめておく

追加していく予定

.addClass - クラスを追加する

$("#addClass").on("click",function(){
  $(this).addClass("add");
  $(this).addClass("add2 add3");//複数指定
});

.attr - 属性の取得

$("#attr").on("click",function(){
  alert($(this).attr("id"));
  $(this).attr("id","attr2");//第二引数に変更したい値を指定できる
});

.hasClass - そのクラス名があるかどうか

$("#hasClass").on("click",function(){
  console.log($(this).hasClass("btn"));//true
  console.log($(this).hasClass("btn2"));//false
});

.prop - プロパティのチェック

$("#prop").on("click",function(){
  console.log($("input[name='checked']").prop("checked"));//true
  console.log($("input[name='unchecked']").prop("checked"));//false
  $("input[name='unchecked']").prop("checked",true);//trueに変更
});

.removeAttr - 指定した属性の削除

$("#removeAttr").on("click",function(){
  $(this).removeAttr("id");
});

.removeClass - 指定したクラス名の削除

$("#removeClass").on("click",function(){
  $(this).removeClass("btn");//複数指定で全部消したい場合はからで良い
});

.removeProp

プロパティの削除

$("#removeProp").on("click",function(){
  $("input[name='removePropTarget']").removeProp("disabled");
});

.toggleClass - 指定したクラスのon/offを切り替える

$("#toggleClass").on("click",function(){
  $(this).toggleClass("btn");//複数指定で全部消したい場合はからで良い
  $(this).toggleClass("btn",false);//第二引数にboolでtrueの場合は追加してfalseの場合は削除する
  $(this).toggleClass(false);//第一引数にboolを指定すると追加もしくは削除する
});

toggleClassが一番使えそう
おわり

bootstrap3のブレイクポイント

v.3の話
4のことはまだ導入してないから知らん

クラス名 breakpoint 対象
col-xs-x ~767px スマホ
col-sm-x 768~991px タブレット
col-md-x 992~1199px デスクトップ
col-lg-x 1200px~ デスクトップ

visible-sm / hidden-sm で対象の時に表示・非表示を切り替えてくれる

MySQLのORDER BY でNULLを最後にする

NULLを含むカラムでORDER BYする

SELECT num
FROM tbl
ORDER BY num ASC

num
NULL
NULL
NULL
1
2
4
6
9

普通に昇順指定するとNULLが最初に来てしまうのて下記のように修正

SELECT num
FROM tbl
ORDER BY num IS NULL ASC , num ASC

num
1
2
4
6
9
NULL
NULL
NULL

でOK

MySQLのCASE文

使用したことはないけどせっかく覚えたので、一応メモ

SELECT 
    (CASE flag 
    WHEN 1 THEN "フラグ1"
    WHEN 2 THEN "フラグ2"
    ELSE "その他" 
    END) AS flag
FROM users

下記もOK

SELECT 
    (CASE 
    WHEN flag = 1 THEN "フラグ1"
    ELSE "その他" 
    END ) AS flag,
    (CASE 
    WHEN email LIKE '%.jp' THEN "jpn"
    END) AS tlb
FROM users
  • ELSEを記述しない場合はNULLになる

便利だけど忘れがちで使ってないMacのショートカット

Mac初心者が主に忘れがちなものを書いておく
主にFinderでの動作
またあれば追加していくかも

ショートカット 動作
探したいファイル名をタイプする そのフォルダ内を検索する
command + Shift + G ファイルのパス表示または移動
command + Shift + C ルートディレクトリへ移動
command + Shift + D デスクトップへ移動
command + Shift + H ホームディレクトリへ移動
command + Shift + U ユーティリティ フォルダへ移動
command + ↑ 一個上の親フォルダを開く
command + ↓ 選択したファイルを開く
command + [ 履歴戻る
command + ] 履歴進む
command + F 検索
command + D 選択したファイルの複製
command + M 最前面のウィンドウを最小化する
command + H 最前面のウィンドウを非表示にする
control + command + スペースバー 文字ビューアの起動

phpの演算子の優先順位

評価順位 表記 名前 意味
&& 論理積 $a && $b $aと$bがTRUEの時にTRUE
|| 論理和 $a || $b $aまたは$bがTRUEの時にTRUE
= 代入演算子 $a = $b $aに$bを代入
and 論理積 $a and $b $aと$bがTRUEの時にTRUE
xor 排他的論理和 $a xor $b $aか$bどちらかがTRUEの時にTRUE
or 論理和 $a or $b $aまたは$bがTRUEの時にTRUE

ex

<?php 
//&&,and
$bool = TRUE && FALSE ? 1 : 2;//2
$bool = TRUE and FALSE ? 1 : 2;//TRUE
//||,or
$bool = TRUE || FALSE ? 1 : 2;//1
$bool = TRUE or FALSE ? 1 : 2;//TRUE

and,or=より優先度が低く、$bool = TRUEが実行されるためこのような結果になる

=と同時に使いたい時は条件式を括弧で囲ってあげればOK

<?php 
$bool = (TRUE and FALSE) ? 1 : 2;//2
$bool = (TRUE or FALSE) ? 1 : 2;//1

xorを初めて知った
どちらか一方がTRUEの場合に時にのみTRUEを返す

<?php
$bool = (TRUE xor TRUE) ? 1 : 2;//2
$bool = (TRUE xor FALSE) ? 1 : 2;//1

日毎の登録者数をカウントして歯抜けさせずに日付毎のデータを取得する

id create_time
1 2018-09-05 08:00:00
2 2018-09-05 12:35:00
3 2018-08-21 20:10:22
4 2018-09-02 11:10:48
5 2018-09-03 19:13:14

日付毎にユーザーの登録数を取得したい

SELECT 
    COUNT(users.id) AS id, 
    DATE_FORMAT(create_time, "%Y-%m-%d") AS create_time
FROM `users`
GROUP BY DATE_FORMAT(create_time, "%Y-%m-%d") ASC

↓ 結果

user_count create_time
1 2018-08-21
1 2018-09-02
1 2018-09-03
2 2018-09-05

これだとカウント数がない日のデータが取得できない

SELECT
    COALESCE(user_tbl.user_count, 0) AS user_count, /*user_countがNULLの場合は0に変換*/
    date_tbl.`date`
FROM ( 
    SELECT DATE_ADD('2018-08-21', INTERVAL (num.generate_series -1) DAY ) AS `date` /*DATE_ADD()は当日を含めないので-1するか、前月末を基準とする*/
    FROM (
        SELECT 0 AS generate_series
        FROM DUAL 
        WHERE @num := (1 - 1) * 0 
        UNION ALL
        SELECT @num := @num + 1 /*step*/
        FROM `information_schema`.COLUMNS 
        LIMIT 31 /*1ヵ月分を取得するので末日の分だけ日数を取得*/
    ) AS num /*+1していく連番のテーブル*/
) AS date_tbl
LEFT JOIN(
    SELECT COUNT(users.id) AS user_count, DATE_FORMAT(users.create_time, '%Y-%m-%d') AS create_time
    FROM users
    GROUP BY DATE_FORMAT(users.create_time, '%Y-%m-%d') ASC
) AS user_tbl
ON date_tbl.`date` = user_tbl.create_time /*カレンダーの日付と本来のデータの日付をJOIN*/

↓ 結果

user_count create_time
1 2018-08-21
0 2018-08-22
0 2018-08-23
0 2018-08-24
0 2018-08-25
0 2018-08-26
0 2018-08-27
0 2018-08-28
0 2018-08-29
0 2018-08-30
0 2018-08-31
0 2018-09-01
1 2018-09-02
1 2018-09-03
0 2018-09-04
2 2018-09-05
0 2018-09-06

(略)


これで歯抜けが埋まる
というか初めて知ったけどdate予約語だと思ってバッククォートで囲ったけど予約語じゃなかった
MySQL :: MySQL 5.6 リファレンスマニュアル :: 9.3 予約語

参考にしたサイト

symfoware.blog.fc2.com

d.hatena.ne.jp

DATE_ADD()で特定の日付のn日後・n日前などの日付を取得する

create_date
2018-09-05
2018-09-05
2018-09-03
2018-09-02
2018-08-21

n日後などの日付を取得する

SELECT
    create_date,
    DATE_ADD(create_date, INTERVAL 10 DAY) AS after_day,/*10日後*/
    DATE_ADD(create_date, INTERVAL -10 DAY) AS before_day,/*10日前*/
    DATE_ADD(create_date, INTERVAL 2 WEEK) AS after_week,/*2週間後*/
    DATE_ADD(create_date, INTERVAL -2 WEEK) AS before_week,/*2週間前*/
    DATE_ADD(create_date, INTERVAL 3 MONTH) AS after_month,/*3ヶ月後*/
    DATE_ADD(create_date, INTERVAL -3 MONTH) AS before_month,/*3ヶ月前*/
    DATE_ADD(create_date, INTERVAL 1 YEAR) AS after_year,/*1年後*/
    DATE_ADD(create_date, INTERVAL -1 YEAR) AS before_year/*1年前*/
FROM users
WHERE 1
ORDER BY create_date DESC

create_date after_day before_day after_week before_week after_month before_month after_year before_year
2018-09-05 2018-09-15 2018-08-26 2018-09-19 2018-08-22 2018-12-05 2018-06-05 2019-09-05 2017-09-05
2018-09-05 2018-09-15 2018-08-26 2018-09-19 2018-08-22 2018-12-05 2018-06-05 2019-09-05 2017-09-05
2018-09-03 2018-09-13 2018-08-24 2018-09-17 2018-08-20 2018-12-03 2018-06-03 2019-09-03 2017-09-03
2018-09-02 2018-09-12 2018-08-23 2018-09-16 2018-08-19 2018-12-02 2018-06-02 2019-09-02 2017-09-02
2018-08-21 2018-08-31 2018-08-11 2018-09-04 2018-08-07 2018-11-21 2018-05-21 2019-08-21 2017-08-21


datetime型もOK

create_time
2018-09-05 08:00:00
2018-09-05 12:35:00
2018-08-21 20:10:22
2018-09-02 11:10:48
2018-09-03 19:13:14
SELECT
    create_time,
    DATE_ADD(create_time, INTERVAL 1 HOUR) AS after_hour,/*1時間後*/
    DATE_ADD(create_time, INTERVAL -1 HOUR) AS before_hour,/*1時間前*/
    DATE_ADD(create_time, INTERVAL 30 MINUTE) AS after_minute,/*30分後*/
    DATE_ADD(create_time, INTERVAL -30 MINUTE) AS before_minute,/*30分前*/
    DATE_ADD(create_time, INTERVAL 30 SECOND) AS after_second,/*30秒後*/
    DATE_ADD(create_time, INTERVAL -30 SECOND) AS before_second,/*30秒前*/
    DATE_ADD(create_time, INTERVAL 10 MICROSECOND) AS after_microsecond,/*10マイクロ秒後*/
    DATE_ADD(create_time, INTERVAL -10 MICROSECOND) AS before_microsecond/*10マイクロ秒前*/
FROM users
WHERE 1
ORDER BY create_time DESC

create_time after_hour before_hour after_minute before_minute after_second before_second after_microsecond before_microsecond
2018-09-05 12:35:00 2018-09-05 13:35:00 2018-09-05 11:35:00 2018-09-05 13:05:00 2018-09-05 12:05:00 2018-09-05 12:35:30 2018-09-05 12:34:30 2018-09-05 12:35:00.000010 2018-09-05 12:34:59.999990
2018-09-05 08:00:00 2018-09-05 09:00:00 2018-09-05 07:00:00 2018-09-05 08:30:00 2018-09-05 07:30:00 2018-09-05 08:00:30 2018-09-05 07:59:30 2018-09-05 08:00:00.000010 2018-09-05 07:59:59.999990
2018-09-03 19:13:14 2018-09-03 20:13:14 2018-09-03 18:13:14 2018-09-03 19:43:14 2018-09-03 18:43:14 2018-09-03 19:13:44 2018-09-03 19:12:44 2018-09-03 19:13:14.000010 2018-09-03 19:13:13.999990
2018-09-02 11:10:48 2018-09-02 12:10:48 2018-09-02 10:10:48 2018-09-02 11:40:48 2018-09-02 10:40:48 2018-09-02 11:11:18 2018-09-02 11:10:18 2018-09-02 11:10:48.000010 2018-09-02 11:10:47.999990
2018-08-21 20:10:22 2018-08-21 21:10:22 2018-08-21 19:10:22 2018-08-21 20:40:22 2018-08-21 19:40:22 2018-08-21 20:10:52 2018-08-21 20:09:52 2018-08-21 20:10:22.000010 2018-08-21 20:10:21.999990

フォーマット変えたかったらDATE_FORMAT()してあげれば良い

DATE_FORMAT(DATE_ADD(create_time, INTERVAL 1 HOUR),'%H:%i:%s') AS after_hour,/*1時間後*/

unixtimeのフォーマット変換してDATE_ADD()する

DATE_ADD(FROM_UNIXTIME(create_time,"%Y-%m-%d") , INTERVAL 10 day) AS after_day,/*10日後*/

INTERVALの存在忘れそう
てかテーブルレイアウトブチ抜けてるのがきになる...