常連

注目の的

社会貢献

質問力

自己紹介

###前提・実現したいこと
jQuery使って書いてたものを最近は使わずに書こうとしています。

```Javascript
$(".something").on("mousedown touchstart", function(e) {
```
みたいなのを
```Javascript
document.querySelector(".something").addEventListener("
```
と置き換えたいのですが、

###発生している問題・エラーメッセージ

```
var someHandler = function(e) { colsole.log(e) };
document.querySelector(".something").addEventListener("mousedown", someHandler, false).addEventListener("touchstart", someHandler, false);
```

みたいな書き方をしないといけないのでしょうか。
jQueryでやってたように一つで指定できないのかなと思いまして。

```Javascript
"mousedown touchstart"
```

###試したこと
ひとまず上記のようにaddEventListenerに書いたのですが拾ってくれませんでした。

もう少し短く簡単に書けるやり方があれば教えてください。

addEventListenerで複数のイベントをbindしたい

###実現したい事
jsファイルを編集していましたが、重複する記述が複数のjsファイルでできたため一箇所に分けてそれを読み込むことにしたいと思いました。

jsファイルはHTMLに読み込ますことはよくやっているので分かるのですが、jsファイル内で他のjsファイルを読み込むにはどうすればいいでしょうか？

簡単なことだと思いますが、今までやったことがないため分からない状態です。
検索してもhtmlへjsファイルを読み込むという方法ばかり出るため質問させていただきました。

##追記

main.jsとinclude.jsがあるとします。
main.jsで、include.jsを読み込み、**include.jsにある変数を利用したいです。**

```javascript
document.write("<script type='text/javascript' src='include.js'></script>");
```

これで読み込む方法は分かったのですが、これだとinclude.jsにある変数を使えません。

どのように読み込めばmain.jsでinclude.jsの変数が利用できるでしょうか？


##具体的なコード

```javascript
//・・・・・・・・・・・include.js

var froala_setting = {
        language: 'ja',
        toolbarButtons: ['insertImage','insertVideo','insertTable','undo', 'redo']
      };
   

//・・・・・・・・・・・main.js

//include.jsを読み込み

$('.content').froalaEditor(froala_setting);

//froala_setting変数をmain.jsで使いたいです。

```

やりたいことはこれだけです。

javascriptファイル内で外部javascriptを読み込む方法について

年代によるのかもしれませんが、
オレに聞くな！ググれカス！と言われて、育って来ました。

昔も、Yahoo知恵袋等で教えて君がいましたが、
IT系なのに教えて君が多い事に、正直唖然としています。

検索したら、一発で答えがあるのに、全く検索すらせず質問する方の多い事。
検索して、それでも理解出来ないで質問するという事なら、まだ分かります。

何故、答えがそこにあるのに、ググらない人が多いのでしょうか？

何故、答えがそこにあるのに、ググらない人が多いのでしょうか？

# 質問

**サイトA**: HTTPでの通信
**サイトB**: 自己署名証明書のHTTPSでの通信

のサイトAとサイトBのどちらがセキュアといえるか？
という質問です。

# 質問背景

個人的にはサイトBの「HTTPSだけど証明書が自己署名証明書」方がセキュアなのではないかと考えています。
なぜなら、自己署名証明書の問題はHTTP通信でも抱えている問題だと思うからです。

ですが、**ChromeなどブラウザではHTTPはほとんど警告なしに表示するのに、証明書が信頼できないものは過剰な警告を出す**ので、
Chromeが「HTTPのほうがマシ（よりセキュア）」と言っているようなきがするのです。
こういう背景で質問して、スッキリしたいと思いました。



私の自己署名証明書の問題点の理解は、以下のサイトからです。

Qiita記事: [オレオレ証明書を使いたがる人を例を用いて説得する](http://qiita.com/Sheile/items/dc91128e8918fc823562)
から引用させていただくと、

> 1. 暗号化。サーバ側とクライアント側で暗号化／復号化を行うことにより、通信経路上での盗聴・改竄を防ぎます。

> 2. 通信相手が正しいことの保障。DNS cache poisoningや、MITM(Man in the middle)によるSSL終端など、攻撃者によって通信相手が変更された場合に警告を表示することで、攻撃者による盗聴・改竄を防ぎます。

> 3. 改竄の検出。サーバ側で証明書を使って署名することで、通信経路上で改竄された場合にもクライアント側で受信した際に改竄を検出することができます。

1は自己署名証明書でも可能
2, 3は自己署名証明書では問題になる

どっちがセキュアですか？「HTTP」と「オレオレ証明書のHTTPS」

JavaScriptは毎日のように更新され便利になってきています
そこで、あまり知られていないけど知っておくと便利な命令が多くあることに気づきました
`var`に代わる定数の宣言`const`など

知っておくと便利な命令があったら教えてください

日々更新されているJSの最新命令が知りたい

スマホを横にした時、横表示はせず縦表示を維持したまま表示したいです。
jsやphpでできるのでしょうか。
ご教示のほどよろしくお願いいたします。

スマホを横にした時、横表示を無効にしたい

お世話になっております。


問い合わせフォームのあるWebサービスはたくさんありますが、個人的に利用している中でsslでないページ上に問い合わせフォームがあるWebサービスがあります。

これってつまり、同一lan内でかつ回線自体が暗号化(wpa2など)されていない場合、パケットの中が丸見えという状態になると思うのですが、認識あってるでしょうか？
これ大丈夫なのかな、と思って調べてみると意外に問い合わせフォームにsslは必要ないと紹介しているページがたくさんあります。

私が利用したサービスは、入力項目にメールアドレスと氏名、問い合わせ内容の記入が必須なのですがこれくらいなら見られても問題ないという考えなのでsslを導入しないサイトは多いのでしょうか？それともやはり金銭的な理由が大きいのでしょうか？

問い合わせフォームはhttpsにする必要なし？

アプリケーションのバックエンドサーバから呼出される（インターネットに公開しない）WEB APIを開発しています。
内部犯の脅威を考慮した場合に、このようなAPIの認証についてどのように考えるべきでしょうか。

ネットワークのレイヤでは特定の内部サーバからしかAPIアクセスできないよう制限を設ける事になると思いますが、
アプリケーションとしてどのような認証を行うべきか、少し混乱しています。
呼出元がユーザではなく、プログラムとなるため、認証の考え方が変わってくるのかなと思うのですが、
整理ができておりません。

「認証」、「認可」のそもそもの定義を鑑みると今回のケースは認証は不要で認可ができればいいのでしょうか？
・Basic認証
・クライアント証明書による認証
・独自のトークン払い出し
・Oauth

などなど様々な方法で実現はできそうなのですが、
この当たりをどのように考えたらよいのか、ご教示いただけますと幸いです。

特定の端末からしかアクセスを受け付けないWEB APIの認証について

今年の元旦、8時59分60秒が挿入されたことで、多くのエンジニアの年末年始が仕事に追われる日々だったのではないかと思われます。そこで閏秒を挿入することで同期がおかしくなるということなのでしょうが(そもそもこの認識が間違っているのならご指摘下さい)この”おかしくなる”の詳細がわからず調べていたのですが、詳しく踏み込んだ説明はあまり見当たりません。CPU使用率が100％になりサーバーがダウンするということがあるというのも見つけたのですが、先の認識とCPU使用率の増加がいまいち繋がりません。どなたかご教授いただけないでしょうか。

閏秒挿入でなぜ多くのシステムがダウンするのか

android開発を勉強し始めて不思議に思ったことがあるので質問します。 
モンストやスクフェスなどのゲームには、画面下側にメニューボタンがあります。メニューボタンを押してゲームをしたりガチャを回したりしますが、これはメニューボタンを押したときに他のactivityを立ち上げているのでしょうか？それとも、別の方法で実現しているのでしょうか？
私が作ろうと思っているアプリケーションに同じような操作ができるようにしたいので教えてください。

[android開発]スマホゲームのメニューボタンの仕組み

###今の問題
[このページ](https://46neko.github.io/46nekoProject/apps/ToneCubesWeb/index.html)を今開発しているのですが、Windows版Chrome、IE、Edge等では正常に読み込めてBGMもなるのですが、Android版Chrome、PC版Safari、Puffin等ではBGM読み込みさえされません。
原因がわかる方がいれば教えてください。

###該当のソースコード
※一部抜粋
```HTML
<body onload="loaded();">
<audio id="tm" controls style="width:100%; display:none;"></audio>
</body>
```
```Javascript
function tmfadein(vol){
var element_audio = document.getElementById("tm");
element_audio.volume=vol;
if(vol<=0.9){
setTimeout(function(){tmfadein(vol+0.1)},100);
}
}

function tmloaded(){
tmfadein(0);
}

function loaded(){
var element_audio = document.getElementById("tm");
element_audio.src="data/sunburst.mp3";
element_audio.load();
element_audio.play();
element_audio.loop = true;
if(document.addEventListener){
document.getElementById("tm").addEventListener("loadeddata",tmloaded,false);
}else if(document.attachEvent){
document.getElementById("tm").attachEvent("loadeddata",tmloaded,false);
}
}
```

###追記
safariでコンソールを確認したところ
```TypeError: 'undefined' is not a function (evaluating 'element_audio.load()')
```とのエラーが出ていました。なお、PC版Chromeではこのエラーは出ていませんでした。

---
さらに追記
上記のエラーはQTが入っていないことが原因でした。Android版Chromeについてはこれから調べます。

audioの読み込みがうまくいかない

HTML と CSS で以下のようなコードがあったとします。
```lang-html
<a href="#" class="hoge">ほげほげ</a>
```

```lang-css
.hoge {
  color: red;
}
.hoge:hover {
  color: green;
}
```

Android の場合だと、タップした瞬間からgreenになると思いますが、iOSの場合、タップした後にgreenになると思います。

この解決策を、たくさんのブログで見てきましたが、どれも、JavaScript で、特定のクラスが指定されている場所に、タップされたら、JavaScript で hover クラスなどをつけて色を変える、といった内容でした。

しかし、Bootstrap を使って作った WordPress ブログでは、未ログイン状態のときは、CSSの:hover(:active?)が適用されないのに、ログインすると、:hoverが適用されるようになると思います。

どのスクリプトによって、そのようなことを実現しているのか、確かめてみようと思いましたが、答えは見つかりませんでした。

回答よろしくお願いします。

iOSでのCSSの:hover

# 質問概要
Electron.jsを使って、ちょっとしたテキストエディタを作ろうと奮闘しております。
しかし、AtomやVisual Studio Codeのように、テキスト入力部分で、予約語のような一部の文字の色の変更や強調の方法がわかりません。


# 質問詳細
Electron.jsを使って、ちょっとしたテキストエディタを作ろうと奮闘しております。
しかし、AtomやVisual Studio Codeのように、テキスト入力部分で、予約語のような一部の文字の色の変更や強調の方法がわかりません。

いろいろ調べてみたところ、有力な情報は`DIV`要素に
`contenteditable="true"`を与えることかなと思ったのですが、
いざ実行してみると**挙動が結構重い**です。

HTMLのtextareaには、Windowsなどで言う**リッチエディット**が無いようなので、
Atomなどはどのようにテキスト入力部で分の色の変更を行っているのでしょうか？

やはり、`contenteditable="true"`を指定し、JavaScriptなどで、予約後が入力に出てきたら、
`<span style="color: red;"></span>`等を追加したりしているのでしょうか？

ご存じの方いらっしゃいましたら、ご教示頂けますと幸いです。
お知恵をお貸しください。
よろしくお願いいたします。

# 蛇足
記念すべき、100回目の質問！

【HTML/CSS/Electron】テキスト入力部分においての、一部文字列強調

###前提・実現したいこと
sublimetextを使っています。
前提として、今回はhtml,cssのみで実装することが目標です。
そのため、jQuery等による解決方法の提示はご遠慮くださいますよう、お願いいたします。

実現したいこととしては、説明が難しいですがタイトルの通り、
カーソルを画像に合わせるとその画像が上に消えていき、
下にあるformが姿を現わす というアニメーションをつけたいです。


###発生している問題

```
現時点では、hover時に画像が上に動いて消えていってくれるようにはできています。
問題は、『カーソルを画像から離す前にhoverが解除されて、画像が元の位置に降りてきてしまう』
という点です。
本来であれば、このカーソルを画像の外に持ってきた際に、
hoverが解除されるように設定したいのですが。。。
何か解決策はありますでしょうか？
```

###該当のソースコード
```html
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="Cache-Control" content="no-cache">
	<title>Week3課題</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
	<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="script.js"></script>
</head>



<body>
	<section>
	<div class="form-wrap">

		<form class="effect" method="post" action="mail.php">
		<div class="form-box">
			<label class="t-title">特別試写会<br>応募申し込みフォーム</label>
		
			<p>
    		<br>お名前<br>
    		<input type="text" name="sei" maxlength="10" placeholder="姓">
    		<input type="text" name="mei" maxlength="10" placeholder="名">
  			</p><br>
			<p>
			性別<br>
			<input type="radio" name="gender" value="male" checked>男性
			<input type="radio" name="gender" value="female">女性
			</p><br>
			<p>
			年齢<br>
			<select name="age">
				<option value="under15">15歳未満</option>
				<option value="15~18">15~18歳</option>
				<option value="19~25" selected>19~25歳</option>
				<option value="26~35">26~35歳</option>
				<option value="36~45">36~45歳</option>
				<option value="46~55">46~55歳</option>
				<option value="over56">56歳以上</option>
			</select>
			</p><br>
			<p>
			電話番号<br>
			<input type="text" name="ph-number" placeholder="例 090-1234-5678" size="16">
			</p>
			<p>
			Eメールアドレス<br>
			<input type="text" name="email" placeholder="例 barack.obama@softbank.ne.jp" size="30">
			</p><br>
			<p>
			当試写会を知った媒体をお教えください。<br>
			<input type="checkbox" name="media" value="twitter">Twitter
			<input type="checkbox" name="media" value="facebook">Facebook
			<input type="checkbox" name="media" value="TOHO">TOHOシネマofficialサイト
			</p><br>
			<p>
			<button type="submit" name="submit" value="送信">Submit</button>
			<button type="reset" name="reset" value="リセット">Reset</button>
			</p>
		</div>
		</form>
	</div>
	<div class="move">
		<img class="letter" src="http://stat.ameba.jp/user_images/20130501/03/airmail-m/20/4d/j/o0800045312520591245.jpg">
	</div>
	</section>

	<div id="footer">
		<div class="footer-container">
			<table>
				
			</table>
		</div>
		
	</div>


</body>



</html>

```
```css
* {
	margin: 0;
	padding: 0;
}

.form-wrap input[type=submitposition:] {
	color: #7c7873;
	text-shadow:0 1px 0 #fff;
}


form {
	width: 60%;
	margin: 0 auto;
	background-image: url(http://free-photos-ls04.gatag.net/images/lgf01a201407121600.jpg);
	font-family: 'Abel', YuMincho;
	color: white;
	background-repeat: none;
	position: relative;
	overflow: hidden;
}

label {
	font-size: 20px;
}

.t-title {

}

textarea {
	width: 300px;
}

textarea:focus, input[type=text]:focus {
	background:rgba(255,255,255,.35);
}

.form-box {
	width: 100%;
	padding: 30px 0 30px 70px;
	background-color: rgba(0,0,0,0.5);
	box-sizing: border-box;
}

button {
	background: #EEE;
	color: #111;
	box-shadow: 0px 0px 1px rgba(520,000,000,0.3),inset 1px 1px 5px rgba(000,000,520,1),inset -1px -1px 5px rgba(205,0,0,1);
	width: 100px;
	padding: 10px 0;
	font-family: 'Abel';
	font-size: 15px;
	cursor: pointer;
}

.letter {
	position: absolute;
	width: 819.59px;
	height: 580px;
	margin: -15px;
	right: 288px;
	top: 0;
	cursor: pointer;
	transition: 1.5s ease-in-out 0s;
}

 img:hover {
 	transform: translate(0,-600px);
}

#footer {
	white-space: nowrap;
	width: 100%;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	background-color: #000;
	position: relative;
}

.footer-container {
	padding: 30px 0;
    max-width: 1000px;
    height: 300px;
    margin-right: auto;
    margin-left: auto;
}
```

###試したこと
transitionではなく、animationも使ってみましたが、ダメでした。

###補足情報(言語/FW/ツール等のバージョンなど)
現段階では、『transitionでtranslateを使って画像を上にずらして見えなくする』 
という方法を取っていますが、
他により良い方法があれば、それも教えていただけるとありがたいです。
ただし、上にも記載した通り、今回はhtmlとcssだけで実装できる方法でお願いいたします。
よろしくお願いします。

:hover時に、translateを使って、『扉が開くように、画像が上に消えていく』アニメーションをつけたいです。

WEBサイト制作のガイドラインを各社が出していますが、
ここのガイドラインが一番良くできている、みんな参考にしているという一押しのガイドラインがありましたら教えてください。

WEBサイト制作のガイドラインは何処のが一番良いでしょうか？

webページのデザインのために、divタグにwidth,height,background-imageなどを設定して「見た目」を調整しています。
このdivはデザインを目的にしており、コンテンツ的内容は一切ありません。

だいぶ前に「空要素はよくない」と覚えた記憶があり、それからはfont-size:1pxにして &nbps; を含めるようにしていました。font-size:1pxにしているのは &nbsp; によって高さなどが影響を受けないようにするためです。

最近いくつかのサイトを見ているときに &nbsp; を含めない<div class="bg1"></div>という空要素に出くわして、これでも良いのか？と思った次第です。

実際 font-size:1px の指定するということは、場合により否定するコードも書く必要があり、煩わしく感じています。&nbsp;を書かなければ、font-size:1px指定もいりません。

ベストプラクティスは変化すると思いますが、現在（2016年11月）において、デザインのための空要素というのは、ありでしょうか？なしでしょうか？

デザインのための空要素divタグは有りか、無しか

プログラミング2年目で、Androidのアプリ開発から始め、Swiftで最近iOSもちょっとやってます。
SwiftやKotlinに若干触れた際の疑問です。

Javaでは、一般に、フィールド変数を直接参照するよりも、getter/setterメソッドを介して値をgetなりsetなりするのが良い、と最初の頃に読んだ本に書いてあり、実際それに沿った実装が多いと思います。

一方、SwiftやKotlinでは、フィールド変数はメソッド経由ではなく、直接参照したり、変更したりするような言語の設計になっていると理解しています。

そこで質問なのですが、なぜこれらの比較的新しい言語では、getter/setterを嫌って（？）このような設計となっているのでしょうか？
これによるメリットって、getter/setterを毎回書かなくて済むっていうことだと思うのですが、AndroidStudioだったら自動で書いてくれる機能がありますし、他のIDEでも、プラグインなどで同じ機能は簡単に実現できると思います。

むしろ、デメリットとして、次のような点があると思っています。

・参照したい時にとりあえずgetって打ってから予測変換で探すことができないからめんどい
・Swiftだと、ある変数の値を変えようとして代入すると、"この変数はReadOnlyだよ"とかいった警告が出てきて、だるい（それならgetterだけ実装してsetterを実装しなければいいのに）

そしてこのデメリットはメリットと比べて大きすぎるように自分は思うのですが、getter/setter排除による、僕が気づいていないメリットが他にあるのでしょうか？

最近のプログラミング言語にgetter/setterがないのはなぜ？

```css
<!DOCTYPE html>

<html lang="ja">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="utf-8" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
<title>xxx</title>

<link rel="stylesheet" href="" />
<link rel="shortcut icon" href="" />

<style type="text/css">
body {
	margin: 0px;		/* reset css */
	padding: 0px;
}

#body-container{
	display:flex;
	flex-direction:column;
	width: 100%;
	margin: 0px 16px;	/* 上下0、左右16 */
	padding: 0px 0px;
}

ul li {	/* reset css */
	margin: 0;
	padding: 0;
}
	
nav#top-nav {
	display:flex;
	margin: 10px 10px;	/* 他のコンテナとの間隔 */
	padding: 0px;
	border-radius: 8px;
}
nav#top-nav ul {
	display:flex;
	flex-direction:row;
	justify-content: flex-left;
	margin: 0px;
	padding: 0px;
	list-style-type:none;
}
nav#top-nav li {
	width: 80px;
	margin: 10px 10px;
	padding: 6px 16px;
}

.move1 {
	display:flex;
	width: 100%;
	position: relative;
	}
	
li.hnav2 {
	position:absolute;
	top: 0px;
	left:0px;
}

@keyframes nav-scale {
	from {
		transform: scaleX(1);
	}
	50% {
		transform: scaleX(-1);
	}
	to {
		transform: scaleX(1);
	}
}

li.hnav:hover {
	animation-name: nav-scale;
	animation-duration: 3s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	
}

@keyframes move02 {
    from {
        transform: translateX( 0px); /* left:0px; */
    }
    50% {
    
    }
    to {
        transform: translateX( 116px);	/* width80, margin10, padding16 */
    }
}

.hnav {
	animation-duration: 5s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

.hnav2 {
	animation-name: move02;
}

.hnav {
	width: 80px;
	text-align: center;
	border-radius: 8px;
	border: solid 1px #888;
}

</style>

</head>
<body>
<div id="body-container">
<nav id="top-nav"> 
	<ul class="move1" >
		<li class="hnav hnav1"><a href="xxx.html">hnav1</a></li>
		<li class="hnav hnav2"><a href="xxx.html">hnav2</a></li>
	</ul>
</nav>

</div> 
</body>
</html>

```
.hnav2のanimation-name: move02;はページを最初に表示した時やリロードなどにanimation-name: move02;が走ります。
その後、hover時にanimationをさせていないhnav1はanimation-name: nav-scale;が呼ばれますが、hnav2はanimation-name: move02;が呼ばれてしまいます。
これをhnav2もhoverで指定したanimation-name: nav-scale;が呼ばれるようにするにはどのようにするといいのでしょうか。
よろしくお願いいたします。

:hoverで指定したanimation-nameとは別のnameのものが呼ばれてしまう

public class Member { 
    public int id;          
    public String name;  
 
    public Member(int id, String name) { 
        this.id = id;        
        this.name = name; 
    } 
  public static Member findMemberById(int id, Member[] data) {

    }
    public static Member findMemberByName(String name, Member[] data){

    } 
 }

Member [] dataはメインクラスで定義して、会員番号順にデータを格納しました。ここから会員番号をキーにして 2 分探索 で会員を探し出すメソッド「fMI」と、会員名をキーにして線形探索で会員を探し出すメソッドを作成したいのですが、やり方がよくわかりません。後発見できなかった時はnullを返すようにしたいです。