こんにちは。キャスレーコンサルティング LS(リーディングサービス)部の清水(皓)です。

業務で自動テスト環境を構築する機会があり、Selenium+ImageMagick+C#でブラウザテストを書きました。
私はコーディングするのは好きですが、テストを行うことは苦手です。
しかし、書いたコードはテストしないと、頭の中で繰り返し書いたコードを思い出し、
バグを見つけてしまい、夜も眠れなくなってしまいます。

そこで、品質と生産性、心の安定を求めて他のテストツールにも興味が湧いたのですが、
今回はその中でも色々と便利に使えそうな、WebdriverIOを勉強中のTypeScriptで使ってみました。

TypeScript、WebdriverIO、Seleniumで自動テスト環境を構築し、テストを自動化していきましょう。
自動テスト環境を整備することで、リグレッションテストが効率化され、新規開発に注力できるようになっていきます。

なぜWebdriverIOか

WebdriverIO公式

業務では、C#とImageMagickというお告げがあったため、Selenium-Webdriverを使いましたが、
コードが冗長で、書きにくいと感じました。

シンプルに書きたい、手が疲れると思ったところ、
WebdriverIOとNightmareの二つがコードをシンプルに書けそうだと思い、
クロスブラウザ対応していることから、WebdriverIOを選びました。

NightmareはElectronを使っていて面白そう、名前がカッコいいなどGoodなポイントがありました。
こちらは後々、遊んでみようと思っています。 (続きを読む…)


こんにちは。キャスレーコンサルティングのLS(リーディング・サービス)部の向井と申します。

今回は、HTMLとjsのみで簡単にWebブラウザのプッシュ通知を、実装する方法をご紹介します。

1.プッシュ通知

スマートフォンアプリでは、おなじみのプッシュ通知ですが
実はWebブラウザでも、簡単に導入することができます。

これまでは、ユーザが自らWebサイトの情報にアクセスしなければならなかったのですが、
プッシュ通知の導入をすると、Webサイト側から自動的に情報を送ることが可能になります。

Webサイト更新のお知らせなど、今まではメールやRSSを使用する必要がありましたが、
これらは登録の手間がかかってしまいます。

一方、プッシュ通知はユーザが一度承認するだけで、面倒な手続きは一切ありません。

また、メールは開封されずにユーザに情報が届かないケースも想定されますが、
プッシュ通知は情報を届けたいタイミングを選んで、確実に画面上に表示することが出来ます。

2.push.js

今回プッシュ通知導入にあたり、使用するのは「push.js」です。

Webブラウザ上では、「Notification API」によって画面上に通知を出します。
これは、Webブラウザからの通知を制御するためのAPIですが、
様々な処理を記述する必要があるため、どうしてもコードが長くなってしまいます。

「push.js」とは、「Notification API」をシンプルなコードで簡単に制御するためのjQueryプラグインです。

「push.js」には、クロスブラウザ対応処理や通知許可の処理があらかじめ含まれており、
ライブラリを読み込むだけで、簡単にプッシュ通知を実装することができます。

ライブラリはGitHubからダウンロードして読み込む方法の他に、コマンドラインからインストールもできますが、
下記のコードを記述することで、CDN経由で読み込むこともできます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/push.js/0.0.11/push.min.js"></script>

★Service Worker

push.jsは、「Service Worker」を使ってブラウザにプッシュ通知を表示しています。

Service Workerとは、通常のJavaScript環境とは別に、
Webページのバックグラウンドで動かせる、イベント駆動のJavaScript環境です。

非常に大雑把ではありますが、以下のような流れでプッシュ通知が送られます。

1.ユーザがサイトにアクセスし、Service Workerにユーザの端末を登録する。

2.送信者が登録された端末へプッシュ通知を送信し、 ServiceWorker がイベントを検知し、
ユーザーの端末上に通知内容を表示する。

プッシュ通知の他にも、これを土台として様々なAPIと組み合わせることで、
オフラインでの動作、バックグラウンドでの処理が可能となります。

それでは、実際に「push.js」を使ってプログラムを作ってみましょう。

3.導入方法

今回はボタンを押すと、プッシュ通知が送られるというプログラムを作成します。

まずは、HTMLを記述していきます。
ボタンのみのシンプルなページです。

<!DOCTYPE html>
<html lang="ja">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<meta charset="UTF-8">
<title>ブラウザでプッシュ通知を実装</title>
</head>
<body>
<center>
 <h1 style="margin-top: 300px">ブラウザでプッシュ通知を実装しよう</h1>
</center>
<center>
 <input type="button" id="push" onclick="return push()" value="クリックするとプッシュ通知が送られます"/>
</center>
</body>
</html>

push_1

下準備は完了したので、いよいよ「push.js」を導入していきます。

先ほどご紹介した、ライブラリをCDN経由で読み込むコードを挿入し、
プッシュ通知を呼び出すための、Push.createメソッドを記述していきます。

このメソッドにはメッセージ内容やアイコン、表示時間やクリック後の挙動など、様々な内容を設定することができます。

まず、メソッドの第一引数にプッシュ通知のタイトルを記述します。

<script>
	function push(){
		Push.create('更新情報');
	}
</script>

これだけでも、プッシュ通知を出すことは可能です。
しかし、今回は第二引数にオプションを設定し、詳細な内容を記述してみます。

以下、利用できるオプションです。

オプション

- icon [ String ] : アイコン

- body [ String] : 通知バーの本文

- onClick [ Function ] : 通知をクリックした時のイベント

- onClose [ Function ] : 通知を閉じた時のイベント

- onError [ Function ] : エラーが発生した時のイベント

- onShow [ Function ] : 通知が表示された時のイベント

- tag [ String] : タグ

- timeout [ Integer ] : 通知が消える時間 ( * ミリ秒 )

<script>
	function push(){
		Push.create("更新情報",
		{
		    body: "ブログの更新をお知らせします!",
		    icon: 'casley_logo.png',
		    timeout: 8000,
		    onClick: function () {
		        window.focus();
		        this.close();
	    	}
		})
	}
</script>

ここで注意が必要なのは、プッシュ通知はローカルホストかHTTPSの環境で表示されます。
今回はローカルホストを立ち上げ、ページを表示します。

それでは、ボタンを押してプッシュ通知を出してみます。

push_2

プッシュ通知を許可を要求するポップアップが、表示されました。

『許可』を選択し、もう一度ボタンをクリックしてみましょう。

push_3

画面に、プッシュ通知が表示されました。

このように、プッシュ通知を送ることで、メッセージをほぼ確実にユーザに届けることができます。
プッシュ通知の導入により、サイトへの流入を促進できるのではないでしょうか。

4.最後に

いかがだったでしょうか。とても簡単にプッシュ通知を、ブラウザで実装することができましたね。

今回のデモプログラムは、とても単純なものでしたが、
天気や交通情報、サイト更新やセール開始のお知らせなど、様々な場面で活用することができます。

また、私はSlack(チャットツール)を使用しておりますが、新着メッセージがあればをプッシュ通知で知らせてくれます。
Slackのようなコミュニケーションツールにおいては、メッセージの緊急性が高いこともあるため、
レスポンス低下の防止策として、プッシュ通知の利用は非常に効果的であると言えます。

デバイスを起動している間ならば、ほぼ確実にユーザの目に入るプッシュ通知は
通知を送るタイミングや回数、伝える内容など、ユーザにとって「迷惑な配信」にならないためには工夫が必要ですが、
有効に使えばマーケティングの手法として大いに役立つはずです。

Webサイトを運営する上で、導入するメリットは十分あるのではないでしょうか。

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


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

最近巷では、公開APIを使用したwebサービスが流行っておりますね!
しかし、自分でwebサービスを始めたいと思っても、お店の情報などを一から収集していくのは、ほぼ不可能ですよね…。
そんな時こそ、公開APIです!

【公開APIとは】

様々なサイトが情報を公開しており、
こちらからAPIを利用してリクエストを投げることで、そのサイトの情報を取得が出来ます。
(ちなみに、グルメサイトから行政機関まで、様々なAPIを公開しています。)

それでは、簡単なものを作成して、外部APIの仕組みを理解していきましょう!

(続きを読む…)


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

今回はMastodonのソースを参考に、数独のwebアプリを作り、その要素技術を紹介していこうと思います。

今回使用する技術(レシピ紹介)

以下が、今回のレシピになります。

【OS】
CentOS 7
【DB】
PostgreSQL9.6
【言語】
Ruby 2.4.1
JavaScript
【その他】
rbenvhaml-rails
React
Redux
ECMAScript 2015
Webpacker
dotenv-ruby

(続きを読む…)


Hi, this is PJ MARTIN

Lately I got curious about Angular JS framework and decided to give it a try.

Angular JS is a javascript MVC framework which features Double Data Binding between model and view.
Its routing engine is great for making (multi-screen) Single Page Application.

I have just learned the basics from this tutorial

https://www.airpair.com/angularjs/posts/angularjs-tutorial

and made my own example page to conjugate everything.
But in this first blog post I will introduce only the basic concepts.

After making a brief overview of Angular Concepts, I’ll first introduce a first “Hello World” example, then I will give some filters example.

(続きを読む…)


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

今回は、Angular JSフレームワークについて記事を書かせていただきます。

Angular JS は、MVC(Model View Controller)Javascriptフレームワークです。

ModelとViewの間で、「ダブルデータバインディング」があります。
「ルーティング」でシングルページアプリケーションという、
一つのページで複数の画面の表示切り替えの機能を用いています。

下記チュートリアル(英語)を参考にして、サンプルAngularJSページを作りました。
https://www.airpair.com/angularjs/posts/angularjs-tutorial

今回の投稿では、まずAngularJSの概念を説明して、
このチュートリアルを例にした”Hello World”サンプルページの紹介、AngularJSフィルターの説明を行います。

(続きを読む…)


はじめに

キャスレーコンサルティング株式会社 SI(システム・インテグレーション)部の松本(卓)と申します。
今回は、フロントエンド開発で使用されている「React.js」の入門編としてご紹介したいと思います。

React.jsについて

React.jsとは、Facebookが開発したWebサイト上のUIパーツを構築するためのJavascriptライブラリです。
Facebookで使用されているのはもちろんのこと、Yahoo!のページなどでも使用されています。

Reactの3つの特徴

  1. Declarative : 宣言的な
  2. Component Based : コンポーネントベースである
  3. Learn Once,Write AnyWhere : 一度覚えてしまえばどこにだって書ける

以上の3つが、大きな特徴となっています。 (続きを読む…)


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

私はこれまで、業務システムSEとしてキャリアを積んできましたが、
フロントエンドアプリやプロトタイプ言語に携わることは殆どありませんでした。

そのため、フロントエンドの言語も使えるようになっておこうということで、
オブジェクト指向でJavaScriptを書くようなことができるTypeScriptを覚えようと思い、
学習したことを書いていきたいと思います。

今回は、TypeScriptを始めるための入門編です。

TypeScriptとは

TypeScriptは、大規模なJavaScriptアプリケーション開発のためにMicrosoftによって作成された言語です。 (続きを読む…)


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

昨今、目覚しく進化し続けるJavaScriptフレームワーク。
最近では大変多くのJavaScriptのフレームワークを目にするようになりました。
今回はその中でもとりわけ人気な「AngularJS」というフレームワークについて取り上げて勉強してみました。

AngularJSとは

logo (続きを読む…)


こんにちは!

キャスレーコンサルティングのSI(システム・インテグレーション)部の嵯峨です。

今回は、Sails.jsを利用して簡単なWEBアプリケーションを作ってみたいと思います。

(続きを読む…)



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