역 스파아와 노선도의 환경을 Docker로 간단하게 구축

발 연구소 Advent Calendar 2018 10일째의 기사입니다.
오늘은 역 스파아토 노선도 의 개발 환경을 Docker로 구축하는 방법을 소개하겠습니다.
4일째 의 기사에서는 역 스파아토 웹 서비스 의 GUI 샘플 의 환경을 Docker로 구축하는 방법을 소개하고 있었습니다. 이번은 그것의 역 스파아토 노선도 버전이라고 하는 이미지입니다.

역 스파아토 노선도 소개

역 스파아토 노선도 은 6일째 기사 에서도 소개되고 있듯이 철도 노선망을 한 장 그림으로 한 노선도 서비스입니다. Rosen.js 라는 자바스크립트 라이브러리를 제공하고 있어 이것을 사용하는 것으로 웹 브라우저상에서 쉽게 노선도의 표시와 조작을 할 수 있습니다.
Rosen.js 에 대해서는, 사용 케이스에 따른 샘플을 준비하고 있으므로, 흥미가 있는 분은 참조해 주세요.

역 스파아토 노선도 샘플집

역 스파아와 노선도의 환경을 구축

우선 액세스 키를 얻는다.

샘플도 준비 되고 있다 역 스파아토 노선도 입니다만, 역 스파아토 웹 서비스 와 같이, 액세스 키가 필요하게 됩니다.
개인이나 조금 시험으로 역 스파아와 노선도를 접하고 싶은 분은, 프리 플랜으로의 신청도 가능합니다.

역 스파아토 노선도 프리 플랜

환경 구축

이번 샘플도 GitHub에서 공개하고 있습니다.

ValLaboratory/advcal

바로 환경을 구축해 보겠습니다. 노선도의 액세스 키는 ./work_dir/ews_rosenz/setup_ews_rosenz.sh 로 설정해 주십시오.
GUI 샘플 과 같이, 역 스파아토 노선도 의 액세스 키를 설정 작업을 setup_ews_rosenz.sh 로 실시하고 있습니다.

$ git clone https://github.com/ValLaboratory/advcal.git
$ cd advcal/2018/docker_env/
$
$ # 駅すぱあと路線図のアクセスキー設定をおこなう。
$ ./work_dir/ews_rosenz/setup_ews_rosenz.sh <アクセスキー>
$
$ # Dockerイメージをビルドする。
$ docker-compose build ews_rosenz

Docker 이미지 빌드가 완료되면 컨테이너를 시작합니다.

$ docker-compose up ews_rosenz

컨테이너가 시작되면 웹 브라우저에서 다음 URL을 엽니다.

http://localhost-8080.com/

역 스파아와 노선도가 표시됩니다.


간단한 샘플 동작으로 노선을 클릭하면 노선 이름을 팝업이 표시됩니다.


HTML 파일이나 JavaScript는 로컬 호스트측의 work_dir/ews_rosenz/public_html 디렉토리에 놓이게 되어 있으므로, Rosen.js 샘플 코드 를 참조하면서, 필요에 따라서 수정해 이용자측에서 화면을 만들거나 HTML 파일 의 내용을 바탕으로 개발중인 웹 앱에 통합하는 것도 가능합니다.

요약

역 스파아토 노선도 의 환경을 Docker로 구축하는 순서를 소개했습니다.
역 스파아토 웹 서비스 의 GUI 샘플 도 그렇습니다만, 샘플이 있어도 실제의 환경 구축에는 수고가 걸리는 경우가 있거나 하기 때문에, Docker를 사용하는 것으로 그 수고를 삭감할 수 있으면 좋겠습니다.