Programming from 30

自分の備忘録が、誰かの為になれば・・

aptコマンドについて調べて見た

aptコマンドについて

aptコマンドを使う上で、APT,apt-get,apt-cacheなど整理ができてないので調べてみた。

  • APTとは Debian用に開発されたパッケージ管理システム
    dpkgのフロントエンドとして動作するように設計されたが、現在はRPMに対応するように移植されたapt-rpmもある。パッケージ同士の関係を4つにわけて管理してくれる
    パッケージ管理システム・・・ OSというひとつの環境で、各種のソフトウェアの導入と削除、そしてソフトウェア同士やライブラリとの依存関係を管理するシステム
- 依存
パッケージを導入するのに欠かすことのできないパッケージ。
- 推奨
無くてもよいが、プログラムの機能を利用するために通常は導入するパッケージ。
- 提案
無くてもよいが、導入することによってプログラムの機能を向上させるパッケージ。
- 衝突 
パッケージを導入することで、同一の機能を有するなどの理由で削除されるパッケージ<br>
  • apt-getとは
    パッケージのインストールや更新、削除するコマンド

  • apt-cacheとは
    パッケージの検索をするコマンド

では本題のaptとは

検索や管理、パッケージに関する情報を問い合わせるコマンドを 提供するコマンドラインパッケージマネージャです。apt-getapt-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)
    他の要素には影響を受けず16pxと指定したら16px!!!!!!

  • 相対値(relative) 親要素のサイズにより変わります!親の値が変わったら子要素の文字サイズも変わります!

ブラウザのデフォルトサイズは 100% = 1em = 1rem = 16px = 12pt

pxについて(絶対値)

恐らく一番馴染みが深いと思います!

html{
fontsize:100%;  
}  
body{
fontsize:16px;
}    
h1{
fontsize:16px;
}

bodyh1も16pxで表示されます!16pxだったら16pxですね!

emについて (相対値)

html{
fontsize:100%;   =16px
}  
body{
fontsize:2em;
}    
h1{
fontsize:1em;
}

親要素に対して変わるとお話ししました!親のhtmlの100%は16pxなので、その2倍の32px!h1の親はbodyです。bodyが32pxなので1倍なので32pxです!

remについて

html{
fontsize:100%;  =16px
}  
body{
fontsize:2rem;
}    
h1{
fontsize:1rem;
}

remは親要素ではなくhtmlのサイズが基準です!なのでbodyは32pxで、h1は16pxです。なんとなくわかってきました!

注意

今までは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を併せて書いておくといいのかと。

まとめ

相対値で計算とかよくわからないと思って敬遠していたrememには使う理由があり、使いやすい方法があります。なんとなくpxが使い易いから使っていましたが、userがいかに見やすくという視点で考えるとpxは使わない方が良さそうですね!

参考: あなたはどれにする?CSSの文字サイズ指定「px、em、%」
ferret
[CSS]フォントサイズの指定方法の基礎知識からレスポンシブに適した指定方法までやさしく解説

CSSの擬似要素を使った見出しデザイン

CSSの擬似要素を使った見出しデザイン

今学習しているフィヨルブートキャンプの課題で見出しデザインを作成。CSSだけでデザインを忘れないように備忘録として!
以下のページタイトルの横の4つの四角を2通りの記法を用いて作っていきます!!

f:id:tsubasa0105:20180821205905p:plain
HTMLコード:

<header class="main-header">
            <h2 class="main-header__title">ページタイトル</h2>
 </header>

擬似要素について

まずは擬似要素についてCSSpositionを総まとめ!absoluteやfixedの使い方は?を参考。
:before:afterで四角2つずつ作ってドッキングする為にborder-bottomgradationを使っていきます。
まずは一つ目の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;
}

f:id:tsubasa0105:20180821211920p:plain
まずは左側だけいけました!4行目で上の灰色の四角を作り、7行目で下の黒い四角を作ります。サイズは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;
}

f:id:tsubasa0105:20180821205905p:plain
これで四角の完成です。こちらのgradationの方が書くことが多いですね。数字が見た目は複雑なので難しそうに見えるのですが、背景色を2色で分割表示する方法でわかりやすくまとめてくださっています。数字と色の割合さえわかってしまえば3色など応用もできます。

一言

初めはh2と親要素のheaderの:beforeと:afterを使って4つを作っていて、要領の悪いことをしていましたが、boder-bottom(right)を使うだけでなくgradationも使い作成出来るというとで実践。かなり勉強になりました。

もし間違いがありましたらご指摘頂けると幸いです。

divタグ,sectionタグ、articleタグの整理

<HTML>-div,section,articleの違いについて

HTML5から学習を開始して、div,section,articleの違いについて理解が浅かったので調べた事を含めて備忘録
※お気付きの点があればご指摘よろしきお願い致します。

参考:articleタグとsectionタグとdivタグ,HTMLクイックリファレンス,oli.jp

divタグ

HTML5以前のdivの使い方は、「header」、「footer」などをidの名称に指定して使用。現在では、「header」、「section」、「article」、「nav」、「footer」などの要素(タグ)が追加されたことで、検索エンジンにWEBページの構造をより明確に伝えることができるようになった。

  • divタグは、ひとかたまりの範囲として定義する際に使用。特に意味はない。
  • 他に適切な要素が無い場合の使用が推奨されている。
    →ウェブページのアクセシビリティやメンテナンス性が低下を招く
  • div 自体に意味はないため section や article を内包可

    articleタグ

  • ブログの投稿や記事1件、コメント1件分など独立して成立するコンテンツに使用
  • article は section 同様、文脈的な意味がある コンテンツに対し使用
  • 内側の article が、外側の article の内容と関係がある場合、article を内包(ネスト)することができます。またsectionも内包できる。
  • レイアウトのために基本的はdivを使用使わない
  • 無理して使わなくてもよい
<article>
    <h1>Title</h1>
    <section>
        <h2>Section title</h2>
        <p>Content</p>
    </section>
    <section>
        <h2>Section title</h2>
        <p>Content</p>
    </section>
    <section>
        <h2>Section title</h2>
        <p>Content</p>
    </section>
</article>

sectionタグ

  • 章や節の区切りやまとまりなどに使用
  • 意味や機能のまとまり
  • div と違い、文脈的な意味があるコンテンツに対し使用する。 よってsection 内には見出しが必須
  • 文章の論理構造用タグ
  • article同様、基本的にレイアウトのためには使わない
  • articleを内包可(あまり腑に落ちてない。。。)
    – 無理して使わなくてもよい
  • コンテナーとして使うならdivを使用
<section id="main-content">
    <article>
        <h1>Article title</h1>
        <p>Summary</p>
    </article>
    <article>
        <h1>Article title</h1>
        <p>Summary</p>
    </article>
    <article>
        <h1>Article title</h1>
        <p>Summary</p>
    </article>
</section>

現在、FjordBootCampでプログラミング学習中!

8/7よりFjordBootCampに参加

始めてのはてなブログ投稿。
Fjordではブログを書き自身のアウトプットエンジニアとしての素養を高める為、ブログを書くことを進めている。
慣れない部分はご容赦いただくとして、コンスタントにアウトプットし、自信と知識を積み重ねていきたい。

今日はTerminalの基本について学習

binについては調べたことがなかった。心なしか”b”から始まるものが多く敬遠していた。猛省。

binはbinary(バイナリー)の略です。binaryには”対になった物”という意味があ>ります。コンピューターのCPUが実際に実行するプログラムの中身は0と1だけになります。そこから、実行できるプログラムのことをbinaryファイルと言います。lsはbinaryファイルです。昔、二手に別れたペンギンの夫婦を操ってゴールを目指すバイナリーランドというファミコンゲームがありましたが、正にそのバイナリーです。

  • binファイルについての疑問
    lsを叩いた時にディレクトリ内のファイルが一覧で表示される為、どこかのディレクトリ内のコマンドという認識がなかった。ただ/bin/lsと叩くと、 今までは何も気にせずlspwd を叩いていたが、「PATHを通す」という行為をしなければで、フルパスを打ち込んで実行しなくてはいけない。というのも/bin/lsはbinディレクトリの中にあるlsというコマンドを実行している。「PATHを通すことでフルパスを打たずともlsのコマンドを実行出来るようになる。

  • 叩いたコマンド
    touch

    touchコマンドは空のファイルを作成します。本来既にあるファイルに触って(touchして)最終更新日を更新するだけのコマンドですが、空ファイルを作るのにも使われます。

→新規ファイル作成とばかり思っていたので、意味を理解できて良かった。

cat

catはconCATenateの略でファイルの中身を表示するコマンドです。concatenateは連結させるという意味で本来は引数に渡した二つのファイルを繋げて表示するコマンドですが、一つしかファイルを渡さなければ単に中身を表示するのでその用途の方で主に使われている悲しいコマンドです。lsやrmやcatのような基本的なコマンドは問答無用で覚えさせられることが多いので「cat?何で猫がファイルを表示するんだろう?」と思う人は多い(ハズ)です。

→初心者だから表示のみの仕方しか使わないが、エンジニアの方は頻繁に使っているのでしょうか。体感覚で連結時にさらっと使ってみたい。

sudo rm -rf /   →見るからに怖いコマンド。きっと使うことはない!!

  • 作業の自動化
    ...いかに効率良く作業を行うかが生産性に関わる。ただあまりパソコンを触ってこなかったので自動化したい作業が見当たらない。強いて挙げるなら、集中できる時間が1時間半なのでDashboardのタイマーで1時間半のタイマーをコマンド一つで実行できるような簡単なものから作っていきたい。

  • スクリプトを単体で実行するためにshebang(シバン)という機能
    自分自身でも理解できるスクリプトがあるか探して見たが、なかなか見当たらないので、簡単なコードを書いて見る為、以下を練習用に!
    read -p "Please input your name: " name
    echo "Hi, $name."をimput.shというファイルを作成し、保存。
    $ chmod u+x input.sh
    $ ./input.sh
    Please input your name: Tsubasa
    Hi, Tsubasa. と、簡単なもので練習。

    所感


今まで深く調べてみようと思ってはいたが、怠けていた黒い画面。分からないことを後回しにする事や、その場で掘り下げない事のツケが今になって表面化してしまった。Part.1-9までを自分なりに理解したが、まだまだものになっていないので、作業の自動化など効率化したいものを見つけ、それを形にできるよう技術を深めたい。黒い画面入門はとてもわかりやすく効率よく開発ができるよう何度か復習もしていきたい。