色々デジノウハウ(My KnowHow)
デジタル化が進んで、私は色々勉強をしたいと思っています。しかしデジタルの進化があまりにも早いので実際ついていけないのは事実です。最近静的サイトジェネレーター(Static Site Generators )って言う言葉をよく見かけます。”IT(Information Technology)(情報技術)用語って多すぎだよ!もうついていけない!”
デジタル化をする為に一般の人間が使えるように進化しないと行けません。”それは当たり前な事”です。一般の人間がデジタルを理解ができなかったらデジタル化をする事は意味がありません。こう言う話しを別に置いておいて本題に行きましょう!
最近のデジタルについてのノウハウ
ターミナルコマンド
使うパソコンはMacOs Big Surです。デフォルトシェルはZ shell(ズィーシェル、zsh)のままで使っています。私はやりたかった事はフォルダーやファイルの削除です。その前に忘れがちの用語を述べます。
- ディレクトリ・・・フォルダ
- カレントディレクトリ・・・現在のディレクトリ
- ホームディレクトリ・・・ターミナルを起動したときのデフォルトのディレクトリ
rm, rmdirコマンドで削除するとWindowsやMacのようにゴミ箱に移動されるのとは違い基本的な復元ができなくなってしまいます。なので、削除する際は慎重にしたほうが良いでしょう。
コマンド:rm (remove)削除 と rmdir(remove directory)
%rm aaa.png #aaa.pngを削除 問題なく削除されました。しかしゴミ箱の中身を見ると、rmで削除したファイルは見当たりませんでした! |
%rm bbb #bbbディレクトリ(フォルダー)を削除 rm: bbb: is a directory #bbbはディレクトリであると言うメッセージ、削除されない |
%rm -f bbb #bbbディレクトリを警告なしで削除(-fオプション) rm: bbb: is a directory #bbbはディレクトリであると言うメッセージ、削除されない |
%rm -rf bbb #bbbディレクトリを警告なしで削除(-rfオプション) 問題なく削除されました。しかしゴミ箱の中身を見ると、rmで削除したフォルダは見当たりませんでした! |
%rmdir bbb #bbbディレクトリを削除 問題なく削除されました。 |
注意:やっぱりターミナルを使うのはかなり抵抗が必要!久しぶりに使ってみたらは取り返しのつかない事が起きてしまうかもしれませんね。初心者にはおすすめできない。特にカレントディレクトリを確認してからコマンドを打つのがいいと思いますね。
cssスタイルシート(Webフォント)
作ったホームページの開くと文字の表示が遅い!これってなんで?色々調べましたのでこのようなお困りの方はこの方法で解決すると思います。私の場合はGoogleフォントを使っています。
/* Googleフォント設定*/ @font-face { font-family: ‘Open Sans’; font-style: italic; font-weight: 400; src: local(‘Open Sans Italic’), local(‘OpenSans-Italic’), url(‘{{ “/fonts/open-sans-v18-latin-italic.woff2” | absURL }}’) format(‘woff2’), /* Chrome 26+, Opera 23+, Firefox 39+ */ url(‘{{ “/fonts/open-sans-v18-latin-italic.woff” | absURL }}’) format(‘woff’); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } |
以下のように @font-faceの中に font-display: swap; を記述するだけです。簡単に解決ができました!
/* Googleフォント設定*/ @font-face { font-family: ‘Open Sans’; font-style: italic; font-weight: 400; src: local(‘Open Sans Italic’), local(‘OpenSans-Italic’), url(‘{{ “/fonts/open-sans-v18-latin-italic.woff2” | absURL }}’) format(‘woff2’), /* Chrome 26+, Opera 23+, Firefox 39+ */ url(‘{{ “/fonts/open-sans-v18-latin-italic.woff” | absURL }}’) format(‘woff’); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ font-display: swap; } |
Webフォントを使う場合、フォントファイルを読み込むのに多少時間が掛かる事が分かりました。その間テキストが表示さるのは他のコンテンスよりが遅くなります。
Webフォントだけではなく、別のフォントを使っている時でも構いません。なるべく早くテキストを表示させたい場合は、font-display 記述子を使った方がいいと思います。
- font-display :フォントがダウンロード済みで利用できるかに基づいて、どのようにフォントの種類を表示するかを定めます。
/* キーワード値 */ font-display: auto; font-display: block; font-display: swap; font-display: fallback; font-display: optional; |
フォントスワップ(font-display:swap)
フォントが読み込まれていない場合、そのフォントを利用しようとしている要素は代替フォントで描画する必要があります。この時期に読み込みに成功したフォントは、通常通りに利用できます。フォントの表示が早くなります。