キャスレーコンサルティング 技術ブログ
  • HOME>
  • キャスレーコンサルティング 技術ブログ

キャスレーコンサルティングSI(システム・インテグレーション)部の鈴木です。
今回は鈴木チーム全員でLinking APIを使用してIoT技術を体験した模様をお伝えします。

メンバーは以下の3名です。
鈴木(要件定義担当、アプリ開発リーダー、ブログ執筆担当)
田中(孝)さん(アプリ開発メンバー、社内勉強会講師担当)
谷本さん(アプリ開発メンバー)

Linking対応アプリを作るきっかけ

世間では以前からIoT(Internet of Things)という単語が飛び交っていましたが、
ここ最近、自動運転技術のレベルが進展したりスマートデバイスが登場して
より一層IoTが注目を集めるようになってきました。

しかし、チームのメンバーはみんな業務アプリケーション開発技術者であり、IoTに興味はあっても、
なかなかIoTの技術に触れる機会がありませんでした。

そんなとき、NTT DoCoMoがProject Linkingというプロジェクトを展開していることを知りました。
(https://linkingiot.com/)

Linkingプロジェクトでは、デバイスとアプリの連携をサポートするAPIを提供しています。
・デバイス開発者はLinking APIに準拠したデバイスを製作します。
・アプリ開発者はLinking APIに従ってアプリとデバイスのI/Fを記述します。

Linking
※図はProject Linkingのサイトより

Linkingによって、デバイス開発者は自分が作成したデバイスを専用アプリ「のみ」ではなく、
いろんなアプリからデバイスを使ってもらうことができ、アプリ開発者は専用デバイス「のみで」使える技術ではなく、
異なるデバイスを扱うときもLinking API対応のデバイスであれば、習得した技術を生かすことができます。

「専用」「のみ」といったキーワードが少なく、「いろんな」「どんな」といったキーワードが増えるほど
その技術は技術者にとってもユーザにとっても身近になります。
つまり、LinkingはIoTを身近な技術にすることに挑戦するプロジェクトだということです。
※鈴木個人の見解です

今までIoTに疎遠だった自分たちにぴったり!
さっそくアプリ開発を体験してみることになりました。

Linkingで何つくる?

どんなデバイスを使ってどんなアプリを開発するか。
IoTの肝といえる部分。

物がただ単にインターネットに繋がっているだけではそれほど意味がなく、
物から得られる情報をどう扱うかでIoTの価値が決まります。

デバイスで出来ること:温度取得、湿度取得、位置情報取得、LED点灯・点滅
※デバイスによってどれが出来るか異なる
デバイスとスマホ間の通信:LinkingはBluetooth Low Energy(BLE)でスマホとデバイスの通信を行う

議論を重ねた結果、
温度センサー、湿度センサー、LEDを搭載し、クリップ留めができる「Tukeru」というデバイスを使用して、
ペットのケージ(飼育スペース)内の温度、湿度を監視するアプリ「ペット快適生活」を開発することになりました。

ケージに「Tukeru」を取り付けて、温度、湿度を監視し、大切なペットを熱射病や低体温から守ります。
飼い主とペット、共に嬉しいアプリだと思います。

快適な環境ではなくなった場合、アプリにメッセージを表示するとともに、デバイスのLEDを点灯させ、
ユーザにお知らせします。

◆「ペット快適生活」の搭載機能
画面設計
1.不適切環境と判断した際のアラートを表示する領域
2.飼育に適切とされる温度、湿度を設定する領域
3.現時点の温度、湿度表示

デバイスとのI/F
4.デバイスから温度、湿度情報を取得する機能
5.不適切環境と判断した際に、デバイスのLEDを点灯させる機能

業務処理
A.一定間隔でデバイスから情報を取得
B.デバイスから取得した温度、湿度が快適な温度、湿度範囲内にあるか判定
C.範囲外の場合に画面にアラートメッセージを表示し、デバイスのLEDを点灯する

ここからはアプリ開発の肝である、デバイスとのI/F機能(上記4.と5.)の実装について、
他ではあまり触れられていない部分について紹介します。
なお、正式なAPI仕様についてはProject Linkingの開発者用ページをご覧ください。

LinkingAPIを使った実装

今回はすべてMainActivity.java内に記述しました。

デバイスからセンサーデータを取得する

onCreate()にデバイスのセンサーデータを取得するControlSenSorDataオブジェクトを生成します。

mySensorDataInterface = new MySensorDataInterface();
mSensorData = new ControlSensorData(this, mySensorDataInterface);

onClick()の見守り開始ボタン押下時の処理として、まずは接続デバイス情報を取得します。

// 接続デバイス情報の取得
GetDeviceInformation getDeviceInformation = new GetDeviceInformation(this);
List<DeviceInfo> deviceInfos = getDeviceInformation.getInformation();

if (deviceInfos.isEmpty()) {
    Log.e(TAG, "デバイス情報が取得できませんでした");
    return;
}

// 複数のデバイス情報を取得可能(今回はデバイスは一つなので引数は0固定)
DeviceInfo info = deviceInfos.get(0);

デバイス情報を取得できたら、以下のようにセンサーデータに情報を設定し、センサーデータ取得を開始します。
通知間隔と通知継続時間は単位が違うので注意が必要です。

// センサーデータ通知間隔(ミリ秒)
mSensorData.setInterval(10*1000);
// センサーデータ通知継続時間(秒)
mSensorData.setDuration(600);
// センサータイプ情報
mSensorData.setType(4);
// デバイスのBDアドレス("00:11:22:AA:BB:CC"形式)
mSensorData.setBDaddress(info.getBdaddress());
// デバイスへセンサーデータの取得開始依頼
mSensorData.start();

センサータイプの設定値は以下の通りです。
setType表

センサーデータを取得

センサーからデータを取得した時の処理はMySensorDataInterface.onSendorData()に記述します。
originalDataには拡張センサーのデータが格納されています。
データは指数表現で記述されており、比較や画面表示をする際には10進数に変換する必要があります。
今回はお試しということで、変換処理はLinkingAPIダウンロードファイルに同梱されているサンプルプログラムから
流用しました。

@Override
public void onSensorData(String bd, int type,float x,float y,float z, byte[] originalData, long time) {
    float fVal;
    BigDecimal bigD;

    Log.d(TAG, bd + ":センサーデータを受信しました。");

    if(type == 4) {
        // 指数表現→10進数への変換
        // (LinkingAPIダウンロードファイルに同梱されているサンプルプログラムよりPairingUtilを流用)
        fVal = PairingUtil.convertOriginalData(4, originalData);
        // 小数第二位を四捨五入
        bigD = new BigDecimal(String.valueOf(fVal));
        fCurTemp = bigD.setScale(1, BigDecimal.ROUND_HALF_UP).floatValue();
        // 画面項目curTempに表示
        curTemp.setText(String.valueOf(fCurTemp));
    }
    Log.d(TAG, "現在の温度:" + fCurTemp);

実際に取得した値はこのように表示されます。
after_getTemp_a

デバイスのLEDを点灯させる機能

取得した温度、湿度がアプリで設定した快適温度と快適湿度の範囲内にあるか判定します。
範囲内にあれば「快適」なので何もせずに監視を継続しますが、範囲外である場合はアプリにメッセージを表示し、
デバイスのLEDを点灯させます。
ではLEDの点灯を行う処理を見ていきます。

onCreate()内に拡張センサーの通知用クラスSendOtherのオブジェクトを生成します。

// 拡張センサー情報の通知用
sendOther = new SendOther(this);

デバイスに拡張センサー情報を通知するときは以下のように記述します。

// デバイスあてにLED点灯指示を送る
sendOther.setIllumination(
    new byte[]{
        LINKING_IF_PATTERN_ID,
        blink_pattern,
        LINKING_IF_COLOR_ID,
        color
    });
sendOther.send();

引数blink_patternにはLED点灯パターンを設定します。
LED点灯パターン表

引数colorにはLED点灯色を設定します。
LED色表

Tukeruのデバイス仕様書は現時点で公表されていないので、実際にデバイスを作動させて上の表を作りました。
※参考にした結果につきましては一切責任を負いません

通知を受けるとデバイスのLEDが点灯します。
DSC_1268
ちなみにこのときの画面です。
after_alert_a

おわりに

そこまで遠くない将来、AIの発達などでプログラマーが不要になるという意見があります。
この意見は、アプリのアイデア出しをするためにIoT、AIやビッグデータなど最新技術を調べていて見つけたのですが、
読んでいるうちに遥か昔の記憶がフラッシュバックしてきました。

それは、社内SEをしていた頃、業務効率化のためのシステムを提案すると、現場から
「システム部はリストラを助長するだけだ!」
「我々の仕事を奪うのか!」
と直球の意見を受けた経験です。

「自分のやっていることは間違ってないはずのに。。」
と寂しい思いをしましたが、今度は自分の仕事が奪われる立場になりました。

しかし、あまり危機感を抱いていません。
コーディングは機械に任せて、社会的問題に役立つシステムや顕在化していないニーズを呼び起こすシステムを考える、
より上流の仕事に専念できる!
そう考えるとむしろ歓迎すべきことだと思います。
新しいITサービスを提供するためのクリエイター的発想を今のうちからどんどん磨いていきましょう!

また、IoTは私たちが望んでいる未来を実現する有力な手段であることが実感できました。
Project Linking自体も本格的なIoTプロジェクトとなるべく、デバイスとアプリがインターネット接続できるように
進化するかもしれません。

今後もIT業界の最新動向についてアンテナを高くする必要があると認識した、
非常に意義のあるLinkingアプリ体験でした。
(了)


こんにちは、キャスレーコンサルティング SI(システム・インテグレーション)部の清水(誠)です。

今回は、シンプルかつメンテナンス性の高いコードを書くために重要な概念のひとつである
「モジュール結合度」について取り上げます。

そういえば情報処理試験を受けた時に覚えはしたけど、実務ではあまり意識する機会がなかったなあ……
という方もいらっしゃるのではないでしょうか。

他ならぬ筆者がそうだったので、今回改めておさらいし、具体例と合わせてご紹介してみようと思います。
今後の実務で活用していただたくきっかけとなれば幸いです。

なお、ここで言うモジュールとは関数や変数を一定の単位でまとめたものを指し、
一般的なオブジェクト指向型言語での「クラス」に置き換えていただいても差し支えありません。
また、サンプルコードはC#にて記述します。

モジュール結合度とは?

モジュール結合度とは、モジュール同士の密接さを表す尺度です。
6段階に分類され、結合度が低いほど独立性が高くなり、良いモジュールとされています。
以下、結合度の高い順にご説明します。

1.内容結合

あるモジュールが、別のモジュールの外部宣言していない内部状態を直接参照したり、
命令の一部を共有したりしている状態を指します。
内容結合では、一方のモジュールの変更が他方のモジュールに影響を及ぼすので
障害につながる確率が高くなります。

アセンブラ等の低水準言語では陥りがちですが、高水準言語では一般的には発生しないためサンプルコードは省略します。

2.共通結合

共通域に定義したデータをいくつかのモジュールが直接使用するような状態を指します。
共通域の定義データとはいわゆるグローバル変数、JavaやC#で言うところのstatic変数です。

・共通域のデータは他のモジュールで書き換えられてしまう可能性がある
・共通域のデータ定義の変更がそれを使用しているモジュール全てに影響する

等、デメリットが多くあります。

サンプルコード

using System;

public class CommonParameter
{
    // 共通域のデータ
    public static string Name;
    public static int Number;
    public static string Place;
}

public class CommonCoupling {
    public string GetMessage(){
        var message = CommonParameter.Name + "が" + CommonParameter.Number + "匹います。";
        return message;
        // CommonParameter.Placeは使用しない
    }
}

public class TestCommon
{
    public static void Main() {
        CommonParameter.Name = "犬";
        CommonParameter.Number = 2;
        CommonParameter.Place = "庭";
        var data = new CommonCoupling();
        Console.WriteLine(data.GetMessage());
    }
}

実行結果
 犬が2匹います。

3.外部結合

外部宣言したデータ(= public static変数)を共有している状態を指します。
データを共有するという点では共通結合と似ていますが、必要なデータのみを外部宣言するため
共通結合よりも結合度は弱くなります。

サンプルコード

using System;

public class ExternalCoupling {

    // 必要なパラメータをstatic化
    public static string Name;
    public static int Number;

    public string GetMessage(){
        var message = Name + "が" + Number + "匹います。";
        return message;
    }
}

public class TestExternal
{
    public static void Main() {
        ExternalCoupling.Name = "猫";
        ExternalCoupling.Number = 3;
        var ext = new ExternalCoupling();
        Console.WriteLine(ext.GetMessage());
    }
}

実行結果
 猫が3匹います。

4.制御結合

呼び出し側のモジュールが、呼び出されるモジュールの制御を指示するデータ(いわゆるフラグ)を
パラメータとして渡す状態を指します。呼び出し側は相手のモジュールのロジックを知っている必要があるため、
相手をブラックボックス扱いできず結合度が強くなります。

サンプルコード

using System;

public class ControlCoupling {
    public string GetMessage(string name, int number, string type){
        string message = string.Empty;

        // 引数typeによって処理を分岐
        if (type == "哺乳類")
        {
            message = name + "が" + number + "匹います。";
        }
        else if (type == "鳥類"){
            message = name + "が" + number + "羽います。";
        }
        return message;
    }
}

public class TestControl
{
    public static void Main() {
        var ctrl = new ControlCoupling();
        Console.WriteLine(ctrl.GetMessage("ハムスター", 4, "哺乳類"));
        Console.WriteLine(ctrl.GetMessage("ハト", 5, "鳥類"));
    }
}

実行結果
 ハムスターが4匹います。
 ハトが5羽います。

5.スタンプ結合

共通域にないデータ構造を、2つのモジュール間で受け渡す状態を指します。
結合度は比較的弱いですが、スタンプ結合の場合は受け渡すデータ構造の一部を使用しないことがあります。

サンプルコード

using System;

public class StampCoupling {
    public string GetMessage(StampParameter p){
        var message = p.Name + "が" + p.Number + "匹います。";
        return message;
        // p.Placeは使用しない
    }
}
public class StampParameter
{
    // 受け渡し用データ(インスタンス変数なので共通域ではない)
    public string Name;
    public int Number;
    public string Place;

}

public class TestStamp
{
    public static void Main() {
        var p = new StampParameter() ;
        p.Name = "アリ";
        p.Number = 6;
        p.Place = "地中";
        var stmp = new StampCoupling();
        Console.WriteLine(stmp.GetMessage(p));
    }
}

実行結果
 アリが6匹います。

6.データ結合

単純なデータだけをパラメータとして受け渡す状態を指します。
相手モジュールをブラックボックス化できるので、結合度は一番弱くなります。

サンプルコード

using System;

public class DataCoupling {
    public string GetMessage(string name, int number){
        var message = name + "が" + number + "匹います。";
        return message;
    }
}

public class TestData
{
    public static void Main() {
        var data = new DataCoupling();
        Console.WriteLine(data.GetMessage("コツメカワウソ", 7));
    }
}

実行結果
 コツメカワウソが7匹います。

おわりに

一般的に、モジュール同士の結合度が低いほどコードの可読性・再利用性が高まり、
障害が発生した場合も対応がしやすくなります。

プロダクト毎のアーキテクチャやコーディング規約の許す範囲で、
可能な限り結合度を弱く保つコーディングを心掛けましょう。

最後までお読みいただきありがとうございました。


こんにちは。キャスレーコンサルティングSI(システム・インテグレーション)部の森外です。
今回はElixirとPhoenix Frameworkを使用したWebアプリケーションの作成について紹介します。

Elixirについて
Elixirとは、拡張性しやすくメンテナンスしやすいアプリケーションを構築できるよう設計されている関数型言語です。
Erlang VM上で動作します。(JavaとScalaの関係に似ています)
http://elixir-lang.org/

Phoenix Frameworkについて
サーバサイドMVCパターンを実装するためのElixirで作成されたフレームワークです。
http://www.phoenixframework.org/

作成するWebアプリケーションについて
ブラウザからデータの登録・参照・更新・削除をできることを目的とします。
これから紹介する手順はすべてターミナル上で行っています。

事前準備

以下の環境を準備します。

  • macOS (10.12.1)
  • Elixir (1.3.4)
  • Phoenix Framework (1.2.0)
  • PostgreSQL (9.6.1)
  • npm (3.10.9)

※ PostgreSQLとnpmのインストールについては省略します。

Elixir のインストール

Homebrew※を使用してインストールを行います。
※ macOS用のパッケージマネージャーです。http://brew.sh/

$ brew install elixir

バージョンの確認を行ってみます。

$ elixir -v
Erlang/OTP 19 [erts-8.1] 1 [64-bit] [smp:4:4] [async-threads:10] [hipe] [kernel-poll:false] [dtrace]

Elixir 1.3.4

macOS以外のインストール方法はインストールガイドを参照してください。
http://elixir-lang.org/install.html

Phoenix Frameworkのインストール

はじめに、パッケージマネージャのHexをmixコマンドでインストールします。
※ mixはElixirのプロジェクトを管理するコマンドラインユーティリティです。
Elixirのインストールと同時にインストールされています。

$ mix local.hex

つづいて、Phoenix Frameworkをインストールします。

$ mix archive.install https://github.com/phoenixframework/archives/raw/master/phoenix_new.ez

プロジェクトの作成

任意のディレクトリでmixコマンドを実行し、プロジェクトを作成します。
引数の player_phoenix がプロジェクト名になります。

$ mix phoenix.new player_phoenix

プロジェクト作成時にPostgreSQLが起動していないとエラーが発生します。
また、Phoenixはデフォルトでpostgresユーザを利用するように設定されています。

データベースの作成

アプリケーションが利用するデータベースを作成します。
player_phoenix ディレクトリに移動し、mixコマンドを実行します。

$ cd player_phoenix
$ mix ecto.create

psqlコマンドでデータベースが作成されていることを確認します。

$ psql -l
                                   List of databases
       Name         |  Owner   | Encoding |   Collate   |    Ctype    | Access privileges
--------------------+----------+----------+-------------+-------------+-------------------
 player_phoenix_dev | postgres | UTF8     | ja_JP.UTF-8 | ja_JP.UTF-8 |

Phoenixの起動

Phoenixが起動することを確認してみます。
mixコマンドでPhoenixを起動します。

$ mix phoenix.server

ブラウザで http://localhost:4000 にアクセスして以下の画面が表示されることを確認します。
hello_elixir

Phoenixの停止

ctrl-c を二回実行することでPhoenixを停止させることができます。

ジェネレータの実行

Phoenix Frameworkには、MVCパターンのファイルを自動生成するジェネレータ機能があります。
mixコマンドで自動生成させます。

$ mix phoenix.gen.html Player players name:string team:string position:string
* creating web/controllers/player_controller.ex
* creating web/templates/player/edit.html.eex
* creating web/templates/player/form.html.eex
* creating web/templates/player/index.html.eex
* creating web/templates/player/new.html.eex
* creating web/templates/player/show.html.eex
* creating web/views/player_view.ex
* creating test/controllers/player_controller_test.exs
* creating web/models/player.ex
* creating test/models/player_test.exs
* creating priv/repo/migrations/20161207134319_create_player.exs

各引数は以下の意味を持ちます。

  • Player ・・・ モデル名
  • players ・・・ リソース名
  • name:string以降 ・・・ テーブルのカラム名とその属性

ルーターファイルの編集

自動生成されたリソースにブラウザからアクセスできるようにするため、ルーターファイル(web/router.ex)を編集します。
20行目に resources “/players”, PlayerController を追加します。

  defmodule PlayerPhoenix.Router do
     use PlayerPhoenix.Web, :router

    pipeline :browser do
      plug :accepts, ["html"]
      plug :fetch_session
      plug :fetch_flash
      plug :protect_from_forgery
      plug :put_secure_browser_headers
    end

    pipeline :api do
      plug :accepts, ["json"]
    end

    scope "/", PlayerPhoenix do
      pipe_through :browser # Use the default browser stack

      get "/", PageController, :index
      resources "/players", PlayerController # <- ここを追加
  end

    # Other scopes may use custom stacks.
    # scope "/api", PlayerPhoenix do

マイグレーションの実行

mixコマンドでマイグレーションを実行します。

$ mix ecto.migrate

マイグレーションの内容は priv/repo/migrations/xxx_create_player.exs に定義してあります。
ジェネレータで指定したテーブルとカラムが定義されているのが分かります。(6〜9行目)

$ cat priv/repo/migrations/20161207134319_create_player.exs
defmodule Bar.Repo.Migrations.CreatePlayer do
  use Ecto.Migration

  def change do
    create table(:players) do
      add :name, :string
      add :team, :string
      add :position, :string

      timestamps()
    end

  end
end

psqlコマンドでテーブルが作成されていることを確認します。

$ psql -U postgres player_phoenix_dev
# \d
                List of relations
 Schema |       Name        |   Type   |  Owner
--------+-------------------+----------+----------
 public | players           | table    | postgres
 public | players_id_seq    | sequence | postgres
 public | schema_migrations | table    | postgres
(3 rows)

SQLを実行し、playersテーブルのレコードを確認してみます。

# SELECT * FROM players;
 id | name | team | position | inserted_at | updated_at
----+------+------+----------+-------------+------------
(0 rows)

Phoenixを起動

ここまで問題なく進めたならPhoenixを起動してみましょう。

$ mix phoenix.server

一覧画面の表示

先ほどルーターファイルに追記したコントローラにブラウザからアクセスすると、一覧画面が表示されます。
http://localhost:4000/players

players

データの登録

データの登録を行ってみます。
new

playersテーブルのレコードを確認してみます。
無事登録されていることが分かります。

# SELECT * FROM players;
 id |        name        |     team     | position |     inserted_at     |     updated_at
----+--------------------+--------------+----------+---------------------+---------------------
  1 | クレイ・トンプソン       | ウォリアーズ     | G        | 2016-12-07 14:16:27 | 2016-12-07 14:16:27
(1 row)

データの参照・編集

登録したデータの参照と編集を行ってみます。
編集ではチーム名を変更します。
※ いくつかデータを追加してあります。

show_edit

playersテーブルのレコードを確認してみます。
3行目のレコードが更新されていることが分かります。

# SELECT * FROM players;
 id |        name        |     team     | position |     inserted_at     |     updated_at
----+--------------------+--------------+----------+---------------------+---------------------
  1 | クレイ・トンプソン       | ウォリアーズ     | G        | 2016-12-07 14:16:27 | 2016-12-07 14:16:27
  2 | ティム・ダンカン        | スパーズ       | C        | 2016-12-07 14:33:02 | 2016-12-07 14:33:02
  3 | ケビン・デュラント       | ウォリアーズ     | F        | 2016-12-07 14:33:26 | 2016-12-07 14:36:51
(3 rows)

データの削除

登録したデータを削除してみます。
delete

playersテーブルのレコードを確認してみます。
削除したプレイヤーのレコードが削除されていることが分かります。

# SELECT * FROM players;
 id |        name        |     team     | position |     inserted_at     |     updated_at
----+--------------------+--------------+----------+---------------------+---------------------
  1 | クレイ・トンプソン       | ウォリアーズ     | G        | 2016-12-07 14:16:27 | 2016-12-07 14:16:27
  3 | ケビン・デュラント       | ウォリアーズ     | F        | 2016-12-07 14:33:26 | 2016-12-07 14:36:51
(2 rows)

まとめ

気づかれた方もいらっしゃると思いますが、今回プログラミングしたのはルーターファイルの編集で追記した1行だけです。
Phoenix Frameworkを使うことで、簡単なWebアプリケーションを短時間で作成することができます。

Elixirが気になっている方や勉強したい方は、今回のようにWebアプリケーションを作成して、
自動生成されたファイルを読んだり拡張したりすることで勉強になると思います。


こんにちは。
キャスレーコンサルティングのSD(システムデザイン)部の 小松 です。

社内でミドルウェアのチューニングやシステム基盤の設計等を担当しています。
今回は、Go言語で書かれたインテリジェントな負荷分散を実現する Traefik を試した話を紹介します。 (続きを読む…)


こんにちは、キャスレーコンサルティングSD(システム・デザイン)部の青木です。
今回はFontAwesomeを使ってWebページにアイコンを表示してみようと思います。

FontAwesomeとは

FontAwesomeは商用でも無料で使用することができ、様々なユニークなアイコンを画像ではなく、
テキストとしてWebページ上に表示することができるWebアイコンフォントです。

テキストでの表示となるため、cssで自由に大きさや色を変更することができます。
また、FontAwesome自体に多数のアイコン表示機能が組み込まれており、
現時点で600種類以上のアイコンを簡単にWebページに表示することができます。

フォントのライセンスはSIL OFL 1.1、コードのライセンスはMIT Licenseとなっています。
http://scripts.sil.org/OFL
http://opensource.org/licenses/mit-license.html

FontAwesomeのダウンロードと準備

【FontAwesomeをダウンロード】

下記リンク先からFontAwesomeをダウンロードします。
http://fontawesome.io/

ダウンロードの際は
「No thanks, just download Font Awesome」を選択します
download

【必要ファイルの準備】

ダウンロードしたzipファイルを解凍し、cssフォルダ内のファイルとfontsフォルダ内のファイルを
対象サイトのcss,fontsフォルダにコピーしてください。
※cssとして使用するのはfont-awesome.min.cssなのでfont-awesome.cssはコピーする必要はありません。
※自分のcssフォルダとfontsフォルダもFontawesomeのzipと同じように、同じ階層に配置するようにしてください。

[例]
root
  ┗css
  ┗fonts

FontawesomeFileCopy

【FontAwesomeをHTMLにインポート】

HTMLに下記を記載しfont-awesome.min.cssをインポートします。
※ファイルのパスはカレントディレクトリによって異なります。

<link rel="stylesheet" href="./css/font-awesome.min.css">

FontAwesomeアイコンの表示

FontAwesomeのサイトトップ画面から「icons」タグをクリックしアイコンの一覧から使用したいアイコンを選択します。
表示される<i>タグをコピーしHTMLソース上にペーストすることでアイコンを表示することができます。
iconsBtn

getIconCode

【アイコンの大きさを変える】

<i>タグのclass属性内に下記の記述を追加することでアイコンの大きさを変えることができます。

  • fa-lg
  • fa-2x
  • fa-3x
  • fa-4x
  • fa-5x
<i class="fa fa-rocket" aria-hidden="true"></i>
<i class="fa fa-rocket fa-lg" aria-hidden="true"></i>fa-lg
<i class="fa fa-rocket fa-2x" aria-hidden="true"></i>fa-2x
<i class="fa fa-rocket fa-3x" aria-hidden="true"></i>fa-3x
<i class="fa fa-rocket fa-4x" aria-hidden="true"></i>fa-4x
<i class="fa fa-rocket fa-5x" aria-hidden="true"></i>fa-5x

例えば、上記のように記述した場合は下記のように定義されたスタイルが適用されます。

.fa-lg {
  font-size: 1.33333333em;
  line-height: 0.75em;
  vertical-align: -15%;
}
.fa-2x {
  font-size: 2em;
}
.fa-3x {
  font-size: 3em;
}
.fa-4x {
  font-size: 4em;
}
.fa-5x {
  font-size: 5em;
}


fa-lg
fa-2x
fa-3x
fa-4x
fa-5x

【アイコンの角度を変える】

<i>タグのclass属性内に下記の記述を追加することでアイコンの角度を変えることができます

  • fa-rotate-90       時計回りに90度回転
  • fa-rotate-180      時計回りに180度回転
  • fa-rotate-270      時計回りに270度回転
  • fa-flip-horizontal    水平方向に反転
  • fa-flip-vertical      垂直方向に反転

下記のスタイルが適用されます。

.fa-rotate-90 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.fa-rotate-180 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.fa-rotate-270 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}
.fa-flip-horizontal {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
  -webkit-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.fa-flip-vertical {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
  -webkit-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
}
:root .fa-rotate-90,
:root .fa-rotate-180,
:root .fa-rotate-270,
:root .fa-flip-horizontal,
:root .fa-flip-vertical {
  filter: none;
}

normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
fa-flip-vertical

【アイコンを回転させる】

<i>タグのclass属性内に下記の記述を追加することでアイコンの回転させることができます

  • fa-spin   2秒で1回転させる(時計回り)
  • fa-pulse  1秒で1回転させる(時計回り)※1回転を8ステップに分割して1ステップずつ動作する

下記のスタイルが適用されます。

.fa-spin {
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}
.fa-pulse {
  -webkit-animation: fa-spin 1s infinite steps(8);
  animation: fa-spin 1s infinite steps(8);
}
@-webkit-keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}



【アイコンを重ねて表示する】

アイコンのクラスに下記を追加することでアイコンを重ねて表示することができます

  • アイコンの親タグ
    • fa-stack
  • アイコンを表示するのタグ
    • fa-stack-1x  アイコンの大きさを指定(親のと同じ大きさ)
    • fa-stack-2x  アイコンの大きさを指定(親の2倍の大きさ)
    • fa-inverse   アイコンの色を白にする

下記のスタイルが適用されます。

.fa-stack {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
}
.fa-stack-1x,
.fa-stack-2x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}
.fa-stack-1x {
  line-height: inherit;
}
.fa-stack-2x {
  font-size: 2em;
}
.fa-inverse {
  color: $fff;
}

fa-ban on fa-camera

アイコンを疑似要素で表示する

ここまではHTMLにタグを埋め込むことでアイコンを表示してきましたが、
今度はHTMLにタグを埋め込まずに、CSSの疑似要素を使ってアイコンを表示してみます。

【HTML】

<p class="iine">いいね</p>

【CSS】

.iine:before {
  font-family: 'FontAwesome';
  content: "\f087";
  margin-right: 5px;
}

 いいね

疑似要素のcontent属性に指定する値は下記を参照してください。
(アイコン名の横に表示されているUnicodeの値です)
http://fontawesome.io/cheatsheet/

※上記リンク内のUnicodeの値にある「&#x」を「\」(バックスラッシュ)に置き換えて使用してください
※また、アイコンをHTMLに直接埋め込む場合に「&#x」のまま使用します

またはfontawesomeのzipを解凍したcssフォルダ内のfont-awesome.cssを参照することでも
content属性に指定する値を確認することができます。

.fa-thumbs-o-up:before {
  content: "\f087";
}

Sass(Scss)でも表示してみる

※Sassの環境準備は下記に記載しています

【必要ファイルの準備】

FontAwesomeのzipファイル内のscssフォルダ内のファイルを任意のフォルダにコピーします。

FontAwesomeScssCopy

「style.scss」ファイルを新規に作成し、コピーしてきた「font-awesome.scss」をimportします。

createScss

※importの際拡張子の省略が可能なので「.scss」を省略しています

【style.scss】

@import "./font-awesome";

.iine:before {
  @include fa-icon;
  content: $fa-var-thumbs-o-up;
  margin-right: 5px;
}

content属性には表示したいアイコンのUnicodeの値を格納した変数を指定します。
(変数は_variables.scssファイル内に定義されています。)

【Scssファイルのコンパイル】

コマンドプロンプトで、作成したscssファイルのあるディレクトリに移動し、
下記コマンドでscssファイルをコンパイルし、cssファイルを作成します。
※「style.scss」部分にコンパイルしたいscssファイル名を指定
※「../css/scssStyle.css」部分に作成したいcssファイルのパスとファイル名を指定

$ sass --style expanded style.scss:../css/scssStyle.css

※下記コマンドでコンパイルすると今後scssファイルを保存した際に自動でコンパイルしてくれるので便利です

$ sass --style expanded --watch style.scss:../css/scssStyle.css

【HTMLで表示する】

コンパイルして作成されたcssファイルをHTMLに読み込みます。

<link rel="stylesheet" href="./css/scssStyle.css">

※コンパイル前のscssファイルでfont-awesomeを読み込んでいるため、
HTMLにfont-awesome.min.cssを読み込む必要はありません。

以上でScssでもFontAwesomeのアイコンを表示することができます。

補足:【Sassの環境準備】

[Rubyのインストール]

SassをダウンロードするのにRubyが必要なので、まず下記リンク先からRubyをダウンロードし、インストールします。
http://rubyinstaller.org/downloads/

※インスト―ルの際に下記にチェックを入れてインストールしてください
・「Rubyの実行ファイルへ環境変数PATHを設定する」
・「.rbと.rbwファイルをRubyに関連づける」

下記コマンドでRubyがインストールされたことを確認します。

$ ruby -v

Rubyのバージョン確認ができればインストールは成功しています。

[Sassのインストール]

まず下記コマンドでSassのインストール時に使う「Rubygems」を最新状態にします

$ gem update --system

下記コマンドでSassをインストールします

$ gem install sass

下記コマンドでSassがインスト―ルされたことを確認します

$ sass -v

Sassのバージョンが確認できればインストールは成功しています。

以上でSassの環境準備は完了です。

おわりに

今回はFontAwesomeを使いアイコンを表示してみましたが、アイコンを表示させるライブラリは
FontAwesome以外にも下記のようなものもあるので、お気に入りのアイコンがあるライブラリや、
自分にとって使いやすいライブラリを探してみるのも面白いかもしれません。


  • Entypo
    Entypo

  • WebHostingHub
    WebHostingHub Glyphs

  • FoundationIcon
    Foundation Icon Fonts 3

  • Genericons
    Genericons

  • flatIcon
    flaticon

  • iconMoon
    IcoMoon

今回の内容は以上となります。
最後までお読み頂き、ありがとうございました。


お疲れ様です!
キャスレーコンサルティングのSI(システム・インテグレーション)部の栗田です。

ここ最近、何となくウェブサーバーを立ててみたいと思い、今回のテーマを思いつきました。
(ざっくりすぎですが…。)

ただ立てるだけでは味気なく思い、方向音痴な自分へのプレゼントも兼ねて、
「今回は地図上の最短ルートを検索するサイトも作成してみよう!」
と思います。

map
(こんな感じのよくあるものです。)

「前編:サーバー構築編」では、Webサーバー構築からpgRouting用の地図データのインポートまでの説明をさせて頂きたいと思います。

環境は、
OS:Ubuntu16.04 LTS
DB:postgresql9.5、PostGIS、pgRouting
言語:PHP7.0
といった内容の構築となります。
(サーバー接続用のWindows端末も必要となります。)

※Ubuntuのインストール手順は省略させて頂きます。既にインストール済の前提で進めさせて頂ければと思います。

前準備

1. サーバー接続用のWindows端末を用意し、TeraTermをインストールして下さい。
2. TeraTermでサーバーに接続し、下記のコマンドを実行します。
パッケージのリストをサーバーから入手したり、インストール済のパッケージの最新化などを行います。

sudo apt-get update
sudo apt-get check
sudo apt-get -s upgrade
sudo apt-get upgrade

テキストエディタをインストールします。

sudo apt-get install vim

これで前準備はokです。

セキュリティ対策

今時は色々な輩がここぞとばかりにサーバーを乗っ取ろうと試みてくるようです。
怖い世の中ですね…。
それではセキュリティ面の設定に関する説明をさせて頂きます。

♦SSH接続の設定
SSHで接続する際は鍵認証にしたいと思います。ペアとなる鍵がなければSSH接続できない仕組みとなります。

1. TeraTermを起動し、「新しい接続」ダイアログを閉じます。
2. 設定(S) → SSH鍵生成(N)で下記ダイアログを表示します。

tera1

3.「生成」ボタンをクリックします。
4.「鍵のパスフレーズ」を入力後に「公開鍵の保存」「秘密鍵の保存」をクリックします。
5. TeraTermでサーバーに接続し、TeraTermに公開鍵のファイルをドラッグドロップします。
6.「SCP」ボタンをクリックするとホームディレクトリにアップロードされます。

tera2
7. TeraTermで以下のコマンドを実行して、鍵を登録します。

cd ~
mkdir .ssh
chmod 700 .ssh
cat id_rsa.pub > .ssh/authorized_keys
chmod 600 .ssh/authorized_keys
rm -f id_rsa.pub

8. Rootになり、以下のファイルを編集します。

sudo su -
vim /etc/ssh/sshd_config

【変更箇所】

# Port22を開放したままは危険なので、違うポート番号にして下さい。(1024以上が良いと思います。)
#Port22 → コメントを外し、Port12345 に変更(もちろん12345以外でも可能です)

# rootユーザでのログインを無効にして下さい。
#PermitRootLogin yes → コメントを外し、PermitRootLogin no に変更

# パスワード認証を無効にして鍵認証にして下さい。
PasswordAuthentication yes → PasswordAuthentication no に変更

# X11Protcolを遮断して下さい。
#X11Forwarding yes
#X11DisplayOffset 10
X11Forwarding no

9. SSHをリロードして設定を反映して下さい。

service ssh reload

♦iptablesの設定
決められたIPアドレス、ポートの接続のみを許可します。

1.適当なディレクトリを作成し、iptables設定用のスクリプトファイルを作成します。
スクリプトファイルは/etc/network/iptables/set_iptablesで新規作成します。

sudo mkdir /etc/network/iptables/
sudo vim /etc/network/iptables/set_iptables

【ファイルの内容】
ファイルの内容は状況によって変更して下さい。

/sbin/iptables -F
/sbin/iptables -X
/sbin/iptables -P INPUT DROP
/sbin/iptables -P OUTPUT ACCEPT
/sbin/iptables -P FORWARD DROP
/sbin/iptables -A INPUT -i lo -j ACCEPT
/sbin/iptables -A OUTPUT -o lo -j ACCEPT

#下記のようなプライベートIPアドレスはアクセス禁止
/sbin/iptables -A INPUT -s 10.0.0.0/8 -j DROP
/sbin/iptables -A INPUT -s 172.16.0.0/12 -j DROP
/sbin/iptables -A INPUT -s 192.168.0.0/16 -j DROP

#PING応答許可
/sbin/iptables -A INPUT -p icmp --icmp-type echo-request -j ACCEPT

#下記ポート有効(12345は♦SSH接続の設定の8.で決めたポート番号です)
/sbin/iptables -A INPUT -p tcp --dport 12345 -j ACCEPT
/sbin/iptables -A INPUT -p tcp --dport 80 -j ACCEPT
/sbin/iptables -A INPUT -p tcp --dport 5432 -j ACCEPT

/sbin/iptables -A INPUT -m state --state ESTABLISHED,RELATED -j ACCEPT
/sbin/iptables-save > /etc/network/iptables/iptables.db

2. 作成したファイルに実行権限を与えて実行して下さい。実行するとiptables.dbが作成されます。

sudo chmod +x /etc/network/iptables/set_iptables
sudo /etc/network/iptables/set_iptables
ls /etc/network/iptables/

3. ネットワークの起動時にiptablesの設定を反映するシェルスクリプトを作成します。
/etc/network/if-pre-up.d/ディレクトリにシェルスクリプトファイルを設置すると、ネットワーク起動時に自動でスクリプトを実行します。
シェルスクリプトファイルは/etc/network/if-pre-up.d/load_iptablesで新規作成して下さい。

sudo vim /etc/network/if-pre-up.d/load_iptables

【ファイルの内容】

#!/bin/sh
/sbin/iptables-restore < /etc/network/iptables/iptables.db

4. 実行権限を付与します。すぐに反映したい場合はシェルスクリプトを実行して下さい。

sudo chmod +x /etc/network/if-pre-up.d/load_iptables
sudo /etc/network/if-pre-up.d/load_iptables

次は、Webサーバーの導入に入りたいと思います。

ApacheとPHPを導入

1. Apacheをインストールします。

sudo apt-get install apache2

2. PHPと共に、Apacheとpostgresqlで使用するためのモジュールをインストールします。

sudo apt install -y php
sudo apt install libapache2-mod-php
sudo apt-get install php7.0-pgsql

3. /var/www/htmlにinfo.phpというファイルを作成します。
【ファイルの内容】

<?php
 phpinfo();
?>

4. Apacheを再起動します。

sudo systemctl restart apache2.service

5. Windows端末もしくはスマホなどから、http://(サーバーのIPアドレス)でアクセスし、
「It Works!」が表示されればApacheが正常に起動しています。
apache1

6. Windows端末もしくはスマホなどから、http://(サーバーのIPアドレス)/info.phpでアクセスし、
「phpinfo」が表示されればPHPが正常に起動しています。
php1

postgresqlを導入

次にルート検索の肝となるデータベース(postgresql)のインストールを行いたいと思います。
あと絶対に必要ではありませんが、Windows端末にpgAdminをインストールしておくと便利ですので、ご検討下さい。

1. pgRouting絡みのパッケージをインストールするために、aptのリポジトリに以下を追加します。
あとはadd-apt-repositoryを使用できるようにします。

sudo apt-get install apt-file
sudo apt-file update
sudo apt-file search add-apt-repository
sudo apt-get install software-properties-common
sudo add-apt-repository ppa:georepublic/pgrouting-unstable
sudo apt-get update

2. postgresqlとPostGISをインストールします。

sudo apt-get install postgresql postgis proj-bin gdal-bin
sudo /etc/init.d/postgresql start

3. pgRoutingとOpenStreetMapのデータをpgRoutingで使うためのパッケージをインストールします。

sudo apt-get install postgresql-9.5-pgrouting
sudo apt-get install osm2pgrouting

4. postgresユーザのパスワードを設定して下さい。

sudo passwd postgres

5. OpenStreetMap用テーブルを作成します。

sudo -u postgres createdb --encoding=UTF8 osm;

6. posgtesユーザーでログインし、PostGISとpgRouting拡張を適用します。

su - postgres
psql --username=postgres --dbname=osm -c "CREATE EXTENSION postgis;"
psql --username=postgres --dbname=osm -c "CREATE EXTENSION pgrouting;"

7. postgresqlの設定を変更します。まずはpostgresql.confを変更し、外部からpostgreSQLに接続できるようにします。

sudo vim /etc/postgresql/9.5/main/postgresql.conf

【変更箇所】

#listen_addresses = 'localhost' を listen_addresses = '*'に変更して下さい。

7. 次にpg_hba.confを変更し、こちらも外部からpostgreSQLに接続できるようにします。

sudo vim /etc/postgresql/9.5/main/pg_hba.conf

【変更箇所】

host all all 0.0.0.0/0 trust の行を追加します。
local all postgres peer を local all postgres trust に変更します。

8. 変更後にpostgresqlを再起動します。

sudo /etc/init.d/postgresql start

openStreetMapデータの取り込み

1. http://download.geofabrik.de/に日本の部分を効率よく切り取ってくれたデータがありましたので、これを利用します。
OSMの地図データ(XML)を圧縮したデータがpbfデータとなります。ホームディレクトリにダウンロードします。

cd ~
wget -c http://download.geofabrik.de/asia/japan-latest.osm.pbf

2. *.pbfを*.osm(xml)に変換します。変換後はサイズが25GBほどになりますので、ご注意下さい。

osmconvert japan-latest.osm.pbf > map.osm

3. postgresqlにOSMデータをインポートします。
ただし物凄く時間がかかってしまい、ここから先は後編で説明させて頂きたいと思います。
コマンドとしては以下で実行できると思います。

osm2pgrouting -f map.osm -c /usr/share/osm2pgrouting/mapconfig.xml -d osm -U postgres --clean

※物凄くスワップ領域を使うので、途中でOOMKillerに”Killed”される可能性があります。
その場合はスワップ領域を増やして下さい。とりあえず一時的に20GBまで増やしてしまいました…。

# 管理者権限になる
sudo su -

# スワップ用フォルダの作成
mkdir /var/swap

# 2Gのスワップ用のファイル作成
dd if=/dev/zero of=/var/swap/swap0 bs=1M count=20480

# パーミッションの設定
chmod 600 /var/swap/swap0

# スワップ割り当て
mkswap /var/swap/swap0
swapon /var/swap/swap0

スワップ領域を削除する場合は以下のコマンドを実行して下さい。

# スワップ停止
swapoff /var/swap/swap0

#スワップ用ファイルの削除
rm /var/swap/swap0

最後に

次回はフロント側(JQuery+Ajax、ハイブリッドアプリ)もしくはAndroidアプリ(LocationManagerなどでGPSを使用するなど)で、現在位置から最も近いルートをサーバーから取得しながら、目的地へ向かってみるなど出来たら良いな…と考えております。
地図を扱うと世界旅行した気分になれますね(笑)
発想次第では色々な可能性を秘めていると思いますので、地図に関連する開発も勉強して頂けますと夢が膨らむと思います!

以上となります。
最後まで読んで頂き、大変感謝です!


こんにちは。
キャスレーコンサルティングのSI(システム・インテグレーション)部のKanemakiと申します。

皆さん、GoogleAppsScriptは活用されていますか?

これまでも技術ブログでは
 Google Apps Script入門
 Google Apps Scriptで、心温まる年賀状を作ろう!
と過去に取り扱っていますが、今回はGoogleAppsScript(以下GAS)とラベルを活用したメール整理術をご紹介します。

(続きを読む…)


こんにちは。
キャスレーコンサルティング SI(システム・インテグレーション)部の北見です。

Java9については、来年リリースが予定されています。
Java8の新機能の中で目玉機能の一つであった、「java.util.stream」へ新しくメソッドが追加予定となっております。
今回は、新しく追加予定のメソッドについて、試してみたいと思います。

Java9インストール

まずは、Java9のインストールです。
※詳細なインストール手順は割愛させて頂きます。

Java9ダウンロード・インストール

以下のサイトより、環境にあったJDKのダウンロードを行い、「jdk-9-ea+140_windows-x64_bin.exe」を実行しインストールします。
今回インストールしたJDKは、「JDK9 build140」となります。
https://jdk9.java.net/download/

java9_01

環境設定

インストールしたJDKについてパスの設定を行います。
・「コントロールパネル」⇒「システムとセキュリティ」⇒「システム」⇒「システムの詳細設定」⇒「環境変数」を選択し、環境変数の設定画面を表示します。
・「システム環境変数」より「JAVA_HOME」「Path」へ、今回インストールしたJDKのインストール先のパスを設定します。
java9_02

インストールおよび環境設定の確認

コマンドプロンプトにて「java -version」と記載して「Enter」を選択します。
実行結果として、インストールしたJavaのバージョンが表示されれば、インストール、環境設定は完了です。
java9_03

java.util.streamの新機能

Stream機能は、Java8で追加された機能となりますが、
Java9では新しく以下の3つのメソッドが追加予定となっております。

追加予定のメソッド一覧となります。
java9_04
※詳細については、http://download.java.net/java/jdk9/docs/api/index.htmlをご参照ください。

では、各メソッドについて、Java8(Stream不使用)、Java8(Stream使用)、Java9を比較しながら試していきたいと思います。
Streamについては、ラムダ式の使用が前提となっています。

ラムダ式、Streamってなに?という方は、以下のキャスレー技術ブログをご参照ください。
ラムダ式:【初心者向け】今更聞けない?Java8のラムダ式について知ろう!
stream:【初心者向け】Java8 Stream APIについて知ろう

① takeWhile

本メソッドは特定の条件に一致している間のデータを対象とします。
以下のコードは、リスト内の文字列が7文字未満である間のデータを対象に出力します。

Java8では、対象外要素のスキップや取得対象の要素数の特定(条件に一致している間の要素数)を行い処理を行う必要がありました。
Java9では、takeWhileへ対象とする条件(本ケースでは7文字未満)を指定するだけで対象データ(条件一致している間)の処理が可能となりました。
要素数の特定、スキップ処理が不要となるためコードも減り、本メソッドへ条件指定することで、何をしたいのかがより分かり易くなりました。

・Java8 – Stream不使用
java9_05

・Java8 – Stream使用
java9_06

・Java9
java9_07

・実行結果
java9_08

② dropWhile

本メソッドは特定の条件に一致している間のデータを対象外とし、それ以降のデータを対象とします。
以下のコードは、リスト内の文字列が7文字未満である間のデータを対象外とし、それ以降のデータを対象に出力します。

Java8では、対象外要素のスキップや取得対象の要素数の特定(条件に一致するまでの要素数)を行い処理を行う必要がありました。
Java9では、dropWhileへ対象とする条件(本ケースでは7文字以下)を指定するだけで対象データ(条件一致以降)の出力が可能となりました。
takeWhileと同様に要素数の特定、スキップ処理が不要となるためコードも減り、本メソッドへ条件指定することで、何をしたいのかがより分かり易くなりました。

・Java8 – Stream不使用
java9_09

・Java8 – Stream使用
java9_10

・Java9
java9_11

・実行結果
java9_12

③ ofNullable

本メソッドは、対象のデータがnullではない場合は、Streamを返送。nullの場合は、空のStreamを返送します。
以下のコードは、mapの要素よりlistに一致するキー情報がある場合のみ、そのVALUE値を出力しています。
Java8では、null判定を実施する必要がありました。
Java9では、本メソッドを使用することで、該当データが存在する(nullでない)場合のみ処理を行うことができます。
Optionalと同様にnullを安全に使用するためのメソッドと思われます。

・Java8 – Stream不使用
java9_13

・Java8 – Stream使用
java9_14

・Java9
java9_15

・実行結果
java9_16

最後に

今回は、Java9インストール、Streamの新機能について試させて頂きました。
私の現場はJava7のため、ラムダ式、Streamは、ほぼ初めて動かしてみましたが、コード量も削減され、可読性も良くなりました。
現時点で3メソッドのみの追加予定ですが、今後ますます便利になっていくと思います。

次回は、Java9のその他機能について、試してみたいと思います。

ご一読頂き有難うございました。


こんにちは。
キャスレーコンサルティングのSD(システム・デザイン)部:野田です。

弊社はAWS(Amazon Web Services)などのクラウド環境を積極的に取り入れており、システム構築をしております。
インフラ部分はクラウドベンダーが何もかも担当してくれるため、開発土台の構築は本当に楽になったと思います。
また、パフォーマンス監視についてもクラウドベンダーにお任せしてしまうことで、運用の負担を減らすことも可能となりました。

しかし、すべてをベンダーに丸投げしても、思った通りの監視が出来ないことが多々あります。
私は最近のプロジェクトにおいて、AWS環境をNewRelicというサービスでパフォーマンス監視する開発に携わりました。
そこで、クラウド特有の監視方式にとらわれない、NewRelicでのパフォーマンス監視についてご紹介したいと思います。

そもそもNewRelicって?


New Relic は、ソフトウェア・アナリティクスを業とする米国企業。カリフォルニア州サンフランシスコが拠点。現在の CEO、ルー・サーンが 2008 年に創業した。New Relic のサービスは、ウェブアプリケーションやモバイルアプリケーションのリアルタイム監視であり、クラウド、オンプレミス、あるいはそのハイブリッド環境で稼働させることができる。提供形態は SaaS(Software as a Service)モデルである。ちなみに「New Relic」という名前は、創業者ルー・サーン(Lew Cirne)のアナグラムである。
引用-「New Relic
『フリー百科事典 ウィキペディア日本語版』より。
“最終更新 2016年2月6日 (土) 14:59″ UTC


上記のように、ウェブアプリケーション・モバイルアプリケーションのリアルタイム監視に加え、サーバ監視・ブラウザ監視までリアルタイムで確認することができるサービスです。
NewRelicを使用することの利点としては、大きく2つあります。

・監視サーバを立てる必要がない。
・収集したパフォーマンスデータを自動的にグラフ化してくれる。

それぞれについて解説していきましょう。

監視サーバを立てる必要がない

まず、パフォーマンス監視をするには必ず「監視サーバ」というものを構築する必要があると思います。
システム内でマネージャ機能を持った「監視サーバ」が、エージェントを監視する・・・。
監視の形としてはこのような構図が多いのではないでしょうか。

NewRelicでは、NewRelic側でエージェントを一元管理をしてくれるので、「監視サーバ」という存在は必要ありません。
また、監視画面はインターネット上で確認できるので、「リモート操作が出来ないから、サーバルームに入って確認しなきゃ・・・」なんて手間もありません。
監視専用のサーバを購入する必要がなくなり、購入費用の削減やサーバ台数をスリムにすることができます。

収集したデータを自動的にグラフ化してくれる

こちらも、マネージャ機能を持った「監視サーバ」でパフォーマンス状況をグラフ化してくれる機能があると思いますが、
NewRelicでは自動的にグラフ化してくれるので、インターネット上からパフォーマンス状況をグラフィカルに
確認することができます。

データ保持期間はプランによりますが、短期間・中期間・長期間でパフォーマンスの推移を確認することができます。
また、通知機能も備わっているので、閾値を設定してパフォーマンス異常に即時検知することも可能です。

いかがでしょうか。
市販の監視ソフトにも勝るとも劣らない機能が、NewRelicには備わっています。

インストールしてみよう

さて、それではNewRelicの導入方法についてご紹介していきます。
今回は以下のAWS環境に導入してみました。
・Amazon Linux AMI 2016.03.d

1.NewRelicアカウントの作成
まずはNewRelicのアカウントを作成します。

AWS環境利用者には、AWS専用の登録サイトがあるので以下のリンク先からアクセスしてください。
http://newrelic.com/aws

アカウント作成には、「Sign Up」をクリックします。

40

登録には以下の情報が必要です。
・名前
・メールアドレス
・NewRelicパスワード(任意の文字列)
・電話番号(国指定を”日本”にすること)
・国
・会社名
・従業員数
・サーバ台数

41

上記を記入し「私はロボットではありません」と、「Terms of Service」にチェックを入れ、「Sign Up for New Relic」をクリックしてください。

42

少し経つと、登録時に入力したメールアドレス宛に確認のメールが来るので、リンク先をクリックして登録が完了します。

2.NewRelicへログイン
作成したアカウントでNewRelicへログインします。
「Log In」をクリックします。

44

先ほど作成したアカウントのメールアドレス・パスワードを入力して、「Sign in」をクリックします。

45

NewRelicにログインすると、NewRelic APMの画面が開きます。

21

ここではPHPやRubyなどのソフトウェアの監視をするためのエージェントがインストールできます。
※なお今回は使用しません。

3.サーバ監視用のエージェントインストール
サーバ監視用のエージェントをインストールするので、左上から「SERVERS」を選択します。

46

サーバ監視用のNewRelicエージェントをインストールするための画面が開きます。
今回の環境は、「Amazon Linux AMI 2016.03.d」なので、「Red Hat or CentOS」をクリックします。

47

そうすると、画面下部に「Red Hat or CentOS」のインストール手順が表示されます。
手順についてはコマンドベースで記載していきます。

1.rootにスイッチします。
$ sudo su -

2.NewRelicのパッケージをインストールします。
なお、NewRelic上で表示されたコマンドでは、32bit版がインストールされます。
64bit版のパッケージをインストールする場合は、下記に記載しているコマンドを実行してください。
[32bit]
# rpm -Uvh https://download.newrelic.com/pub/newrelic/el5/i386/newrelic-repo-5-3.noarch.rpm
[64bit]
# rpm -Uvh https://yum.newrelic.com/pub/newrelic/el5/x86_64/newrelic-repo-5-3.noarch.rpm

3.サーバモニターパッケージをインストールします。
# yum install newrelic-sysmond

4.ライセンスキーの設定を行います。
アカウント毎に割り振られる番号になるので、画面上に表示されたコマンドを実行してください。
# nrsysmond-config --set license_key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

5.サーバモニターのデーモンを起動します。
# /etc/init.d/newrelic-sysmond start

以上でインストール作業は終了です。
ここまで5分くらいでできてしまうほど簡単ですね。

監視画面を見てみよう

それでは実際に監視画面を見てみましょう
左上の「SERVERS」をクリックして再読み込みすれば、エージェントをしたサーバが一覧として表示されるはずです。

26

サーバ名をクリックすると、そのサーバの詳細なパフォーマンス状況がグラフィカルな画面として表示されます。

27

NewRelicでは、サーバの以下の項目を監視することができます。

・CPU使用率 (Overview、Processesから確認可能)
・メモリ使用率 (Overview、Processesから確認可能)
・プロセス毎のCPU、メモリ使用率 (Processesから確認可能)
・ディスクI/O、使用率 (Disksから確認可能)
・ネットワークI/O (Networkから確認可能)

左側ペインから各項目ごとに画面が用意されており、それぞれのデータが詳細に表示されます。
初めのほうにも書きましたが、短期間・中期間・長期間のパフォーマンス状況の推移をNewRelic上で確認することが出来てしまうんです。
なお、閾値設定や異常時のメール通知などの機能については、別の機会で語れたらと思います。

最後に

いかがでしたでしょうか。
今回は簡単にサーバの監視を紹介させていただきましたが、NewRelicではまだまだ出来ることがたくさんあります。
・アプリケーションレベルの監視(PHP、Rubyなど)
・Mobileの監視
・AWS環境のRDS,ELBなどのコンポーネントの監視
・MySQLなどデータベースエンジンの監視(要プラグイン) など

触れられなかった、便利な機能がたくさんあり、可能性は無限に広がっています。
私もNewRelicの奥深さを感じているので、新しい機能を覚えたら紹介させて頂きたいと思います。

最後までお読みいただき、ありがとうございました。


こんにちは。
キャスレーコンサルティングのSD(システム・デザイン)部:藤本です。

弊社内では新規参画のメンバー向けにVagrantで作成した仮想イメージを提供し、スピーディーに且つ正確に開発環境の引継ぎ及び提供を行っています。
今回はWindows上に、Vagrant+VirtualBoxでCentoOS環境を構築する手順をご紹介します。
その際Cygwinを使ってVagrantの起動や、ゲストOSへの接続もやってみたいと思います。

Vagrantとは

簡単にいうとVirutualBoxに環境を立ち上げるための設定ファイルを書いて
それから環境を作ることが出来るというイメージです。


Vagrantを用いると、構成情報を記述した設定ファイルを元に、仮想環境の構築から設定までを自動的に行うことができる。当初はVirtualBoxをターゲットとしていたが、1.1以降のバージョンではVMwareなどの他の仮想化ソフトウェアやAmazonEC2のようなサーバー環境も対象とできるようになった。Vagrant自身はRubyで作成されているが、PHPやPython、Java、C#、JavaScriptといった、他のプログラミング言語の開発においても用いることができる。
引用-「Vagrant (ソフトウェア)
『フリー百科事典 ウィキペディア日本語版』より。
“最終日付 2014年10月12日 (日) 16:35″ UTC


とのことで、今はVirtualBox以外でもつかえるのでとても便利。

Vagrantインストール

Vagrantのインストールですが、その前にVirtualBoxをインストールします。
下記URLからWindows用のファイルをダウンロードしてインストールします。
https://www.virtualbox.org/wiki/Downloads
virtuanbox

次にVagrantをダウンロードしてインストールします。
下記URLからWindows用のファイルをダウンロードしてインストールします。
https://www.vagrantup.com/downloads.html
vagrant

ダウンロードしたらmsiファイルをダブルクリックしてインストールします。
インストールするディレクトリは任意で大丈夫です。

Cygwinとは

WindowsでもUNIXコマンド実行ができるようになり、自分はかなり重宝してます。


UNIXで頻繁に使用されるシェルやコマンドなどのプログラムをWindows上でソースコードからコンパイルできるようにしたもので、UNIX用の機械語バイナリコードをエミュレートするものではない。
Cygwin1.dllランタイムライブラリが、POSIXのシステムコールと同等の機能を提供しており、それぞれのプログラムはこれを動的にリンクすることでUNIX上とほぼ同じ動作が可能になる。また、このライブラリの存在により、Cygwin用として提供されていない他のUNIX用プログラムのソースコードも、従来の様な大幅な変更無しにWindows用にコンパイルすることが可能である。
引用-「Cygwin
『フリー百科事典 ウィキペディア日本語版』より。
“最終日付 2016年4月20日 (水) 14:49″ UTC


Cygwinインストール

では、Cygwinのインストール方法ですが、下記URLからインストーラーをダウンロードして実行します。
https://cygwin.com/install.html
cygwin

  1. インストール先を指定します。任意の場所で問題ないですが、今後ここがルートディレクトリとなります。 自分は「C:\cygwin64\」というディレクトリにしました。
  2. インストールで利用するパッケージのダウンロード先を設定します。これはどこでも大丈夫です。
  3. インターネット接続環境ですが問題なければ「DirectConnection」となります。
    プロキシ経由などで接続している方等は上記以外を選択して明示的にプロキシ設定等を行う必要があります。
  4. パッケージを取得するURLを選択します。
    どれでも問題ないですが、JPドメインからダウンロードしたほうがよさそうです。
  5. インストールするパッケージを選択します。自分が使いたい内容に依存するので、好みのパッケージを選択してください。
    自分のオススメするパッケージは以下で「serch」のテキストボックスから検索してください。

    ・tar
    ・unzip
    ・wget
    ・vim
    ・git
    ・scp

    ※後からでもパッケージ追加はできるので、悩まなくても大丈夫です。

  6. インストールが完了したらcygwinターミナルを起動します。
  7. 起動したらターミナルの設定とかしますが今回は割愛して
    「apt-cyg」
    というパッケージ管理ツールをインストールします。
    これを使えばアプリケーションが簡単にインストールできるので、以下のコマンドでGitHubからダウンロードしてきます。

    $ wget https://raw.githubusercontent.com/transcode-open/apt-cyg/master/apt-cyg
    

    実行権限をつけてPATHの通っている場所に置きます。

    $ chmod 755 apt-cyg
    $ mv apt-cyg /usr/local/bin/
    

    これでapt-cygが利用できるようになり
    例えばvimのインストールは下記のようなコマンド実行でインストールできます。

    $ apt-cyg install vim
    

    他にも国内のリポジトリからCygwin事態を更新するようにするには

    $ apt-cyg -m ftp://ftp.iij.ad.jp/pub/cygwin/update
    

    のようなコマンドを実行できるようになります。

これで、Cygwinインストールは一旦完了となります。

VirtualBoxにCentOSboxファイルを登録する

Vagrantのインストールが完了した後は、VirtualBoxへboxファイルを登録します。
今回はCentoOS6.7を使用するので、以下のコマンドをCygwinターミナルから実行します。

$ vagrant box add centos6-7 https://github.com/CommanderK5/packer-centos-template/releases/download/0.6.7/vagrant-centos-6.7.box

※他のOSを選択したい場合は、boxファイルをここから選択してください。
http://www.vagrantbox.es/
ダウンロードが完了したら次のコマンドで確認しましょう。
「centos6-7」と確認できたらOKです。

$ vagrant box list

Vagrantfileの作成

Vagrantの初期化を行います。
その際、起動したいディレクトリで実行すると楽です。
自分の場合は「C:\HashiCorp\CentOS67」というディレクトリを作成して、そこで初期化コマンドを実行しました。
Cygwinターミナルから初期化コマンドを実行します。
その際、起動したいディレクトリに移動してから実行します。

$ cd /cygdrive/c/HashiCorp/CentoOS67/
$ vagrant init centos6-7

これでVagrantfileが作成されました。
生成したVagrantfileを編集します。(テキストエディタで編集しても、CygwinのVIで編集してもOKです。)

//Windowsから見ることの出来るIPを指定
config.vm.network"private_network",ip:"192.168.33.10"
//ゲストOSのポート指定
config.vm.network"forwarded_port",guest:80,host:8009

CygwinからVagrant起動

設定が済んだのでいよいよ起動します。
起動コマンドは下記となります。

$ vagrant up

注意としては、先ほど編集したVagrantfileがあるディレクトリで実行しなければならないです。
初回の起動には、多少時間がかかります。

CygwinからゲストOSへ接続

起動ができたら接続します。
接続コマンドは下記となります。

$ ssh vagrant@192.168.33.10
or
$ vagrant ssh

初期設定は、ID/PWともに{vagrant}となっています。
これでゲストOSが起動できたので、あとはミドルウェアのインストールを好みや
案件内容にそってインストールしていけば、それぞれの環境が構築できます。

最後に

Vagrantを使うことで、作成したインスタンスをそのままパッケージ化し配布することも可能です。
そうすることによって、新規参画のメンバーにも導入コストを抑えて開発環境を提供することが可能となります。
社内でも様々な環境があるので、Vagrantをつかって共有化できるとよいですね。
以上となります。
ここまで読んでいただき、ありがとうございました。


12345...10...

  • Profile
    キャスレーコンサルティングの技術ブログです。
    当社エンジニアが技術面でのTips、技術系イベント等についてご紹介いたします。
  • CSV社長ブログ
  • チーム・キャスレーブログ