Merge pull request #721 from urimaro/translate-create-picture-thumbnails

「CarrierWave を使って画像をリサイズしよう」を更新する

_pages/thumbnails.md

@@ -1,109 +1,114 @@
 ---
 layout: main_guide
-title: アイデア一覧を表示したときにサムネイル表示してみよう
+title: 画像のサムネイルを作ってみよう
+description: "サムネイル(アップロードした画像の縮小版)を作ることで、画像のアップロード機能を最適化しましょう。"
 permalink: thumbnails
 ---
 
-# CarrierWave を使ってサムネイルを作ってみよう
+# 画像のサムネイルを作ってみよう
 
-*Created by Miha Filej, [@mfilej](https://twitter.com/mfilej), Translated by Hiroshi SHIBATA*
+*Created by Miha Filej, [@mfilej](https://twitter.com/mfilej), Translated by Hiroshi SHIBATA [@hsbt](http://twitter.com/hsbt), Goh Matsumoto [@urimaro](http://twitter.com/urimaro)*
 
 {% include main-guide-intro.html %}
 
-The Internet is all about speed. The faster your page loads, the less likely people are to click away. And we want people to stick around to share our great ideas with our ideas app! Also, people with data plans visiting your website will thank you for requiring less data to be transmitted.
+インターネットはスピードがすべてです。ページが読み込まれるスピードが速ければ速いほど、ページから離れていく人は少なくなります。そして、私たちはアイデアアプリで素晴らしいアイデアを共有したいので、人々に留まっていてほしいと考えています！また、データの転送量が少なくて済むと、データプランを契約している訪問してくれた人たちから感謝されると思います。
 
-One way to speed up page loads is by displaying images in a smaller size. The smaller an image is, the fast it will be transmitted over the Internet.
+ページの読み込みを速くする方法の1つは、小さいサイズの画像を表示することです。画像のサイズが小さければ小さいほど、インターネット上の転送速度は速くなります。
 
-## Install ImageMagick
+## ImageMagick をインストールしよう
 
-We'll be using the ImageMagick tool to resize the pictures uploaded to your ideas.
+アイデアにアップロードした画像のサイズを変更するために ImageMagick を使います。
 
 <div class="os-specific">
   <div class="mac">
-<p>Run the following command in the Terminal app:</p>
+<p>ターミナルで次のコマンドを実行してください:</p>
 {% highlight sh %}
 brew install imagemagick
 {% endhighlight %}
   </div>
   <div class="nix">
-<p>If you are on Ubuntu, run the following command in the Terminal app:</p>
+<p>Ubuntu を使っている場合、ターミナルで次のコマンドを実行してください:</p>
 {% highlight sh %}
 sudo apt-get install imagemagick
 {% endhighlight %}
   </div>
   <div class="win">
-<p>Download and run the <a href="https://www.imagemagick.org/script/download.php#windows">ImageMagick installer</a> (use the first <em>download</em> link). In the installation wizard, make sure you check the checkbox to install legacy binaries.</p>
+<p><a href="https://www.imagemagick.org/script/download.php#windows">ImageMagick のインストーラー</a> をダウンロードし(最初の <em>download</em> リンクをクリックしてください)、実行してください。インストーラーのウィザードで「Install legacy utilities」のチェックボックスをチェックしてください。</p>
   </div>
 </div>
 
 {% coach %}
-Explain what is ImageMagick and how is it different from libraries/gems we used before?
+ImageMagick とは何か、以前使ったライブラリや gem とどう違うのかを説明してください。
 {% endcoach %}
 
-## Install a Ruby gem for ImageMagick
+## ImageMagick 用の Ruby gem をインストールしよう
 
-For Ruby to talk with ImageMagick, we'll be using the `mini_magick` Ruby gem. First we will need to add it to our app and install it.
+Ruby が ImageMagick とやり取りできるようにするために、Ruby gem `mini_magick` を使います。まずアプリに追加してインストールする必要があります。
 
-Open `Gemfile` in your Text Editor and add this line:
+`Gemfile` をテキストエディタで開き、この行を追加してください:
 
 {% highlight ruby %}
 gem "mini_magick"
 {% endhighlight %}
 
-below the line:
+以下の行の下です:
 
 {% highlight ruby %}
 gem "carrierwave"
 {% endhighlight %}
 
-In the Terminal app run this command:
+ターミナルでこのコマンドを実行してください:
 
 {% highlight sh %}
 bundle install
 {% endhighlight %}
 
-Make sure to (re)start your Rails server after installation.
+インストール後、Rails サーバーを(再)起動してください。
 
-## *2.*画像をアップロードした時にサムネイルを作成しよう
+## サムネイルを作成するようアプリに指示しよう
+
+これで Ruby gem `mini_magick` を通して ImageMagick とやり取りできるようになったので、ファイルをアップロードするための gem `carrierwave` にアップロードする画像ごとにサムネイルを作るように指示できます。
 
 `app/uploaders/picture_uploader.rb` を開いて、以下の行を探しましょう。
 
 {% highlight ruby %}
-  # include CarrierWave::MiniMagick
+# include CarrierWave::MiniMagick
 {% endhighlight %}
 
-上の行の `#` を削除します。
+行の先頭にある `#` を削除します。
 
 {% coach %}
-コード上のコメントの用途やどのような時に使うかを説明しましょう
+コード上のコメントの用途やどのような時に使うかを説明してください。
 {% endcoach %}
 
-削除した場所のすぐ下に以下を追加します。
+今変更した行の下に以下を追加します。
 
 {% highlight ruby %}
 version :thumb do
-  process :resize_to_fill => [50, 50]
+  process :resize_to_fit => [150, 150]
 end
 {% endhighlight %}
 
-これで画像をアップロードするとリサイズするようになりました。しかし、もうアップロード済みの画像は変更されません。もう一度 idea を編集して画像をアップロードし直してください。
+これからアップロードされる画像は小さいサイズにリサイズされますが、すでにアップロードされた画像は変更されません。もう一度アイデアを編集して新しい画像を追加してください。保存するとアップロードした画像のサムネイルがアイデアに表示されます。
+
+## サムネイルを表示してみよう
 
-## *3.*サムネイルを表示してみよう
+アイデアの画像の表示方法は変えていないので、まだ元の大きな画像が表示されるはずです。ビューを変更してサムネイルを表示するように変えてみましょう。
 
-`app/views/ideas/index.html.erb` を開いて、もし画像がアップロードされていればリサイズした画像を表示するようにしましょう。
+`app/views/ideas/index.html.erb` を開いて、以下の行を変更してください:
 
 {% highlight erb %}
-<%= image_tag idea.picture_url, width: '100%' if idea.picture.present? %>
+<%= image_tag(@idea.picture_url, width: 150, height: 150, class: "img-thumbnail flex-shrink-0") if @idea.picture? %>
 {% endhighlight %}
 
-を下のように変更します。
+このように変更します。
 
 {% highlight erb %}
-<%= image_tag idea.picture_url(:thumb) if idea.picture.present? %>
+<%= image_tag(@idea.picture_url(:thumb), width: 150, height: 150, class: "img-thumbnail flex-shrink-0") if @idea.picture? %>
 {% endhighlight %}
 
-これで、idea の一覧を開いた時にサムネイルが表示されるようになりました。
+サムネイルが表示されるようになったことを確かめるために、ブラウザで [アイデアの一覧](http://localhost:3000/ideas) を表示してください。
 
 {% coach %}
-Explain what specifying the image width in HTML and how it differs from resizing images on the server. Both images may look small, but only one is resized as a thumbnail.
+HTMLで画像の幅を指定することとサーバで画像をリサイズすることの違いを説明してください。どちらも小さく見えると思いますが、サムネイルとしてリサイズされるのは片方だけです。
 {% endcoach %}

index.html

@@ -139,7 +139,7 @@ <h3>あなたのアプリにコメント出来るようにしましょう</h3>
   <li>
     <a href="thumbnails">
       <span class="guide-icon" data-icon="13"></span>
-      <h3>CarrierWave を使って画像をリサイズしよう</h3>
+      <h3>画像のサムネイルを作ってみよう</h3>
     </a>
     <p>CarrierWave を使って画像をリサイズする方法を紹介します</p>
   </li>