2018/04/18


golang の html/template について書かれたブログ等を色々見ていると、みんなレイアウトとコンテンツの分離に苦労している感があったのでどうやるか書いておきます。

t.ExecuteTemplate(w, "content", data)

Go の html/template はテンプレートの名称を指定して ExecuteTemplate を実行します。しかし html/template には、その content を囲う layout テンプレートを指定する方法がありません。特に以下の様に ParseGlob を使った場合、各 html で同じ content という名前で define する事は出来ません。

template.ParseGlob("public/views/*.html")

やりたいのは layout というテンプレートの中から content という名称で読み込まれ、その content に今回実行したいテンプレート、例えば search を適用したいはずです。

{{define "layout"}}
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>{{.Title}}</title>
</head>
<body>
{{template "content" .}}
</body>
</html>
{{end}}

これを実現するには AddParseTree を使います。

template.Must(template.Must(t.templates.Lookup("layout").Clone()).AddParseTree("content", t.templates.Lookup("search").Tree)).ExecuteTemplate(w, "layout", data)

layout という名称のテンプレート(上記)をクローンし、そのパース済みツリーに content という名前で実行したい別のテンプレート search のパース済みツリーを追加します。これで、layout という名前の一時テンプレートには、content という名前で search の内容が出力される事になります。もちろん ExecuteTemplate に渡すデータには、layout テンプレートで使うタイトル文字列も渡す事になります。

template.Must(template.Must(t.templates.Lookup("layout").Clone()).AddParseTree("content", t.templates.Lookup("search").Tree)).ExecuteTemplate(w, "layout"struct {
    Title  string
    Message string
}{
    Title:   "検索",
    Message: "検索結果はありません",
})

ただしこの方法は、ソースコードに layout という文言が埋め込まれる事になり、content テンプレートの方からレイアウトテンプレートを選ぶ方法がありません。この問題を回避するには、Jekyll のテンプレートの様に、HTML ファイルのヘッダ部に YAML の様なメタ情報を書かせてテンプレート名とレイアウトのペアをプログラムで管理しておき、名称からそのペアを取り出せる仕組みを作っておけば良いですね。

みんなのGo言語[現場で使える実践テクニック] みんなのGo言語[現場で使える実践テクニック]
松木雅幸, mattn, 藤原俊一郎, 中島大一, 牧大輔, 鈴木健太
技術評論社 / (2016-09-09)
 
発送可能時間:


2018/03/30


Go と Vue.js を使ってどれくらいシームレスにウェブアプリを作れるかを確認したかったのでタスク管理アプリを作ってみた。サーバは Go なので vue-cli や webpack 等は使わない。全て CDN から。Vue.js でアプリのベースを、UI コンポーネントとして Element、Ajax ライブラリとして axios を使った。

以前、Riot.js を使って Todo アプリを作った時はサーバ作るのにも少し時間が掛かったので、今回は横着して echo-scaffold を使った。

GitHub - mattn/echo-scaffold

README.md Echo Scaffold Echo Scaffold is CLI to generate scaffolds for the echo framework.

https://github.com/mattn/echo-scaffold

echo-scaffold を使えば、タスク管理アプリとして必要な「本文」と「実施済み」という属性をモデルにした REST サーバを簡単に作る事が出来る。

$ echo-scaffold init go-vue-example
        create  /home/mattn/go/src/github.com/mattn/go-vue-example/helpers/database.go
        create  /home/mattn/go/src/github.com/mattn/go-vue-example/helpers/errors.go
        create  /home/mattn/go/src/github.com/mattn/go-vue-example/helpers/response.go
        create  /home/mattn/go/src/github.com/mattn/go-vue-example/config/database.go
        create  /home/mattn/go/src/github.com/mattn/go-vue-example/config/environment.go
        create  /home/mattn/go/src/github.com/mattn/go-vue-example/controllers/router.go
        create  /home/mattn/go/src/github.com/mattn/go-vue-example/controllers/suite_test.go
        create  /home/mattn/go/src/github.com/mattn/go-vue-example/go-vue-example.go

$ cd go-vue-example
$ echo-scaffold scaffold task body:string done:bool
        create  models/task.go
        create  models/task_dbsession.go
        create  controllers/tasks.go
        create  controllers/tasks_helpers.go
        create  controllers/suite_test.go
        skip  controllers/suite_test.go
        insert  controllers/router.go

モデルとコントローラ、コンフィグや mongodb へのアクセスも生成される。生成された main 関数に少し手を入れて静的ファイルをサーブ出来る様にする。js 側のモデルとのバインディングを書く。

<div id="app">
  <el-main v-loading="loading">
    <h2>My Tasks</h2>
    <el-input placeholder="Please input your task" v-model="newTask" v-on:change="addTask()"></el-input>
    <ul class="list-group">
      <li class="list-group-item" v-for="task in tasks">
        <el-checkbox :checked="task.done" v-on:change="doneTask(task)">{{ task.body }}</el-checkbox>
      </li>
    </ul>
  </el-main>
</div>  
<script src="/static/app.js"></script>

app.js はこんな感じ。

ELEMENT.locale(ELEMENT.lang.ja)
var app = new Vue({
  el: '#app',
  data: {
    tasks: [],
    newTask: "",
    loading: false,
  },
  created: function() {
    this.loading = true;
    axios.get('/tasks')
      .then((response) => {
        console.log(response);
        this.tasks = response.data.items || [];
        this.loading = false;
      })
      .catch((error) => {
        console.log(error);
        this.loading = false;
      });
  },
  methods: {
    addTask: function(task) {
      this.loading = true;
      let params = new URLSearchParams();
      params.append('body'this.newTask);
      params.append('done'false);
      axios.post('/tasks', params)
        .then((response) => {
          this.loading = false;
          this.tasks.unshift(response.data);
          this.newTask = "";
          this.loading = false;
        })
        .catch((error) => {
          console.log(error);
          this.loading = false;
        });
    },
    doneTask: function(task) {
      this.loading = true;
      let params = new URLSearchParams();
      params.append('done'!task.done);
      axios.put('/tasks/' + task.id, params)
        .then((response) => {
          console.log(response);
          this.loading = false;
        })
        .catch((error) => {
          console.log(error);
          this.loading = false;
        });
    } 
  }
})

これだけで簡単にタスク管理アプリが書ける。Vue.js 便利やね。echo-scaffold で生成したコードを一切触ってないし、動作確認は MongoDB Atlas を使ったので、実際の作業は echo-scaffold の実行とフロントエンドのコードを書いたくらい。Element 超良いし axios も良いし、この3点あればだいたいのアプリは作れる。サーバは JSON が吐ける REST サーバであれば何でもいい。

Task管理アプリ

作った物はここに置いた。

GitHub - mattn/go-vue-example
https://github.com/mattn/go-vue-example

個人的な思いとしては Element にもう少し便利な UI が増えてくれればなぁと思う。

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで 改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで
山田 祥寛
技術評論社 / ¥ 2,800 (2016-09-30)
 
発送可能時間:在庫あり。


2018/03/15


pingを打つと「にゃーん」を返すサービス、ネットワークエンジニアが開発 - ITmedia NEWS

関連記事 メイドさんと一緒に学ぶ「週末プログラミングスクール」開校 そこに隠された2つの社会的意義 一見、華やかな場の創造に見えるこの取り組みだが……。 太田智美がなんかやる:WWDC冒頭で、クックC...

http://www.itmedia.co.jp/news/articles/1709/07/news106.html

ping を打ったら「にゃーん」と文字が表示されるサービス。ICMP でメッセージを送信したら応答を返す、普通のプロトコルなのだけど、文字のドットが存在する部分だけタイムアウトエラーが発生するという物。どうしてもこれを Windows でしかも golang で実行したかったので作ってみた。golang にも ICMP プロトコルを扱うパッケージが用意されている。

icmp - GoDoc

Package icmp provides basic functions for the manipulation of messages used in the Internet Control Message Protocols, ICMPv4 and ICMPv6.

http://godoc.org/golang.org/x/net/icmp

送信は icmp.Message という struct に icmp.Echo を設定し、メッセージとして(なんでもいいのだけど) HELLO(R-U-THERE) を送信します。

wm := icmp.Message{
    Type: ipv4.ICMPTypeEcho,
    Code: 0,
    Body: &icmp.Echo{
        ID: os.Getpid() & 0xffff, Seq: i,
        Data: []byte("HELLO-R-U-THERE"),
    },
}
wb, err := wm.Marshal(nil)
if err != nil {
    log.Fatalf("Marshal: %v", err)
}
if _, err := c.WriteTo(wb, &net.IPAddr{IP: ip.IP}); err != nil {
    log.Fatalf("WriteTo: %v", err)
}

受信は 0.1 秒のタイムアウトを付け、時間切れもしくはレスポンス異常であれば U を、正常であれば ! を表示します。

c.SetReadDeadline(time.Now().Add(timeout))
rb := make([]byte1500)
n, _, err := c.ReadFrom(rb)
if err != nil {
    fmt.Print("U")
else {
    rm, err := icmp.ParseMessage(ipv4.ICMPTypeEcho.Protocol(), rb[:n])
    if err == nil && rm.Type == ipv4.ICMPTypeEchoReply {
        fmt.Print("!")
    } else {
        fmt.Print("U")
    }
}

文字幅が 70 桁を超えれば改行します。

にゃーん

うまく表示する事が出来ました。コードは以下に置いておきます。適当に改造するなりして遊んで下さい。尚、IP プロトコルを使うので実行には管理者権限が必要です。

GitHub - mattn/nyan-ping

にゃーん

https://github.com/mattn/nyan-ping
みんなのGo言語[現場で使える実践テクニック] みんなのGo言語[現場で使える実践テクニック]
松木雅幸, mattn, 藤原俊一郎, 中島大一, 牧大輔, 鈴木健太
技術評論社 / (2016-09-09)
 
発送可能時間: