日常で得た知識を備忘録として残しています
webpack５を使ってJavaScriptとSassをコンパイルする方法を記録しておきます。 この記事では、以下の項目をコンパイル条件としています。 JavaScriptとCSSを別々のファイルで出力する。 出力先のCSSに自動でベンダープレフィックスを追加する。 production（本番環境用に）出力する場合のみコードを圧縮（軽量化）する。 development（開発環境用に）出力する場合 […]
とあるJSONファイルをJSON.parse()で読み込もうとしたところ、以下のようなエラーが出た。 Uncaught SyntaxError: JSON.parse: bad control character in string literal at line ○ column ○ of the JSON data 原因 JSONファイルに、改行コードなどの特殊文字が混入している。 コンソール […]
コードエディターにVScodeを使っているんですが、たまにコードに横線が入る時がある。 非推奨の書き方をすると、それを教えてくれる機能みたいですが、jQueryの.focus()に横線が入ったので調べてみた。 横線が入ったコード [crayon-61e9a38810291093989825/] jQueryのリファレンスを見ると、.focus()は非推奨とはなっていない。 が、よく見てみると、.t […]
Webアプリなどをレスポンシブデザインで作っている時、PCではカーソルホバー、モバイルではロングタップで要素を表示させたりしたい場合があります。意外にもロングタップイベントを受け取る方法が確立されていないので、自分で実装してみました。 その前に ライブラリを使った簡単な方法 jquery-longpressというライブラリがあり、jsファイルを読み込んで、以下のようにするだけで簡単に実装できます […]
画像やコンテンツのスライドショーが簡単にできるJavaScriptライブラリー「Swiper.js」のautoplayオプションが効かなくて、しばらく迷走した時の話。 現象 「Swiper.js」をnpmでインストールして以下のようにインポートをして使っていたのですが、autoplayオプションが効かなかった。 [crayon-61e9a38810384156472517/] 原因 autopla […]
Bootstrapのrowとcolを使ったレイアウトの中でSwiper.jsを使おうとしたら、幅がおかしくなった。 現象 rowの中にcolを３つ入れて、横並びレイアウトをしていて、そのcolの中にSwiper.jsを入れたら、そのcolが横幅いっぱいに広がってしまった。 原因 flex関連の干渉が原因？ 解決方法 以下のように、swiper-wrapperのpositionをabsoluteにす […]
サムネイル画像をクリックすると拡大表示できるJSライブラリ「PhotoSwipe」の使い方をできるだけ簡潔にまとめてみようと思います。Light Box（ライトボックス）系のライブラリは沢山ありますが、自分はこれが一番好きかもしれません。 はじめに PhotoSwipeの公式サイトには、３ステップで実装可能とあります。 JSファイルとCSSファイルを読み込む 拡大表示用HTMLコードの挿入 Pho […]
以前、ショートコードを使って自作のPHPやJavaScriptを動かす方法を紹介しましたが、今回は、ページ毎に別々のJavaScriptを読み込む方法をご紹介します。 ファイルのアップロード まず、スクリプトファイルを用意します。 例えば、トップページ用のスクリプトを、 myscript_front.js その他のページ用が、 myscript_other.js すべてのページで共通して読み込みた […]
JavaScriptでselect要素の、ある項目を選択状態にしたかった時に、ちょっとハマったのでメモ。 似たような処理で、JavaScriptでselect要素のデフォルトの項目を設定する方法がありますが、それと混同してしまったので、整理してみました。 はじめに 例えば、以下のようなセレクトボックスがあったとします。 [crayon-61e9a388105d2577572772/] JavaSc […]
ホームページを作る時、BootstrapとJQueryを使う機会が多いんですが、今までは、それぞれのCDNから読み込んで使っていました。 今回は、npmを使ってプロジェクトに直接インストールしてみます。Bootstrapは、JQueryに依存しているので、JQueryも一緒にインストールします。 全体的な流れとしては、 ・node.js（npm）のインストール ・webpackの導入 ・Boots […]