やっと書けたTech系以外のネタ🤘

1年以上ぶりのAnova

2017年6月に引越して以来(引越し以来、というか恐らく2016年末以来使ってなかったと思う)、低温調理機のAnovaはダンボールにしまわれたままでした。 が、ふと思い立ってローストビーフを作ろうということになりました。

案外時間が必要な低温調理

低温料理を敬遠していた理由は非常に簡単で、低温調理はとにかく時間がかかる、というところです。失敗はほとんどないのですが、 調理に数時間の時間が必要なので

「今すぐ肉が食べたい!!!!」

というシチュエーションでは無力なのです。

そこから導き出した調理法は、特にステーキに関してはスキレット(フライパン)とオーブンを使い、 そして調理対象の肉には温度計を差して温度管理をしっかりする、という方法。この方法でも失敗もほぼないし快適だったので、 長らく低温調理機の存在を忘れていました。

けど、何となくやってみるかとなったので、1年の時を経てダンボールから低温調理のAnovaを取り出しました。 (正確には最初どこにあるか分からず探しました)

結果がコレ!

調理の詳細はこちら(Cookpad)をご覧ください。

3.5cmくらいの厚さのリブアイ(日本では「ロース」でだいたい合ってる)を57℃で5.5時間、低温調理して、表面を焼いた結果です。

肉はCostcoのプライムのリブアイです。購入してから2週間くらい冷凍庫で保存していました。

低温調理の温度と時間に関してはChefStepsにいろいろ書かれていまして、ここを参考にしています。今回は根拠のないアレンジを入れた結果の温度と時間となっていますww

見た目も美味しそうですが、味も柔らかさもとても良かったです。根拠のないアレンジ万歳みたいな感じでしたw

低温調理ってやっぱり便利かも

今回のローストビーフで改めて(ローストビーフでの)低温料理の偉大さを知った気がします。けどステーキでは負けませんよ!

ということで、これからローストビーフを調理する時は低温調理にしようと思います。

調理の流れを写真でダイジェスト

調理の詳細はこちら(Cookpad)をご覧ください。

リンク

手軽にマルチ言語ページを簡単に作りたかったけど・・・

前回のページロードの遅さにつづいて第二弾。

頻繁にではないけど、たまに多言語でBlogを書くことがありますが、恐らく読む側からするとかなりストレスがあったかな・・・と思っていました。 日本語圏外の方は、英語ページを探さないといけない、けどそもそも探すページって日本語だよね・・・みたいな感じです。

そして、結論を言うと「作ったけど、現在のBlogに導入するのは失うものが多そうだから導入しないだろう・・・」という結果になってしまいましたがエントリだけは書いちゃいます。せっかく作ったのでw 「Markdownが使えるのに、このエレメントを使うとHTMLを書くことになる」ので気軽さが失われるのです。

language-selector エレメント

こんな感じで埋め込めます。

こんな感じでマルチ言語対応ページがHTMLタグだけで実現可能です。
JavaScriptを書く必要はないんです :-)
Web ComponentsとPolymer、ホントにありがとう!!
This element enables to make multi language page something like this by HTML tag.
No JavaScript code is required :-)
Thank you very much for Polymer as well as Web Components.

コードはこんな感じです。

言語セレクタ(「English」「日本語」と表示されてる部分)はこう書いて設置します。

<language-selector deflang="ja" langs="en:ja" switcher></language-selector>

Attribute は以下です。

  • deflang : デフォルト(ページロード時)に表示される言語を指定
  • langs : 用意している言語をISO 639-1(2文字のアルファベット)のフォーマットでコロン(:)区切りで指定します(現状の対応言語はen、ja。)
  • switcher : これをつけると言語セレクタとなります。(つけないとコンテンツ本体と認識します)

次にコンテンツ本体です。

<language-selector>
  <span class="translation" lang="ja">
    こんな感じでマルチ言語対応ページがHTMLタグだけで実現可能です。<br>
    JavaScriptを書く必要はないんです :-) <br>
    Web ComponentsとPolymer、ホントにありがとう!!
  </span>
  <span class="translation" lang="en">
    This element enables to make multi language page something like this by HTML tag.<br>
    No JavaScript code is required :-)<br>
    Thank you very much for Polymer as well as Web Components.
  </span>
</language-selector>

language-selector のタグの中に、適当なタグを入れ(ここではspan)、その中に書いた言語をlang="xx"で指定すれば、言語セレクタとリンクされます。 言語セレクタの属性の langs で指定した言語のみ切替えの対象になります。

注意:language-selectorの直前に別のタグで囲むと認識してくれないバグがあります。

リポジトリ

https://github.com/ryoyakawai/language-selector

Live Demo

Demo: language-selector

動作の確認状況

2018年4月12日現在、macOS High Sierra(10.13.3)上でChrome 65.0.3325.181、Firefox 59.0.2、Safari 11.0.3で動作の確認をしています。

何かが重い

Blogを移転の為に記事の引越しをしてみて気づいたページロードの遅さ。

調べてみると、YouTubeの埋め込みがあると重くなることが判明。 ‘X-XSS-Protection’ってエラーが1つの埋め込みに対して1つ出るので、複数埋め込んであるとページのロードのスピードにかなり影響していました。

どうやって解決しようか?と思い返しながらいると「時間を指定して埋め込んでもサムネイルは時間ゼロの表示になってて残念な想いをしていたこと」を思い出した。なので、例えば、ノンストップで録画したイベントの紹介をしたい場合、再生開始時間を指定して紹介してもそれができなくて、何が再生できるのかイマイチ伝えられなくて悔しかった。とか、他にもいろいろあったので、それ以上深く考えずに「じゃあPolymerも2.0になってるし、Web Componentで解決を図ってみよう」というノリで作りはじめました。

youtube-play エレメント

できたのがこちら。こんな感じのがページに埋め込めます。

Polymer(Web Components)のElementなのでもちろんHTMLを書くことで埋め込み完了です。

<script src="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="[PathTo]/youtube-play.html">

<youtube-play contentid="WsptdUFthWI" imgsrc="https://ryoyakawai.com/blog/images/2018/04/youtube-play-sample-02.png" start="1:48" autoplay="1" size="75%" rel="0" controls="1" showinfo="0" width="447.75px"></youtube-play>

Attribute は以下を用意しています。

  • contentid : YouTubeの動画にユニークに付与されるIDを指定
  • imgsrc : YouTube動画を再生していない時に表示する画像のPathを指定
  • start : 開始位置を指定(HH:MM:SS、秒のフォーマットのどちらでも正しくParseします)
  • autoplay : ‘1’を指定すると、画像をクリックすると再生されます
  • size : Window幅に対する画像、動画の幅を%で表記します(AspectRatioは16:9でFixしています)
  • rel : ‘1’を指定すると動画再生完了後に関連リンクを表示
  • controls : ‘1’を指定すると動画再生時にコントロール(再生、停止、シーク等)を表示
  • showinfo : ‘1’を指定すると動画のタイトル等が動画再生時に表示されます。

あまり調べずに作ったので、もっと優れたのが既に公開されているかもですのでお気をつけください。

また、このエレメントを使っても、結局のところ’X-XSS-Protection’のエラーは再生時に発生してしまいます。ページロード時のスピードを上げることを目的としたエレメントですのでご了承ください。

リポジトリ

https://github.com/ryoyakawai/youtube-play

Live Demo

Demo: youtube-play

動作の確認状況

2018年4月5日現在、macOS High Sierra(10.13.3)上でChrome 65.0.3325.181、Firefox 59.0.2、Safari 11.0.3で動作の確認をしています。

名前を「Delicious Days」に変更してBlogを移転しました!
まだまだSocial隆盛な世の中でBlogというのも「今更感」もありますが、 逆にだからこそBlogを、と思って移転して心機一転、生活の中で美味しい体験を書いていこうかと思っての移転です。


Socialはとても手軽でよい情報発信ではあります。しかしながら、手軽だからこそ忘れられてしまった何かがあるような気が最近よくしていて、 具体的に「何が?」に気がつけるといいな、なんて思っています。それから、今まではBlogのサービスを使っていたこともあって、 機能の追加とか自分ではできなかったので、このブログを実験の場にもしていこうと思っています!

English Version

Webブラウザは音楽アプリケーションのプラットフォームの1つになっています。それらを支えるのが Web Audio API、Web MIDI API です。

  • Web Audio API: 信号処理を可能にしていて、例えば楽器を作る、音楽ファイルを加工することを可能にしています。
  • Web MIDI API: ブラウザと外部MIDI機器との接続を可能にしています。

Web Audio APIは現在ほぼ全てのブラウザでサポートされていて、Web MIDI API はGoogle Chromeのみでサポートされています。(Firefoxでも実装は完了していて、現在コードレビュー中です。 2016/8/3 現在)

今までに4回行った Web Music ハッカソン ではテーマは設けず「音楽アプリケーションを思うがままにハックする」 ということで行ってきましtが、今回は現場をハックするという大きな目標の元で「VJ/DJ」をそのテーマとしました。
このテーマのもとで5つのアプリケーションが優秀賞に選ばれました。

[1位] “Cloud Synthesizer” developed by Tomasz

アプリケーションを表示しているブラウザがシンセサイザの一部になる、というアプリケーションです。実際の演奏はマスタとなるアプリケーションに対してMIDIデバイスからメッセージを送り音を出す、という形です。今回のデモは4つのグループに分割し、それぞれが別のパートの音を担当して音楽を奏でていました。メッセージのやりとりにはFirebaseが使われています。 このシステムを使えばライブ会場にスピーカが不要になるかもしれない、と感じました。

[2位] “nanoBlocks” developed by nas

マルチタッチディスプレイを用いた Wavetable シンセサイザです。 それぞれの指でFilte、Pitchまた音源を操作して、音を作り出します。たいていの楽器は指で異なるPitchの音を作り出していますが、このアプリケーションは指で音源の変化、ピッチの変化、各種Filterを変化を現代の主流であるマルチタッチが可能なタッチディスプレイを上手に使うことで新しい楽器が実現されています。 DJという視点から見ると、楽器では出せない音を簡単に手の操作だけで追加でき、新たなプレイ・サウンドの創造を可能にするのでは?という感想を持ちました。
[Live Demo]

[3位] “トレンド Sampler” developed by Takashi Mizuhiki

基本的にはスッテプシーケンサなんですが、音の要素がGoogleトレンドから引っ張ってきたトレンドワードをMacのSayコマンドで喋らせたもの、という面白いアプリ。MIDIクロックにも対応するのでDAWとの同期もできる。何より流石なのが、話しだしの微調整までできるところ。 DJプレイにトレンドワードを気軽に入れることができそうです。

[4位] “Music Tweet” developed by Tomohiro IKEDA

MMLパーサなのですが、TwitterでツイートされたMMLを演奏するというChrome Extensionです。新しくツイートされたMMLだけでなく、過去にツイートされたのも選択することで再生可能です。さらに、パースしたMMLをWebSocket経由でも送ることがでいるので、そのメッセージに対応したWeb Audio製のシンセを鳴らすことが可能です。
気軽に持ち運べる&メモれるシーケンサということでヤマハのQYシリーズの現代版?という印象もあります。
[GitHub]

[5位] “Vote” developed by mohayonao

このアプリを動作させているブラウザがコントローラとなり1つの音楽を奏でるというアプリケーションです。観客とコラボするといったライブでの演出が可能だったり、またライブ中に観客の盛り上がり具合を見ることもできそうですね。ちなみに、メッセージのやりとりはFirebaseを使ってます。
[LiveDemo] [GitHub] [PerformanceVideo]

[Roland賞]“フレーズでコミュニケーション” developed by Team chaco

コラボレーションして音楽を作るステップシーケンサ。複数人でフレーズを作ったり、修正したりが可能です。色合いだったり、和音だったりを考えられているらしく、どうやっても不協和音にはならないそうです。
[GitHub]

[Firebase賞] “リアルタイム自動アルペジオパターン生成機 for Drum” developed by Team Rotterdam

自動的にドラムパターンを生成し、更にMIDIコントローラでそれらのFilterだったりをコントロールするアプリ。楽器として、とてもストレートなアプリ。MIDIクロックを出すので、他のDAW等と同期した演奏をすることも可能です。

”mi:muz:tuchの設定ツール” developed by D.F.Mac. @TripArts Music

mi:muz:touchというオリジナルのUSB-MIDI基板の設定をブラウザで変更するツール。mi:muz:touchは野菜等をトリガーにして、MIDIでメッセージを生成する基板で、第2回のWeb Music ハッカソンでハックした作品が元になっています。 詳しくはこちら をご覧ください。
[LiveDemo]

“ライトをMIDIコントローラから制御する” developed by Kazuyuki Eguchi

IoT機器をMIDIコントローラから制御するアプリケーションです。インターネット経由で操作できる基板に対して、MIDIコントローラで操作された通りブラウザからメッセージを送り、その先につながっている電球等を制御します。デモではパトランプ、ELワイヤー、テープLEDが制御されていました。

“ImproVJ” developed by team ImproVJ

様々なインプットから音楽を作るアプリケーションです。拍手音からビートを検出したり、ぼかして荒くした画像をステップシーケンサに見立て、その情報から演奏することも可能です。DJの現場ではこのシステムにつながったカメラを観客に向け自動で音楽を生成させる、という使い方がありそうです。

“WONDER.NET” developed by kirinsan.org

カメラからのモーションから画像にエフェクトを適応するアプリケーションです。DJに手軽にVJを追加することのできるアプリケーションかな、と感じました。エフェクトは画像だけでなく、再生している音楽にも適応することができるので、実はVJもDJも一度にすることが可能です。
[LiveDemo] [GitHub]

“dance live” developed by nakaG

観客が動かしたモバイルデバイスのモーションセンサーのデータを使って音にエフェクトをかける要素を抽出して、DJ自身がどのエフェクトを使うかを選定する、というアプリケーションです。観客が間接的にライブに参画できる、新しいコンセプトのアプリケーションだと思いました。

“SPKR” developed by K3

ライブをライブハウス等ではなくて、スピーカのないところでもできるように観客のスマホのスピーカを使ってしまう、というコンセプトのアプリケーションでした。参考にしたかったアプリを動作させるのに手間取ってデモは完成していませんでしたが、このツールがあるとどこでもライブパフォーマンスができそうですね。

“Mobile Music Jammer” developed by Team Nolick

接続された機器(PC, mobile phone)を使ってセッションをしよう、というコンセプトです。デモではOpenFrameworksで作られた映像をモバイル端末から操作していました。観客もライブの演奏に加わることができるところが良いと感じました。

“DJHUB” developed by team DJHUB

DJが操作した情報を時間管理の概念のある例えばStandar MIDI Fileにして、GitHubみたいなところで公開、または販売しようというコンセプトのアプリケーションです。時間内には完成はしませんでしたが、DJのプレイを音として残すのではなくて、操作の情報を残す、というユニークなアプリケーションでいした。著作権が適応される音を排除するところがキーだと感じます。



これらの15のアプリケーションが今回のハッカソンでハックされました。

しかし、Web Musicの世界にはラスボスが存在します。ラスボス達は審査対象にはなっておらず、また当日はチューター的な存在で参加してくださっていますが、それでもアプリをハックするというラスボスっぷりを発揮してくださっていますので、そちらのアプリもご紹介します。

[ラスボス] “3D Sequencer” developed by @aike

3DのUIを持つステップシーケンサです。音楽を奏でているだけの情報を3Dで見せるとこんなにキレイなんだ、と感じました。 ハッカソン後に公開された 模範映像がこちら です。 Super Cool!!

[ラスボス] “LiveBeats” developed by @g200kg

LiveBeatsはPC/Macを楽器にしてしまう、というコンセプトから生まれたそうです。今回はWeb Speech Synthesis APIを使って音声を合成し、それを演奏に組み込んでいました。百聞は意見に敷かずという類のアプリですので映像を御覧ください。
[LiveDemo]

[ラスボス] “Growl Bass” developed by @toyoshim

2つのアプリケーションを紹介してくださいました。1つは映像の中のパーティクルを音にするアプリケーション [LiveDemo]、 もう1つはグロール音を簡単に作るためのアプリケーションです。MIDIで出力することもできるので外部音源を鳴らすことも可能です。 [LiveDemo]


これらが今回のハッカソンの全てとなります。

Web Music ハッカソンも5回目となりましたが、今回はハックされた作品のレベルの高さを感じました。恐らくこの要因は少なくとも2つあると思います。まず1つは日々、Web Audio/MIDI APIの認知度が上がり、「とにかくAPIを使う」ではなくて「APIを使ってどんなことをしようか」というAPIを使うからアプリケーションにAPIを参加させる方向に向かっていると思います。もう1点は事前ミートアップです。今回、事前Meetupをしようか非常に迷いました。なぜならいつもは行っていないので、参加者の皆様に集まっていただけるかを懸念しておりました。が、結果からすると、開催してとてもよかったです。ハッカソン当日の全てのチームが事前ミートアップでできたわけではありませんし、全てのハッカソン参加者が事前ミートアップに参加できた訳でもありません。が、事前に顔を合わせることで場全体のIceBreakingされた状態から始まったので、ハッカソン当日の短い時間を非常に有効に使っていただけたのだと思っています。実際に参加者から「事前ミートアップのお陰でハック開始直後から始めることができた」と感想も頂いています。
事前ミートアップから、ハッカソンで質の高い成果物を作るためには、ハック開始前にIceBreakingは終わらせておくことがポイントかな、と改めて学ぶことができました。

事前ミートアップの様子

事前ミートアップ、ハッカソンを通して、ハックしてくださった参加者の皆様、本当にお疲れ様でした。また、ハッカソンのサポートをしてくださった以下の皆様に心より感謝いたします。

  • 事前ミートアップ:関さん(HackCamp)、レンツさん(LIG)
  • ハッカソン:Googleさんよりランチ&場所のご提供、AMEIより楽器の提供
  • ハッカソンの審査員:田所 淳さん、新谷垣内 達也さん、藍 圭介さん、渡邊 正和さん
  • After Party:Red Bullさんより場所のご提供、レンツさん&エディさんのディレクション

Web Music ハッカソンはまたいつか開催したいと思っていますので、その時にはまたお会いしましょう!!