tag:crieit.net,2005:https://crieit.net/tags/VisualStudio2017/feed Crieitでタグ「VisualStudio2017」に投稿された最近の記事 2018-12-17T15:59:10+09:00 https://crieit.net/tags/VisualStudio2017/feed tag:crieit.net,2005:PublicArticle/14671 2018-12-17T15:59:10+09:00 2018-12-17T15:59:10+09:00 https://crieit.net/posts/Visual-Studio-2017-Community-Hello-World <p>こんにちは。</p> <p>仕事で使うことになったので、<br /> ひとまずお決まりのやつやっておきます。</p> <p>ダウンロード<br /> 下記よりダウンロードします。</p> <p><a target="_blank" rel="nofollow noopener" href="https://www.visualstudio.com/ja/downloads/?rr=https%3A%2F%2Fwww.microsoft.com%2Fja-jp%2Fdev%2Fproducts%2Fcommunity.aspx">Visual Studio のダウンロードサイト</a></p> <p><img class="wp-image-471 size-full" src="https://www.doraxdora.com/wp-content/uploads/2017/05/VSCom000.jpg" alt="ダウンロードサイト" width="1010" height="675" /></p> <p>「無償ダウンロード」ボタンをクリックします。</p> <p><img class="size-full wp-image-472" src="https://www.doraxdora.com/wp-content/uploads/2017/05/VSCom001.jpg" alt="ファイル保存ダイアログ" width="448" height="221" /></p> <p>ファイル保存ダイアログが表示されるので、「ファイルを保存」ボタンをクリックします。<br /> インストール<br /> ダウンロードした「vs_community__1162393407.1493355018.exe」を<br /> 管理者として実行します。</p> <p><img class="size-full wp-image-473" src="https://www.doraxdora.com/wp-content/uploads/2017/05/VSCom002.jpg" alt="ライセンス条項同意画面" width="520" height="260" /></p> <p>ライセンス条項同意画面が表示されるので、<br /> 内容を確認したうえで「続行」ボタンをクリックします。</p> <p><img class="size-full wp-image-474" src="https://www.doraxdora.com/wp-content/uploads/2017/05/VSCom003.jpg" alt="コンポーネント選択画面" width="1290" height="720" /></p> <p>必要なコンポーネント（って言い方が正しいかわかりませんが）を選択し<br /> 「インストール」ボタンをクリックします。</p> <p><img class="size-full wp-image-475" src="https://www.doraxdora.com/wp-content/uploads/2017/05/VSCom004.jpg" alt="インストール中" width="1290" height="720" /></p> <p>インストールにしばらく時間がかかります。<br /> （私の環境では30分以上かかりました・・・）</p> <p><img class="size-full wp-image-476" src="https://www.doraxdora.com/wp-content/uploads/2017/05/VSCom005.jpg" alt="インストール完了" width="1290" height="720" /></p> <p>インストールが完了すると、ボタンの表示が「変更」、「起動」に変わります。<br /> ここから起動する必要もないので、閉じてしまいます。<br /> サンプルを作成してみる<br /> VisualStudioの起動<br /> スタートメニューから「Visual Studio 2017 Community」を起動します。</p> <p><img class="size-full wp-image-477" src="https://www.doraxdora.com/wp-content/uploads/2017/05/VSCom006.jpg" alt="起動中" width="460" height="600" /></p> <p><img class="size-full wp-image-478" src="https://www.doraxdora.com/wp-content/uploads/2017/05/VSCom007.jpg" alt="起動準備（初回のみ）" width="464" height="570" /></p> <p><img class="size-full wp-image-455" src="https://www.doraxdora.com/wp-content/uploads/2017/05/VSCom008.jpg" alt="スタートページ" width="1026" height="768" /></p> <p>やっと起動しました。。<br /> プロジェクトの作成<br /> 新規プロジェクトを作成します。</p> <p><img class="size-full wp-image-456" src="https://www.doraxdora.com/wp-content/uploads/2017/05/VSCom009.jpg" alt="新規プロジェクト作成" width="1026" height="768" /></p> <p>上部メニューの「ファイル」＞「新規作成」＞「プロジェクト」を選択します。</p> <p><img class="size-full wp-image-457" src="https://www.doraxdora.com/wp-content/uploads/2017/05/VSCom010.jpg" alt="プロジェクト作成ダイアログ" width="955" height="660" /></p> <pre><code>アプリケーションの種類選択 </code></pre> <p>Windows 上で動作するクライアントアプリケーションを作成するため<br /> 「WPF アプリ」を選択します。<br /> プロジェクト名などの設定<br /> プロジェクト名に「WpfSample」を入力します。<br /> （場所は好きなところを指定してください。）<br /> 作成<br /> 「OK」ボタンをクリックします。</p> <p><img class="size-full wp-image-458" src="https://www.doraxdora.com/wp-content/uploads/2017/05/VSCom011.jpg" alt="プロジェクトトップ" width="1026" height="768" /></p> <p>プロジェクトを作成したら上記のような画面が表示されます。<br /> 各エリアについて</p> <pre><code> エディタエリア </code></pre> <p>ソースコードの編集や、GUIによるコンポーネントの配置などを行います。<br /> XAML編集エリア<br /> 画面の構成を XML で表示されます。直で編集することも可能です。<br /> ソリューションエクスプローラー<br /> プロジェクト構成がツリー形式で表示されます。<br /> ここから画面（ソース）の追加やプロジェクトの設定などが行えます。<br /> プロパティ<br /> 配置されたコンポーネント等を選択することでプロパティが表示され、編集することができます。</p> <p>コンポーネントの配置<br /> 画面にラベルを配置します。</p> <p><img class="size-full wp-image-459" src="https://www.doraxdora.com/wp-content/uploads/2017/05/VSCom012.jpg" alt="ツールボックス" width="1392" height="962" /></p> <p>左側に格納されている「ツールボックス」を開きます。</p> <p><img class="size-full wp-image-460" src="https://www.doraxdora.com/wp-content/uploads/2017/05/VSCom013.jpg" alt="ツールボックス全体" width="275" height="1202" /></p> <p><img class="size-full wp-image-461" src="https://www.doraxdora.com/wp-content/uploads/2017/05/VSCom014.jpg" alt="ラベルの選択" width="1392" height="962" /></p> <p>ツールボックスから「Label」を選択します。</p> <p><img class="size-full wp-image-462" src="https://www.doraxdora.com/wp-content/uploads/2017/05/VSCom015.jpg" alt="ラベルの配置" width="997" height="617" /></p> <p>ドラッグアンドドロップで、画面に「Label」を配置します。</p> <p><img class="size-full wp-image-463" src="https://www.doraxdora.com/wp-content/uploads/2017/05/VSCom016.jpg" alt="プロパティの編集" width="1392" height="962" /></p> <p>配置した「Label」を選択し、表示内容を「Hello World!」に変更します。<br /> ビルド<br /> ビルドを実行し、「アプリケーション」を作成します。</p> <p><img class="size-full wp-image-464" src="https://www.doraxdora.com/wp-content/uploads/2017/05/VSCom017.jpg" alt="ソリューションのリビルド" width="1392" height="962" /></p> <p>上部メニューの「ビルド」＞「ソリューションのリビルド」を選択します。</p> <p><img class="size-full wp-image-465" src="https://www.doraxdora.com/wp-content/uploads/2017/05/VSCom018.jpg" alt="出力の確認" width="1392" height="962" /></p> <p>下部に表示される「出力」エリアに、特にエラーが表示されなければビルドは正常に完了です。<br /> アプリケーションの起動<br /> <img class="size-full wp-image-466" src="https://www.doraxdora.com/wp-content/uploads/2017/05/VSCom019.jpg" alt="開始ボタン" width="1392" height="962" /></p> <p>画面上部の「開始」ボタンをクリックします。</p> <p><img class="wp-image-467 size-full" src="https://www.doraxdora.com/wp-content/uploads/2017/05/VSCom020.jpg" alt="アプリケーション画面" width="525" height="350" /></p> <p>無事に画面が立ち上がれば完了です。<br /> と思ったらデバッグ用のメニューが表示されています・・。</p> <p>アプリケーション開発時に役に立つものですが、<br /> 一応表示されないケースもやっておきます。</p> <p><img class="size-full wp-image-468" src="https://www.doraxdora.com/wp-content/uploads/2017/05/VSCom021.jpg" alt="構成を変更" width="1392" height="962" /></p> <p>上部メニューに「Debug」と表示されている箇所があるので、<br /> 「Release」に変更します。</p> <p><img class="size-full wp-image-469" src="https://www.doraxdora.com/wp-content/uploads/2017/05/VSCom022.jpg" alt="アプリケーションの起動" width="1392" height="962" /></p> <p>ついでに、「Label」の位置を変更し、再度「開始」ボタンをクリックします。</p> <p><img class="size-full wp-image-470" src="https://www.doraxdora.com/wp-content/uploads/2017/05/VSCom023.jpg" alt="アプリケーション（デバッグじゃない方）起動" width="525" height="350" /></p> <p>今度はデバッグ用メニューが表示されていませんね。<br /> ひとまずこれで完了です。<br /> まとめ<br /> Visual Studio 2017 は無償で利用でき、<br /> 且つ AndroidやiOS向けのアプリまで開発できる優れものです。</p> <p>これから開発をしてみたいという方にもお勧めですので是非インストールして<br /> 色々と試してみてください。</p> <p>ではでは。</p> doraxdora