「なんで忘れるかなぁ俺の格言。それならつくる！《企画編➁》」のはずが･･･

趣味の競馬で負けた時に作った勝負事の格言、これが全く活かされていないことを解決するために格言DBを構築して、スマホやPCから登録・検索、週末に向けて格言適用レースの自動配信と機能を考えたのが《企画編①》でした。
　　　　NOTE記事：なんで忘れるかなぁ俺の格言。それならつくる！《企画編①》
最近は便利な開発環境やアプリがいろいろあって、組み合わせればWEBアプリが簡単にできてしまう、なんてことは全くもってございませんでした。無料サンプルコードはいろいろありますが、ちょっと直すと動かなくなるんです。原因を調べようにもいろいろ出てきてどれが正解か判断つかないんです。イライラしながらも粘り強くソースコードと格闘しているときにそれは起こりました･･･。

15時34分の悲劇

もう15時過ぎてるやん、はよせなアルゼンチン共和国杯（東京芝2500m、ＧⅡ）間に合わへん。東スポを開いて馬選びに入ります。･･･（時間経過）･･･よっしゃ決めた、⑦ブレークアップと⑯ヒートオンビートの2頭軸三連複で相手は④コトブキテティス、⑤テーオーロイヤル、⑪ラストドラフト、⑭アフリカンゴールド、⑰ハーツイストワールや、はよ入力せんとあと2分で締め切りや頑張れ俺！　はよ画面変われ、はよせいはよせい、最後の送信、どや、・・・は？締め切り？しゃぁないしゃぁない。少し嫌な予感はしたものの再びソースコードと格闘です。･･･（さらに時間経過）･･･もうこんな時間か、せや、結果はどうやったやろ？　JRAのホームページで結果を確認します。
　「マジかぁああああーつ、嘘やろー、やめてくれやぁああー！」
7、17、16の順で決着し、三連複7-16-17は￥14,590の万馬券でございました。立ち直れませんです、はい。

ということで

やり場のない怒りを処理するアプリを作ることにしました。私もいい大人ですから。たまたまCODEPENでサンプルをいろいろ見ていたら面白いものがありました。

See the Pen Drawing with text by Tim Holman (@tholman) on CodePen.

オリジナル作品は純粋に綺麗なアニメーション作品です。とても短いソースコードなのですが、マウスで文字の帯を重ねていく芸術作品のような仕上がりになります。ただ、1点残念なことがあり、それも含めて以下の通り改造しました。
思います。
★表示される文章がjavascriptに固定で直書きされており、CODEPEN上ではよいがアプリにすると直せない。
　→　レイアウトを変更して画面上にテキストボックスを追加し、入力内容を描けるようにした（はずだったのですが…）。

★使い道を怒りの解消とした。罵詈雑言を入力して描いていると魂の叫びを表現した芸術作品にも見えてきて気が収まります。

【使ったもの】
・HTML、CSS、Javascript
・CODEPEN、Vue.js
・compass/css3
・Anime.js

できあがりはこんな感じです

ソースコード

See the Pen 芸術は爆発だ！ by Xedge748hagi (@Xedge748hagi) on CodePen.

Netlifyで公開中

解説

実は不具合が残っています。テキストボックスの入力値がJavascriptに伝わらず、初期値で私が登録した文章しか使えません。テキストボックスの入力値は画面上に出せましたので、不具合があるとすると、本来のJavacsriptにVue.jsで追加を加えたことが原因で、Vue.jsからJavacsriptに変数（入力値）を渡せなくなっていることかと思います。