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

はりうす代表 ”のすけ”のブログです

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を使う方法

f:id:hollywis:20191129104709p:plain

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

サブセットの話

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

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


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

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


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

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

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


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


Typekit ヘルプ | ダイナミックサブセットと 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を使う事例が見受けられますが

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

参考

Typekit ヘルプ | 埋め込みコード

プロジェクト・アリストテレス

googleの収益の根源(生産性を高める方法)を分析したけど
結果ほぼなにも関連がなくて


すごい人材がいるとかでも無くて


唯一あったのが、社員の安心感「心理的安全性」だった。
ってやつ。


googleアリストテレス プロジェクト
rework.withgoogle.com


グーグルが突きとめた!社員の「生産性」を高める唯一の方法はこうだ(小林 雅一) | 現代ビジネス | 講談社(1/4)



だらか、彼らはマインドフルネス(坐禅)とか、精神を安定させる方向も試しているわけだけど。

あと最近あった記事だとこれ
瞑想が子どもたちの成績を向上させてストレスも軽減させることが可能と判明 - GIGAZINE


坐禅って寺なんだけど。


「禅寺」って日本にしかないのは、あまり知られていない。

ティージョブズ坐禅してたというのも、日本の禅マスターに出会ったからで。

仏教はインド発祥だけど、それが中国で熟成されて身体作法としての

「禅」が生まれて。

それが日本に渡った。


その後、中国ではどっかの王様がほぼ寺を壊したから、もはや日本にしか禅寺はないという。。


ちなみに家の近くの鎌倉に多い。無料で坐禅会とかやってる。


ま、なにが言いたいかというとGoogleが科学的に色々分析して

最善策を探っていくと、結構日本にたどり着くよという話。


そんなわけで、いずれGoogleは「武士道」と言い出すんじゃないかなとw

学問のすすめ 現代語訳 (ちくま新書)

学問のすすめ 現代語訳 (ちくま新書)

「Stadia」で禅修行

そうそう


Googleの「Stadia」っていうクラウド配信のゲームプラットフォームを新しく出すらしいけど

どうみても、studyをもじっている。


だから、教育コンテンツを意識しているわけだけど。


マトリックスのネオが最初に学んだやつ知ってる?

あのプラグ指してカンフーをマスターするやつ。


f:id:hollywis:20190830131137j:plain


たぶん、「武士道」を体得するゲームとか創り出すと思う。

あと、VR坐禅とか絶対やると思う。


目の前に「禅マスター」が出てきて、多分一緒に坐禅してくれる。

ジョブズが出てくるかもしれない。


ではまた。

あとカッコイイ日本人になれる下腹重心ONLINEの宣伝も置いときます。
下腹重心商品紹介 – TERAKOYA FRONTIER