Canvas 要素のレスポンシブ対応
Canvas 要素の表示サイズは width 属性と height 属性に固定値を設定するため、そのままではレスポンシブ対応できない。
CSS で width や height を指定しても、表示サイズに対する相対サイズで拡大/縮小されるだけで期待したとおりには動かない。
代わりに padding-top を使ってレスポンシブ対応してみる。
サンプル
次の HTML は Canvas 要素をレスポンシブ表示する。
ブラウザのウインドウ幅に合わせて、Canvas 要素も比率を保ったまま拡大/縮小される。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Canvas 要素のレスポンシブ対応</title>
</head>
<body>
<div style="position: relative; padding-top: 56.25%;">
<canvas width="640" height="360" style="position: absolute; top: 0; left: 0; width: 100%; height: auto; border: 1px solid red;"></canvas>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var canvas = document.querySelector('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillRect(25, 25, 100,100);
}
});
</script>
</body>
</html>ポイント
まずは Canvas 要素の親要素に次のスタイルを設定する。
<div style="position: relative; padding-top: 56.25%;">
padding-top には、Canvas 要素の面積比を設定する。
もしアスペクト比が 4:3 なら 75% を、3:2 なら 66.66667% を設定する。
それ以外のアスペクト比なら、後述の式を使って計算で求めた比率を設定すればよい。
続けて Canvas 要素のスタイルを設定する。
<canvas width="640" height="360" style="position: absolute; top: 0; left: 0; width: 100%; height: auto; border: 1px solid red;"></canvas>
属性の width と height には表示する内容の幅と高さを設定する。
（省略した場合、既定値の幅 300px、高さ 150px が設定される）
style 属性の position: absolute; top: 0; left: 0; により、親要素の左上と同じ位置に Canvas 要素が配置される。
同じく style 属性の width: 100%; height: auto; により、幅に合わせて高さが可変となる。
なお、サンプルでは border スタイルも設定しているが、これは確認しやすくする用途なので実際には指定しなくてよい。
面積比の求め方
padding-top に設定する面積比を計算で求める場合、次の計算式を使う。
面積比 ＝ （高さ÷幅）×100
例1： 16:9 の面積比を求める
(9 ÷ 16) × 100 ＝ 0.5625 × 100 ＝ 56.25
例2： 幅 800px、高さ 581px の面積比を求める
(581 ÷ 800) × 100 ＝ 0.72625 × 100 ＝ 72.625
csh - 常駐シェルスクリプト
特定の処理を監視するため、シェルスクリプトを常駐させることになった。
常駐処理は無限ループと待機の組み合わせで実現できる。
まず while コマンドに真（0 以外）を指定して無限ループにする。
ループ内に常駐処理を書く。
その処理が終わったら sleep コマンドで一定時間待機する。
これでスクリプトを終わらせない限り、一定時間毎に処理させるようにできる。
サンプル
次のシェルスクリプトは、5分毎に処理を実行する。
#!/bin/csh
while (1)
# 処理実行
# TODO: ここにループで実行する処理を書く
# 5分待機
sleep 300
end常駐シェルスクリプトの止め方
常駐シェルスクリプトは明示的に処理を止めるまでずっと動き続ける。
シェルスクリプトを停止するには、kill コマンドでプロセスを終了させる。
まずは ps コマンドで PID を取得する。
ps コマンドには -o オプションで表示形式を指定しておいたほうが見やすい。
プロセスID、コマンド、引数を出力 → ps -o pid,comm,args
それから kill -KILL 〈PID〉 でプロセスを終わらせる。
csh - ユーザー入力を読み取る
標準入力からの取得
標準入力を読み取るには $< を使う。
次の例は、ユーザー入力をシェル変数 val に格納し、その内容を出力する。
set val = $<
echo "Entered value: ${val}"次のスクリプトは、ユーザー入力によって実行する処理を変える例である。
1 が入力されたら処理Ａを、2 が入力されたら処理Ｂを、E が入力されたら処理を終える。
#!/bin/csh
top:
echo -n "1:処理Ａ実行、2:処理Ｂ実行、E:終了 ? "
set mode = $<
if (${mode} == '1') then
# ～～～処理Ａのロジック～～～
endif
if (${mode} == '2') then
# ～～～処理Ｂのロジック～～～
endif
if (${mode} == 'E') then
# ～～～終了処理 ～～～
exit
endif
# 未定義の値が入力されたらもう一度入力させる
echo '入力された選択肢は存在しません。再入力してください。'
goto topファイルを読み取る
< を使う。
command < filename
csh - ファイルのタイムスタンプの参照
ファイルのタイムスタンプは ls コマンド、または stat コマンドで参照できる。
ls コマンドでタイムスタンプを参照する
どのタイムスタンプを参照するかオプションで指定する。
-l： 最終変更日時
$ ls -l test.txt -rw-rw-r-- 1 test1 tstgrp 41701 4月 7日 2021年 test.txt
-u： 最終アクセス日時
$ ls -lu test.txt -rw-rw-r-- 1 test1 tstgrp 41701 8月 1日 13:15 test.txt
-c： 作成日時または最終ステータス変更日時（inode 情報の最終変更日時）
$ ls -lc test.txt -rw-rw-r-- 1 test1 tstgrp 41701 5月 11日 2023年 test.txt
stat コマンドでタイムスタンプを参照する
stat コマンドはファイルの情報を表示する。
次のイメージで表示され、その情報の中にタイムスタンプも含まれる。
$ stat test.txt File: test.txt Size: 41701 Blocks: 82 IO Block: 8192 通常ファイル Device: e300000038h/123456789024d Inode: 12345 Links: 1 Access: (0664/-rw-rw-r--) Uid: ( 243/ test1) Gid: ( 202/ tstgrp) Access: 2024-08-01 13:15:38.269705000 +0900 Modify: 2021-04-07 16:08:22.094390000 +0900 Change: 2023-05-11 16:07:02.821499000 +0900 Birth: -
タイムスタンプに関連する表示は以下のとおり。
Access：
最終アクセス日時Modify：
最終変更日時Change：
最終ステータス変更日時（inode 情報の最終変更日時）Birth：
作成日時。
必ずしも表示されるわけではないので留意すること。
例の場合は - が出ているので「不明」ということらしい。
