Sync all

Webエンジニアの気になる事。困った事もろもろ。

NodeWebkitでMP3再生

NodeWebkitでWebAudioでMP3を再生する。

できません

NodeWebkitのデフォルトではMP3の読み込みはサポートされていません。

ajaxでarraybuffer読み込んでdecodeAudioData()実行するとerrorが発生してしまう。

なので方法考えてみます。

.oggへ変換

潔く.oggフォーマットへ変換をする。

オンラインオーディオコンバーター
http://media.io/ja/

これなら何の問題も無い。

でもそんなツールなんぞ使いたくない人は他の手を考える。

Base64 → Arraybuffer

これならどのプラットフォームでも大丈夫。たぶん。

モバイルでも大丈夫。たぶん。

メリットはキャッシュが楽な点ですかね。

IndexedDBとかにほり込んでおけば色々とajaxで読み込むより早くていいかと思います。

MP3 → Base64エンコード

ではまず、audioファイルをOpenSSLでbase64エンコーディング

openssl base64 -in [audiofile] -out [outfile]

これでOK。

Base64 → ArrayBuffer

以下の方法があります。

ライブラリ使う人向け。
blog-examples/js/base64-binary.js at master · danguer/blog-examples · GitHub

var buffer = Base64Binary.decodeArrayBuffer(sound);

自分で書きたい人向け。

function convertToBinary (base64strings){
    var raw = window.atob(base64strings)
    var rawLength = rawData.length;
    var buffer = new Uint8Array(new ArrayBuffer(rawLength));
 
    for(i = 0; i < rawLength; i++) {
        buffer[i] = raw.charCodeAt(i);
    }
    return buffer;
}
再生

後は通常の再生の処理を実行する。

window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;
var context = new AudioContext;

var arrayBuffer = convertToBinary(base64strings);

context.decodeAudioData(arrayBuffer, function(buffer) {
    var source = context.createBufferSource();
    source.buffer = buffer;
    source.connect(context.destination);
    source.start();
}, function(error) {
    console.error('decode error', error);
});

結局MP3自体の再生は不可能なので何かしら変換しないと行けません。

SublimeText3 おすすめ?プラグイン

f:id:bulbulpaul:20140523132205p:plain

SublimeText3やっぱりいいよね

Atomも最近出ましたけど、あんまりしっくりは来なかったのでやっぱり素敵なSublimeTextを継続して使う。
Vim, Emacsとか怖いのでやめときます。
僕の小指はつらせない。

なお、PacapkageComtrolが入っている事が前提で書いてます。
PacapkageComtrolのことはこちらを参考に。
Sublime Text 3のPackage Controlがインストールしやすくなっていた - ばくのエンジニア日誌

インストールプラグイン

環境つくり時のメモとして。

Theme - Flutland

thinkpixellab/flatland · GitHub
フラットデザインのクールなテーマ。
こんなデザインになる。
f:id:bulbulpaul:20140523132857p:plain

これだけでコーディングのモチベーションが上がる。
お葬式みたいなデザインでコーディングなんか出来ない。

All Autocomplete

titoBouzout/SideBarEnhancements · GitHub
標準の自動補完(オートコンプリート)機能を強化し、マッチする文字列があればサジェストする。

AutoFileName

BoundInCode/AutoFileName · GitHub
html, css等のリンクファイル名の補完。
ディレクトリ構造を追いながら補完出来る所が素敵。

Better TypeScript

lavrton/sublime-better-typescript · GitHub
TypeScriptのシンタックスハイライト。

BracketHighlighter

facelessuser/BracketHighlighter · GitHub
開始/終了タグのハイライトをしてくれる。

cdnjs

dafrancis/Sublime-Text--cdnjs · GitHub
有名ドコロのCDNを簡単に選択してscriptタグを挿入することができる。

Emmet

sergeche/emmet-sublime · GitHub
Emmet(旧zen-cording)を使えるようにする。

Hayaku

hayaku/hayaku · GitHub
CSSを楽に書けるHayakuが使えるようになる。

HTMLAttributes

agibsonsw/HTMLAttributes · GitHub
HTMLの属性や属性値のスニペット

Python Auto-Complete

eliquious/Python-Auto-Complete · GitHub
Pythonのコード補完。

SideBarEnhancements

titoBouzout/SideBarEnhancements · GitHub
サイドバーの右クリックメニューを拡張する。

ConvertToUTF8

titoBouzout/SideBarEnhancements · GitHub
Shitf JISやEUCなどの日本語のエンコーディングに対応していません。
それをエンコードしてくれる。
ただし、現状正しく動作しないので以下のCodecs33が必要になります。

Codecs33

seanliang/Codecs33 · GitHub
ConvertToUTF8のバグ(?)問題を解決するプラグイン
文字コードの闇。

SublimeCodeIntel

SublimeCodeIntel/SublimeCodeIntel · GitHub
変数や関数の補完。
定義元ジャンプができるようになる。

SublimeLinter

SublimeLinter/SublimeLinter3 · GitHub
リアルタイムな文法チェック。
SublimeText3からLinterが入っていないため言語毎に入れる必要有り。

Mac Terminal

afterdesign/MacTerminal · GitHub
SublimeTextからターミナルが起動できるようになる。
現在開いているディレクトリで開ける点もいい。
iTerm2にも対応。

Tag

SublimeText/Tag · GitHub
閉じタグを打つと補完してくれるプラグイン

他をお探しなら

他にもいっぱい良いPackageがそろってますし。作れます。

探す際はブラウザ上でPackageを探せます。
Package Control - the Sublime Text package manager

多段SSH接続でGit

f:id:bulbulpaul:20140522130709j:plain

リモートでの作業時にSSHで認証サーバー踏み台にしてgit使う状態になったのでメモ。

多段SSH

なんか厨二っぽくてカッコいいですよね。

SSHでログインサーバーに接続してそっからGitのリポジトリに接続をしたい。

f:id:bulbulpaul:20140522124120p:plain

~/.ssh/configを編集。

# 認証サーバー
Host login
        HostName hogehoge01
        User hoge

# Gitサーバー
Host remote_git
        HostName hogehoge02
        User git
        ProxyCommand ssh login -W %h:%p

これでSSH接続ができるかを確認してみる。

ssh remote_git

これで接続できれば設定はOK。

git clone

git cloneはGitプロトコルではなくsshでやりました。

git clone ssh://remote_git/user/repository.git

これで必要に応じて多段SSHでgitが使えるようになりました。

入門Git

入門Git

NodeWebkit起動時のエラー

nodewebkit使い始めて早速詰まったのでメモ。
単にscala書いててエラーが解決できなくてイライラの気晴らしに触っただけだけど。

nodewebkitって?

NodeWebkitは、Chromiumの機能を内包したGUIアプリケーションを実行することが出来ます。

ざっくり言うとHTML5, CSS, JavascriptGUIアプリケーションが作れるモノです。

installとかはコチラを参考にさせて頂きました。

nodeベースでGUIアプリを開発する「node-webkit」|1 pixel|サイバーエージェント公式クリエイターズブログ

npm startでエラー

とりあえず起動してみる。

npm start

するとこんな画面が。

f:id:bulbulpaul:20140426094947p:plain

'main'が無いとかで起こられてるんですがそんな事は無く
package.jsonは以下のように作っています。

{
	"name": "SampleApp",
	"main": "index.html",
	"window": {
		"width": 800,
		"height": 600
	},
	"scripts": {
		"start": "node_modules/nodewebkit/bin/nodewebkit"
	}
}

原因としては/node_modules/nodewebkit/package.jsonを見に行ってました。

バグなのか仕様なのかわかりませんが取りあえず
nodewebkit内のpackage.jsonを適当に → _package.jsonに変更すると自身のpackage.json見て起動しました。

気の紛らわしに触ったけど何かとエラーにぶち当たるorz

作りたいモノがあるので今後も触っていこうと思います。

MongoDBシャーディング

MongoDB Sharding 手順

mongodの起動

mongod --shardsvr --port 27018 --dbpath /data/mongo/sharding --logpath /var/log/mongo/mongod-sharding.log --fork

基本的にポートは27018が一般的。
numactl --interleave=all をサーバー構成によっては前につける場合が有ります。

config serverの起動

mongod --configsvr --port 27019 --dbpath /data/mongo/config --logpath /var/log/mongo/config.log --fork

基本的にポートは27019が一般的。
mongod同様 numactl --interleave=all をサーバー構成によっては前につける場合が有ります。

mongosの起動

mongos --configdb hoge01.jp:27019,hoge02.jp:27019,hoge03.jp:27019 --port 27017 --logpath /var/log/mongo/mongos.log --fork

ポートは27017がMongoのデフォルトですが、お好みでどうぞ。
mongod同様 numactl --interleave=all をサーバー構成によっては前につける場合が有ります。

※サーバー間で時間がずれているとMongosが起動が出来ないので注意

--configd

config serverのhostを指定

Shardingの設定

mongosに接続
$ mongo -port 27017
admin DBに切り替え
>use admin
shard設定
sh.addShard("hoge01.jp:27018")  
sh.addShard("hoge02.jp:27018")  
sh.addShard("hoge03.jp:27018")  
shardingの有効化
> sh.enableSharding("test")
CollectionにShardKeyを設定

今回はInsexをkeyに設定

> db.runCommand({shardcollection:"test.hogehoge",key:{"_id" : 1}})

設定が出来ると

--- Sharding Status ---
  sharding version: {
        "_id" : 1,
        "version" : 4,
        "minCompatibleVersion" : 4,
        "currentVersion" : 5,
        "clusterId" : ObjectId("534b467a62879b5378416f51")
}
  shards:
        {  "_id" : "shard0000",  "host" : "hoge01.jp:27018" }
        {  "_id" : "shard0001",  "host" : "hoge03.jp:27018" }
        {  "_id" : "shard0002",  "host" : "hoge03.jp:27018" }
  databases:
        {  "_id" : "admin",  "partitioned" : false,  "primary" : "config" }
        {  "_id" : "test",  "partitioned" : true,  "primary" : "shard0000" }
                test.hogehoge
                        shard key: {
        "_id" : 1
}
                        chunks:
                                shard0001       17
                                shard0002       17
                                shard0000       417
                        too many chunks to print, use verbose if you want to force print

これでシャーディングが動いているのでchunksの状態は徐々に変わっていきます。

因にシャーディングの設定は一度設定すると変更出来ないので要注意です。

Finagle + Thriftのbuild.sbt

またSBT関連でハマったのでメモ。

Finagle使ってThriftサーバーを立てようとしてつまづいた。

FinagleのThrift Server Sampleにscrooge-sbt-pluginを使うと書いてある。

thriftファイルを書いてビルドすればtarget/の中にjarを作成してくれる代物。

GitHub参考に以下で設定。

plugins.sbt
addSbtPlugin("com.twitter" %% "scrooge-sbt-plugin" % "3.9.2")
build.sbt
com.twitter.scrooge.ScroogeSBT.newSettings

libraryDependencies ++= Seq(
  "org.apache.thrift" % "libthrift" % "0.8.0",
  "com.twitter" %% "scrooge-core" % "3.9.2",
  "com.twitter" % "finagle-thrift_2.10" % "6.13.1"
)

ほんで、この設定でビルドしようとすると・・・

[warn] 	::::::::::::::::::::::::::::::::::::::::::::::
[warn] 	::          UNRESOLVED DEPENDENCIES         ::
[warn] 	::::::::::::::::::::::::::::::::::::::::::::::
[warn] 	:: com.twitter#scrooge-sbt-plugin;3.9.2: not found
[warn] 	::::::::::::::::::::::::::::::::::::::::::::::
[warn] 
[warn] 	Note: Some unresolved dependencies have extra attributes.  Check that these dependencies exist with the requested attributes.
[warn] 		com.twitter:scrooge-sbt-plugin:3.9.2 (sbtVersion=0.13, scalaVersion=2.10)
.
.
.

調べるとSBTのバージョンが0.13というのがダメらしい。

どんどんSBTが嫌いになる今日この頃。

まあ、それは置いておいてSBTのバージョン設定を下げよう。

project/直下にbuild.propertiesファイルを作成。

build.properties
sbt.version = 0.12.2

これでOK。

あと、pluginsで見に行くリポジトリを追加しておく。

plugins.sbt
resolvers += "sonatype" at "https://oss.sonatype.org/content/groups/public"

addSbtPlugin("com.twitter" %% "scrooge-sbt-plugin" % "3.9.2")

とりあえずこれでビルドは通った。

2014/04/21追記

thriftファイルはsrc/main/thrift/直下が標準になっているのでそこにファイルを置く。

そうすればSBTのcompile時にtarget/scala-2.10/src_managed/main/配下に指定のnamespaceで出力されます。

Scala + SBT + FinagleでNoSuchMethodException

Finagle試していたら

Finagleを使ってRPCのアプリを作っていてハマったのでメモ。

サンプルのFinagle-Httpを見ながら作っていたら実行時にException発生。

java.lang.NoSuchMethodError: scala.Predef$.augmentString(Ljava/lang/String;)Ljava/lang/String;

ん?Twittet様のサンプルが実行できないだと?

何か私の設定がおかしいに違いない。

Dependenciesのミス

build.sbtはこんな感じ。

name := "HttpServer"

version := "1.0"

resolvers ++= Seq(
  "Twitter Repository" at "http://maven.twttr.com/"
)

libraryDependencies ++= Seq(
  "org.slf4j" % "slf4j-api" % "1.7.1",
  "com.twitter" % "finagle-core" % "5.3.20",
  "com.twitter" % "finagle-http" % "5.3.20"
)

う〜ん。Webの記事パクって書いたからライブラリのバージョンか?
となって見てみると。

2014/03/05現時点でのバージョンは6.12.1



反省して修正・・・。GitHubページ見るべきだった。

  "com.twitter" % "finagle-core" % "6.12.1",
  "com.twitter" % "finagle-http" % "6.12.1"

再度実行するとまだ同じExceptionが発生。

ん?意味が分からん。

SBTの見ているScalaのバージョン修正

そういえば以前に会社の先輩がSBTの持っているScalaのバージョンもあるから依存関係多いから注意が必要と言って頂いたの思い出した!

先ほどと同じくbuild.sbtに以下追加。

  scalaVersion := "2.10.3"

もうこれで大丈夫だと思いSBTのリフレッシュ実行。

するとエラーがまた出た・・・。

##再びDependenciesのミス

libraryDependenciesの取得時にエラーが発生してライブラリが無いと起こられたのでMavenRepositoryを確認。

2.10.xでやる時は書かないと行けないんですね・・・。

  "com.twitter" % "finagle-core_2.10" % "6.12.1",
  "com.twitter" % "finagle-http_2.10" % "6.12.1"

これでなんとか実行できるように。

これに結構費やしてしまった・・・。

SBTは他にもいろいろつまづきそうな予感です。

また、つまづいたら書きます。

Guide to ScalaーScalaプログラミング入門

Guide to ScalaーScalaプログラミング入門