node.jsでMySQLを使う


node.jsでMySQLを使う場合、ググるといっぱい出てきます。

クラスメソッドのブログ

Qiitaの記事

npmにMySQLのライブラリがありますので、それを使用します。
MySQLのnpm
READMEによると下記のように使用します。

ライブラリのインストール

$ npm install mysql

接続情報とクエリーの実行

createConnection関数でMySQLのホスト名、ユーザー名、パスワードなどを定義し、
query関数でSQLを実行、コールバック関数で結果を受け取ります。

もうちょっと使いやすく

1ファイルに記述するのは上記のやり方で十分ですが、
実際には、接続情報は1箇所に記述したいですし、コネクションプールも使いたいかなと。
下記サイトが参考になりました。

How To Use MySQL With Node & Express

一部抜粋します。

本番用、テスト用のモードを指定し、使用するデータベースを分けています。
また、createPool関数でコネクションプールを使うようになっています。

以上です。


スクレイピング-SpookyJS編-


前回 CasperJSでスクレイピングしましたが、node.jsからは使用できなかったので、
node.jsから使用できるSpookyJSでスクレピングしてみました。

SpookyJS公式

SpookyJSはnode.jsからCasperJSを起動するようにしたライブラリです。
casperjsコマンドを内部で実行しているようです。

簡単なサンプルを作りました。GitHub

SpookyJSのインストール

CasperJS、PhantomJSのインストールも必要です。
SpookyJS自体はnpmでインストールできます。

$ npm install spooky

SpookyJSでスクレイピングする処理を書く

googleで”スクレイピング”を検索し、結果を表示します。

spooky.then内で定義している関数がPhantomJS内で実行されるJavaScriptになります。
‘load’イベントを作成し、その引数にCSSセレクタで指定した要素からhref属性を取得し、そのhrefを返します。
spooky.on(‘load’・・・で定義したところでイベントを受信します。
この動作自体はCasperJSと同じですが、SpookyJSなら受け取った値をmysqlのライブラリを使ってDBへ登録など、
node.jsのライブラリをも使うことができます。
CasperJSのwaitTimeoutやstepTimeoutも指定することができるので、Ajaxのページでも値が取ることができます。

以上です。


スクレイピング-CasperJS編-


目的

CasperJSを使ってスクレイピングしてみます。

CasperJS公式

CasperJSは、PhantomJSを使いやすくラッピングしたJavaScriptです。
最初は、node.jsのライブラリと思ってましたが、使ってみたらそうではなく、
casperjsというコマンドで実行します。
そのためnode.jsの他のライブラリを使うことはできませんでした。

CasperJS、PhantomJSのインストール

最初はPhantomJSからインストールします。

PhantomJSのダウンロードページ

各OS毎にバイナリが用意されています。
今回はMac OS X版をダウンロードし、zipを展開します。
展開するとバイナリが出てきますので、適当にパスが通ったところに置きます。
例)
mv ~/Download/phantomjs-2.1.1-macosx /usr/local/

次にCasperJSをインストールします。npmで簡単にインストールできます。

npm install casperjs

CasperJSでスクレイピングする処理を書く

CasperJSの実行

casperjsコマンドで実行します。

$ casperjs casperjs_sample.js

下記のようにログ出力されました。

/url?q=https://ja.wikipedia.org/wiki/%25E3%2582%25A6%25E3%2582%25A7%25E3%2583%2596%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AC%25E3%2582%25A4%25E3%2583%2594%25E3%2583%25B3%25E3%2582%25B0&sa=U&ved=0ahUKEwjH7s223I3SAhUMbbwKHWkWAroQFggYMAE&usg=AFQjCNHZAORThLyskf3nDxY9SlIMZY3Mvg
/url?q=https://ja.wikipedia.org/wiki/%25E3%2582%25A6%25E3%2582%25A7%25E3%2583%2596%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AC%25E3%2582%25A4%25E3%2583%2594%25E3%2583%25B3%25E3%2582%25B0&sa=U&ved=0ahUKEwjH7s223I3SAhUMbbwKHWkWAroQFggcMAI&usg=AFQjCNHZAORThLyskf3nDxY9SlIMZY3Mvg

期待するものは、httpsから始まるURLですが、最初に”/url?q=”という文字がついています。
どうもユーザエージェントの指定で結果が変わるようです。
CasperJSのデフォルトのユーザエージェントは下記のものでした。

Mozilla/5.0 (Macintosh; Intel Mac OS X) AppleWebKit/538.1 (KHTML, like Gecko) CasperJS/1.1.3+PhantomJS/2.1.1 Safari/538.1

ユーザエージェントをChromeのものに変えると期待するURLを得ることができました。

casper.userAgent(“Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36”);

スクレピングするならbotらしいユーザエージェントが良いのだと思います。

以上です。


MacBook Pro(Late 2016)がやってきた


ようやくMacBook Proが到着しました。
注文日:2016/10/29
到着日:2016/12/03
5週間くらいかかりました。
以前使っていたのはMacBook Air(Late 2011)なので5年ぶりの新調です。

MBP2016

MBP2016

スペック

注文内容より転記。

13インチMacBook Pro – スペースグレイ
2.9GHz Dual-core Intel Core i5
16GB 2133MHz LPDDR3 SDRAM
Intel Iris Graphics 550
512GB PCIe-based SSD
Four Thunderbolt 3 ports
Touch Bar and Touch ID
Force Touch trackpad
KYBD/USER’S GUIDE-JPN
COUNTRY KIT-JPN

使ってみた感想

とりあえず開封して環境を整えての感想です。

外観

MacBook Airより重いけど、薄い。
実際に横に並べてみるとAirの一番厚い部分よりも薄いです。

トラックパッドが大きく、クリックも軽いので快適です。

キーボードのストロークが浅く良くないと前評判でしたが、実際使ってみると悪くありません。
浅いは浅いですが、キーの反発も強いので打ちやすいと思います。

電源にケーブルを巻き付ける仕組みがなくなっていて、
ケーブルをまとめるのがやりにくそうです。
また、接続部分がMagSafeのようにカチッと気持ち良くいかず、
グッと挿し込む必要があります。
抜くときもグッとやるので、抜いた反動で手が近くに置いていた携帯に当たり、テーブルから落ちる事故が。。。
気をつけたいと思います。
このケーブルですがUSB Type-Cなので、MacとNexus5Xをつなげることができました。

スペック的に以前使っていたAirよりも遥かに上がっているので快適なのは間違いありません。

TouchBar

一番気になっていたTouchBarですが、対応しているアプリケーションが少ないのでなんとも。。
SafariでYoutubeを再生するとシークバーが出てきますし、新規タブを開くとブックマークが出てきます。
複数タブを開いてるとタブの内容が表示されています。タップでタブが切り替えられます。
とはいえこれくらいの機能だと使うかというと使わないかなぁと。
ChromeはまだTouchBarに対応していないようで、TouchBarには最小限のものしか出ていません。
これからアプリケーションが対応してきたら違ってくるのかもしれません。

TouchBarがファンクションキーを兼ねていて、fnキーを押すとF1からF12が表示されます。
カタカナに変換とかいちいちfnキー押さないといけないのが手間です。
何か改善できないかと情報探しています。

escキーが端っこから少しずれて右に寄っていて気になりますが、
escキーじゃない左側をタップしてもキーが反応しているので、
特に気にならないかもしれません。

MBP2016 esc

MBP2016 esc

まとめ

  • 薄い
  • トラックパッド快適
  • キーボードの打鍵感は気にならない、慣れそう
  • 電源ケーブルは巻き付けられない
  • TouchBarは対応アプリケーション待ち
  • 文字入力中はファンクションキーを常時出したいけどどうしたら良いんだろう
  • escキーは特に問題にならなさそう
  • 以前使っていたMacよりスペックが大幅に上がって感動

—-
2016/12/10追記

> 文字入力中はファンクションキーを常時出したいけどどうしたら良いんだろう

カタカナ、半角全角英数への変換をファンクションキーでやっていましたが、
Macではcontrolを押しながらやる方法が存在していました。知らなかった。。。

Macの英数・カタカナ変換はファンクションキーではなくControlキーを使う

Google日本語入力で確認しました。

ショートカット 変換
cotrol+j ひらがな
cotrol+k カタカナ
cotrol+l 全角英数
cotrol+; 半角
カタカナの状態で変換すると半角カタカナ
英数の状態で変換すると半角英数になる

以上です。


NURO光のONU(F660A)のSambaを使ってみたらMacからつながらなかった


最初に

我が家の回線はNURO光を使っています。
NURO光のONUにはUSBが付いており、そこにUSBメモリ等を接続することで簡易的なNASになります。
せっかくなのでUSBメモリを買ってきて使ってみました。

結果は以下の通りです。
WindowsPC・・・日本語で書き込む以外問題なし
Android・・・日本語は文字化けするが使える
Mac・・・アクセスできない
iPad・・・日本語は文字化けするが使える

環境

ONU・・・ZXHN F660A(ファームウェア:V1.0.10P4T1)
WindowsPC・・・Windows10
Android・・・Nexus5X(Android7.0)
Mac・・・MacBook Air(OS X El Capitan 10.11.6)
iPad・・・iPad Air(10.0.1)
USBメモリ・・・Transcend 64GB TS64GJF790KPE

やったこと

Sambaを有効にする

  1. F660AにUSBメモリを挿す。
  2. F660A管理画面にログインする。
  3. 左側メニューのアプリケーション-ホーム共有(samba)をクリック
  4. 「Sambaサーバを有効」にチェックを入れる。
  5. 「ホスト名」に名前を入れる(今回はnuroにしました)

各チェックボックスの意味は取説を参照してください。
F660Aの取説

WindowsPCからアクセス

エクスプローラーからネットワークを開くと、ネットワークに「NURO」というコンピュータが表示されます。
「\\NURO\samba\usb1_1」のパスでアクセスできました。
ファイルの読み込み・・・OK
ファイルの書き込み・・・OK
日本語ファイル名・・・事前に日本語で用意したファイルの表示は問題ないが、Samba経由でファイルを日本語で作成すると表示がおかしい。

Android携帯からアクセス

Androidから「X-plore File Manager」というアプリを使用しました。
ファイルの読み込み・・・OK
ファイルの書き込み・・・OK
日本語ファイル名・・・NG

Macからアクセス

MacのFinderから「サーバへ接続」で試みましたが接続自体できませんでした。
サーバアドレスに「smb://nuro/samba/」で接続できるはずですが、下記エラーが発生しました。

F660A samba error

サーバ”nuro”への接続で問題が起きました。
接続しようとしているサーバのバージョンはサポートされていません。
システム管理者に問い合わせて、この問題の解決を依頼してください。

またMacのコンソールにもエラーが出ていました。

2016/11/20 15:30:40.000 kernel[0]: smb1_smb_negotiate: Support for the server NURO has been deprecated (PreXP), disconnecting

何かしらバージョンがサポート対象外のようです。
エラーメッセージをググりました。

10.9.2 Mavericks and can no longer connect to our SMB file share on the network.

MavericksからSMBのバージョンが上がって、旧バージョンは使えなくなったような事が書かれていそうです。

10.9: Switch the SMB stack to use SMB1 as default

強制的にSMB1を使用する設定があるようです。
しかしこの設定を試してみたのですが、接続はできませんでした。。。
El Capitanまでいくとまた変わっているのかもしれません。そこまでは調べられませんでした。。。

iPadからアクセス

iPadから「FileExplorer Free」というアプリを使用しました。
ファイルの読み込み・・・OK
日本語ファイル名・・・NG

書き込みはFree版だと機能提供されていないので試せませんでした。

以上です。


ES2015の環境作成(Babel、watchify)


ES2015でJavaScriptを書こうと思い環境構築を始めましたが、
新旧情報があり何をすれば良いのかいまいちわからなかったので、
手順を残します。

2016/06/15時点の情報です。

npmはすでにインストール済みの状態で始めます。

1. workディレクトリを作成する。

$ mkdir work
$ cd work

2. npmで初期化する。

$ npm init
全部エンターで作成してみる。
変更したい所があれば随時変更する。
package.jsonが作成されます。

3. 必要なライブラリをインストールする。

$ npm install –save-dev watchify
$ npm install –save-dev babelify
$ npm install –save-dev exorcist
$ npm install –save-dev babel-preset-es2015

4. .babelrcを作成する。

$ vi .babelrc
下記の設定を記述する。
{
“presets”: [“es2015″]
}

5. watchifyを起動する設定を記述する。

毎回watchifyコマンドで起動してもよいのですが、
npmコマンドで簡単に起動できるように設定ファイルに記述します。

$ vi package.json
以下のwatchの記述を追加する。
scripts: {
test: echo \”Error: no test specified\” && exit 1,
“watch”: “watchify -t babelify ./index.js -o ‘exorcist ./build.js.map > ./dist/index.js’ -d”
}

出力用のディレクトリも作成しておきます。
$ mkdir dist

入力用のファイルを作成しておきます。中はからでもOKです。
$ touch index.js

入出力用のファイル、ディレクトリが無いとwatchify起動時にエラーになります。

6. watchifyを起動する

$ npm run watch

これでindex.jsを保存するたびにトランスパイルされたJavaScriptが生成されます。

以上です。


GCM(Google Cloud Messaging)を始めて見る


はじめに

GCM(Google Cloud Messaging)のGet Startedをやってみました。
基本的には公式ページをそのままやれば動きますが、とこどころそのままではダメでした。

公式サイト:https://developers.google.com/cloud-messaging/

必要なもの

  • Google Developers Console

大まかな流れ

  1. サンプルアプリの取得
  2. 設定ファイルの取得と設置
  3. サンプルアプリのビルド、実行

サンプルアプリの取得

まずは、公式サイトの”TRY IT ON ANDROID”のリンクをクリックし上から順にやっていきます。

サンプルアプリを取得します。

$ git clone https://github.com/googlesamples/google-services.git

GCM以外にもAdMob、Analytics、App Index、App Invites、Sign Inのサンプルを含んでいます。
今回はGCMのサンプルを使用します。
とりあえずcloneしてくれば大丈夫です。

Android Studioでプロジェクトを取り込むには、
google-services/android/gcm
をインポートするのですが、
AndroidStudio用のインポート(Open an existing Android Studio project)ではなく、
Gradle用のインポート(Import project(Eclipse ADT, Gradle, etc.))を使用します。
しかし、インポートしてもAndroidStudioがビルド構成を理解してくれず、
そのままではビルド、実行ができません。
後述するサンプルアプリのビルド、実行を先にしておく必要がありました。
(これは別のやり方があるのかもしれません)

設定ファイルの取得と設置

さっそくプロジェクトのビルドをしたいのですが、その前にGCM用の設定ファイルの作成が必要です。
公式ページに”GET A CONFIGURATION FILE”とあるボタンをクリックします。
Google Developer ConsoleのAPIマネージャーを使用するので、
Googleアカウントでログインが必要なります。
ログインすると設定ファイル作成画面になります。
今回はサンプルプロジェクトで試すので設定の変更の必要がなく、
App Name・・・Default Demo App
Android package name・・・gcm.play.android.samples.com.gcmquickstart
のままで、次に進みます。
CloudMessageの項目にAPI Key、Sender IDが発行されます。
そのまま次に進みます。
ファイルが生成されるとダウンロードページになるので、”google-service.json”をダウンロードします。

次にダウンロードしたファイルをサンプルプロジェクトに設置します。
google-service.jsonをサンプルプロジェクトのapp/下に置きます。

サンプルアプリのビルド、実行

サンプルプロジェクトをcloneした直後ではAndroidStudioがプロジェクト構成を
認識してくれないので手動でビルドします。

$ ./gradlew clean assembleDebug

しばらくすればビルドが終わりますので、

$ adb install app-debug-unaligned.apk

でアプリをインストールします。

ビルドするとAndroidStudioがビルド構成を認識してくれるので、AndroidStudioからビルド実行が可能になります。

サンプルアプリを実行すると最初GCMへの登録処理が行われます。
登録処理後にサンプルプロジェクトからメッセージを送信します。
サンプルプロジェクトで、メッセージ送信用のプログラムを動かします。
$ ./gradlew run -Pmsg=”test”
サンプルプログラムのビルド後に実行されます。
ちょっと待つと端末にメッセージが着信します。

以上です。


Safariでdivのdatasetを249回ループすると値がundefinedになる。


今回はAndroidではなくJavaScriptです。

divのdatasetをループで値を参照した時の挙動がChromeとSafariで異なっていました。

やったこと

divを配列で249個用意し、最後のdivだけdatasetにデータを入れておきます。
(あんまりやることはないと思いますが、、、)
そしてfor文で全divに対してdatasetの値を出力しました。

結果

期待値としては、248回undefined、最後1回が値が出るはずです。
Chrome(49.0.2623.108)・・・248回undefined、最後にデータ(期待通り)
Safari(9.0.3)・・・249回undefined

サンプル

配列の最後だけデータを入れると動作がおかしいですが、
最後より前にデータを入れると期待通り出力されました。

サンプル2

結果2

Safari(9.0.3)で動かすと
246回undefined
123
undefined
123
と出力されました。

原因は分かりませんが、このような動作をしていました。

Safari 9.0 の JS で「同じ関数を繰り返し実行しただけで返り値が変わる」という強烈なバグが発見されてる

Qiitaに投稿されている現象も報告されていますが、関係あるかは調べられていません。。


ABC2016Springに行ってきました


ABC2016Springに行ってきました。

今回はAndroidメインではなくて、IoTに関わる事、機械学習が多いようでした。

Google TensorFlowとAndroidが繋がる未来

有山圭二さん
有限会社シーリス 代表

好みの画像を自動で収集したいという内容で、TensorFlowを触ってみようと思わせる素晴らしいものでした。
動機が明確なのが一番ですね。

Cloud Vision API and TensorFlow

佐藤 一憲さん
Google Cloud Platform Developer Advocate

Google Cloud Platform == The Datacenter as a Computer
データセンターまるごとを一つのコンピュータとしていて、
何千台のコンピュータをコマンド1つで使えるというすごい話だなと。

Cloud Vision APIが面白そうで、学習させる必要が無いというのがお手軽だし、
画像によっては緯度経度まで出るそうです。ストリートビューのデータを使っているそう。
カスタマイズが出来ないので、その場合は、TensorFlowを使いましょうとの事。

ビッグデータと機械学習が変えるソフトウェア開発

Microsoft 田丸さん

Skype Translatorが、英語、ラテン系の言葉ならほぼリアルタイムで変換できて、品質も良いとの事。
昔は、アルゴリズムを作って結果を出したが、
今は、ハードとかコストが下がっていてデータと機械学習で結果を出すのもあり。
HoloLensもアルゴリズムより機械学習を使っている。
Cortana APIというのがあるようです。

Androidを中心に紐解くIoT

Amazon 西谷さん

講演者のブログです。

デバイスとクラウドの接続パターン

  1. AndroidをBLEで繋いでゲートウェイとして使用
  2. Android自身をセンサーデバイスとなる(GPSとか)
  3. 収集、分析したデータを可視化などビューアとして使用。通知受ける。

AWS Mobile Hubを使うのが一番手っ取り早いのかなと思いました。
mBaaSではないので、それぞれのサービスを理解しどう組み合わせるか、
色々試してみたいです。

モバイル通信をプログラマブルに活用IoT通信プラットフォーム”SORACOM”

SORACOM 江木さん

IoTの課題

  • モノの接続方法
  • セキュリティ、通信プロトコル

上記課題をSORACOM SIM使うと解決しましょうという内容でした。
モノの接続方法には、Air。
セキュリティ、通信プロトコルには、Beam。
SORACOMの詳しい説明を初めて聞きましたが、
ネットワークに繋げる必要があるなら使ってみたいと思いました。
1年間の無料枠あり、詳しくはWebへとの事。

以上です。


AWS S3のSDKを使ってみる3 実践編


前回までは環境構築でした。
今回は実際にプログラムを書いて動かしてみます。

ソースはGitHubにアップしました。
https://github.com/macchan-dev/AmazonS3Sample

以下の動作をします。

  • Bucketにあるオブジェクト一覧をListViewに表示
  • 右下のボタン押下でカメラ起動(動画)
  • 動画撮影完了後、動画ファイルをS3にアップロード

TransferUtilityを使った組み込み方が公式ドキュメントにまとまっているので分かりやすいと思います。
Amazon Simple Storage Service (S3)

大まか流れとしては、以下のとおりです。

  1. CognitoのSample codeにあるCognitoCachingCredentialsProviderを作成します。
  2. CognitoCachingCredentialsProviderインスタンスを引数にAmazonS3Clientを作成します。
  3. AmazonS3Clientインスタンスを引数にTransferUtilityを作成します。
  4. TransferUtility#uploadを使用しファイルをアップロードします。

注意点としては、AndroidManifest.xmlにTransferServiceの記述がないとうんともすんとも言いません。
エラーにもならないので何故動かないのか悩ますw

使用したTransferUtilityは、upload、downloadを簡単にすることができ、
進捗状況も取得できるので使いやすいと思いました。
細かいこと(オブジェクトの権限変更等)は出来ないので、別途SDKのAPIを叩く必要があります。

今回は、オブジェクトのリスト取得にRxJavaを使いました。
RxJavaについては以下が詳しかったです。

RxJava学習のベストプラクティスっぽいもの
分かった気になるはじめてのRxJava
7つのサンプルプログラムで学ぶRxJavaの挙動

以上です。