![Who?
福地 雅之 [Masayuki FUKUCHI]
仙台市泉区在住
勤務先：グレープシティ株式会社(泉区紫山)
タガヤス歴
– 2017年9月：発足
タガヤス その1 開催
以降「その１２」まで、冒頭の趣旨説明を担当
– 2018年1月：タガヤス その3 を主催
「Xamarinを学んでみよう」
– 2018年9月：タガヤス その7 を主催
「クロスプラットフォームアプリ開発を学ぶ」](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommended
More Related Content
What's hot
What's hot (20)
Similar to 日常使っているツールを調べる ー Visual Studio Code について ー
Similar to 日常使っているツールを調べる ー Visual Studio Code について ー (20)
More from Developer Solutions事業部 メシウス株式会社 （旧グレープシティ株式会社）
More from Developer Solutions事業部 メシウス株式会社 （旧グレープシティ株式会社） (20)
Recently uploaded
Recently uploaded (10)
日常使っているツールを調べる ー Visual Studio Code について ー
- 2. Who? 福地 雅之 [Masayuki FUKUCHI] 仙台市泉区在住 勤務先：グレープシティ株式会社(泉区紫山) タガヤス歴 – 2017年9月：発足 タガヤス その1 開催 以降「その１２」まで、冒頭の趣旨説明を担当 – 2018年1月：タガヤス その3 を主催 「Xamarinを学んでみよう」 – 2018年9月：タガヤス その7 を主催 「クロスプラットフォームアプリ開発を学ぶ」
- 7. Visual Studio Code（VS Code）を愛用 • 日常で利用 • 小技で改造 • 機能を拡張 プログラミング Git デバッグ 正規表現 拡大/縮小 … etc 詳しい情報は「ようこそ」から
- 8. 日常： Markdownで文書作成 1. VS Codeで文書作成 プレーンテキストで記述 2. プレビューで確認 拡張機能（Auto-Open Markdown Preview）を利用 3. Wordファイル形式に変換 拡張機能（vscode-pandoc）を利用 作成した文章は必要に応じてWordで編集、PDF変換
- 10. Electron ベース • フレームワーク Web技術（HTML、JavaScript、CSS） でデスクトップアプリケーションを開発 • マルチプラットフォーム • Windows、Linux、macOSで動作 • Chromium + Node.jsが動作環境 https://electronjs.org/
- 11. Electronを使ってみる(※要 Node.js) 1. フォルダ&プロジェクトの作成 npm init –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" } }
- 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 Studio Codeは日常ツール • 設定と拡張で利用幅が拡大できる • 他の人の使い方が参考になり、ネタの宝庫