スクロールに連動して要素が画面内に入った際にアニメーションを行う実装のメモです。 スクロール連動アニメーションのコードと実装例スクロール連動アニメーションの実装例 JavaScriptの実装はGitHub Gistに纏めています。コードにはTypeScriptを使用していますので、TypeScriptを利用していないWeb制作現場で使用する場合はChatGPTなどに依頼してJSファイルに変換してください。
スクロール連動アニメーションの実装例 – TAKLOG
スクロールに連動して要素が画面内に入った際にアニメーションを行う実装のメモです。 スクロール連動アニメーションのコードと実装例スクロール連動アニメーションの実装例 JavaScriptの実装はGitHub Gistに纏めています。コードにはTypeScriptを使用していますので、TypeScriptを利用していないWeb制作現場で使用する場合はChatGPTなどに依頼してJSファイルに変換してください。
これは知っておくとかなり便利！ details要素にname属性を与えると、連動して開閉するアコーディオンを実装できます
<details>要素でアコーディオンを簡単に実装できますが、懸念点は複数のウィジェットが個別に開閉してしまうことです。1つ目を開いて、2つ目を開くと、1つ目は開いたままです。1つ目を閉じるには、1つ目をクリックして閉じる必要がありました。 しかし、<details>要素にname属性を与えると、すべてのウィジェットを連動して開閉させることができます。1つのウィジェットだけを開くことができる排他的アコーディオンをHTMLとCSSだけで実装する方法を紹介します。 Exclusive Accordion by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 アコーディオンの実装 1つのウィジェットだけを開くことができる排他的アコーディオン 排他的アコーディオンのポリフィル アコー
Advanced Custom Fields Proを用いたGutenbergのブロック開発 - Qiita
Gutenbergが嫌われている件について WordPress5.0にてGutenbergが搭載されてから早4年が経ちました。 今ではGutenbergをフル活用した「フルサイトエディター (FSE)」なるものが実装されつつあり、もはやWordPressを使用する人にとって、Gutenbergの理解は必須です。 しかし、、、世の中はGutenbergが嫌いな人が多い印象を抱きます Gutenberg内の機能開発が活発であり、運用の工数がかかる クラス名が勝手に割り振られてしまい、CSSでの制御が難しい アップデートによりブロックの見た目が崩れることがある Classic Editorよりも、投稿画面のカスタマイズがしにくい カスタムフィールドを設置しても、場所が見にくい（ページ下部とサイドバーにしか出せない）ので編集しにくい などが主に嫌われる理由だと思います。 ※余談ですが、フルサイトエ
CodeSpeedy
CodeSpeedy is a simple tool to manage your code snippet and sync to your Visual Studio Code immediately.
WordPressをヘッドレスCMSにしてNext.jsでブログを作成する方法とエラー対処法
2022年12月24日 JavaScript, React, Wordpress 最近はReactをベースにしたフレームワーク、Next.jsをいじっております。今回はWordPressに登録した投稿をNext.jsで表示させてみようと思います！ ↑私が10年以上利用している会計ソフト！ ヘッドレスCMSとは？ ヘッドレスCMSはコンテンツの管理のみをするCMS（＝Content Management System）のこと。例えばWordPressではコンテンツの作成から表示までを行えますが、ヘッドレスCMSではコンテンツの表示は別の方法で行います。ここではNext.jsを使ってみます。 ヘッドレスCMSを使うメリット 表示部分を別途用意することになんのメリットがあるのでしょうか？ざっくりと以下の3点が挙げられるかなと思います： 表示速度の改善 セキュリティの向上 管理しやすい 通常のWo
最近のランディングページで見かける！ スクロールに連動して背景画像をアニメーション化できるバニラJavaScriptのライブラリ -ScrollMovie.js
マウスのスクロールやキーボード操作、スマホのスワイプ操作に連動して背景画像をアニメーション化し、まるでスクロールで動画を操作しているかのようなコンテンツを実装できるバニラJavaScriptのライブラリを紹介します。 プロダクトのランディングページとかにいいですね。Appleなどは動画を使用していますが、操作している感があって面白いです。順再生・逆再生にも対応しており、背景画像なのでその上にコンテンツを自由に配置できるのも大きな魅力です。 ScrollMovie.js ScrollMovie.js -GitHub ScrollMovie.jsの特徴 ScrollMovie.jsのデモ ScrollMovie.jsの使い方 ScrollMovie.jsの特徴 ScrollMovie.jsは、ウィンドウをスクロールするときに背景画像をアニメーション化できるバニラJavaScriptのライブラリ
Three.jsを使って2Dのモーフィングアニメーションを実装する | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
今回紹介する2Dのモーフィングアニメーションは実務でも実装する機会が多く、先日リリースした下記のフロンティア株式会社様のコーポレートサイトでも似たような実装を行いました。それぞれのセクションやページで2Dのパーティクルが様々な形に変化していきます。こういった動きは躍動感が出ますよね。 それでは早速実装していきます。 デモ 用意したデモはこちら。時間経過でパーティクルが丸、四角、星など様々な形に変わっていきます。今回の実装のポイントはイラストレーターで作成したパーティクルから座標を抜き出しているところです。そちらを中心に解説していきたいと思います！ See the Pen Threejs Points 2D Mofing by Hisami Kurita (@hisamikurita) on CodePen. Step1 イラストレーターでパーティクルの座標を指定する まず、下準備としてどん
datalistでコンボボックス（知名度が低いウェブ標準ひとりAdvent Calendar 2021 – 18日目） | Ginpen.com
知名度が低いウェブ標準ひとり Advent Calendar 2021 – 18 日目 今日は <datalist> です。コンボボックスを作れます。 <datalist> – HTML: HyperText Markup Language | MDN デモ：https://codepen.io/ginpei/pen/wvrdEeZ 基本的な使い方 <select> のように複数の <option> を子に持ちます。画面には描画されません。連携したい <input> の方からは ID を list 属性で指定します。 <input list="my-list" /> <datalist id="my-list"> <option value="Apple">Apple</option> <option value="Banana">Banana</option> <option value
GASを使ったスクレイピングの作成手順を紹介！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ エンジニアのまうみです。 突然ですが、「今使ってるブログサービスからWordPressに引っ越ししたい」と検討中の方はいらっしゃいますか。 もし、現在のブログサービスに記事をエクスポートする機能がない場合、手作業で記事を更新する必要があります。10記事程度ならまだしも、100記事以上ともなると、それは流石に手作業では骨が折れますね。 そこで今回はGoogle Apps Script（以下：GAS）で、スクレイピングしたデータをスプレッドシートに保存するプログラムを作り方をご紹介します。 【前提】スクレイピングとは スクレイピングとは、あらかじめ指定したWebサイトを巡回して情報を取得し、新たな情報を出力するためのプログラムです。 今回は、開発環境を構築することなく簡単にプログラムを実行できるGASを使用します。特に開発環境は初心者がつまづくところなので、そこをスキップできるの
YouTube Data API v3を使用して、YouTubeページと同じリストモジュールを作ってみた【LIGアドベントカレンダー20日目】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのはっちゃんです。 こちらはLIGアドベントカレンダーの20日目の記事です。 LIGアドベントカレンダー2019は こちら！ 今回は、YouTube Data API v3を使って、YouTubeページと同じリストモジュールを再現してみたいと思います。 YouTube Data APIとは YouTubeが提供しているAPIで、動画やチャンネル、再生リストに関わる情報を取得して、自分のWebサイトやアプリケーションで使用することができます。 公式のドキュメントが用意されているので、詳しくはこちらをご覧ください。 https://developers.google.com/youtube/v3/getting-started?hl=ja 今回やること 動画URLの取得 サムネイルの取得 タイトルの取得 チャンネル名の取得 チャンネルURLの取得 再生回数の
【自前でBO Tech】GAS（Google Apps Script）とスプレッドシートを連携させて収支の週次レポートをオートメーション化してみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGセブ支社代表のせいと（@seito_horiguch）です。 最近「Fin Tech」とか「HR Tech」とかって言葉が流行っていますが、「BO Tech（バックオフィス テック）」という言葉もあるそうです。 なんか響きがいいですね。BO Tech。 つーわけで今回は手数が多いバックオフィス系の作業をちょっとしたテクノロジーで解決しようと思います。これがBO Techになるかわかりませんが、とりあえず言いたいだけなので言わせてください。BO Tech。 「どんな仕事だってテクノロジーで効率化できまっせ。ほにゃららTechしていこうぜ」というコンセプトのもと、進めていきたいと思います。 テーマ：収支の週次報告 さて、今回のテーマとなるやっつけたい非効率的な作業はこちら。 ※ 実際のレポート内容をお見せするのはまずいので、数字はすべてダミーです。 なにかというと、週次の収支
Next.jsを勉強してみる その② 〜画面作成編〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
まいどです。 右腕が折れても、意外と仕事ってできるもんですね。3ヶ月前に右腕の上腕骨を骨折したバックエンドエンジニアのやなさんです。 さて、前回はNext.jsの開発環境を構築する記事を書きました。 画面作成に必要なものをインストール 今回はTypeScriptで書いてみようと思うので、ターミナルで以下コマンドを実行します。 # typescriptで記述するので必要なライブラリをインストール # Next.jsのプロジェクトルートで実行すること npm install --save-dev typescript @types/react @types/react-dom @types/node コンポーネントで画面のひな形を作成 各画面を作成する前にひな形となるファイルを作成します。 今回の雛形にはheadタグやシステム共通となるヘッダー、フッターを定義しています。 ※ 画面のstyle
スプレッドシートの祝日一覧をiCalでGoogle Calendarに読み込めるようにする | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。バックエンドエンジニアのまさくにです。 弊社はセブにも拠点があり、いまメンバーが急激に増えておりまして、組織づくりも変化に変化を重ねています。今は日本拠点のエンジニアよりもメンバーいますからね。いろいろと変えていかなければならないでしょう。 セブはオフショア拠点でもあるものですから、日本と休日が違うとけっこう困ることが多いんですね。そのため、これまで祝日も日本に合わせてもらっていました。日本が休みの日に、セブも休みです。ただ、現地メンバーの生活や文化を考えると、あんまり良くないんじゃないかということで、9月からセブはセブの祝日にしたがうことになりました。 で、セブの祝日って、フィリピンの祝日だけじゃないんですね。セブ島の日というか、ローカルな休みがけっこう多くて、年によっても違うとかで把握するのも大変なので、Google Calendarで読み込めるよう、祝日をiCal形式で吐
barba.js v2で非同期遷移し遷移時のアニメーションをつけてGTMでGA設定までやってくよ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
バックエンドに転身してもフロントエンドのお仕事も引き続きするハルです。今回はフロントエンドの記事を書きます。 Webサイトで非同期遷移をし、切り替えアニメーションをつけたいときに使えるライブラリのbarba.jsのv2を紹介したいと思います。 ※非同期遷移については、こういう動きをするものだよーというみやさんの記事がありますのでご参照ください（今回紹介する技術が使われているものではありません）。 barba.js v2 https://barba.js.org/ 以前、v1も使ったことがあったんですが v2を触ってみて、記述方法と変わっていたので導入方法の紹介をします。また、アニメーションの設定時にだいたいこんな感じにすればいいというのがわかったので、そこもまとめていきたいと思います。 barba.js v2 の注意点 対象ブラウザに制限があり対応する場合、ポリフィルを使用する必要がありま
ちょっとしたデータまとめにも便利！ Googleスプレッドシートで「GAS（Google Apps Script）」をつかってみよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのハルです。 最近、スプレッドシートでデータをまとめることにハマっています。特に、GASという便利なスクリプト言語を書くのがとても面白くて……。今回はそのGASについて、触り程度ですがご紹介したいと思います。 GAS(Google Apps Script)とは Javascriptベースのスクリプト言語で、Googleのサーバーでスクリプトを実行することができます。 Jvascriptを使える方なら、問題なく扱うことができるはず。このGASを使用すれば、Googleのスプレッドシート・ドキュメント・Gmailなどと容易に連携することが可能になります。今回はスプレッドシートの操作を行う方法を紹介しますが、「なんでもできそう」という気持ちになってもらえると思います。 ダイアログボックスをポップアップさせてみる 最初なので、まずはファイルを作成するところから紹
編集できるtableと、その入力値に連動した簡易的なグラフ
Result 編集はcontenteditable属性を使っています。 動作サンプルなのですべてのセルは編集可能となっていますので、コンテンツに応じて便宜変更してください jQueryvar vis = function(e) { var count = $(e).children('td').not(':first-of-type').length; var width = $('.chart').height(); var barwidth = (width/count)-10; var heighest = 0; var chartTitle = $('th:first-of-type').html(); var tableTitle = $('.table-title').html(); var chartTitleVal = $(e).children('td:first-of-
[CSS]Webページのこれからのレイアウトテクニック！FlexboxとCSS Gridは一緒に使用してこそ価値がある
Webページのレイアウト、一昔前まではfloat、最近のプロジェクトではFlexboxが主流だと思います。CSS Gridはどうでしょうか？ CSS Gridは主要なすべてのブラウザにサポートされ、採用を検討している、また既に導入している人も少なくないでしょう。 注意しておきたいのが、CSS GridがあればFlexboxはいらないという考え方です。 これからのレイアウトは、FlexboxとCSS Gridを一緒に使用することで、それらの性能を効果的に利用できます。 Flexbox and Grids, your layout’s best friends by Eva Ferreira 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 FlexboxとCSS Gridは一緒に使用することでパワーを発揮する 神話は崩された Fri
![[CSS]Webページのこれからのレイアウトテクニック！FlexboxとCSS Gridは一緒に使用してこそ価値がある](https://cdn-ak-scissors.b.st-hatena.com/image/square/222e57e0cb617f5924de9e159879efca2a68aa3e/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201704%2F2017111110.png)
Googleドライブの各種データを自動処理できる「GAS」で作業自動化の第一歩を踏み出してみた
Googleが提供するスクリプト実行環境「Google Apps Script」(以下GAS)を使うと、簡単にJavaScriptを実行することができます。Google ドキュメントやGmailなどのGoogle提供の各種アプリを簡単に操作することができるとのことで、今回は試しにGoogle スプレッドシートを操作してみました。 Apps Script | Google Developers https://developers.google.com/apps-script/ まず、元となるデータを作成します。Google ドライブの画面左上にある「新規」をクリックし、「Google スプレッドシート」を選択します。 今回は、「201708」や「201709」といった月ごとのシートがあり、そのシートの「C2」セルに合計金額の記載があるという「テストデータ」を用意しました。 同様に「テス
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ドレログ | フリーランスクリエイターのドレッドの雑記ブログです。