Heroku에 ffmpeg 설치하기 (Multi buildpack 사용하기)

Jul 25, 16

Video 파일 변환을 위해서 carrierwave-video gem을 사용했다. 이 gem은 ffmpeg를 사용하기 때문에, Heroku에도 ffmpeg를 설치해 주어야 한다. carrierwave-video는 audio codec으로 fdk-aac를 사용한다. License 문제로 fdk-aac를 포함한 binary file을 공식적으로 배포하지는 않고, 직접 compile해서 사용해야 한다. ffmpeg 3.0 부터는 audio codec이 안정화 되었다고 하니, 기본 audio codec인 aac를 사용하기로 했다. process_extensions VIDEO_EXTENSIONS, encode_video: [:mp4, audio_codec: "aac"] Heroku에 ffmpeg를 설치하기 위해서는 buildpack을 이용해야 한다. 여러개의 buildpack을 이젠 deprecated되었지만, 아직 잘 동작하는 ddollar의 heroku-buildpack-multi를 사용했다. .buildpacks에 buildpack 정보를...

Bootstrap collapse의 event handler 사용하기

Jul 24, 16

우선 만든것을 먼저 보여드린다. 감춰진 상태 펼쳐진 상태 bootstrap collapse에서 저 화살표를 만들어주지 않는다. 대신에 감춰지거나, 펼쳐질 때 event handler를 제공한다. bootstrap 2와 bootstrap 3의 event 이름이 달라졌다. 저 처럼 bootstrap3 이용하면서 bootstrap 2 manual 보는 사람이 없기를… $('.collapse').on('show.bs.collapse', function () { $(this).siblings("a").find("h4 > i").removeClass("fa-angle-right").addClass("fa-angle-down"); }); $('.collapse').on('hidden.bs.collapse', function () { $(this).siblings("a").find("h4 > i").removeClass("fa-angle-down").addClass("fa-angle-right"); }); siglings("a")로 collapse되지 않는 부분을 찾고, find("h4 > i")로 fond awsome의 i tag를 선택한다. i tag의 class를 바꿔주면 화살표가 바뀌게 된다. 보여줄...

model이 없는 form의 입력을 validation 이후에도 유지하기.

Jul 21, 16

Rails는 많은 일을 해줘서, 가끔은 이게 Rails에서 해주는것인지 브라우저에서 해주는 것인지 헷갈릴 때가 있다. 비밀번호가 틀렸을 때, id값을 유지하는 것도 model을 사용한다면 form에 인스턴스를 사용하는 것 만으로 해결된다. < in Session Controller file > def create if [success] else render 'new' end end < in new.html.erb > form @user do |f| ... Ara house의 로그인은 별도의 model없이 session을 이용하는데, 그래서 params에 email이 있는지 확인하고, 있으면 다시 input field에 넣어주는 작업이 필요하다. 이건 Rails가 해주지 않는...

모바일 Layout - View port

Jul 19, 16

Viewport는 웹페이지에서 눈에 보이는 영역을 말한다. Desktop기준으로 만들어 둔 web page는 모바일의 viewport보다 훨씬 큰데, 모바일 브라우저는 이걸 화면크기에 맞게 축소시켜서 보여준다. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1"> HTML5부터 viewport를 개발자가 제어 할 수 있게 되었다. width=device-width는 모바일 기기의 화면 크기를 web page의 width로 맞추고, initial-scale=1.0은 모바일 브라우저에서 처음 로딩 될 때, 축소하거나 확대하지 않게한다. Viewport 적용 전 Viewport 적용 후 참고링크 w3schools viewport Responsive design with twitter bootstrap

EXIF 옵션에 따라 이미지 회전시키기

Jul 18, 16

모바일에서 세로로 찍은 사진을 ara house에 올리니, 데스크탑에서 제대로 보이지 않았다. 모바일에서는 브라우저가 자동으로 이미지를 회전시켜주지만, 데스크탑에서는 그렇지 않은가보다. rails tutorial를 충실히 따라한 ara house는 이미지 작업을 Carrierwave gem을 이용해서 구현했다. class PictureUploader < CarrierWave::Uploader::Base include CarrierWave::MiniMagick ... process :auto_orient def auto_orient manipulate! do |image| image.tap(&:auto_orient) end end process를 이용해서 이미지가 업로드 될 때 callback method를 걸어둘 수 있다. manipulate!는 이미지 프로세싱에 사용하는 MiniMagick command를 사용할 수 있게 해준다. image.tap(&:auto_orient)는 MiniMagick의 -auto_orient command을 실행시킨다. 이...