金曜日のネコ

8割日記、2割技術

ポートフォリオサイトを組み直したくなった

現行ページ

nasustim.com

 

Github PagesにホスティングさせてもらっているSPAなのでルーティングにHash Routerを使っておりURLが汚いという不満もあり、その内VPSに移したい。

不満

配色の好みが変わったというのもあってもう少し色を統一したい。

できればアニメーションを少し混ぜたり、フルHD以上ではコンポーネント一つ一つが大きくなりすぎないようにしたい。

ワイヤフレームだけ作った

f:id:nasustim:20180610154427p:plain

何となく色感を統一したいのと、ごちゃごちゃ感を減らしたい。

中間発表が終わったらかならず......。

(必要じゃない限り)ラップトップを持ち歩かない生活を始めた

近況報告です。

きっかけ

最近クルマを手放して電車通学をしているのですが、先日通学時に雨に降られて上着もリュックもびしょ濡れになってしまいました。

f:id:nasustim:20180526021030p:plain

図1. よくよく考えてみると傘を持つ位置が悪い

幸いにもリュックの中にあった図書館で借りた本は無事でした。

服や自分の荷物が濡れるのは別に構わないのですが、もしも本が濡れたら困る......。

しかし無意識の行動を正すのも難しい。

ソリューション

傘の保護範囲の中に全ての荷物が収まれば良いのではないか。

バッグの選定

メッセンジャーバッグ

メッセンジャーバッグ - Wikipedia

昔使っていたけど重さが片方の肩にかかって疲れる。

サコッシュ

サコッシュとは - はてなキーワード

最近流行っているし良さそう。

用意

せっかくだから自分の物だと一目で分かるスタイルが良い。

suzuri.jp

SUZURIで作りました。

ラップトップが入らない

SUZURIのサコッシュは縦横が13インチMacbook Proとほぼ同じなのでラップトップは入れられない。

というか荷物がそんなに入らないので断捨離が必要。

サコッシュ通学の基本構成

首周り

 安価だけど音質も気にならないし電池持ちが良い。

ズボンのポケット

サコッシュの中

  • Ankerのモバイルブースター
  • Lightningケーブル
  • Micro-USBケーブル
  • 財布
  • ポケットティッシュ
  • その日に読むべき本

感想

3日間滞在した北品川が良い街だったという話

先月、就活のために東京に行った。

4月の最終週の火曜日に東京入り、五反田で一泊した後水曜日にとある御社の面接、そのまま土曜日まで北品川のゲストハウスに滞在して就活イベントに参加した。

本当は土曜日の内に岐阜に帰るつもりだったのだが、福井の勉強会で知り合ったうなすけくんの家に一泊させてもらって日曜日に岐阜に帰った。(突然押しかけたのに泊めてくれてありがとう)

Where is 北品川

品川区の北部に位置する。町域北部は港区高輪・港区港南に接する。

北品川 - Wikipedia

品川駅から京急線に沿って南に下った辺りにある街だ。品川駅は駅名に「品川」を冠しているのに港区らしい。

大学院の同期に教えてもらい宿泊したゲストハウスが京急北品川駅のすぐ近くにあった。

bp-shinagawashuku.com

北品川の魅力

宿場町の趣きがあり良い雰囲気

慶長6年(1601年)に、中世以来の港町として栄えていた品川湊の近くに設置され、北宿、南宿、新宿にわかれていた。場所は、現在の東京都品川区内で、北は京急本線北品川駅から南は青物横丁駅周辺までの旧東海道沿い一帯に広がっていた。

品川宿 - Wikipedia

東海道を東京から下る場合には一番目の宿場町らしい。写真は撮らなかったが宿場町の雰囲気を醸している街の外観は散歩していてもなかなか楽しい。

街には鮮魚屋があったり八百屋があったり、地元の方々の生活の営みが感じられるのも地方都市の国道沿いで生まれ育った私にとっては惹かれるものがあった。

そんな街が品川駅のすぐ近くにある

品川駅といえば言わずと知れた東京のターミナル駅だ。駅前には大企業の本社ビルなんかが沢山ある。

北品川から15分北に歩けば品川駅に行けるし、逆も然りですぐに北品川に帰ってこられる。控えめに言って住みたい。

海が近い

宿から少し歩けば海が見られるのは海無し県民にとっては魅力を感じるポイントである。海無し県民は海が好き。

f:id:nasustim:20180513012131p:plain

気分転換に海まで歩ける生活、良い。

まとめ

東京に住みたい.......。

www.youtube.com

Node.js環境でのUnicode文字

TL;DR

イマイチ使い所が限られてくるけどUnicode文字をidentifierに使うノウハウ。

動作環境 

f:id:nasustim:20180507222332p:plain

バージョン10リリースおめでとうございます🎉🎉

Node.js環境でのUnicode文字の扱い

Valid JavaScript variable names in ES2015 · Mathias Bynens

The ES5 spec allowed implementations to base their identifier support on Unicode versions as old as Unicode v3.0.0. ES2015 lists Unicode v5.1.0 as the minimum Unicode version required for compatibility.

 Unicodeバージョン3.0までなのでかろうじて漢字は書けそう。

実行

これは普通に実行可能

しかし

これは実行できない

なぜか

クラス名、メソッド名、関数名は変数名とは別のフィールド。詳しくはBabylonでAST化。

ソリューション

これで解決

NxPC.Live vol.31 @ CIRCUS TOKYO に来てくれ!!

Acknowledgements

 - カッコいいwebページを作ってくださった永松先輩と加藤先輩に感謝。

nxpclab.info

 - Simple is Bestなフライヤを作ってくださった「装飾は悪である」デザイナお兄さん荏原マンに感謝。

 - NxPCのSNS担当いいじまボーイに感謝。 

www.facebook.com

 - NxPCのオーガナイザ、平林先生に感謝。

www.iamas.ac.jp

 - 最後に、なんとか書紀を3月までやってきた俺に感謝。

nasustim.com

 

Event Information

Datetime: 2018-03-20 21:30~

ADV: ¥2000

Door: ¥2500

 

npmの環境でSassのエラーが突然起きてしまった時

2ヶ月に一回くらい起きる。

$ brew reinstall ruby

で、大抵は解決。 もしかしたらRubyのGemの入れ方が間違っているのかもしれない。

P.S.

OSをアップデートするタイミングで起こるみたい。
[mac] OSアップデートしてsassが使えなくなったら

JavaScriptでVJした話

先週行われた名古屋工業大学の学祭内でのクラブイベント、"Play Style"でVJをさせていただきました。

システム構成

イベント時の様子

感想・反省

ネタが少なすぎた

これに関してはもう少し早くから準備を始めるべきでした。反省......。

iPhoneで撮ったループ素材に関しては、マルチネ辺りのトラックメーカーの曲が流れた時に渋谷の映像を出したら盛り上がったのと、長尺の車載映像は中々汎用性が高くて良かったのですが、ネタが足りなすぎて同じループ素材を2,3回使いまわしてしまって、ずっとフロアにいたお客さんには飽きられてしまったかもしれません。

一方でJavaScriptのグラフィックプログラムは用意してたもの全てプリミティブな動作のプログラムでしたが、実写映像と重ね合わせると中々見栄えの良いものだったと思います。

オーディオリアクティブなプログラムに遅延が発生していた

目視での確認なのでどの程度の秒数遅れているかは確認できませんでしたが、音楽の低音部分(0〜440Hz)の強度が一定のしきい値を超えた時に動作させるはずだったプログラムに微妙に遅延が発生していたのが確認できました。

  • Web Audio APIでマイクからの音声をサンプリング
  • 同じくWeb Audio APIのAnalyzerで低周波成分のレベルを取り出す
  • ブラウザに映像の変化として表示
  • SC SyphonでVDMXに送信

と、様々なシステムを噛ませているので、どこがボトルネックなのかは次回までに突き止めておかないといけません。

DJネームの文字は動いたほうが良い

Twitterで共有されている映像からお分かりの通り、PNG画像をVDMX内のビデオミキサで映像に表示していたので、文字にはエフェクトを掛けない限り変化が現れません。

カラオケ映像みたいで少しかっこ悪い......。