プログラミング

【JavaScript】ドラッグアンドドロップAPIの使い方と動作しない時の原因

Drag & Drop APIとは Drag & Drop APIは要素をドラッグアンドドロップすることができるHTML5のAPIであり、ほぼ全てのブラウザで動作する。（※スマートフォンでは動作しない） Drag & Drop APIの使い方ドラッグドラッグしたい要素にdraggable="true"を付ける。 <p id="draggable" draggable="true" style=...

2020.09.10

JavaScript

JavaScript(ES2015, ES6)でオブジェクトをコピーする方法

概要 ES2015から導入された分割代入を使うと、オブジェクトのコピーを簡単に記述することができる。 const obj = {name: 'hoge', age: 20}; const newObj = { …obj }; ES5の場合 Object.assign()を使う。 var obj = {name: 'hoge', age: 20}; var newObj = Object.assig...

2020.09.03

JavaScript

【JavaScript】任意の位置へスクロールさせる方法

概要 JavaScriptで任意の位置へスクロールさせる方法はいくつかある。document.documentElement.scrollTopはブラウザのバージョンによっては動作しない。(Microsoft Edgeなど)要素.scrollIntoView()またはwindow.scrollTo(x, y)を使った方がよい。要素.scrollIntoView() window.scrollTo...

2020.08.27

JavaScript

CSS

【CSS】nth-of-type(n)はクラスに指定しても効かない？

概要よく勘違いしてしまうのだが、CSSの擬似クラスnth-of-type(n)はクラスに指定した場合でもnの対象としてカウントされるのは要素(タグ)である。サンプル <ul> <li class="hoge">11111</li> <li>22222</li> <li class="hoge">33333</li> <li class="hoge">44444</li> <li class="...

2020.08.20

CSS

【WordPress】続きを読む(moreタグ)が効かない・機能しない原因

概要 WordPressのエディタには「続きを読む」というものがある。ブロックエディタでは「レイアウト要素」の中にあり、記事の続きやネタバレしてしまうような内容を隠すために使われる。「続きを読む」をクリックすると以下のようになる。しかし、これは対応しているテーマでしか機能しない。公式テーマのTwenty NineteenやTwenty Twentyであれば正常に動作するが、第3者が作成したテー...

2020.08.13

WordPress

Node.js

npm runコマンドとnpxコマンドの使い方

npm runコマンド (npm srcipts)とは？ Node.jsをインストールすると、npm run xxxで任意のコマンドを実行できるようになる。これはnpm scriptsと呼ばれ、任意のコマンドのショートカット（エイリアス）を定義することができる機能である。 npm runコマンド (npm srcipts)の使い方 package.jsonのscriptsに実行したいコマンドを定義...

2020.08.06

Node.js

PHP

Zend Framework2をPHP7.3で動作させる

概要 Zend Framework2.4はPHP7.2で動作するが、PHP7.3では動作しない。PHP7.3で動作させるには、Zend Framework2.5にアップデートする必要がある。 Zend Framework2.4まではアーカイブページ（）からダウンロードすることができたが、Zend Framework2.5はComposerを使ってダウンロードする必要がある。手順 1. Compo...

2020.07.10

PHP

【JavaScript】スクロール量(位置・座標)の取得方法

Windowのスクロール量 window.pageYOffsetで取得することができる。ただし、IE8以前は非対応のためdocument.documentElement.scrollTopとする必要がある。よって、(window.pageYOffset || document.documentElement.scrollTop)と書くことで、クロスブラウザ対応することができる。 window.a...

2020.05.22

JavaScript

【脱jQuery】JavaScriptだけで要素のwidth, heightを取得・設定する方法

jQueryのwidthメソッド、heightメソッドをJavaScriptだけで実装する方法をまとめました。 width, heightの取得 jQuery const width = $('#hoge').width(); const height = $('#hoge').height(); JavaScript // borderとscrollbarの高さをめない場合 const widt...

2020.05.11

JavaScript

【脱jQuery】jQueryのliveメソッド、 onメソッドをJavaScriptだけで記述する方法

概要【脱jQuery】JavaScriptだけでイベント処理を行うでは、既に存在する要素のイベントハンドラを定義したが、jQueryのonメソッド（古いバージョンではliveメソッド）は要素が後から追加された場合でもイベントハンドラが実行される。これをJavaScriptだけで実現させる場合、以下のようにdocumentオブジェクトに対してaddEventListenerでイベントハンドラを登...

2020.04.16

JavaScript