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

SBTプラグインを作ってみる

Posted on 04月 18, 2018

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

Java10では、「var」が使えるようになったそうですね。
Java8でLambdaが出てきた時にも思いましたが、もうScala使えばいいのに

というワケで、今回はScala、、、というかSBTについて、書こうと思います。
テーマは、SBTプラグインです。

(続きを読む…)


Apache Wicketの継承

Posted on 04月 11, 2018

みなさん、こんにちは!
キャスレーコンサルティング、ID(インテグレーション&デザイン)部の柳です。

はじめに

今回は、Apache WicketのWebPageの継承について、ご紹介したいと思います。
Apache Wicketでは、HTMLをオブジェクトとして取り扱うことで、ウェブページを継承することが可能です。

そもそもApache Wicketって何?という方は、下記リンク先も併せてご参照頂けますと、幸いです。
Apache WicketでHelloWorld!

では、早速ですが画面レイアウトの制御について、触れていきます。

画面レイアウトの制御

画面レイアウトが、ヘッダ・フッタ・本文となる場合を例としました。

extend_layout

この組み合わせを全画面に適用したい場合、本来であれば各画面ファイル(例えばJSPファイル)に
他の画面ファイルを、インポートする処理が必要です。

しかし、Wicketを使用することで、画面ファイルもオブジェクトとして、管理する事ができます。

Javaの継承を使って、親クラスで子クラスの方式を制御することができるのと同じ考えで、
画面レイアウトを制御することが、可能となります。

<継承イメージ>

extend_flow

この継承イメージを、実際にソースに落とし込むと下記の様になります。

ソース

レイアウトの設定する親クラス

SuperPage.java

public class SuperPage extends WebPage {
    private static final long serialVersionUID = 1L;
    public SuperPage(final PageParameters parameters) {
        super(parameters);
    }
}

レイアウトの設定する親クラスのHTML

SuperPage.html

<body>
    <div id="hd">
        <div id="logo">
            <img src="logo.png" width="50px" height="50px" alt="Wicket Logo" />
            <h1>ここはヘッダです。</h1>
        </div>
    </div>
    <wicket:child/>
    <div id="ft">
        <div id="banner">
            <h1>ここはフッタです。</h1>
        </div>
    </div>
</body>

実際データを表示する子クラス

HomePage.java

public class HomePage extends SuperPage {
    private static final long serialVersionUID = 1L;
    public HomePage(final PageParameters parameters) {
        super(parameters);
        add(new Label("ver", getApplication().getFrameworkSettings().getVersion()));
        add(new Label("message", "これはWicketのサンプルページです。"));
    }
}

実際データを表示する子クラスのHTML

HomePage.html

<body>
    <wicket:remove>
        <div id="hd">
            <div id="logo">
                <img src="logo.png" width="50px" height="50px" alt="Wicket Logo" />
                <h1>ここはヘッダです。</h1>
            </div>
        </div>
    </wicket:remove>
    <wicket:extend>
        <div id="bd">
            <p>
                Please mention the correct Wicket version:
                <wicket:container wicket:id="ver"></wicket:container>
            </p>
            <p>
                <wicket:container wicket:id="message"></wicket:container>
            </p>
        </div>
    </wicket:extend>
    <wicket:remove>
        <div id="ft">
            <div id="banner">
                <h1>ここはフッタです。</h1>
            </div>
        </div>
    </wicket:remove>
</body>

ソースのポイント

SuperPage.java

レイアウトを設定する、親クラスです。
Extends WebPageにより、WicketのWebPageクラスを継承します。

SuperPage.html

<wicket:child/>により子クラスの内容が入力されます。

HomePage.java

public class HomePage extends SuperPage {
親クラスであるSuperPageを継承します。

HomePage.html

<wicket:remove>

</wicket:remove>

このタグに囲まれているソースは、未反映となります。
未反映にも関わらず使用する理由としては、親クラスから取得するソースを表示することで、可読性を向上させております。

<wicket:extend>

</wicket:extend>

このタグに囲まれているソースは、親クラスの内容が反映されます。
それによって、子クラスの内容が入力されている親クラスの内容が、反映されます。

出力画面イメージ

extend_view

継承する上での注意点

<wicket:extend>と<wicket:child>の継承の中で、
wicketのidが定義されてない場合や、継承タグの漏れがある場合などは、
wicketのエラーが発生するので、Javaクラスに定義して関係とマッピングしなければなりません。

また、多重継承はJavaと同じ仕様で、禁止されています。

最後に

Wicketの継承について、少しでもイメージを掴めていただけたでしょうか?

継承を使用することで、画面レイアウトを一つのクラスを通じて、一括制御することができるようになります。

Wicketには他にもいろいろ機能がありますが、画面表示の機能をメインに今後も執筆していく予定です。
次回の技術ブログでは、クラス参照で画面を表示するPanelの機能について、ご紹介出来ればと思います。

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


こんにちは。キャスレーコンサルティング・TS(テクニカルサービス)部の金巻です。

今回はReact.jsとServiceWorkerに、触れようかと思っていたのですが、
奥深くまとめきらなかったので、いつも通りGoogleApp関連の知っておくと役立つ(かもしれない)TIPSをご紹介いたします。

(続きを読む…)


はじめに

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

今回は Node.js + socket.ioで、簡単なチャットアプリを作成し、
さらに、Web Speech API を使用して
音声のみによる、チャットメッセージの送信と
受信メッセージの自動読み上げを実現してみようと思います。

たとえキーボードの入力の仕方が分からなくても、
両手が荷物でいっぱいでも、このアプリを使えばチャットを行うことができます。

いつでも簡単に、チャットをしましょう。 (続きを読む…)


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

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

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

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

なぜWebdriverIOか

WebdriverIO公式

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

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

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


こんにちは。キャスレーコンサルティングID(インテグレーション&サービス)部の秦です。

IT業界で長く働いていると、いつかは他人の書いたソースコードをレビューする機会があります。

私が新人の頃には自身のコードをレビューや、諸先輩方よりアドバイスを頂いて参りました。
また、現在ではチームメンバーのソースコードをレビューをする機会があります。

そのため、今回は
「美しいソースコードを残すためにレビュアーとして気を付けている10のこと」をご紹介したいと思います。

本記事での「美しい」は、私自身の主観的な部分や好みも含んでいるため、これが正解というわけではありません。
あくまでもひとつの参考として、ご覧頂ければ幸いです。 (続きを読む…)


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

今回は、Amazon Web ServicesのAWS Glueを使って、
GUIから簡単にETL(Extract、Transform、Load)を行いたいと思います。

AWS Glueの機能概要と特徴

AWS Glueとは

データ抽出、変換、ロード(ETL)とデータカタログ管理を行う、完全マネージド型サービスです。
主に以下の機能があります。 (続きを読む…)


こんにちは。キャスレーコンサルティングの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(システム・インテグレーション)部の高橋です。

Eclipseの便利なショートカットを、ご紹介させていただきます。
以前にも、「ショートカットキーを駆使し、コーディングに差をつけよう[Java,Eclipse]」
紹介記事が作成されていますので、あわせてどうぞ!

ローカル変数への代入 [Ctrl + 2, L]

こちらを紹介するために、この記事を作成したと言っても過言ではありません!
周囲の人にに教えると喜ばれます。

(続きを読む…)


続・GoでLチカ

Posted on 01月 31, 2018

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

前回の「GoでLチカ」の続きです。

まずは「Lピカ」、その後に「Lチカ」を行います。


go-rpio

GoでGPIO(ラズパイの端に剣山のように突き出しているアレ)を制御するライブラリを
公開している方がいらっしゃたので、ありがたく利用させていたきます。

https://github.com/stianeikeland/go-rpio

最近は、各種言語にパッケージ管理のツールがありますが、Goではgo getというコマンドで行います。 (続きを読む…)


12345...1020...

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