KoniSanのBlog

自分の趣味を発信していきます。

ネイティブのJavaScriptでライブラリなしのスムーズスクロール

ネイティブのJavaScriptでライブラリとか自分でイチから作ったりとかしなくても、一応スムーズスクロールできることを知った(っていうか今まで知らなかった)ので、備忘録も兼ねて投稿。

はいこれだけ。
スクロールしたい要素をElementに、上からスクロールしたい座標をnum1に、左からスクロールしたい座標をnum2に入れればいいだけです。
アニメーション時間とか細かいことは指定できないけど、ちょっとスムーズスクロールしたいときとかは便利かも。

Javascriptでの配列のコピーには注意が必要

Javascriptで配列をコピーするには注意が必要です。

なぜなら、Javascriptでは配列はオブジェクトなので参照渡しになるため、そのままコピーすると、どちらかが変更されるともう片方も変更されてしまうからです。

私も、それでだいぶひっかかったのでみなさんも気をつけてください。

参考
JavaScriptで配列のコピー(値渡し) - Qiita

for文とforEachで気をつけること

とても簡単なことでつまずいていたので、備忘録も兼ねてここに書いておきます。

これを見ていただくとわかると思うのですが、forEachは繰り返し処理の部分が関数になっているので、繰り返すごとに変数aが定義され、変数aが上書きされることはありません。
これに対して、for文は関数ではないので変数aが上書きされてしまいます。

これで何十分も悩んでしまった・・・

JavaScriptで文字列を複数行記述するのが結構簡単だった

ブログを書くのがだいぶ久しぶりになってしまいましたが、今回はJavaScriptで文字列を複数行記述する方法を紹介したいと思います。ちなみにここでの複数行はソースコードは複数行で表記するけど実際には一行として扱われる場合ではなく実際に改行が入る場合です。

f:id:myprogramming:20170626201822p:plain

改行するところに \n を記述する

これは今まで俺が使っていた方法でした。ただ、どこで改行したのかわかりにくいし一行がとても長くなってしまっていました。

クォーテーションではなくグレイヴ・アクセントを使う

この方法はシングルクォーテーションやダブルクォーテーションではなくグレイヴ・アクセントを使って文字列を定義する方法です。グレイヴ・アクセントとは ` のことで Shift + @ で入力できます。この方法を使うと自由に改行してもそのまま文字列を記述し続けることができます。

まとめ

ずいぶんと簡単に複数行の文字列を記述することができるようになりましたね。この方法を使えば、修正したりするときにもすぐ改行してあるところがわかりますね。皆さんもこのやり方でぜひ楽をしてみてください。ではまた今度。

JavaScriptでクソゲーを作ってみた

JavaScriptクソゲーを作ってみたので一応紹介します。

f:id:myprogramming:20170626201822p:plain

作ったゲームのリンク

GSG -Geometric Shooter Game-

このゲームは一切画像を使わず作ってみました。

それと、CSSJavaScriptでは様々な機能を使っているのでその一部を今度紹介したいと思います。

このゲームは改良しているうちにものすごく読みにくいプログラムになってしまったので、このゲームでの解説は省かせてもらいます。解読してみたい人は是非頑張ってみてください。

一応ダウンロードリンクも貼っておきます。

GSG.zip

CSSアニメーションとJavaScriptで確認ダイアログを作る

今日は前回やろうかと書いていたconfirmのような確認ダイアログを作ってみました。
この記事では、前回の記事を前提に話を進めていくので、前回の記事を読んでない方は前回の記事を読んでからこの記事を読むといいと思います。
ただ使い方だけ知りたいという方は、目次で「使い方」に飛んでください。

前回の記事
myprogramming.hatenablog.com

f:id:myprogramming:20170626201822p:plain

ほとんど前回と同じ

今回作る確認ダイアログは、前回のダイアログと全然変わりませ。前回と違うのは、ボタンを「はい」と「いいえ」の2つ作って、それぞれのボタンが押された時の処理を定義しておくだけです。

実際のプログラム

実際のプログラムは以下のとおりです。

CSS

前回と何が変わったのっていうくらい変わってませんが、ボタンのwidthとmarginが少し変わってます。これはボタンが2つになったので、そのボタンを横に並べるためです。

JavaScript

こちらもあまり変わってません。こっちは、ボタンをinnerHTMLで書く時に「はい」と「いいえ」の2つにボタンが増えています。そして、「はい」と「いいえ」のボタンそれぞれが押された時の処理を定義していて、ダイアログを閉じる関数も「はい」が押された時の処理をするのか「いいえ」が押された時の処理をするかで2つ定義しています。

使い方

使い方は前回とほとんど変わりませんが、一応載せておきます。

まず、HTMLで、

<link rel="stylesheet" href="http://myrecipe.webcrow.jp/bottom_confirm/bottom_confirm.css">

をheadに、

<div id="bottom_confirm_base"></div>
<script src="http://myrecipe.webcrow.jp/bottom_confirm/bottom_confirm.js"></script>

をbodyに記述します。
このとき、

<div id="bottom_confirm_base"></div>

は、一番手前に配置してください。ほとんどの場合は、実際に表示するところの一番後ろに記述すれば大丈夫です。
そして、JavaScript

bottom_confirm(ダイアログに表示するHTML, 「はい」のボタンに表示する文字, 「いいえ」のボタンに表示する文字, 「はい」のボタンが押された後に実行する関数, 「いいえ」のボタンが押された後に実行する関数);

というように関数を呼び出せばOKです。引数の関数で引数を渡したいときは無名関数の中で関数を呼び出してください(setTimeoutのような感じ)。
もし、ボタンがクリックされなくてもダイアログを閉じたい場合は

bottom_confirm_yes_hide(); (「はい」が押された時の処理)
bottom_confirm_no_hide(); (「いいえ」が押された時の処理)

を実行してください。


ダウンロード

ダウンロードして使いたい方はこちらから

bottom_confirm.zip

まとめ

今回は前回に続いてconfirmのような確認ダイアログを作ってみました。ものすごく簡単でしたね。やっぱり元になるものがあるのとないのでは全然違います。今回変えたのは、ボタンを2つに増やしてそれぞれがクリックされた時の処理を書いてあげただけです。CSSを少しいじれば好きなようにデザインできるし、JavaScriptをいじれば自分の好きなように作り変えることが簡単にできるのでぜひやってみてください。今回の記事はここまで!


2017/5/16 追記

背景を暗くする機能をつけてみました。背景は暗くなりますがバックのスクロールとクリックなどはできるままです。

CSS

JavaScript

使い方は

<div id="bottom_dialog_base"></div>

の前に

<div id="bottom_dialog_back"></div>

を記述するだけです。

デモ

http://myrecipe.webcrow.jp/bottom_confirm_new/

ダウンロード

bottom_confirm.zip

CSSアニメーションとJavaScriptで下から出てくるダイアログを作る

今回は、前回の記事で紹介したデジタル時計とアナログ時計とアラームを組み合わせたもので使った、俺が作ったダイアログを凡用化して作り直したので紹介します。
解説なんてどうでもいいから早く使いたいという方は、目次で使い方まですっ飛ばしてください。
ちなみに、jQueryは全く使っていません。

前回の記事
myprogramming.hatenablog.com

f:id:myprogramming:20170626201822p:plain

CSSアニメーションについて

CSSアニメーションではJavaScriptなどを使わなくても簡単にキーフレームを指定したアニメーションを実現することができます。cssアニメーションについて詳しくは下記リンクで詳しく解説されています。

CSSアニメーション 入門

今回は先にキーフレームだけCSSで定義しておいて、あとでJavaScriptでアニメーションを定義するというふうにしています。CSSのコードは以下のとおりです。


JavaScriptCSSアニメーション

JavaScriptCSSアニメーションを使うのは実に簡単です。JavaScriptCSSアニメーションを使うにはまずJavaScriptCSSを操作しないといけません。というかそれだけです。JavaScriptCSSを操作するには次のように書きます。

要素.style.プロパティ = "値"; (値は文字列です)

そして今回はCSSアニメーションなので、

要素.style.animation = "値";

のようにして書きます。コードは次のようになりました。

まず引数についてですが、第一引数はダイアログに表示する文字です(HTMLもOK)。第二引数はボタンに表示する文字で、第三引数はボタンがクリックされた後に実行する関数です。そしてinnerHTMLでダイアログに表示する文字とボタンを追加します。次に、CSSアニメーションでダイアログを表示します。ダイアログを表示して、ボタンがクリックされたらダイアログを非表示にして、第三引数で受け取った関数をsetTimeoutで2秒後に実行します。なぜ2秒後に実行するのかというと、アニメーションに2秒かけているので、2秒後に実行しないと、ダイアログが完全に非表示になる前に実行されてしまうからです。ちなみに、bottom_dialog_hideという関数はボタンを押さなくてもダイアログを非表示にできるというものです。

使い方

使い方は簡単です。

まず、HTMLで、

<link rel="stylesheet" href="http://myrecipe.webcrow.jp/bottom_dialog/bottom_dialog.css">

をheadに、

<div id="bottom_dialog_base"></div>
<script src="http://myrecipe.webcrow.jp/bottom_dialog/bottom_dialog.js"></script>

をbodyに記述します。
このとき、

<div id="bottom_dialog_base"></div>

は、一番手前に配置してください。ほとんどの場合は、実際に表示するところの一番後ろに記述すれば大丈夫です。
そして、JavaScript

bottom_dialog(ダイアログに表示するHTML, ボタンに表示する文字, ボタンが押された後に実行する関数);

というように関数を呼び出せばOKです。第三引数の関数で引数を渡したいときは無名関数の中で関数を呼び出してください(setTimeoutのような感じ)。
もし、ボタンがクリックされなくてもダイアログを閉じたい場合は

bottom_dialog_hide();

を実行してください。


ダウンロード

ダウンロードして使いたい方はこちらから

bottom_dialog.zip

まとめ

どうでしょうか。今回はalert的なものを作ってみましたが、自分で作ると結構カスタマイズできる、というか無限にカスタマイズできるのでいいですよね。この応用としてconfirmのような確認ダイアログを作ってみるのもまたいいと思います。今度できたら確認ダイアログの方も紹介しようかな。では、今日はこのへんで。