Narumium

monaca を利用してアプリ作ったりしてます

[narumium-blog]

monacaで作ったファイルをシステムに認識させる

code{white-space: pre;}

moanacaで文字を画像化するアプリを作るのに困ったこと

今回作ったもの

文字画像 Narumium 価格：0

文字をいろんな色、フォントで画像化するアプリ 使ったもの：canvas

MONACAでメディアスキャンができないので何とかする

monacaではファイルをローカルに保存しても他のアプリから見ることはできません（アルバムアプリとか）。 ContentResolverやMediaScanConnectionによってファイルをシステムに認識させる必要があります。

結論

monacaではできません。 GOLD以上のプランなら独自プラグインを使えるのでそれで対応できるかもしれません。 お金がないので今回はcordovaで作ることにします。

monacaからプロジェクトエクスポート

まずはmonaca上で作っていたアプリを吐き出します。 プラグインは吐き出されません。 ビルドの設定は吐き出されるので先にmonacaに登録しておけば後々楽です。

cordovaのインストール

node(npm)のインストール

npm install -g cordova

monacaからcordovaへ

cordova ベースでプロジェクトを作成します

cordova create フォルダ名 パッケージ名 アプリ名 -d

cordova create folder com.hoge.fuga HogeFuga -d

cordova platform add android

www,platforms\resフォルダの中身を置き換える

pluginの追加（monacaで使ったものとMediaScan）

cordova plugin add https://github.com/apache/cordova-plugin-file.git

cordova plugin add https://github.com/apache/cordova-plugin-file-transfer.git

cordova plugin add https://github.com/apache/cordova-plugin-splashscreen

cordova plugin add https://github.com/Pandazaur/cordova-plugin-android-mediascanner

プラグインの使い方

window.plugins.scanmedia.scanFile( FILEPATH, function (msg) {console.log("Success ScanMedia");}, function (err) {console.log("Fail ScanMedia: " + err); });

デプロイ(jdkとandroid-sdkが必要)

準備

..\jdk\bin\とsdk\build-tools\[version]\を環境変数Pathに追加する

署名のためにmonacaからkeystore.privateをダウンロード

ビルド：cordova build --release

folder\platform\android\build\outputs\android-release-unsigned.apkができる

署名： keytool -genkey -v -keystore keystore.private -alias alias -keyalg RSA -validity 10000

パスワードは2つ必要になる

monacaだと普段１つしか使わないので忘れていたらあきらめる

最適化：zipalign -v 4 android-release.apk android-release-opt.apk

必須。これをしないと配布できない。

感想

monaca使うとかなり楽できてるのが実感できた。 phonegap使おうと思ったらしょっぱな404だったけどあれはいったいなんなのか。

[narumium-blog]

ラズベリーパイと対話するまで（実践編）

code{white-space: pre;}

基本方針

前回の続き

Julius をモジュールモードで起動

julius -C _text.jconf -module 10500

node.js で接続してデータを待つ

child_processをつかって aquestalkpi で話し返す

問題点と解決方法

execだとパイプライン処理がうまくできなかったのでspawnを使う

Juliusのモジュールモードの送ってくるデータが壊れている

データの送り方はよくわからないけど「.」のみの行が着たら一文終わりらしい

.\nがくるまでバッファにためて処理するようにする

Juliusさんが何でも辞書内の言葉で解釈してしまう

辞書にごみを混ぜる(あああ,いいい,...,んんん)

SCORE,CMの値に適当に閾値を設ける

ソース

index.js

var net=require('net'); var x2j=require('xml2js').parseString; var spawn = require('child_process').spawn; var t=""; var proc; var client=net.createConnection(10500,'localhost',function(){console.log("START.");}); client.on('data',function(data){ t+=data.toString(); if(t.indexOf(".\n") != -1){ var arr=t.split(".\n"); for(var i=0;i<arr.length-1;i++){ x2j(arr[i],{trim:true},function(err,result){ if(result.RECOGOUT){ var word = result.RECOGOUT.SHYPO[0].WHYPO[0].$.WORD; var score= result.RECOGOUT.SHYPO[0].$.SCORE; var cm = result.RECOGOUT.SHYPO[0].WHYPO[0].$.CM; console.log(word + " : " + cm + " - " + score); if(cm>0.85&&score>-3500){ if(word=="カメラ")procCmd("はいはいかめらかめら"); if(word=="送信") procCmd("はいはい送信しましたよ"); if(word=="ワトソン")procCmd("ワトソンくんおねがいします"); } } }); } t=arr[arr.length-1]; } }); client.on('end',function(data){console.log("END.");}); function procCmd(word){ var cmd='~/voice/aquestalkpi/AquesTalkPi "'+word+'" | aplay -D plughw:1'; proc = spawn("sh",["-c",cmd]); proc.stdout.on('data', function(data) { console.log('stdout: ' + data); }); proc.stderr.on('data', function(data) { console.log('stderr: ' + data); }); proc.on('exit', function(code) { console.log('exit code: ' + code); }); }

感想

簡単なプログラムだけで特定の単語に返事してくれるものができた。 httpやrequestモジュールで送受信してもいいし、 spawnからCURLでファイル送信したり、raspistillで写真とるのも簡単。 とりあえず閾値部分をどうにか自動で定めたい。

[narumium-blog]

ラズベリーパイと対話するまで（準備編）

ラズベリーパイに話しかけたら色々してくれるようなものを作りたい。 その準備の覚書。

環境

Raspberry Pi 2 Model B

NOOBS-RASPBIAN

最初にいろいろ更新

sudo apt-get update

sudo apt-get upgrade

sudo rpi-update

sudo reboot

日本語フォントを入れる

sudo apt-get install fonts-takeo ibus-mozc

再起動

日本語入力できるようにする

sudo apt-get install ibus-anthy

Menu > Preference > RaspberrypiConfig > Locale変更 でメニューを日本語化

Menu > 設定 > IBus > 入力メソッド > 追加,日本語,Anthy,追加の順

Menu > 設定 > IBus > 一般 > 入力メソッドをCtrl+Spaceに変更

これでCtrl+Spaceでメソッド変更できるらしいけどできない

全角/半角キー効くから別にいらない

日付を直す

sudo dpkg-reconfigure tzdata

Asia -> Tokyo を選択

起動後に自動でwifiに接続する

そのうちSIMドングルに差し替えたい

手順

ネットワークの確認

wpa_passphrase SSID PASSWORD

network={ ssid="SSID" #psk="PASSWORD" psk="XXXXXXXX" }

サプリエント設定

sudo vi /etc/wpa_supplicant/wpa_supplicant.conf

network={ ssid="SSID" psk="XXXXXXXX" key_mgmt=WPA-PSK proto=WPA pairwise=CCMP group=CCMP priority=2 scan_ssid=1 }

正規カメラモジュールの接続

設定

接続→https://www.raspberrypi.org/help/camera-module-setup/

コマンド raspi-config

6.Enable camera選択->Enable

Finish選択で再起動

写真を撮ってどこかに送る

raspistill -w 320 -h 240 -o stream.jpg --nopreview

curl -F [email protected] http://xxx.yyy.zzz/upload > /dev/null

リモート接続の設定

Remote Desktop Protocol : xrdp

sudo apt-get install xrdp

DNS : avahi-daemon

sudo apt-get install avahi-daemon

/etc/hosts に書いてある127.0.1.1:raspberrypi の名前が使える

WindowsからはBonjourが必要なのでiTunesをインストール

raspberrypi.localの名前でリモート接続

デフォルトだとID:pi,PASS:raspberry

キーボードを日本語キーボードにする

cd /etc/xrdp/ sudo wget http://w.vmeta.jp/temp/km-0411.ini sudo ln -s km-0411.ini km-e0010411.ini sudo ln -s km-0411.ini km-e0200411.ini sudo ln -s km-0411.ini km-e0210411.ini

ssh,scpの準備

raspberry側

sudo vi /etc/avahi/services/ssh.service

<?xml version="1.0" standalone="no"?> <!DOCTYPE service-group SYSTEM "avahi-service.dtd"> <service-group> <name replace-wildcards="yes">%h</name> <service> <type>_ssh._tcp</type> <port>22</port> </service> </service-group>

sudo /etc/init.d/avahi-daemon restart

ホスト側

ssh [email protected]

scp XXXX [email protected]:/home/pi/XXXX

node.jsの準備

コマンド

nodebrew経由で入れる

$ wget git.io/nodebrew $ perl nodebrew setup $ vi ~/.bashrc 追記：export PATH=$HOME/.nodebrew/current/bin:$PATH $ source ~/.bashrc $ nodebrew install-binary latest

使う

mkdir test & cd $_ npm init npm install express socket.io dateformat jquery request ...

マイクを使う

デバイスの優先度を上げる(すでにあるなら編集する)

モジュール確認

sudo cat /proc/asound/modules

/etc/modprobe.d/alsa-base.conf でモジュール読み込み順設定

options snd slots=snd_xxx,snd_usb_audio options snd_usb_audio index=0 options snd_xxxxxxxxx index=1

カード番号を見て環境設定する

arecord -l

export ALSADEV=hw:カード番号

マイク音量を設定する

amixer sset Mic 50 -c 0

(amixer sset Mic 0-62 -c カード番号)

音声認識-Juliusを使う

Julius本体を解凍してインストール

./configure

make

sudo make install

module組み込み

sudo sh -c "echo snd-pcm-oss >> /etc/modules"

ほかのモジュールも解凍して使ってみる

julius -C pathToGrammar/testmic.jconf -charconv EUC-JP UTF-8

julius -C pathToDictation/main.jconf -C pathToDictation/am-gmm.jconf -nostrip

音声認識-Juliusを使う2

特定のワードのうちどれが使われたか判断する

text.yomi(定義よみを列挙)

ファイルがUTF8,yomi2voca.plがEUCJPなのでコンバートとしてコンバート

iconv -f utf8 -t EUCJP text.yomi | yomi2voca.pl > text.dic

text.jconfを作ってtext.dicを指定する

-w text.dic -v dictation-kit-master/model/lang_m/bccwj.60k.bingram -h dictation-kit-master/model/phone_m/jnas-tri-3k16-gid.binhmm -hlist dictation-kit-master/model/phone_m/logicalTri -n 5 -output 1 -input mic -input oss -rejectshort 500 -charconv euc-jp utf8 -lv 1000

julius -C text.jconf

音声を出させる-AquesTalk

http://www.a-quest.com/products/aquestalkpi.html

解凍して置くだけ

alsamixer 音量調節やF6でデバイス変更したり

amixer cset numid=3 NUM NUM=(1:アナログ優先,2:HDMI優先,3:自動)

chmod 755 AquesTalkPi 実行できるようにする

./AquesTalkPi "漢字も読めます。" | aplay

USBマイクとUSBスピーカを使う場合

/etc/modprobe.d/alsa-base.conf でモジュール読み込み順設定

options snd slots=snd_xxx,snd_usb_audio,snd_usb_audio options snd_usb_audio index=0 options snd_usb_audio index=1 options snd_xxxxxxxxx index=2

./AquesTalkPi "漢字も読めます。" | aplay -D plughw:1

[narumium-blog]

こんな感じの仕組みを作ってみた。

複数のSphinxプロジェクト管理どうしよう。

[narumium-blog]

ラズパイの準備

IoTのためのラズパイ準備

正規カメラモジュールの接続

接続→https://www.raspberrypi.org/help/camera-module-setup/

コマンド raspi-config

6.Enable camera選択->Enable

Finish選択で再起動

リモート接続の設定

Remote Desktop Protocol : xrdp

sudo apt-get install xrdp

DNS : avahi-daemon

sudo apt-get install avahi-daemon

/etc/hosts に書いてある127.0.1.1:raspberrypi の名前が使える

WindowsからはBonjourが必要なのでiTunesをインストール

raspberrypi.localの名前でリモート接続

デフォルトだとID:pi,PASS:raspberry

node.jsの準備

コマンド

nodebrew経由で入れる

$ wget git.io/nodebrew $ perl nodebrew setup $ vi ~/.bashrc 追記：export PATH=$HOME/.nodebrew/current/bin:$PATH $ source ~/.bashrc $ nodebrew install-binary latest

[narumium-blog]

AWSをつかってみる

Soracom買ってからラズパイとかスマホでいろいろ試してたけどサーバ側を試してなかったのでAWS IoTを使ってみたい。 AWS自体使ったことがなかったのでちょっと試してみた。

アカウント作成

通販のアカウントが使える

無料期間使うにしてもカード含む個人情報を入力する必要あり

途中で英語の電話がかかってくるけどあわてずPIN入力

EC2インスタンス作成

無料対象のmicroインスタンス

セキュリティでHTTP(80)とカスタムTCP(3000)の追加

後は適当に入力して作成

キーペア新規作成 microEC2

コマンド

キーペアで作ったpemを使ってSSH接続

ssh -i /path/my-key-pair.pem [email protected]

何かファイルを送る

scp -i /path/my-key-pair.pem FILE [email protected]:/home/FILE

node.js のインストールとテスト

sudo yum install git -y

-yは問い合わせを全部Yesにする

git clone git://github.com/creationix/nvm.git .nvm

source ~/.nvm/nvm.sh

~/.bash_profileに追記しておく

vi ~/.bash_profile

最終行でoで追記

Esc -> :wq

nvm install v5.5.0

node app.js

http://ec2-xx-xx-xx-xx.ap-xxxx.compute.amazonaws.com:9000/

app.js

var http=require('http'); var app=http.createServer(function(req,res){ res.end('EC2 node.js'); }).listen(9000);

[narumium-blog]

SORACOMが楽しそう

とりあえず買ってみた

amazonで注文 SIMのサイズはナノ、マイクロ、標準があるけど小は大をかねるのでナノを選択

初代XPERIAに入れてAPN登録したら割りとすんなり使えた

名前 任意 (例: SORACOM) APN soracom.io ユーザー名 sora パスワード sora

有効化したら一瞬で１０Mいったので、 IoT Gatewayみたいなのがほしい

どんなものか

基本料金は最安で300円（DMMライトプランは440円）

従量課金制で最大速度は２Mだしほかサービスとは比べにくい

契約数・期間を決めればさらに安くなる（5年で200円）

通信速度をコンソールからさくっと変えられるのは面白い

一番はSIM発行の容易さ、証明なしで何十枚も発行できる

SIM使うときの面倒なもろもろはSORACOMがやってくれる感じなのかな

ものがなくなったら即無効化できる

さすがIoTのためのサービス 問題は何に入れて何を送信するか ネットだと適当なスマホとかラズパイとかばっかだけど、とりあえず何かしらものがないと使い物にならない気がする Beamsのほうは完全にビジネス向けで食指が動かない

参考になりそうなリンク

SORACOM記事まとめ http://dev.classmethod.jp/tag/soracom/ AdventCalendar http://qiita.com/advent-calendar/2015/soracom

価格

端末料金

データのみ SMS付 特徴 Amazon 888 1088 SIMが届いたら自分で登録が必要 Soracom 560 560 購入したコンソールでしか使えない

※サイズによる値段の違いはない

基本料金(円/日)

データ通信のみ SMS付き 登録後 5 10 使用中、休止中 10 15

課金 - 通常時間帯（日本時間 午前6:00-翌 午前2:00）

料金クラス 通信速度 利用料金（上り・下り）（税別） s1.minimum 32 kbps 0.2 円 / MB・0.6 円 / MB s1.slow 128 kbps 0.22 円 / MB・0.7 円 / MB s1.standard 512 kbps 0.24 円 / MB・0.8 円 / MB s1.fast 2 Mbps 0.3 円 / MB・1 円 / MB

課金 - 深夜時間帯（日本時間 午前2:00-午前6:00）

料金クラス 通信速度 利用料金（上り・下り）（税別） s1.minimum 32 kbps 0.2 円 / MB・0.2 円 / MB s1.slow 128 kbps 0.2 円 / MB・0.2 円 / MB s1.standard 512 kbps 0.2 円 / MB・0.2 円 / MB s1.fast 2 Mbps 0.2 円 / MB・0.2 円 / MB

なにしようかなー。

[narumium-blog]

Electron追記

リリースコマンド

npm install electron-packager --save-dev node release.js

node-webkitとの違い

起動までの順序

node-webkit

package.json : 読み込みhtml設定、window設定

first.html : 定義javascript読み込み

main.js : GUI作成

electron

package.json : 読み込みjs設定

app.js : 読み込みhtml設定、window設定、GUI作成

electronの方が設定がまとまっていて良い（HTML側で意識しなくていいし）。

パッケージの容量

electronだと容量が倍近くになる。 単にelectronの基本機能が多めなのかもしれない。

[narumium-blog]

Windows で Electron with Photon を試す

（electronのインストール）

> npm install electron-prebuilt -g

photonフォルダに移動

> npm install > npm start

ここまでは取り合えず動くのを確認。

photonをビルドしてみる

> grunt dist //オプション：server, dist, dist-css WARNING You need to have Ruby and Sass installed and in your PATH for this task to work.

RubyとSassのインストール Ruby download

インストーラをダウンロード　>　✔環境変数のPATHに通す設定

> ruby -v ruby 2.2.3p173 (2015-08-18 revision 51636) [i386-mingw32] > set LANG=ja_JP.UTF-8 > gem update --system > gem install sass

再チャレンジ：photonをビルドしてみる

> grunt dist Error: Invalid Windows-31J character "\xEE"

icons.scssとdocs.scssの先頭に @charset "utf-8";を入れると直った

[narumium-blog]

mongodb起動エラー

I CONTROL Hotfix kb2731284 or a later update is not installed

こんなメッセージとともにエラーが出たのメモ。

理由1  : データ置き場がない

解決策1: デフォルトのパス先を用意する。C:\data\db

解決策2: 起動時にパスを指定する。mongod --dbpath "c:\mongodb\data"

原因2  : 容量がない

解決策1: ジャーナルを使用するために容量を食うらしいのでオフにする。mongod --nojournal 解決策2: ファイル整理やらクリーンアップやらで容量をあける。

今回は容量不足が原因だった。 あのメッセージではわかんないよ...。

[narumium-blog]

プログラミング用フォント

Hack が良いと聞いたので試して見る。

Meirio

Ricty Diminished

Hack

見やすい！ 単にフォントがでかいだけかもしれない。

読みやすかったけど全角：半角が２：１で無かったので Ricty に戻した。 全角を使わない環境ならあり。

Hack : https://sourcefoundry.org/hack/ Ricty Diminished : yascentur/RictyDiminished · GitHub

[narumium-blog]

Angular fullstackをHerokuにデプロイする

アプリ登録

herokuアカウント取得

herokuツールインストール //herokuコマンドを使えるようにする

herokuにクレカ情報を登録 //アドオンのため。Vプレカでもよい。

アプリフォルダでyo angular-fullstack:heroku

アプリ名とリージョンを決める

distフォルダが作られる

distフォルダでheroku addons:create mongolab //mongodbを使う

distフォルダでheroku open //アプリがブラウザ起動

アプリ更新

アプリフォルダでgrunt build

distフォルダでgitプッシュ

git add .

git commit -am “comment”

git push heroku master

エラー対応

クレカ登録されてない

! Please verify your account to install this add-on plan (please enter a credit card) For more information, see https://devcenter.heroku.com/categories/billing Verify now at https://heroku.com/verify

対策：クレカ登録する

herokuコマンドでアプリが特定できない

! No app specified. ! Run this command from an app folder or specify which app to use with --app APP.

対策：distフォルダに移動してコマンドを打つ

なんかよくわからないエラー

yo angular-fullstack:heroku Error angular-fullstack:heroku You don't seem to have a generator with the name angular-fullstack:heroku installed. You can see available generators with npm search yeoman-generator and then install them with npm install [name]. To see the 0 registered generators run yo with the `--help` option.

対策：インストールしなおす

npm install -g yo npm install -g generator-angular-fullstack

[narumium-blog]

たぶんこんな感じ

あ、YomenじゃないYeomenだ

[narumium-blog]

MEAN環境再開2

MEAN環境再開

generator-angular-fullstack で出来上がった構成の設定ファイルを見回す。

名前 役割 設定ファイル npm パッケージマネージャ(サーバ) package.json bower パッケージマネージャ(クライアント) bower.json,.bowerrc yo プロジェクトマネージャ .yo-rc.json grunt タスクランナー Gruntfile.js JSコードスタイル .jscs.js

JavaでいうAnt,Mavenの仕事を分けてる感じ？

名前 役割 設定ファイル Protractor E2E テスト環境 protractor.conf.js Karma E2E テスト環境 karma.conf.js mocha E2E テストFW mocha.conf.js travis CI 継続的インテグレーション protractor.conf.js

Jasmine と Sinon,Chai はテストライブラリなので実行ファイルのみで設定なし？ Jasmine を選んだのに Mocha + Chai + Sinon も用意されてる。

ツール群はなんとなくわかったけど、誰が何を呼び出すのかわからない。

[narumium-blog]

MEAN環境再開

ちょっと間が空いたので、勘を取り戻しつつフルスタックで入れなおしてみる。

導入

適当なフォルダ[FOLDER]を作る

その中にフォルダ[FOLDER/node_modules]を作る

インストール FOLDER>npm install generator-angular-fullstack

Yeomanが無ければインストール FOLDER>npm install -g yo bower grunt grunt-cli インストール確認用コマンド FOLDER>npm list -g --depth=0

自動生成

対話型で選択していけばOK FOLDER>yo angular-fullstack [newapp]

Cliant

Javascript, Javascript+Babel, Coffeescript

HTML, Jade

CSS, Sass, Stylus, Less

ngRoute, uiRouter

BootStrap(Y/n)

UI BootStrap(Y/n)

Server

Mongoose (MongoDB)

Sequelize (MySQL, SQLite, MariaDB, PostgreSQL)

Would you scaffold out an authentication boilerplate? (Y/n)

Would you scaffold out an authentication boilerplate? (Y/n)

Project

Jasmine, Mocha + Chai + Sinon

* 選択によって多少の違いあり

......

選択し終わったらしばらく待つ

実行

FOLDER>grunt serve

エラー対応

>> Error: Cannot find module 'jshint-stylish' => npm install jshint-stylish

jit-grunt: Plugin for the "injector" task not found.,Task "injector" failed. => npm install grunt-injector

Error: Cannot find module './api hing' =>FOLDER/server/route.jsの13行目削除 ==>app.use('/api/things', require('./api\thing'));

MongoDB connection error: MongoError: connect ECONNREFUSED => MongoDBを起動させる

その他コマンド

mongoDB起動 mongod --dbpath c:\mongodb\data --logpath c:\mongodb\logs\mongodb.log ヘロクにデプロイ yo angular-fullstack:deploy heroku

所感

generator-angular-fullstack 自体もグローバルインストールでいいかも

インストール時間が長い

最後にエラーが多発したけどメッセージ見れば原因がすぐ分かる

実はYeomanが良く分かっていない

[narumium-blog]

setTimeout

setTimeoutの動きがよくわからなかったのでまとめ。 関数宣言でも関数式でも結果は動きは変わらない。 大体4パターンの動きをする。

正しく実行される

var st = "'string'"; var it = 5; setTimeout("f("+st+","+it+")",1000); setTimeout("f('str',4)",1000); setTimeout(function(){rewriteG1(st,it);},1000); setTimeout(f,1000); //引数なしの関数ならこれでも動く

すぐに実行される

setTimeout(f("string"),1000);

引数が正しく渡せない

setTimeout("f(x)",1000); //id="x"の要素がある場合 HTML Objが渡される

実行されない

setTimeout("f(x)",1000); //id="x"の要素がない場合(エラー) - setTimeout("f",1000); //ｆは引数なし関数 setTimeout(f,1000); //これは正しく動く setTimeout("f()",1000); //これは正しく動く

[narumium-blog]

view engine を考える

前回： express-generatorを使ってみる

express-generatorのデフォルトはjade

jadeはなんとなく楽しそうだけど、

描画速度の速くて手馴れたJSPに似ているectを使ってみる

追加インストール

npm install ect //間違えて npm install etc して若干悩んだので勢いでタイプしない。

変更点

app.js 変更 app.set('view engine', 'jade'); ↓

var ECT = require('ect'); // ECT 読み込み app.engine('ect', ECT({ watch: true, root: __dirname + '/views', ext: '.ect' }).render); app.set('view engine', 'ect');

/route/index.ect 追加

<!DOCTYPE html> <html> <head> <title><%= @title %></title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <h1><%= @title %></h1> <p>Welcome to <%= @title %> with ECT!</p> </body> </html>

結果

今後の方針

jadeとejsのことはしばらく忘れる。

次はテンプレートにangularjsを組み込もう。時間が取れれば...。