この記事は、リンク情報システムが主催するイベント「2021新春アドベントカレンダー Tech Connect」のリレー記事です。
「2021新春アドベントカレンダー Tech Connect」は engineer.hanzomon のグループメンバによってリレーされます。
（リンク情報システムのFaceBookはこちらから）
3日目となります本日は「【Vue(Vuetify)】1月は日本全国酒飲み音頭ジェネレーターを作ったので酒が飲めるぞ」という記事を@usankusaiが投稿いたします。
##成果物
こんなの作ってみました。
https://sakenomi-5733e.web.app/
##はじめに
あけましておめでとうございます！
2021新春アドベントカレンダー Tech Connectの3日目を担当します@usankusaiです。
突然ですが、皆さんは「日本全国酒飲み音頭」という曲をご存じでしょうか。
ご存じの方には言わずもがなとは思いますが、何かしらの理由をつけてお酒を飲めるぞ、という飲兵衛なら誰もが共感するであろう歌詞を耳に残る音頭に乗せた昭和の名曲の一つです。
この曲は1974年にバンド「バラクーダ」さんによってリリースされ大ヒットを記録しました。
我が家は年始に親戚一同で集まることが多いのですが、酔っ払った祖父が赤ら顔で両手を叩きつつこの曲を歌うため、私にとってはこの歌を聞くのがこの時期の風物詩となっています。
…が、今年はご存じのとおりコロナ禍ということもあり、年始の親戚の集まりは見送りになることが決まりました。
年始の風物詩が見送りになったところに今回のアドカレのお誘いを受け、居ても立っても居られずジェネレーターの開発を決めました。
##要件
今回のシステムでは、原曲である日本全国酒飲み音頭の歌詞を元に、それっぽい歌詞を作り出すジェネレーターのwebサービスを目指しました。
原曲の歌詞は下記などをご参照ください。
日本全国酒飲み音頭(うたまっぷ.com)
歌詞を分析すると１番・２番はそれぞれ
１番：（１～１２月）は（イベント※）で酒が飲めるぞ
２番：（都道府県※）は（郷土料理※）で酒が飲める（方言）
※の部分は例外あり。
といった構成になっています。
当初は上記を理想値として実装をしたかったのですが、最終的には
１番：（１～１２月）は（イベント※）で酒が飲めるぞ → 【月別イベント版】
２番：（都道府県）は（郷土料理）で酒が飲めるぞ → 【郷土料理版】
※の部分は例外あり。
というところまでの実現となりました。
##使用した技術について
今回はかねてから興味があったvue + vuetify + javascriptの構成で、勉強をしつつシステムを構築しました。
##処理の大まかな流れについて
ジェネレーターの大まかな処理の流れは下記のとおりです。
①：初期表示時にaxiosでMediaWiki APIにHTTPリクエストを送信し、Wikipediaから情報を取得する。
②：①で取得した情報を元に画面を描画する。
③：「酒を呑む！」ボタンを押下したらリール回転を実行する。
④：（月別イベント版）イベントをクリックしたらwikipediaで記事のページを開く。 ※記事が存在しないケースあり
（郷土料理版）wikipediaの記事の内容をから該当の料理の情報を表示する。
##公開リポジトリ―
ソースは下記で公開しています。
https://github.com/usankusai-dev/sakenomi_public
大雑把に開発して後で綺麗にしようと思ったのですが、とてもそんな時間がなかったのでかなり汚いコードになっています…（言い訳）
ポイント
ここからは開発の際に時間が掛かった、
・月別イベント、都道府県別の郷土料理の情報の取得先について
・スロット機能について
上記２点について実装の解説を記載します。
####・月別イベント、都道府県別の郷土料理の情報の取得先について
月別のイベント情報と都道府県別の郷土料理の情報は、MediaWiki ウェブサービス APIを利用し、wikipediaの記事からそれぞれ取得しています。
-月別：年中行事
-都道府県別：日本の郷土料理一覧
どちらも記事の情報自体はaction=queryを指定することで取得が可能です。
ただし今回使用した２つの記事はそれぞれ書式が異なるため、取得方法が異なっています。
月別で使用している年中行事のほうは、見出しが月別で分かれており、月内のイベントもプレーンテキストで記載されています。
このため記事のプレーンテキストを返すprop=extractsを指定することで情報を取得することができます。
=== 四月 ===
稲荷祭 - 灌仏会 - 十三詣り - 入学式
=== 五月 ===
葵祭 - 白馬節会 - 神田祭 - こいのぼり - 三社祭 - 端午 - 運動会
=== 六月 ===
厳島神社例祭 - 山王祭 - 虫送り - 大祓
記事を見れば分かると思いますが、月ごとのイベントはそれぞれ個別の記事ページが用意されているものが多かったため、wikipediaのそれぞれの記事ページへのハイパーリンクを付与しています。
（記事がないイベントもあります）
一方で日本の郷土料理一覧の記事は都道府県ごとの料理が表形式で記載されています。
この場合、prop=extractsでは表内のデータを取得することができません。
APIサンドボックス(日本の郷土料理一覧) ※prop=extracts版
== 北海道地方 ==
=== 北海道 ===
== 東北地方 ==
=== 青森県 ===
このように記事中の表内のデータを利用したい場合は、記事の情報を返すprop=extractsではなく履歴情報を返すprop=revisionsを利用します。
このprop=revisionsの中に特定のリビジョンの記事内容を返すrvprop=contextというのがあり、これを指定すると表も含めたネイティブのテキストを取得することができます。
（ただし下記の通りwikipediaの記事ページを作成時のテキストとなるためそれなりに加工が必要となります）
APIサンドボックス(日本の郷土料理一覧) ※rvprop=context版
== 北海道地方 ==
{{seealso|Category:北海道の食文化}}
{{seealso|アイヌ料理}}
=== <!-- 01 -->北海道 ===
{|class="wikitable" style="font-size:smaller;"あ
|-
!料理名!!別名!!発祥時期!!地域!!料理概要!!出典!!備考
|-
||[[石狩鍋]]||秋味鍋||-||[[石狩地方]]<br />（沿岸地域）||土鍋に昆布のダシを取り、サケをぶつ切りにして野菜と共に煮込んだ物。<br />味噌仕立てと[[酒粕]]を入れる物がある。||<ref name="hiiragi">全国料理研究会柊会、『日本の郷土料理』、1974年、ドメス出版、東京</ref><ref name="okada_029">[[#岡田|岡田]]、p.29</ref><ref name="nousangyoson">「[http://www.rdpc.or.jp/kyoudoryouri100/recipe/menu_list/ 選定料理一覧]」『[[#農山漁村の郷土料理百選|農山漁村の郷土料理百選]]』</ref>||-
|-
||[[なんこ鍋]]||なんこう||-||[[空知地方]]||なんこ（馬の腸）を鍋に投入した味噌仕立ての鍋料理。もっぱら産炭地で鉱山労働者の間で広まり食べられていた。
####・スロット機能について
「酒を呑む！」ボタンを押下した際のスロット機能はCSSを利用して実現しています。
下記はスロットのスタイルを一部変更した場合の描画になります。
このように、縦に並べた文字列の要素を下から上にアニメーション再生することでスロットのリールっぽい動きを再現しました。
スロットの内部的な動きとしては
１：選択した月（都道府県）によって文字列の配列を作成
（月を変更した場合はスロット用のdiv要素を初期化）
２：「酒を呑む！」ボタンを押したら１の配列からスロット用のdiv要素を【１周分＋】適当な位置まで最後尾から作成する
３：スロット表示欄のtop要素を一番下まで移動し、top要素が0になるまでアニメーション移動をさせる
という流れになっています。
２の【】の部分ですが、この部分がないとアニメーションの移動数が少なかった場合、下記のような描画となり、あまりスロットっぽく見えなくなります。
このため必ず配列１周分を追加し、スロットっぽい動きをするように対応を行いました。
##反省点
今回の開発の反省点ですが、一番はVue(Vuetify)をあまり有効活用できなかった点です。
正直なところ、今回の開発はVueやVuetifyを使わずともhtmlとjsで十分実装が可能でした。
（おそらくコードももっと簡潔になったと思います）
今回は学習目的もありVue+Vuefityの構成を選択しましたが、
・結局使ったのはcomponentやrouter機能のみ
・レガシーなCSSやHTMLの実装がほとんどで、レスポンシブ対応も行えていない
など、結果としてはあまりメリットのない構成となってしまいました。
特にこうしたネタ系のサービスはPC以外にスマホなどでも手軽に動かせてナンボだと思うため、
レスポンシブ対応は時間があればやってみたいです。
##さいごに
いまだ猛威を振るうコロナにより、季節のイベントは行うことができず、郷土料理を食べに各地へ赴くこともできませんが、
このジェネレーターで出た結果をコロナ禍を乗り切った後の楽しみとして考えて頂ければ幸いです。
(余談)
私個人としてはコロナ禍による宅呑み機会の増加により、
むしろ飲酒量が増えた結果、見事自己歴代新記録となる高値の尿酸値を叩き出ました。
現在は禁酒の毎日を送っていますが、引き続き摂生に努めたいと思います…
（ただし、タイトル通りこのジェネレーターの開発が終わった日はとっておきのウィスキーを吞みました）
アドベントカレンダー4日目は週明け1/12(火)、担当は@ssscさんです。お楽しみに！
リンク情報システム株式会社では**一緒に働く仲間を随時募集**しています！
また、お仕事のご依頼、ビジネスパートナー様も募集しております。お気軽にご連絡ください。
Facebookはこちら。