cssアニメーションとjsの同期
この記事はMojirageアドベントカレンダーの21日目の記事です。
matatsuna.hatenablog.com
cssアニメーションとjsとの同期
ビジュアル的なカウントダウンするバーみたいなものをjsからリアルタイムに動かすのは少しコスト面から望ましくないです
そこで今回はcssアニメーションとjsの同期の方法を紹介します
挙動としては、「5秒間のアニメーションを流し終わったら処理をする/5秒間のうちにキャンセルされたら破棄する」です
流れは
- jsでcssアニメーションを発火する
- 発火したとき、終わるときのしてほしい挙動をsetTimeoutに仕掛ける
- 時間が来る前にキャンセルされたらclearTimeoutする
ソースコード
mojirageでは「マウスが上がって5秒(任意)経ったら平均化を実行する」としているのでその例を紹介します
HTML側
<div id="line" class="line"></div>
CSS側
.line { position: absolute; top: 0px; width: 100%; height: 5px; background: #17cddd; } .fullwidth { animation-name: anime1; animation-duration: 2s; animation-timing-function: linear; animation-iteration-count: 1; animation-direction: normal; } @keyframes anime1 { 0% { width: 100%; height: 5px; background-color: #17cddd; } 100% { width: 0%; height: 5px; background-color: #17cddd; } }
mouseDown() { if (this.splitSetTimeout != null) {//もし仕掛けられていたら var line = document.getElementById("line");//lineのdomを取得 line.className = "line";//元に戻す clearTimeout(this.splitSetTimeout);//仕掛けを破棄する this.splitSetTimeout = null; } } mouseUp() { const splitTime = this.userConfig.splitTime * 1000;//ミリ秒に変換する if (this.splitSetTimeout === null) {//もし仕掛けてなければ var line = document.getElementById("line");//lineのdomを取得 line.className = "line fullwidth";//クラスを追加 line.style.animationDuration = splitTime + "ms";//発火するまでのミリ秒を設定 this.splitSetTimeout = setTimeout(() => {//setTimeoutを仕掛けて入れる //時間が経ったら動かすプログラム }, splitTime);//発火するまでのミリ秒を設定 } }
lineのdomを変数に入れてた方がいいですね
これで、cssのアニメーションと連動させてjsを動かすことが簡単にできると思います
imagemagickでsvg to png
この記事はMojirageアドベントカレンダーの20日目の記事です。
matatsuna.hatenablog.com
imagemagickとは
imagemagickは画像に関わる様々なことができるコンソールで動かすプログラムです
www.imagemagick.org
色んな所で使われてます
しかし、少し変わったことが最近あります
バージョン6までは convert なのですが、バージョン7からは magick に変わってるのでググる時に注意です
svg to png
作ったsvgファイルをどうにかして画像にしようとしたのですが、一番簡単なのはimagemagickでした
> magick -density 100 hoge.svg hoge.png
- densityで画質の調整することができます
参考サイト
PHPでGoogleログイン機能
この記事はMojirageアドベントカレンダーの19日目の記事です。
matatsuna.hatenablog.com
Googleログイン機能
よくWebサービスであるgoogleのログインの実装の仕方です
gyazo.com
Google consoleでkeyを発行する
https://console.cloud.google.com/?hl=ja
「APIとサービス」の認証情報を作成すれば、クライアントIDが取得できます
制限などはお好きに
今回はGmailのアドレスとユーザー名を取得するだけなので特別なAPIの有効化はいりません
indexとcallback
index.php
<?php
$AUTH_URL = 'https://accounts.google.com/o/oauth2/auth';
$params = array(
'client_id' => $CONSUMER_KEY,
'redirect_uri' => 'http://~~~~~~~~~~~~~~~~~~~~~~~/callback.php',
'scope' => 'profile email',
'response_type' => 'code',
'access_type' => 'offline'
);
header("Location: " . $AUTH_URL. '?' . http_build_query($params));callback.php
<?php
$TOKEN_URL = 'https://accounts.google.com/o/oauth2/token';
$INFO_URL = 'https://www.googleapis.com/oauth2/v1/userinfo';
$APP_URL = $_GET["state"];
$params = array(
'code' => $_GET['code'],
'grant_type' => 'authorization_code',
'redirect_uri' => 'http://~~~~~~~~~~~~~~~~~~~~~~~~/callback.php',
'client_id' => $CONSUMER_KEY,
'client_secret' => $CONSUMER_SECRET,
);
$options = array('http' => array(
'method' => 'POST',
'content' => http_build_query($params)
));
$res = file_get_contents($TOKEN_URL, false, stream_context_create($options));
$token = json_decode($res, true);
if (isset($token['error'])) {
echo 'エラー発生';
exit;
}
$access_token = $token['access_token'];
$params = array('access_token' => $access_token);
$res = file_get_contents($INFO_URL . '?' . http_build_query($params));
$res = json_decode($res, true);
var_dump($res);
// $res["email"] email
// $res["name"] ユーザー名これで取得できます
ただし、ローカル環境でする場合127.0.0.1ではなくてlocalhostじゃないとエラー吐くようです
