JavaScript

phpとJavaScriptでアメブロRSSをリアルタイムに表示

アメブロのRSSを表示させる際、JavaScriptのみでできるだろうと思っていたのですが、JavaScriptのみだと実装が難しく、ハマったのでまとめておきます。 JavaScriptのみでは簡単に他サイトのRSSを表示できない 先に結論を言うと、JavaScriptのみだとCORS(Cross-Origin Resource Sharing)の問題があって、他サイトのデータを取得してくることが […]

YouTube Data APIでリアルタイムに動画一覧を表示

久々のブログ更新となりました。。。 コンスタントに書きたいけど、どうしても後回しになってしまいますね。 今回は、YouTube Data APIについてちょっと触ったので、備忘録を兼ねてまとめていこうと思います。 2019/10/05現在で最新の「YouTube Data API v3」を使います。 公式のリファレンスはこちら まずはAPIを取得して下準備 まずはGoogle Developer […]

Chart.jsでダイエット記録をグラフ描画してみる

こんにちは! 今回は、先日「フリーランスは健康管理も仕事!- ダイエット編」の記事を書いたついでに、フロントエンドエンジニアらしく、体重の推移をグラフ化してみようということでまとめてみます。 完成品 以下に作成したものをUPしますので、見てみてください。 https://korsmic.github.io/JWS-Blog/chartjs/ 使用ライブラリ紹介 chart.jsというものを利用して […]

令和でSVGアニメーション -anime.jsの使い方

こんにちは! 今回は、以前案件で一度利用したことがある、JSでSVGアニメーションを行うライブラリと使い方をご紹介しようと思います。 令和というテキスト(SVG)を動かしてみます。 完成品 以下に作成したものをUPしますので、見てみてください。 アニメーションが終わっていたら、リロードで始まります。 https://korsmic.github.io/JWS-Blog/animejs-svg/ 使 […]

JSで画像のパラパラ漫画を5分で実装してみる

こんにちは! こっそり1週間に2本ペースでブログを更新していこうという目標を立ててみました。 100記事UPを目指して今日ももくもくと頑張ります。 今回は、以前案件で一度利用したことがある、JSでパラパラ漫画風の表現をするライブラリと使い方をご紹介しようと思います。 サクッとできるので、手間もほとんど掛かりません。 どんなものができるのか 以下に作成したものをUPしますので、見てみてください。 h […]

実務で利用しているJSアニメーションライブラリについて

こんにちは! 本日は、実務で利用したことがある、JSでのアニメーションライブラリについてご紹介します。 スクロールして表示領域に入ったらアニメーションという流れも非常に多いので、併せてスクロール系もご紹介します。 各ライブラリの使い方などは、別途記事にまとめていきたいと思います。 紹介するライブラリ アニメーション系 ガッツリアニメーションならこれ!「TweenMax・TimelineMax」 S […]

jsを使ったアニメーション-anime.jsについて

jsを使ったアニメーションをanime.jsで実装する方法について書きます。 今回は、スクロールして画面上にアニメーションしたい要素が出現したときにイベントが発生するようにするため、jquery.inviewを利用します。 セッティング 各種ライブラリは以下から落としてきます。 – anime.js – jquery.inview <script src="https […]