【画像の複数投稿について】 画像の複数投稿は、画像の投稿機能さえ出来てしまえば簡単です！ 1. 画像投稿がラックラクに 以前ご紹介しましたTwitterの複数画像投稿機能（詳しくはこちら）が、スマホ公式アプリでも全ユーザー使えるようになりました。 昨日のアップデートより、開放されたようです。 今回の変更により、画像投稿の仕方が今までと少し変わりました。 とかが参考になりました。, input[type=file]をmultipleにした時、ここのfiles配列に複数の画像の情報が入ります。 非常に簡潔で分かりやすいです。 ユーザーのファイルパスがfakepathになり特定できないことがわかったこのページ、 これで、みなさんは画像投稿にもう涙することはないはず！ - 【複数画像のプレビュー】 最終的には以下の画像のような複数投稿プレビューができるようになるはずです！ copyright (C) mediagene, Inc. All Rights Reserved. 色々つまづいたので文量が多くなってしまいましたが、それらをシンプルさ意識してまとめてみました。 Paperclipのアップロードファイルの保存先とValidation」を参考にしました。 ③バリデーション, リサイズはImageMagickを使ってできます。 実装はRailsで、超簡単便利なPaperClipを使って、複数画像をS3にアップロードにもあるのですが、has_attached_fileの:stylesでサイズ指定できます。 TwitterでURLを含むツイートをしたときに自動表示されるサムネイル画像のサイズを変更する方法（Livedoorブログ用） ①ではawsにファイルを保存する設定だったので、awsなしでローカルでも試せるような設定にするために②を参考にしました。, 画像の複数投稿については、 //どこでプレビューするか指定。'img[name="preview"]'などにすればimg複数あっても指定できます。, //'input[type=file]'で投稿されたファイル要素の0番目を参照します。input[type=file]にmutipleがなくてもこのコードになります。, //めちゃめちゃ長い文字列が引き渡されます。ユーザーのファイルパスに紐付かない画像情報だと思います。, //ここでreaderのメソッドに引数としてfileを入れます。ここで、readerのaddEventListenerが発火します。, http://www.itmedia.co.jp/enterprise/articles/1605/06/news047.html, Railsで、超簡単便利なPaperClipを使って、複数画像をS3にアップロード, 「Rails4+Paperclip(ImageMagick)のサムネイルサイズ一覧」, you can read useful information later efficiently. Railsで、超簡単便利なPaperClipを使って、複数画像をS3にアップロード ②画像の向き Why not register and get more from Qiita? 画像を編集する場合は、編集したい画像をクリックしてアクティブにした後、[画像を編集] ボタンをクリックします。 Facebookへの複数枚投稿には対応していません。同時投稿を行った場合は、1枚目の画像が投稿されますのでご注意ください。 画像のプレビュー自体はhtmlとjavascriptしか関係ないです！, 画像の複数投稿は、画像の投稿機能さえ出来てしまえば簡単です！ 2. 画像の投稿 画像投稿の機能自体は、以下の2つをを参考に実装しました。 ①Railsで、超簡単便利なPaperClipを使って、複数画像をS3にアップロード ©Copyright2020 社畜ですが？.All Rights Reserved. ちなみに、imagemagickの脆弱性は対応されているので無問題。 そして、画像投稿機能を実装する時にこういう問題があったなと思い出しやすいものになるように、 htmlエディターを利用して複数の画像を貼り付けるには （1）ブログに貼り付けたい画像を、全て画像フォルダにアップロードします 画像のアップロードの方法はこちらとこちらをご覧ください。 , TwitterでURLを含むツイートをしたときに自動表示されるサムネイル画像のサイズを変更する方法（Livedoorブログ用）, Livedoorブログの管理画面から「ブログ設定」 > 「デザイン / ブログパーツ設定のPC」を開きます。, 「カスタマイズ」タブを開いて、「トップページ」をクリックします。テンプレートのからの間に, 「個別記事ページ」タグ内のHTMLテンプレートにも上記ステップ2-3と同じことをします。ぼくは「カテゴリーアーカイブ」と「月別アーカイブ」にもやっておきました。これでブログに今回必要なメタデータが組み込まれます。完了したら「保存する」をクリックしてテンプレートを保存してください。, ここで一旦、必要なメタデータがちゃんとブログに組み込まれているか確認してみます。ブログトップページと個別記事ページをそれぞれ開き、右クリックで「ページのソースを表示(←Firefoxのブラウザの場合)」を確認します。, トップページのソースでは、”twitter:card”は”summary”に指定されていました。URL入りのツイートをしたときに自動生成されるサムネイル画像を小さい正方形にしたい場合、”twitter:card”は”summary”に指定されていなければなりません（参照：, これに対して、個別記事ページのソースでは、”twitter:card”は”summary_large_image”に指定されていました。だからURL入りのツイートをしたときに自動生成されるサムネイル画像が大きくなってしまっていたんですね！（参照：, 個別記事ページのURLを入れてツイートしたときに自動生成されるサムネイル画像がどのように表示されるか、, 個別記事ページのメタデータにある”twitter:card”を”summary”に指定変更します。ところが、テンプレートのカスタマイズのところには<$OGP$>タグしか書かれていないので、その中にある情報の”twitter:card”の指定だけを”summary”に変更することができません。なので、少し強引ではありますが、<$OGP$>タグの直後に一行追加して、, この状態で一旦テンプレートを保存して、個別記事ページのURLを入れてツイートしたときに自動生成されるサムネイル画像がどのように表示されるか、再度. 今回は、Twitterでツイートしたい画像の自動トリミングが出来なくなったことの詳細と対処法について徹底紹介していきます。 Twitterで画像をツイートしたい場合、自分の好きなサイズや比率に変更する ブログ 2016.02.19 2017.09.19 はっしー. 自分はユーザーのプロフィール画像で使った時は100×100#を使いました。元画像に対して、以下のようにリサイズされます。, 自分は使わなかったですが、「RubyのRMagickで縦横比固定でリサイズしたり切り抜いたり」によると、元画像に対し、どの部分を切り抜くかをxy座標で指定できます。, 「PaperclipでEXIF情報に従って画像を回転させる」にあるように、「スマートフォンから投稿した横向きの写真が縦に表示される」という現象が自分にも起きました。 実際の実装方法は、以下のリンクを参考にしてください！ちょっとコードが汚いかもしれませんがお許しください。 このmultipleのデモや対応ブラウザの確認はココを参考しました。, このページでプレビューのためのコードやデモや対応ブラウザの確認ができます。以下のようになります。, プレビューに関しては、 http://www.itmedia.co.jp/enterprise/articles/1605/06/news047.html この問題を解決するには、画像のEXIF情報を利用して、撮った時のスマホの向きから、画像を回転する必要があります。これは、has_attached_fileに以下のコードを追加すれば解決できます。ちなみに、このorientでスマホの向きと反対に指定できたりします。 ただしstylesでoriginalを指定さえすれば、originalにも向きを正す変換をしてくれます。, 画像ファイルだけ受け付けるようにする場合、「RailsのPaperclipについてまとめてみた」の「3. 　　　　　　　　　　　　　⇩⇩⇩⇩⇩⇩⇩⇩, paperclip+rmagickで困った以下の３つについてまとめます！ :convert_options => { :all => "-auto-orient" }, 「PaperclipでEXIF情報に従って画像を回転させる」には「:allで指定したオプションは全ての:stylesに適用されますが、originalの画像は未加工の状態で保存されます。」とあります。 ちょっと違う書き方もあり、それはココ、 画像投稿を実装するために、自分の技術力の問題もあり、血の涙が何度も出ました 複数画像投稿を複数のフォームで実装する場合、以下のようにします。, ビックリするくらい簡単なのですが、file_field_tag（input type="file"）にmultiple: true(multiple)を追加するだけです。 Help us understand the problem. stylesでoriginalを指定しなくても、originalには元画像が保存されるようになっているのですが、それに対してはこの向きを正す変換をしてくれません。僕はこれで血を見ました。気をつけましょう。 以上の順でまとめていきます。, 画像投稿の機能自体は、以下の２つをを参考に実装しました。 添付ファイルに対するvalidation」を参考に、以下のようなコードにして、アップロードできるファイルを指定してあげましょう。, imageだけという指定方法もあるのですが、それだとsvgファイルも受け付けちゃうので、画像投稿でベクタ形式の画像を投稿するクレイジーな人はいるとは思いませんが、拡張子まで指定しておきましょう。, 資格のオンライン予備校「資格スクエア」, 契約管理サービス「NINJA SIGN」を運営するスタートアップ. ¦å³ã‚¹ã‚¯ãƒ­ãƒ¼ãƒ«ã§ä¸€è¦§ã§ãã¾ã™ã€‚, また、画像の下にある「この画像には誰がいますか」というボタンを押すと、画像にタグ付けができます。フォローしている人の一覧が出てきますので、写真に写っている人を選択していきましょう。, これで完了です。選択した画像が、1ツイート内に全て投稿されました。, 画像の上に並んでいるアカウント名が、先ほどつけたタグです。タッチすると、その人のプロフィール画面に移動します。, 以上、画像の複数投稿機能についての解説でした。画像をよく投稿していた方は、これから楽にできそうですね。, まったりオンラインゲーマー。日々のんびり、ゆっくり、スロー生活。Androidを使って皆さんに普段の生活のちょっとした「困った」「わからない」「めんどくさい」を解消する方法を提供していきたいです。まだまだ若輩者ではありますがどうぞよろしくお願いします。, ※「Google」、「Android」および「Androidロゴ」、「Google Play」は、Google Inc.の商標または登録商標です。