JavaScript

gulp+webpack+jQuery+pug+sassで開発環境構築

長いこといつか更新しないとと思っていた開発環境を時間があったので作り直しました! あれもこれもと機能充実させていったら、トータル3日ぐらい使ったかもしれません。。 しかし、良い開発環境があれば大きな工数削減・ストレス軽減につながります。 LP~数ページレベルの案件だと使い勝手が良いかなと思います。 大型案件向きではありません。 だいぶオレオレ開発環境なのですが、GitHubに置いておきますので、使 […]

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 […]

スクロールしたとき表示領域がどの要素に入っているのかを判別してみる『ScrollMagic』

スクロールしたとき表示領域がどの要素に入っているのかを判別してみる『Scroll Magic』 Webアニメーション周りの知識が付いてきましたので、今後はとくにWebアニメーション周りの情報を発信していこうと思います。 アニメーションは楽しいです(笑) アニメーションの様子を動画にまとめ、youtubeにUPすることで、SNSでより見てもらえるかと思い、アニメーション周りは動画もつけるようにします […]

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

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

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

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

pugを使って配列、オブジェクトをhtmlに出力する方法

リストなど大量の情報をまとめてhtmlファイルに出力する方法について書きます。 エクセルで企業リストに企業名、リンク先などの情報が記載された原稿を渡されたときなど、 エクセルからのコピペでは疲弊してしまうので、pugを使って一気にhtml化してしまおうという話です。 データの用意 まずは、エクセルから以下のような形に成型します。 [ {name:"google",url:"http://www.g […]

三点リーダーについて-CSSやJSを使った実装方法

css

「50文字以上で三点リーダー(・・・)にしたい」 「3行目以降は三点リーダー(・・・)にしたい」 などの要望があったときに、サクッと引っ張ってこれると便利なので、メモ 一行のみならCSSが一番簡単 一行のみで表示させるのであればtext-overflow: ellipsis;が使えるので、簡単 <p>三点リーダーめんどくさい三点リーダーめんどくさい三点リーダーめんどくさい</p& […]

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

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