20200719 近鉄伊勢志摩乗り潰し 「志摩スペイン村の影」

近鉄株主優待券消化のための限界乗り鉄第二弾として、未乗の鳥羽以南に乗るために伊勢志摩へ行った。

伊勢志摩ライナー

伊勢志摩ライナーは、伊勢志摩と大阪難波・名古屋・京都を結ぶ特急列車だ。志摩スペイン村の開業と合わせて1994年から運行されている。今はしまかぜにフラグシップとしての立ち位置を譲ったが、自分が子供のころから伊勢志摩へ行く特急列車として走り続けている。今回は大阪難波から賢島まで乗車した。

「スペイン村へ行く列車」としてデザインされただけに、各所にそのための意匠が残っている。一番は「ビュッフェコーナー」で、開業当初は営業していたが2002年に廃止されたらしい。その名残としてカウンターや電子レンジを見ることができるが、各所は固く施錠されている。カウンターの下にはおしぼりの段ボール箱が置いてあった。

絵は開園当初からおそらく変わっていない。

賢島を散歩した後、普通列車で折り返した。

志摩磯部駅

第二の目的地として、志摩磯部駅で下車した。

志摩磯部駅は磯部町の中心駅であるほか、長年志摩スペイン村の最寄り駅としての役割を担っていた。そのため駅舎はスペイン風の建築となっており、周辺の施設もスペイン風の建物が多い。しかし志摩スペイン村連絡バスの発着は鵜方駅へ変更され、それ以来閑散としてしまっている。

下車して強い廃墟感を感じた。洋風の建物がほったらかされて薄汚れてしまっており、不気味な感じをかもしだしている。洋風でコンクリート打ちっぱなしのような感じなので、薄汚れてしまい余計に不気味になっている。

上にあがろうとしたら、エスカレーターが閉鎖されていた。エレベーターは一応動いているらしい。

階段を上がると巨大コンコーススペースへ出た。このがらんどうになってしまっている感じが廃墟マニアにはたまらない。「かつてはたくさん旅行客がいたが今はいない」という栄枯盛衰を物語っている。

壁の謎の絵。スペイン風なのかなと思ったが近づいてみたらちがった。何やねんこれ。

駅舎内には数多くのテナントスペースがあるものの、すべて目張りされていたり、塗装が劣化したシャッターが閉まっていたり、営業している痕跡がなかった。バスが発着している頃はさぞかしにぎわったんだろうなと想像される。

近くは同様なスペイン風の建物が多い。ちゃんと手入れされているものから、駅と同様にホラー感あるものまでまちまち。ホテルは人はいるっぽいが「関係者以外立ち入り禁止」と書かれていた。調べてみるとちょうど数か月前に廃業したらしい。

公園のトイレまで微妙に洋風。

---

このあとは普通列車と急行を乗り継いで帰った。「普通列車より特急列車のほうが多い」と言われる末端ローカル線である志摩線でも、30分に1本普通列車が来る。特急列車が通ることもあるが保線もよい。近鉄はJRと異なり路線を自力で切り開いてきた企業だけに、大きな経営努力を感じた。

Vue.js (6) Vue RouterでSPAを実現する

webにおけるルーティングとは

ルーティング（routing）とは、「経路を指定すること」。ネットワークの分野でよく使われる用語で、そこではパケットの送受信の経路を指定するという意味で使われる。

webアプリでは「どのURLが指定されたときにどのような応答を返すか」を指定することを指す。例えば「mywebsite.com/hogeというURLにリクエストが来たらhoge.htmlを返す」「mywebsite.com/user_profileにリクエストが来たらユーザの情報のjsonを返す」といったことを指定する。

Vue Routerでルーティングするメリット

ルーティング機能自体はExpressやFlaskにも備わっているのだが、Vue Routerには特別なメリットがある。それは「画面全体を再読み込みすることなく画面表示を切り替えることができる」ということだ。

インターネット最初期、webで画面を遷移するには再度httpリクエストを飛ばして再読み込みする必要があった。JavaScriptの規格が確立されていわゆるAjaxの時代がはじまると、webページ全体の表示と非同期に通信を行い、webページの一部分（DOM）だけを更新することができるようになった。それでもその処理を逐次記述しないといけなかったり、特にDOMの書き換えにはDOMを取得して処理して更新するということをいちいち書かないといけなかったので、実装は非常に煩雑だった。そこで、そういった煩雑さを解消するためにVueなどのwebフレームワークが開発された、という経緯がある。

このような画面全体の更新を伴わないwebアプリをSPA（Single Page Application）という。

Vue Routerのインストール

Vueプロジェクトをcreateするときに、presetを選択するところで「Manually select features」を選択し、「Router」にチェックを入れる。

すでにcreateしたVueプロジェクトにRouterを追加するときは、vue add routerとする。

ルーティング設定

ルーティングの設定は、プリセットされているrouter/index.jsに記述する。routesリストにプリセットと同じようなjsonを追加する。もちろん追加するモジュールはimportしておく。

 const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

templatesへの書き込み

Vue Routerで書き換える表示部分は、vueモジュールのtemplates部分に<router-view/>と記述する。またvue-routerでルーティングするためのリンクは、通常の<a href>のようなタグではなく<router-link>を使う。

<template>
  <div id="app">
    <div class="globalMenu">
      <router-link to="/">Home</router-link> | 
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

Vue.js (5) flaskサーバにデプロイする

概要

vue-cliで作成したプロジェクトをPythonのwebサーバライブラリのflaskでデプロイしてみる。

flaskを使うメリット

webサーバはApacheやnginx、express（Node.js）などたくさんあり、どれでもVueプロジェクトをデプロイすることはできる（はず）。FlaskはPython上で動くのでPythonのライブラリが使えるというメリットがある。すなわちNumPyやTensorflow*1やScikit-learnをネイティブに使える。

Vueの設定

Flaskはcssやjsをstatic_folderに格納しなければうまく動かない。そのため、Vueがbuildするときにstatic下にcssとjsを生成するように設定する。

まずpublicディレクトリの下にstaticというディレクトリを作る。Vueのプロジェクトのルートにvue.config.jsというファイルを作成して下記の通り書き込む。

module.exports={assetsDir: 'static'}

この設定を行ったうえでbuildする。するとプロジェクトのルートの下にdistというディレクトリができ、中にbuildされたプロジェクトが生成される。

Flaskの設定

Flaskコンストラクタでtemplate_folderとstatic_folderを指定する。template_folderにはdistディレクトリを、static_folderにはdist/staticを指定する。

以上の設定の上でサーバを起動する。するとnpm run serveで実行したときと同様の画面が表示される。

Flaskがlocalhost以外からアクセスできない場合

Flaskを立ち上げているPC以外からFlaskで立ち上げたhttpサーバにアクセスできないことがある。これにはいくつかの原因が考えられる。

1つめに、app.runにhost=0.0.0.0と指定する。

app.run(host=0.0.0.0)

2つめに、OSやセキュリティソフトのファイアウォールによってポートがふさがっている場合がある。Windowsの場合、ポートが開いているかどうかはPowershellからTest-NetConnectionコマンドで確認することができる。

Test-NetConnection -ComputerName (IPアドレス) -Port (ポート番号)

*1:NodeでもTensorflow.jsを使えば実装できる。だがTensorflow.js用にモデルを変換する必要がある。