More than 3 years have passed since last update.

TDLでちょっとだけドヤァできるアプリ作りました #JavaScript #HTML #Bootstrap #jQuery #Vue.js

Last updated at 2021-11-11Posted at 2021-11-11

#TDLでこんなことありませんか？
「長い待ち時間で会話が途切れた！」
「パレード待ちしているときに沈黙が気まずい！」
「この間TVで風間くん¹が言ってた～あの～あれ、あれが、ほら……！」（思い出せない！）

そんな「あちゃー」を解消し、ちょっとドヤ顔できるアプリを作りました。
このアプリであなたも素敵なTDL²での一日をお過ごしください。

#ドヤれるアプリ
:::note alert
都合により、ごく限られた範囲でのみ情報が取得できます。
情報が得られたらラッキー！くらいに思ってください。
何卒、ご了承のほどよろしくお願いいたします。
またiOSでは動作しない可能性があります。
:::

～アプリのリンク～

#お気づきですか？
このアプリ、ディズニーランドに行かないと試せないんです！！（ドーン）
それじゃあ、あまりにも……なので、テスト用のアプリもございます。

緯度と経度をご自身で入力いただくことになりますが、判定や情報の内容は同じです。
Googleマップが表示されていますので、好きな場所を選んで緯度と経度を確認してみてください。
同じページ上に参考の緯度経度情報一覧も記載しています。

～TEST用アプリのリンク～

#ドヤァの仕組み
夢と魔法の王国のバックグラウンドストーリー³、細かい設定、豆知識を教えてくれるアプリです。
端末のGPSをONにしてアプリにアクセスすると、位置情報を取得し周辺情報のプチ情報を表示します。

また、オマケとして今日つけるカチューシャ⁴を勝手に選んでくれるアプリも作成しました。
位置情報取得ページ内にリンクがありますので、カチューシャに迷ったら使ってみてください。
※参照先ページが削除された場合、表示されたQRコードを読み込んでもエラーになります。

～カチューシャ選択アプリ～

#使用したもの
CodePen
Netlify

ライブラリ
bootstrap
Vue.js
jQuery
qrcode

参考にしたCodePen
「QRコードの生成 & 読取」
「スマホセンサを試してみる(位置情報編)」

その他の参考ページなどはZennにまとめていますのでご覧ください。
応用的な技術を用いたWebアプリを制作

#完成コード
下記のCodePenをご覧ください。

##ディズニーランド位置情報

##ディズニーランド位置情報(TEST)

##今日のカチューシャ

#完成までの歩み
開発中の記録はZennを使用しましたので、お時間のある方は下記もご覧ください。

#ドヤれたのか
まぁまぁドヤれたのではないでしょうか。
情報は主にWikipedia、東京ディズニーランド大ガイド（通称黄色い本。絶版。）、自分の知識を元にしました。

改めて調べるとディズニーランドの奥深いこと。
自分のディズニー知識はだいぶ補強されました。（え）

ごく限られた範囲でのみの判定となっているため、実際に現地での使用は難しいかもしれません。
情報を取得するまで歩き回るゲームになってしまうかも……。

ディズニーランドでちょっと賢く見せたいすべてのゲストがドヤァできるまでアップデートを試みます！
ディズニーシー版はいつの日か……！

#反省会
以下は自分の反省です。
お時間のある方のみどうぞ。

・位置情報判定がごく一部に限られてしまっている
緯度と経度を直書きで設定しているため、ごく限られた範囲のでのみの判定となってしまいました。
指定した範囲内に入ったら全部OK！とするためにはどのようにすればいいのか……。
引き続き調べてみようと思います。

・情報がとにかく手書き！
なんということでしょう。すべてのアトラクション、ショップ、レストランの情報を直書きしています。
これでは情報が更新されたら直すのに一苦労です。
データの参照先を作るなどの方法に変えたいです。

・Googleマップ表示してるだけ
TEST用ページにGoogleマップを表示しているのですが、ただ表示しているだけなのです。
本当は埋め込んだGoogleマップ上でピンを差し、そこから緯度経度情報を取得するようにしたいです。
こちらも次回アップデートに持ち越しです。

今回は開発や作りこみの時間を最小限に抑え、情報収集に時間をあてました。
まだまだ未熟なアプリですが、作成主はおおいに楽しみました！

あ～ディズニー行きたーい！！

ジャニーズ事務所のタレント。ディズニーの大ファンで有名。彼が紹介するとゴミ箱もグッズ化されレギュラー商品も完売となる。なかなかの強火ヲタク。 ↩
東京ディズニーランドの略。 ↩
アトラクション、ショップ、レストランの設定となっているストーリー。ディズニーは大型アトラクションからトイレにいたるまで、このバックグラウンドストーリーが細部まで作りこまれている。中には非公式のものもあるが、ディズニーの大きな魅力の一つであり多くのファンが研究を続けている。 ↩
ミッキーの耳やミニーのリボンをかたどったパーク必須アイテム。パークで何もつけていないのは裸で歩いているのと同じ。（ディズニー大好き芸人うえちゃん談） ↩