2021-03-23

異なるサイズの画像を均等に配置して上下左右中央寄せで並べるCSS

flexboxで解決できる話ですが、自分のGoogle力が低くてなかなか解決方法にたどり着けませんでした。flexboxの使い方ではなくこのシチュエーションの解決方法としてまとめておきます。

前準備

  <div class='img-container'>
    <img src='img/large.png' alt=''>
    <img src='img/small.png' alt=''>
  </div>

.img-container {
    width:700px;
    margin: 100px auto 0;
    border: 1px solid #000000;
    font-size: 0;
}

f:id:dorapon2000:20210323071835p:plain

font-size: 0;がないと少し空白ができます。

300x300と200x200の画像がありそれらを700pxの領域にタイトルのように並べたいです。

解決方法

flexboxを使います。

.img-container {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

f:id:dorapon2000:20210323072121p:plain

justify-content: space-evenly;で左右と中央の余白の幅が同じになるように均等に配置する
align-items: center;で上下中央寄せする

コードをGitHubにあげています。

dorapon2000-blog/css_rayout at main · dorapon2000/dorapon2000-blog · GitHub

おまけ

私がやりたかったのは上記の方法ですが、以下のような方法もあります。ただし、中央の隙間が目立ちます。

space-around

.img-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

f:id:dorapon2000:20210323073227p:plain

space-aroundでアイテムの周りに均等に余白ができる

flex + margin: auto

.img-container {
    display: flex;
}

img {
    margin: auto;
}

space-aroundの代わりにmarginで代用

f:id:dorapon2000:20210323073406p:plain

table

  <div class='img-container'>
    <table class='tbl'>
      <tr>
        <td>
          <img src='img/large.png' alt=''>
        </td>
        <td>
          <img src='img/small.png' alt=''>
        </td>
      </tr>
    </table>
  </div>

.img-container {
    width: 700px;
    margin: 100px auto 0;
    border: 1px solid #000000;
    font-size: 0;
}

.tbl {
    width: 700px;
    text-align: center;
}

f:id:dorapon2000:20210323074809p:plain

テーブルの境界に少し隙間ができてしまうが原因はわからない

参考

2021-03-07

vimの最低限な基本操作まとめ（自分用メモ）

vim

普段はVSCodeかemacsを使うため、vimは全然使い慣れていません。しかし、サーバには基本的にemacsが入っていないため、エラーが発生した特定の行を見たり、設定ファイルの一部分だけ編集する際はvim(vi)を利用します。慣れたほうががいいとは思いつつ、モチベーションが湧かないため、最低限の操作だけできるような意識が低いメモです。（まとめながら覚える）

これだけはできるようになりたいこと

ファイルの保存
単語検索・置換
特定行に移動
1行削除
コピペ
undo

移動は十字キー。

モード

vimには文字を書き込める「挿入モード」とvimのコマンドを打つ「コマンドモード」があり、使い分ける必要がある。モードごとにできる操作が違う。

キー	使用できるモード	説明
Esc	挿入	コマンドモードにする
i	コマンド	挿入モードにする

vimを終了する

変にファイルを編集してしまったのに、vimの操作を完全に忘れて、にっちもさっちもいかなくなったときはEsc :q!。vimで一番最初に覚えた。

キー	使用できるモード	説明
ZZ	コマンド	保存して終了
:q!	コマンド	保存せずに終了

検索

キー	使用できるモード	説明
/検索単語 Enter	コマンド	検索
n	コマンド	次の検索単語へ
N	コマンド	前の検索単語へ

移動

キー	使用できるモード	説明
gg	コマンド	ファイル先頭へ
G	コマンド	ファイル末尾へ
50G	コマンド	50行目へ

それぞれ:0 :$ :50でもいける。

コピペ

yはヤンクのy。

キー	使用できるモード	説明
/検索単語 Enter	コマンド	検索
dd	コマンド	カーソル行切り取り
yy	コマンド	カーソル行コピー
3yy	コマンド	カーソル行から3行コピー
p	コマンド	カーソルの右側にペースト
v	コマンド	ビジュアルモードへ（選択コピーできるモード）
y	ビジュアル	選択範囲をコピーしてコマンドモードへ

その他

キー	使用できるモード	説明
:%s/検索単語/置換単語/g Enter	コマンド	ファイル全体で一括置換
u	コマンド	undo
Ctrl-o コマンド	挿入	一時的にコマンドモードのコマンドを入力できる

参考

2021-01-26

HHKB Professional HYBRID Type-Sの感想

HHKBデビューしてから1ヶ月以上経ったのでその使い心地を書きます。

www.pfu.fujitsu.com

HHKBの前

平たくて打鍵音が小さいキーボードを使っていました。 mac bookなら備え付けのキーボード、windowsのデスクトップ機でもパンダグラフのキーボードです。平たいキーボードを使っていた理由は、押し込む距離が短くてはやいタイピングができる気がするのと、比較的静音だからでした。

一時期自分がやり込んでいたゲームでは、タイピングスピードが重要でした。コンマ秒という刹那の勝負になりがちで、キーのストロークが大きいことすら不利になるんじゃないかと懸念していました。そのこともあり、平たいキーボードが好みでした。

購入するときに考えたこと

タイプ音の大きさ
色・配列・刻印の有無

HHKBは一度店頭に展示されていたものを触ったことがあります。その時はすごく気持ちがいい打鍵感だけど音は結構するなぁという印象で、人前で使うとうるさくないか気になって集中できないかもしれないと思っていました。今回購入したType-Sは割と静かという口コミと、Youtubeでも叩いていた動画をいくつか視聴してよさげだったので、何事も経験だと思って買ってみることにしました。また、最近テーブルをスッキリさせたいという気持ちもあったのでBluethooth対応のHYBRIDにしました。

悩ましいのはキーボードの配列と色、刻印の有無です。HHKBというと黒のものを持ってる人が多い印象なので、天の邪鬼な私は白にしました。他の人のものと間違えづらいという理由もあります。配列はキーボードをシンプルにしたい気持ちを抑えてJIS配列にしました。次のようなことを考えました。

十字キーがないと生きていけないから
普段遣いがJISだから
自分のPCを他の人に貸すときにJISのほうが慣れている人が多いから

JIS配列だと無刻印はなさそうです。あったとしてもHHKB初心者ですし、慣れるまでは刻印ありがいいと思っていました。

実際に使ってみて

f:id:dorapon2000:20210121032237j:plain

上がWin機で使っているキーボードで、下が今回購入したもの。アクセント用の赤青キートップも購入しました（高かったです）。

気づかぬうちに手放せなくなっていました。サコサコという打鍵感と打鍵音がとても気持ちいいです。今まで平たいキーボードを使っていて気づきませんでしたが、ストロークが深いと打ち間違いが減ります。タイプ音も想像通り静かでした。タイピング速度は、、、ちょっとわかりません。

Bluethoothについて

ただ、せっかく買ったBluetooth対応ですが、今はUSB接続で利用しています。理由としてはいくつかあります。

毎回キーボードのスイッチをONにしないといけない
同じキーを連続でタイプすると1タイプ分しか認識しないことが多い
なぜかタイプしている間にカーソルが見当違いなところにワープする

USB接続にしてからは上2つの問題は解消して、3つ目はたまにありますが頻度が減った気がします。

HHKBのJIS配列について

自分は大文字の「N」を入力する際に「右Shift」「n」を右手で同時押ししていました。しかし、HHKBのJIS配列の右Shiftは↑矢印の分だけ小さくなっているため（上図）、右手だけで完結させることが難しかったです。今は右手「右Shift」＋左手「ｎ」と入力しています。未だに慣れていません。

ファンクションキーはFnキーを押しながらの入力になります。これを入力するときは刻印があってよかったと思っています。

半角/全角キーは普段から使っていなかったため、その位置にEscが来て押しやすくなりとても満足です。

まとめ

Bluetoothであったことと配列が少し違うことで戸惑う部分もありましたが、今では慣れて毎日この打鍵音を聞きながら作業しています。買う前からだとあんまり想像していない姿でした。~~麻薬な気がします。~~

2020-11-16

最近読んだ本の感想2

読書

前の感想記事から1ヶ月経って、読んだ本が貯まってきたので復習を兼ねてまたまとめておく。

dorapon2000.hatenablog.com

読んだ本一覧

技術系

アカマイ知られざるインターネットの巨人
詳解HTTP/2
WEB+DB PRESS Vol.119
- 特集1 フロントエンド脱レガシー
- 特集2 インフラ障害対応演習
Software Design 2018年8月号
- 第1特集スマホゲームはなぜ動く？
個人開発をはじめよう！クリエイター25人の実践エピソード
Modern Perl 4th edition
におうコードの問題集ソフトウェア設計に立ち向かう編

その他

アカマイ知られざるインターネットの巨人

インターネット通信量の約3割を取り仕切っていると言われるアカマイ社のCDNを実現する仕組みとビジネス構造を紹介している。

アカマイ　知られざるインターネットの巨人 (角川ＥＰＵＢ選書)

作者:小川晃通
発売日: 2014/08/11
メディア: Kindle版

以下の記事を書く際にabemaがアカマイのCNDサーバからストリーミング配信をしていたため、気になって購入。

HLSのHTTPヘッダを見る - dorapon2000’s diary

アカマイとそのビジネス構造について知れたのは興味深かったが、それよりもインターネットの構造について知れたのがよかった。管理するネットワーク規模が大きいとなぜビジネス的に有利なのか、雰囲気はわかるが具体的な部分を知りたかった。この本ではインターネット中のデータの流れからお金の流れを説明してくれている。CDNもどのように実現しているのかわかっていなかったが、DNSのCNAMEを利用していることもわかった。また、通信事業会社ではないのに同等のネットワークを持っているGoogle・Amazonといったビッグテックの立ち位置もわかった。2015年の話なので現在だと事情が変わっているかも知れないが、とてもおもしろかった。

詳解HTTP/2

2018年時点での、HTTP/1.1とTCPの問題点とそこから生まれたHTTP/2の仕様を網羅的に説明している。また、HTTP/3についても触れている。

詳解HTTP/2

作者:Barry Pollard
発売日: 2020/06/15
メディア: Kindle版

読んだ第一の感想はHTTP/2がすごいTCPと似てるということ。L4でしていた制御をL7に持ってきた感じがあった。

TCPではコネクション単位で管理するが、HTTP/2ではストリーム単位で管理する
TCPの受信ウィンドウ(rwnd)と似た仕組みが、HTTP/2でWINDOW_UPDATEフレームとして存在する
TCPではRSTフラグでコネクションを強制終了できるが、HTTP/2でRST_STREAMフレームとして存在する
TCPではDSCP値で優先制御できる仕組みがあるが、HTTP/2でもフロー制御として存在する

HTTP/2の特徴の1つのサーバープッシュはメリットがない割にリスクが高いと言及されていたが、実際にChromeではサポート廃止が検討されてる*1。先見の明あり。

HTTP/2を使うからと言って必ずしもHTTP/1.1より性能が良くなるわけでもないこともわかった。特にパケットロスについて1.1より性能が落ちがちというのは覚えておかないといけない。

WEB+DB PRESS Vol.119

特集1 フロントエンド脱レガシー
特集2 インフラ障害対応演習

WEB+DB PRESS Vol.119

発売日: 2020/10/24
メディア: Kindle版

インフラ障害対応演習の特集で、障害対応は属人化しやすいから予めチームで演習をするとよいというアドバイスが記憶に残った。障害対応はだいたい緊急なので、一番慣れている人ばかりが毎回担当をして、それ以外の人にノウハウがたまらない。なるほどと思った。

サイボウズさんの脱レガシーの特集も実践的なアドバイスが盛りだくさんだった。一番の学びはテスティングトロフィーでフロントエンドのユニットテストを書きすぎてはいけないということ。記事には細かく書かれていないが、どうやらユーザーが実際にする操作のテスト（結合テスト）を増やすほう効率がよいということらしい*2。

Software Design 2018年8月号

スマホゲームがどのように実装・運用されているかを実際のゲームを例に紹介されていた。

本棚に眠っていた一冊。こちらは実際にスマホゲームを作る上で現実の開発者がなにを考えているのか知れたのが学びになった。以下は特に印象に残った部分。

通信を減らすために一部のマスタデータをクライアントに保存してしまう
KPI用のログをDBではなくAmazon S3に保存し、Amazon Athenaで集計する
JSONの代わりにMessagePackを用いる

個人開発をはじめよう！クリエイター25人の実践エピソード

個人開発の上で学んだ技術やマネタイズの方法、マーケティングの方法、モチベーションの保ち方などが25人もの人によって紹介されている。

個人開発をはじめよう！クリエイター25人の実践エピソード (技術の泉シリーズ（NextPublishing）)

発売日: 2020/04/03
メディア: Kindle版

どの話もためになった。未経験者が3ヶ月でそれなりのサービスを作ったり、1ヶ月でマネタイズまでできるサービスを作ってしまったりなど刺激をもらった。

個人的に気に入っているのはドヤ駆動開発とビルド＆ゾンビ開発。ドヤ駆動開発は身近な人がほしいと言ったサービスを1日でつくりドヤることでモチベーションを保つ方法。ビルド&ゾンビは、必要最低限のデザインと機能、リリース後に改変作業がでないような設計でサービスをリリースして、運用後のモチベーションの維持問題を回避するというもの。自分もモチベーションが続かず断念した開発があるので、こういう話は重宝する。

Modern Perl 4th edition

Perl 5.22時点でのなういPerlの書き方とその注意点を紹介してくれている。Perlの思想から基本文法、テスト、Mooseと一通り抑えている。英語。

modernperlbooks.com

おすすめされた本。以前Perl Best Practiceを読んだが、内容が少し古いのと、一度Perlを体系的に抑えたかったというのもあって新しくこちらも読んだ。そして、読んでよかった。細かい仕様を理解していないとバグを作りかねない。特にautovivificationは大変ややこしい。これについては自分でも挙動を確認して記事にした。

Perlのautovivificationをいろいろ実験 - dorapon2000’s diary

eachなんかも便利に思えたがそんなこともなかった*3。バグを作らないこと以外に、Perlは様々なコードの書き方があるため、他の人のコードを読むためにも網羅的に理解しておくことは大切。

におうコードの問題集ソフトウェア設計に立ち向かう編

開発負債になりそうな設計の見つけ方をSOLID原則からとてもわかりやすく紐解いてくれる。

booth.pm

以前、ドメイン駆動設計入門を読んだが、別の視点からも設計を考えたいと思い購入（ドメイン駆動設計もSOLIDなので別の視点と言えないかも知れないが）。悪い/良いでクラス図と一緒に説明してもらえるため、大変わかりやすかった。タイトルにあるように、におうポイントも教えてくれるため、もし自分のコードがにおえばSOLIDに反しているということになる。SOLIDの原則は覚えては忘れてで、今回もあぁはいはいあれねで説明はできないので、こうやって集中的に学べてよかった。

本はどう読むか

文学の教授で読書家の方の本に対する姿勢のエッセイ。なんと1972年の本なのに現在でも評価が高い。

本はどう読むか (講談社現代新書)

作者:清水幾太郎
発売日: 2013/03/29
メディア: Kindle版

息抜き枠兼、50年も前のエッセイが今でも評価が高いことに興味が出て購入。エピソードは古いが内容は今でも充分通用すると思った。もちろん、本との出会いが一期一会であった当時とインターネットが生活インフラになっている現代は状況が違う。だが、読書よりメディア（当時はテレビやラジオ）の方が知識の獲得が受動的になり、自分で考える機会を失うというのは今でも言われていること。むしろ、それが50年前から言われてたことに驚く。個人的に響いたのは、本の感想を書くことは、労力を使うが内容の取捨選択と考察を伴うため内容の理解につながるということ。実際に、著者は学生のレポート課題を感想文にしていた。こうして感想記事を書いているのもこの本に影響を受けてのことだった。

お金2.0 新しい経済のルールと生き方

価値主義や有機的システムなどを使い、著者が資本主義を代替する新しい経済の考え方を提案する。

お金2.0　新しい経済のルールと生き方 (NewsPicks Book)

作者:佐藤航陽
発売日: 2017/11/29
メディア: Kindle版

プライムリーディングで無料になる前から気になっていた本。これからは資本主義から情報や影響力、共感などを軸にした価値主義へ移行していくと訴えている。価値はお金に転換可能なため、価値主義は資本主義を包含していると言われて、一理あると思った。例えば、フォロワーが多い人が広告をつぶやけば、影響力をいつでもお金に変えることができるし、逆にお金のやり取りなしに社会を動かすこともできる。価値主義ではお金も影響力も1つの媒体になっている。個人的に、この本は「ソーシャルメディアの生態系」「予想通りに不合理」「消費者は4回評価する。だからファンが大切。だから刹那的なインフルエンサー起用は意味が薄いというお話。」らへんの話をいい感じにまとめているのではないかと思った。

*1:https://asnokaze.hatenablog.com/entry/2020/11/13/001110

*2:https://qiita.com/taneba/items/48db2ad9cf10ad644908

*3:https://developer.hatenastaff.com/entry/2016/04/01/104031#each-%E3%81%AF%E4%B8%AD%E6%96%AD%E3%81%97%E3%81%9F%E6%99%82%E4%B8%AD%E6%96%AD%E3%81%97%E3%81%9F%E6%99%82%E7%82%B9%E3%81%AE%E7%8A%B6%E6%85%8B%E3%81%8C%E6%AE%8B%E3%82%8A%E7%B6%9A%E3%81%91%E3%82%8B

前準備

解決方法

おまけ

space-around

flex + margin: auto

table

参考

これだけはできるようになりたいこと

モード

vimを終了する

検索

移動

コピペ

その他

参考

HHKBの前

購入するときに考えたこと

実際に使ってみて

Bluethoothについて

HHKBのJIS配列について

まとめ

読んだ本一覧

アカマイ 知られざるインターネットの巨人

詳解HTTP/2

WEB+DB PRESS Vol.119

Software Design 2018年8月号

個人開発をはじめよう！クリエイター25人の実践エピソード

Modern Perl 4th edition

におうコードの問題集 ソフトウェア設計に立ち向かう編

本はどう読むか

お金2.0 新しい経済のルールと生き方

アカマイ知られざるインターネットの巨人

におうコードの問題集ソフトウェア設計に立ち向かう編