画像投稿機能備忘録２
ドラッグ&ドロップについて
var dropZone = document.getElementById("drop_zone");
dropZone.addEventListener("dragover", function(e){
e.stopPropagation();
e.preventDefault();
}, false);
dropZone.addEventListener("drop", function(e){
e.stopPropagation();
e.preventDefault();
var files = e.dataTransfer.files;
for ( var i = 0; i < files.length; i++){
inputs.push(files[i])
}
divideFiles(files)
}, false)
var dropZone でドラッグ&ドロップの場所を指定
dropZone.addEventListener("dragover", function(e){
のdragoverはドラッグ&ドロップ中、マウスカーソルがドラッグ&ドロップ指定した
要素の範囲内で移動するときに発火し、
dropZone.addEventListener("drop", function(e){
のdropはファイルをドロップ領域にドロップした時に発火する。
e.stopPropagation(); と e.preventDefault();
上記は e.preventDefault(); でデフォルトで設定されたイベントを抑制し、
e.stopPropagation(); でイベントの伝播を止めることができる。
preventDefaultが無いと画像をブラウザで開く事になり、ドラッグ&ドロップができなくなる。
e.dataTransfer.files; でdropされたファイルを受け取り、データを保持する。
複数画像アップロードと画像ファイル保持に関しての備忘録
某スクール最終課題にてこれが結構時間かかったので記事にしておきます。
本家とはやり方が違うと思いますが、機能的にはそれなりに近づいたと思ってます。
まず、普通に検索して出てくる複数画像投稿のやり方とか、
ドラッグ&ドロップのやり方ではファイルの保持の方法があまり書いてないと思います。
私はここでかなり苦労しました・・・
まぁ、それは置いといてとりあえず結論から書きますと、
これを解消するにはjavascriptの方でinputを作ってあげてクリックしたらその作成したinputを選択するようにしてあげる事で解消出来ます。（ここもjavascriptで制御する感じです）
ブラウザのhtml的にinputが増えていく感じになるのですが、本家の某フリマの方は数値のカウントのみの変動なので、これとは違ったやり方になっていると思います。
でも、とりあえずこれでファイルをinput内に保持した状態となるので、previewの表示がリセットされてしまう状態が解消されます。
実際のコード的には、
var nextInput = `<input accept="image/*,.png,.jpg,.jpeg" id="image_input`+ inputCount +`" class="upload-image" name="images[image][]" multiple= "true" type="file" style="display: none;">`
という変数を定義して、
$("#preview").append(nextInput);
と書いてあげてhtmlに追加していくという感じです。
更に、hamlのドロップゾーンの要素に{onclick:"$('#image_input1').click();"}と書いてあげて、クリックする度にこの要素の #image_input1の数字が変わるようにする事で次のinputにImageFileが入るように出来ます。
この時、input Type File を隠すためにlabel要素を使っていると私の場合うまくいきませんでした。inputの方のidが必要になるのでlabelのforと相性が悪かったので、
ドラッグ&ドロップにはdiv要素を使ってinput Type File をstyle display: none;で隠す感じ
にしてあげました。
自動デプロイ時に遭遇したエラー
今回は実際に遭遇したエラーに関しての備忘録です。
まずは、Uglifier::Error: Unexpected character '`'
assetsデプロイ時のエラーです。
これは javascriptの記述が引っ掛かって起きているようで、
バッククォート「 ` 」が原因となっているみたいです。
javascriptのES6に基づいた記述をRails側で通してくれないために起きるエラーなので、
javascript内でバッククォートの記述を変更してあげ、
ex) バッククォート使用を → シングルクォートにして、
${変数}で呼んでる変数を「 + 変数 + 」というように記述する。
もしくは、アプリケーションフォルダ内部の
config/environments/production.rb内の記述を
config.assets.js_compressor = :uglifier を
config.assets.js_compressor = Uglifier.new(harmony: true)
とした上で、
config.assets.compile = false を
config.assets.compile = true
と変更
falseのままだとデプロイ後にcssや画像を読み込まない原因となる場合があるため、trueにしておくと良いと思います。
次に、
Gem::Ext::BuildError: ERROR: Failed to build gem native extension.
私の場合、エラー文を読んでいくと
In Gemfile:
sass-rails was resolved to 5.0.7, which depends on
sass was resolved to 3.7.4, which depends on
sass-listen was resolved to 4.0.0, which depends on
rb-inotify was resolved to 0.10.0, which depends on
Tasks: TOP => deploy:updated => bundler:install
と書いてあったので、どうも一部gemのバージョンがサーバー側と違うためにエラーを吐いているのではという推測を立ててサーバー側のgemをupdateしようとしました。
サーバー側にsshでログインし、
/var/www/アプリ名 に移動
bundle updateをしたら・・・
ffiのupdateでフリーズを起こしました・・・
こういうサーバー側のエラーは本当にサーバー関連初心者には心臓に悪いです。。。
この後、EC2を再起動、しばらくログインできない状態が続いた後、
再度ログインして、
gem update を実行、何とかffiのupdateが通り、デプロイも通りました！
その他、単純な理由のエラー等
この辺りは本当に何で見落としていたのかというエラーです。
特に、EC2を再起動した後等、初心者は注意するべき点であると思いました。
この前に書いた上記のエラー解消後、実は
Mysql2::Error::ConnectionError: Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' (111)
というエラーが出ました。
またか！？と思いながらエラーを調べてsocket関係かな？
と思いつつ調べている途中に、ふと・・・Mysql起動したっけ？と頭を過ぎりました。
そこで早速サーバー内のMysqlのstatusをチェック、
sudo service mysqld status を実行すると・・・
起動してない事が分かったので、
sudo service mysqld start を実行、
これで無事にデプロイが通った、という事がありました。
また、もう一つ、これもEC2インスタンスを再起動後の話ですが、
なぜかElasticIPにアクセスしても
ERR_CONNECTION_REFUSED と表示され、
アクセス出来ないという事が起こりました。
ElasticIP/3000だとアクセスできるのに何で？と長時間解消できなかった事がありました。
いくらgoogle先生に頼って探しても解消しないので遂にメンターの方に頼ることを決意しました。（応用に入ってから初だったので聞くまでの準備も大変でした。。。）
前回書いた記事のエラーの調べ方もこの時にパクった感じで凄く勉強になりました、というのは置いといて何が原因だったのかというと、
nginxの起動がされてないもしくはポートが通ってないのが理由でした。
AWS側でのポート開放は確認したところ大丈夫だったので、
sudo service nginx restart を実行、
nginxを再起動したらElasticIPのみで接続出来たという事がありました。
以上で今回の記事は終わります。
またエラーが起きたら備忘録として記事にしていくつもりです！
まぁ、起きないのが一番なんですけどね・・・
自動デプロイ時のエラーやら何やら
そんな時の私なりの対処法をテンション低めで書いて行きます。
まず、デプロイ環境ですが、某スクールの環境なので、
AWSのEC2インスタンスを使用、Railsのgem "Capistrano" を使用した自動デプロイとなっています。
Capistranoの導入等はそのうち書くかもしれませんが、エンジニア目指している方ならまずググって自分で情報取って来て下さいね！
結論から言いますと、logを見ろ！
これに尽きますね。
どうやってlog見るねんという方も微レ存してるかもしれないので手順を説明すると、
- ターミナルのローカルディレクトリをsshに移動、
$ cd ~/.ssh
- sshキーでログイン！
ssh -i [キー名].pem ec2-user@[ElasticIP]
- AWSのクラウドサーバーに入ったら
cd /var/www/アプリ名/
- これでアプリ内のディレクトリに！
- 更にどういうフォルダがあるか見るために
$ls
- これでどういうフォルダがあるか見れます。
Capfile Gemfile.lock Rakefile bin config.ru db log public repo shared test vendor
Gemfile README.md app config current lib package.json releases revisions.log storage tmp
- 更にlogに移動して見ると・・・
development.log production.log unicorn.stderr.log unicorn.stdout.log
- 色々あります！
$catまたはless production.log とかやるとlogが見れます！
- 自動deploy時にエラーが発生している場合
6.に戻り、current内のlogを同じように見ると、ローカル環境と同じようにサーバーの状態が表示されているため、そこを見ると何か分かるかもしれない！
デプロイエラーこわぃ・・・
という訳で、上記リストの１〜８はデプロイしたのにうまくサイトが表示されなかったりする場合の手順で、９がサーバーステータスの表示という感じですね！
デプロイはまだまだ謎が多いわ・・・
デプロイ時のmigrateエラーassetsエラーとかもう・・・
