Gitpodを使ってみた

どうも、もりもりです。

先日iPadを手に入れたのでSidecarについての紹介をしましたが
せっかくなので色々と使いたいなと思ってます。

で、iPadでコーディングできんものかと思い
以前なにかのニュース記事かQiitaか忘れてしまいましたが
「Coder」というブラウザでVS Codeを動かせるサービスがあるのを
思い出してさっそく使ってみようといろいろと調べ始めました。

が、しかし！！！

1年以上前（2019.04以前）の記事だと使えるという情報はあったのですが
2019.05以降ではサインアップができないようで
自分でクラウド環境を用意してホストしてやればOKなようです！

いやいや、もりもりはとりあえずすぐに使ってみたいのよ～

ってことで、いろいろ調べていると
2020.03.31にEclipse Foundationからリリースされた
「Eclipse Theia 1.0」というものがあるらしい！


前置き長かったね～

さーせん。

Eclipse Theia

デスクトップとブラウザで動作するOSSのIDEです。
TypeScriptで実装されているそうです。

またなんといっても、コード補完やターミナル使用
プラグインでの拡張と、VS Codeにそっくりなようです！

が、ここでTheiaについて調べているとお恥ずかしながら
Gitpodというワードを初めて知りました。。。
なのでまずはGitpodなるものを使ってみようと！

Gitpodの使い方

とりあえずGitpodを使ってみようということでまずはPCでお試し。
（iPadちゃうんか～いって？さーせん、後ほどｗ）
下記のChrome拡張機能を追加します。


すると「Gitpod」ボタンが現れます。

さっそくポチっと。

するとブラウザ上にVS Codeのような画面が。
てかVS Codeやん。

次に、拡張機能を入れましょう。

下記からダウンロードしてブラウザ上にDrag & DropするだけでOK。


KotlinはなかったのでVisual StudioのMarketplaceからダウンロードしました。


おぉ～シンタックスハイライトも効いてくれましたね！

iPadでの使用方法

ブラウザを立ち上げてGitHubのリポジトリへ。

そのURLの頭に「https://gitpod.io/#」を付加してやればOKです！


これで今会社で勉強がてら作ってるPythonのWebアプリも
いつでもどこでも触れちゃうようになりますなぁ～

うん、ステキ！！！


ちなみにFreeプランですとPublicReposは50h/月使用可能で
PrivateReposは30日のトライアルだそうです。

以上、もりもりでした～

vscode #02 : 便利機能

どうも、もりもりです。

今回はVS Codeの便利機能 第二弾です。
マークダウンのテーブル作成をラクにしてくれる拡張機能の紹介です。

※第一弾はコチラ

VS Codeは「.md」ファイルであれば標準の機能で

「Ctrl + K, V」とコマンドを打つとマークダウンのプレビューを表示してくれます。

が、テーブル作成の支援まではしてくれません。

そこで紹介するのが「Text Tables」です。

|Col1|Col2|Col3| |---|---|---| |item01|item002|item3| |item004|item5|item0006|

まぁこれでも全然問題なく表示されますが、メンテしたりコピペで使いまわそうとすると少し見にくいです。

「Text Tables」を使えば下記のようにキレイに整形してくれます。

| Col1    | Col2    | Col3     | | ------- | ------- | -------- | | item01  | item002 | item3    | | item004 | item5   | item0006 |

使い方

１．下記どちらかの方法でファイルをマークダウンと認識させる

　　・「.md」で保存する

　　・「Ctrl + K, M」で「Markdown」を選択

２．「Ctrl + Q」＆「Ctrl + Q」でTable ModeをOnにする

　　Ctrlを押しながらQを2回クリックでOK

３．タイトル行を入力しTabキーをクリック

　　タイトルの下に自動で行が追加される

| Col1 | Col2 | Col3 | | | | |

４．追加された2行目の1列目に「-」と入力してEnterキーをクリック

　　ヘッダとデータ部の境目（2行目）を自動で作成してくれる

| Col1 | Col2 | Col3 | | ---- | ---- | ---- | | | | |

５．データを3行目以降から入力していく

　　データを入力し、TabキーやEnterキーをクリックすると幅を自動調整してくれる

| Col1    | Col2    | Col3     | | ------- | ------- | -------- | | item01  | item002 | item3    | | item004 | item5   | item0006 |

なかなか便利な拡張機能です。
ブログや仕様書などをマークダウンで作成されてる方にはオススメです。

vscode #01 : 便利機能

どうも、もりもりです。

最近 VS Code が便利すぎてよく使ってます。

7月末には64bit版もリリースされました。
またファイルサイズの制限が50MBから無制限となったので
デカいログファイルも読み込めるようになりました。

アップデート情報は下記で確認できます。
https://code.visualstudio.com/updates/v1_16

あとは印刷できるようになればよいのですが。。。

よく使うショートカット

キー	動作
Ctrl + ,	ユーザー設定を開く
Ctrl + F	ファイル内検索
Ctrl + H	ファイル内置換
Ctrl + Shift + F	フォルダを指定して検索
Ctrl + K, M	言語の選択 ※IMEが半角モードになっていること
Ctrl + Shift + P	コマンドパレットを表示
Ctrl + R	履歴からファイルを開く
Ctrl + Space	サジェストを表示
Shift + Alt + 選択	矩形選択

SQL関連

キー	動作
Ctrl + Shift + C	DB接続先の表示 ※表示中ファイルの言語モードが「sql」の場合く
Ctrl + Shift + E	SQL実行

よく使う拡張機能

・mssql
　　・SQL Serverに接続できる

・Excel Viewer
　　・CSVを表形式で表示できる
　　・並び替え可能
　　・フィルタリング可能

・EvilInspector
　　・全角スペースを強調してくれる

mssql

＜DBの接続設定を保存する＞

１．「Ctrl + N」で新規ファイル作成
２．「Ctrl + K, M」で「sql」と入力し「SQL」を選択
３．「Ctrl + Shift + C」で「Create Connection Profile」を選択
４．指示通りにサーバ名、DB名、認証方式、ユーザ名、パスワード等を順に入力してEnter


＜接続設定保存済みのDBにアクセスする＞

１．「Ctrl + N」で新規ファイル作成
２．「Ctrl + K, M」で「sql」と入力し「SQL」を選択
３．「Ctrl + Shift + C」で保存済みの接続設定を選択


＜テーブルからデータを取得＞

１．上記の各手順１で作成したファイルにSELECT文を記述
２．「Ctrl + Shift + E」でSQLを実行

Excel Viewer

１．CSVをVS Codeで開く
２．「Ctrl + Shift + P」でコマンドパレットを開く
３．「csv」と入力
４．「CSV: Open Preview」を選択

設定（settings.json）

VS Codeの設定の一部ですが、こんな感じで使ってます。

{ "editor.minimap.enabled": true, "editor.fontSize": 12, "editor.renderWhitespace": "boundary", "files.defaultLanguage": "csharp", "files.associations": { "*.txt": "csharp", "*.log": "csharp" }, "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe", "mssql.connections": [ { "server": "xxxx", "database": "xxxx", "authenticationType": "SqlLogin", "user": "xxxx", "password": "", "emptyPasswordInput": false, "savePassword": true }, { "server": "xxxx", "database": "xxxx", "authenticationType": "SqlLogin", "user": "xxxx", "password": "", "emptyPasswordInput": false, "savePassword": true } ] }

便利な拡張機能などがあれば随時アップしていきます。

それではまた。

Go言語 ～環境構築（on Windows）～

どうも

ひさびさのもりもりです。

先日、社内の会議で「バイリンガルになるべし」というお話がありました。
バイリンガルといっても、話す言語ではなく、プログラミング言語です。

一つの言語を習得すれば、その他言語にもとっつきやすいでしょう。
しか～し、それでも時間はかかると思います。

なので、少しでも時間があるうちにいろいろと触れておこうかと。

ということで、最近少しずつ盛り上がってきているGo言語を始めてみようと思います。

まずは環境の構築を。

Go環境の構築

下記を入れます。
　　１．Visual Studio Code
　　　　https://www.microsoft.com/ja-jp/dev/products/code-vs.aspx

　　２．Git
　　　　https://git-for-windows.github.io/

　　３．Go
　　　　https://golang.org/

VS Codeに必要なパッケージをインストール

cmdに下記を貼り付け。

go get -u -v github.com/nsf/gocode go get -u -v github.com/rogpeppe/godef go get -u -v github.com/zmb3/gogetdoc go get -u -v github.com/golang/lint/golint go get -u -v github.com/lukehoban/go-outline go get -u -v sourcegraph.com/sqs/goreturns go get -u -v golang.org/x/tools/cmd/gorename go get -u -v github.com/tpng/gopkgs go get -u -v github.com/newhook/go-symbols go get -u -v golang.org/x/tools/cmd/guru go get -u -v github.com/cweill/gotests/...

ですが、さっそくエラー。。。

warning: GOPATH set to GOROOT (C:\Go\) has no effect

ですって。


対策

GOPATHとGOROOTを別のパスに設定する。

set GOPATH=C:\Users\<ユーザー>\Go

これで再度、go get～。

デバッグ用のDELVEをインストール

デバッグに必要なのでインストール。

go get github.com/derekparker/delve/cmd/dlv

動作確認

下記のコードでいざ実行。

package main import "fmt" func main() {     fmt.Println("hoge") }

実行結果

とりあえず動いたので今日はこのへんで。

これからいろいろ試していきたいと思います。

ではまた～。