keicy / whisky-taste Goto Github PK

#8 の作業途中にて実施した。ログとしてこちらに切り出しておく。

play-slick

• ORマッパ,DBアクセスツール
• https://github.com/playframework/play-slick#all-releases
  • 使用する play のバージョンによって対応するバージョンが違うので導入時に注意

現状、どのURLを入力しても全てTOPにリダイレクトされてしまう。

原因

index.js にてロード時にTOPにリダイレクトさせているのが原因。

修正

下記のような感じ

  redirect(getURL()) // ここで入力されたURLに飛ぶようにする

const getURL = (url = location.href) => {
  const urllist = url.split(URL_ROOT)
  if (lngth === 1) '#'  // 初回アクセス用 (#がないとき)
  else urllist[1]
}

特に、投稿画面を閉じた時の画面遷移などで / に遷移したときに全てが mount しなおされてしまう（と思う）。
storeに isLoaded フラグを作成しておき、初回アクセス時にそれを t に設定、以降、t なので必要ないものは mount しない、という処理を追加する。

• 画面初期ロード時に初期データ取得

サイト全体のスタイルを整える

ウイスキーを選択式にし、それに紐づくレビューとする。

要点

• DB設定をどう上書きするか

ドキュメント

• https://www.playframework.com/documentation/2.5.x/ProductionHeroku#Connecting-to-a-database
• https://www.playframework.com/documentation/2.5.x/ProductionConfiguration
• https://devcenter.heroku.com/articles/getting-started-with-scala#introduction
• https://devcenter.heroku.com/articles/play-support

JSのビルドとPlayのビルドを両方実行するため、Nnde,Scalaの2つのビルドパックを適用することが必要。ただ、今回はうまくできなかったので、ひとまず単純にビルド済のbundle.jsをherokuにアップロードすることで対応した。 npm run build と sbt compile state を順に実施するタスクランナーを用意してやるほうが良いのかもしれない。

• https://devcenter.heroku.com/articles/using-multiple-buildpacks-for-an-app
• https://hogehuga.com/post-1293/

SBTにherokuプラグインがありそれを用いてデプロイする手順もあるらしいが今回は使っていない.

• https://devcenter.heroku.com/articles/deploying-scala-and-play-applications-with-the-heroku-sbt-plugin

作業要点

• heroku用の設定ファイル heroku.conf を追加しそれを利用
• DBの接続設定には JDBC_DATABASE_XXX を利用
  • https://www.playframework.com/documentation/2.5.x/ProductionHeroku#Connecting-to-a-database
  • heroku ではなくPlayの「herokuにデプロイ」のページにこれら変数を使うことが書いてあった
  • 動作しているが、もし不具合ある場合はherokuのブラウザコンソールから独自の環境変数設定すれば良い
• ensimeScalaVersion があるとなせかheroku でコンパイルが失敗するので削除

riot-routeの機能を使うようにする。

Flux的な、一方通行のデータフローの導入

候補は3つ

• Riotの機能で素組み
• https://github.com/obseriot/obseriot
  • 参考
• https://github.com/jimsparkman/RiotControl
  • 参考

Fluxというよりも、一方通行のMVC的なイメージが頭にあるので検証も兼ねて素組みでも良いかも。
RiotControlは更新が止まっているのが気になる。obseriotの方がその点で良いかもしれない。

• 仮フォームから投稿したレビューデータがDBに保存され永続化されるようにする
• そのためのAPIを作成する
• また、このために必要な基本的なサーバサイド環境を整備する

• Router
• ビルド
• サンプルページ

原因

URL遷移の window.location.href = this.store.data.url にて、代入するURLが絶対パス表記になってしまっているため Riot-router が認識せず、画面再読み込みになってしまっている。
全てのページヘの遷移について、下記のようなURLを指定するようにする。

• href = '# ' // TOPへ
• href = '#/whiskies' // ウイスキー一覧へ

生成されるコードにて、トレイト内でモデルのケースクラスが定義されているためパス依存型となっており、型解決ができないため。
イシューも立っているが根本的には解決されていない。対処法が投稿されているのでトライしてみる。

デモのとこにクローム推奨追加

ブラウザから直接アクセスするとエラーが発生する件の解消

参考用に残していたコードなど、App動作に不要なファイルを削除

レスポンシブ記載

多分デフォルトでH2,SQLiteあたりが入っているはず。それを使う。

Riotでは入力に即座に反応するには onchange ではなく oninput を使う必要がある.変更する.

route(//hoge) と書かないと ~/#/hoge となってくれない..共通関数にくくって対策する.