JavaScriptで型を意識してコーディング。暗黙的型変換と明示的変換。

Javascript

JavaScriptはスクリプト言語で、暗黙的型変換をおこなってくれるプログラミング言語になります。
暗黙的型変換は便利ですが、思いもよらぬバグを作りこむことがあります。


本記事では、筆者が暗黙的型変換でハマったバグについて紹介し、正解となるプログラミングについて説明していきます。


暗黙的型変換とは


そもそも、暗黙的型変換とはいったいどういう変換なのでしょうか?


JavaScriptの型変換には、暗黙的変換明示的変換の2つがあります。

暗黙的変換とは、”=”で連結された値の中で、どちらかの値の型に合わせる形で変換がおこなわれます。

var num = '1';
var value = num;

この時、変数valueはString型の”1″が格納されます。


しかし、この暗黙的型変換は、しばしば直感的には解りにくい型変換をおこない、非常に解りにくいバグを作りこむことがあります。
プログラマーとしては便利な仕組みなのですが、注意が必要です。


明示的変換とは、プログラムの中で型変換処理を記載して変数宣言する方法です。


var num = Number('1');
var value = num;

この時、valueはNumber型の”1″が格納されます。


型変換をおこなう代表的な関数


暗黙的型変換は、便利な反面、非常に解りにくいバグを作りこむことがあります。
可能な限り、型を意識してプログラミングをしようとした場合に、型変換をおこなう関数を使用することになります。

型変換をおこなってくれる代表的な関数を紹介していきます。


Number(数値に変換)


「Number」は、文字列を数値に変換する関数です。


var num = Number('12345');
var value = num;

valueは数値の12345になります。


parseInt(基数を指定して数値に変換)


「parseInt」は、「Number」と同様に、文字列を数値に変換する関数です。
「Number」との違いは、基数を設定できる点です。


var num = parseInt('12345', 10);
var value = num;

valueは数値の12345になります。
10は10進数を指定しています。


var num = parseInt('A', 16);
var value = num;

この場合は16進数での変換となるので、valueは10です。


String(文字列に変換)


「Number」は、数値を文字列に変換する関数です。


var num = String('12345');
var value = num;

valueは文字列の12345になります。


暗黙的変換が作りこむバグ


型を意識せずにプログラミングした結果、筆者が作りこんでしてしまったバグの例を紹介します。

以下、サンプルプログラムです。


// 開始Idxと終了Idxを取得
var startIdx = document.getElementById("startIdx").value;
var endIdx = document.getElementById("endIdx").value;

// 取得数分ループ
for (var lc = startIdx; lc < endIdx; lc++) {
    console.log("lc=" + lc);
}

startIdxと1、endIdxが10の結果は以下です。
正解です。

lc=1
lc=2
lc=3
lc=4
lc=5
lc=6
lc=7
lc=8
lc=9
lc=10

startIdxと101、endIdxが110の結果は以下です。
これも正解です。

lc=101
lc=102
lc=103
lc=104
lc=105
lc=106
lc=107
lc=108
lc=109
lc=110

startIdxと91、endIdxが100の結果はどうでしょう?
何も表示されません。
つまり、ループに入らないです。


91の文字列を100の文字列でループしてしまっているため、文字コードとしては91より100の方が小さいために、このバグが発生します。
「document.getElementById()」は、HTML内にある値を取得する関数ですが、この際、文字列として数値を取得します。
正解のプログラムとしては以下になります。


// 開始Idxと終了Idxを取得
var startIdx = documentGetelementId("startIdx");
var endIdx = documentGetelementId("enddx");

// 数値に変換
startIdx = Number(startIdx);
endIdx = Number(endIdx);

// 取得数分ループ
for (var lc = startIdx; lc < endIdx; lc++) {
    console.log("lc=" + lc);
}

for文のループは数値全体の処理になっているので、開始位置と終了位置は、いったん数値に変換するのが正解、ということになります。
数値変換処理をおこなうようにして修正したプログラムの実行結果は、startIdxと91、endIdxが100の場合は以下結果になります。
正解の結果ですね。


lc=91
lc=92
lc=93
lc=94
lc=95
lc=96
lc=97
lc=98
lc=99
lc=100

まとめ


暗黙的型変換は便利ですが、思いもよらぬバグを作りこむ要因をはらんでいます。
場面によって、きちんと型変換をおこなってプログラミングするようにしましょう。



シェルで外部ファイルを読み込む。サンプルシェルで解説。

Linux

今回は、シェルで外部ファイルを読み込む方法を紹介します。


シェルファイルは、非常に強力なスクリプトです。
使い方によっては、ちょっとした機能は実現することができます。


外部ファイルの読み込みパターン


外部ファイルを読み込むパターンとして、以下の2パターンについて説明します。


  • 外出し定義ファイルの読み込み
  • シェルからシェルを呼び出す

外出し定義ファイルの読み込み


シェルでちょっとした機能を実現する際に、さまざまなパラメータを外部ファイルに定義することが必要になる場合があります。
ファイル読み込み・書き込み系のシェルであればファイルパスを外部ファイルに定義したり、ですね。

そういった外部ファイル定義についてもシェルで可能です。


外部ファイル読み込みのサンプルシェル


サンプルシェルは以下になります。

#!/bin/sh
# 
# 外部ファイルの読み込み
# 

    echo "start."
    while read line
    do
        KEY=`eval echo $line | awk '{print $1}'`
        VAL=`eval echo $line | awk '{print $2}'`
        echo $KEY
        echo $VAL
    done < setting.config
    echo "end."

外部ファイルとなる「setting.config」は以下です。

line1    value1
line2    value2
line3    value3

実行結果は以下になります。

$ sh configLoad.sh
start.
line1
value1
line2
value2
line3
value3
end.

行データを繰り返し読み込む


行データを読み込む方法は以下になります。


while文で、自動的に最終行まで外部ファイルの読み込みをおこなっていきます。
読み込み対象ファイルをdone部分に記載することで、対象ファイルの読み込むをおこないます。


上記サンプルプログラムは、シェルファイルと同フォルダに、外部ファイルとなる「setting.config」が存在する状態のシェルファイルとなります。

    while read line
    do
        ・・・制御・・・
    done < 設定ファイルパス

lineに1行データが格納されるので、制御の部分にlineに対する処理を記載することになります。


awk(オーク)コマンドで列ごとに読み込み


awk(オーク)コマンドは、文字列を抽出するコマンドになります。
{print $N}で、N番目の列を抽出することができます。


上記のサンプルプログラムは、2列の行データなので、{print $2}までしかないですが、列をもっと増やしていきたい場合は、{print $3}といった具合に列の数を増やしていけば、対象の列データを読み込むことができます。


シェルからシェルを呼び出す


共通機能を定義したシェルを準備した場合、そのシェルを他のシェルから呼び出したい場合があります。

つまり、シェルからシェルを呼び出す、ということですね。


シェルからシェルを呼び出すサンプル


サンプルシェルは以下になります。

呼び出すシェルと呼び出されるシェルの2つになります。


呼び出す側のシェル

#!/bin/bash

`./sub.sh`
RET=$?
echo $RET

呼び出される側のシェル

#!/bin/sh
exit 10

シェルを呼び出す


シェルを呼び出す場合の記載は簡単です。

シェルのパスを「`」で囲めば呼び出すことができます。


`./sub.sh`

シェルから返り値を受け取る


シェルから返り値を受け取る場合は、呼び出される側は「$?」で取得できます。


RET=$?

呼び出される側は、「exit」を用いて返り値を返却できます。


exit 10



WordPressとTwitterを連携する方法

ロゴ

今回は、WordPressとTwitterを連携する方法を紹介します。

ブログ運営でTwitterのようなSNSを使用するのは、もはや当然になってきています。
やっぱり、せっかくブログを運営しているのであれば、できるだけ沢山の人にみてもらいたいですからね。


本記事では、WordPressとTwitterを連携して、WordPressの記事にツイートボタンを表示する方法までを紹介します。


環境情報


  • CMS:WordPress 5.1.5
  • テーマ:Sparkling 2.4.5

Twitterのプロフィール設定


まず最初に、TwitterのプロフィールにブログのURLを設定するために、Twitterのプロフィール設定をおこないます。


まず、Twitterのプロフィール画面をひらきます。

TwitterとWordPressの連携設定

プロフィール編集ウィンドウをひらきます。
プロフィール編集ウィンドウの「ウェブサイト」に、ブログのURLを入力します。
URLを入力したら保存ボタンを押下して終了です。

TwitterとWordPressの連携設定

Twitterの設定はこれで完了です。


WordPressの設定


次に、WordPressの設定です。
WordPressの「All in One SEO Pack」を使用します。


「All in One SEO Pack」をインストールしている前提で説明していきます。
もしインストールされていない場合は、プラグインの追加からインストールしておきましょう。


WordPressの管理コンソールで、「All in One SEO」→「機能管理」をクリックし、「ソーシャルメディア」を有効にします。

TwitterとWordPressの連携設定

有効にすると、左メニューに「ソーシャルメディア」が表示されるので、クリックしてソーシャルメディアウィンドウをひらきます。

TwitterとWordPressの連携設定

ソーシャルメディア設定ウィンドウで設定しなけれいけない内容は、「画像設定」と「Twitter設定」の2つになります。


画像設定


ここで設定する画像が、投稿した際のTweet上で表示される画像になります。

TwitterとWordPressの連携設定

各項目について説明していきます。


・OG:Imageソースを選択

ツイートした際にどの画像を表示するかを選択します。
おすすめは「アイキャッチ画像」です。
投稿記事に設定するアイキャッチ画像をTweet上に表示することができます。


・画像が見つからない場合はデフォルトを使用、デフォルトの OG:Image

仮にアイキャッチ画像を設定しなかった場合の挙動と、その際に使用する画像になります。


・デフォルトの画像幅、デフォルトの画像高さ

ツイータした際に表示する画像の幅・高さ、になります。


・画像にはカスタムフィールドを利用する

WordPressのカスタムフィールドを使用して記事を投稿する場合に必要な設定となります。
今回はこの方法は使用しないので、説明は省略します。


Twitterカードの設定


次に、Twitterカードの設定をおこないます。

TwitterとWordPressの連携設定

・デフォルトTwitterカード

「要約」「要約の大きい画像」の2種類が選択可能です。


筆者は、「要約」を選択しています。

実際のツイータ上には以下のように表示されます。

TwitterとWordPressの連携設定

・Twitterサイト

TwitterのTwitterIDです。
@から始まるIDになります。
Twitterの設定ウィンドウで確認できます。

TwitterとWordPressの連携設定

・Twitter 投稿者を表示

Tweetの際に投稿者の情報を表示するかどうかになります。
チェックしておいた方がよいです。


・Twitterドメイン

ブログのドメインを指定します。
ドメインなので、httpsは不要です。
本ブログでは「sakusaku-techs.com」になります。


ここまでの設定を完了すると、WordPressのユーザ情報に「Twitter」の入力ボックスが表示されます。
ここに、@からはじまるTwitterIDを入力して、画面下のプロフィールを更新ボタンを押下して保存すれば設定完了です。

TwitterとWordPressの連携設定

Card Validatorでチェックする


Twitterの「Card Validator」というチェックツールで、ここまで設定した内容でTwitterカードが正常に登録されてるかをチェックします。
「Card Validator」は、以下のサイトになります。


サイトのURLを入力して、「Preview card」ボタンを押下してチェックします。


Twitterカードが表示され、ログメッセージに”Card loaded successfully”が表示されれば、Twitterカードは正常に作成されています。

TwitterとWordPressの連携設定

記事投稿時の設定


実際に記事を投稿する際に、Twitterへの連携内容を入力して記事の登録をおこなうことになります。
WordPressの記事ウィンドウで、画面下に「ソーシャル設定」というタブが表示されます。
このタブを選択して、Twitterに連携する内容を入力します。

TwitterとWordPressの連携設定

・タイトル

ツイートした際に表示されるタイトルです。
記事タイトルと同じがいいかと思います。


・説明

ツイートに表示される記事の内容です。
記事の内容を分かりやすく長くならない範囲で入力しましょう。


・画像

ツイートの際に同時に表示される画像です。
ユーザ画像とアイキャッチ画像以外にも、記事内で使用している画像についても設定できます。


・Twitter カードタイプ

「要約」「要約の大きい画像」の2種類が選択可能です。


記事にツイートボタンを表示する


記事にツイートボタンを表示して、記事をみた人がツイートできるようにします。

WordPressに挿入するJavaScriptを、ツイッターのサイト(TwitterPublish)から取得します。


TwitterPublishでは、各種ボタンを表示するためのHTMLが取得できます。

TwitterとWordPressの連携設定
TwitterとWordPressの連携設定

TwitterPublishから取得したHTMLをWordPressの記事に設置すれば、ツイートボタンが表示されます。

TwitterとWordPressの連携設定

フォローボタンも同様に表示されます。

TwitterとWordPressの連携設定


WordPressでトップページのカテゴリー表示を変更する方法

WordPress

WordPressのトップページにカテゴリーが表示されるようなテーマを使用している方は多いと思います。
今回は、このトップページのカテゴリーの表示を変更する方法を紹介します。


ほとんどのWordPressテーマがトップページにカテゴリー表示をおこなっていると思いますが、このカテゴリーの表示を増やしたり減らしたりする方法になります。


PHPファイルを修正する必要はなく、WordPressの設定で変更することができます。


環境情報


  • CMS:WordPress 5.1.5
  • テーマ:Sparkling 2.4.5

カテゴリーとは


WordPressでのカテゴリーとは、記事に設定する属性情報となります。
意味合いとしては『分類』です。


記事を登録するときに、設定可能な情報になります。

WordPressのカテゴリ

記事にカテゴリーを設定することで分類わけをおこない、カテゴリー毎の絞り込みを可能とします。
筆者は、カテゴリーをURLの一部にすることよってURLでもカテゴリーがわかるようにしています。

URLに含まれるカテゴリ

カテゴリーは、1つの記事に対して複数設定する事も可能です。
その場合、筆者はURLが付けにくくなるので、1つの記事に対しては必ずカテゴリーは一つにしています。


カテゴリーの表示内容変更


トップページに表示されているカテゴリーの表示内容を変更しようとします。
具体的には以下の箇所になります。

ヘッダのカテゴリ

今回は、この部分に表示されているカテゴリー表示を変更します。


ブログを運営していくと途中でカテゴリーが増えたりすることがありますが、この部分の表示は自動で増えたりはしないです。
自分で設定を変更する必要があります。


左メニューの「外観」→「テーマ」から、使用しているテーマの「カスタマイズ」ボタンを押下します。
筆者が使っているテーマはSparklingです。

Sparklingのカスタマイズ

Sparklingの設定ウィンドウをひらいたら、左メニューで「メニュー」ボタンを押下します。

Sparklingのカスタマイズ

次の画面では、左メニューで「メインメニュー」ボタンを押下します。

Sparklingのカスタマイズ

メインメニューの設定変更ウィンドウをひらきました。
この画面で、ヘッダに表示されているカテゴリーの表示を変更することができます。


現時点でヘッダに表示されている3つのカテゴリー(Linux、WordPress、Java)が表示されています。
ここに、既に存在するカテゴリーの表示追加をおこないます。


「+項目を追加」ボタンを押下します。


項目追加メニューがひらきました。
今回追加したいのはカテゴリーなので、「カテゴリー」ボタンを押下します。

Sparklingのカスタマイズ

追加可能なカテゴリーが表示されました。
記事が存在するがヘッダに表示されていないカテゴリーについて「+」ボタンを押下して追加していきます。

Sparklingのカスタマイズ

追加が終わったら左上の「公開」ボタンを押下して、ブログのヘッダに反映をおこないます。

Sparklingのカスタマイズ

最後に、実際のブログで変更内容が反映されたかを確認すれば変更完了です。


Sparklingのカスタマイズ後のカテゴリ変更
PCサイト

Sparklingのカスタマイズ後のカテゴリ変更
スマートフォンサイト

まとめ


WordPressのメインメニューに表示されているカテゴリーの変更方法を紹介しました。


まとめ
  • カテゴリーの表示方法変更は、WordPressの設定変更で可能
  • カテゴリーは自動で増えないので注意が必要


技術ブログは稼げるのか?始め方と、一年経った感想

Googleアドセンス

本ブログは2019年4月から始めましたので、ちょうど1年が経ちました。
最初は、ちょっとした収入があったらいいなーと思い始めましたが。。。

今回は、この1年の結果をいろいろ書いていきたいと思います。



結論を言いますと。。。

稼げない可能性が大きい。。。だが見込みはある!

ですね。


これから技術ブログを書き始めようとしている人や、筆者と同じようにブログをやっていて悩んでいる人に読んでもらいなと。


PVと記事数


筆者がブログを1年やってきた結果の数値としては以下になります。


  • PV:約 3,000 PV/月
  • 収益:約   500 円/月
  • 記事数:   35 記事

しょぼすぎますね。。。
稼ぐどころか、レンタルサーバやドメインの領域を差し引きで考えると若干の赤字です。
ブロガーで20~30万/月 稼いでいるといっている方をよくネットが見受けられますが、そういう人ってめちゃくちゃすごいですね。


じゃあ、技術ブログは全て稼げないのかというとそんな事もない気もしています。
筆者の場合は圧倒的に記事数が足りないからPVも収益もしょぼいですが、もっと頑張ってブログの更新をおこなっていけばなんとか。。。という気がします。


とはいっても実際は難しいですね。
筆者はサラリーマンブロガーでそこそこ仕事が忙しいので、毎日ブログの更新なんとどてもできない。
サラリーマンブロガーがそこそこの感じで実施する限りでは、上記の売り上げがいいところ。


ということで、売り上げは上記のように散々なのですが、技術ブログをやっていて気が付いた事を書いていきます。


ブログはレンタルサーバ借りてWordPressで始めよう!


技術ブログをはじめようとした場合、サーバはどうするか?っていうことを悩みます。
選択肢としては、大きく分けて以下の3つになります。


  • 無料ブログを使う
  • レンタルサーバを使う
  • 自分でサーバを構築する

※手っ取り早い順です


無料ブログを使う


ユーザ登録するだけでブログを開設できるサービスが既にあるので、この方法でブログを始める方法もあります。
Qiita、はてなブログ、etc。。。いろいろありますね。


しかし、稼ぐことは目的としてブログを作る場合は、この方法はお勧めしません。


例えばQiitaは有料記事は作成できないので、Qiitaで収益を上げることはできないです。
はてなブログでは優良記事を作成することはできるのですが、ブログ初心者がいきなりこの領域に足を踏み入れるのはハードルが高い。
いきなり技術本を書くような感じ、ですかね。


こういう無料ブログを使うメリットとしては、記事を投稿するためのUIやサイトデザインがとても優れている点です。
デザインも良いので、ブロガーはあまり苦労せずにちょっとしたブログが作成できます。
あと、運営元がしっかり運営してくれているので、何かあっても問い合わせ先があるのは安心です。


無料ブログで収益を上げたいという人は、無料ブログで記事を上げまくって、自身の著書の紹介や、仕事の紹介を頂くという形での収益を上げるやり方になると思います。
どっちみち、ブログ初心者にはお勧めできない方法です。


メリット
  • 手っ取り早くブログを始めることができる。
  • 記事を投稿するためのUIが優秀。
  • ブログ開設費用は無料。
デメリット
  • 収益を上げる仕組みに制約がある。
  • ドメインが独自ドメインではない。 ※後で説明します。

レンタルサーバを使う


この方法が一番おすすめです。


レンタルサーバを自分で契約して、WordPress上でブログを構築する方法です。
レンタルサーバを契約するとは、ブログを置く場所(サーバ)をレンタルするという意味です。


レンタルサーバというくらいなので、費用は発生します。
いきなり高機能はサーバは不要で、最初は安価なサーバをレンタルするので十分です。


おすすめとしては以下ですね。

  • エックスサーバー
  • ロリポップ
  • さくらのレンタルサーバ

筆者は「ロリポップ」がおすすめです。
とにかく安い。
どうせブログ開始当初はろくにアクセスはないので、高スペックなサーバは不要です。


安いといっても、オプションを付けると若干費用は上がっていきます。
筆者は、総額は以下になります。


サーバ基本料金 ¥1,980/3ヵ月
バックアップオプション ¥300/月
ドメイン使用料金 ¥1,628円/月

トータルで、「1,095円/月」です。


サーバ基本料金さえあればブログは始めることができます。
バックアップオプションは、何かしらの原因でデータが消えてしまうリスクを恐れて契約しています。



ドメインは、URLを構成する情報になります。
本ブログのURLバーに表示されている「sakusaku-techs.com」の部分ですね。
このドメインは、世界で唯一です。
無料ブログではこれができせん。(オプションとして提供しているサービスもあり)

無料ブログの場合、どうしても無料ブログのドメイン配下のURLがあてがわれるので、以下のようなドメインを含んだURLになってしまいます。

Qiitaの場合)qiita.com/xxx/
   ※「xxx」は「ユーザ名

上記のようなURLを回避するためには、自分でドメインを契約した方がよいです。


次にWordPressです。
WordPressは、広い意味でCMS(CustomerManagementSystem)と呼ばれています。


WordPress自体にブログを作成する上での機能があらかじめ準備されているので、簡単にブログを作ることができます。
HTMLやCSSの知識がある人であれば、画面デザインを細かく修正することもできます。


メリット
  • 自分で自由にブログのデザインをカスタマイズすることができる。
  • 独自ドメインを付与することができる。
  • 収益を上げる仕組みに制約がない。
デメリット
  • レンタルサーバの料金がかかる。
  • ブログのメンテナンスは自分でやる必要がある。

自分でサーバを構築


まあ、お勧めしません。
というか、ブロガーレベルでは無理です。


自分で、何十万もするサーバ(ハードウェア)を準備して、ミドルウェアも自分で準備して、自宅にサーバを配置して。。。まあできないです。
ちょっとしたインターネットサービス企業じゃないと無理ですね。


毎日ブログを更新!なんて無理だよ。


はい。言い訳です。

できる人はできるんだろうけど、サラリーマンブロガーでは無理ですね。
よく、”とりあえず100記事かけ!””毎日ブログを更新することが大事だ!”っていうことを書いているブログがありますが、現実的には無理です。
筆者は、一か月に3記事くらいのペースです。


でも、毎日ブログの更新がやれる人はPVは一気にあがるでしょうね。
実際に筆者も、よくブログを追加・更新している時期は、PVが上がっていった感触はあります。


一番大事なのは、”継続すること”だと思います。
筆者は、毎日ブログを更新は無理でしたが、途中でやめないようにしてきました。


まだまだへっぽこですが、こんなペースで3,000PV/月は、ちょっと満足しています。
自分をほめてやりたい。


なので、毎日ブログを更新できない人でもあきらめずに、継続してブログを運営していくことが大事だと思います。


アドセンスの審査は恐れなくていい


収益を上げる方法として最もメジャーな方法はGoogleAdSenseになります。
GoogleAdSenseとは、自分で運営しているWEBサイトにGoogleアドセンスのタグを貼り付けるだけで、サイトを閲覧しているユーザーに対して最適な広告が自動で表示され、その広告がクリックされるたびに報酬を受け取れる仕組みです。


筆者のブログでは、1クリックあたりの広告費は20円~60円くらいかなと、思います。


GoogleAdSenseの広告タグをブログに張り付けるためには、ブログの審査があります。
Googleにブログのサイトを申請して、Googleが”あなたのサイトに広告貼ってもいいですよ”と許可をもらわないとだめです。


この審査が結構厳しい。。。
いろいろなブログで、”十回目でやっと合格した!””合格するまでに半年かかった!”という意見があります。
さらには、合格させるためにコンサルティングしますよ。3万円で、という人もいます。

ちょっと驚かしすぎじゃないですかね?


自慢じゃないですが、筆者は2回目で審査に合格しました。
まあ1回は不合格を食らっているんですが。。。


以下のポイントをおさえれば、3回目くらいの審査で合格します。

  • 客観ではなく主観の記事を書く
  • 1記事は最低1,000文字以上
  • いざとなったら、上記2つに一致しない記事は削除して再審査

Googleアドセンス
Googleアドセンス

合格した後も広告が出なかったり、とかいろいろ悪戦苦闘する必要はあるのですが、それは以前の記事を参考にしてください。


アナリティクスは必須


GoogleAnalyticsをブログに組み込んでおきましょう。
自身のアクセスは把握しておくことは大事です。


GoogleAnalyticsは、サイトの訪問ユーザ、ページビューを解析してくれて、専用のダッシュボードで表示をおこなってくれます。

GoogleAnalyticsダッシュボード

導入方法は簡単で、Googleアカウントを作成して専用タグをGoogleから発行してもらい、そのタグをブログに組み込めば使えるようになります。


Googleアナリティクスでは、登録したサイトのユーザーの行動に関するデータがわかります。
例えば、

  • サイトの訪問者数はどれくらいか
  • 訪問者はどこから来たのか
  • 使われたデバイスはスマホかパソコンか

などのデータを計測することができます。


ブログをはじめたら、まずは導入しておいたほうがいいです。
日々のアクセスがわかるので、ブログを続けるモチベーションにつながります。

アクセスが無さすぎてモチベーションが下がるといったリスクもありますが。。。


サーチコンソールも必須


GoogleSearchConsoleもブログ運営では必須になります。


GoogleSearchConsoleは、Google 検索結果でのサイトの掲載順位を監視、管理、改善するのに役立つGoogleの無料サービスです。


GoogleSearchConsoleは、簡単に言うとブログの監視サービスです。
Google検索結果の表示回数やクリック回数も表示してくれます。

GoogleSeachConsoleダッシュボード

筆者は一回、SearchConsoleに助けられたことがあります。
WordPressのアドインの関係でページ表示がされてない現象が発生したのですが、GoogleSearchConsoleがエラーを検知してくれました。
危うく記事が全滅するところだったのですが、エラーを検知してくれたおかげで、早期に現象を把握することができ、対処することができました。


まとめ


いろいろ正直に書きました。
世の中にはブログのPV数をあげるために高額なコンサル料金をとる輩もいますから、気を付けてくださいね。


あせらずじっくりとやっていくことが大事だと思います。
筆者もがんばります。
さすがにもうちょっと記事の更新頻度をあげないと。


まとめ
  • ブログで稼ぐのは今のところは無理。だが可能性はある。
  • ブログは、レンタルサーバを契約してWordPressで構築するのがベスト。
  • アドセンスの審査は以外と簡単に合格する。
  • サーチコンソールも必須。



Windows環境でNode.JSとPostgreSQLを接続してクエリ発行


前回、Windows上にNode.jsの環境を構築して、Hello,Worldを出力されるところまでおこないました。



今回は、Node.jsとPostgreSQLを接続して、データベースに格納されているデータをブラウザ上に表示させるところまでおこないたいと思います。


やっぱり、データベースに接続してデータを表示するというところまでは、お勉強としておさえておきたいところです。


環境情報


  • OS:Windows10
  • Webサーバ:Node.js 12.16.3
  • DB:PostgreSQL9.6

PostgreSQLとは


PostgreSQL(ぽすとぐれすきゅーえる)は、オープンソースのデータベースになります。
よく、「ぽすぐれ」と言われています。


PostgreSQLはオープンソースなので、気軽に使えるのが良いところです。
かつ、標準SQL にならった実装になっていますので、標準SQLでほぼ全てのクエリを実行することができます。


この記事では、PostgreSQLのダウンロードと環境構築の紹介は省略します。


node-postgres


Node.jsでPostgreSQLと接続をおこなうためには、「node-postgres」を使用する必要があります。
「node-postgres」は、npmでインストールをおこなうことができます。

任意のフォルダを作成して、そのフォルダで以下のコマンドを実行します。


npm install --save pg

インストールが完了すると、インストールしたフォルダに「node_modules」が作成され、インストールが完了します。
このフォルダにプログラムを作成していきます。


PostgreSQLに接続してデータ表示


実際にNode.jsのプログラムを作成して動かしてみます。
データベースにはあらかじめて、以下のデータを格納しておきます。

person_id name kana gender
1 山田太郎 やまだたろう 1
2 山田次郎 やまだじろう 1
3 山田三郎 やまださぶろう 2

上記のデータをクエリで取得し、ブラウザ上に表示するプログラムを作成します。
プログラムとしては以下になります。


// モジュールを準備
var http = require('http')
var {Client} = require('pg'); 

http.createServer(function (req, res) {

    // PostgreSQLに接続
    var client = new Client({
        user: 'postgres',
        host: 'localhost',
        database: 'nodeJsDB',
        password: 'postgres',
        port: 5432
    })
    client.connect()

    // HTTPレスポンスヘッダを出力
    res.writeHead(200, {'Content-Type': 'text/html;charset=utf-8'})

    // クエリを実行してTABLEタグで出力
    var query = client.query(
        "select person_id, name, kana, gender from persons;",
         function(err, result) {
        res.write('<html><head></head><body><table>');
        for(lc = 0; lc < result.rows.length; lc++){
            res.write('<tr>');
            res.write("<td>"+result.rows[lc].person_id+"</td>" ); 
            res.write("<td>"+result.rows[lc].name+"</td>" ); 
            res.write("<td>"+result.rows[lc].kana+"</td>" ); 
            res.write("<td>"+result.rows[lc].gender+"</td>" ); 
            res.write('</tr>');
        }
        res.end('</table></body></html>')
    });
}).listen(8989)

プログラムとしては簡単です。
PostgreSQLに接続してクエリを実行し、実行結果をTABLEタグに出力するのみです。
nodeコマンドでNode.jsのサーバを起動します。


node pgConnect.js

URLにアクセスすると実行結果が表示されます。

http://localhost:8989/pgConnect

Node.jsの実行結果

まとめ


いかがでしょうか?
PostgreSQLであっても、Node.jsから簡単に接続がおこなうことができました。

本当はMongoDBとか使ってみたいんですが、しばらくはPostgreSQLでNode.jsの勉強を進めようと思います。



WindowsにNode.jsの環境を構築する-サンプルプログラム実行まで


最近、業務でNode.jsを使ったプロジェクトが増えてきたように思います。
筆者は業務アプリケーションの開発をおこなうSIerなので、実態としては業務アプリケーションではJavaや.NETが主流です。


とはいっても、ポツリポツリと、Node.jsを使ったプロジェクトも出てきています。
時代遅れにならないように、個人的に勉強を始めようかとおもい、まずは環境構築からはじめてみます。


という訳で今回は、Node.jsのダウンロードと環境構築、および、サンプルプログラムを実行するまでを紹介します。


環境情報


  • OS:Windows10
  • Webサーバ:Node.js 12.16.3

Node.jsのダウンロードとインストール


Node.jsは、以下の公式サイトからダウンロードできます。



2020/5/3現在では、LTS版と最新版の2つがあるようです。
LTS版とは「Long term support版」の略でして、サポート期間が長く、そのサポート期間の間はバグの修正や主要な機能の保証がされているバージョンのことです。


何かしら最新版を使用しないといけない事情がない限りは、LTS版をダウンロードすることをお勧めします。

という訳で、今回はLTS版をダウンロードします。


「node-v12.16.3-x64.msi」というファイルをダウンロードしたら、そのファイルをダブルクリックしてインストールを開始します。
インストール自体は、ウィザードに沿ってインストールをおこなっていけば、簡単に終了しました。


インストールが完了したら、インストール完了後の確認をおこないます。
インストールが完了すると、Windowsのプログラムメニューに「Node.js command pronpt」というメニューが増えているかと思います。
そのメニューをクリックします。

Node.jsのコマンドプロンプト

コマンドプロンプトがひらきます。
Node.jsのインストールバージョンを確認するために、以下のコマンドを実行します。

node --version

インストールされたNode.jsのバージョンが表示されれば、無事にインストール完了です。


JSファイル単独で実行


JSファイルを作成してコマンドプロンプトで実行してみます。
「helloWorld.js」というサンプルプログラムを作成して実行します。


「helloWorld.js」の中身は、”Hello,World”をコンソールログで出力するだけです。

console.log('Hello, World')

コマンドプロンプトで、nodeコマンドを使用して実行します。

D:\>node helloWorld.js
Hello, World

Webサーバで実行


次は、Webサーバを起動してブラウザ上で”Hello,World”を表示します。
「helloWorldServer.js」というサンプルプログラムを作成します。

こちらも同様に、”Hello,World”を標準出力するだけです。

var http = require('http')

http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/plain'})
    res.end(`Hello World \n`)
}).listen(8989)

コマンドプロンプトでWebサーバを起動します。

D:\>node helloWorldServer.js

コマンドを実行した後に、ブラウザで以下のURLにアクセスします。

http://localhost:8989/helloWorldServer

ブラウザ上に”Hello,World”が表示されました。

Node.jsのWebサーバでHelloWorld

まとめ


いかがでしょうか?
簡単に”Hello,World”が表示できました。


開発環境はできたので、これをベースにいろいろ勉強していきたいと思います。