2018-06-06

vscodeでのhaskell開発環境作成

haskell vscode

概要

macにて、vscodeでhaskell開発環境を作成したので手順を記載
ほぼVS Code と haskell-ide-engine で Haskell 開発環境を構築するのままだけど一部動かなかったところがあるのでメモ。

手順

stack

brew install stack
echo "export PATH=$PATH:~/.local/bin" >> ~/.zshrc

hoogle

stack install hoogle
hoogle generate

haskell-ide-engine

git clone https://github.com/haskell/haskell-ide-engine --recursive
cd haskell-ide-engine
make build-all

vscode

Haskell Language Serverのpluginをインストール
設定に下記のプロパティを追加

  "languageServerHaskell.useHieWrapper": true,

2018-05-14

cloud functions

cloud functions javascript

ライブラリインストール

npm install -g firebase-tools

プロジェクト作成

firebase init

cloud functionsを選択

プロジェクトデプロイ

firebase deploy

helloWorldエンドポイントへのアクセスURLが表示されるので、アクセスすると結果が帰ってくる
あとはお好きにindex.jsを変更すればカスタマイズ可能。
すごく簡単。

でも100秒間に決まった回数アクセスすると429が返ってくるようになる。
制限はいくつなのだろう。。

2018-04-16

vueで遊ぶ第2回〜vue-router

javascript vue-router vue

インストール

yarn add vue-router

main.jsを書き換える

import Vue from 'vue'
import VueRouter from 'vue-router'
import FoodList from './components/FoodList/FoodList'
import EditFood from './components/EditFood/EditFood'
import App from './App.vue'

Vue.config.productionTip = false

Vue.use(VueRouter)

const routes = [
  { path: '/', component: FoodList },
  { path: '/edit', component: EditFood }
]

const router = new VueRouter({
  routes
})

const app = new Vue({
  render: h => h(App),
  router
}).$mount('#app')

App.vueを書き換える

<template>
  <div id="app">
      <router-link to="/">Go to List</router-link><br/>
      <router-link to="/edit">Go to Edit</router-link><br/>
    <router-view></router-view>
  </div>
</template>

<script>
import Vue from 'vue'

export default {
  name: 'app'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

2018-04-13

firebaseでサーバレス第4回〜firestoreへのinsert

cloud firestore firebase gcp rxjs typescript vue vue-rx

html

<label>名前</label><input v-model="name"/><br/>
<label>タンパク質</label><input v-model="protein"/><br/>
<label>脂質</label><input v-model="lipid"/><br/>
<label>炭水化物</label><input v-model="carbo"/><br/>
<button v-stream:click="plus$">登録</button>

typescript

const db = firebase.firestore()
const foodsPms = (name, protein, lipid, carbo) =>
  Rx.Observable.fromPromise(
    db.collection('foods').add({
      名前: name,
      タンパク質: protein,
      脂質: lipid,
      炭水化物: carbo
    })
  )

export default {
  name: 'EditFood',
  props: {
    msg: String
  },
  data() {
    return {
      name: '',
      protein: '',
      lipid: '',
      carbo: ''
    }
  },
  domStreams: ['plus$'],
  subscriptions() {
    return {
      foods: this.plus$.flatMap(() =>
        foodsPms(this.name, this.protein, this.lipid, this.carbo)
      )
    }
  }
}

表示

f:id:ngiy:20180413152532p:plain

firebase

f:id:ngiy:20180413152547p:plain

2018-04-12

firebaseでサーバレス第3回〜Webからのfirestore検索とリスト表示

cloud firestore firebase gcp typescript vue vue-rx rxjs

vue-rxとrxjsのインストール

yarn add vue-rx rxjs

htmlの編集

<table>
  <thead>
    <tr>
      <th>名前</th>
      <th>タンパク質</th>
      <th>脂質</th>
      <th>炭水化物</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(row, index) in foods" :key="index">
      <td>{{ row["名前"] }}</td>
      <td>{{ row["タンパク質"] }}</td>
      <td>{{ row["脂質"] }}</td>
      <td>{{ row["炭水化物"] }}</td>
    </tr>
  </tbody>
</table>

typescriptの編集

import Vue from 'vue'
import Rx from 'rxjs/Rx'
import VueRx from 'vue-rx'

Vue.use(VueRx, Rx)
export default {
  name: 'FoodList',
  props: {
    msg: String
  },
  subscriptions: {
    foods: Rx.Observable.fromPromise(
      db
        .collection('foods')
        .get()
        .then(qst => qst.docs.map(doc => doc.data()))
    )
  }
}

結果

f:id:ngiy:20180412144951p:plain

firestoreにて一行追加

f:id:ngiy:20180412145007p:plain f:id:ngiy:20180412145016p:plain

2018-04-11

firebaseでサーバレス第2回〜Webからのfirestore検索

gcp firebase cloud firestore typescript

frontendプロジェクト配下で下記のコマンドを実行しfirebaseをインストール

yarn add firebase

とりあえずfirestoreのfoods配下のアクセス権限を与える

service cloud.firestore {
  match /databases/{database}/documents {
    match /foods/{food} {
      allow read: if true;
      allow write: if true;
    }
  }
}

フロントの適当な箇所に下記のコードを記述して
コンソールログに登録済みデータが出力されることを確認

var firebase = require('firebase')
require('firebase/firestore')
// Initialize Firebase
var config = {
  apiKey: "<API_KEY>",
  authDomain: "<PROJECT_ID>.firebaseapp.com",
  databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
  storageBucket: "<BUCKET>.appspot.com",
  messagingSenderId: "<SENDER_ID>",
}
firebase.initializeApp(config)

var db = firebase.firestore()
db
  .collection('foods')
  .get()
  .then(qst => {
    qst.forEach(doc => {
      console.log(doc.data())
    })
  })