読者です 読者をやめる 読者になる 読者になる

Ionic で簡易カウンターアプリ作ってみた

開発環境

  • macOS 10.12.4
  • Node.js 7.9.0

Ionic のインストール・プロジェクト作成

Ionic で簡単なカウンターアプリを作成したので、まとめてみました。

まずは npm installcordovaionic をグローバルインストールします。

$ npm install -g cordova ionic

Ionic がインストールできたので、ionic start コマンドでプロジェクトを作成してみます。

$ ionic start SampleApp blank --v2

blank の部分はテンプレートの種類で、他にも tabssidemenu などが指定できるようです。

f:id:enomotodev:20170519205103p:plain

それでは ionic serve コマンドでプロジェクトを起動してみます。

$ cd SampleApp
$ ionic serve

http://localhost:8100/ionic-lab を開くと、各モバイル端末でどのように表示されるかが見れるので、こちらを確認しながら開発していきたいと思います。

f:id:enomotodev:20170519205109p:plain

コードが変更されると自動で更新されるので、タイトルを変更してみます。

  • src/pages/home/home.html
<ion-title>
  Ionic Blank
</ion-title>
↓
<ion-title>
  サンプルアプリ
</ion-title>

f:id:enomotodev:20170519205114p:plain

ブラウザが自動で更新され、タイトル部分が更新されたのがわかるかと思います。

カウンターアプリなので、『数値表示部分』『プラスボタン』『マイナスボタン』『リセットボタン』を配置していきます。

  • src/pages/home/home.html
<ion-content padding>
  The world is your oyster.
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>
</ion-content>
↓
<ion-content padding>
  <div>
    <p align="center">0</p>
  </div>
  <ion-buttons>
    <button ion-button block round>プラス</button>
    <button ion-button block round>マイナス</button>
    <button ion-button block round color="danger">リセット</button>
  </ion-buttons>
</ion-content>

f:id:enomotodev:20170519205119p:plain

これでとりあえずデザインは OK なので、ロジックの部分を実装していきます。

  • src/pages/home/home.ts
// ...

export class HomePage {

  public num: number = 0;

  constructor(public navCtrl: NavController) {

  }

}
  • src/pages/home/home.html
  <div>
    <p align="center">{{num}}</p>
  </div>

これで見た目は変わりませんが、数字の表示部分が変数の値を表示するようになりました。

最後にそれぞれのボタンを押した時の動作を実装しましょう。

  • src/pages/home/home.ts
export class HomePage {

  // ...

  plus() {
    this.num++;
  }

  minus() {
    this.num--;
  }

  reset() {
    this.num = 0;
  }

}
  • src/pages/home/home.html
    <button ion-button block round (click)="plus()">プラス</button>
    <button ion-button block round (click)="minus()">マイナス</button>
    <button ion-button block round color="danger" (click)="reset()">リセット</button>

ほとんどコードは書いていないですが、これで完成です!

まとめ

Ionic を使って簡単なカウンターアプリを作ってみました。

簡単なアプリであれば、Webエンジニアでも比較的容易にアプリを作成することができるようなので、色々と試してみたいと思います。

CentOS に Aerospike インストールしてみた

Aerospike とは

Aerospike(エアロスパイク)とは、米 Aerospike 社によって開発されている NoSQL データベースです

とにかく高速であると言われており、最近では日本の企業でも採用事例が増えてきています

今回は OSS 版を CentOS 上に構築してみたいと思います

作業環境

Aerospike のインストー

公式ドキュメントを参考に Aerospike をインストールします

$ wget -O aerospike.tgz 'http://aerospike.com/download/server/latest/artifact/el7'
$ tar -xvf aerospike.tgz
$ cd aerospike-server-community-3.12.0-el7/
$ sudo ./asinstall

自動起動設定をして、Aerospike を起動します

$ sudo systemctl enable aerospike
$ sudo systemctl start aerospike

Aerospike が起動したのでステータスを確認してみましょう

$ sudo systemctl status aerospike
● aerospike.service - Aerospike Server
   Loaded: loaded (/usr/lib/systemd/system/aerospike.service; enabled; vendor preset: disabled)
  Drop-In: /etc/systemd/system/aerospike.service.d
           └─aerospike.conf
   Active: active (running) since 月 2017-03-27 13:33:10 UTC; 4s ago
  Process: 3559 ExecStartPre=/bin/systemctl start aerospike_telemetry (code=exited, status=0/SUCCESS)
  Process: 3554 ExecStartPre=/usr/bin/asd-systemd-helper (code=exited, status=0/SUCCESS)
 Main PID: 3563 (asd)
   CGroup: /system.slice/aerospike.service
           └─3563 /usr/bin/asd --config-file /etc/aerospike/aerospike.conf --fgdaemon

 3月 27 13:33:14 localhost.localdomain asd[3563]: Mar 27 2017 13:33:14 GMT: INFO (paxos): (paxos.c:3730) ... no other nodes detected - node will operate a...e cluster
 3月 27 13:33:14 localhost.localdomain asd[3563]: Mar 27 2017 13:33:14 GMT: INFO (partition): (partition_balance.c:285) {test} 4096 absent partitions prom...to master
 3月 27 13:33:14 localhost.localdomain asd[3563]: Mar 27 2017 13:33:14 GMT: INFO (partition): (partition_balance.c:285) {bar} 4096 absent partitions promo...to master
 3月 27 13:33:14 localhost.localdomain asd[3563]: Mar 27 2017 13:33:14 GMT: INFO (paxos): (paxos.c:3740) starting paxos threads
 3月 27 13:33:14 localhost.localdomain asd[3563]: Mar 27 2017 13:33:14 GMT: INFO (nsup): (thr_nsup.c:1421) starting namespace supervisor threads
 3月 27 13:33:14 localhost.localdomain asd[3563]: Mar 27 2017 13:33:14 GMT: INFO (demarshal): (thr_demarshal.c:863) starting 1 demarshal threads
 3月 27 13:33:14 localhost.localdomain asd[3563]: Mar 27 2017 13:33:14 GMT: INFO (demarshal): (socket.c:709) Started client endpoint 0.0.0.0:3000
 3月 27 13:33:14 localhost.localdomain asd[3563]: Mar 27 2017 13:33:14 GMT: INFO (info-port): (thr_info_port.c:307) starting info port thread
 3月 27 13:33:14 localhost.localdomain asd[3563]: Mar 27 2017 13:33:14 GMT: INFO (info-port): (socket.c:709) Started info endpoint 0.0.0.0:3003
 3月 27 13:33:14 localhost.localdomain asd[3563]: Mar 27 2017 13:33:14 GMT: INFO (as): (as.c:449) service ready: soon there will be cake!
Hint: Some lines were ellipsized, use -l to show in full.

Aerospike の起動が確認できました!

AMC(Aerospike Management Console)のインストー

AMC は Aerospike の管理ツールです

複数の node をブラウザ上から一度に管理できるそうなので、こちらもインストールしていきたいと思います

まずは、依存パッケージをインストールします

$ sudo yum install gcc python python-devel

こちらも公式ドキュメントを参考にインストールします

$ wget http://aerospike.com/download/amc/latest/artifact/el7
$ sudo rpm -ivh el7

自動起動設定をしてから起動します

$ sudo systemctl enable amc
$ sudo systemctl start amc

ステータスを確認してみます

$ sudo systemctl status amc
● amc.service - LSB: Aerospike's Management Console
   Loaded: loaded (/etc/rc.d/init.d/amc; bad; vendor preset: disabled)
   Active: active (running) since 月 2017-03-27 13:48:04 UTC; 45s ago
     Docs: man:systemd-sysv-generator(8)
  Process: 3819 ExecStart=/etc/rc.d/init.d/amc start (code=exited, status=0/SUCCESS)
 Main PID: 3824 (amc)
   CGroup: /system.slice/amc.service
           └─3824 /opt/amc/amc -config-file=/etc/amc/amc.conf -config-dir=/etc/amc

 3月 27 13:48:04 localhost.localdomain systemd[1]: Starting LSB: Aerospike's Management Console...
 3月 27 13:48:04 localhost.localdomain runuser[3822]: pam_unix(runuser:session): session opened for user root by (uid=0)
 3月 27 13:48:04 localhost.localdomain amc[3819]: Starting amc: [  OK  ]
 3月 27 13:48:04 localhost.localdomain systemd[1]: Started LSB: Aerospike's Management Console.

AMC の起動も確認することができました!

AMC はデフォルトでは 8081 ポートで起動するので、ブラウザからアクセスしてみます

f:id:enomotodev:20170519204627p:plain

Aerospike の IP アドレスとポートを入力する画面が表示されるので、それぞれ localhost, 3000 と設定し、『Connect』ボタンを押下します

特に問題なければ次のような画面が表示されます

f:id:enomotodev:20170519204631p:plain

まとめ

Aerospike をインストールするところまで学習しました

実際にレコードを insert, select, update, delete するなど、今後色々と触って試していきたいと思います

CentOS に pyenv で Python インストールしてみた

pyenv とは

pyenv とは Python のバージョン管理を行なうコマンドラインツールで、複数のバージョンの Python のインストールや、インストールしたバージョンの変更を簡単に行うことができます。

Ruby では rbenv + ruby-build が有名ですが、それの Python 版だと考えていただけたらと思います。

作業環境

pyenv のインストー

まずは依存パッケージを yum でインストールします。

$ sudo yum install gcc zlib-devel bzip2 bzip2-devel readline readline-devel sqlite sqlite-devel openssl openssl-devel git

pyenv を ~/.pyenvgit clone します。

$ git clone https://github.com/yyuu/pyenv.git ~/.pyenv

~/.bash_profile環境変数などを設定します。

$ echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.bash_profile
$ echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.bash_profile
$ echo 'eval "$(pyenv init -)"' >> ~/.bash_profile

先ほど設定した環境変数を反映します。

$ source ~/.bash_profile

これで pyenv のインストールは完了となりますので、問題なくインストールできているか、pyenv のバージョンを確認してみましょう。

$ pyenv --version
pyenv 1.0.6-1-g0256ff0

pyenv で Python をインストールする

pyenv で別バージョンの Python をインストールする前に、まずは現在の Python のバージョンを確認してみます。

$ python --version
Python 2.7.5

次に、インストールできる Python のバージョンを一覧表示してみます。

$ pyenv install --list
Available versions:
  2.1.3
  2.2.3
  2.3.7
  2.4
  2.4.1
  2.4.2
  2.4.3
  2.4.4
  2.4.5
  2.4.6
  2.5
  2.5.1
  2.5.2
  2.5.3
  2.5.4
  2.5.5
  2.5.6
...(略)

今回は Python 3.6.0 をインストールします。

$ pyenv install 3.6.0
Downloading Python-3.6.0.tar.xz...
-> https://www.python.org/ftp/python/3.6.0/Python-3.6.0.tar.xz
Installing Python-3.6.0...
Installed Python-3.6.0 to /home/vagrant/.pyenv/versions/3.6.0

使用する Python のバージョンを 3.6.0 に変更します。

$ pyenv global 3.6.0
$ pyenv rehash

Python のバージョンがきちんと 3.6.0 に変更されているか、Python のバージョンを再度確認してみます。

$ python --version
Python 3.6.0

Python 3.6.0 がインストールできました!

Python のバージョンを元に戻す

Python のバージョンを元に戻したいこともあると思うので、バージョンを元に戻す方法も確認しておきましょう。

まずは、pyenv でインストールしたバージョンの一覧を表示します。

$ pyenv versions
  system
* 3.6.0 (set by /home/enomotodev/.pyenv/version)

先ほどインストールした 3.6.0 以外に system というバージョンがあるのがわかるかと思います。

Python のバージョンを元に戻したいときは、system にバージョンを設定してあげれば OK です。

$ pyenv global system
$ python --version
Python 2.7.5

これで Python のバージョンが元に戻りました!

Hologram を使ってスタイルガイドを作成してみた

Hologram とは

HologramRuby 環境で動くスタイルガイドジェネレータです。

.css.scss.sass.less.styl などの多様な形式のファイルに書かれたコメントから、自動でスタイルガイドを作ってくれます。

スタイルガイドは、静的な HTML ファイルとして出力され、独自のテンプレートを使ってスタイルガイドをカスタマイズすることもできます。

f:id:enomotodev:20170519204215p:plain

作業環境

  • CentOS 7.2
  • Ruby 2.3.1
  • Bundler 1.13.2
  • Sass 3.4.22

Hologram のインストー

プロジェクトの Gemfilegem "hologram" を追記します。

source "https://rubygems.org"

gem "sass"
gem "hologram"

追記したら bundle install しましょう。

$ bundle install

インストールが完了したので、バージョンを確認してみましょう。

$ hologram -v
hologram 1.4.0

Hologram の始め方

hologram init コマンドで hologram の設定ファイルなどが作成されるので、hologram init を実行してみます。

$ hologram init
Created the following files and directories:
  hologram_config.yml
  doc_assets/
  doc_assets/_header.html
  doc_assets/_footer.html
  code_example_templates/
  code_example_templates/markdown_example_template.html.erb
  code_example_templates/markdown_table_template.html.erb
  code_example_templates/js_example_template.html.erb
  code_example_templates/jsx_example_template.html.erb

色々とファイルが作成されましたが、hologram_config.yml の中身を見てみましょう。

# Hologram will run from same directory where this config file resides
# All paths should be relative to there

# The directory containing the source files to parse recursively
source: ./sass

# The directory that hologram will build to
destination: ./docs

# The assets needed to build the docs (includes header.html,
# footer.html, etc)
# You may put doc related assets here too: images, css, etc.
documentation_assets: ./doc_assets

# The folder that contains templates for rendering code examples.
# If you want to change the way code examples appear in the styleguide,
# modify the files in this folder
code_example_templates: ./code_example_templates

# The folder that contains custom code example renderers.
# If you want to create additional renderers that are not provided
# by Hologram (i.e. coffeescript renderer, jade renderer, etc)
# place them in this folder
code_example_renderers: ./code_example_renderers

# Any other asset folders that need to be copied to the destination
# folder. Typically this will include the css that you are trying to
# document. May also include additional folders as needed.
dependencies:
  - ./build

# Mark which category should be the index page
# Alternatively, you may have an index.md in the documentation assets
# folder instead of specifying this config.
index: basics

# To additionally output navigation for top level sections, set the value to
# 'section'. To output navigation for sub-sections,
# set the value to `all`
nav_level: all

# Hologram displays warnings when there are issues with your docs
# (e.g. if a component's parent is not found, if the _header.html and/or
#  _footer.html files aren't found)
# If you want Hologram to exit on these warnings, set the value to 'true'
# (Default value is 'false')
exit_on_warnings: false
  • source
    .css.scss.sass.less.styl などのスタイルガイドを作成する元になるファイルが置かれているディレクトリを指定します。
  • destination
    作成されたスタイルガイド(HTML ファイル)を出力するディレクトリを指定します。
  • documentation_assets
    出力されるスタイルガイドのテンプレートを置くディレクトリを指定します。ここで指定したディレクトに置かれた _header.html_footer.html を使用して HTML ファイルが作成されるので、独自のテンプレートを作成したい場合は、_header.html_footer.html を編集するようなかたちになります。
  • code_example_templates
    CSS などでスタイルガイド用にコードを記述する時にフォーマットを指定できるのですが、例えば markup_example と指定した場合はここで指定したディレクトリの markup_example_template.html.erb を元にスタイルガイドを出力します。
    指定したファーマットのファイルが存在しない場合はデフォルトのテンプレートが使用されます。
  • code_example_renderers
    coffee_example など code_example_templates で指定できるフォーマット以外のフォーマットを使用したい場合は、ここで指定したディレクトリに coffee_example_template.html.erb などというかたちでファイルを作成します。
  • dependencies
    ここで指定したディレクトリのファイルはスタイルガイドを作成する際に documentation_assets で指定したディレクトリにコピーされます。
  • index
    スタイルガイドの TOP に表示するカテゴリーを指定することができます。
  • nav_level
    section または all を指定することでナビゲーションのレベルを変更することができます。all を指定すると sub-section まで表示することができます。
  • exit_on_warnings
    documentation_assets で指定したディレクトリに _header.html がない時など、エラーが発生して Hologram が終了する時に Warning を表示したい場合は true を指定します。

Hologram のサンプルを動かしてみる

Hologram には公式のサンプルがあるので、今回はそちらを動かしてみます。

まずは先ほどの hologram init コマンドで自動生成されたファイルを削除します。

$ rm -rf ./*

公式のサンプルを git clone します。

$ git clone git@github.com:trulia/hologram-example.git .

ビルドします。

$ hologram config.yml
Adding renderer for haml examples
Adding renderer for html examples
Adding renderer for js examples
Adding renderer for jsx examples
Adding renderer for react examples
Adding renderer for slim examples
Build completed. (-:

これで docs ディレクトリに HTML 形式でスタイルガイドが出力されたのでブラウザから確認してみます。

f:id:enomotodev:20170519204221p:plain

スタイルガイドの TOP を変更する

Hologram では source で指定したディレクトリ(.css.scss ファイルなどが置いてあるディレクトリ)直下に index.md を置くと、それをスタイルガイドの TOP として表示するようです。

index.md を削除して、Base CSS カテゴリーを TOP に設定してみましょう。

まずは index.md と先ほど作成した docs ディレクトリを削除します。

$ rm -rf components/index.md docs/

次に config.yml に追記して、『Base CSS』カテゴリーを TOP にするよう宣言します。

  • config.yml
...(略)
index: base_css

再度、ビルドします。

$ hologram config.yml
Adding renderer for haml examples
Adding renderer for html examples
Adding renderer for js examples
Adding renderer for jsx examples
Adding renderer for react examples
Adding renderer for slim examples
Build completed. (-:

ブラウザから確認してみます。

f:id:enomotodev:20170519204223p:plain

TOP にアクセスすると『Base CSS』カテゴリーがきちんと表示されました。

まとめ

Hologram はテンプレートを編集することによってスタイルガイドを自由にカスタマイズすることが可能です。

Hologram.css.scss ファイル内のコメントから自動で HTML を出力するので、wiki でよく見られる更新が滞りがちになるといったことも回避できるのではないかと思います。

systemd を使って自作スクリプトをサービス化してみた

作業環境

systemd とは

systemd とは、Lennart PoetteringKay Sievers を中心に開発された、Linux の起動処理やシステム管理を行う仕組みのことです。

2011年5月にメジャー Linux ディストリビューションFedora に採用され、2014年12月にリリースされた CentOS 7 にも採用されました。

systemd はこれまで使われてきたデーモンごとの起動シェルスクリプトに代わり、『ユニットファイル』と呼ばれる設定ファイルに各デーモン用の初期化命令を記述します。

コマンドを作る

まずは systemd に登録して動作させるスクリプトを用意します。

今回は1秒ごとに現在時刻をログに追記していくスクリプトで試してみたいと思います。

  • /opt/date.sh
#!/bin/bash

while true
do
   date >> /tmp/date.log
   sleep 1
done

実行権限を与えます。

sudo chmod 0755 /opt/date.sh

ユニットファイルを作成する

  • /etc/systemd/system/date.service
[Unit]
Description = date log daemon

[Service]
ExecStart = /opt/date.sh
Restart = always
Type = simple

[Install]
WantedBy = multi-user.target

Service セクションの ExecStart に実行したいコマンドを記述します。

Restart はサービスのメインプロセスが停止した際の動作を指定することができ、always を指定することによって、常に再起動を試みます。

サービスとして認識されているか確認する

それでは、作成したユニットファイルがサービスとして認識されているか確かめます。

$ sudo systemctl list-unit-files --type=service | grep date.service
date.service                                disabled

Service として認識されているのが確認できました!

サービスを起動する

それではサービスを起動しましょう。

$ sudo systemctl start date

自動起動の設定も行っておきましょう。

$ sudo systemctl enable date

ステータスの確認を行ってみます。

$ sudo systemctl status date
● date.service - date daemon
   Loaded: loaded (/etc/systemd/system/date.service; enabled; vendor preset: disabled)
   Active: active (running) since 金 2016-09-23 14:45:09 UTC; 1h 49min ago
 Main PID: 4168 (date.sh)
   CGroup: /system.slice/date.service
           ├─ 4168 /bin/bash /opt/date.sh
           └─14162 sleep 1

 9月 23 14:45:09 localhost.localdomain systemd[1]: Started date daemon.
 9月 23 14:45:09 localhost.localdomain systemd[1]: Starting date daemon...

サービス起動の確認がとれたので、ログファイルへの書き込みがきちんと行われているかも確認してみます

$ tail -f /tmp/date.log
Fri Sep 23 16:37:31 UTC 2016
Fri Sep 23 16:37:32 UTC 2016
Fri Sep 23 16:37:33 UTC 2016
Fri Sep 23 16:37:34 UTC 2016
Fri Sep 23 16:37:35 UTC 2016
Fri Sep 23 16:37:36 UTC 2016
Fri Sep 23 16:37:37 UTC 2016
Fri Sep 23 16:37:38 UTC 2016
Fri Sep 23 16:37:39 UTC 2016
Fri Sep 23 16:37:40 UTC 2016
Fri Sep 23 16:37:41 UTC 2016
...

ログファイルにもきちんと書き込みが行われているのが確認できました。

まとめ

systemd を使うことによって簡単に自作スクリプトをサービス化して起動することができました。

これから、ユニットファイルの書き方であったり、systemd の概念的なところをもう少し詳しく勉強していきたいと思います。