vdeepTweetPocketこんにちは、okutani(@okutani_t)です。Railsから『CarrierWave+fog』を使って画像をアップロードするまでを紹介しています。『CarrierWave』は単純に画像アップロードをおこなうために利用し、fogを使うことでクラウド上にあるS3へのアップロードを簡易的におこなえるようにしています。S3を利用できる状態にしておく必要があるため、以下の公式サイトから利用登録しておきましょう。ちなみに、新規登録から1年間は無料で利用できます。AWSまた、CarierWaveに似た「Paperclip」というgemを使っても同じような実装をおこなうことができます。今回は解説しませんが、CarrierWaveとPaperclipの違いについては以下のサイトを参考にしてください。彼女からは、おいちゃんと呼ばれていますS3の料金体制については以下の記事が分かりやすいです。Qiita今回、Railsのバージョンは5.0.1、Rubyバージョン2.3.0を使って作業を進めています。それでは、S3サーバーにで画像をアップロードする方法をみていきましょう。まとめS3の初期設定まずはじめに、S3の初期設定をおこないます。Management)を利用することで、ユーザーごとにアクセス制御をおこなうIAMユーザーを作成することができます。IAMはLinuxでいうところの「rootとuser」の関係のようなものなので、必ずはじめに作成するようにしましょう。以下の公式サイトTOPから「アカウント」→「セキュリティ認証情報」を選択し、ログインします。クラウドコンピューティングサービスIAMマネジメントコンソールにログインしたら、S3のみ利用できるグループを先に作成しておきます。以下の流れはIAMの管理のしかたによってかなり変わってくるかと思うので、一例として読み進めてください。「グループ」→「新しいグループの作成」をクリック。今回はS3usersにしてみました。次のステップへ進み、ポリシーを決めていきます。s3で絞りこみをして「AmazonS3FullAccess」を選択。ポリシーは細かく設定することもできますが、今回は分かりやすくS3をフルに使えるグループを作成してみました。次にユーザーを作成します。「ユーザー」→「ユーザーを追加」を選択。今回はs3userとしましたが、ご自身のプロジェクトに合わせて作成してみてください。アクセスの種類を選択」を設定します。今回は次のとおり設定してみました。ONもし、マネジメントコンソールへのアクセス許可をしない場合は、該当箇所のチェックをOFFにしてください。次のステップに進み、先ほど作成した「S3users」グループを選択します。「ユーザーの作成」を選択してユーザを作成します。ユーザーが作成できました。「.csvのダウンロード」をクリックして、ユーザー情報を取得しておきましょう。「credentials.csv」ファイルがダウンロードされます。取得したユーザー情報は外部に漏れないよう保管しておく必要があるので注意してください。作成したユーザーでログインそれでは、s3userのアカウントでAWSマネジメントコンソールへログインしてみます。先ほどダウンロードしたCSVファイルに、ログイン情報とs3user専用のURLが記載されています。通常のマネジメントコンソールへのログインURLとは別のURLになるので注意しましょう。サインインすると、パスワードを変更するように促されるので変更します。AWSマネージメントコンソールにログインできました。S3以外のサービスをクリックすると、権限がないことが確認できます。それでは、作成したユーザーを使って、画像アップロード場所である「バケット」を作成していきます。バケットの作成S3からバケットを作成していきます。s3userのまま操作していきましょう。「サービス」→「S3」を選択。「バケット」の作成をクリック。「バケット名→好きな名前」「リージョン→Tokyo」を選択、「作成」をクリック。ちなみに、バケット名はURLにも利用されるので、「proj-image-store」のように『ハイフン区切りかつユニークな英数字列』にしてくと良いですね。バケットの名前の付け方は以下のサイトが参考になります。S3のバケット名はよく考えて命名しましょう!リージョンは日本のサービスなら、一番近い「Tokyo」を選択しましょう。それ以外の場所であれば、適宜選択してください。画像をやりとりしたログ記録を取りたい場合は「ログ記録のセットアップ」からおこないます。今回はログ記録の説明は省略して進めます。画像操作をおこなうので、ImageMagickというツールを先に導入しておきます。ImageMagickは画像操作をおこなうときに広く使われているツールですね。今回は確認用としてMacに導入します。Homebrewを使うとかんたんに導入できます。......なのですが、私の環境では最新版だと実行時にコケてしまったので、最新版の7.0.4-9ではなく、6-6.9.7-8を導入しました。vdeep」を参考にしてください。yumが使えるLinux(CentOSなど)であれば、以下のコマンドで導入できます。imagemagickただし、今回はLinux上での動作チェックはおこなっていませんのであしからず。RailsでS3に画像をアップロードするまでをみていきましょう。CarrierWaveの導入GemfileにCarrierWaveを記述していきます。以下をRailsアプリ以下にあるGemfileに追記。'mini_magick'CarrierWave以外のgemも導入していますが、「fog-aws」はS3へのアップロードを簡易的におこなうため、「mini_magick」はImageMagickを操作してサムネイル画像などを作成するために必要です。サーバー上へ画像をアップするだけであれば、CarrierWaveのみでもOKです。今回はS3へのアップロード、画像切り出し操作などもおこないたいため、それぞれのgemを導入しています。今回は、以下のコマンドでRailsプロジェクト配下にgemをインストールします。mini_magickの導入が完了しました。Uploaderの作成それでは、Rails側の設定をおこなっていきましょう。CarrierWaveで利用するUploaderを作成します。generateコマンドでさくっと作成できます。Image「app/uploaders/image_uploader.rb」が生成されます。今回は、以下のようにimage_uploader.rbを書き換えてみました。endend上記は一例です。お好きな設定に変えて使ってみてください。お好みにリサイズしたい場合は、以下のサイトが分かりやすくまとまっているので参考にしてください。まつばModelにUploaderを紐付ける作成したUploaderをModelに紐付けます。今回は、Userモデルに紐付けると仮定して進めます。ImageUploaderend「:image」の部分は適宜利用したいモデルのカラム名に変更してください。モデルの作り方や、CRUDなどの実装などがよく分かっていない方は、Rails入門書籍などを参考にしてみてください。今回は話をかんたんにするため、モデルやコントローラの作成方法については割愛しています。画像アップロードのviewを作成します。利用するモデルに応じて作成してみてください。上記の例では、画像がすでにアップされていれば「サムネイル画像+画像を削除ラベル」を表示して、画像削除もできるようにしています。「:image_cache」を利用すると、バリデーション時に画像が消えずにキャッシュしたものを表示してくれます。その場合、Controller側のpermitにimage_cacheを追加しておく必要があります。私の環境だとバリデーション後にキャッシュはされているものの、キャッシュされていることが画面上で確認することができませんでした。解決できたら追記します。「config/initializers/carrierwave.rb」を以下の内容で作成します。/[^[:word:]\.\-\+]/上記の項目は好きに変更して使ってください。リージョンの設定項目については以下を参考に。Tokyoであれば「ap-northeast-1」を指定すればOKです。サービス環境ごとにS3のバケットを切り替えることもできますし、キャッシュファイルをS3に持つこともできます。dev用にバケットを分ける場合は新しくバケットを追加してください。私は「dev-プロジェクト名-image-store」の形式で新しく作成してみました。日本語化対応をおこなうには、以下のファイルを「config/locales/carrierwave_ja.yml」に設置します。"%{extension}ファイルのアップロードは許可されていません。"%{extension}ファイルのアップロードは許可されていません。"%{content_type}ファイルのアップロードは許可されていません。"rmagickがファイルを処理できませんでした。画像を確認してください。"MiniMagickがファイルを処理できませんでした。画像を確認してください。"を%{max_size}以下のサイズにしてください"設置後はRailsサーバーを再起動してください。UsersControllerを作成して、普段どうりCRUDで実装します。以下createの例です。Parametersに画像関連のパラメータを追加しておきましょう。)endアップロードを実行すると、usersテーブルのimageカラムにはUploaderのオブジェクトが、S3には画像ファイルがアップロードされているのが確認できるかと思います。publicで投稿していれば、プロパティからURLを取得することで、直接画像にアクセスすることができます。Railsからおこなうため、CarrierWave+fogを使って実装を進めました。S3を利用する場合、グループやユーザーの作り方がちょっと特殊で戸惑うかと思いますが、AWS関連の勉強にもなるのでじっくり取り組みましょう。S3ではバックアップもしっかりおこなってくれますし、格安で大量のファイルを管理することができるので、本記事を参考にして理想のストレージ環境を作ってみてください。Railsユーザーの参考になれば幸いです。MiniMagickもろもろを導入するだけで大変ですね。これで便利に画像アップロードできるようになりました。Web開発のお仕事を募集していますフリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています(現在の業務量によってお受けできない場合もあります)。CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。RailsスポンサーリンクPC用AdSensePC用AdSenseこちらもどうぞPREVフリーランスになって半年。(@okutani_t)1990年生。2016年8月にWebエンジニアとしてフリーランスに。プログラミング、カメラ、邦楽ロック、ハリネズミがすき。Portfolioをどうぞ。“たった1つ”の超シンプル禁煙方法。これで僕はノンスモーカーになれたiPhoneで「絶対に」やっとくべきキーボード設定3つ。超簡単だからみんなにやって欲しいよMacの容量を食ってる「その他」を調査してみたMacBookで複数モニターを使う方法。