# はじめに

PHPのプログラム(<a href="https://github.com/itc-lab/wiringpi-php-bme280" target="_blank">wiringpi-php-bme280(GitHub)</a>)を同一の機能のままPythonに変換し、<a href="https://github.com/itc-lab/wiringpi-python-bme280" target="_blank">wiringpi-python-bme280(GitHub)</a>に公開しました。 
別記事の「<a href="https://itc-engineering-blog.netlify.app/blogs/php2python" target="_blank">php→pythonのトランスパイル</a>」のプログラムを使って文法をある程度変換→人力で変換と作業しましたが、結局、ほとんどが人力作業だったような気がします。今回、備忘録的にphp→pythonの変換例を列挙していきます。

<blockquote class="info">
細かい説明は省略し、変換前、変換後の列挙に留めます。順番は適当です。場合によっては等価ではないこともありますので、PHP、Python双方を理解して参考程度としてください。また、この記事中にあっても<a href="https://github.com/itc-lab/wiringpi-python-bme280" target="_blank">wiringpi-python-bme280</a>では、他の方法で書き換えたものもあります。
</blockquote>

<blockquote class="warn">
検証環境は、
<code>Raspbian GNU/Linux 10 (buster)</code>
<code>Python 3.7.3</code>
<code>PHP 7.3.29-1</code>
になります。
</blockquote>

 

【目次】 
[define](#anchor1)、[require](#anchor2)、[&&](#anchor3)、[argc](#anchor4)、[!](#anchor5)、[strcasecmp](#anchor6)、[intval](#anchor7)、[file_get_contents](#anchor8)、[posix_kill](#anchor9)、[is_file](#anchor10)、[pcntl_fork](#anchor11)、[die](#anchor12)、[$_SERVER](#anchor13)、[empty](#anchor14)、[mkdir](#anchor15)、[$_REQUEST](#anchor16)、[opendir readdir](#anchor17)、[is_file](#anchor18)、[preg_match](#anchor19)、[[] 配列追加](#anchor20)、[rsort](#anchor21)、[substr](#anchor22)、[isset](#anchor23)、[file](#anchor24)、[array_shift](#anchor25)、[explode](#anchor26)、[floatval](#anchor27)、[連想配列のキーと値追加](#anchor28)、[trim](#anchor29)、[json_encode](#anchor30)、[curl_init](#anchor31)、[curl_setopt](#anchor32)、[$_POST](#anchor33)、[is_array](#anchor34)、[foreach](#anchor35)、[引数のデフォルト値](#anchor36)、[array()](#anchor37)、[apache_request_headers](#anchor38)、[strlen](#anchor39)、[static](#anchor40)、[$GLOBALS](#anchor41)、[printf](#anchor42)、[flush](#anchor43)、[strpos](#anchor44)、[header](#anchor45)、[curl_exec](#anchor46)、[curl_close](#anchor47)、[usleep](#anchor48)、[time](#anchor49)、[strftime](#anchor50)、[sprintf](#anchor51)、[file_put_contents](#anchor52)、[fseek](#anchor53)、[ftell](#anchor54)、[pcntl_signal](#anchor55)、[無名関数](#anchor56)、[__construct](#anchor57)、[protected](#anchor58)、[for](#anchor59)、[>>](#anchor60)、[++](#anchor61)、[文字コード指定](#anchor62)、[ord](#anchor63)、[三項演算子](#anchor64)

 

<a class="anchor" id="anchor1"></a>

# define
```php
define( "LOG_DIR",	"/var/log/bme280log/" );
```
↓
```python
LOG_DIR = "/var/log/bme280log/"
```

 

<a class="anchor" id="anchor2"></a>

# require
```php
require( "bme280.inc" );
```
↓
```python
import bme280_inc
```
※bme280_inc.py読み込み

 

<a class="anchor" id="anchor3"></a>

# &&
```php
if ( $argc > 1 && !strcasecmp( $argv[1], "stop" ) ) {
```
↓
```python
if len(sys.argv) > 1 and sys.argv[1].lower() != "stop":
```

 

<a class="anchor" id="anchor4"></a>

# argc
```php
if ( $argc > 1 && !strcasecmp( $argv[1], "stop" ) ) {
```
↓
```python
if len(sys.argv) > 1 and sys.argv[1].lower() != "stop":
```

 

<a class="anchor" id="anchor5"></a>

# !
if文のエクスクラメーション／ビックリマーク
```php
if ( $argc > 1 && !strcasecmp( $argv[1], "stop" ) ) {
```
↓
```python
if len(sys.argv) > 1 and sys.argv[1].lower() != "stop":
```

```php
if( !is_file( "$dir/$file" ) ) continue;
```
↓
```python
if not os.path.isfile(os.path.join(dir, file)):
 continue
```

 

<a class="anchor" id="anchor6"></a>

# strcasecmp
```php
if ( !strcasecmp( $_SERVER["REQUEST_METHOD"], "POST" ) ) {
```
↓
```python
if request.environ["REQUEST_METHOD"].upper() == "POST":
```
※lowerまたは、upper

 

<a class="anchor" id="anchor7"></a>

# intval
```php
$pid = intval( file_get_contents( PID_FILE ) );
```
↓
```python
pid = int(file_get_contents(PID_FILE))
```

 

<a class="anchor" id="anchor8"></a>

# file_get_contents
```php
$pid = intval( file_get_contents( PID_FILE ) );
```
↓
```python
def file_get_contents(filename):
 with open(filename) as f:
 return f.read()

pid = int(file_get_contents(PID_FILE))
```

 

<a class="anchor" id="anchor9"></a>

# posix_kill
```php
$pid = intval( file_get_contents( PID_FILE ) );
```
↓
```python
import os
import signal
os.kill(pid, signal.SIGTERM)
```

 

<a class="anchor" id="anchor10"></a>

# is_file
```php
if is_file(PID_FILE):
```
↓
```python
if os.path.isfile(PID_FILE):
```

 

<a class="anchor" id="anchor11"></a>

# pcntl_fork
```php
pid = pcntl_fork()
if pid==-1:
 die("fork できません")
```
↓
```python
try:
 pid = os.fork()
except OSError:
 print("fork できません")
 sys.exit()
```

 

<a class="anchor" id="anchor12"></a>

# die
```php
die("fork できません")
```
↓
```python
print("fork できません")
sys.exit()
```

 

<a class="anchor" id="anchor13"></a>

# $_SERVER
```php
if ( empty( $_SERVER["REQUEST_METHOD"] ) || $_SERVER["REQUEST_METHOD"] != "POST" ) {
```
↓
```python
from flask import request
if (
 request.environ["REQUEST_METHOD"] is None
 or request.environ["REQUEST_METHOD"] != "POST"
):
```

 

<a class="anchor" id="anchor14"></a>

# empty
```php
if ( empty( $_SERVER["REQUEST_METHOD"] ) || $_SERVER["REQUEST_METHOD"] != "POST" ) {
```
↓
```python
if (
 request.environ["REQUEST_METHOD"] is None
 or request.environ["REQUEST_METHOD"] != "POST"
):
```

```php
if ( !empty( $GLOBALS["CHUNKED"] ) ) {
```
↓
```python
if hasattr(builtins, "CHUNKED") and builtins.CHUNKED:
```

 

<a class="anchor" id="anchor15"></a>

# mkdir
```php
mkdir( $dir, 0755 );
```
↓
```python
os.mkdir(dir)
os.chmod(dir, 0o755)
```

 

<a class="anchor" id="anchor16"></a>

# $_REQUEST
```php
if ( $_REQUEST["TYPE"] == "FILELIST" ) {
```
↓
```python
from flask import request
if request.form.get("TYPE") == "FILELIST":
```

 

<a class="anchor" id="anchor17"></a>

# opendir readdir
```php
$dp = opendir( $dir );
if ( $dp !== false ) {
	while( ( $file = readdir( $dp ) ) !== false ) {
```
↓
```python
for f in os.listdir(dir):
```

 

<a class="anchor" id="anchor18"></a>

# is_file
```php
if( !is_file( "$dir/$file" ) ) continue;
```
↓
```python
if not os.path.isfile(os.path.join(dir, f)):
```

 

<a class="anchor" id="anchor19"></a>

# preg_match
```php
if( preg_match( "/\.log$/", $file ) ) {
```
↓
```python
import re
matches = re.search('\.log$', file)
```

※大文字小文字無視フラグ有りの場合
```php
if ( preg_match( "/^Transfer\-Encoding\:\s+chunked/i", $head ) ) {
```
↓
```python
if re.search(
 r"^Transfer\-Encoding\:\s+chunked", head, re.IGNORECASE
):
```

 

<a class="anchor" id="anchor20"></a>

# [] 配列追加
```php
$files[] = $file;
```
↓
```python
files.append(file)
```

 

<a class="anchor" id="anchor21"></a>

# rsort
```php
rsort( $files );
```
↓
```python
files.sort(reverse=True)
```

 

<a class="anchor" id="anchor22"></a>

# substr
```php
$date = substr( $file, 0, 4 ) . "/" .
```
↓
```python
date = file[0:4] + "/" 
```
※file[0:4]は、file[:4]でも良い。

 

<a class="anchor" id="anchor23"></a>

# isset
```php
if( isset( $_REQUEST["DATE"] ) ) {
```
↓
```python
if request.form.get("DATE") is not None:
```

 

<a class="anchor" id="anchor24"></a>

# file
```php
$logdata = file( $file, FILE_IGNORE_NEW_LINES );
//FILE_IGNORE_NEW_LINES : 配列の各要素の最後に改行文字が含まれない
```
↓
```python
try:
 with open(file,"r") as f:
 logdata = f.read().splitlines()
except:
 pass
```

 

<a class="anchor" id="anchor25"></a>

# array_shift
```php
array_shift( $logdata );
```
↓
```python
logdata.pop(0)
```

 

<a class="anchor" id="anchor26"></a>

# explode
```php
$val = explode( "\t", $data );
```
↓
```python
val = data.split("\t")
```

 

<a class="anchor" id="anchor27"></a>

# floatval
```php
$result[$val[1]] = array(
 floatval( $val[2] ), floatval( $val[3] ), floatval( $val[4] )
);
```
↓
```python
result[val[1]] = [float(val[2]), float(val[3]), float(val[4])]
```

 

<a class="anchor" id="anchor28"></a>

# 連想配列のキーと値追加
```php
$result[$val[1]] = array(
 floatval( $val[2] ), floatval( $val[3] ), floatval( $val[4] )
);
```
↓
```python
result[val[1]] = [float(val[2]), float(val[3]), float(val[4])]
```

 

<a class="anchor" id="anchor29"></a>

# trim
```php
$data = trim( file_get_contents( $file ) );
```
↓
```python
data = file_get_contents(file).strip()
```

 

<a class="anchor" id="anchor30"></a>

# json_encode
```php
$text = json_encode( $result, JSON_UNESCAPED_UNICODE );
//JSON_UNESCAPED_UNICODE：マルチバイト Unicode 文字をそのままの形式で扱います (デフォルトでは \uXXXX にエスケープします)。
```
↓
```python
import json
text = json.dumps(result, ensure_ascii=False)
```
↓
```python
from flask import Flask
app = Flask(__name__)
app.config["JSON_AS_ASCII"] = False
return jsonify(result)
```

 

<a class="anchor" id="anchor31"></a>

# curl_init
```php
$ch = curl_init();
```
↓
```python
import pycurl
ch = pycurl.Curl()
```

 

<a class="anchor" id="anchor32"></a>

# curl_setopt
```php
curl_setopt( $ch, CURLOPT_SSL_VERIFYPEER, 0 );
```
↓
```python
ch.setopt(pycurl.SSL_VERIFYPEER, False)
```

 

<a class="anchor" id="anchor33"></a>

# $_POST
```php
$param = array_to_str( $_POST );
```
↓
```python
from flask import request
param = array_to_str(request.form)
```

 

<a class="anchor" id="anchor34"></a>

# is_array
```php
if ( !is_array( $value ) ) {
```
↓
```python
if not isinstance(value, (list, tuple, set, dict)):
```

 

<a class="anchor" id="anchor35"></a>

# foreach
```php
foreach( $value as $k => $v ) {
```
↓
```python
for k, v in value:
```

 

<a class="anchor" id="anchor36"></a>

# 引数のデフォルト値
```php
function array_to_str( $value, $key = "" ) {
```
↓
```python
def array_to_str(value, key=""):
```

 

<a class="anchor" id="anchor37"></a>

# array()
```php
$headers = array();
```
↓
```python
headers = []
```

 

<a class="anchor" id="anchor38"></a>

# apache_request_headers
```php
foreach ( apache_request_headers() as $name => $value ) {
```
↓
```python
import os
for name, value in os.environ.iteritems():
 if name.startswith("HTTP_")
```
↓
```python
from flask import request
for name, value in request.headers:
```

 

<a class="anchor" id="anchor39"></a>

# strlen
```php
$ln = strlen( $buffer );
```
↓
```python
ln = len(buffer)
```

 

<a class="anchor" id="anchor40"></a>

# static
```php
function call_back( $ch, $buffer ) {
 $ln = strlen( $buffer );
 static $start_head = false;
 static $start_body = false;
 static $save = "";
```
↓
```python
def static_vars(**kwargs):
 def decorate(func):
 for k in kwargs:
 setattr(func, k, kwargs[k])
 return func
 return decorate

@static_vars(start_head=False,start_body=False,save="")
def call_back(ch, buffer):
 ln = len(buffer)
```

 

<a class="anchor" id="anchor41"></a>

# $GLOBALS
スーパーグローバル(super global)
```php
if ( !empty( $GLOBALS["CHUNKED"] ) ) {
```
↓
```python
import builtins
if hasattr(builtins, "CHUNKED") and builtins.CHUNKED:
```
↓ 
メモリに留まり続けるため、globalステートメント使用
```python
global chunked_flag
chunked_flag = False
def call_back(buffer):
 ln = len(buffer)
 global chunked_flag
 if call_back.start_body:
 if chunked_flag:
```

 

<a class="anchor" id="anchor42"></a>

# printf
```php
printf( "%x\r\n", strlen( $buffer ) );
```
↓
```python
print("%x\r\n" % (len(buffer)), end='')
```

 

<a class="anchor" id="anchor43"></a>

# flush
```php
flush();
```
↓
```python
import sys
sys.stdout.flush()
```
↓
```python
from flask import flash
flash('xxx')
```
※未検証

 

<a class="anchor" id="anchor44"></a>

# strpos
```php
if ( ( $pos = strpos( $buffer, "\r\n" ) ) === false ) {
```
↓
```python
pos = buffer.find("\r\n")
if pos > 0:
```

 

<a class="anchor" id="anchor45"></a>

# header
```php
header(head)
```
↓
```python
print(head)
print()
```

```php
header('HTTP/1.1 400 Bad Request');
echo "Bad Request";
exit;
```
↓
```python
from flask import abort
abort(400, 'Bad Request')
```

```php
header( 'HTTP', true, 403 );
echo "Could not connect to server\n'{$_REQUEST["REQUEST_URL"]}'\r\n";
```
↓
```python
return "Could not connect to server\n'" + request.form.get("REQUEST_URL") + "'\r\n",403
```

※Flaskでjsonを返す場合
```php
$text = json_encode( $result, JSON_UNESCAPED_UNICODE );
header( "Content-Type: application/json; charset=utf-8" );
header( "Content-Length: " . strlen( $text ) );
echo $text;
```
↓
```python
from flask import jsonify

app.config["JSON_AS_ASCII"] = False
@app.route("/getlogdata")
def getlogdata():
 return jsonify(result)
```

 

<a class="anchor" id="anchor46"></a>

# curl_exec
```php
if ( curl_exec( $ch ) !== true ) {
 # エラー処理
```
↓
```python
try:
 ch.perform()
except Exception:
 # エラー処理
```

 

<a class="anchor" id="anchor47"></a>

# curl_close
```php
curl_close( $ch );
```
↓
```python
ch.close()
```

 

<a class="anchor" id="anchor48"></a>

# usleep
```php
usleep( 100000 );
```
↓
```python
import time
def usleep(x):
 time.sleep(x/1000000.0)
usleep(100000)
```
↓
```python
import time
time.sleep(100000 / 1000000.0)
```

 

<a class="anchor" id="anchor49"></a>

# time
```php
$tm = time();
```
↓
```python
import time
tm = int(time.time())
```

 

<a class="anchor" id="anchor50"></a>

# strftime
```php
$text .= strftime( "%Y/%m/%d\t", $tm );
```
↓
```python
import datetime
dt_now = datetime.datetime.now()
text += dt_now.strftime( "%Y/%m/%d\t")
```

 

<a class="anchor" id="anchor51"></a>

# sprintf
```php
$text .= sprintf( "%.2f\t", $bme280->temperature + 0.005 );
```
↓
```python
text += "{0:.2f}\t".format(bme280.temperature + 0.005)
```

 

<a class="anchor" id="anchor52"></a>

# file_put_contents
LOCK_EX（排他ロック）有り
```php
file_put_contents( $log_file, $text, LOCK_EX );
```
↓
```python
import fcntl
def file_put_contents(filename, data):
 with open(filename, "w") as f:
 f.write(data)
def touch(filename):
 if os.path.exists(filename):
 # os.utime(fname, None)
 pass
 else:
 open(filename, "a").close()
def file_put_contents_ex(filename, data):
 touch(filename)
 with open(filename) as lockfile:
 fcntl.flock(lockfile.fileno(), fcntl.LOCK_EX)
 try:
 file_put_contents(filename, data)
 finally:
 fcntl.flock(lockfile.fileno(), fcntl.LOCK_UN)
```

 

<a class="anchor" id="anchor53"></a>

# fseek
```php
$fp = fopen( $log_file, "a" );
if ( $fp !== false ) {
	fseek( $fp, 0, SEEK_END );
```
↓
```python
with open(log_file, "a") as f:
 pos = f.tell()
```
※"a"フラグのopenで自動的にSEEK_ENDになる。

 

<a class="anchor" id="anchor54"></a>

# ftell
```php
$pos = ftell( $fp );
```
↓
```python
pos = f.tell()
```

 

<a class="anchor" id="anchor55"></a>

# pcntl_signal
```php
pcntl_signal( SIGTERM, function( $signo, $siginfo ) {
	$GLOBALS["lcd"]->lcdClear();
	$GLOBALS["lcd"]->lcdDisplay( false );
	unlink( PID_FILE );
	exit;
} );
```
↓
```python
signal.signal(
 signal.SIGTERM,
 lambda _signo, _stack_frame: [lcd.lcdClear(), lcd.lcdDisplay(False), os.unlink(PID_FILE), sys.exit()],
)
```
※signal.signalの２つ目の引数のcallback関数は、引数を２つ取る。

 

<a class="anchor" id="anchor56"></a>

# 無名関数
```php
pcntl_signal( SIGTERM, function( $signo, $siginfo ) {
	$GLOBALS["lcd"]->lcdClear();
	$GLOBALS["lcd"]->lcdDisplay( false );
	unlink( PID_FILE );
	exit;
} );
```
↓
```python
signal.signal(
 signal.SIGTERM,
 lambda _signo, _stack_frame: [lcd.lcdClear(), lcd.lcdDisplay(False), os.unlink(PID_FILE), sys.exit()],
)
```

 

<a class="anchor" id="anchor57"></a>

# __construct
```php
function __construct( $addr, $rows = 2, $cols =16, $bits = 4 ) {
```
↓
```python
def __init__(self, addr, rows=2, cols=16, bits=4):
```

 

<a class="anchor" id="anchor58"></a>

# protected
```php
protected $rows;
```
↓
```python
_rows = 2
```

 

<a class="anchor" id="anchor59"></a>

# for
```php
for ( $i = 0; $i < 8; $i ++ ) {
```
↓
```python
for i in range(8):
```

 

<a class="anchor" id="anchor60"></a>

# >>
ビット演算子右シフト
```php
$this->put4Command( $func >> 4);
```
↓
```python
self.put4Command(func >> 4)
```

 

<a class="anchor" id="anchor61"></a>

# ++
インクリメンタル演算子
```php
if ( ++ $this->cx >= $this->cols ) {
```
↓
```python
self._cx += 1
if self._cx >= self._cols: 
```

 

<a class="anchor" id="anchor62"></a>

# 文字コード指定
\xdf sjis文字コード指定
```php
$lcd->lcdPuts( sprintf( "%5.2f\xdfC %5.2f%%", $bme280->temperature + 0.005, $bme280->humidity + 0.005 ) );
```
↓
```python
lcd.lcdPuts(
 "{0:5.2f}{1}C {2:5.2f}%".format(
 bme280.temperature + 0.005, b"\xdf".decode('sjis'), bme280.humidity + 0.005
 )
)
```
※
\xdf は、半角の丸です。
1602A LCDは、ANKコードを使用するため、℃の表示にsjisの半角丸を使っています。

<blockquote class="info">
【 ANKコード 】
ASCIIコード(0x00-0x7F)を 0x00-0xFF まで拡張して、半角カナを含めたものです。
アルファベット (Alphabet)、数字 (Numerical digit)、片仮名 (Katakana) の頭文字から「ANKコード」と呼ばれるようになりました。
後に「JIS X 0201」 として正式に定義されました。
「JIS X 0201」の俗称が「ANKコード」ということになります。
</blockquote>

 

<a class="anchor" id="anchor63"></a>

# ord
ord — 文字列の先頭バイトを、0 から 255 までの値に変換する
```php
$this->lcdPutchar( Ord( $string[$n] ) );
```
↓
```python
self.lcdPutchar(ord(string[n]))
```
※python3の場合、全角文字が１文字としてカウントされて、意図した動きでは無かったため、以下のように対応
```php
for ( $n = 0; $n < strlen( $string ); $n ++ ) {
	$this->lcdPutchar( Ord( $string[$n] ) );
}
```
↓
```python
def lcdPuts(self, string):
 chars = bytearray(string.encode("sjis"))
 for n in range(len(chars)):
 self.lcdPutchar(chars[n])
```

 

<a class="anchor" id="anchor64"></a>

# 三項演算子
ord — 文字列の先頭バイトを、0 から 255 までの値に変換する
```php
$d =( $data & ( 0x01 << $i ) ) ? WiringPi::HIGH : WiringPi::LOW;
```
↓
```python
d = wiringpi.HIGH if (data & (0x10 << i)) else wiringpi.LOW
```
※trueならHIGH、falseならLOW

PHPのプログラム(wiringpi-php-bme280)を同一の機能のままPythonに変換し、wiringpi-python-bme280に公開しました。 別記事の「php→pythonのトランスパイル」のプログラムを使って文法をある程度変換→人力で変換と作業しましたが、今回、備忘録的にphp→pythonの変換例を列挙していきます。

php→pythonのトランスパイル 人力読み替え編

# はじめに

Google Search Console や Bing Webmaster Tools にサイトマップが登録できます。Next.js のプロジェクトでは、next-sitemap を使うとサイトマップの作成が簡単にできました。 
sitemap.xml 作成から Google Search Console、Bing Webmaster Tools に登録までを説明します。

<blockquote class="info">
【 サイトマップ 】
サイトマップ(sitemap)とは、検索サイトのクローラーにWebページの繋がりを認識させて、一つ一つ申請しなくてもクローリングしてくれるファイルです。
</blockquote>

 



・[next-sitemap](#anchor1) 
・[Google Search Console に登録](#anchor2) 
・[Bing Webmaster Tools に登録](#anchor3) 
・[「サイトマップを読み込めませんでした」について](#anchor4)

 

<a class="anchor" id="anchor1"></a>

# next-sitemap

Next.js のプロジェクトをビルド時に自動的に sitemap.xml を生成するように改造します。 
改造と言うほどでもなく、next-sitemap を組み込むだけになります。 
(参考サイト：<a href="https://fwywd.com/tech/next-sitemap" target="_blank">https://fwywd.com/tech/next-sitemap</a>) 
 

## Step 1

next-sitemap をインストールします。 
※例として、/work/itc-blog が Next.js プロジェクトトップとします。

```sh
$ cd /work/itc-blog
$ npm install next-sitemap
```

これにより、next-sitemap がインストールされて、package.json に以下のように書き込まれます。

```json
"next-sitemap": "^1.6.140",
```

 

## Step 2

next-sitemap の設定ファイルを作成します。

```sh
$ vi sitemap.config.js
```

```javascript
module.exports = {
 siteUrl: 'https://itc-engineering-blog.netlify.app',
 changefreq: 'weekly',
 generateRobotsTxt: true,
 sitemapSize: 7000,
 outDir: './out',
};
```

<blockquote class="warn">
デフォルトは、 next-sitemap.js ですが、ESLintを使っているため、sitemap.config.jsとします。この後、*.config.jsのLint(文法チェック)を行わないようにします。
</blockquote>
意味は以下の通りです。

<code>siteUrl</code>： サイトのトップページ URL です。 
<code>changefreq</code>： サイトの更新頻度です。always,hourly,daily,weekly,monthly,yearly,never から選べます。この頻度でクローラーが見に来るようになるようですが、嘘をつくとかえって見に来なくなるという話もありますので、なるべく本当の値にした方がよさそうです。全ページこの値になります。 
<code>generateRobotsTxt</code>： robots.txt(クローラーに見せたくないところを設定するファイル)を生成するかどうかの設定です。true だけの場合、特に制限なしの robots.txt が生成されます。 
<code>sitemapSize</code>： sitemap.xml は分割配置できるのですが、分割基準の閾値です。単位は、公式サイトにも書かれていなくて、分かりませんでした。 
<code>outDir</code>： どこに sitemap.xml を出力するかの設定です。Next.js プロジェクトの場合何も指定しないと、./out にビルド結果が出力されますので、これに合わせます。

 

## Step 3

※必須ではありません。
ESLint の設定で、*.config.js の Lint(文法チェック)を行わないようにします。 
以下のように `"ignorePatterns": ["*.config.js"]` を追加します。

```sh
$ vi .eslintrc.json
```

```js
{
 "env": {
・・・
 },
 "ignorePatterns": ["*.config.js"]
}
```

 

## Step 4

package.json のところに、ビルドコマンド 
`next-sitemap --config sitemap.config.js` 
を追加します。 
 
●「<a href="https://itc-engineering-blog.netlify.app/blogs/ydznz8j2o" target="_blank">Strapi と Next.js を使って静的ウェブサイトを構築</a>」のときのようにビルドしたものを置くだけの場合 
↓

```json
{
 ・・・,
 "scripts": {
 ・・・,
 "build": "next build && next export && next-sitemap --config sitemap.config.js",
 ・・・
 },
・・・
```

 

●「<a href="https://itc-engineering-blog.netlify.app/blogs/efxq_5j84z" target="_blank">Next.js microCMS GitHub Netlify で Jamstack なブログを公開</a>」のときのように Netlify にデプロイする場合 
↓

```json
{
 ・・・,
 "scripts": {
 ・・・,
 "export": "next build && next export",
 "postexport": "next-sitemap --config sitemap.config.js",
 ・・・
 },
・・・
```

`export`の下に、`"postexport": "next-sitemap --config sitemap.config.js",` の行を追加になります。 
ちなみに、２回失敗したのですが、以下のような状況でした。

```json
"export": "next build && next export && next-sitemap --config sitemap.config.js",
```

⇒sitemap.xml が作成されませんでした。（ただし、Google Search Console がエラーになっただけで、そう思っただけかもしれません。） 
 

```json
"postbuild": "next-sitemap --config sitemap.config.js",
```

⇒post[ビルドコマンド]で、ビルド後に実行する意味になりますが、ビルドコマンドが export で設定してあるため、無視されました。 
 

```json
"postexport": "next-sitemap --config sitemap.config.js",
```

⇒ ビルドコマンドが export で設定してあるため、ビルド後に実行されて、無事 sitemap.xml が作成されました。

 

## Step 5

ビルドします。
 
●「<a href="https://itc-engineering-blog.netlify.app/blogs/ydznz8j2o" target="_blank">Strapi と Next.js を使って静的ウェブサイトを構築</a>」のときのようにビルドしたものを置くだけの場合 
↓

```sh
$ npm run build
```

⇒./out/sitemap.xml と ./out/robots.txt が作成されます。

 

●「<a href="https://itc-engineering-blog.netlify.app/blogs/efxq_5j84z" target="_blank">Next.js microCMS GitHub Netlify で Jamstack なブログを公開</a>」のときのように Netlify にデプロイする場合 
↓ 
一旦 GitHub に push して、Netlify で Deploy site です。

 

<a class="anchor" id="anchor2"></a>

# Google Search Console に登録

左のメニューから「サイトマップ」をクリックします。 
新しいサイトマップの追加に「sitemap.xml」を入力します。
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image1.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image1.png" alt="" loading="lazy"></a>

<blockquote class="info">
今回、out直下、つまり、ドキュメントルートに作成する設定でしたので、パス無しの「sitemap.xml」だけの入力です。
</blockquote>
 
「送信」ボタンをクリックします。
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image2.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image2.png" alt="" loading="lazy"></a>
 
・・・で、登録されるはずですが、登録されませんでした。
 
 

`サイトマップを読み込めませんでした` 
`一般的な HTTP エラー` 
`サイトマップにアクセスしようとした際にエラーが発生しました。サイトマップがガイドラインに従っており、指定した場所からアクセスできることを確認してから、再送信してください。` 
`HTTP エラー: 404` 

となっています。
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image3.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image3.png" alt="" loading="lazy"></a>
 
⇒下記 [「サイトマップを読み込めませんでした」について](#anchor4) を参照してください。

 

<a class="anchor" id="anchor3"></a>

# Bing Webmaster Tools に登録

左のメニューから「サイトマップ」をクリックし、「サイトマップを送信」をクリックします。
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image4.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image4.png" alt="" loading="lazy"></a>
 
「`https://itc-engineering-blog.netlify.app/sitemap.xml`」を入力し、「送信」ボタンをクリックします。
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image5.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image5.png" alt="" loading="lazy"></a>
 

<blockquote class="info">
今回、out直下、つまり、ドキュメントルートに作成する設定でしたので、トップページURLと「sitemap.xml」だけの記述です。
</blockquote>
 
登録されました。
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image6.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image6.png" alt="" loading="lazy"></a>
 
 

<a class="anchor" id="anchor4"></a>

# 「サイトマップを読み込めませんでした」について

Google Search Console にサイトマップを登録できませんでした。 
同じ内容、URL で、Bing Webmaster Tools には登録成功しました。
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image3.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image3.png" alt="" loading="lazy"></a>
 
<a href="https://support.google.com/webmasters/community?hl=ja" target="_blank">コミュニティ</a>を見ると、何度も同じような問題の投稿があります。 
「500 ページ以下の場合、sitemap.xml を登録してもしなくても同じ」という記述が見られるため、今のところ、問題無いかなという状況です。 
進展が有り次第、更新する予定です。

 

## URL 検査

Google Search Console で `https://itc-engineering-blog.netlify.app/sitemap.xml` を URL 検査しましたが、問題ありませんでした。 
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image7.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image7.png" alt="" loading="lazy"></a>
HTTP エラー: 404 と矛盾しています。 
もしかしたら、一度、本当に HTTP エラー: 404 を起こしてしまったので、それを覚えているかもしれません。

 

## sitemap.xml の存在確認

ブラウザの URL 欄に「`https://itc-engineering-blog.netlify.app/sitemap.xml`」を入力し、アクセスすると、xmlが表示されるため、問題ありません。
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image8.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image8.png" alt="" loading="lazy"></a>
 

```sh
# curl https://itc-engineering-blog.netlify.app/sitemap.xml
```

でも取得できました。

 

## Validate XML Sitemap

sitemap.xml の内容に問題が有るのかなと思い、<a href="https://www.xml-sitemaps.com/validate-xml-sitemap.html" target="_blank">`https://www.xml-sitemaps.com/validate-xml-sitemap.html`</a>で検査してみましたが、問題ありませんでした。
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image9.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image9.png" alt="" loading="lazy"></a>

 

## robots.txt テスター

robots.txt に問題が有って、Google から見られないのかなと思い、 <a href="https://support.google.com/webmasters/answer/6062598?hl=ja" target="_blank">robots.txt テスター</a> にてテストしましたが、問題ありませんでした。
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image10.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image10.png" alt="" loading="lazy"></a>
 
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image11.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image11.png" alt="" loading="lazy"></a>

 

## ファイル名変更

別のファイル名「sitemap2.xml」を置いて、間違いなく存在することも確認し、送信してみました。 
「サイトマップを読み込めませんでした。」となりました。 
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image12.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/image12.png" alt="" loading="lazy"></a>

 

## サイトマップ削除

削除 → 登録としてもダメでした。 
一旦、削除して、一ヵ月後くらいにやり直そうと思います。 
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/deletesitemap.gif" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/next-sitemap/deletesitemap.gif" alt="" loading="lazy"></a>

Google Search Console や Bing Webmaster Tools にサイトマップが登録できます。Next.js のプロジェクトでは、next-sitemap を使うとサイトマップの作成が簡単にできました。 sitemap.xml 作成から Google Search Console、Bing Webmaster Tools に登録までを説明します。 ・next-sitemap ・Google Search Console に登録 ・Bing Webmaster Tools に登録 ・「サイトマップを読み込めませんでした」について

Next.js next-sitemapで静的Webサイトのサイトマップを作成

ラズパイでBME280センサから取得した温湿度気圧をWeb画面に表示する wiringpi-php-bme280(GitHub) というのを作りました。 こちらは、phpのプログラムですが、同じことがpythonでもできるはずです。 そこで、まず、ツールでphp→pythonの変換をして、それを元に開発することにしました。今回は、変換ツール（トランスパイラ）の選定と試した結果を書きたいと思います。  【 トランスパイル(transpile) 】  トランスパイル(transpile)とは、あるプログラミング言語から他のプログラミング言語へと変換（翻訳）することです。変換ツールをトランスパイラと呼びます。JavaScriptのBabelが有名です。

php→pythonのトランスパイル

# はじめに
弊社では社内のアクティビティを可視化するために、GitLab,Wekanの操作をWebHookを使って通知しています。 
詳細は、別記事「<a href="https://itc-engineering-blog.netlify.app/blogs/dikzpvtybk" target="_blank">GitLab,Wekan→Rocket.Chat→SlackのWebHook</a>」にアップ済みです。 
これと同じようにファイル／フォルダの追加更新削除をWebHookを使って通知するアプリ（サービス）を作成しましたので、概要を説明します。

<blockquote class="warn">
アプリの本体、ソースコードは公開していません。
</blockquote>

 

・[動作内容](#anchor1) 
・[Rocket.ChatにIncoming WebHookを設定](#anchor2) 
・[監視アプリインストール](#anchor3) 
・[監視対象フォルダ設定](#anchor4) 
・[WebHook URLの設定](#anchor5) 
・[動作確認](#anchor6) 

 

<a class="anchor" id="anchor1"></a>

# 動作内容
以下の図のように、ファイルサーバーの特定フォルダを監視し、監視フォルダ直下でファイル／フォルダの追加更新削除が行われたら、WebHookでRocket.Chatへ通知、さらにRocket.Chat→Slackへ伝播するイメージです。
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/monitoring_webhook/monitoring.svg" alt="" style="margin-top: 3px;">
 
<blockquote class="warn">
Rocket.Chat→Slackの部分は、別記事「<a href="https://itc-engineering-blog.netlify.app/blogs/dikzpvtybk" target="_blank">GitLab,Wekan→Rocket.Chat→SlackのWebHook</a>」の内容と重複しますので、そちらをご覧ください。
</blockquote>

<blockquote class="info">
監視対象は、ローカルディスクでもできましたが、運用上ファイルサーバー（NAS）の方を監視対象とするため、ファイルサーバーを監視前提で進めていきます。
</blockquote>

 

<a class="anchor" id="anchor2"></a>

# Rocket.ChatにIncoming WebHookを設定
管理者でログイン後、ユーザーのアイコンをクリックして、「管理」をクリックします。 
「サービス連携」をクリックします。 
「Incoming」を選択して、「＋New」をクリックします。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/monitoring_webhook/image1.png" alt="" width="600px">
 

「名前」は、"フォルダ監視"とし、投稿先チャンネルは、"#general"とします。 
「投稿ユーザー」は、Rocket.Chatで登録されているユーザー名を入力します。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/monitoring_webhook/image2.png" alt="" width="600px">
 

絵文字は、アバターの画像になります。<a href="https://www.webfx.com/tools/emoji-cheat-sheet" target="_blank">https://www.webfx.com/tools/emoji-cheat-sheet/</a> 等で調べて、絵文字コードを入力します。今回 `:file_folder:` とします。
 

今回、Scriptは登録しません。スクリプトを有効にするをオフのままにします。 
スクリプトを使わない理由は、以下のように監視アプリから、`text` が欲しい形で送られてくるからです。`text`は、そのままチャットのテキストに採用されます。 

```javascript
{
	"username": "ファイル作成",
	"text": "ファイル '新しいテキスト ドキュメント.txt' を作成しました。"
}
```

 
「有効」スイッチをオンにして、保存ボタンをクリックします。
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/monitoring_webhook/image3.png" alt="" width="600px">
 

保存後、以下のように Webhook URL が表示されるため、これをコピーしておきます。
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/monitoring_webhook/image4.png" alt="" width="600px">
 

以上で、Rocket.Chat側のWebHook受け入れ準備は完了です。 

 

<a class="anchor" id="anchor3"></a>

# 監視アプリインストール 
msiをダブルクリックしてインストールします。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/monitoring_webhook/image5.png" alt="" width="200px">
 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/monitoring_webhook/image6.png" alt="" width="400px">
 
「Folder Monitoring Service」としてサービスに登録されます。
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/monitoring_webhook/image7.png" alt="" width="600px">
 
設定ファイル、exeが `C:\Program Files (x86)\Common Files\monitoring` に登録されます。
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/monitoring_webhook/image8.png" alt="" width="400px"> 

 

<a class="anchor" id="anchor4"></a>

# 監視対象フォルダ設定
ファイルサーバーに接続して、ユーザー名、パスワードを入力、このとき、**「資格情報を記憶する」にチェックを入れます。** 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/monitoring_webhook/image11.png" alt="" width="400px">
 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/monitoring_webhook/image9.png" alt="" width="400px">
 
option.exeを起動して、先ほど接続したファイルサーバーのフォルダを指定します。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/monitoring_webhook/image10.png" alt="" width="500px">
 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/monitoring_webhook/image12.png" alt="" width="500px">
 
「Folder Monitoring Service」のプロパティ→ログオン→アカウントで、**ファイルサーバーに接続したユーザー（今操作しているユーザー）のアカウント名、パスワード**を入力し、OKをクリックします。 

<blockquote class="warn">
このときに登録するのは、ファイルサーバーへの接続に必要なユーザー名、パスワードではありません。そちらは、「資格情報を記憶する」に記憶されています。
</blockquote>

<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/monitoring_webhook/image13.png" alt="" width="500px">
 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/monitoring_webhook/image14.png" alt="" width="500px">
 
サービスを再起動します。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/monitoring_webhook/image15.png" alt="" width="500px">
 

 

<a class="anchor" id="anchor5"></a>

# WebHook URLの設定
config.iniを開いて、WebHook URLをRocket.Chatで取得したURLに書き換えます。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/monitoring_webhook/image16.png" alt="" width="600px">
 
.jsonファイルは、通知内容が書かれています。これを書き換えると、通知内容を変えられる仕様にしましたが、このままにします。
 

`FileRenamed.jsonの例`
```json
{
	"username": "ファイル名変更",
	"text": "ファイル名を '%%OLD_FULL_PATH%%' から '%%NAME%%' へ変更しました。"
}
```
⇒受け手がRocket.Chat以外でも問題無いように可変仕様にしましたが、今回は、この内容で目的は達成できます。

 

<a class="anchor" id="anchor6"></a>

# 動作確認
準備が整ったため、監視対象フォルダにファイルを置いてみます。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/monitoring_webhook/filecreate.gif" alt="">
 
監視アプリ→WebHook→Rocket.Chat へ通知が来て、投稿されました。 
さらに、「<a href="https://itc-engineering-blog.netlify.app/blogs/dikzpvtybk" target="_blank">GitLab,Wekan→Rocket.Chat→SlackのWebHook</a>」のRocket.Chat→Slackの設定をしている場合、Slackにも同じ内容が投稿されます。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/monitoring_webhook/image17.png" alt="">
 
ファイルを更新します。（上書き保存） 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/monitoring_webhook/fileupdate.gif" alt="">
 
ファイルをリネームします。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/monitoring_webhook/filerename.gif" alt="">
 
ファイルを削除します。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/monitoring_webhook/filedelete.gif" alt="">
 
フォルダを作成します。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/monitoring_webhook/foldercreate.gif" alt="">
 
フォルダをリネームします。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/monitoring_webhook/folderrename.gif" alt="">
 
フォルダを削除します。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/monitoring_webhook/folderdelete.gif" alt="">
 

できました！

弊社では社内のアクティビティを可視化するために、GitLab,Wekanの操作をWebHookを使って通知しています。 詳細は、別記事「GitLab,Wekan→Rocket.Chat→SlackのWebHook」にアップ済みです。 これと同じようにファイル／フォルダの追加更新削除をWebHookを使って通知するアプリ（サービス）を作成しましたので、概要を説明します。

ファイル／フォルダの追加更新削除をWebHookを使って通知するアプリ

# はじめに
弊社のWebサイト(<a href="https://itccorporation.jp" target="_blank">https://itccorporation.jp</a>)は、Next.js、ヘッドレスCMSのStrapiを使って、生成した静的Webサイトです。
※用語については、下にまとめて簡単に解説があります。

図で示すと、以下のようになっています。

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/kousei.svg)

<a href="https://itccorporation.jp" target="_blank">https://itccorporation.jp</a>のソースコードは、GitHubにあります。(<a href="https://github.com/itc-lab/itccorporation" target="_blank">https://github.com/itc-lab/itccorporation</a>)
今回は、このソースコードを使い、静的Webサイトを生成するところまでやっていきたいと思います。

<blockquote class="alert">
Webサーバー（上の図で言うと一番右）のところの解説は省略します。
</blockquote>

 

・[Node.jsインストール](#anchor1) 
・[Strapiインストール](#anchor2) 
・[Webサイトソースコードの配置](#anchor3) 
・[Strapi初期設定](#anchor4) 
・[Strapiでデータスキーマ作成](#anchor5) 
・[Strapiでデータ登録](#anchor6) 
・[GraphQL有効化](#anchor7) 
・[Webサーバーへデプロイ](#anchor8) 

 

<blockquote class="info">
【 Next.js 】
「Next.js」とは、Vercel社が開発したReactのフレームワークです。
Static Site Generator（SSG）・静的サイトジェネレーターとしての役割を果たします。
</blockquote>

<blockquote class="alert">
Next.jsのnext/image(Imageコンポーネント)による画像最適化を使う場合、VercelにデプロイするかCloudinaryなどの外部CDNを使う必要があります。※2021/07現在
</blockquote>

<blockquote class="info">
【 React 】
「React」とは、Facebook社が開発したJavaScriptのフレームワークです。
コンポーネントと呼ばれる部品（ＵＩ・画面の一部分）ごとに開発ができます。画面更新の際、差分を検出して差分だけ更新するため、動作が速いという特徴があります。
</blockquote>

<blockquote class="info">
【 静的Webサイト 】
決まった内容を表示するだけのサイトです。ユーザーによって画面が切り替わったり、入力内容によって切り替わったり、サーバー側に何らかの処理が必要な場合は動的Webサイトになります。
</blockquote>

<blockquote class="info">
【 ヘッドレスCMS 】
まず、「CMS」とは、WordPressのように全体の枠（決まったデザイン）ができあがっていて、その中に記事を書き込みできるなどのコンテンツの管理システムの事です。「ヘッドレスCMS」とは、全体の枠（決まったデザイン）が無く、記事の内容（コンテンツ）だけを登録し、APIによって取り出されるというものです。ヘッドレスCMSの場合、その都度デザインを作らないといけませんが、反面、自由です。ヘッドレスCMS提供サービスは、Contentful、microCMS、Strapi、などいろいろあります。
</blockquote>

<blockquote class="info">
【 Strapi 】
ヘッドレスCMSの一つですが、クラウドのWebサービスのみならず、ソースコードが公開されているため、それを利用し、自分が管理しているサーバーにヘッドレスCMS、APIを構築できます。
</blockquote>

 

<blockquote class="warn">
今回の検証環境は、
<code>Ubuntu 20.04.2 LTS</code>
<code>node v14.17.2</code>
になります。
</blockquote>

<blockquote class="alert">
ソースコードの解説は行いません。
Google reCAPTCHAは、設定済みで、キーは取得済みとします。
</blockquote>

 

<a class="anchor" id="anchor1"></a>

# Node.jsインストール

<blockquote class="warn">
root権限で作業していますので、全てsudoは省略しています。
</blockquote>

パッケージを最新にします。※必須ではありません。

```sh
# apt update
# apt upgrade
Do you want to continue? [Y/n]Y
```
※以降基本的にYのため、-yを付けます。 
　-y は、? [Y/n]: のようなときに自動的に y とするオプションです。

 

curlをインストールします。

```sh
# apt install -y curl
```

 

node 14.x をインストールします。

```sh
# curl -sL https://deb.nodesource.com/setup_14.x -o nodesource_setup.sh
# bash nodesource_setup.sh
# apt install -y nodejs
# node -v
v14.17.2
```

<blockquote class="info">
<code>node</code>のバージョンはインストール時期によって異なります。
</blockquote>

<blockquote class="info">
Node.jsのパッケージ管理システム<code>npm</code>も同時にインストールされます。
</blockquote>

 

<a class="anchor" id="anchor2"></a>

# Strapiインストール

空の状態のStrapiをインストールします。 
今回、`/home/admin/mycorporation_backend`にインストールします。

```sh
# cd /home/admin
# npx create-strapi-app mycorporation_backend --quickstart
→そのまま起動してくるため、CTRL+Cで停止
```

<blockquote class="info">
【 npx 】
<code>npm</code>で管理されたプログラムの一つです。<code>npx</code>を使うと、オンメモリで依存関係を解決した状態で、引数に指定したプログラムを実行できます。ディスクを汚さず、一度きりしか実行しないプログラムを実行するのに向いています。
</blockquote>

 

<a class="anchor" id="anchor3"></a>

# Webサイトソースコードの配置
## ソースコード展開
<a href="https://github.com/itc-lab/itccorporation" target="_blank">https://github.com/itc-lab/itccorporation</a> からソースコードをダウンロードして、独自プロジェクトとします。 
Code → Download ZIP で itccorporation-master.zip をダウンロードします。

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image1.png)

 

ソースコードを展開し、ディレクトリをリネームします。 
※ここでは、`/home/admin/mycorporation_frontend`とします。

```sh
# cd /home/admin
# unzip itccorporation-master.zip
# mv itccorporation-master mycorporation_frontend
# cd mycorporation_frontend
```

 

## 環境変数変更
環境変数を自分の環境に合わせます。

```sh
# cp .env.local.example .env.local
# vi .env.local
GRAPHQL_API=http://localhost:1337/graphql
NEXT_PUBLIC_RECAPTCHA_SITE_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
```

 

**GRAPHQL_API** 
今回、1337ポートで動くStrapiの機能を利用するため、`http://localhost:1337/graphql` のままにします。

 

**NEXT_PUBLIC_RECAPTCHA_SITE_KEY** 
Google reCAPTCHAの「サイトキーをコピーする」に表示される文字列です。

<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image2.png" alt="" width="600px">

 

## 環境変数変更
以下の図のようにシンボリックリンクを作成します。 
`uploads`ディレクトリは、Strapiからアップロードした画像ファイルが格納されるディレクトリになります。

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/symlink.svg)

```sh
# ln -s /home/admin/mycorporation_backend/public/uploads public/uploads
```

 

<a class="anchor" id="anchor4"></a>

# Strapi初期設定

Strapiを起動します。

```sh
# cd /home/admin/mycorporation_backend
# npm run develop
```

何も設定変更していない時は、1337ポートで起動します。 
ブラウザから `http://[Strapiを起動したサーバーのIPアドレス]:1337` にて、アクセスします。

「Create the first administrator」をクリックします。
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image3.png" alt="" width="600px">
 
「First name」「Last name」「Email」「Password」「Confirmation Password」を入力し、「LET'S START」をクリックします。
※「Email」は、ログインＩＤに使われます。メールの設定をしない場合、メールは送信されません。
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image4.png" alt="" width="600px">
 

 

<a class="anchor" id="anchor5"></a>

# Strapiでデータスキーマ作成
Strapiでスキーマ（空のテーブル）を作成していきます。 
 
「Content-Types Builder」をクリックします。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image5.png" alt="" width="600px">
 
「＋Create new collection type」をクリックします。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image6.png" alt="" width="600px">
 
「Display name」のところに "Available" と入力し、「Continue」ボタンをクリックします。 
→ＤＢで言うAvailableテーブルを作成するイメージです。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image7.png" alt="" width="600px">
 
「Text」をクリックします。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image8.png" alt="" width="600px">
 
「Name」のところに "name" と入力し、「Short text」にチェックを入れて、「＋ Add another field」ボタンをクリックします。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image9.png" alt="" width="600px">
 
「Media」をクリックします。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image10.png" alt="" width="600px">
 
「Name」のところに "logo" と入力し、「Single media」にチェックを入れて、「＋ Add another field」ボタンをクリックします。 
→単一画像を登録できるフィールドになります。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image11.png" alt="" width="600px">
 
・・・以降、下記の[スキーマ](#schema)の通りに作成します。 
（Textは全て「Short text」、Mediaは全て「Single media」です。） 
 
Relationのところは、以下のように、左側に "seo_Images" を入力して、右矢印が複数のアイコンを選択、右側で Seo-Image を選択します。 
→これにより、OpenGraphテーブルのseo_imagesフィールドは、Seo-Imagesテーブルの複数のデータに紐づけが可能になります。
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image12.png" alt="" width="600px">
 
Twitterは、「SINGLE TYPE」→「Create new single type」で作成します。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image13.png" alt="" width="600px">
 

<a class="anchor" id="schema"></a>

スキーマ 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image14.png" alt="" width="300px">

 

<a class="anchor" id="anchor6"></a>

# Strapiでデータ登録
データを登録していきます。 
 
「Availales」をクリックし、「Add New Availables」をクリックします。※作ったのは「Available」テーブルですが、自動的に複数形表示になります。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image40.png" alt="" width="600px">
 
「Name」：Strapi 
「Description」：ストラピ 
「Priority」：1 
「Logo」：Strapiのロゴ画像をドラッグ＆ドロップ
とし、「Save」ボタンをクリックします。
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image15.png" alt="" width="600px">
 
「Publish」ボタンをクリックします。 
→「Publish」ボタンを押さないと有効化されませんので、毎回忘れずに押します。
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image16.png" alt="" width="600px">
 
他、以下のように登録していきます。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image17.png" alt="" width="500px"> 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image18.png" alt="" width="500px"> 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image19.png" alt="" width="500px"> 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image20.png" alt="" width="500px"> 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image21.png" alt="" width="500px"> 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image22.png" alt="" width="500px"> 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image23.png" alt="" width="500px"> 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image24.png" alt="" width="500px"> 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image25.png" alt="" width="500px"> 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image26.png" alt="" width="500px"> 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image27.png" alt="" width="500px"> 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image28.png" alt="" width="500px"> 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image29.png" alt="" width="500px"> 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image30.png" alt="" width="500px"> 
OpenGraphsの「Seo_images」のところですが、Seo-imageテーブルのデータと紐づけるため、選択します。（複数選択可能です。） 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image31.png" alt="" width="300px">
 

 

<a class="anchor" id="anchor7"></a>

# GraphQL有効化
## GraphQLインストール
<blockquote class="info">
【 GraphQL 】
「GraphQL」とは、Facebookにより開発されたAPI用のクエリ言語です。似たものとして、「REST」がありますが、「GraphQL」の方は、"全部"では無く、"これとこれとこれ"という感じで、あらかじめ対象データを指定して、命令を出せるという特徴があります。
</blockquote>

「Marketplace」をクリックし、「GRAPHQL」のところの「Download」ボタンをクリックします。 
→しばらくすると、StrapiにGraphQL機能が組み込まれます。
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image32.png" alt="" width="600px">
 

http://[StrapiのサーバーIPアドレス]/graphql
にアクセスすると、クエリを発行してテストすることができます。
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image33.png" alt="" width="600px">
 
→この時点では、「Forbidden」が返り、うまくいきません。Strapi側のアクセス権の設定が必要です。

 

## アクセス権の設定
「Settings」→「Roles」→「Public」をクリックします。
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image34.png" alt="" width="600px">
 
「find」、「findone」チェックボックス全てにチェックを入れて、「Save」ボタンをクリックします。
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image35.png" alt="" width="600px">
 
再び、`http://[StrapiのサーバーIPアドレス]/graphql` にアクセスし、クエリを実行すると、データが取り出せることが確認できます。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image39.png" alt="" width="600px">
 

 

## 動作確認

<blockquote class="warn">
Strapiが起動（<code>npm run develop</code>）したままで下記の実施が必要です。起動していない場合、データの取り出しに失敗します。
</blockquote>

Webサイトのプログラムの方へ戻って、`npm install`を実行します。 
→これにより、`package.json`に書かれた必要なもの全てが自動的にインストールされます。

```sh
# cd /home/admin/mycorporation_frontend
# npm install
```

インストールが終わったら、起動します。

```sh
# npm run dev
```

 

`http://[IPアドレス]:3000/` でアクセスします。

 

<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image36.png" alt="" width="500px"> 
 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image37.png" alt="" width="500px"> 
 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image38.png" alt="" width="500px"> 

 

表示されました！

 

<a class="anchor" id="anchor8"></a>

# Webサーバーへデプロイ

Webサーバーへデプロイは簡単です。

```sh
# npm run build
```

を実行すると、カレントディレクトリに out ディレクトリができますので、これをドキュメントルートへ移動するだけになります。 
→例えば、`mv out /var/www/html` のようにWebサーバーが参照する場所に置くだけになります。 

 

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/kousei.svg)

 

`https://[WebサイトのFQDN]/` でアクセスします。

 

<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image36.png" alt="" width="500px"> 

 

できました！

弊社のWebサイト(https://itccorporation.jp)は、Next.js、ヘッドレスCMSのStrapiを使って、生成した静的Webサイトです。 ※用語については、下にまとめて簡単に解説があります。 図で示すと、以下のようになっています。 https://itccorporation.jpのソースコードは、GitHubにあります。(https://github.com/itc-lab/itccorporation) 今回は、このソースコードを使い、静的Webサイトを生成するところまでやっていきたいと思います。 Webサーバー（上の図で言うと一番右）のところの解説は省略します。 ・Node.jsインストール ・Strapiインストール ・Webサイトソースコードの配置 ・Strapi初期設定 ・Strapiでデータスキーマ作成 ・Strapiでデータ登録 ・GraphQL有効化 ・Webサーバーへデプロイ

StrapiとNext.jsを使って静的ウェブサイトを構築

# はじめに
Web拡張機能で、Native Messaging という技術があります。
Native Messaging を使用すると、拡張機能とネイティブアプリケーション（Windowsの場合、exe）間でデータのやり取りが可能になります。

<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/kousei.svg" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/kousei.svg" alt="" loading="lazy" style="margin-top: 5px;"></a>
 
今回、Native Messaging 機能を利用したexeと拡張機能のお試し版を作成しましたので、仕組みをご紹介していきます。

<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/DL_Chrome.gif" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/DL_Chrome.gif" alt="" loading="lazy"></a>

 

・[動作内容](#anchor1) 
・[ネイティブアプリインストール](#anchor2) 
・[Chrome拡張機能インストール](#anchor3) 
・[Chrome動作確認](#anchor4) 
・[Firefox拡張機能インストール](#anchor5) 
・[Firefox動作確認](#anchor6) 
・[Chrome公式サンプル](#anchor7) 

 

<blockquote class="warn">
今回の検証環境は、
<code>Windows 10 Pro(x64)</code>
<code>Chrome: 91.0.4472.114（Official Build） （64 ビット）</code>
<code>Microsoft Edge: 91.0.864.59 (公式ビルド) (64 ビット)</code>
<code>Firefox Developer: 90.0b12 (64 ビット)</code>
<code>python 2.7.18</code>
になります。
</blockquote>

 

**【ブラウザ・拡張機能の限界】** 
・「名前を付けて保存」はできるが、一つずつ選択になる。（設定で保存先を聞くか聞かないかはできる） 
・拡張機能などでまとめてダウンロードはできるが、設定で決めたダウンロードフォルダにしかダウンロードされない。（設定で保存先を聞くにすると、毎回聞いてくる） 
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/download_normal1.gif" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/download_normal1.gif" alt="" loading="lazy"></a> 
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/download_normal2.gif" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/download_normal2.gif" alt="" loading="lazy"></a> 
・exeなどをダウンロードすると、警告が表示されて、ユーザーへの確認が行われる。 
↓ 
Native Messaging 機能を利用すると・・・ 
↓ 
**【exeがやれることはできる】** 
・フォルダ選択画面を表示して、まとめてダウンロードできる。 
・上書きダイアログなどのインターフェイスのカスタムもできる。 
・exeの実装次第。 

<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/uwagaki.gif" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/uwagaki.gif" alt="" width="450px" loading="lazy"></a> 
 

| 動作内容 | JS | 拡張機能 | Native Messaging |
| ---- | ---- | ---- | ---- |
| ダウンロード | ✔ | ✔ | ✔ |
| まとめてダウンロード | ❌ | ✔ | ✔ |
| ユーザー選択してまとめてダウンロード | ❌ | ❌ | ✔ |
| exeを起動 | ❌ | ❌ | ✔ |
| DVDのトレイを開ける | ❌ | ❌ | ✔ |
| アプリ側でＱＲコード解析（録画データ解析） | ❌ | ❌ | ✔ |
 
 
 

<a class="anchor" id="anchor1"></a>

# 動作内容
Native Messaging 機能を利用した試作アプリの動作内容を先出しすると、以下の動作内容になります。 

<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/dousanaiyou.svg" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/dousanaiyou.svg" alt="" loading="lazy" style="margin-top: 7px;"></a> 

 

JavaScriptでnativemesssampleLaunchAppイベントを発火 
↓ 
nativemesssampleLaunchAppイベントを拡張機能が検知 
↓ 
var port = chrome.runtime.connectNative( 'nativemesssample' );でアプリに接続 
※nativemesssampleはアプリの名前（アプリ側manifest.jsonに名前が登録されている） 
↓ 
port.postMessage( request.message ); 
でダウンロードするべきファイル等のパラメータをアプリに渡す 
※保存されるファイル名は、ここで渡すパラメータ次第 
↓ 
アプリが保存先ダイアログを表示 
↓ 
ユーザーが保存先を選んだらダウンロード 
（GET /ファイル名） 
↓ 
ダウンロードし終わったら、アプリから拡張機能にメッセージを送信 
↓ 
アプリ - 拡張機能の接続を切断 

 

<a class="anchor" id="anchor2"></a>

# ネイティブアプリインストール 
msiをダブルクリックしてインストールします。 
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image1.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image1.png" alt="" width="300px" loading="lazy"></a>
 
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image2.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image2.png" alt="" width="400px" loading="lazy"></a>
 
アプリとして登録されます。
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image3.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image3.png" alt="" width="400px" loading="lazy"></a>
 
C:\Users\[ユーザー名]\AppData\Local\nativemesssample\nativemesssample.exe 
が登録されますが、nativemesssample.exe を起動しても何も起きません。 
 
レジストリに 
**【Chrome用】** 
**キー：** コンピューター\HKEY_CURRENT_USER\SOFTWARE\Google\Chrome\NativeMessagingHosts\nativemesssample 
**値：** C:\Users\admin\AppData\Local\nativemesssample\Chrome\manifest.json 
 
**【Firefox用】** 
**キー：** コンピューター\HKEY_CURRENT_USER\SOFTWARE\Mozilla\NativeMessagingHosts\nativemesssample 
**値：** C:\Users\admin\AppData\Local\nativemesssample\Mozilla\manifest.json 
が追加されます。 
 
値のmanifest.jsonは、ネイティブアプリ側の定義ファイルです。 
 

`Chrome\manifest.json`

```json
{
 "name": "nativemesssample",
 "description": "Native Message Example.",
 "path": "..\\nativemesssample.exe",
 "type": "stdio",
 "allowed_origins": ["chrome-extension://egddaljlhmaflljhmfhkdhlhcmbkmdih/"]
}
```

 

`Mozilla\manifest.json`

```json
{
	"name": "nativemesssample",
	"description": "Native Message Example.",
	"path": "..\\nativemesssample.exe",
	"type": "stdio",
	"allowed_extensions": ["nativemesssample@itccorporation.jp"]
}
```

 

<a class="anchor" id="anchor3"></a>

# Chrome拡張機能インストール

<blockquote class="warn">
開発中の手順です。正規プロダクトの手順とは異なります。
</blockquote>

<blockquote class="warn">
Edge(Chromium)も同じような手順でできましたので、Edge(Chromium)の説明は省略します。
</blockquote>

設定→拡張機能 
もしくは、 
`chrome://extensions/`
をURL欄に入力します。 
 
デベロッパーモードをONにして、 
「パッケージ化されていない拡張機能を読み込む」 
で読み込みます。 
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image4.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image4.png" alt="" width="600px" loading="lazy"></a>
 
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image5.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image5.png" alt="" width="400px" loading="lazy"></a>
 
（ここで選択するのは、拡張機能のmanifest.jsonがあるフォルダになります。） 
 
ここで、拡張機能のＩＤが表示されます。 
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image6.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image6.png" alt="" width="600px" loading="lazy"></a>
 
先ほど、ネイティブアプリのインストールで見た 
<code>C:\Users\admin\AppData\Local\nativemesssample\Chrome\manifest.json</code> 
の allowed_origins の値と合っていないと動作しません。 
（ネイティブアプリ側が拡張機能からの通信を拒絶します。） 

 

<a class="anchor" id="anchor4"></a>

# Chrome動作確認
ApacheやNginx等のWebサーバー経由で参照できるように以下のようにファイル（HTML,js,ダウンロード対象ファイル）を配置します。 

```sh
# find /var/www/html/
/var/www/html/
/var/www/html/jquery-1.8.3.min.js
/var/www/html/ExcelWorkSheet10.xlsx
/var/www/html/ExcelWorkSheet7.xlsx
/var/www/html/nativemesssample.html
/var/www/html/ExcelWorkSheet1.xlsx
/var/www/html/ExcelWorkSheet2.xlsx
/var/www/html/ExcelWorkSheet6.xlsx
/var/www/html/ExcelWorkSheet5.xlsx
/var/www/html/ExcelWorkSheet9.xlsx
/var/www/html/ExcelWorkSheet8.xlsx
/var/www/html/ExcelWorkSheet3.xlsx
/var/www/html/ExcelWorkSheet4.xlsx
```

`http://[Webサーバー]/nativemesssample.html`
へアクセスします。 
 
Downloadボタンを押して、ネイティブアプリ（保存先選択画面）を起動し、ダウンロードします。 

<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/DL_Chrome.gif" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/DL_Chrome.gif" alt="" loading="lazy"></a>

チェックしたファイルが選択したフォルダにダウンロードされます。 

 

<a class="anchor" id="anchor5"></a>

# Firefox拡張機能インストール

<blockquote class="warn">
開発中の手順です。正規プロダクトの手順とは異なります。
署名されていない拡張機能の場合、「Firefox Developer」「Firefox Nightly」どちらかが必要です。
</blockquote>

URL欄に `about:config` と入力します。 
「危険を承知の上で使用する」をクリックします。 
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image7.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image7.png" alt="" loading="lazy"></a>
 
「設定名を検索」のところに `xpinstall.signatures.required` と入力します。 
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image8.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image8.png" alt="" loading="lazy"></a>
 
右にある切り替えボタンをクリックして、`false`へ切り替えます。
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image9.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image9.png" alt="" loading="lazy"></a>
 
「アドオンとテーマ」を開きます。 
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image10.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image10.png" alt="" loading="lazy"></a>
 
「拡張機能」をクリックします。
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image11.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image11.png" alt="" loading="lazy"></a>
 
アドオンのzipをドラッグ＆ドロップします。 
警告が表示されますが、「追加」をクリックします。 

<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/FirefoxAddon.gif" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/FirefoxAddon.gif" alt="" loading="lazy"></a>

 

Firefoxの方は、 
拡張機能側のmanifest.json（先ほどドラッグ＆ドロップしたzipの中に有ります。） 
と 
先ほど、ネイティブアプリのインストールで見た 
`C:\Users\admin\AppData\Local\nativemesssample\Mozilla\manifest.json`
の allowed_extensions の値と合っていないと動作しません。 

 

`拡張機能側のmanifest.json`

```json
	"applications": {
		"gecko": {
			"id": "nativemesssample@itccorporation.jp",
```


 

<a class="anchor" id="anchor6"></a>

# Firefox動作確認

`http://[Webサーバー]/nativemesssample.html` へアクセスします。 
 
Downloadボタンを押して、ネイティブアプリ（保存先選択画面）を起動し、ダウンロードします。 
このとき、アクセスするhtml,js、起動するアプリはChromeのときと同じものになります。 

<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/DL_Firefox.gif" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/DL_Firefox.gif" alt="" loading="lazy"></a>

チェックしたファイルが選択したフォルダにダウンロードされます。 

 

<a class="anchor" id="anchor7"></a>

# Chrome公式サンプル
GoogleChrome公式サンプル（<a href="https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/mv2-archive/api/nativeMessaging" target="_blank">GoogleChrome/chrome-extensions-samples(GitHub)</a>）があるのを見つけました。 
こちらは、以下のようになっています。

<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/dousanaiyou2.svg" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/dousanaiyou2.svg" alt="" loading="lazy" style="margin-top: 7px;margin-bottom: 3px;"></a> 

特にネイティブアプリケーションじゃないとできないことはやっていないですが、ブラウザ - ネイティブアプリ間の通信の様子が実際に体験できます。 

 

## インストール

<blockquote class="warn">
Python 2.* がインストールされていて、パスが通っているものとします。</stron>Python 2.*のインストールの説明は省略します。
</blockquote>

<blockquote class="warn">
Edge(Chromium)も同じような手順でできましたので、Edge(Chromium)の説明は省略します。
</blockquote>

install_host.bat をダブルクリックします。 
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image12.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image12.png" alt="" width="350px" loading="lazy"></a>
 
**キー：** コンピューター\HKEY_CURRENT_USER\SOFTWARE\Google\Chrome\NativeMessagingHosts\com.google.chrome.example.echo 
**値：** C:\Users\admin\Desktop\nativeMessaging\host\com.google.chrome.example.echo-win.json 
が追加されます。

<blockquote class="warn">
C:\Users\admin\Desktop\nativeMessaging\host
までは、ダブルクリックしたフォルダになりますので、以降、hostフォルダの位置を変えると動かなくなります。
</blockquote>

<blockquote class="info">
appフォルダ： 拡張機能Googleアプリ
hostフォルダ： Python2で動作するネイティブアプリケーション
です。
</blockquote>

 

設定→拡張機能 
もしくは、 
`chrome://extensions/` 
をURL欄に入力します。 
 
デベロッパーモードをONにして、 
「パッケージ化されていない拡張機能を読み込む」 
で読み込みます。 

<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image13.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image13.png" alt="" width="400px" loading="lazy"></a> 
（ここで選択するのは、拡張機能のmanifest.jsonがあるappフォルダになります。） 

 

## 動作確認
URL欄に `chrome://apps/` を入力します。 
Native Messaging Example のアイコンをクリックします。 
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image14.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image14.png" alt="" width="600px" loading="lazy"></a> 
 
「Connect」ボタンを押すと、アプリが起動してきます。 
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image15.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image15.png" alt="" width="600px" loading="lazy"></a> 
↓ 
ブラウザ側："ping" 
アプリ側："pong" 
と入力すると、お互いの入力内容が画面に反映されます。 

<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/ping_pong.gif" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/ping_pong.gif" alt="" loading="lazy"></a>
 
 
 
できました！

Web拡張機能で、Native Messaging という技術があります。 Native Messaging を使用すると、拡張機能とネイティブアプリケーション（Windowsの場合、exe）間でデータのやり取りが可能になります。 今回、Native Messaging 機能を利用したexeと拡張機能のお試し版を作成しましたので、仕組みをご紹介していきます。 ・動作内容 ・ネイティブアプリインストール ・Chrome拡張機能インストール ・Chrome動作確認 ・Firefox拡張機能インストール ・Firefox動作確認 ・Chrome公式サンプル

Native Messagingのexeを試作してみた(Chrome,Firefox,Edge拡張機能)

# はじめに
ラズベリーパイとセンサーを組み合わせて温度、湿度、気圧のデータを取得しWeb画面にグラフを表示するシステムを構築しました。
いわゆる IoT です。 
 
前回の「<a href="https://itc-engineering-blog.netlify.app/blogs/pelfuqnq5o" target="_blank">Raspberry Pi 4に温湿度気圧センサBME280を取り付けてデータをLCD 1602Aに表示する</a>」は、センターとLCDの取り付け、単体動作確認まででしたが、今回は、<a href="https://github.com/itc-lab/wiringpi-php8" target="_blank">wiringpi-php8</a>を使用して、phpプログラムでデータを取り出して記録→Web画面にグラフを表示までやっていきます。

<blockquote class="warn">
【 wiringpi-php8 】
php8対応wiringpiです。wiringpi（ワイヤリングパイ）とは、GPIOを操作するライブラリです。C言語、Pythonには有りますが、php8に対応したものが無かったため、作成し、githubに公開しました。php7対応版（<a href="https://github.com/itc-lab/wiringpi-php7" target="_blank">wiringpi-php7</a>）もあります。
</blockquote>

 

・[環境構築 - apache2インストール](#anchor1) 
・[環境構築 - phpインストール](#anchor2) 
・[wiringpi-php8 インストール](#anchor3) 
・[wiringpi-php8 動作確認](#anchor4) 
・[Web画面にグラフを表示](#anchor5) 
・[複数のノードに対応](#anchor6) 

 

<blockquote class="warn">
今回の検証環境は、
<code>LABISTS Raspberry Pi 4 STARTER KIT</code>
<code>Raspbian GNU/Linux 10 (buster)</code>
<code>Python 2.7.16</code>
<code>温湿度気圧センサBME280</code>
<code>LCD 1602A</code>
<code>gpio(wiringpi) 2.52</code>
<code>Apache 2.4.38</code>
<code>PHP 8.0.7</code>
になります。
</blockquote>

 

<a class="anchor" id="anchor1"></a>

# 環境構築 - apache2インストール
ラズパイ本体にWebサーバーapache2をインストールします。まずは、以下の状況を目指します。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4-2/kousei1.png" alt="" width="600px">
 

```sh
$ sudo passwd root
$ su
# apt update
# apt install apache2
```

<blockquote class="warn">
以降、sudoを省略し、root権限でコマンドを入力しているものとします。<code>apt install</code>には-yを付けて、<code>? [Y/n]</code>のような確認は省略します。
</blockquote>

 

`/var/www/html/index.html` が自動的に作成されますので、 
`http://[ラズパイのIPアドレス]/` 
にアクセスします。 

<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4-2/image1.png" alt="" width="600px">
 

⇒Apache2 Debian Default Pageが表示されればＯＫです。 

 

<a class="anchor" id="anchor2"></a>

# 環境構築 - phpインストール
## php8インストール
PHP 8のパッケージは、DEB.SURY.ORG リポジトリにあるため、DEB.SURY.ORG リポジトリをインストールします。 

```sh
# apt update
# apt install -y lsb-release ca-certificates apt-transport-https software-properties-common
```

<blockquote class="info">
<code>lsb-release</code> コマンドは、OS(Linux)のバージョン番号、リリース コード名、ディストリビューター ID などの情報（LSB = Linux Standard Base）を返すコマンドです。
<code>apt-transport-https</code> は、aptのhttps通信対応版です。
<code>ca-certificates</code> は、<code>apt-transport-https</code> のSSL通信に必要です。</code>
<code>software-properties-common</code> は、サードパーティーのパッケージ、個人開発パッケージPPA(Personal Package Archive)を管理するツール類になります。</code>
</blockquote>

 

APTリポジトリにPHPパッケージの情報を追加します。 

```sh
# echo "deb https://packages.sury.org/php/ $(lsb_release -sc) main" > /etc/apt/sources.list.d/sury-php.list
```

 

APT署名をダウンロードして、登録します。→apt.gpgは、phpパッケージが改ざんされていないか確認するものです。 

```sh
# wget -qO - https://packages.sury.org/php/apt.gpg | apt-key add -
```

<blockquote class="info">
<code>-O</code> : ダウンロードファイルの保存先です。ファイル名を - とすると、ファイルに保存せずに標準出力されます。
<code>-q</code> : 進捗などの詳細表示を表示しないようにします。
</blockquote>

 

```sh
# apt update
# apt upgrade -y
# apt install -y php8.0
# php -v
PHP 8.0.7 (cli) (built: Jun 4 2021 23:17:30) ( NTS )
Copyright (c) The PHP Group
Zend Engine v4.0.7, Copyright (c) Zend Technologies
 with Zend OPcache v8.0.7, Copyright (c), by Zend Technologies
```

時期によりバージョンは一致しないかもしれませんが、PHP 8.0.*であれば、インストール成功です。 
phpモジュールを追加するときは、以下のようにインストールしますが、今回特に必要無いため、実行せず、進めます。 
`# apt install -y php8.0-{mysql,cli,common,imap,ldap,xml,fpm,curl,mbstring,zip}` 

 

## php8動作確認
動作確認用にphpファイルを作成します。

```sh
# vi /var/www/html/info.php
```

info.phpは、以下の内容とします。

```php
<?php phpinfo ();?>
```

```sh
# systemctl restart apache2
```

 

`http://[ラズパイのIPアドレス]/info.php` 
にアクセスします。 

<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4-2/image2.png" alt="" width="600px">
 

⇒phpinfoの画面が表示されれば、ＯＫです。 

 

<a class="anchor" id="anchor3"></a>

# wiringpi-php8 インストール
## wiringpi
まずは、wiringpiをインストールします。 

```sh
# cd /tmp
# wget https://project-downloads.drogon.net/wiringpi-latest.deb
# dpkg -i wiringpi-latest.deb
# gpio -v
gpio version: 2.52
Copyright (c) 2012-2018 Gordon Henderson
This is free software with ABSOLUTELY NO WARRANTY.
For details type: gpio -warranty

Raspberry Pi Details:
 Type: Pi 4B, Revision: 02, Memory: 4096MB, Maker: Sony
 * Device tree is enabled.
 *--> Raspberry Pi 4 Model B Rev 1.2
 * This Raspberry Pi supports user-level GPIO access.
```

<blockquote class="info">
<code>dpkg</code>は、ダウンロードしたパッケージを指定してインストールするコマンドです。（RedHat,CentOSの<code>rpm</code>に相当。）
</blockquote>

 

## wiringpi-php8
php8に拡張機能`wiringpi-php8`を組み込みます。

<a href="https://github.com/itc-lab/wiringpi-php8" target="_blank">wiringpi-php8</a> から `wiringpi-php8-main.zip` をダウンロードして、/home/piに置かれているものとします。
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4-2/image3.png" alt="" width="600px">
 

```sh
# cd /home/pi
# unzip wiringpi-php8-main.zip
# cd wiringpi-php8-main
# apt install -y php8.0-dev
# vi /usr/bin/phpize
```

<blockquote class="warn">
今回の環境では、以下のエラーになるため、phpizeの書き換えが必要でした。
<code>/usr/bin/phpize: 1: /usr/bin/phpize: /usr/bin/sed: not found</code>
</blockquote>

```sh
SED="/usr/bin/sed"
↓
SED="/bin/sed"
```

```sh
# phpize
# ./configure
# make && make install
```

<blockquote class="warn">
phpizeとは、拡張モジュールをビルドするビルドツールです。これを使用することにより、PHPをソースから再コンパイルすることなく拡張モジュールをビルドすることができます。
</blockquote>

⇒`/usr/lib/php/20200930/wiringpi.so` ができます。

 

php.iniに拡張モジュールの設定を追加します。 

```sh
# vi /etc/php/8.0/cli/conf.d/wiringpi.ini
```

以下の内容とします。※/etc/php/8.0/cli/php.ini→/etc/php/8.0/cli/conf.d/*.ini の順に読み込まれるため、`wiringpi.ini`に限らず、どこかに書けば良い設定になります。

```sh
extension=wiringpi.so
```

 

apacheのユーザーwww-dataでi2c,gpio,spiデバイスのアクセス権が与えられるようにwww-dataの所属グループを追加します。

```sh
# adduser www-data i2c
# adduser www-data spi
# adduser www-data gpio
```

 

<a class="anchor" id="anchor4"></a>

# wiringpi-php8 動作確認

<a href="https://github.com/itc-lab/wiringpi-php-bme280" target="_blank">wiringpi-php-bme280</a>の `opt/bme280.php` を使って、動作確認をします。 
`opt/bme280.php` は、温湿度気圧センサBME280からデータを取得し、LCD 1602Aに表示すると同時に、/var/log/bme280log/YYYYMMDD.logにデータを記録し続けるプログラムです。 
 
<a href="https://github.com/itc-lab/wiringpi-php-bme280" target="_blank">wiringpi-php-bme280</a> から <code>wiringpi-php-bme280-main.zip</code> をダウンロードして、/home/piに置かれているものとします。
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4-2/image4.png" alt="" width="600px">
 

```sh
# cd /home/pi
# unzip wiringpi-php-bme280-main.zip
# cd /home/pi/wiringpi-php-bme280-main/opt
# chmod 755 bme280.php
# ./bme280.php
```

⇒/var/log/bme280log/YYYYMMDD.log に 

```sh
# tail /var/log/bme280log/20210627.log
date time temp humid press
2021/06/27 17:05:00 26.15 47.05 999.00
2021/06/27 17:10:00 25.79 42.96 998.98
2021/06/27 17:15:00 25.91 46.81 999.21
2021/06/27 17:20:00 26.13 50.05 999.40
```

のように記録されていれば、phpと温湿度気圧センサBME280の動作は、ＯＫです。※５分間隔で記録します。起動して５分後に初めてYYYYMMDD.log に出力されます。

 

<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4-2/php_lcd.gif" alt="">
 
のようにLCDに表示されていれば、phpとLCD 1602Aの動作は、ＯＫです。 

 

ここまででで確認した内容を図示すると、以下になります。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4-2/kousei1.png" alt="" width="600px">

 

止めるときは、以下のコマンドになります。

```sh
# cd /home/pi/wiringpi-php-bme280-main/opt
# ./bme280.php stop
```

 

<a class="anchor" id="anchor5"></a>

# Web画面にグラフを表示
グラフ表示用にプログラムを配置します。
```sh
# cd /home/pi/wiringpi-php-bme280-main
# cp -r html/* /var/www/html/.
```

 
ここまでで以下の配置になるはずです。

```sh
# find /var/www/html -type f
/var/www/html/index.html
/var/www/html/info.php
/var/www/html/bme280.html
/var/www/html/js/jquery.flot.tooltip.min.js
/var/www/html/js/jquery-1.8.3.min.js
/var/www/html/js/excanvas.min.js
/var/www/html/js/jquery.flot.min.js
/var/www/html/js/jquery.flot.crosshair.min.js
/var/www/html/getlogdata.php
```

 
以下のような流れで、グラフを表示します。 

 

`http://[ラズパイのIPアドレス]/bme280.html` をブラウザで表示 
↓ 
jQueryのajaxで 
`http://[ラズパイのIPアドレス]/getlogdata.php` にアクセス 
↓ 
[ラズパイのIPアドレス] の /var/www/html/getlogdata.php が /var/log/bme280log/YYYYMMDD.log を読み取って、jsonを返す。 
↓ 
ブラウザにjsonデータが返ってきて、/js/jquery.flot.min.jsでグラフ描画 
グラフ上にマウスホバーすると、/js/jquery.flot.tooltip.min.jsで値を表示 
 
構成を図示すると、以下です。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4-2/kousei2.svg" alt="" width="600px"> 
 

`http://[ラズパイのIPアドレス]/bme280.html` にアクセスしてみます。

<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4-2/image5.png" alt="" width="600px">
 

表示されました！

 

<a class="anchor" id="anchor6"></a>

# 複数のノードに対応
以下の構成にして複数のノード（ラズパイ＋センサ）の結果を一画面に表示します。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4-2/kousei3.svg" alt="">
 

## インストール - ラズパイ２台とも
ノード（ラズパイ＋センサ）を作成します。（今回は２台） 
以下の構成にしてデータ収集と応答だけに特化します。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4-2/kousei4.svg" alt="">
 

上述の手順の通り、
apache、php、wiringpi-php8をインストールして、<a href="https://github.com/itc-lab/wiringpi-php-bme280" target="_blank">wiringpi-php-bme280</a> から <code>wiringpi-php-bme280-main.zip</code> をダウンロードして、/home/piに置かれているものとします。
 

```sh
# cd /home/pi
# unzip wiringpi-php-bme280-main.zip
# cd /home/pi/wiringpi-php-bme280-main/opt
# chmod 755 bme280.php
# ./bme280.php
```

```sh
# cd /home/pi/wiringpi-php-bme280-main
# cp html/getlogdata.php /var/www/html/
```

```sh
# curl -X POST --data "TYPE=CURRENT" http://localhost/getlogdata.php
{"datetime":"2021\/06\/27 18:37:13","temp":"26.14","humid":"49.15","press":"999.71"}
```
のように現在値が返ればＯＫです。

 

## インストール - 画面兼中継サーバー
以下の構成にして画面表示とデータ中継を担います。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4-2/kousei5.svg" alt="">
 

Apacheとphpが動作する場合、特に縛りは無いですが・・・ 
分かりやすく、上述の手順の通り、apache、phpがインストール済みとします。（wiringpi-php8は不要です。） 
 
**中継サーバーは、curlの機能を使うため、curlのphp extensionが必要です。**

```sh
# apt install -y php8.0-curl
```

 
<a href="https://github.com/itc-lab/wiringpi-php-bme280" target="_blank">wiringpi-php-bme280</a> から <code>wiringpi-php-bme280-main.zip</code> をダウンロードして、/home/piに置かれているものとします。 

```sh
# cd /home/pi
# unzip wiringpi-php-bme280-main.zip
# cd wiringpi-php-bme280-main
# cp -r html/js /var/www/html/
# cp html_relay/rooms.json /var/www/html/
# cp html_relay/proxyproc.php /var/www/html/
# cp html_relay/bme280s.html /var/www/html/
```

```sh
# vi /var/www/html/rooms.json
```

この例のように、ノード（ラズパイ＋センサ）の台数分のIPアドレスを設定します。
今回は、 
192.168.2.32 
192.168.2.38 
２台とします。※192.168.2.33、192.168.2.34はコメントアウトされています。 
↓ 

```json
[
 { "url": "http://192.168.2.38/", "name": "居間" },
 { "url": "http://192.168.2.32/", "name": "洋室１" },
 { "//url": "http://192.168.2.33/", "name": "洋室２" },
 { "//url": "http://192.168.2.34/", "name": "洋室３" },
 {}
]
```

 

## Web画面にグラフを表示
以下の仕組みにより、まとめてグラフを表示します。
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4-2/kousei6.svg" alt="">
 

`http://[画面兼中継サーバー]/bme280s.html` にアクセスします。

<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4-2/image6.png" alt="" width="600px">
 
 

できました！

ラズベリーパイとセンサーを組み合わせて温度、湿度、気圧のデータを取得しWeb画面にグラフを表示するシステムを構築しました。 いわゆる IoT です。 前回の「Raspberry Pi 4に温湿度気圧センサBME280を取り付けてデータをLCD 1602Aに表示する」は、センターとLCDの取り付け、単体動作確認まででしたが、今回は、wiringpi-php8を使用して、phpプログラムでデータを取り出して記録→Web画面にグラフを表示までやっていきます。 【 wiringpi-php8 】 php8対応wiringpiです。wiringpi（ワイヤリングパイ）とは、GPIOを操作するライブラリです。C言語、Pythonには有りますが、php8に対応したものが無かったため、作成し、githubに公開しました。php7対応版（wiringpi-php7）もあります。 ・環境構築 - apache2インストール ・環境構築 - phpインストール ・wiringpi-php8 インストール ・wiringpi-php8 動作確認 ・Web画面にグラフを表示 ・複数のノードに対応

BME280で取得した温湿度気圧をWeb画面に表示する(wiringpi-php8使用)

# はじめに
ラズベリーパイとセンサーを組み合わせて温度、湿度、気圧のデータを取得しWeb画面にグラフを表示するシステムを構築しました。
いわゆる IoT です。 
 
・Raspberry Pi 4に温湿度気圧センサBME280を取り付けてデータをLCD 1602Aに表示する 
・<a href="https://itc-engineering-blog.netlify.app/blogs/83krb8517u" target="_blank">BME280で取得した温湿度気圧をWeb画面に表示する(wiringpi-php8使用)</a> 
の２回に分け、**今回は、センサーとLCD取り付け～動作確認まで**になります。 
 
・[Raspberry Pi 4 組み立て](#anchor1) 
・[BME280センサはんだ付け](#anchor2) 
・[LCD 1602Aはんだ付け](#anchor3) 
・[I2C有効化](#anchor4) 
・[ブレッドボードへ配線](#anchor5) 
・[デバイス確認](#anchor6) 
・[動作確認](#anchor7) 
 
<blockquote class="warn">
今回の検証環境は、
<code>LABISTS Raspberry Pi 4 STARTER KIT</code>
<code>Raspbian GNU/Linux 10 (buster)</code>
<code>Python 2.7.16</code>
<code>温湿度気圧センサBME280</code>
<code>LCD 1602A</code>
になります。
</blockquote>

 

<a class="anchor" id="anchor1"></a>

# Raspberry Pi 4 組み立て
LABISTS Raspberry Pi 4 STARTER KIT　を購入しました。 
マニュアル（日本語有り）も入っていますので、基本的には、それを読みながらで特に問題無かったです。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4/image1.jpg" alt="" width="400px">
 
ヒートシンクを取り付けます。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4/image2.jpg" alt="" width="400px">
 
端子と側面の穴に合わせるようにして、ボードをケースの中に収めます。 
→ここが一番の難所でしたが、ガチャガチャやっている内に、所定位置にぴったり収まりました。穴と端子はズレていなくて、差し込み辛いということも無いです。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4/image3.jpg" alt="" width="400px">
 
ボードが入ったら、ネジ締めして、ファンを取り付けて完成です。ネジ穴は、ズレていることは無く、ぴったりでした。 
 
・電源ケーブル 
・HDMI - モニター 
を接続して、電源投入、特に迷うことなく、初期設定完了です。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4/install.jpg" alt="" width="400px">
 
今回は、Wifiで通信を行い、IPアドレスは、DHCPで取得して、初期起動時からインターネットに繋がる環境でした。SSHを有効にして、SSH接続できました。 
初期ユーザーは、`pi`で今回最初にパスワードを入力する画面がありましたので、パスワードはそこで決まりました。その画面が無かった場合、 
ユーザー名：`pi` 
パスワード：`raspberry` 
です。 
 
固定IPアドレスの設定、SSH接続については、以下を参照してください。 
「<a href="https://itc-engineering-blog.netlify.app/blogs/dl9sesmgga3" target="_blank">Raspberry Pi OSをVMware-workstation-16.1.1にインストール</a>」

 

<a class="anchor" id="anchor2"></a>

# BME280センサはんだ付け
BME280センサとピンヘッダ（足）をはんだ付けします。 
BME280センサ本体とピンヘッダが既にはんだ付けされているのもあるみたいですが、今回は、別々になっていましたので、はんだ付けしました。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4/image4.jpg" alt="" width="400px">
 

<blockquote class="warn">
【 BME280とBMP280について 】
最初、BME280 と書いてある商品を購入したら、BMP280 が送られてきました。（EとPの違いです。）BME280 は正方形、BMP280 はやや長方形気味ですので、見た目で分かります。
 
BMP280の方
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4/image5.jpg" alt="" width="400px" style="margin-right: 10px">
BMPの方は気圧計機能が有りません。
 
BME280の方
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4/image6.jpg" alt="" width="400px" style="margin-right: 10px">
</blockquote>

 

<a class="anchor" id="anchor3"></a>

# LCD 1602Aはんだ付け
LCD 1602AとI2Cシリアルインターフェイスボードをはんだ付けで接続します。 
ググると、LCDの裏側に付けている画像がたくさん出てきますが、向きを間違えなければ、どちらでも良いです。
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4/image7.jpg" alt="" width="400px">
 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4/image8.jpg" alt="" width="400px">
 
<blockquote class="info">
【I2C】
デバイス間の通信方式の名前です。ここでは、詳細な説明は省略します。
</blockquote>

 

<a class="anchor" id="anchor4"></a>

# I2C有効化
ラズパイ側でI2Cを有効化しておきます。 
 
「設定」→「Raspberry Pi の設定」をクリックします。
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4/image9.png" alt="" width="600px">
 
「インターフェイス」タブの「I2C」「有効」にチェックを入れて、「OK」をクリックします。
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4/image10.png" alt="" width="600px">
 

 

<a class="anchor" id="anchor5"></a>

# ブレッドボードへ配線
## ラズパイ - ブレッドボード
GPIOケーブルでラズパイ側GPIO端子と繋いでGPIO Extension Boardをブレッドボードに取り付けます。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4/image11.jpg" alt="" width="400px">
 
<blockquote class="warn">
各端子、割と奥まで入ります。GPIOケーブルの取り付けが緩くて、センサのデータ取得が不安定になることがありました。
</blockquote>
 
<blockquote class="warn">
GPIO Extension Boardは、単純に各ピンの役割が分かりやすくなるだけで、必須ではありません。
</blockquote>

 

## GPIO - BME280

| GPIO | BME280 |
| ---- | ---- |
| 3V3(3.3V電源) | VIN |
| GND | GND |
| SCL1 | SCL |
| SDA1 | SDA |
 
 
とジャンパーワイヤを繋げます。※今回は単純な配線のため、ジャンパーワイヤの色は適当です。 
 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4/image12.jpg" alt="" width="400px">
 

 

## GPIO - 1602A

| GPIO | 1602A(I2C) |
| ---- | ---- |
| GND | GND |
| VCC | 5V0(5.0V電源) |
| SDA1 | SDA |
| SCL1 | SCL |
 
 
とジャンパーワイヤを繋げます。 
 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4/image13.jpg" alt="" width="500px">
 

<blockquote class="info">
SDA1とSCL1は、BME280にもつながっている形になります。I2Cは、デバイスの番号で信号を識別するため、このような配線が可能です。
</blockquote>

 

<a class="anchor" id="anchor6"></a>

# デバイス確認
SSHで接続して、i2cdetectコマンドを入力します。 

```sh
$ i2cdetect -y 1
 0 1 2 3 4 5 6 7 8 9 a b c d e f
00: -- -- -- -- -- -- -- -- -- -- -- -- --
10: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
20: -- -- -- -- -- -- -- 27 -- -- -- -- -- -- -- --
30: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
40: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
50: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
60: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
70: -- -- -- -- -- -- 76 --
```

27(16進数で0x27)が LCD 1602A 、76(16進数で0x76)が BME280 です。 
とりあえずは、認識されています。 

<blockquote class="info">
【i2cdetectのオプション】
-y ： <code>Continue? [Y/n]</code>と聞かれなくなるオプションです。
1 ： I2Cバス番号です。0か1で、ラズパイによっては、0のこともあるようですが、通常は、1のようです。
</blockquote>

 

載っているセンサチップが本当にBME280かどうか念のため確認します。

```sh
$ i2cget -y 1 0x76 0xd0
0x60
```

 

0x60 のため、問題ありません。 
`i2cget -y 1 0x76 0xd0` を実行して表示される値が 
0x58 : BMP280 
0x60 : BME280 
0x61 : BME680 
です。 
なぜ分かるかと言うと、データシートを見ると分かります。 
第一引数：`i2cdetect`で確認したデバイス番号→0x76 
第二引数：データシート "ID・レジスター" のアドレス→0xd0 
結果：01100000（２進数）→0x60（１６進数） 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4/image14.png" alt="" width="600px">

 

<a class="anchor" id="anchor7"></a>

# 動作確認
## BME280動作確認/C言語
こちらのソースコード `bme280-sample-master.zip` を設置します。 
↓ 
<a href="https://github.com/kwgt/bme280-sample" target="_blank">kwgt/bme280-sample(GitHub)</a>

```sh
$ unzip bme280-sample-master.zip
$ cd bme280-sample-master
$ make
cc -O2 -Wall -c -o main.o main.c
cc -O2 -Wall -c -o i2c.o i2c.c
cc -o test main.o i2c.o -lpthread
$ ./test
26.990000 45.737305 1006.980000
27.190000 45.757812 1006.960000
27.230000 45.594727 1007.050000
→CTRL+C
```

 

温度、湿度、気圧の順にそれらしい値が出力されています。 
⇒ＯＫです。

 

## BME280動作確認/Python
こちらのソースコード `bme280_sample.py` を設置します。 
↓ 
<a href="https://github.com/SWITCHSCIENCE/samplecodes/tree/master/BME280/Python27" target="_blank">SWITCHSCIENCE/samplecodes/BME280/Python27(GitHub)</a>

```sh
$ pip install smbus2
$ python bme280_sample.py
temp : 27.44 ℃
pressure : 1007.25 hPa
hum : 39.71 ％
```

 

⇒ＯＫです。

 

<blockquote class="warn">
何もしていない状態で <code>python bme280_sample.py</code> とすると、以下のようにエラーになるため、<code>pip install smbus2</code>が必要です。
↓
</blockquote>

```sh
$ python bme280_sample.py
Traceback (most recent call last):
 File "bme280_sample.py", line 3, in <module>
 from smbus2 import SMBus
ImportError: No module named smbus2
```

 

## 1602A動作確認/C言語
こちらのソースコード `code.zip` を設置します。 
↓ 
<a href="https://github.com/WayinTop/C-Python-Java-JP" target="_blank">WayinTop/C-Python-Java-JP(GitHub)</a> 

```sh
$ unzip code.zip
$ cd code/C/21.LCD1602
$ sudo gcc LCD1602.c -o LCD1602 -lwiringPi -lwiringPiDev
$ ./LCD1602
CPU's temperature : 54.53
Thu Jun 24 11:20:54 2021

CPU's temperature : 55.02
Thu Jun 24 11:20:55 2021
→CTRL+C
```

<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4/lcd1.gif" alt=""> 
 

LCDに端末と同じ値が表示されています。 
⇒ＯＫです。 

<blockquote class="warn">
最初、特にエラーが無いのに映らなくて、可変抵抗器をドライバで回す必要がありました。
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4/lcd2.gif" alt="">
</blockquote>

 

## 1602A動作確認/Python
Pyhonのプログラムも動かしてみます。（上の続き） 

```sh
$ cd ../../python/21.LCD1602/
$ python LCD1602.py
starting ...
→CTRL+C
```

<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4/lcd3.gif" alt=""> 
 

⇒ＯＫです。

 

できました！

 

続きはこちらです。 
↓ 
・<a href="https://itc-engineering-blog.netlify.app/blogs/83krb8517u" target="_blank">BME280で取得した温湿度気圧をWeb画面に表示する(wiringpi-php8使用)</a>

ラズベリーパイとセンサーを組み合わせて温度、湿度、気圧のデータを取得しWeb画面にグラフを表示するシステムを構築しました。 いわゆる IoT です。 ・Raspberry Pi 4に温湿度気圧センサBME280を取り付けてデータをLCD 1602Aに表示する ・BME280で取得した温湿度気圧をWeb画面に表示する(wiringpi-php8使用) の２回に分け、今回は、センサーとLCD取り付け～動作確認までになります。 ・Raspberry Pi 4 組み立て ・BME280センサはんだ付け ・LCD 1602Aはんだ付け ・I2C有効化 ・ブレッドボードへ配線 ・デバイス確認 ・動作確認

Raspberry Pi 4に温湿度気圧センサBME280を取り付けてデータをLCD 1602Aに表示する

先日 ・GitLab ・Wekan ・Rocket.Chat をローカルの環境にインストールしました。 ※インストールについては、下記別記事を参照してください。 「Ubuntu 20.04.2.0にGitLabをインストール」 「CentOS8にwekanをインストール(ソースからビルド編)」 「CentOS8にRocket.Chatをインストール」 この環境は自宅や外出時のスマホなどのインターネットから直接見られません。 そこで、インターネットからチャットの内容、GitLab,Wekanのアクティビティについて確認できるようWebHookを利用して、以下の環境を構築しました。 Slackはインターネットのビジネスチャットサービスで、10000通まで無料です。（2021/06現在） Slackについては、WebHookの手順以外、今回解説しません。

GitLab,Wekan→Rocket.Chat→SlackのWebHook

このブログ「ITC Engineering Blog」のソースコードは、GitHubに公開されています。(https://github.com/itc-lab/itc-blog) READMEに動画gifを載せました。 今回、この動画gif作成について全手順をご紹介していきます。 python、PyAutoGUI、opencv、RecButton、ffmpeg を使って、全て無料でできました。 ・pythonインストール ・pythonプログラム作成 ・pyautogui検出用画像を配置 ・pipライブラリインストール ・Pythonプログラム起動 ・録画 ・カット編集 ・mp4から動画gifへ変換 ・GitHubへアップロード ・Seleniumについて

Pyautoguiでマウス操作自動化、録画、動画gif作成、Webリンク生成

このブログ「ITC Engineering Blog」は、Next.js、ヘッドレスCMSのmicroCMS、GitHub、ホスティングサービスNetlifyで構成されています。いわゆるJamstack構成です。このブログのソースコードは、GitHubにあります。(https://github.com/itc-lab/itc-blog) 今回は、このソースコードを使い、Netlifyにデプロイし、最終的にブログ記事をアップするところまで行いたいと思います。

Next.js microCMS GitHub NetlifyでJamstackなブログを公開

前回、OS.jsインストールと公式アプリの追加をやってみましたが、 今回、既存のWebサイトをOS.jsのアプリのように組み込む方法とnginxで振り分ける方法を実践していきます。 【 Nginx 】 Nginx(エンジンエックス)は、オープンソースのWebサーバです。処理性能・高い並行性・メモリ使用量の小ささに焦点を当てて開発されており、HTTP, HTTPS, SMTP, POP3, IMAPのリバースプロキシの機能や、ロードバランサ、HTTPキャッシュなどの機能も持ちます。 ・OS.jsバックグラウンド起動設定 ・Rocket.Chat組み込み ・Wekanの組み込み ・GitLabの組み込み ・nginxインストール ・動作確認

OS.jsにiframeアプリを組み込んでnginx(エンジンエックス)で振り分ける

# はじめに
ブラウザのみでデスクトップ環境を構築できる「OS.js(<a href="https://demo.os-js.org/" target="_blank">https://demo.os-js.org/</a>)」というのを見つけました。 
きっかけは、SynologyのDSM(<a href="https://demo.synology.com/ja-jp/dsm" target="_blank">https://demo.synology.com/ja-jp/dsm</a>)がどういう仕組みで動いているか気になり、調べていたところ、
Sencha Ext JSというJavaScriptフレームワークが使われているようなのは、分かったのですが、ソースコードは無く、それ以上の追及は断念し、似たものが無いか探したことです。
結果、似たものとしてOS.jsが見つかりました。 

 

OS.jsは、Node.jsで動くSPA(Single Page Application)になります。 
OS.jsのプログラムは、サーバー側で処理するプログラムとクライアント（ブラウザ）側で処理するプログラムがあり、どちらもJavaScriptです。<a href="https://github.com/os-js/OS.js" target="_blank">ソースコード</a>が公開されています。 
ライセンスは、BSD 2-Clause License になります。

 

今回、OS.jsのインストールと、アプリを組み込む方法が分かりましたので、実践していきます。

 

・[OS.jsインストール](#anchor1) 
・[OS.jsを動かしてみる](#anchor2) 
・[OS.jsのアプリを組み込んでみる](#anchor3) 
・[OS.jsの作者について](#anchor4) 

 

<blockquote class="info">
【 Node.js 】
「Node.js」とは、サーバーサイドでJavaScriptを動かせるプラットフォーム（環境）のことです。
ソフトウェア名は、「node」です。nodeでWebサーバー機能が実装されたJavaScriptプログラムを動かすと、Apache httpdやnginxのようにWebサーバーとして機能させることができます。
</blockquote>

<blockquote class="info">
【 SPA(Single Page Application) 】
シングルページアプリケーションの名の通り、一つの画面で成り立っているWebサイトのことです。Webページを開くと大量のJavaScriptがダウンロードされて、ほとんどの処理をブラウザ側で行う仕組みです。サーバーへの通信が少ないため、高速で動作する一方、開くのに時間がかかるという欠点があります。（商品を販売するサイトには向いていません。）
SPAの典型例として、
OS.js（<a href="https://demo.os-js.org/" target="_blank">https://demo.os-js.org/</a>）
SynologyのDSM(<a href="https://demo.synology.com/ja-jp/dsm" target="_blank">https://demo.synology.com/ja-jp/dsm</a>)
QNAPのQuTScloud(<a href="https://www.qnap.com/ja-jp/live-demo/" target="_blank">https://www.qnap.com/ja-jp/live-demo/</a>)
が挙げられます。
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/osjs_install/spa.svg" alt="">
</blockquote>

<blockquote class="info">
【 BSD 2-Clause License 】
変更の有無を問わず、ソースやバイナリ形式での再配布や利用は、次の条件を満たせば許可される。
ソースコードの再配布は、上記の著作権表示、ここに列挙された条件、および下記の免責条項を保持すること。
バイナリ形式の再配布は、上記の著作権表示、ここに列挙された条件、および下記の免責条項は、ドキュメントまたは他の資料で配布すること。
とあり、「MIT License」と同等のライセンスであり、同じ内容のLICENSEファイルが含まれていれば、商用利用、修正、配布、サブライセンス可で、何が起きても作者の責任は免除されます。
</blockquote>

<blockquote class="warn">
今回の検証環境は、
<code>CentOS Linux release 7.6.1810</code>
<code>node v12.18.3</code>
になります。
</blockquote>

 

<a class="anchor" id="anchor1"></a>

# OS.jsインストール

OS.jsを/opt/OS.jsにインストールします。

```sh
# cd /opt/
# git clone https://github.com/os-js/OS.js.git
# cd OS.js
# rm -f package-lock.json
# npm install
# npm install @osjs/example-application
# npm run package:discover
# npm run build
```

<blockquote class="info">
<code># npm install</code>
でOS.jsインストールは終わりですが、今回、
<code>@osjs/example-application</code>
を組み込んでいます。
</blockquote>

 

必須では無いですが、デバッグできるように、クライアント（ブラウザ）側のJavaScriptソースコードを組み込みます。

```sh
# git clone https://github.com/os-js/osjs-client.git
# mv osjs-client src/
# cd src/osjs-client
# npm install
# npm run build
# cd /opt/OS.js
# npm install --save file:src/osjs-client
# npm run build
```

 

こちらも必須では無いですが、共通機能のJavaScriptソースコードを組み込みます。

```sh
# git clone https://github.com/os-js/osjs-common.git
# mv osjs-common src/
# cd src/osjs-common
# npm install
# npm run build
# cd ../../
# npm install --save file:src/osjs-common
# npm run build
```

 

OS.jsは、標準でポート8000で起動するため、ファイアウォールを開放します。 

```sh
# firewall-cmd --zone=public --add-port=8000/tcp --permanent
# firewall-cmd --reload
```

 

OS.jsを起動します。

```sh
# npm run serve
```

 

`https://192.168.▲.▲:8000/` 
でアクセスします。 
192.168.▲.▲は、OS.jsを起動したサーバーのIPアドレスです。 

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/osjs_install/image1.png)

 

アクセスできました！

 

`@osjs/example-application` 
はこのように組み込まれています。 
中身は何も無いですが、このコード(<a href="https://github.com/os-js/osjs-example-application" target="_blank">https://github.com/os-js/osjs-example-application</a>)を真似すれば、オリジナルのアプリを組み込めるということです。 
↓ 
![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/osjs_install/osjs1.gif)

 

サーバーとのコネクションは、WebSocketを使って、監視しているようです。サーバーを停止すると、メッセージが表示されます。 
↓ 
![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/osjs_install/image2.png)

<blockquote class="info">
【 WebSocket 】
WebSocket（ウェブソケット）は、単一のTCPコネクション上に双方向通信のチャンネルを提供する、コンピュータの通信プロトコルの1つです。
Node.jsの場合、「ws」あるいは、「socket.io」ライブラリを使って実装できます。
</blockquote>

 

<a class="anchor" id="anchor2"></a>

# OS.jsを動かしてみる
「File Manager」を動かしてみます。 
パソコンのファイルをドラッグ＆ドロップでアップロードして、OS.js上で開いています。

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/osjs_install/osjs2.gif)

 

フォルダのドラッグ＆ドロップはダメなようです。

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/osjs_install/image3.png)

 

フォルダを作成して、先ほどのファイルをコピー＆ペーストしています。

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/osjs_install/osjs3.gif)

 

その他、電卓、Draw系アプリ等々、OS.js標準機能でいろいろ入っています。 

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/osjs_install/image4.png)

 

<a class="anchor" id="anchor3"></a>

# OS.jsのアプリを組み込んでみる
## テトリス
公式リポジトリのアプリ`@osjs/tetris-application`を組み込みます。

```sh
# npm install @osjs/tetris-application
# npm run package:discover
```

ブラウザの中でテトリスが動きます！

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/osjs_install/osjs4.gif)

 

ちなみに、JavaScriptのテトリス自体は、OS.js作者とは別の方が作成していて、独立したプログラムです。(<a href="https://github.com/jakesgordon/javascript-tetris/">https://github.com/jakesgordon/javascript-tetris/</a>) これをOS.jsの中に組み込んでいることになります。

 

## ターミナル

公式リポジトリのアプリ`npm install @osjs/xterm-application`を組み込みます。

```sh
# npm install @osjs/xterm-application
# npm run package:discover
# vi src/server/config.js
```

 

そのままの場合、「demo」ユーザーのパスワードを聞かれますので、 
`public: path.resolve(root, 'dist')`の末尾にカンマと
<pre><code> xterm: {
 login: false
 }</code></pre>
の３行を追加します。

```sh
module.exports = {
 root,
 port: 8000,
 public: path.resolve(root, 'dist'),
 xterm: {
 login: false
 }
};
```

ブラウザの中でターミナルが動きます！

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/osjs_install/osjs5.gif)

 

以下の図のようにアクセス制限が有る場合、プロキシ的な使い方ができると思います。

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/osjs_install/terminal.svg)

 

<a class="anchor" id="anchor4"></a>

# OS.jsの作者について
ノルウェーの Anders Evenrud という方が個人で開発していて、2021年5月現在、頻繁に更新されています。
エンジニアとして働く傍ら、お金を稼ぐつもりは無く趣味で開発されているようです。 
（公式サイトのチャットで本人談より）

ブラウザのみでデスクトップ環境を構築できる「OS.js(https://demo.os-js.org/)」というのを見つけました。 きっかけは、SynologyのDSM(https://demo.synology.com/ja-jp/dsm)がどういう仕組みで動いているか気になり、調べていたところ、 Sencha Ext JSというJavaScriptフレームワークが使われているようなのは、分かったのですが、ソースコードは無く、それ以上の追及は断念し、似たものが無いか探したことです。 結果、似たものとしてOS.jsが見つかりました。 OS.jsは、Node.jsで動くSPA(Single Page Application)になります。 OS.jsのプログラムは、サーバー側で処理するプログラムとクライアント（ブラウザ）側で処理するプログラムがあり、どちらもJavaScriptです。ソースコードが公開されています。 ライセンスは、BSD 2-Clause License になります。 今回、OS.jsのインストールと、アプリを組み込む方法が分かりましたので、実践していきます。 ・OS.jsインストール ・OS.jsを動かしてみる ・OS.jsのアプリを組み込んでみる ・OS.jsの作者について

Node.jsのSPA「OS.js」について

# はじめに
git add コマンドですが、`git add -A`、 `git add .` の違いが気になり、いろいろ調べていたところ、以下の <a href="https://stackoverflow.com/questions/572549/difference-between-git-add-a-and-git-add" target="_blank">stackoverflow</a> の表を見つけました。
日本語にしただけで、ほぼそのまま転記になりますが、その他の git add コマンドも含め、具体的にどうなるのか調査してみました。

 

| コマンド | 新規作成 | 更新 | 削除 | ステージング対象 |
| ---- | ---- | ---- | ---- | ---- |
| git add -A | ✔ | ✔ | ✔ | 新規作成・更新・削除 全て |
| git add . | ✔ | ✔ | ✔ | カレントフォルダ内の新規作成・更新・削除 全て |
| git add --ignore-removal . | ✔ | ✔ | ❌ | 新規作成・更新 |
| git add -u | ❌ | ✔ | ✔ | 更新・削除のみ |

※Git Vertion 1.xの表もありますが、今回、Git Vertion 2.x のみの話とします。

 

`git add -A` は、 `git add --all` と同じ意味になります。 
`git add -u` は、 `git add --update` と同じ意味になります。 
`git add` は、`git stage` と同じ意味になります。

 

検証環境は、`git version 2.25.1` です。 
シェルは、bashで
`GNU bash, version 5.0.17(1)-release (x86_64-pc-linux-gnu)`
です。 

 

# まとめ

検証結果の前にいきなりまとめを先出ししますと、

| コマンド | 新規作成 | 更新 | 削除 | ステージング範囲 |ステージング対象 |
| ---- | ---- | ---- | ---- | ---- | ---- |
| git add -A | ✔ | ✔ | ✔ | リポジトリ全て | 新規作成・更新・削除 |
| git add . | ✔ | ✔ | ✔ | カレントフォルダ内 | 新規作成・更新・削除 |
| git add : | ✔ | ✔ | ✔ | カレントフォルダ内 | 新規作成・更新・削除 |
| git add :/ | ✔ | ✔ | ✔ | リポジトリ全て | 新規作成・更新・削除 |
| git add ":(top)" | ✔ | ✔ | ✔ | リポジトリ全て | 新規作成・更新・削除 |
| git add --ignore-removal | ❌ | ❌ | ❌ | - | エラー（ドットが必要） |
| git add --ignore-removal . | ✔ | ✔ | ❌ | カレントフォルダ内 | 新規作成・更新 |
| git add -u | ❌ | ✔ | ✔ | リポジトリ全て | 更新・削除 |
| git add -u . | ❌ | ✔ | ✔ | カレントフォルダ内 | 更新・削除 |

となりました。

<blockquote class="info">
【コロン （:）について】
コロン （:）ですが、<code>pathspec</code>という仕様で、:の後に書く内容によって、様々な意味を持たせることができるものです。今回は、リポジトリトップを表す「:/」「:(top)」と たまたまやってみたら「.」と同じ意味になった「:」（コロンのみ）で検証しました。
</blockquote>

 

# 検証対象

リポジトリは、以下のような構造を前提とします。
![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/git_add/tree.svg)

 

# リポジトリトップで実行の結果

```sh
$ git add -A
$ git status
On branch master
Your branch is up to date with 'origin/master'.

Changes to be committed:
 (use "git restore --staged <file>..." to unstage)
 modified: dir1/file2.txt
 deleted: dir2/file3.txt
 new file: file4.txt
```
 
git add -A の結果は、 
<pre><code>
modified: dir1/file2.txt
deleted: dir2/file3.txt
new file: file4.txt
</code></pre>
となりました。 

 

以下、その他のコマンドの結果のまとめです。 

| コマンド | ステージング結果 |
| ---- | ---- |
| git add -A | modified: dir1/file2.txt deleted: dir2/file3.txt new file: file4.txt |
| git add . | modified: dir1/file2.txt deleted: dir2/file3.txt new file: file4.txt |
| git add : | modified: dir1/file2.txt deleted: dir2/file3.txt new file: file4.txt |
| git add :/ | modified: dir1/file2.txt deleted: dir2/file3.txt new file: file4.txt |
| git add ":(top)" | modified: dir1/file2.txt deleted: dir2/file3.txt new file: file4.txt |
| git add --ignore-removal | エラー：Nothing specified, nothing added. Maybe you wanted to say 'git add .'? |
| git add --ignore-removal . | modified: dir1/file2.txt new file: file4.txt |
| git add -u | modified: dir1/file2.txt deleted: dir2/file3.txt |
| git add -u . | modified: dir1/file2.txt deleted: dir2/file3.txt |

 

# ディレクトリ内で実行の結果
dir1 ディレクトリに移動した後の実行結果です。 

```sh
$ cd dir1
$ git add -A
$ git status
On branch master
Your branch is up to date with 'origin/master'.

Changes to be committed:
 (use "git restore --staged <file>..." to unstage)
 modified: file2.txt
 deleted: ../dir2/file3.txt
 new file: ../file4.txt
```
 
git add -A の結果は、 
<pre><code>
modified: file2.txt
deleted: ../dir2/file3.txt
new file: ../file4.txt
</code></pre>
となりました。 

 

以下、その他のコマンドの結果のまとめです。 

| コマンド | ステージング結果 |
| ---- | ---- |
| git add -A | modified: file2.txt deleted: ../dir2/file3.txt new file: ../file4.txt |
| git add . | modified: file2.txt |
| git add : | modified: file2.txt |
| git add :/ | modified: file2.txt deleted: ../dir2/file3.txt new file: ../file4.txt |
| git add ":(top)" | modified: file2.txt deleted: ../dir2/file3.txt new file: ../file4.txt |
| git add --ignore-removal | エラー：Nothing specified, nothing added. Maybe you wanted to say 'git add .'? |
| git add --ignore-removal . | modified: file2.txt |
| git add -u | modified: file2.txt deleted: ../dir2/file3.txt |
| git add -u . | modified: file2.txt |

git add コマンドですが、git add -A、 git add . の違いが気になり、いろいろ調べていたところ、以下の stackoverflow の表を見つけました。 日本語にしただけで、ほぼそのまま転記になりますが、その他の git add コマンドも含め、具体的にどうなるのか調査してみました。※Git Vertion 1.xの表もありますが、今回、Git Vertion 2.x のみの話とします。検証環境は、git version 2.25.1 です。まとめ 検証結果の前にいきなりまとめを先出ししますと、

git add -A、git add . の違いとその他 git add まとめ

# はじめに
git commit コマンドですが、複数行のコメントを指定できます。 
やり方がいろいろありますので、試してみました。

 

各バージョンは、以下の通りです。
```sh
# gitlab-rake gitlab:env:info
GitLab information
Version: 13.11.2
GitLab Shell
Version: 13.17.0
# git --version
git version 2.25.1
```

シェルは、bashで 
`GNU bash, version 5.0.17(1)-release (x86_64-pc-linux-gnu)`
です。 

 

<blockquote class="warn">
本題に入る前に・・・
commitのコメントの２行目は空白にするのが推奨されます。（今回も全て空白にして試しました。）
理由は、コミットメッセージの最初の空白行までのテキストはコミットタイトルとして扱われ、空白行が無いと、ずっとタイトルだと思われるからのようです。
<a href="https://git-scm.com/docs/git-commit#_discussion" target="_blank">（情報元）</a>
</blockquote>

 

# オプション無しでcommit
オプション無しでcommitするだけになります。

```sh
# git commit
```

<blockquote class="info">
OSの設定によるのですが、標準のエディタで編集します。
</blockquote>

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/gitlab_commit/editor.png)

 

```sh
# git log -1
commit [commit ID]
Author: [Author名] <[Authorメールアドレス]>
Date: [タイムスタンプ]

 １行目

 ３行目
 ４行目
 ５行目
```

複数行コメント付きでコミットされています。

<blockquote class="info">
オプションの -1 は直近のcommit情報を見るという意味です。
</blockquote>

 

GitLabで見ても複数行コメント付きでコミットされています。

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/gitlab_commit/GitLab1.png)

 

# git commit -m その１
-mを行数分指定します。

```sh
# git commit -m "１行目" -m "" -m "３行目" -m "４行目" -m "５行目"
```

 

```sh
# git log -1
commit [commit ID]
Author: [Author名] <[Authorメールアドレス]>
Date: [タイムスタンプ]

 １行目

 ３行目

 ４行目

 ５行目
```

空白行ができました。 

 

GitLabで見ても空白行があるようです。 

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/gitlab_commit/GitLab2.png)

 

# git commit -m その２

複数行コピーして、teratermに貼り付けます。 
※git commit -m "<エンター>→１行目<エンター>・・・のように１行ずつ打ち込んでいっても同じです。

```sh
# git commit -m "
１行目

３行目
４行目
５行目
"
```

 

```sh
# git log -1
commit [commit ID]
Author: [Author名] <[Authorメールアドレス]>
Date: [タイムスタンプ]

 １行目

 ３行目
 ４行目
 ５行目
```

複数行コメント付きでコミットされています。

 

GitLabで見ても複数行コメント付きでコミットされています。

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/gitlab_commit/GitLab1.png)

 

# git commit -m その３

$'...\n...\n...'を使います。

<blockquote class="warn">
bashのみでしか確認していません。
</blockquote>

```sh
# git commit -m $'１行目\n\n３行目\n４行目\n５行目'
```

 

```sh
# git log -1
commit [commit ID]
Author: [Author名] <[Authorメールアドレス]>
Date: [タイムスタンプ]

 １行目

 ３行目
 ４行目
 ５行目
```

複数行コメント付きでコミットされています。

 

GitLabで見ても複数行コメント付きでコミットされています。

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/gitlab_commit/GitLab1.png)

 

# git commit -F その１
-Fオプションでヒアドキュメントの出力(マイナス記号の部分)を受け取ります。

```sh
# git commit -F- << EOM
１行目

３行目
４行目
５行目
EOM
```

 

--file= を使った以下でも全く同じ意味です。

```sh
# git commit --file=- << EOM
１行目

３行目
４行目
５行目
EOM
```

 

```sh
# git log -1
commit [commit ID]
Author: [Author名] <[Authorメールアドレス]>
Date: [タイムスタンプ]

 １行目

 ３行目
 ４行目
 ５行目
```

複数行コメント付きでコミットされています。

 

GitLabで見ても複数行コメント付きでコミットされています。

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/gitlab_commit/GitLab1.png)

 

# git commit -F その２
-Fオプションでファイルを指定します。

以下の内容のcommit.txtを作成
```sh
１行目

３行目
４行目
５行目
```
↓
```sh
# git commit -F commit.txt
```

 

--file= を使った以下でも全く同じ意味です。

```sh
# git commit --file=commit.txt
```

 

```sh
# git log -1
commit [commit ID]
Author: [Author名] <[Authorメールアドレス]>
Date: [タイムスタンプ]

 １行目

 ３行目
 ４行目
 ５行目
```

複数行コメント付きでコミットされています。

 

GitLabで見ても複数行コメント付きでコミットされています。

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/gitlab_commit/GitLab1.png)

git commit コマンドですが、複数行のコメントを指定できます。 やり方がいろいろありますので、試してみました。 各バージョンは、以下の通りです。 # gitlab-rake gitlab:env:info GitLab information Version:        13.11.2 GitLab Shell Version:        13.17.0 # git --version git version 2.25.1 シェルは、bashで GNU bash, version 5.0.17(1)-release (x86_64-pc-linux-gnu) です。 本題に入る前に・・・ commitのコメントの２行目は空白にするのが推奨されます。（今回も全て空白にして試しました。）

GitLab git commit 複数行コメントのやり方いろいろ

Ubuntu 20.04.2.0 にインストールした GitLab を使い、 ・初期設定 ・ユーザー登録 ・プロジェクト(リポジトリ)作成 ・ファイル新規作成 ・git clone,commit,push ・マージリクエスト(プルリクエスト) ・SSH接続 までチュートリアル的に一通り行います。 clone→commit→push→マージまで以下の図のような流れで進めます。 各バージョンは、以下の通りです。 # gitlab-rake gitlab:env:info GitLab information Version:        13.11.2 GitLab Shell Version:        13.17.0 # git --version git version 2.25.1 # openssl version OpenSSL 1.1.1f  31 Mar 2020

GitLab プロジェクト作成→commit→push ssh接続

# はじめに
Windows 10 Pro x64 
VMware-workstation-16.1.1 
2021-01-11-raspios-buster-i386.iso 
の組み合わせで作業しています。 
・OSのインストール 
・IPアドレスの設定 
・teratermでsshでログイン 
まで行います。 
 
インストールするＯＳは、正確には、 
「Debian Buster with Raspberry Pi Desktop」 
になります。 

<blockquote class="info">
【OSの名称について】
2020年5月に正式名称がRaspbianからRaspberry Pi OSへ変更され、PCとMac向けのRaspbianについても、Raspberry Pi Desktopへと変更されました。（Wikipediaより）
</blockquote>

 

# OSのisoファイルをダウンロード

<a href="https://www.raspberrypi.org/software/operating-systems/" target="_blank">https://www.raspberrypi.org/software/operating-systems/</a> 
からダウンロードします。 
ノートパソコンの画像があるところまでスクロールすると、
「Debian Buster with Raspberry Pi Desktop」 
とありますので、Downloadボタンを押してダウンロードします。

 

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspbian_install/image1.png) 

 

ダウンロードし終わったら、正しいファイルかどうか、sha256sumコマンドで確認できます。 
Show SHA256 file integrity hash: のところと同じハッシュ値になれば、問題ありません。 
※公式サイトの場合、かなり時間がかかると思われます。別の場所（特に怪しいところ）からダウンロードした場合、改ざんされてないかの確認にもなります。

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspbian_install/image2.png) 

 

# Raspberry Pi OS インストール
## １
iso（2021-01-11-raspios-buster-i386.iso）を選択して「次へ」をクリックします。 

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspbian_install/image3.png) 

 

「Linux」→「Debian 10.x 64 ビット」を選択して「次へ」をクリックします。 
※CPUのコア割り当て数などに影響するみたいですが、「Debian 10.x 64 ビット」が無い場合、別のものを選択しても良いと思われます。

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspbian_install/image4.png) 

 
 
![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspbian_install/image5.png) 

 

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspbian_install/image6.png) 

 

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspbian_install/image7.png) 

 


## ２
「Install」を選択します。

<blockquote class="warn">
ここで、「Run with persistence」が初期選択されていますが、そのまま進めますと、Live CDモードのようにisoからOSが起動してきます。
</blockquote>

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspbian_install/image8.png) 

 

## ３
「Japanese」を選択します。

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspbian_install/image9.png) 

 

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspbian_install/image10.png) 

 

## ４
今回は標準的なインストールで仮想ディスク１個全体を使いますので、「Guided - use entire disk」を選択します。

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspbian_install/image11.png) 

 
 
## ５
仮想ディスク１個ですので、そのまま「SCSI3・・・」を選択します。

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspbian_install/image12.png) 

 

## ６
パーティションは、/ だけで良いので、「All files in one partition」を選択します。

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspbian_install/image13.png) 

 
 
## ７
/ と swap (1.0GB) で問題無いので、「Finish partitioning and changes to disk」を選択します。

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspbian_install/image14.png) 

 
 
## ８
「Yes」を選択します。 

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspbian_install/image16.png) 

 

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspbian_install/image17.png) 

 

## ９
GRUB boot loader をインストールするかの選択ですので、「Yes」を選択します。 

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspbian_install/image18.png) 

 

## １０
今回仮想ディスク１個ですので、GRUB boot loader のインストール先は、「/dev/sda」を選択します。

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspbian_install/image20.png) 

 

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspbian_install/image21.png) 

 

## １１
「Continue」を選択します。

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspbian_install/image22.png) 

 

# 初期設定
## １
「*Debian GNU/Linux」を選択します。※この状態のまま待てば次へ進みます。

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspbian_install/image23.png) 

 

## ２
「Country」から Japan を選択します。 
このとき、Language: Japanese, Timezone: Tokyo が自動選択されますので、
「Next」をクリックします。

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspbian_install/image26.png) 

 

## ３
パスワードを入力して、「Next」をクリックします。

<blockquote class="info">
初期ユーザー名は、「pi」です。この時入力したパスワードが「pi」のパスワードになります。
</blockquote>

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspbian_install/image27.png) 

 

## ４
OSとアプリケーションをアップデートするかの質問ですが、インターネットへの接続が必要ですので、今回は、「Skip」をクリックします。

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspbian_install/image28.png) 

 

## ５
「Done」をクリックします。 

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspbian_install/image29.png) 

 

# 固定IPアドレスの設定
Wifiの場合、右上の↑↓の部分で設定できますが、今回は、有線LANの設定になります。

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspbian_install/image30.png) 

 

## １
左上のコンソールアイコンをクリックして、コンソールを起動します。 
起動したら、

```sh
$ ifconfig
```

を入力して、LANデバイス名を確認します。

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspbian_install/image31.png) 

 

## ２

```sh
$ vi /etc/dhcpcd.conf
```
にて、設定を編集します。

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspbian_install/image32.png) 

 

```sh
interface [先ほど調べたLANデバイス名(eth0)]
static ip_address=[IPアドレス/サブネットマスク]
static routers=[ルーターのIPアドレス]
static domain_name_servers=[DNSのIPアドレス]
```
を末尾に追加します。

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspbian_install/image33.png) 

 

## ３
 
```sh
$ sudo ifconfig eth0 down
$ sudo ifconfig eth0 up
```
にて、LANデバイスを再起動します。

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspbian_install/image34.png) 

 

# SSHの設定、接続確認
## １
左上のラズベリーマークをクリックして、「Preferences」→「Raspberry Pi Configuration」をクリックします。

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspbian_install/image35.png) 

 

## ２
「Interfaces」タブをクリックします。 

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspbian_install/image36.png) 

 

SSH:「Enable」をクリックし、「OK」ボタンをクリックします。

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspbian_install/image37.png) 

 

## ３
teratermで、SSH - プレインパスワードを使う 
ユーザー名：pi 
でログインします。

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspbian_install/image38.png) 

 

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspbian_install/image39.png) 

無事ログインできました！ 

 

<blockquote class="info">
以下のように
<pre><code>$ cat /etc/debian_version
$ lsb_release -a
$ uname -a</code></pre>
とOSのバージョンを調べますと、今回インストールしたバージョンは、Debian 10ベースの「Linux raspberry 4.19.0-13-amd64」のようです。
</blockquote>

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspbian_install/image40.png)

Windows 10 Pro x64 VMware-workstation-16.1.1 2021-01-11-raspios-buster-i386.iso の組み合わせで作業しています。 ・OSのインストール ・IPアドレスの設定 ・teratermでsshでログイン まで行います。 インストールするＯＳは、正確には、 「Debian Buster with Raspberry Pi Desktop」 になります。 【OSの名称について】 2020年5月に正式名称がRaspbianからRaspberry Pi OSへ変更され、PCとMac向けのRaspbianについても、Raspberry Pi Desktopへと変更されました。（Wikipediaより） OSのisoファイルをダウンロード

Raspberry Pi OSをVMware-workstation-16.1.1にインストール

# はじめに
 
Ubuntu 20.04.2.0 に GitLab をインストールしてみました。 
 
GitLabはGitHubとほぼ同じ機能を有するOSSのソースコード管理ツールです。 
オンプレミスで使う分には完全無料です。 
同じ目的の場合、GitHubが有名ですが、閉じた環境で自力運用したくて、GitLabを選びました。 
（GitHub Enterpriseの場合、オンプレミス運用できるようですが、有料になります。）
 
インストール環境：Ubuntu 20.04.2.0 (VMware上、インターネット接続あり) 
 

# インストール準備
 
<blockquote class="warn">
root権限で作業していますので、全てsudoは省略しています。
</blockquote>

 

パッケージを最新化します。 
```sh
# apt update && apt upgrade
Do you want to continue? [Y/n]: Y
```
※以降基本的にYのため、-yを付けます。 
　-y は、? [y/N]: のようなときに自動的に y とするオプションです。 

<blockquote class="info">
apt update は、パッケージ一覧の更新
apt upgrade は、更新された一覧を元に、実際にパッケージを更新
という動作になります。
</blockquote>

 

curlをインストールします。 
```sh
# apt install -y curl
```

 

# GitLab インストール
 
GitLabをインストールします。 
```sh
# curl -s https://packages.gitlab.com/install/repositories/gitlab/gitlab-ce/script.deb.sh | bash
# apt install -y gitlab-ce
```

 

ホスト名を設定します。
```sh
# vi /etc/gitlab/gitlab.rb
```
```sh
external_url "http://gitlab.itccorporation.jp"
```

 

設定を反映します。
```sh
# gitlab-ctl reconfigure
```

 

# ブラウザアクセス
 
https://にもできますが、今回は、閉じた環境で運用するため、http://のまま利用します。
 

http://gitlab.itccorporation.jp へブラウザでアクセス 

 

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/gitlab_install/image01.png) 

 

ＯＫです！

 

<blockquote class="info">
最初の画面は、root のパスワードの設定です。rootは、GitLab管理者になります。
</blockquote>

 

<a href="https://about.gitlab.com/install/#ubuntu" target="_blank">公式サイトのインストール手順</a>では、postfixのインストールが書かれていましたが、smtpサーバーに直接繋いでメール送信できれば良いため、postfixのインストールは行っていません。 
gmailでのメール送信設定を試してみました。 
↓

# メール送信設定(gmail)

## ２段階認証無し
 
gmailの設定を行います。 
```sh
# vi /etc/gitlab/gitlab.rb
```

```sh
gitlab_rails['smtp_enable'] = true
gitlab_rails['smtp_address'] = "smtp.gmail.com"
gitlab_rails['smtp_port'] = 587
gitlab_rails['smtp_user_name'] = "my.email@gmail.com"
gitlab_rails['smtp_password'] = "my-gmail-password"
gitlab_rails['smtp_domain'] = "smtp.gmail.com"
gitlab_rails['smtp_authentication'] = "login"
gitlab_rails['smtp_enable_starttls_auto'] = true
gitlab_rails['smtp_tls'] = false
gitlab_rails['smtp_openssl_verify_mode'] = 'peer'
```
<blockquote class="info">
<code>gitlab_rails['smtp_openssl_verify_mode'] = 'peer'</code>は、
SMTPサーバのSSL証明書の有効性を検証して、接続先がなりすまされていないことを確認します。
</blockquote>

<blockquote class="info">
my.email@gmail.com は、自分のメールアドレス。my-gmail-password は、Googleアカウントのパスワードになります。
</blockquote>

 

設定を反映します。
```sh
# gitlab-ctl reconfigure
```

 

gitlab-rails consoleで確認してみます。 
smtpが有効かどうか確認します。
```sh
# gitlab-rails console
```

```sh
> ActionMailer::Base.delivery_method
=> :smtp
```
 
⇒ＯＫです。

 

メール送信設定がきちんと設定されているか確認します。
```sh
> ActionMailer::Base.smtp_settings
=> {:authentication=>:login, :address=>"smtp.gmail.com", :port=>587, :user_name=>"my.email@gmail.com", :password=>"my-gmail-password", :domain=>"smtp.gmail.com", :enable_starttls_auto=>true, :tls=>false, :openssl_verify_mode=>"peer", :ca_file=>"/opt/gitlab/embedded/ssl/certs/cacert.pem"}
```
 
⇒ＯＫです。

 

```sh
> Notify.test_email('my.email@gmail.com', 'Hello World', 'This is a test message').deliver_now
(略)
Net::SMTPAuthenticationError (535-5.7.8 Username and Password not accepted. Learn more at)
```
 
⇒メール送信テストでエラーになりました。

 

smtp.gmail.comを利用する場合、Googleアカウントの設定が必要のようです。 
「安全性の低いアプリのアクセス」をオンにしたらうまくいきました。

 

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/gitlab_install/image02.png) 

 

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/gitlab_install/image03.png) 

 

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/gitlab_install/image03-2.png) 

 

```sh
# gitlab-rails console
```

```sh
> Notify.test_email('my.email@gmail.com', 'Hello World', 'This is a test message').deliver_now
```
エラーは起きません。

 
 
メーラーで確認をすると、メールが来ました。
![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/gitlab_install/image06.png) 

 

⇒Ｇｏｏｄ！ 

 

## ２段階認証有り
 
２段階認証をOnにしている場合、別の対応が必要のようです。 
アプリ パスワードを利用したらうまくいきました。

 

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/gitlab_install/image04.png) 

 

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/gitlab_install/image05.png) 

 

```sh
# vi /etc/gitlab/gitlab.rb
```

```sh
gitlab_rails['smtp_enable'] = true
gitlab_rails['smtp_address'] = "smtp.gmail.com"
gitlab_rails['smtp_port'] = 587
gitlab_rails['smtp_user_name'] = "my.email@gmail.com"
gitlab_rails['smtp_password'] = "my-gmail-password"
gitlab_rails['smtp_domain'] = "smtp.gmail.com"
gitlab_rails['smtp_authentication'] = "login"
gitlab_rails['smtp_enable_starttls_auto'] = true
gitlab_rails['smtp_tls'] = false
gitlab_rails['smtp_openssl_verify_mode'] = 'peer'
```
<blockquote class="info">
my-gmail-password をアプリ パスワードにします。
</blockquote>

 

```sh
# gitlab-ctl reconfigure
```

 

```sh
# gitlab-rails console
```

```sh
> Notify.test_email('my.email@gmail.com', 'Hello World', 'This is a test message').deliver_now
```
 
 

メーラーで確認をすると、メールが来ました。
![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/gitlab_install/image06.png) 

 

⇒Ｇｏｏｄ！ 

 

# コンソールでのユーザー登録
 
gitlab-rails console でユーザー登録ができます。

 

まずは、root（管理者）を登録します。
```sh
# gitlab-rails console
```

```sh
> user = User.where(id: 1).first
> user.password = 'パスワード'
> user.password_confirmation = 'パスワード'
> user.save!
```

 

続いて、ユーザーを登録します。

 

```sh
> User.create(
> :username => 'testuser',
> :name => 'Test_User',
> :password => 'test-user-pass',
> :password_confirmation => 'test-user-pass',
> :email => 'my.email@gmail.com',
> :admin => true)
```

 

登録したユーザーにconfirmメールが来ますので、リンクをクリックすると、登録完了になります。 
![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/gitlab_install/image07.png) 

 

できました！

Ubuntu 20.04.2.0 に GitLab をインストールしてみました。 GitLabはGitHubとほぼ同じ機能を有するOSSのソースコード管理ツールです。 オンプレミスで使う分には完全無料です。 同じ目的の場合、GitHubが有名ですが、閉じた環境で自力運用したくて、GitLabを選びました。 （GitHub Enterpriseの場合、オンプレミス運用できるようですが、有料になります。） インストール環境：Ubuntu 20.04.2.0 (VMware上、インターネット接続あり)

Ubuntu 20.04.2.0にGitLabをインストール

# はじめに
 
Wekan Open-Source kanban 
をソースコードを使ってインストールしてみました。 
 
Wekanは、OSSのかんばん管理ツールです。社内タスクの管理、見える化に役立ちます。 
ソースコードは、Node.js、Meteorフレームワークで構成されています。MITライセンスです。 
同じ目的の場合、Trelloが有名ですが、閉じた環境で自力運用したくて、Wekanを選びました。 
 
インストール環境：CentOS Linux release 8.3.2011 (VMware上、インターネット接続あり) 
 
別記事<a href="https://itc-engineering-blog.netlify.app/blogs/knfpjkzmc1" target="_blank">「CentOS8にwekanをインストール(snap編)」</a>では、snapを使い、インストールしましたが、今回は、snapを使わず、dockerでもなく、ソースからインストールしていきます。 
<a href="https://github.com/wekan/wekan" target="_blank">github.com/wekan</a> から rebuild-wekan.sh というのを見つけて、この内容を行えばできそうと思い、やってみました。 
基本的に rebuild-wekan.sh の内容通りでしたが、今回の環境の場合、CentOSのため、rebuild-wekan.sh の序盤 apt-get でいきなりコケますので、dnf, yumで代替して進めています。

 

# インストール準備
 
<blockquote class="warn">
root権限で作業していますので、全てsudoは省略しています。
</blockquote>

 

git cloneでソースコードをコピーしたいので、gitをインストールします。 
```sh
# dnf install git
Is this ok [y/N]: y
```
※以降基本的にyのため、-yを付けます。 
　-y は、? [y/N]: のようなときに自動的に y とするオプションです。 

<blockquote class="info">
dnf = Dandified Yum（ダンディファイド ヤム、略してDNF）
は、RPMベースのパッケージ管理システムを採用しているLinuxディストリビューション用のパッケージマネージャであるYum 3.4のフォークであり、Yumの事実上の後継バージョンです。（Wikipediaより）
Dandified = いきにめかしこんだ、しゃれこんだ
という意味になります。
</blockquote>

 

wekanのソースコードを取得します。 
```sh
# cd /opt
# git clone https://github.com/wekan/wekan.git
# cd wekan
```

 

# Wekan依存関係インストール

rebuild-wekan.sh では、 
`sudo apt-get install -y build-essential gcc g++ make git curl wget npm p7zip-full` 
となっていますので、それに相当することをやっていきます。 
 
開発ツールをまとめてインストールします。 
```sh
# yum -y groupinstall "Development Tools"
```
<blockquote class="info">
UbuntuやDebianのbuild-essential に相当するようです。
autoconf, automake, gcc-c++ ... 等々、開発用のツールが大量にインストールされます。
※今回は最初にdnfでインストールしましたが、ここでgitも入るようです。
</blockquote>

<blockquote class="info">
p7zip-fullに関して、rebuild-wekan.shでは、
<pre><code>#curl https://releases.wekan.team/fibers-multi.7z -o fibers-multi.7z
#7z x fibers-multi.7z
#rm fibers-multi.7z</code></pre>
とコメントアウトされていますので、インストールしませんでした。
</blockquote>

 

npmをインストールします。 
```sh
# dnf -y install npm
```
<blockquote class="info">
npmは、Node.jsのパッケージ管理システムです。
</blockquote>

 

nodeをインストールします。 
```sh
# npm -g install n
# n 12.22.1
```
<blockquote class="info">
nは、Node.js(node)のバージョンを管理するツールです。
今回、12.22.1 を指定しています。（rebuild-wekan.shがそうなっているため。）
</blockquote>

 

npmを最新版に更新して、node-gypをインストールします。 
```sh
# npm -g install npm
# npm -g install node-gyp
```
<blockquote class="info">
node-gyp(gyp=Generate Your Projects)は、Node.jsのネイティブアドオンモジュールをコンパイルするために、Node.jsで書かれたクロスプラットフォームのコマンドラインツールです。
ネイティブアドオンモジュールとは、Node.js本体を拡張するプログラム(C/C++)となります。
</blockquote>

 

fibersをインストールします。
```sh
# mkdir -p /usr/local/lib/node_modules/fibers/.node-gyp
# npm -g install fibers
```
<blockquote class="info">
fibersというのは、Node.jsの非同期処理用のライブラリです。今回は、これがNode.jsのネイティブアドオンモジュールにあたるようです。
</blockquote>

 

Meteorをインストールします。
```sh
# curl https://install.meteor.com | bash
```
<blockquote class="info">
https://install.meteor.comの内容は、シェルスクリプトで、ダイレクトに実行しているのですが、ファイル（meteor-bootstrap-${PLATFORM}.tar.gz）をダウンロードするところが有り、タイミングによるかもしれませんが、ここで、かなり時間がかかりました。（１時間くらい）
</blockquote>

 

# Wekanのビルド

meteor buildコマンドでWekanをビルドします。
```sh
# rm -rf node_modules .meteor/local .build
# chmod u+w *.json
# npm install
# meteor build .build --directory --allow-superuser
```
<blockquote class="info">
rootユーザーの場合、
--allow-superuser
を付けないとエラーになりますので、付けて実行します。
</blockquote>

<blockquote class="alert">
meteor buildは、かなりメモリを消費するようです。メモリ1GBで行ったときは、処理が遅延し、２時間以上かかりました。メモリ4GB程度にすることをお勧めします。
</blockquote>

 

ゴミ掃除します。
```sh
# rm -rf .build/bundle/programs/web.browser.legacy
# cd .build/bundle/programs/server
# rm -rf node_modules
# chmod u+w *.json
# npm install
# cd ../../../..
# cd .build/bundle
# find . -type d -name '*-garbage*' | xargs rm -rf
# find . -name '*phantom*' | xargs rm -rf
# find . -name '.*.swp' | xargs rm -f
# find . -name '*.swp' | xargs rm -f
```
 

ここまでで、rebuild-wekan.sh の内容は終了です。 

 

起動してみます。
```sh
# cd /opt/wekan
# ./start-wekan.sh
/opt/wekan/.build/bundle/programs/server/node_modules/fibers/future.js:313
 throw(ex);
 ^
```

 

エラーになりました。それもそのはず、mongodbをインストールしていませんでした。

 

# mongodbインストール
 
mongodbのyumリポジトリ情報を追加します。
```sh
# vi /etc/yum.repos.d/mongodb-org.repo
```

```sh
[mongodb-org-4.4]
name=MongoDB Repository
baseurl=https://repo.mongodb.org/yum/redhat/$releasever/mongodb-org/4.4/x86_64/
gpgcheck=1
enabled=1
gpgkey=https://www.mongodb.org/static/pgp/server-4.4.asc
```

 

mongodb(クライアント、サーバー)4.4をインストールします。
```sh
# yum install -y mongodb-org
# mongo -version
MongoDB shell version v4.4.5
```

 

mongodbを起動します。
```sh
# systemctl enable mongod
# systemctl start mongod
```

 

もう一度、start-wekan.shでWekanを起動してみます。
```sh
# ./start-wekan.sh
Presence started serverId=a58yzr6zJwvtv3XDg
```
起動しました！ 
 
CTRL + C で停止して、systemdに登録します。 

 

# wekan起動設定
 
wekan起動時の環境変数を記述します。
```sh
# vi /opt/wekan/.build/bundle/.env
```
```sh
MONGO_URL='mongodb://127.0.0.1:27017/wekan'
ROOT_URL='http://wekan.itccorporation.jp'
MAIL_URL='smtp://user:pass@mailserver.example.com:587'
MAIL_FROM='wekan@itccorporation.jp'
PORT=3001
```

 

systemdに登録します。
```sh
# vi /etc/systemd/system/wekan.service
```
```sh
MONGO_URL='mongodb://127.0.0.1:27017/wekan'
[Unit]
Description=Wekan Server
After=syslog.target
After=network.target

[Service]
Type=simple
Restart=on-failure
StartLimitInterval=86400
StartLimitBurst=5
RestartSec=10
ExecStart=/usr/local/bin/node /opt/wekan/.build/bundle/main.js
EnvironmentFile=/opt/wekan/.build/bundle/.env
ExecReload=/bin/kill -USR1 $MAINPID
RestartSec=10
WorkingDirectory=/opt/wekan
StandardOutput=syslog
StandardError=syslog
SyslogIdentifier=Wekan

[Install]
WantedBy=multi-user.target
```
<blockquote class="info">
root権限起動のため、
<pre><code>User=wekan
Group=wekan</pre></code>
のような記述は省略しています。
インターネットへの疎通が無い社内の閉じたLAN限定で運用するため、root起動ですが、通常は、ユーザー権限でセットアップ、起動した方が良いと思います。
</blockquote>

 

```sh
# systemctl daemon-reload
# systemctl start wekan
# systemctl enable wekan
```

 

# ブラウザアクセス
 
ファイアウォール有りで、外から見る場合、3001ポートを開ける必要があります。

```sh
# firewall-cmd --zone=public --add-port=3001/tcp --permanent
# firewall-cmd --reload
```

 

http://wekan.itccorporation.jp:3001 へブラウザでアクセス 

 

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/wekan_install/image01.png) 

 

できました！

Wekan Open-Source kanban をソースコードを使ってインストールしてみました。 Wekanは、OSSのかんばん管理ツールです。社内タスクの管理、見える化に役立ちます。 ソースコードは、Node.js、Meteorフレームワークで構成されています。MITライセンスです。 同じ目的の場合、Trelloが有名ですが、閉じた環境で自力運用したくて、Wekanを選びました。 インストール環境：CentOS Linux release 8.3.2011 (VMware上、インターネット接続あり) 別記事「CentOS8にwekanをインストール(snap編)」では、snapを使い、インストールしましたが、今回は、snapを使わず、dockerでもなく、ソースからインストールしていきます。 github.com/wekan から rebuild-wekan.sh というのを見つけて、この内容を行えばできそうと思い、やってみました。 基本的に rebuild-wekan.sh の内容通りでしたが、今回の環境の場合、CentOSのため、rebuild-wekan.sh の序盤 apt-get でいきなりコケますので、dnf, yumで代替して進めています。

CentOS8にwekanをインストール(ソースからビルド編)

# はじめに
 
Wekan Open-Source kanban 
をsnapを使ってインストールしてみました。 
 
Wekanは、OSSのかんばん管理ツールです。社内タスクの管理、見える化に役立ちます。 
ソースコードは、Node.js、Meteorフレームワークで構成されています。MITライセンスです。 
同じ目的の場合、Trelloが有名ですが、閉じた環境で自力運用したくて、Wekanを選びました。 
 
インストール環境：CentOS Linux release 8.3.2011 (VMware上、インターネット接続あり) 

 

# snapインストール
 
<blockquote class="warn">
root権限で作業していますので、全てsudoは省略しています。
</blockquote>

 

EPELリポジトリを追加します。 
```sh
# dnf install epel-release
Is this ok [y/N]: y
```
※以降基本的にyのため、-yを付けます。 
　-y は、? [y/N]: のようなときに自動的に y とするオプションです。

 

パッケージを更新します。 
```sh
# dnf -y upgrade
```

 

snapdをインストールします。 
```sh
# dnf install -y snapd
```
<blockquote class="info">
snapdは、パッケージ管理システムsnapのデーモン（常駐プログラム）です。パッケージ管理システムは、CentOSで言うと、yum、dnf。Ubuntuで言うと、aptみたいなものです。
snapは、Linuxのディストリビューション（CentOS,Ubuntu,Rasbery pi,…）を気にしなくてアプリをインストールできる仕組みです。コンテナ技術でファイルシステムとは切り離されて隔離した環境下で動作しますので、既存環境を汚しません。アプリを削除するときも他のアプリの依存環境に影響しません。
snapパッケージは、「Snap Store」と呼ばれる場所から配布されています。
</blockquote>

 

snapd.socketをアクティベーションします。 
（/usr/libexec/snapd/snapdを起動します。） 
```sh
# systemctl enable --now snapd.socket
```
<blockquote class="info">
この時、snapdが起動します。snapdは常駐プログラムですので、snapコマンドで操作することになります。
</blockquote>

 

# wekanインストール
 
snapコマンドで、Snap Storeからwekanをインストールします。
```sh
# snap install wekan
```
<blockquote class="warn">
<pre><code># systemctl enable --now snapd.socket</code></pre>
のすぐ後に実行すると、
<pre><code>error: too early for operation, device not yet seeded or device model not acknowledged</code></pre>
とエラーになります。数秒待って実行する必要があります。（再起動が確実です。）
</blockquote>

 

wekanの設定を行います。 
http://wekan.itccorporation.jp:3001 でアクセスし、 
メールサーバー：mailserver.example.com:587 
メール送信ユーザー：user 
メール送信パスワード：pass 
とします。 
```sh
# snap set wekan root-url='http://wekan.itccorporation.jp'
# snap set wekan port='3001'
# snap set wekan mail-url="smtp://user:pass@mailserver.example.com:587"
```

 

wekanを再起動します。（設定の反映）

```sh
# systemctl restart snap.wekan.wekan
```

 

# ブラウザアクセス
 
ファイアウォール有りで、外から見る場合、3001ポートを開ける必要があります。

```sh
# firewall-cmd --zone=public --add-port=3001/tcp --permanent
# firewall-cmd --reload
```

 

http://wekan.itccorporation.jp:3001 へブラウザでアクセス 

 

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/wekan_install/image01.png) 

 

できました！

Wekan Open-Source kanban をsnapを使ってインストールしてみました。 Wekanは、OSSのかんばん管理ツールです。社内タスクの管理、見える化に役立ちます。 ソースコードは、Node.js、Meteorフレームワークで構成されています。MITライセンスです。 同じ目的の場合、Trelloが有名ですが、閉じた環境で自力運用したくて、Wekanを選びました。 インストール環境：CentOS Linux release 8.3.2011 (VMware上、インターネット接続あり) snapインストール EPELリポジトリを追加します。 # dnf install epel-release Is this ok [y/N]: y パッケージを更新します。 # dnf -y upgrade