2017年4月22日土曜日

OpenLayers 3 を使ってみよう(その21:Highcharts でルートの標高グラフを表示)

 これは,OpenLayers 3 を使ってみよう(その20:Open Street Map を表示させる)からの続きになる。 OpenLayers 3 を使ってみよう(その0:はじめに:地理院地図を表示)に目次がある。 その13までのページでは OpenLayers v3.7.0 で書いてきたが,ここでは OpenLayers 3.20.1 で書かれている。
 前回(その20:Open Street Map を表示させる)は,その19:その9からその18までのまとめに Open Street Map の表示を追加してみた。 今回は,Highcharts というグラフ表示のスクリプトを使って,経路の標高を表示させよう。

2017年3月28日火曜日

Blogger で highlight.js を使ってみた

 このサイトでは,FreeBSD だの OpenLayers だの,コンピュータのプログラム関連のことを書いていることも多い。 そんな時,どうしても必要なのがソースコードの表示である。 つい最近までは,
function() {
    hogehoge;
}
のような表示の仕方をしていた(今でもこの形式のものが多いが…)。

 しかし,この表示だとあまりにプレーンすぎるので,自動的に色つけなどをして表示してくれるものが欲しかった。 候補としては SyntaxHighlighter というのがあるのは知っていた(SyntaxHighlighter を使ってみた )のだが, 今回 highlight.js というのに挑戦してみた,というお話。

 きっかけはと言うと,前回の投稿にある個人サイトの https: 化である。 highlight.js は https: 化とは直接は関係ないが, https: サイトを作る際に,ページ内で http: プロトコルのサイトからファイルを読み込んでいると「このサイトは安全ではない」と言われる。 その件を Blogger に書いている時に, Blogger サイトはどうなんや?と思い始めたのが一つのきっかけとなっている。 しかし,https: 化と highlight.js はすぐには結びつかないが…。

 そんな時に,ソースコードの表示はやはり highlight させたいなぁ,と思い始めたのだった。 以前「SyntaxHighlighter を使ってみた 」で SyntaxHighlighter に挑戦したが,いまいちうまく働かない部分があったので,その時は諦めてしまっていた。 しかし,今回,ふと「再挑戦」してみようと思った,というのが直接のきっかけである。

 最終的に highlight.js を使うことにしたが,まずは SyntaxHighlighterhighlight.js の比較をしてみたいと思う。

2017年3月21日火曜日

MyDNS と Let's Encrypt を使って,FreeBSD 上の apache24 を https 化してみた(その5)

 FreeBSD 上の apache24 で運用している個人サイトの https 化(通信の暗号化)の話の(その4)である。
目次
 (a) その1:MyDNS を使って web サーバーをたてる
 (b) その2:オレオレ認証を使った https 化
 (c) その3:Let's Encrypt を使ったサーバー認証
 (d) その4:vhost や ssl などの apache24 の設定
 (e) その5:サイトの内容に関する注意点(今回,最終)

 今回はセキュアなサイトを作る際の注意点について書こう
何を書きたいかというと,apache で https: 化を行っても,内容の記載によってはサイトが安全とはならない場合があるので,そのあたりについて書こうと思う。

 ここまで,web サイトの通信の暗号化の技術的な面について書いてきたが,内容によってはサイトが「安全ではない」とされてしまうことがあった。 私も,個人のサイトで暗号化をして,一番簡単なテストページならブラウザに誉めてもらえるようになったが,いざ肝心なページを見に行くと, この接続は安全ではありませんだの一部が安全でないためブロックしましただのと言われてしまうことがあった。

 例えば Firefox の場合,この接続は安全ではありませんと言われる場合は,下の画像のようにアドレスバーの左の鍵マークが灰色+黄色の警告マークになる。

2017年3月20日月曜日

MyDNS と Let's Encrypt を使って,FreeBSD 上の apache24 を https 化してみた(その4)

 FreeBSD 上の apache24 で運用している個人サイトの https 化(通信の暗号化)の話の(その4)である。
目次
 (a) その1:MyDNS を使って web サーバーをたてる
 (b) その2:オレオレ認証を使った https 化
 (c) その3:Let's Encrypt を使ったサーバー認証
 (d) その4:vhost や ssl などの apache24 の設定(今回)
 (e) その5:サイトの内容に関する注意点(最終)

 今回は暗号化に際しての apache の設定について書いておこう。

 その2:オレオレ認証を使った https 化でも apache の設定について書いたが,今回は Let's Encrypt を使う場合の設定の変更点や,1台のマシンに複数のホスト名をつける話(バーチャルホスト),古いサイト名へのアクセス(http:でのアクセス)の強制的な https: への移行,などについて書こうと思う。

(1) 証明書の登録
 まずは Let's Encrypt によるサーバーの証明書(ドメイン認証の証明書)を apache に登録しよう。 記入するのは FreeBSD の場合「/usr/local/etc/apache24/extra/httpd-ssl.conf」である。 その中の「SSLCertificateFile」と「SSLCertificateKeyFile」を書き直せばよい。 Let's Encrypt による証明書は「/usr/local/etc/letsencrypt/live/」に最新版があるので,それらを指定している。
SSLCertificateFile "/usr/local/etc/letsencrypt/live/www.hogehoge.mydns.jp/fullchain.pem"
SSLCertificateKeyFile "/usr/local/etc/letsencrypt/live/www.hogehoge.mydns.jp/privkey.pem"
 これで apache を再起動すればブラウザも安全なサイトと表示してくれるはずである。

(2) バーチャルホスト
 証明書を登録すれば安全なサイトになるが,以前の暗号化前のサイト名でのアクセスへの対処や,1台のマシンに異なるサイト名でアクセスをさせたい場合などがあるため, バーチャルホストを登録しておくのがよい。

MyDNS と Let's Encrypt を使って,FreeBSD 上の apache24 を https 化してみた(その3)

 FreeBSD 上の apache24 で運用している個人サイトの https 化(通信の暗号化)の話の(その3)である。
目次
 (a) その1:MyDNS を使って web サーバーをたてる
 (b) その2:オレオレ認証を使った https 化
 (c) その3:Let's Encrypt を使ったサーバー認証(今回)
 (d) その4:vhost や ssl などの apache24 の設定
 (e) その5:サイトの内容に関する注意点(最終)

 今回は Let's Encrypt でサーバー証明書(正しくはドメイン認証)を取得して,より安全な通信を確保する話をしてみよう。

 Let's Encrypt は,無料でドメイン証明書を発行してくれるサービスであり, いろんな企業が後援しているらしい。 Let's Encrypt は日本語サイトなので,ハードルは高くはないと思う。 ちなみに,使い方は Let's Encrypt の使い方や, ユーザーガイドを見るといいと思う。 コマンドは コマンド一覧に記載がある。

 Let's Encrypt を使う際の注意点としては,
 「一定期間内に取得できる認証数に制限(上限)がある」
 「認証要求時に apache を止めないといけないことがある(止めない方法もあるらしい)」
 「認証の証明書の有効期限は90日なので,更新が必要」
などがある。

2017年3月19日日曜日

MyDNS と Let's Encrypt を使って,FreeBSD 上の apache24 を https 化してみた(その2)

 FreeBSD 上の apache24 で運用している個人サイトの https 化(通信の暗号化)の話の(その2)である。
目次
 (a) その1:MyDNS を使って web サーバーをたてる
 (b) その2:オレオレ認証を使った https 化(今回)
 (c) その3:Let's Encrypt を使ったサーバー認証
 (d) その4:vhost や ssl などの apache24 の設定
 (e) その5:サイトの内容に関する注意点(最終)

 今回は,通称オレオレ認証(自己署名証明書)を使って,apache24 の https 化の設定をしてみよう。
必要なものは,
 ・秘密鍵(private key)
 ・証明書署名要求(csr)
 ・サーバー証明書(crt)
である。 これら(実際には key ファイルと crt ファイル)があれば,https 化が可能となる。 今回はオレオレ証明書をopensslで作る(詳細版) (ろば電子が詰まっている)を参考にした。

MyDNS と Let's Encrypt を使って,FreeBSD 上の apache24 を https 化してみた(その1)

 個人用のサイトを FreeBSD 上の apache24 で作っている。 今回はそれを https 化(通信の暗号化)してみた。 その話を書こうと思う。

 まず,前提を書いておこう。
(1) OS は FreeBSD を使っている。バージョンは10.3だが,そろそろ11に上げないと,と思っている。

(2) web server は apache24 を使っている。これは /usr/ports/ からインストールしたものである。
  web server 用に,cgi(p5-CGI-4.35)や php(php5.6.30) も使っているが,今回の件では特に問題はなかった。

(3) サーバーが設置してあるネットワークは,数日経つとプロバイダーが IP アドレスを勝手に変更してしまう。
  そのため,Dynamic DNS (DDNS,動的 DNS) として MyDNS.JP のお世話になっている。

 このような環境下で,FreeBSD 上の apache24 の通信の暗号化に挑戦してみた,というお話し。 今回もいろいろなサイトを参考にしたが,結構寄せ集めになってわからなくなってきたので,まとめておこうと思ったのが今回の投稿である。 分量として結構あるので,数回に分けようと思う。 そこで目次を用意してみた。

目次
 (a) その1:MyDNS を使って web サーバーをたてる(今回)
 (b) その2:オレオレ認証を使った https 化
 (c) その3:Let's Encrypt を使ったサーバー認証
 (d) その4:vhost や ssl などの apache24 の設定
 (e) その5:サイトの内容に関する注意点(最終)

 今回は,MyDNS.JP にアカウントを取得して,DDNS で web サーバーを立ち上げる話について書こう。

2017年2月14日火曜日

OpenLayers のバージョンが 4.0.1 になっていた

OpenLayers 3 を使ってみよう(その0:はじめに:地理院地図を表示)に OpenLayers 3 に関する投稿の目次があるので参考にしてみて欲しい。

 これまで,2014年9月から OpenLayers 3 を使ってみよう(その0:はじめに:地理院地図を表示)として,ちょこちょこと OpenLayers 3 の使い方について書いてきた。 2017年1月にはその OpenLayers 3 の最新バージョンが 3.20.1 になっていた。 いやぁ,早いもんだねぇ,と思っていたら,2017年2月に入ってしばらくすると,OpenLayers のバージョンが 4.0.1 にあがっている…。い,いつの間に?という衝撃を感じた。 しかし,せっかく OpenLayers 3 の使い方について書いてきたので,OpenLayers 4.0.1 についても書こうと思ったのが,今回のお話し。

 実は,2017年2月に見た時は,OpenLayers 4.0.0 だった。 でも,多くの場合と同じように最初のリリースはバグが結構ああったみたいで,すぐにバグフィックス版が 4.0.1 として出たのだった。 以前,OpenLayers 2 が OpenLayers 3 に上がった時には,大幅な変更があり,それまで作っていたサンプルを位置から書き直す感じだった。 今回,OpenLayers 3 が OpenLayers 4.x.x になったので,どれだけ変わったんやろ?と思ったが,実はいうほど中身は変わっていない。 しかし,なぜメジャーバージョンが 3 から 4 になったのか? それは,バージョン番号の付け方の方針を変えたから,ということみたい。

2017年1月1日日曜日

明けましておめでとうございます

 明けましておめでとうございます。

 昨年は,皆さんにとってどんな年でしたか? 私は,京都マラソン,大阪マラソンに参加し,なんとか完走しました。
また,剱岳,富士山,奥穂高岳に登って,ちょっとだけ登山家になった気分でした。

本年が皆さんにとってよい年になりますように!
本年もよろしくお願いします。

2017年1月元旦
Matsup

2016年12月1日木曜日

六甲全山縦走,勝手にレベルを決めてみた

 六甲全山縦走のレベルを決めてみた。まぁ,個人的に勝手に言ってるだけなので,あまり深く考えないでほしい。また,レベルが上がったからと言っても認定証も何もないのであしからず。あくまで自己満足の世界です。

 六甲全山縦走と言っても,いろんなコースが考えられるので,ここでは神戸市発行の六甲全山縦走マップのコースを念頭においている。以後,六甲全山縦走マップと書くのは神戸市発行の六甲全山縦走マップのことである。神戸市主催の六甲全山縦走大会は当初塩屋が起点だったので,六甲全山縦走マップには塩屋から旗振山に至るルートも細い線で描いてある。そのため,ここではスタート地点は須磨浦公園でも塩屋でもよいとしよう。実際に歩くと,距離は多少伸びるが,塩屋から歩く方が序盤の傾斜がましなのでラクかもしれない。また,鉄拐山は山頂を行くルートとトラバースルート(迂回路)の両方に線が描かれている。さらに,神戸市主催の六甲全山縦走大会では六甲全山縦走マップに描かれていないショートカットルートを歩いても良いことになっている。主なショートカットをまとめると,
 ・鉄拐山の山頂を迂回(マップに記載)
 ・三国池下から三国岩付近を通らず,車道に沿って丁字ヶ辻へ行くルート
 ・六甲ガーデンテラスの先(より正確には旧極楽茶屋跡から鉢伏山トンネル手前まで)で,登山道ではなく,アップダウンの少ない車道沿いを行く
である。ここでは,これらのショートカットルートを歩いても六甲全山縦走としよう。また,これ以降「地図通り」という場合,スタート地点が須磨浦公園か塩屋かに関わらず,鉄拐山の山頂を通って六甲全山縦走マップ通りに歩くルートを意味する。

レベル0:3つ以上の分割での六甲全山縦走路の踏破
 まずは分割での六甲全山縦走の達成である。コースは六甲全山縦走マップに準じ,ショートカットでも地図通りでもいいことにしよう。いずれにせよ,須磨浦公園ないしは塩屋から宝塚までを3つ以上の分割で歩いたら良しとしよう。しかし,まだ分割数が多く全山縦走と言うのは微妙なのでレベルはゼロにしてみた。
 3分割の場合なら,分割のパターンの一例として以下のようなものが考えられる。
  ・須磨浦公園(塩屋)-- 神戸電鉄・鵯越駅
  ・鵯越駅 -- 摩耶山・掬星台
  ・掬星台 -- 宝塚・宝来橋南詰
区切りにした地点の鵯越駅と掬星台は,神戸電鉄やロープウェイなど公共交通機関にアクセスしやすい。また,最後の区間もロープウェイで登ってからだと少し楽である。しかし,掬星台の代わりに市ヶ原で区切って,新神戸駅から布引の滝経由でアクセスしてもいいし,記念碑台で区切って六甲ケーブルを使ってもいいかもしれない。前半の区切りも菊水山で区切って,鈴蘭台駅からアクセスするのも悪くないみたいである。とにかくある程度以上分割して歩き切れればいいと思う。

レベル1:2分割で六甲全山縦走達成
 レベル1は2分割での六甲全山縦走にしよう。2分割だと,
  ・須磨浦公園(塩屋)-- 摩耶山・掬星台
  ・掬星台 -- 宝塚・宝来橋南詰
が一つのパターンとなる。分割数が少ないほどレベルは上がるが,2分割は六甲全山縦走を達成する前段階であり,六甲全山縦走に近いと言える。そのため,ここをレベル1としてみた。分割点は,掬星台の代わりに市ヶ原を区切りにしてもいいし,記念碑台辺りを区切りにして,六甲ケーブルをアクセスに使うのもいいかもしれない。2分割の縦走は全山縦走本番のトレーニングにもなるし,全山縦走ができるかどうかの指標になる。また,2分割であれば,朝早く出発すれば多くの人が余裕を持って明るいうちに歩き切れると思うので,縦走路やトイレ,自動販売機などの確認もしやすい。そのため,六甲全山縦走を目指す人には是非おこなっておいて欲しい。