TIL

Today I Learned. 知ったこと、学んだことを書いていく

特定の行をハイライトした状態のリンクを作成 - GitHub

f:id:tmg1998:20180526093429p:plain:w500

こんな感じでハイライトした状態のリンクを張りたいとき

github.com

リンクの後ろに#L70-L72といったように行番号をつける。
また、コミットのファイルに対してのリンクにすることで必ずその行数になる。

https://github.com/tamago324/CasNewCommentNoticePy/blob/115ebcab2e1f2539e678ac3383b30d8a8b41324c/src/api/comment.py#L70-L72

参考文献

pydubを使って音楽を鳴らす - Python

Pythonで音楽(mp3)を鳴らすにはpydubというライブラリを使えば実現できる。

github.com


音楽鳴らすまでに行ったことはここに書いてある

音を鳴らす · Issue #2 · tamago324/CasNewCommentNoticePy

環境

$ sw_vers
ProductName:    Mac OS X
ProductVersion: 10.13.3
BuildVersion:   17D102

音楽を鳴らすまでの手順

  1. ffmpegをインストール
  2. pipenv install pydubでpydubのインストール

pydubを使うにはffmegというソフトをインストールしなくてはいけない。これに少し手こずった

1.ffmpegをインストール

/usr/local/share/man/man3の権限を実行するユーザーにする必要がある

$ cd /usr/local/share/man/
$ sudo chown -R $USER man3

次にffmpegをインストールする

$ brew install ffmpeg --with-libvorbis --with-sdl2 --with-theora

インストールできたか確認

$ ffmpeg
ffmpeg version 4.0 Copyright (c) 2000-2018 the FFmpeg developers
  built with Apple LLVM version 9.0.0 (clang-900.0.39.2)
  configuration: --prefix=/usr/local/Cellar/ffmpeg/4.0 --enable-shared --enable-pthreads --enable-version3 --enable-hardcoded-tables --enable-avresample --cc=clang --host-cflags= --host-ldflags= --enable-gpl --enable-ffplay --enable-libmp3lame --enable-libtheora --enable-libvorbis --enable-libx264 --enable-libxvid --enable-opencl --enable-videotoolbox --disable-lzma
  libavutil      56. 14.100 / 56. 14.100
  libavcodec     58. 18.100 / 58. 18.100
  libavformat    58. 12.100 / 58. 12.100
  libavdevice    58.  3.100 / 58.  3.100
  libavfilter     7. 16.100 /  7. 16.100
  libavresample   4.  0.  0 /  4.  0.  0
  libswscale      5.  1.100 /  5.  1.100
  libswresample   3.  1.100 /  3.  1.100
  libpostproc    55.  1.100 / 55.  1.100
Hyper fast Audio and Video encoder
usage: ffmpeg [options] [[infile options] -i infile]... {[outfile options] outfile}...

Use -h to get full help or, even better, run 'man ffmpeg'

2.pipenv install pydubでpydubのインストール

普通にこれはインストールできた

$ pipenv install pydub

実行してみる

鳴らす音楽は以下のサイトからダウンロードしておいた

ボタン・システム音[1]|効果音ラボ

フォルダ構成は以下の通り

.
└── sound
    ├── decision7.mp3
    └── sound.py

ソース

import os

from pydub import AudioSegment
from pydub.playback import play

ABS_PATH = os.path.dirname(os.path.abspath(__file__))

def play_sound():
    sound = AudioSegment.from_mp3(f'{ABS_PATH}/decision7.mp3')
    play(sound)


if __name__ == '__main__':
    play_sound()

実行

$ pipenv run python3 sound/sound.py
Loading .env environment variables…
Input #0, wav, from '/var/folders/93/g9_qrz2519z_p3y0k44pctt00000gn/T/tmpp9zk38i8.wav':
  Duration: 00:00:00.86, bitrate: 1411 kb/s
    Stream #0:0: Audio: pcm_s16le ([1][0][0][0] / 0x0001), 44100 Hz, 2 channels, s16, 1411 kb/s
   0.81 M-A:  0.000 fd=   0 aq=    0KB vq=    0KB sq=    0B f=0/0

音楽がなった!!これだけで音楽鳴らせるとかpydubに感謝!!

音楽プレイヤーとか作れるのかな...とか思ったりしてる

参考文献

環境変数の表示 printenv - Linuxコマンド

printenv コマンドで環境変数の一覧の表示ができる

$ printenv
LANG=ja_JP.UTF-8
SHELL=/usr/local/bin/bash
...

参考文献

ディレクトリをコピー

ディレクトリのコピーにはcpコマンドを使う。

-rオプションを使うとディレクトリのコピーができる

$ cp -r from/ to/

参考文献

【 cp 】 ファイルやディレクトリをコピーする | 日経 xTECH(クロステック)

ぷるんと回転するアニメーションの実装(写経して改良) - CSS

ぷるんと回転するアニメーションを写経して、改良してみた

See the Pen ぷるんと回転 by tamago (@tamago324) on CodePen.

  1. サンプルではmatrix3d()で実装されていたが、matrix()でもいいんじゃないかと思ってmatrix()で実装し直してみた
  2. その次に、rotateでいいんじゃないかと思って、rotateで実装

matrixで100pxっぽくなるようにしていたため、rotateの方が回転させるだけなので、楽に実装できる

matrix()関数

これはtransformプロパティの値に指定できる関数で、行列を使って2Dの変形を実現するらしい

基準はmatrix(1, 0, 0, 1, 0, 0)となっている。この状態では何も変形していない状態

1番目の数値は、水平方向の縮尺(a)
2番目の数値は、垂直方向の傾斜率(b)
3番目の数値は、水平方向の傾斜率(c)
4番目の数値は、垂直方向の縮尺(d)
5番目の数値は、水平方向の移動距離(e)
6番目の数値は、垂直方向の移動距離(f)

transform:matrix()-CSS3リファレンス

水平(x)と垂直(y)の縮尺と傾斜率と移動距離を指定するらしい

See the Pen matrix 試し by tamago (@tamago324) on CodePen.

色々やってみたけど、よくわからないから、rotate()とかscale()とかtranslate()とかでやったほうがいいかも...

matrix(a, b, c, d, e, f)matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0 , e, f, 0, 1)と同じ意味らしい

参考文献

【Gulp】インストールからSassのコンパイルまで - CSS

SassのコンパイルをするときにGulpというものを使うといいって聞いたことあるからインストールとコンパイルを行ってみた

Gulpはめんどくさいことを自動で行ってくれたりするらしい。

環境

OS

$ sw_vers
ProductName:    Mac OS X
ProductVersion: 10.13.3
BuildVersion:   17D102

Node.js

$ node --version
v8.7.0

コンパイル

プロジェクト毎にGulpをインストールして色々設定をしないといけない スクリプト作ったほうが良さそう...いつかやろう

プロジェクト設定ファイルの作成

$ npm init -y

package.jsonpackage-lock.jsonというファイルが作られる

SCSS記法のSassのコンパイル

Gulp本体(gulp)とコンパイルするためのモジュール(gulp-sass)をインストールする

$ npm install -D gulp gulp-sass

-Dオプションを付けてカレントディレクトリに対してインストールする
-D--save-devの省略した形らしい。また、installiでもいいらしい

記事によってはnpm install -g gulp-cliとグローバルにGulpを導入する手順を解説しているところもあります。2017年現在、それは少数派です。この記事で説明しているように、グローバルにはGulpをインストールせずローカルだけにインストールするのがフロントエンド界隈では一般的です。

タスクの作成

自動で実行したい処理をgulpfile.jsに記述する必要がある

// 使用するプラグインを読み込む
const gulp = require('gulp');
const sass = require('gulp-sass');

// タスク
gulp.task('default', function () {
  // css/style.scssを選択
  gulp.src('css/style.scss')
    // コンパイル
    .pipe(sass({
      // 見やすくする
      outputStyle: 'expanded'
    }))
    // コンパイルしたファイルをcssフォルダに格納
    .pipe(gulp.dest('css'));
});

pipeを使うことで処理をつなげることができる

タスクの実行

$ npx gulp

gulpfile.jsに記述されているタスクを実行してくれる

Sassファイルが更新されたら自動でコンパイルする

Watchという機能を使うことで自動でコンパイルできるようになるらしい

gulp.watch()メソッドを使うことで、更新があった場合に自動で処理を実行してくれるらしい。

gulp.watch(ファイル名, 処理)

watchメソッドの処理の部分にコンパイル処理を渡す

const gulp = require('gulp');
const sass = require('gulp-sass');
const src = 'css/style.scss';

gulp.task('default', () => {
  // 更新時にコンパイル
  gulp.watch(src, () => {
    gulp.src(src)
      .pipe(sass({
        outputStyle: 'expanded'
      })
      // Sassコンパイルエラー表示(必須!!)
      .on('error', sass.logError))
      .pipe(gulp.dest('css'));
  });
});

また、コンパイルエラーの表示処理も入れてあげないといけないらしい

監視の開始

$ npx gulp

Ctrl+cで止めることができる


こんな感じで使えるようにはなった!! いろんな事ができるらしいから、使っていくうちに試していこう

参考文献

transitionについてのメモ

transitionとは

プロパティを変更するときにどのように変化させるかを設定できるプロパティ!

.boxに定義された値・・・transitionのスタート値
.box:hoverに定義された値・・・transitonのゴール値

CSSアニメーションの基礎【Transitionを使ってみる】 | キタックCGソリューションセンター|Webマーケティング

もし、hover時に適用するスタイルが合った場合、:hoverに記述したスタイルがアニメーション後のスタイルになる

プロパティ

指定する値は以下の通り

  • transition-duration: かける時間
  • transition-property: 適用するプロパティ名
  • transition-timing-funciton: 変化の仕方
  • transition-delay: 始まるまでの時間

transitionでは、上の4つを1度に指定できる

transition-duration

始まりから終わりまでの時間を指定できる

transition-duration: 時間(ms, s);

かける時間を1000msと300msとした場合

transition-duration: 1000ms;

See the Pen transition-duration by tamago (@tamago324) on CodePen.

transition-peorperty

transition-propertyでtransitionを適用させるプロパティを指定することができる
widthだけにtransitionの効果を適用とかもできる

transition-property: プロパティ名;

設定できるキーワードがいくつかある

  • none: transitionを適用しない
  • all: すべてのプロパティに対して適用する

例)background-colorとwidthを変化させるとき、transitionをwidthだけに適用する

transition-property: width;

See the Pen transition-property by tamago (@tamago324) on CodePen.

横幅の変化だけ、transitionが適用されているのがわかる

transition-timing-function

transition-timing-functionでtransitionの進行度とタイミング(変化の仕方)を指定できる

値として設定できるキーワードがいくつかある

  • ease
  • linear
  • ease-in
  • ease-out
  • ease-in-out

また、cubic-bezier()関数を使うことでいろいろな動きができる

See the Pen transition-timing-function by tamago (@tamago324) on CodePen.

cubix-bezier関数で実現できる例を見れるサイト

cubic-bezierでも表現できないものに関しては@keyframeのアニメーションで実装するらしい

transition-delay

transition-delayで開始を遅らせる時間を指定する

transition-delay: 数値;

単位はmssのどちらかで記述できる

transition-delay: 500ms;  // 0.5s

See the Pen transition-timing-function by tamago (@tamago324) on CodePen.

参考文献