【脱jQuery！】ネイティブなJavaScript（Vanilla JS）への書き換え方まとめ 2019 12/15 最近では脱jQueryの流れがきている、という情報を目にしてさっそく脱jQueryしてみることに。 ...と思ったのですが、いざやってみるとかなり苦労しました。 なので、今回はその備忘録としてjQueryからネイティブJS（Vanilla JS）への書き換え方をまとめていこうと思います。 というか、本当に脱jQueryしたほうがいいの？ ということは一旦置いておいて、好奇心の赴くままにやっていきましょう。 ちなみに、『Vanilla JS』というのはフレームワークとかの名前ではなく、ただのJavaScriptのことです。 ※ 書きかけの部分やら中途半端なもありますが、ご了承ください。

オートコンプリートとは オートコンプリートとは↓のような以前入力した値を覚えてくれている機能のことです。 業務システムではセキュリティの面や使い易さの観点から、 「オートコンプリートはOFFにして欲しい」 と言われることがあります。 各PCの設定から以下のように設定することもできますが、ユーザの全員にこの作業をさせるのはナンセンスです(笑) そこでオートコンプリートの制御をするjavascriptを紹介したいと思います。 <script type="text/javascript"> $(function(){ //input属性のものを一括で取得する var inputItem = document.getElementsByTagName("input"); //全てオートコンプリートをOFFにする for (var i=0; i<inputItem.length; i++){ inp

素朴に button をつけて pre の innerText を textarea に入れてコピーする感じで書いた。たまに便利。 こういう感じ/* pre に copy ボタンつける */ [...document.querySelectorAll('article.entry pre')] .map(pre => { const button = document.createElement('button'); pre.parentNode.insertBefore(button, pre); button.textContent = 'copy'; button.classList.add('hogashi-pre-copy'); let timer; button.addEventListener('click', () => { const textarea = documen

preタグ内のHTMLはエスケープが必要 コードをサイト内に記載して表示する際にはpreタグが良く利用される。 preタグ内に記述すればインデントも反映されるため便利だがHTMLの場合はそのまま記述するとページ上に表示されるHTMLコードとして表示されてしまうため例えば<br>などは&lt;br&gt;のようにエスケープする必要が生じる。 悪い例 brタグのコードが改行になっている foo bar 良い例 brタグのコードが表示されている foo<br>bar JavaScriptでpreタグ内をエスケープ 下記のようにコードpreタグ内のHTMLを取得して置換するとHTMLエンティティにエスケープする手間がなくなる。 preタグ内の更新頻度が高い場合やエスケープが面倒な場合はこちらの方法がおすすめ。 var escapeHtml = (function (String) { var es

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

以前紹介した記事で、WordPressのサイト全体に適用させるCSSやJavaScriptの設置方法を紹介しました。 今回は、WordPressサイト内の個別の投稿ページや固定ページだけに適用させたい固有のCSSやJavaScriptを設置する方法について紹介していきたいと思います。 WordPressのテーマの中には、初めから今回紹介するのと同じような機能が利用できるようになっているテーマもありますが、今回はそうでないテーマを利用している場合でも、投稿などの中でそれぞれのページだけに個別に適用させるCSSやJavaScriptを設置できるようにする方法について紹介していきたいと思います。 なお、今回はWordPressのプラグイン等は使用せず、テーマ内のファイルであるfunctions.phpにコードを設置する方法を紹介します。 投稿編集ページなどに表示される入力エリア 後ほど紹介するコ

2022年9月24日 CSS, JavaScript ページやコンテンツの読込中、何も表示されない真っ白な画面が延々と続くと、なんだか不安になりますよね。本当にこのページであってるのか…今何を待ってたんだっけ…なんて。ユーザーを不安にさせないためにも、読込中だと認識できるローディングアニメーションを取り入れてみるといいですね。 ↑私が10年以上利用している会計ソフト！ ローディングアニメーションの設置手順 こんな感じで、最初にローディングアニメーションを表示させ、ページを読み込んだらコンテンツを表示させるページを作ってみましょう。よく「CSSだけで実装できる！」なんてうたわれている場面もありますが、多くの場合アニメーション部分のみのおはなしで、実際にページの読み込みを認識させるには簡単なJavaScriptも必要です。 1. ローディング画面の用意 まずはコンテンツを用意しましょう。上部に

画像やiframeの遅延読み込みに使用するloading属性と非サポートブラウザ用にJavaScriptを併用した現代的なアプローチで、最大限のパフォーマンスを発揮させる実装方法を紹介します。 Best way to lazy load images for maximum performance by Adrian Bece 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 遅延読み込みのloading属性とは 遅延読み込みの現代的なアプローチ パフォーマンスとLighthouseスコアの向上 最大のパフォーマンスを得るための画像最適化テクニック はじめに 画像の遅延読み込みは比較的簡単に実装でき、パフォーマンスを大幅に向上させることができるため、Webサイトを最適化するために使用される選択肢の1つです。遅延読み込みで

360度のパノラマ画像をブラウザ上で表示できる、軽量スクリプトを紹介します。 パノラマ画像を見るだけでなく、パノラマ動画、リンクコンテンツ、物語コンテンツなど、インタラクティブなさまざまなコンテンツを実装できます。 Panolens.js Panolens.js -GitHub Panolens.jsの特徴 Panolens.jsのデモ Panolens.jsの使い方 Panolens.jsの特徴 Panolens.jsはイベント駆動型で、WebGL対応のパノラマビューアーです。 パノラマは水平方向をはじめ、垂直方向・拡大縮小にも対応しています。 Three.JS（3Dフレームワーク）をベースに実装された軽量のスクリプトで、カスタマイズも優れています。 Panolens.jsのデモ デモではPanolens.jsで実装されたさまざまなパノラマを楽しめます。

これから先、フロントエンド開発者に一番大きな影響を与えるのは、Chromiumを採用したEdgeがリリースされることだと思います。 IEへの対応が、、、Edgeへの対応が、、、と思っていた人には、かなりの朗報です。 Chromiumを採用したEdgeがリリースされると、CSSやJavaScriptのどんな機能が使用できるようになり、ワークフロー、ブラウザテスト、そして他のブラウザへの影響など、フロントエンド開発者にとって何を意味するのかを紹介します。 Edge Goes Chromium: What Does it Mean for Front-End Developers? 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Chromiumを採用したEdgeがリリースされます 使うのが楽しみな機能 将来はさらにもっと有望 ブラウ

デスクトップでもスマホでもスクロールした際に、非常に滑らかで美しいアニメーションを簡単に実装できるシンプルで2Kbの超軽量JavaScriptを紹介します。 他のスクリプトへの依存は無く、ReactやVue.jsもサポートされています。 lax.js -GitHub lax.jsの特徴 lax.jsのデモ lax.jsの使い方 lax.jsの特徴 lax.jsはVanilla Javascriptで書かれた2Kbの超軽量スクリプトです。 スクロールをトリガーにあらゆる要素にアニメーションが適用できます。 パフォーマンス面でも施策がとられており、デスクトップでもスマホでも非常に滑らかなアニメーションが実現できます。 lax.jsのデモ デモでは実際のアニメーションを試すことができます。 デスクトップ・スマホ両方の環境でお試しください。 デモページ lax.jsではパフォーマンスを向上させるた

GrapesJS is an open-source, multi-purpose, Web Builder Framework which combines different tools and features with the goal to help you (or users of your application) to build HTML templates without any knowledge of coding. It's a perfect solution to replace the common WYSIWYG editors, which are good for content editing but inappropriate for creating HTML structures. You can see it in action with t

Some text distortion experiments using the Blotter.js library. The idea is to distort text as we scroll or move the mouse. Distortion effects have become quite popular over the past two years and now many extraordinary website designs have some unique form of this intriguing trend. Today we’d like to share two demos with you that show how to use Blotter, a three.js and Underscore.js powered API fo

[JS]面白いスクリプトが登場！スマホのDeviceMotionイベントをサポートし、傾きを感知できる -Shiny

iPhone Xには「Super Retina HDディスプレイ」が搭載されており、今後のスマートフォンの主流が「超高画素」になることは間違いないでしょう。 これらのディスプレイでJPEGやGIF画像を見ると画像が荒れて見えることがありますが、その対処法としての画像が劣化しないSVGの使用の拡大は、Webデザイン界では急務となっています。 ベクターデータは、単に静止画像で活用されるだけでなく、アニメーションでの利用もしやすいのが特徴です。しかし、SVGなどをそのままアニメーションに利用するのは難しいので、モーションライブラリと呼ばれるアニメーション用ライブラリを導入するのが手っ取り早いでしょう。このようなライブラリを使えば、JavaScript側で、関数などを使ってアニメーションを実装できるようになるからです。 今回は、滑らかな動きを実現するJavaScriptモーションライブラリ11選を

単純なアニメーションならCSSの@keyframesやtransitionで実装できますが、複雑なアニメーションやサクッといいものを描くときにはアニメーションライブラリを使うと、くわしい知識や経験がなくても簡単に実装できたり、複雑なアニメーションを構築することができます。また、アニメーションを実装する際の勉強や研究にもなるので、目を通しておきたいライブラリをまとめます。 アニメーションを実装するためのライブラリまとめ (CSS) Tuesday 0.3秒くらいの短時間で終了するように作られた要素の表示／非表示に使える、シンプルなCSSアニメーションライブラリ。用意されたclass属性を付与するだけで簡単にアニメーションが実装できます。ソースはLessで記述されています。 Tuesday Tuesday github <div class="animated tdDropInLeft">an