Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

Elixir+PhoenixとSpread.Viewsでリアルタイムな出勤管理アプリを作ろう

IoT時代の救世主! SpreadJSで作るデータ可視化アプリ 第2回

  • LINEで送る
  • このエントリーをはてなブックマークに追加

目次

Web側の実装(2)

ルーティングの追加

 まずは/shifttableでアクセスできるように処理を追加していきます。

 lib/myapp_web/router.exにルーティングを追加します。

 get "/shifttable", ShifttableController, :shifttableを追記します。

lib/myapp_web/router.ex
//省略

  scope "/", MyappWeb do
    pipe_through :browser # Use the default browser stack

    get "/", PageController, :index
    get "/shifttable", ShifttableController, :shifttable #shifttableを追加
  end

//省略

 /shifttableにアクセスがあった時にShifttableControllershifttableメソッドを実行します。

コントローラーの追加

 次にコントローラーの作成です。lib/myapp_web/controllers/shifttable_controller.exを作成します。

defmodule MyappWeb.ShifttableController do
  use MyappWeb, :controller

  def shifttable(conn, _params) do
    render conn, "shifttable.html"
  end
end

 サーバー側では特に処理を入れず、shifttable.htmlを返す処理となっています。

ビューの作成

 次はビューです。

 まずはViewモジュールを作成します。

 lib/myapp_web/views/shifttable_view.exを作り、以下を記述します。

lib/myapp_web/views/shifttable_view.ex
defmodule MyappWeb.ShifttableView do
  use MyappWeb, :view # ビュー関連の機能を使うための宣言
end

 次にテンプレートの作成です。

 lib/myapp_web/tempaltesshifttableフォルダを作成します。

 また、その中にshifttable.html.eexを作成しましょう。

 先ほどのコントローラーでshifttable.htmlを指定した場合、shifttable.html.eexがテンプレートファイルになります。

 このeexファイルにSpread.Viewsのデモコードをもとにbody部分を記述します。

lib/myapp_web/tempaltes/shifttable/shifttable.html.eex
<body style="margin:0;position:absolute;top:0;bottom:0;left:0;right:0;font-size:14px;user-select:none;-webkit-user-select: none;overflow:hidden;">
    <div class="wrapper">
        <div class="button-container " id="calendarCommandPanel">
            <div class="dateTextTitle">
                <div id="title" style="font:400 18px arial,sans-serif;text-align: center;">20 Aug 2012-26 Aug 2012
                </div>
            </div>
            <div class="btn-group btns" rol="group" style="float: right">
                <div class="btn btn-default" id="btn-previous">
                    <i class="demo-icon icon-left-big"></i>
                </div>
                <div class="btn btn-default" id="btn-next">
                    <i class="demo-icon icon-right-big"></i>
                </div>
            </div>
        </div>
        <div id="gridContainer" style="height:720px;min-width: 800px">
            <div id="grid1" style="height:100%;position: relative"></div>
        </div>
    </div>

    <script src="<%= static_path(@conn, "/js/app.js") %>"></script>
</body>

 JSファイルは<script src="<%= static_path(@conn, "/js/app.js") %>"></script>の部分でSpread.Viewsのライブラリ群も含めてビルドされたJSファイルが読み込まれます。

 また、大元のレイアウトテンプレートはlib/demo_web/templates/layout/app.html.eexに記載されているので、こちらも以下の内容に編集します。

lib/demo_web/templates/layout/app.html.eex
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Hello Demo!</title>
    <link rel="stylesheet" href="<%= static_path(@conn, "/css/app.css") %>">
  </head>

  <%= render @view_module, @view_template, assigns %>

</html>

 こちらの<link rel="stylesheet" href="<%= static_path(@conn, "/css/app.css") %>">の記載もJSファイル同様でビルドされたCSSファイルが読み込まれます。

途中経過確認

$ mix phx.server

 でサーバーを起動できます。また、Node.jsなどと同様でCtrl+Cで終了できます。

 この際に[error] Could not start node watcher because script "/home/n0bisuke/phoenixBI/demo/assets/node_modules/brunch/bin/brunch" does not exist. Your Phoenix application is still running, however assets won't be compiled. You may fix this by running "cd assets && npm install".などのエラーが出た場合は、以下のコマンドで再実行しましょう。

cd assets && npm install

 無事に起動できると以下のような表示になります。

[info] Running DemoWeb.Endpoint with Cowboy using http://0.0.0.0:4000

 ブラウザでhttp://localhost:4000/shifttableにアクセスすると、カレンダーが表示されています。

 ランダム表示となる処理が書いてあるので更新するたびに表示が変わります。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 菅原のびすけ(dotstudio株式会社)(スガワラ ノビスケ)

     日本最大規模のIoTコミュニティ「IoTLT」主催。岩手県立大学大学院ソフトウェア情報学研究科を卒業後、株式会社LIGでWebエンジニアとして入社し、Web開発に携わる。2016年にdotstudio株式会社を立ち上げ、今はIoT領域を中心に活動している。JavaScript Roboticsコミ...

バックナンバー

連載:IoT時代の救世主! SpreadJSで作るデータ可視化アプリ
All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5