translate sections/windows/windows.html

Author: LeeDDHH

sections/windows/windows.html

@@ -4,35 +4,42 @@
       <div class="section-wrapper">
         <h1>
           <svg class="section-icon"><use xlink:href="assets/img/icons.svg#icon-windows"></use></svg>
-          Create and Manage Windows
+          ウィンドウの作成と管理
         </h1>
-        <h3>The <code>BrowserWindow</code> module in Electron allows you to create a new browser window or manage an existing one.</h3>
+        <h3>Electronの <code>BrowserWindow</code> モジュールを使うことで、新しいブラウザーウィンドウを作成や既存のウィンドウを管理ができます。</h3>
 
-        <p>Each browser window is a separate process, known as the renderer process. This process, like the main process that controls the life cycle of the app, has full access to the Node.js APIs.
+        <p>各ブラウザーウィンドウはレンダラープロセスと呼ばれる個別のプロセスです。<br>
+            このプロセスは、アプリのライフサイクルを制御するメインプロセスと同様に、Node.js APIへフルアクセスできます。
+        </p>
 
-        <p>Open the <a href="http://electron.atom.io/docs/api/browser-window">full API documentation<span class="u-visible-to-screen-reader">(opens in new window)</span></a> in your browser.</p>
+        <p>ブラウザで<a href="http://electron.atom.io/docs/api/browser-window">APIドキュメント<span class="u-visible-to-screen-reader">(新しいウィンドウが開きます。)</span></a>を開きます。</p>
       </div>
     </header>
 
     <div class="demo">
       <div class="demo-wrapper">
-        <button id="new-window-demo-toggle" class="js-container-target demo-toggle-button">Create a new window
+        <button id="new-window-demo-toggle" class="js-container-target demo-toggle-button">新しいウィンドウの作成
           <div class="demo-meta u-avoid-clicks">Supports: Win, macOS, Linux <span class="demo-meta-divider">|</span> Process: Main</div>
         </button>
         <div class="demo-box">
           <div class="demo-controls">
             <button class="demo-button" id="new-window">View Demo</button>
           </div>
-          <p>The <code>BrowserWindow</code> module gives you the ability to create new windows in your app. This main process module can be used from the renderer process with the <code>remote</code> module, as is shown in this demo.</p>
+          <p><code>BrowserWindow</code> モジュールを使用することで、新しいウィンドウが作成できます。<br>
+            デモのように、メインプロセスモジュールは <code>remote</code> モジュールでレンダラープロセスから使用できます。
+          </p>
 
-          <p>There are a lot of options when creating a new window. A few are in this demo, but visit the <a href="http://electron.atom.io/docs/api/browser-window">documentation<span class="u-visible-to-screen-reader">(opens in new window)</span></a> for the full list.</p>
-          <h5>Renderer Process</h5>
+          <p>ウィンドウ作成時に利用できるオプションがあります。<br>
+            デモで使われているオプション以外に関しては<a href="http://electron.atom.io/docs/api/browser-window">ドキュメント<span class="u-visible-to-screen-reader">(新しいウィンドウが開きます。)</span></a>からご覧ください
+          </p>
+          <h5>レンダラープロセス</h5>
           <pre><code data-path="renderer-process/windows/create-window.js"></code></pre>
 
           <div class="demo-protip">
             <h2>ProTip</h2>
-            <strong>Use an invisible browser window to run background tasks.</strong>
-            <p>You can set a new browser window to not be shown (be invisible) in order to use that additional renderer process as a kind of new thread in which to run JavaScript in the background of your app. You do this by setting the <code>show</code> property to <code>false</code> when defining the new window.</p>
+            <strong>バックグラウンドタスクを実行するには、非表示のウィンドウを使用します。</strong>
+            <p>アプリのバックグラウンドでJavaScriptを実行する一種の新しいスレッドとして追加のレンダラープロセスを使用するために、新しいウィンドウを非表示に設定できます。<br>
+                <code>show</code>プロパティを<code>false</code>にすることで作成できます。</p>
             <pre>
 <code class="language-js">var win = new BrowserWindow({
   width: 400, height: 225, show: false
@@ -44,67 +51,73 @@ <h2>ProTip</h2>
 
     <div class="demo">
       <div class="demo-wrapper">
-        <button id="manage-window-demo-toggle" class="js-container-target demo-toggle-button">Manage window state
+        <button id="manage-window-demo-toggle" class="js-container-target demo-toggle-button">ウィンドウの状態を管理
           <div class="demo-meta u-avoid-clicks">Supports: Win, macOS, Linux <span class="demo-meta-divider">|</span> Process: Main</div>
         </button>
         <div class="demo-box">
           <div class="demo-controls">
             <button class="demo-button" id="manage-window">View Demo</button>
             <span class="demo-response" id="manage-window-reply"></span>
           </div>
-           <p>In this demo we create a new window and listen for <code>move</code> and <code>resize</code> events on it. Click the demo button, change the new window and see the dimensions and position update here, above.</p>
-          <p>There are a lot of methods for controlling the state of the window such as the size, location, and focus status as well as events to listen to for window changes. Visit the <a href="http://electron.atom.io/docs/api/browser-window">documentation<span class="u-visible-to-screen-reader">(opens in new window)</span></a> for the full list.</p>
-          <h5>Renderer Process</h5>
+           <p>このデモでは、新しいウィンドウを作成し、ウィンドウの<code>move</code>と<code>resize</code>イベントリスナーを使用します。<br>
+            デモボタンをクリックし、新しいウィンドウの大きさや位置を変えることで更新状態を確認してください。
+          　</p>
+          <p>サイズ、位置、フォーカス、ウィンドウ変更のイベントリスナーなど、ウィンドウの状態を制御するためのメソッドがあります。<br>
+            詳しくは、<a href="http://electron.atom.io/docs/api/browser-window">ドキュメント<span class="u-visible-to-screen-reader">(新しいウィンドウが開きます。)</span></a>からご覧ください。</p>
+          <h5>レンダラープロセス</h5>
           <pre><code data-path="renderer-process/windows/manage-window.js"></code></pre>
         </div>
       </div>
     </div>
 
     <div class="demo">
       <div class="demo-wrapper">
-        <button id="using-window-events-demo-toggle" class="js-container-target demo-toggle-button">Window events: blur and focus
+        <button id="using-window-events-demo-toggle" class="js-container-target demo-toggle-button">ウィンドウイベント:blurとfocus
           <div class="demo-meta u-avoid-clicks">Supports: Win, macOS, Linux <span class="demo-meta-divider">|</span> Process: Main</div>
         </button>
         <div class="demo-box">
           <div class="demo-controls">
             <button class="demo-button" id="listen-to-window">View Demo</button>
             <button  class="demo-button disappear" id="focus-on-modal-window">Focus on Demo</button>
           </div>
-          <p>In this demo, we create a new window and listen for <code>blur</code> event on it. Click the demo button to create a new modal window, and switch focus back to the parent window by clicking on it. You can click the <i>Focus on Demo</i> button to switch focus to the modal window again.</p>
-          <h5>Renderer Process</h5>
+          <p>
+            このデモでは、新しいウィンドウを作成し、<code>blur</code>イベントリスナーを使用します。<br>
+            デモボタンをクリックして新しいウィンドウを作成し、親ウィンドウをクリックしてフォーカスを戻します。<br>
+            <i>Focus on Demo</i>ボタンをクリックして、生成したウィンドウに再びフォーカスを切り替えることができます。
+          </p>
+          <h5>レンダラープロセス</h5>
           <pre><code data-path="renderer-process/windows/using-window-events.js"></code></pre>
         </div>
       </div>
     </div>
 
     <div class="demo">
       <div class="demo-wrapper">
-        <button class="js-container-target demo-toggle-button">Create a frameless window
+        <button class="js-container-target demo-toggle-button">フレームレスウィンドウの作成
           <div class="demo-meta u-avoid-clicks">Supports: Win, macOS, Linux <span class="demo-meta-divider">|</span> Process: Main</div>
         </button>
         <div class="demo-box">
           <div class="demo-controls">
             <button class="demo-button" id="frameless-window">View Demo</button>
           </div>
           <p>
-            A frameless window is a window that has no <a href="https://developer.mozilla.org/en-US/docs/Glossary/Chrome">"chrome"</a>,
-            such as toolbars, title bars, status bars, borders, etc. You can make a browser window frameless by setting
-            <code>frame</code> to <code>false</code> when creating the window.
+            フレームレスウィンドウとは、ツールバー、タイトルバー、ステータスバー、境界線など、<a href="https://developer.mozilla.org/ja/docs/Glossary/Chrome">「chrome」(クロム)</a>のないウィンドウです。<br>
+            ウィンドウを作成するときに<code>frame</code>を<code>false</code>に設定することで、ウィンドウをフレームレスにすることができます。
           </p>
 
-          <h5>Renderer Process</h5>
+          <h5>レンダラープロセス</h5>
           <pre><code data-path="renderer-process/windows/frameless-window.js"></code></pre>
 
-          <p>Windows can have a transparent background, too. By setting the <code>transparent</code> option to <code>true</code>, you can also make your frameless window transparent:</p>
+          <p>ウィンドウの背景も透明にすることができます。<br>
+            <code>transparent</code>オプションを<code>true</code>に設定することで、フレームレスウィンドウを透明にすることもできます。
+          </p>
           <pre>
 <code class="language-js">var win = new BrowserWindow({
   transparent: true,
   frame: false
 })</code></pre>
 
-        <p>
-          For more details, see the <a href="http://electron.atom.io/docs/api/frameless-window/">Frameless Window</a> documentation.
-        </p>
+        <p>詳しくは、<a href="http://electron.atom.io/docs/api/frameless-window/">フレームレスウィンドウ</a>ドキュメントからご覧ください。</p>
 
         </div>
       </div>