Code for Japan Summit 2018 参加してきました

” Code for Japan Summit 2018 ” 新潟で開催されました
スタッフ参加させていただいたので経験をまとめさせていただきます

Code for Japan

市民が主体となって自分たちの街の課題を技術で解決するコミュニティ作り
支援や、自治体への民間人材派遣などの事業に取り組む非営利団体
( HPより引用 )

Brigade( Code for X )といって
各地のコミュニティが連携プログラムに参加している

年に1度、市民、自治体職員、エンジニア、デザイナー等
シビックテックに関わる人たちのセッションや、
海外の事例を共有する場をCode for Japan Summitの形で開催

参加までの経緯

新潟駅南口近くで開催されている” IOTLT Niigata “という勉強会で
Code for Niigata のそのときの副代表の方が
Summitの紹介をされていて興味を持ちました

Code for Japan Summitは日本海側・もちろん新潟では初開催とのこと
せっかくなのでスタッフで参加。( 撮影班 )

本当に色々な方が集まっていました

オープニングセレモニーからスタート

基調講演
1日目は海外ゲストのデザイナーAriel Kennanさん
2日目は同じくデザイナーの太刀川英輔さんの講演

ぼくは英語ちょっと聞き取れるかなくらいで
普通だったら全くわからなかった講演のはずでしたが

Code for Nerimaさんが設置していた
UDトークという同時翻訳ソフトのおかげでスクリーンに
リアルタイムで日本語が表示されるので楽しめました

太刀川さんの講演は、デザイナーさんてこんな感じなんだなと
知ることができるお話でした
私は「融合」をカレーうどんに例えるところが好き

扇風機を分解したりデザイナーさんて
いろいろなところからアイディアを得ていることを知りました

UDトークのそばでリアルタイムで書かれていく
グラレコ(グラフィックレコーディング)もすごかったです
手にペンをたくさん持って模造紙にまとめてた

学校で昨日真似しようとやってみたけど速度がたらなかったですw
練習してみたい!

スポンサートークではIBMさんのコードエディタを使ってプレゼン
というのがすごく印象に残っています

午後からは各部屋に分かれてセッションが行われました

86歳のiOSアプリ開発者さんのセッション
グラレコ講習会、田園風景などいろいろな地域の、いろんなテーマのお話

聞く側もかえって新潟の方の方が少ないくらい
いろんな職業、いろんな地域の方が参加しておられて
「巨災対」と書いてあるTシャツの人もいた^ ^

ブース展示もさせていただきました

ものづくり学縁つばめのブースでwacodeとして

ブース展示もさせていただきました

GR-LYCHEEデザインコンテストに出品する予定の

別の方たちが作っている車両系ロボットの
誘導プログラムの実験品を展示しました

特定のQRコードでの方向指示や
カラーセンサーでの床面認識などができます

ちょこちょこ見ていってくださる方もいました
説明もっと上手くなりたい

懇親会でのライトニングトーク

懇親会では、3分のLTをさせていただきました
ブログのページを紹介しつつ
自己紹介と、今やっているUnityのやつの紹介をしました

プロのみなさんの前で話すのは
すごく緊張しましたが、ひととおり話せました
声もう少し大きいと良かった

場数を踏んでいきたいと思いました

たくさんの方とお話しできました

IBMのスタッフさんアメリカ留学時の貴重なお話を
聞かせていただきました
もう少し英語頑張ろうと割と本気で思いました( ・∇・)
ブースで紹介されていた
Call for Code というイベントは18歳以上でない出せないので
その時が来たら参加しようと思います

Code for AICHIさん、たくさん話しかけていただいて
ありがとうございました
コミニュティの一体感がすごかったです

86歳のiOS App Developerの方
学生とでも気さくに話してくれる方で
自分も高年齢になっても面白いことやろうと思えました
また機会があったらじっくりお話ししたいです

@civicさん
今週の土曜日、NDS長岡IT開発者勉強会で
登壇しないかと声をかけていただきました
参加します!

そのほか新潟市企業立地課の皆さん、スタッフの皆さん
FB,Twitterつながりの皆さんなど
色々お世話になりました、ありがとうございます

まとめ

参加できて本当に良かったです
この時期にこんなすごいイベントに新潟で
参加できたこと、本当にラッキーだったと思います

ありがとうございました

WebSocket Unityとサーバーの双方向通信 Unity編

WebSocketを使ったUnityとサーバーの双方向通信の実装

WebSocketを使ってUnityとサーバー間で
テキストデータを送り合うことを第一目標にしています

今回は其の弐
Unity側の処理を書きます

前回はこちらです

WebSocket Unityとサーバーの双方向通信 サーバー編

用語整理

Unity
統合開発環境を内蔵したゲームエンジン
2Dはもちろん、3DやVR用アプリケーションも作ることができる
Web,iOS,Androidなど様々な機器向けにデータをエクスポートできる

WebSocket
HTML5に定義されている技術規格
クライアントとサーバー間に「ソケット」と呼ばれる
持続的な接続を確立させることで
双方向からデータの送信を開始できるようになる(らしい)
基本的なHTTPだとクライアントからだけしか
データの送信を開始できない

( Unity ) websocket-sharpライブラリ
Unityで使用するC#用ライブラリ
WebSocketが簡単に作れるようになっている
ここからダウンロードできる

Visual Studio
MicrosoftのIDE
Unityをダウンロードすると一緒についてくる
Unity2018からのUnityで使うメインエディタ

クライアント( Unity )側実装

websocket-sharpライブラリダウンロード

以下Gitにアクセスして”Download ZIP”
https://github.com/sta/websocket-sharp

websocket-sharpライブラリビルド

ダウンロードしたディレクトリを解凍
websocket-sharp.slnファイルをダブルクリック

Visual Studioで開く

サブプロジェクトExampleをソリューションから削除

ビルド方法をReleaseに変更

メニューからビルドを実行

Build>Build All

成功するとwebsocket-sharp/bin/Release/websocket-sharp.dllが生成される

Unityにwebsocket-sharpライブラリをインポート

テスト用Unityプロジェクトを作成( 2D )

Assetsに子ディレクトリPluginsを作成
Assets/Plugins内にビルドしたwebsocket-sharp.dllをコピー

websocket-sharpライブラリインポート終了

 

スクリプト作成

新規スクリプトを作成

Assets > Create > C# Script

色々調べながら、スペースキーを押すとメッセージが
サーバーへ送信されるスクリプトを書く。できたのはこんな感じ

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using WebSocketSharp;
using WebSocketSharp.Net;

public class main : MonoBehaviour
{

    WebSocket ws;

    void Start()
    {
        ws = new WebSocket("ws://27.120.98.26:9001/");

        ws.OnOpen += (sender, e) =>
        {
            Debug.Log("WebSocket Open");
        };

        ws.OnMessage += (sender, e) =>
        {
            Debug.Log("WebSocket Receive Message Data: " + e.Data);
        };

        ws.OnError += (sender, e) =>
        {
            Debug.Log("WebSocket Error Message: " + e.Message);
        };

        ws.OnClose += (sender, e) =>
        {
            Debug.Log("WebSocket Close");
        };

        ws.Connect();

    }

    void Update()
    {

        if (Input.GetKeyUp(KeyCode.Space))
        {
            string send_message = "SpaceKey_pressed";
            Debug.Log("WebSocket Send Message Data: " + send_message);
            ws.Send(send_message);
        }

    }

    void OnDestroy()
    {
        ws.Close();
        ws = null;
    }
}

main.cs(スクリプト)ができたら、SceneのMain Cameraへ
ドラッグ&ドロップでアタッチする

Unity側実装終了

 

接続テスト

サーバーでPythonファイルを実行する

python3 /home/ユーザー名/python3_project/mei/version_1/arp.py

こんな感じのメッセージが出たら準備OK

INFO:websocket_server.websocket_server:Listening on port 9001 for clients..

Unity側Playボタンを押してプロジェクトを実行
コンソールに接続完了メッセージが出ると同時に
サーバー側でも接続完了メッセージ

以降スペースキーを押すごとにメッセージが送受信される

 

まとめ

やっとサーバーっぽいことができた!
WebSocket色々使えるので、これから作る

WebSocket Unityとサーバーの双方向通信 サーバー編

WebSocketを使ったUnityとサーバーの双方向通信の実装

前回に引き続きサーバー立てた理由にもなる企画です
後々使うことになるので試します

WebSocketを使ってUnityとサーバー間で
テキストデータを送り合うことを第一目標にしています

其の壱ではサーバー側の処理を作ります

用語整理

Unity
統合開発環境を内蔵したゲームエンジン
2Dはもちろん、3DやVR用アプリケーションも作ることができる
Web,iOS,Androidなど様々な機器向けにデータをエクスポートできる

使用されているサーバー

サーバーをたてる!(契約編)

こちらの記事でたてたUbuntu Server
このブログのファイルも置かれている

HTTP ( Hypertext Transfer Protocol )
ハイパーテキスト・トランスファー・プロトコル
リクエスト-レスポンス型のプロトコルで
ハイパーテキスト、画像、音声 などを
サーバーからクライアントへ転送できる
クライアントがサーバにリクエストを送信、レスポンスを返す
基本、この時点で初期状態に戻るので
サーバはクライアントの状態を保存しない

WebSocket
HTML5に定義されている技術規格
クライアントとサーバー間に「ソケット」と呼ばれる
持続的な接続を確立させることで
双方向からデータの送信を開始できるようになる(らしい)
基本的なHTTPだとクライアントからだけしか
データの送信を開始できない

サーバー側実装

サーバー側でのWebSocket通信の準備をします
ネット上の情報ではnode.jsを使っているものが
多いようなのですが、後でAI系のものを
組み合わせるのでPythonを使って実装します

お約束

ubuntu 14.04 のアップデートを確認

root@localhost:~# sudo apt-get update

アップデートを適用

root@localhost:~# sudo apt-get upgrade

使わなくなったパッケージを削除

root@localhost:~# sudo apt-get -y dist-upgrade

autoremove

root@localhost:~# sudo apt-get -y autoremove

aptのキャッシュを削除

root@localhost:~# sudo apt-get -y autoclean

 

Python3 環境確認

python3バーション確認

~# python3 -V
Python 3.4.3

pip3のバーションを確認

~# pip3 --version
pip 1.5.4 from /usr/lib/python3/dist-packages (python 3.4)

 

ファイル作成

新規ディレクトリ作成

 ~# mkdir /home/ユーザー名/python3_project/mei/version_1/

Pythonファイル作成
arp.py ( automatic response program )

~# vim /home/ユーザー名/python3_project/mei/version_1/arp.py

Pythonファイル編集

websocket-serverのGitページに載ってるサンプル
他のPythonでWebSocketやってた人のコードを参考に

さっきのwebsocket_serverパッケージと
ログを取るlogginを入れてます

ポート番号はGitのサンプルのまんまにしてあります

import logging
from websocket_server import WebsocketServer

PORT=9001
HOST='27.120.98.26'

#logger_setup
logger = logging.getLogger(__name__)
logger.setLevel(logging.INFO)
handler = logging.StreamHandler()
handler.setFormatter(logging.Formatter(' %(module)s -  %(asctime)s - %(levelname)s - %(message)s'))
logger.addHandler(handler)
 
#callback
def new_client(client, server):
    logger.info('New client {}:{} has joined.'.format(client['address'][0], client['address'][1]))
 
def client_left(client, server):
    logger.info('Client {}:{} has left.'.format(client['address'][0], client['address'][1]))
 
def message_received(client, server, message):
    logger.info('Message "{}" has been received from {}:{}'.format(message, client['address'][0], client['address'][1]))
    reply_message = 'Re: ' + message
    server.send_message(client, reply_message)
    logger.info('Message "{}" has been sent to {}:{}'.format(reply_message, client['address'][0], client['address'][1]))
 
#main
if __name__ == "__main__":
    server = WebsocketServer(port=PORT, host=HOST, loglevel=logging.INFO)
    server.set_fn_new_client(new_client)
    server.set_fn_client_left(client_left)
    server.set_fn_message_received(message_received)
    server.run_forever()

たぶんこれで動くはず…

 

其の弐はこちら
https://www.washio.net/wacode/websocket-unity-server-com-2/

Unity Live2Dモデルのインポート

UnityにLive2Dのモデルをインポートします

サーバー立てた理由にもなる企画です
概要はある程度出来上がるまで伏せます

用語紹介

Unity
統合開発環境を内蔵したゲームエンジン
2Dはもちろん、3DやVR用アプリケーションも作ることができる
Web,iOS,Androidなど様々な機器向けにデータをエクスポートできる

UnityPackage
Unity上で利用できるいくつかの機能を
ひとつのファイルにまとめたパッケージ

Live2D
2D画像を変形、またその一部を補完することで
アニメーションモデルを作るソフトウェア
最近はVTuberブームで、関連する技術のサンプルが豊富

Live2D Cubism 3
Live2Dモデルを作ることのできる開発環境
PhotoShopファイルをもとにしてモデルを作成でき
動画として出力したり(VTuberみたいなイメージ)
Unity等で使用できるファイル形式でエクスポートしたりできる

Cubism 3.0 SDK for Unity
Unity環境下でLive2Dモデルを動作させるためのSDK
UnityPackageとしてUnityに取り込むことで使用できる

サンプルモデルダウンロード

http://www.live2d.com/ja/download
上記リンク先より、Live2D用のサンプルモデルをダウンロードしてきます
今回は桃瀬ひよりFREE版を使いました

モデルを組み込み用ファイルとして書き出し

Live2D Cubism 3起動

ファイル>ファイルを開く>ダウンロードしたモデル.cmo3

このような形でモデルファイル(編集用)が開きます
次に、このファイルをUnityに取り込める形式でエクスポートします

任意の場所にテキトウな名前のディレクトリを作成しておきます

ファイル>組み込み用ファイル書き出し>moc3ファイル書き出し

先ほど作成したディレクトリ内に書き出します
私の場合はこのように出力されました

次に、モデルを動かすためのアニメーションファイルを書き出します

ファイル>ファイルを開く>ダウンロードしたモデル.can3

このようなアニメーション編集用ビューになったはず
もしまだモデル編集用ビューだったら
ウィンドウ左上のModelerというボタンを押してAnimatorに変えてください

書き出します
先ほどモデルファイルを書き出したディレクトリを指定するようにします

ファイル>組み込み用ファイル書き出し>モーションファイル書き出し

モーションファイルが追加されました
これでLive2DのUnity用ファイルの書き出しは終了です

Cubism 3.0 SDK for Unityダウンロード

https://live2d.github.io/#unity
上記リンクより最新版を任意の場所にダウンロードします

UnityにCubism 3.0 SDK for Unityをインポート

公式のマニュアルはここ

Unityを起動
8GBのメモリだとほぼフルに使うようです
任意のプロジェクトを作成します
Templateオプションに2Dを指定してください

初期画面が開きました

Cubism 3.0 SDK for Unityをインポートします
画面下部にあるAssetという項目の中で右クリックし

Import Package>Custom Package...

先ほどダウンロードしたCubism 3.0 SDK for Unityの
unitypackageを指定して読み込みます

念の為ここで一度ビルドしてみます

File>Build & Run

エラーが出なければたぶんここまで順調です

UnityにLive2Dの組み込み用ファイルをインポート

先ほどLive2D Cubism 3で書き出した
Live2Dの組み込み用ファイル群をUnityにインポートします

出力されたモデル・アニメーションデータが入っている
ディレクトリをドラッグ&ドロップで
Unityのウィンドウ下部のAssetというところに入れます

入れたディレクトリの中に、青い箱アイコンの
ファイルが自動で生成されているはずです

この青い箱ファイル(Prefab)をUnityの真ん中のSceneエリアに
ドラッグ&ドロップで入れます

表示されました
サイズが小さすぎたりした時は赤枠のところのパラメータで調整します

ビルドしてみます

File>Build & Run

成功しました
以上でUnityへのLive2Dモデルのインポートは終了です

アニメーションモデルをドラッグ&ドロップすると
このような形で動かすこともできます!

サーバーをたてる!(ブログ移行編)

新しいサーバーにブログを移転します

前回の記事分の作業が終了した状態でサイトURLを
開くとWordPress初期設定画面になります

必要情報を入力するだけで簡単にサイトができてしまいます
ここでは、簡単なトラブルシューティングを書きます
(前回の記事と多少かぶっています)

No.1
画像ファイルがアップロードできない

たぶん権限がありません。
ディレクトリのアクセス権限をいじるとできます

sudo chmod -R g+w /var/www/html/wacode/

No2.
Wordpressで新しいパーマリンクを作ろうとするとエラーになる

以下修正します

~$ sudo vim /etc/apache2/apache2.conf

##追記する
<Directory /var/www/html/wacode>
    AllowOverride All
</Directory>

忘れずに設定を反映

~$ sudo apache2ctl configtest
~$ sudo a2enmod rewrite
~$ sudo service apache2 restart

 

ルートにindex.htmlを置く

Apache2は、ルートのフォルダにファイルがなくなると
(デフォルトファイルを消した)

ディレクトリリスティングという機能が動いて
ルート以下のフォルダ・ファイルを丸見えにしてしまいます
前回オフにしました

なので、ルートはからっぽになっていてNotFoundです
https://www.washio.net/まで来た人が、
wacodeにたどり着かないともったいないので
(あと父親がもう一つページを増やすそう)

サーバー作った理由の企画
進めたいのでCSSとか考えずに文字だけで
スピード重視で作ります

index.htmlを置いて、wacodeへ誘導します

お約束

ubuntu 14.04 のアップデートを確認

root@localhost:~# sudo apt-get update

アップデートを適用

root@localhost:~# sudo apt-get upgrade

使わなくなったパッケージを削除

root@localhost:~# sudo apt-get -y dist-upgrade

autoremove

root@localhost:~# sudo apt-get -y autoremove

aptのキャッシュを削除

root@localhost:~# sudo apt-get -y autoclean

vimエディタは、指定されたパスにファイルがないと自動で生成します

vim /var/www/html/index.html

“/var/www/html/index.html” [New File]
と表示されて記述画面になります
大文字”A”をコマンドモード(escを押すとなる)で入力すると
その行の末尾から挿入になります

保存、終了はコマンドモードで”:wq”です
保存しないで終了は”q!”とか色々ある

<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<link rel="shortcut icon" href="">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<h1>washio.net - Homepage Selecter</h1>
<a href= “https://www.washio.net/wacode”>
</body>
</html>

内容だけ決めればささっとできます

打ち終わったら”:wq”で保存

sudo service apache2 restart

Apacheを再起動
これでたぶんルートにファイルができました

https://www.washio.net

サーバーをたてる!(WordPress準備編)

WordPressをApacheに入れます

お約束

ubuntu 14.04 のアップデートを確認

root@localhost:~# sudo apt-get update

アップデートを適用

root@localhost:~# sudo apt-get upgrade

使わなくなったパッケージを削除

root@localhost:~# sudo apt-get -y dist-upgrade

autoremove

root@localhost:~# sudo apt-get -y autoremove

aptのキャッシュを削除

root@localhost:~# sudo apt-get -y autoclean

 

Apache2自動起動設定

~$ sudo apt install software-properties-common
~$ sudo apt-get install sysv-rc-conf
~$ sudo sysv-rc-conf apache2 on

 

Apacheセキュリティ対策
ハッカー様にあげる情報を減らして差し上げる基本的な操作

iconsフォルダ非表示化

~$ vim /etc/apache2/mods-enabled/alias.conf

##ファイルの中で以下の部分をごっそりコメントアウト

  <Directory "/usr/share/apache2/icons">
        Options FollowSymlinks
        AllowOverride None
        Require all granted
  </Directory>

ディレクトリリスティング無効化

~$ vim /etc/apache2/apache2.conf

##ファイルのこの部分を
<Directory /var/www/>
        #Options Indexes FollowSymLinks
        AllowOverride None
        Require all granted
</Directory>

##このように編集
<Directory /var/www/>
        #Options Indexes FollowSymLinks
        Options FollowSymLinks
        AllowOverride None
        Require all granted
</Directory>

HTTP TRACE 無効化

vim /etc/apache2/apache2.conf

##最下部に以下を追記
# HTTP TRACE off
TraceEnable off

たぶんすごいハッカーが本気を出したらこんなの意味ないのだろうな…

 

PHPインストール
慣れていなかったぼくは、パッケージ化されてなかったPHP7.2を
入れようとして、わけがわからなくなり、一度初期化…
慣れるまでPHP5でいきます( ・∇・)

~$ sudo apt install php5 libapache2-mod-php5 php5-mcrypt php5-mysql php5-gd

MySQLインストール
MySQL(データーベース)をインストール
途中でホップアップみたいなのがでるのでパスワードを設定

~$ sudo apt install mysql-server

WordPress用のデーターベースを作成

~$ mysql -u root -p
> CREATE DATABASE データーベース名 DEFAULT CHARACTER SET utf8 COLLATE utf8_unicode_ci;

MySQLの操作を終了

> exit

データーベース自動起動設定

~$ sudo sysv-rc-conf mysqld on

 

WordPressインストール

wp-cilをインストール

~$ curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
chmod +x wp-cli.phar
sudo mv wp-cli.phar /usr/local/bin/wp

ディレクトリ生成

~$ sudo mkdir /var/www/html/wacode/

WordPressファイルダウンロード

~$ sudo wp core download --locale=ja --path=/var/www/html/wacode --allow-root

 

WordPress有効化

.htaccess作成&660権限設定

~$ sudo touch /var/www/html/wacode/.htaccess
sudo chmod 660 /var/www/html/wacode/.htaccess

更新ファイル用ディレクトリ作成

~$ sudo mkdir /var/www/html/wordpress/wp-content/upgrade

デフォルト設定ファイル作成

~$ sudo cp /var/www/html/wacode/wp-config-sample.php /var/www/html/wacode/wp-config.php

パスフレーズランダム生成

~$ curl -s https://api.wordpress.org/secret-key/1.1/salt > ~/tmp_pass

WordPress設定変更

~$ sudo vim /var/www/html/wacode/wp-config.php

##ここに必要情報を入力
define('DB_NAME', '');
define('DB_USER', '');
define('DB_PASSWORD', '');

##さっき作ったパスフレーズ入力
define('AUTH_KEY', '');
define('SECURE_AUTH_KEY', '');
define('LOGGED_IN_KEY',    ');
define('NONCE_KEY', '');
define('AUTH_SALT', '');
define('SECURE_AUTH_SALT', '');
define('LOGGED_IN_SALT', '');
define('NONCE_SALT', '');

##最後の方のやつを書き換える
define('FS_METHOD', 'direct');

 

ディレクトリアクセス権限設定
これと、この次のやっておかないと
Wordpressで作り始めてから
NotFound連発することになります(なった)

sudo chmod -R g+w /var/www/html/wacode/

Apache側でのWordpressディレクトリ設定

~$ sudo vim /etc/apache2/apache2.conf

##追記する
<Directory /var/www/html/wacode>
    AllowOverride All
</Directory>

 

Apache設定変更を反映
これしないと、サーバー再起動時に元に戻っちゃうらしい

~$ sudo apache2ctl configtest
~$ sudo a2enmod rewrite
~$ sudo service apache2 restart

 

SSL化
Let’s encryptでSSL化する

Let’s encryptのツールをインストール

$ sudo apt-get install software-properties-common
$ sudo add-apt-repository ppa:certbot/certbot
$ sudo apt-get update
$ apt-get install python-certbot-apache -y

コマンドを実行

~$ letsencrypt --apache

設定ウィザードがEmailアドレスとか
httpでアクセス許可するかとか
サービス利用規約いい?とか聞いてくるので
答えながら進む

work by:

となったら設定完了

 

証明書自動更新設定
ほっておくと証明書が90日で切れちゃうので設定

~$ sudo certbot renew --dry-run
~$ certbot renew

 

終わりに

https://www.washio.net/wacodeでWordpressログイン画面へ
前回に引き続き、間違っていたら教えてください…

サーバーをたてる!(Ubuntu設定編)

Ubuntu Server をたてたので初期設定

環境 ubuntu server 14.04 LTS (64bit)

SSHでサーバーにログイン
Macのターミナルを開く

$ ssh -p ポート番号 -l root washio.net
Password: 
root@localhost:~#

 

お約束

ubuntu 14.04 のアップデートを確認

root@localhost:~# sudo apt-get update

アップデートを適用

root@localhost:~# sudo apt-get upgrade

使わなくなったパッケージを削除

root@localhost:~# sudo apt-get -y dist-upgrade

autoremove

root@localhost:~# sudo apt-get -y autoremove

aptのキャッシュを削除

root@localhost:~# sudo apt-get -y autoclean

root管理者権限での直接ログインを禁止する

一般ユーザーを作成

root@localhost:~# adduser 一般ユーザー名
New UNIX password: 
Retype new UNIX password:

root権限でのアクセスを終了

root@localhost:~# exit

root管理者権限での直接ログインができないようにする
一般ユーザーで再ログイン

$ ssh -p ポート番号 -l 一般ユーザー名 washio.net
一般ユーザー名@washio.net's password:

root権限を行使

一般ユーザー名@localhost:~$ su -
Password: 
root@localhost:~#

vimエディタでsshd_configを編集

root@localhost:~# vim /etc/ssh/sshd_config

//ファイルの40行目くらいを編集
#PermitRootLogin yes
PermitRootLogin no

escを押してコマンドモードにした後:wqで保存vimを終了

root@localhost:~# service ssh restart

SSHを再起動

 

ファイアーウォールを設定

aptでufwをインストール

~$ sudo apt-get install ufw

ufwでsshを許可

~$ ufw allow ssh

ファイアーウォールをオン

~$ sudo ufw enable

サーバーをたてる!(契約編)

やりたいことができたので、サーバーを立てることにしました

プロパイダー選び
父親が過去に取得して放置していたwashio.netなるドメインがありました
Value-domeinでとったものだったので同管理会社の
Core-Serverに最初に目をつけました
Python3も動くし、WordPressも

良さげ…と思ったら気になる部分が

基本料金は198円/月なのですが、オプションにやたら
高いものが隠れています
特に説明もなく、ちょっと調べても
不都合なことがありますくらい出てきません

よくわからなかったので、きちっと調べたところ
Core-Serverは共有サーバーなので
いくつかの契約でiPアドレスを共有している

で、仕様に書いてあるSSL対応というのは
そのiPに対してとった共有SSLというもの(らしい)
ということで、セキュアにすると自分のドメインを
つけられなくて、Core-Serverのドメインになる
(間違ってたら教えてください)

Xcodeでリンク作ったりするときは、例外にしなければ
SSLの方がいいので、https://www.washio.net/ にしたい…
でも恐ろしいことに、オプションの割引がいつまでなのか
書いてない…(見つけなれない?)

心配なので、別のプロパイダーを探すことにしました。

プロパイダー選びPart2
そも、探しているサーバーは
・安いやつ
・Python3が動く
・Apache
・WordPressも使える
・他社ドメイン逆引きできる
…という感じのものです

Prototypecafeで店長?さんがオススメしていたのは
VPSというやつでした
VPSというのは、自分で好きなOSやソフトが入れられて
root管理者権限が行使できるサーバーとのことでした

VPSの価格比較サイトがあって、容量などから
絞り込んでいくと
Serverman@VPSというのがありました。
Dream train internetという会社のものです
Entryプランで467円/月
VPSなのでソフト系はほぼほぼ気にしなくてよし
他社ドメイン逆引きできる

ここで気づきましたが、VPSということは
そのそれぞれに独自iPが付いているのだと思うので
こっちだとあのオプションを気にしなくて済む?

これ良さそうだなーということで
プロパイダー選びの旅はゴールしました

 

プラン選び
Serverman@VPSでは初期インストールOSを
CentOS7(64bit)
CentOS6(64bit/32bit)
Debian7(64bit)
Debian6(64bit/32bit)
ubuntu14.04LTS(64bit)
ubuntu12.04LTS(64bit)
から選べます

本屋さんで本棚をふわーって見た感じだと
CentOS7が多かった

でも、ラズパイを家でさわっていたので
似たようなコマンドが使えるやつがいいなというのと
Let’s encryptが入ってるということで
Debianかubuntuに絞りました

さらに、AI関連のページだとubuntu指定が多かったので
最終的にubuntu14.04LTS(64bit)を選ぶことに

契約はEntryプランでサーバーを借りました

 

他社ドメイン逆引き設定(Value-Server側)
IPv4 27.120.98.26 のサーバーを借りました
ここに、washio.netのドメインを関連付けます

このドメインのiPは?と聞くことを正引き
このiPのドメインは?と聞くことを逆引きと言う

まず、Value-domeinのコントロールパネルで
washio.netのiPは27.120.98.26であると設定します

コントロールパネル>ドメイン>DNSレコード/URL転送の設定から
契約しているドメインの管理画面を開きます
画面にて、必要情報(サーバーのiP)を入力します

入力したら、変更ボタンを押して、確定します

 

他社ドメイン逆引き設定(Serverman@VPS側)
先の設定で、washio.netのiPは27.120.98.26であるとされました

なので、次はServerman@VPSに、私のドメインはなーに?
と質問させるよう設定します

MyDTI(会員情報・お手続き)を開きます
MyDTI>契約中サービス>確認・変更>他社管理ドメイン設定
で設定ボタンを押し、必要情報(ドメイン名)を入力します

設定が完了すると、以下のようになります

これで他社ドメイン逆引き設定は終了。
ブラウザでhttp://ドメインネーム/と入力すると、
Apache2の初期画面が出てきます。

 

終わりに

慣れない作業で、混乱しました
何かおかしい部分があれば教えてください

焼き鳥屋照明 音声コントロール

この記事は過去に運用していたブログから移行したものです

はじめに
まえにブログを書いた時からやっぱりかなり時間が空いてしまいました
元々インターネット上に長文を書く習慣がないので
ついついモノを作るのが優先でまとめるのが後回しになってしまいます
定期考査も終わったので、2ヶ月間でやったことをしっかりと整理しようと思います
 
やったこと
GoogleHomeMini × ESP32 で照明ONの記事で書いたものを
焼き鳥屋(ものづくり学園つばめ)のカウンターにある
ダウンライト11個を操作できるように拡張しました
 
これがその時作った図です
GoogleAssistantからコマンドを
出して、IFTTT経由で
Blynkアプリを操作
 
ESP32というマイコンボードを
インターネット上から
いじることができます
 
結構いろんなところに応用がききます
焼き鳥屋のダウンライトは、3WのPowerLEDなので、3W = 3V × 1A
ESP32の1ピンあたりのドライブ能力は0.04Aなので故障防止にトランジスタ入れます
 
秋月電子、STA401A(直流電流増幅率1000で、コレクタ出力の最高値が4A)
このトランジスタが入った回路をものづくり学園つばめのハードに詳しい方に
作っていただいて、ぼくはソフトを作りました。
 
内容
ダウンライト計11個一度に操作するときは
IFTTT GoogleAssistant 連携の
Say a simple phrase を使って操作します
 
個別にひとつひとつ制御するときは、
同 Say a phrase with a number
はじめは11個Applet作っていましたが後で改良されました
IFTTTのアップレットは
こんな感じになっています
自分の制御したい言葉と
その返答などを設定します
 
iOS12でSiriショートカット
という似た様な機能が
搭載されるらしいので
個人的にはかなり楽しみです
 
これがIFTTTからWebhookを使って
Blynkを操作するための
“that”の部分です
 
モザイクがかかってるのは
そのURLでコマンド打つと
焼き鳥屋の電気のON,OFFが
できてしまうからです
 
 
インターネット経由でネットワークさえあればどこからでも操作できる
いろんななことに使えて応用がききますが
世界のどこかから焼き鳥屋の電気チカチカとかは困るので
本当にそれを考えたら作り込みは必要になります
 
 
つまずいたところ
最初GoogleHomeで実験していたとき
ダウンライト9番に見立てたLEDだけどうも消えない
いくら発音を変えたりして見てもダメでした
スマホのGoogle Assistantアプリで確認すると
「ダウンライト吸盤消して」となっていました
音声認識制度の問題か、発音が悪いのか
それはよくわかりませんが
Say a phrase with a numberが数字しか読まないという保証がなかったので
初期段階では11個Appletを作り
認識候補の一つに「吸盤」を入れることで対応できました
Say a phrase with a numberもうまく動く様なので
そちらの方が良かった様です
 
2つ目…
ESP32とダウンライトにはPC用電源から給電されます
焼き鳥屋のブレーカーが下げればすぐに立ち上がる
しかしWifiのアクセスポイントが開くまでの時間
ESP32をネットワークに繋げずに待機させないと
ネットワーク接続に失敗してめんどくさいことになることに
最初気づかず、アレ?となりました
 
結果として、ネットワークが開くまでの数十秒間待機して
ダウンライトはその間明滅する様に改良、いい感じになりました
 
 
リンク
このブログで書いたことについてものづくり学園つばめのページ
6mgt.comで紹介していただきました
 
ハードの設計を手伝ってくれた方が
音声制御の実験されている映像も公開されています

LYCHEE OpenCV 顔追跡

この記事は過去に運用していたブログから移行したものです

はじめに
GR-LYCHEEは昨年末に発売された、RENESAS社のプロトタイピングボードです
MBED対応ボードで、カメラ付き、LCD用コネクタなどがついています
ピンマップはArduino互換で、Arduinoスケッチも書けます
OpenCVも動作させることができ、カスケードファイルを変えれば色々認識させられます
 
ものづくり学園つばめからお借りしてきたので、
顔認識ロボットを作るため、顔の場所を把握し、ロボットに対して
どの方向にいるのか、LCDにウインカーを出すプログラムを作成します
 
測定
まず、実際のロボットはとある場所での屋外自動走行に使う予定ですが
筐体作成前に問題点等を考えるため、ロボット掃除機を使い
一通りの機能を実装して実験することになりました
 
ロボット掃除機iLIFEはリモコン操作ができ、
赤外線リモコンの左右のボタンを押すと
特定の角度回転します。まずはその回転角を測定します
 
ロボット掃除機の上部にレーザーポインターを固定、
何度も繰り返し動作させて、回転先のズレの中心と
初期方向付近のズレの中心との角度を測定します
 
左右それぞれ測定したら、LYCHEEのカメラの視野角との差を求めます
 
 
置き換え
先述した方法で測定したLYCHEEのカメラの視野角と
ロボットの左右1コマンドの角度の差をLCDのピクセルに置き換えます
 
LYCHEEに接続されるLCDは480×272。
電子工作でよく使われる、PSPと同じものです
 
x=240をロボットの正面としたとき、
置き換えの結果は左x=34、右x=446
(OpenCVは左上原点)
 
左右の値と正面との中間はそれぞれ136,343となるので
これを基準にロボットにコマンドを送れば顔を追跡することができます
 
LCDに目安表示
 
GR-LYCHEEをArduinoライクに開発できるIDE4GRでは
C++版OpenCVの構文が使えます。
 
公式サンプルのFaceDetection_Display_LCDは
顔を認識し、位置・サイズに合うよう枠を表示
LCDに映してくれます
 
それに加えて描画関数を使い、LCD上にロボット操作の目安となる
 
1. 左に1コマンド送った時向く方向 (x=34)
2. 1と3の中間線           (x=136)
3. ロボット正面方向         (x=240)
4. 3と4の中間線 (x=343)
5. 右に1コマンド送った時向く方向 (x=446)
 
これらのラインをそれぞれ描画したいと思います。
分かりやすいように、1,3,5は白っぽいグレー、2,4は黒っぽいグレーで描画します
 
cv::line(src, cv::Point(34, 3), cv::Point(34, 269), cv::Scalar(200, 200, 200), 1, 8);
cv::line(src, cv::Point(136, 3), cv::Point(136, 269), cv::Scalar(100, 100, 100), 1, 8);
cv::line(src, cv::Point(240, 3), cv::Point(240, 269), cv::Scalar(200, 200, 200), 1, 8);
cv::line(src, cv::Point(343, 3), cv::Point(343, 269), cv::Scalar(100, 100, 100), 1, 8);
cv::line(src, cv::Point(446, 3), cv::Point(446, 269), cv::Scalar(200, 200, 200), 1, 8);
 
このように線1本に1行のプログラムの追加で簡単に描画ができます。
 
このような感じで書くと、コマンドを送るべき方向にウインカーを出せます。
 
switch(areax){
case 0:
cv::line(src, cv::Point(3, 5), cv::Point(129, 5), cv::Scalar(255, 255, 255), 5, 8);
cv::line(src, cv::Point(3, 267), cv::Point(129, 267), cv::Scalar(255, 255, 255), 5, 8);
break;
case 1:
cv::line(src, cv::Point(143, 5), cv::Point(336, 5), cv::Scalar(255, 255, 255), 5, 8);
cv::line(src, cv::Point(143, 267), cv::Point(336, 267), cv::Scalar(255, 255, 255), 5, 8);
break;
case 2:
cv::line(src, cv::Point(349, 5), cv::Point(477, 5), cv::Scalar(255, 255, 255), 5, 8);
cv::line(src, cv::Point(349, 267), cv::Point(477, 267), cv::Scalar(255, 255, 255), 5, 8);
break;
default:
break;
}
 
 
動作中の様子(外部リンク)

 
顔座標に注意
どうも目安を顔が超えているはずなのに
ウインカーが切り替わらないなーという時の失敗。
 
 
 
FaceDetection_Display_LCDの顔の座標
face_roi.x , face_roi.y は表示される枠左上になっているので
 
int fplus;
fplus = face_roi.width/2;
 
こんな感じで顔のセンターを出さないとでした。
 
 
まとめ
LYCHEEのOpenCVのとっかかりでした
これから複雑な処理、他のマイコンとの連携もさせていきます