Dcoker でMinecraft Serverを建てる

背景

DockerでMinecraftサーバを構築してみました。

IMAGE ALT TEXT HERE

参考

https://hub.docker.com/r/itzg/minecraft-server/

コマンド

main
1
docker run -d -p 25565:25565 -e EULA=TRUE -e FORCE_REDOWNLOAD=true --name mc --restart=always -v /Users/{user}/mc:/data  itzg/minecraft-server  

コマンド解説

main
1
2
3
4
5
6
7
8
9
10
docker         # docker  
run # docker-hub からpullしてコンテナを生成し、コンテナを開始する
-p 25565:25565 # portをコンテナの25565から実行PCの25565に転送する
-e EULA=TRUE # 環境変数、利用許諾に同意する場合はTRUE。FALSEだと起動しない
-e FORCE_REDOWNLOAD=true # 最新バージョンをダウンロードする場合はtrue
--name mc # コンテナ名
--restart=always # 終了してしまった場合に自動的に再起動する
-v /Users/{user}/mc:/data # 実行PCの/Users/{user}/mcをコンテナ内の/dataにマウントする
#※自分の好きなフォルダに変更してください。
itzg/minecraft-server # docker-hub からpullするイメージ名

Firebaseアプリデプロイ

概要

動画を作ったついでのメモ。

IMAGE ALT TEXT HERE

前提

Firebase CLIをインストール済み
Firebase CLIにログイン済み
LinuxまたはMAC
nanoがインストール済み

コマンド

main
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

# アプリケーションフォルダ作成
mkdir {appname}

# フォルダ内に移動
cd {appname}

# カレントフォルダをFirebaseで初期化
firebase init

# 利用するサービスの選択。(単純なホームページであればHostingでOK)
# スペースで選択し、エンターで次に
>? Which Firebase CLI features do you want to set up for th>is folder? Press Space to select features, then Enter to confirm your choi
>ces. (Press <space> to select, <a> to toggle all, <i> to invert selection)
> ◯ Database: Deploy Firebase Realtime Database Rules
> ◯ Firestore: Deploy rules and create indexes for Firestore
>❯◯ Functions: Configure and deploy Cloud Functions
> ◯ Hosting: Configure and deploy Firebase Hosting sites
> ◯ Storage: Deploy Cloud Storage security rules
> ◯ Emulators: Set up local emulators for Firebase features

# プロジェクトをどうするか?基本的にGCPに紐付いている。
# あまり考えたくなければ「Create a new project 」で良い
>? Please select an option: (Use arrow keys)
>❯ Use an existing project
> Create a new project
> Add Firebase to an existing Google Cloud Platform project
> Don t set up a default project

# 作成するプロジェクト名6-30で既存のものにかぶらないように
>? Please specify a unique project id (warning: cannot be modified afterward) [6-30 characters]:
> ()

# プロジェクトの呼び名?プロジェクト名そのままであればエンターでOK
>? What would you like to call your project? (defaults to your project ID) ()

# ホームページを設置するフォルダ名の指定、初期値はpublicなのでそのままエンターでOK
>? What do you want to use as your public directory? (public)

# すべての要求をindex.htmlに集約するかどうか?
# SPAにする場合はYES
>? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)

# --これでFirebaseへの登録は完了--
# HTMLを設置するパブリックフォルダへ移動
cd public

# 存在するindex.htmlを削除
rm index.html

# 新規にindex.htmlを作成
nano index.html
>こんにちわ ホームページです。

# カレントフォルダに戻る
cd ..

# クラウドにデプロイする
firebase deploy
>Project Console: https://console.firebase.google.com/project/{appname}/overview
>Hosting URL: https://{appname}.firebaseapp.com

# >Hosting URL: https://{appname}.firebaseapp.com
# を参照にデプロイしたページを確認する

CSSでチラつき表現

背景

わざとちらつかせて古いテレビ的な表現とかかっこいいですよね。
CSSのみでざっくり作ってみました。

結論

こんな感じです。

See the Pen tiratuki tv by hashito (@hashito) on CodePen.

##解説

  • 標準の動画はdogaで表現.
  • チラつき①はbefore要素で表現
  • チラつき②はafter要素で表現
    各チラつきは位置とFilterの値が少しずつ違う様になっていて、1%単位で表示したりしなかったりみたいになっています。
    ココらへんの値を変えればもう少しかっこよくなるのかなぁ…

もう少し簡単な書き方

概要

コメントでご指摘を頂いたので、inheritを利用したほうが簡素にかけるらしい…
inheritって?→親要素の計算値を引き継ぐ
親…要素…?そもそもbeforeとかって誰の子要素なんだろう…

ということで少し試してみました。

See the Pen inherit test by hashito (@hashito) on CodePen.

まず、クラスt1で普通の継承の動き。
親要素t1からt1-1t1-1::beforet1-1::afterに引き継がれています。

まず、クラスt2beforeafterへの継承の動き。
t2-1からt2-1::beforet2-1::afterに引き継がれています。
つまり、beforeafterは対象要素の子として動いているようです。

最後に、クラスt3beforeからの継承の動き。
どこにも引き継がれていないことが分かります。
つまり、beforeafterとかっていう親子関係はないということですね。

実装

下記の部分を継承するように変更。

main
1
2
3
background-image: inherit;    
width:inherit;
height:inherit;

See the Pen tiratuki tv(inherit) by hashito (@hashito) on CodePen.

こうすると対象要素しか画像に関する情報を入力しなくてすむので、良いですよね!
コメントありがとうございました!