ect共有用

スタイルについて

_layout.scss に全ページ共通のレイアウトを定義するSCSSファイル、
layouts/* に個別ページで共通のレイアウトを定義するSCSSファイルを配置しています。

Javascriptについて

ブラウザのコンソールを開くと、"sample.js","sample2.js" と記載があり、
それぞれ、src/scripts/sample1.js, src/scripts/sample2.js が読み込まれているのが分かります。
sample1がjQueryを用いたサンプル、sample2が素のjsのサンプルになります。

詳細な設定は /webpack.config.js に記述しています。

新規ページの追加について

レイアウトについて

リンクについて

各URLのパラメタは config/routing.json に定義がされています。
例えば、Aboutページにリンクを貼るときは <a href="<%= @funcs.url 'App.About' %>">UMASTERとは？<a> と記載します。

URL中に引数を渡す必要がある場合、 <%= @funcs.url 'Thoroughbreds.Detail',{id:'1234'} %> のように指定します。

フォームで使用する際も、同様にactionパラメタを @funcs.url を使用して指定してください。
例：<form method="post" action="<%= @funcs.url 'Thoroughbreds.Index' %>">

@funcs.url を使用してURLを指定することで、仕様変更に起因するURLを変更した場合に、 routing.json を変更するだけでリンク切れを起こさなくなります。

画像について

@funcs.resourcesmap を用いて読み込むことで、画像のハッシュ値で更新の有無を判定し、アプリケーションの更新後に同一の画像が表示され続けるのを防ぎます。
また、ハッシュによってキャッシュのコントロールも行われるため、

@funcs.resourcesmap は画像以外にも、srcディレクトリ以下に配置されたものについては使用できます。
例えば、views/layouts/layout_public.ect では、CSSやJavascriptが @funcs.resourcesmap を使用して読み込まれているのが分かります。
実際にブラウザでソースコードを確認すると、読み込み部分にハッシュ値が割り振られており、CSSを更新するとハッシュ値も同様に変化することがわかります。

カスタムスクリプト

launchpack.js でサーバーサイドでレンダリングするためのカスタムスクリプトを定義できます。

例えば、下記のように定義すると共通ステータスのENUMから表示用の文言へ変換が行なえます。

exports.exampleStatusText = (status) => {
  switch (status) {
    case "failed":
      return "失敗";
    case "success":
      return "成功";
  }
};

<%= @appFuncs.exampleStatusText "success" %> # 成功と表示される

また、サーバーサイドで実行が行われるため、 package.json で定義したライブラリの利用もできます。
下記の例では、APIで取得した時間を任意の形式へ変換を行っています。

const moment = require("moment-timezone");
moment.tz.setDefault("Asia/Tokyo");

// フォーマットの記載方法
// https://momentjs.com/docs/#/displaying/format/
exports.timeFormat = (timeStr, format) => {
  if (timeStr == null) {
    return "";
  }
  let time = moment(timeStr);
  return time.format(format);
};

<%= @appFuncs.timeFormat map_search.last_update,"YYYY-MM-DD HH:mm" %> # 日付が指定した形で表示される