2019-03-16

elmで作った静的サイトをgithub pagesで公開してみた

elm webpack Travis CI

最近ブログ書くのをサボっていたのでなにか書こうと思い、そうだ最近触っているElmについて書こう！と思い書きました。時間がかなり遡るのですが年末年始は実家に帰省していて、その際にElmを試しに触っていて簡単なサイトを作ってGithub Pagesで公開したので、その手順を書き残しておきます。

Elmとは
完成品
Elmの準備
Htmlファイル
Javascriptファイル
Webpackの使用
CIでビルド・公開周りを自動化
まとめ

Elmとは

　ちょっと触っただけなので詳しくは説明できないのですが公式から抜粋すると以下の特徴があります。
- 実行時の例外が一切起きない
- virtual DOMを使用するがすべての値はイミュータブルなのでベンチマークがすごくいい
- セマンティックバージョンを強制できる
などの特徴があります。

完成品

Elmで書いて動いたものは下のサイトになります

https://jon20.github.io/mypage/

Githubは下になります

github.com

最終的にディレクトリは以下になりました。

.
├── README.md
├── elm-stuff
├── elm.json
├── package.json
├── src
│   ├── Main.elm
│   ├── assets
│   │   └── flog.jpg
│   ├── index.html
│   ├── index.js
│   └── main.scss
├── webpack.config.js
└── yarn.lock

Elmの準備

Elmのインストールに関しては割愛させていただきます。 Elmのインストールができたら対象のディレクトリでelm initを行ってください。
src配下にElmのファイルを書いていく形になります。特にElmで書いたものが手元になければElm-lang.orgのQuick Sampleにあるカウンターアプリがあります。コードは下のIntroductionにかかれています。

guide.elm-lang.org

Htmlファイル

Javascript Interopに書かれているようなやり方になります。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="./assets/flog.jpg">
    <title>jon</title>
</head>
<body>
    <div id="elm"></div>
</body>
</html>

Javascriptファイル

汚いですが、idがelmの要素にelmを紐付ける形になります。

'use strict';
require('./main.scss');
import Image from './assets/flog.jpg'
const {
    Elm
} = require("./Main.elm")

const app = Elm.Main.init({
    node: document.getElementById('elm')
});

Webpackの使用

あんまりwebpack詳しくないのですが、色々参考にしながら作成しました。必須になるプラグインは

html関連
- html-loader
- html-webpack-plugin
Elm関連
- elm-webpack-loader
CSS関連
- style-loader
- css-loader
- sass-loader ※Sass使う場合

だと思います... 画像とか扱う場合はfile-loaderが必要になると思います。
必要ない場合はfile-loaderらへんはコメントアウトしてください

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: './src/index.js',

  output: {
    path: __dirname + '/dist',
    filename: 'index.js'
  },

  resolve: {
    extensions: ['.js', '.elm', '.scss']
  },

  module: {
    rules: [{
        test: /\.html$/,
        exclude: /node_modules/,
        use: [{
          loader: 'html-loader',
        }, ]
      },
      {
        test: /\.(jpg|png)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'assets/',
          }
        }
      },
      {
        test: /\.elm$/,
        exclude: [/elm-stuff/, /node_modules/],
        use: {
          loader: 'elm-webpack-loader',
          options: {
            verbose: true,
          }
        }
      },
      {
        test: /\.scss$/,
        use: [{
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              url: true
            }
          },
          {
            loader: 'sass-loader',
          }

        ],

      }
    ],

    noParse: /\.elm$/
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html"
    })
  ],

  devServer: {
    inline: true,
    stats: 'errors-only'
  }
};

CIでビルド・公開周りを自動化

今回はTravis-CIを使いました。 masterにpushされたらyarn install走らせて、gh-pages branchにpushする形となっています。
yarn buildはpackage.jsonで定義されたスクリプトが走っています。

language: node_js
elm:
  - elm0.19.0
node_js:
  - "10"

cache:
  yarn: true
  directories:
    - "node_modules"

branches:
  only:
    - master

install:
  - yarn install
  - yarn build

script:
  - echo "Skipping tests"

deploy:
  provider: pages
  skip-cleanup: true
  github-token: $GITHUB_ACCESS_TOKEN
  target-branch: gh-pages
  local-dir: dist
  on:
    branch: master

まとめ

超ざっくりですがElmをgithub pagesで公開する手順を書きました。簡単にElmで作ったプロダクトがノーコストで公開できるので便利ですね。
WebpackらへんやCIらへんも一緒に試せるのでぜひ挑戦してみてください。
Quick Sampleをgithub pagesで公開するだけなら余分な所が多いので余力があったらサンプルを追加します...
あと、今回作ったものを読み込むときに一瞬ちらつくのですが読み込み順の問題なのかな...

2018-12-11

gRPCで動画ファイルの送受信を行ってみる

Go4 Advent Calendar 2018 11日目です。
今回はgRPCを使ってmp4で作成した動画ファイルをstreamを使って送受信してみようと思います。
コードがあまりきれいでないかもしれませんがよろしくお願いします。

はじめに
gRPCとは
protoファイルの定義
Serverの作成
Clientの作成
完成！
まとめ

はじめに

今回作成したサンプルコードはgithubに置いておきます。

github.com

gRPCとは

Googleが開発しているOpen SourceのRPC frameworkになり、Protocol Buffersを使ってサービス間のインターフェースをprotoファイルに定義します。また、試してませんが他言語間の通信も可能みたいです。

grpc.io

Protocol Buffersでどう定義するのかは下記のドキュメントに詳しく書かれています。

developers.google.com

protoファイルの定義

upload.proto

syntax = "proto3";
package upload;

service UploadHandler {
  rpc Upload(stream UploadRequest) returns (UploadReply) {};
}

message UploadRequest { bytes VideoData = 1; }

message UploadReply { string UploadStatus = 1; }

syntaxはproto3を利用しています。
serviceブロックの中に利用するメソッドを定義します。今回はmp4ファイルを受け取り、成功したらメッセージを返すようなメソッドを定義しています。
ここでUploadRequestの前にstreamをつけているのですが、これを記述することで一つのリクエストを複数のリクエストに分割することができます。今回はClient Streaming RPC方式になると思います。
また、このprotoファイルで生成したgoのファイルはclientとserverの両方必要になります。

Serverの作成

handler.go

func NewUploadServer(gserver *grpc.Server) {
    uploadserver := &server{}
    upload.RegisterUploadHandlerServer(gserver, uploadserver)
    reflection.Register(gserver)
}

type server struct{}

func (s *server) Upload(stream upload.UploadHandler_UploadServer) error {
    err := os.MkdirAll("Sample", 0777)
    if err != nil {
        return err
    }
    file, err := os.Create(filepath.Join("Sample", "tmp.mp4"))
    defer file.Close()
    if err != nil {
        return err
    }

    for {
        resp, err := stream.Recv()
        if err == io.EOF {
            break
        }
        if err != nil {
            return err
        }
        file.Write(resp.VideoData)
    }
    err = stream.SendAndClose(&upload.UploadReply{UploadStatus: "OK"})
    if err != nil {

        return err
    }
    return nil

}

handler.goではclientから受け取った動画データをSampleディレクトリにtmp.mp4として保存するような処理を行っています。成功したらOKの文字をclientに送信します。
main.go

func main() {
    lis, err := net.Listen("tcp", "localhost:8080")
    if err != nil {
        panic(err)
    }
    server := grpc.NewServer()

    handler.NewUploadServer(server)
    if err := server.Serve(lis); err != nil {
        panic(err)
    }
}

main.goではNewServerで空のgrpcサーバーの作成を行い、NewUploadServerで作成したserviceを登録してlocalhost:8080でサーバーを立ち上げます。NewServerは色々オプションを渡せるみたいです。

Clientの作成

main.go

func main() {
    connect, _ := grpc.Dial("localhost:8080", grpc.WithInsecure())

    defer connect.Close()
    uploadhalder := upload.NewUploadHandlerClient(connect)
    stream, err := uploadhalder.Upload(context.Background())
    err = Upload(stream)
    if err != nil {
        fmt.Println(err)
    }
}

func Upload(stream upload.UploadHandler_UploadClient) error {
    file, _ := os.Open("./sample.mp4")
    defer file.Close()
    buf := make([]byte, 1024)

    for {
        _, err := file.Read(buf)
        if err == io.EOF {
            break
        }
        if err != nil {
            return err
        }
        stream.Send(&upload.UploadRequest{VideoData: buf})
    }
    resp, err := stream.CloseAndRecv()
    if err != nil {
        return err
    }
    fmt.Println(resp.UploadStatus)
    return nil
}

予めsample.mp4ファイルを対象のディレクトリに用意してmakeでどれくらい送るか定義しています。そしてfor内でひたすらserverにリクエストを投げまくってます。送り終わったらCloseAndRecvでstreamをcloseしてサーバーからのメッセージを待ちます。うまく行けばOKと返ってきます。

完成！

実際に試してみるとclientから送られてきたSample.mp4ファイルがserverのSampleディレクトリ内にtmp.mp4として保存されたことが確認できました。

まとめ

streamを扱うことで動画データを分割して送ることができた。特に大容量の動画ファイルを送信したときに少しずつデータを送ることができるのでネットワークの負荷が減りそう
ライブストリーミングの変換処理とかstreamで実装すると良さそうな気がする

2018-12-02

Go言語でgraphqlを触ってみた

Go言語 graphql

ゆるっとアドベントカレンダー Advent Calendar 2018 2日目です。
最近ハッカソンでGraphqlを使って開発を行っているので、今回はGraphqlの復習で簡単なGraphqlサーバをGo言語を使って実装してみます。

Graphqlとは？
今回使う外部ライブラリ
今回実装したもの
解説
まとめ

Graphqlとは？

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data

GraphqlはAPIへ問い合わせるためのクエリ言語になります。一つのエンドポイントを用意して、予め定義しておいたGraphqlのクエリを投げることで必要な情報を持ってくることができます。

graphql.org

今回使う外部ライブラリ

labstack/echo
graphql-go/graphql
graphql-go/handler

github.com

今回実装したもの

localhost:8080/graphqlにブラウザでアクセスするとGraphqlのIDEが起動して、Graphqlのqueryを投げると下の写真の右のようにdataが返ってくるようなものになります。 f:id:jon20:20181202050619p:plain

今回実装したものは↓のGithubに置いておきます。

github.com

解説

基本的にgraphql-go/graphqlのexampleを参考に実装しています。
まずREST APIのように何か投げたら何か返ってくるものをGraphqlで実装したいためSchemaを定義します。ここで気をつけることは投げられるqueryにはQueryとMutationがあります。SchemaConfigを見ているとSubscriptionがあるのですが調べたかんじだとリアルタイムのデータを取得するときに使うらしいです。まだ使ったことはないので今回は触れません。
QueryとMutationなのですが、QueryはCRUDでいうとCの部分で、単にデータを取得したいときに使います。MutationはR、U、Dの部分で、データに変更を加えたい際に使います。

graphql.org

今回はSampleとしてQueryとMutationを使ってschemaを定義します。
仕様は以下のとおりです。

Query
- IDとPasswordを渡したらMessageが返ってくる
Mutation
- UsernameとAgeを渡したらMessageが返ってくる(Mutationなので何かしらの更新処理を入れる必要があるが今回は省略します)

QueryのSchemaの実装

graphql-sample/query.go at master · jon20/graphql-sample · GitHub

func SetQuery() graphql.Fields {
    query := graphql.Fields{
        "SampleQuery": &graphql.Field{
            Type:    SampleQueryType(),
            Args:    SampleQueryArgs(),
            Resolve: SampleQueryResolve,
        },
    }
    return query
}

func SampleQueryType() *graphql.Object {
    sampleType := graphql.NewObject(graphql.ObjectConfig{
        Name: "SampleQuery",
        Fields: graphql.Fields{
            "Message": &graphql.Field{
                Type: graphql.String,
            },
        },
    })
    return sampleType
}

func SampleQueryArgs() map[string]*graphql.ArgumentConfig {
    sampleArgs := graphql.FieldConfigArgument{
        "ID": &graphql.ArgumentConfig{
            Type: graphql.NewNonNull(graphql.String),
        },
        "Password": &graphql.ArgumentConfig{
            Type: graphql.NewNonNull(graphql.String),
        },
    }
    return sampleArgs
}

func SampleQueryResolve(params graphql.ResolveParams) (interface{}, error) {
    resp := &models.SampleMutateResp{
        Message: "Hello, This is SampleQuery",
    }
    return resp, nil
}

汚い実装ですが、肝となるのはSetQuery()です。Fieldsに定義したいFieldを定義します。FieldはArgsがqueryを使うときに渡す値の定義、Resolveにはqueryを叩いたときの処理を渡してあげます。

MutationのSchemaの実装

graphql-sample/mutation.go at master · jon20/graphql-sample · GitHub

func SetMutation() graphql.Fields {
    mutateQuery := graphql.Fields{
        "SampleMutate": &graphql.Field{
            Type:    SampleMutateType(),
            Args:    SampleMutateArgs(),
            Resolve: SampleMutateResolve,
        },
    }
    return mutateQuery
}

func SampleMutateType() *graphql.Object {
    sampleType := graphql.NewObject(graphql.ObjectConfig{
        Name: "SampleMutate",
        Fields: graphql.Fields{
            "Message": &graphql.Field{
                Type: graphql.String,
            },
        },
    })
    return sampleType
}

func SampleMutateArgs() map[string]*graphql.ArgumentConfig {
    sampleArgs := graphql.FieldConfigArgument{
        "Username": &graphql.ArgumentConfig{
            Type: graphql.NewNonNull(graphql.String),
        },
        "Age": &graphql.ArgumentConfig{
            Type: graphql.NewNonNull(graphql.Int),
        },
    }
    return sampleArgs
}

func SampleMutateResolve(params graphql.ResolveParams) (interface{}, error) {
    resp := &models.SampleMutateResp{
        Message: "Hello, This is SampleMutate",
    }
    return resp, nil
}

実装手順としてはqueryと同じです。どちらも共通して気をつけるポイントとしては指定できる型です。Scalar型があるのですが公式のDocumentを見たかんじだとID、String、Int、Float、Booleanだけになります。もしそれ以外の型を使いたい場合は自分で定義しなければなりません。

graphql.org

SchemaのSetupとIDEの用意

graphql-sample/graphql.go at master · jon20/graphql-sample · GitHub

func GraphqlSetting() http.Handler {
    query := fields.SetQuery()
    mutateQuery := fields.SetMutation()
    rootMutation := graphql.NewObject(graphql.ObjectConfig{Name: "RootMutation", Fields: mutateQuery})
    rootQuery := graphql.NewObject(graphql.ObjectConfig{Name: "RootQuery", Fields: query})

    schema, err := graphql.NewSchema(graphql.SchemaConfig{
        Query:    rootQuery,
        Mutation: rootMutation,
    })
    if err != nil {
        panic(err)
    }
    h := handler.New(&handler.Config{
        Schema:     &schema,
        Pretty:     true,
        GraphiQL:   false,
        Playground: true,
    })
    return h
}

GraphqlのIDEはhandler.Config{}のところで設定できます。指定できるIDEの種類としてはgraphiqlとgraphql-playgroundがあります。今回はgraphql-playgroundを使います。

github.com

Graphqlサーバの立ち上げ

graphql-sample/main.go at master · jon20/graphql-sample · GitHub

func main() {
    route := echo.New()

    route.POST("/graphql", echo.WrapHandler(graphql.GraphqlSetting()))
    route.GET("/graphql", echo.WrapHandler(graphql.GraphqlSetting()))

    route.Logger.Fatal(route.Start("localhost:8080"))
}

あとは　localhost:8080/graphqlのroutingを追加するためechoを使います。

完成!!

定義したSchemaは↓のように見れます。 f:id:jon20:20181202071549p:plain

Queryに定義したqueryの実行結果 f:id:jon20:20181202072117p:plain Mutationに定義したqueryの実行結果 f:id:jon20:20181202072121p:plain

まとめ

単一エンドポイントにまとめられるのでREST APIで実装する場合と比べてエンドポイントの管理が楽になりそう
Documentを自動で生成してくれるのでSwaggerなどを用いてDocumentを実装する手間が省ける。
ファイルアップロードとかを実装する場合はどうじっそうすればいいのだろうか？

2018-08-25

今日作る料理をサジェストしてくれるlinebotを作ったよ！

少し前からLINE community labというワーキンググループに友達と参加し面白いLine Botが作れたので紹介しようと思います

作成したもの

機能としては例として「なんか、豚肉とか使ったものない？」とメッセージを送信してますが、言葉の中にある材料が含まれる料理を提案してくれます。またレシピ確認ボタンで詳細レシピURLの表示、材料確認ボタンで材料の表示をしてくれます。これで冷蔵庫に残った余り物で何を作ろうか考えなくて済みますね！

構成

私は今回バックエンドの方を主にやっていたのでlineのapiはよくわかってません(友達がやってくれました)ので、バックエンドを中心に説明します。

使用言語

今回はRubyを使いました。 web frameworkは軽量のsinatraを使用

実装

　まず、レシピのデータについてですが、RakutenレシピがAPIを公開していたので負荷をかけないように注意しながらレシピ情報をいただきました(利用規約に引っかかってそう...)。

webservice.rakuten.co.jp

材料名のところに全角スペースや★がついててそこら辺整形するのが面倒くさかったです。
　次に柔軟に文章に対応したいため送られてきた文章に対して形態素解析を行い材料と思われる単語を抜き出します。
　そしてElasticsearchで全文検索を行いレシピをピックアップしています。

最後に開発にあたってはコンテナ環境を使いたかったのでDockerを使用してます。で、docker-composeを使って複数のコンテナを管理してます。
本番サーバはGCPを借りて動かしました。

まとめ

小規模ですが初めてチーム開発をしました。
gitやrubyをもっと学ばないといけないなと思いました。
途中までテストを書いていたのですが、途中でめんどくさくなってやめてしまったのでちゃんと書かないとな...
今回は公にサービスを公開する気はないのですが、いざサービスを公開するときに外部のサービスを利用している場合、利用規約ちゃんと見ないといけないな。