Microsoftが開発したJavaScriptに対して型付けを行えるAltJSの一つです。 TypsScriptで記述したプログラムをtscというコンパイラで生JSに変換して利用します。私はこの変換はWebpackを使ってやってます。もう型の無い言語は書けない体なので、生JSは恐ろしくて触れません。。。

SCSS

sass-lang.com

SCSS(サス)は、従来のCSSのイマイチなところをいろいろと改善してくれているものです。基本的な構文としてはCSSのものをそのまま利用できるのですが、mixinができたりネストができたり、変数が使えたりととっても便利に利用できるのでベターCSSとして利用しています。

Vue.js

jp.vuejs.org

Vue.jsは従来の(jQueryにありがちな)フロントエンド開発のつらみを取り去ってくれるフロントエンド用フレームワークです。もうDOM操作を自分で各必要はありません。すべて宣言的に記述することができ、なおかつあらゆる変数がリアクティブに実装されていますので、jQuery時代とくらべてModel-View間の実装をかなり省略することができます。 DOMちまちま組み立てるの本当に辛いですよね。

このフレームワークの中で、TypeScriptとSCSSを合わせて利用しています。

実際のサンプル

それぞれどんな感じでどう使ってるのよ？というところですが、実際のプロジェクトから抜粋してサンプルを作ってみたので興味のある人は御覧ください。

github.com

cloneしたら sbt run だけで起動すると思います。

まとめ

便利なものをどんどん使えるようになると楽しく仕事ができますね！

それではまた別の日に！

2017-12-03

CentOS7 on EC2 の時刻を Chrony で Amazon Time Sync Service と同期する

AdventCalendar2017

※この記事は AltPlus Advent Calendar 2017 の3日目のエントリです。

こんにちは、中田 (id:satotech) です。

はじめに

AWS から NTP サービス Amazon Time Sync Service がリリースされました。この記事では CentOS 7 の EC2 インスタンスでの利用方法について書きます。

Chrony とは

chrony は chrony パッケージで提供されている CentOS 7 標準の NTP クライアント/サーバの実装です。

Amazon Time Sync Service とは

Amazon Time Sync Service は、VPC で実行されているすべてのインスタンスについて、169.254.169.123 のIPアドレスで NTP を通じて時刻同期に利用できるサービスです。

設定手順

ntp パッケージがインストール済みならアンインストール

$ yum list ntp*
$ sudo yum remove ntp*

chrony パッケージが入っていなければインストール

$ yum list chrony
$ sudo yum install chrony

設定ファイル( /etc/chrony.conf )を修正、169.254.169.123 を優先するように設定を追加

$ diff -C 5 /etc/chrony.conf.orig /etc/chrony.conf
*** 1,7 ****
--- 1,8 ----
  # Use public servers from the pool.ntp.org project.
  # Please consider joining the pool (http://www.pool.ntp.org/join.html).
+ server 169.254.169.123 prefer iburst
  server 0.centos.pool.ntp.org iburst
  server 1.centos.pool.ntp.org iburst
  server 2.centos.pool.ntp.org iburst
  server 3.centos.pool.ntp.org iburst

chrony サービスを起動

$ sudo systemctl start chronyd

同期の確認

169.254.169.123 を参照していることを確認

$ chronyc tracking
Reference ID    : A9FEA97B (169.254.169.123)
Stratum         : 4
Ref time (UTC)  : Sun Dec 03 09:53:05 2017
System time     : 0.000008275 seconds fast of NTP time
Last offset     : +0.000009504 seconds
RMS offset      : 0.000009557 seconds
Frequency       : 7.661 ppm slow
Residual freq   : +0.005 ppm
Skew            : 0.112 ppm
Root delay      : 0.002082497 seconds
Root dispersion : 0.000339727 seconds
Update interval : 64.7 seconds
Leap status     : Normal

169.254.169.123 が優先 (^*) されていることを確認

$ chronyc sources -v
210 Number of sources = 5

  .-- Source mode  '^' = server, '=' = peer, '#' = local clock.
 / .- Source state '*' = current synced, '+' = combined , '-' = not combined,
| /   '?' = unreachable, 'x' = time may be in error, '~' = time too variable.
||                                                 .- xxxx [ yyyy ] +/- zzzz
||      Reachability register (octal) -.           |  xxxx = adjusted offset,
||      Log2(Polling interval) --.      |          |  yyyy = measured offset,
||                                \     |          |  zzzz = estimated error.
||                                 |    |           \
MS Name/IP address         Stratum Poll Reach LastRx Last sample
===============================================================================
^* 169.254.169.123               3   6   377    43  +3901ns[+4528ns] +/- 1370us
^- jp.dan.me.uk                  2   6   377    43  -5827us[-5826us] +/-  168ms
^- sv1.localdomain1.com          2   6   377   109    +45us[  +36us] +/-   17ms
^- extendwings.com               2   6   357    42   -112us[ -112us] +/-  190ms
^- x.ns.gin.ntt.net              2   6   377    45   +570us[ +571us] +/-   72ms

参照している各ソースの誤差のレートとオフセットの推定プロセスについての情報を確認

$ chronyc sourcestats -v
210 Number of sources = 5
                             .- Number of sample points in measurement set.
                            /    .- Number of residual runs with same sign.
                           |    /    .- Length of measurement set (time).
                           |   |    /      .- Est. clock freq error (ppm).
                           |   |   |      /           .- Est. error in freq.
                           |   |   |     |           /         .- Est. offset.
                           |   |   |     |          |          |   On the -.
                           |   |   |     |          |          |   samples. \
                           |   |   |     |          |          |             |
Name/IP Address            NP  NR  Span  Frequency  Freq Skew  Offset  Std Dev
==============================================================================
169.254.169.123             9   5   330     -0.030      0.168   -639ns    10us
jp.dan.me.uk                9   7   330     +0.464      1.558  -5684us    94us
sv1.localdomain1.com        7   4   265     -0.096      0.492    +10us    19us
extendwings.com             8   6   330     +0.376     13.316   +139us   884us
x.ns.gin.ntt.net            9   5   328     +0.288      1.723   +574us   120us

参考

Configuring the Amazon Time Sync Service - Amazon Elastic Compute Cloud

※この記事は Qiita の私の投稿から転載しています。

2017-12-02

Vimium-FF で Firefox Quantum を Vimperator っぽく使う

AdventCalendar2017

※この記事は AltPlus Advent Calendar 2017 の2日目のエントリです。

こんにちは、中田 (id:satotech) です。

Firefox の新バージョン、Firefox Quantum がリリースされましたね。私は Firefox のアドオン Vimperator を使っていたのですが、今回のアップデートで Vimperator は Legacy なアドオンとなってしまいました。

何か代わりになるものを見つけなくては! と思いアドオンを探したところ、Vimium-FF に落ち着きました。元々 Google Chrome の Vimium エクステンションをカスタマイズして使っていたので、同じ設定内容を使えるということが一番のポイントになりました。

Vimium, Vimium-FF デフォルトのキーマップは Vimperator とは異なるのですが、Vimperator でよく使っているキーマップにカスタマイズしてみたので紹介します。

カスタマイズ例

設定方法

ツールバーの Vimium アイコンをクリック
ポップアップ左下の options リンクをクリック
Custom key mappings に次の内容を入力して Save

Custom key mappings

# Insert your preferred key mappings here.
# Exit insert mode
map <c-[> exitInsertMode

# Scrolling
map <c-d> scrollPageDown
map <c-u> scrollPageUp
map <c-f> scrollFullPageDown
map <c-b> scrollFullPageUp

# History and tabs
map <c-o> goBack
map <c-i> goForward
map <c-n> nextTab
map <c-p> previousTab
unmap x
unmap d
map d removeTab
unmap X
unmap u
map u restoreTab
map g^ firstTab

# Buffer information
unmap gs
unmap gf
map gf toggleViewSource

# Motion commands
map 0 scrollToLeft
map $ scrollToRight

# Getting help
map :h showHelp
map <F1> showHelp

Google Chrome では Vimium を、Firefox では Vimperator と使い分けていたのですが、ブラウザを切り替える度に少し意識して操作する必要がありました。今回 Vimium, Vimium-FF で Firefox Quantum、Google Chrome 両方で同じ設定を利用するようになり、ブラウザの切り替えを意識せず操作できるようになりました。

Firefox Quantum にアップデート後に Vimperator ライクなアドオンを探している方、Vimium-FF おすすめですよ!