Elastic Stackを活用して何ができるか

前回のブログで、ElasticsearchとKibanaのインストール方法について書きましたが、

「そもそもどんなことに活用できるの？」

ということで、まずはそちらを調べてみました。

はじめにElastic Stackについて説明します。

Elastic StackとはElastic社が提供するOSSのソフトウェア群の事を指します。

前回のブログで紹介したElasticsearchはデータ保存やインデックス分析、Kibanaはそれを可視化したユーザーインターフェース部分を担っています。

データの取り込みにはLogstashやBeatsなどがありますが、ElasticsearchにはRESTAPIが提供されているので必ずしも必須ではありません。

パイプライン処理で大量のログデータを処理したい場合など以外は、なくてもいいと思います。

このElastic Stackを使うことで、ログデータなどのさまざまなビッグデータを可視化し、分析可能なBIツールとして活用することができます。

Elastic Stackを活用しよう

できることは何となくわかったけど、具体的にはどのようなソリューションに適用できるの？

本家のサイトに、ユーザー事例が載っていました。

www.elastic.co

 メールアドレスを登録すれば、紹介動画を見ることもできます。

・サーバートランザクション

・異常検知 / 機械学習

・ログ解析

・情報一元管理

・全文検索

サーバーの管理に用いたり、コンテンツ管理に用いたりと、

さまざまな用途への適用が可能です。

このデータを得て、次にどのようなアクションにつなげられるか、

というのが重要ですね。

今回はここまでにしておきます。

Elasticsearch&Kibanaをインストールする

最近は多くの企業がOSSを活用したソリューションを提供している。
そのOSSの一つにElasticsearchとKibanaがある。

Elasticsearch・・・Elastic社の柔軟なデータベース
Kibana・・・Elasticsearchのデータを可視化するツール

「ビックデータを可視化していろいろ分析したい！」

そんな期待に応えるのがKibanaであり、Kibanaが参照するDBがElasticsearchである。
これらはセットで使うのが一般的であるが、必ずしもそうでなくてもよい。

Kibanaの開発者がElastic社に入社して、より親和性の高いプロダクトになった、というのが、 セットで扱われる理由である。

今回はKibanaを動作させるまでの手順をまとめた。

インストール手順

<PC環境>
OS環境：Windows10 64bit
Memory: 8GB
<ソフトウェア情報>
Elasticsearch (v6.2.4 / April 17, 2018)
Kibana (v6.2.4 / April 17, 2018)

①Elasticsearchをインストールする

下記URLよりダウンロードして実行する。自分はmsiをダウンロード。
Download Elasticsearch Free • Get Started Now | Elastic

デフォルトで問題なし。

一時的にテスト環境を作りたかったので、手動起動に設定。

いろいろなプラグインをこのときに選択できるが、あとでもできるので今はとりあえず何も選択しない。

メモリ等の設定だが、ここも最適化されているのでデフォルトのままでOK。

下記の実行ファイルを管理者権限でダブルクリックすればまずはElasticsearchの立ち上げは完了。
C:\Program Files\Elastic\Elasticsearch\6.2.4\bin\Elasticsearch.exe

下記にアクセスして起動を確かめることができる。
http://localhost:9200/

下記のような画面が出れば正常に起動できている。

{ "name" : "XXXXX",
"cluster_name" : "elasticsearch",
"cluster_uuid" : "XXXXX",
"version" : {
"number" : "6.2.4",
"build_hash" : "XXXXX",
"build_date" : "2018-04-12T20:37:28.497551Z",
"build_snapshot" : false,
"lucene_version" : "7.2.1",
"minimum_wire_compatibility_version" : "5.6.0",
"minimum_index_compatibility_version" : "5.0.0"
},
"tagline" : "You Know, for Search"
}

②Kibanaをインストールする

下記URLよりダウンロードする。自分はWindows版のZIPをダウンロード。
Download Kibana Free • Get Started Now | Elastic
※時間がかかるので、①で起動したElasticsearchは停止させたほうがよい

ZIPを任意のフォルダに展開し（デスクトップでもよい）、
kibana-6.2.4-windows-x86_64\configの中にある、kibana.ymlを編集する。

21行目の#をとりはずし、①で起動したElasticsearchのURLを有効にする
elasticsearch.url: "http://localhost:9200"

Elasticsearch起動後に、
kibana-6.2.4-windows-x86_64\bin\Kibana.batを管理者権限で実行する。

下記にアクセスすることで正常にKibanaが起動していることを確認できる。
http://localhost:5601

このような画面が出ればOK。

これでElasticsearchとKibanaのインストールは完了!!

次回は実際に使ってみます。

はてなブログで画像サイズを指定する

画像を投稿する際、少し困ったので記載する。

通常は横幅いっぱいに画像が表示されるが、下記の方法で指定することができる。

w300(300pixel)を指定する

[f:id:xxxx:2018yyyyyyy:plain:w300]

下記のサイトを参考にした。
はてなブログで画像のサイズを変更する方法(Markdown環境) - conf t

オススメのFreeアイコン・イラスト

私が気に入って使っているアイコンとイラストを紹介します。

アイコンはこちらです。

シンプルかつお洒落で使いやすいです。 flat-icon-design.com

イラストはこちらです。

海外のサイトですがとても気に入っています。 www.freepik.com

例えばこんなイラスト。

Designed by Freepik

やっぱりフラットデザインはかっこいいです。

※ライセンスについて 基本的にフリーですが、規約によるとFreepikの方は、Designed by FreepikのリンクをWebページに載せる必要がありそうです。

CSS 記法まとめ

役に立つ記法をここに書き溜めていく。

囲みデザインサンプル

[HTML]

<div class="box">
    <p>TEST</p>
</div>

[CSS]

.box {
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    color: #ffffff; /*文字色*/
    background: #007bff; /* 背景色 */
    border: solid 3px #007bff; /* 枠線 */
    border-radius: 5px; /* 角の丸み */
    display: inline-block; /* 枠を文字の長さに調整する */
}
.box p {
    margin: 0px; 
    padding: 5px;
}

ちなみにhtml上で上書きしたい場合はstyleを使って下記のように書くコトもできる。

<p style="color:#ffffff;background:#007bff;padding:7px;border:solid 3px #007bff;border-radius:5px;display:inline-block">TEST</p>

下記のサイトを参考にした
【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30
【CSS】borderの長さを調整する方法3つ：文字に応じて可変など

はてなブログを削除する

はてなブログ（無料版）では３つまでブログを作成できるのですが、
いざ削除したいと思った時にどうやって削除したらいいのか迷ったのでメモ。

ブログ＞設定＞詳細設定＞ブログ削除

とても親切にまとめてくださっている方がいました。
www.howtonote.jp

ありがとうございました。

ウェブサイト構築（所要時間の目安：30分）

少し時間ができたので、勉強がてらPHPのウェブサイトを立ち上げてみました。

WEBに関しての知識はまったくの初心者だったのですが、意外にも30分くらいで構築できてしまったのでやり方をメモしておきます。今回は全て無料でのウェブ構築になります。

こちらが今回構築したウェブサイトです。

意外と本格的なものが。。。

https://ks-biz.herokuapp.com

やり方を紹介します。

サーバー環境構築（10分）

下記のページを参考にしてやりましたが、本当に10分でできる。
mediamill.jp

herokuとDropboxのアカウントを作って連携させただけです。

heroku・・・アプリケーションサーバー(PaaS)
Dropbox・・・クラウドストレージ

※ちなみにindex.htmlだとherokuでエラーになるのでindex.phpとする必要があります。
※ちょっとだけハマりかけた

参考までにindex.htmlを載せます。これは自分で作成してフォルダに置く必要があります。
（ローカル環境で見るときはhtmlで、herokuにアップする時に拡張子をphpに変えました）

10分でサンプルページ（Hello world!）まで表示できました。

ただこのあとどのようにWEBページを充実させるかが難しい気が。。。うーん。

WEBサイトのデザイン（20分）

そんな悩みを解決する手段がありました。
デザイン才能のない私が自力でCSSを書くのは難しいので、ここはBootstrapのテンプレートを使います。
Bootstrap · The most popular HTML, CSS, and JS library in the world.

まずはこのテンプレートを使いながら、少しずつ自分用にカスタマイズしていけばよい。
ということで、とりあえずソースコードをダウンロードしましょう。
(2018.05.04時点での最新はV4.1.1でした)

こちらにBootstrapについて書かれた記事があるので参考にしてもよいかも。
Webデザイン初心者でもできる、Bootstrapの使い方超入門 (1/4) - ＠IT

docs>4.1>examples

この中にサンプルページのデータが入っているので、それを参考にしながら
さっきのほぼ空のindex.htmlにコピペしていけばすぐに今風のウェブページができあがります！

※CSSファイルを読み込む箇所のパスは変える必要があります(Link)

色を変えたいときはCSS側をいじると大変なので、
html側にstyle=""を加えて上書き設定するのが楽です。

下記サイトを参考にしました。
http://buburinweb.wp.xdomain.jp/css-detailing

今回作成したような静的Webサイトは定期的に更新するのは難しい

HTMLとCSSを駆使して自分の思い描くウェブページを定期的に更新しようと思ったら、
相当な労力がかかります。もっと簡単に定期更新したい。
そうなってくるとやはりブログを活用するに限ります。
※herokuにWordPressを導入しようとも思ったのですが、手間がかかりそうなのでやめました。

ただブログだと記事の数が膨大になるほど記事の検索が複雑になってしまうので（できれば必要な記事のみあとで検索したい）、
私はウェブページとブログページのハイブリッド型で運用していくことにしました。

ブログは「はてなブログ」を開設しました。このブログですね。
ks-biz.hatenablog.com

とりあえず、無料の範囲でいろいろやってみます。