スプライトアニメーションをしながら座標移動をする

スプライト画像をアニメーションさせながら、座標移動も適応する方法に単純ながら四苦八苦したので記録に残します。

前準備

  <div class='img-container'>
  </div>

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

上のボーダーで囲まれた領域を横断するように歩くスプライドアニメーションを配置したいです。png画像は実際は透過処理しています。

実現方法

多段のdivにして、親に座標移動のanimationを、子にスプライト画像のanimationを適応させることで実現できます。

  <div class='img-container'>
    <div class='animation-move'>
      <div class='animation-walk'></div>
    </div>
  </div>

/* 座標移動 */
.animation-move {
  animation: move 3s linear infinite;
}

@keyframes move {
  to {
    transform: translateX(600px);
  }
}

/* スプライトアニメーション */
.animation-walk {
  background: url(img/walk.png) no-repeat;
  width: 100px;
  height: 100px;
  animation: walk 0.3s steps(2) infinite;
}

@keyframes walk {
  to {
    background-position: -200px 0;
  }
}

実際のコードはgithubに上げています

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

座標移動させない場合

別の画像で

異なるサイズの画像を均等に配置して上下左右中央寄せで並べる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;
}

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

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

解決方法

flexboxを使います。

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

• 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;
}

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

flex + margin: auto

.img-container {
    display: flex;
}

img {
    margin: auto;
}

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

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;
}

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

参考

• 要素を横並びにするならflex boxしかない！ - Qiita
• 代表的なjustify-contentと、特徴。 - Qiita
• CSSのプロパティ値「auto」を使ったテクニックのまとめ、マージンやサイズや配置やFlexboxなど | コリス

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 コマンド	挿入	一時的にコマンドモードのコマンドを入力できる

参考

• よく使う Vim のコマンドまとめ - Qiita
• vim置換 - Qiita
• [vim] insert mode 中に貼り付けるのまとめ - Qiita

HHKB Professional HYBRID Type-Sの感想

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

www.pfu.fujitsu.com

HHKBの前

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

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

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

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

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

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

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

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

実際に使ってみて

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

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

Bluethoothについて

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

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

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

HHKBのJIS配列について

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

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

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

まとめ

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