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本格入門 ~モダンスタイルによる基礎から現場での応用まで
山田 祥寛
技術評論社 / ¥ 3,218 (2016-09-30)
 
発送可能時間:在庫あり。

Posted at by



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)
 
発送可能時間:

Posted at by



2018/02/21


Twitter で「読みたい」と呟いたら著者の武内覚さんから献本しましょうかとお声を掛けて頂いたので即答でお願いしました。

僕はいつも Linux でしか動作しないソフトウェアを Windows に対応させるパッチを書いたりしているので、普段 Windows しか触っていないと思われがちですが、実は僕が Linux を触り始めたのは 1996 年にトッパンから出版された「Linux 入門」くらい昔だったりします。ちょうど Linux 2.0 が出た頃だったと思います。その頃の Linux はようやく SMB カーネルが出た頃で、まだまだお遊び感のある OS で不安定でもありました。ディストリビューションもほぼ Slackware くらいしか無かったかもしれません。

あの頃の Linux はインターネットを検索しても殆ど情報が出て来ず、本気で調べるにはソースコードを読むしかありませんでした。当時、父親から譲り受けたノート PC に躊躇いもなく Linux を入れたはいいが、SiS チップセット用ディスプレイドライバが OpenGL を実行すると重たくなるという現象に出くわし、なんとか問題を解消したくて何日も何日もソースを読んでハックしていました。あれから比べれば Linux は巨大になりました。ユーザ数も信じられないくらい増えました。今やサーバといえば Linux が一般的ですし、こんなに手軽に Linux が起動出来る世の中になるとは思っていませんでした。そして何よりもインターネットには様々な Linux の情報が溢れる様になりました。

ただしブログ等で情報が溢れた事で、適当な情報を鵜呑みにしてしまいやすいという悪い側面も出て来てしまいました。正しい情報とは実際に手を動かした人から得たい物です。また、知らない事を解決するのにインターネット検索を使ってしまうと、その知りたかった情報だけを得てしまうので、知りたくなかった情報には行き届かない事もあります。

例えば UNIX の time コマンドは引数のコマンドを実行した後 real、user、system の数値を表示しますが、個々の意味をちゃんと理解していないプログラマも少なからずいるのではないでしょうか。free コマンドの出力を見て、今 OS がどういう状態なのか理解していない人もいるのではないでしょうか。理解したつもりになっているだけだったりしないでしょうか。

最近の OS は色々な最適化が施されておりそれ故に複雑になってきています。プログラムが遅いという事象だけから原因を突き止めるのは本当に難しいです。だからこそボトルネックを疑う為の材料が多く必要なのです。知識がないと高価な CPU やメモリを買い足すことしか出来なくなります。

本書はこういった基本的な知識を埋める所から章が始まります。今までなんとなくしか理解していなかった Linux の内部を、図解で細かく説明してくれています。OS 上でメモリがどの様に管理されているのか、OS はファイルシステムをどの様に扱っているのか等を、誰でも分かる(であろう)レベルで書いてあります。

こういった書籍の多くは、難しい用語を並べて読者を振り切ってしまう事が多いのですが、本書では始めの数章を使って知識を固め、徐々に知識レベルを上げていってくれているお陰で挫折する方も少ないのでと思います。

ちなみに僕が特にワクワクしたのは第8章の「ストレージデバイス」について書かれている章でした。検証コードを使ってシーケンシャル/ランダムアクセスを HDD と SDD の両方で試し、read/write がサイズの変化によってどのくらい性能に影響が出るかを実験しています。まだ読んだだけで試していないので、後で実際に試してみようと思っています。

この他にも本書では検証コードを使った実験が沢山あります。「これこんな事やったらどうなるんだろ」と思っていた実験も自分でソースをコンパイルして試せる様になっています。おそらく読者が実行する環境で結果も異なってくるでしょう。だからこそ実際に手を動かして得られた情報は貴重なのです。本書はこの様な知見の詰まったとても良い本だと思いました。

Posted at by