2019-02-03

はてなダイアリーから移行記念

はてなダイアリーもいよいよ終了ということで記事を移行しました。

全く新しい記事を投稿していないのにずっとはてなダイアリープラスに課金していたんですよね😂

新しい記事を書きたいなと思うんですが肝心のプログラミングの勉強がさぼりがちなので書くネタがないという・・・

というわけで、せっかく移行したので記念投稿です🆕

2016-03-05

option要素のtext部分をみてselect要素の値をJavascriptから変更する方法 ES5 ES6編

javascript

以前option要素のtext部分をみてselect要素の値をJavascriptから変更する方法についてという記事を書きました。
この記事はもう3年も前に書いたものなのですが現在でもこのブログ全記事の中で5本の指に入るほど頻繁に閲覧していただいています。

ただ3年の間に内容が多少古くなってしまいました。
先の記事ではjQueryを用いて行う方法とライブラリを用いずに行う方法を考えましたが、特に後者についてはその後ES5が主流となりES6(ES2015)も定まったため現在では古さを感じざるを得ないものとなっています。
そこでこの記事では現在主流であるES5そして最新規格であるES6を用いてこれを行う方法を考えてみたいと思います。

以下のHTMLに対して選択中のoptionを変更する操作を考えていきます。

<select id="sampleSelect">
    <option value="0">Apple</option>
    <option value="1">Orange</option>
    <option value="2">Lemon</option>
    <option value="3">Strawberry</option>
</select>

ES5ではArray.prototypeにfilterメソッドが追加されています。以前の記事でjQueryを使う場合にjQueryのfilterメソッドを使用していましたがこれと同じような機能が組み込みオブジェクトのArrayに用意されています。これをcallメソッドを使ってDOMノードリストに適用することでjQuery使用時同様に条件でノードを篩にかけることができます。

// ES 5
var options = document.querySelectorAll('#sampleSelect option');
		
[].filter.call(options, function(ele){
	return ele.text === 'Strawberry'; // Strawberryを選択する場合
})[0].selected = true;

Arrayのfilterメソッドは戻り値もArrayとなるので[0]というインデックス指定が必要です。

次にES 6で書く場合を考えます。
処理の流れ自体は上記のES 5の場合と全く同じなのですがES 6で追加された機能により下のように書き換えることができます。

// ES 6
let options = document.querySelectorAll('#sampleSelect option');
		
Array.from(options).filter(ele => ele.text === 'Strawberry')[0].selected = true;

ES 6ではArrayオブジェクトにfromメソッドが追加されました。(Array.prototypeに、ではないので注意です)
これはArray-likeオブジェクト(インデックスのついた要素とlengthプロパティを持つオブジェクト)からArrayを作成するメソッドです。
これを利用してDOMノードリストからノードの配列を作成します。これは配列なのでfilterメソッドが使用できます。

またfilterのコールバックにES 6で導入されたアロー関数を使っています。アロー関数では{}の中身がreturn文のみの場合returnを省略できるため上のように書くことができます。

さてES5, 6で書く場合をそれぞれ考えましたがここまで書いて思ったのはちょっとしたDOM操作などに関しては今でもjQueryすごく便利ってことですね。(^_^;)
jQueryはDOMノードリストと配列の違いを意識せず操作できることや選択されているノードのインデックスを明示的に指定しなくてもうまく処理してくれる点などとても便利だと思います。
そういった「勝手に裏でうまく処理してくれる」のがあいまいで嫌い、という方もいらっしゃるとは思いますが今回の内容のような処理ならば私は便利だなーと感じます。

2016-02-24

またちょくちょく更新しようかなと思います

雑記

ちょっとブログ更新しなさ過ぎました(-_-;)

プログラミングの勉強自体はC++をちょっとかじってみたりECMAScript 6をつまんだりしていたんですが、具体的に目標にして作っているものがないとついサボってしまいますね。
とりあえずはてなダイアリープラスに課金したのでまた更新していきたいと思います。

2014-08-24

Displayportの仕様で疑問に思っていること

ハードウェア

プログラミングと関係のない話なんですがDisplayportの仕様に関して疑問に思っていることがありまして、ご存知の方がいらっしゃったらぜひ教えてください。

何かといいますとDisplayportを使ってデイジーチェーンで複数のディスプレイを接続する場合、PCと逆側の末端になるディスプレイもDisplayport 1.2対応でなければならないのかどうかということです。

現在Surface pro 2とDELL U2311hをDisplayport接続で使用しているのですがここにディスプレイを1つ買い足そうかと思っています。
U2311hにはDisplayportのアウト端子がないので下のように末端につなぐことになります。

Surface pro 2 →　新しく買うディスプレイ　→　U2311h

ただU2311hはDisplayport 1.2ではないのでつなぐことができるのかどうかがよく分からないのです。

Surface pro 2のページを見ると

Surface Pro 2 または Surface Pro 3 から、あるいは Surface ドッキングステーションからモニターをデイジーチェーン接続することができます。DisplayPort 1.2 入力ポート付きの 2 台のモニターが必要であり、そのうち少なくとも 1 台には DisplayPort 出力ポートも必要です。
http://www.microsoft.com/surface/ja-jp/support/music-photos-and-video/connect-surface-pro-to-a-tv-display-or-projector#Daisy-chain

と書いてあるのでこれを文字通り読むと2台ともDisplayport 1.2対応でなければならないように読めます。

ただ、Displayportの仕様をみると1.1と1.2の違いは転送帯域だけのようなので末端のディスプレイは1.1のみ対応でも問題ないように思えます。

というわけでもしご存知の方がいらっしゃいましたら是非教えてください<(_ _)>

2014-08-02

tilamic.jsの使い方その９・'.on()'メソッド

tilamicjs Javascript

今回も引き続きtilamic.jsの解説記事です。

今回はタイルにイベントリスナーを設定する'.on()'メソッドについて解説します。
この記事の内容はtilamic.js Method-onとほぼ同じです。

書式

.on(events[, data], handler)

'.on()'メソッドは基本的にはjQueryの'.on()'イベントと同じように使用できます。
eventsは文字列型でハンドラを関連付けるイベントの種類です。スペースで区切ることで複数設定することもできます。
dataはオブジェクト型でハンドラに渡すイベントオブジェクトに含められるデータです。この引数は省略可能です。jQueryの'.on()'メソッドではdataはどのような型でも渡すことができますがtilamic.jsではオブジェクト型に限られます。これはtilamic.jsの'.on()'メソッドがハンドラに渡すjQueryイベントにはデフォルトで「どのタイルでイベントが発生したか」という情報が含まれるためです。
handlerは関数型でイベント発生時に呼び出される関数です。この関数にはjQueryイベントオブジェクトが渡されます。

'.on()'イベントはアクティブなタイルだけにイベントリスナーを設定します。もしすべてのタイルに同じイベントを設定し、どのタイルでイベントが発生したかを判定する必要がないのであれば、タイルではなくエリア自体にイベントを設定するほうが効率的です。
ハンドラに渡されるイベントオブジェクトはjQueryイベントですが、このデータには「どのタイルでイベントが発生したか」という情報が付与されています。"event.data['tileIndex']"がそれに当たります。

動作デモ
(動作の様子はこちらでご覧いただけます。)

<p class="sampleExp">
	Click some one of the tiles.
</p>
<div id="tiles" style="width: 60%; cursor: pointer; margin-top: 0" class="preview">
	<img src="../img/photo1.jpg" alt="photo1" />
	<img src="../img/photo2.jpg" alt="photo2" />
	<img src="../img/photo3.jpg" alt="photo3" />
	<img src="../img/photo4.jpg" alt="photo4" />
</div>
<script>
	$(function(){
		var tilamic = new Tilamic('#tiles', {
			'aspectRatio': 853/ 1280
		});
		
		tilamic.on('click', function(event){
			window.alert('Number ' + event.data['tileIndex'] + ' tile is clicked!');
		});
		
		var imgID = 1;
		setInterval(function(){
			tilamic.flip(imgID % 4);
			imgID++;
		}, 3000);
	});
</script>

2014-08-01

tilamic.jsの使い方その８・'.getCurrentImgID()'メソッド

tilamicjs Javascript

今回も引き続きtilamic.jsの解説記事です。

この記事ではタイルに現在表示されている画像がどれかという情報を取得する'.getCurrentImgID()'メソッドについて解説します。
この記事の内容はtilamic.js Method-getcurrentimgidとほぼ同じです。

'.getCurrentImgID()'メソッドはその名の通り現在タイル上に表示されている画像を特定する情報を返します。

書式

.getCurrentImgID(index)

引数のindexはタイルの通し番号です。tilamic.jsの仕組み上すべてのタイルに同じ画像が表示されているとは限らないためindexの指定によりどのタイルの情報を取得するのかを指定します。デフォルトは0(左上のタイル)です。

動作デモ
(動作の様子はこちらでご覧いただけます。)

<div id="tiles" style="width: 60%;" class="preview">
	<img src="../img/photo1.jpg" alt="photo1" />
	<img src="../img/photo2.jpg" alt="photo2" />
	<img src="../img/photo3.jpg" alt="photo3" />
	<img src="../img/photo4.jpg" alt="photo4" />
</div>
Current imgID is '<span id="showImgID"></span>'
<script>
	$(function(){
		var tilamic = new Tilamic('#tiles', {
			'aspectRatio': 853/ 1280
		});
		
		var imgID = 1;
		setInterval(function(){
			tilamic.flip(imgID % 4);
			imgID++;
			setTimeout(function(){
				$('#showImgID').text(tilamic.getCurrentImgID());
			}, 100);
		}, 3000);
	});
</script>

2014-07-31

tilamic.jsの使い方その７・'.resize()'メソッド

tilamicjs Javascript

今回も引き続きtilamic.jsの解説記事です。

この記事ではタイルが表示されるエリア(以下単にエリア)の大きさを再計算する'.resize()'メソッドについて解説します。
この記事の内容はtilamic.js Method-resizeとほぼ同じです。

'.resize()'メソッドはエリアの横幅にあわせてエリアの縦幅、および各タイルの大きさを再計算します。
そのためこの機能を有効に使うにはエリアの横幅をパーセントで指定したうえで、Tilamicオブジェクト作成時に'aspectRatio'オプションを指定しておく必要があります。
通常このメソッドはウィンドウリサイズイベントに関連付けて使用することになります。

書式

.resize()

このメソッドはいかなる引数もとりません。

このメソッドにはタイルの'isActive'の状態に影響されず常にすべてのタイルに対して適用されるという特徴があります。
'.filter()'メソッドと組み合わせて一部のタイルだけ大きさを変えることはできないということです。

動作デモ
(動作の様子はこちらでご覧いただけます。)

<div id="tiles" style="width: 60%; margin-top: 0;" class="preview">
	<img src="../img/photo1.jpg" alt="photo1" />
	<img src="../img/photo2.jpg" alt="photo2" />
	<img src="../img/photo3.jpg" alt="photo3" />
	<img src="../img/photo4.jpg" alt="photo4" />
</div>
<script>
	$(function(){
		var tilamic = new Tilamic('#tiles', {
			'aspectRatio': 853/ 1280
		});
		
		$(window).on('resize', function(e){
			tilamic.resize();
		});
		
		var imgID = 1;
		setInterval(function(){
			tilamic.flip(imgID % 4);
			imgID++;
		}, 2000);
	});
</script>