tshohe's memo

おぼえたことをかく

自宅でKibanaを最大限に活用してみる #1

自宅でのElastic Stack活用事例その1

ルータのsyslog可視化

我が家のBaffalo製ルータ(WSR-2533DHP)にはsyslogを他ホストに転送する機能があります。

f:id:tshohe:20180719231933p:plain

syslogをLogstash/Fluentd/rsyslogd等で集約しElasticsearchに投入することで、様々な情報を可視化可能です。ログに知らないMacアドレスがあったらアラート上げるようにしてみても面白そう。(基本的にはMacアドレスフィルタリングしてると思うので意味は薄いですが)

f:id:tshohe:20180719232152p:plain

NetFlow/sFlowが出力できるルータ(Ciscoとか)だと下記でネットワークトラフィックも可視化できます。まあ管理画面にダッシュボードとかありそうですが。

Logstash (logstash-input-udp + logstash-codec-netflow) www.elastic.co

Fluentd github.com

TeamGantt + Trello 連携を試してみる

最近何かの記事で見たガントチャート作成ツール「TeamGantt」の使用感をチェック。

https://www.teamgantt.com/

1 Project 3人までであればFreeで利用できるみたいです。

今回試してみたかったのがTrelloとの連携機能。Trelloのカードをガントチャートに追加したり、日付や完了率等を同期してくれるみたいです。

http://info.trello.com/power-ups/teamgantt

連携手順

Trello側のボードメニューからPower-Upを選択します。

f:id:tshohe:20180703214056p:plain

TeamGanttを検索し選択

f:id:tshohe:20180703214149p:plain

歯車アイコン > 「Power-Upの設定を編集」から、TeamGanttの認証情報を入力しアカウントをリンクします。

f:id:tshohe:20180703214231p:plain

あとはプロジェクトを選択して紐づけ完了です。

f:id:tshohe:20180703214311p:plain

これでTrello側でカードを作成したタイミングで、TeamGanttにもタスクが作成されるようになりました。
あとはTrelloの右上の「View in TeamGantt」を押すとボード上にガントチャートを表示することができます。

f:id:tshohe:20180703214358p:plain

f:id:tshohe:20180703214446p:plain

まとめ

  • Pros
  • Cons
    • 人は紐付いていないので、アサインはどちらかで管理する必要がありそう。(タイマー機能やレポート機能を使うのであればTeamGanttが良さそう)

まだまだ色々機能がありそうなので、暇な時に試して遊ぼう...。

react-modalのスタイルで少し詰まった話

不慣れなフロントエンドについての勉強。(業務で使うこともない...)

今勉強用に作っているアプリのスマホ対応が適当だったのでちゃんとしてみることに。

このアプリではモーダルのコンポーネントとして react-modal を利用していて、 これまでは下記のようにjsxファイル側で定義していたんですが、これだとデバイスごとに設定変えたりとかがやりにくいので、CSSで定義するように。

これまでの定義

import Modal from 'react-modal';

const customStyles = {
  content: {
    top: '50%',
    left: '50%',
    right: 'auto',
    bottom: 'auto',
...

上記をコメントアウトしてReactModal__Contentクラスに対してスタイルを定義します。

.ReactModal__Content {
        width: 90%;
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
}

これでできるかと思ったら、customStylesをコメントアウトしたときにモーダルのstyle属性に各種ポジション情報が0pxで定義されていました。そのため、モーダルが画面の左上に寄ってしまっていました。 (defaultStyleがそうなっている模様)

https://github.com/reactjs/react-modal/blob/master/src/components/Modal.js#L84

style="position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: rgba(255, 255, 255, 0.75);"

そこで、top, left, right, bottomは結局customStyles側で定義することに。
今回はデバイスごとに変更したいのがwidthだけだったので良かったけど、topとかいじりたくなったら面倒そうだな...。

Github PagesのサイトをHugo化する

github.ioに配備する静的サイトはこれまでhtml直書きでしたが、もっと手軽にリッチなサイトを作りたいと思ったので、静的サイトジェネレータを使ってみることに。
Jekyllも考えてましたが、ぐぐったらテーマ変更がしんどいとかビルドが長いとかマイナス意見が多かったのでHugoを採用。

主な採択理由

  • goでビルドが高速
  • homebrewで入る
  • テーマが豊富

導入

$ brew install hugo
$ hugo new site [任意dir]

テーマ選び

ここに色々とあります。
https://themes.gohugo.io/

色々テーマをあさっていてかっこいいと思ったもの。 themes.gohugo.io themes.gohugo.io themes.gohugo.io themes.gohugo.io

見た目が一番リッチだと思ったCreativeにしてみる。
git cloneでthemesディレクトリに配備。

$ cd themes/
$ git clone https://github.com/digitalcraftsman/hugo-creative-theme

config.tomlを修正

baseURL = "https://tshohe.github.io"
languageCode = "jp-ja"
title = "tshohe's website tsts"
theme = "hugo-creative-theme"
googleAnalytics = ""

[params]
    name = "tshohe"
    description = "IT Engineer (SRE)"
    favicon = "favicon.ico"

    # Navigation
    [params.navigation]
        brand = "tshohe's WebSite"

        [params.navigation.links] #(リンクテキストを変更可能)
            about     = "About"
            services  = "Services"
            portfolio = "Portfolio"
            contact   = "Contact"


    # Hero section(ジャンボトロンにデカデカと出る文字とか)
    [params.hero]
        slogan     = "TSTS"
        subtitle   = "This site is for introduce my blog and portfolio."
        buttonText = "Find out more"


    # About section
    [params.about]
        headline    = "About me"
        description = "I'm now working as a SRE in Tokyo.  [はてなブログ](//tsts.hatenablog.com/)"


    # Service section(サービス欄に表示するもの)
    [params.services]
        headline = "My services"

        [[params.services.list]]
            icon = "fa-cloud"
            title = "Memorizer"
            description = "Web Application to enhance memory. [Go to this service](//memorizer/lp.html)"

            ....

    # Portfolio modals(モーダルに表示する項目)
    [params.portfolio.modal]
        client = "Client"
        date = "Date"
        category = "Category"
        buttonText = "Close"

    # Aside section (ダウンロードButtonとか表示できる、製品ページに使うならダウンロードボタンとかに良さそう)
#   [params.aside]
#       headline = "Get the Creative Theme for Hugo"
#
#       [params.aside.button]
#           text = "Download now"
#           link = "//github.com/digitalcraftsman/hugo-creative-theme"

    # Contact section
    [params.contact]
        (問い合わせ先情報)

Serviceでは下記のアイコンを色々指定できる模様。   fontawesome.com

あとは hugo コマンドでビルドして~.github.ioに配備するだけ。

しかしなぜかServiceのdescriptionでは [text](url) が効いていない。
themesを確認してみたらmarkdownifyが無かったのでMarkdownとして処理されていなかった。

$ vi themes/hugo-creative-theme/layouts/partials/services.html 
-{{ with .description }}
+{{ with .description | markdownify }}

無事リンクにできました。

f:id:tshohe:20180620235814p:plain

Atom で Spring Bootのコードを書くようにしてみる

未だにJava + Eclipseでアプリを書いているのですが、最近javascriptのコーディングをするのにAtomに色々パッケージを入れてしまったので、JavaAtomに寄せてしまおうと思いトライ。

下記パッケージを導入

  • autocomplete-java
    • オートコンプリート
  • linter-javac
    • javaの静的コードチェック
  • atom-maven
    • mvnコマンド実行用
$ apm install autocomplete-java linter-javac

UIは今回入る atom-ide-diagnostics か linter (前入れてた...)のどちらかしか選べないので、linterをdisableに。(無視したら二重に出てました)

f:id:tshohe:20180616184427p:plain

無事、Diagnosticsタブに静的解析結果が表示されるようになりました。(javacの実行パスは指定する必要があります)

f:id:tshohe:20180616185934p:plain

静的解析時になんかパソコンが唸るようになった気がするが、Eclipse JDTが重いんだろうか...。

あとspring bootの起動ができるようにmvn spring-boot:runを簡単に実行できる何かがほしいなと思って入れたatom-mavenですが、細かく指定できない様子。(clean, install, testとかしかない)
邪魔だけどTerminalをペイン分割で出しておくしかなさそう。

f:id:tshohe:20180616184433p:plain

イケてるエンジニアはIntelliJとかなんだろうな...と思いつつ、CEはインストールはしてるけど一度も触れてません。 Frameworkのサポートが無償じゃないのが痛いような気がしてるんですがあんまり関係ないんだろうか...。

まとめ

  • Javaの静的解析結局重い説
  • Eclipse側に寄せてしまったほうがいいんじゃないかという気も...

(追記)

ボイラーコードを無くすためのLombokで生成されるgetterで大量に型未定義エラーが...
どう回避すれば...

メールに気付くために

普段スマートフォンをあまりいじらないため、会社から来るアラートメールを見落とすことが非常多い。そこで、見落とさない工夫を考えてみる。

  1. Google Home で通知する
  2. Twilioで電話通知する

お金がかかるのはちょっと嫌なのでひとまず1案を実施してみる。我が家には頭にspeakと付いた発言があるとGoogle Homeから発言するBotがいるのでそちらを利用。

  • 特定のラベルをついたメールが来たらIFTTTでSlackに通知
    • 丁度よさそうなAppletがあったので利用 ( https://ifttt.com/applets/198622p-slack
    • Gmailでやばそうな内容のメールをフィルタリングしてラベル付与する設定実施。
    • Applet設定でMessageを「speak やばそうなメールが来ました!タイトルは{{Subject}}、本文は{{BodyPlain}}」とする。
  • Slackのメッセージを受けてBotからGoogle Homeに発言させる

f:id:tshohe:20180614001705p:plain
メール通知設定

Bot(hubot)のコードはざっくり下記のような感じ

googlehome = require 'google-home-notifier'
ip = '[Google Home IP Address]'
language = 'ja'

module.exports = (robot) ->
  robot.hear /speak(.*)/, (msg) ->
    text = msg.match[1]
    language = 'ja'
    googlehome.ip(ip, language)
    googlehome.notify(text, callback)
    msg.reply text

(省略)

これで少しは見落としが減るといいな。あと睡眠妨害されないような工夫はすべきか迷う。。。

(追記)

深夜に起こされないようにGoogle Homeのアプリで00:00-06:30は音量を0に設定。

設定 > 夜間モード

f:id:tshohe:20180615004147j:plain:w300 f:id:tshohe:20180615004514j:plain:w300

はじめに

制約を設けないと際限なく怠けてしまうので、勉強の記録を残していくブログを開設しました。
Web系エンジニアとして、よりナウくなるために今まで触れてこなかったいろんなものに触れつつそれを記録して行けたらと思ってます。

ひとまず現状のやりたいことを書き連ねてみる

ざっくりすぎ...

あとはポートフォリオとかも作っていきたいな。ひとまずはSpreadsheetでいいか。