最近の夜なべAngular活動まとめ (2)

前エントリでは経緯として分かりづらい話を並べてしまったけど、つまりまあ、すぐに開発に取り掛かれて一発で公開できる環境ができたので、そのためになんか都度の興味課題をwebアプリとしてプロトタイピングしていこうというモチベーションが生まれたわけです。

で、最近は夏の季節ということもあり、夜のほうが涼しくて捗るので、なにかのきっかけでモチベーション湧いたときに一晩で作れる範疇のものを一晩で考えながら作って朝方に公開して、後で評判とか見ながら修正入れていくようなことをAngularの勉強としてやってました。

以下、それぞれどんなモチベーションで何を課題にして何を知ったかをまとめます。

あたしオートマトンナビゲーター

経緯：

ローグライクなゲーム進行と同時にノベルを自動生成したら面白そうという話題をTLで見かけて

文化的課題：

• ケータイ小説をまともに読んだことが無かったけれど、あれだけ流行ったのだから文化的価値があるという前提で今一度向き合ってみる

技術的課題：

• ローグライク作るのは置いといて、まずは小説の自動生成したい
• MongoDBの利用を主体とするものを作ってみたい
• スクレイピングしてDBに格納

得られた文化的知見：

• ケータイ小説への理解

得られた技術的知見：

• オートマトンへの理解
• データのノード化
• 音声読み上げ

※今見たらDBの処理が以前より遅くてだいぶ使いものにならない感じがした

タイトルコール

経緯：

TLで↑の画像を見かけて味わい深いなあと思ったので。

技術的課題：

• UI無しで全画面
• スマホ前提
• 一機能だけで完結させる。ルーティングからして「/:タイトルにしたい文言」という拡張性の無い割り切った設計
• Angular-fullstack バージョン2になったし使ってみよう
• 著作権的にアレなので具体的に言及しないようにして、怒られたら消そう

得られた文化的知見：

• 昭和世代にとってこのジングルは死ぬまで心に残るだろうと再確認（現行版でも使ってるのかもしれないが）

得られた技術的知見：

• せっかくなので前回の音声読み上げを実装したら、読み上げない版が欲しいと言われてガッカリする
• 機能追加しないことが目標だったので、読み上げない機能を作るのではなく、IEのような読み上げができないブラウザを使えというソリューションを見出す
• スマホだとユーザーのクリックイベント時しか音が鳴らせないので、ジングルのローディングと読み上げ音声の再生タイミングの合わせ方がややこしいことになった

もし高校野球の女子マネージャーが米を1㌧買い付けたら

経緯：

TLでおにぎりとマネージャーと高校野球の政治的な是非について見かけた。あとおにぎりとかおにぎりとかおにぎりとかでうんざりした

文化的課題：

• トーナメントという選抜方式の確率的なイメージを体験的に理解する
• 20000個という統計的な量感への感覚的理解

技術的課題：

• クッキークリッカー的なリアルタイム進行制御、指数的インフレ感と、違う尺度から捉える世界解釈
• おにぎりの個数や野球部員数などから統計的なモデルの理解と作成
• 実績システムの実装
• これまでに比べて多い情報量のレイアウト

得られた文化的知見：

• 米１俵＝60kg
• 地区大会から甲子園優勝までの道のりの果てしなさ（12,3連勝）
• 出場校は全国で4030校なので≒4096=2¹²とトーナメントのイメージ的にキリが良い
• タッチ読んだことなかったけど、冒頭から幼なじみ両家の中間地帯に家があって男女男という舞台構図がフランス映画みたい！と驚嘆した

得られた技術的知見：

• 以前から駅伝か高校野球のシムを作ってみたかったが、まともにそのエコシステムを考えれば考えるほど取材や研究が必要だし開発スケール的にもきつい。それを解決するのがおにぎりという勝手な尺度だった
• PC前提で作った2カラムの画面レイアウトだったが、ほとんどTwitter経由での口コミにより半数以上がスマホによるアクセスで、操作しづらい1カラムになってしまうのが想定外だった
• 当初おにぎりを一人3個食べる設定にしていたが、実際は5個も食べると知って変更したら全体のバランスがけっこう変わってしまい、最終的にまとまり感は出たが、粗さのある最初のほうが良かったような感じもした。やはり一晩で作ったものはその情熱の濃さを留めておくためにあまり手を入れてはいけないんだろうなと感じる
• けっこう反応も多かったので方向性の確認と共有をするために開発と同時にドキュメントを充実させていくスタイルに。readmeとchangelogをhtmlで書いてたがいい加減めんどいのでmd形式にして読み込んでGrunt周りも手を入れる
• 甲子園優勝というゴールが定められているためどうしてもそこに至るまでの難度調整に走ってしまった。そこそこ評判は良かったものの、結果から考えれば、世の中の課題のないところに勝手に自分が設定した課題を作り、それによって自分を含めて人々の時間をいたずらに拘束したということで、ああこれは良くないな、あんまり喜ばしくないゲーム的なものの根深さだなと感じた。そう言えるのも、Mount & Bladeを1300時間やった自分がそれについては後悔していないという狂人の病理の根深さに基づく実体験だから

文豪メッセンジャー

経緯：

東京ではここ一週間ほど急に涼しくなり唐突に夏が終わったかのように感じていて、そしていよいよ9月になった。夏は苦手だけど、でも何か失ってみて初めて知るような感慨も歳のせいか抱くようになってきた。そんなアンニュイな気分の中思い出したのは、夏休みの宿題の定番、読書感想文であり、ちょっと前にTLで見かけた走れメロスの考察がどうのという記事はともかく、そこで改めて走れメロスを読んでみたところ、語気の強い台詞とテンポにシビれた。

以前に作ったあたしオートマトンナビゲーターの知見により、ケータイ小説的な細かい区切りやテンポが生み出す、人間がリアルタイムに発言しているような体験の面白さを思い出し、そのへんを総合すると必然的にLINEになった。

文化的課題：

• 漫画はどんなに緻密に描かれた背景でも基本的にキャラクターがメインでさくさくと読み飛ばして理解が得られるカジュアルさが強い（記述の分量と読解速度が比例しないということで、読み飛ばしていても緻密な背景が無駄になるということではない）。小説を読むにあたって難儀するのは知らない文化の描写の理解にいちいち立ち止まってしまうことで、ひとまずそれを知らないものとしつつ、地の文と会話文を分ければ進行のテンポを妨げない理解感覚が得られるのではないか
• つまり同期的でスタックする読解から、非同期処理としての読解メソッドの実装（分からないものは飛ばして後から理解する）
• LINE文化への理解。手のひらの中のプライベートな対話感

技術的課題：

• 前回スマホでの閲覧者が半数以上という事実と、今回はスマホアプリがモデルということもあり、スマホ対応ではなく、スマホ前提のレイアウト作成。Mobile Angular UIを組み込んでみるが独特で難しい
• パターンマッチもろもろ。「」の中に「」が入ってたらどうすんの？あ、正規表現に再帰あるのか！ え、JSには無いのか…
• 青空文庫にスクレイピングしまくって大丈夫だろうか。怒られたら消そう
• 抽象的にメッセンジャーと言ってるが、LINEっぽさが重要なのでなるべくそのまま再現する方向性。怒られたら消そう

得られた文化的知見：

• デプロイ直後は@IDA_10さんとかが面白いって言ってくれたけど、まあまたいつものインテリサブカルアート界隈の変な意味での面白みだろうと思ってあんまり信用してなかった。自分が見てみたいと思ったものを書くだけだと、前提情報を理解している人や身内以外が見たら何これよく分からん的な反応が普通なので（このブログ自体がそうだ）。
• でも徐々に自分の全然知らない界隈で勝手に楽しまれている様子が上がってくるところを見て、にわかに信じがたいというか、やはりそこに太宰やLINEという、よく分かるものがあるというリーチ力のすごさを感じた。シャケとか伊能忠敬とかじゃなくて、LINEこそがメジャーなんだってつくづく思った。
• LINEは全然使ってなくて、でもLINE友達、略してライトモみたいな言い方とかあったらそのへんうまくタイトルに使おうと思ったけど、そもそもそんな言い方無さそうだった
• ふだん肯定的な意見を聞きなれてないので、あまりに肯定的な評価が多いと不安になるんだなって思った。肯定95%、使い方よく分からない4%くらいな状況（※体感）で、こんなの情緒が無いとか、こいつは何も分かってない！とか、作品への冒涜だ、という意見があるのを目にすると全然DISられてる気がしなくて、うんうんそうだよね！と安心するくらいだった（心理的バランス）
• 動機的にはLINE風に見てみたいというくらいの気持ちだったけど、読みやすい！と言ってるひともけっこう居て、実際に作品によっては思った以上に有効だなと感じた。ふだん活字を読まないので通常の読み方とは比較できないけど、映画化作品の多い林芙美子の小説なんかは、切り取られた会話部分でクローズアップされた役者の演技を思い浮かべ、地の文で昭和の背景が見えてくるようで、すごく映画的なレイアウトに近いと思えたのが発見だった。文学のモンタージュだ。

得られた技術的知見：

• メジャーな題材を用いたのでまあバズったらバズるだろうなと思ってたけど、無料プランの1Dynoで運用してたherokuがクラッシュしまくった。酷使してごめんなさい
• コンソールから再起動かければすぐに動くけど、数分でまたすぐに落ちた。放っといたら10～20分ほどで自動再起動するので無理に手動で再起動しないほうが良いっぽい
• 途中から10分動いて10分落ちての繰り返しのような感じだった
• 特に最適化とか考えてなくて、まあ基本的にフロント側の処理なので大丈夫だろうと思っていたら、単純なトラフィック量の多さが無料プランでは捌ききれないようだった
• エラーページはデフォルトでherokuが用意したページがiframeでインクルードされて表示されるけど、これが英語なので普通のユーザーには分かりづらい。アプリ設定でこのURLを変更できるので、DropboxのPublicフォルダに日本語のエラーページ作ってそこを指定するようにした
• あまりに落ちすぎるとGoogle検索からハブられると知った（タイトル名でGoogle検索したら最初のうちはちゃんと1番目に出てたが、これを書いてる時点で確認したら100位手前くらいだった）
• Angularはレンダリング前だと何も情報が無いページになってしまい、クローラやOpen Graphに対してすこぶる相性がわるい。検索結果に表示されてもタイトル以外はサムネイルもディスクリプションも出ない（というか静的なdescriptionも記述してなかったせい）のでそれだけで怪しいサイト感が溢れる。余裕があればそのへんも意識するようにしたい
• noteをAngularJSで構築した話
• “note”がAngularJSでどうやってSEO, Open Graphの対応をしているか｜和田 晃一良｜note
• ランダムに表示するスタンプ画像、マネタイズを考えるならあそこをアフィリエイトにするんだろうなと安直に思ったけど、面白みが減るのでやめた（というかアフィリエイトの知見が無いので）。なのでまともに動くサーバー代は出せないのでLINE社の人が見てたらマネーぶっこんでほしい
• 前回のゲーム的な消費の根深さに比べると、既に価値のある文学作品の鑑賞に対して違う角度でのアプローチを追加できたというのは、ああこれは何か世に資源を増やしたということかなと感じられたのが良かった。もちろんそんな読み方は邪道という意見もあるだろうけど、そもそも活字読まない自分も含めて読む機会すら無かったものを読むことになったのであればめでたいんじゃないかと

まとめ

• 全部Angular。なんでもかんでもAngular
• バラバラに見えるかもしれないけど自分的にはそれぞれ前回の反省を踏まえて繋がってる
• だいたいツイッター眺めて見た話題からそれに対する勝手な解釈としてなんかアプリ作ってツイッターに放流してその反応をツイッターで見てアプリにフィードバックさせていく、直接的な人の交わりを避けた疎結合なツイッタータイムライン開発サイクル
• もともとレスポンシブだからスマホでも可だったけど、徐々にスマホ前提へ意識をシフト。タブレットくらいならいいけど、iPhoneの横幅320pxは解像度的にとにかくきつい。そのへんのレイアウトやページ遷移のノウハウが無く、スマホアプリ作ったことがないのでいい加減なんとかしたい

結論

Angular-fullstackとherokuのいろいろ何も考えなくていい甘やかし感がパないので夏の夜におすすめ