PhotoSwipe v5 の使い方（最低限のコードで簡単実装）
はじめに 以前、古いバージョンのPhotoSwipeの使い方の記事を書きました。あれからしばらく経ち、新しいバージョンのPhotoSwipeが出てたので、使い方をまとめてみます。 今度のPhotoSwipeはより簡単に設 […]
JavaScript
続きを読む
【Javascript】Fetchを使ってサーバ（PHP）とデータのやり取りをする
はじめに 以前、jQueryを使ったAjaxの使い方について記事にしましたが、ライブラリに依存しないFetchという最近よく使われている方法をまとめてみました。 【Javascript】Ajaxを使ってサーバ（PHP）に […]
【JavaScript】JSON.parse()でエラー（リテラルの不正な制御文字）
とあるJSONファイルをJSON.parse()で読み込もうとしたところ、以下のようなエラーが出た。 Uncaught SyntaxError: JSON.parse: bad control character in […]
【jQuery】スマホのロングタップ（長押し）イベントの実装
Webアプリなどをレスポンシブデザインで作っている時、PCではカーソルホバー、モバイルではロングタップで要素を表示させたりしたい場合があります。意外にもロングタップイベントを受け取る方法が確立されていないので、自分で実装 […]
Swiper.jsのautoplayが効かない
画像やコンテンツのスライドショーが簡単にできるJavaScriptライブラリー「Swiper.js」のautoplayオプションが効かなくて、しばらく迷走した時の話。 現象 「Swiper.js」をnpmでインストールし […]
PhotoSwipeの使い方（最小限の実装）
この記事の内容は古いバージョンの実装方法です。新しいPhotoSwipeバージョン５の実装方法を知りたい場合は、以下の記事をご覧ください。 はじめに サムネイル画像をクリックすると拡大表示できるJSライブラリ「Photo […]
WordPressでページ毎に別のJavaScriptを読み込む方法
以前、ショートコードを使って自作のPHPやJavaScriptを動かす方法を紹介しましたが、今回は、ページ毎に別々のJavaScriptを読み込む方法をご紹介します。 ファイルのアップロード まず、スクリプトファイルを用 […]
JavaScriptでselect要素のoption（項目）をセレクトする
JavaScriptでselect要素の、ある項目を選択状態にしたかった時に、ちょっとハマったのでメモ。 似たような処理で、JavaScriptでselect要素のデフォルトの項目を設定する方法がありますが、それと混同し […]
【超簡単】Masonryの使い方と最低限の実装方法
はじめに 写真を縦横比を維持したままタイル状に綺麗に並べるためのライブラリー「Mosonry」の必要最低限の実装方法です。 CSSで正方形にトリミングして並べる方法は一般的ですが、トリミングせずに並べる必要があったので、 […]
【Javascript】$.ajaxを使ってサーバ（PHP）にデータを渡す方法
はじめに Ajax「Asynchronous JavaScript + XML」を使ってJavaScriptからサーバ側（PHP）にデータを渡す事ができます。 サーバ側でデータを受け取って処理した後、JavaScript […]
【JavaScript】クリックイベントが親要素に伝播しないようにする方法
例えば、メニューボタンを押すとメニューが開き、もう一度押すと閉じるというようなトグルボタンを設置する時、メニューを開いた状態で画面のどこかをクリックすると、メニューが閉じるという仕様になっている事が多い。 そこで自分も、 […]
JavaScriptでウィンドウサイズを取得して全画面表示
通常は、CSSで、width: 100vw; height: 100vh;とすれば、その要素は全画面になりますが、これをjavascriptで行いたい時があったので、メモ。 $(window).on(‘load resi […]
IEでonloadイベントがエラー（IDが定義されていません）の解決方法
以下のようなonloadイベントが、IEでだけうまく動かなかったので、メモ。 ちなみに、この状態だと両方とも動きます。 ・・・の所へいろんなスクリプトが入った状態だとIDが定義されていませんというエラーで動きませんでした […]
ページ読み込み後に実行する関数の違い一覧（JavaScriptとjQuery）
ページを読み込んだら、すぐに実行する関数、それぞれ実行するタイミングや動作が違う。 短縮形なども含めると結構たくさんあるので、まとめてみました。 JavaScript window.onload = … window.o […]
コピペでできるChart.jsの使い方（最低限の実装）
ホームページにグラフを描きたいなと思って、ちょっと検索してみたら意外と簡単な方法で実現できたのでご紹介。 Chart.jsという便利なライブラリーがあり、これを使えば簡単にブラフを描く事ができます。 HTML5から採用に […]
まずは無料相談から
お客様のビジネス目標を達成するための最適なご提案をいたします。初回相談は無料ですので、まずはお気軽にお問い合わせください。