create_apのプロジェクトはメンテ停止のようですね(This project is no longer maintained.)。
方針転換して改めてアクセスポイントを２通りの方法で設定してみます。
まぁ以前のバージョンは結構不安定だったということもあるのですが…。
インターネット環境がない、あるいはインターネットに接続できない端末から、Wi-Fi接続で地図をブラウズしてみましょう。
スマホならすでにGoogle Mapsという便利な環境があるので問題なしですが、Wi-FiとGPSしかないタブレットなどは？近くにインターネットにつながるアクセスポイントが無い場合は？（だいぶ極端な想定ですが）
タイルサーバーにしたラズパイで現在地を確認してみましょう。
こんな感じです。
端末をダイレクトにラズパイ（タイルサーバー）に接続してブラウズしてみます。
ラズパイをタイルサーバーにするのはこのページやこのページ参照
なおラズパイをアクセスポイントにする場合、起動時外部ストレージがUSBポートに挿入されていると起動が止まってしまうことがあります（なぜ？USBストレージに何かを見に行ってる？原因は分かりません）。
タイルデータは起動用MicroSDに保存するようにしておきます（レベル18のデータは大きすぎるので今回は省略しておきます）。
/var/lib/mod_tile/ajt/0 1 2 3 …. 17
パーミッション設定
|
1 |
sudo chmod -R a+x /var/lib/mod_tile |
アクセスポイント設定
このページなどでWi-Fiを設定していたような場合、netplanのWi-Fi設定を削除しておきます。
cd /etc/netplan
sudo nano 99-network-config.yaml
wifisの記述部部分を削除
以下のファイルも削除しておきます。
sudo rm /var/run/wpa_supplicant/wlan0
① wpa_supplicantを使ってみます
|
1 2 3 4 |
cd /etc/wpa_supplicant 新規作成 sudo nano wpa_supplicant.conf |
以下のような設定値を追記。
＜SSID＞と＜パスワード＞は任意に設定してください。
例：SSID－＞raspiap、パスワードー＞ap123456
ctrl_interface=/var/run/wpa_supplicant
network={
ssid=”＜SSID＞”
mode=2
key_mgmt=WPA-PSK
psk=”＜パスワード＞”
frequency=2437
}
DHCPサーバのインストールと起動
|
1 2 3 4 5 |
sudo apt-get install isc-dhcp-server dhcpd.confを編集 sudo nano /etc/dhcp/dhcpd.conf |
以下のような設定値にします。デフォルトからは、authoritativeのコメントアウトの解除とsubnetの追記でいけると思います。
default-lease-time 600;
max-lease-time 7200;
ddns-update-style none;
authoritative;
subnet 192.168.12.0 netmask 255.255.255.0 {
range 192.168.12.10 192.168.12.100;
option routers 192.168.12.1;
option subnet-mask 255.255.255.0;
option domain-name-servers 10.0.0.1;
}
以下を起動します。
|
1 2 3 |
sudo ip link set wlan0 up sudo systemctl start isc-dhcp-server |
ラズパイを再起動
|
1 |
sudo shutdown -r now |
再起動後、テストしてみます。
|
1 |
sudo wpa_supplicant -iwlan0 -c/etc/wpa_supplicant/wpa_supplicant.conf |
こういう感じになります。
端末からの接続の待ち受け。
端末側では一応アクセスポイント（例：raspiap）が見えていると思います。
ただ、アドレスを振り出せないので、SSHで接続しようとしても
connect failed: EHOSTUNREACH（no route to host）
みたいなエラーになります。
ブート時の自動起動の設定をしておきます。
|
1 2 3 4 5 |
sudo apt-get install ifupdown interfacesを編集 sudo nano /etc/network/interfaces |
以下を記述
auto wlan0
iface wlan0 inet static
netmask 255.255.255.0
broadcast 192.168.12.255
address 192.168.12.1
wpa-conf /etc/wpa_supplicant/wpa_supplicant.conf
isc-dhcp-serverを編集
|
1 |
sudo nano /etc/default/isc-dhcp-server |
INTERFACESv4=”wlan0″
自動起動するようにします。
|
1 2 |
sudo systemctl enable isc-dhcp-server sudo systemctl start isc-dhcp-server |
ラズパイ再起動
② hostapdを使ってみます
DHCPサーバの起動
|
1 2 3 |
sudo apt-get install isc-dhcp-server sudo nano /etc/dhcp/dhcpd.conf |
default-lease-time 600;
max-lease-time 7200;
ddns-update-style none;
authoritative;
subnet 192.168.12.0 netmask 255.255.255.0 {
range 192.168.12.10 192.168.12.100;
option routers 192.168.12.1;
option subnet-mask 255.255.255.0;
option domain-name-servers 10.0.0.1;
}
|
1 2 3 |
sudo ip link set wlan0 up sudo systemctl start isc-dhcp-server |
hostapdインストール
|
1 2 3 |
sudo apt-get install hostapd sudo systemctl unmask hostapd sudo systemctl enable hostapd |
設定
|
1 2 3 |
sudo apt-get install ifupdown sudo nano /etc/network/interfaces |
auto wlan0
iface wlan0 inet static
netmask 255.255.255.0
broadcast 192.168.12.255
address 192.168.12.1
|
1 |
sudo nano /etc/default/hostapd |
DAEMON_CONF=”/etc/hostapd/hostapd.conf”
hostapd.confを作成しておきます。
|
1 2 |
sudo zcat /usr/share/doc/hostapd/examples/hostapd.conf.gz sudo bash -c "zcat /usr/share/doc/hostapd/examples/hostapd.conf.gz > /etc/hostapd/hostapd.conf" |
hostapd.confを設定
|
1 |
sudo nano /etc/hostapd/hostapd.conf |
interface=wlan0
hw_mode=g
channel=1
auth_algs=1
wpa=2
wpa_key_mgmt=WPA-PSK
rsn_pairwise=CCMP
ssid=＜SSID＞
wpa_passphrase=＜パスワード＞
hostapdを再起動
|
1 |
sudo systemctl restart hostapd |
ラズパイを再起動
|
1 |
sudo shutdown -r now |
タブレット側
設定ー＞Wi-Fiー＞現在のネットワークをraspiapに変更
例えばこんな画面です。
新しいアクセスポイントに変更します。
SSHで接続するとこんな感じです。
タイルサーバーからの地図配信を確認してみる
このページやこのページでタイルサーバーを作った際、確認用のlf.htmlファイルを作成しましたが、そこではLeafletライブラリ等をWebサイトから読み込む仕様になっていました。
今回のアクセスポイント化でインターネットを使って外部にアクセスすることはできません（NATの設定が必要）。
なのでライブラリ等はローカルに持っておく必要があります。
最小限のスタイルシートやJavaScriptライブラリなどLeaflet一式をzip化しました。ダウンロードして解凍後SAMBAなどで
/var/www/htmlにコピーします。
cssとjs、imagesの3つのフォルダーのパーミッションを変更しておきます。
|
1 2 3 |
sudo chmod 777 /var/www/html/js sudo chmod 777 /var/www/html/css sudo chmod 777 /var/www/html/images |
【lf.html】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html style="height:100%;margin:0;padding:0;"> <title>Leaflet page with OSM render server selection</title> <meta charset="utf-8"> <link rel="stylesheet" href="./css/leaflet.css" /> <script src="./js/leaflet.js"></script> <script src="./js/leaflet-hash.js"></script> <style type="text/css"> .leaflet-tile-container { pointer-events: auto; } </style> </head> <body style="height:100%;margin:0;padding:0;"> <div id="map" style="height:100%"></div> <script> //<![CDATA[ var map = L.map('map').setView([34.673791, 135.511708], 5); L.tileLayer('http://192.168.12.1/hot/{z}/{x}/{y}.png', {maxZoom:18,maxNativeZoom:17, attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); var hash = L.hash(map) //]]> </script> </body> </html> |
注：
attributionに記述している©は大事です。OpenStreetMapのデータを使っている上でのルールでありマナーですので必ず表示しておいてください。
アクセスしてみます。
http://192.168.12.1/lf.html
こういうふうに表示されればOK。
現在地表示のWebサービスを作ってみる
GPSが実装されているタブレット端末等が前提です。
lf.htmlにgeolocationを記述する場合
これで現在地を測位して表示しますが、ブラウザーなどで表示しようとしてもhttpでアクセスすると現在地情報の利用は許可されません。
現在、たいていのブラウザーはhttpsでアクセスする必要があります。
タブレット等の端末側では事前に「設定」で位置情報利用を許可しておきます。
次いでラズパイ側でApacheでSSL通信を使えるようにします。
SSLモジュールとバーチャルホストを有効化しておきます。
|
1 2 3 |
sudo a2enmod ssl sudo a2ensite default-ssl sudo service apache2 restart |
nmapで通信ポートの確認
|
1 2 |
sudo apt install nmap nmap localhost |
443ポートがオープンされています。
これで、サンプルのSSL証明書でSSL通信が可能になっています。
geolocationでGPSの値を取得して地図に表示するhtmlファイルです。
【lf.html】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
<!DOCTYPE html> <html style="height:100%;margin:0;padding:0;"> <title>Leaflet page with OSM render server selection</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/leaflet.css" /> <script src="js/leaflet.js"></script> <script src="js/leaflet-hash.js"></script> <style type="text/css"> .leaflet-tile-container { pointer-events: auto; } </style> </head> <body style="height:100%;margin:0;padding:0;"> <div id="map" style="height:100%;z-index:1;"></div> <input type="button" onClick="currentpos()" value="current pos" style="top:10px;left:100px;width:100px;height:100px;position:absolute;z-index:100;"> <script> //<![CDATA[ var map = L.map('map').setView([34.673791, 135.511708], 5); var centerIcon = L.icon({ iconUrl: 'images/cross-line.png', iconSize: [36, 36], iconAnchor: [18, 18] }); var center_marker = L.marker([map.getCenter().lat, map.getCenter().lng],{icon: centerIcon,zIndexOffset:1000,interactive:false}).addTo(map); L.tileLayer('http://192.168.12.1/hot/{z}/{x}/{y}.png', {maxZoom:18,maxNativeZoom:17, attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); var hash = L.hash(map) //]]> </script> <script> function currentpos(){ if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(successCallback,errorCallback, { maximumAge: 3000, timeout: 60000, enableHighAccuracy: true }); } else { alert("not use it !!"); } } function successCallback(position) { var geo_text = "緯度:" + position.coords.latitude + "\n"; geo_text += "経度:" + position.coords.longitude + "\n"; geo_text += "高度:" + position.coords.altitude + "\n"; geo_text += "位置精度:" + position.coords.accuracy + "\n"; geo_text += "高度精度:" + position.coords.altitudeAccuracy + "\n"; geo_text += "移動方向:" + position.coords.heading + "\n"; geo_text += "速度:" + position.coords.speed + "\n"; var date = new Date(position.timestamp); geo_text += "取得時刻:" + date.toLocaleString() + "\n"; alert(geo_text); var latlng = new L.LatLng(position.coords.latitude, position.coords.longitude); map.setView(latlng, 15); center_marker.setLatLng(latlng); } function errorCallback(error) { var err_msg = ""; switch(error.code){ case 1: err_msg = "位置情報の利用が許可されていません"; break; case 2: err_msg = "デバイスの位置が判定できません"; break; case 3: err_msg = "タイムアウトしました"; break; } alert(err_msg); } </script> </body> </html> |
以下にアクセス
https://192,168.12.1/lf.html
サンプルSSLなのでこんなメッセージが出ます。
問題ないのでアクセスしてください。
許可してください。
このボタンをクリック（タップ）すれば、測位が開始されます。
上記のコードでは３秒のインターバルで測位され、タイムアウトは1分です。
測位が完了すると、その場所に移動して、赤い十字が表示されます。
ラズパイ・タイルサーバーをポータブルにする
ラズパイは３B/B+なら5V/2.4Aくらいで動作します。
モバイルバッテリならこの程度の出力を持つものは結構安く手に入ります。
こんな構成でいけます。
なお、本当にラズパイが起動しているかどうかは、端末側のWi-Fi設定でraspiap（アクセスポイント）が見えているかどうかで判断できます。
見えていなければ再起動してお待ちください。
タイルデータをMicroSDに持っている場合は問題ないですが、なんか理由があってMicroSDは最小構成の16GBでタイルデータを外部ストレージに持たせた場合はどうでしょう？
起動時にUSBメモリーを挿したままだと、起動が止まってしまうことがあります（原因は？ですが）。
起動後に挿入するにしても、タブレットからSSHで接続してマウントするのも面倒です。
ここはひとつ、起動後にUSBストレージを挿入したら自動で検知して、マウント実行し、抜いたらアンマウントするように設定してみます。
ラズパイ起動後にUSBストレージを挿入したら自動で検知して、マウントする
そもそもタイルサーバーって何？
シングルボードコンピューターにOpenStreetMapのタイルサーバーを立ててみる
端末にGPSがない！場合は？
ラズパイにGPS（モジュールは2000～3000円から組立済みの製品で7000円くらい）
端末はなんでもいいの？
中古のSIMなしスマホやタブレットでやってみましたが、問題なしでした。
Leave a Reply