Download to read offline
![Who?
福地 雅之 [Masayuki FUKUCHI]
仙台市泉区在住
勤務先：グレープシティ株式会社(泉区紫山)
タガヤス歴
– 2017年9月：発足
タガヤス その1 開催
以降「その１２」まで、冒頭の趣旨説明を担当
– 2018年1月：タガヤス その3 を主催
「Xamarinを学んでみよう」
– 2018年9月：タガヤス その7 を主催
「クロスプラットフォームアプリ開発を学ぶ」](https://image.slidesharecdn.com/tagayas12knowlageio20190725-190726002928/85/Visual-Studio-Code-2-320.jpg)
More Related Content
![[2014/11/15] めとべや東京 #6 / ユニバーサル Windows アプリの勘所](https://cdn.slidesharecdn.com/ss_thumbnails/141115metbeyattanaka-141202011309-conversion-gate01-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to 日常使っているツールを調べる ー Visual Studio Code について ー
![俺とMacとアダルトビデオ[社外版]](https://cdn.slidesharecdn.com/ss_thumbnails/mac-130321213206-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
![[GrapeCity Web TECH FORUM 2018]レガシーからの移行 - 株式会社日本プロテック](https://cdn.slidesharecdn.com/ss_thumbnails/grapecitywebtechforum2018npc-181226045503-thumbnail.jpg?width=640&height=640&fit=bounds)
![[GrapeCity Web TECH FORUM 2018]グレープシティJavaScript製品のご紹介 活用のコツと開発のポイント](https://cdn.slidesharecdn.com/ss_thumbnails/grapecity-webtechforum20181207-181225045631-thumbnail.jpg?width=640&height=640&fit=bounds)
日常使っているツールを調べる ー Visual Studio Code について ー
- 1.
- 2. Who? 福地 雅之 [MasayukiFUKUCHI] 仙台市泉区在住 勤務先：グレープシティ株式会社(泉区紫山) タガヤス歴 – 2017年9月：発足 タガヤス その1 開催 以降「その１２」まで、冒頭の趣旨説明を担当 – 2018年1月：タガヤス その3 を主催 「Xamarinを学んでみよう」 – 2018年9月：タガヤス その7 を主催 「クロスプラットフォームアプリ開発を学ぶ」
- 3.
- 4.
- 5.
- 6.
- 7. Visual Studio Code（VSCode）を愛用 • 日常で利用 • 小技で改造 • 機能を拡張 プログラミング Git デバッグ 正規表現 拡大/縮小 … etc 詳しい情報は「ようこそ」から
- 8. 日常： Markdownで文書作成 1. VSCodeで文書作成 プレーンテキストで記述 2. プレビューで確認 拡張機能（Auto-Open Markdown Preview）を利用 3. Wordファイル形式に変換 拡張機能（vscode-pandoc）を利用 作成した文章は必要に応じてWordで編集、PDF変換
- 9.
- 10. Electron ベース • フレームワーク Web技術（HTML、JavaScript、CSS） でデスクトップアプリケーションを開発 •マルチプラットフォーム • Windows、Linux、macOSで動作 • Chromium + Node.jsが動作環境 https://electronjs.org/
- 11. Electronを使ってみる(※要 Node.js) 1. フォルダ&プロジェクトの作成 npminit –y 「package.json」が作成される 2. Electronのインストール npm install electron -g 3. エントリポイント（index.js）の作成 4. レンダリング部分（index.html） の作成 5. 実行 electron .
- 12. Electronを使ってみる(※要 Node.js) • index.js //Electronを使用 const { app, BrowserWindow} = require('electron’); // レンダリング部分の作成 function createWindow() { let mainWindow = new BrowserWindow({ width: 800, height: 600 }); mainWindow.loadFile(‘index.html’); } // ウィンドウで表示 app.on('ready', createWindow); • index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Electron</title> </head> <body> <h1>Electronで作ったウィンドウ</h1> </body> </html>
- 13. 小技： カスタマイズ 1. 設定ファイル（settings.json）を変更 フォルダごとに「.vscode」フォルダを作成して配置できる 2.ファイルのコードを直接変更またはエディタ画面から 例：画面の配色を変更 // ウィンドウまわりの配色変更 // settings.json に記述する内容 { "workbench.colorCustomizations": { "editor.background": "#e0e0e0", "activityBar.background": "#378d3b", "activityBar.foreground": "#e7e7e7", "titleBar.activeBackground": "#29682c", "titleBar.activeForeground": "#e7e7e7", "statusBar.background": "#29682c", "statusBar.foreground": "#e7e7e7" } }
- 14.
- 15. 拡張機能： 配色の変更 • 配色テーマを設定 拡張機能（Peacock ）を利用 規定の色の他に追加で色を指定 コマンドから選択した色は、 フォルダのｓettings.jsonに保存 利用例 案件ごとにエディタを色分けして わかりやすく
- 16. 拡張機能：Excelデータを表示 • エディタにExcel、CSVファイルを読み込んで表示する 拡張機能（Excel Viewer） 1.CSVファイルを選択（通常表示） 2. コンテキストメニューから「Open Preview」 3. データグリッド表示 4. ソートやフィルタの操作が可能 参考 『Visual Studio Codeで、ExcelやCSVデータを見やすく表示する － GrapeCity.devlog』
- 17. まとめ • Visual StudioCodeは日常ツール • 設定と拡張で利用幅が拡大できる • 他の人の使い方が参考になり、ネタの宝庫
- 18.
- 19.