main image

デジタル技術を駆使した水族館「カワスイ 川崎水族館」

カワスイ 川崎水族館
2022.3

2020年7月にオープンした「カワスイ 川崎水族館」は、アプリでのチケット購入から館内の演出に至るまで随所にデジタル技術が活用されています。 Da Vinci Studioは、このカワスイ 川崎水族館のスマートフォンアプリやWebシステムの開発を担当しています。

今回はDa Vinci Studioの担当チームに「水族館ならでは」の開発秘話を聞いてみました。

※この記事の取材は、12月下旬に実施しました。
yoshikawa
吉川 崇倫(インタビュアー)
Da Vinci Studio 代表取締役
babazono
馬場薗 裕士
Da Vinci Studio SRE
hachiya
八谷 賢
Da Vinci Studio アプリエンジニア
nakaza
仲座 李香
Da Vinci Studio サーバサイドエンジニア
ito
伊藤 祐希
Da Vinci Studio サーバサイドエンジニア

水族館 × デジタル技術

―― 今日のテーマはカワスイ 川崎水族館のシステムについてです。みなさんは行ったことがありますか?

馬場薗 僕はありますよ。オープン時に業務として行き、その後、プライベートでも年間パスポートを買いました。

―― 年間パスポートを買ったんだ!

馬場薗 はい、動作確認も兼ねて行きたかったので(笑)。

仲座 私は実は今日、これから初めて行きます。

―― 今日が初めて?仕事の後に?

仲座 いや、打ち合わせです(笑)。水族館自体も、しっかり見てくる気はまんまんですが。

インタビューの様子1
―― 仕事だったのか……。でも、見てくると良いと思いますよ。僕も息子を連れて行ったことがありますけど、良かったです。

八谷 僕は行きたいけれど、まだないですね。

―― 八谷さんは関西にいるからね……。プロジェクト初期からのメンバーなのに、残念ですね。
八谷さんと馬場薗さんは、初期からのメンバーですよね。代表して、カワスイ 川崎水族館で手掛けたサービスってどういうものかを簡単に説明してもらえますか?

八谷 そうですね、簡単に言うと、Webやスマートフォンアプリから年間パスポートを購入したり、それを使って入館できたりするシステムを作りました。

馬場薗 館内の水槽にQRコードがあって、それを読み取ると中の魚の情報が見られますよ。現在は別のサービスと連携したものになっていますが、オープン当初はDa Vinci Studioが実装したものでした。

伊藤 クーポンもあります。館内のショップで使えるクーポンを配信しています。

仲座 ニュースやイベント情報もアプリから閲覧できますね。

―― みんな補足してきた(笑)。みなさんありがとうございます。
いろいろできますね。カワスイ 川崎水族館はデジタル技術の活用がコンセプトのひとつということで、こういった機能も豊富ですよね。

それこそアプリからパスポートを購入して、そのまま入館できるってあんまりないですよね?あるのかな。

仲座 少なくとも私は見たことないですね。それこそ前に別の水族館へ行ったときは、なかったです。

―― カワスイ 川崎水族館はまだなのに、別の水族館に行っていた(笑)。

水族館という “物理的な場” と連携する醍醐味

―― 年間パスポートがあるってことは、当日券のシステムも開発したんですか?

仲座 最初はあったんですけれど今はなくて、当日券は別のサービスと連携していますね。

―― なるほど。年間パスポートはアプリで購入して、表示されたQRコードを表示すると入館できるってことですかね?

八谷 そうですそうです。入館時にスタッフの方がQRコードリーダーで読み取って確認できるんです。たしか当日券があったときは入館ゲートでQRコード読み取って入れたと思います。

―― おお、すごい。水族館のシステムと連動しているんですね。

八谷 すごいですよね。あれどうなってるんですか?僕はiOSとAndroidのアプリは分かるんですけど、バックエンドを把握していなくて。

前からどうなってるんだろうなって気になっていたんです。

馬場薗 カワスイ 川崎水族館のバックエンドの一部はオンプレミスで構築してあり、そこを管理しているのはDa Vinci Studioではありません。入館ゲートといった館内のシステムは、このオンプレミス上のシステムで稼働していて、そこにあるデータベースに僕らが開発しているAWS上のシステムからデータを渡しています。

―― 物理的なシステムとの連携か。僕らは普段はオンラインで完結するWebサービスやスマートフォンアプリの開発が多いので、カワスイ 川崎水族館ならではのところですよね。
勝手が違うところも多いですか?
インタビューの様子2

馬場薗 勝手が違うというか……やっぱりネットワークまわりでハマるところが多いですね。例えば入館ゲート側の開発環境が、実際の本番環境と異なる箇所がありました。開発環境だと、ルーターから繋がらなかったり。

―― 大変そう……そうなったとき、どうするんですか?

馬場薗 実物のルーターをお借りして検証していましたね。

―― やっぱりそうなりますよね。それでオープン前は現地に行っていたんですね。

馬場薗 そうですね。実物を見ないとなんとも……になることも多くて。

―― ちなみに、AWS上のアプリケーションからオンプレミスのデータベースにデータを渡しているということでしたよね。オンプレミスのシステムからAWS上のAPIに直接問い合わせはしないんですか?

馬場薗 物理ゲートなのでタイムラグの問題もありますし、何よりAWSが障害になると入館できなくなってしまうので。

―― なるほど確かに。物理的な施設との連携ならではですね。
物理的な連携といえば、馬場薗さんがよくSlack上で何とかの魚、水槽移動させますとか言ってましたよね。あれもそうなんですか?

馬場薗 魚の引っ越しですね(笑)。そうです。冒頭にお話した水槽のQRコードから詳細情報を閲覧できる機能です。QRコードが展示する場所に固定されているので、展示の場所ごとに何の魚がいるかのマッピングを管理していたんです。 なので魚が引っ越すときに一緒に作業していました。

インタビューの様子3

ちなみに、水族館ってWiFiや通信回線が弱くなっちゃうみたいなんですよね。 水が大量にあると、電波を吸収するみたいで。

―― そんなところも影響するんだ!水族館ならではですね。
オンライン完結するシステムとは違って、考慮するところが結構ありますね。
そういえばクーポン機能もありましたよね。クーポンも同じように連携しているんですか?

伊藤 いえ、クーポンはまた違う仕組みです。 ショップでクーポンを見せて、タップすると使用済になるというシンプルなものです。 クーポンの発行も管理画面から発行できるので、年間パスポートのように決済もありません。

―― そうか、購入時の決済もありますよね。決済でもカワスイ 川崎水族館ならではの難しさってありますか?

伊藤 決済自体は特殊なものではないと思います。決済代行サービスを利用したクレジットカード決済です。 ただ、そうですね……年間パスポートなので、新規購入だけではなく継続利用の仕組みを考える必要がありました。

―― 有効期間中に購入したら、有効期間を延長するということ?
インタビューの様子4

伊藤 そうです。新規購入なら購入日から一年間有効ですが、継続利用の場合はもともとの有効期限からプラス一年間なので、有効期間の算出方法が変わるんです。 でもスマートフォンで操作していると、例えば一度、決済の確認画面まで表示して、その場では決済せずに、あとでまたブラウザを開いて操作するケースってありますよね。

―― あー、スマートフォンで途中までで作業を止めて、後日そのまま操作し始めるケースか。なるほど。
スマートフォンで申し込みフローを検討するときのあるあるですよね。

伊藤 はい。後日、操作するタイミングで有効期間が終わっているということもありえるので、その時点での時間と状態を見て、期限が過ぎていたらリセットする必要があります。 このあたりの設計には気を使いました。水族館ならではという話じゃないですけど。

―― いやいや、大事ですよ。
アプリの方にも、こういう話あります?八谷さん。

八谷 アプリは、採用したフレームワークで苦戦したところがありますね。今回、iOSとAndroid両対応ということでFlutterで開発を進めましたが、当初、使おうと考えていた機能に対応するSDKがなくて大変でした。

具体的には初期に、ビーコンを活用したPush通知を実装しようという話があったんです。 さっき伊藤さんが話していたクーポンの通知はFirebaseSDKを使っているんですが、ビーコンの方はFlutter対応のSDKがありませんでした。

インタビューの様子5

そこでFlutterのNative通信を使って実現したものの、初期化の順番をきちんと制御しないと、どちらかが失敗してしまいました。 当時はFlutterのノウハウがあまりなくて、苦戦したところです。

―― ビーコン!面白そうですね。あれ、でも今は入ってないんですか?

八谷 実装して検証してたんですが、最終的にはお蔵入りになってしまいました。

―― それは残念……。

今だからこその「こうすればよかった」

―― このインタビュー企画で恒例になりつつある、タイムリープしたらというのを聞いてみます。
今、振り返ってみて、当時に戻ったらもっと別のやり方をしたいなというのはありますか?

八谷 今はかなりFlutterのノウハウが得られたので、今なら違う作り方をするなという箇所は結構あります。

例えばWebViewはFlutter公式のものを使わず、サードパーティ製を採用すると思います。公式だとできないことが多く、自前で実装した部分がたくさんあったので。

馬場薗 僕は不具合や問い合わせが来るところを、あらかじめ潰しておきますね……。

―― それはそう(笑)。

馬場薗 はい(笑)。それはさておき、僕もネットワークまわりで得られた知識が結構あるので、今ならもっとスムーズに構築できるだろうなと思います。

伊藤 僕は後からジョインしたので、基本設計はもうできていました。 ですから、最初から設計をやりたかったという気持ちはありますね。

―― 自分の方が良い感じに設計できるぞ的な?

伊藤 そういうつもりじゃなかったんですが(笑)。

仲座 私も細かいところで技術をどう選定するかなど色々あるんですが、どちらかというと今からでもデータ収集・分析まわりを整備したいです。

インタビューの様子6

実は以前、提案してそのときは保留になったんですよね。そして今日、改めて提案するために打ち合わせに行くんです。

―― おお、なんだか良いタイミングでのインタビューでしたね。
ぜひ頑張ってきてください。カワスイ 川崎水族館も楽しんできて。

仲座 はい!


Da Vinci Studioでは
一緒に働く仲間を募集しています。
詳細はこちら