読者です 読者をやめる 読者になる 読者になる

motsunav’s diary

IT技術(Java, JavaScript)と音楽(ピアノ, 編曲)のことを書きます。

カービィ25周年記念オーケストラコンサートに行ってきた

f:id:motsunav:20170421021827j:plain

先日、友人と「星のカービィ25周年記念オーケストラコンサート」に行ってきました。

指揮は竹本泰蔵氏。TOUR de JAPONの映像でしか見たことがなかったので、今回、新日本フィルの演奏ともに生で聴けてよかったです。


スクリーン映像とオケが脅威の一致

今回のコンサートでは巨大スクリーンが前方(オケの後ろ側)にあり、そこにゲームの映像が映し出されるという演出でした。

何がすごいって、登場シーン・終わり方・細かなヒットまで、オケとスクリーンのゲームの映像が見事に合っていること。

メドレーとして一貫性を強く感じられるし、ゲームをやったことない人でも映画を見ているようで満足度が高いような気がします。おかげでスクリーンばっか見てしまった。。


オケ編曲すごいなって

初期のカービィポップからロボボプラネットまで、全てオケ編曲での演奏でした。

テンポを変え、調を変え、弾きにくいパッセージは楽器を変え、エコロジーかつ綺麗にまとまっている印象。

アマによる打ちこみの「原曲重視系全力オケ」とも違った、まさに「カービィが生オケになるとこうなるんだ」という感想が自然に出るような面白い編曲でした。


開発秘話

これは本当に面白かった。でもROMの話とかみんなわかったんだろうか・・・?

追加公演もあるらしいので内容は行ってみてのお楽しみ。


買ったもの

ちょっと前のカービィカフェで結構使ってしまったので今回はセーブして、パンフレットと記念グラスだけにしました。

f:id:motsunav:20170421021846j:plain

f:id:motsunav:20170421021848j:plain



こういうアニバーサリーイベント、どんどんやってほしいなー。
やるとしてもメジャーどころになってしまうと思うけど、合同でよいからマイナー作のもぜひやってほしいです。。


f:id:motsunav:20170421023016j:plain



おわり

O'Reilly「開眼! JavaScript」読書メモ ~第3章~

JS界で定評のある「開眼! JavaScript」を読んでみたので、
備忘録も兼ねて、各章ごとに自分用にまとめてみようと思います。

 

オブジェクトリテラル

オブジェクトを作成する方法として、「Object()コンストラクタを使用し、ドット記法やブラケット記法などでプロパティ等を格納する方法」が挙げられる。Object()コンストラクタは、プロパティやメソッドを持たない空オブジェクトを生成する抜き型のようなもの。他にも波括弧を使用してその中でプロパティ等を格納する、オブジェクトリテラルという表記方法がある。

// オブジェクトリテラル
var cat = {
    name : 'neko',
    age : 5,
    getName : function () {
        return cat.name;
    }
};

 
以下は全て同じ結果となる。

// Object()コンストラクタ
// ドット記法でプロパティを追加
var cat1 = new Object();
cat1.name = 'neko';
cat1.age = 5;
cat1.getName = function getName() {
    return cat1.name;
};

// Object()コンストラクタ
// ブラケット記法でプロパティを追加
var cat2 = new Object();
cat2['name'] = 'neko';
cat2['age'] = 5;
cat2['getName'] = function getName() {
    return cat2.name;
};

// 波括弧で空オブジェクト作成
var cat3 = {}
cat3.name = 'neko';
cat3.age = 5;
cat3.getName = function getName() {
    return cat3.name;
};

// オブジェクトリテラル
var cat4 = {
    name : 'neko',
    age : 5,
    getName : function() {
        return cat4.name;
    }
};


次は関数の章。call,applyとか全然使えてないのでこの機会にちゃんと理解できるようにしたいです。

O'Reilly「開眼! JavaScript」読書メモ ~第2章~

JS界で定評のある「開眼! JavaScript」を読んでみたので、
備忘録も兼ねて、各章ごとに自分用にまとめてみようと思います。

 

(第1章から引き続き)オブジェクトについて

JavaScriptはネイティブオブジェクトでさえも編集可能で、new演算子を伴って生み出されたオブジェクトであれば中にどんな値でも格納できるとのこと。オブジェクトの中にオブジェクト...とネストしていくことも可能。

 

ドット記法とブラケット記法

ブラケット記法は、オブジェクトに格納されたプロパティのキーにあたる部分を指定する。

var cat = new Object();
cat.lastName = 'neko'  // ドット記法
cat['firstName'] = 'taro';  // ブラケット記法

ブラケット記法の場合、文字列を指定して引っ張ってくるため以下のような使い方ができる。ドット記法ではこれができない。

var s1 = 'first';
var s2 = 'Name';
console.log(cat[s1 + s2]);
// -> 'taro'

 

ホストオブジェクトについて

第5章にてグローバルオブジェクトに触れているため、そちらでまとめる予定。
 
 
なんとなく、第1章に引き続き第2章も導入が多い印象でした。
prototypeチェーンなどについてもちょろっと記述がありましたが、後の章にて詳しく書かれているようなのでそっちでまとめることにします。UnderScore.jsについては、このメモ記事ではライブラリ紹介を目的としないため省略します。

 

O'Reilly「開眼! JavaScript」読書メモ ~第1章~

JS界で定評のある「開眼! JavaScript」を読んでみたので、
備忘録も兼ねて、各章ごとに自分用にまとめてみようと思います。

 

JavaScriptのオブジェクト

JavaScriptの世界は「オブジェクト」が全てらしい。

○ プロパティ  …名前がつけられた値
○ メソッド   …プロパティとして格納される関数
○ オブジェクト …プロパティ(メソッドも含む)の集合体を格納するコンテナ

var cat = new Object();   // Object()コンストラクタから "cat"を生成
cat.name = 'neko';   // プロパティ追加
cat.getName = function() {  // メソッド追加
    return cat.name;
}; 

"cat"を出力すると以下のような「オブジェクト」であることがわかる。

Object {
  name : 'neko'
  getName : (追加したメソッド)
}

 
 

リテラルとオブジェクトの違い

第1章にて挙げられている違いを以下にまとめてみた。

リテラル オブジェクト
代入 リテラルで代入
② new演算子を使わず
  ラッパーオブジェクトを使用
new演算子+コンストラクタ関数呼び出し
代入例 ① var p = 100;
② var p = Number;(100)
var p = new Number;(100)
メモリ 値渡し 参照渡し
同値比較 プリミティブ値を比較 ポインタを比較

メモリの持ち方について、オブジェクトの場合は参照渡しとなるため、「obj1 = obj2」とした場合はシャローコピーとなる。同値比較(===)も、オブジェクトの場合はポインタを比較するため、シャローコピーした場合はtrue、ディープコピーの場合はfalseとなる。プリミティブ値とオブジェクトのインスタンスを比較しても同じ参照ではないためfalseとなる。


また、リテラルで代入したとしても、プロパティを使用した場合はラッパーオブジェクトが生成され、処理が終わると破棄される。
 

typeof演算子について

やっかいなものらしい。
プリミティブならちゃんと判定される。オブジェクトであれば、基本的に「object」が返る。
例外としてあるのは以下。

null -> object
new Function() -> function
 

constructorプロパティについて

後の章をまとめる際にまとめる予定。
 
 

instanceof演算子について

オブジェクトが特定のコンストラクタ関数のインスタンスかどうか判定する。
プリミティブ値が代入された変数はオブジェクトではないためfalseが返される。

var str1 = 'aiueo';
str1 instanceof String;
// false (String()から生まれたわけじゃない)

var str2 = new String('aiueo');
str2 instanceof String;
// true

和音のイメージについて考える 3度と6度の使い分け

3度を選ぶか、6度を選ぶか

作編曲者によって、主旋律における3度と6度の選択は特に違いが出る部分かなと思っていて、
これについても個人的なイメージのようなものがあるので、実際の進行例と併せてメモしてみます。

3度は「体験」

dur(長調)ならば話に参加している主体のイメージ。
体験している喜びを当事者、または当事者を含む集団が伝えようとする。

moll(短調)ならば直接的に悲しみの感情を伝える主体のイメージ
体験している悲しみを当事者、または当事者を含む集団が訴えかけている。

6度は「伝聞」

dur(長調)ならば主体は離れたところにいて、俯瞰するイメージ。
良い雰囲気に包まれている集合体を見て、その様子を伝えようとする。

moll(短調)ならばもの悲しさ、他所の不幸へ目を向けるイメージ。
悲劇的な出来事が起きた集合体を見て、その様子を語り継ごうとする。


声部分けや響きの関係で2音間の音程に条件が出来てしまうこともあるけれど、使い分ける時は意識してみるのもありかなと思います。

このイメージも「ロマン派=優雅」のイメージを刷り込まれた結果なんだろうか。

和音のイメージについて考える 3度,4度,5度

和音のイメージ

作編曲において、ここは3度でここは6度で進行させる、みたいな選択を迫られることがあります。
声部分けによって自然に決まる部分はもちろんあるけど、僕の場合は、和音それぞれに漠然としたイメージを持っていてそれに従う形で決めることがあります。
 

「イメージに従う」とは

「イメージに従う」 = 和音とイメージを結びつけることで、感覚的に和音の配置を決める

例えば、 「○○の音色を表現したい」 とか 「○○が鳴っている雰囲気を出したい」 という時に、
自分の考えている音を瞬時に正確に音に落としこむことができると、より和音を自由に扱うことができると思う。

具体的には以下のようなシーンで利用します。
「原曲で単音しか鳴っていないけど、実は1オクターブ下に4度で重ねた方が雰囲気が出る」
ピアノ曲を作っているが、ここはオルガンの様な音を想起させたい」
 

個人的な和音のイメージ

中央ド(C4)のあたりで一定の音程を持つ2音を鳴らし、そのイメージを言葉と図にしてみた。

3度のイメージ

f:id:motsunav:20170321021812j:plain
 ● 各所に隙間がある区切られた格子のようなイメージ
 ● 低音になるほど格子の密度は低く、高音になるほど高い
 ● やわらかい、統一性、モノラル、狭いところで完結する

4度のイメージ

f:id:motsunav:20170321021846j:plain
 ● 硬い、規則に沿ったようなイメージ、密度が濃い
 ● 小さな隙間はほぼない、ミルクレープのような細かさ

5度のイメージ

f:id:motsunav:20170321021850j:plain
 ● ステンレスの箱、一斗缶のようなイメージ
 ● 低音になるほど格子の一辺が太くなって繋ぎ目が曖昧になっていく
 ● 硬く、細い、打ち消し合って細くなってしまっている
 ● 鋭利で金属的、中身が空 (空虚五度ってこういうこと?)


もちろん人によってイメージや内容は様々で、どれが正解というものはなく、また、その日の気分によって多少違いがあると思います。和音を配置してみて、どうもしっくりこないな、、ということが多い方は上に挙げた方法を試してみると面白いかも。

HTML5プロフェッショナル認定資格 レベル1 体験記

先月中旬に「HTML5プロフェッショナル認定資格 レベル1」を受験して、合格しました。
この試験は2017年3月1日より、出題範囲改定版のVer2.0が発表されているけど、個人的な都合上2月中に取得する必要があったため今回はVer1.0 の方を受験。
 

試験概要

 ○ 試験時間 : 80分
 ○ 問題数  : 65問
 

取得理由

 ○ 年度目標の一つに挙げていた
 ○ そろそろちゃんとHTMLマークアップを勉強したいと思った
 

勉強方法

各単元ごとに僕が感じたポイントのようなものを書いてみます。
全体としては基本的に暗記作業で、手を動かす必要は特になし。(CSS3のアニメーションくらい?)
 

WEBの基礎知識

僕はIPA試験の経験があったのでここは得点源にしようと思って臨みました。
問題によっては基本情報と同程度、またはそれより若干難しい問題もいくつか出題されるという感じ。デザイナーの方などはおそらくここが一番ネックになる。
(※Ver2.0ではサーバ周りの出題が減っているらしいので点数取りやすいかも)
 

CSS3

テキストの内容を網羅すれば楽に取れるはず。
余白関連(相殺、box-sizingのmarginの扱い等含む)は頻出で、計算や指定方法など形を変えて多く出題されます。
CSS初学者がつまづきやすいpositionプロパティの出題(親の絶対指定と子の相対指定など)はほとんど出なかった。
 

要素

b、em、strongなど似た意味を持つタグが多くなったので、出力結果で覚えようとすると混乱します。
マークアップした内容の意味を正確にクローラーに伝える」という原則を常に思い出して、検索エンジンのためにわざわざ覚えてやってんだぞ、くらいに構えておくとよいかもしれないです。
 

レスポンシブWEBデザイン

タグに比べ比較的感覚で理解しやすいです。
でもメディアクエリとCSSプロパティを混同して覚えないこと。(font-○○系など)
この単元から記述問題も出題されやすいので綴りもしっかり覚えておく必要があります。
 

オフラインアプリケーション

manifestファイルを使ったアプリケーションキャッシュの単元。
内容も薄く、得点源となるので正答率100%を目指せます。レスポンシブWEBデザイン同様、記述問題も出題されやすいので書いて覚えましょう。

適当に覚えるとHTTPメソッドなのか、manifestファイルのセクションなのかわからなくなることがあります。

OPTIONSはHTTPメソッドです。
 

使用した参考書

この試験の特性上、ワンパターンな暗記作業になりがちです。
何十個もタグを覚えたり、CSSの細かなプロパティを理解しなければならないので、
参考書は無味乾燥なものではなくしっかりモチベーションの保てるものを買った方が良いです。

僕はこの本を使いました。誤記は多いけど白本よりも内容が比較的充実してました。

HTML教科書 HTML5 レベル1

HTML教科書 HTML5 レベル1

 

試験を受けてみて

もともとHTML、CSSの基礎は理解しているつもりだったので、
勉強時間については 15時間 ほどで合格することができました。点数は 82点 でした。
僕の同僚が受けた時は(2年前)90分60問と聞いていたので時間が足りるか心配でしたが、模擬試験、本試験ともに20分程度余りました。
それでも最後は手汗びっしょり。次マウス使った人ごめんなさい。

あと、最後のアンケートでなぜか全角切り替えができず全部ローマ字で記述しました。
会社名が英字でよかった・・・
 

今後

レベル2の受験はまだ悩み中です。
JavaScriptが出題される資格ということで少し興味はあるんですが、なんかあんまり実用的でないという噂も。。