#FJMK blog

citrus+というバンドをやってます。 http://citrusplus.jp 平日昼間はインターネットの会社@紀尾井町でエンジニアやってます。

MacのSayコマンドを使ってPPAPを演奏してみた

f:id:sfjmk:20170903185522j:plain

この記事は macOS Advent Calendar 2016 - Qiita 8日目の記事です。

みなさん、MacのSayコマンド、使ってますか? 使い道がいまいち謎な機能ですが、最近Sayコマンドを使った演奏動画を撮ったところ、このように記事に取り上げていただきました。

カッコいい!「MacのSayコマンドを使ってPPAPを演奏してみた」動画が凄い | 男子ハック

カッコいい!「MacのSayコマンドを使ってPPAPを演奏してみた」動画が凄い | 男子ハック

PPAP をMac (ターミナル ) リミックス

PPAPMac (ターミナル ) リミックス

今回の演奏を通してSayコマンドの可能性を感じたので、作ったプロセスを公開してみます。

完成した動画はこちら。

Sayコマンドとは

Sayコマンドは、Macに標準でついている機能で、ターミナル等から

$ say 'PPAP'

のように打つと、

このように喋ります。

これだけならまだ分かるのですが、この機能、無駄に無駄に10種類も言葉があります。

詳しくはこちらをご覧ください。

Macのsayコマンドの使い方 - Qiita

Macのsayコマンドの使い方 - Qiita

なんでこんなにバリエーションがあるのかイマイチ謎ですが謎ですが、、、

とりあえず楽器にしちゃえばいい

ということで、MacのSayコマンドを楽器にして演奏してみました。

メンバー

最近よく一緒にスタジオにいってる以下のメンバーで一緒に演奏しました。

Mac Bob (Facebook) フリーランスエンジニア(楽器未経験!)

Drums Junpei Mori (Facebook) ヒカリエの営業マン

Keyboard Sotaro Fujimaki (自分) (Facebook, Twitter) 紀尾井町のエンジニア

最近一緒に演奏した動画を上げてるのでよかったら見てみてください↓

準備

この準備の部分が一番重要です。 Say Commandを使って演奏することが決まったのはいいものの、毎回律儀に

$say -v say -v Fred 'PPAP' -r 150

とターミナル上で打っていては当然演奏が間に合いません。 クリップボードを使ったりhistoryからコマンドを拾って打っても安定した演奏をするので難しかったです。

が、こんな時に役立つのがalias機能です。 こんなzshrcにこんな記述をして、sayコマンドにaliasを貼ってみました。

say_message () {
    if [ -z $2 ]; then
        speed=150
    else
        speed=$2
    fi

    echo "say -v Fred '$1' -r ${speed}"
    say -v Fred $1 -r ${speed}&
}

alias 0="say_message 'P P A P'"
alias 1="say_message 'I have a pen.'"
alias 2="say_message 'I have an apple'"
alias 3="say_message 'Unn'"
alias 4="say_message 'Apple pen'"

alias 5="say_message 'I have a pen.'"
alias 6="say_message 'I have pineapple'"
alias 7="say_message 'Unn'"
alias 8="say_message 'Pineapple pen'"

alias 9="say_message 'Apple pen'"
alias q="say_message 'Pineapple pen'"
alias w="say_message 'Unn'"
alias e="say_message 'Pen pinapple apple pen' 200"
alias r="say_message 'Pen pinapple apple pen' 100"

alias a="say_message 'Pen'"
alias s="say_message 'Pai napple Pen'"
alias d="say_message 'Apple Pen'"
alias f="say_message 'Pen'"

alias z="say_message 'Newton discovered the law when he saw an apple fall from a tree.'"
alias x="say_message 'PINEAPPLE CUTTER AND PINEAPPLE CUTTER DEVICE'"
alias c="say_message 'The pai napple is a tropical American plant bearing a large fleshy edible fruit with a terminal tuft of stiff leaves'"
alias v="say_message 'The apple is the pomaceous fruit of the apple tree, species Malus domestica in the rose family.It is one of the most cultivated tree fruits, and the most widely known of the many members of genus Malus that are used by humans.'"

これをセットしておくと、キーボード1文字打ってenterを押すだけで、Fredに任意の言葉を喋らせることができます。 (say_massege内のechoがなくても喋ってくはくれますが、演出上コマンドが出てたほうが映像映えするのでechoさせました)

また、

say -v Fred $1 -r ${speed}&

このように最後に&をつけてバックグラウンド実行させることで、コマンド連打も可能です。(これをつけないと、喋り終わるまで次のコマンドを打てません)

声は10種類ある中でも、Fredのシブさが気に入ったのでFredをチョイスしました。

Macの奏法問題が解決したので、あとは良い感じのリフを考えて良い感じの演奏をするだけです。

演奏渋い声に合わせて大人っぽいアレンジがいいかなーと思ったので、まずピアノとMacでざっくりとしたデモを作りました。

こんな感じ

これで事前準備は完了です。

スタジオへ

そして、メンバーとスタジオへ行って演奏と撮影をします。

1度目のスタジオ

使ったスタジオはサウンドスタジオノアです。バンドマンには定番ですね。 スタジオ自体は2~3時間とってたものの、他の曲を録ったりもしてたので、PPAPに関しては1時間くらい使って練習&撮影。 デモを元に、演奏しながらアレンジを作り込んでいきました。

まあ、それっぽくはなりましたが、「もっといけるよね」感があったので、もう一回スタジオをとって撮り直すことにしました。

ちなみに1回目はこんな感じ

2度目のスタジオ

2度目も同じくノアを利用。

最近色々動画を撮ってたカット割りがないと とはいいつつも、そんなに良いカメラを持ってるわけではないので、 こんな風に各自のiPhone/iPod Touchをマイクスタンドにしてみました。 マイクスタンドは自由自在に位置を調整できますし、iPhoneなら画質もそれなりですし、結構使えると思うので今度スタジオに入る時は是非試してみてください。

そして再度撮影。 二回目はキメの部分をいくつか用意したり、Keyboardのソロのときには長文を喋らせる(超暇な人は文章の内容調べてみてください笑)等、色々と手を加えてみました。

今度は結構良い感じになったと思います。

編集作業

動画は撮れたのであとは編集するだけです。 iMovieはどうやら2トラックしか編集できないようなので、Junpei moriが気合で編集してましたw (Final Cutを使えば複数トラックの映像も簡単に編集できるっぽいですがw)

最初にこんな感じでテキストベースでざっくりタイムラインを作っておくとイメージの共有がしやすいです。

最初にボブのシーン
0:00 全体
0:08 ピアノ
0:13 (イントロ)全体
0:29 (ドラムだけ) ボブ
0:33 (1ループ目開始) 全体
-- ボブをところどころはさんでいく
0:51 (2ループ目開始) ピアノ
0:57 (Un*3+Apple Pen)ボブ
1:01 全体
1:10 (3ループ目開始)
1:28 (ドラムキメ開始) ピアノ
1:30 全体
-- 適当に割る
1:44 (キメラスト&ピアノソロ開始) ピアノ
1:50 (セリフ開始) ボブ
1:50 全体
-- 適当に割る
2:20 ソロラスト ピアノとボブ交互
2:22(ラストループ)  全体 

いきなり演奏動画に入ってもよくわからない思うので、Sayコマンドの意味が分かるような描写も最初に軽く入れてみました。

公開

編集も無事終わったので公開。

シェアしてくださった皆さんありがとうございました。 というわけで、MacのSayコマンド、地味に演奏に使えそうなので、皆さんも使ってみてはいかがでしょうか!

YouTubeチャンネル作ってみました。最近の演奏動画色々載せてます。 色々と面白い音楽作っていこうと思ってるので、よかったらチャンネル登録お願いします!

Herokuでmasterではないブランチの中身をデプロイする方法

Herokuの使い方で少しハマったのでメモ。

my-branchというブランチの中身をHerokuにpushしたいとする。

普通にremoteのmasterブランチにpushする感覚で

$ git push heroku master

したところ、反映されなかった。(masterが反映される)

$ git push heroku my-branch:master

すると、my-branchの中身が反映されるっぽい。

Macでsedコマンドが思うように動かなくてハマった

というメモ。

とあるディレクトリ以下の.gitディレクトリを除いた全ファイル内の
stringA
という文字列を
stringB
という文字列に置換したい場合、
Linuxだと

$grep -lr stringA * | grep -v '.git' | xargs sed -i 's/stringA/stringB/g'

のようにすれば置換できるはずだが、Mac上で打ったら

$ grep -lr stringA * | grep -v '.git' | xargs sed -i 's/stringA/stringB/g'
sed: 1: "testfile": undefined label 'estfile'

こんな風にエラーが出てうまくいかなかった。

しばらくハマったが、

$grep -lr stringA * | grep -v '.git' | xargs sed -i "" 's/stringA/stringB/g'

このように -i の後に “” を入れるとちゃんと動作した。

Linuxコマンド集 - 【 sed 】 文字列の置換,行の削除を行う:ITpro

LINE Notifyでコードから通知してみた

f:id:sfjmk:20170903211709p:plain 以前からLINEではMessaging APIが提供されてましたが、最近また新たにLINE Notifyとかいうのが出たみたいです。
【LINE】chatbotの開発・普及に向けて新たな展開を発表、新たなMessaging APIを公開し、開発者への正式提供を開始 | LINE Corporation | ニュース

LINE、外部との通知連携サービス「LINE Notify」発表 GitHub、IFTTT、Mackerelと連携 - ITmedia ニュース

Messaging APIが出た時も一通り触ってみたりして、その時は結構使うの(というか使うまでの準備が)面倒だなーという印象があったのですが、今回は簡単に使えるようです。
LINEのAPIはツール用途というかあくまでビジネス用途がメインのイメージがあったのですが、いきなりハッカブルなものを出してきて驚きました。

面白そうなのでちょっといじってみます。

続きを読む

YouTubeをラジオ化するChrome Extensionを作りました

f:id:sfjmk:20170903205756p:plain YouTubeをラジオ化するChrome Extension(拡張機能) 「Listen Tube」 を作ってみたので、その流れを書こうと思います。



こんな風にYouTubeで動画を表示させずに音だけを流せるようになります。
f:id:sfjmk:20170903205737p:plain






公開したChrome Extensionはこちら。

Listen Tube - Chrome ウェブストア

作業用BGMを聴くためにYouTubeを開いたのに、気がついたら関係ない動画を観ちゃってる問題

作業中にBGMを聴きたい時はYouTubeをよく利用する方は結構多いと思います。
簡単に曲が探せますし、勝手に次の曲が流れてくれますし便利ですよね。

ただ、使う上で一個問題が…
それは、

_人人人人人人人人人人_
> 気が散ってしまう <
 ̄YYYYYYYYY

ということ。

BGMを探しにYouTubeを開いたつもりが、ちょっと気が緩んでプロモーションビデオやバラエティ番組の動画を開いてそのまま鑑賞してしまい、気がついたら◯時間経っていたという経験があるのは僕だけじゃないはずです。

あと、これは気が散るとは別の話ですが、BGMを聴くつもりでも、動画が大きく表示されてしまうので、会社で開くのは若干憚られるという場合もあるかもしれません。

動画を見られない(=音だけ聞こえる)YouTube、欲しいですよね。

調べてみた所、
SoundYouNeed.com - Music search engine & player
こんなサービスがあったので、しばらく使っていましたが、連続再生機能が微妙だったり、ちょいちょい挙動がおかしくなるので、自分で作る必要があると感じました。

最初はYoutubeAPI使ってWEBサービス的な感じにしようと思いましたが、APIリクエスト回数制限が結構厳し目で、作った所であまりスケールしなさそうだったので、本家YouTubeのインターフェース自体をいじるChrome Extensionを作ることにしました。
(YouTubeAPIの上限リクエスト数って申請すれば簡単に緩めてもらえるんでしょうかね? ご存知の方いたら教えてください)

Chrome Extensionの作り方

今回、Chrome Extensionを作ったのは初めてですが、かなり簡単に作ることができました。

今回の記事では細かくは説明しませんが、作り方とかは以下のページが參考になると思います。

公式はこの辺

ブログとかだとこの辺

やることは単純で、今回くらい簡単なExtensionでしたら、

  • manifest.jsonという名前の設定ファイル (Chrome Extension説明だったり設定を記述します)
  • イコン画像のファイル
  • 実装したcssファイル
  • 実装したjsファイル

を用意して、デベロッパー登録(US$5.00が必要)して、Chrome ウェブストアにアップロードすればもう公開が完了します。
Chrome ウェブストアで公開せず自分だけが使う場合はにはデベロッパー登録する必要すらありません。

作ってみた

というわけで早速Chrome Extensionを作っていきます。
まず、manifest.jsonファイルを用意します。

{
  "manifest_version": 2,
  "name": "Listen Tube",
  "version": "0.1.1",
  "description": "YouTubeをラジオ化する(=動画を表示させず音だけ流す)Chrome Extensionです。詳しくはこちら → http://fjmk.jp/blog/839",
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "content_scripts": [
    {
      "css": ["style.css"],
      "js": ["main.js"],
      "matches": ["https://*.youtube.com/*"]
    }
  ]
}

設定・説明や読み込みファイルを記述するだけです。
content_scriptsのmatchesを指定することで、youtube内でのみ動作するようになっています。

ここからCSSJavaScriptを書いていくわけですが、始めに作る上で最低限のものしか作らないというルールを決めました。

意識したのは↓この辺です。

意識したこと

対象ページを絞る

あくまでYouTubeをBGMプレイヤーとして使うというユースケースを想定しています。
僕の場合、BGMを探すときはほとんど 検索→検索一覧→動画ページ という動線なので、通らないページ(チェンネルページとか)はそのままで問題ありません。埋込み機能にも対応しないことにしました。

デザイン面は多少妥協する

今回は元のYouTubeマークアップされているid,classを利用して見た目をいじるので、挙動がYouTube側のマークアップに依存してしてしまいます。
最初はミュージックプレイヤーっぽい見た目にしようかなとか思ってましたが、関係するclassが増えてしまうと保守性が著しく下がるので、あくまで気が散る要因を除外できれば良しとしました。

とはいいつつも、まあレイアウトがガタガタになってはテンションが下がるので、そのへんはバランスを考えつつという感じで。

作業の流れ

では何が我々の集中力を削いでいるんでしょう。
上でも書きましたが、自分がBGMを探す際は、

トップページを開く

検索ボックスにキーワード入力して検索

検索結果一覧で観たい動画(聴きたいBGM)を選ぶ

動画ページで動画を再生する

という順序の場合が殆どなので、上から順を追って対処していきます。
また、この時点で、デベロッパーモードでExtensionを読みこみ、以降ソースに変更がある度にリロードをして動作確認をしています。

CSSを幾つかに分けて書いていますが、ファイルとしては1つです。
ソースはGitHubに上げてあります→ sfujimaki/ListenTube

トップページ

まず、トップページの「おすすめ」エリア。

f:id:sfjmk:20170903205649p:plain

BGMを探すためにYouTubeを開いたのに、楽しげな動画を沢山出してきて、我々の集中力を削ごうとしてきます。 ここで動画をポチったら最期。そのまま数時間を失ってしまいます。

ということで、

消します。

#page.home #header, #page.home #content {
    display: none;
}

f:id:sfjmk:20170903205447p:plain これですっきりしました。気を散らさずに検索アクションに入ることができそうです。

検索結果一覧ページ

f:id:sfjmk:20170903205438p:plain

観たい動画を選ぶページですので、ここは消すわけにはいきません。
正直画像を小さくしたりしたいところではありますが…拘るとキリがないので、このままでよしとします。

動画ページ

f:id:sfjmk:20170903205544p:plain 問題はこのページです。気が散る要素で満ち溢れています。

関連動画

まず、問題はこのサイドバーです。
f:id:sfjmk:20170903205443p:plain トップページと同じく、楽しげな関連動画を表示して、我々の回遊率を高めようとしてきます。
無意識のうちに目に飛び込んでくるので、気を許すといつのまにか動画を楽しんでいる自分がいます。
削除…しようかと思いましたが、一応次のBGM選ぶときにあったほうがいい気がしたので、あまり目につかないページの下に追いやります。

/* メインカラム幅を100%にして中央寄せ*/
#page.watch .watch-main-col {
    width:100%;
    float: none;
}

/* サイドバー */
#page.watch .watch-sidebar {
    margin: 0 auto;
    top: 10px;
}

このようにCSSを当ててあげて、1カラムレイアウトにします。

f:id:sfjmk:20170903205702p:plain

うん。気が散りづらくなった気がします。

コメント

f:id:sfjmk:20170903205715p:plain

コメントもBGMを聴く上では必要ありませんね。 気が散るというほどのものでもないかもしれませんが、まあどちらかといえば気が散る要因になるので消しましょう。

/* コメント部分を隠す */
#page.watch #watch-discussion {
    display: none;
}

f:id:sfjmk:20170903205432p:plain

動画説明

f:id:sfjmk:20170903205616p:plain

動画説明は…まあいいか。そのまま残しましょう。

f:id:sfjmk:20170903205702p:plain

これでだいぶすっきりしました。

動画プレイヤー部分

最後に動画プレイヤー部分に手を加えます。

f:id:sfjmk:20170903205644p:plain

まず最初にCSSを貼っちゃいます。

/* プレイヤーの高さを設定 */
#page.watch .player-height {
    height: 150px;
}

/* 広告表示エリアの高さを設定 */
#page.watch .ad-container-single-media-element-annotations {
    height: 150px !important;
}

/* ビデオのシークバー&ボタン群を常に表示させる */
#page.watch .ytp-chrome-bottom {
    opacity: 1;
}

/* ビデオの中身を消す */
#page.watch .video-stream {
   display: none;
}

やってることはコメントに書いてある通りです。要するにプレイヤーの面積を小さくした上で、動画が表示されないようにしています。
プレイヤーを小さくしただけだと、広告動画が出た時に広告スキップボタンが押せなくなってしまうので、広告表示エリアも高さを合わせます。
(そういえば、広告ブロックするExtensionとかもあるらしいですよ。)

これでほぼ出来上がりました。
f:id:sfjmk:20170903205453p:plain

ウィンドウ幅を変えても崩れなさそうです。
f:id:sfjmk:20170903205558p:plain

サムネイルの挿入

ただ、このままではサムネイルが表示されません。
今回は最低限の物だけを作るポリシーで進めてきましたが、真っ黒のプレイヤーではちょっと寂しいので、サムネイルを表示する処理を書きます。

最初、「JSでog:imageを取得して表示すればいいかー」と思ってましたが、ここで罠が。
YouTube、動画間の遷移でPjax的なことをしているので、動画ページ内で別の動画をクリックして遷移した場合、Chrome ExtensionのJSを再読込してくれません。
なので、JSで普通にog:imageをサムネイル試してみたところ、別の動画に飛んでも最初に取得したサムネイルがそのまま残ってしまいました。
ソース上のog:image自体も書き換わらない模樣。

なので、何かしらの方法でページが遷移したことを検知して、画像URLを取得する必要があります。

今回はDOMの変更を検知できるMutationObserverを使って、head内の変化を検知し、変化があったら画像を取得&挿入することにしました。

MutationObserverの説明はこちら。
MutationObserver - Web API インターフェイス | MDN

タイトル等どこか一箇所の変更を検知するようにしたかったのですが、なんかうまくいかなかったので、ちょっと雑ですがhead全体をみてます。
ちょっと強引な気もしますが、プラグイン読み込んだりするのは面倒なので、あくまで素のJSぱぱっと書ける範囲に留めておきます。

遷移の度に何回か検知してしまうので厳密には「遷移を検知」とは違いますが…いいやり方ご存知でしたら教えてください。

画像はog:imageを取得しようと思ってましたが、どうやら変わらないようなので、開いている動画ページのURLから動画IDを抜き出して、画像URL(https://i.ytimg.com/vi/動画ID/hqdefault.jpg)を取得します。
遷移の度に、ビデオプレイヤー内にサムネイルを挿入します。

また、Pjaxではなく普通にページを開いた時も、DOM生成のタイミングのズレでうまくサムネイルが挿入されてくれなかったりするので、setIntervalを使って、サムネイルが取得できるまで取得をし続けるようにしました。

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

// サムネイル画像の作成
var image = new Image();
image.height = 100;
image.style.float = "left";

// サムネイルが取得できるまで取得し続ける
var timer = setInterval(function(){
    insertThumbnail();

    if (image.src) {
        clearInterval(timer);
    }
}, 1000);

// オブザーバインスタンスを作成
var observer = new MutationObserver(function(mutations) {
    insertThumbnail();
});

// 対象ノードとオブザーバの設定を渡す
observer.observe(document.querySelector('head'), {childList: true, subtree: true});

/**
 * 引数としてパラメータの名前を渡すと、URLのパラメータから値を取得して返す
 *
 * @param {string} name パラメータの名前
 */
function getParamValueByName(name) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i=0; i<vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == name) {
            return pair[1];
        }
    }
}

/**
 * サムネイル画像のURLを取得して挿入
 */
function insertThumbnail() {
    image.src = 'https://i.ytimg.com/vi/'+getParamValueByName('v')+'/hqdefault.jpg';
    var playerContainerElement = document.getElementById("movie_player");
    console.log(playerContainerElement);
    playerContainerElement.insertBefore(image, playerContainerElement.firstChild);
}

これでサムネイルが表示されます。
f:id:sfjmk:20170903205607p:plain バランス等ちょっと惜しい感が否めませんが、その辺を解消しようとしたらコードが膨らんできてしまったので、一旦これで完成とします。

(一応)ミックスリストでも崩れません。
f:id:sfjmk:20170903205728p:plain

アイコンの準備

最後に、Chrome ウェブストアに登録する際に必要なアイコンを用意します。

YouTubeカラーの背景に、適当に見つけてきたフリー素材のヘッドフォン画像を組み合わせました。
f:id:sfjmk:20170903205638p:plain

公開

あとは、
デベロッパー ダッシュボード - Chrome ウェブストア
こちらから公開するだけです。

公開の仕方は、この辺を參考にしてみてください。

基本的に、作業フォルダをzipに固めてアップロードして、幾つか情報を入力するだけで公開できます。 どれくらい情報を作り込むかにもよりますが、今回は最低限の項目だけ埋めたので、10分もかからず公開まで完了しました。(後からいつでも編集できるっぽいです)

今回作ったChrome Extensionはこちらで公開されてるので是非使ってみて下さい。

Listen Tube - Chrome ウェブストア

拡張機能管理ページに行かないとOn/Offできませんが、どうしても動画を観たい時はシークレットウィンドウで観るか別ブラウザで観るといいと思います。

あと、自分でも登録してみましたが、特にデータ吸い上げたりしてなくてもこんな表示がでちゃうんですね…これは紛らわしい気が。

f:id:sfjmk:20170903205707p:plain データ吸い上げたりしてないので、安心してください。

最後に

実際に書いたコードは大した量じゃありませんが、一応GitHubにも置いておきました。
sfujimaki/ListenTube

以上、いかがでしたでしょうか。
作ったばかりなので僕自身まだそんなに使っていませんが、今のところ結構便利な気がしているので、皆さん是非使ってみてください。
使っていて、不具合とか、「こうしたらいいんじゃない?」というのがあったら@macky256宛に是非お知らせください!

こういう、「実装は楽だけど結構便利」的なものはどんどんつくっていきたいですね。

映画『ほしのこえ』(新海誠) を観て

f:id:sfjmk:20170903182435j:plain

※一応ネタバレ注意

先日「君の名は」で初めて新海誠作品を鑑賞しました。 恥ずかしながら、新海誠作品を観るのはこれが初めてだったので、もっと色々観てみたいと思いTwitterで聞いてみたところ、「ほしのこえ」から観るのが良いのではとの声をいただきました。

 

Amazonビデオだと200円だったので、Amazonビデオで鑑賞。

「君の名は」の感想が上手く言語化できなくてちょっと悔しかったので(近々また観たい)、「ほしのこえ」の感想を書いてみたいと思います。

どんな作品かというと

携帯メールをモチーフに、宇宙と地上にわかたれた少年少女の超遠距離恋愛を描いたSFロボットアニメ作品 Other voices-遠い声- » 「ほしのこえ」

という感じなのですが、なかなかぶっとんだストーリーなので多分観てみないと分からないと思います笑

予告編はこちら

Amazonビデオ版では最初は短編「彼女と彼女の猫」が流れて、その後に「ほしのこえ」がはじまります。

新海さん自身が

「一人で作った」等の話題性からか思惑をはるかに超えるヒットとなりましたが、今となっては自分では見返すのも忍びないとても稚拙な作品です。 Other voices-遠い声- » 「ほしのこえ」

と述べている通り、画は「君の名は」等最近のアニメに比べると粗い感じはしますが、背景は今と比べても劣らない美しさで、このときから既に自身の世界観をを確立していたんだなぁーと驚かされます。

ストーリーはこちらにある通りです。 ほしのこえ - Wikipedia

2047年の話だけどガラケーを使っていたり、いきなり戦闘シーンになったり、戦闘シーンで制服を着ていたり、ストーリーについてはかなり突っ込みどころがあったのですが、所々での「切なさ」の描写が上手いなぁーと思いました。

自分的には以下の2つが切なさのハイライト。

ミカコが宇宙に旅立ってしまうところ。

主な登場人物は中学の同級生のミカコとノボルで、中学生の頃からお互い淡い恋心を抱いていたものの、高校進学を機に、ミカコは宇宙軍の選抜メンバー。ノボルは普通の高校生としての道を歩みます。 これにより、2人は立場的にも物理的にも離れてしまいました。切ない。 女の子のほうだけエリートコースを進んでいくという作品は少し珍しい気もしますが、これにより、ノボルの葛藤に感情移入しやすくなったように思います。 そして、物理的な距離が離れる度に、メールの通信にかかる時間も長くなり、お互いの時間軸にもズレが生じ、さらに2人の距離は離れてしまいます。 観てる側としては、このままどちらかの心が離れてしまうのではないかとハラハラしました。(ノボルの心は離れかけていそうな描写でしたね)

8光年ワープし、更に離れ離れになってしまうところ

その前にもワープによって1光年離れてしまうタイミングがあり、2人の時間軸も1年離れてしまっていましたが(メール送信に1年かかる)、 2度めのワープによって、地球と8光年離れてしまったことにより、2人は完全にバラバラになってしまいました。 1年の時間のズレならまだギリギリ相手の存在を意識できるような気もしますが、8年もズレてしまうと、相手はいなくなってしまった(≒死んでしまった)と近い感覚なのかなぁと。 その絶望感を考えると切なすぎます。

8年の月日を超えて最終的にノボルにそのメールは届きますが、ノボルの気持ちはその時までミカコに向いていたのか、作品中では明かされていなかったので、答えが非常に気になります。(携帯を持ち続けていたのが答えだったのかな)

「君の名は」でも感じましたが、新海タッチの美しい風景とポエム調で語りかける登場人物の少々クサいナレーションが切なさを加速させます。

そして最後に、何よりすごいのはこの作品を新海誠さんが一人で作り上げたということです。

25分のフルデジタルアニメーションの監督・脚本・演出・作画・美術・編集のほとんどを、新海誠監督が一人で行なった。制作環境はPower Mac G4 400MHz、使用されたソフトはAdobe Photoshop 5.0・Adobe After Effects 4.1・LightWave 6.5など。 ほしのこえ - Wikipedia

すごい… 最近知ったのですが、新海さんはサラリーマン(といっても全く関係ない所でもなさそうですが)やりながら初期のアニメーションを作っていたとのこと。 新海誠 - Wikipedia このバイタリティは今の自分に欠けているので、もっと頑張らないとなーと思いました。

色々書きましたが、なんていうか、「これを一人で作ったのか!」と感じるだけでも観る価値はあるような気がします。レビュー観ても賛否両論はあるようですが、この少し浮遊感のある切なさはこの人以外の作品だとなかなか感じたことがないひょうな気がします。

うーん、やっぱり感想が書きづらい。 他の新海作品も観て、もっとその世界観に触れたいと思います。

Eloquent / idiorm メモ

クエリービルダーとEloquent

Eloquentに惚れちゃう便利な機能 - Qiita Eloquent ORMやIdiormなるものがある | サラリーマンのすらすらIT日記

illuminate/database - 脳みそスワップアウト

SlimフレームワークでLaravel’s Eloquent ORMを用いたデータベーストランザクション処理 | るとるのITぶろぐ

お使いのフレームワークのお供に Illuminate - Qiita

PHPのORM「Idiorm」とActiveRecord「Paris」を使ってみた感じ - Qiita

クエリービルダーとEloquent

Eloquent:利用の開始 5.1 Laravel

LaravelのEloquent ORMは複合主キーに対応していなかった - 新人Webエンジニアの記録。

PHPのORM「Idiorm」とActiveRecord「Paris」を使ってみた感じ - Qiita

PHPでの開発におけるライブラリやツールの選択 - 俺 Pedia

PHPでの開発におけるライブラリやツールの選択 - 俺 Pedia illuminate/database - 脳みそスワップアウト

5分で作るPHPフレームワーク(技術調査、設計編) | WEB EGG

php軽量フレームワークslimでちょっとしたアプリケーションを作る - Qiita

illuminate/database “~5.1”

xsanisty/SlimStarter: Starter Application built on Slim Framework in MVC (and HMVC) environment

acoustep/slim-twig-eloquent: This is a very bare bones template for using the following Slim, Twig and Eloquent

kladd/slim-eloquent: The Slim PHP micro framework paired with Laravel’s Illuminate Database toolkit.

Laravelでプロジェクトを作成したらまずやることメモ - Qiita