shibuso.net

プログラミングとかゲームとか

タグ:Web

最近の私のWindowsでのWeb(Rails)開発環境

2019年01月01日 | タグ: 開発 , Web

明けましておめでとうございます。本年もよろしくお願いいたします。早いもので前回投稿してから丸一年放置してしまいました(苦笑) ありがたいことにまだ検索で訪れてくれる方がいるみたいですし、今年は更新していきたいと思います。

Web開発界隈は私の観測範囲では結構Mac派の方が多いですが、最近Windowsを使い始めたという記事を続けて見かけたので、ずっとWindows環境で開発を続けてきたWindows派の私の環境についてもちょっと書いてみたいと思います。ちなみに今の職場は周りは全員Macです。

以前win-sshfsの記事を書いたりしましたが、最近は使わなくなっています。最近はDockerを使うことが多いですが、この方法はDockerでも単純な仮想環境でもどちらでも対応可能です。加えて言うと、別にWindowsじゃなくてMacでも可能です(笑) ただしIntelliJ IDEAかあるいはRubyMine等のJetBrains製のIDEにあるdeployment機能ありきのものです。類似の機能があれば他のIDEでも対応可能かと思いますが、ご了承くださいm(_ _)m

ちなみに私の現在の開発環境はホストはWindows 10 Proで、ゲストとして仮想環境(VirtualBox)にUbuntu18.04を使っています。更にその上にDockerを動かしていて、そこでRailsを走らせています。

何故マウントしないのか

上でも触れましたが、私は過去にsshfsや、更に前はsambaや仮想環境独自のマウント機能を使ってマウントしたりしてきました。ただそれぞれ問題がありました。共通しているのはディスクアクセスが遅くなることです。それがホスト側で問題になること、ゲスト側で問題になること、両方ありました。

色々悩んだ結果、ソースコードはそれぞれの環境で別々に持った方が速度的に問題なくなるということになったのですが、それはそれで今度はソースコードの不整合が発生することになります。

それを対処するためにrsyncみたいなsync機能があればいいなと考えていたのですが、IntelliJ IDEAが便利なdeployment機能を搭載していてくれたおかげで簡単に実現できました。今回紹介する方法はその機能を使った方法ですが、これも上で書いたとおり類似した機能があれば何でも実現可能です。

現在の大まかな構成

構成

ホスト上とゲスト上両方にソースコードを置くことになるのがこの構成の特徴です。Dockerを使う場合は仮想環境上で動かし、仮想環境上のソースコードを置いたディレクトリをDockerにマウントすることで対応します。Dockerが仮想環境上のファイルを見る分には特にディスクアクセスの速度に問題は起こっていません。コマンドラインから立ち上げる時は-vオプション、docker-compose.ymlで設定する場合はvolumesで設定する感じですね。

まずホストからゲストと繋げるためにSSHが繋げるようにしておきます。これは個人的にSSHを導入するのが一番楽だったり、その他開発する上で便利かと思って使っていますが、FTPを使っても対応可能です。

続いてホストとゲストそれぞれの環境でgit cloneしておきます。その方が改行コードの問題とか起こりづらいです、多分。

その後IntelliJ IDEAのdeployment機能を使います。「Tools > Deployment > Configuration」から設定します。ホスト環境とゲスト環境のそれぞれのコードの置き場を設定すれば、初期設定は完了です。ついでにExcluded Pathsタブでホスト環境の.ideaディレクトリと、ゲスト環境のtmpディレクトリ、logディレクトリを指定しておけば大まかに大丈夫かと思います。

ここまで設定すれば実際deploymentツールを実行することが出来るはずです。実行して問題が無ければ設定成功です。最後に「Tools > Deployment > Automatic Upload (always)」を選択すれば、上書き保存する度に勝手にアップロードされます。多分これだけで設定完了です。便利!簡単!

注意点

上記までで一通り使えるようになったかと思いますが、少し注意点があります。

まず気をつけれなければいけないことは、deployment機能は万能ではないということです。上書き保存時にアップロードしてくれますが、ゲスト側で新規にファイルを作ってもホスト環境にダウンロードしてくれません。rails g等でゲスト側でファイルを作成した後には手動で同期を行う必要があります。私はSettingsのKeymapで「Sync with Deployed to...」を設定して、すぐにdeployメニューを呼び出せるようにしています。

それからホスト側の文字コードや改行コードにも、特にWindowsでは気をつける必要があります。Windows上でテキストファイルを新規作成すると改行コードはCRLFになってしまいます。IDEの設定でLFに設定しておくのが無難で、且つファイル作成はIDEから行うように徹底しておいた方が良いと思います。

あとファイル権限周りは同期に失敗する原因になります。特にDockerを使っていると仮想環境とDockerでユーザが違ったりして、ファイルを新規作成する時に毎回設定する必要があったりします。まぁそこら辺は慣れれば毎回意識して設定出来るかと。ちなみに私は常にホスト側でgit commit, pushするようにしています。

まとめ

私のWindowsと仮想環境を使った開発環境の構成を紹介しましたが、完全に我流の構成です。Windowsと仮想環境を使ってどうやってWeb(Rails)開発が楽に出来るかとあれこれ試行錯誤した結果ではあるものの、これよりも便利に開発できる方法があるかもしれないので、これがベストだと主張するつもりもありません。

Macでもまったく同じことが出来るので、個人の趣味嗜好で環境を選択できれば良いんじゃないかなと思います。アプリと違ってWeb開発はあまりOSに縛られないのが楽なところかと思います。私は以前Macを買って使ってみたものの肌に合わなかったので、今後もしばらくはWindows環境でやっていけたらと思います。

Angular2を利用していると思ったら…

2017年06月15日 | タグ: 開発 , Web

去年の後半に、リリースされたばかりのAngular2を使用してチャット機能を作っていました。チュートリアルとかを一通りこなして実装しましたが、Railsに組み込む部分で四苦八苦したのが印象深いです。

そんなシステムが今朝クラッシュしていました。なんでだろうと思ったらzone.jsが何かコケていると。でも昨日まで動いていて特に手を触れていないのになぜ急に壊れるのか。DBには特に問題はなかったのでこれはもう完全にJS側の問題だろうと思って調べていたところ、RxJSが原因でした。

CDNから読み込んでくる時にバージョン指定していなくて、昨日次期メジャーバージョンアップのalpha版が出されたことでコケたみたいですorz

完全にケアレスミスですね。チュートリアルからコピーしてきた部分でしたが、バージョン指定をしているライブラリもあったので、まぁ気づけよと。RxJSの5系を指定したらまた問題なく動いてくれました。

やれやれこれで一件落着かと思っていたのですが、引き続きsystemjs.config.jsを眺めていたらどうもangular coreの方にもバージョン指定がされていないように見えました。何か嫌な予感が、胸騒ぎがしました…。

 あ…ありのまま 今 起こった事を話すぜ!

『おれはチュートリアルに従いAngular2を動かしていると
思ったらいつのまにかAngular4.2.2になっていた』

な… 何を言ってるのか わからねーと思うが
おれも何をされたのかわからなかった…

頭がどうにかなりそうだった…

見間違いだとか自動アップデートだとか
そんなチャチなもんじゃあ 断じてねえ

もっと恐ろしいものの片鱗を味わったぜ…

いやぁ、本当に設定がザルでした(汗) 幸いな事にAngular4.2.2の今でも(確認した範囲では)問題なく動いてくれていたので、このバージョンでロック。今後こういうことが無いように注意します…。

Railsでのboolean型の命名

2016年11月19日 | タグ: Rails , 開発 , Web

かれこれ4年近くRubyとRailsを触っているのですが、それでもいまだに初歩的なことで「これ、どうしよう?」と悩んだり、「以前はこうしたけど、今回はどうしよう?」という問題にぶつかる日々です。

先日再びぶつかったのがタイトルのとおり、boolean型の値を保持するカラムの命名です。この手の問題は命名規約と既存のテーブルの板挟みに合うことがよくありますが、今回は新プロジェクトだったことと、Railsでのboolean型に関しては命名規約が見当たらなかったので余計に悩みました。

候補として挙がるのは2案ですね。例として削除フラグ(論理削除は筋悪という議論は置いておきます)を作ろうとした場合

1. deleted
2. is_deleted

この2つの間で悩みます。PHPをやってた頃はdelete_flagみたいな名前をつけているのを見かけましたが、Ruby界隈ではあまり見ない気がします。それと海外の文献を見ててもあまり見かけない気がしますが、私の観測範囲はそんなに広くないので偏見かもしれません。

話を戻して、1番か2番かで悩んでいるわけですが、今回参考にしたのはStack Overflowの回答でした。公式ドキュメントとかじゃないのかってツッコミは勘弁して下さい、見つけられなかったのです…。
convention - rails boolean fields: `is_foo` or just `foo`? - Stack Overflow
http://stackoverflow.com/questions/3112078/rails-boolean-fields-is-foo-or-just-foo

Railsでeven?, nil?, empty?, blank?といった使われ方をしているのに対してisで始まるのはis_a?ぐらいしか思い浮かばない、だから`is_`を取り除いた方が良いのではないだろうかというコメントが支持されていますね。Rubyでは変数の後ろに`?`を付けるとtrue falseの判定が行われるので、それもこのシンプルさの手助けをしています。

というわけで私はひとまず1番のdeletedを採用しました。とはいえ正解・不正解を見つけたわけではないのであくまで主観です。それに変数名によっては変更せざるを得ないので(例:public等の予約語)、高度の柔軟性を維持しつつ臨機応変に対処する必要がありそうです。

jQueryでformの挙動をあれこれ操作

2015年11月07日 | タグ: 開発 , Web

引越し関連で色々動いてたら更新の間が空いてしまったけど、いつもの事なので気にせず本題へ。

まず普通にformがあって、その情報で登録なり更新なりしたい状況にあるとします。ただし、エラーがあった場合はページの更新をせずに、エラーの理由を画面に表示させたいという要望があります。エラーが無ければ普通に遷移して問題ありません。

ここで実装したいこととしては

  1. 問題が無いかどうかvalidationを走らせる
  2. 問題があればエラーの表示、問題が無ければ更新

という流れの処理です。

まず1番ですが、これは普通にAjaxで送れば実現可能です。dataにどうやってformの値を突っ込めば良いんだろうって悩みましたが、検索してみたところ以下のような感じで実装可能でした。


$(function() {
  $('form').submit(function(event) {
    event.preventDefault();
    $.ajax({
      type: 'POST',
      url: 'hogehoge/validate',
      data: $(event.target).serialize()
    });
  });
})

適当に思い出しながら書いてるんで間違ってたらごめんなさい。$(event.target).serialize()でいい感じにデータまとめて渡せるっての初めて知りました、各所で使えそうですね。上記の返り値でerrorが返ってきたら適当にエラーを表示させて、successが来たら改めて登録を叩けば良いわけです。

が、今度はどうやって再びformのデータを送ればいいのかちょっと悩みました。またAjaxでデータを送る手もありますが、手動でリロードするのはなんか格好悪いなと。それなら普通にformをsubmitさせることは出来ないのかな、と。

一度preventDefaultしちゃったらこいつを復活させることは出来ないみたいでしたが、ちょっと探してみたら違う方法がありました。


$(function() {
  $('form').submit(function(event) {
    var formElement = $(this);
    // 中略
    formElement.submit();
  });
})

どうもformを取っておいて、submitを叩けば良いみたいです。これで普通にformのsubmitを実行したのと同じ結果を得ることが出来ました。めでたしめでたし。

…で、これ書いてて気付いてしまったのですが、そもそもの問題を解決しようと思ったら、別に1でvalidateだけじゃなくて実際更新させちゃえば、戻り値によってページのリロードするだけで済んじゃいますね。俺のバカ!y=ー( ゚д゚)・∵. ターン

2013 年7 月にFacebook のLike プラグインで少し仕様が変わるっぽいです

2013年05月02日 | タグ: Web

ぎゃー気づいたら1 ヶ月以上放置しちゃってますね(;ノ∀`) 最近何かしら書けることがあったら仕事の方で書いてしまっているのでこっちのネタがあまり…いや、ネタはあるんですけど書く習慣が全く抜けてしまっています、言い訳良くない(苦笑) ちなみに現実バレ全然問題ないので晒しておくとTechRacho というサイトで書いてます(宣伝)

さて、あちらでは色々まとまった事書いてるので、こっちでは軽い事とか個人的な事等を。

先日Facebook から何かアラートが来てまして、何かと思って読んでみたらLike のプラグインで7 月から使えなくなる仕様を使ってる部分があるから修正してくれ、というものでした。私が今回指摘を受けた内容は、Like ボタンに絶対パスだけしか送れなくなる、というものでした。絶対パス以外って何があるんでしょうか、そもそも相対パス入れて使い物になるんでしょうかね?(^^;

しかしこれに違反してたからアラートが出たみたいでして、色々思い出してみるとテストのためローカル環境で192.168(以下略 で呼び出してたのが怪しいのかなと。とりあえず設定画面に「先にこの仕様を有効にする」っていうのがあるので、それを有効にして動作確認してみたところ(not ローカル環境)、問題なく動いてたのできっと大丈夫。これ書いてて「ローカル環境で試せば良かった」って気づきました(笑)