要件 ruby 2.7.4 Rails 6.1.4 redis latest PostgreSQL 12.2 nginx 1.20 開発環境 macOS Big Sur VSCode Docker Desktop VSCode プラグイン Ruby Rails Ruby on Rails Rails DB Schema Docker 環境 以下リポジトリに完成した docker-compose.yml 等を格納 soso555BoBs/env-rails コンテナの構成 app rails 6.1.4 が稼働する ポート番号 3000 で listen web nginx 1.20 が稼働する ポート番号 80 で listen 受け取ったリクエストを app コンテナに渡す pgsql PostgreSQL 12.2 が稼働する ポート番号 5432 で listen rredis redis が稼働する ポート番号 6379 で listen rmail mailhog が稼働する ポート番号 1025 でメールを listen ポート番号 8025 で HTTP リクエストを listen 使い方 前提として、make コマンドを実行できるようにしておくこと 不可能な場合は、Makefile 内の各コマンドをコピペして実行すれば OK 初回 (Rails プロジェクトを作成する) $ git clone git@github.com:soso555BoBs/env-rails.git $ cd env-rails $ make create-project # Install Rails project 上記実行後 http://localhost:3000/ で動作確認 以下の手順を全て行うので時間がかかります rails インストール build docker image docker container up bundle install webpacker install rake db:create container restart 初回 (既存プロジェクトをインポートする) $ git clone git@github.com:soso555BoBs/env-rails.git $ cd env-rails $ git clone git@github.com:hogehoge/rails.git ./backend # Clone any project to the backend directory $ make init $ make up 2 回目以降 $ make up コンテナ終了 $ make down 詰まった点 bundle install した gem がコンテナを立ち上げる度に無くなる gem がインストールされたディレクトリを永続化していないため 永続化するために docker-compose.yml に以下記述を追加 volumes: bundle-store: : : services: app: volumes: - type: volume source: bundle-store target: /usr/local/bundle nocopy: true nocopy: true のせいで、永続化しても更新されないため nocopy: true を削除 docker-compose run と build と up のタイミングに依り volume の内容に不整合が発生。以下記事により解決しました。 rails server 実行時に Webpacker configuration file not found エラーが発生する bundle install の後に webpacker install を実行することで対応 所感 実は「コンテナの構成」には嘘が書かれている。実装できていないので追々実装する。 volume の永続化の解決にものすごく苦労した。 きちんとオプションや記述形式を把握しない限りはコピペなんてするもんじゃない。 おかげで volume 周りの挙動について勉強になった ひとまずこの環境を用いて転職活動アプリを作っていこうと思います。

概要 Windowsのモニター設定を拡張にし、HDMI等でプロジェクターに接続してPowerPointで発表者ツールを表示すると、発表者側は以下のような画面になります。 プロジェクターに映っている画面はスライドの画面のみになっていて話す内容や次のスライドを確認しながら発表することができるおなじみの便利機能ですが、MacでZoomの画面共有をしたときに同じような見せ方にする方法が今まで分からなかったので今回色々試してみて１つの方法にたどり着きました。 要件 MacPC1台のみでできること GoogleスライドをZoomで画面共有したときにできること 発表者側の画面のみプレゼンター表示されていること 画面操作はスライドのページ送り以外不要であること １つの画面内でできること Googleスライドのプレゼンター表示の仕様 Googleスライドでは、プレゼンター表示をすると上記のように別タブで開かれます。 そのため、モニターがもう１台あればウインドウを分けて スライド画面のみ画面共有 して別モニターの方にプレゼンター表示を映しておくことでそれを見ながら発表することは可能かと思います。 ただ、会議室や実際に登壇して発表する場合にいちいちモニターを持ってきて発表する人はさすがにいないと思うので MacPC1台のみでできること こちらに反していることになります。 しかし、ウインドウが分かれていたとしてもプレゼンター表示側でページを送れば、裏でちゃんとページが切り替わってくれていました。これは使えそうな気がします。 Zoomの画面共有の仕様 Zoomで任意のディスプレイを画面共有した後、別のディスプレイに切り替えると「一時停止しました」と出てディスプレイが切り替わりますが、視聴側から見るともともと共有されていた画面が映っています。 そこで共有していたディスプレイに戻ると最新の画面が反映される形で再度共有が行われます。 つまり、 共有 → プレゼンター表示に切り替えて発表 → 次へを押してから共有画面に一度戻り、反映されたら再度プレゼンター表示に切り替えて発表　・・・ という流れにすれば実質プレゼンター表示しながら発表ができます！！ しかし、この操作には１つ問題があります。 このディスプレイを切り替えて一時停止させる動作、運なのか回線なのか原因は分かりませんがたまに画面が欠けたりしてバグった表示になります。 それは避けたいので今回、 画面操作はスライドのページ送り以外不要であること １つの画面内でできること この２つのレギュレーションを設けました。 最終手段 MacにはSplit Viewと呼ばれる標準の画面分割機能があります。 始めは画面共有はディスプレイごとに行われるものだから無理と思ってましたが、 ウインドウを分けて スライド画面のみ画面共有 して別モニターの方にプレゼンター表示を映しておくこと これができるということを思い出して、ディスプレイ分割した状態でスライド画面のみ画面共有することができないか検証してみたところ、なんとできました。 また、Zoomの画面共有の仕様でもあったとおり、別ウインドウでもプレゼンター表示側からページを切り替えたらページはちゃんと変わってくれました。 これで、視聴側はスライド画面のみ見えて、発表者側はスピーカーノートが見れる擬似的なプレゼンター表示ができました。 最後に HDMI一本つなげるだけでできていた発表者ツールがリモート環境下でやり方が分からなくなって、カンペが必要なレベルの発表のときはPCは全画面を共有しつつスマホにカンペをメモしておき、パソコンに並べて置いて見ながら発表するというなんともアナログなやり方をこれまでしていましたが、このやり方で解決するのでよかったです！ もしこれから発表する機会がある方、ぜひ参考にしてみてください！ （他に良い方法を知っている方いましたら教えて欲しいです！

はじめに 少し期間が空いてしまったが、Mac(M1)を購入したため、Flutterのアプリ開発をまた始めてみた（自分がiphone利用者なので、そもそもiphoneメインでアプリを開発したかった。） 以前にFlutterからFirestoreを利用する方法まとめたが、今回Macでそれを試したら、Flutterやパッケージのバージョンが上がっていたため動かなかった。 大した変更ではないが、一応整理し直したのでメモとして残しておく。 以前の記事はこちら。【FlutterからCloud Firestoreのデータ取得 ＆ データ書き込み】 実施環境 【PC】 　MacBook Air (M1, 2020) 【各SWバージョン】 　macOS Big Sur 11.6 　Flutter 2.5.3　（dart 2.14.4） 　Xcode 13.0 　AndroidStudio 2020.3 　Cocoapods 　　 手順 １．Cloud Firestoreにデータ書き込み ２．Cloud Firestoreからのデータ取得 ※事前準備として以下が完了している前提！ 　・Flutter のサンプルアプリが起動できる状態までのセットアップ。 　・Firebaseのプロジェクト作成 & iosアプリ追加。 　・cloud_firestoreのパッケージをmain.dartから呼び出せる状態であること。 １．Cloud Firestoreにデータ書き込み 試しに作るものは以前と同じ。 ちゃんと書き込みができるか確認するため、main.dartを以下の様に作成してflutter runを実行。 下のテストアプリではエミュレータ上で 【Save-button】をクリックすると、コレクション＆ドキュメントが作成される。 main.dart import 'package:flutter/material.dart'; import 'package:firebase_core/firebase_core.dart'; import 'package:cloud_firestore/cloud_firestore.dart'; void main() async { WidgetsFlutterBinding.ensureInitialized(); await Firebase.initializeApp(); runApp(TestApp()); } class TestApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, // <- Debug の 表示を OFF home: FirestoreSave(), ); } } class FirestoreSave extends StatefulWidget { @override _MyFirestorePageState createState() => _MyFirestorePageState(); } class _MyFirestorePageState extends State<FirestoreSave> { @override Widget build(BuildContext context) { return Scaffold( body: Center( child: ElevatedButton ( style: ElevatedButton.styleFrom( primary: Colors.red, ), child: Text('Save-button'), onPressed: () async { // ドキュメント作成 await FirebaseFirestore.instance .collection('test_collection1') // コレクションID .doc() // ここは空欄だと自動でIDが付く .set({ 'name': 'sato', 'age': 20, 'sex': 'male', 'type': ['A', 'B'] }); // データ }, ), ), ); } } 以前との変更点は大きく以下６つ ・import 'package:firebase_core/firebase_core.dart';の追加 ・runApp()の前に以下を２つの行を追加。　※あるバージョン以降、これが必要になったらしい。 　　・WidgetsFlutterBinding.ensureInitialized(); 　　・await Firebase.initializeApp(); 　 ・RaisedButtonが使えなくなっていたので、ElevatedButtonに変更 ・ElevateButtonではstyle:が必要。 ・Firestoreのメソッド名をFirebaseFirestoreに変更。 ・Firestoreへのデータ登録を .document().setData()ではなく、.doc().set()に変更。 ※【Save-button】をクリックした時に、もし下記の様なエラーが出た場合はFirestoreのルールを確認してみる。 [cloud_firestore/permission-denied] The caller does not have permission to execute the specified operation. Firebaseのコンソールからデータが入っているか確認 上記の通り、ドキュメントやデータが確認できたら書き込みはOK！ ２．Cloud Firestoreからのデータ取得 ここもやっている事は以前と同じ。 ちゃんと読み込みがができるか確認するため、main.dartを以下の様に作成してflutter runを実行。 下のテストアプリではエミュレータ上の 【LoadAlldocs】をクリックすると、指定したコレクション内にある全てのドキュメントのkey = nameが表示される。 main.dart import 'package:flutter/material.dart'; import 'package:firebase_core/firebase_core.dart'; import 'package:cloud_firestore/cloud_firestore.dart'; void main() async { WidgetsFlutterBinding.ensureInitialized(); await Firebase.initializeApp(); runApp(TestApp()); } class TestApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, // <- Debug の 表示を OFF home: FirestoreLoad(), ); } } class FirestoreLoad extends StatefulWidget { @override _MyFirestorePageState createState() => _MyFirestorePageState(); } class _MyFirestorePageState extends State<FirestoreLoad> { // ドキュメント情報を入れる箱を用意 List<DocumentSnapshot> documentList = []; @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ ElevatedButton( style: ElevatedButton.styleFrom( primary: Colors.red, ), child: Text('LoadAlldocs'), onPressed: () async { // 指定コレクションのドキュメント一覧を取得 final snapshot = await FirebaseFirestore.instance .collection('test_collection1') .get(); // ドキュメント一覧を配列で格納 setState(() { documentList = snapshot.docs; }); }, ), // ドキュメント情報を表示 Column( children: documentList.map((document) { return ListTile( title: Text('name:${document['name']}'), ); }).toList(), ), ], ), ), ); } } 以前との変更点は大きく以下７つ 　※基本的には１の書き込みソースと同じ様なところを修正。 ・import 'package:firebase_core/firebase_core.dart';の追加 ・runApp()の前に以下を２つの行を追加。 　　□WidgetsFlutterBinding.ensureInitialized(); 　　□await Firebase.initializeApp(); 　 ・RaisedButtonが使えなくなっていたので、ElevatedButtonに変更 ・ElevateButtonではstyle:が必要。 ・Firestoreのメソッド名をFirebaseFirestoreに変更。 ・Firestoreへのデータ呼び出しを .getDocuments()ではなく、.get()に変更。 ・ドキュメント一覧の取り出しも snapshot.documentsではなく、snapshot.docsに変更。 エミュレータ上でUIに表示されるのを確認できたらOK！

はじめに 以前に同じ様な内容の記事で、Ubuntu上に開発環境を構築したFlutterからFireabase（Cloud Firestore）を利用するまでの手順を投稿したことはあるが、Mac版で同じことをやろうとした時に色々と手こずったので、Mac版の設定は別途整理することにした。 実行環境 【PC】 　MacBook Air (M1, 2020) 【各SWバージョン】 　macOS Big Sur 11.6 　Flutter 2.5.3　（dart 2.14.4） 　Xcode 13.0 　AndroidStudio 2020.3 　Cocoapods 前準備 　Flutter、Xcode、AndroidStudioのインストールや初期設定が完了しており、iosシュミレータが動いていることを前提する。 　Mac版のFlutter環境の構築はこれらのサイトを参考にした。 https://zenn.dev/hndr/articles/14689ec937af1f https://flutternyumon.com/how-to-setup-flutter/ https://github.com/flutter/flutter/wiki/Developing-with-Flutter-on-Apple-Silicon 　 Fireabase を利用するまでの手順 １．Flutterプロジェクトの作成 ２．Firebase にプロジェクトを作成し、アプリを追加(ios)する ３．AndroidStudioを開き、Firebaseパッケージの追加 １．Flutterプロジェクトの作成 AndroidStudioを開き、【New Flutter Project】を選択し、任意のディレクトリにプロジェクトを作成する。 ２．Firebase にプロジェクトを作成し、アプリを追加(ios)する Firebaseプロジェクト作成後、アプリの追加より『ios』を選択する。 手順はFirebaseのコンソール上で表示されるので、その中で少し引っ掛かりそうなポイントのみ以下に整理。 ①アプリの登録 ・iosアプリを選択し、バンドルIDを入れる 　XcodeでFlutterプロジェクト配下のios > Runner.xcodeprojを開く。Xcodeのプロジェクト画面で『Runner』を選択すると、Bundle Idnetifier というのがあるので、これを入力する。 ・アプリのニックネーム 　省略可で後から編集可能なので、一旦未入力でOK ・App Store ID 　省略可で後から編集可能なので、一旦未入力でOK ②設定ファイルのダウンロード GoogleService-Info.plist をダウンロードし、これをXcodeを使って『Runner』ディレクトリの直下に追加する。 ※この際に "Copy items if needed" のチェックボックスにチェックを入れる。 これ以降の設定は不要のため、『次へ』で進んで行き『完了』までクリックしてしまってOK。 ３．AndroidStudioを開き、Firebaseパッケージの追加 　AndroidStudioを立ち上げ、プロジェクトを開く。 Terminalより以下の様なコマンドを実行することで、各FirebaseパッケージをFlutterに追加できる。 　・flutter pub add firebase_core 　・flutter pub add firebase_auth 　・flutter pub add cloud_firestore 　・flutter pub add google_sign_in 　・flutter pub add flutter_slidable ※その他のパッケージの追加については、こちらの公式サイトを参考に。 　https://firebase.flutter.dev Flutterへのパッケージ追加後、podに更新をかける必要があるが、以下の様にコマンドを実施していけば、大抵は上手く行く cd ios sudo gem install cocoapods （arch -x86_64 sudo gem install ffi　場合によってはこちら？） pod repo update pod update pod install ※上手くpodにインストールできない時は、以下の対処法を実施してみる。 ・ios > Podfile.lockがあれば削除 ・ios > Podfileの編集 　以下の様にコメントアウトされている場合、任意なバージョンに指定してコメントアウトを外す。 Podfile # platform :ios, '9.0'

はじめに 以前に同じ様な内容の記事で、Ubuntu上に開発環境を構築したFlutterからFireabase（Cloud Firestore）を利用するまでの手順を投稿したことはあるが、Mac版で同じことをやろうとした時に色々と手こずったので、Mac版の設定は別途整理することにした。 実行環境 【PC】 　MacBook Air (M1, 2020) 【各SWバージョン】 　macOS Big Sur 11.6 　Flutter 2.5.3　（dart 2.14.4） 　Xcode 13.0 　AndroidStudio 2020.3 　Cocoapods 前準備 　Flutter、Xcode、AndroidStudioのインストールや初期設定が完了しており、iosシュミレータが動いていることを前提する。 　Mac版のFlutter環境の構築はこれらのサイトを参考にした。 https://zenn.dev/hndr/articles/14689ec937af1f https://flutternyumon.com/how-to-setup-flutter/ https://github.com/flutter/flutter/wiki/Developing-with-Flutter-on-Apple-Silicon 　 Fireabase を利用するまでの手順 １．Flutterプロジェクトの作成 ２．Firebase にプロジェクトを作成し、アプリを追加(ios)する ３．AndroidStudioを開き、Firebaseパッケージの追加 １．Flutterプロジェクトの作成 AndroidStudioを開き、【New Flutter Project】を選択し、任意のディレクトリにプロジェクトを作成する。 ２．Firebase にプロジェクトを作成し、アプリを追加(ios)する Firebaseプロジェクト作成後、アプリの追加より『ios』を選択する。 手順はFirebaseのコンソール上で表示されるので、その中で少し引っ掛かりそうなポイントのみ以下に整理。 ①アプリの登録 ・iosアプリを選択し、バンドルIDを入れる 　XcodeでFlutterプロジェクト配下のios > Runner.xcodeprojを開く。Xcodeのプロジェクト画面で『Runner』を選択すると、Bundle Idnetifier というのがあるので、これを入力する。 ・アプリのニックネーム 　省略可で後から編集可能なので、一旦未入力でOK ・App Store ID 　省略可で後から編集可能なので、一旦未入力でOK ②設定ファイルのダウンロード GoogleService-Info.plist をダウンロードし、これをXcodeを使って『Runner』ディレクトリの直下に追加する。 ※この際に "Copy items if needed" のチェックボックスにチェックを入れる。 これ以降の設定は不要のため、『次へ』で進んで行き『完了』までクリックしてしまってOK。 ３．AndroidStudioを開き、Firebaseパッケージの追加 　AndroidStudioを立ち上げ、プロジェクトを開く。 Terminalより以下の様なコマンドを実行することで、各FirebaseパッケージをFlutterに追加できる。 　・flutter pub add firebase_core 　・flutter pub add firebase_auth 　・flutter pub add cloud_firestore 　・flutter pub add google_sign_in 　・flutter pub add flutter_slidable ※その他のパッケージの追加については、こちらの公式サイトを参考に。 　https://firebase.flutter.dev Flutterへのパッケージ追加後、podに更新をかける必要があるが、以下の様にコマンドを実施していけば、大抵は上手く行く cd ios sudo gem install cocoapods （arch -x86_64 sudo gem install ffi　場合によってはこちら？） pod repo update pod update pod install ※上手くpodにインストールできない時は、以下の対処法を実施してみる。 ・ios > Podfile.lockがあれば削除 ・ios > Podfileの編集 　以下の様にコメントアウトされている場合、任意なバージョンに指定してコメントアウトを外す。 Podfile # platform :ios, '9.0'

ということでMac mini を頂いた！ので、どうやって使おうか試行錯誤中というポエムです。 筆者、Appleはipod touchしか買わない相当な異端の趣向の者なので、突然ありがたきおもちゃを渡されおさるのジョージ並みに喜ぶもどう使うかもおサルレベルである...。ともかくいま家にあるmy gearで起動して繋いで作業用音楽流すくらいやりたいぞ とりあえず夫からモバイルディスプレイを奪い手持ちのやっすいマウスとキーボードを繋いだら起動できた。「ぽわーん」(←起動音) 音デカっ、と思うが音量の変え方がわからない… あとtwitterくらい見てやるかと思ったけど@マークどこ？っていうかこれ英語キーボードでしかないわ 試行錯誤 訳: M1 Mac miniの電源を入れた！でも、キーボードとモニター足りなくて、まだ日本語が打てねワロタwww 訳: 私Mac弱すぎワロタwww コピー＆ペーストの方法がわっかんね、音量もどうやって変えたらいいのかわっかんねww 　ハイ、私は多くのことを学ばなければなりません... SSH接続 夫からディスプレイを借り続けて恩を売られるのも困るのでどうやって普段遣いしようか試行錯誤する。まずSSHはここをこう。 ssh e99h2121@192.xx.xx.xx なるほど。でも...GUI... VNC接続 VNC 【Virtual Network Computing】 VNC（Virtual Network Computing）とは - IT用語辞典 e-Words VNCとRDP Ultra VNC VNC Viewer ツールは色々ある、この辺はLINUXと同じよね。 つないだ vnc://192.xx.xx.xx/ 映像に関して持ち腐れ感が否めないのでここからどうしようか考えどころである。でもモノから入って色々遊べるって贅沢で超楽しい。 Docker for Mac xrdpというやつでRDP的につなげられる 最近発表されて騒がしかったのはこっち でもコスパ悪くないやつですよね。 Mac mini、意外と持ち運べる... やはりMacって好きな人は大好き 続く あらためて、本当に有難うございました。楽しく使います。 以上お礼含めた記録でした