ディップ Advent Calendar 2021の13日目の記事です。
はじめに
ディップ株式会社でPHP(Laravel)を使って求人系サービスの開発や社内向けツールの開発を行なっている@taku-0728です。
今回はタイトル通りDocker + Vue.js + Go言語を使って映画の上映状況を取得してみます。
Vue.jsとGo言語を使った記事を書くのは初めてでお作法的な部分もまだ理解が浅いため、
有識者の方からみると違和感を感じる部分もあると思いますが、こう書いた方がいい等あればコメントにてご指摘いただければ幸いです。
前置きがながいので、実装方法について詳しく知りたい方は実装からお読みください。
こんなこと経験ありませんか？
：話題のあの映画がついに公開だって！今度の週末見に行きたい！近くの映画館で空いてる時間ないかなー
：「「「全時間帯満席です」」」
：1日予定がないから何時でもいいのに空いてない 多少遠くてもいいから話題の映画が見られる映画館が知りたい
今回解決したい問題
はい、今回知りたいことは「特定の映画の空席がある映画館を知りたい」という内容となります。
通常、映画館の空席状況を知りたい場合、最寄りの映画館のサイトに行って空席状況を調べる方が多いのではないでしょうか？
映画館のサイトによっては近隣店舗の上映状況のリンクがある場合もありますが、一部のサイトではその施設内の上映状況しか記載されておらず、
空席がなかった場合に近隣の店舗名で調べ直さなければいけない場合がありました。
そこで、今回は
都道府県と映画のタイトルを入力すると、同じ都道府県内の映画館全てに対して、タイトルとして入力された映画の空席状況を取得するサイトを作ります。
本当ならば様々なサイトの空席状況を取得したかったのですが、今回は時間の都合上TOHOシネマズに絞ってやっていきます。
やり方
まずちらっと調べてみましたが、やはりTOHOシネマズの空席情報を含む映画館の情報を取得するAPIなどは見つからなかったので、今回情報の取得はスクレイピングで行います。
注意：スクレイピングは相手のサーバに相当な負荷をかける場合があります。アクセスとアクセスの間隔は1秒以上あけるなど、相手のサーバに負荷をかけないように注意してください。また、利用規約などでそもそもスクレイピングが禁止されている場合があります。スクレイピングを実施する前に相手のページの利用規約などをよく読んでください。
TOHOシネマズ ご利用に際してを確認し、利用規約に反していないと判断したのでこの記事を書いています。
ただし、何か問題があった場合は速やかに記事を削除するのでお手数ですがコメントにてお知らせください。
実装
前提条件
以降の実装では下記の条件が満たされていることを前提としています。
もし下記がまだの場合は本記事では説明を割愛するのでお手数ですが他の記事を参考にしていただければと思います。
- ローカルでDockerが動作すること
- ローカルでVue CLI 3が使えること
- ローカルでgoコマンドが使えること(goコマンドは使えなくても後述のファイルをコピーすれば一応進められます)
環境構築
今回はなるべくローカル環境に影響を与えたくなかったので、環境構築はDockerを用いて行います。
まず任意のディレクトリ(ここではprojectsとします)を用意します。以降の作業は全てこのprojects内で行います。
$ mkdir projects
client側(Vue.js)
projects内に入ったら、まずはVue.jsの環境構築を行います。
ここではVue.jsのプロジェクト作成時の詳細なオプションについては割愛します。
$ vue create client
~~ 中略 ~~
$ cd client
clientディレクトリ配下にVue.jsのプロジェクトができたら、Dockerコンテナ内で動作させるためにDockerfileを作成します。
$ vi Dockerfile
# nodeイメージをpullする
FROM node:14.18.1
# コンテナログイン時のディレクトリ指定
WORKDIR /work
# カレントディレクトリのファイル全てをコンテナ内にコピー
COPY . .
# 依存モジュールのインストール
RUN yarn install
これでclient側の準備は完了です。
server側(Go言語)
一旦projectディレクトリに戻り、Go言語のソースを格納するserverディレクトリを作成します。
$ cd ../
$ mkdir server
$ cd server
serverディレクトリの中で同様にDockerfileを作成します。
$ vi Dockerfile
DockerFileの中身はこんな感じです。
# ベースとなるDockerイメージ指定
FROM golang:latest
# コンテナログイン時のディレクトリ指定
WORKDIR /work
これでserver/clientそれぞれのDockerfileが作成できました。
これらのコンテナの管理をするためにproject配下にdocker-compose.ymlを追加します。
cd ../
vi docker-compose.yml
中身はこんな感じです。
docker-compose.yml
version: '3.8' # composeファイルのバーション指定
services:
# server
server:
build: ./server # ビルドに使用するDockerfileがあるディレクトリ指定
tty: true # コンテナの起動永続化
volumes:
- ./server/src:/work # マウントディレクトリ指定
container_name: server
ports:
- 8000:8000
# client
client:
build: ./client
tty: true # コンテナの起動永続化
volumes:
- ./client:/work # マウントディレクトリ指定
container_name: client
ports:
- 8080:8080
command: yarn serve
ここまでできたら一旦コンテナの起動はできるはずです。
下記コマンドでコンテナを起動してみてください。
$ docker-compose up -d
server側はコンテナを作成しただけですが、client側はプロジェクトを作成したディレクトリをマウントしていて、
docker-compose.yml内でサーバも立てているので動くはずです。http://localhost:8080 にアクセスしてVue.jsのトップページが表示されるか確認してみてください。
(本記事は一度実装してから手順は再現しながら書いたつもりですが、もし手違いでエラー等になる場合はお手数ですがコメントにてお知らせください。)
これで環境構築は終了です。
サーバ側での情報取得
各モジュールのインストール
環境構築が終了したので、次に画面で表示するためのデータ取得処理をサーバ側に実装します。
まず処理に必要なモジュールをインストールします。
$ go mod init scraping
$ go get -u github.com/PuerkitoBio/goquery
$ go get -u github.com/djimenez/iconv-go
$ go get -u github.com/labstack/echo
$ go get -u github.com/labstack/echo/middleware
$ go get -u github.com/sclevine/agouti
上記コマンドを実行するとカレンとディレクトリにgo.modとgo.sumが配置されるはずです。 中身はこんな感じです。ローカル環境でgoコマンドを実行しなくてもこの2つのファイルをコピペして配置すれば進められるはずです。
go.mod
module scraping
go 1.14
require (
github.com/PuerkitoBio/goquery v1.8.0
github.com/dgrijalva/jwt-go v3.2.0+incompatible // indirect
github.com/djimenez/iconv-go v0.0.0-20160305225143-8960e66bd3da
github.com/labstack/echo v3.3.10+incompatible
github.com/labstack/gommon v0.3.1 // indirect
github.com/mattn/go-colorable v0.1.12 // indirect
github.com/sclevine/agouti v3.0.0+incompatible
golang.org/x/crypto v0.0.0-20211202192323-5770296d904e // indirect
golang.org/x/net v0.0.0-20211208012354-db4efeb81f4b // indirect
golang.org/x/sys v0.0.0-20211205182925-97ca703d548d // indirect
golang.org/x/text v0.3.7 // indirect
)
go.sum
github.com/PuerkitoBio/goquery v1.8.0 h1:PJTF7AmFCFKk1N6V6jmKfrNH9tV5pNE6lZMkG0gta/U=
github.com/PuerkitoBio/goquery v1.8.0/go.mod h1:ypIiRMtY7COPGk+I/YbZLbxsxn9g5ejnI2HSMtkjZvI=
github.com/andybalholm/cascadia v1.3.1 h1:nhxRkql1kdYCc8Snf7D5/D3spOX+dBgjA6u8x004T2c=
github.com/andybalholm/cascadia v1.3.1/go.mod h1:R4bJ1UQfqADjvDa4P6HZHLh/3OxWWEqc0Sk8XGwHqvA=
github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
github.com/dgrijalva/jwt-go v1.0.2 h1:KPldsxuKGsS2FPWsNeg9ZO18aCrGKujPoWXn2yo+KQM=
github.com/dgrijalva/jwt-go v3.2.0+incompatible h1:7qlOGliEKZXTDg6OTjfoBKDXWrumCAMpl/TFQ4/5kLM=
github.com/dgrijalva/jwt-go v3.2.0+incompatible/go.mod h1:E3ru+11k8xSBh+hMPgOLZmtrrCbhqsmaPHjLKYnJCaQ=
github.com/djimenez/iconv-go v0.0.0-20160305225143-8960e66bd3da h1:0qwwqQCLOOXPl58ljnq3sTJR7yRuMolM02vjxDh4ZVE=
github.com/djimenez/iconv-go v0.0.0-20160305225143-8960e66bd3da/go.mod h1:ns+zIWBBchgfRdxNgIJWn2x6U95LQchxeqiN5Cgdgts=
github.com/labstack/echo v1.4.4 h1:1bEiBNeGSUKxcPDGfZ/7IgdhJJZx8wV/pICJh4W2NJI=
github.com/labstack/echo v3.3.10+incompatible h1:pGRcYk231ExFAyoAjAfD85kQzRJCRI8bbnE7CX5OEgg=
github.com/labstack/echo v3.3.10+incompatible/go.mod h1:0INS7j/VjnFxD4E2wkz67b8cVwCLbBmJyDaka6Cmk1s=
github.com/labstack/gommon v0.3.1 h1:OomWaJXm7xR6L1HmEtGyQf26TEn7V6X88mktX9kee9o=
github.com/labstack/gommon v0.3.1/go.mod h1:uW6kP17uPlLJsD3ijUYn3/M5bAxtlZhMI6m3MFxTMTM=
github.com/mattn/go-colorable v0.1.11 h1:nQ+aFkoE2TMGc0b68U2OKSexC+eq46+XwZzWXHRmPYs=
github.com/mattn/go-colorable v0.1.11/go.mod h1:u5H1YNBxpqRaxsYJYSkiCWKzEfiAb1Gb520KVy5xxl4=
github.com/mattn/go-colorable v0.1.12 h1:jF+Du6AlPIjs2BiUiQlKOX0rt3SujHxPnksPKZbaA40=
github.com/mattn/go-colorable v0.1.12/go.mod h1:u5H1YNBxpqRaxsYJYSkiCWKzEfiAb1Gb520KVy5xxl4=
github.com/mattn/go-isatty v0.0.14 h1:yVuAays6BHfxijgZPzw+3Zlu5yQgKGP2/hcQbHb7S9Y=
github.com/mattn/go-isatty v0.0.14/go.mod h1:7GGIvUiUoEMVVmxf/4nioHXj79iQHKdU27kJ6hsGG94=
github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
github.com/sclevine/agouti v3.0.0+incompatible h1:8IBJS6PWz3uTlMP3YBIR5f+KAldcGuOeFkFbUWfBgK4=
github.com/sclevine/agouti v3.0.0+incompatible/go.mod h1:b4WX9W9L1sfQKXeJf1mUTLZKJ48R1S7H23Ji7oFO5Bw=
github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
github.com/valyala/bytebufferpool v1.0.0 h1:GqA5TC/0021Y/b9FG4Oi9Mr3q7XYx6KllzawFIhcdPw=
github.com/valyala/bytebufferpool v1.0.0/go.mod h1:6bBcMArwyJ5K/AmCkWv1jt77kVWyCJ6HpOuEn7z0Csc=
github.com/valyala/fasttemplate v1.2.1 h1:TVEnxayobAdVkhQfrfes2IzOB6o+z4roRkPF52WA1u4=
github.com/valyala/fasttemplate v1.2.1/go.mod h1:KHLXt3tVN2HBp8eijSv/kGJopbvo7S+qRAEEKiv+SiQ=
golang.org/x/crypto v0.0.0-20211202192323-5770296d904e h1:MUP6MR3rJ7Gk9LEia0LP2ytiH6MuCfs7qYz+47jGdD8=
golang.org/x/crypto v0.0.0-20211202192323-5770296d904e/go.mod h1:IxCIyHEi3zRg3s0A5j5BB6A9Jmi73HwBIUl50j+osU4=
golang.org/x/net v0.0.0-20210916014120-12bc252f5db8 h1:/6y1LfuqNuQdHAm0jjtPtgRcxIxjVZgm5OTu8/QhZvk=
golang.org/x/net v0.0.0-20210916014120-12bc252f5db8/go.mod h1:9nx3DQGgdP8bBQD5qxJ1jj9UTztislL4KSBs9R2vV5Y=
golang.org/x/net v0.0.0-20211112202133-69e39bad7dc2/go.mod h1:9nx3DQGgdP8bBQD5qxJ1jj9UTztislL4KSBs9R2vV5Y=
golang.org/x/net v0.0.0-20211208012354-db4efeb81f4b h1:MWaHNqZy3KTpuTMAGvv+Kw+ylsEpmyJZizz1dqxnu28=
golang.org/x/net v0.0.0-20211208012354-db4efeb81f4b/go.mod h1:9nx3DQGgdP8bBQD5qxJ1jj9UTztislL4KSBs9R2vV5Y=
golang.org/x/sys v0.0.0-20201119102817-f84b799fce68/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
golang.org/x/sys v0.0.0-20210423082822-04245dca01da/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
golang.org/x/sys v0.0.0-20210615035016-665e8c7367d1/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
golang.org/x/sys v0.0.0-20210630005230-0f9fa26af87c/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
golang.org/x/sys v0.0.0-20210927094055-39ccf1dd6fa6/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
golang.org/x/sys v0.0.0-20211103235746-7861aae1554b h1:1VkfZQv42XQlA/jchYumAnv1UPo6RgF9rJFkTgZIxO4=
golang.org/x/sys v0.0.0-20211103235746-7861aae1554b/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
golang.org/x/sys v0.0.0-20211205182925-97ca703d548d h1:FjkYO/PPp4Wi0EAUOVLxePm7qVW4r4ctbWpURyuOD0E=
golang.org/x/sys v0.0.0-20211205182925-97ca703d548d/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
golang.org/x/text v0.3.6 h1:aRYxNxv6iGQlyVaZmk6ZgYEDa+Jg18DxebPSrd6bg1M=
golang.org/x/text v0.3.6/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
golang.org/x/text v0.3.7 h1:olpwvP2KacW1ZWvsR7uQhoyTYvKAupfQrRGBFM352Gk=
golang.org/x/text v0.3.7/go.mod h1:u+2+/6zg+i71rQMx5EYifcz6MCKuco9NR6JIITiCfzQ=
golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
gopkg.in/yaml.v3 v3.0.0-20210107192922-496545a6307b/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
モジュールをインストールしたのでDockerfileも少し追記します。
# ベースとなるDockerイメージ指定
FROM golang:latest
# コンテナログイン時のディレクトリ指定
WORKDIR /work
COPY ./src/go.mod /work
COPY ./src/go.sum /work
RUN go mod download
RUN apt-get update && apt-get install -y unzip
# Chrome
RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add && \
wget http://dl.google.com/linux/deb/pool/main/g/google-chrome-unstable/google-chrome-unstable_97.0.4692.20-1_amd64.deb && \
apt-get install -y -f ./google-chrome-unstable_97.0.4692.20-1_amd64.deb
# ChromeDriver
ADD https://chromedriver.storage.googleapis.com/97.0.4692.20/chromedriver_linux64.zip /opt/chrome/
RUN cd /opt/chrome/ && \
unzip chromedriver_linux64.zip
ENV PATH /opt/chrome:$PATH
各モジュールをインストールされたことによって作成されたgo.modとgo.sumをコピーする記述と、
スクレイピング処理で使うためのChromeとChromeDriverをインストールする記述を追記しました。
ファイル追記
モジュールの追加ができたらserverディレクトリに入り、srcディレクトリの中にmain.goというファイルを作成してください。
$ cd server
$ mkdir src
$ vi main.go
main.goの中身はこんな感じです。
main.go
package main
import (
"github.com/labstack/echo"
"github.com/labstack/echo/middleware"
"scraping/scraping"
)
func main() {
// Echoのインスタンス作る
e := echo.New()
// 全てのリクエストで差し込みたいミドルウェア（ログとか）はここ
e.Use(middleware.CORS())
e.Use(middleware.Logger())
e.Use(middleware.Recover())
// ルーティング
e.POST("/", scraping.GetMovieTheater)
// サーバー起動
e.Start(":8000")
}
echoというモジュールを使ってポート:8000でサーバを立て、
そのサーバにアクセスがあった場合別モジュールであるscraping.goのGetMovieTheaterというメソッドに移ります。
main.goではサーバだけ立てて、実際の処理はscraping.goに記載するということです。
ではそのscraping.goをserverディレクトリ配下にscrapingというディレクトリを作り、そのなかに作っていきます。
mkdir scraping
cd scraping
vi scraping.go
ファイルツリーを書くとこんなイメージです。
projects
├── client
├── server
└── src
└── main.go
└── scraping
└── scraping.go
└── docker-compose.yml
scraping.goの中身はこんな感じです。
scraping.go
package scraping
import (
"fmt"
"strings"
"net/http"
"github.com/PuerkitoBio/goquery"
"github.com/djimenez/iconv-go"
"github.com/labstack/echo"
"github.com/sclevine/agouti"
)
func GetMovieTheater(c echo.Context) error {
// TOHOシネマの劇場一覧サイト
url := "https://www.tohotheater.jp/theater/find.html"
// GETリクエスト
res, _ := http.Get(url)
// 呼び出し元の関数がreturnされるまで接続を切らない
defer res.Body.Close()
// 対象サイトのBody部分の読み取り
utfBody, err := iconv.NewReader(res.Body, "Shift_JIS", "utf-8")
if err != nil {
fmt.Println("エンコーディングに失敗しました。")
fmt.Errorf("Some context: %v", err)
return c.JSON(500, map[string]interface{}{"error": "エンコーディングに失敗しました。"})
}
// HTMLパース
doc, err := goquery.NewDocumentFromReader(utfBody)
if err != nil {
return c.JSON(500, map[string]interface{}{"error": "HTMLのパースに失敗しました。"})
}
// 入力された都道府県を取得
place := c.FormValue("prefectures")
theaterList := []string{}
// 劇場一覧のHTMLから情報を取得
doc.Find(".section > h1").Each(func(_ int, page *goquery.Selection) {
// HTMLの中から劇場一覧の部分を指定
if strings.Index(page.Text(), "劇場一覧") != -1 {
// 劇場一覧の中から都道府県を指定
page.Next().Find(".theater-list-area > h4").Each(func(_ int, prefectures *goquery.Selection) {
// 入力された都道府県と一致する都道府県を探す
if strings.Index(prefectures.Text(), place) != -1 {
// 指定した都道府県の劇場一覧のリンクを取得
prefectures.Next().Find(".item > a").Each(func(_ int, theaterLink *goquery.Selection) {
href, _ := theaterLink.Attr("href")
theaterList = append(theaterList, href)
})
}
})
}
})
// JavaScriptを使った動的ページのHTMLを取得するためにChromeを利用することを宣言
agoutiDriver := agouti.ChromeDriver(
agouti.ChromeOptions("args", []string{"--headless", "--disable-gpu", "--no-sandbox", "--disable-dev-shm-usage"}),
)
if err := agoutiDriver.Start(); err != nil {
fmt.Println("Failed to start driver:%v", err)
return c.JSON(500, map[string]interface{}{"error": "agoutiDriver.Start()でエラー発生"})
}
defer agoutiDriver.Stop()
page, err := agoutiDriver.NewPage()
if err != nil {
fmt.Println("NewPage()でエラー発生")
fmt.Println("Some context: %v", err)
return c.JSON(500, map[string]interface{}{"error": "NewPage()でエラー発生"})
}
// 入力された映画タイトルを取得
title := c.FormValue("title")
var theaterName []string
var schedule [][]string
// 都道府県に対応する劇場のサイトに入り上映状況を取得
for _, theater := range theaterList {
// 各劇場サイト
url2 := "https://hlo.tohotheater.jp/" + theater
// 各劇場サイトに入る
page.Navigate(url2)
// 動的ページのHTMLを格納
dom, err := page.HTML()
if err != nil {
fmt.Println("page.HTML()でエラー発生")
fmt.Println("Some context: %v", err)
}
// スクレイピングするためにDOMを読み込みなおす
contents := strings.NewReader(dom)
doc, err := goquery.NewDocumentFromReader(contents)
if err != nil {
fmt.Println("page.HTML()でエラー発生")
fmt.Println("Some context: %v", err)
}
// 各劇場一覧ページのタイトル(映画館名)の「：」より前を格納
theaterName = append(theaterName, doc.Find("title").Text()[:strings.Index(doc.Find("title").Text(), "：")])
var time []string
doc.Find(".schedule-body-section-item").EachWithBreak(func(_ int, page *goquery.Selection) bool {
// 映画タイトルの中から入力されたタイトルと一致しているかを判別
if strings.Contains(title, page.Find(".schedule-body-title").Text()) {
// 入力されたタイトルと一致していれば上映スケジュールを取得
page.Find(".schedule-item").Each(func(_ int, element *goquery.Selection){
text := element.Find(".start").Text() + "〜" + element.Find(".end").Text() + " " + element.Find(".status").Text()
time = append(time, text)
})
return false
}
return true
})
schedule = append(schedule, time)
time = nil
}
result := map[int]map[string]interface{}{}
for i := 0; i < len(theaterName); i++ {
result[i] = map[string]interface{}{}
result[i]["theaterName"] = theaterName[i]
result[i]["schedule"] = schedule[i]
}
return c.JSON(200, result)
}
ちょっと一気に長くなってしまったので、順番に解説していきます。
対象の都道府県の映画館リンク一覧取得
// TOHOシネマの劇場一覧サイト
url := "https://www.tohotheater.jp/theater/find.html"
// GETリクエスト
res, _ := http.Get(url)
// 呼び出し元の関数がreturnされるまで接続を切らない
defer res.Body.Close()
// 対象サイトのBody部分の読み取り
utfBody, err := iconv.NewReader(res.Body, "Shift_JIS", "utf-8")
if err != nil {
fmt.Println("エンコーディングに失敗しました。")
fmt.Errorf("Some context: %v", err)
return c.JSON(500, map[string]interface{}{"error": "エンコーディングに失敗しました。"})
}
// HTMLパース
doc, err := goquery.NewDocumentFromReader(utfBody)
if err != nil {
return c.JSON(500, map[string]interface{}{"error": "HTMLのパースに失敗しました。"})
}
// 入力された都道府県を取得
place := c.FormValue("prefectures")
theaterList := []string{}
// 劇場一覧のHTMLから情報を取得
doc.Find(".section > h1").Each(func(_ int, page *goquery.Selection) {
// HTMLの中から劇場一覧の部分を指定
if strings.Index(page.Text(), "劇場一覧") != -1 {
// 劇場一覧の中から都道府県を指定
page.Next().Find(".theater-list-area > h4").Each(func(_ int, prefectures *goquery.Selection) {
// 入力された都道府県と一致する都道府県を探す
if strings.Index(prefectures.Text(), place) != -1 {
// 指定した都道府県の劇場一覧のリンクを取得
prefectures.Next().Find(".item > a").Each(func(_ int, theaterLink *goquery.Selection) {
href, _ := theaterLink.Attr("href")
theaterList = append(theaterList, href)
})
}
})
}
})
ここでやっていることとしては
- TOHOシネマズの劇場一覧サイトにGetでアクセス
- TOHOシネマズの劇場一覧のBody要素を取得
- 2.で取得した要素について、Shift-JISで表示されており、スクレイピング用ライブラリgoqueryを使うためにutf-8に変換
- goqueryを使って要素の解析
- 要素内の劇場一覧に表示されている都道府県と、入力された都道府県が一致すればその都道府県のリンクを取得する
までです。これによって取得対象の映画館のリンク一覧が取得できました。
映画館のサイトに入り、空席情報を取得
// JavaScriptを使った動的ページのHTMLを取得するためにChromeを利用することを宣言
agoutiDriver := agouti.ChromeDriver(
agouti.ChromeOptions("args", []string{"--headless", "--disable-gpu", "--no-sandbox", "--disable-dev-shm-usage"}),
)
if err := agoutiDriver.Start(); err != nil {
fmt.Println("Failed to start driver:%v", err)
return c.JSON(500, map[string]interface{}{"error": "agoutiDriver.Start()でエラー発生"})
}
defer agoutiDriver.Stop()
page, err := agoutiDriver.NewPage()
if err != nil {
fmt.Println("NewPage()でエラー発生")
fmt.Println("Some context: %v", err)
return c.JSON(500, map[string]interface{}{"error": "NewPage()でエラー発生"})
}
// 入力された映画タイトルを取得
title := c.FormValue("title")
var theaterName []string
var schedule [][]string
// 都道府県に対応する劇場のサイトに入り上映状況を取得
for _, theater := range theaterList {
// 各劇場サイト
url2 := "https://hlo.tohotheater.jp/" + theater
// 各劇場サイトに入る
page.Navigate(url2)
// 動的ページのHTMLを格納
dom, err := page.HTML()
if err != nil {
fmt.Println("page.HTML()でエラー発生")
fmt.Println("Some context: %v", err)
}
// スクレイピングするためにDOMを読み込みなおす
contents := strings.NewReader(dom)
doc, err := goquery.NewDocumentFromReader(contents)
if err != nil {
fmt.Println("page.HTML()でエラー発生")
fmt.Println("Some context: %v", err)
}
// 各劇場一覧ページのタイトル(映画館名)の「：」より前を格納
theaterName = append(theaterName, doc.Find("title").Text()[:strings.Index(doc.Find("title").Text(), "：")])
var time []string
doc.Find(".schedule-body-section-item").EachWithBreak(func(_ int, page *goquery.Selection) bool {
// 映画タイトルの中から入力されたタイトルと一致しているかを判別
if strings.Contains(title, page.Find(".schedule-body-title").Text()) {
// 入力されたタイトルと一致していれば上映スケジュールを取得
page.Find(".schedule-item").Each(func(_ int, element *goquery.Selection){
text := element.Find(".start").Text() + "〜" + element.Find(".end").Text() + " " + element.Find(".status").Text()
time = append(time, text)
})
return false
}
return true
})
schedule = append(schedule, time)
time = nil
}
ここでやっていることとしては
- TOHOシネマズの各サイトがJavaScriptで動的に公開状況を表示しているため、JavaScriptを使った動的ページのHTMLを取得するためにChromeを利用することを宣言
- 画面から入力された映画のタイトルを取得
- 先の処理で取得していた映画館のリンクをもとに各映画館のサイトに入り、動的に表示されているDOMを取得
- goqueryで解析するために3で取得したDOMを読み込み直す
- 4で読みこんだDOMを解析し、入力されたタイトルと一致するタイトルを検索
- 5で一致するタイトルがあった場合、開始/終了時間と空席状況を取得
といった流れです。
取得した結果を整形してjson形式で返す
取得した映画館名、上映スケジュール、空席状況をまとめてjson形式にして返します。
result := map[int]map[string]interface{}{}
for i := 0; i < len(theaterName); i++ {
result[i] = map[string]interface{}{}
result[i]["theaterName"] = theaterName[i]
result[i]["schedule"] = schedule[i]
}
return c.JSON(200, result)
これでサーバ側の実装が完成しました。
クライアント側での情報表示
サーバ側でリクエストを受けたらレスポンスをJSON形式で返す処理ができたので、
サーバ側にリクエストを投げる処理と取得した情報を返す処理を実装していきます。
まずデフォルトでさまざまな文言が表示されているApp.vueから不要な情報を削除します。
$ cd ../../client
$ vi src/App.vue
App.vue
<template>
<div>
<HelloWorld/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: Verdana,'游ゴシック体','Yu Gothic',YuGothic,sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
実際の処理をHelloWorld.vueに追記します。
HelloWorld.vue
<template>
<div>
<form @submit.prevent="getTheaterList">
<input type="text" v-model="prefectures" name="prefectures" placeholder="都道府県を入力してください"><br>
<input type="text" v-model="title" name="title" placeholder="作品名を入力してください"><br>
<button type="submit">submit</button>
</form>
<div v-for='(data, key) in results' :key="key">
<h3 class="theater-name">{{ data.theaterName }}</h3>
<div class="flex-container">
<div class="flex-item" v-for='(schedule, key) in data.schedule' :key="key">
<p>{{ schedule }}</p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
results: ''
};
},
methods: {
async getTheaterList() {
const result = await this.sendRequest().then((res) => res.text());
this.results = JSON.parse(result);
},
async sendRequest() {
const url = 'http://localhost:8000';
const data = new URLSearchParams();
data.append("prefectures",this.prefectures);
data.append("title",this.title);
return fetch(url, {
method: 'POST',
headers: {
'X-Requested-With': 'csrf', // csrf header
'Content-Type': 'application/x-www-form-urlencoded',
},
body: data,
});
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
.flex-container {
width: 100%;
/* margin-left: 10%; */
display: flex;
flex-direction: row;
background-color: rgba(20, 20, 20, 0.76);
}
.flex-item {
width: 8%;
margin: 20px;
color: white;
background-color: gray;
}
</style>
こちらも長くなったので順番に見ていきます。
<template>
<div>
<form @submit.prevent="getTheaterList">
<input type="text" v-model="prefectures" name="prefectures" placeholder="都道府県を入力してください"><br>
<input type="text" v-model="title" name="title" placeholder="作品名を入力してください"><br>
<button type="submit">submit</button>
</form>
<div v-for='(data, key) in results' :key="key">
<h3 class="theater-name">{{ data.theaterName }}</h3>
<div class="flex-container">
<div class="flex-item" v-for='(schedule, key) in data.schedule' :key="key">
<p>{{ schedule }}</p>
</div>
</div>
</div>
</div>
</template>
ここでやっていることは都道府県と作品名のsubmitと、受け取った情報の表示です。
<script>
export default {
name: 'HelloWorld',
data() {
return {
results: ''
};
},
methods: {
async getTheaterList() {
const result = await this.sendRequest().then((res) => res.text());
this.results = JSON.parse(result);
},
async sendRequest() {
const url = 'http://localhost:8000';
const data = new URLSearchParams();
data.append("prefectures",this.prefectures);
data.append("title",this.title);
return fetch(url, {
method: 'POST',
headers: {
'X-Requested-With': 'csrf', // csrf header
'Content-Type': 'application/x-www-form-urlencoded',
},
body: data,
});
}
}
}
</script>
ここでは非同期通信を使って http://localhost:8000 へリクエストをPOSTし、受け取ったJSONを配列へ変換しています。
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
.flex-container {
width: 100%;
/* margin-left: 10%; */
display: flex;
flex-direction: row;
background-color: rgba(20, 20, 20, 0.76);
}
.flex-item {
width: 8%;
margin: 20px;
color: white;
background-color: gray;
}
</style>
こちらでは見た目の変更のためにCSSを追記しています。
結果
serverコンテナに入り、main.goを実行することでAPIサーバが起動します。
$ docker-compose exec server bash
$ go run main.go
____ __
/ __/___/ / ___
/ _// __/ _ \/ _ \
/___/\__/_//_/\___/ v3.3.10-dev
High performance, minimalist Go web framework
https://echo.labstack.com
____________________________________O/_______
O\
⇨ http server started on [::]:8000
あとはクライアント側で都道府県名、作品名を入力して送信すればOKです！
このような形で、東京都の映画館の上映状況が取得できるようになりました！
あとがき
今回はDocker + Vue.js + Go言語で映画館の空席状況の取得に挑戦しました。
正直なところ、本当はローカル環境での実行ではなくどこかの環境にデプロイしたり、
TOHOシネマズ以外の映画館の情報も取得したり、
画面のデザインももう少しこだわりたかったりしたのですが記事の執筆に間に合わなさそうだったので今回はここまでとします。
不明点や「ここはこうしたほうがいい」などあればコメントいただけると助かります。
最後まで読んでいただきありがとうございました。