正規表現で注意すべき点！について
最近正規表現を学習中、初心者歓迎！手と目で覚える正規表現入門を元に学習し、少しずつ苦手意識が薄れてきました。
今回はこのサイトの最後の方に正規表現について注意すべき事
(_+|\w+)*a のように、+ や * が ( ) の中にも外にも出てくる正規表現は危険です。こういう正規表現は内部的な組み合わせの数が爆発的に増え、とんでもなく遅くなることが多い
と言及されていたので、少し調べてみました！
まずはこのような080-1234-5678電話番号のマッチングを例とし、比較する正規表現は以下の２点
①\d{3}-\d{4}-\d{4}
②.*-.*-.*
この２つの正規表現の処理の様子を見て行きたいと思います。
プログラム初心者の僕は、なるべくシンプルで簡潔である方(例の為、変な正規表現)が良いと思い②番を選んでいました。ただShin x Blogや多くの方が、正規表現は長い方が良いとおっしゃっています。
その理由をregular expressions 101で見てみます。
まずは①番
右上に6ステップとマッチし、これが過程です
こんな感じで正規表現を左から綺麗にマッチングされています。
次に②番
右上に２７ステップと４倍以上の処理がかかっていて、過程がこちら
ちょっと飛ばします
②は.*に差し掛かった時点で全てにマッチしてしまったが為に-でマッチするものがなくなってしまい、一個ずつ戻りながら、マッチングを繰り返します。このようなマッチング方法をバックトラッキングwiki
と呼ぶようです。ちょっと効率悪く時間もその分かかってしまいます。
もし、もっと長い正規表現を.*を多様していくと、ブログトップの引用のようにサーバーに高負荷がかかるのが容易に想像できます。
今回はわかりやすい②番のような変な正規表現で比較してしまいましたが、今後正規表現を使う際は、なるべく長く、マッチングがすぐにできるようなものを意識する必要がありますね！
わからないまま進んだ、戻り値とnil。
戻り値とnilとは一体何？
参考書やWEBサイトでちらほら見かける戻り値やnil。わからないままだと気持ちが悪いのでまとめてみました。
戻り値とは
最後の式を実行した結果。全てのメソッドに戻り値は存在する！
nilとは
「全く何もない」ことを表すRubyの「値」
文字で表してもよくわかりませんが、以下の画像をまず見て下さい。
今の今まで二段に別れて結果が出力されている事の意味を理解していませんでした。
まず、赤い汚い文字(100均のペン)で「戻り値」と書きました！「１０」と「nil」という結果が出ています！上にも書きましたが、最後の式を実行した結果が帰ってきています！「１０」はわかりますが、なぜputs ' a' の戻り値が「nil」なのか？！
答えがRubyの公式サイトにあり、
「puts」は「nil」を返すそうです。「a」はただ出力されただけのもの。素人が深入りしすぎて推測するより、そういう仕組みになっているんだと思った方が良さそう。 因みにメソッドで見てみると
①def calc(a,b) a + b end calc(5,5) => 10 ②def output puts 'a' end output a => nil
メソッド①では最後の式を実行した結果の「１０」が結果で、メソッド②では上でもお話ししている通り「a」を出力しただけで、戻る値が元々決められている「nil」が返ります！
ただ、戻り値をreturnで指定できる
def get_value 'あ' return 'い' 'う' end return "い"
まだまだわからない事は多そうです。何かあればご指摘いただけると幸いです。
Rubyの配列の基本を見やすく整理してみました！
電子書籍で勉強をしていると戻ったあり進んだり、紙の本でも何ページも捲らなきゃいけないのでパッと見で分かるように書いてみました！結局ググりそう。
さくら& Debian & nginxでhttps通信をする備忘録
FjordBootCampプラクティス備忘録
さくらVPSからnginxのSSL化まで
WEBのことを知る上でいくつもの課題があり、一段落したので忘れないように、思い出しながらの備忘録
参考も乗せながら、なるべくシンプルに書いて行きますますが、結構長くなる予定。
1.さくらVPSに登録し、Debianインストール
まずはここから登録！データごとに別れているけどお好きなプランを選んで、カード決済すると②週間無料になっている。一応確認！お試し期間のみの利用であれば、会員トップメニュー→契約情報→キャンセルで簡単に解約可能。 参考：ネコでもわかる！さくらのVPS講座 ～第二回「サーバーをさわってみよう！」 | さくらのナレッジ
2.次にDebianインストール
カスタムOSインストールガイド - Debian 8 / 9を参考に最新のDebianをインストール 注意点： - 十字キーでの操作で - Graphical installを間違って押さない - rootとユーザーパスワードは別
3. Debianにsudoとvimをインストール
参考：sudoをインストールしvisudoで使えるようにする
# apt update # apt install sudo # adduser username sudo # apt install vim
vim /etc/sudoersでroot ALL=(ALL:ALL) ALLのしたにsubasa ALL=(ALL:ALL) ALLを追加。
4.ssh設定
参考：SSHなるものをよくわからずに使っている人のための手引書
$ mkdir ~/.ssh $ ssh-keygen -t client_rsa -b 4096 $ passwordを打ち込む
Macに秘密鍵を記憶
$ ssh-add -K ~/.ssh/client_rsaでパスワードを尋ねられるので、先ほど設定していたパスワードを打ち込む！
Mac側→Debian側 公開鍵をコピー・サーバ側に設置
$ scp ~/.ssh/client_rsa.pub remote-user-name@serverIP-address:~/.ssh/client_rsa.pub
次はDebianにインストール
$ sudo apt update $ sudo apt install ssh
$ mkdir ~/.ssh $ chmod 700 ~./ssh $ cat client_rsa.pub >> authorized_keys $ chmod 600 authorized_keys
バックアップ取って、sshd_configに設定
$ sudo cp /etc/ssh/sshd_config /etc/ssh/sshd_config_bk $ sudo vim /etc/ssh/sshd_config
①PermitRootLoginをnoに変更
②port番号変更 → 攻撃対策の為
③PasswordAuthenticationをnoに変更
↓
sudo /etc/init.d_ssh restartで適用！！
$ ssh -p <port-number> <user-name>@<serverIP-address>にアクセスできるか確認！
注意：
①scp -Pとssh -pのPが大文字か小文字かではまったので注意！
②なるべくmac側の設定から行うとconnection refugeされない
5.nginxインストール
参考：Debianで最新版のnginxをapt-getを使ってインストール
wgetを使用しインストール
$ apt-key add nginx_signing.key $ sudo apt-key add nginx_signing.key $ sudo vim /etc/apt/sources.list
以下を追加
deb http://nginx.org/packages/debian/ stretch nginx deb-src http://nginx.org/packages/debian/ stretch nginx
変更を加えたので更新します！
sudo apt-get update
nginxをインストール
sudo apt-get install nginx
インストールできたか確認！
$ sudo nginx -v
$ sudo service nginx status
● nginx.service - nginx - high performance web server
Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
Active: inactive (dead)
Docs: http://nginx.org/en/docs/
動いてないのでsudo /etc/init.d/nginx startで起動！
できました。
6.ドメインを取得してnginxでVirtulHost
参考：プログラミングビギナーNekoteniがあなたに贈る！NginxでVirtual Hostの巻
全体的なディレクトリを視覚的にわかりやすく説明してくれている！
- 新しく取得したドメインにお名前.comのネームサーバを登録
7. nginxでSSL
SSL/TLSの暗号化通信をする仕組み
サーバー/クライアント間の通信のセキュリティーを高めるプロトコル。認証局より発行されたサーバー証明書を利用して、サーバーの証明、通信の暗号化、改ざんの検出などを行う公開鍵暗号で共通鍵をやりとり。共通鍵でデータを暗号化して通信。
SSLはネットケープコミュニケーションズ社によって開発された。それを元にIETF（インターネット技術タスクフォース）で標準化されたものがITLS。SSLという名前が広まっている為、現在もそう呼ばれているが、TLSが最新 参考：スラスラわかるネットワーク＆TCP/IPの基本
簡単な図解
やること
① 秘密鍵（Private Key):server.keyを取得
② Certbotでサーバ証明書（CRT):server.crtを取得
③ 以上２点を設定ファイルの反映
④ httpとhttpsで表示されるhtmlを2種類用意Certbotをgitでインストール
使用コマンドを羅列
$ sudo apt update $ sudo apt install git $ git clone https://github.com/certbot/certbot $ chmod 700 ~/certbot $ cd certbot $ ./certbot-auto certonly --standalone -t
鍵が作られているか確認
$ sudo ls /etc/letsencrypt/live/tsuba.work/ README cert.pem chain.pem fullchain.pem privkey.p
- Nginxの設定ファイルを変更
server {
listen 80 ;
server_name tsuba.work;
#charset koi8-r;
access_log /var/log/nginx/tsuba.access.log main;
location / {
root /home/demo/public_html/tsuba.work/public/;
index index2.html index.htm;
charset UTF-8;
}
server {
listen 443 ssl ;
server_name tsuba.work;
#charset koi8-r;
access_log /var/log/nginx/tsuba.access.log main;
ssl_certificate /etc/letsencrypt/live/tsuba.work/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/tsuba.work/privkey.pem;
location / {
root /home/demo/public_html/tsuba.work/public/;
index index.html index.htm;
}
こんな感じの設定でSSL完了
はまったのは８０番と４４３番ポートのファイルの置く場所。両方の表示で違うhtmlを表示させる際、root /home/demo/public_html/tsuba.work/public/;のpublicと違うフォルダを作成し、rootの記載を間違えてしまったことでの文字化けや、defaultのhtmlがなぜか表示されるといったエラーに遭遇。しっかりとパスとフォルダをつくる場所を確認！
以上。
aptコマンドについて調べて見た
aptコマンドについて
aptコマンドを使う上で、APT,apt-get,apt-cacheなど整理ができてないので調べてみた。
- APTとは
Debian用に開発されたパッケージ管理システム
dpkgのフロントエンドとして動作するように設計されたが、現在はRPMに対応するように移植されたapt-rpmもある。パッケージ同士の関係を４つにわけて管理してくれる
パッケージ管理システム・・・ OSというひとつの環境で、各種のソフトウェアの導入と削除、そしてソフトウェア同士やライブラリとの依存関係を管理するシステム
- 依存 パッケージを導入するのに欠かすことのできないパッケージ。 - 推奨 無くてもよいが、プログラムの機能を利用するために通常は導入するパッケージ。 - 提案 無くてもよいが、導入することによってプログラムの機能を向上させるパッケージ。 - 衝突 パッケージを導入することで、同一の機能を有するなどの理由で削除されるパッケージ<br>
apt-getとは
パッケージのインストールや更新、削除するコマンドapt-cacheとは
パッケージの検索をするコマンド
では本題のaptとは
検索や管理、パッケージに関する情報を問い合わせるコマンドを 提供するコマンドラインパッケージマネージャです。
apt-getやapt-cacheのような特化した APT ツールと同じ機能を提供し、デフォルトで 対話的に使用するために適切なオプションを有効にする。
apt [オプション] コマンド [パッケージ名やコマンド用オプションなど
また
その後、APT（Advanced Packaging Tool）というパッケージ管理システムが登場しました。APTでは、インストールや更新、削除に「apt-get」コマンドを使い、パッケージの検索には「apt-cache」コマンドを使用します。APTはdpkgのフロントエンドとして動作するので、操作対象はdpkgと同じdebパッケージです ※。
※ RPMパッケージ用に移植されたAPT-RPMも開発されています。 現在は、apt-getとapt-cacheを統合した「apt」コマンド、そしてCUI画面でもグラフィカルな表示が可能な「aptitude」も使われています。dpkgとapt-get、apt-cache、apt、aptitudeを同じマシンに対して使用しても問題ありません ※2。
【 apt 】コマンド（基礎編）――ソフトウェアをインストールする
以前：dpkgコマンドを使い、debパッケージと呼ばれるフォーマットのパッケージを使用
↓
途中：APT（Adbanced Packaging Tool）というパッケージ管理システムで
・ apt-get・・インストールや削除
・ apt-cache・・パッケージ検索
↓
現在：APIの中のaptコマンド( apt-getとapt-cacheを統合)を使うことが推奨されている
以下Debian 管理者ハンドブックより
6.2. aptitude、apt-get、apt コマンド APT は巨大なプロジェクトで、当初の予定ではグラフィカルインターフェースを含んでいました。APT はライブラリに基づいており、そのライブラリにはコアアプリケーションが含まれています。apt-get は最初のコマンドラインベースフロントエンドで、APT プロジェクト内で開発されました。apt は APT から提供されているもう一つのコマンドラインベースフロントエンドで、apt-get の持っていた設計上のミスを克服しています。
コマンドの種類
| コマンド | 意味 |
|---|---|
| apt update | パッケージ情報の更新 |
| apt upgrade | パッケージの更新 |
| apt install | パッケージのインストール |
| apt search | パッケージの検索 |
| apt remove | パッケージの削除 |
| apt purge | パッケージの完全削除 |
| apt autoremove | パッケージの自動削除 |
| apt clean | パッケージキャッシュの削除 |
| apt install | ローカルパッケージのインストール |
| apt list | 全パッケージ一覧 |
| apt list --installed | インストール済みパッケージの一覧 |
参考文献
Debian 管理者ハンドブック
APT - Wikipedia
パッケージ管理システム- Wikipedia
Linuxゲリラ戦記
aptコマンドチートシート
fontsize調整 ー rem,em,px,%について備忘録
fontsize rem,em,pxについてまとめた
CSSを使っていてpxのみで乗り切っていたので、remやemについても勉強したので備忘録として
まずは二つの指定方法
絶対値（absolute）
他の要素には影響を受けず１６pxと指定したら１６px!!!!!!相対値（relative） 親要素のサイズにより変わります！親の値が変わったら子要素の文字サイズも変わります！
ブラウザのデフォルトサイズは 100% = 1em = 1rem = 16px = 12pt
pxについて（絶対値）
恐らく一番馴染みが深いと思います！
html{ fontsize:100%; } body{ fontsize:16px; } h1{ fontsize:16px; }
bodyもh1も１６pxで表示されます！１６pxだったら１６pxですね！
emについて （相対値）
html{ fontsize:100%; =16px } body{ fontsize:2em; } h1{ fontsize:1em; }
親要素に対して変わるとお話ししました！親のhtmlの100%は１６pxなので、その２倍の３２px！h1の親はbodyです。bodyが３２pxなので１倍なので３２pxです！
remについて
html{ fontsize:100%; =16px } body{ fontsize:2rem; } h1{ fontsize:1rem; }
remは親要素ではなくhtmlのサイズが基準です！なのでbodyは３２pxで、h1は１６pxです。なんとなくわかってきました！
注意
今まではpxを使っていましたが、pxには問題点がいくつかあります。
- IE9以前がpx指定された文字の拡大ができない
- ブラウザによって文字が大きさが変わって
それではどれを使うのが正なのか・・・
多くのサイトでオススメしているのはremを使ってhtmlの値を62.5％にすること。
html{ fontsize:62.5%; =10px } body{ fontsize:1.6rem; =16px } h1{ fontsize:3.2rem; =16px }
デフォルト設定が1em=16pxの場合に14pxの文字を出すのに計算が面倒臭くなってしまいます。その為大元の基準を62%= 10pxにしておくととても計算しやすくなりますね！
※どこまでサポートするかですが、IE8がremをサポートしていないので、pxを併せて書いておくといいのかと。
まとめ
相対値で計算とかよくわからないと思って敬遠していたremや emには使う理由があり、使いやすい方法があります。なんとなくpxが使い易いから使っていましたが、userがいかに見やすくという視点で考えるとpxは使わない方が良さそうですね！
参考：
あなたはどれにする？CSSの文字サイズ指定「px、em、%」
ferret
[CSS]フォントサイズの指定方法の基礎知識からレスポンシブに適した指定方法までやさしく解説
CSSの擬似要素を使った見出しデザイン
CSSの擬似要素を使った見出しデザイン
今学習しているフィヨルブートキャンプの課題で見出しデザインを作成。CSSだけでデザインを忘れないように備忘録として！
以下のページタイトルの横の４つの四角を２通りの記法を用いて作っていきます！！
HTMLコード：
<header class="main-header"> <h2 class="main-header__title">ページタイトル</h2> </header>
擬似要素について
まずは擬似要素についてCSSのpositionを総まとめ！absoluteやfixedの使い方は？を参考。
:beforeと:afterで四角2つずつ作ってドッキングする為にborder-bottomとgradationを使っていきます。
まずは一つ目のborder-bottom！！
h2::before { content:""; display: block; background-color:grey; width:10px; height:10px; border-bottom:solid 10px black; position: absolute; left: 10px; top: 20px; }
まずは左側だけいけました！４行目で上の灰色の四角を作り、７行目で下の黒い四角を作ります。サイズはwidthやheightを使って調整し、タイトルの左側に置く為にPositionを設定します。
続いては右側のです！gradationを使います！
h2::after { content: ""; display: block; width: 11px; height: 20px; background:linear-gradient( 180deg, black 0%, black 50%, grey 50%, grey 100%); position: absolute; left: 20px; top: 20px; }
これで四角の完成です。こちらのgradationの方が書くことが多いですね。数字が見た目は複雑なので難しそうに見えるのですが、背景色を２色で分割表示する方法でわかりやすくまとめてくださっています。数字と色の割合さえわかってしまえば3色など応用もできます。
一言
初めはh2と親要素のheaderの:beforeと:afterを使って4つを作っていて、要領の悪いことをしていましたが、boder-bottom(right)を使うだけでなくgradationも使い作成出来るというとで実践。かなり勉強になりました。
もし間違いがありましたらご指摘頂けると幸いです。
