aptについてのまとめ

aptとは

apt(Advanced Package Tool)はDebianのパッケージを管理するためのコマンドラインツールで、Debianには予めインストールされている。

aptでは

  1. アプリケーションのインストー
  2. アプリケーションの削除
  3. アプリケーションの更新

などを行うことができる。また依存関係の解決を行い、必要なパッケージをパッケージレポジトリから取得する。

より下層のコマンドとしてapt-getやapt-cacheがある。

aptとapt-get(cache)の違い

「APT」はもともとGUIを含む巨大なプロジェクトとして計画されていた。「APT」はコアアプリケーションを含むライブラリに基づいていて、 「apt-get」はこのプロジェクト内で開発された最初のコマンドラインのフロントエンドだった。「apt」はこのプロジェクトで開発された二番目の コマンドラインフロントであり、「apt-get」が抱えていたデザイン上の失敗を克服している。

この「失敗」とは、apt-get単体ではパッケージの検索や、インストール済みパッケージ一覧の表示などができないことなどを指しているのではないかとする意見がある。

『設計上のミス』が何を指しているのかは定かではありませんが、私の肌感として、目的により複数のコマンドを使い分ける必要があるのが原因かと思います。例えば「インストール済みのパッケージを確認したい」や、「インストールした> いパッケージの情報を確認したい」といったことをしたい場合、別のコマンドが必要になります (それぞれ dpkg, apt-cache)。

Debian の apt/apt-get/aptitude について

「apt」とはこれまでapt-getやapt-cacheといったパッケージ管理ツールの総称だったが、 2014年に「apt」というコマンドのv1.0がリリースされ、正式に使えるようになった。

これまではパッケージのインストールの際は

apt-get install pkg

検索する際は

apt-cache search pkg

と使い分けていたが、

apt install pkg
apt search pkg

と書けるようになった。

参照

apt-get - Debian Wiki

6.2. aptitude, apt-get, and apt Commands

askubuntu.com

CSSの練習を終えて

CSSの練習を終えて

今回は、与えられたHTMLに自分で作成したCSSをあて、見本と同じようなレイアウトに近づけるという課題に取り組みました。 CSSだけでアイコンを作成するなど、難しい部分もありましたが、なんとか提出してOKをもらうことができました。 以下、見本のCSSと自分で作成したCSSを比較して、参考になった箇所を列挙したいと思います。

文章の読みづらさの原因

f:id:midoriasi:20170718160640p:plain

自分の作ったCSSだと行間の隙間がなく、文章が非常に読みづらい状態だった。 見本では文章にline-heightで行の高さが設定してあり、とても読みやすくなっていた。 ※予期せぬ結果を防ぐためline-heightは単位なしで設定することが推奨されている。 数値だけを指定すると、数値x要素のフォントサイズになる。

line-height - CSS | MDN

aタグをblock要素にしてクリックできる範囲を広げる

通常だと、aタグはインライン要素のため、クリックできる範囲は文字の大きさとイコール。 line-heightを指定しても、「行間」の隙間が広がるだけなのでクリックできる範囲は変わらない。 display: block;としブロック要素にすることで、要素自体の大きさを変えることができるようになり、クリックできる範囲も広がる。

inline-blockで要素を並べる際にできる隙間を埋める方法

display: inline-block;で要素を並べると、改行コードが原因で、要素間に隙間が空いてしまう。 f:id:midoriasi:20170718160126p:plain

これを解消するには、

①親要素にfont-size: 0;を指定し、子要素でfont-size: npx;を設定する

②親要素にletter-spacing: -.4rem;として文字間を詰めて隙間をなくし、子要素で元に戻すletter-spacing: normal;

という二通りの方法がある。

buttonの反射光

box-shadow: rgba(0,0,0,.1) 0 1px 1px inset;

「怖話」を使ってみて

使用環境

PCとiPadChromeから見ました。怖い話投稿はPCから行いました。

使用感

サイト全体として、恐怖心を煽る雰囲気が保たれていてよかったです。 また、執筆フォームも、効果一覧が画面上に固定され、ページのどこからでも使えるなどの工夫がされており使いやすかったです。

<改善案>

投稿ページの効果確認画面

投稿ページの効果確認画面は、どこにどういった効果が挿入されるか一目瞭然で、とても便利だと思いましたが、 本文と確認画面とで文章の位置にズレが生じてしまい、そのせいで視認性が少し損なわれていると思いました。 f:id:midoriasi:20170711145853p:plain 可能であれば、左右で文章の位置が一致するとより分かりやすくなるかと思います。 具体案としては、効果確認画面のCSSを本文と一致するように調整するか、あるいは効果挿入文を 「,,,nextpage,,,」 のような一行のものに変更する、などでしょうか。

ソート機能

新着投稿欄などである方の作品を読み、それが気に入った際、私は次にその方の一番の人気作を読んでみたいと思うのですが、 作者の投稿一覧ページにソート機能が無いため、沢山の投稿をされている方の場合だと、探すのが大変で若干不便に思いました。

タグ付け機能

投稿ページ下部にはタグ選択欄があり、プレースホルダーも設定されているため、それに従って「怪談」「実話」「駅」の3つのタグをつけることにしたのですが、 他にどんなタグをつければ、いまいちピンと来ませんでした。 最近投稿されたタグの情報があったり、そこから選べたりすると、もっと気軽にタグ付けができるかと思います。

その他細かい点

  • 背景画像選択画面で「Ctrl + F」で目当ての画像を検索しようとすると、検索ワードが画像タイトルだけでなく、本文に対してもヒットしてしまいました。

  • ふりがな機能が無いため、文中で難しい漢字を使って良いものか悩みました。

  • サウンドノベル風表示の際、パッと見で前のページに戻る方法がわかりませんでした。 使い方をクリックすると直感的にわかりやすい指示が出るため、大抵の人はそれで問題ないと思うのですが、 (私みたいな人だと)クリックすることで別ページに飛ばされてしまうのではという思い込みから、面倒くさがり、確認しない方もいるかと思います。 よりわかりやすくするには、戻る部分のマウスカーソルに「⬅」の画像を設定する、などでしょうか。

kowabana.jp

Vagrantを使ってwindowsにdebianを入れようとしたらエラーが出た

OS:windows10、vagrantvirtualboxはインストール済み

vagrant init debian/jessie64
vagrant up

エラー

"rsync" cound not be found on your PATH. Make sure that rsync
is properly installed on your system and available on the PATH.

コピって検索

stackoverflow.com

何通りか解決方法があるようです。

vagrantfileを書き換える

C:\Users{your_username}.vagrant.d\boxes\debian-VAGRANTSLASH-jessie64\8.2.2\virtualbox\Vagrantfileの

  config.vm.synced_force ".", "/vagrant", type: "rsync"

 config.vm.synced_folder ".", "/vagrant", type: "virtualbox"

に書き換える

再びvagrant upすると成功しました。 自分はこのやり方で解決しましたが、他にもwindowsrsyncをインストールするなどいくつか方法があるようです。

HTMLの基本を理解する

HTMLの基本を理解する

今回はある平文に対して、HTML5によるマークアップを行うという課題に取り組みました。

これまで、何度か趣味でウェブサイト作ったことがあるため、HTMLについてはある程度知っているつもりでおり、復習としてこのプラクティスを始めたのですが、それは大きな間違いだったと気付かされました……。

自分のHTMLに関する知識はXHTMLやHTML4時代で止まっており、HTML5が主流となった今では時代遅れになっていたみたいです。

HTML5ではdivタグをあまり使わない

これまで私は、何でもかんでも情報の塊はdivタグで囲うというマークアップをしていたのですが、html5ではそのような使い方をしないと知りました。

divタグはスタイルを適用したい時や、他に適当なタグが見つからない場合の最終手段として使うタグであり、HTML文章のアウトラインを作るためには、articleタグやsectionタグを使うのが正しい作法のようです。

ただ、articleタグとsectionタグの使い分けを理解するのに手こずりました。

使用例を見ていると、articleタグがsectionタグの子要素となることもあれば、逆のパターンもあり、感覚的に理解することが難しかったためです。

とりあえずは、articleタグはそれだけで独立したコンテンツとして成立する内容に対して使い、sectionタグはそれ以外の、見出しがつけられる(アウトラインにリストされる)「章」や「節」に対して用いる、と理解しました。

この独立したコンテンツとはなにか?と思うと思いますが、『RSSフィードで読み込こまれた際に1つの記事として成り立っているか』ということをまずは意識してみましょう。 成り立っているならばarticle要素が適しており、そうでなければsection要素など別の要素を検討します。 http://www.mdn.co.jp/di/articles/4040/?page=6

迷ったところ

hnタグがsection真下になくても良いのか?

<section>
  <p>hoge</p>
  <p>huga</p>
  <h2>見出し</h2>
</section>

コメント欄をどのようにマークアップするか

一つ一つのコメントをarticleタグで囲ったが、コメントは独立したコンテンツと言えるか。加えて、今回の課題の場合、コメントに見出しとなるような要素がなかったため、hnタグをarticle内に含めることをしなかった。

strongタグとemタグの違い

strongタグは客観的に見て重要なこと、ユーザーに特に伝えたいことに対して使い、emタグは文章内で抑揚をつけたい時などに用いる、と覚えた。

終わりに

今までは文章の構造など意識せず、「見た目が整ってればいいや」という適当な気持ちで、divタグを多用したマークアップを行っていましたが、今回の課題を通して、HTML5の正しい作法を学び、アウトラインを意識して記述することの意義を理解することができました。


参考資料

第5回 HTML5で新しく定義された新要素 「article要素」の使い方の基本をまとめよう | Webデザインとグラフィックの総合情報サイト - MdN Design Interactive

Terminalの基本を覚える

インターンシップに参加する前は、windowsvirtualbox+vagrantを使ってubuntuでの開発環境を立ち上げ、Railsチュートリアルの勉強をしていた。その時は、poderosaというsshクライアントを使い、新しいコマンドが出てくればその都度覚えるというやり方をしていたため、断片的な知識しか身につかなかった。今回、macで実際に手を動かしながら「黒い画面入門」を読んだことで、unixディレクトリ構造や環境変数など、今までなんとなくでわかった気になっていたことがより明確に、体系的に理解できたように思う。

【「黒い画面入門」を読んで新しく覚えたコマンド】

chown ファイルやディレクトリの所有者を変更する

-R ディレクトリの中身の所有者を再帰的に変更する

#! (shebang)この後に書いてあるコマンドに、二行目以降の全てを渡す

~/bin/echo-hello

#!/bin/sh

echo hello
$export PATH=$PATH:~/bin

$echo-hello

hello