docker runを使って、Next.jsやGatsbyなんかをgenerateしてみるヘ(^o^)ノ
ローカル環境にnodeのruntimeがないので、Dockerを使っていろいろgenerateしてみる
Nodeのdocker imageでgenerate
基本的にはDockerのcommandを上書きしてあげると良いです
$ docker run -it -w '/app' -v $PWD:/app node:15.5.1-alpine3.12 [command]
僕の環境だとこんな感じです
$ cd dev # ~/devにコードやらなんやらがある $ docker run -it -w '/app' -v $PWD:/app node:15.5.1-alpine3.12 npx create-next-app my-app $ ls -al my-app/
Gatsbyだと
$ cd dev $ docker run -it -w '/app' -v $PWD:/app node:15.5.1-alpine3.12 npm init gatsby Command failed with ENOENT: git clone https://github.com/gatsbyjs/gatsby-starter-minimal.git /app/my-gatsby-site --recursive --depth=1 --quiet spawn git ENOENT npm notice npm notice New minor version of npm available! 7.3.0 -> 7.4.0 npm notice Changelog: https://github.com/npm/cli/releases/tag/v7.4.0 npm notice Run npm install -g npm@7.4.0 to update! npm notice npm ERR! code 1 npm ERR! path /app npm ERR! command failed npm ERR! command sh -c create-gatsby npm ERR! A complete log of this run can be found in: npm ERR! /root/.npm/_logs/2021-01-12T11_21_15_546Z-debug.log
templateをgit cloneしてくるところで怒られました
コンテナで確認してみます
$ docker run -it -w '/app' -v $PWD:/app node:15.5.1-alpine3.12 /bin/sh /app # git -v /bin/sh: git: not found
gitがインストールされてませんね
こういう場合は自分でイメージを作成する必要がありますかね
# ~/docker-images/node-dev/15.5.1-alpine3.12/Dockerfile
FROM node:15.5.1-alpine3.12
WORKDIR /app
RUN apk update --no-cache && \
apk upgrade --no-cache && \
apk --no-cache add git
buildして、もう一回試す
$ docker build -t node-dev:15.5.1-alpine3.12 ~/docker-images/node-dev/15.5.1-alpine3.12/
$ docker run -it -v $PWD:/app node-dev:15.5.1-alpine3.12 npm init gatsby
What would you like to call your site?
✔ · My Gatsby Site
What would you like to name the folder where your site will be created?
✔ app/ my-gatsby-site
✔ Will you be using a CMS?
· Netlify CMS
✔ Would you like to install a styling system?
· Emotion
✔ Would you like to install additional features with other plugins?
· Add Markdown and MDX support
Thanks! Here's what we'll now do:
🛠 Create a new Gatsby site in the folder my-gatsby-site
📚 Install and configure the plugin for Netlify CMS
🎨 Get you set up to use Emotion for styling your site
🔌 Install gatsby-plugin-mdx
✔ Shall we do this? (Y/n) · Yes
✔ Created site from template
✔ Installed Gatsby
✔ Installed plugins
✔ Created site in my-gatsby-site
🔌 Setting-up plugins...
╔════════════════════════════════════════════════════════════════════════╗
║ ║
║ Gatsby collects anonymous usage analytics ║
║ to help improve Gatsby for all users. ║
║ ║
║ If you'd like to opt-out, you can use `gatsby telemetry --disable` ║
║ To learn more, checkout https://gatsby.dev/telemetry ║
║ ║
╚════════════════════════════════════════════════════════════════════════╝
info Adding gatsby-plugin-netlify-cms
info Adding gatsby-plugin-emotion
info Adding gatsby-plugin-mdx
info Adding gatsby-source-filesystem
info Installed gatsby-plugin-netlify-cms in gatsby-config.js
success Adding gatsby-plugin-netlify-cms to gatsby-config - 0.157s
info Installed gatsby-plugin-emotion in gatsby-config.js
success Adding gatsby-plugin-emotion to gatsby-config - 0.153s
info Installed gatsby-plugin-mdx in gatsby-config.js
success Adding gatsby-plugin-mdx to gatsby-config - 0.161s
info Installed pages in gatsby-config.js
success Adding gatsby-source-filesystem (pages) to gatsby-config - 1.213s
*** Please tell me who you are.
Run
git config --global user.email "you@example.com"
git config --global user.name "Your Name"
to set your account's default identity.
Omit --global to set the identity only in this repository.
Initial git commit failed - removing git support
🎉 Your new Gatsby site My Gatsby Site has been successfully created
at /app/my-gatsby-site.
Start by going to the directory with
cd my-gatsby-site
Start the local development server with
npm run develop
See all commands at
https://www.gatsbyjs.com/docs/gatsby-cli/
できたっぽい
公式のdockerイメージには、ENTRYPOINTとCMDが設定されています
CMDを上書きする場合は、docker run コマンドのあとにつらつら追加していけばOKです
あと、ENTRYPOINTも上書きしたい場合もあるかもしれません
そんなときはENTRYPOINTを指定できます
npxコマンドで上書き
$ docker run --entrypoint npx -it node:15.5.1-alpine3.12 -v 7.3.0
no more runtime on localhost ヘ(^o^)ノ
僕の月曜日ルーティーン
俺的WH-1000XM4レビュー
たくさんの人に背中を押されたので、WH-1000XM4をポチリました
- 発売日: 2020/09/04
- メディア: エレクトロニクス
Sonyのノイキャンは最強だと思っていて、僕が持っているSonyのヘッドホンとイヤホンと比べてみました
注) あくまでボク個人の意見ですので、ご注意ください。違いがわかる人のレビューを参考にしてね
僕の持っているSony製品
- イヤホン WF-1000XM3
- 僕のエース的な存在で、ノイキャン、音質ともに満足してます
- ヘッドホン WH-XB900N
- おうちでアニメ、映画、音楽用
でわ、これらで聴き比べてみます
聴き比べ
- お気に入りの音楽
ちょっと重低音の多めな楽曲でノリノリで出社できるのでおすすめ
ノイキャンはどの製品も同じかな、WH-1000XM4が効いているように聞こえるけど、ヘッドホンなんで臨場感があるだけかも
音質はWH-1000XM4がダントツです！
WH-XB900Nはガチャガチャしてます...音割れにちょっと近い?
WF-1000XM3はイヤホンなので、ちょっと不利ですがWH-1000XM4に劣らずの音質で、ノイキャンも最強クラス
たぶん、だいたいの人はこれで満足だと思う
WH-1000XM4はヘッドホンなんで、臨場感も音質もノイキャンも最高です！
- だんじり祭
- 岸和田っ子ですからね
こちらもWH-1000XM4がダントツです！臨場感がいい感じですー
WH-XB900Nはダメです（他の2つに比べてですが)
WF-1000XM3でも十分なのですが、WH-1000XM4にはかなわないかなー
drikinさんのレビュー
まとめ
自宅で映画、ゲームなんかはWH-1000XM4がおすすめかもです
初めてのSonyノイキャンならWH-1000XM4をおすすめします！
邪魔にならないイヤホンならWF-1000XM3ですかね
WF-1000XM3はbluetoothがブツブツ切れることもなく、音もいいし、ノイキャンもいい感じです
興味のある方はお店で聴き比べるてみては？
WH-1000XM4は音質以外に、Googleアシスタントやalexaに対応していたり、ヘッドホンを外すと音楽が止まったり機能が充実しています
あと、30時間ほど連続再生できるようですね
僕は外ではWF-1000XM3、家ではWH-1000XM4で使い分けしようかと思いますー
来週にはAppleからもヘッドホンが発表されると噂...気になります！
Enjoy Sony ヘ(^o^)ノ
Railsのconcernにはロジックを書くのはやめよう
みなさんはRailsのconcernは使ってますか？
僕はあまり使いませんが、何気に書いたコードがちょっとまずかったのでブログに書いてみます
やってしまったことは、concernにビジネスロジックを書きなぐってました
これ、なぜダメだと思ったというと、オーバーライドができない！(やりずらい)
サンプルコードはこんな感じです
module Hello extend ActiveSupport::Concern def say puts 'Hello' end end class Me include Hello end class You include Hello end
MeとYouクラスでHelloモジュールをmix-inしてます
Railsのアプリで使うなら、sayメソッドの振る舞いを変えることができます
ただ、このコードがgemだったらどうでしょうか？
アプリ側でsayメソッドの振る舞いを変更したい場合...
Me, Youそれぞれにsayメソッドを書かかないと変更できなくなります！
module Hello extend ActiveSupport::Concern def say puts 'Hello' end end class Me include Hello def say puts 'Say Hello' end end class You include Hello def say puts 'Say Hello' end end
ダメダメですね...
では、どうすればいいのか？
ロジックをクラスに押し込むことで解決できます
class Greeting def hello puts 'Hello' end end module Hello extend ActiveSupport::Concern def say Greeting.new.hello end end class Me include Hello end class You include Hello end
これならGreetingクラスのhelloメソッドをprependなどで振る舞いを変えることができるようになりますね
Enjoy Railsヘ(^o^)ノ
俺的、最強のデスクトップ環境を作ってみたヘ(^o^)ノ
在宅勤務しつつ、YouTubeで動画配信するための環境を作ってみた
前置き
- 会社のPC Macbook Pro
- お家で会社の仕事をするときに使うラップトップ
-
- お家 + 個人の仕事 or プライベートで使うデスクトップ
- 前回のブログで紹介したコレ↓です
ThinkPad X1 Yoga Gen 5
- 外出先 + 個人の仕事 or プライベートで使うラップトップ
Web会議、Live配信
Web会議であればWebカメでもいいのですが、YouTubeでLive配信するには画質にはこだわりたいなと！
なんで、ミラーレスカメラを購入しました
バッテリー駆動だと2,3時間しか持たないので、電源共有しながら使えるようにした
当たり前ですがめちゃきれいで、背景もボケてるのでプロっぽいですw
不安は三脚に延長ポールをつけて画面の上にひょこっと出してるけど、ぐらついてちょっと怖い。。。
あ、ぐらついても手ブレ補正があるので映像には影響ないです！
マイク
これもbuild-inマイクやイヤホンマイクでもいいですが、僕の美声が台無しなのでコンデンサーマイクとアームを購入
タイプすると揺れるので、Astonのサスペンションも購入
うーん、かっこいい！
いざ〜。。。あれ、聞こえない。。。
素人で知らなかったのですが、コンデンサーマイクは単独では機能しません。。。
そう！ファンタム電源が必要なのです！あと、XLRケーブルとXLR => 3.5mmステレオ変換ケーブルをポチ
キーボード
ずっとThinkpadのキーボードを使ってましたが、赤ポチを使わないので使う意味なくない？って言われたので変えました
マウス
こちらは昔から愛用しているマウスで、トラックボールは赤玉に変えてます
最近、高速スクロールマウスがほしいのです。。。
スイッチャー and ミキサー
マルチカメラでもないし、ゲーム配信するわけでもありませんが、ATEM Miniを買ってみましたw
マイクミキサーもついてたり、映像にロゴを差し込んだりもできるので、これから活躍してくれると信じてる！
USBのスイッチングハブ
会社のラップトップとデスクトップで、同じカメラ、マイク、キーボードを使いまわしたかったのでスイッチングハブを購入
ATEM Miniの映像、音声とキーボードを切り替えてますが、ボタンひとつで切り替えできるので便利！
ディスプレイ
憧れの34インチウルトラワイド
いまんとこ、このディスプレイでVSCode、TerminalとBrowserを眺めています
湾曲しているので、目線だけで追えるのは楽かも。最初はエディタが曲がってて違和感があったけどなれた
ディスプレイの下を有効活用したかったのでアームも購入。使いやすくてお気に入り
電源周り
電源はゴチャゴチャするので、こちらに全部押し込んでます
デスク
僕はスタンディングが落ち着くので、電動昇降デスクにした
これもずっと使っている
天板はどっかで購入した
こういうのやっぱ楽しいですね。みなさんも最強のデスクトップ環境を作ってみては？
自作PC組んでみたヘ(^o^)ノ
スペックはこれ！
| CPU | Ryzen 9 3900x |
| CPUクーラー | NH-U12A |
| マザーボード | MSI B550I Mini-ITX |
| メモリ | TEAM DDR4 3200Mhz PC4-25600 32GB x 2 |
| SSD | SB-ROCKET-NVMe4-1TB |
| グラフィックボード | ZOTAC GAMING GeForce RTX 2070 SUPER MINI |
| 電源 | SF750 |
| PCケース | LianLi TU-150WX |
12core 24threads 64GB memory
このPCで何をするのか楽しみですね。。。(何するんだろ
めっちゃゲーミングPCですが、僕はそんなにゲームしない
とりあえずUbuntuセットアップして、Kubernetesであそんでみるかなー
あと、YouTubeの動画編集をDaVinci Resolveでやってみる
うーん、使いこなせない感が半端ないw
CPUクーラーは空冷ですが、NH-U12Aは空冷最強？らしく、Ryzen 9 3900xでも冷え冷えです
メモリが3200MHzで動作してないのでBiosの設定をゴニョゴニョ
Enjoy 自作PC ヘ(^o^)ノ
murajun1978的パーフェクトRoR (Chapter 1) ヘ(^o^)ノ
パーフェクト Ruby on Rails 【増補改訂版】を購入したので、僕のやり方で読み進めていきます
↓ ゴニョゴニョしたコード
Chapter 1
僕のローカルPCにはrubyはいないので、Dockerで環境構築していきます
### Dockerfile FROM ruby:2.7.1-alpine3.12 WORKDIR /home/app
### docker-compose.yml
version: '3.8'
services:
ruby:
build: .
volumes:
- .:/home/app
ports:
- 3000:3000
必要最低限のDocker環境(きっとあとでゴニョります)
Dockerのコンテナにアクセスしましょ
$ docker-compose run --rm --service-ports ruby /bin/sh
Initialize
gem installが最初に書かれてますが、ぼくはbundlerおじさんなので、bunlderでinitializeします
bundlerを使ったinitializeもちゃんと書いてくれてます
$ bundle init
# Gemfile
# frozen_string_literal: true
source "https://rubygems.org"
git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }
gem "rails" # コメントアウトします
んじゃ、installしましょう
/home/app # bundle install
An error occurred while installing nokogiri (1.10.10), and Bundler cannot continue.
Make sure that `gem install nokogiri -v '1.10.10' --source 'https://rubygems.org/'` succeeds before
bundling.
In Gemfile:
rails was resolved to 6.0.3.2, which depends on
actioncable was resolved to 6.0.3.2, which depends on
actionpack was resolved to 6.0.3.2, which depends on
actionview was resolved to 6.0.3.2, which depends on
rails-dom-testing was resolved to 2.0.3, which depends on
nokogiri
はい、nokogiriをコンパイルできないエラーですね
# Dockerfile FROM ruby:2.7.1-alpine3.12 RUN apk add --no-cache build-base # この行を追加 WORKDIR /home/app
↑ production用のdocker imageはおいおいやっていきます
いったん、containerから抜けて再buildしましょう
/home/app # exit $ docker-compose build
retry!
$ docker-compose run --rm --service-ports ruby /bin/sh /home/app # bundle install
いったんnokogiriがインストールできましたね！(ちょろいな)
$ bundle exec rails -v Rails 6.0.3.2
最新のRailsがインストールできました
Railsの思想
- CoC 設定より規約
- DRY 同じことを繰り返さない
- 僕はDRYって言葉がキライです。contextが違うのにDRYにしてしまうコードがあるからです。(こういうコードにはif文があったりします)
- 僕はD「RYにしよう」って言わなくて、「役割ごとに処理をまとめよう」(これでも微妙)って言ったりします。
REST
- ResouceがURLになるようにしましょ
- これができていないプロジェクトは、Routesに
get ...,post ...みたいなroutesがあることが多いです - 多分、全部Resourceで表現できるはずです。。。(多分。。。
自動テスト
Generate Rails project
アプリケーションの雛形を作っていきます
$ bundle exec rails new .
アプリ名を指定してもいいですが、僕はいつもcurrent dirに作成したいので.です
実行するとファイルをorverwriteしていいか聞かれるのでYでRails先生に従いましょう
/home/app # bundle exec rails new .
...
An error occurred while installing sqlite3 (1.4.2), and Bundler cannot continue.
Make sure that `gem install sqlite3 -v '1.4.2' --source 'https://rubygems.org/'` succeeds before bundling.
In Gemfile:
sqlite3
run bundle binstubs bundler
Could not find gem 'sqlite3 (~> 1.4)' in any of the gem sources listed in your Gemfile.
run bundle exec spring binstub --all
Could not find gem 'sqlite3 (~> 1.4)' in any of the gem sources listed in your Gemfile.
Run `bundle install` to install missing gems.
rails webpacker:install
Could not find gem 'sqlite3 (~> 1.4)' in any of the gem sources listed in your Gemfile.
Run `bundle install` to install missing gems.
sqliteがないって怒られます
しょうがないのでインストールしましょう
# Dockerfile FROM ruby:2.7.1-alpine3.12 RUN apk add --no-cache build-base sqlite-dev # sqlite-devを追加 WORKDIR /home/app
containerをビルドします
/home/app # exit $ docker-compose build
containerにアクセスして、gemをインストールしましょう
$ docker-compose run --rm --service-ports ruby /bin/sh /home/app # bundle install
sqliteもインストールできましたね！
書籍ではRailsプロジェクトのディレクトリ構成を説明してくれているので、ざっと読みます
Railsの起動
それではRailsを起動してみましょう
/home/app # bin/rails s ... Please add gem 'tzinfo-data' to your Gemfile and run bundle install
tzinfo-dataをインストールしろって怒られました
素直にしたがいましょう
# Dockerfile FROM ruby:2.7.1-alpine3.12 RUN apk add --no-cache build-base sqlite-dev tzdata # tzdataを追加します WORKDIR /home/app
$ docker-compose run --rm --service-ports ruby /bin/sh /home/app # bundle install /home/app # bin/rails s ... Please run rails webpacker:install
webpackerをインストールしろと怒られました(嫌な予感。。。
/home/app # bin/rails webpacker:install sh: node: not found sh: nodejs: not found Node.js not installed. Please download and install Node.js https://nodejs.org/en/download/
はい。node.jsをインストールしろと怒られる
# Dockerfile FROM ruby:2.7.1-alpine3.12 RUN apk add --no-cache build-base sqlite-dev tzdata nodejs # nodejsを追加 WORKDIR /home/app
どんどんdocker imageのsizeが大きくなっていくね
$ docker-compose run --rm --service-ports ruby /bin/sh /home/app # bundle install /home/app # bin/rails webpacker:install Yarn not installed. Please download and install Yarn from https://yarnpkg.com/lang/en/docs/install/
yarnがインストールされてないって！
ちなみにぼくはnpm派
# Dockerfile FROM ruby:2.7.1-alpine3.12 RUN apk add --no-cache build-base sqlite-dev tzdata nodejs yarn # yarnを追加 WORKDIR /home/app
yarnがインストールできましたね
$ docker-compose run --rm --service-ports ruby /bin/sh /home/app # bundle install /home/app # bin/rails webpacker:install
こんどこそwebpackerをinstallできました！
docker buildするたびにbundle install するのめんどくさいので、あとでやっつけましょう
/home/app # bin/rails s -b 0.0.0.0
きた！
Scaffold
書籍ではtaskモデルを作成するみたいですね。やってみましょう。
/home/app # bin/rails g scaffold task content:text
invoke active_record
create db/migrate/20200727160336_create_tasks.rb
create app/models/task.rb
invoke test_unit
create test/models/task_test.rb
create test/fixtures/tasks.yml
invoke resource_route
route resources :tasks
invoke scaffold_controller
create app/controllers/tasks_controller.rb
invoke erb
create app/views/tasks
create app/views/tasks/index.html.erb
create app/views/tasks/edit.html.erb
create app/views/tasks/show.html.erb
create app/views/tasks/new.html.erb
create app/views/tasks/_form.html.erb
invoke test_unit
create test/controllers/tasks_controller_test.rb
create test/system/tasks_test.rb
invoke helper
create app/helpers/tasks_helper.rb
invoke test_unit
invoke jbuilder
create app/views/tasks/index.json.jbuilder
create app/views/tasks/show.json.jbuilder
create app/views/tasks/_task.json.jbuilder
invoke assets
invoke scss
create app/assets/stylesheets/tasks.scss
invoke scss
create app/assets/stylesheets/scaffolds.scss
作成できました！
これをDatabaseに反映しましょう
/home/app # bin/rails migrate == 20200727160336 CreateTasks: migrating ====================================== -- create_table(:tasks) -> 0.0017s == 20200727160336 CreateTasks: migrated (0.0021s) =============================
テーブルが作成されました！
Rails サーバーを起動して、画面から登録したらり、削除したりしてみましょう
/home/app # bin/rails s -b 0.0.0.0
起動したら、http://localhost:3000/tasks へアクセスしてみましょう
データの新規登録、更新、削除などいろいろ試してみてください
まとめ
以上でChapter 1は終了です。
細かい説明はすっ飛ばしましたが、こんな感じでエラーでたら対応してトライみたいな感じです。
ま、いろんなブログには正解が最初に書いてあるので、コピーするのもいいですけど、エラーメッセージをちゃんと読んで対処していくのがオススメです！
また続きを書くので、よかったら見てください！
参考にはならないかもしれませんが。。。
Enjoy パーフェクトRuby on Rails ヘ(^o^)ノ
