初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます。

ufw(Uncomplicated Fire Wall )ファイアウォール設定

コマンド一覧

#起動・停止
sudo ufw enable
sudo ufw disable

#リスト表示
sudo ufw app list

#ステータス一覧
sudo ufw status numbered

#許可・拒否
sudo ufw allow[ポート番号]
sudo ufw deny [ポート番号]

sudo ufw allow 'WWW' #port80のみ許可
sudo ufw allow 'WWW Cache' #port8080のみ許可
sudo ufw allow 'WWW Full' #port80/443のみ許可
sudo ufw allow 'WWW Secure' #port443のみ許可

#削除
sudo ufw delete リスト番号

ネットワークアドレスを指定接続許可

#(192.168.1.0/24だけssh接続を許可) 
# 他のネットワークからは接続できない
sudo ufw allow from 192.168.1.0/24 to any port 22

#(192.168.10.0/24だけMYSQL接続を許可) 
sudo ufw allow from 192.168.11.0/24 to any port 3306

jQuery メソッド一覧 健忘録

トレンドとしては下火になってきたjQueryですが まだまだ書くことがあります。 がしかし、小生はいつも書くときにググっているので忘れてしまうので書いときます!

メソッド 意味 パラメータ追加時
.css() CSSの値を取得or書き換え 指定のCSSスタイルに変更
.html() 要素の値をHTMLとして取得or書き換え 指定のhtmlに書き換える
.text() 要素の値をテキストとして取得or書き換え 指定のテキストに書き換える
.prepend() 要素内の先頭にHTMLを挿入 【必須】 挿入するhtmlの指定|
.append() 要素内の末尾にHTMLを挿入 【必須】 挿入するhtmlの指定
.prependTo() 要素内の先頭にHTMLを挿入 【必須】 移動先の指定
.appendTo() 要素内の末尾にHTMLを挿入 【必須】 移動先の指定
.before() 指定した要素の前にHTMLを挿入 【必須】 挿入するhtmlの指定
.after() 指定した要素の後にHTMLを挿入 【必須】 挿入するhtmlの指定
.insertBefore() 指定した要素を、任意の要素の前に移動 【必須】 移動先の指定
.insertAfter() 指定した要素を、任意の要素の後に移動 【必須】 移動先の指定
.wrap() 指定した要素を、任意の要素で包む 【必須】 包む要素の指定
.unwrap() 指定した要素を囲んでいるタグを削除する
.wrapAll() 指定した要素が複数ある場合に、任意の要素で包む 【必須】 包む要素の指定
.wrapInner() 指定した要素の子要素やテキストを、任意の要素で包む 【必須】 包む要素の指定
.replaceWith() 指定した要素そのものを、任意の要素に置き換える 【必須】置き換える要素を指定
.replaceAll() 指定した要素そのものを、任意の要素に置き換える 【必須】置き換える対象をセレクタで指定
.remove() 指定した要素を削除
.attr() 属性値の取得or設定 指定の値に設定・変更
.vall() 指定した要素のvalueの値を取得or設定する 指定の値に設定・変更
.prop() 指定した要素のプロパティを取得or設定する 指定の値に設定・変更
.removeAttr() 指定した要素の任意の属性を削除 【必須】削除する属性を指定
.addClass() クラスを追加 【必須】追加するクラスを指定
.removeClass() クラスの削除 【必須】削除するクラスを指定
.toggleClass() クラスの追加・削除を切り替える
.reverse() 指定した配列の順序を逆順にする
.makeArray() jQueryオブジェクトを配列に変換する 【必須】変換するjQueryオブジェクトを指定
.has() 指定した要素が子要素を持っているかを判定する 【必須】判定する子要素を指定
length 指定した要素の数を取得する
.parent() / .parents() 親要素を取得する
.find() 指定した要素の子要素をすべて取得する
.children() 指定した要素の直下の子要素を取得する
.clone() 指定した要素のコピーを作成する
.eq() 指定した要素において、その順番で指定して取得する 要素の順番を0から始まる数字で指定
.get() 指定した要素をDOMオブジェクトとして取得する 指定した順番の要素を取得
.prev() 指定した要素の直前の兄弟要素を取得 さらに限定して要素の条件を指定
.prevAll() 指定した要素の前にある兄弟要素を全て取得する |
.prevUntil() 指定した要素の前にある兄弟要素から、パラメータで指定した条件に一致する要素が出てくるまでを選択して取得 どこまで取得するかの条件を指定
.next() 指定した要素の直後の兄弟要素を取得
.nextAll() 指定した要素の後にある兄弟要素を全て取得する
.nextUntil() 指定した要素の後にある兄弟要素から、パラメータで指定した条件に一致する要素が出てくるまでを選択して取得 どこまで取得するかの条件を指定
.siblings() 指定した要素の兄弟要素を全て取得 さらに限定して要素の条件を指定
.closest() 指定した要素から最も近い指定の親要素を取得 【必須】要素の条件を指定
.contents() 指定した要素の子要素・テキストノードを全て取得
.hide()/.fadeOut 要素を非表示にする ミリ秒でスピードを指定
.show()/fadeIn 非表示要素を表示する ミリ秒でスピードを指定
.fadeTo() 透明度を変更する 【必須】ミリ秒でスピードを指定、変更する透明度を指定
.sildeUp() スライドアップさせて非表示にする ミリ秒でスピードを指定
.slideDown() スライドダウンさせて表示させる ミリ秒でスピードを指定
.slideToggle() スライドアップ・ダウンを切り替えて表示・非表示させる ミリ秒でスピードを指定

統計学・数学 英語表記 健忘録

いつも忘れるので健忘録として残しておきます。

日本語 英語 読み方 足し算(名詞) addition アディション 足す(動詞) plus/add プラス/アド 引き算(名詞) subtraction サブトラクション 引く(動詞) minus/subtract マイナス/サブトラクト 掛け算(名詞) multiplication ムルティプリケーション 掛ける(動詞) times/multiply タイムズ/ムルティプライ 割り算(名詞) division ディヴィジョン 割る(動詞) divide ディヴァイド

「正数」 "positive number" 「負数」 "negative number"

「小数」 "decimal" (デシマル) 「小数点」 "decimal point" (デシマル・ポイント)

「累乗」 "power" 「べき指数」 "exponent"

「確率」 "probability"

Linux ファイルスタンプ find 時間指定検索オプション

Linuxファイルのタイムスタンプは3種類あります。

  • mtime(Modify time):最終変更日時
  • ctime(Change time):inodeの変更日時
  • atime(Access time):最終アクセス日時

findコマンドで時間指定の概念は下記の画像です。(下手くそですいません。。。) min指定も日を分にするだけで基本的な考えは一緒です。

findコマンド 日にち・時間指定
findコマンド 日にち・時間指定

rsync フォルダ毎の差分だけを同期させる(バックアップ)

rsync -auv コピー元フォルダ コピー先フォルダ オプション -u 同期先のファイルの方が新しい場合はスキップする -v 冗長メッセージの表示の有無

コピー元フォルダの指定に【/】スラッシュの有無で動きが違いますので注意してください。

今回は下記のディレクトリで説明します。イヌ/カレーの中身がないのでネコ/カレーとの 同期を取っていきましょう。

.
├── イヌ
│   └── カレー
└── ネコ
    └── カレー
        ├── お肉
        ├── タマネギ
        ├── ニンジン
        └── ジャガイモ

スラッシュあり

NG

rsync -auv ネコ/カレー/ イヌ

結果は残念なことにイヌ/カレーの中に材料をコピーしたかったのですが、 イヌ直下に材料が配置されてしまいます。 ネコ/カレー/の中身をイヌ/直下と同期するよ。という意味になります。

結果

.
├── イヌ
│   ├── お肉
│   ├── カレー
│   ├── タマネギ
│   ├── ニンジン
│   └── ジャガイモ
└── ネコ
    └── カレー
        ├── お肉
        ├── タマネギ
        ├── ニンジン
        └── ジャガイモ

スラッシュありで正確に同期を取るにはこうします。

OK

ネコ/カレー/の中身をイヌ/カレーと同期するよ。という意味になります。

rsync -auv ネコ/カレー/ イヌ/カレー コマンド結果

.
├── イヌ
│   └── カレー
│       ├── お肉
│       ├── タマネギ
│       ├── ニンジン
│       └── ジャガイモ
└── ネコ
    └── カレー
        ├── お肉
        ├── タマネギ
        ├── ニンジン
        └── ジャガイモ

スラッシュなし

スラッシュなしだと【ネコ】フォルダ本体を指します。 ですからコピー先はそのネコフォルダを置くことになります。 イヌ/直下にカレーフォルダがない場合でも、ネコ/カレー/を同期しますので 問題なく動作します。

rsync -auv ネコ/カレー イヌ

コマンド結果

.
├── イヌ
│   └── カレー
│       ├── お肉
│       ├── タマネギ
│       ├── ニンジン
│       └── ジャガイモ
└── ネコ
    └── カレー
        ├── お肉
        ├── タマネギ
        ├── ニンジン
        └── ジャガイモ

仮にイヌ/カレーの材料が複数(例えばタマネギ・ニンジンが)足りない場合にもネコ/カレー/フォルダの中身との整合性を取ってくれます。

実際のプロジェクト管理に使うには

上記の説明では同期元・同期先のフォルダ名が異なりました。 しかし通常のプロジェクト管理であれば、同期元・同期先のフォルダ名は同じケースが多いです。ですからスラッシュなしで同期するのが簡単だと思います。

例えば下記のようなケースで、材料が足りない場合です。

.
├── 同期元
│   └── ネコ
│       └── カレー
│           ├── お肉
│           ├── タマネギ
│           ├── ニンジン
│           └── ジャガイモ
└── 同期先
    └── ネコ
        └── カレー
            └── お肉

rsync -auv 同期元/ネコ 同期先 こうすることで同期(材料の整合性)が取れました。

.
├── 同期元
│   └── ネコ
│       └── カレー
│           ├── お肉
│           ├── タマネギ
│           ├── ニンジン
│           └── ジャガイモ
└── 同期先
    └── ネコ
        └── カレー
            ├── お肉
            ├── タマネギ
            ├── ニンジン
            └── ジャガイモ

wgetかcurlでHTTPステータスコード確認

wgetでの確認

wget --spider URL

--spider ファイルをダウンロードしません。

curlでの確認

#プロトコルを付けること
curl -I http://www.example.org

#httpステータスだけを出力
curl -s -o /dev/null -w "%{http_code}" https://www.example.org/

curlの参考サイト

superuser.com

hogem.hatenablog.com

please-sleep.cou929.nu

write out = 書き出し

Atom スニペット登録 チートシート

スニペット登録方法

ファイル形式の確認方法

該当ファイルを開いて[⌘]+[alt]+[P]

meta文字を使用する場合には【\】でエスケープ処理 複数行 -> 【"""】(ダブルクォーテーション) * 3 で囲う

'ファイル形式':
  'スニペット名':
    'prefix': 'スニペットを呼び出すための文字列'
    'body': '呼び出したいコードや文字列'

Webサイトのあれこれをダウンロードしたい時に見るメモ

興味があるWebサイトを閲覧しているときに、気になったテキストをメモがてらローカルに引っ張りたいことがあるかと思います。

そんな時にデベロッパーツールから引っ張る方法を書いておいておきます。

// テキストのオブジェクトを入れたい時
txt = document.getElementsByClassName("example-text");

const blob = new Blob([txt], {type: 'text/plain'});
const url = URL.createObjectURL(blob); // createObjectURLはURLオブジェクトのメソッドです。Blob、Fileを参照するための一時的なURLを作成します。

const a = document.createElement("a");
document.body.appendChild(a); //body要素に対してa要素のオブジェクトを追加

a.download = 'text.txt'; //ダウンロードする際のファイル名を設定
a.href = url; //aオブジェクトにURLを設定する
a.click(); //クリック操作
a.remove(); //a要素を削除
URL.revokeObjectURL(url);  //オブジェクトのURLを削除する