フリーランス チャレンジ!!

フリーランス チャレンジ!!

現役フリーランスエンジニアが書く雑記ブログ

【Visual Studio Code】GitのコードからAIでコーディング支援(コード補完)するIntelliCodeをやってみた

Visual Studio Code Git AI コーディング 補完
いや〜、世の中一気に進んだ気がします。

AIでコーディングを支援してくれる事になるとは・・・。

 

早速、やってみました!!!

 

  

IntelliCodeとは

以下の2つの機能があります。

①コード補完

②コードスタイルと書式の規則

 

コード補完

GitHubにあるスター数が100を超えるプロジェクト、その数2000!!!

そのソースコードがソースの入力候補に。

 

あなたが書いたソースの入力候補にGitHubで人気のコードが表示されるんです。

 

コードの問題を見つける

ここは調べましたがよく分かりませんでした。 

 

 

事前準備

下記チュートリアルを参考にJavaでコード補完を試します。

Build Java Web Apps with Visual Studio Code

 

ここでは詳しく紹介しませんが、JDK8以降のインストールとMavenを使えるようにしてください。

 

入ってないよ〜って人は、チュートリアルからダウンロード、インストールできるのでお願います。 

 

そして、Visual Studio Codeを立ち上げて。

 

拡張機能を入れる

これからです。まずは拡張機能をインストール。

 

下記のように①で拡張機能を選択

②のテキストボックスに"intellicode"と入力

すると「Visual Studio IntelliCode」が表示されるのでインストールボタンを押下。

f:id:ksakae1216:20181117133544p:plain

 インストール完了したら、「再読み込み」ボタンを押下して下さい。

Visual Studio Codeが再起動されて、インストールした拡張機能が使えるようになります。

f:id:ksakae1216:20181117133711p:plain

Gitからプロジェクトをクローン

立ち上がったVisual Studio Code上で「Shift + Cmd + P」を押下。

f:id:ksakae1216:20181117133840p:plain

"Git: Clone"と入力してEnterキー押下。

f:id:ksakae1216:20181117133927p:plain

 

下記のリポジトリURLを入力してEnterキー押下。

https://github.com/spring-guides/gs-spring-boot.git

f:id:ksakae1216:20181117133957p:plain

 

次に画面右下にこのようなダイアログが表示されるので「リポジトリを開く」ボタンを押下。

f:id:ksakae1216:20181117134211p:plain

 

デバッグしてみる

 下記のJavaソースを開いて下さい。

complete -> src -> main -> java -> hello -> Application.java

f:id:ksakae1216:20181117134317p:plain

 

ちょっとここはうる覚えで自信がないですがApplication.javaを開いた後にF5キーを押下して下さい。

 

しばらく(数分だったかな?)するとlaunch.jsonが作成されます。

多分必要なファイルです。(なんのファイルだがまだ分かってません)

 

さあ、デバッグです!!

下記のように、デバッグを押下、次にデバッグボタンを押下して下さい。

するとSpring Bootが起動します。

f:id:ksakae1216:20181117134721p:plain

 

画面中央上に3つ、どれをデバッグするか選択できるので「hello.Application<complete>」を選択して下さい。

f:id:ksakae1216:20181117135929p:plain

 

デバッグ起動と確認についてGif動画を作ったのでどうぞ

f:id:ksakae1216:20181117134903g:plain

コンソールにSpring Bootの起動ログが表示され起動後、ブラウザに

"http://localhost:8080"と入力するとメッセージが表示されます。

 

Spring Boot簡単ですね!!

 

コード補完

最後にこの記事のメインであるコード補完を試してみます。

こちらもGifをどうぞ。

f:id:ksakae1216:20181117135312g:plain

"str."と打った後に、補完内容が表示されますが、★つきがGitプロジェクトにあるコードとなってます。

 

最後に

Javaの開発といえば、eclipse、 IntelliJの2択かなと思ってましたが、Visual Studio Codeも食い込んできそうです。

 

【関連記事】

ここで紹介したGif動画の作成に興味ある方は下記をどうぞ。

技術系ブログにあると分かりやすいGif動画をMacで作成する方法 - フリーランス チャレンジ!!

 

50代以上のベテランエンジニアは何処へいくのか・・・ 他業界に転職するのか?

50代 ベテランエンジニア 何処へ 消える
 「人材不足」

 

ニュースでこのフレーズをよく聞く。

でも本当にそうだろうか?

 

私がフリーランスになった2年前は年齢がギリ30代(39歳)ということもあり仕事探しに苦労することなかったが、41歳になった今年、仕事探しに苦労した。

www.freelance-osusume.work

 

正直、単価を下げてようやく仕事にありつけた。

本当に人材不足なのか・・・?

 

 

空前の人材不足

私が働いているIT業界も例に漏れず、人材不足に苦しんでいる。

 

以前下記の記事で書いた通り2030年には78.9万人も不足します。

この記事を書いた2016年当時でIT業界は91.9万人なのでとんでもない人手不足です。

www.ksakae1216.com

 

2030年でこれだけ人材が不足する予想ということは、現在の2018年も相当な人手不足のはずです。

 

仕事があるのに人がいないということは、多少の事は目をつぶって、スキルがマッチしてなくても、若手が欲しいのにベテランしか応募してこなくても背に腹は変えられず雇うしか無いはずです。

 

でも現状、そうではなさそうです。。。

 

今の現場も人がいなくて、フロントエンジニアを探していますが全然見つからないと言ってます。

 

ホントに見つからないの?

応募くるけど、年齢が高いから断ってるんじゃないの?

と疑問に思います。

 

スキル、経験があまり無くても若手だったら育てていくかという事できっと雇うはずです。

でもベテランエンジニアだとそうはならないですよね。

 

だからフロントエンジニアを探しても全然見つからないという発言も

「若い人の応募がないんだよね」と聞こえてしまいます。

つまりベテランだとそもそも視野にも入らない。

 

ベテランエンジニアは何処へ

そうなるとベテランエンジニアは何処へいくのか?

 

私はこの業界に15年以上いるんだけど、50代のエンジニアにお目にかかる機会が全然ない。

 

プロパーの管理職で50代の人はいるけど、SES契約、私のようなフリーランスで50代の人に会った事がない。

 

ベテランエンジニアはいったい何処にいるんだ?

40代半ばを過ぎるとこの業界やめて他の業界に転職するのか?

 

最後に

もうすぐ42歳になる私としては、将来に一抹の不安を覚える。

ベテランエンジニアが消える場所を教えてもらいたい。

 

そこは楽しい場所なのか?

安心して生きていけるのか?

 

誰か教えて!!

 

開発マシンとしてMacを長年使ってる人は、brew cleanupでディスク容量を大幅に節約(削減)できるよ

Mac brew cleanup ディスク 節約 削減
タイトルの通り。

 

twitterで興味深いツィートを見たので早速やってみたら、ディスク容量を節約(削減)できました。

 

私は11ヶ月使ってるMacでこのコマンドを実行したら733MBでした。

 

 

brew cleanup実行

ツィートと同じコマンドを実際に叩いてみました。

【コマンド】brew cleanup --dry-run

f:id:ksakae1216:20181028141245p:plain

f:id:ksakae1216:20181028141457p:plain

 

11ヶ月使ってるMacで733MB節約

 結果、733.3MB削除されました!!

 

私のMacはSSDが128GBしかないので700MBも削減できたのは非常に大きいです!

 

ツイート主は17.7GBも減ってるのでMac使ってる人は絶対やったほうがいいですね!!

 

最後に

まあ、何はともあれコマンド叩いてみて!!

【Google】記事と記事の間に表示されるインフィード広告を設定してみた

 インフィード広告って知ってますか?

私はGoogleからのメールで初めて知ったので早速試してみました。

 

 

Googleからインフィード広告に関するメールを受信

Googleから「[成果拡大のヒント] フィードのデザインや雰囲気に合った広告を表示しましょう」とのメールを受信しました。

f:id:ksakae1216:20181015081606p:plain

 

なんだってインフィード広告が表示されてないだって?

 

インフィード広告とは?

そもそもインフィード広告って何だ?と思ったので調べました。

コンテンツとコンテンツの間に表示される広告の事のようです。

 

例えば自分のブログTOPページに記事が一覧で並びますがその記事の間に広告が表示されます。

 

ピンとこない人はこの記事の最後にインフィード広告設定後をのせてあるのでそれを見てもらえれば、「あ〜そう言う事か」と分かると思います。

 

インフィード広告の設定

Googleアドセンスにログインし、「広告の設定」→「コンテンツ」→「広告ユニット」の順に洗濯してください。

f:id:ksakae1216:20181015082906p:plain

 

赤ワクでかこってある「新しい広告ユニット」ボタンを押下。

f:id:ksakae1216:20181015083137p:plain

 

「インフィード広告」を選択。

f:id:ksakae1216:20181015083452p:plain

 

「矢印ボタン」を押下。

f:id:ksakae1216:20181015084007p:plain

 

「次へ進む」ボタンを押下。

f:id:ksakae1216:20181015084244p:plain

 

URLを入力します。私ははてなブログのURLを入力しました。

※はてなブログのトップページは下記の通りで、"archive"という文字列のみ削除。

http://www.ksakae1216.com/archive

 

最初は「モバイル」と表示されていて、「Desktop」に変更。

最後に、「ページをスキャン」ボタンを押下。

f:id:ksakae1216:20181015084614p:plain

 

ページをスキャンしてくれます。

時間測ってませんが1分もかかってなかったと思います。

f:id:ksakae1216:20181015085014p:plain

 

画面左側にインフィード広告が表示された時のイメージが表示されます。

画面右下の「次へ」ボタンを押下してください。

f:id:ksakae1216:20181015085319p:plain

インフィード広告のフォントや背景色、枠線などを変更できますが、何にすればいいのか分からないのでそのままとします。

 

画面右上の「広告ユニット名」に任意(適当)の値を入力。

画面右下の「保存してコードを取得」ボタンを押下。

f:id:ksakae1216:20181015085947p:plain

 

広告用のコードが表示されるので画面下の赤ワク部分のリンクをクリックしてコードをコピーします。

f:id:ksakae1216:20181015200805p:plain

 

スクリプトの作成

IMUZA.com1さんのページを参考にスクリプトを作成します。

はてなブログに AdSense インフィード広告を貼る - IMUZA.com

 

まずこれが先ほどコピーした広告用のコードです。

gista6fe1b392f9da88051c3fb8a06faa05c

 

次にIMUZA.com1さんのスクリプト

それぞれ自分の広告用コードの"AAAA〜"、"BBBB〜"、"CCCC〜"を下記スクリプトに張り替えてください。(7〜9行目を修正します)

gist151c4edf5323d266a5443b062d22cb75

 

はてなブログに設定

それでは早速、はてなブログに設定していきたいと思います。

 

まずは「デザイン」を選択してください。

f:id:ksakae1216:20181015201508p:plain

 

次に「カスタマイズ」、「フッタ」を選択し、先ほど作成したスクリプトを貼り付けてください。

最後に「変更を保存する」ボタンを押下します。

f:id:ksakae1216:20181015224157p:plain

 

スマホもフッタに貼り付けます。

f:id:ksakae1216:20181015224417p:plain

 

インフィード広告を見てみる

それでは、確認してみましょう!!

 

ブログTOPページを見ると・・・

 

おっ、記事一覧で記事と記事の間にインフィード広告が表示されてますね。

スクリプトのコメント通り、5記事に1回インフィード広告が表示されます。

f:id:ksakae1216:20181016182506p:plain

※広告設定後、このように広告が表示されるまで30分くらいかかります。 

 

スマホの場合

f:id:ksakae1216:20181016183053j:plain

 

いい感じですね!!

 

【関連記事】

www.ksakae1216.com

 

サイト改善率78.1%、成果UP率163%のユーザー分析Juicerをはてなブログに導入しました

juicer.cc

 

あなたはJuicerをご存知ですか?

 

無料で多機能なうえに、利用者のサイト改善率78.1%、成果UP率163%を誇るJuicerをはてなブログに導入しました。

 

 

Juicerとは?

ペルソナを自動生成

f:id:ksakae1216:20180930112751p:plain

Juicerが保有する250万人のモニターデータ、分析サイトのアクセスログ等を機械学習にかけ、ペルソナを生成してくれます。

 

ブログをたくさんの人に見てもらいたいならペルソナ設定は大切ですよね。

250万人のデータを使ってペルソナを自動で生成してくれるなんて非常に嬉しいですね。

 

A/Bテスト

f:id:ksakae1216:20180930113526p:plain

画面のソースを触る事なくクリックや、ドラッグ&ドロップで A/Bテストを実施する事ができます。 

 

見やすい分析結果

f:id:ksakae1216:20180930112316p:plain

 このように見やすい分析結果。

 

 

Juicerへの登録手順

下記に接続してください。

ユーザー分析DMP Juicer|ユーザー分析やA/Bテスト、NPSが無料で

 

f:id:ksakae1216:20180930130752p:plain

画面右上の「無料で利用する」ボタンを押下してください。

 

お客様情報を入力する画面が表示されます。

企業名ですが個人であればブログなどのサイト名でよいそうです。

他は、それぞれ入力してください。

紹介コードはなければ未入力でOKです。

最後に「次の画面へ進む」ボタンを押下する。

f:id:ksakae1216:20180930131148p:plain

 

下記それぞれのチェックボックスにチェックして「送信する」ボタンを押下。

・利用規約に同意する

・下記、個人情報の取り扱いに同意する

・導入企業として掲載させていただく場合があります。

・私はロボットではありません

f:id:ksakae1216:20181008225335p:plain

 

はい、無事登録完了しました。

そしてサイトに導入するタグが表示されました。

これメモしておいてください。

f:id:ksakae1216:20180930132835p:plain

 

はてなブログへの導入手順

はてなブログの設定ページを開いてください。

f:id:ksakae1216:20180930133337p:plain

 

ページをスクロールしてこの「headに要素を追加」に先ほど発行されたJuicerタグを貼り付けて、最後に画面下の変更するボタンを押下してください。

※元々記載されているコードの最後に貼り付けて下さい。元々記載されてるのは消さないでね。

f:id:ksakae1216:20180930134042p:plain

 

Juicerにログイン

 下記RULにログインして下さい。

ログイン|ユーザー分析DMP Juicer

 

最初は下記のようなメッセージが表示されます。

タグ導入後、Juicerがタグを検知し、集計が完了するまで最大24時間程度かかります。
最短の場合の完了見込みは、10月1日 午前5:00ごろを予定しております。
ご利用の準備が整いましたら、メールにてお知らせいたしますので今しばらくお待ちください。

 

メッセージの通り、次の日まで待つと「計測が開始されました」のメールを受信するのでもう一度Juicerログインページを開くと下記のように表示されます。

月間訪問者数が表示されればOKです。

画面右の「詳細を見る」ボタンを押下して下さい。

f:id:ksakae1216:20181001205424p:plain

 

はい、このように表示されます。

f:id:ksakae1216:20181001205936p:plain

 

コンバージョンの設定

まずはコンバージョンを設定します。

 

でもコンバージョンってそもそも何だ?

サイトを訪問した人が、商品を購入したり、資料請求したりすること。

 引用:コンバージョン とは 意味/解説/説明 【Conversion】 | Web担当者Forum

 

つまり、そのサイトの目的ですね。

商品紹介のサイトだったら商品を購入してもらうのが目的だけど、このブログのような雑記ブログの場合、明確な目的がない。

 

ということで、考えてみたら、1つだけありました。

別サイトを運営しいて、このサイトから別サイトへの流入も狙ってたので別サイトを見てもらう事をコンバージョンとします。

 

あなたのサイトも何かないか考えてみて下さい。

ただ考えても思いつかない場合、このコンバージョンの設定を飛ばして下さい。

またいつかコンバージョンが思いついた時に設定すればいいと思います。

 

尚、コンバージョンで設定できるのは「特定ページへのアクセスのみ」となります。

f:id:ksakae1216:20181003085436p:plain

※引用:Juicerの「よくある質問」より

 

さて、コンバージョンが決まったら、さっそく設定します。

画面右上の設定(歯車)ボタンを押下し、「基本設定」を選択してください。

f:id:ksakae1216:20181003075603p:plain

赤ワクでかこった「コンバージョン名」と「URL」を入力してくれれば完了です。

f:id:ksakae1216:20181003085858p:plain

URLを入力すると、「入力されたURLは見つかりませんでした」とダイアログが表示されました。

そのダイアログで「Juicerタグ導入後すぐはこのメッセージが表示されます」みたいなことも書いてあったのできっとそれだろうと思い、とりあえずOKボタンを押下しました。

 

ターゲットキーワード設定

 次はターゲットキーワードの設定です。

キーワードも難しいです。

何を設定すればよいのやら・・・。

 

私は一旦、このキーワードでこのブログに来て欲しいキーワードを設定しました。

・TeamSQL

・Docker

・フリーランス

f:id:ksakae1216:20181003090629p:plain

 

Googleアナリティクスからデータ取り込み

Googleアナリティクスからデータを取り込めます。

「Googleアナリティクスからデータを取り込む」ボタンを押下してください。

f:id:ksakae1216:20181003201700p:plain

 

アカウント、プロパティ、ビューをそれぞれ選択して「上記データを取り込む」ボタンを押下します。

f:id:ksakae1216:20181003201955p:plain

するとこのように「データ取り込み中」となります。

実際取り込まれるまで丸1日かかりました。

f:id:ksakae1216:20181003202213p:plain

そして取り込まれると・・・

f:id:ksakae1216:20181003202558p:plain

 

下記の取り込み前と比べると一目瞭然です。

f:id:ksakae1216:20181001205936p:plain

 

ペルソナの自動生成

ちなみにペルソナとは「ブログを読んでくれる読者像」のことです。

このペルソナは結構重要でペルソナを意識してブログを書けばアクセス数は10倍になるとも言われてます。

ブログ初心者必読!アクセス数が10倍になったペルソナ設定という考え方 | NET BIZA

 

それではJuicerが自動生成してくれたペルソナをチェックしてみます。

「ユーザーを知る」を押下してください。

f:id:ksakae1216:20181003203111p:plain

次に「推定ユーザー像」を押下します。

f:id:ksakae1216:20181003203347p:plain

 

 

おっ、出てきました。

本当にペルソナを自動で生成してくれるんですね。

私は今後、48歳男性をターゲットにブログ書いてけばいいんですかね?

(一人暮らしだけど、既婚ってどうゆうことでしょうか???)

f:id:ksakae1216:20181003205711p:plain

 

A/Bテスト

次はA/Bテストです。

A/Bテストとは2つまたは複数ある選択肢のうち、
最も良い結果をもたらすことができるのかを見極めるテストのことです。
例えば、犬の画像と猫の画像ではどちらが購買率が高いでしょうか?
A/Bテストは要素単位で検証でき、高い改善効果が見込まれます。

Juiceのページにも上記のように書いてあります。

つまり購買意欲を高めるためのテストということです。

 

ということでA/Bテストをやってみます。

「施策を行う」を選択。

f:id:ksakae1216:20181004215517p:plain

はい、A/Bテストのページです。A/Bテストの説明が記載されてるのでよく読んどいてください。

ページをスクロールします。

f:id:ksakae1216:20181004215716p:plain

 

「新しくA/Bテストを行う」ボタンを押下してください。

f:id:ksakae1216:20181004215948p:plain

 

A/BテストをするページをPCサイト、スマホでそれぞれ上位3ページずつ表示されます。

上位3ページ以外でA/Bテストをしたい場合、画面下までスクロールし自分でURLを設定してください。

私は今回、PCサイトの1位ページでA/Bテストを実施するのでPCサイトの1位ページをクリックします。

f:id:ksakae1216:20181004220205p:plain

f:id:ksakae1216:20181004220506p:plain

このようなダイアログが表示されるので「確定して次へ進む」ボタンを押下。

f:id:ksakae1216:20181004222752p:plain

 

ページの編集画面に変わります。

今回はインパクトの大きいであろう、タイトルを変更しようと思うので、タイトルをクリックします。

f:id:ksakae1216:20181004223053p:plain

 

吹き出しが表示され編集できるようになるので赤ワクでかこった部分に変更したい文字を入力します。下記のように変更しました。

 

変更前:【SQL Server】照合順序に気をつけろ! デフォルトだと大文字、小文字を区別しないぞ!!

変更後:【SQL Server】照合順序デフォルトだと大文字、小文字を区別しないぞ!!

 

ちょっと短めなスッキリしたタイトルに変更です。

変更後、「登録」ボタンを押下。

f:id:ksakae1216:20181004223413p:plain

 

確認画面になります。問題なければ「登録して次へ進む」ボタンを押下。

f:id:ksakae1216:20181004223851p:plain

 

画面右の赤ワクをそれぞれクリックすると変更前、変更後をプレビューで確認できます。

問題なければ、「テスト名の登録へ」ボタンを押下。

f:id:ksakae1216:20181004224224p:plain

 

赤ワク部分をクリックしてA/Bテストの名前を入力します。

今回は「20181004_タイトル変更」としました。

日付と内容を名前にしてます。

「開始する」ボタンを押下すればA/Bテストを開始します。

f:id:ksakae1216:20181004224455p:plain

 

はい、開始しました。

f:id:ksakae1216:20181004224758p:plain

 

このA/Bテストの状況は「施策を行う」からいつでも確認することができます。

f:id:ksakae1216:20181004225113p:plain

画面を下にスクロールするとテスト状況が確認できます。

f:id:ksakae1216:20181004225238p:plain

【AWS】無料でPostgreSQLを構築

AWS 無料 PostgreSQL 構築



AWSでPostgreSQLの構築とローカルから接続できるよう設定したので手順を紹介します。 

 

 

AWS上にPostgreSQLを作成する

※AWSのアカウント作成済み、コンソールにログインできる事前提に進めます。

AWSのコンソールにログインして、サービスからRDSを選択する。

f:id:ksakae1216:20180927100044p:plain

 

データベースの作成ボタンを押下。

f:id:ksakae1216:20180927132933p:plain

 

PostgreSQLを選択して次へボタンを押下。

f:id:ksakae1216:20180927133006p:plain

 

開発/テストを選択、次へボタンを押下。

f:id:ksakae1216:20180927133048p:plain

 

「RDS 無料利用枠のオプションのみを有効化」チェックボックスをチェック。

f:id:ksakae1216:20180927133124p:plain

 

画面を下にスクロールして「設定」を記載。

DBインスタンス識別子、マスターユーザーの名前に任意の値(適当でOK)を入力。

マスターパスワード、パスワードの確認を入力して次へボタンを押下。

f:id:ksakae1216:20180927133253p:plain

 

「パブリックアクセシビリティ」でははいを選択。

はいを洗濯しないと、外部からアクセスする事ができません。

 

さらにこの画面ハードコピーの下にある「データベースの名前」はマスターユーザーの名前と同じ値が入ってます。

データベースの名前を変えたければここを変えて下さい。(私は変えてません)

f:id:ksakae1216:20180927133604p:plain

 

はい、DBインスタンスを作成中になりました。

画面右下の「DBインスタンスの詳細の表示」ボタンを押下して下さい。

f:id:ksakae1216:20180927133947p:plain

 

次に、画面左の「インスタンス」リンクを選択すると、画面右側に先程作成したPostgreSQLの状態が表示されます。

作成した直後は、ステータスが作成中になってます。

f:id:ksakae1216:20180927134111p:plain

 

「表示の更新ボタン」をたまに押下すると表示内容が変わります。

この画面のようにステータスが「利用可能」になったらOKです。

f:id:ksakae1216:20180927134214p:plain

 

接続設定の変更

※もしかしたら以降の手順は不要かもしれませんが念のため。

インスタンスのリンクをクリック

f:id:ksakae1216:20180927152134p:plain

 

少し画面をスクロールするとセキュリティグループの設定があります。

タイプをみるとわかるんですがInbound、Outboundの2種類があります。

Inboundが外部からPostgreSQLへのアクセス許可設定。

OutboundがPostgreSQLから外部へのアクセス許可設定。

 

つまり、Inboundのアクセス許可を厳しくすると設定されたプロトコル、IPアドレス、ポートしかアクセスできないようになります。

 

それでは設定します。赤枠のリンクを選択。

f:id:ksakae1216:20180927151941p:plain

 

インバウンドが選択されてます。

編集ボタンを押下して下さい。

※この画面ハードコピーはすでに修正済みで、初めてこの画面を表示する場合、プロトコル、ポート範囲、ソースに違う値が表示されています。

f:id:ksakae1216:20180927152959p:plain

 

下記のように変更して下さい。

①タイプ

 すべてのトラフィック

②プロトコル

 すべて

③ポート範囲

 0-65535

 ※すべてのトラフィックを選択するとこのポートになるはずです。

④ソース

 カスタムを選択

 0.0.0.0/0を入力

最後に保存ボタンを押下する。変更は即時反映されます。

f:id:ksakae1216:20180927153606p:plain

 

次はアウトバウンドです。

編集ボタンを押下しインバウンドと同じように変更して下さい。

f:id:ksakae1216:20180927154100p:plain

 

これで外部(ローカルのPCなど)から接続する事ができます。

 

作成したDBに接続するツールはTeamSQLがおすすめです!

TeamSQLでAWSのDB(PostgreSQL)に接続する - フリーランス チャレンジ!!

TeamSQLでAWSのDB(PostgreSQL)に接続する

 

TeamSQL AWS DB PostgreSQL 接続

この記事を公開してから毎日沢山の人に読まれてます。

DB接続のクライアントツールはTeamSQLで決まり(インストールから接続まで紹介) - フリーランス チャレンジ!!

 

みんなTeamSQLに興味あるのかな?

 

ならば、もうちょっと紹介しようと思い、今回はAWSに構築したDBに接続する手順をご紹介!!

 

 

 

AWSのDB(PostgreSQL)

AWSのDBは下記記事で作成したPostgreSQLを使います。

【AWS】無料でPostgreSQLを構築 - フリーランス チャレンジ!!

 

無料利用枠内で使えるのでもし作成したことが無い人はぜひ作成してみて下さい。

 

最初のアカウント作成時にクレジットカードの登録とかあってビビりますが、利用枠内で使う分には何も請求されないので大丈夫です。

※ただ、以前無料枠内で使ってるつもりがインスタンスを複数立ち上げっぱなしで放置してて1ドルか2ドルくらい請求された事があるので無料枠内とはいえ気をつけて下さい。

 

TeamSQLからDB(PostgreSQL)に接続

非常に簡単です。

まずは、AWSで作成したインスタンスのリンクを選択。

f:id:ksakae1216:20180927135723p:plain

 

エンドポイントとポートをメモしておいて下さい。

f:id:ksakae1216:20180927135909p:plain

 

次に、TeamSQLを立ち上げて、「connections」の右にあるプラスボタンを押下。

f:id:ksakae1216:20180927135951p:plain

 

画面左側はPostgreSQLを選択。

画面右側は以下の通り。

①Connection Name

 適当な値でOK

②Host

 この記事で紹介したAWSのエンドポイント

③Port

この記事で紹介したAWSのポート(ポートが5432の場合は、未入力でもOK)

④Username

 AWSでPostgreSQL構築時に設定したマスターユーザの名前

⑤Password

 AWSでPostgreSQL構築時に設定したマスターパスワード

⑥Default Database

 AWSでPostgreSQL構築時に設定したデータベースの名前

 ※詳細設定で変更してなければマスターユーザの名前と同じ

f:id:ksakae1216:20180927140235p:plain

 

これで画面右下の「Test Connection」ボタンを押下すると

f:id:ksakae1216:20180927142411p:plain

このように「Successfully connected!」と表示されれば無事接続完了です。

「Save Connection」ボタンを押下して設定を保存します。

 

はい、PostgreSQLに接続できましたね!!

f:id:ksakae1216:20180927143002p:plain

TeamSQLの機能紹介

TeamSQL 機能

前回の記事でTeamSQLのインストールから接続まで紹介しましたが今回は機能を紹介します。

 

 

TeamSQLはカラーテーマが選べる

4種類のテーマから選ぶことができます。

メニューの「View」→「Color Themes」を選択。

 

Defalut

f:id:ksakae1216:20180924175653p:plain

 

Light

f:id:ksakae1216:20180924175828p:plain

 

Dark

f:id:ksakae1216:20180924175950p:plain

 

Solarized

f:id:ksakae1216:20180924180113p:plain

 

私はDefault使ってます。

 

 

SQL実行について

f:id:ksakae1216:20180924180537p:plain

SQLは複数書いても選択した個所が実行される。

 

コード補完もモチロンあるよ

f:id:ksakae1216:20180924183507p:plain

 

SQLクエリTeamSQLから共有できる

他のDBクライアントツールにない、このTeamSQLの目玉機能です!!

 

共有するためには最初にチームを作成します。

「メニュー」の「Teams」→「Create New Team」を選択、チーム名を入力しSaveボタン押下。

f:id:ksakae1216:20180924191906p:plain

 

チームに追加したいメンバーのメールアドレスを入力し、Enterキー押下。

f:id:ksakae1216:20180924192326p:plain

Yesボタンを押下。

f:id:ksakae1216:20180924192455p:plain

これでチーム作成とメンバー追加が完成です。

 

そして、例えばこのSQLを同じチームの人と共有したいとする

f:id:ksakae1216:20180924183815p:plain

 

f:id:ksakae1216:20180924184100p:plain

「Share Query」を選択すると、このようなダイアログが出てくるので適当な名前をつけてSaveボタンを押下します。

f:id:ksakae1216:20180924184930p:plain

 

すると誰と共有したいか選べるの先ほど作成したdummy1チームのチェックボックスをチェックしてApplyボタン押下で共有できます。

f:id:ksakae1216:20180924184517p:plain

 

チームメンバー(ksakae1216+teamsql@gmail.com)でTeamSQLを立ち上げると下記のように共有されてます。めちゃめちゃ便利ですね!!

f:id:ksakae1216:20180924185326p:plain

 

SQL実行結果もTeamSQLから共有できる

リンクを生成して共有とSlackで共有ができます。

ここではSlackの共有を紹介します。

共有ボタンを押下して「Send Results to Slack」を選択

f:id:ksakae1216:20180924190846p:plain

パスワードとチャネルを選択し「Create Link & Share to Slack」ボタン押下するとSlackにメッセージが飛んできます。

※EncryptionでOffを選択するとパスワードを省略できます。

 

f:id:ksakae1216:20180924191133p:plain

 

リンクをクリックするとブラウザが開くので先程のパスワード入力

f:id:ksakae1216:20180924191457p:plain

 

はい、SQL実行結果を共有できました。

f:id:ksakae1216:20180924191630p:plain

 

SQLの実行結果をファイルに出力

SQLの実行結果をファイルに出力することもできます。

f:id:ksakae1216:20180924192835p:plain

画面右の「JSON」、「CSV」、「MD」、「Tab Separated」それぞれのボタン押下でそれぞれのファイル形式に出力することができます。

 

JSON形式で出力できるのって他のクライアントツールには見かけないのでちょっと嬉しいですね。 

 

機能を拡張できる

プラグインのように機能を拡張できます。

f:id:ksakae1216:20180924193328p:plain

 画面左のジグソーパズルみたいなアイコンをクリックすると拡張できる昨日の一覧が表示されます。

現状、パッとしたのがなさそうですが今後増えていくことを期待です。

 

私は、「SQL Generator」だけ入れました。

SQL実行結果を右クリックすると、その選択したレコードのSelect、Insert、Update、Delete文を作成する拡張機能です。

 

最後に

下記の記事でAWSのDB(PostgreSQL)につないでみます。

TeamSQLでAWSのDB(PostgreSQL)に接続する - フリーランス チャレンジ!!

 

DB接続のクライアントツールはTeamSQLで決まり(インストールからMySQL接続まで紹介)

TeamSQL
今まで色々なDB接続ツールを使ってきました。

SI ObjectBrowser、Sequel Pro、DBViewer(eclipseプラグイン)などなど。

 

今まで使った中で一番便利だったのはSI ObjectBrowserですが、有償なんですよね。

 

eclipse使ってる時はDBViewerプラグイン使ってたんだけど、eclipse使わない開発だと使えない(使うためにeclipse立ちあげたくない)のでSequel Pro使ってました。

 

Sequel Proも便利なんだけど、Qiitaの下記記事をみてTeamSQLを使ってみることに。

qiita.com

 

 

TeamSQLとはどんなクライアント(Client)ツール?

簡単に紹介

 

多くのデータベースをサポートしてます。

・Oracle

・MySQL

・SQL Server

・PostgreSQL

・AWS Redshift

・Redis

・AWS Aurora

・MariaDB

 

将来的に下記をサポートするようです。

・AWS ElasticSearch

・Cassandra

・SQLite

・MongoDB

 

Windows、Mac、Linuxに対応

Windows、Mac、Linuxで使えます。 

 

TeamSQLをインストール

Macにインストールします。

 

下記URLに接続して画面右上の「Download for Free」の黄色ボタンを押下するとダウンロードできます。

TeamSQL - Cross-platform SQL Client Built for Collaboration

 

f:id:ksakae1216:20180923152342p:plain

 

ダウンロードしてアプリケーションフォルダにコピーすれば完了です。

f:id:ksakae1216:20180923153236p:plain

 

早速起動するとこのようなダイアログが出てくるので「開く」ボタン押下

f:id:ksakae1216:20180923153535p:plain

 

このような画面が立ち上がるのでメールアドレス入力して黄色のボタンを押す

f:id:ksakae1216:20180923153808p:plain

 

「Full Name」、「Password」入力して、チェックボックスをチェックする

f:id:ksakae1216:20180923154313p:plain

 

TeamSQLが立ち上がりました。

f:id:ksakae1216:20180923154908p:plain

が、画面左下に赤字で何か書いてある。

どうやらメールを確認しろとのこと。

 

メール見てみます。モザイクしてあるリンク部分をクリック

f:id:ksakae1216:20180923155129p:plain

 

はい、アカウントが正常に確認できたとのことです。これでインストール完了ですね。

f:id:ksakae1216:20180923155433p:plain

 

 

TeamSQLでMySQLに接続する

それではインストールした TeamSQLでMySQLに接続します。

※私の場合、下記記事のMySQLを使います。

【Docker入門】公開されているイメージを使う(MySQL編) - フリーランス チャレンジ!!

 

CONNECTIONSの右にあるプラスボタンを押してください。

f:id:ksakae1216:20180923160756p:plain

 

 左側でMySQLを選んで右側は自分の環境に合わせて入力

f:id:ksakae1216:20180923162212p:plain

・Connection Name

 任意(適当でいいです)

・Host

 接続したMySQLのIPアドレス

・Port

 接続したMySQLのポート番号

・Connection Timeout

 任意(入力してもしなくてもOK、入力しないと10秒かも)

・Username

 接続ユーザー名

・Password

 パスワード

・Default Database

 デフォルト接続するデータベース

 

これで右下の「Test Connection」ボタンを押下するとテスト接続します。

成功するとこのようになります。

f:id:ksakae1216:20180923162643p:plain

 

「Save Connection」を押下すると設定を保存します。

 

あとは、下記のようにそれぞれデータベース、テーブルをダブルクリックして展開します。

するとtable1テーブルの上位200件を表示します。

f:id:ksakae1216:20180923163121p:plain

 

画面右上部がSQL、画面右下部がSQLの結果となります。

f:id:ksakae1216:20180923163939p:plain

 

最後に

ちょっと長くなったので機能については下記記事で紹介します!

TeamSQLの機能紹介 - フリーランス チャレンジ!!

【Gitpod】ブラウザ上でGitHubのオンラインIDEが使えるようにりました!!

 これは便利です!!

 

GitHubのIssueをブラウザ上のIDEで修正できるようになりました!!

 

※確かでは無いですが、Chromeのエクステンション入れればIssues無くてもGitHub上のリポジトリも普通にオンラインIDEが使えそうです。記事の最後の方を参照ください。

 

※ブラウザはChromeかFirefoxをお使いください。

 この記事ではChrome使ってます。

 

 

オンラインIDEの使い方

まずは自分のGitHubでIssuesを開いて下さい。

※Issuesが無い人は適当にIssue作って。

 

Issuesを開いて「Gitpod」ボタンを押下して下さい。

f:id:ksakae1216:20180906075817p:plain

 

「Authorize TypeFox」ボタンを押下する。

f:id:ksakae1216:20180906080156p:plain

 

少し待ちます。

f:id:ksakae1216:20180906080418p:plain

 

「CREATE MY FREE ACCOUNT」ボタンを押下です。

※Gitpodからのニュース、アップデート情報をメール受信したい方は「I agree to receive〜」のチェックボックスをチェック

f:id:ksakae1216:20180906080615p:plain

 

Chromeのエクステンションを追加します。

f:id:ksakae1216:20180906080933p:plain

 

f:id:ksakae1216:20180906081222p:plain

 

 

はい、無事起動しました!!

バツボタン押下してIDEを表示します。

f:id:ksakae1216:20180906081451p:plain

 

f:id:ksakae1216:20180906081746p:plain

 

ソースの修正、動作確認もできる

それでは、修正と動作確認してみます。

f:id:ksakae1216:20180906083257g:plain

 

おぉ〜すごい、本当に動いた!!

感動モノです!!

 

終了したい場合は画面左上のアイコンを押下

f:id:ksakae1216:20180906083918p:plain

 

「STOP」ボタン押下します。しばらくするとSTOPボタンが消えるので、これで終了したことになります。

f:id:ksakae1216:20180906084108p:plain

 

Issuesが無くてもIDE起動できる

Chromeのエクステンションを入れたせいかわからないですが、リポジトリ上にも「Gitpod」ボタンが表示されIDEが起動できるようになりました。

f:id:ksakae1216:20180906084543p:plain

 

IDE起動するのはちょっと遅いですね。(1分くらいかな)

 

月10時間までしか使えないみたい

いや、ビックリ!!

Gitpod git-bolts git-IDE onto GitHub for in-browser code git-editing • The Register

 

Gitpod is available under a tiered pricing scheme. The free tier provides 10 hours of usage per month with unlimited workspaces and private repos. The basic and pro tiers, $19 per month tier (100 hours) and $39 per month (300 hours) respectively, are not yet available. There's also an on-premises version for enterprises. ®

 

Google翻訳すると

Gitpodは階層型の価格設定で利用できます。無料のティアは無制限のワークスペースとプライベートレポジスで毎月10時間の使用を提供します。基本階層とプロ層は、それぞれ月額19ドル(100時間)、月額39ドル(300時間)で、まだ利用できません。企業向けのオンプレミス版もあります。 ®

 つまり、毎月10時間は無料で使用できます。

月額19ドルで100時間使えるプランと

月額39ドルで300時間使えるプランがあるけどまだ有料プランは使えないそう。