ワーパパエンジニアの学び手帳

ワーパパエンジニアの業務外での学びとかガジェットネタとか

【Playframework/Scala】Okでflashメッセージを表示できない件

Playframework/Scalaflashメッセージを表示したい場合、公式の記述を見るとResultに対して.flashingでkeyとvalueのMapを渡してやればよいとあります。

ScalaSessionFlash - 2.5.x

そこでOkに対して.flashingでメッセージを渡してやっても表示してくれず。。

Controllerはこちら。

class hogeController @Inject() (
  val messagesApi: MessagesApi,
  implicit val webJarAssets: WebJarAssets)
  extends Controller with I18nSupport {

  def index = Action.async { implicit request =>
    ~~
    Future.successful(Ok(views.html.hogeView().flashing("success", "hogehoge"))
  }

Viewはこちら。

@()(implicit request: RequestHeader, messages: Messages, webJarAssets: WebJarAssets)

@request.flash.get("success").map{msg =>
<div class="alert alert-success alert-dismissable">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
    <strong>@Html(msg)</strong>
</div>
}
@request.flash.get("error").map{msg =>
<div class="alert alert-danger alert-dismissable">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
    <strong>@msg</strong>
</div>
}

Viewを各ページのヘッダに配置して、flashメッセージが設定されている場合には表示するという内容です。
しかし上記のControllerの実装ではメッセージが表示されず。

調べてみると、これで躓いている人は結構いるみたいで。

stackoverflow.com

どうやらResultに対してflashスコープで設定した内容は次のリクエストで利用されるようで、画面表示で使いたいならRedirectしな!という感じっぽい。。
もしくは、上記リンクで記載のようにOkの引数で直接渡してやるか。

直接渡すのはまあいいんですがRedirect時のflashメッセージの実装はできるだけ変えたくない。ってことでViewを以下のようにしました。

@(message: Option[String])(implicit request: RequestHeader, messages: Messages, webJarAssets: WebJarAssets)

@request.flash.get("success").orElse(message).map{msg =>
<div class="alert alert-success alert-dismissable">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
    <strong>@Html(msg)</strong>
</div>
}
@request.flash.get("error").map{msg =>
<div class="alert alert-danger alert-dismissable">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
    <strong>@msg</strong>
</div>
}

変えたのは引数でOption[String]型のメッセージを受け取るようにしたのと、successメッセージの取得部分(ひとまずはindex表示時のinfoメッセージ的なものの表示を想定しての実装なので、successと一緒に。。)

メッセージ取得部分は、Option#orElseを使っています。
これを使うと、Someの場合にはSomeのまま返却、Noneの場合にはorElseで指定した値を返却するようです。
その後ろのmapをそのまま使うために、Optionで取得するのはそのままにしたかったのですが、ちょうどいい実装方法がありました。
OptionだとgetとかgetOrElseしか使ったこと無かったんですが(浅い独学scala経験。。)、この辺も使いこなせるようになりたいところ。

今回は以上です!

Scalaスケーラブルプログラミング第3版

Scalaスケーラブルプログラミング第3版

サクラエディタのgrepで不要なファイルを除外する

ザ・SIerの仕事、みたいなこのタイトル。苦笑
SIerで仕事している方には共感いただけると思うのですが、ファイルの検索とか影響調査とかでやたらとgrepをする機会が多いです。
SVNのブランチごとgrepしようというとき、SVN管理用?のファイルが邪魔になります。
ファイルの拡張子指定でgrepするときはいいのですが、拡張子関係なく全体を検索したい場合に、邪魔なファイルを除外する方法を調べました。

関連記事
us-key-tech.hatenablog.com

SVN管理ファイルをgrep対象から外す

f:id:us_key:20170204144054j:plain
画像の編集がものすごく雑でアレなのですが。。

  • ファイル名の条件に「!*.svn-base」を指定⇒拡張子が「svn-base」のファイルをgrep対象から除外する。

ファイル名の条件で「!」の後にgrep対象から外したいファイルを指定することで、検索条件から外すことができます。結構直感的に分かりやすい書き方ですね。もうちょい正規表現でうにょうにょしないといけないかと思ってたのですが。

ちなみに、条件は「複数の単語のうちどれかが含まれる行」を抽出するために正規表現で書いたつもりだったのですが、どうやら単純に単語をパイプ(|)でつなげばいいらしい。。
正規表現はまだまだ苦手なので勉強しなくては。迷わず使えるのと使えないのでは大違いなので。

[改訂新版]正規表現ポケットリファレンス

[改訂新版]正規表現ポケットリファレンス

自作サイトをレスポンシブ対応しようとして躓いた話

自作のサイトをスマートフォンとPC両方で使えるよう、レスポンシブ対応しようとしました。

デザインはとりあえずそれなりの見た目になればいいのでBootstrap3を使い、グリッドシステム使えば画面幅によって表示を最適化してくれるんでしょってな感じで。

グリッド・システム ≪ CSS ≪ Bootstrap3日本語リファレンス

しかし、最適化されず、スマートフォンでみるとめっちゃ縮小して表示される。。。

正確には、tableタグ(を囲っているdivタグ)にtable-responsiveクラスを適用して、レスポンシブな表(画面幅で表示しきれない分は表の中で横スクロールして表示する)を表示したかったのですが、表がめっちゃ縮小して表示されました。

別に作っていたサイトはレスポンシブに表示されていて、「なんでやねん!」と一人突っ込みを入れていたのですが、HTMLをよくよく比較してみると、ただ単にmetaタグ1行抜けていたという結論に。。

tech.nitoyon.com

スマホートフォンは PC 向けのサイトを表示するときには、「横幅 980px 向けにデザインされている」という前提で描画する。結果として、文字が小さくなる。

なるほど、それで横幅980px想定で幅いっぱいに表を表示してくれていたのね。

で、デバイスごとの表示幅に合わせて表示するには、以下をmetaタグに入れましょうと。

<meta name="viewport" content="width=device-width">

width=device-widthってのが「デバイスの幅で表示」を意味するわけですね。

なお、縦向け、横向けで文字の表示サイズなどを変更したくない場合には、以下のようにすればいいようです。

HTMLに以下のmetaタグを。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

CSSに以下の指定を。

body {
  -webkit-text-size-adjust: 100%;
}

これをやると表示サイズが固定されるのでスマホでの拡大縮小ができなくなるようですが、自分はスマホでの文字入力時に勝手に入力欄が拡大されてしまうのをこれを使って防ぐという利用の仕方をしています。

スマホで入力欄を選択したときに勝手に画面が拡大されたりするとイラっとします、よね??

今日は以上ですー。