JavaScript のはてなブログへの埋め込みテスト

Web プログラミング

この前、マウスオーバーしたら色が変わるアニメーションを anime.js で作る方法の記事を書いた。

ack-ludum.hatenablog.com

これをはてなブログ上で実現できないかなと思って色々試したところ、 以下のようなコードを書いたら上手くいった。

鬼門は anime.js のインポートで、さすがに無理かと思ったが、 cdnjs というクラウドを利用すればインポートできた。 integrity 付きでインポートできるのでセキュリティ面でも良さそう。

<div id="frame" class="frame"> </div>

<style>
.frame {
    background-color: rgb(48, 48, 128);
    height: 20vmin;
    width: 20vmin;
}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" 
integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" 
crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
var frame = document.getElementById('frame')
var originalColor = "rgb(48, 48, 128)"
var highlightColor = "rgb(128, 48, 48)"

function AnimeChangeColor(color) {
    anime({
        targets: frame,
        backgroundColor: color,
        duration: 200,
        easing: 'linear'
    })
}

frame.addEventListener('mouseover', () => {
    AnimeChangeColor(highlightColor)
});

frame.addEventListener('mouseout', () => {
    AnimeChangeColor(originalColor)
});
</script>

↓マウスオーバーしたら色が変わります。

JavaScript/TypeScript初学者の備忘録（６）

Web プログラミング

概要

TestView を用いた MVVM (Model-View-ViewModel) パターン実装の続きに取り組む。

概要と事の経緯については、 0. Figma 奮闘記と JavaScript との邂逅を参照のこと。

続きを読む

JavaScript/TypeScript初学者の備忘録（５）

Web プログラミング

概要

前回は、 JEST の導入と TDD (テスト駆動開発) を進めるだけで終わってしまった。 今回は、 TestView を経由して MVVM (Model-View-ViewModel) パターンを導入していこう。

概要と事の経緯については、 0. Figma 奮闘記と JavaScript との邂逅を参照のこと。

続きを読む

JavaScript/TypeScript初学者の備忘録（４）

Web プログラミング

概要

ここでは、これまで作ってきた GUI モデルに MVVM (Model-View-ViewModel) パターンを導入する。 テストもできるようにする。というか、 TDD (テスト駆動開発) も導入しながら進めていく。

概要と事の経緯については、 0. Figma 奮闘記と JavaScript との邂逅を参照のこと。

続きを読む

JavaScript/TypeScript初学者の備忘録（３）

Web プログラミング

概要

ここでは、紫微斗数という占いの命盤を作るための盤面を表す HTML/CSS と、 そこにアニメーションを加える TypeScript を書いてみる。

概要と事の経緯については、 0. Figma 奮闘記と JavaScript との邂逅を参照のこと。

続きを読む

JavaScript/TypeScript初学者の備忘録（２）

Web プログラミング

概要

ここでは、 JavaScript で作った環境を TypeScript に変換して、 Anime.js を使った簡単な Web アニメーションの試作を再現してみる。

概要と事の経緯については、 0. Figma 奮闘記と JavaScript との邂逅を参照のこと。

続きを読む

JavaScript/TypeScript初学者の備忘録（１）

Web プログラミング

概要

ここでは、 JavaScript の実行環境である Node.js をインストールして、 Anime.js を使って簡単な Web アニメーションを試作する。

概要と事の経緯については、 0. Figma 奮闘記と JavaScript との邂逅を参照のこと。

続きを読む