はりうすブログ (のすけのメモ)

湘南にある小さな会社 代表 ”のすけ”のブログです

私はサル以下なのか、、、と思ったあなたに。RPGに例えたGitの概念

f:id:hollywis:20200429131839j:plain

ヒトにはもっと良い例えがあるはず!
そんなわけで、サルには理解できないRPGで、誤解を恐れずに例えてみた。

いつも教えるときに例えて説明しているので、自分で整理するためにメモ。


概念だけなので正確には、こっちのGithubが出してるチートシートを確認してね。
https://github.github.com/training-kit/downloads/ja/github-git-cheat-sheet.pdf

git init

メモリーカードの初期化
全てはここから始まる。たまにPhpStormなど便利なIDEは勝手にやってる場合がある

git clone

友達のセーブデータをメモリーカードにダウンロード。cloneから始める場合はinit不要。

git add

セーブするものを選ぶ
(RPGの中の状況のうち、セーブするものを選べる。お金だけとか、経験値だけとか、このキャラだけとか)

git commit

addした状態をメモリーカードへのセーブ

git checkout

セーブデータのロード(読み込み)

git remote

クラウドセーブポイントの設定
メモリーカードではなく、インターネット上のメモリーカードに保存する(bitbucket, githubとか)
何個でも設定できる。

git push

git remoteで設定したインターネット上のメモリーカードに保存。
git commit(手元のメモリーカードに保存)した後にやると、そのデータがネットにもコピーされる。
これで、手元にあるメモリーカードを紛失しても、水に濡らしてもセーブデータは失われない

git pull

インターネット上のメモリーカードカードの状態を
自分のメモリーカードに反映する。
友達が更新していた場合に、ちょくちょく、git pullしてやらないと、自分だけ古いデータで置いてきぼりを喰らう事があるよ。

git branch

セーブデータの系列
条件分岐する箇所で、一旦セーブすると思います。
masterブランチは、メインのセーブデータ。
そのほかのブランチは、サブイベント回収のセーブデータみたいなイメージ。
サブイベントを回収し尽くしたら、masterブランチにマージして、常にmasterブランチのセーブデータに統合させる事ができます!
それを、自分だけじゃなく、友達同士で、協力してサブイベント回収して、masterブランチに統合する事もできる!

git rebase

自分のセーブデータに、別のセーブデータを混ぜる事ができる。
混ぜる作業は手動なので、熟練した技量が必要

git marge

セーブデータを結合する。
git rebaseと似ている。こちらも熟練した技量が必要

git reset

セーブデータを巻き戻す。
無かった事にする。

git revert

差分を打ち消す。差分を部分的に戻す。
お金だけ、前回のセーブデータの状態にするとか、あの街には行かなかった事にするとかできる。

git diff

セーブデータと現在の状態の差分を見れる!
便利!

git stash

現在の差分を一時待避できる。
友達のセーブデータをロードしたい場合、今の自分の変更はrevertするか、stashすることで、初めてロードできるようになる。
何気に使います。

git reflog

自分の冒険履歴を見られる
「右うでを上げた」並の細かさで記録されている。
そして、git reset -hard で、そのログをリプレイできる!その時に戻れる!

git log

過去のセーブデータを閲覧できる
こっちの方が、大雑把な冒険履歴を見れる。

git config

セーブ方針の設定ができる。
この自分の冒険を記録している者の名前は何か?とか、メールアドレスとか。


どんなもんでしょう?

この本超えたかな?ダメか(笑)

Nuxt.js × Cordvaでスマホアプリを作ろうとしたメモ

Nuxt.jsでcordovaを利用してiOS,Andoroidアプリが作れたらいいなという
意欲的な事をふと思ったのでやってみたメモです。


Nuxt.jsで作成したWebサイトを簡単にCordovaアプリ化する方法【ホームページを簡単アプリ化】 – こまめ


この設定をやって

Cordova公式のGet Startedを実行

https://cordova.apache.org/

cordova platform add browser

をやって実行するとブラウザで開けます。


意味ないやん。Webブラウザで開いても。。

なので、andoroidプラットフォームを追加します。


ちなみに、npm generateしてdistフォルダにソースが履かれたら

windowsの場合は

robocopy dist/ cordova/www/

を実行するとcordovaフォルダにソースをコピーできます。

Androidプラットフォーム実行

andoroidプラットフームを追加します

cordova platform add android

次にビルド

cordova build andoroid

結論

いまいち。

Nuxt.jsで動いたは動いたけど
パスが変だったり、Cordovaがブラックボックスでメンテしずらそうだったり。
iOSだと挙動が不安定なので辞めました。

Quasar FrameworkというNuxt.jsっぽくて、モバイル向けのフレームワークがあるので
そっちに乗り換えようと思います!
Cordvaの上位互換のCapacitorってのがあるみたいだしね。






WSLにRails6環境を構築する方法メモ

Rails6
Rails6

Macでは難なく入ったのですが、、、WindowsのWSLではちょっとてこずったので、現状行ける方法をメモしておきます

【前提】

あらかじめWSLのubuntuが入っているものとします。ない場合はMicrosoftStoreからインスト―ル
Ruby: 2.6.3
Rails: 6.0.2.2
Windows10のWSLを使っていきます

# VSCodeをインストール

VSCodeのリモートがとても便利なので入れていきます。
サイトに行ってダウンロードしてきます
Visual Studio Code – コード エディター | Microsoft Azure

Remote-WSLのプラグインをインストール
起動後に左下の緑の「><」マークからWSLへRemote接続します
接続できたら上のメニューのTerminalからNewTarminalします。

# 準備 これから使うライブラリを入れておきます

> sudo apt-get update
> sudo apt-get install autoconf bison build-essential libssl-dev libyaml-dev libreadline6-dev zlib1g-dev libncurses5-dev libffi-dev libgdbm5 libgdbm-dev

# Node.js(最新安定版)のインストール(既に入っている人は不要)

Rails6からはwebpackを利用するためにNode.jsを利用するようになったため
Node.jsもあらかじめ入れておきす

まず普通にインストール

> sudo apt install -y nodejs npm

次にnで入れる

> sudo npm install n -g
> sudo n stable

古いものを削除

> sudo apt purge -y nodejs npm
> exec $SHELL -l

入ったか確認

> node -v

# Rubyバージョン管理システムであるrbenvを入れる

> cd ~/
> git clone https://github.com/sstephenson/rbenv.git .rbenv
> git clone https://github.com/sstephenson/ruby-build.git .rbenv/plugins/ruby-build
> echo 'export PATH=~/.rbenv/bin:$PATH' >> ~/.bashrc
> echo 'eval "$(rbenv init -)"' >> ~/.bashrc
> source .bashrc

# ここからRuby(2.6.3)インストール

> rbenv install 2.6.3
> rbenv local 2.6.3
> ruby -v

使いたいバージョンをローカル登録
.ruby-versionという隠しファイルができます
(そのディレクトリ以下では指定したバージョンのrubyになります)

失敗する場合
aptからrbenvを入れていると古いので2.6系がありません。
git cloneで入れてても失敗している場合はrbenv initあたりが失敗してます。

# sqlite3のインストール(既に入っている人は不要)

> sudo apt install sqlite3
> sqlite3

コマンドリストが表示されればインストール完了

Rails環境を構築する上でsqlite3系の問題はかなり多くて
ネット上に多々解決法が出てますが
突破できず。結局、Ruby2.6.3だとエラーにならないのでオススメ。

# Railsのインストール

> gem install rails
> rails -v

Rails 6.0.2.2

Railsの6.0.2.2がインストールされました。
次にbundlerを入れたいところですがRuby2.6からはbundlerがすでにRuby本体に
入っているためインストールは不要です。

# プロジェクトの作成

> rails new hello_rails

# yarnを入れましょうとでるので入れていきます

> sudo apt install yarn
> cd hello_rails
> yarn

もしyarnと入力して「ERROR: There are no scenarios; must have at least one.」みたいな
エラーを吐いたらyarnを入れなおします(aptのyarnが古いようです)

> sudo apt remove yarn

apt-getのパッケージ情報を更新

> curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
> echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
> sudo apt-get update 

yarnを入れ直します

> sudo apt-get install yarn

マジで長いですね。もう一息です

# webpackerを入れます
これを入れないとrails6は起動しません

rails webpacker:install

# プロジェクトを起動!!

> yarn install
> rails s

rails serverもしくはrails sで起動できます。

localhost:3000をブラウザで開いたら・・・

f:id:hollywis:20200327111955j:plain


いぇええあ!!


ここまでたどり着くのに数々のエラーに逢いました
sqlite3がどうたら、pumaどうたらなど。
コツとしてはMacでうまく動いたRuby2.6.3を入れたことでしょうか。
あんまり最新のRubyを入れるとgemのメンテが追い付いていないのか起動しないことがあります。
あと、何も考えずにaptからインストールすると結構古いことが多く、エラーになること多数なので
本記事のようにところどころapt-get使ったり(apt-getも結構古い)、git pullで持ってきたりが大事です。


それにしてもVScodeとWSLのコラボレーションは本当に便利。
macもいいけどWindowsも中々ですね

あとこの本↓↓↓いい感じです。rails6について纏まっていて

nginxインストール&起動&停止&設定(ubuntu)

インストール

sudo apt-get update
sudo apt-get install nginx

起動

sudo nginx


起動後に
nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use)

みたいになるなら、すでに起動しているかも

ps aux || grep nginx

で起動しているプロセスを確認

終了

sudo nginx -s stop

サービスでの起動&停止

sudo service nginx start
sudo service nginx stop

設定ファイル

設定ファイルの所在地は次で確認できる

sudo nginx -t
sudo vi /etc/nginx/nginx/conf

Server項目をこのように設定して
nginxを再起動するとブラウザでlocalhostで開ける

f:id:hollywis:20200221143751j:plain
Server項目
htmlディレクトリのパスは
/var/www/html

Server項目でrootフォルダとか設定できます。
confを設定変更した後に「sudo nginx -t」で設定ミスがあるかどうか確認するのがミソです。

nginxを再起動するまえに、記載ミスを減らせます。

オススメ本

いままで避けてきたけれど、Apacheからnginxへの移行が余儀なくされて
急いで本屋で購入して、3日で読破&サーバ移管(Apahe->nginx)を実施しました。

なんとなく苦手で避けていたnginxが、この本で全体感が明らかになって
恐れるものがなくなりました。とてもオススメ。

nginx実践入門 WEB+DB PRESS plus

nginx実践入門 WEB+DB PRESS plus

container staton docker ubuntu初期設定メモ

いろいろインストール

apt update

IP系

apt install apt install iproute2

エディタ

/etc/init.d/ssh restart

ssh

apt install openssh-server

locale系

apt install language-pack-ja-base language-pack-ja ibus-mozc
echo 'export LANG=ja_JP.UTF-8' >> ~/.bashrc
cho 'export LANGUAGE="ja_JP:ja"' >> ~/.bashrc

IPを表示

ip address show

rootパスワード設定

passwd root

QNAP container station固有設定

IPをブリッジにして、インターネットとのIN/OUTできるようにする(QNAP本体と同じセグメントになる)
f:id:hollywis:20200222151946j:plain

sshd起動

sshd_configを変更
nano /etc/ssh/sshd_config

以下をyesに変える
PermitRootLogin yes

sshdを起動。すでに起動しているならrestart
/etc/init.d/ssh start

これでTeratermなどでSSHで入れます

PhpStorm(Intellij)でjavaコマンドを実行するとバージョンが違う

別のターミナルを開くしかなさそうです。

ここで、Issueが出てますが、みんなイライラしています。
intellij-support.jetbrains.com

環境変数(PATH)のJAVA_HOMEが「C:\Program Files\Java\jdk1.8.0_241」になっていても

PhpStormで開くと

openjdk 11.0.3 2019-04-16
OpenJDK Runtime Environment (build 11.0.3+12-b304.10)
OpenJDK 64-Bit Server VM (build 11.0.3+12-b304.10, mixed mode, sharing)

cmd.exeで開くと

java version "1.8.0_241"
Java(TM) SE Runtime Environment (build 1.8.0_241-b07)
Java HotSpot(TM) 64-Bit Server VM (build 25.241-b07, mixed mode)

面倒でもcmd.exeを使うしかない。。

Nuxt.jsでAdobeのTypekitを使う方法

ネットを探しても無かったので載せときます。

サブセットの話

日本語のフォントというのは、アルファベットに比べて文字数が多いため

常用漢字だけに絞ってパッケージングし直したりしているんですが。(サブセット化)


最近ではダイナミックサブセットといって、そのページで使われている文字だけを

動的にサブセットする方法が流行っており、AdobeのTypekitしかり、FontPlusしかりTypeSquareしかりです。


ただ、ちょっと問題があってHTMLで作られたサイトなら簡単なのですが

Vue.jsなどJSによってレンダリングされているサイトの場合は、各社がサンプルで提供している方法では

フォントが適用されません。


なぜなら、JS描画なので、初期ロードのHTMLには何も文字が描画されていなため、0文字のサブセットになってしまうようです。


ダイナミックサブセットと Web フォント提供


JSでのレンダリング後にサブセット化すれば解決

各社ではJSのAPIを用意してくれているので、フォントのロードタイミングを工夫することで解決するというわけです。

結論から言うとこれでいけました。


nuxt.config.js または、各ページのheadセクションでScriptをロード。
「xxxxxxx.js」は自分のtypekitのidが入ります。

head: {
    script: [
      { src:'https://use.typekit.net/xxxxxxx.js'}
}

あとは、各ページのupdatedセクションとかでTypekit.load()を実行してあげます。

updated () {
      try{
        Typekit.load({ async: true });
      } catch(e){
        console.log("[error]load typekit.")
      }
}

これでloadされたタイミングでフォントが切り替わりました。

ネットで検索するとwebfontloaderを使う事例が見受けられますが

ダイナミックサブセットに対応してないようで上手く動きませんでした。

参考

埋め込みコード

2022/06追記

どうやら、上記の方式はもう通用しなくなっており
下記の記事で解説している方法で、いけました。

NuxtでAdobe Fontsを利用する(日本語対応) | eureka