GCPでterrariaの24時間稼働のMODマルチサーバーを建てる

terraria

なんだかテラリアのマルチサーバーばっかり建ててます。 テラリア好きすぎです!

以前さくらのVPSの972円のプランで建てたterrariaサーバーがMOD3つ入れてるからなのか、重すぎで急に夜になったりするしラグもひどいので、(バニラの時はさくさく動いてた)プランを上位のものにするかどうするかなーと考えてたところ、google cloud platformの無料枠があったので、それを使ってみることにしました。

 

googleアカウントをもっていれば誰でもGoogle Cloud Platformの12か月間利用可能な$300分のトライアル用クレジットが使えるのでそれを使っていくことにします。

●なのでクレジットがなくなるまでにクリアしなくては!

●クレジット$300分を使って多分半年くらいは運用できるかな?といった感じ
(MODを3つ入れて6人くらいでプレイして快適に動かす場合)

●ちなみに入れたMODはCalamitytremorThoriums の3つです。
(というかこれしか入れたことないし他にどんなのがあるかよく知らない…。)

●MOD入れない場合は 5.terrariaのインストール までやればOK。マシンタイプも小さいもので良いと思うのでもっと長く使えると思います。

 

 

1. Google Compute Engineへ登録

Compute Engine - IaaS  |  Google Cloud

Google Compute Engine」のページへアクセスし無料トライアルをクリック。

google compute engine

お知らせを受けとるかなど聞かれるので、選択して同意して続行をクリック

google compute engine

ここでクレジットカードの課金を有効にしないと始められません。私は別件でクレジットカード情報は登録済みだったので、課金を有効にするだけですが、クレジットカードを登録していない場合はここで登録するようです。 有効にしても勝手に課金されたりしないです。

google compute engine

準備完了まで待てば、まずは登録完了です。

google compute engine

2. インスタンスを作成する

1.作成ボタンがアクティブになったら作成ボタンをクリック。

2.名前はわかりやすいようにterrariaとしました。

3.リージョン東京を選択。

4.マシンタイプ はいったんsmallにしました。
「micro」にすると、インスタンス1個まではずっと無料で使えるらしいですが(USリージョンのみ)、 今回はさくらのVPSの972円のプランで建てたterrariaのMODサーバーが重いという理由からなので、メモリ1.7Gのsmallを選択してみました。さくらは1Gだったので1.7倍です。
(結局この後メモリ不足?でゲームが終了されてしまうので、メモリ3.75Gのn1-standardに変更しています)

バニラのterrariaとか、軽量らしいTshockというやつであれば人数によっては、「micro」でも動くかも?

5.ブートディスクをCentOS 7に変更。
今までCentOSで動かしてきてうまく動いてるからっていうだけです。

6.後はデフォルトのままで作成をクリック

google compute engine

3.ファイアーウォールの設定

外部から接続するためにファイアーウォールの設定をします。

1.左上のナビゲーションメニューからVPCネットワークファイアーウォールルールと選択

ファイアーウォールの設定

2.ファイアーウォールルールを作成をクリック

ファイアーウォールルールを作成

3.名前はわかりやすいようにterrariaとしました。

4.ターゲットタグのところにテラリアはデフォルトでポート7777を使うのでterraria7777に。

5.そして、プロコトルとポートのところにtcp:7777と入力。

6.作成ボタンをクリックするとファイアーウォールルールが作成されました。

ファイアーウォールルールを作成

7.左上のナビゲーションメニューからCompute EngineVM インスタンスと選択

ファイアーウォールルールを作成

8.さっき作ったインスタンスを選択して

ファイアーウォールルールを作成

9.画面上部の編集をクリック

ファイアーウォールルールを作成

10.ネットワークタグのところにさっき作成したterraria7777を入力して保存でOKです。

ファイアーウォールルールを作成

4.インスタンスに接続する

インスタンスに接続

インスタンスが作成できたらSSHをクリックするとインスタンスに接続できます。 私は、SSH接続にいつも使ってるteraTermを使いたかったので、下記の記事を参考にさせてもらって接続しました。

めもちょー Tera TermでGCPにssh接続する プロジェクト共通sshキー

5.terrariaのインストール

1.まずはwgetとunzipをインストールしておく

$ sudo yum -y install wget
$ sudo yum -y install unzip

 
2.terrariaのインストールディレクトリを作成して移動

$ mkdir terraria
$ cd terraia

 
3.terrariaの最新のサーバーソフトをインストール

以下で最新のサーバーファイルのURLを調べてダウンロード
Server - Official Terraria Wiki
現時点でTerraria Server 1.3.5.3が最新だったのでこれをダウンロードします。

$ wget http://terraria.org/server/terraria-server-1353.zip

 
4.ダウンロードしたzipファイルを展開

$ unzip terraria-server-1353.zip

 
5.展開前のzipファイルはいらないので削除しておく

$ rm terraria-server-1353.zip

 
6.必要なファイルをterrariaMod直下にコピー
必要なファイルは展開したファイルの中の1353/Linux/以下のファイルなので、これをメインのディレクトリterraria直下にコピーします。

$ cp -r 1353/Linux/* ./

 
7.MODを入れない場合(入れる場合はとばす) MODを入れないでバニラのterrariaで遊ぶなら、以下のとおり実行権限を付与して起動すればOK。

$ chmod 744 TerrariaServer.bin.x86_64
$ ./TerrariaServer.bin.x86_64

6.tModLoaderのインストール

MODをいれて遊ぶ場合は、tModLoaderをダウンロードします。

ここで最新のtModLoaderのLinux版のダウンロードURLを調べてダウンロード
Releases · blushiemagic/tModLoader · GitHub

tModLoaderのインストール

1.調べたURLを指定してダウンロード

$ wget https://github.com/blushiemagic/tModLoader/releases/download/v0.10.1.3/tModLoader.Linux.v0.10.1.3.zip

 
2.tModLorderを展開して上書き

$ unzip tModLoader.Linux.v0.10.1.3.zip

 
3.展開済みのzipファイル消しときます
もういらないので

$ rm tModLoader.Linux.v0.10.1.3.zip

 
4.実行権限を付与して実行 このままでは実行できないので実行権限を付与

$ chmod 744 tModLoaderServer.bin.x86_64
$ ./tModLoaderServer.bin.x86_64

7.MODの導入

各種MODのダウンロード
実行するとこんなかんじでメニューが表示されるので[b]キーを押下。

n       New World
d <number>Delete World
m               Mods Menu
b               Mod Browser

ダウンロードするModの名前を正確に入力といわれるので、入れたいMODの名前をいれるとダウンロードされます。

Type an exact ModName to download:
ThoriumMod

このModの正確な名前というのを調べるには、クライアントソフトの方で先にMODを導入し、入れたいMODをダウンロード、有効にしておきます。 こちらの記事などを参考に…

TerrariaのMod導入方法:はぐぅのブロマガ - ブロマガ

そうすると以下のディレクトリにModフォルダができるので(環境によって違うかも)
C:\Users\USERNAME\OneDrive\ドキュメント\My Games\Terraria_mod\ModLoader\Mods
この中のenabled.jsonを開くと正確なMODの名前が入っています。 必要なModのインストールがすんだら[b]キーで前にもどります。

Modを有効にする
[m]キーを押下するとMODの有効・無効を切替えるメニューが表示されるので、[e]ですべて有効に。 [r]で前にもどります。

ワールドを作成
[n]キーで新しいワールドを作成します。 ワールドの大きさ・難易度を選択しワールド名をいれたら作成開始!無事作成されれば成功です。

8.ワールドに接続する

ゲームが起動したらいよいよワールドに接続します!

1.PC側でもtModLoaderの導入が必要ですので、以下の記事などを参考にさせてもらって、導入しておいてください。
サーバーに接続すると自動的にサーバーで有効にしたMODをダウンロードするので、tmodの導入だけで大丈夫です。

TerrariaのMod導入方法:はぐぅのブロマガ - ブロマガ

2.左上のナビゲーションメニューからCompute EngineVM インスタンスと選択

ワールドに接続する

3.IPアドレスを調べる
外部IPというのが、ゲームに接続するためのIPアドレスなので、これをメモしておきます。

IPアドレスを調べる

4.terrariaを立ち上げてマルチプレイヤーを選択

ワールドに接続

5.IP経由で参加を選択

ワールドに接続

6.プレイヤーを作成または選択して

ワールドに接続

7.サーバーIPのところにさっき調べたIPアドレスを入力

ワールドに接続

8.ポートは7777のままで

ワールドに接続

9.ワールド作成時にパスワードを設定した場合は、それを入力

ワールドに接続

10.無事接続できました。

ワールドに接続

9.補足(マシンタイプを変更したこと)

マシンタイプをsmallにしてプレイしてたら、さくさく動いてるのに、突然ゲームが落ちたのでSSHで接続して確認してみると、メモリ不足で強制終了みたいなことが書いてありました。

こちとら、ミディアムコアでプレイしてるので、死んでアイテム落としてる間にゲームが落ちたらアイテムが消滅するやん!!!

ということでマシンタイプをsmalからn1-standardに変更。
6人で画面いっぱいにうごくボス戦とかやっても全然余裕です。

 

Let's TERRARIA!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Vueで アコーディオンパネルを作る

f:id:annykyon:20180614164633p:plain

Vue Slide Up Down

VueではjQueryのslideUp slideDownのようにさくっとアコーディオン的な開閉ができなくて、自分で作るとなると高さを取得したりと面倒だし…。
なのでこちら↓を使わせてもらいました。
GitHub - danieldiekmeier/vue-slide-up-down: Like jQuery's slideUp/slideDown, but for Vue!

こんな感じで動きます。

See the Pen Vue slideToggle by KYOKO SUZUKA (@kyonchan) on CodePen.

使い方

Vueとvue-slide-up-downを読み込み

デモなのでcdnで読みこんでます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://unpkg.com/vue-slide-up-down@1.0.2/dist/vue-slide-up-down.umd.js"></script>
HTMLの記述

toggele buttonをクリックすると、<vue-slide-up-down></vue-slide-up-down>内を開閉させます。

<div id="app">
  <div v-on:click="toggle" class="togglebutton">toggle Button</div>
  <vue-slide-up-down :active="active">
    <div class="element">
      Vue slide Toggle!!
    </div>
  </vue-slide-up-down>
</div>
javascriptの記述
Vue.component('vue-slide-up-down', VueSlideUpDown)

new Vue({
  el: '#app',
  data: () => ({
 //activeがtrueの時開く。falseの時閉じる。
    active: true
  }),
  methods: {
    //ボタンクリックでactiveのtrueとfalseを切り替え
    toggle () {
      this.active = !this.active
    }
  }
})
css

あとは、cssで見た目を整えればオッケーです。簡単でうれしいです。

.togglebutton{
    padding : 1em;
    background-color:#2196F3;
    color:#FFF;
    cursor:pointer;
}
.element {
  padding : 1em;
  background-color:#B3E5FC;
}

いっぱい増やしたい場合は

コンポーネントにしてv-forで表示する感じでしょうか。
配列いじれば増やしたり減らしたり変更したりも簡単だから楽です。 ついでにopen/closeもつけてみました。

See the Pen yEoBmp by KYOKO SUZUKA (@kyonchan) on CodePen.

【Terraria】VPS上にテラリアのMODマルチサーバーを構築【MOD】

f:id:annykyon:20180508123909p:plain

Terrariaがおもしろいです。久々に人生棒にふるくらいおもしろいです。 今、バニラのTerrariaで友人5人でプレイ中で残るはMOON ROAD倒すだけだけど、おもしろすぎるのでMOD入れてもっかい最初からやります。  
 

OSインストール

現在さくらのVPS上にバニラのTerrariaマルチサーバーをたててるので、同じサーバーの別ディレクトリにMOD用のTerrariaをインストールしました。
0からの場合はOSインストールを適宜すませておいてください。私はCentOSインストール済みです。

ちなみにさくらのVPSはメモリ1Gの972円のプランですが、たまに5人で入ってエフェクト飛びまくりのときはラグったりしますがまあまあストレスなくできてます。重くなってくるとサーバーソフトを再起動すると軽くなります。

結局、MOD3つ動かすと重すぎになったので後でGCPで作り直しました。こちらで記事にしています。 GCPでterrariaの24時間稼働のMODマルチサーバーを建てる - Silent Lips

 
 

Terraria インストールディレクトリ作成

$ cd /root
$ mkdir terrariaMod
$ cd /terrairaMod/

 
 

最新のtModLoaderをダウンロード

ここで最新のtModLoaderのLinux版のダウンロードURLを調べてダウンロード
Releases · blushiemagic/tModLoader · GitHub f:id:annykyon:20180505111828p:plain

調べたURLを指定してダウンロード

$ wget https://github.com/blushiemagic/tModLoader/releases/download/v0.10.1.3/tModLoader.Linux.v0.10.1.3.zip

 
 

最新の公式サーバーファイルをダウンロード

以下で最新のサーバーファイルのURLを調べてダウンロード
Server - Official Terraria Wiki
現時点でTerraria Server 1.3.5.3が最新だったのでこれをダウンロードします。

$ wget http://terraria.org/server/terraria-server-1353.zip

ダウンロードしたzipファイルを展開

$ unzip terraria-server-1353.zip

展開前のzipファイルはいらないので削除しておこ

$ rm terraria-server-1353.zip

 
 

必要なファイルをterrariaMod直下にコピー

必要はファイルは展開したファイルの中の1353/Linux/以下のファイルなので、これをメインのディレクトリterrariaMod直下にコピーします。

$ cp -r 1353/Linux/* ./

 
 

tModLorderを展開して上書き

tModLoader.Linux.v0.10.1.3.zipを展開すると上書きするかと聞かれるので[A]を入力してすべて上書きします

$ unzip tModLoader.Linux.v0.10.1.3.zip
replace Ionic.Zip.Reduced.dll? [y]es, [n]o, [A]ll, [N]one, [r]ename:
$ A

展開済みのzipファイル消しときます
もういらないので

$ rm tModLoader.Linux.v0.10.1.3.zip

 
 

実行権限を付与

このままでは実行できないので実行権限を付与

$ chmod 744 tModLoaderServer.bin.x86_64

 
 

実行

$ ./tModLoaderServer.bin.x86_64

各種MODのダウンロード
実行するとこんなかんじでメニューが表示されるので[b]キーを押下。

n       New World
d <number>Delete World
m               Mods Menu
b               Mod Browser

ダウンロードするModの名前を正確に入力といわれるので、入れたいMODの名前をいれるとダウンロードされます。

Type an exact ModName to download:
ThoriumMod

このModの正確な名前というのを調べるには、クライアントソフトの方で先にMODを導入し、入れたいMODをダウンロード、有効にしておきます。 こちらの記事などを参考に…

TerrariaのMod導入方法:はぐぅのブロマガ - ブロマガ

そうすると以下のディレクトリにModフォルダができるので(環境によって違うかも)
C:\Users\USERNAME\OneDrive\ドキュメント\My Games\Terraria_mod\ModLoader\Mods
この中のenabled.jsonを開くと正確なMODの名前が入っています。 必要なModのインストールがすんだら[b]キーで前にもどります。

Modを有効にする
[m]キーを押下するとMODの有効・無効を切替えるメニューが表示されるので、[e]ですべて有効に。 [r]で前にもどります。

ワールドを作成
[n]キーで新しいワールドを作成します。 ワールドの大きさ・難易度を選択しワールド名をいれたら作成開始!無事作成されれば成功です。

 

ワールドの生成が途中で止まってしまう場合

私の場合なぜかワールド生成がどうしても70%くらいで止まってしまい、どれだけ待っても動かなかったので クライアントのterrariaでワールドを作成して、ワールドファイルをサーバーにコピーするということをやりました。

1.MOD導入済みのクライアントソフトのterrariaでワールドを作成する

C:\Users\USERNAME\OneDrive\ドキュメント\My Games\Terraria_mod\ModLoader\Worlds にワールドデータが作成される。

2.サーバーにワールドファイルをアップロード

/root/terrariaMod/Words ディレクトリを作成し、そこにローカルのファイルをアップロード

3.severconfig.txtの編集
この手順通りにやってれば /root/terrariaMod/1353/Windows/ の中にserverconfig.txt というファイルがあるはずなのでこれを編集してワールドファイルの場所を指定。なぜかMODを読み込めなかったのでMODフォルダのPATHも指定。

world=/root/terrariaMod/Worlds/terrariaMod.wld
modpath=/home/terraria/.local/share/Terraria/ModLoader/Mods

 
4.serverconfig.txtを移動

/root/terrariaMod/serverconfig.txtを移動させておく

 
5.serverdonfig.txtを読み込んでterrariaを起動

$ ./tModLoaderServer.bin.x86_64 -config /root/terrariaMod/serverconfig.txt

起動・ログインして、無事見たことないアイテムが追加されてました!わーーい。

【Google Apps Script】createFileでファイル作成時にシートと同じ階層に作成する方法

f:id:annykyon:20180416173437p:plain

よく、Google スプレッドシートからスクリプトjsonファイルなんかを書き出すのですが、ルートフォルダへの作成は簡単だけど、フォルダが散らかりがちだったりディレクトリ移動しないといけなかったりします。
フォルダIDを直接指定してもいいんだけど、メンバーで共有する場合はアクセスできないし、フォルダの共有はさらに散らかってわけわからなくなるのでしたくない。

ということで、スプレッドシートと同じ階層にファイルを作成できるようにしたけど、意外と大変だったのでメモしておきます。


手順としては

1.一旦ルートにファイルを作成
2.シートの親フォルダを取得
3.ルートに作成したファイルを削除、親フォルダにファイルを追加

という流れになります。


1.一旦ルートにファイルを作成

jsonDataには作成したデータを。
スプレッドシートからjsonデータを作成する手順はこのあたりを参考に

Google App Scriptを用いてGoogleスプレッドシートからJSONを生成してみよう | 株式会社LIG

 //一旦ルートにファイルを作成
 var file = DriveApp.createFile(  "outputFile.json" , JSON.stringify ( jsonData , null, 2 ) );

2.シートの親フォルダを取得する

これがちょっとめんどう
getFilesByNamecurrentFile.getParents などでファイルやフォルダ情報を取得すると、Iteratorというファイルのセットみたいなものを取得するのでwhileなどで一つ一つとりださないといけない。

//アクティブなシート(開いているスプレッドシート)情報の取得
var currentFileId = SpreadsheetApp.getActive().getId();//Id取得
var currentFileName = SpreadsheetApp.getActive().getName();//ファイル名取得

//アクティブなシートと同じ名前を持つドライブ内のすべてのファイルのコレクションを取得
var currentFiles = DriveApp.getFilesByName(currentFileName);
//アクティブなシートと同一IdのfileをcurretFileに代入
var currentFile;
while(currentFiles.hasNext()){
    currentFile = currentFiles.next();
    if(currentFile.getId() == currentFileId) break;
 }

 //親フォルダのコレクションを取得
 var parentFolders = currentFile.getParents();
//親フォルダがあればparentFolderに親フォルダを
 var parentFolder;
 while ( parentFolders.hasNext() ){
   parentFolder=parentFolders.next();
 }
//なければルートフォルダを指定
 if ( typeof(parentFolder)=="undefined" ) {
    parentFolder=DriveApp.getRootFolder();
 }

3.ルートに作成したファイルを削除、親フォルダにファイルを追加

後は、ルートのファイルを削除して、親フォルダに追加するだけです。

//ルートに作成したファイルを削除
rootFolder.removeFile(file);
//親フォルダにファイルを追加
parentFolder.addFile(file);

以上です。
もっと簡単な方法があるかもしれませんが。

全コード

//ファイルの作成
function outoputFile( jsonData ){
   //ルートにファイル作成
   var file = DriveApp.createFile(  "outputFile.json" , JSON.stringify ( jsonData , null, 2 ) );
   
   //アクティブなシート情報の取得
   var currentFileId = SpreadsheetApp.getActive().getId();//Id取得
   var currentFileName = SpreadsheetApp.getActive().getName();//ファイル名取得

   //アクティブなシートと同じ名前を持つドライブ内のすべてのファイルのコレクションを取得
   var currentFiles = DriveApp.getFilesByName(currentFileName);
   ///アクティブなシートと同一IdのfileをcurretFileに代入
   var currentFile;
   while(currentFiles.hasNext()){
      currentFile = currentFiles.next();
      if(currentFile.getId() == currentFileId) break;
   }
   //親フォルダのコレクションを取得
   var parentFolders = currentFile.getParents();
   //親フォルダがあればparentFolderに親フォルダを
   var parentFolder;
   while ( parentFolders.hasNext() ){
     parentFolder=parentFolders.next();
   }
   //なければルートフォルダを指定
   if ( typeof(parentFolder)=="undefined" ) {
     parentFolder=DriveApp.getRootFolder();
   }

   //ルートに作成したファイルを削除
   DriveApp.getRootFolder().removeFile(file);
   //親フォルダにファイルを追加
   parentFolder.addFile(file);

}

Google Home で予約語「エアコンつけて」を使えるようにする

IRKit + Google Home + IFTTT でスマートじゃない家電を操作する の記事でも書いてるように、Google Home では「エアコンつけて」とか「テレビをつけて」とかはスマート家電やChromecast経由の電源操作などのために予約されているようで、IFFFT経由でリクエストを送って赤外線情報で家電を操作するような時には「設定されていません」とかなんとかって怒られます。

これを回避するには、Google Homeアプリのショートカットで設定することで、予約語を優先して使うことができます。

ショートカットの登録

1. Google Home アプリ Google Home アプリ を起動。

2. ホーム画面の左上でメニュー アイコンをタップ。

3. [ その他の設定 ] [ ショートカット ] の順にタップ。

4. 右下のプラスボタンをタップすると登録画面が開きます。

f:id:annykyon:20180411215718p:plain

5. ショートカットを設定

ショートカットキーは、要は 言ったワードを指定したワードに置き換える もので、例えば「ラーメン タイマー」と言うと「タイマーを3分に設定」と置き換えるといった風に、長いセリフを一言で言っちゃうみたいな使い方をするものです。

予約語よりもショートカットキーが優先されるので、これを利用して「エアコンつけて」というワードをIFFFTで登録したワードに置き換えます。

私の場合は IRKit + Google Home + IFTTT でスマートじゃない家電を操作する - Silent Lips の記事で触れているように、予約語を回避するのにエアコンの操作を「エアーコントローラー オンにして」というワードで設定しています。

なのでショートカットで、こう言ったとき に「エアコンをつけて」を。Googleアシスタントによる操作 に「エアーコントローラー オンにして」を設定すればOK。
(エアーコントローラーはエアコンの略ではありません…)

f:id:annykyon:20180411220143p:plain  

確認

「エアコンつけて」とGoogle Homeに言って、IFFFT→WEBHOOK→IRKIT経由で、エアコンがつきました。

参考記事

ショートカット コマンドの作成と管理 - Google Home ヘルプ

【XAMMP】バーチャルホスト + SSL証明書を有効にする <Windows>

ローカルでささっと確認するのにXAMPPを使っているのですが、テストしたりするのにXAMPP環境もSSL化しておかないとなっていうことで、調べながら対応させたのでメモ。

目的

https://site01/
https://site02/
でアクセスできるようにする。
環境:Windows7Google Chrome
 

1.バーチャルホストの設定

1.php.iniファイルを確認

extension=php_openssl.dllがコメントアウトされていないか確認
xamppをC直下にインストールした場合は以下のパス
C:\xampp\php\php.ini
デフォルトではされていないもよう。

;extension=php_openssl.dll
↓
extension=php_openssl.dll

頭に ; がついていたら削除
 

2.httpd-ssl.confの編集

以下のファイルに追記
C:\xampp\apache\conf\extra\httpd-ssl.conf

<VirtualHost *:443>
    ServerName site01
    DocumentRoot "C:/xampp/htdocs/site01"
    SSLEngine on
    SSLCertificateFile "conf/ssl.crt/server.crt"
    SSLCertificateKeyFile "conf/ssl.key/server.key"
</VirtualHost>

<VirtualHost *:443>
    ServerName site02
    DocumentRoot "C:/xampp/htdocs/site02"
    SSLEngine on
    SSLCertificateFile "conf/ssl.crt/server.crt"
    SSLCertificateKeyFile "conf/ssl.key/server.key"
</VirtualHost>

DocumentRootにはルートディレクトリのパスを指定。

SSLCertificateFile "conf/ssl.crt/server.crt"
SSLCertificateKeyFile "conf/ssl.key/server.key"
のパスはバージョンによってか変わるみたいなので、httpd-ssl.conf内でSSLCertificateFileSSLCertificateKeyFileで検索して同じパスを設定しておく。
 

2.hostsファイルの編集

hostsファイル追記します。通常以下のパスにあります。
C:\Windows\System32\drivers\etc\hosts
一番最後に以下を追記します。

127.0.0.1 site01
127.0.0.1 site02

保存したらApatcheを再起動してブラウザで一旦確認。
https://site01/でブラウザでアクセスしてみます。

f:id:annykyon:20180322131603p:plain

こんな感じで警告が表示されますが、site01にアクセスする(安全ではありません)からとりあえず無理やり表示。
アドレスバーに以下のように警告が表示されますが、ひとまずバーチャルホストの設定はOK。

f:id:annykyon:20180329132100p:plain
 

2.SSL証明書の発行と設置

1.OpenSSL設定ファイルを編集する

C:\xampp\apache\conf\openssl.cnfをコピーして、openssl-san.cnfにリネーム。
一番下に以下を追記します。

[ SAN ]
subjectAltName = @alt_names

[ alt_names ]
DNS.1 = localhost
DNS.2 = site01
DNS.3 = site02

 

2.サーバ証明書秘密鍵の作成

Git Bashなら、そのままopensslコマンドを使えるということなので、Git Bahを使いました。

# ディレクトリ移動
$ cd /c/xampp/apache/conf

# サーバ証明書、秘密鍵を生成
$ openssl req \
> -newkey  rsa:4096 \
>  -keyout  my-server.key \
> -x509 \
>  -nodes \
> -out my-server.crt \
> -subj  "//CN=localhost" \
> -reqexts  SAN \
> -extensions  SAN \
> -config  openssl-san.cnf \
> -days  3650
Generating a 4096 bit RSA private key
.............................................................................................................................++
...............................................................++
writing new private key to 'server.key'
-----

これで $C:\xampp\apache\confに、 my-server.crt my-server.key ができました。

このファイルをそれぞれ以下のディレクトリに移動します。
my-server.crtC:\xampp\apache\conf\ssl.crt\
my-server.keyC:\xampp\apache\conf\ssl.key\

 

3.サーバ証明書秘密鍵のパスを変更

C:\xampp\apache\conf\extra\httpd-ssl.confサーバー証明書秘密鍵のパスを作成したファイル名に書き換えます。

<VirtualHost *:443>
    ServerName site01
    DocumentRoot "C:/xampp/htdocs/site01"
    SSLEngine on
#server.crtをmy-server.crtにserver.keyをmy-server.keyに書き換え
    SSLCertificateFile "conf/ssl.crt/my-server.crt"
    SSLCertificateKeyFile "conf/ssl.key/my-server.key"
</VirtualHost>

<VirtualHost *:443>
    ServerName site02
    DocumentRoot "C:/xampp/htdocs/site02"
    SSLEngine on
    SSLCertificateFile "conf/ssl.crt/my-server.crt"
    SSLCertificateKeyFile "conf/ssl.key/my-server.key"
</VirtualHost>

 

4.証明書のインストール

1.C:\xampp\apache\conf\ssl.crt\my-server.crt をダブルクリックし、証明書ウィンドウが開いたら証明書のインストールを選択。

f:id:annykyon:20180329150752p:plain

2.証明書をすべて次のストアに配置するを選択。
3.参照ボタンをクリックし、信頼されたルート証明機関を選択し次へをクリック。
4.セキュリティ警告がでますが、はいを選択

以上で、証明書がインストールされました。

 

5.確認

apacheを再起動し、 https://site01/ でアクセスしてみます。
アドレスバーが保護された通信になっていたら成功です。

f:id:annykyon:20180329151951p:plain

 

参考記事

XAMPP for WindowsでSSLを有効にする - Qiita

opensslでマルチドメイン証明書用のCSRを作成

IRKit + Google Home + IFTTT でスマートじゃない家電を操作する

Google Homeがうちにやってきたので、やっぱ音声アシスタントといえば家電を操作したいよね。といってもうちの家電はスマートでもなんでもなく7年前の霧ヶ峰なので、以前から使っているIRKitをそのまま使ってやってみたのでその時のメモです。

IRKitはいわゆる学習リモコンで赤外線情報を学習してWiFiを通じて家電を操作できるもので、IRKitと同じWiFiにいなくても、外出先から赤外線信号を送るための、インターネット上にあるサーバのAPIも公開しているという素敵なものです。
 
 

 

1.IRKitのIPアドレスを取得

IRKit公式ではBonjourで取得する方法が紹介されていましたが、私はルータの設定画面で確認しました。

f:id:annykyon:20180308161458p:plain

こんなかんじで私の環境では192.168.11.2でした。

 

2.赤外線信号を取得

IRKitで受信した最も新しい赤外線信号を返してくれます。
192.168.11.2のところはIRKitのIPアドレスです。

% curl -i "http://192.168.11.2/messages" -H "X-Requested-With: curl"
HTTP/1.0 200 OK
Access-Control-Allow-Origin: *
Server: IRKit/3.0.0.0.g85190b1
Content-Type: text/plain

{"format":"raw","freq":38,"data":[18031,8755,1190,1190,1190,3341,1190,3341,1190,3341,1190,1190,1190,3341,1190,3341,1190,3341,1190,3341,1190,3341,1190,3341,1190,1190,1190,1190,1190,1190,1190,1190,1190,3341,1190,3341,1190,1190,1190,3341,1190,1190,1190,1190,1190,1190,1190,1190,1190,1190,1190,1190,1190,1190,1190,1190,1190,3341,1190,3341,1190,3341,1190,3341,1190,3341,1190,65535,0,9379,18031,4400,1190]}

 

3.コマンドで赤外線信号を送ってみる

{"format":"raw","freq":38,".... } のところはさっき取得した赤外線信号にします。

% curl -i "http://192.168.11.2/messages" -H "X-Requested-With: curl" -d '{"format":"raw","freq":38,"data":[18031,8755,1190,1190,1190,3341,1190,3341,1190,3341,1190,1190,1190,3341,1190,3341,1190,3341,1190,3341,1190,3341,1190,3341,1190,1190,1190,1190,1190,1190,1190,1190,1190,3341,1190,3341,1190,1190,1190,3341,1190,1190,1190,1190,1190,1190,1190,1190,1190,1190,1190,1190,1190,1190,1190,1190,1190,3341,1190,3341,1190,3341,1190,3341,1190,3341,1190,65535,0,9379,18031,4400,1190]}'

ピッっとエアコンがついたらここまで成功☆  
 

4.clienttoken, clientkey, deviceid を取得する

この赤外線信号を外部から送信するために、IRKitのclienttoken, clientkey, deviceid を取得します。

clienttokenを取得

% curl -i "http://192.168.11.2/keys" -d '' -H "X-Requested-With: curl"
HTTP/1.0 200 OK
Access-Control-Allow-Origin: *
Server: IRKit/3.0.0.0.g85190b1
Content-Type: text/plain

{"clienttoken":"XXXXXXXXXXXXXXXXXXXXXXXXXXXXX"}

取得したclienttokenからclientkey, deviceid を取得。

% curl -i -d "clienttoken=XXXXXXXXXXXXXXXXXXXXX" "https://api.getirkit.com/1/keys"
HTTP/1.1 200 OK
Server: openresty
Date: Thu, 08 Mar 2018 14:45:52 GMT
Content-Type: application/json; charset=utf-8
Content-Length: 94
Connection: keep-alive
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: X-Requested-With
X-Content-Type-Options: nosniff

{"deviceid":"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX","clientkey":"XXXXXXXXXXXXXXXXXXXXXXX"}

 

5.APIリクエストの作成

clientkeyとdeviceidのところはさっき取得したものにします。

https://api.getirkit.com/1/messages?clientkey=XXXXXXXXXXXXXXXXXXXXXXX&deviceid=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX&message={"format":"raw","freq":38,"data":[18031,8755,1190,1190,1190,3341,1190,3341,1190,3341,1190,1190,1190,3341,1190,3341,1190,3341,1190,3341,1190,3341,1190,3341,1190,1190,1190,1190,1190,1190,1190,1190,1190,3341,1190,3341,1190,1190,1190,3341,1190,1190,1190,1190,1190,1190,1190,1190,1190,1190,1190,1190,1190,1190,1190,1190,1190,3341,1190,3341,1190,3341,1190,3341,1190,3341,1190,65535,0,9379,18031,4400,1190]}

 

6.Google Home→IFFFT経由でIRKitに信号を送る

ここから先はIFFFTというサービスを使いました。IFFFTはサービスとサービスを連携させる仕組みを提供しているシステムで、例えば「Instagramにアップした画像をDropboxに保存する」とか「Gメールにスターをつけたら自動的にEverNoteに保存する」とかIF(もし)○○したら△△するというのを組み合わせを好きなようにつくれます。 今回はGoogle Homeに話したらWebhookでIRKitのAPIにリクエストするということになります。  

IF(Google Homeにあるフレーズを話したら)を設定する

IFTTTへのログインはすませておき、My Applets > New Applet を選択。
「if + this then that」+ this をクリック。検索に「google」と入力するとGoogle Assistantが出てくるのでこれを選択。そしてSay a simple phraseを選択します。

ここでGoogle Homeにトリガーとなるフレーズを設定するんですが、ちょっと壁が…。「エアコンをつけて」とか「エアコンオンにして」とかにすると、もともとスマート家電用に予約されているようで、Google Homeに「設定ができていない」とかなんとか怒られてしまいました。

(これは後で解決したのでこちらで記事にしてます)
Google Home で予約語「エアコンつけて」を使えるようにする - Silent Lips

回避方法はあとで調べようってことで、ひとまずエアコンに「ぽかぽかさん」とかニックネームつけるかなーとつぶやいていたら、横から
「エアーコントローラーオンにして」 にしたら?
というアドバイスが…
エアコンはエアーコントローラーの略じゃないでしょ…と思いつつ、つっこむのが面倒だったのでそのまま設定します。

f:id:annykyon:20180309003730p:plain

What do you want the Assistant to say in response? のところはGoogle Home からのレスポンスなので「エアーコントローラーok」としました。エアコンはエアーコントローラーの略ではありません。
Languageは日本語なのでJapaneseに設定したら create trigger でセット。

that(IRKitのAPIにリクエストを送信)を設定する。

「if then + that+ thatをクリックして検索に「webhooks」と入力するとwebhooksがでてくるのでこれを選択。さらにMake a web requestを選択。

1.URLのところにさっき 5.APIリクエストの作成 でつくったURLをいれる。
2.MethodPOSTに設定
3.Content Typetext/plain
4.Creat action で登録
5.Finish ボタンで終了

f:id:annykyon:20180309133744p:plain
 

7.Google Homeで実際に確認

エアーコントローラーオンにして と問いかけるとピッとエアコンの電源が入り、 エアーコントローラーokです と返してくれました。
あと、エアコンはエアーコントローラーの略ではありません。

 

参考記事

IRKit - Open Source WiFi Connected Infrared Remote Controller

IFTTTを使ってスマートスピーカーでできること[GoogleHome編] | KOTODAMA TODAY