ABCウェブエンジニアblog

Webデザイナー/エンジニア/講師のホームページ・ウェブサイト制作の備忘録

【JavaScript】Swiper.jsを使ってjQuery要らずのスライダー

jQuery不要スライドショー!バニラJavaScriptで簡単導入Swiper.js

ウェブサイトではトップ画面などによくスライドショー/スライダーを見かけますよね。

でもHTML/CSSだけではスライダーは実装出来ません。

なるべく簡単に実装できるよう、私もよく利用するSlick.jsやbxSliderなどのプラグインがありますが、jQuery必須だったりします。

 

jQueryJavaScriptを拡張したものです。

 

JavaScariptもままならないのにjQuery??という方、、、困りますよね。

今回はできる限り素のJSを利用したいという方や、HTML/CSSと学んで次にスライダーをとにかく実装できるようになりたいという方にjQuery不要の「Swiper.js」導入方法を解説したいと思います。

続きを読む

【JavaScript】ウィンドウを閉じる動作はChrome等で動かない

window.close();が効かずJavaScriptでウィンドウが閉じない

とっさにクライアントから受けた質問であった、ウィンドウを閉じたいけど出来ないからどうすれば良いかというもの。

 

通常であればJavaScript

window.close();

この一行だけで事済みそうなもの。

 

実は現在この命令はコンソールの内容いわく

「Scripts may close only the windows that were opened by them.」

という英語で一蹴されてしまいます。

 

訳すと

スクリプトは、スクリプトによって開かれたウィンドウのみを閉じることができます。」

とのこと。

続きを読む

【GoogleForms】Googleフォームの埋め込み、カスタマイズ Part.3 画面遷移無しで送信編「Vue.js/axiosでAjax」

Googleフォームをサイトに埋め込む連載、第三回目です。

前回までの回はこちらから↓

【GoogleForms】Googleフォームの埋め込み、カスタマイズ Part.1 - ABC ウェブエンジニアblog

【GoogleForms】Googleフォームの埋め込み、カスタマイズ Part.2 カスタマイズ編 - ABC ウェブエンジニアblog

 

前回までで埋め込み~見た目のカスタマイズが出来て、いい感じにサイトにお問合せフォームを実装することが出来ました。

ただそのままだとフォーム送信ボタンを押したらGoogleフォームの画面に移動してしまうという欠点があります。

そこで今回は画面を移動させずにフォーム送信の処理を行う方法を解説します。

続きを読む