Category » Web技術 « @ ともの技術メモ

サイトのSSL対応化

投稿日 2018年 7月 5日コメントはありません

さくらのレンタルサーバの資料をみていたら、Let’s Encryptを使ったSSL化が簡単にできることがわかりました。

・・・といっても、本当に簡単で、マニュアルに沿って作業するだけです。CLIも必要なく、GUIだけで適用できました。

１．SSL設定の有効化と確認

マニュアル（『【無料SSL】サーバコントロールパネルからの導入手順』）に沿って作業するだけです。気をつけるとすると、マニュアル内にも書いてありますが、発行完了のメールが来るのに多少時間がかかります。１５分くらいかかったでしょうか。ま、そんなレベルです。

２．WordPressでの常時SSL有効化プラグインの導入

さくらのレンタルサーバ専用の常時SSL有効化プラグインを導入して有効化します。これも、マニュアル（『【WordPress】常時SSL化プラグインの使い方』）に沿って作業するだけです。
これだけでサイトがSSL対応できちゃいました。

Web技術
サーバのPHPのバージョンを推奨バージョンに戻す

投稿日 2018年 7月 3日コメントはありません

WordPressの引っ越しを行った際に、PHPのVer7系だと記事が表示されない現象があり、Ver5系に変更したのですが、その後調べてみるとWordPress自体はPHPのVer7系に対応していることがわかりました。さらに調べていくと、テーマやプラグインがPHPのVer7系に対応していないケースで発生することがわかってきました。

セキュリティ面では最新のバージョンを使うに越したことはないので、なんとかならないか調べていたところ、PHP Compatibility ChekerというWordPressのプラグインを使うと問題点のチェックができることがわかったので、インストールして確認してみました。

その結果、やはりテーマやプラグインに問題があるものが見つかりました。プラグインの出力するレポートにどのファイルの何行目がNGが記載されていますので、これを順に見ていくことにします。

テーマについては、式の評価の部分がPHPのバージョンによって差があるところが検知されましたので、これをPHPのバージョンに関わらず同じ評価になるように｛｝を追加しました。具体的には、

$$foo['bar']['baz']

1

$$foo['bar']['baz']

という記述をすると、PHP5では、

${$foo['bar']['baz']}

1

${$foo['bar']['baz']}

と解釈されるのですが、PHP7では、

($$foo)['bar']['baz']

1

($$foo)['bar']['baz']

と解釈されるようです。（参考：http://php.net/manual/en/migration70.incompatible.php）
そこで、この$$が2つ続く箇所については｛｝を追加して、常にPHP5と同じ解釈になるように修正しました。

他には、
- Throws SPAM Awayというプラグイン
  セキュリティ上の課題で変更になった関数（spilt() ⇒ preg_split()）の単純な置き換え
- WP SyntaxHighlighterというプラグイン
  MySQLサーバのバージョン取得の関数（mysql_get_server_info() ⇒ mysqli_get_server_info()）の単純な置き換え
を行いました。
また、使用していないプラグインについては停止・削除を行いました。

一通りの整理を行った後、再度チェックをかけるとエラーはなくなったので、PHPのバージョンをさくらのレンタルサーバで標準の7系にしたところ、それでもきちんと表示できるようになりました。

これとは別に、Crayon Syntax Highlighterというコードをきれいに表示してくれるプラグインが入っていたのですが、停止していました。その理由は、記号が化けてしまうからだったのですが、今回、ぐぐってみたところ、Crayon Syntax HighlighterのSettingの中のCodeのセクションにある「Decode HTML entities in code」にチェックを入れると治ったので、逆に有効化してあります。

Web技術

WordPressの引っ越し＆ドメイン変更作業

投稿日 2018年 7月 1日コメントはありません

これまでドメインキングとさくらのVPSの組み合わせで運用してきた当ページですが、元々VPSの運用が面倒臭くなっていたし、CentOS6.5もサポート終了があと２年半くらいまで迫っていたのでどうしようかなー、と思っていたところにドメインキングの大幅値上げ（確か100円/月⇒500円/月）の話が来たので、この機に環境を一新することにしました。ドメインキングの値上げは Plesk の一方的な値上げという話だったと思いますが、さすがに５倍となると看過できません。１２月の次回支払い時期の前に移行することにしました。

で、元の構成はドメインキングでドメイン（＋Webサーバもあるけど使ってない）取得、サーバはさくらのVPS（１Gプラン）上にCentOS6.5という組み合わせでした。

移行後の構成は、新しいドメインを .tokyo ドメインで取得、サーバはアップデート管理の手間を省きたいので共用レンタルサーバ（さくらのレンタルサーバスタンダード）としました。まあ、CentOS6.5でも自動アップデートを有効にしていたので、それほど手間ではなかったのですが、移行後の構築の手間も考えるとレンタルサーバでいいか、ということにしました。

で、移行自体は半日くらいで終わったのですが、せっかくなので作業手順のメモを残しておきたいと思います。

１．Wordpressのデータバックアップ

旧サーバー（VPS）上でWordPressのデータのバックアップを取ります。

# cd public_html
# tar cvfz ../tomono.wordpress.tar.gz wordpress .htaccess favicon.ico index.html index.php

1 2	# cd public_html # tar cvfz ../tomono.wordpress.tar.gz wordpress .htaccess favicon.ico index.html index.php

２．データベースのバックアップ

次に、phpMyAdminを使ってデータベースのバックアップを行います。バックアップの方法は『【WordPress】さくらインターネットに移転（引越し）する方法』を参考にさせていただきました。

３．さくらのレンタルサーバ（スタンダード）の契約

契約できたら、サーバパスワードの変更を行います。メールで仮パスワードが送られてくるので、これを変更。変更後は、初期ドメイン名でsshログインできるようになります。

４．お名前.com で新ドメインの契約

手順は・・・・省略。whois代行があるのがいいですよね。あと、インフレ気味ですが、いろんなドメインがあるとことか。

５．お名前.comで取得したドメインをさくらのレンタルサーバで使用する設定を行う

基本的な流れとしては、さくらのレンタルサーバのサーバコントロールパネルで、「新しいドメインの追加」を行い、新しいドメインとレンタルサーバ上のディレクトリとの紐付けを行います。紐付けるディレクトリは別途作成が必要です。
その後で、お名前.com側のドメインNaviで対象のドメインで使用するネームサーバーをさくらインターネット側で指定されたネームサーバに変更します。
実施にあたっては『お名前.comで取得したドメインをさくらサーバーで使用する』を参考にさせていただきました。

６．さくら上でデータベースの復元

データベースの復元はサーバにログインしてシェル上で行いました。シェルが使えるなら、その方がずっと楽で簡単で一瞬で終わります。

$ mysql -u データベースユーザ名 -pパスワード -h データベースサーバホスト名 データベース名 < バックアップしたファイル（xxxxx.sql）

1	$ mysql -u データベースユーザ名 -pパスワード -h データベースサーバホスト名データベース名 < バックアップしたファイル（xxxxx.sql）

方法は、『MySQL/MariaDB コマンドを使った復元』を参考にさせていただきました。

７．ドメイン変更に伴うデータベースの修正

今回はドメインの変更を伴っていますので、WordPressの中のデータも修正しないといけません。そのためのツールがあるようで、『WordPressのサーバー移行_ドメイン変更の手順』を参考に、Search and Replace for WordPress Databases を使って新サーバー上でURLの置き換えを行いました。

８．PHPのバージョンを５系に下げた

アクセスしてみると、記事の本文が表示されない現象に悩まされました。ぐぐってみると、PHPのバージョンによって起きることあるらしいことが判明。確かに旧サーバは５系、新サーバーはデフォルトでは７系になっていました。さくらのサーバコントロールパネルでバージョンを７系から５系に下げたところ、本文が表示されるようになり、一通りの問題は解決したようです。

９．バックアップ用のシェルスクリプトの作成

データとデータベースのバックアップをするスクリプトを書いておきました。時々走らせようと思います。

#!/bin/sh
cd ~/BACKUP
mysqldump --add-drop-table -u (ユーザー名) -p(パスワード) -h (データベースサーバ名) (データベース名) | gzip -c > database-backup-`date +%Y%m%d`.sql.gz
cd ~（WordPressディレクトリのあるディレクトリ）
tar cfz ~/BACKUP/directory-backup-`date +%Y%m%d`.tar.gz .htaccess * 
cd ~

#!/bin/sh

cd ~/BACKUP

mysqldump --add-drop-table -u (ユーザー名) -p(パスワード) -h (データベースサーバ名) (データベース名) | gzip -c > database-backup-`date +%Y%m%d`.sql.gz

cd ~（WordPressディレクトリのあるディレクトリ）

tar cfz ~/BACKUP/directory-backup-`date +%Y%m%d`.tar.gz .htaccess *

cd ~

１０．旧サーバーからのリダイレクトの設定

旧サーバーはドメインキングのDNSサーバー設定でさくらのVPSのIPアドレスを返していました。
できれば、さっさとさくらのVPSは解約したいので、ドメインキングのサーバ上に .htaccess を置いて、リダイレクトさせることにしました。

<.htaccessの内容>

Redirect permanent / http://tomono.tokyo/

1	Redirect permanent / http://tomono.tokyo/

.htaccessを設置したら、DNSの設定を変更します。設定の中から

tomono.eleho.net IN A （旧サーバIPアドレス）

1	tomono.eleho.net IN A （旧サーバIPアドレス）

のレコードを削除します。

あとは、DNS情報が行き渡るのを待ちます。

Linuxアプリケーション, Web技術

サイトを移転しました

投稿日 2018年 7月 1日コメントはありません

２０１８年７月１日にサイトを移転しました。
旧URL： tomono.eleho.net　⇒　新URL: tomono.tokyo
当面はURLのリダイレクトを行いますが、年内中にリダイレクトを停止する予定です。

Web技術, ネットワーク, 雑談
MongoDBについて調べてみた

投稿日 2018年 5月 13日コメントはありません

いろいろあって、MongoDBについて調べてます。

調べた結果をメモしておきます。
- Ubuntu Linuxへのインストール方法（64bit環境オンリー）
  Ubuntuで提供されているパッケージではなく、公式サイトのやり方でインストールすべき。
  https://docs.mongodb.com/manual/tutorial/install-mongodb-on-ubuntu/
- MongoDBの薄い本
  MongoDBのチュートリアル
  http://www.cuspy.org/diary/2012-04-17/
- PythonからMongoDBを使ってみる
  NoSQLデータベース「MongoDB」をPythonで利用する～pymongoの基本的な使い方まとめ～
  https://qiita.com/ognek/items/a37dd1cd0e26e6adecaa
- 業務でよく使うMongoDBコマンドまとめ
  https://qiita.com/masarufuruya/items/33fbe059229230c8fc0c
- MongoDBでよく使うコマンドなど
  https://qiita.com/team8ware/items/ea318a7efa2a271a9783
- MapReduceとAggregation
  MapReduceの使い方、いろんな方が書いてくれていますが、結局必ずここは見たほうがいいと思う
  https://docs.mongodb.com/manual/aggregation/
- The MongoDB 3.6 Manual
  英語ですが、やはり最後はマニュアルですね・・・。
  https://docs.mongodb.com/manual/
Linuxアプリケーション, Web技術 MongoDB
WordPressでログインできなくなった！

投稿日 2017年 2月 27日コメントはありません

WordPressでログイン認証のセキュリティ強化にCAPTCHAを入れようと、プラグインから「SI CAPTCHA Anti-Spam」をインストールしてみました。

設定でログイン画面にキャプチャを入れて、ログアウトしてログインしなおしたらCAPTCHAが表示されていません（！）。

しかも、ログインできない！！

で、調べてみると、「SI CAPTCHA Anti-Spam」には、GDというライブラリが必要なので、

$ sudo yum -y install gd php-gd

1

$ sudo yum -y install gd php-gd

としてインストールを試みるも、さくらのVPSにインストールしたPHPのバージョンが合わずphp-gdがインストールができません。

で、四苦八苦した挙句の解決方法は、「プラグインディレクトリの名前を一時的に変更する」という方法でした。

/home/（ユーザー名）/public_html/wordpress/wp-contents/plugins にカレントディレクトリを変更して、プラグインの名前の付いたディレクトリの名前を一時的に変更してやると、無事にログインできました。

ログインしたら、ディレクトリの名前を元に戻して、プラグインを停止・削除しました。

いや、焦りました・・(^^;

Linux Tips, Web技術 CentOS, VPS
安価なVPSを調査してみました

投稿日 2017年 1月 30日コメントはありません

最近、激安VPSがまた増えている気がします。概ね、月額５００円あたりが最下限で、１日使うだけでも５００円を切ることができなかったのですが、日割り、時間課金のタイプもでてきているので、改めて調べてみます。あ、企業で契約するようなVPSはそもそも調べてませんｗ。ローエンドのVPSだけです。あしからず。
- さくらのVPS
  ローエンドのVPSの代表といえばさくらのVPSでしょう。いまご覧頂いているページもさくらのVPSの1Gプラン（ただしHDD100GB）で動いてます。そんなにトラフィックないので、512プランでも十分だと思いますが。
  ちなみに、1Gプランが『CPU仮想2Core／SSD30GB／メモリ1GB』で月額972円／年額10,692円／初期費用1,620円（税込み）、512プランが『CPU仮想1Core／SSD20GB／メモリ512MB』で月額685円／年額7,543円／初期費用1,620円（税込み）です。
- カゴヤ・クラウド
  ここは早くから日額課金があったところになります。SSDタイプAが『CPU仮想3Core／SSD80GB／メモリ保証1GB最大2GB』で日額31円／月額864円／初期費用無料（税込み）です。日額課金は実験や短期間のサーバ設置に便利だったので使ったことがあるのですが、去年の11月にクレジットカード番号を含めて漏洩する事件を起こしたので信用できません。支払いシステムを変更したので大丈夫とか言ってるのですが、生理的に受け付けられません。もしも、バーチャルカードで払えるならもう一度登録してもいいかとは思いますが。
- ConoHa
  時間課金をやり始めたところです。512MBプランが『CPU仮想1Core／SSD20GB／メモリ512MB』で1時間1円／月額630円／初期費用無料、最低利用期間なし、といったところ。OSはいろいろ選べる。
- WebARENA
  ポイント制というちょっと変わった課金体型。一番安い条件だと512M-SSDタイプで『CPU仮想1Core／SSD20GB／メモリ512MB』で10ポイントで、その10ポイントの月額基本料金が360円（税別、税込みだと388円）。課金はスタート時は日割り＋月末締め。ちょっと変わっているのが、支払いは翌月分を先払い、というところ。OSはCentOS6のみ。
  NTT系なので、クレジットカードのセキュリティとかはまともにやってくれると期待できる・・・と思うので、試してみても良いかもしれない。
- ServerMan@VPS
  メモリ1GB／HDD50GBで月額467円（税別）、ただしコンテナ型なのでカーネルを共有する形になるらしい。
- ABLENET
  V0プランで『CPU仮想1Core／SSD30GB／メモリ512MB』で月額648円／年払い5,486円（税別）／初期費用934円だそうです。
- FC2 VPS
  バリュープランで『CPU1Core✕13%／HDD80GB／メモリ1GB』で月額780円／初期費用なし。OSはCentOS6.3。
- お名前.com VPS
  メモリ1GBプランで『CPU仮想2Core／HDD100GB／メモリ1GB』で月額896円／初期費用無し（税別）。
着目すべきは、WebARENAの月額360円＋消費税と、ConoHaの1時間1円でしょうか。

Web技術 CentOS, VPS

ESP8266でjumpwire.ioを試してみた

投稿日 2015年 8月 9日コメントはありません

ESP8266についてググっていたら、広告欄に何やら「jumpwire.io」なるものが出てました。確か、ESP8266を使ったクラウドサーバーなんちゃらとか（細かい内容は忘れました）。

とりあえずクリックしてみたら「MakerのためのIoTプラットフォーム」「Arduinoを5分でクラウドにつないで、あなたのIoTプロジェクトを成功に導きます。」だそうです。なんでも無料でお試しができるようなので、試してみることにしました。環境はUbuntu14.10LTS 64bit版 + ArduinoIDE1.6.5 + esp8266 version 1.6.5-947-g39819f0（ボードパッケージ）です。ボードパッケージのインストールまでの方法はこちらの記事を参照。

無料サインアップ・・・から先は英語ですが、めげずに登録してみます。よくある「ユーザーIDはメールアドレス」ってやつです。ユーザーIDと設定するパスワードを打ち込むと、メールアドレス宛にアクティベート用のメールが届くので、そこにあるリンクをクリックするとサインアップ完了です。
で、改めてログインし直します。（これもよくあるパターン）

ログインすると、いきなり秘密のトークン（Secret token）が表示されます。この画面をコンソールと呼ぶようです。プロジェクトは無料で５つ作れて、A〜Eというアルファベットになるようです。で、プロジェクトごとにKEYが２６個（A〜Z）セットできるようです。

ここで一旦中断し、ローカル側（クライアント側）のプログラミングに戻ります。今回はgithubにライブラリとサンプルがあるようなので、これを動かしてみます。

まず、gitでライブラリを持ってきます。

~$ cd Arduino/libraries/
~/Arduino/libraries$ git clone https://github.com/jumpwire-io/JWIO_ESP8266_ArduinoIDE
Cloning into 'JWIO_ESP8266_ArduinoIDE'...
remote: Counting objects: 35, done.
remote: Total 35 (delta 0), reused 0 (delta 0), pack-reused 35
Unpacking objects: 100% (35/35), done.
Checking connectivity... done.
~/Arduino/libraries$

~$ cd Arduino/libraries/

~/Arduino/libraries$ git clone https://github.com/jumpwire-io/JWIO_ESP8266_ArduinoIDE

Cloning into 'JWIO_ESP8266_ArduinoIDE'...

remote: Counting objects: 35, done.

remote: Total 35 (delta 0), reused 0 (delta 0), pack-reused 35

Unpacking objects: 100% (35/35), done.

Checking connectivity... done.

~/Arduino/libraries$

これで~/Arduino/libraries/JWIO_ESP8266_ArduinoIDEの下にサンプルスケッチ（Sample_Sketch.ino）までコピーされますので、これをスケッチが保存されるべき場所にコピーします。

~/Arduino$ mkdir JWIO_ESP8266_ArduinoIDE
~/Arduino$ cd JWIO_ESP8266_ArduinoIDE/
~/Arduino/JWIO_ESP8266_ArduinoIDE$ mkdir Sample_Sketch
~/Arduino/JWIO_ESP8266_ArduinoIDE$ cd Sample_Sketch/
~/Arduino/JWIO_ESP8266_ArduinoIDE/Sample_Sketch$ cp ../../libraries/JWIO_ESP8266_ArduinoIDE/Sample_Sketch.ino .
~/Arduino/JWIO_ESP8266_ArduinoIDE/Sample_Sketch$

~/Arduino$ mkdir JWIO_ESP8266_ArduinoIDE

~/Arduino$ cd JWIO_ESP8266_ArduinoIDE/

~/Arduino/JWIO_ESP8266_ArduinoIDE$ mkdir Sample_Sketch

~/Arduino/JWIO_ESP8266_ArduinoIDE$ cd Sample_Sketch/

~/Arduino/JWIO_ESP8266_ArduinoIDE/Sample_Sketch$ cp ../../libraries/JWIO_ESP8266_ArduinoIDE/Sample_Sketch.ino .

~/Arduino/JWIO_ESP8266_ArduinoIDE/Sample_Sketch$

これで「スケッチを開く」で、~/Arduino/JWIO_ESP8266_ArduinoIDE/ の下のSample_Sketch.inoを開きます。

サンプルスケッチの冒頭に、

jumpwireIo jwio("your_wifi_ssid","your_wifi_password",
  "your_jwio_secret_token","A");

1 2	jumpwireIo jwio("your_wifi_ssid","your_wifi_password", "your_jwio_secret_token","A");

という箇所がありますので、ここにWiFiの設定と、さっき出たSecret tokenをセットします。４つ目のAは多分プロジェクト名でしょうか、そのままにしておきます。

下の方に

  pinMode(5, OUTPUT);// initialize digital pin 13.

1	pinMode(5, OUTPUT);// initialize digital pin 13.

という箇所があります。自分はGPIO2を使うので、ここを5から2に変更しておきます。後の方のdigitalWrite()のところも同様に修正しました。
修正後のソースはこんな感じです。（開示できない箇所はxxxxxxxxxxxxxになってます）

//definitions for jumpwire.io
#include <ESP8266WiFi.h>
#include <JWIO_ESP8266_ArduinoIDE.h>
jumpwireIo jwio("xxxxxxxxxxxxx","xxxxxxxxxxxxx",
  "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx","A");


//put your definitions here

//put your global variables here
unsigned long timer;

void setup() {
  jwio.setup(); //always put this code in setup()
  //put your code here
  pinMode(2, OUTPUT);// initialize digital pin 13.
  timer = millis(); // reset timer
}

void loop() {
  jwio.loop(); //always put this code in loop()
  //put your code here
  if (millis() - timer > 5000){
      jwio.Throw('B',millis()/1000.0);
      timer = millis(); // reset timer
    }
}

void Catch(char key, float value){
  //this function is called when byte values on jumpwire.io server are changed
  //put your code here
  if (key == 'A') {
    if(value == 0){          //if value of key A is 0
      digitalWrite(2, LOW);  //turn OFF LED
    }
    else if(value == 1){     //if value of key A is 1
      digitalWrite(2, HIGH); //turn ON LED
    }
  }
}

//definitions for jumpwire.io

#include <ESP8266WiFi.h>

#include <JWIO_ESP8266_ArduinoIDE.h>

jumpwireIo jwio("xxxxxxxxxxxxx","xxxxxxxxxxxxx",

"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx","A");

//put your definitions here

//put your global variables here

unsigned long timer;

void setup() {

jwio.setup(); //always put this code in setup()

//put your code here

pinMode(2, OUTPUT);// initialize digital pin 13.

timer = millis(); // reset timer

}

void loop() {

jwio.loop(); //always put this code in loop()

//put your code here

if (millis() - timer > 5000){

jwio.Throw('B',millis()/1000.0);

timer = millis(); // reset timer

}

void Catch(char key, float value){

//this function is called when byte values on jumpwire.io server are changed

//put your code here

if (key == 'A') {

if(value == 0){ //if value of key A is 0

digitalWrite(2, LOW); //turn OFF LED

}

else if(value == 1){ //if value of key A is 1

digitalWrite(2, HIGH); //turn ON LED

}

さて、ここで「マイコンに書き込み」とすると、コンパイルエラーが発生しました。

Sample_Sketch.ino:4:37: fatal error: JWIO_ESP8266_ArduinoIDE.h: No such file or directory

1	Sample_Sketch.ino:4:37: fatal error: JWIO_ESP8266_ArduinoIDE.h: No such file or directory

だそうです。そこでサンプルソースの冒頭の

#include <JWIO_ESP8266_ArduinoIDE.h>

1	#include <JWIO_ESP8266_ArduinoIDE.h>

を

#include "JWIO_ESP8266_ArduinoIDE.h"

1	#include "JWIO_ESP8266_ArduinoIDE.h"

とすることで、ビルド＆書き込み、実行ができました。
ログを見ていると、ところどころでなにやらWebSocket関連でエラーが発生しているっぽい感じもしますが、先に開いたjumpwire.ioのログインコンソール上にKey BとしてESP8266側から経過時間が設定されているのがわかります。（下記画面だと418秒経過後）

さらに、Webコンソールの下の方にはData logとしてログが表示されています。

ArduinoIDEのシリアルコンソールにはラウンドトリップタイムも表示されていますが、自分の環境からだと150msくらいかかっているようです。

そして、ブラウザ上で「Value」のところに1をセットして「Throw」を押すと、点灯していたLEDが消灯しました。0をセットして「Throw」を押すと、消灯していたLEDが点灯しました。ソースのコメントとは逆の動作ですが、これは回路の差によるものでしょう。

サンプルソースを修正して以下のようにしてみました。

//definitions for jumpwire.io
#include <ESP8266WiFi.h>
#include "JWIO_ESP8266_ArduinoIDE.h"
jumpwireIo jwio("xxxxxxxxxxxxxxx","xxxxxxxxxxxxxxxxxx",
  "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx","A");


//put your definitions here

//put your global variables here
unsigned long timer;
bool sw=1,osw=1;

void setup() {
  jwio.setup(); //always put this code in setup()
  //put your code here
  pinMode(2, OUTPUT);// initialize digital pin 13.
  timer = millis(); // reset timer
}

void loop() {
  jwio.loop(); //always put this code in loop()
  //put your code here
  if (millis() - timer > 5000){
      jwio.Throw('B',millis()/1000.0);
      timer = millis(); // reset timer
    }
  sw = digitalRead(0);
  if (sw != osw) {
    osw = sw;
    jwio.Throw('C',sw);
  }
}

void Catch(char key, float value){
  //this function is called when byte values on jumpwire.io server are changed
  //put your code here
  if (key == 'A') {
    if(value == 0){          //if value of key A is 0
      digitalWrite(2, LOW);  //turn ON LED
    }
    else if(value == 1){     //if value of key A is 1
      digitalWrite(2, HIGH); //turn OFF LED
    }
  }
}

//definitions for jumpwire.io

#include <ESP8266WiFi.h>

#include "JWIO_ESP8266_ArduinoIDE.h"

jumpwireIo jwio("xxxxxxxxxxxxxxx","xxxxxxxxxxxxxxxxxx",

"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx","A");

//put your definitions here

//put your global variables here

unsigned long timer;

bool sw=1,osw=1;

void setup() {

jwio.setup(); //always put this code in setup()

//put your code here

pinMode(2, OUTPUT);// initialize digital pin 13.

timer = millis(); // reset timer

}

void loop() {

jwio.loop(); //always put this code in loop()

//put your code here

if (millis() - timer > 5000){

jwio.Throw('B',millis()/1000.0);

timer = millis(); // reset timer

}

sw = digitalRead(0);

if (sw != osw) {

osw = sw;

jwio.Throw('C',sw);

}

void Catch(char key, float value){

//this function is called when byte values on jumpwire.io server are changed

//put your code here

if (key == 'A') {

if(value == 0){ //if value of key A is 0

digitalWrite(2, LOW); //turn ON LED

}

else if(value == 1){ //if value of key A is 1

digitalWrite(2, HIGH); //turn OFF LED

}

GPIO0についているスイッチの状態が変化した場合にKey-Cの値をスイッチの状態に応じて0/1に変化させるように修正してみました。（無事動きました）

（公式サイトに日本語版の説明もない状態で動かしているため？）ログを見ていると途中でWebsocketが切れるみたいで、安定性に若干不安を感じないでもないですが、jumpwire.ioはシンプルに動くので、確かに手早くクライアント（ESP8266）の状態をブラウザで確認できるようにしておきたい、とにかく短期間でクラウドでデータ収集できるようにしたい、という場合には簡単でいいと思います。

ちなみに、サインアップしてからこの記事を書きつつサンプルを改造したもの（ボタンの状態がアップロードされるように修正したもの）を動かすまでに要した時間は約１．５時間です。５分はちょっと眉唾ものとしても、ArduinoIDEでESP8266が動く状態からなら動かすだけなら３０分もあれば十分動かせるでしょう。確かに非常にお手軽ですので、知っておいて損はないと思います。

Web技術, 電子工作 Arduino, ESP8266, 無線LAN

ESP8266にWebSocketを喋らせてみる

投稿日 2015年 7月 29日コメントはありません

世の中、同じようなことを考える方はいるようで、すでにESP8266＋ArduinoIDEでWebSocketライブラリが存在しています。WebSocketが扱えるようになれば、（プログラミングスキルがあれば）クラウド側から好きなタイミングでESP8266に指示をおくることができるようになるはずです。（が、世の中そんなに甘くないんですねぇ〜）

で、今回見つけたWebSocketライブラリは ESP8266-Websocket です。

今回の記事はこれのサンプルを動かしてみよう、と苦戦した記録です。作業PCのOSはUbuntu14.10 LTS 64bit、ArduinoIDEのバージョンは１．６．５です。なお、Ubuntuで動かすにあたっては、

$ sudo addgroup foobar dialout
ユーザー `foobar' をグループ `dialout' に追加しています...
ユーザ foobar をグループ dialout に追加
完了。
$

$ sudo addgroup foobar dialout

ユーザー `foobar' をグループ `dialout' に追加しています...

ユーザ foobar をグループ dialout に追加

完了。

として、/dev/ttyUSB0のアクセス権をユーザーにつけた後、再ログインしないと/dev/ttyUSB0へアクセスできないとしてエラーになります。

Arduinoのライブラリは ~/Arduino/librariesの下に置けばいいようですので、そこにgitでライブラリを引っ張ってきます。

~$ cd ~/Arduino/libraries
~/Arduino/libraries$ git clone https://github.com/morrissinger/ESP8266-Websocket
Cloning into 'ESP8266-Websocket'...
remote: Counting objects: 286, done.
remote: Total 286 (delta 0), reused 0 (delta 0), pack-reused 286
Receiving objects: 100% (286/286), 105.19 KiB | 0 bytes/s, done.
Resolving deltas: 100% (103/103), done.
Checking connectivity... done.
~/Arduino/libraries$

~$ cd ~/Arduino/libraries

~/Arduino/libraries$ git clone https://github.com/morrissinger/ESP8266-Websocket

Cloning into 'ESP8266-Websocket'...

remote: Counting objects: 286, done.

remote: Total 286 (delta 0), reused 0 (delta 0), pack-reused 286

Receiving objects: 100% (286/286), 105.19 KiB | 0 bytes/s, done.

Resolving deltas: 100% (103/103), done.

Checking connectivity... done.

~/Arduino/libraries$

その後、ArduinoIDEで「スケッチ」→「Include Library」→「Manage Libraries」で右上の「Filter your search」で「ESP8266-Websocket」と入力して「INSTALLED」になっていることを確認します。

次に、WebSocketClientのデモを動かしてみます。

「ファイル」→「スケッチの例」→「ESP8266-Websocket」→「WebSocketClient_Demo」を選択します。

ソースの冒頭の

const char* ssid     = "SSID HERE";
const char* password = "PASSWORD HERE";

1 2	const char* ssid = "SSID HERE"; const char* password = "PASSWORD HERE";

の部分に自分の無線LANのESSIDとパスキーを入力してから、名前を付けて保存します。

このライブラリはおそらくWindows環境で作成されたのでしょう。Linux環境でビルドしようとすると、ファイル名の大文字小文字で失敗します。そのため、ライブラリの中の以下の部分を修正します。

WebSocketClient.h と WebSocketServer.h の

#include "String.h"

1	#include "String.h"

を

#include "string.h"

1	#include "string.h"

に、

WebSocketServer.cpp と WebSocketClient.cppの

#include "base64.h"

1	#include "base64.h"

を

#include "Base64.h"

1	#include "Base64.h"

とします。

これでビルドが通るようになりましたが、それでもコネクションに失敗します。禁断のgoto文で接続しに行く部分のみを繰り返すと、何回目か以降は通るようです。ライブラリのWebSocketClient.cppの冒頭にデバッグのための#define文があるので、ここをコメントを外すとデバッグメッセージが出るのですが、これでもハンドシェークの途中で止まっていることはわかるものの、それ以上はなんともわかりません。
これ以上は間にLANアナライザを入れてみてパケット解析しつつ、RFCを読んで何かおかしいのか調べるしかなさそうです。

以下は、現時点でのサンプルプログラムを改造したものです。

#include <ESP8266WiFi.h>
#include <WebSocketClient.h>

const char* ssid     = "xxxxxxxxxxxxxxxx";
const char* password = "xxxxxxxxxxxxxxxx";
char path[] = "/";
char host[] = "echo.websocket.org";
  
WebSocketClient webSocketClient;

// Use WiFiClient class to create TCP connections
WiFiClient client;

void setup() {
  Serial.begin(115200);
  delay(10);

  // We start by connecting to a WiFi network

  Serial.println();
  Serial.println();
  Serial.print("Connecting to ");
  Serial.println(ssid);
  
  WiFi.begin(ssid, password);
  
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println("");
  Serial.println("WiFi connected");  
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());

  delay(5000);
  
RETRY:
  // Connect to the websocket server
  IPAddress remote_addr;
  if(!WiFi.hostByName(host,remote_addr)){
    Serial.println("Cannot resolve hostname");
    while(1){}
  } else {
    Serial.println("hostname resolved");
  }
  
  if (client.connect(remote_addr, 80)) {
    Serial.println("Connected");
  } else {
    Serial.println("Connection failed.");
    goto RETRY;
    while(1) {
      // Hang on failure
    }
  }

  // Handshake with the server
  webSocketClient.path = path;
  webSocketClient.host = host;
  if (webSocketClient.handshake(client)) {
    Serial.println("Handshake successful");
  } else {
    Serial.println("Handshake failed.");
    while(1) {
      // Hang on failure
    }  
  }

}


void loop() {
  String data;

  if (client.connected()) {
    
    webSocketClient.getData(data);
    if (data.length() > 0) {
      Serial.print("Received data: ");
      Serial.println(data);
    }
    
    // capture the value of analog 1, send it along
    pinMode(1, INPUT);
    data = String(analogRead(1));
    
    webSocketClient.sendData(data);
    
  } else {
    Serial.println("Client disconnected.");
    while (1) {
      // Hang on disconnect.
    }
  }
  
  // wait to fully let the client disconnect
  delay(3000);
  
}

100

101

#include <ESP8266WiFi.h>

#include <WebSocketClient.h>

const char* ssid = "xxxxxxxxxxxxxxxx";

const char* password = "xxxxxxxxxxxxxxxx";

char path[] = "/";

char host[] = "echo.websocket.org";

WebSocketClient webSocketClient;

// Use WiFiClient class to create TCP connections

WiFiClient client;

void setup() {

Serial.begin(115200);

delay(10);

// We start by connecting to a WiFi network

Serial.println();

Serial.print("Connecting to ");

Serial.println(ssid);

WiFi.begin(ssid, password);

while (WiFi.status() != WL_CONNECTED) {

delay(500);

Serial.print(".");

}

Serial.println("");

Serial.println("WiFi connected");

Serial.println("IP address: ");

Serial.println(WiFi.localIP());

delay(5000);

RETRY:

// Connect to the websocket server

IPAddress remote_addr;

if(!WiFi.hostByName(host,remote_addr)){

Serial.println("Cannot resolve hostname");

while(1){}

} else {

Serial.println("hostname resolved");

}

if (client.connect(remote_addr, 80)) {

Serial.println("Connected");

} else {

Serial.println("Connection failed.");

goto RETRY;

while(1) {

// Hang on failure

}

// Handshake with the server

webSocketClient.path = path;

webSocketClient.host = host;

if (webSocketClient.handshake(client)) {

Serial.println("Handshake successful");

} else {

Serial.println("Handshake failed.");

while(1) {

// Hang on failure

}

void loop() {

String data;

if (client.connected()) {

webSocketClient.getData(data);

if (data.length() > 0) {

Serial.print("Received data: ");

Serial.println(data);

}

// capture the value of analog 1, send it along

pinMode(1, INPUT);

data = String(analogRead(1));

webSocketClient.sendData(data);

} else {

Serial.println("Client disconnected.");

while (1) {

// Hang on disconnect.

}

// wait to fully let the client disconnect

delay(3000);

}

WebSocketClient.cppをみると、サーバ側からのヘッダの解釈の実装がまだまだであることがわかります。ひとつの可能性として、どうやらここで止まっていそうです。もうひとつは、パケットの受信バッファの処理がどうも変な感じがします。

いずれにせよ、このライブラリはまだそのままでは使えるものではなさそうな感じです。（ま、よくみると色々と制約があるよ、って書いてあるんですけどね）

Web技術, 電子工作 Arduino, ESP8266

WebSocketについてちょっと実験してみた

投稿日 2015年 7月 28日コメントはありません

たまたまWebをさまよっていたら、WebSocketの話が目についたので調べてみた。まあ、HTTPに比べると、一旦リンクを張ってしまえばサーバ側からも通信ができるってのが美味しいところ。

で、ブラウザがWebSocketをサポートしているか確認することができるサイトが

http://www.websocket.org/echo.html

なのですが、ここには自分でHTMLを書いて確認したい場合のためのコードが置いてあったりします。で、これを試してみると・・・テキストエディタに貼り付けたら１行になってしまいました(T_T)

整形しなおしたものをここに置いておきます。

<!DOCTYPE html> 
<meta charset="utf-8" />
<title>WebSocket Test</title>
<script language="javascript" type="text/javascript">
  var wsUri = "ws://echo.websocket.org/";
  var output;

  function init() {
    output = document.getElementById("output"); testWebSocket();
  }

  function testWebSocket() {
    websocket = new WebSocket(wsUri);
    websocket.onopen = function(evt) { onOpen(evt) };
    websocket.onclose = function(evt) { onClose(evt) };
    websocket.onmessage = function(evt) { onMessage(evt) };
    websocket.onerror = function(evt) { onError(evt) };
  }

  function onOpen(evt) {
    writeToScreen("CONNECTED");
    doSend("WebSocket rocks");
  }

  function onClose(evt) {
    writeToScreen("DISCONNECTED");
  }

  function onMessage(evt) {
    writeToScreen('<span style="color: blue;">RESPONSE: ' + evt.data+'</span>');
    websocket.close();
  }

  function onError(evt) {
    writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
  }

  function doSend(message) {
    writeToScreen("SENT: " + message);
    websocket.send(message);
  }

  function writeToScreen(message) {
    var pre = document.createElement("p");
    pre.style.wordWrap = "break-word";
    pre.innerHTML = message;
    output.appendChild(pre);
  }

  window.addEventListener("load", init, false);
</script>
<h2>WebSocket Test</h2>
<div id="output"></div>

<!DOCTYPE html>

<title>WebSocket Test</title>

var wsUri = "ws://echo.websocket.org/";

var output;

function init() {

output = document.getElementById("output"); testWebSocket();

}

function testWebSocket() {

websocket = new WebSocket(wsUri);

websocket.onopen = function(evt) { onOpen(evt) };

websocket.onclose = function(evt) { onClose(evt) };

websocket.onmessage = function(evt) { onMessage(evt) };

websocket.onerror = function(evt) { onError(evt) };

}

function onOpen(evt) {

writeToScreen("CONNECTED");

doSend("WebSocket rocks");

}

function onClose(evt) {

writeToScreen("DISCONNECTED");

}

function onMessage(evt) {

writeToScreen('<span style="color: blue;">RESPONSE: ' + evt.data+'</span>');

websocket.close();

}

function onError(evt) {

writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);

}

function doSend(message) {

writeToScreen("SENT: " + message);

websocket.send(message);

}

function writeToScreen(message) {

var pre = document.createElement("p");

pre.style.wordWrap = "break-word";

pre.innerHTML = message;

output.appendChild(pre);

}

window.addEventListener("load", init, false);

</script>

<h2>WebSocket Test</h2>

これをコピペしたら今度は１行になるようなことはなかったです。

そして、これをローカルで表示させたらこうなりました。

で、ごにょごにょっとしたことを考えているので、自分の理解の範囲で動作を解釈してみます。（間違ってたら指摘いただけると幸いです）

動作は８行目から始まって、testWebSocket()が呼ばれる。
13行目のnewでwebsocketのインスタンスを生成。ここでソケットをオープンする。
14〜17行目はイベントハンドラ。ソケットをオープンすると、この中の14行目のonopenに設定したハンドラが呼ばれる。（先の13行目から呼ばれるところが変な感じがしますが、Javascriptのスコープの特性から14行目で定義している内容を13行目で使用可能なのですね）
20行目がonopenのイベントハンドラ。この中で、doSend()を呼んでその先でwebsocket.send()でデータを送信している。
websocket.send()の結果、サーバ側からエコーバックが帰ってくる。
エコーバックを受信すると、16行目で定義しているonmessageのハンドラが呼ばれるので、29行目のonMessage()が実行される。この中で、websocket.close()を呼んでコネクションをクローズ。
クローズすると、15行目で定義しているoncloseに対応したハンドラが呼ばれる。

比較的簡単に使えそうですね。
ちょっとだけソケットの使い回しができることを確認してみました。

ソースコードをちょっとだけ弄ります。

<!DOCTYPE html> 
<meta charset="utf-8" />
<title>WebSocket Test</title>
<script language="javascript" type="text/javascript">
  var wsUri = "ws://echo.websocket.org/";
  var output;
 
  var n = 10;

  function init() {
    output = document.getElementById("output"); testWebSocket();
  }
 
  function testWebSocket() {
    websocket = new WebSocket(wsUri);
    websocket.onopen = function(evt) { onOpen(evt) };
    websocket.onclose = function(evt) { onClose(evt) };
    websocket.onmessage = function(evt) { onMessage(evt) };
    websocket.onerror = function(evt) { onError(evt) };
  }
 
  function onOpen(evt) {
    writeToScreen("CONNECTED");
    doSend("WebSocket rocks START");
  }
 
  function onClose(evt) {
    writeToScreen("DISCONNECTED");
  }
 
  function onMessage(evt) {
    writeToScreen('<span style="color: blue;">RESPONSE: ' + evt.data+'</span>');
    if( n > 0 ){
      doSend("WebSocket rocks " + n);
      n--;
    } else {
      websocket.close();
    }
  }
 
  function onError(evt) {
    writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
  }
 
  function doSend(message) {
    writeToScreen("SENT: " + message);
    websocket.send(message);
  }
 
  function writeToScreen(message) {
    var pre = document.createElement("p");
    pre.style.wordWrap = "break-word";
    pre.innerHTML = message;
    output.appendChild(pre);
  }
 
  window.addEventListener("load", init, false);
</script>
<h2>WebSocket Test</h2>
<div id="output"></div>

<!DOCTYPE html>

<title>WebSocket Test</title>

var wsUri = "ws://echo.websocket.org/";

var output;

var n = 10;

function init() {

output = document.getElementById("output"); testWebSocket();

}

function testWebSocket() {

websocket = new WebSocket(wsUri);

websocket.onopen = function(evt) { onOpen(evt) };

websocket.onclose = function(evt) { onClose(evt) };

websocket.onmessage = function(evt) { onMessage(evt) };

websocket.onerror = function(evt) { onError(evt) };

}

function onOpen(evt) {

writeToScreen("CONNECTED");

doSend("WebSocket rocks START");

}

function onClose(evt) {

writeToScreen("DISCONNECTED");

}

function onMessage(evt) {

writeToScreen('<span style="color: blue;">RESPONSE: ' + evt.data+'</span>');

if( n > 0 ){

doSend("WebSocket rocks " + n);

n--;

} else {

websocket.close();

}

function onError(evt) {

writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);

}

function doSend(message) {

writeToScreen("SENT: " + message);

websocket.send(message);

}

function writeToScreen(message) {

var pre = document.createElement("p");

pre.style.wordWrap = "break-word";

pre.innerHTML = message;

output.appendChild(pre);

}

window.addEventListener("load", init, false);

</script>

<h2>WebSocket Test</h2>

変数nに初期値10を設定して、受信時の動作をnの値によって切り替えています。nが0より大きい場合には次のメッセージを送ってnをカウントダウン、nがゼロならソケットをクローズします。
結果は、

となりました。同じソケットを開いたまま１１回のメッセージやりとりができていることがわかります。

サイトのSSL対応化

１．SSL設定の有効化と確認

２．WordPressでの常時SSL有効化プラグインの導入

サーバのPHPのバージョンを推奨バージョンに戻す

WordPressの引っ越し＆ドメイン変更作業

１．Wordpressのデータバックアップ

２．データベースのバックアップ

３．さくらのレンタルサーバ（スタンダード）の契約

４．お名前.com で新ドメインの契約

５．お名前.comで取得したドメインをさくらのレンタルサーバで使用する設定を行う

６．さくら上でデータベースの復元

７．ドメイン変更に伴うデータベースの修正

８．PHPのバージョンを５系に下げた

９．バックアップ用のシェルスクリプトの作成

１０．旧サーバーからのリダイレクトの設定

サイトを移転しました

MongoDBについて調べてみた

WordPressでログインできなくなった！

安価なVPSを調査してみました

ESP8266でjumpwire.ioを試してみた

ESP8266にWebSocketを喋らせてみる

WebSocketについてちょっと実験してみた

参考にさせていただいた／参考になりそうなサイト

カレンダー

最近の記事

最近のコメント

検索

カテゴリー

アーカイブ

メタ情報

2018年8月
月	火	水	木	金	土	日
« 7月
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

１．SSL設定の有効化と確認

２．WordPressでの常時SSL有効化プラグインの導入

１．Wordpressのデータバックアップ

２．データベースのバックアップ

３．さくらのレンタルサーバ（スタンダード）の契約

４．お名前.com で新ドメインの契約

５．お名前.comで取得したドメインをさくらのレンタルサーバで使用する設定を行う

６．さくら上でデータベースの復元

７．ドメイン変更に伴うデータベースの修正

８．PHPのバージョンを５系に下げた

９．バックアップ用のシェルスクリプトの作成

１０．旧サーバーからのリダイレクトの設定

参考にさせていただいた／参考になりそうなサイト

カレンダー

最近の記事

最近のコメント

検索

タグ

カテゴリー

アーカイブ

メタ情報