カテゴリー
その他

ターミナルでよく使うショートカット

Macのターミナルでよく使うショートカットをメモ。
ctrlとの組み合わせが多いです。

カーソル移動

カーソルを一文字進める

ctrl + f
十字キーの→と同じ動き

カーソルを一文字戻す

ctrl + b
十字キーの←と同じ動き

行頭に移動

ctrl + a
同じディレクトリに対して、同じコマンドを行うとき、行頭に移動してコマンドだけ変更すると楽

行末に移動

ctrl + e

 

削除

カーソル位置から行頭まで削除

ctrl + u

コマンドを一行まるっと削除したいとき、行末まで移動「ctrl + e」と組み合わせると楽

カーソル位置から行末まで削除

ctrl + k
コマンドを一行まるっと削除したいとき、行頭まで移動「ctrl + a」と組み合わせると楽

カーソル位置の1文字を削除

ctrl + d

コマンド履歴

ctrl + n

ctrl + p

画面クリア
ctrl + L

カテゴリー
その他

Homebrewのインストール

Homebrewとは、macOS用のパッケージマネージャーです。
パッケージマネージャーがあると、コマンド1つでツールをインストールできるので便利。

通常インストールだとうまく動かなかったツールもHomebrew経由ならうまく動くことがあります。

インストール自体は公式サイトの案内に沿って、ターミナルからコマンドを実行するだけですが、念のためメモ。

Homebrew公式サイト

https://brew.sh/index_ja

インストールするには次のコマンドをターミナルで実行します。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

このコマンドは、curlコマンドで取得したデータをrubyで実行します!というもの。

XcodeというApple公式の開発ツールをインストールしていない場合、途中でインストールされます。
※その際、パスワードを求められるので入力します。

最後にsuccessful!と表示されればインストール完了です!

カテゴリー
css javascript

CSSとJavascriptでカードスタイルのリストをつくる

ブログの記事一覧でよくみかけるカードスタイルのリストを作成したく、今更ながらFlexboxでレイアウトを組んだのでメモ。
子要素の高さは揃うんですが、子要素の中にある孫要素?の揃え方が分からなかったので、Javascriptでなんとかしました。

親要素とその中身をこんな風に揃えてカードっぽくしたいのだが、、、。

こんな風に孫要素の縦が揃うようにしたい

要素のテキスト量が異なると、こんな風に高さがまちまちになってしまう。。

要素が可変だと、縦が揃わなくなる

サンプルは以下ページから確認できます。
動作の確認をしてみてください!

サンプルはこちら

HTMLで構造を決める

カードの内容は上から画像⇒タイトル⇒テキスト⇒日付とします。
無難に<li>タグで書いていきます。

<ul>
    <li class="list">
        <div class="img"><img src="./images/img01.jpg"></div>
        <p class="tit">タイトルタイトルタイトルタイトルタイトル</p>
        <div class="content">
            <p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            <p class="info">2019年10月1日</p>
        </div>
    </li>
    <li>
        <div class="img"><img src="./images/img02.jpg"></div>
        <p class="tit">タイトルタイトルタイトルタイトル</p>
        <div class="content">
            <p class="txt">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
            <p class="info">2019年3月10日</p>
        </div>
    </li>
    <li>
        <div class="img"><img src="./images/img03.jpg"></div>
        <p class="tit">タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</p>
        <div class="content">
            <p class="txt">テキストテキストテキストテキスト</p>
            <p class="info">2019年3月1日</p>
        </div>
    </li>
    <li>
        <div class="img"><img src="./images/img01.jpg"></div>
        <p class="tit">タイトルタイトルタイトルタイトルタイトル</p>
        <div class="content">
            <p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            <p class="info">2019年10月1日</p>
        </div>
    </li>
    <li>
        <div class="img"><img src="./images/img02.jpg"></div>
        <p class="tit">タイトルタイトルタイトルタイトル</p>
        <div class="content">
            <p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            <p class="info">2019年10月1日</p>
        </div>
    </li>
</ul>

CSSで横並びにする

flexboxで<li>要素を横並びにします。
スマホ版では縦に並ぶようにします。

ul.list {
    overflow: hidden;
}
ul.list li {
    padding: 10px;
    background: #ececec;
    list-style-type: none;
    box-sizing: border-box;
    border:3px solid #828282;
}
ul.list li:nth-child(n + 2) {
    margin-top: 10px;
}
ul.list li .img_wrap {
    overflow: hidden;
    position: relative;
}
ul.list li .img_wrap img {
    width:100%;
    vertical-align: bottom;
}
ul.list li .tit {
    font-size: 1.2em;
    color:#5a441a;
    line-height: 1.35;
    font-weight: 700;
    padding-top: 10px;
    padding-left: 1.5em;
    position: relative;
    background: #F9DFD5;
}

ul.list li .tit:before {
    content: '●';
    position: absolute;
    left: 0;
    top: 0.3em;
    font-size: 1.2em;
    color: #EDA184;
}
ul.list li .content {
    background:#F0D0E4;
    width: 100%;
    padding-top: 10px;
    margin-top: auto;
}
ul.list li .content .txt {
    margin-bottom:10px;
}
ul.list li .content .info {
    margin-top: auto;
    margin-bottom: 0;
    background:#d882cd;
    text-align:right;
}
@media screen and (min-width: 768px) {
    ul.list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-left: -10px;
        margin-right: -10px;
    }
    ul.list li {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        width: calc(33.33333% - 20px);
        margin-left: 10px;
        margin-right: 10px;
    }
    ul.list li .img_wrap {
        height: 190px;
        width: 100%;
        position: relative;
    }
    ul.list li .img_wrap img {
        width:320px;
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
    }
    ul.list li:nth-child(n + 2) {
        margin-top: 0;
    }
    ul.list li:nth-child(n + 4) {
        margin-top: 20px;
    }
    ul.list li .content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}

Javascriptで孫要素の高さを合わせる

これだけだと子要素の高さはそろっても、その中にある孫要素の高さが合わないのでjavascripotで調整します 。

"use strict";

let resizeTime; //タイマーセット用の変数
const breakpoint = 768; //ブレイクポイント

//イベント登録
window.addEventListener('DOMContentLoaded', eventAdd);

window.addEventListener('resize', function() {
    if(resizeTime != null) {
        clearTimeout(resizeTime);
    }
    resizeTime = setTimeout(function() {
        eventAdd();
    },1000);

});

//高さを合わせる要素を指定
function eventAdd() {
    heightElm('.list li .content');
    heightElm('.list li .tit');
}
function heightElm(className) {
    const itemlist = document.querySelectorAll(className);
    console.log(itemlist);
    const items = Array.prototype.slice.call(itemlist,0);//配列に変換
    console.log(items);
    const hary = []; //要素の高さを配列で格納
    let w = 0; //windowの幅を格納

    w = window.innerWidth; //windowの幅を取得

    items.forEach(function(item,i) {
        const elmStyle = window.getComputedStyle(item);
        item.style.height = ''; //高さの初期化
        hary[i] = parseInt(elmStyle.height);
    });
    //一番高い値を取得
    const hMax = Math.max.apply(null, hary);
    //要素の高さを設定
    items.forEach(function(item,i) {
        item.style.height = w > breakpoint ? hMax + 'px': item.style.height = '';
    });
}

スマホ版は孫要素の高さをそろえなくて良いかも知れない。

カテゴリー
Linux

VirtualBoxにApache(アパッチ)をインストールする手順

VirtualBoxにwebサーバーを構築するためにApache(アパッチ)をインストールしました。
手順を忘れないようメモしておきます。

Apacheとは世界で最も使用されているWebサーバーソフトウェアのこと。
Webサーバーソフトウェアはウェブページを表示させるのに必要なHTTP通信が可能。Webサイトを構築するには必須のソフトウェア。

Apache(アパッチ)のインストール

root権限でないと作業できないものが多いので、一般ユーザでログインしている場合、rootアカウントに切り替えます。

一般ユーザーでログインしている場合、一時的にrootアカウントに切り替える

 $ su -

rootのパスワードを入力してrootに切り替える。コマンドの冒頭が「$」⇒「#」になる。
※sudoで作業する場合、これ以降コマンドの先頭にsudoを追加する

yumコマンドでApacheをインストールする

Apacheのインストールは パッケージを管理するコマンド 「yum」を使用します。

 # yum install httpd 

Is this ok [y/d/N]:y ときかれたら、すべて「y」を入力してenter。complete!が表示されたらインストール完了。
※y入力を省略したい場合「-y」オプションを追加する。

httpdを起動する

インストールが完了したらApacheを起動します。
一度起動したら停止することはあまりない、、、と思う。

 # systemctl start httpd.service 

エラーが表示されなければ起動成功。

Apacheの基本設定

httpdの自動起動

サーバーの設定変更などで再起動した際、Apacheも同時起動するように設定しておきます。

 # systemctl enable httpd

赤の点線で囲ったような表示が出れば成功です。

念の為、設定されたか確認するには次のコマンド

# systemctl list-unit-files -t service | grep httpd

httpd.service  enabled

httpd.serviceの隣に「enbabled」と表示されればOK。ちなみにenabledは英語で使用可能の意味。よく出てくるから覚えておくと良いかも。逆にdisabledは無効の意味。

enabled 有効
disabled 無効

ファイヤーウォールの設定

ファイアウォールという通信ポートを制御する仕組みがあるのですが、デフォルトでhttp(ポート番号80)は許可されていないので通過できるように設定します。

 # firewall-cmd --add-service=http --zone=public --permanent

「success」と表示されたら、ファイアーウォールを再起動します。
これでサーバーに設定が反映されます。

ファイアーウォール再起動のコマンド

 # systemctl restart firewalld 

【余談】
もしファイアーウォールがインストールされていない場合は、次のコマンドでインストール&起動する。
httpdと同じように、自動起動の設定もしておきます。
最後のコマンドはファイアーウォールの起動確認です。「enabled」が表示されるか確認。

# yum -y install firewalld
# systemctl start firewalld
# systemctl enable httpd
# systemctl list-unit-files -t service | grep firewalld

Apacheが動作しているか確認

Apacheの動作確認をします。次のコマンドでVirtualBoxのIPアドレスを調べます。

$ ip addr
※またはip a

確認したアドレスをブラウザに入力します。
例)http://192.168.12.8/

こんな画面が出てくればApacheのインストールは成功しています。
次は自分で作成したファイルを公開ディレクトリに配置して表示を確認してみます。

公開ディレクトリのパーミッション(権限)を設定する

公開ディレクトリにhtmlファイルを配置すればウェブページを表示することができますが、まずは公開ディレクトリのパーミッションを確認します。

サーバーの動作は基本的にApacheが設定しているユーザーが実行するらしいです。その為、外部公開するディレクトリに対してApacheユーザーがr(読み)、w(書き)、x(実行)できるように設定していきます。

まず、Apacheの実行ユーザー、グループを設定ファイル「/etc/httpd/conf/httpd.conf」で確認します。

以下コマンドでファイルの中身を確認

# less /etc/httpd/conf/httpd.conf

httpd.confに記述されているUserとGroupを確認したところ、実行ユーザー&グループ共に「apache」でした。

このユーザーにr(読み)、w(書き)、x(実行)ができるように権限を設定します。
権限を設定するのは外部に公開するディレクトリです。初期設定だと「/var/www/html/」になっています。
htmlディレクトリの権限を調べたところ、実行ユーザーとグループがroot、パーテーションが「drwxr-xr-x」になっていました。

所有者rootにはr(読み)、w(書き)、x(実行)の権限がありますが、rootグループとその他ユーザーにはw(書き)権限がありません。

そこで、所有者とグループをroot ⇒ Apacheに変更します。

# chown apache:apache /var/www/html/

これでapacheに権限が付与されましたが、日頃作業するのはrootでもapacheでもない一般ユーザーがほとんどだと思います。

一般ユーザーがhtmlディレクトリにファイルの追加や削除ができないのは不便なので、一般ユーザーにもw(書き込み)権限を付与します。

今回、apacheグループに一般ユーザーを追加し、グループにw(書き込み)権限を付与することで、一般ユーザーでもhtmlディレクトリに書き込みができるようにします。

一般ユーザーをapacheグループに追加するコマンド

# usermod -g apache 【一般ユーザーアカウント】

apacheグループ権限をr(読み)、w(書き)、x(実行)に変更

# chmod 755 /var/www/html/

これで一般ユーザーでもhtmlディレクトリにファイルを追加できるようになりました。

公開するhtmlファイルを作成する

設定が終わったら、htmlファイルを作成します。
/var/www/html/(公開ディレクトリ)にindex.htmlを作成します。

エディタはvimを使用します。

# vim /var/www/html/index.html

内容はこんな感じにしました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>test page</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>

先ほどApacheの動作確認をしたページにアクセスして、こんな風に表示されれば成功です!

最後に

本番環境では、セキュリティ対策として、SSHのパスワードでのログイン禁止や、ポート番号をデフォルトから変更する等、必要な作業があります。

これらは別記事でまとめたいと思います!

カテゴリー
Linux

vimのカスタマイズとよく使うコマンドについて

まずvimを使いやすいようにカスタマイズします。
今回は必要最低限の設定だけなので、必要になったら順次追加していこうと思います。

vimの設定をカスタマイズする

一般ユーザーで作業していることを前提とします。

ホームディレクトリにある.vimrcファイルを編集します。.vimrcファイルがなければ作成します。

$ vim ~/.vimrc

.vimrcに以下を記述

"行番号を表示
set number
"日本語の文字化け防止
set encoding=utf-8
set fileencodings=iso-2022-jp,euc-jp,sjis,utf-8
set fileformats=unix,dos,mac
" 対応する括弧を表示
set showmatch

今回、.vimrcファイルがなかったので、一般ユーザーのホームディレクトリに作成しました。

このままだとroot環境ではカスタマイズした設定が反映されません。。そこで、/root/以下に.vimrcファイルのシンボリックリンクをはります。

$ sudo ln -s ~/.vimrc /root/.vimrc

※sudoで実行しないとPermissionエラーになります。

vimでよく使うコマンド

vimにはノーマルモード、インサートモード、ビジュアルモードの3つのモードがあります。
良く使うコマンドをまとめました。

ファイルの終了

ファイルの終了に関するコマンド

:wq 保存して終了  ※ショートカットshift +  z z(連続押下)
:w 保存
:q! 保存しないで終了

モード切り替え

インサートとヴィジュアルモードの切り替えは、ノーマルモードから行います。

vimを立ち上げたときはノーマルモードになっていますが、別モードになっている場合、escでノーマルモードに戻ります。

iまたはa インサートモードに切り替え
v ビジュアルモードに切り替え
esc ノーマルモードに切り替え

ノーマルモードのコマンド

カーソル移動

h左に移動
j下に移動
k上に移動
l右に移動

^行頭に移動
$行末に移動
%対応するカッコに移動
gg(連続で押下)先頭行に移動
G最終行に移動

コピー&ペースト

yy(連続で押下) 一行コピー
pp(連続で押下) 一行ペースト

削除

dd  (連続で押下) 1行削除(切り取り)ペーストが可能になる
x 一文字削除
Dカーソル位置から行末まで削除
d$(連続で押下)カーソル位置から行末まで削除(Dと同じ)

d^(連続で押下)カーソル位置から行頭まで削除

[ad]アンドゥ

u取り消し
ctrl+r取り消しの取り消し

検索

/検索

【検索結果の順番】
n 順方向へ検索する
N 逆方向へ検索する

ビジュアルモードのコマンド

ビジュアルモードにすると範囲を選択できるので便利。

使用するときは、まずescでノーマルモードにする。
カーソルを操作したい箇所に移動してv
※ビジュアルモードに切り変わる

コピー&ペースト(範囲選択)

矢印キーで範囲を指定してyヤンク(コピー)

貼り付けたい位置にカーソルを移動する

shift + pヤンク(コピー)した部分をペースト

削除(範囲選択)

カーソルを操作したい箇所に移動してv
※ビジュアルモードに切り変わる

d選択範囲を削除