旅好きの気ままなお話

旅のこと映画、統計、会計、プログラミングなど、気の向くままに語ります

vue.jsのデリミタ(delimiter)を変更する方法 sampleとしてjinja2を使用

フロントエンドのフレームワークと既存のテンプレートエンジンのデリミタ(delimiter)って被ってしまった。。。

ちなみにデリミタ(delimiter)とは、"フィールド区切り文字"のことです。 具体的には railsのerbの<% hogehoge %>とか jinja2の{{ hogehoge }}とか bladeの{{ hogehoge }}とかです。

erbだと<% %>の中にrubyのコードが書けます。 これをデリミタといいます。

さて、 vue.jsのデリミタも実はjinja2やbladeと同じく{{ }}なんです。

ですので、jinja2とvue.jsをそのまま使用するとコンフリクトが生じてしまうのです。

そこで、解決策としてデリミタを変更するという方法があります。(ここからはjinja2をsampleに書きます。)

jinja2のデリミタかvueのデリミタどちらかを変更すればよいのです。

jinja2のデリミタを変更するのはフレームワークに依存してしまうケースがあるので、完結に変更するにはvue.jsがおすすめです。

下記コードは{{ }}から[[ ]]にデリミタを変更しています。

hoge.js

new Vue({
  el: '.js-component01',
  delimiters: ['[[', ']]'], //ここにデリミタの変更を記述
  data: {
    text: 'hogehoge'
  }
});

python側ではbottleを使用しています。

run.py

from bottle import route, run
from bottle import TEMPLATE_PATH, jinja2_template as template

@route('/top')
def main():
    return template('top', hoge = "pythonの結果")

run(host='localhost', port=8080, debug=True, reloader=True)

top.html

<div class="js-component01">
  <p>[[hoge]]</p>
</div>
<div>
  {{hoge}}
</div>

テンプレートでは同じ変数hogeでもvueで設定したものとpythonで設定したもので、異なる値が表示されるようになっています。

ちなみにデリミタを変更せずに行うと、python側が優先されます。

rubyでマークルツリーを書いてみた

ブロックチェーンの勉強をしていてマークルツリーがどんなものかをrubyで書いてみました。 (まだ、勉強したてなので間違えているかもしれません、その際はご教授ください)

マークルツリーについてはわかりやすい記事があるので他のを参考にするといいです。

以下がソースです。
make_merkle_tree(data_list)のdata_listは配列です。

ソース

require "digest/md5"

def make_merkle_tree(data_list)
  loop do
    hash_list = data_list.map {|data| Digest::MD5.hexdigest(data) }
    hash_set_list = make_set(hash_list)
    data_list = integrate_hash(hash_set_list)
    break if data_list.size == 1
  end
  data_list.first
end

def make_set(hash_list)
  hash_list.each_slice(2).to_a
end

def integrate_hash(hash_set_list)
  hash_set_list.inject([]) do |integrated_data_list, hash_set|
    hash_set << hash_set.first if hash_set.size < 2
    integrated_data_list << "#{hash_set[0]}#{hash_set[1]}"
  end
end

実際に動かしてみました。
data_listのなかがビットコインでいうトランザクション(取引)データです。
取引データが
["a","b","c","d","e"] とあったら。
全ての取引は
"dfbd34a5b6634d7ccd0aa26a4dec2eccfb8a3688c2f3cc709e72181bd8074cc3"
で全て表現できているということを表しています。

もし、["a","b","c","d","e"]が ["a","b","c","f","e"]のように書換えられてしまうと、 異なるハッシュ値を返してしまいます。

これはどういうことかというと、ビットコインの生成するための計算ではタイムスタンプやナンスなどとこのトランザクションの結果をまとめてハッシュ化しており、取引データが改竄されると、計算が合わなくなり、改竄が発覚します。

なので、ブロックチェーンのデータの改竄は難しくなっているのです。 この他にも、改竄対策にはデータのコンセンサスの問題などもあるのですが、今回はマークルツリーの実装の話なので、置いておきます。

実行

[9] pry(main)> make_merkle_tree(["a"])
=> "0cc175b9c0f1b6a831c399e2697726610cc175b9c0f1b6a831c399e269772661"
[10] pry(main)> make_merkle_tree(["a","b"])
=> "0cc175b9c0f1b6a831c399e26977266192eb5ffee6ae2fec3ad71c777531578f"
[11] pry(main)> make_merkle_tree(["a","b","c","d"])
=> "3bc22fb7aaebe9c8c5d7de312b876bb81ee715fcc373a83611d163d9d4ea02a3"
[12] pry(main)> make_merkle_tree(["a","b","c","d","e"])
=> "dfbd34a5b6634d7ccd0aa26a4dec2eccfb8a3688c2f3cc709e72181bd8074cc3"

kotlinでbit flyerのapiから仮想通貨の価格を取得する(android)

kotlinのデータを取得する

下記のブログを参考にさせていただきました。 ver-1-0.net

khttpを入れる

androidをほとんど触ったことがないのでライブラリをどういう風に入れるかもわかりませんでした。。。
まずはbuild.gradleにkhttpのライブラリを入れましょう。

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation"org.jetbrains.kotlin:kotlin-stdlib-jre7:$kotlin_version"
    implementation 'com.android.support:appcompat-v7:26.1.0'
    implementation 'com.android.support.constraint:constraint-layout:1.0.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.1'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'
    compile "khttp:khttp:0.1.0" // 追加する
}

ソースを書いていく

自分はMainActivity.ktにkhttpをinportしました。

import khttp.get

ちなみに下記はETHを取得しています。
また、MyAsyncTaskを使っている理由は、androidはメインスレッドでネットワーク通信が出来ないからです。(おそらくですが。。。)

取得処理自体はgetEthRateで行っています

全文ソース(MainActivity.kt)

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.widget.TextView
import android.os.AsyncTask
import khttp.get

open class MyAsyncTask : AsyncTask<Void, Void, String>() {

    override fun doInBackground(vararg params: Void): String? {
        return null
    }

    override fun onPostExecute(text: String) {}
}

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)

        setContentView(R.layout.activity_main)

        object : MyAsyncTask() {
            override fun doInBackground(vararg params: Void): String? {
                return getEthRate()
            }
            override fun onPostExecute(text: String) {
                val ethRate = findViewById<TextView>(R.id.ethRate)
                ethRate.setText(text)
            }
        }.execute()
    }
}

fun getEthRate(): String {
    var url : String = "https://lightning.bitflyer.jp/v1/getboard"
    return get(url).jsonObject.getString("mid_price")
}

マニフェストを修正する

どうやらandroidは設定ファイルを修正しないとエミュレーターで通信出来ないようです。 ですので <uses-permission android:name="android.permission.INTERNET" />をAndroidManifest.xmlに追加しましょう。

全文ソース(AndroidManifest.xml)

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="e.yuma.cccheck">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
    <uses-permission android:name="android.permission.INTERNET" />
</manifest>修正する

普段Androidを触っていないと慣れないことが多いですが、やってみたら意外と楽しいかもです。(画面の修正は難しいですね)

binanceから日足を取得するスクリプトを書きました(python)

仮想通貨のコイン間での値動きの相関を調べてみたいと思い、まずはbinanceからデータを取得するpythonスクリプトを書いてみました。

実装には下記のライブラリを使用させてもらいました。(作者の方は他のwrapperも作っていて意欲的な感じがします!)

github.com

ちなみに以下が書いてみたスクリプトです。
ソースコードは自分用に書いているので汚ないです。。。

from binance.client import Client
from datetime import datetime

class Binance(object):
    def __init__(self, api_key, api_secret):
        self.client = Client(api_key, api_secret)

    def get_bars(self, bar_duration, start, end):
        kline_list = []
        for ticker_combination in self.ticker_combinations():    
            klines = self.client.get_historical_klines(ticker_combination, bar_duration, start, end)
            klines = self.format_klines(klines)
            kline_list.append({"ticker_combination":ticker_combination, "klines":klines})
        return kline_list

    def ticker_combinations(self):        
        combinations = self.client.get_all_tickers()
        ticker_combination_list = []
        for combination in combinations:
            ticker_combination_list.append(combination['symbol'])
        return ticker_combination_list

    def format_klines(self, klines):
        klines = list(map(lambda x: [self.format_timestamp(x[0]),x[1],x[2],x[3],x[4],x[5],self.format_timestamp(x[6]),x[7],x[8],x[9],x[10],x[11]], klines))
        return klines

    def format_timestamp(self, timestamp):
        time = datetime.fromtimestamp(timestamp/1000)
        return time

利用方法

api_key, api_secretはbinanceで取得してください (binanceは香港の仮想通貨取引所です。)

start = "1 Dec, 2017"  
end = "1 Jan, 2018"  
bar_duration = "1d"  

bi = Binance(api_key, api_secret)  
bi.get_bars(bar_duration, start, end)  

分析のデータがほしい方はぜひ使ってみてください。

icobenchのgem作成してみました。

ICObenchというicoの評価サイトのapiのgem(wrapper)を作成してみました。

icobench.com

wrapper

github.com

ICObenchは多くのicoが掲載されているので、好みにあったicoを探すことができます。

ただ、ICOはscamも多いので精査して購入する必要があります。

また、たとえ詐欺ではなかったとしても取引所に上場されなかった場合、売買できないので極力信頼できる案件を見つける必要があります。

興味ある方はwrapperを使って興味のある案件を探してもらうと幸いです。(探すぶんにはサイトを見るほうが早いかも知れませんが、、、。自分のDBに保存したいという方には便利かと思います。)

coinexchangeのgem作りました

最近、仮想通貨にはまっているということでcoinexchangeのapiから簡単にデータを取得できるgem作りました。

github.com

ちなみにcoinexchangeは海外の取引所でapiはまだpublicなものしかなさそう。
なのでapiで取引はまだできません。 v2になったら作りなおそうかと思います。

https://www.coinexchange.io

中国でslackは使えるのか?

中国でのslack

最近、中国の雲南省に行ってきました。

会社からのslackでの連絡も見れるかどうかも確認したく、検証してみました。

中国のネット規制

まず、gmailfacebook、lineは使えません。
しかも心の拠り所のskypeまで規制対象になるそうです。
一体何のアプリを使えばいいんだ、、、

wechat使うのもなぁー。

とまぁ、中国行ったら色々困るわけです。

ネット検索も基本的に百度ですよ。 (自分はbing国際版を使っていました。bing素晴らしい!)

肝心のslack

じゃあslackってどうなの? という感じですが、 slackアプリ版は無事使えました! ブラウザ版は試していないのでわからないですが、どうにか日本とは連絡がとれます。
会社のプログラマもこれで安心できます。

安心するならVPN借りろって言う話なんですけどね。

※2017/11時点です