【NuxtJS×RailsAPI】折角0からプログラミングを勉強したので、推しキャラの誕生日アプリを作ってみた。

自己紹介

Webエンジニアをしたり、マジシャンをしたり、オンライン家庭教師をしたり、イベントを企画したり、色々なことをしておりますyukiと申します。
今年の1月からプログラミングを学習し、DMMWEBCAMP入学を経てエンジニアとして勤務、約4ヶ月ほどが経過しました。

過去学習してきたことなどは、こちらの記事にまとめてありますので、良ければご覧ください。
【卒業生】DMMWEBCAMPに通おうか迷っている人に伝えたい事

成果物

NuxtJS/RailsAPI/AWS/Firebase
【Webアプリ】https://tokidosaya.com
【GitHub】https://github.com/yuki-snow1823/project-saya
コードはお世話になっているエンジニアの方にレビューをしていただき、現在リファクタリング中です。ご容赦くださいませ。

この記事を読んで得られるもの、わかること

【技術面】

• NuxtJS×RailsAPIのWebアプリ作成の時につまづいた部分と対応策の例
• TwitterAPI使用の申請をした話
• その他学びになったtips

【余談】

• プログラミング未経験から、推しの誕生日をお祝いするに至るまでの流れ
• 「発想とプログラミング」に関する自分のポエム

もし、読み進めてくださる方がいらしたら、よろしくお願いします。

その前に推しキャラと協力してくださった神の紹介

今回、自分の突拍子もないプロジェクトに賛同してくださった二人をご紹介します。
イラストレーターのKrarisとWebデザイナーのももりんごさんです。

お二人は素敵な絵を描いてくださったり、パーツのデザインを考えてくださったり、サイズを調整する案を出してくださったり、色彩のアドバイスをくださったり…とにかく全面的に協力してくださいました。

関係的には、Krarisは私の元バイト先の後輩で、ももりんごさんはDWCの先輩です。
改めて、お二人に感謝申し上げます。

推し：リトルバスターズEXより 朱鷺戸沙耶

　　　　
Illustration by Kraris

この金髪の子です。お誕生日おめでとう。（10/21）詳しいシナリオはここには書きませんが、ちょっと個人的に思うことには報われなさすぎるキャラクターなので、なんとか幸せになって欲しいなと思い、このアプリを作るに至りました。ちなみに、男の子は理樹君という主人公です。
是非、リトルバスターズとリトルバスターズEX、アニメやゲームで体験してみてください。

技術の話 - NuxtJS×RailsAPIのアプリ作成の時につまづいた部分と対応策の例

こちらでは作成の際にぶつかったエラーと対策に関して、TwitterAPI以外のものをまとめます。

[Rails]gem 'active_model_serializers'がインストールできない

jsonをrailsAPI側から返すにあたり、gem serializersを使用しようと思いました。しかし、一向にbundle installが通らず、以下のエラーが出ていました。

Could not find case_transform-0.2 in any of the sources
Run `bundle install` to install missing gems.

こちらの件に関しては、spring stopを実行したのちに、bundle installを再度実行で解決しました。

bundle install周りって結構エラーが起きがちですが、これまでの経験上パスの指定が間違っていることが多い印象です。which bundleして一旦削除するとかも手だと思います。

[Rails]ミス：クラスメソッド名とカラム名を同じにしてしまった

これはもう自分がアホとしか言いようがないのですが、Counterテーブルというテーブルを作成したのち、カラム名の指定をcountというものにしました。よくよく考えたらrubyには元々そんなメソッドがありました…。

counter_controller.rb

    counter = Counter.find(1)
    counter.count = counter.count + 1

こんなみるも無残なコードを書いてしまいましたが、無事に動きました。リファクタリングやより良い実装ができるように精進します。この件は対策とかはなく、命名を注意してくださいということをお伝えできればと思います。

[Nuxt]Vuetifyでrowやcolの指定が効かないと思ったら…

Vuetifyというライブラリでデザインをしていたのですが、どうしてもグリッドシステムが思うように適用されないことがありました。しばし悩んだのち調べてみたところ、こんな記事を見つけました。

（引用させていただいております。）

v-appはVeutifyを使うために必須の要素です。Vuetifyのコンポーネントは必ずv-app要素の内側に書く必要があります。v-appで囲まないでVuetifyのコンポーネントを使うと予期しない動作や表示になってしまいます。下記のようにVuetifyのコンポーネントをv-appで囲みます。

(　ω) ^ ^
案の定<v-app>で囲んでいないだけでした。しっかりとガイド読んでから使えよと戒めになりました。

TwitterAPI使用の申請、実装をした話

これが今回のプロジェクト1の衝撃だったのですが、「ハッシュタグのツイート収集」に関して私は公式から提供されているウィジェットを使えばいいやと思っていました。
ところが、調べてみると2018年にそのサポートは切れており、TwitterのDeveloperとして登録をして、自分でその機能を作らなければいけないことがわかりました。

ただ、どうしても実装したい機能だったので、１から調べて申請することにしました。

【参考にさせていただいた記事】
https://qiita.com/kngsym2018/items/2524d21455aac111cdee

ありがとうございました。Twitter側のUIは変わっていましたが、ほとんどこの通りに行いました。英語に関しては、急いでいたこともあったので、全部日本語で入力したのちにGoogle翻訳（最近の精度にびっくりしました。）、流石に変な部分を修正して申請しました。

３日くらいで通ったのですが趣味で使用すること（金銭が絡まない）と危険な行為を一切しないことを強調した文章にしたところ、自分の場合はスムーズに通ったような気がします。

技術の話は次で終わりですが、gem twitterを使ってハッシュタグツイートを収集する方法に関しては、また別途記事でまとめたいと思います！チュートリアルでも作りたいですね！

その他学びになったtips

ツイートする時にカード？みたいなのを出したい。

リンクをツイートする時とかにふわっと出てくるアレ、名前も知らなかったのですが実装に成功しました。
名前は、Twitter Cardというらしいです。NuxtのSPAモードでの実装はどうやるんだろう…と悩んでいたところ、こちらの素晴らしい記事に救っていただきました。

Nuxt(SPAモード) + FirebaseでTwitterシェア用にOGP画像の設定をしたい。

そして、こちらのサイトを使うとリアルタイムでチェックができます。

イラストの登場にふわっとアニメーションをつけたい

イラストがふわっと出ればいいなーと思っていたところ、友人がAnimate.cssなるものを教えてくれました。今回はガッツリコードを書いてアニメーションをつけるつもりもなかったので、CDNで導入してクラス名をつけるだけで、ふわっとしたアニメーションがつきました。感謝！

余談

ここからは、未経験からエンジニアになった自分が完全に自分が作りたいものを作るに至った考えやポエムをまとめたいと思います。自己満足なので、イラっとしない寛大な方だけお進みください。

プログラミング未経験から、推しの誕生日をお祝いするに至るまでの流れ（withWEBデザイナーさん、イラストレーターさん）

キャラクターの誕生日アプリを作りたい！と思ってから以下の順序で完成に至りました。

①キャラクターの誕生日とは、どんなことをするものなのか調べる

こちらの結論は、イラストを投稿したり、お祝いメッセージを書いたりすることでした。ですから、ハッシュタグをつけたツイートの収集＋投稿機能は必須で入れたいと思いました。

②イラストが必要なため、イラストレーターを探して依頼する

私は絵が描けませんし、可愛い沙耶と理樹君の絵が見たかったので、昔から仕事を依頼していたKrarisに依頼をしました。

③アイテムの配置を考えた時に、Krarisや自分よりも知見の人を探す必要があった

Krarisもアイテムの配置や色彩に知見はありましたが、本人とも話した結果、Webデザイナーとして活動している人からもアドバイスをもらおうという結論に至り、DWCの先輩であるももりんごさんに参加いただきました。

④ハッシュタグツイートの収集にTwitter Developerの申請が必要と知る

不慣れな英語で申請をし、英語のドキュメントを読んでgem twitterを駆使してなんとか実装しました
ここでも、一度エンジニアの先輩にお世話になりました。

⑤せっかくならフロントとバックを分けたいのでNuxtJSを引っ張り出す

これはもう何度も出していますが、こちらのチュートリアルのおかげです。
https://qiita.com/saongtx7/items/d97ef5aec393e704fd3f

全て、何か必要がある→行動する、勉強するというプロセスでした。今回の実装にあたり、何個も何個も勉強になった部分があるので、これからもアウトプットとして個人開発は行っていきたいなと思います。

「発想とプログラミング」に関する自分のポエム

自分の強みは発想力だと思っています。これまでも、あまり人が思いつかないことや、思いついてもめんどくさくてやらないことを、色々やってきた自負が少しだけあります。ただ、形にしたくても、どうしてもできなくて挫折した経験もあります。

今、プログラミングを学び始めて半年くらいが経ち、改めて「発想を形にする力」を貸してもらっていると感じています。それと同時に、プログラミングだけじゃ駄目だという思いが強くなっています。

デザイナーさんがいるからアプリの見た目が良くなるし、イラストレーターさんがいるから絵を通じて想いを伝えられるし、営業さんがいるから作ったものが売れるし、マネージャーさんやディレクターさんがいるから作ることに専念できるし…いろんな人がいろんな発想を使って頑張っているから、素敵なアプリやプロダクトができていると今回改めて勉強になりました。

本当に、周りの方には感謝するばかりです。ありがとうございます。

さいごに

リトルバスターズというゲームをやって、この朱鷺戸沙耶と主人公の理樹君ががたどった結末を見た時に、私は大きなショックを受けました。当然現実には存在しませんが「この二人に幸せになって欲しい」「流石にキャラクターの誕生日に向けたアプリを作る人は少ないのではないか→やってやろう！」という思いで完成に至りました。

作りたいものを形にできるって、ありがたいことだなと思います。

これからも好きなものを作っていこうと思います！
もし、プログラミングはできないけど…推しの誕生日はお祝いしたい！みたいな人がいらしたら、是非連絡ください。
作りたいものを形にしたい方も、応援したいなと思います。

そして、もしも、、、万が一、、、朱鷺戸沙耶と理樹君が好きでここまで読み切った猛者がいたとしたら…いつか沙耶アフターを作りましょう！！ご連絡待ってます！