前回、CSSで三角形を作りましたが
使い道がなかったので
三角形で六角形を作ってアニメーションさせてみました。
jQueryを使用しています。
CSSで三角形を作る（基本）
CSSで簡単に三角形を作れます。
上向き
下向き
左向き
右向き
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<style> .triangle { width: 100px; height: 85px; } .triangle1 { border-bottom: 85px solid #808080; border-right: 50px solid transparent; border-left: 50px solid transparent; } .triangle2 { border-top: 85px solid #808080; border-right: 50px solid transparent; border-left: 50px solid transparent; } .triangle3 { border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-right: 85px solid #808080; } .triangle4 { border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 85px solid #808080; } </style> <div class="triangle triangle1"></div> 上向き <div class="triangle triangle2"></div> 下向き <div class="triangle triangle3"></div> 左向き <div class="triangle triangle4"></div> 右向き |
これを応用して六角形を作って遊んでみました。
CSSで三角形を作る（応用）
VSCodeでVim（viのキーマップ）を使う
Linuxサーバー管理歴が長かったりすると
いわゆるviエディタのキーマップを指が覚えてしまいますよね。
vi（Vim）はコードを書いたりするときに非常に便利で
効率が何倍もアップすると思います。
よくビジネス書で時短について書かれてたりしますが、
ビジネス書を読むような層にあえてviを勧めるのも面白いと思いませんか。
本題ですが、
Vimは専用のエディターでもありますが、
使い慣れたエディターで「viのキーマップ」を使えれば
とても便利ですよね。
現在広く使われているVSCode（Visual Studio Code）には
Vimプラグインというものがあり、
これをインストールするだけで
VSCodeでviのキーマップを使えるようになります。
導入方法は拡張機能を「Vim」で検索するだけなので説明不要ですが、
注意点としてはVimの設定は
setting.json
に記載することくらいでしょうか。
ImageMagick
サーバーにImageMagickをインストールすれば
convertコマンドによって簡単にPDFを画像に変換できます。
|
1 |
convert -alpha remove (PDFファイル) (画像ファイル) |
複数ページある場合は自動で画像ファイルに番号が振られます。
ffmpegで動作のサムネイル生成
サーバーにffmpegをインストールすれば
簡単に動画のサムネイルが生成できます。
|
1 |
ffmpeg -i (動画ファイル) -f image2 -ss 00:00:01 -vframes 1 -s 640x480 (出力ファイル) |
-ss で任意の場面のサムネイルが生成できます。