2018年のコードを振り返る(前編)

プログラミング 雑記

数日前、Twitterで #今年の絵を振り返る みたいなタグが流れていたことに触発されてやります。

成長が見れて割と面白かったです。年内は前半のみ投下します。

 

1月

自分のサイト作ってました。

まだ変数名定義がvarだし、いろいろとおかしいですね。

例

document.getElementsByClassName("word")[0].innerHTML = htmlText;

2月

大学のバス時刻をひと目でわかるやつを作ってました。ちなみに自作のAPIもクソです。

例

document.getElementById("mode").innerHTML = "行き";

3月

なにもしてなかったぽい。所属団体のいろいろ（新入生関係）を処理してたぽいIssueがあったので、多分そういうことしてたんじゃないかと。

4月

学習のためにビンゴっぽいやつ書いてた。

クラスベースのコードを書こうとしたような記憶がある(本当にミニマムなコード)。割とまともになり始めた？

例

JUDGE_ELEMENT.insertAdjacentHTML('beforeend',listhtml);

5月

時間割を見れるやつ作った。indexedDB使おうと思って考えた記憶がある。

コードが結構変わった。まず定義がletになってるし、querySelector使ってる。

でも実はMVCっぽい作りにしようとして失敗してる。

例

class Ui {
    constructor(){
        let that = this;
        let detailMode = document.querySelector(".switch-detail-and-editmode");
        let quickMode = document.querySelector(".switch-quickmode");
        let helpMode = document.querySelector(".switch-helpmode");
        ...(ry

リンク

6月

律子誕生日の企画やってた。実はコード書くのが間に合わず、可動してない。

fetchAPIを使う過程でpromise解決出来るようになったぽい。あと前回よりはまともにMVCしてるかも。未だに理解してるか怪しい。

例

fetch(endpoint).then(function (response) {

NW-A50シリーズのDAC機能について

雑記

※随時更新。特に技術的な部分は学習と検証の後に記載します。

A50シリーズについて

ソニーが作る超有名音楽プレイヤーであるWalkmanの入門帯(20k~30k程度)、Aシリーズの最新モデル(2018年10月発売)。ちなみにこの下には、バッテリーの長さなどの利便性を追求したSシリーズがある。

フルデジタルアンプ「S-Master HX」を搭載し、音源のアップスケーリングを実現する「DSEE HX」など、従来Aシリーズ通りの機能を全体的に揃えている。他にもBluetooth環境向けに、ソニーが自社で開発している「LDAC」コーデックに対応。

音作りについては各地家電量販店で聴いてみるといいかもしれません。ここのインタビューでも挙げられている通り、結構低音が主張してきます。高音に集中したいという方には向かないと思います。

特筆すべき機能

ガジェヲタというわけではないんですが、以下の機能が面白いです。

それぞれ取り上げていきます。

Bluetoothレシーバー機能

名前の通り、Bluetoothのレシーバーになります。

スマートフォンからBluetooth対応イヤホンにつなぐように、Walkmanとつなぐことができるのです。もちろん出力はイヤホンジャックからとなり、先述したデジタルアンプやDSEEなどの高音質化技術の恩恵を受けることが出来ます。

注意すべき点として、受信コーデックはSBCとLDAC、AACのみとなり、aptX系は使えません(参照)。チップセットの関係か、もしくはライセンスの問題かもしれませんが気をつけましょう。

USB Audio対応

私の本命、USBAudioです。ここの項のために記事を書いたと言っても過言ではないです。

公式には、USB-DAC機能とポタアン・USB-DACアンプとデジタル接続可能という二項目をあわせていますが、ここではUSB-DAC機能についてのみ書きます。

また、技術的な解説(ArchLinux環境において簡単な確認をする程度)は後日追記します。

免責事項：公式サイトには特定ソフトウェアが推奨であり、別途ドライバのインストールも必要とあるため、以下の文章はすべてサポート外です。私もサポートしません。

最初に結論から述べておくと、Windows・ArchLinux・Android *1 で動作確認が出来ました。Windowsのみ(一応)推奨ドライバをインストールしましたが、他環境では特に問題なく動きました。(Arch環境については追記予定)

USB AudioによるUSB-DAC機能においても、Bluetoothレシーバー機能と同様に各高音質化技術の恩恵を受けることが出来ます。

欠点として、おそらく500msほどの遅延が発生します。公式の過去Q&Aにもありますが、この機能は音楽専用の機能です。ただ、VLCプレイヤーなどで同期を行えば映像作品にも使えるとは思います。流石にゲームは無理ですね。

今後試したいこと

  • USB-DAC状態でBluetoothイヤホンと接続
  • ブラウザ上の音声を同期(映像を500ms遅らせる)させる

*1:MicroUSB TypeB to USB Type Aの変換あり

プリティーリズム・ディアマイフューチャーを見終えたメモ

プリティーリズム 感想

見終えた。とても面白かった。みおん様かわいい。

第一作に見劣りしない、とても多面的な作品だと思った。

こちらも前回同様、一度で全体を俯瞰するのは難しいのでタグっぽいもので表してみる。ただ、ディアマイフューチャーはオーロラドリームよりも多面的というか、各キャラクターや各視点にフォーカスを当てることですごく大きく広がるので、その点を一旦考えず全体を見る。

  • 夢 + 未来
  • ライバル・仲間・友達

多分これくらいです。あとは本当に、各キャラクターや視点に寄っていると思います。それでいて、これらの要素が最高に重要です。

オーロラドリームでは夢という要素しか書きませんでしたが、今回は未来という要素も加算してみました。時間軸という点が結構生かされて書かれていたように思えて、今であるということがすごく重いものでした。特に終盤、青春というキーワードが何度か出てきましたが、これがディアマイフューチャーというタイトルにもつながっている気がします。

それと、オーロラドリームよりも強調されたライバルであり仲間であり友達であるという関係性。特に今作は同チームではなく、本来利益を共有しない別チームでした。けどそんな利益とかどうでもいいんですよ。みんなをハピラキにすること、それだけが何よりも大事なことだったのです。そしてそれは、自分たちもハピラキでなければいけません。

なんかちょっと頭の中がまとまりきってないので、良かったセリフをひとつだけ上げます。

みんなが進む道は明るいって、未来は美しく輝いているって、あたしたちが言わなきゃ誰が言うんだ！！！ (50話)

なんていうんでしょう。すごく自分の背中を押してくれるというか、勇気をくれるセリフです。それはもう自分にとっての使命であるという論調が、自分もこう言いたいと思わせてきます。私もやらなきゃいけない、私がやらなければ誰がやるんだ。私にしか出来ないんだと。

あとは29話とか、48,9話とかもすごく好きなセリフがあるので見ていただきたいです。

二週間？ほどで計100話くらい見たんですけど、本当に二作とも面白かったです。もちろん考察とかしなくても、子どもたちのように歌と踊り、ストーリーに魅了されても面白いですし、各キャラクターや視点にフォーカスして解釈・考察していくのも興味深いです(割と細々とした解釈が多めでTwitterに投げてたりします)。ディアマイフューチャーについては、割と阿世知欽太郎について読み解きたいなと思わせてきます。

もう朝が近づいてまいりました。おやすみなさいませ。それはそうとみおん様めっちゃかわいくないですか。かわいい。

Vino.js開発日記 その１

vino プログラミング JavaScript

お久しぶりです。Marcoです。ブログっぽい記事を書くのは久しぶりです。

今回は私が今開発中(厳密には構想・設計中)のVino.jsについてダラダラと書いてみようかなと思います。

Vino.jsとは

Vino.jsとはVisual Novel JavsScriptの略で、ビジュアルノベルを作るためにめんどくさい部分を解消したいとの思いから考案されました。

五つの柱

  • 製作時のめんどくさいを解消すること
  • 最低限動作させるのは簡単であること
  • フラグ・パラメータの管理手段を提供すること
  • 様々な表現に対応できる柔軟性を持つこと
  • 仕組み上の不可能をなくすこと

ライブラリ制作が初めてなので、どういった思想のもとで作るかというのを定めた五本の柱を考案しました。

基本的に、この方針に従って制作を進めていきます。

五本目について補足

不可能をなくすというのはOSをも作れるようにという意味ではありません。

例えばシナリオを遡る演出であったり、スタイルを大きく変化させるもの、Webという環境を活かすもの、それらを『Vinoの仕組みじゃ不可能だよ』と言いたくないのです。そういう思いを込めた方針です。

開発言語

いやあ、JavaScriptで書こうと思ったんですけど、TypeScriptになる可能性が高いかなと思います。

軽くJSで書いた感じ、自前Objectを展開しまくるので、JSDocでどうにかするよりTSを採用したほうがいいかなという理由です。

他プロジェクトでTSを採用する予定も出てきたので、自分自身のリソース的にも悪くない選択じゃないかなと思います。TypeScript HandbookにToCを付けるスクリプトを書いたりして、結構いい環境も作れたと思います。

予定図

全体の構造は現在考え中なので次回あたりのブログで書こうかなと思うのですが、ざっくり言えばオブジェクト直下にオブジェクトやらfunctionやらおいていくという具合です。

表示のために使われる値などはPrivateで定義され、基本的に触れることができないようにします。

柔軟性を持つという点が一番の悩みどころです。イベントを提供したり、コールバック関数を持たせることを可能にすることなど検討していますが、いろいろ調べている限りまだ知識不足なところだなと感じていて、調査に時間がかかりそうです。

脳内にある仮案処理フロー

  1. Vinoが実体化される
  2. 引数から設定やパラメータ、storyScriptなどを展開する
  3. VinoEcosystemのイベントを生成する
  4. 生成終了のイベントが発火する
  5. Vinoが動くためのイベントを登録する
  6. innerBoxなどを描画する処理が走る
  7. 遷移イベントが発火する
  8. ユーザー提供のメソッドが実行される*1
  9. 遷移メソッドが実行される
  10. 以降7~9の繰り返し
解説

3~4はPromiseによって管理され、5~6が非同期に処理されます。

7については、ユーザーがEventLockをかけることで一旦処理を止めることが出来ます。これは4のあと、イベントリスナーを登録し終えるまでの間に遷移イベントが発火してしまうことを防ぐものです。(((ロジックは未定です、こんな具合にしたいなというものです。ProxyによってSet時の処理を置き換えちゃうとかでもいいんですかね。あともちろん、内部ではVinoのイベント登録待ちも用意します)))

7~8がどのような処理になるか未調査です。useCaptureフラグが有効になっていても、何らかの非同期処理が走ってしまうことで順序が異なってしまうことも考えられます。その場合はまた別途検討する必要があると思います。

あとはユーザーの挟み込む処理->Vinoの処理……という具合で動きます。基本的にイベントはsectionの切り替わりごとに発生します。若干心配しているのは、従来のシステムを完全に覆すような、破壊的な挙動をするゲームを制作することが担保できないことです。

案としては、Vinoの処理を行わないようにするAdvanceOptionを用意して、描画周りのAPIを触れやすいように作るというものを考えています。Event bubblingも軽く読んでみたんですが、第二の柱を維持するのが難しいかなという印象です。発火->UserMethod->VinoMethodの流れが固定になりますからね……。

まだまだ予定だらけで、MDN読みながらこんな案もいいななんて考えている最中なので、今後大きく変更したり、新しい仕組みを提案することもありえます。開発日記なので、こういう経緯も残していければいいかなと。

個人的な文章

難しいな。難しい。考えるの難しい。でも楽しい。

どんな仕組みでJSを活かしたら使いやすいかな？と思っても、他人のコードをたくさん読むこともなくて、ライブラリに触れた経験もあまりなくて、ほんとに独学で突き進んでいくしかないんじゃないかって思ってしまう。ようやくJS歴一年の記念パーティーを開催するというような時期がきた。不安に思うことも仕方がないんだ。そうだ。

まあ仕事ではないし、私の脳内にある夢地図をぶつけていけばいいと思うと少しは気が楽になる。まさしくこれは私の夢地図のような存在だ。私が知っているJavaScriptを活かす作りと、こんな感じでゲームが作れたらいいなと思う願いを詰め込んでいる。プリティーリズムを三日連続でずっと見ていたせいで、想いを心に閉じ込めておくことは出来なくなっているみたいだ。文章にしてしまいたくなる。

それでも、周囲の方々と違ってコードを書く以外に浮気ばかりしていまう人間なので、作業時間の確保というものが難しい。これは精神的なところとか、自己管理的なところなので、もう技術の面ですらない。多分、今一周年を迎えているのもこれが理由じゃないのかなあ。何か長く続くってことが自分にとって珍しいことなのだ。お恥ずかしいことに。

まあダラダラとこれ以上書き連ねていても、私が大好きな私の文章を量産するだけになってしまうので、このあたりで切り上げよう。

次回はJavaScriptにおけるイベント周りの勉強をしてから書こうと思う。それはそうと、流石にそろそろ働かないとまずいなと思うのでまたバイトを探すことにしなくては……。

読んでいただきありがとうございました。文章書くのは最高に楽しい！

*1:useCaptureをtrueにすることで先に実行されます

ここ一日くらいのみおん様へのメッセージ

プリティーリズム 雑記

プリティーリズム・オーロラドリームを見終えたメモ

プリティーリズム 感想

面白かった。第一作らしい素晴らしい作品だった。

全体を俯瞰するのはとても難しく、一周では厳しい気がするので要素のメモをしてみる。タグとはちょっと違うけど、全体の構成要素を知るのは大事なので。

  • 夢
  • 好きという想い
  • 仲間・ライバル
  • 家族
  • 普通

大まかに５つ挙げてみました。まあ間違いなく、ダントツで大きいのは『夢』ということだろうなと思います。

シナリオ全体を通して各キャラクターの夢を追う姿が描かれ、最終盤では主人公春音あいらは夢の対象としても描かれます。彼女は夢を追っていたというよりも、好きという想いで走り続けました。

それもすべて、仲間でありライバルであるみんながいてくれたから出来たことです。彼女たちにはそれぞれの家族がいて、境遇も大きく違いました。特に天宮りずむは、普通という時間を長い間失っています。

私がこの作品で強く感情を動かされたのは『普通なんかじゃなくていい！(49話)』というセリフでした。普通ではない時間を長く過ごしてきた結論は、普通じゃなくても、もう失った時間が戻らなくても、今からなりたい姿になればいいというものでした。

作品全体を通して、こうなりたい、こうなってほしいという純粋な気持ちこそが、何よりも強いんだというメッセージが描きたかったのかなと考えています。

あとは人間のいいところも悪いところもはっきりと描いていたのがすごいなと驚きました。あいらがりずむの闇にぶつかるシーンで、突き放すような、冷たい心を感じるような瞬間が描かれていてよかったと思います。そんな闇を含めて人間らしいと言えるんだろうなと感じました。

他にも生い立ちもまっさらだった久里須かなめですら、オーロラライジングを目指して心を捨てることが出来なかったのが印象的でした。

書いていて思いましたが、『人間』というのも要素に追加しても良かったかもしれませんね。すごく人間を描いた作品でした。

――いや。若干文句があってですね、なんでこの系譜を引いているはずのキラッとプリ☆チャンは炭酸が抜けたコーラみたいな味してるんだ。いやおかしいだろ。おかしいよ。既に30話やってるんだぞ。テンポが悪いとかそういう問題じゃないだろ。何も中身がないじゃねえか。『動画サイト』やら『自分発信』やら、コーディネートという要素をどれだけ活かした？　今のシナリオじゃ形式的に配信して、形式的にライブして、形式的にコーディネート手に入れてるだけでしょう。ここからどうなるんだ……？

とまあ文句を連ねても仕方ないんだけど、正直プリティーシリーズ第一作を見たあとだとシリーズの名が可愛そうだと思うレベルなんだよな。ぜひいいシナリオを見せてくれ。どうかお願いします。