Rails5でのWebpackerによるBootstrapの利用

はじめに

Rails6からWebpackerが標準で入っているようですが、ここではRails5での導入を試みてみます。

今までは、JQueryやBootstrapを導入するには、それぞれのGemをインストールする必要があり、SprocketsというGemによって複数のアセットファイル(JS、CSSや画像)をコンパイル(結合や圧縮)を行うアセットパイプラインという仕組みを実装していました。

今後は、GemではなくyarnにてJSやCSSのパッケージを管理し、Webpackというアセットファイルを1のJSファイルにまとめて管理するモジュールバンドラをWebpackerというGemで利用するのが主流のようです。

Webpackerは、rails new コマンド実行の際に、次のオプションをつけることで導入できます。

--webpack --skip-coffee --skip-turbolinks --skip-sprockets

要は、Gemfileにwebpackerを登録し、sprocketsなんかのGemの記述を削除するだけです。
また、予めシステムにyarnとnode.jsをインストールしておく必要があります。

yarnでbootstrapを入れる

その際に、jquery、 popper.js も依存ライブラリなので入れます。
その前に、現在の package.json の内容を確認しておきます。

package.json

{
  "name": "sample_app",
  "private": true,
  "dependencies": {
    "@rails/webpacker": "5.2.1"
  },
  "devDependencies": {
    "webpack-dev-server": "^3.11.0"
  }
}

yarnにてセットアップします。

$ bin/yarn add bootstrap jquery popper.js @popperjs/core

※Docker環境で動いている場合は、コンテナ内で実行します。
追記(2021/05/17): セットアップすべきライブラリとして「@popperjs/code」を追記しました。

“Rails5でのWebpackerによるBootstrapの利用” 続きを読む

Rails5 + MariaDB 10.3 + Nginx をDockerで環境構築

はじめに

まずは、Docker Composeのベースとなるディレクトリ(例として「rails5-docker-compose」)を作成します。このディレクトリに「docker-compose.yml」を置くことになります。

$ mkdir rails5-docker-compose
$ cd rails5-docker-compose

構築する3つのコンテナ、Rails、MariaDB、Nginx、それぞれで管理するためのディレクトリを作成します。

$ mkdir -p mariadb/sql
$ mkdir -p rails/src
$ mkdir nginx

ベースとなるディレクトリのPATHが環境によって異なるので、docker-compose.ymlで参照できる環境設定ファイル「.env」をカレントディレクトリに準備します。

.env

HOSTSRCPATH=c:/Users/foo/devel/rails5-docker-compose

ここでは、ベースとなるディレクトリまでの絶対パスを、「HOSTSRCPATH」という環境変数にセットしておきます。普段私は、Docker Desktop for Windows、つまりWindows上のDockerエンジン(Hyper-V)を利用し、DockerクライアントはWSL上のubuntuのdocker-cliを利用しているので、上のような例になっています。

前は、「c:/Users/foo/」の部分は「~/」でマウント(bind)できていましたが、Docker Desktopをupdateしていつの間にかできなくなりました。

“Rails5 + MariaDB 10.3 + Nginx をDockerで環境構築” 続きを読む

Ubuntu 18.04 (Stretch) on WSL

はじめに

過去記事にて、古いシステムを運用するために、古いライブラリ(例えば、OpenSSL 1.0系)が必要で Ubuntu 18.04 ではなく、Ubuntu 16.04 を泣く泣く使用するなどの話を書きました。

やはりapt upgrade でエラーが出るなどして失敗することがありましたので、とりあえず、WSLとしては最新の Ubuntuを入れておいて、古いライブラリが必要なシステム開発環境の構築については、Dockerを使えばいいやということで、今回は Ubuntu 18.04 をセットアップしてみます。

Dockerについては、Hyper-V を有効にして、Docker for Windowsを使い、Dockerクライアントは、WSL上のUbuntuから利用するという手で行きたいと思いますが、これについてはまた後程。。。

今回の流れとしては以下のとおりです。
私の仕事で必要なものを入れていきます。

さて、一つ一つやっていきますよ(・∀・)b

“Ubuntu 18.04 (Stretch) on WSL” 続きを読む

Bash on Ubuntu on Windows 環境構築

はじめに

今まで色々とWindowsにてUNIX環境を構築してきました。

POSIX API機能を提供するcygwin1.dllを利用し、完全なPOSIXエミュレーションが目標の「Cygwin」や、Cygwinからforkされたmsys-2.0.dllによるライブラリと、一部MinGWからの流れでWindowsネイティブライブラリが含まれる「MSYS2」、どちらも使用してきましたが、LAMPなどのWebアプリケーション開発環境となると、やはりVM上のLinuxを利用した方が何かと楽です。ということで、これまでWindows 10上のVirtualBoxにてCentOSを動かし利用してきました。

しばらくは全然問題なく利用できていたのですが、使用しているノートパソコンのsleepからの復帰が遅く、ハードリセットとかしていたら、いつのまにかVDIファイルが壊れてしまい環境がおじゃんになってしまいました。。。VMはその仮想ディスクファイル1個が壊れてしまったらもう終わりですものね。

そこでしょうがないので、試しで入れていた「Bash on Ubuntu on Windows」を使用することにしました。

“Bash on Ubuntu on Windows 環境構築” 続きを読む

Rubyのオブジェクト配列

まずは,このRubyのプログラムをみてください.

class Abc
  attr_accessor :value
end

a = Array.new(5, Abc.new)

for i in 0..4
  a[i].value = i * 10
  puts a[i].value
end

puts "---"

for i in 0..4
  puts a[i].value
end

実行結果はこうなります.

$ ruby test.rb
0
10
20
30
40
---
40
40
40
40
40

期待していた結果,つまり後半のputsも,「0, 10, 20, 30, 40」という出力になると思っていましたが違うようです.

さて,なぜでしょう.

“Rubyのオブジェクト配列” 続きを読む