スクロールでナビゲーション（ページ内リンク）のカレント表示【コピペOK】｜しょーごログ
カレント表示コピペの仕方まずは以下、codepenで動くものを公開しています。 See the Pen current navigation by samuraibrass (@samuraibrass) on CodePen. コピペの仕方ですが、まずjQueryを利用しますので読み込んでください。 その後、こちらのjsコードをjsファイルにコピペしてください。 codepeと同じjsコードです。 その１：jsファイルコピペ$(function () { var set = 200;//ウインドウ上部からどれぐらいの位置で変化させるか var boxTop = new Array; var current = -1; //各要素の位置 //position-nowは場所を取得したい対象の要素に付ける $('.position-now').each(function (i) { boxTo
JSでのスクロール連動エフェクトにはIntersection Observerが便利 - ICS MEDIA
ウェブのリッチな表現としてスクロールに応じたエフェクトがあります。これまでJavaScriptのscrollイベントで実装していましたが、Intersection Observer APIを使うとより効率的に実装できます。ブラウザーのサポートも拡充し、今後は標準となる技術でしょう。 ▼スクロールで目次の色が変わるエフェクト 本記事ではIntersection Observer APIの使い方と実践例を解説します。 特定の位置で発火する従来の手法 これまで、特定の位置で発火するイベントにはscrollイベントを使う必要がありました。以下のコードは、あらかじめページ上部からの距離を取得し、スクロール量が規定に達したところで発火させる手法です。 window.addEventListener("scroll", () => { const srollVal = window.pageYOffse
ChromeのデベロッパーツールでJSをデバッグする方法(2022年版) - ICS MEDIA
JavaScriptのデバッグは、ウェブ開発の必須スキルのひとつです。プログラムの実行をデバッグすることで、現在の変数の値や、処理がどのように進んでいるのかを確認できます。デバッグによってプログラムが意図した動作になっているかの分析に役立てられます。 本記事ではGoogle Chromeブラウザーの「Chrome Developer Tools」（以下「デベロッパーツール」、「DevToolsデブ・ツールズ」という略称もあります）を使用してJavaScriptをデバッグする際の基本的な使い方を解説します。「今までデベロッパーツールを使ったことのない」という方でもこの記事を読めば理解できるよう、チュートリアル形式になっています。20分ほどで理解できるようまとめているので、順番に試しながら読み進めてください。 この記事で学べること デベロッパーツールの使い方 JavaScriptのブレークポイ
【Vue.js】v-bindでclass名を動的に追加、削除する！（北斗の拳の名言編） - クモのようにコツコツと
Vue.jsの続きです。前回まではJSONファイルの読み込みをしました。今回は属性値の動的な変更をします。v-bindを使ってclass名の追加、削除を行います。それではいきましょう！ 【目次】 v-bindは属性を指定するディレクティブ v-bind:hrefでURLを指定 v-bind:syleでCSSスタイルを指定 v-bind:classでclass名の追加、削除 複数ボタンで「北斗の名言」を表示する 最後に ※前回：【Vue.js】axiosでJSONファイルを読み込む（はっぴいえんど編） - クモのようにコツコツと v-bindは属性を指定するディレクティブ 以前の記事でv-on、V-if、v-forをやってみた。これら（v-hoge）は「ディレクティブ」というVue.js独自の属性。 ※参考：【Vue.js】イベント（v-on）、分岐（v-show、v-if）、ループ（v-f
【Nxut.js】axiosの初期設定を行う(baseURL・browserBaseURLを解説) - 独学プログラマ
2020.06.23に公開 Udemy 5. RailsAPI×Nuxt.js初めてのAPI通信 No.2 / 3 今回達成すること API通信をするaxios（アクシオス）モジュールの設定を行い、 Nuxt.jsのトップページにAPIリクエストを送るボタンを設置します。 完走するとhttp://localhost:8080に、このようなボタンが表示されます。 ※ この記事ではNuxt.js（frontディレクトリ内）のファイルを編集します。 axiosのインストールを確認する 手順通りに進んできた方はpackage.jsonに@nuxtjs/axiosモジュールがインストールされていると思います。 front/package.json ... "dependencies": { "nuxt": "^2.0.0", "@nuxtjs/axios": "^5.3.6" }, もし見当たらない
JavaScriptの構文チェックが出来るオンラインツールを紹介！
この記事では、JSの構文チェックができるオンラインツールを紹介しています。 ブラウザ上でコードをペーストするだけで構文チェックをしてくれるので、JSの開発をより効率的に進めることができます。 2つ紹介しているので、用途に合わせて使い分けてみてください！
Vue.jsでAccordionを作ってみるく - astamuse Lab
こんにちわ。 今日は前回の続き（「絶対フォント感」を身につけようとすると新たな扉が開く話 - その1 - http://lab.astamuse.co.jp/entry/2018/06/06/131745）を書こうと思ってたのですが、 アクセス数がかなり少かった（；；）ので一旦お休みしてフロントエンドっぽい事書いていこうと思います。 概要 vueでやるとAPIやdataリストにタイトルや本文を入れたくなりますが、今回は以下の要望を満たすものを作っていこうと思います。 アコーディオンの中身（タイトルや本文）はhtml側で制御したい それでは早速Vue.jsでAccordionを作ってみるく♡ step.1 下準備（html、css） 今回デザインはこんな感じで作っていきます。 See the Pen vue-accordion - html,css by 35n139e (@35n139e)
JavaScript講座のリンク集【Udemy】
こちらの記事から約1か月。ようやく、『Udemy』向け第2弾動画を全て撮影し終わりました。こちらからご覧いただけます。最新クーポン情報はこちら定価9,600円ですが、クーポン経由で大幅割引になります。前回の経験も活かし、動画96本でリリースいたしました。時間にして約9時間半。9時間半といっても、説明済みの箇所はコードのコピーペーストなども使っているので、実際にコードを書こうとすると、10時間～11時間くらいの分量になるのではと思います。JavaScript初心者向け動画を撮影したけっかけ2020年2月に第1弾、『PHP/Laravel』動... section1 JavaScriptの基礎 3 JSの環境説明 GoogleChrome VisualStudioCode Babel webpack Node.js 9 JSの連想配列 【JavaScript】Mapを正しく使うためにまとめた情
clipboard.jsを使ってみる
以前テキストをクリップボードにコピーする実装を試してみましたが、今回はclipboard.jsを使ってクリップボードにコピーする方法を試してみます。 サンプルコード 読み込み方法はいくつかありますが、今回はCDNを使ってみます。 <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script> コピーに使用するボタンを指定します。 new ClipboardJS('.btn'); コピーに関する設定はdata属性で設定できます。 ボタンにテキスト要素を紐づけるのはdata-clipboard-targetを使用します。 <input id="foo" value="サンプルテキストA"> <button class="btn" data-clipboard-target="#
clipboard.jsでテキストをクリップボードにコピーする方法
2019年3月8日 JavaScript 以前Vue.jsでカラーコードからRGB値にサクッと変換する方法という記事で紹介した、「Quick HEX to RGB」では、値をクリックすればクリップボードにコピーする機能をつけています。これはclipboard.jsを使っているので、基本的な使い方と、あまり説明のないツールチップの加え方を紹介します。 clipboard.js の使い方 Webサイト｜GitHub まずはHTMLにJavaScriptのファイルを読み込ませましょう。ファイルをダウンロードする場合はGitHubからdistフォルダーにある「clipboard.min.js」ファイルを入手します。CDNも用意されているので、便利な方を使ってください。 HTML <script src="https://unpkg.com/clipboard@2/dist/clipboard.m
オーディオファイルの扱いが簡単に！JavaScriptライブラリ「Howler.js」 | DevelopersIO
オーディオファイルの取り扱いを簡単にしてくれるJavaScriptライブラリ「Howler.js」を紹介します。 ウェブでオーディオファイルを扱うのは「正気の沙汰ではない（要出典）」と言われており、Web Audio APIやHTML5 Audio（HTMLMediaElement）を見ると、確かにそっ閉じしたくなる感じです。 そんなオーディオファイルの読み込みからブラウザごとの再生できるファイルの判定など、面倒な処理を任せてしまえるオーディオ関連のJavaScriptライブラリHowler.jsを紹介します。 公式サイト（サンプルあり）：howler.js - JavaScript audio library for the modern web リポジトリ：howler.js - GitHub 使い方 npmなら npm i howler -D CDNから読み込むなら <script
videoタグの属性やJSを使用した動画のコントロール | デザインやWEBに関する情報を発信する【まるログ】
最近はWEBページを制作する際に、動画を埋め込むことが増えていると感じています。 ですので、今回は動画を制御する際に使用するJSを自分なりにまとめてみようと思います。 なお、今回の記事ではvideoタグで読み込んだものを対象にしますので、youtubeの埋め込みには使用できません。 videoタグの基本の書き方 <video src="〇〇.mp4" autoplay muted loop webkit-playsinline playsinline></video> 自分がよく書く書き方はこの様になっています。埋め込んだ動画を自動再生させるには、mutedを設定し、音を消しておかないと再生されないので注意してください。元動画の音の有無に関わらず、この設定は必要になります。playsinlineはiOSでページ内埋め込みさせるために必要になります。 次に、JSで制御させる方法を何個か紹介い
JavaScriptのプラグイン「perfect-scrollbar.js」を使ってみる
スクロールバーをカスタマイズできるプラグイン「perfect-scrollbar.js」を使ってみます。 ※今回はバージョン1.2.0を使っていますが、バージョン1.0未満は使い方が違うようです。 詳しくは公式のドキュメントでご確認ください。 使い方 GitHubからダウンロードします。 ダウンロード後、必要なファイルを読み込みます。 cssはcssフォルダ、jsはdistフォルダに格納されているので、それぞれコピーして使ってください。 <link rel="stylesheet" href="perfect-scrollbar.css" /> <script src="perfect-scrollbar.js"></script> #sampleのスクロールバーを変更するようにしてみます。 HTML <div id="sample"> <p>君も事実いったいこの前後っ放しというのの ..
Intersection Observerが簡単で便利！要素がビューポートに表示されているかを判定できる
スクロールした際にヘルプや広告を表示したり、無限スクロールでコンテンツを読み込ませたり、画像の遅延ロードなど、要素がビューポートに表示されているかをトリガーにするのには、なかなか面倒なJavaScriptが必要でした。 例えば、スクロールやサイズ変更のイベントを取得し、getBoundingClientRect()などのDOM APIでビューポートからの相対位置を手動で計算します。 この今までの方法は面倒で非効率的でしたが、主要なブラウザに実装されているIntersectionObserver APIを使用すると、非常に簡単に取得することができます。 Intersection Observer comes to Firefox 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、著者様にライセンスを得て翻訳しています。 「IntersectionObserver()」の基本的な
日本の祝日 holiday.js
ダウンロードする バージョン8.1／2021年6月29日更新 日本の祝日のことならこのスクリプト。 holiday.jsは、特定の年月日が国民の祝日かどうかを調べたり、 その祝日の名前を取得する事が出来る簡単なJavaScriptファイルです。 holiday.jsの特徴 今日、または任意の年月日が日本国における国民の祝日かどうかを調べ、その名称を取得する事が出来ます。 「国民の祝日」だけでなく、「振替休日」や「国民の休日」も調べられます。 過去の年月日を入力すれば、その当時に存在した祝日を調べることも出来ます。後から新設された祝日が誤ってヒットすることはありません。 対応範囲は明治時代から現代まで。戦前の「旧祝祭日」も含め、近代日本の祝日法の変遷を全て収録しています。 2020年〜2021年の東京オリンピック関連祝日、および2022年以降の祝日にも対応しています。 法令によって休日扱いと
Nuxt.jsをはじめよう - クエリパラメータやパスパラメータを使ってデータを渡す
前回の記事 では画面遷移の仕方を紹介しました。 画面間でデータのを受け渡しをする方法を紹介します。Nuxt.js というか Vue.js の仕様も含まれています。 画面間でデータを渡す画面間でデータの受け渡しをする方法はいくつかあります。URLのクエリパラメータで渡す方法やパスパラメータによる方法、またフレームワーク側でデータを保持する方法などです。Nuxt.js においてこれらのやり方をまとめてみました。 クエリパラメータを使うURLのクエリパラメータとしてデータを取得したい場合には $route オブジェクトの query プロパティから取得ができます。 以下のように pageName=next というデータを nuxt-link から渡します。
Vue.js製フレームワークNuxt.jsではじめるUniversalアプリケーション開発
Vue.js製フレームワークNuxt.jsではじめるUniversalアプリケーション開発 花谷拓磨 Vue.jsでUniversalなSPAを開発できるフレームワークであるNuxt.jsのバージョン 1.0のリリースがいよいよ近づいてきました。 本稿では、シングルページアプリケーション（以下 SPA）開発によって生じた問題を解決するために生まれたサーバーサイドレンダリング （以下 SSR）を中心に、Vue.jsでの開発を強力にサポートするNuxtについて、その魅力と基本的な使い方をご紹介いたします。 Nuxt.jsとは？ Nuxt.js（ナクストと読みます）はReact.jsベースのSSR用フレームワークであるNext.jsに触発されて作成された、Vue.jsベースのフレームワークです。 特にUIの描画サポート に主眼をおき、SSRをはじめとした様々なサポートを行ってくれるものとなります
【Nuxt.js】asyncDataの引数はContextというオブジェクトです - Qiita
asyncDataの引数について Nuxt.jsでよく使われる「asyncData()」メソッドの引数には、 Contextというオブジェクトが渡されてきます。 例 export default { async asyncData ({ params }) { // ここでContextが引数に渡されてくる let { data } = await axios.get(`https://api-test/posts/${params.id}`) return { name: data.name } } } 参照：公式ドキュメント/非同期なデータ Contextとは Contextには、paramsやstore、route等の asyncData内で使用できるオブジェクトが入っています。 Contextの詳細については、公式ドキュメント/Contextに詳しく載っています。 asyncDat
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
three.js - examples
Vue.js用のバリデーションで人気の「VeeValidate」の使い方 | カバの樹
