お手軽無料のSSL証明書発行サービス Let’s Encryptを使ってみる

ちょいと前ですが、正式サービスが開始されたようなのでLet’s Encrypt を使ってみた。

README / Introduction — Certbot 0.7.0.dev0 documentation

インストール

user@webserver:~$ git clone https://github.com/letsencrypt/letsencrypt
user@webserver:~$ cd letsencrypt
user@webserver:~/letsencrypt$ ./letsencrypt-auto --help

インストールなのかヘルプなのかよくわからないコマンドですが・・・。

インストールが終わるとパスが表示されるので、パスを通すなりなんなりする。

詳しい使い方はヘルプで。

$ letsencrypt --help all

SSL証明書の発行の仕方

nginxはbuggyだって書いてるので、certonlyで行う。apacheならインストールまでしてくれるっぽい。

nginxを使っていて、

  • domainが hoge.com
  • webのrootが /var/www/hoge.com

の場合

まず、普通にウェブを80ポートで動かして、アクセスできる状態にする。
認証の仕組みとしては、上記の webrootに認証用のファイルを配置して、letsencryptのサーバーからそこにアクセスして確認するっぽい。

証明書の発行は次のコマンド

sudo letsencrypt certonly --webroot -d hoge.com -w /var/www/hoge.com

処理が終わると、/etc/letsencrypt/live/hoge.com に証明書が保存される。

nginxへの設定

今回はすでに別のSSL証明書を設定しているnginxにドメインを追加しての設定だったので、SNI機能が有効かを確認。

$ nginx -V 2>&1 | grep SNI
TLS SNI support enabled

問題なければ、設定ファイルをつくる。

server {
    listen 443;
    server_name hoge.com
    ssl on 
    ssl_certificate /etc/letsencrypt/live/hoge.com/cert.pem
    ...

証明書の更新

サーバーにインストールしているすべての証明書のうち期限が近い証明書を更新する。

sudo letsencrypt renew

個別に更新したい場合には、発行時と同じコマンドを動かし、Renewを選択する

sudo letsencrypt certonly --webroot -d hoge.com -w /var/www/hoge.com

直接操作できないサーバーの場合

FTPのみの場合であれば、–manualで表示された内容を自分で設置すると同じようにSSL証明書を作成できる。

sudo letsencrypt certonly --manual -d hoge.com

crayon-syntax-highlighter

ブログに貼り付けるコードは、 SyntaxHighlighter Evolved を使っていましたが、” が

"

に変換されたままになってしまうため、 Crayon Syntax Highlighter に変えました。

(中身をいじってしまうと更新するときにめんどうですし・・・)

crayonだと、wordpressの設定画面でスタイルをプレビューしながら設定できて良いです。

ちなみに、quotなどは「文字実体参照」「実体参照」と呼ばれるけど、実体参照という言葉とこの表記方法のイメージがいつまでたっても一致しない。

Web集客のセミナーにいってみた

予算ゼロでもWeb集客できる!マーケティストによるWebサイト集客セミナー というセミナーに行ってきました。

会社とは全然関係なく、嫁がやろうとしているネイル仕事の宣伝に何か役立てばいいなぁと思って参加しました。
あとは、8年ほど前に作って放置していたアフィリエイトサイトの収入がついに無くなったので、会社を首になった時のための情報収集ですw

というわけで感想文です。

続きを読む

第1回OpenStreetMapハッカソン

Code for Sapporo主催の第1回OpenStreetMapハッカソンに参加してきました。

 

第1回OpenStreetMapハッカソン – Code for Sapporo | Doorkeeper

 

最近、ここ2〜3年で緯度経度や地図を使うプログラムを作ること、または作りたいと思うことが多いです。

GISというようなすごいものではなく、もっともっともっともっと軽いものなのですが、GoogleMapを利用しようとするとライセンス的に難しくて使えず、でもお客さんからするとGoogleMapみたいのがいいってところですね(黒〜グレーゾーンでやってる人は多いのだろうけど・・・)。

そのため、以前からOpenStreetMapは気にはなっていました。
ただ、ポスグレはあまり知らないしGISのベース知識もないので、いろいろと後回しになっていました。

今回は良い機会ということでハッカソンに参加させてもらいました。

 

一番の発見

まず、OpenStreetMapは「サーバーにインストールして地図サーバーのベースにするためのオープンソース・ソフトウェア」だと思っていました。
もちろんそういった面もあるのでしょうが、そもそもGoogleMap的なサービスもあるのだと知りました。
基本中の基本なんでしょうけど、一番の収穫です(*´ω`*) 

 

ハッカソン

今回のハッカソンでは、午前中に古川さんがOpenStreetMapについての概要や活用事例についてお話され、午後からはアイディアソンチームとハッカソンチームに別れ作業をしました。

私はハッカソングループに参加しました。
そもそもOpenStreetMapを触ったこともないので、まずはユーザー登録からです。
サービス自体はわかりやすくてユーザー登録してからチュートリアルにしたがって編集の仕方を覚えれば、結構簡単にエリアを追加していけます。
(いきなり間違った名称を設定してしまい、焦って削除しましたが、画面から消えなくて焦りましたw )

ハッカソンチームの内容ですが、そもそもみんなOpenStreetMapについて詳しいわけでもなかったので、グループの1人が個人で作成されたという MamaPapaMaps の札幌のデータを使って、同じようなものをOpenStreetMap側で作ってみることになりました。

ただ、いきなりOpenStreetMapに入れてしまうと確認や編集が大変だということで、MapBoxというサービスを利用してプロトタイプを作ることにしました。
MapBoxでは、背景の地図としてOpenStreetMapを利用して、MapBoxで持っているポイントデータをレイヤーをのせるような形で表示できます。(仕組みは調べていませんが、GoogleMapsAPIを利用して地図上にJavaScriptでポイントをデータを追加するような感じですかね?)

MapBoxではgeoJSON, csvなどからデータを取り込むことができます。CSVで取り込めるのは私のような地図素人には助かります。
また取り込んだデータは、mapBoxの画面上ではtitleとdescriptionしか表示されませんが、OpenStreetMapで使うタグ情報(例えば、amenity=kindergarden)も取り込むことができます。これらは画面上は見えないけど、MapBox内部では保持しているようで、geoJSONやKMLとして出力した時にはそれらの情報も一緒に出力されます。

今回は、札幌の保育所データをCSVに変換してもらい、OpenStreetMapで使用したいタグ情報をCSVに入れ込み、データを取り込みました。

できたのはこんな感じです。

札幌保育所マップ

 

データを取り込んで、MapBoxで表示するだけであれば割と簡単ですが、これを更にOpenStreetMapに取り込んで、札幌の幼稚園を検索! ということをするにはいくつか課題があります。

  • 元データが、例えば札幌市のHPに乗っていた場合、それをOpenStreetMapに載せても大丈夫かという確認が必要となる。
    今回のデータは国土数値情報(?)のデータ(?)みたいなので大丈夫っていってたような気がします。
    http://nlftp.mlit.go.jp/ksj/ これかな?? 
  • 住所から緯度経度を調査するとき、GoogleMapなんかは使っちゃだめ。
    オープンなものとして、CSV Geocoding Service というサービスを使って住所から緯度経度を取得する必要がある。 
  • 住所からの緯度経度を取得したとしても、正確な位置がずれる。というか、町までしかない住所だと特に大幅にずれる。
    その場合、地図を目で見て位置を合わせる必要があるが、そのときに位置をGoogleMapで確認して特定してはだめ。
  • OpenStreetMapに保育所を取り込んだとすると、検索するためのタグが必要になるが、現在利用できるタグとしては、amenity=kindergardenしかない。幼稚園、保育園、認可、非認可、営業時間などがない。
    (まだDraftだが、amenity=childecare2.0というタグがあり、これが使えるようになるとこの問題はクリアできる)
  • あとはそもそもOpenStreetMapへの一括取り込み方法を知らない(JOSMというツールを使うとよいと聞いた)

 

 

結局のところ、OpenStreetMapに新たに場所を特定して落としこむには、国が公開しているオープンデータを利用するか、草の根的にぽちぽちする以外は権利上むずかしいって印象でした。そりゃそうだよね。
地図を綺麗にするのはどうなんでしょ。災害があった地域をみんなで地図を書き足して綺麗にした、とかいってたけどそれは何をみてやったのだろう。

 

ひとまず、ちょっとわかったので、次は自前でOpenStreetMap鯖をつくろう。ポスグレポスグレー。

 

アップデートもせず放置してたら、wordpressのphpに怪しげなコードが入ってた

もう1年も放置していました。

数日前からこのサイトが落ちているようなので確認してみたところ、wrodpressのphpがエラーで止まっていました。

なんでだろうと見てみると、あやしげなコードが沢山!!

なんかやられちゃってました。ちゃんと更新しないとダメですね。

熱い想いを伝えるために。学んでおこうハングアウト

そんな熱いものはもっておりませんが、

先日、旭川オープンソースコミュニティで釧路OSSコミュニティと合同で勉強会を行いました。
以前では考えられなかったことですよね。旭川からだと300kmも離れたところですから。

このとき利用したツールがGoogle+のハングアウトです。

Skypeと同じビデオチャットですが、ブラウザがあれば利用でき、同時に最大10人でビデオチャットを行うことができます。
また、スライドを共有したり、動画を一緒に見たりすることができます。

しかし、このときはプレゼンの資料がうまく共有できないことがあったり、資料が見えにくかったりしました。

そのため、旭川オープンソースコミニュティの次回の勉強会のテーマはGoogle+のハングアウトを使いこなそうという話になっています。

というわけで、まずは基礎知識編。調べたことを書いておきます。
(あ、友達いないので実験は1人で寂しくやってます(ーー)
れっつはんぐあうと!

続きを読む

RubyKaigi2011のLT "ASP.NET MVC 3 vs. Ruby on Rails 3"について – Togetter

自分は仕事はMicrosoft系で主に.NETで開発。おうちではlinuxとかpythonとか今回の話のRailsなんかで遊んでるのでとっても面白い話と資料(PDF)でした。

RubyKaigi2011のLT “ASP.NET MVC 3 vs. Ruby on Rails 3″について – Togetter.

しかも丁度調べ中のMVC3の話でナイス。
テンプレートエンジンも普通そうだし、モデルもEntityFramework 4.1以降?からコードファーストでくめるっぽい。まぁ、そこはモデルというか・・・なんだ?でーびー?だけど。
それに
rails3とこんなにふがふがするんだから、MVC3も使って大丈夫そうね。

ブクログの本をwordpressで表示

どんな本を持ってるか見せるために、本を管理するものを作ろうと思ってたけど、全然やる気が起きなかったので、ブクログに登録してみました。

まだ登録しただけなので使い方がわかってないんですが、登録した本をブログパーツで表示させたくて見てみたら・・・な、なんかショボイ・・・

というわけで、手動でやってみます。

続きを読む

AOSC勉強会 google map

先週の話ですが、旭川オープンソースコミュニティの勉強会で「google map」について話がありました。
その中で、iphoneから緯度経度を取得する方法について聞いてみたのですが、わからないとのことでしたので調べてみました。

まぁ、調べたと言うか、検索しただけですが。

html5のGeolocation APIを使うとイイ!

 サンプルが転がってるだろう、ということで、Google Maps API Referenceのデモギャラリーを探してみたところ、案の定あっさりでてきました。

-> Where Am I?

位置情報の取得

 デモのソースを見てみると、下記コードで緯度経度を取得していそうです。

抜粋
[javascript]
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(positionSuccess, positionError);
} else {
positionError(-1);
}
[/javascript]

navigator.geolocationとは

 上記コードで使われている「navigator.geolocation」はHTML5のGeolocation APIです。
  -> Geolocation API Specification
 HTML5なので、ブラウザが実装していなければ動作しませんが、主要ブラウザは実装済みのようです。
 -> 位置情報をブラウザで活用! Geolocationを使いこなそう - @IT
 スマートフォンではない携帯では、「位置情報・GPS情報の取得方法 – [携帯 + 携帯] ぺんたん info」に書かれている方法で取得できるようです。

サンプルを作ってみる

 簡単なサンプルをGAEで作ってみました。
 位置を取得してマーカーを追加していくだけのものです。
 GAEにデプロイしてiphoneでアクセスすると、マーカーがどんどん追加されることが確認できました。
 ちなみにGAEで作った意味はとくにありません。普通にサーバーに置いてよいと思います。

-> google map sample
-> source:planset/google_map_sample – GitHub

index.html
[html]
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>google map sample</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">

var gmap = null;

function createMap() {
var myOptions = {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
return new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

function updateLocation(pos) {
var latlng = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);

if (gmap == null){
gmap = createMap(latlng);
} else {
var marker = new google.maps.Marker({
position: latlng
});
marker.setMap(gmap);
gmap.setCenter(latlng);
}
}

function handleError(a) {
alert("error: " + a.code + "");
}

window.onload = function(){
if (navigator.geolocation) {
var options = {
timeout: 10000
};
navigator.geolocation.watchPosition(updateLocation, handleError, options);
}
};

</script>
<style type="text/css">

html, body { height: 100%; margin: 0; padding: 0; }
#map_canvas { width: 100%; height:100%; }

</style>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>

[/html]

参考:Google Maps JavaScript API V3