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

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

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

マルチカーソルはまるで魔法! Vimでマルチカーソルをやってみた!!

 今日、下記の記事を読んで衝撃を受けた!!

マルチカーソルなんて知らなかった!!!

マルチカーソルを使わないVSCodeはただのVSCodeだ! - memo.md

 

こんなことができるんです!!

f:id:ksakae1216:20181211235715g:plain 

 

Vimでもできないか調べたらプラグインがあるみたい。

ちなみにMacVimです。

 

 

プラグインをインストール

プラグインをインストールしなければいけません。

 

vim-plugインストール

まずはvim-plugを入れます。vim-plugがすでに入ってる場合は、ここを飛ばして下さい。

※vim-plugはプラグインのインストール、アップデートをサポートしてくれるプラグインです。

 

vim-plugは下記を参考にしました。

GitHub - junegunn/vim-plug: Minimalist Vim Plugin Manager

 

iTerm開いて下記のコマンドをそれぞれそのまま実行。

gist0fd151e0d3e4a6eae0c9aa20ba3f906e

  

vim-multiple-cursorsインストール

こちらもGitHubの下記を参照。

GitHub - terryma/vim-multiple-cursors: True Sublime Text style multiple selections for Vim

 

MacVimのgvimrcの編集、gvimrcの最後に全て貼り付け。

※GitHubではvimrcの編集となってますが、私は設定を全てgvimrcに書いてるのでgvimrcを編集してます。

gist2bbabb77301e7d7f64949036cc07c65f

 

gvimrc編集後、vimを起動、":PlugInstall"と打てばインストール完了。

 

マルチカーソルをやってみる

では、早速マルチカーソルをやってみます。

 

最初にカーソルが1行目の一番左にある状態で"fp"と押下すると"poorly_named_var"の先頭の"p"にカーソルが移動します。

f:id:ksakae1216:20181211233803p:plain

 

次に"Ctrl + n"を押下するとカーソルの下にある単語"poorly_named_var"が選択されます。

f:id:ksakae1216:20181211234144p:plain


次に"Ctrl + n"を押下すると2番目の"poorly_named_var"が選択され、もう一度"Ctrl + n"を押下すると3番目の"poorly_named_var"が選択されます。

f:id:ksakae1216:20181211234240p:plain

 

この状態で"c"を押下すると選択された単語が消去され挿入モードになります。

f:id:ksakae1216:20181211234358p:plain

 

"name"と入力すると、3箇所に"name"と表示されます。

エスケープキー押下で挿入モード終了。

f:id:ksakae1216:20181211234434p:plain

 

GIF動画。マルチカーソルすごいね!!

f:id:ksakae1216:20181211235715g:plain

eclipseにGitリポジトリをインポート(Import)してSpring Bootに変更する手順

 開発環境にGitからソースをインポート(Import)する作業ってたまにしかやらないので忘れてしまいますよね。

 

そこで、画面ハードコピー付きで詳細に手順を紹介します。

困ってる人はぜひ参考にして下さい。

 

 

git cloneしたリポジトリをeclipseにインポート(Import)

まず、gitからリポジトリをクローン(clone)します。

下記記事を参考に。(別プロジェクトはotherProjectではなく、springProject02_diとしてます)

【GitHub】リポジトリをクローン(clone)して別リポジトリとしてリモートにpushする手順 - フリーランス チャレンジ!!

 

eclipseのメニュー→File→Importを選択。

「Git」→「Projects from Git」を選択し「Next」ボタンを押下。

f:id:ksakae1216:20181206221157p:plain

 

「Existing local repository」を選択し、「Next」ボタン押下。

f:id:ksakae1216:20181206221613p:plain

 

「Add」ボタン押下。

f:id:ksakae1216:20181206223224p:plain

 

「Browser」ボタンを押下し、gitクローンしたフォルダを選択。

次に、gitリポジトリのチェックボックスをチェックし、「Finish」ボタンを押下。

f:id:ksakae1216:20181206223310p:plain

 

「Next」ボタンを押下してください。

f:id:ksakae1216:20181206223847p:plain

 

一番下の「Import as general project」を選択し、「Finish」ボタン押下。

f:id:ksakae1216:20181206225208p:plain

 

はい、プロジェクトがインポート(Import)されました。

f:id:ksakae1216:20181207085029p:plain 

 

インポート後の設定変更

次にsettings.gradleのプロジェクト名を変更してください。

 

変更前は、gitからクローンしたspringProject01_startだったのでspringProject02_diに変更します。

※この変更作業をしないと後でエラーが発生します。

f:id:ksakae1216:20181207085315p:plain

 

最後にインポートしたプロジェクト(springProject02_di)を選択し右クリックしてください。

「Configure」→「Add Gradle Nature」を選択すると、Gradleでビルドされます。

f:id:ksakae1216:20181207085829p:plain

 

ビルドされると、赤ワクのように"boot"が表示される。

f:id:ksakae1216:20181207090513p:plain

 

実行

プロジェクトを右クリックして「Run As」→「Spring Boot App」を選択するとこのように実行されました。

f:id:ksakae1216:20181210073429p:plain

 

eclipseでgit cloneしてインポート(Import)

eclipseのメニュー→File→Importを選択。

「Git」→「Projects from Git」を選択し「Next」ボタンを押下。

f:id:ksakae1216:20181206221157p:plain

 

「Clone URI」を選択し、「Next」ボタン押下。

f:id:ksakae1216:20181210075645p:plain

 

URIにインポートしたいリポジトリのURLを貼り付けます。

URLを貼り付けるとHostRepository pathは自動的にセットされます。

「Next」ボタン押下してください。

f:id:ksakae1216:20181210082716p:plain

 

「Next」ボタン押下。

f:id:ksakae1216:20181210084317p:plain

 

ローカルにクローンしたいディレクトリを指定して、「Next」ボタン押下。

f:id:ksakae1216:20181210084353p:plain

 

一番下の「Import as general project」を選択し「Next」ボタン押下。

f:id:ksakae1216:20181210084438p:plain

 

最後に「Finish」ボタン押下。

f:id:ksakae1216:20181210084541p:plain

 

はい、インポート(Import)が完了しました。

f:id:ksakae1216:20181210084756p:plain

 

この後、設定変更と実行は同じやり方でOKです。

 

最後に

eclipse使うんだったら、git clone含め最初からeclipseを使う方がやりやすいかもしれないですね。

【GitHub】リポジトリをクローン(clone)して別リポジトリとしてリモートにpushする手順

 

GitHub リポジトリ クローン clone

もうタイトルの通り。

以前、困って調べたので、画像付きで手順化。

 

 

GitHubでリポジトリを作成

別リポジトリとしてリモートにpushしたいリポジトリを作成します。

 

GitHub上で「New」ボタンを押下してください。

f:id:ksakae1216:20181204075438p:plain

 

赤ワクのリポジトリ名と説明(Description)を入力して「Create repository」ボタンを押下。

※説明(Description)は入力してなくてもOKです。

f:id:ksakae1216:20181204075735p:plain


 はい、リポジトリが作成されました。

f:id:ksakae1216:20181204080257p:plain

 

クローン(clone)

次は、リポジトリをクローン(clone)します。

 

今回は、私が下記記事で作成したリポジトリをクローンします。

【Spring Boot入門】eclipse + STS + Starter ProjectではじめてのSpring - フリーランス チャレンジ!!

 

クローンしたいリポジトリのURLをコピーします。

f:id:ksakae1216:20181204083947p:plain

 

下記コマンドでリポジトリをクローンし、ついでにotherProjectディレクトリも作成します。

【クローンコマンド】

git clone https://github.com/ksakae1216/springProject01_start.git otherProject

f:id:ksakae1216:20181204084147p:plain

 

はい、ディレクトリ(otherProject)が作成され、リポジトリもクローンされました。

f:id:ksakae1216:20181204084532p:plain

 

別リポジトリとしてリモートにpush

では、このクローンしたプロジェクトをリモートにpushします。

 

まず最初に注意したいのがリモートの向き先。

"git remote -v"で確認すると、クローン元が向き先に設定されている。

f:id:ksakae1216:20181204085400p:plain

 

これを別リポジトリ(otherProject)に変更する必要がある。

下記コマンドで変更してください。

【コマンド】

git remote set-url origin 別リポジトリ(otherProject)のURL

※URLコピーはこの画面ハードコピーを参考に。

f:id:ksakae1216:20181204225836p:plain

 

はい、リモートの向き先が変わりました。

f:id:ksakae1216:20181204230207p:plain

 

最後にリモートにpushします。できましたね!!

f:id:ksakae1216:20181204230724p:plain

 

GitHub上でも確認してみましょう。

push前

f:id:ksakae1216:20181204230955p:plain

 

push後

f:id:ksakae1216:20181204231022p:plain

 

【Spring Boot入門】eclipse + STS + Starter ProjectではじめてのSpring

 今や、Javaフレームワークのデファクトスタンダードと言ってもいい、Spring Boot。

 

今まで参画したプロジェクトでも使ってたけど、用意されたものをあまり意識せずに使ってたな〜、ちゃんと基礎から理解したいな〜と思いこの本を買ったので基礎からSpringを勉強します!!

 

環境

環境は下記の通り。

PC:Mac

Java;11

Eclipse;Oxygen

Spring Boot;2.1.1

 

STSプラグインをインストール

もし、EclipseにSTSプラグインが入ってなければ下記記事を参考にプラグインをインストールしてください。

www.ksakae1216.com

 

プロジェクト作成

それでは早速プロジェクトを作成。

Eclpseのメニュー「File」→「New」→「Other」を選択。

もしくは、「Package Explorer」の空いたところを右クリックして「New」→「Other」を選択してもOK。

 

このようなダイアログが表示されるので赤ワクのように「spring」と入力するとspring関連のテンプレートが表示されるので一番下の「Spring Starter Project」を選択して「Next」ボタンを押下。

f:id:ksakae1216:20181130223454p:plain

 

 赤ワク部分に好きな名前を入れて後は適当に。

特にこだわり無ければそのまま何も変更しなくてOK。

最後に「Next」ボタンを押下。

f:id:ksakae1216:20181130225019p:plain

 

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

f:id:ksakae1216:20181130224526p:plain

 

しばらく待つと・・・

このようにSpring Bootのプロジェクトが完成!!

f:id:ksakae1216:20181130225300p:plain

 

Hellow Worldをコンソールに表示

準備できたので、お決まりの"Hellow World"をコンソールに表示します。

 

まずは、「プロジェクト名 + Application.java」を開きます。

f:id:ksakae1216:20181130225846p:plain

 

以下を参考に修正してください。

①19〜21行目のメソッドを追加

②12行目をコメントアウト

③13〜15行目を追加

gist9819fe5d8a284ae015e6ddc4f6f74cd2

 

ソースの修正が完了したら、プロジェクトを右クリック→「Run As」→「Spring Boot App」を選択

f:id:ksakae1216:20181130230654p:plain

 

f:id:ksakae1216:20181130230813p:plain

 

はい、"Hellow World"が表示されました!!

f:id:ksakae1216:20181130231028p:plain

 

最後に

Javaやってるのであれば、恐らくSpring Bootは避けて通ることはできないはずです。

 

簡単なとこから始めていけば、嫌にならずに勉強していけるでしょう。

 

ソースをGitHubにあげときました。

github.com

【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)に接続する - フリーランス チャレンジ!!