クロコめも2。

ただのめもー

好きなボーカリストさん

なんとなく好きor尊敬or神な人を忘れないように書き出しておこうと思った

  • skin(スカンク・アナンシーの元ボーカル) 女性ボーカルなのにスキンヘッド。バイセクシャル。どぎつい情報いっぱいあるけど歌声が全てをねじ伏せる。

www.youtube.com

  • angraの初代ボーカル アンドレ・マトス

www.youtube.com

  • マイクベゼーラ

www.youtube.com

  • メタリカのジェイムス。声が好きすぎる。シャウトばっかり目立ってるみたいだけど単純に歌が上手い

www.youtube.com

www.youtube.com

  • kokia 調和という曲のライブ映像がやばすぎる。神なんぞ信じてないけどこの人に神のお告げとか言われたら信じない自信がない。

www.youtube.com

www.youtube.com

  • 宇多田ヒカル デビュー当時はブレスが日本人っぽくなくて好きだなと。休業前のライブ音源はやばかった。歌がキレキレ。

www.youtube.com

www.youtube.com

  • 平井堅 ザ・ミックスボイス2!

www.youtube.com

  • 秦基博(TVの生歌は疲れが出てる事あるけど)

www.youtube.com

www.youtube.com

  • ドリカムの吉田さん

www.youtube.com

Vue2系とTypescript2系

本格的にTypescriptを勉強したいし、何か作りたいんだけど、何をどう初めていいのかよくわからない今日この頃。

  • vue2系
  • typescript2系
  • webpack 2系
  • nodeは確か7系で検証
  • .vueファイルを使っとこう
  • sassを使っとこう
  • vuexはあとにしとこう
  • vue-routerはいらないかな
  • SSRっていまいち何がしたいのかわかってない

ってな感じで雛形ってみた。 参考にさせてもらったのは

Vue.jsとTypeScript - Qiita

GitHub - Microsoft/TypeScript-Vue-Starter: A starter template for TypeScript and Vue with a detailed README describing how to use the two together.

自分で色々触りながら理解を深めるための雛形としてメモを残そうと思います。

はい、完全に自分用。WEBに漂うゴミっす。

setup step

1. yarn init

2. add lib to dev

    yarn add -D css-loader extract-text-webpack-plugin html-webpack-plugin node-sass sass-loader ts-loader typescript
    vue-template-compiler vue-template-loader webpack tslint-language-service vue-ts-plugin vue-loader file-loader url-loader

3. add lib

    yarn add tslib vue vue-class-component vue-property-decorator vuex vuex-class

4. create template.html

        <html lang="ja">
            <head>
                <meta charset="UTF-8">
                <title>Vue Type 君</title>
            </head>
            <body>
                <div id="app"></div>
            </body>
        </html>

5. create tsconfig.json

    {
        "compilerOptions": {
            "module": "es2015",
            "moduleResolution": "node",
            "target": "es5",
            "noImplicitAny": true,
            "sourceMap": true,
            "strictNullChecks": true,
            "typeRoots": [
                "./node_modules/@types"
            ],
            "lib": [
                "dom",
                "es5",
                "es2015"
            ],
            "noEmitHelpers": true,
            "experimentalDecorators": true,
            "importHelpers": true,
            "allowSyntheticDefaultImports": true,
            "emitDecoratorMetadata": true,
            "plugins": [
                {
                    "name": "tslint-language-service"
                },
                {
                    "name": "vue-ts-plugin"
                }
            ]
        },
        "include": [
            "./src/**/*"
        ]
    }

6. create tslint.json

    {
        "defaultSeverity": "error",
        "extends": [
            "tslint:recommended"
        ],
        "jsRules": {},
        "rules": {
            "quotemark": [
                true,
                "single"
            ],
            "indent": [
                true
            ],
            "interface-name": [
                false
            ],
            "arrow-parens": false,
            // Pending fix for shorthand property names.
            "object-literal-sort-keys": false
        },
        "rulesDirectory": []
    }

7. create webpack.config.js

    var path = require("path");
    var webpack = require("webpack");
    const HTMLWebpackPlugin = require('html-webpack-plugin')
    const ExtractTextPlugin = require('extract-text-webpack-plugin')

    module.exports = {
    entry: "./src/index.ts",
    output: {
        path: path.resolve(__dirname, "./dist"),
        filename: "build.js"
    },
    module: {
        rules: [
        {
            test: /\.tsx?$/,
            loader: "ts-loader",
            exclude: /node_modules/,
            options: {
            appendTsSuffixTo: [/\.vue$/]
            }
        },
        {
            test: /\.vue$/,
            loader: "vue-loader",
            options: {
            loaders: {
                scss: ExtractTextPlugin.extract({
                use: ['css-loader', 'sass-loader'],
                fallback: 'vue-style-loader' // <- this is a dep of vue-loader, so no need to explicitly install if using npm3
                })
            }
            // other vue-loader options go here
            }
        },
        {
            test: /\.(png|jpg|gif|svg)$/,
            loader: "file-loader?name=assets/[name].[ext]"
        }
        ]
    },
    resolve: {
        extensions: [".ts", ".js", ".vue", ".json"],
        alias: {
        vue$: "vue/dist/vue.esm.js"
        }
    },
    devServer: {
        historyApiFallback: true,
        noInfo: true
    },
    performance: {
        hints: false
    },
    devtool: "#eval-source-map",
    plugins: [
        new HTMLWebpackPlugin({ template: './template.html' }),
        new ExtractTextPlugin('styles.css')
    ]  
    };

    if (process.env.NODE_ENV === "production") {
    module.exports.devtool = "#source-map";
    // http://vue-loader.vuejs.org/en/workflow/production.html
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.DefinePlugin({
        "process.env": {
            NODE_ENV: '"production"'
        }
        }),
        new webpack.optimize.UglifyJsPlugin({
        sourceMap: true,
        compress: {
            warnings: false
        }
        }),
        new webpack.LoaderOptionsPlugin({
        minimize: true
        })
    ]);
    }

    

8. create ./src and ./dist directory

9. create index.ts

    import Vue from "vue";
    import App from "./components/App.vue";

    let v = new Vue({
        el: "#app",
        render: h => h(App)
    });

10. create components/App.vue

    <template>
        <div>
            Name:
            <input v-model="name" type="text">
            <hello-component :name="name" :initialEnthusiasm="5" />
        </div>
    </template>
    <script lang="ts">
    import Vue from "vue";
    import Component from 'vue-class-component'
    import { Prop } from 'vue-property-decorator'

    import HelloComponent from "./Hello.vue";

    @Component<App>({
        components: {
            HelloComponent
        }
    })
    export default class App extends Vue {
        name = 'わたしだ'
    }

    </script>
    <style lang="scss">
    @import '../assets/style/main.scss';
    </style>

11. create components/Hello.vue

    <!-- src/components/Hello.vue -->
    <template>
        <div>
            <div class="greeting">Hello {{name}}{{exclamationMarks}}</div>
            <button @click="decrement">-</button>
            <button @click="increment">+</button>
        </div>
    </template>

    <script lang="ts">
    import Vue from "vue";
    import Component from 'vue-class-component'
    import { Prop } from 'vue-property-decorator'

    @Component<Hello>({
    })
    export default class Hello extends Vue {
        @Prop() readonly name: string;    
        @Prop() readonly initialEnthusiasm: number;

        enthusiasm = this.initialEnthusiasm;

        increment() { this.enthusiasm++; };

        decrement() {
            if (this.enthusiasm > 1) {
                this.enthusiasm--;
            }
        };

        get exclamationMarks(): string {
            return Array(this.enthusiasm + 1).join('!');
        }
    }

    </script>

    <style lang="scss">
    .greeting {
        font-size: 20px;
    }
    </style>    

12. create assets/style/main.scss

    body {
        margin: 0;
        padding: 0;
        font-family: Arial, Helvetica, sans-serif;
        background-image: url("../assets/images/logo.png");
    }

13. create assets/images/logo.png

exec webpack command. check dist directory.

Vueのコンポーネントをテストするのにmockを使いたい時

sinonの使い方を一生懸命調べようとしてたんだけどinject-loaderを使えばいいのね。

へー!!

Testing with Mocks · GitBook

Swift2とSwift3の違いメモ

ほんきで学ぶSwift+iOSアプリ開発入門 写経中メモ

この本はSwift2で書かれているのでSwift3の環境だとそのまま動かない。

URLを使って画像を表示する

Swift2

let url = NSURL(string: "http://hogehoge.png")!
let imageData:NSData = NSData(contentsOfURL: url!)!
let image2 = UIImage(data:imageData);

Swift3

let url = URL(string: "http://hogehoge.png")!
let imageData = try? Data(contentsOf: url)
let image2 = UIImage(data:imageData!)

NSURLがURL、NSDataがDataに変わった模様。そしてtry-catch使わないと怒られるようになった模様

CGRectMakeが無くなっている

// CGRectMake関数を用意してSwift2と同じように呼べるようにする
func CGRectMake(_ x: CGFloat, _ y: CGFloat, _ width: CGFloat, _ height: CGFloat) -> CGRect {
    return CGRect(x: x, y: y, width: width, height: height)
}
var button = UIButton(frame: CGRectMake(0,0,100,50))

// CGRectを使う。
var button2 = UIButton(frame: CGRect(x: 0, y: 0, width: 100, height: 50))

XCPlaygroundが無くなっている

Swift3

import UIKit
import PlaygroundSupport

let datePicker = UIDatePicker()
datePicker.datePickerMode = UIDatePickerMode.date
datePicker.backgroundColor = UIColor.white
PlaygroundPage.current.liveView = datePicker

Vue2 + TypeScript2 を使ったサンプル

やりたいこと

vue.js2ではTypeScriptに対応したらしいのでどんなもんなのかを試したい。

試すものたち

  • vue.js 2.0.3
  • vuex
  • typescript 2.0.3
  • vue-ts-loader
  • av-ts
  • kilimanjaro

参考サイト

http://herringtondarkholme.github.io/2016/10/03/vue2-ts2/

作ってく

プロジェクトの作成

mkdir vue-ts-test
cd vue-ts-test
npm init -y
npm i -S vue typescript

ここまででpackage.jsonとnode_modulesが出来ている

STEP1:テンプレートのindex.htmlとちっちゃいVue

index.html

<div id="app"></div>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="app.js"></script>

app.ts

declare var Vue: any
new Vue({
    el: '#app',
    render(h) {
        return h('h1', 'hello world')
    }
})

app.tsをコンパイルする

./node_modules/.bin/tsc app.ts

ブラウザでindex.htmlを開き"hello world"が表示されることを確認する

STEP2: webpack使って.vueファイルでコンポーネントを作る

npm i -D webpack vue-loader css-loader
npm i -D vue-ts-loader

webpack.config.js

module.exports = {
    entry: { app: './app.ts', },
    output: { filename: 'app.js' },

    // resolve TypeScript and Vue file
    resolve: {
        extensions: ['', '.ts', '.vue', '.js']
    },

    module: {
        loaders: [
            { test: /\.vue$/, loader: 'vue' },
            { test: /\.ts$/, loader: 'vue-ts' }
        ],
    },
    vue: {
        // instruct vue-loader to load TypeScript
        loaders: { js: 'vue-ts-loader', },
        // make TS' generated code cooperate with vue-loader
        esModule: true
    },
}

app.vue

<template>
<h1 @click="hello">hello world</h1>
</template>

<script>
export default {
    methods: {
        // type annotation!
        hello(): void {
            alert('hello world')
        }
    }
}
</script>

app.ts

declare var require: any

import Vue = require('vue')
var App = require('./app.vue').default

new Vue({
    el: '#app',
    components: { App },
    render: h => h('app')
})

ここでwebpackコマンドでコンパイルしてindex.htmlを表示したときにhello worldをクリックしてアラートが出ればOK

STEP3:もっと型を

npm i -S av-ts

app.vueを改造

<template>
<h1 @click="hello">hello {{name}}</h1>
</template>

<script>
// av-tsからVue関連のインポート
import {Vue, Component} from 'av-ts'

@Component
export default class App extends Vue {
name = 'kuroko'
// type annotation!
hello(): void {
    alert('hello ' + this.name)
}
}
</script>

ここでwebpackコマンドを叩いて動作確認

STEP4:Vuex導入

npm i -S kilimanjaro

store.tsの追加

import { create } from 'kilimanjaro'

var store = 
create({count: 0})
.getter('count', s => s.count)
.mutation('increment', s => () => s.count++)
.mutation('decrement', s => () => s.count--)
.done()

export default store

app.vue修正

<template>
<h1 @click="hello">hello {{name}} now count is {{count}}
<button @click.stop="add">+</button>
<button @click.stop="sub">-</button>
</h1>
</template>

<script>
// av-tsからVue関連のインポート
import {Vue, Component} from 'av-ts'
import {Vuex, getHelper} from 'kilimanjaro'
import store from './store'

const { getters, commit } = getHelper(store)

@Component
export default class App extends Vue {
@Vuex count: number = getters('count')
@Vuex add:Function = commit('increment')
@Vuex sub:Function = commit('decrement')
name = 'kuroko'
// type annotation!
hello(): void {
    alert('hello ' + this.name)
}
}
</script>

webpackコマンドを叩いて動作を確認する。

webpackコマンドを叩くとerror TS2304: Cannot find name 'Promise'.というエラーがいくつがでる。

単純にこのエラーを消したい場合はtsconfig.jsonのcompilerOptions.targetをes6に変えればエラーは出なくなる。

しかし、それが根本的な解決なのかはわからない。

次に確認したいこと

vue-cliのwebpack相当の構成でnpm run devデバッグしながらリアルタイムにプレビューできるようにするにはどうすればよいのかを調べたい。

が・・・ちょっとvue-cliで生成したプロジェクトを使って改造していくのは僕には歩幅が大きすぎて挫折したので小さくすすめる。

  • フォルダ構成を./srcとか./src/componentsとか./src/storeとかにわけれるようにしたい
  • sass使えるようにしたい
  • TypeScript -> ES5じゃなくてTypeScript -> ES6 (babelで) -> ES5にしたい。TypeScriptでES6チックにかければ不要か?
  • propなど今回使用していないvueの機能はどうやって書くのかを調べたい

今回のサンプルを作ってみてまだわからないこと

  • webpack.config.jsにあるvue:の指定は一体なんなのか?
  • vuexのgitterとかあんまり馴染みがない(ただの勉強不足)
  • tsconfig.jsonの中身全般。そもそもTypeScriptに関する知識が殆ど無い。

最近やったことやら色々メモ

  • haskell挫折中。タイミングを見てまた集中して学習したい。
  • やりたいこととに対してSpring batchはtoo much だったので素のSpringを使うことにした。
  • Springのトランザクション周り(requires_newしたときのテストの書き方とか)いろいろ面倒だった。
  • ラムダ乱用は良くないと思うけど、まず乱用できるほどラムダの使い方わかってない
  • Doma2良かった。
  • Gradleでマルチプロジェクトできたけどプロダクトのバージョン管理とかよくわからん。
  • githubとgitに関して簡単な操作はできるようになったけどまだあまり理解できていない
  • java8っぽい書き方をなんとなくわかるようになってきた。がまだまだ。
  • 年内はSwiftやiOS関係の開発についてお勉強することにした。
  • Dockerをちゃんと理解して開発時のDBとかそのた環境まわりとかをスマートに準備したいなぁ
    • Docker for mac発表されてからだいぶ経ったけど全然さわれてないわ
    • Docker上にCI環境作っておいてgithubにPushしたらテスト動いてくれるようになんないかな
  • Typescript2がリリースされたけど全然チェックできてないわ
  • Vue.jsの2が発表リリースされたけど全然チェックできてないわ
  • 軽度肥満から標準体型になったぞー

jacksonでunix timeをparse

どうやるんだろ?

文字列としてparseしてLocalDateTimeに変換してくれるgetterを作るぐらいしかパッと作れない。

yyyy-mm-ddとかそういうフォーマット指定する例はいろいろ出ててわかるんだけど、unix timeの10桁の数字をLocalDateTimeに変換する方法がわからないーーー