JavaScript

JavaScript

【Edge対応】スクロールの開始位置を常に一番下に設定する方法

こんにちは。 スクロールの開始位置を常に一番下に設定したい場合ってありますよね。 例えば、ラインのようなメッセージのやり取りができるプラットフォームを作る場合、 常に一番下に最新メッセージを表示させたい、とか。 そういった場...
JavaScript

vue.jsで子から親コンポーネントにデータを渡す方法

こんにちは。 vue.jsで、子コンポーネントから親コンポーネントにデータを渡す方法があれば便利ですよね。 調べてみると、$emitというメソッドを使うと簡単にできるようなので、今回はその方法を紹介します。 vue.jsで子から親...
JavaScript

Vue.jsで配列・オブジェクトの変更がv-ifなどで検出できない場合の解決方法

Vue.jsで配列・オブジェクトを扱う場合、配列のデータは更新されているのに変更が検出できない、という現象でつまったので書きます。 僕がつまったケース mountedで配列に値をセットし、その後あるメソッドを実行した場合に変...
iziModal

iziModalにツイッターを埋め込む方法

こんにちは。 iziModalにツイッターを埋め込むと、モーダルウィンドウを開いた際に埋め込みタグがそのまま表示されてしまうという現象に悩んでいませんか? 本記事では、上記の原因と解決方法を紹介します。 iziModalにツイ...
JavaScript

iPhoneのスクロール時にバウンス効果を無くす方法【iNoBounce使用】

こんにちは。 iPhoneやiPadなどのiOS端末で、一番上、または一番下までスクロールすると画面がボヨーンとバウンドする「バウンス効果」。 一見するとおしゃれな効果ではありますが、出てほしくない場面もありますよね。 本記事...
FileSaver

JSだけで複数のbase64データを画像化しZIPでダウンロード

こんにちは。 今回は、複数のbase64データを画像化して、ZIPで圧縮してダウンロードする機能を実装します。 まず使うライブラリは以下2つです。 JSZip FileSaver JSzipを読み込む 公...
JavaScript

Vue.jsで「?」から始まるURLのクエリパラメータを設定・取得する方法

こんにちは。 Vue.jsで開発をしていて、URLのクエリパラメータで情報を送りたいと思ったことはありませんか? この記事では、Vue.jsで「?」から始まるURLのクエリパラメータを設定・取得する方法について解説します。 ※...
JavaScript

Vue.jsのwatchで連想配列が監視できない場合の解決法

こんにちは、macoです。 Vue.jsの値の変更を監視できるwatch機能はすごく便利ですが、連想配列で値を変更した場合にうまく動作しなかったので、解決方法を解説します。 連想配列でwatchが動かない例 watchではuser...
JavaScript

Vueでpropsの変更を検知する方法

Vueでpropsの変更を検知する方法 今回はpropsで受け取る変数をhogeとします。 // ・・・省略・・・ props: // ・・・省略・・・ watchを使い、hogeが変更された場合にその変更を検知できます。 /...
HTML

iPhone SEでiPhone 6の表示をそのまま縮小表示する方法

こんにちは。 新しいiPhoneが発売されても、まだまだ使用率が高いiPhone SEなどのコンパクトデバイス。 このデバイスサイズを考慮してサイトを作る場合、以下のことに悩まされていませんか? 文字が変なところで改行され...