React入門メモ

前身:XHP→Facebookが開発。PHPのフレームワークをJSに移植したもの。そのため「毎回ページをレンダリングし直す 」という特徴がある。

MVCのうち、Vのみを担当する。

stateの変更→render関数→仮想ページ→最終的なDOMの更新

JSX

Reactのコンポーネント内でマークアップ言語を記述するためのシンタックス。最終的には完全なJSにトランスコンパイルされる。

利点はほとんどHTMLシンタックスと同じなので、他のUIやマークアップエンジニアが学習しやすく、プロジェクトのリソースを確保しやすい。

“React入門メモ” の続きを読む

picture要素、picturefillについて

<picture>
   <source media="(min-width: 600px)" srcset="images/demo-over600.png">
   <img src="images/demo-under600.png" alt="超え" />
</picture>

さしあたってこれでCDNは読み込める。

<script>
   // Picture element HTML5 shiv
   document.createElement( "picture" );
</script>
<script src="https://cdn.rawgit.com/scottjehl/picturefill/3.0.2/dist/picturefill.min.js" async></script>

raspberry pi 3 に nodebrew を入れて node のバージョンを管理する。node-redも入れる。

せいごさんに色々教えていただきながら、raspberry pi で IoT に参入し、居酒屋ハッカソンで笑いを取りたいなと作業しています。昨日はラズパイにnodeのバージョン管理ツールであるnodebrewが普通に入ることを教えてもらったのでやってみました。

まずなぜnodebrewを入れる必要があるかというと、根本的にはNode-REDを使うためです。Node-REDはnode.jsのnpmなので、動かすためにはnode.jsか必要になります。

では、なぜnode.jsを普通にインストールするのではなくて、nodebrewというnodeのバージョン管理ツールを入れる必要があるかというと、node.jsはバージョンによって差異が大きく、また更新も早いので、いくつかのバージョンを使い分けなくてはいけないシーンが出てくるからです。これは、フロントエンドの開発においてnpmを使ってタスク処理をさせている方には馴染みのある知識だと思います。具体的には、nodeのバージョン以上に、npmのバージョンが大きく、npm2でインストールしたnpmは、npm3でインストールすることを前提に動いているnodeでは全く機能しません。他にも細々とバージョンによってトラブルが起きるので、バージョンを管理し、開発者間で基本的には同じバージョンのnodeを使う必要があります。そのためにnodebrewが必要になります。

また、ラズパイのraspbianという標準的なOSには最初から、node.jsがインストールされていますが、このnode.jsのバージョンはかなり昔のものなので、基本的にはサポートしておらず、バージョンアップするようにかかれています。http://nodered.org/docs/hardware/raspberrypi ですのでnodebrewを使わない人も、この指示に従ってnode.jsとNode-REDのバージョンをあげましょう。

問題は、上の指示は基本的に最初からラズパイに入っているnodeとNode-REDのバージョンを、まとめてあげるものであって、今回のようにnodeを自分で入れて、npmとしてnode-redをインストールするときにどうすればいいのかが書かれていないように思われます。

とはいえ、nodeのバージョンを管理しないのは不便だと思うのでnodebrewを入れる方向を選びました。さしあたってnode-REDは動きますし、nodeの管理もmacでやっている時と同じようにできるようになりました。問題は、上のドキュメントで言及されているラズパイのGPIO関係のNode-RED用ノードが入っているのか、動くのか、ということだけです。これはまだ検証していません。ラズパイのGPIO出力端子が、メスだということを予想しておらず、家にケーブルがなかったからです。アードゥイーノユーザーの方は注意してください。

さてインストールしていきます。nodebrewの公式ドキュメントに書いてある通りに、まずはインストール。

$ curl -L git.io/nodebrew | perl – setup

次にパスを通すわけですが、.bashrcに書くと書いてありますが、何かと.bash_profileに書いた方が良いらしく、なぜなのかは私にはわかりませんが、そうします。

そして、vimというエディターで編集するのは、操作方法がいつも使っているwebstormとは全く異なり使えません。なので、nanoエディターを使います。最初から入っています。

$ nano ~/.bash_profile

でナノエディターでバッシュを開いて編集します。以下のものを追加します。初めての人は多分何もないと思います。で、保存。ナノエディターの下の方に保存のコマンドとかありますので、それみてやります。

export PATH=$HOME/.nodebrew/current/bin:$PATH

これでnodebrewをnodebrewコマンドで使えるようになったはずです。では

nodebrew help

とnordebrewのコマンドを叩きます。ちゃんと入って入れば、ヘルプが出ます。うまくパスが通っていないと、パスを指定しろと言われます。

次にnordebrewを介してnode.jsをインストールします。

nodebrew install-binary stable

これで、ノードの安定バージョンがインストールされます。他にもバージョンを指定する方法や、最新を入れる方法等、コマンドあるのでマニュアルをみてください。

インストールしたあとに、

nodebrew use バージョン名

で、使うものを指定して、初めてnodeコマンドが有効になります

ローカルにインストールしたノードの一覧は 

nodebrew ls

で確認できます。

そのあとはnpmを使ってNode-REDをインストールします

npm install -g node-red

インストールできたので、実行

node-red

そしてらブラウザでlocalhost:1880にアクセスしてエディターを開きます。

できました!

GPIOが使えるかどうかチェックしたら、また記事を書きます。

Sonic Pi メモ

全て公式マニュアルから引用

ショートカットキー

  • cmd R ラン
  • cmd S ストップ
  • cont a 行頭、 cont e 行終わりに移動
  • cont k 一行削除
  • cmd i ヘルプ
  • cmd m コード整列
  • cmd d,h 前後の文字を消す
  • cmd shift b ボタンを消す
  • cnt shif {} バッファータブを左右に移動

言語選択

言語選択を設定画面からおこなうことができない。unix コマンドでできそうな情報もあるがわからなかった。OS の言語が、そのまま Sonic Pi の言語として選択されてしまうので、さしあたって Mac の第一言語を英語に変えた。

音の指定

配列に入れる

配列にいれて再生した場合には、配列内のデータを全て同時に再生するので、ここでは和音が演奏される。

MIDIノートナンバーでの指定

play [52, 55, 59]

音名での指定

play [:E3, :F4, :G5]

配列から一つ指定する

play [:E3, :F4, :G5][2]

↑はG5だけが、単音として再生される。プログラミング恒例の、1番目を指定するには0のスタイル。

コード

play chord(:E3, :minor)

  • chord(:E3, :m7)
  • chord(:E3, :minor)
  • chord(:E3, :dim7)
  • chord(:E3, :dom7)

使えるコードのリストは Lang 内の chord の中にある。特殊なやつは”で囲むパターン。

(chord :C, ‘1’)
(chord :C, ‘5’)
(chord :C, ‘+5’)
(chord :C, ‘m+5’)
(chord :C, :sus2)
(chord :C, :sus4)
(chord :C, ‘6’)
(chord :C, :m6)
(chord :C, ‘7sus2’)
(chord :C, ‘7sus4’)
(chord :C, ‘7-5’)
(chord :C, ‘m7-5’)
(chord :C, ‘7+5’)
(chord :C, ‘m7+5’)
(chord :C, ‘9’)
(chord :C, :m9)
(chord :C, ‘m7+9’)
(chord :C, :maj9)
(chord :C, ‘9sus4’)
(chord :C, ‘6*9’)
(chord :C, ‘m6*9’)
(chord :C, ‘7-9’)
(chord :C, ‘m7-9’)
(chord :C, ‘7-10’)
(chord :C, ‘9+5’)
(chord :C, ‘m9+5’)
(chord :C, ‘7+5-9’)
(chord :C, ‘m7+5-9′)
(chord :C, ’11’)
(chord :C, :m11)
(chord :C, :maj11)
(chord :C, ’11+’)
(chord :C, ‘m11+’)
(chord :C, ’13’)
(chord :C, :m13)
(chord :C, :add2)
(chord :C, :add4)
(chord :C, :add9)
(chord :C, :add11)
(chord :C, :add13)
(chord :C, :madd2)
(chord :C, :madd4)
(chord :C, :madd9)
(chord :C, :madd11)
(chord :C, :madd13)
(chord :C, :major)
(chord :C, :M)
(chord :C, :minor)
(chord :C, :m)
(chord :C, :major7)
(chord :C, :dom7)
(chord :C, ‘7’)
(chord :C, :M7)
(chord :C, :minor7)
(chord :C, :m7)
(chord :C, :augmented)
(chord :C, :a)
(chord :C, :diminished)
(chord :C, :dim)
(chord :C, :i)
(chord :C, :diminished7)
(chord :C, :dim7)
(chord :C, :i7)

アルペジオ

play_pattern chord(:E3, :m7)

間隔、sleep: 1 スリープタイムを 0.25 に明示的に指定。

play_pattern_timed chord(:E3, :m13), [0.25, 0.5]

1番目、3番目、5番目…は0.25で、2,4,6…は0.5で。

スケールの演奏

play_pattern_timed scale(:c3, :major), 0.125, release: 0.1

We can even ask for more octaves: オクターブ範囲を指定

play_pattern_timed scale(:c3, :major, num_octaves: 3), 0.125, release: 0.1

How about all the notes in a pentatonic scale?  ペンタトニックもある

play_pattern_timed scale(:c3, :major_pentatonic, num_octaves: 3), 0.125, release: 0.1

ランダム選択

use_synth :tb303
loop do
play choose(chord(:E3, :minor)), release: 0.3, cutoff: rrand(60, 120)
sleep 0.25
end

Eminor の3音からランダムで選択

ループさせる ring 機能

puts [52, 55, 59][1]
counter = 0
notes = [52, 55, 59]
puts notes[counter]

この2つのどちらかで可能

(ring 52, 55, 59)
[52, 55, 59].ring

配列の操作

8.5 ring chains に多く配列操作の仕組みがある。

z-index, stacking context の説明

重なり順をコントロールするためには z-index を使えばいい。上にしたい要素ほど高い z-index の値を与えればいい。と思っていたら全然重なり順が思った通りにならない!!といった経験は CSS を書き始めたばかりの人間が必ず経験する出来事だと思う。

私わかったはず!

See the Pen vxwyze by nakanishi (@nakanishi) on CodePen.

まずこの記事を読んでほしいんですが、経験の浅いウェブディベロッパーが z-index で混乱するのは、次の原則を知らないからだと。「z-index は要素の position が absolute, fixed, ralative に指定されていないと機能しない。」作業で疲れてくるとこういうところを見逃しがちです。

その上で MDN のこの記事を読みます。Stacking Context に関する話です。

スタッキングコンテクストを正確に把握するのは難しいのですが、以下の部分が重要です。

It is important to note that DIV #4, DIV #5 and DIV #6 are children of DIV #3, so stacking of those elements is completely resolved within DIV#3. Once stacking and rendering within DIV #3 is completed, the whole DIV #3 element is passed for stacking in the root element with respect to its sibling’s DIV.

#4, #5, #6 の DIV は #3 の子要素なので、#4, #5, #6 の重なり順は DIV#3 の中だけで解決されます。DIV#3 のなかで重なり順が処理された後は、DIV#3 は一つ上の階層、つまりここでは Root エレメントの階層の中での重なり順の処理に移行します。ここではルート階層内の親要素とかなり順を考慮することになります。

つまり

  1. まずは重なり順に関係してくる要素には必ず position: relative, absolute, fixed のどれかを付ける。(他にも flex とか opacity:0 以外でもなるようだけれども、重なり順のコントロールのためには普通は使わない)
  2. 重なり順が z-index でコントロールできるのは「兄弟要素」の間だけ。
  3. 子要素は絶対に親要素の下には配置できない。
  4. 2,3 が起きるのは スタッキング・コンテクストという考え方が必要になる。
  5. スタッキング・コンテクストのダイジェスト:ある要素の中に potision: static 以外の position を持つ子要素がある場合、まずはその子要素の中だけで z-index の順番に重なり合う。この重なりが決まった時点で、それらの子要素は、親要素の上に乗っかって、それら全体で一枚の紙のような扱いになる。一枚の紙のようになった要素は、さらに親要素があって、兄弟要素があれば、兄弟要素の中でまたこのスタッキングコンテクストの処理をする。→以降無限にこの処理

ということで DOM ツリーの中で、同じ親要素を持つ要素同士 = 兄弟要素内でしか z-index の並び順は効かない。ってことですね。 わかればなんということはない!!

 

window.Main = Main;

<script src="./js/velocity.min.js"></script> いつものやつ
<script src="./js/velocity.ui.min.js"></script> UIアニメーション
<script src="./js/ScrollMagic.min.js"></script> 位置情報からトリガーするライブラリ
<script src="./js/animation.velocity.min.js"></script> ScrollMagic のプラグインで velocity との連携を行う
<script src="./js/app.js"></script> メインスクリプト