マインクラフトで【 javascript】プログラミング

マインクラフトでプログラミング

ある日、小学生の娘が一人でMincraftでなにやらずーっと作ってるなとおもってたら、いきなり「マイクラで脱出ゲームつくったらからやってみて」って言いだしました。
なにそれなにそれわくわくってやってみたら、これがすごくよくできてて、扉の鍵の隠し場所が秀逸だったり、全体にストーリーがあって、最後はすべての脱出した場所をトロッコをのりながらみわたして花火があがってエンディングという、ちょっとした1つのゲームみたいで完成度が高くびっくり!

これはわたしもすごいのを作って娘に挑戦してもらわねば!
FFのクリスタルタワーみたいにしようかな?罠をいっぱいしかけて…
といっても、巨大な建物つくったりするのは大変。プログラムだったら整地やたくさんのブロックを置くのも楽なはず。

というわけで、いろいろと調べてみた結果「MakeCode for Minecraft」というのを使ってみることにしました。

MakeCode for Minecraftを選んだ理由

1.ビジュアルプログラミング画面とソースコード画面を行ったり来たりできる

これの良いところはビジュアルプログラミング(ブロックを組み立てるような感じで直感的にプログラムできる)とjavascriptソースコードを書く)を行ったり来たりできるとこかなと思っています。

MakeCode for Minecraft

ビジュアルプログラミングで組み立ててjavascriptではどう書くのかをチェックして、慣れればjavascriptでガンガン書くっていうのがよいのかな。
これなら娘にも使えるし自然とソースコードでの書き方に興味が持てればなお良しかも。

2.クロスプレイができる

Mincraftはクロスプレイに対応し、Xbox One版、Windows 10版、Android版、iOS版、VR版で一緒にプレイできるようです。
こちらはまだ試してないので、プログラムで作った世界でもできるかとかまだ疑問はのこりますが、できれば、作った世界をSwitchで4分割とかで4人で攻略してもらう!とかも楽しそう!!!
こちらは試してみてからおいおい書きます。

環境をつくる

1.MinecraftのWindow10版をインストール

Windows版のMincraftは「Windows10版」と「Java版」の2種類あります。
ここ使うのは「Windows10版」なので間違えないように。
以下のリンクから購入できます。
ダウンロード後は指示に従ってインストールします。
Minecraft for Windows 10 を購入 - Microsoft Store ja-JP

Minecraft Windows10版 購入

ちなみに「Windows10版」は先述したとおり、Xbox One版、Windows 10版、Android版、iOS版、VR版クロスプレイに対応した統合版で、「Java版」は、描画をリアルにしたりとか、RPG要素が入ったりとかといった、数多くの世にあるMODを導入できるう自由度が高いものになってます。

2.Code Connectionをインストールする

次に「マインクラフト」と「MakeCode」を接続するための「Code Connection」をインストールします。 以下のページのDownload Code Connectionからインストーラーをダウンロード。
ダウンロード後は指示に従ってインストールします。
Setting up MakeCode for Minecraft - Microsoft MakeCode Code  Connectionをダウンロード

3.Mincraftで世界を作る

Mincraftを起動。「遊ぶ」を選択。

Minecraftを起動

世界をつくる

Minecraftで世界を作る

世界を作成

Minecraftの世界を作成

設定画面が表示されるので「チート」をクリックしてオンにして、「作る」ボタンをクリックして作成します。 作成するとすぐにゲームがスタートします。

Minecraft設定 チートをオン

4.コード接続を開始

Windowに戻って、(2)でインストールしたCode Connectionを起動します。
(Minceraftの画面から抜けられない場合は「esc」キーを押す)

.起動するとすぐにMinecraftに接続するためのコマンドが表示されるのでこれをコピー (コピーボタンをおすとクリップボードにコピーされます)

Code connectionを起動

Mincraftの画面に戻りTキーを押すと、チャットウィンドウが表示されるので、Ctrl + Vを押してCode Connectionからコピーしたコマンドをペースト。

MakeCode for Minecraft

右側の矢印ボタンをおすと接続されます。

Minecraft Code connection

5.MakeCodeをスタート

Code Connectionの画面に戻ると以下のような画面になっているので「MakeCode」を選択。

MakeCode for Minecraft

MakeCodeのプロジェクト画面が開きます。これで準備完了です。

MakeCode for Minecraft

プロジェクトを作成してみる

1.簡単なプログラムを作成

設定ができたのでプロジェクトを作成してみます。

マイプロジェクトの中の「新しいプロジェクトを作成」をクリック。

MakeCode for Minecraft

プログラミング画面が開きます。 最初はビジュアルプログラミング画面になっていて、ブロックで組み立てるようにプログラムができます。

MakeCode for Minecraft

試しにチャットコマンド"run”を入力した時runtpに変更してみます。

MakeCode for Minecraft

そして、左側のエージェントボタンをクリックするとエージェントに関する動きの一覧が表示されるので、この中のエージェントを自分の位置に戻すをドラッグして、チャットコマンド"tp"を入力した時の中にくっつけてみます。

MakeCode for Minecraft

画面下の「保存」ボタンをクリックし、名前をつけて適当な場所に保存します。

MakeCode for Minecraft

2.作ったプログラムを実行

マインクラフトの画面に戻って「T」キーを押し、チャットウィンドウに「tp」と入力して右の矢印をクリックします。

MakeCode for Minecraft

何かが近くにワープして来たのがわかったでしょうか?
ワープしてきたのは「エージェント」というキャラクターでMakeCodeではこの「エージェント」に採掘させたり、ブロックを設置させたりといった命令をプログラムですることになります。今ワープしてきたのはこの「エージェント」なんですね。

つまりこのプログラムで実行したのは、
チャットコマンド"tp”を入力した時、エージェントを自分の位置にもどす
ということになります。

3.javascriptでどう書くのか確認してみる

MakeCodeの画面に戻って、javascriptへの切り替えボタンをクリックしてみます。

MakeCode for Minecraft

するとjavascripのコード画面に切り替わり、同じプログラムをjavascriptではどう描くかを確認できます。
なれればこっちでガンガン書いていくのが良いですね。

MakeCode for Minecraft

まとめ

あとは、チュートリアルが充実しているので、チュートリアルをひとつひとつ見ていって、MakeCodeで何ができるかをざーっと確認していくと、どう組み立てればいいのかがイメージできるかなと思います。

【Vue Carousel】Vueで カルーセルを作る

Vueで カルーセルを作る

Vue.jsで簡単にカルーセルを実現できる「Vue Carousel」の使い方。
レスポンシブ対応しているし、マウスでのドラッグやスマホのスワイプでも動くし、操作感も心地よいです。
ここでは、インストールなしでファイルを直接読みこむ手軽なやり方でやります。

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

公式サイトはこちら Vue Carousel

使い方

scriptファイルの読み込み
まずはvue.jsとvue carouselを読み込みます。
ここではCDNで直接読み込みます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://cdn.rawgit.com/SSENSE/vue-carousel/6823411d/dist/vue-carousel.min.js"></script>

htmlの記述
スライドさせたいコンテンツの分だけ <slide>Content</slide>を増やします。

<div id="app">
  <carousel>
    <slide>
      Slide 1 Content
    </slide>
    <slide>
      Slide 2 Content
    </slide>
    <slide>
      Slide 3 Content
    </slide>
  </carousel>
</div>

javascriptの記述

var app=new Vue({
  el: "#app",
  components: {
    'carousel': VueCarousel.Carousel,
    'slide': VueCarousel.Slide
  },
});

cssの記述
各スライド部分にVueCarousel-slideっていうクラス名が付与されるので適当にCSSで表示を調整すればOK。

.VueCarousel-slide {
  height:100px;
  color:#FFF;
  background:#59ecff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right:1px solid #FFF;
  box-sizing:border-box;
  font-size:12px;
}

 

オプション

いろいろオプションがあってカスタマイズできます。
(インストールしないでスクリプトファイルを直接読み込みの場合の指定方法です。)

自動再生・ループ再生

#autoplay [true/false]
#loop [true/false]

See the Pen vue carousel-autoplay by KYOKO SUZUKA (@kyonchan) on CodePen.

コンポーネントにv-bindで渡してあげればOKです。
ついでにloopも渡せば最後までいったら最初に戻ってループ再生されます。

<carousel v-bind:autoplay="true"  v-bind:loop="true">

ページ分割

#per-page [Number]

See the Pen vue carousel-perPage by KYOKO SUZUKA (@kyonchan) on CodePen.

デフォルトは2です。数を指定してあげると1画面に表示されるコンテンツの数を変更できます。

<carousel v-bind:per-page=4>

レスポンシブ

#per-page-custom [[ブレークポイント,Number],[ブレークポイント,Number]]

See the Pen vue carousel-perPageCustom by KYOKO SUZUKA (@kyonchan) on CodePen.

配列にブレイクポイントと表示したい数をセットにして入れることで、画面幅によって表示数を切り替えることができます。例では幅480px以上で3列表示。780px以上で4列表示になります。

<carousel v-bind:per-page-custom=[[480,3],[780,4]]>

スピード

#speed [Number]

See the Pen vue carousel-speed by KYOKO SUZUKA (@kyonchan) on CodePen.

スライド時のスピードを調整できます。

<carousel  v-bind:autoplay="true" v-bind:speed=2000>

ナビゲーションの表示・非表示

#navigation-enabled [true/false]

See the Pen vue carousel-navigationEnabled by KYOKO SUZUKA (@kyonchan) on CodePen.

左右にナビゲーションを表示・非表示。

<carousel  v-bind:navigation-enabled="true">

ページネーションの表示・非表示

#pagination-enabled [true/false]

See the Pen vue carousel-paginationEnabled by KYOKO SUZUKA (@kyonchan) on CodePen.

ページネーションを表示・非表示

<carousel  v-bind:pagination-enabled="false">

Raspberry Pi インストール ~電子工作女子は、USBキーボードも、USBマウスも、モニタもLANケーブルも持っていない~

電子工作女子は、USBキーボードも、USBマウスも、モニタもLANケーブルも持っていないですよね。

f:id:annykyon:20180903233025p:plain

ベランダで育てた採れたてのバジルでジェノベーゼを作りたい。

そんなことを思い描きながら始めた水耕栽培
水耕栽培って手軽に見えて結構大変で、毎日水を足してあげないといけなかったり水の流れを作ってあげないといけなかったり…。 そうこうしてるうちに干からびてしまったって人も多いのでは…。

うちのベランダにもあります、干からびたバジル。1回もジェノベーゼ作ってません。

じゃあ、水耕栽培、自動化しちゃえばいいじゃない。そしたらジェノベーゼ作り放題じゃない。

そうだ。電子工作はじめよう。

っていうことで、いつか水耕栽培で新鮮なバジル採り放題を夢見て、まずは電子工作のことはじめ「Raspberry Pi 」のセットアップからやっていきます。

Raspberry Pi とは

小型の基盤むき出しのコンピューターで、最近ではIOT(いろんなモノをインターネットに接続して状態を監視したり操作したりとか…)に利用されたり、Webサーバーとして使ったり、いろんなパーツをつないで、カメラとかロボットとかつくれたりもしちゃいます。

Raspberry Pi セットアップ

そもそも電子工作女子は、USBキーボードも、USBマウスも、モニタもLANケーブルも持っていない。

PCはノートだし、インターネットも無線だし。
それでもできます。Raspberry Pi セットアップ。

用意したもの

・ノートPC(Windows10)
・Raspberry Pi3 Model B (ケースセット買いました)
microSD 16GB(Raspberry Piに対応してないものもあるみたいなので注意)

この3つだけ。ケースはクリアも電子工作感があふれて気になったんだけど、黒の棚においても目立たないように黒のケースにしました。レゴで手作りするケースもかわいくて気になるなー。
Piterest:Raspberry Pi Lego case

1.OSダウンロード

以下のリンクから「RASPBIAN STRETCH LITE」をダウンロードします。 www.raspberrypi.org Raspberry Pi WITH DESKTOP版とLITE版との違いは、いわゆるデスクトップ画面があるかないか。 LITE版だとデスクトップはなくてコマンドのみでの操作になります。
今回はそもそもモニタなしの前提なので、Raspberry Piの操作はすべて、PCからRaspberry Piに接続してコマンドで操作する形になります。なのでLITE版でOK。

2.OSのインストール

1.SD Card Formatterのインストール
SDカードをフォーマットするために、以下から「SD Card Formatter」をダウンロードしてインストール。 SDメモリカードフォーマッター for Windows Download - SD Association

2.microSDカードをPCに挿入

3.「SD Card Formatter」を起動。
アプリケーションが見つからないときはスタートメニュー>SD Association>SD card Formatter と選択します。

4.フォーマット
カードの選択のところでSDカードが選択されているのを確認。(間違えるとデータが消えちゃうので注意!)
クィックフォーマットを選択して「フォーマット」をクリックします。

f:id:annykyon:20180903234724p:plain

正常に終了しました。と出たらOKをしてウィンドウを閉じます。

f:id:annykyon:20180904202637p:plain

5.SDカードにOSをコピー
SDカードにOSを書き込むために、Etcherを使います。 リンクから自分の環境にあったインストーラーをダウンロードします。

f:id:annykyon:20180906122939p:plain

ダウンロード出来たらインストーラーを実行。ライセンス契約に同意したらインストールが始まります。

インストールが終了すると以下の画面が出てきますので、Select imageを選択。

f:id:annykyon:20180906122919p:plain

最初にダウンロードしたimgファイルを選択。

SDHC cardのところでSDカードが選択されていることを確認したらFlash!をクリック。書き込みが始まります。

f:id:annykyon:20180906123824p:plain

無事書き込み終了。これでOSのインストールは完了です。

f:id:annykyon:20180906124219p:plain

3.SSH接続の設定

次に、自分のPCからRaspberry PiSSHで接続できるようにします。
SSHは安全にリモートコンピューターと接続するための仕組み的なものです。
Raspberry Piはセキュリティのため初期設定ではSSH接続を「許可しない」設定になっているので、これを「許可する」ための設定をしておきます。

1.SSHファイルを作成する
SSHを有効にするには SDカードの直下にSSHというファイルを作成するだけ。 マイコンピュータを開いて、その中のSDカードを開きます。

f:id:annykyon:20180906125334p:plain

Raspberry Piの構成ファイルがずらーっとでてくるので、ここで右クリック>新規作成>テキストドキュメント と選択。

f:id:annykyon:20180906125730p:plain

新しいテキスト ドキュメント.txtという名前でファイルが作成されますが、これを拡張ごと消してSSHという名前にします。

f:id:annykyon:20180906130018p:plain

4.WiFi接続の設定

SSHで接続するにしても、PCと同じネットワークにつながっていないといけませんので、自宅のWiFiに接続するための設定をしておきます。

1.設定ファイルを作成
先ほどと同じく、マイコンピューター>SDカードと開いたら、そこで右クリックして新規ファイルを作成し、名前を wpa_supplicant.conf とします。 このファイルをテキストエディタで開き編集します。 エディタを何使えばいいかよくわからなければこの辺をダウンロードして使ってください。
Notepad++ v7.6 - Current Version

2.設定情報を入力
wpa_supplicant.confを開いたら以下の内容をコピペします。

country=JP
ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev
update_config=1
network={
    ssid="xxxxxxx"
    psk="xxxxxxx"
}

ssid="xxxxxxx"のxxxxxxxのところにWifiSSIDを入力。
psk="xxxxxxx"のxxxxxxxのところにパスワードを入力するんですが、パスワードはそのまま入力しちゃうとセキュリティ的にアレなので、ハッシュ化します。

WPA key calculation: From passphrase to hexのページを開いて、 Network SSIDのところにSSIDを、WPA passphraseのところのパスワードを入力し、Calculateをクリックすると、下の Hexadecimal keyのところにキーが表示されます。

f:id:annykyon:20180907124912p:plain

これをパスワードのところ入力すればOK

こんな感じ。SSIDはダブルクォーテーションで囲むけどハッシュ化したパスワードは囲まなくてOKです。

ssid="Buffalo-A-08B8"
psk=f886a021b8fed873c56e2c6458749dcc1c8d89db41f0ef793b95f9432427d2cb

4.Raspberry Piを起動

1.Raspberry Piを起動
いよいよRaspberry Piを起動します。
SDカードをセットして電源につないだら起動するまで2,3分ほど待ちます。

5.IPアドレスの確認

ここからPCから Raspberry Piに接続して操作するのですが、接続するためにIPアドレスという住所のようなものが必要なのでそれを確認します。簡単にアプリでやってみます。

1.スマホアプリ「Fing」をダウンロード
IOS版Fing Android版

2.Raspberry PiIPアドレスを確認
起動したら適当なアカウントでログインすると、WiFiに接続中の機器一覧が表示されます。 だいたいMyComputerとか PS4とかどの機器がわかるような名前がついてますが、Raspberry PiGenericという名前で表示されました。何かわからないものは全部Genericになるみたいなので、複数ある可能性がありますが、見当がつかなければ全部接続試してみるとか、、、(笑
この端末の下の 192.168.11.9 みたいなやつがIPアドレスです。この情報をもとに接続します。

f:id:annykyon:20180911125542p:plain

6.Raspberry Piに接続

1.Tera Termをダウンロード
PCからRaspberry Pi に接続するために、以下からTera Termをダウンロードしてインストールします。今後接続にずっとこれを使います。

ダウンロードファイル一覧 - Tera Term - OSDN

2.接続 Tera Termを起動し、ホストのところに先ほど調べたIPアドレスを入力。
他はデフォルトのままでOKをクリック。セキュリティ警告が出れば「続行」をクリックします。
SSH認証画面が表示されたら以下のRaspberry Piの初期ユーザー名とパスワードを入力してOKをクリック。

ユーザー名:pi
パスワード:raspberry

Linux raspberrypi 4.14.50-v7+ #1122 SMP Tue Jun 19 12:26:26 BST 2018 armv7l

The programs included with the Debian GNU/Linux system are free software;
the exact distribution terms for each program are described in the
individual files in /usr/share/doc/*/copyright.

Debian GNU/Linux comes with ABSOLUTELY NO WARRANTY, to the extent
permitted by applicable law.
Last login: Mon Sep 10 23:45:39 2018 from 192.168.179.8

SSH is enabled and the default password for the 'pi' user has not been changed.
This is a security risk - please login as the 'pi' user and type 'passwd' to set a new password.

pi@raspberrypi:~ $

こんな画面ができればログイン成功ーー! 続きはまたっ

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  |  Compute Engine  |  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 - The 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);

}