@yasuyoshi64

Ruby on Railsのセグメント制限 Ruby on Railsでは以下のようなルーティングで :id のようなパスパラメータは セグメント と呼びます。(一般的にもセグメントって呼ぶかも) このセグメントに制限を付けたい場合は routes.rb で constraints を使用します。 get 'user/:id' , to : 'users#show' , constraints : { id : /[0-9]\d{4}/ } constraintsは正規表現で制限できます。 上記例だと0000～9999までの4桁数値のみヒットするようになります。

Ruby on Railsのルーティング Ruby on RailsのURLマップについて。 config/routes.rb に記述するんですが、Rubyって記述方法に省略系が多くて混乱することが多いので自分用に纏め。 Rails本家のガイドの Railsのルーティング も分かり易かった。頭捻ってた時は何故かこのガイドにたどり着けませんでした。 routes.rbの記述は基本以下のようになってます。 get 'users' , to : 'users#index' getはhttpdのGETメソッド。他にPOSTとかPUTとかDELETEとかですね。 'users’がパス。これだとhttp://localhost:3000/users になります。 to: の ‘users#index’ は controller のクラス#メソッドです。 この場合は ./controller/users_controller.rb の indexメソッドになります。 基本 > rails generate controller Users index などでコントローラーを作ると routes.rb には以下のように追加されます。 get 'users/index' これは以下と同義です。 get 'users/index' , to : 'users#index' 更に/indexは省略できますね。to:はコントローラ#アクションのとなりますが、更に以下のようにも記述できます。 get 'users/index' , controller : 'users' , action : :index :indexのようなものはシンボル、通常はハッシュマップにアクセスする際に使いますが、以下のようにするとusersのindexメソッドが呼べますのでメソッドを表す場合にも使用されるようです。 obj = Users . new obj . send ( :index ) # これでobj.index()と同じ でも文字列でも同じことできますよね。 ...

Ruby on Railsでクロス Ruby on Railsはデフォルトだと自身以外リクエストを受け付けません。 最近はフロントはVue.jsやReactで作ってバックはRailsみたいな構成が当たり前なので、このままだとフロント側からのリクエストを受け付けてくれません。 受付してもらうためにCORS (Cross-Origin Resource Sharing) の設定を行います。 Rack CORSの有効化 Gemfileを開いて以下のコメントを外します。 # Use Rack CORS for handling Cross-Origin Resource Sharing (CORS), making cross-origin AJAX possible gem "rack-cors" Gemfile修正後は以下でインストールします。 > bundle install cors.rb の設定 config/initializers/cors.rb を開いて設定します。 とりあえず手っ取り早くなんでもかんでも受け付けるようにするには以下です。 Rails . application . config . middleware . insert_before 0 , Rack : :Cors do allow do origins '*' resource '*' , headers : :any , methods : [ :get , :post , :put , :patch , :delete , :options , :head ] end end 実験的にはともかく、本番環境で動かす場合はセキュリティ上好ましくないのでoriginsの部分をちゃんと設定するようにします。 たとえば localhost:3000 と localhost:3001、あと https://www.example.com だけ受付する場合は以下のように書きます。 origins 'localhost:3000', 'localhost:300...

Ruby on Railsでデォフォルト機能を消す Ruby on Railsで最初にプロジェクトを初期化した後にルーティングを見るといきなり情報過多で「えぇぇ」っとなりますのでスッキリさせたい。 > rails routes 上記コマンドを実行すると以下のように大量に出てきます。 Prefix Verb URI Pattern Controller#Action rails_postmark_inbound_emails POST /rails/action_mailbox/postmark/inbound_emails(.:format) action_mailbox/ingresses/postmark/inbound_emails#create rails_relay_inbound_emails POST /rails/action_mailbox/relay/inbound_emails(.:format) action_mailbox/ingresses/relay/inbound_emails#create rails_sendgrid_inbound_emails POST /rails/action_mailbox/sendgrid/inbound_emails(.:format) action_mailbox/ingresses/sendgrid/inbound_emails#create rails_mandrill_inbound_health_check GET /rails/action_mailbox/mandrill/inbound_emails(.:format) action_mailbox/ingresses/mandrill/inbound_emails#h...

Nuxt.jsでアプリ Nuxt.js Vue.js用のフレームワークとなってます。 Vue.jsを素のまま使うより色々便利。 個人的にはAutoインポートが便利です。 Vue.js使ってたときみたいに一々以下みたいなコードを書かなくて済みます。コードもスッキリ。 import { ref , onMounted } form 'vue' Nuxt.jsではTypeScript( .ts)が基本になっています。JavaScript( .js)は選択できません。 最大の売りはサーバーサイドレンダリング(SSR)らしいのですが、まだ使ったことないので恩恵がわからない。 プロジェクト作成 Node.js がインストールされていれば問題ありません。 > npx nuxi@latest init MyApp Need to install the following packages: nuxi@3.9.0 Ok to proceed? (y) ■そのままEnter。nuxiが未インストールの場合に出るようです。 > Which package manager would you like to use? > npm ■パッケージマネージャの選択です。npmのままEnter。 pnpm yarn bun > Initialize git repository? > Yes / No ■.gitディレクトリ作ります。YesでEnter。 これでプロジェクトの雛形作成完了です。 後はNode.jsのプロジェクトらしく以下で実行ですね。 > cd MyApp > npm install > npm run dev Nuxt 3.7.3 with Nitro 2.6.3 ➜ Local: http://localhost:3000/ ➜ Network: use --host to expose √ Nuxt DevTools is enabled v0.8.4 (experimental) i Vite client warmed up i...

GitHubのCodespacesについて GitHubにCodespacesという機能があるのですが、なんかホスティングまでしてくれるらしいので使ってみました。 無料枠で月々コア時間120時間、120時間を超えてサーバプロセスが動いている場合は勝手に停止するようです・・・この時点でホスティングサービスじゃありませんでした。 あくまで開発時のテスト用に動作を許してくれるだけです。 多人数で開発してたら120時間なんてあっという間ですけど、個人利用なら全然余裕。 ちなみにストレージの無料枠は15GBまで、この枠までならいくつCodespacesを作ってもヨシです。 でも開発用と考えれば便利、Web版のVSCodeが使えるのでGitHubが使える環境ならどこでも開発できます。(そこまで開発に追われたくないですが) 使い方は簡単でした。デバッグ以外は。 アプリ作成 以下のように沢山あるテンプレートから雛形を作成して開発を始めればWebだけで最初から開発できます。 ブランチ上に既にあるプロジェクトからCodespacesを作ることもできます。 でも自分が最近普段使いしているVue.jsがなかったのでBlankで作成します。 「Use this template」をクリックするとWeb版VSCodeに切り替わります。 Vue.jsのプロジェクトを作成してみます。 ターミナルで以下のコマンドを実行。 $ npm create vue@latest プロジェクト名は適当 cd MyApp npm install 普通に動きます。たぶんnpmだけじゃなくbundleなど有名所のパッケージ管理ツールは入ってそうです。 ドキュメントが多いので全部読んでないんですが、デバッグのやり方がよくわからないです。 ブレークポイント置いても止まらない。 Vue.jsの場合だとWeb版VSCodeだとブラウザ立ち上げられないのでダメ、Ruby on Railsで試してみましたが、ローカルでやってるようにVSCodeからプロセス立ち上げても止まってくれませんでした。 一応Codespacesの説明にはデバッグもできると書いてあったのでやり方が間違ってるのでしょうが、今回使ってみた主旨とは違うので保留で。暇を見つけて再ト...

OpenAIのDALL-Eで画像生成 OpenAIのImages (DALL-E)を使えばAPIで画像生成できるのでそちらを試してみたんですが、画像生成については自由度がほぼない感じなんです。(2023/10/25現在) 現在だとAPIで使えるのはDALL-E2なのかな、この辺はっきりしなかったんですが、噂のDALL-E3だと違うのかもしれません。 画像生成に関するAPIはシンプルでモデルを選択する余地すらないです。 だってパラメータが以下しかないんですよね。 パラメータ デフォルト 説明 prompt 必須 1000文字以内の画像の説明文 n 1 生成する画像の枚数。1～10の間で指定 response_format url 返されるイメージの形式。url または b64_json の何れか size 1024x1024 画像サイズ。256x256, 512x512, 1024x1024 の何れか promptの工夫次第だと思うんですが、 DALL-E に$15課金して色々作成してみたけど。 自分のプロンプト能力では残念な絵しか生成できませんでした。 難しい。 ちなみにAIで生成した綺麗な女性の実写と見紛うような画像をよく見かけますよね。こういうヤツ。 これはDALL-Eじゃなく SeaArt の方です。 SeaArtの方は一言ですごい。 写真からイラスト風の写真を作ったり、背景だけ削除したり、落書きを仕上げてくれたり、トレーニングなんかもできます。マジですか。 ちなみに以下は自分の写真をイラスト風にして作成した画像です。数分で出力されてきました。 おでこに変なマークがあるのとかなり美化されてますが。 という感じでOpenAIのDALL-Eを真面目に勉強するのはGTP-4V & DALL-E3がAPIにリリースされた後でいいかと思いました。 生成するのも1024x1024で$0.02掛かるのでゴリゴリ消費されてしまうのが地味に痛い。 GTP-4V & DALL-E3になればGTPが画像を認識してくれるようになるのでプロンプトで画像のこの部分を修正してとか、そんな感じでGPTと相談しながら画像を作ることができるらし...

OpenAIのGPTを使ってみる 最近仕事でもAIの話って結構出てきました。 何も知りませんじゃ既に通らなくなりつつあるので代表的なOpenAI使ってみます。 OpenAIって複数の機能があります。 Audio (音声→テキスト) Chat ( ChatGPT ) Completions (これもChatですね Chatの方を使えって書いてあります) Embeddings (機械学習、特定のデータをベクトルに変換して類似性を数値化) Fine-tuning (GPTモデルの追加トレーニング) Files (Fine-tuningのトレーニング結果のアップロード用) Images ( DALL-E テキストから画像生成) Models (GPT-4やGTP-3.5などのモデルの取得、Fine-tuningしたモデルも含まれます) Moderations (入力データがOpenAIのポリシーに違反しているかチェックします) とりあえず興味は Chat と Fine-tuning と Images に行きますね。 まずChatを使用してみます。 OpenAIは従量課金制 なのでカード情報などの登録が必要です。 従量制ですが最初に$10はチャージしておく必要があります。後は使った分だけ請求される感じですね。 料金については ここ を参照。 GPT-4だと1000トークン辺り$0.03～$0.12。 GPT-3.5 Turboだと1000トークン辺り$0.0015～$0.004。 GTP-4と比べると桁が違うんですけど。 トークンについてですが、日本語の80文字くらいで122トークン、40文字くらいで43トークンになってました。計算方法はよくわからないですが、1トークン1文字強くらいの認識でいいかと思います。 OpenAIに登録したら右上のメニューから 「View API keys」 を選択して「Create new secret key」をAPIキーを作成します。 Chat について 大雑把に以下のことができます。 単純に文字列を送ると回答が返ってきます。 ちゃんと会話として繋げたい場合は過去の内容も含めてリクエストする必要があります。 予めプロンプトと呼ばれる命令をして...

Ruby on Railsでデバッグ Ruby on Rails (というかRuby？)のリモートデバッグのやり方が最初よくわからなかったのでメモ。 ここに書いてあるのはVSCodeでのデバッグ方法です。 RubyMineとかだとまた違うのかも。 Ruby on Rails初心者 ローカルデバッグ 自分のPC上でサーバー起動してデバッグします。 これは簡単でした。rails newで雛形を作成するとデフォルトでGemfileに debug が入ってます。 gem "debug", platforms: %i[ mri mingw x64_mingw ] 現在のバージョンは debug (1.8.0) 。 後はlaunch.jsonを以下のようにすればF5でサーバー起動できてデバッグ可能になります。 { "type" : "rdbg" , "name" : "Debug Rails" , "request" : "launch" , "cwd" : "${workspaceRoot}" , "script" : "bin/rails server -p 3001" , "args" : [ ] , "askParameters" : false , "useBundler" : true , } -p 3001 の部分でポート番号をデフォルトの3000から変更できます。 リモートデバッグ rdbgはリモートデバッグも可能です。 docker等で動作中のRailsにattachできます。 詳細は vscode-rdbg を参照してください。 まずlaunch.jsonを以下のようにします。 { "type" : "rdbg" , "name" : "Attach w...

OpenAI流行ってるしDALL-Eでイラスト書いて貰った 今はDALL-E3が話題みたいなんですが、選ばれた人しか使えないみたい。もちろん自分は選ばれないので使えるのはDALL-E2ですね。 DALL-E なんですが$15払ってちょっと使ってみました。 (2023/10/22現在上記URLで使われてるのはDALL-E2です) テキストで説明を入れると説明通りの画像を作成してくれるという話で去年辺り結構話題になってたものですね。 Chat-GPTと違って日本語が苦手らしい (日本語も入力できるんですが結果が???すぎるのでたぶんダメなんだろうと) ので英文でやってみます。 この文章のことをプロンプトと言うようです。 「可愛い猫のイラスト。目をパッチリ開いてるシーン。」 10秒くらい待つで以下のイラストが作られました。 1枚目が可愛かったのでアイコンに採用。 この後プロンプトに文章を足したりして更にブラッシュアップを重ねていくようなんですが・・・ごめんなさい使い方はよくわからない。 他の人の記事とか動画とか見て勉強しよう。 正直な所思ったような画像を出すのは難しい。プロンプトエンジニアにはなれそうもないなぁ。

Ruby on Railsで「An error occurred while installing mysql2」が出る Ruby on RailsでGemfileにmysql2を追加した場合に以下のエラーに遭遇することがあります。(Windows限定っぽい？) bundle installすると以下のエラーが・・・。 An error occurred while installing mysql2 (0.5.5), and Bundler cannot continue. In Gemfile: mysql2 理由ばよく分かりませんが以下のコマンドで個別にmysql2をインストールすれば出なくなりました。 > gem install mysql2 --platform=ruby -- --with-mysql-dir="C:\Ruby32-x64\msys64\mingw64" "C:\Ruby32-x64\msys64\mingw64"の部分は適宜変更してください。Rubyインストール時にデフォルトのままなら上記で大丈夫なはずです。 これで bundle install を実行してもエラーが出なくなる、はずです。

Ruby on Rails初心者 恥ずかしながらRuby on Railsでアプリとか作ったことなかったです。 Webアプリ作る場合にはバック側はJavaでフレームワークは Spring Boot ばっかり使ってたからPHPとかRuby on Railsとか触ったことくらいしかなかったです。 最近ちょっと扱う機会があったので、取っ掛かりの部分を備忘録として残しときます。 Rubyインストール Windows上で開発する場合についてです。 Ruby のサイトの ダウンロード からダウンロードしてインストールします。 通常のインストール後にMSYS2のインストール用にコンソールが起動されます。 MSYS2 はWindows上でLinuxのような環境を提供するもの・・・らしいですがWSLと何が違うのか正直よくわかってません。 _____ _ _____ _ _ _ ___ | __ \ | | |_ _| | | | | | |__ \ | |__) | _| |__ _ _ | | _ __ ___| |_ __ _| | | ___ _ __ ) | | _ / | | | '_ \| | | | | | | '_ \/ __| __/ _` | | |/ _ \ '__/ / | | \ \ |_| | |_) | |_| |_| |_| | | \__ \ || (_| | | | __/ | / /_ |_| \_\__,_|_.__/ \__, |_____|_| |_|___/\__\__,_|_|_|\___|_||____| __/ | _ |___/ _|_ _ __ | | o __ _| _ _ | (_) | |^| | | |(_|(_)\^/_> 1 - MSYS2 ba...

SpeechSynthesisを使ってテキストを音声に変換 window.SpeechSynthesis を使ってテキストを音声に変換。 こんな感じのサンプル作ってみました。 アプリ作成 Vue.jsだけです。Vue.jsで単純アプリを作成します。 App.vueの中身を以下に書き換え。 < script setup > import { ref , onMounted } from 'vue' ; const speech = ref ( null ) const text = ref ( "" ) const voice = ref ( 0 ) const voices = ref ( null ) const pitch = ref ( "1" ) const rate = ref ( "1" ) onMounted ( ( ) => { speech . value = window . speechSynthesis ; // getVoices()が非同期なので以下のイベントで取る必要があるようです。 speech . value . onvoiceschanged = ( event ) => { voices . value = speech . value . getVoices ( ) } } ) // 再生 function play ( ) { const utterThis = new SpeechSynthesisUtterance ( text . value ) utterThis . lang = "ja-JP" utterThis . voice = voices . value [ voice . value ] utterThis . pitch = pitch . value utterThis . rate = rate . value speech . value . speak ( utt...

SpeechRecognitionを使って音声をテキストに変換 window.SpeechRecognition (何故かChromeだとwebkitの接頭辞が必要?) を使ってWebだけで音声からテキストに変換。 喋った内容がそのままテキストになる便利(?)機能を使ってみました。 こんな感じに単純なアプリ作ります。 アプリ作成 Vue.js で単純なアプリ作成します。 App.vue の中身を以下に書き換え。 < script setup > import { ref , onMounted } from 'vue' ; const speech = ref ( null ) const texts = ref ( [ ] ) onMounted ( ( ) => { if ( ! ( 'SpeechRecognition' in window ) && ! ( 'webkitSpeechRecognition' in window ) ) { alert ( "お使いのブラウザは音声認識に対応しておりません" ) return } // マイク準備 const SpeechRecognition = window . SpeechRecognition || webkitSpeechRecognition ; speech . value = new SpeechRecognition ( ) speech . value . lang = 'ja-JP' speech . value . onresult = ( e ) => { // 音声認識のテキストを取得 if ( e . results [ 0 ] . isFinal ) { texts . value . push ( e . results [ 0 ] [ 0 ] . transcript ) } } speech . value ...

VSCodeでGitHubにプッシュするとき違うユーザーでコミットしたいのに VSCodeでGitのコミットユーザーを切り替える方法です。 Gitだと以下のコマンドで設定されているユーザーをデフォルトとして使ってます。 > git config user.name > git config user.email GitHubで複数のアカウントを切り替えながら使ってると自分のアカウントに会社のアカウントでコミットしてしまったり、それでそれを無理矢理プッシュしてしまったりして困る場合があります。 面倒ですが切り替えながら使うしかないです。(ないのかな？) VSCodeでGitHubにリポジトリ作成 ソースの管理アイコン(Ctrl + Shift + G)を選択します。 ここで「GitHubに公開」を選択してしまうとデフォルトユーザーのままコミットされてしまうので、「リポジトリを初期化する」をクリックして .git ディレクトリの作成だけ行います。 コンソールからプロジェクトのディレクトリに入ってローカルなユーザーを設定します。 > git config --local user.name [ユーザー名] > git config --local user.email [メールアドレス] ソース管理に戻って+アイコンで「全ての変更をステージ」を選択します。 コミットメッセージを入れて「コミット」します。 その後「Brunchの発行」をクリックして作成先とPrivate/Publicを選択します。 これで普通なら終わりなんですが、複数のアカウントを使っていると、「You don’t hava permissions to push to “yasuyoshi64/xxxxxxx” on GitHub. Would you like to create a fork and push to it instead?」のエラーが出てくる場合があります。 この場合は VSCodeでGitHubにプッシュしようとしたら「You don’t hava permissions to push to “yasuyoshi64 xxxxxxx” on GitHub. Would you l...

VSCodeでGitHubにプッシュしようとしたら「You don't hava permissions to push to "yasuyoshi64 xxxxxxx" on GitHub. Would you like to create a fork and push to it instead?」 VSCodeでGitHubにプッシュしようとしたら以下のエラーに悩まされた話。 You don’t hava permissions to push to “yasuyoshi64 xxxxxxx” on GitHub. Would you like to create a fork and push to it instead? GitHub の「yasuyoshi64/xxxxxxx」にプッシュする権限がありません。 代わりにフォークを作成してそこにプッシュしますか? 色々調べたところ複数のGitHubアカウントを持ってて使い分けしてる場合に発生することがあるらしいです。 VSCodeだけじゃなくSourceTreeでも似たような事象で悩まされました。 この問題忘れた頃に発生するので一応備忘録として残して置きます。 直接的な原因 実は原因は分かってません。VSCodeとSourceTreeだけで発生するのでアプリ側に問題あるのかなぁと思ってます。 VSCodeでサインインし直してもダメ、コンソールで以下のようにユーザーを設定し直してもダメでした。 > git config user.name [ユーザー名] > git config user.email [メールアドレス] Windowsの資格情報を削除する Windowsの資格情報を一旦削除してからならちゃんプッシュできました。 どこかで記事を読んだんですが、忘れました。 まずコントロールパネルの「ユーザーアカウント」を開きます。 次に「資格情報の管理」をクリック。 「Windows資格情報」をクリックして一覧の中から GitHub がある資格を全部削除します。 これでVSCodeなどで再度GitHubにサインインすれば正常にプッシュできるようになります。 これ偶にしか起きない...

Vue3でVOICEVOX動かしてみる Vue.js (Vue3) からVOICEVOX engineを使ってみます。 こんな感じのシンプルアプリを作ります。 VOICEVOX engine は以下の記事で動かしてます。 VOICEVOXエンジンをDockerコンテナで動かす Vue3プロジェクト作成 Node.js と Vue3 はインストールされているものとして。 > npm create vue@latest Vue.js - The Progressive JavaScript Framework ? Project name: » voicevox-app ■プロジェクト名を入力。 ? Add TypeScript? » No / Yes ■JavaScriptを使用するのでNo。 ? Add JSX Support? » No / Yes ■スクリプトの中にタグを書けるようします。Noで。 ? Add Vue Router for Single Page Application development? » No / Yes ■Vue2にもあったRouterですね、今回はいらないのでNoで。 ? Add Pinia for state management? » No / Yes ■Vue2にあったVuex(store)の代替機能です。状態管理ツール。Noで。 ? Add Vitest for Unit Testing? » No / Yes ■Viteの単体テストフレームワークです。Noで。 ? Add an End-to-End Testing Solution? » - Use arrow-keys. Return to submit. > No ■E2Eテストフレームワークです。Noで。 Cypress Nightwatch Playwright ? Add ESLint for code quality? » No / Yes ■ソース整形/チェック用のESLintですね。Noで。 ? Add Prettier for code formatting? » No / Ye...

VOICEVOXエンジンをDockerコンテナで動かす SSS LLC. 四国めたん VOICEBOX を起動すれば http://localhost:50021 でエンジンのAPIにアクセスできます。 APIのドキュメントは http://localhost:50021/docs で表示されます。 独自アプリなんかで利用したい場合はエディタの部分は不要なのでエンジンだけDockerで起動できるようにしてみます。 VOICEBOXのエンジンはPython + FastAPI、オープンソースでGithubに公開されてます。 VOICEBOX ENGINE なのですがDockerイメージ( voicevox/voicevox_engine )が既に公式から公開されているのでそちらを使って動かします。 compose.yml を作ります。CPU版とGPU版がありますが今回はCPU版にしました。 version : '3.4' services : voicevox_engine : image : voicevox/voicevox_engine : cpu - ubuntu20.04 - latest container_name : voicevox_engine ports : - 50021 : 50021 動かします。 > docker-compose up http://localhost:50021/docs にアクセスすると動いてますね。 音声ファイルを生成してみます。 curlコマンドはWindowsだとちょっと面倒なのでWLS2のUbuntu上で実行します。 $ echo -n "こんにちは、音声合成の世界へようこそ" > text.txt $ curl -s -X POST "127.0.0.1:50021/audio_query?speaker=1" --get --data-urlencode text@text.txt > query.json $ curl -s -H "Content-Type: application/...