NetlifyとGithubで独自ドメインのサイトをHTTPS化したメモ

事の発端

IOS 11キタ━(゚∀゚)━!  Safariからカメラの映像が取得できる! これでアプリではなくブラウザからARできるようになった!と喜んでいたら、このカメラのapihttpsじゃないとセキュリティ的な問題で動かないのである。

Github pagesで独自ドメインホスティングしているサイトをHTTPSにしたいけどお金はない。

すでに導入レポは検索すればいくつも見つかるものの、どうも日本語の情報が少ないのでメモすることにした。

使ったもの

  • Github
  • Netlify
  • お名前.com

手順

  1. お名前.comでドメインを取得します。
  2. Githubに公開するサイトのファイル一式をpushしておきます。

    一度Github pagesで公開してみて問題がないことを確認しておきましょう。設定で有効化して、HTTPSにチェックを入れればhttps://<username>.github.io/<repository name>/でアクセスできます。

  3. Netlifyに登録します。

    www.netlify.com Githubアカウントでログインし、先ほどpushしたリポジトリを選択し、デプロイしましょう。

  4. Netlifyのsite nameを変更しましょう

    デプロイをするとデフォルトでランダムな英単語が割り当てられるので、変更しなくても問題はないが変更しておきましょう。

    General -> Setting -> Site details -> Change site name から設定します。 f:id:MagmaChocolate:20171015014625p:plain

  5. カスタムドメインを設定しましょう

    Domain management -> Domains -> Custom domain に取得しておいたドメインを設定します。 ここで、Netlifyはwww付きのドメインにすることを勧めてきます。DoS攻撃から守りやすいとか、ロードが早いとか色々恩恵があるらしいのですが、それよりもURLが短くなる方がいいなって思ったので、自分はwwwなしにしました。 f:id:MagmaChocolate:20171015015607p:plain

    設定後、NetlifyのDNSを利用するので Use Netlify DNS を押します。4つURLが表示されると思います。これは次の作業で使うので覚えときましょう。

  6. ドメインの設定をしましょう

    今度はお名前.comでドメインの設定をしていきます。

    ログイン後、ネームサーバーの設定 -> DNS関連機能の設定 にAレコードとCNAMEを追加します。

    • Aレコードで 104.198.14.52を追加します。
    • CNAMEにwwwをつけてNetlifyで設定したURLを追加します。<site name>.netlify.comです

    f:id:MagmaChocolate:20171015021014p:plain

    次に、DNSを変更します。

    ネームサーバーの設定 -> ネームサーバーの変更 -> 他社のネームサーバーを利用 に4でNetlifyにドメインを設定した時に出てきた4つのDNSのURLを設定します。人によってこのURLは異なるみたいです。

    f:id:MagmaChocolate:20171015021555p:plain

    設定が反映されると、独自ドメインにアクセスするとHPが表示されると思います。このままではまだHTTPです。いよいよ次でHTTPSになります。

  7. NetlifyでSSLを有効化しましょう

    Netlifyで Domain management -> Domains -> HTTPS -> SSL/TLS certificateVerify DNS configrationをクリックしLet's Encypt certificateをクリックです。

    f:id:MagmaChocolate:20171015022037p:plain

    お疲れ様でした、試しにhttps://でアクセスしてみましょう、表示されれば成功です。セキュリティーがどーたらと表示されてしまう場合はしばらく待ってれば反映されるっぽいです。

    最後の仕上げとして、httpでアクセスがあった時にhttpsにリダイレクトさせたいので Force TLS connectionsを有効化して完了です。そんなの表示されてないよって時はリロードするとたぶん出てきます。

    f:id:MagmaChocolate:20171015023118p:plain

コメント

ドメイン周りの設定は順番が大切なので、3回ぐらい失敗してサイトを消してやり直してを繰り返してしまった。勉強不足だ。 そんなこんなで、準備は整ったので、AR.jsとやらに挑戦します。

Arduino互換品のドライバーメモ

買ったやつ

Amazon CAPTCHA

インストールしたドライバー

CH341SER_MAC.ZIP下载页面-江苏沁恒股份有限公司

安価でDMX機器をPCでコントロールしたかった

DMX機器を何種類か導入したはいいものの、卓がなかったり、単純にオペレータが不足してたりするので、PCで一括制御したくなったので作った。

ネットを検索しているとArudinoやラズパイを使いPCからDMX信号を出力しているものをいくつか見つけたが、たかがDMXにはオーバースペックだなぁとか、思ってたら、安上がりの記事を見つけたので実際に作ってみる。

https://stevenbreuls.com/2013/05/diy-usb-dmx-dongle-interface-for-under-10/

この記事にしたがって作っていけば困ることはなかった。何個か作っているうちに一番手頃に手に入ると思った材料を紹介します。

Amazonで購入したシリアルコンバーターですが、中国から直送されるため注文から1~2週間かかり、関税通過のために真っ黄色のプチプチ付き封筒で届きます。 これを使えば、元の記事にあるようにICの足を結線しなくても問題なく動作しました。触ってないのにたまにLEDパーが一瞬だけついたりしてたので、末端抵抗をつけたら大丈夫になりました。

Dockerで立ち上げたwebサーバでmod_rewriteしたかった話

内容

DockerHubの公式のPHPイメージを使っていて、mod_rewiteしたい人向けのお話です。結論だけ知りたい人は読み飛ばしてね。

事の発端

僕自身が立ち上げたwebサービスではもともとURLがhttp://example.com/index.php?cmd=view&page=123という感じでとてもダサかったので、かっこよくしたかった。WordPressなどではパーマリンクと呼ばれURLがイカした感じになっているので、僕も方法をパクった。 調べるとapache側の設定でmod_rewriteを使うとアクセス時にURLを記述したルールに基づいて置換してくれるらしい。

僕のwebサービスではアクセスを全てindex.phpで受け、getパラメータで動作を変化させている、pukiwikiとか?の設計をパクったはず。動作ルールは以下

example.com/index.php?cmd=[動作モード]&page=[記事のNo.]

  • cmd
    • view 記事の表示、pageで記事を指定
    • edit 記事の編集、pageで記事を指定
    • category カテゴリーごとに記事一覧を表示する  などなど

これをexample.com/[動作モード]/[記事のNo.]にしたかった。 さらにviewの時にはexample.com/[記事のNo.]にしたい。

このルールでURLを置換させるには.htaccess

RewriteEngine On
RewriteBase /
RewriteRule ^([0-9]+) index.php?cmd=view&page=$1 [L]
RewriteRule ^edit/([0-9]+) index.php?cmd=edit&page=$1 [L]
RewriteRule ^edit index.php?cmd=edit [L]
RewriteRule ^category index.php?cmd=category [L]

のように記述する、よくある正規表現と似ているので特に迷うことはないだろう。

いざ、Dockerで立てた開発環境に置いてみると、500エラー。なんで!! しばらく悩むも解決せず、諦めて本番環境に置いてみると動いた!なんで!!

理由は単純だった、使っているシステムが違った。どちらもapacheなのは違いないが、本番はCentOSで構成されており、開発環境のDockerの公式imageのphpdebianで構成されていた。

github.com

debian系のapachemod_rewriteを有効化するにはコンテナに入ってコマンドを打てばいいらしい。

$ docker exec -it {php_container_name} bash
$ a2enmod rewrite

そして/etc/apache2/sites-available/000-default.confのの中に

    <Directory /var/www/html>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Require all granted
    </Directory>

を追加して再起動すればOK!

でも、せっかくdocker-compose使ってるからいちいちコマンド打つの面倒だよね。ってことで

結論

Dockerfile

FROM php:7.0-apache
RUN  a2enmod rewrite

docker-compse.yml

php-7.0:
  build: .
  ports:
    - "80:80"
  volumes:
    - "../:/var/www/html"
    - "./000-default.conf:/etc/apache2/sites-available/000-default.conf"

000-default.conf

<VirtualHost *:80>
    <Directory /var/www/html>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Require all granted
    </Directory>
~~~~~~~~~~~~~~以下略~~~~~~~~~~~~~~~~

この3ファイルを同じディレクトリに入れdocker-compose upでOK。

ちなみに、mysqlも使いたいよって人は

Dockerfile

FROM php:7.0-apache
RUN apt-get update && \
  docker-php-ext-install pdo_mysql mysqli mbstring && \
  a2enmod rewrite

こうすれば良いです。

ポリッドスクリーンを使ったボカロ系イベントを作った話

イベント概要

  • 非営利
  • 自分も含め、企画側は全員学生、お客さんは学生と教員
  • イベントを行った場所は学校
  • 使用キャラクターはクリプトンヒューチャー社のVOCALOIDキャラクターのみ

準備

スクリーンについて

スクリーンを選ぶポイント

  • 安い
  • 短辺が2メートル以上あるロール状のシート
  • 無地 (フィルム表面に何も印字されていない)
  • 学生でも買える
  • 軽い
  • 学校に搬入可能である

を考え、今回利用したのがカインズホームの農ポリ 0.05X210X100

www.cainz.com

5000円以下で購入でき、サイズも短辺が2m10cmあり支払いもコンビニでOK、完全に無地で、ロールの状態で9kgほどなので1人で持ち運びが可能なので、学校近くにあるクロネコヤマトの営業所に配達をしてもらい、受け取りに行くことで学校に搬入が可能。ここで注意するのが、カインズオンラインには配達先を指定するときに営業所止めには設定できないので、お客様サポートへ連絡し個別に対応してもらうことが必要だということ。自分はカインズの回し者ではないのだが、カインズホームのカスタマーサポートはとても良い、返信が早いし個別対応になるとちゃんとサポートとコミュニケーションが取れるし、電話での相談も可能なので困ったらサポートに連絡すればどうにかしてくれる感じでした。

ちなみに、今回の候補に上がったのは

  • 大倉の農ポリ 厚さ0.1mm幅96cmの切り売り 町田の東急ハンズで購入した、重ねずに明るい部屋でもくっきりと写る。結構重く、値段も高く今回は購入を断念。

  • 大倉の農ポリ 厚さ0.05mm幅190cmの切り売り こちらも町田の東急ハンズで購入、これだと4枚重ねなきゃ明るい部屋ではくっきりと写ってくれない。軽く、値段も0.1mmの半額ぐらい。下の写真はこれ。なかなかよかったが 町田の東急ハンズではロールでの販売をしておらず断念。

スクリーン制作

スクリーンを作る過程でわかったことは、1枚のスクリーンではしっかりと像が映らないということ、2枚重ねにすると暗闇で後ろの壁が黒ならば結構くっきり見えて良い感じだったが、明るい部屋ではうっすらしか見えない。今回のライブではライブ照明を使って演出がしたかったので明るい部屋でもはっきり見えるようにする必要があったので、試した結果4枚重ねに決定した。写真は4枚重ねの実験の時の写真

f:id:MagmaChocolate:20170721235436j:plain

そして、結構苦労したのがスクリーンの設置方法、今回試し物を挙げると

  1. スクリーンの上辺に針金を貼った物を4枚作り、バトンに紐で固定してぶら下げる

    結果:失敗 4枚の間に空気が入り隙間ができ、プロジェクターで投影した像が複数できでしまった。

  2. 上だけじゃなくて下辺にも針金で固定し、4枚を上下辺の両辺で一つに固定しぶら下げる

    結果:失敗 結局空気は抜けず、複数の像ができてしまう。また、上下辺を固定したことで巻き取ることができな行くなった。

  3. 角材でフレームを作り4枚を障子紙のように固定する

    失敗 切り出し、ピンと張ったフィルムをフレームに画鋲で固定することを4回繰り返したが、フィルムに直に画鋲を打ってしまうと、30分ぐらい経つとフィルムが伸びてシワだらけで、映像に綺麗に映らない。(フィルムの間に空気はほぼ入らなくなったので像の問題はこの方法で解決)

  4. 3.のようにフレームに貼る前にフィルムの4辺に養生テープを貼り伸びないようにした

    成功 3. のように時間がたってもフィルムが伸びることもなく成功した。 f:id:MagmaChocolate:20170722003710j:plain 今回のスクリーンは縦210cm 横3m15cmの大きさなので、キャラクタを等身大投影しても結構余裕がありました。

でも、貼ってから4日経つとやはり伸びてくるらしく実際のライブ時にはシワができていたので、改善の余地あり。

反省

  • フィルムは薄いとすぐにシワになるのでできるだけ厚い0.1mmの物を使った方が楽(高いけど)
  • 1パターン作るには3人ぐらいいないと難しく、作り終えるまでに4時間ぐらいかかったので、かなり大変
  • フレームには倉庫に転がっていた角材を使ったため、しっかりと固定ができず持ち上げたら角材が割れてしまったので、ちゃんと強度を考えるべきだった

機材について

機材一覧

  • Macbook Air 2015 動画再生用
  • VDMX5 動画再生ソフト
  • EPSON EB-G5350 プロジェクター
  • スピーカー SX300を2発、RLX118を2発
  • 音響セット(後述)
  • 照明セット(後述)
  • フォグマシン スモーク演出用機材

映像

映像の再生環境で大事なのが矩形調整ができること、映像専用のソフトを使った方が楽なので、今回はVJソフトのVDMX5の無償版を使用した。無償版ということもあり設定などを保存することができないが、ポリッド投影するだけならば保存ば必要ないし、再生時間の制限もないので無償版で十分。

実際にスクリーンに投影してみると画面で見るより青っぽくなる印象があるので、これもVDMX5内で調整した。

プロジェクターはEPSONのEB-G5350を1台使用、ビジネス用プロジェクターということもあり、5000lmぐらいある、ただし焦点距離が大きいのでスクリーンとの距離が5メートルぐらい必要でした。

音響

今回、バンドさんをお呼びして演奏をして下さった為、音響のセットはバンド向けにセッティングされていたので、それを利用して、PCからの音声を再生しました。

スピーカーは SX300を2発、ELX-180を2発。 f:id:MagmaChocolate:20170801175852p:plain

照明

今回はスクリーンを中央に設置したため、両サイドに照明を配置した。 f:id:MagmaChocolate:20170801181200j:plain 今回照明で悩んだのはスモークを炊くか炊かないか、スモークを焚いた方が演出照明は綺麗に見せられるのですが、スモークを炊くと照明が空気中で乱反射するためスクリーンにも光が当たってしまい、映像とのリアリティが無くなるのが悩みどころでした。また、プロジェクターの光の筋も見えてしまうのでどうしようかという感じでした。 結果としては炊きました。スクリーンとプロジェクターの間には炊かずに、客席の方に炊きました。時間が経つにつれて空気に馴染んでくれるので、丁度いい感じに薄く炊けました。

今回使用した照明機材は

  • フレネル1000w (ゼラ72) 青地用
  • フレネル500w 目潰し用
  • パー缶 PAR64
  • ムービングヘッド vizi led spot (American DJ)
  • マジックボール ノーブランド トモカ電気で購入
  • エリプソイダルスポット Source4 ETC 星柄のゴボ使用

本番

当日は、お客さんが100人以上来場されたようで、色々なご感想をいただきました。

  • 楽曲を客の投票とかで募集してほしい。
  • バンドやダンスとの同期も見てみたい。
  • もっとスクリーン大きい方がいいかも。
  • 客席で、後ろの方に行くと音が悪い。 など

でした、機材トラブルなんかもあり申し訳なかったです。

でも、

  • またやってほしい
  • 運営に参加したい
  • 初めて軽音楽部のバンドを生で見た など

嬉しい意見もありました。このイベントでバンドにも興味が湧いて下さった意見が特に嬉しかったです。

ざっとまとめた内容ではこんな感じです。この記事では僕が関わった内容しか書かれていないので、別記事で他の運営スタッフから聞いた話をまとめられたらいいなって思います。

Dockerを触ってみたメモ(書きかけ)

よく使うコマンド集

  • Dockerイメージからコンテナを作成する $ docker create {image名}

    • コンテナの中にスナップショット1を作成
    • コンテナの起動はせず、あくまでコンテナを作るだけ。
  • Dockerイメージを起動する $ docker run {image名}

    • 結局 create してから start してるだけ
  • Dockerコンテナを起動する $ docker start

    • 既存のコンテナを起動するので、以前使っていたスナップショットを読み込む
  • 実行中のコンテナを終了する $ docker stop

    • スナップショットを作り直す(上書きする)
  • コンテナの一覧を見る

$ docker ps [-a]
  • 実行中のコンテナの一覧を取得する
  • aオプションをつけると作ったコンテナ全てを取得

  • イメージの一覧を取得 $ docker images

  • コンテナを削除する $ docker rm {コンテナを指定}

  • イメージを削除する $ docker rmi {イメージの指定}

Docker run オプション

$ docker run {オプション} {イメージの指定} {引数}
  • 基本
オプション(略) オプション 内容
-a --attach = [STDIN, STDOUT, STDERR] 標準入力, 出力, エラー出力にアタッチする
-d --detach = false バックグラウンドで実行
-i --interactive = false コンテナの標準入力を開く
-t --tty = false tty(ターミナルを開く)
--name {string} 作るコンテナの名前を指定する
--rm 実行後、コンテナを削除する
  • ネットワーク関連
オプション(略) オプション 内容
-p {ホストのポート番号}:{コンテナ内のポート番号} ホストとコンテナ内のポート番号の割り当て
--add-host = {ホスト名}:{ポート番号} コンテナ内の/etc/hotsに定義する

メモ

  1. スナップショット
    • コンテナ内で作業し、変更があったファイル群
    • centosとかだと/var/とかのフォルダをまとめてコピーした感じ。

Docker volumeを調べたメモ

完全にメモ書きになってるのでEvernoteにでも書けよって感じ。

Dockerはコンテナ型仮想化システムで、必要な時に必要なだけコンテナを作り、終わったら捨てる。いわば使い捨てだ。でも、消えて欲しくないデータを扱う事もあるだろう。そんな話。

自分はインフラエンジニアではないし、Dockerでホストの環境弄らずに開発環境作りたかったから始めたっていう理由

Dockerコンテナは使い捨てるもの→残したいファイルはコンテの外に保存しておこうっていう考えらしい。

Docker の volumeにも色々ある

  • docker runの-vオプション $ Docker run -v /hoge centos:latest centosのlatest(最新版)を起動するコマンドである。この時-vオプションを使ってコンテナ内に/hogeという名前のシンボリックリングを作成し、フォルダの実体は/var/lib/docker/volumes/{ランダムな英数字}/_data/にある。このフォルダはdockerがコンテナと連動させて管理しているため、docker コンテナを消せばこのフォルダも消えます。 説明のため、コマンドは一部省略しています

この時、内部では 1. ホストに実体のフォルダを作る 2. イメージからコンテナをつくり動かす 3. ホストのフォルダへのリンクをコンテナに作る(上書く)

ってイメージらしい。

  • ホストのフォルダとコンテナのフォルダを同期する $ docker run -v {ホストのフォルダ(実体)}:{コンテナ内のリンク名} centos:latest このコマンドでホストのフォルダへのシンボリックリンクをコンテナ作成時に貼る。こうすれば、コンテナの設定を変えてリビルドしてもファイルは消えずに残る。 また、ホストにファイルがあるのでホストでエディターを開き、コンテナで開発環境を揃え実行できるので環境のバージョンを変えるのもイメージを差し替えるだけだし、ソースをホスト側でgit管理する事もできる。

後記

dockerfileやdocker-composeにも同様の機能があるので、もう少し検証したい