Hugoにgoogle analyticsを設定する

config.toml に以下を追加

googleAnalytics = "{your tracking code}"

Hugoはgoogle analytics用のテンプレートをすでに用意している。 テンプレートファイルに以下の一行を追加だけで良い。

{{ template "_internal/google_analytics_async.html" . }}

これでビルドすればgoogle analyticsコードが埋め込まれる。

参考: Internal Templates | Hugo

dockerコンテナで起動したPHPビルトインサーバにアクセスできない

適当にdocker コンテナを走らせる。-p で8080ポートを指定。

$ docker run -it --name {container-name} -d -p 8080:8080 {image-name}

docker コンテナ内でphpファイルを作成し、php ビルトインサーバを以下のように動かした。

$ echo "<?php echo 'hoge;" > index.php
$ php -S localhost:8080

ブラウザで http://localhost:8080 にアクセスしてみる

f:id:tic40:20180305214812p:plain

見れない。

localhostを0.0.0.0 にしてビルトインサーバを再起動してみる。

$ php -S 0.0.0.0:8080

見れた。 localhost ではなく、0.0.0.0を指定することでアクセスできる。

Hugoでポートフォリオサイトを作る

github pagesを使って自身の経歴を公開するポートフォリオサイトを作ろうと思い立った。 今回、Hugoという静的サイトジェネレータを使って構築したのでその手順を記しておく。

使用するツール

Jekyll と Hugo 両方使ってみてHugoの方が簡単だったのでHugoで構築する。

github.com

The world’s fastest framework for building websites.

世界最速

できあがったもの

完成イメージはこちら

https://tic40.github.io/

構築方法

前提

  • github pages を使って無料で公開する
  • ユーザページとして公開する (https://.github.io/)

手順

$ brew install hugo
$ hugo new site <site name>
  • テーマを設定。submodule として登録しておく
$ cd <site name>
$ git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke;\
$ echo 'theme = "ananke"' >> config.toml
$ git submodule add -b master git@github.com:{USERNAME}/{USERNAME}.github.io.git public

こうしておくことで、public/ の変更をpush したときに、公開用リポジトリに変更をpushされるようになる。

  • ローカルで動作確認
$ hugo server -D

*-Dオプションをつけるとドラフト状態の投稿も表示されるのでつけておくといい

デフォルトだと、1313ポートでローカルサーバーが立ち上がるので、ブラウザで確認できる。

http://localhost:1313/

  • デプロイ

1コマンドでリリースできるようにスクリプトを作っておく

$ vi deploy.sh
#!/bin/bash

echo -e "\033[0;32mDeploying updates to GitHub...\033[0m"

# Build the project.
hugo # if using a theme, replace with `hugo -t <YOURTHEME>`

# Go To Public folder
cd public
# Add changes to git.
git add .

# Commit changes.
msg="rebuilding site `date`"
if [ $# -eq 1 ]
  then msg="$1"
fi
git commit -m "$msg"

# Push source and build repos.
git push origin master

# Come Back up to the Project Root
cd ..

スクリプトに実行権限を付与

$ chmod +x deploy.sh

スクリプトを実行して公開

$ ./deploy.sh

githubにアクセスしてページが表示されればOK

https://{USERNAME}.github.io

記事を投稿する

記事ファイルの作成

$ hugo new posts/{title}.md

上記で作成されたファイルを編集して、deploy.shを実行すれば公開される。 *上記で作成した記事は、ドラフト状態(draft: true) になっているため、そのままでは本番に反映されない。公開時は draft: false にしておく

最新の詳しいドキュメントはこちらを参照

https://gohugo.io/documentation/

brewfileでMacのソフトウェアインストールを自動化する

3年ぶりにmacを買い替えた。

macbook air 11inch(2014) -> macbook pro 13inch(2017)

13インチなのにサイズがほとんど11インチairと同じだ。ディスプレイもきれいになって、最高という感じ。

せっかくなので、今まであまり使ったことがなかったHomebrewを使ってソフトウェアインストールを自動化してみた。

github.com

homebrew をインストールする

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Brewfileを作る

移行元のmacで、dumpコマンドを実行しBrewfileを書き出す。

$ brew bundle dump

brewでインストール可能なパッケージはsearch コマンドで検索できる。

$ brew search {name}

書き出されたBrewfileを元に不要なものを削除したり、追加したりして、下のようなBrewfileを作った。

$ cat Brewfile
cask_args appdir: "/Applications"
tap "homebrew/core"
tap "homebrew/bundle"
tap "caskroom/cask"
brew "vim"
brew "zsh"
brew "curl"
cask "atom"
cask "docker"
cask "dropbox"
cask "evernote"
cask "filezilla"
cask "firefox"
cask "google-chrome"
cask "google-drive-file-stream"
cask "google-japanese-ime"
cask "iterm2"
cask "keepassx"
cask "mysqlworkbench"
cask "skitch"
cask "skype"
cask "slack"
cask "vlc"

上記のBrewfileを移行先PCに置いてbrew bundle を実行する。

$ brew bundle

おしまい

Slack基本使い方まとめ

概要

Slackをちゃんと業務で使うために、基本機能まとめる。

get.slack.help

基本

メンバー種別/権限

大きく4つの種別が存在する。

  • オーナー
  • 管理者
  • メンバー
  • ゲスト

詳細はこちら Slack メンバーの種別と権限 – Slack

チームとワークスペース

チームとは、Slack を使ってコミュニケートする人たちのグループです。

Slack ワークスペースは、あなたとチームメートがコミュニケートし、仕事を果たすために共有するデジタルスペースです。

ふむ。チームとワークスペースは、意味合い的には同じなのかな。

小〜中規模の企業では、全社員が1つの Slack ワークスペースに所属するケースが多いでしょう。

大規模組織じゃないかぎりは、1つのワークスペース運用のみで事足りるようだ。

チャンネル

ワークスペース内にはいくつもの チャンネルがあり、他のメンバーとの会話のほとんどがこのチャンネルを利用して行われます。

  • ワークスペースの中に、チャンネルは属している。プロジェクトや関心事の単位でチャンネルをワークスペースの中に作成していけば良さそう。
  • #general と #random はワークスペース作成時にデフォルトで作成される。#general はチーム全体共有用、#random は雑談用。

パブリックとプライベートチャンネル

  • パブリックは、チーム全体に公開される。チーム内の誰もが閲覧できる。
  • プライベートはそのチャンネルに招待されたメンバーのみ閲覧、検索可能。一部メンバーとクローズドな会話をするときに使う。

DM(ダイレクトメッセージ)

DMはチャンネル内でできない、よりセンシティブな会話をするときのみ使う。

検索

右上の検索ボックスから検索可能。

無料と有料プランの違い

4つのプランがある。フリー/スタンダード/プラス/Enerprise Grid

プラン・製品・機能 – Slack

フリープランには、以下のような制限がある。運用が以下の制限に引っかかるようであれば、有料プランへ移行した方がいい。

  • 検索可能メッセージ: チームの直近のコミュニケーション10,000件
  • 音声通話とビデオ通話: 一対一のみ
  • ファイルストレージ: ワークスペース全体で 5GB
  • アプリとサービス: 10 点のサードパーティまたはカスタムインテグレーション

実践

ワークスペースの作成

https://slack.com/create#email

環境設定

https://{workspace name}.slack.com/admin/settings#settings

ワークスペース設定、チーム権限、認証などを設定可能。

メンバーの招待

https://{workspace name}.slack.com/admin/invites

チームへの参加

  • チームオーナーまたは管理者から招待してもらう
  • 招待メールが届くので、メール内のリンクから参加する

カスタム絵文字の登録

  • 左上のチーム名をクリック
  • 「slack」をカスタマイズを選択する

*使用できる画像にはピクセル幅、ファイルサイズの制限があるので注意。

スレッド機能

チャンネルに投稿されたメッセージに対して、直接コメントできる。 一連の会話をまとめることができる。

メンション機能

@のあとに対象を入力することで、その対象に対して通知を送ることができる。

  • @here: チャンネルに参加していて、オンラインのメンバー全員に通知を送る
  • @channel: チャンネルに参加している全メンバーに通知を送る
  • @everyone: このメンションはワークスペース全員に通知を送る
  • @{username}: username に対して通知を送る

メッセージ書式

*msg* : 強調
~msg~ : 取り消し線
_msg_ : 斜体
> : 引用
>>> : 複数行の引用
`code` : コードブロック
```code``` : コードブロック。ブロックで表示する。

slashコマンド

/ (slash)の後に特定のコマンドを入力することで様々な機能を実行できる。スラッシュを入力すると、コマンド一覧がサジェストされる。

3rdパーティアプリケーションとの連携

App Directory から、外部サービスとSlackの連携をさせることができる。

https://{workspace name}.slack.com/apps

googleカレンダーGitHub、Jira など様々な外部サービスとの連携が用意されている。

雑感

slack >>>>> chatwork

エンジニア転職面接で最低限聞いておくべきチェックリスト

Webアプリケーションエンジニア目線で確認しておくべきことのチェックリスト。忘れがちなので書き出してみた。

チェックリスト

  • 会社のメインプロダクトは?
  • 開発手法は?
    • プロジェクトマネジメントツールは?
    • ソースコード管理は?
    • CI/CDにはどう行っている?
    • コミュニケーションツールは?
  • 開発環境は?
    • サーバ構成は?
    • 開発環境構築は自動化されているか?
    • サーバサイドの採用技術/メインFWは?
    • フロントエンドサイドの採用技術/メインFWは?
    • 開発マシン、モニタ、その他デバイス、ソフトウェア、に最も力を発揮できるものを使えるか
  • インフラ
  • 組織について
    • 社内人間関係に問題はなさそうか。
    • 組織におけるエンジニア部署の立場はどうか。
    • 開発部署のリーダーが尊敬できそうな人間かどうか。(自分より優れていると感じるか)
  • 人事評価制度について
    • エンジニアの評価はどのように行うのか。その評価制度で自身に昇給の見込みがあるのか。

まとめ

これぐらいは最低限確認しておくべきだな、と最近感じている。

Docker チュートリアル

現状

Dockerは聞いたことあるけど実際に使ったことはない。

ゴール

チュートリアルを通してDockerでweb serverを立ち上げてみる

Dockerとは

Docker - Wikipedia

コンテナ型の仮想化環境を提供するオープンソースソフトウェアである[3]。VMware製品などの完全仮想化を行うハイパーバイザ型製品と比べて、ディスク使用量は少なく、仮想環境 (インスタンス) 作成や起動は速く、性能劣化がほとんどないという利点を持つ。

ふむ。

イメージとは

An image is a lightweight, stand-alone, executable package that includes everything needed to run a piece of software, including the code, a runtime, libraries, environment variables, and config files.

イメージは、コード、ランタイム、ライブラリ、環境変数、設定ファイルなど、ソフトウェアを実行するために必要なすべてを含む軽量でスタンドアロンの実行可能パッケージです。

コンテナとは

A container is a runtime instance of an image—what the image becomes in memory when actually executed. It runs completely isolated from the host environment by default, only accessing host files and ports if configured to do so.

コンテナはイメージのランタイムインスタンスです。イメージが実際に実行されたときにメモリに格納されます。デフォルトではホスト環境と完全に分離されており、ホストファイルとポートにアクセスするように設定されている場合にのみアクセスします。

つまりは、イメージ(パッケージ)を使ってコンテナ(実態)を作成するようだ。

MacにDockerをインストールする

Docker For Mac | Docker

Docker for Mac is the best way to get started with Docker on a Mac.

MacでDockerを使う最高の方法らしい。とりあえずこれを使ってDockerを導入してみることにする。

まず以下から、Get Docker for Mac (Stable) をダウンロード&インストール

Install Docker for Mac | Docker Documentation

インストールしたらDocker for Macを起動する

f:id:tic40:20180112190046p:plain

nginx web serverを立ち上げてみる

$ docker run -d -p 80:80 --name webserver nginx

http://localhost/ にアクセスして、"Welcome to nginx!" ページが表示されればOK.

docker ps でwebserver コンテナの詳細を確認する

$ docker ps
docker ps
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                NAMES
1d5a3d6f77d9        nginx               "nginx -g 'daemon of…"   24 seconds ago      Up 24 seconds       0.0.0.0:80->80/tcp   webserver

先程起動した、webserver の詳細が表示される。

起動した webserver コンテナにログインする

docker exec -it webserver bash

コンテナの停止/削除

# 停止する
$ docker stop webserver
# 再度開始する
$ docker start webserver

停止したコンテナは、docker ps では表示されない。停止したコンテナ詳細を表示する場合は、docker ps -a で表示する。

停止と削除を同時に行う場合は、docker rm -f webserver を実行する。このコマンドはコンテナを削除するが、nginx imageは削除しない。docker imagesを実行することでローカルイメージのリストを表示できる。

$ docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
nginx               latest              3f8a4339aadd        2 weeks ago         108MB

イメージを削除する場合は、docker rmi nginx で削除ができる。

雑感

  • とりあえず一旦ここまで。
  • まだわかってないこと
    • Dockerfile ファイルの書き方
    • docker-compose について
    • どういう単位でコンテナを分割すればいいか