LinuxからバーチャルでmacOSを動かして使ってみる
という事で、取り敢えず動かした画面をアップロード
これは qemu 7 で動かしているのですが、ホストは ubuntu lunar lobster と言うより、問題はハード次第です。このマシンは メモリ 16GiB Intel® Core™ i5-8259U × 8 です。それでもubuntuの場合インストールは何回も失敗します。つまりそれ以上の性能でないと止めた方がいいという結果です。比較的成功するのは fedora の方が増しのようです。紹介者も上位の AMD ryzen apu を推奨しています。ただ高くてなかなか手が出ない。
この方法を紹介しているのは、kholia macOS で検索すると一発で出できます。その指示に従ってインストールするだけです。途中で何かしらのエラーが出てきても、Linux 使いの人であればどう訂正すれば分かると思います。
しかし、動くように見えても満足には動きません、hostに戻って何かやっていると、もうダメです。まあVMWareのようなものでもなし、Mac M.1chipでしか動かないOSが出てくれば多分アウトだろうと思う。だからといって、マシンを買うのかというと、私は買わない！使う理由が見つからないのです。iphoneなんか使わないし、セキュリティー強化と唱してユーザーに負担を強いるシステム、( Win11は更にひどいですけれども ) そんなものなら、仕事で使わない者にとっては不必要なものです。なので、私が Linux を使う理由はそこにあるのです。もし Linux もそのような物になったらパソコンは使いません。”インターネットは何者だ”の世界です。今世界の状況を見れば分かるでしょう。私が書いているような blog を見てる人がいるのでしょうか。つまり、お互いに必要ないのでしょう。
今度はマシンを変えてノート型パソコンである chuwi の Intel® Celeron® N4020C × 2 で動かしているバーチャル macOS Big sur で rubyonrailsの画面です。
このインストールは別のマシンで行ったものですが、M2 SSDを差し替えて使っています。動作は遅くて気が短い人にとっては耐えられないスピードですけど動きます。というより、mac がceleron で動くとはビックリポン！
このマシンは win11 がインストールできると言う振れ込みで買ったもので3万2千円位で２、3年持てばいいかなあ、と思って買ったものです。しかし、ネットで調べると win11 対応しないマシンでもどうにかするとインストールできる様なので試してみると出来ました。詰まり購入する必要がなかったのか～と少し後悔しています。マイクロソフトさん、なかなか商売上手だね。
先にssdを差し替えたと言いましたが、win11 は usbディスクにインストールできないので、linuxをデュアルブートで試したい場合は万が一の失敗を考えてssdをはずして行うのが無難だろうと思います。winはusb変換アダプタで接続すればusb起動可能です。
そう考えていくと、一台のマシンで全てのOSを試すことができます。なので後は使用目的に合った性能のパソコンを選べば後悔することもないと思います。
localhost定番phpMyAdminとwordpressをインストール
Linuxの場合簡単です。Ubuntuなら$ sudo apt install php apache2 mariadb-server phpmyadmin wordpress コマンドでインストールすれば取り敢えず動きます。(wordpressは英語ですけれども) Macの場合はMAMPとか使う記事が多く、私も10年くらい前はそのようなものを使った記憶がありますが、途中からやめました。今はbrewがしっかりして来たのでなるべくbrewで全て纏めるようにしています。
結果、linux気分でlocalhostをブラウザーから見てみても何も見えません。
普通はIt Works!とか出て来ると思いきやこれです。インストール時メッセージを見逃したのか、あわてて調べるとポート8080のようなのでそれで見ると、It Works! が出て来ました。では場所はどこなのかと探すと、
ここでした。
wordpressは日本語版をネットからダウンロードしてここに配置して、wp-config.phpを編集。データベースはphpmyadminのコンソールからデータベースを作成、grant all privileges on wordpress.* to 'wordpress'@'localhost' identified by 'wordpress'; で設定すれば動くはず、(ユーザ名パスワードはlocalなので忘れないようにwordpressにしました。) のつもりが、
あれ〜なんでこうなるの？調べても分からないので、このまま使うしか今のところありません。これで、wp-admin/index.phpを選択すればloginできるようでした。
でもこれってどこから来るエラーなんでしょうか。
こういうのがあると、もうMacを買う気にはなれません。ステーブ・ジョブズがいないMacは、気の抜けたサイダーのようなもので、魅力はないどころか Linux の方が面白くなってきた、というのが本音です。なので、今はLinux上でバーチャルで試して見るくらいです。では次のページはその話をしたいと思います。
只今 rails 7 に挑戦中
OS で普段使っているのは、Linuxです。
各インストールコマンドで、rails に必要なヘッダーファイルをインストールし、gem から rails をインストールすれば新規ディレクトリを作成できて、ローカルサーバーポート3000でdefaultが起動しますから確認します。
この赤丸内をクリックすると色んなのが出てきますが、先を急ぎます。
rails を学ぶのであれば日本国内でも色んなサイトがあると思いますが、私は rails 3 のころから Agile Web Development with Rails X.x.xの book のsource.code をダウンロードしてsamplesから勉強しています。
codeの中身を見るとdemoとdepotが別れていますが、depot_aから参考にして自身のdepotに追加して行きます。
まずは、depot_aと同じにするためにscaffoldを実行します。
$ bin/rails g scaffold Product title:string description:text image_url:string price:decimal
ここで注意することはproductは最初の文字が大文字だということでした。generateは省略可能なgでも良いということでしょうか。ここで、
$ bin/rails db:migrate; bin/rails s を実行してみます。
ここまでどうだったでしょうか？上手く行ったでしょうか。細かい設定は何も言っていないので何回かは失敗すると思いますが、エラーメッセージを見ながら対応していくしかありません。筆者も参考書を購入したわけではないし、ただソースだけを頼りにネットで調べながらやっているだけです。”実行あるのみ”です。
では次に実際の depot_a を動かしてみます。ここでは、$ bin/rails db:seedをすると良いようです。
大部違いますね。何処が違うのかとコードを調べると Gemfile では 'gem "tailwindcss-rails"'が追加されています。なので追加して bundle install して、関連ファイルを編集してみます。
分かる範囲でやってみましたが、エラーを中々直せません。次のようなエラーが最初に出ました。ネットで調べると色々出てくるのですが、image file が無いためだと言う記事もありますが、無ければ素通りするだけだろうと判断して、ここは $ bin/rails assets:precompile をやってみました。上手く行ったようです。がまだエラーが出ます。しかし、今度はエラーをターミナルがどうすればよいかメッセージが出てくるのでその指示に従い二度ほどやったら動きました。
ここまで来れば後は store cart line_item と続けられます。
その前にこれと同じことをMac からやってみます。一旦logoutして、loginし直したのですが、ここに中々辿り着きませんでした。まあ諦めずに続けるか！
Macの場合はbrewで ruby をインストールして行けばlinuxと同じなので簡単です。
Win11でもやってみたのですが、初っ端変なエラーが出たのであっさり諦めました。後で画像を貼り付ける予定。
思い直して再度BootCampのwin11のPowerShellで動かすとあっさり動きました。ただ起動するのが遅い、マシンは同じものを使っているわけだから、何かのチェックかBootCampのせいかで遅れるのだろうと考えるしかありません。それともBIOSが無いまま動かしてしまったかです。bootcampはmacで起動ディスクを選択しないとbios起動できないらしく、毎回Macから起動しないとWSLが動きません。それではwsl ubuntuで同じことをやってみます。
Win11の場合は、rubyはネットから最新バージョン3.2.1をダウロードしたのでGemfileのバージョンを変えるだけですんなりrailsを使えたのですが、ubuntuの場合はまだバージョンが3.0.2なのでbundle installのエラーを見て一個一個合うバージョンをインストールしました。例えば $ sudo apt install -v 5.6.5 puma のように、かなり有るので大変でした。
終わったのでサーバーを起動、同様に起動しましたがやはり遅い、なのでwin11でのrails使用は辞めることにしました。
Macの場合でIDEにTextMateを使ってみた
textmateは私の記憶ではMac OSX snow leopardの頃には既にありました。今ふと思い出しbrewでinstallしたらあっさりinstallできたので、使ってみるとwebbrowserにもなることに気づきちょっと工夫して使ってみると、中々いいですね〜
Macを使っている人ならこの画像を見ただけで大体分かると思いますが、説明するとmdファイルを追加して、そこに[localhost](http://localhost:3000/say/hello)と書いただけです。そこでpreviewからlocalhostをクリックしました。
では linux でこのような物が無いのかというと、いかにも linux らしい gnome-builder があります。markdown preview 付いていてアドレスをクリックするとディフォルトのブラウザーが起動します。md の mermaid に対応していないのが少し残念ですけど。
さて、rails 7 は前のバージョンとどこが違うのかと自分なりに考えてみるとcssによる書体の違いと見た。何のcssを使ってみると tailwind らしい。本家のホームページを見て書いている通りやってみましたが、その通りできません。Linux はおろか Macでも Win11でも同じです。なので、rails 7 での使用は諦めて rails 3 のPDF book をdownload して、それを参考にしてやってみることにしました。このpdfはフリーダウンロードで探せばすぐ見つかるはずです。どっかのページみたいに、途中で終わりで続きはログインしないとダメだとか、入会費を払わないとダメだとかじゃないので、オススメです。但し英語ですけど。私も暇な時に続きを加えたいと思います。
何日か過ぎたのですが、agile web development with rails 7 のソースコードを利用して、demo2 に移動して試してみることにしました。このコードにはまだtailwind は使われていません、なのでターミナルから追加します。調べて最近覚えたのですが、bundle add tailwindcss-rails とすると、Gemfile に追加されるようです。このままでは bundle install としても何も反映されませんので、次に rails tailwindcss:install を行うと app/assets に builds directory が出来て配下に tailswind.css ファイルが出来ます。それと、stylesheets にapplication.tailwind.css 、config に tailwind.config.js が自動で出来ます。変更はしなくても使えます。
ここでいつも通り rails s をしてみます。
これだと、tailwind どころか html も認識されていないようです。そこで解説にあるように bin/dev を実行してみます。
メッセージを見ると、css をrebuild して反映されたようです。画面は同じままですが、<h1 class="text-3xl font-bold underline">
に変えてみると、tailwindcss が反映されたようです。とは言え、これは考えようによっては労力が増えた感じです。深く設定したい場合は有効かもしれませんが、html の単純な構造でも何かしら class を設定しなければなりません。今回は rails 7 の範囲内だし、ファイルも自動で作ってくれることだから、無視します。
それでは、予め作られていた Say を一旦削除して新たに作ってみます。反映されるでしょうか。rails destroy controller Say hello goodbye, rails g controller Say hello goodbye をやってみます。新たに作られたファイルは、全て tailwindcss を考慮したものとなっています。とは言え何がどう変わるのか分からないので、playtime! ちょと遊んでみます。色を付けてみたりシャドウを付けてみたり、文字の大きさを変えてみたりです。
やってみると一つ分かったことがありました、rails s でサーバーを起動した場合は tailwind は反映されませんが、bin/dev で起動した場合は起動状態で rebuild されて反映できるようです。知っておかないと迷う処です。
<div>
<p class="font-bold text-4xl text-center shadow-md rounded text-teal-500">tailwind Say こんにちは！</p>
<p class="font-noto text-lg">railsはここ app/views/say/hello.html.erb で見つけました。</p>
</div>
こんな感じで変えてみると、
に成りました。様になっているようにも見えます。 しかし、色の付いているところは本来ヘッダーファイルになっているところ、センターに寄らなかったので、パラグラフの p に変えたらセンターに成りました。又、h1~h6 とhtmlなら設定できますが、tailwind では意味がなく、text-center も何やら効きません。どこにそんな解説があるのかも捜せません。発展途上ということで、片付けるしかないか？
- 今までは次期バージョンの ubuntu 23.0.4 でやってたのですが、22.0.4.2 に戻ってやってみるとそうは行かなかったようです。
どういう意味かと言うと、解説にある通り ./bin/bundle add tailwindcss-rails を実行するとエラーが出ます。
An error occurred while installing tailwindcss-rails (2.0.23), and
Bundler cannot continue.
このエラーは、(sudo )gem install -v 2.0.23 tailwindcss-rails をやれば良いだけなのですが、ruby のバージョンが合わなかったり rbenv を使ったりとごちゃごちゃすると、えっ何で！とか投げ出したくなること屡々です。
それから数日経ったのですが、IDE に使っている際の不都合な点があったので参考のために記したいと思います。普段使っているのは Linux のビルダーなのですが、rails tailwindcss:build または、rails assets:precompile を行った際フォルダーが表示されないという点です。まあ無料だから使っているだけで、専用のIDEじゃないといってしまえばそれまでなんですけれども、画像で説明すると、
これが分からなくて数日無駄にしました。では android-studio ではどうなのかと見ると、
アイコン付で見えます、がハイライトにあるように警告みたいなものが出て、コードが見ずらくなってしまいます。最後に vs-code で見ると、
今度は、良いようです。しかも、アウトラインで知りたいクラスをクリックすると、その css の中身を調べることができる優れものです。じゃ vs-code を使えばいいじゃん！となりそうですが、ubuntu の場合日本語に変えたいときの、日本語入力が出来ません。どうかすれば、出きるのかもしれませんが、今のところ、その時はビルダーを使っています。では同じ Linux の fedora で試すと日本語が打てます。う～んしょうがないからこれで進むしかないか？(数日後別のマシンの fedora でやってみると日本語入力ができませんでした。〜ん、できる方が可笑しいのかな？)
Mac では日本語入力で悩むことはまずないので、rails では開発し易いんだろうと思います。が、rails を動かすためにわざわざ高いパソコンを買うのもバカバカしいし、データーベースに mariadb を使う段になると phpmyadmin を可動させるさいになんか嘘くさいので、話のネタとして使うくらいにしています。windows はどうなのかというと、PHP のインストールで躓いた時点でやめました。
rails は日本語に直すのに他の開発と同じ様に一苦労な仕事です。まず日本語に変えられるところを変えてみます。するとこんな感じに最初なりました。
何故なのかと自分ながらに考えました、間違っているかもしれませんが、日本語は英語とは違ってバイト処理が合わず、ふれ込みでは４バイトと言っていますが若干少ないのだと思い日本語の見えないスペースを加えるとこんな感じになりました。
これで目出たし目出たしと言いたいところですが、この手の現象は英語でも見つけました。それは tailwindcss のサンプルで本家のページからコピーしてみた時に起こりました。コピーしたのはこれなんですけど、
...
<div class="grid grid-cols-10 gap-2">
</div>
...
これを tailwind-starter-kit-main からダウンロードした css にリンクさせブラウザーで見ると何も見えません。なので日本語のスペースをbg-blue-50上の段のタグ内に挿入すると見えました。
試しにsafari 見ると、
あれ〜、空白文字がちゃんと変換されて見えています。世の中には例外に漏れず余計な優れものがありますが、safari は優れているようです。試しに mac 用の edge で見ると firefox と同じようです。
railsguideにあるblogをmysql tailwindcssで指向を変えてやってみる
まず今使っているバージョンを確認すると、
ruby -v
ruby 3.2.1 (2023-02-08 revision 31819e82c8) [x86_64-linux]
mysql --version
mysql Ver 15.1 Distrib 10.11.2-MariaDB, for debian-linux-gnu (x86_64) using EditLine wrapper
rails -v
Rails 7.0.4.2 の状態です。
早速 rails new blog -d mysql -c tailwind -M で作っていきます。sqlite3 であればデータベースを気にする必要はありませんが、mysql であればパスワードが必要なので、config/database.yml に自身のパスワードを追加します。tailwindcss に対しては install 済なので rails tailwindcss:build とすれば、css build file が assets にできます。IDE で見ると、インライン状で min.css タイプのようです。これでは見づらいので、もう一度 rails assets:precompile で別に作ってみます。今度はpublic/ に書き込まれましたが、この時点では同じです。
先に進むことにして、練習用ページでは scaffold 使わないで作る方法に徹底していますが、後で変更亦亦で振り回されるので、先回りして scaffold で、
rails g scaffold Article title:string body:text を実行します。
続けて rails db:create , migrate rails s でサーバーを起動させると、ん？ tailwindcss が余り反映されていません。ここは rebuild コマンド bin/dev か？変わりません。なのでもう一度 rails tailwindcss:build をすると、新しく scaffold 用に作ってくれたようです。で rails s で見ると、ん〜！まだか、で、最初から install build bin/dev でやっと変わりました。
さて、ここから合流です。説明では rails console からデータを作るように解説しています。ではやってみます。rails c で irb に入れずはずです(cで始まる文字consoleはこれしか無いはずだから省略可能)。で、
article = Article.new(title: "Hello Rails", body: "I am on Rails!")
article.save もう一つ何かを作りブラウザーと phpmyadmin から覗いてみると、こんな感じ
phpmyadmin の方は、
rails はデータベース操作が楽なので、コンソール上でも楽だと思います。これをmysql コマンドでターミナルから打つと結構大変です。が、一番楽なのが作ったブラウザから打つことで、phpmyadmin からも挿入を選択して、INSERT INTO `articles` (`id`, `title`, `body`, `created_at`, `updated_at`) VALUES (次の番号, 'text内容', 'body内容', 'CURRENT_TIMESTAMP', 'CURRENT_TIMESTAMP')">; で新規で作れるようです。これは少し手こずったんですけど、CURRENT_TIMESTAMP は調べて入れました。rails では無駄な努力ですけど、知っておく価値はあると思います。
ちょっと話題を変えてlocalhostで動く定番のphpmyadminとwordpressを次のページで載せたいと思います。
これを tailwind-starter-kit-main からダウンロードした css にリンクさせ
ブラウザーで見ると何も見えません。なので日本語の
