株式会社シベスピ 従業員ブログ

シベスピの社員ブログ。技術・想い・経験沢山書いていきます!

春じゃないのに!

こんにちは。最近、朝晩はめっきり寒くなりましたね。もう冬です。
さて、季節的には過ぎてしまいましたが、今回は私が秋に経験したことについて書こうと思います。

季節の変わり目

季節の変わり目には体調不良になりやすいと良く聞きますが、
私の場合は特に春が寒暖差と花粉症のせいで体調を崩しやすく、苦手なシーズンです。
同じように季節の変わり目となる秋については、暑いのが苦手な私にとって涼しくて過ごしやすいシーズンです。
※春に花粉症で苦労した件については、前回のブログに記載しましたので、気になる方はそちらを見てください!

しかし、今年の秋は例年の過ごしやすい秋とは違いました。。。

秋の散歩

某ゲームの影響もあり散歩する機会が増えた私ですが、ある日から鼻がムズムズし、くしゃみを頻発するようになりました。
最初は風邪でも引いたのかと思いましたが、熱はなく次第に鼻水が出るようになり、目も痒い!
何だか似たような経験を春にもしたなと思いました。
そう、花粉症です!!
そのため、急ぎ春と同様の対策をして、なんとか症状を緩和させました。

花粉症について

花粉症について改めて調べてみると、花粉は春だけでなく年中飛散しており、花粉症を引き起こしていることがわかりました。
その中でも春と秋は、注意が必要なようです。
また、秋は春よりも寒暖の差が激しいため体調を崩す人が多く、風邪と症状が似ていることもあり、花粉症だと気付きにくいようなので、
特に春先花粉症で悩まされている方は、症状を見極めて対策する必要があります。
私は、花粉症になるのは春だけだと思っていたので驚きです!


今年の春も秋も準備不足で酷い目に合いましたが、
来年は春が来る前に花粉対策して、花粉に負けずに乗り切ろうと思います!

【WEB UI操作自動化】Seleniumを使ってみよう【Java×Chrome】

気温36度って体温か!
と見えない何かに突っ込みを入れていたのも束の間。
もうすっかり寒くなりましたね。
どうも内田です。

今回は、Seleniumを使用して、下記を実施しようと思います。
 ① 当社WEBサイトのTOPページに遷移
 ② TOPページから問い合わせページに遷移
 ③ 問い合わせページに内容を入力し、エラーで引っかかるようにする

1. まずSeleniumって何?

SeleniumとはWEB UI操作の自動化フレームワークです。
要するに何が出来るかというと、コードを書いて実行すると、WEBサイトの操作(リンク押下・フォームへの入力等)が自動で実行でき、今までテストのために手でやっていた操作を自動で出来るという優れものです。

2. Seleniumの種類と今回の実施する環境

Seleniumには種類が二つあります。
 ① Selenium WebDriver
 ② Selenium IDE
①はプログラムを書いて実施するもの。
②はブラウザの拡張機能をインストールして、GUIで操作・実施するものです。
今回は① Selenium WebDriver を使用しようと思います。
また、Selenium WebDriverはさまざまな言語(Java/C#/Ruby等)で実装できるのですが、今回はJavaを選択します。
さらに、ブラウザについてもさまざまなブラウザを使用することが出来るのですが、今回はChromeで実施します。

3. ダウンロード

まず、各公式サイトから下記の二つをダウンロードします。
 ① Selenium WebDriver
 ② Chrome Driver

Selenium WebDriver のダウンロード

Selenium WebDriverのダウンロードページ(https://www.seleniumhq.org/download/)を開きます。
画面をスクロールしていくと、「Selenium Client & WebDriver Language Bindings」というタイトルが出てくるので、JavaのWebDriverをダウンロードします。

f:id:chivsp:20191026122249p:plain
Javaを選択

Chrome Driver のダウンロード

Chrome Driverのダウンロードページ(https://sites.google.com/a/chromium.org/chromedriver/downloads)を開きます。
Chromeのバージョンごとに使用できるDriverがことなるので、使用するChromeのバージョンにあわせたものを選択します。

f:id:chivsp:20191026123402p:plain
私の使用しているChromeは76
そして使用しているPCのOSにあわせたDriverをダウンロードします。
f:id:chivsp:20191026131457p:plain
私が使用しているのはWindows

ダウンロードしたファイルは解凍しておきます。

4. 設定

eclipseを使用してプロジェクトを作成します。

f:id:chivsp:20191026133424p:plain
今回はTestSeleniumというプロジェクト
上記でダウンロードしたファイルを配置するためにディレクトリを作成します。
f:id:chivsp:20191026134106p:plain
ディレクトリ作成
作成したディレクトリにダウンロードしたファイルを配置します。
f:id:chivsp:20191026134625p:plain
Seleniumはlibsしたのファイルも含めて配置します。
seleniumのライブラリにビルドパスを通します。
f:id:chivsp:20191026140014p:plain
ビルドパスを通す

設定が完了したのでテストとしてこんなjavaファイルを作成して実行してみます。

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class Test
{
    public static void main(String args[])
    {
        // ChromeDriverのパスを設定
        System.setProperty("webdriver.chrome.driver", "chromeDriver/chromedriver.exe");

        // WebDriverのインスタンスを作成
        WebDriver driver = new ChromeDriver();

        // 開きたいサイトのURLを引数に指定
        driver.get("http://www.chivsp.com/");
    }

}

そして実行すると。。ブラウザが起動され、引数に指定したURLが表示されます。
ChromeのURL欄の下には、自動テストソフトから起動した旨が記載されています。

f:id:chivsp:20191026142528p:plain
開いた!

5. テストの準備

今回Seleniumで出来なきゃいけないことは下記となります。
 ① 指定URLのサイトをブラウザで開く。
 ② サイト内のリンクまたはボタンを押下する。
 ③ サイト内の入力フォームに値を入力する。
①にいてはテストで実施したので、②~③の実施方法を見て行きます。

② サイト内のリンクまたはボタンを押下する。

まずはクリックする対象の要素を取得します。
取得する方法としてはJavaScriptのように、HTMLのID属性やName属性、Class属性などからも取得できますし、
リンクの文字列やXPathからも取得できます。
今回は要素を特定するためのID等は振っていない要素を操作するので、Xpathを使用して実装していきます。

クリックしたい要素はこちらの「お問い合わせ」リンクとなります。

f:id:chivsp:20191103114233p:plain
お問い合わせ

ChromeディベロッパーツールでXpathを取得します。

f:id:chivsp:20191103114534p:plain
Xpath取得

要素を取得して、clickするメソッドを呼ぶ記述は下記となります。

driver.findElement(By.xpath("//*[@id='navigation']/ul/li[5]/a")).click();

③ サイト内の入力フォームに値を入力する。

サイトのフォームに値を入力する方法も、上記のクリックする方法と変わりません。
Xpathを取得し、下記のように記述します。

driver.findElement(By.xpath("/html/body/div[1]/div[1]/form/div[1]/div/input")).sendKeys("会社テスト");

5 .いざ実行

上記の基本的な内容を使用し、用意したコードがこちらとなります。

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class Test
{
    public static void main(String args[])
    {
        // ChromeDriverのパスを設定
        System.setProperty("webdriver.chrome.driver", "chromeDriver/chromedriver.exe");

        // WebDriverのインスタンスを作成
        WebDriver driver = new ChromeDriver();

        // 開きたいサイトのURLを引数に指定
        driver.get("http://www.chivsp.com/");

        // お問い合わせリンクをクリック
        driver.findElement(By.xpath("//*[@id='navigation']/ul/li[5]/a")).click();

        // お問い合わせボタンをクリック
        driver.findElement(By.xpath("/html/body/div[1]/div/div[3]/p[2]/a")).click();

        // 入力
        driver.findElement(By.xpath("/html/body/div[1]/div[1]/form/div[1]/div/input")).sendKeys("会社テスト");

        // チェックボックスにチェックを入れる
        driver.findElement(By.xpath("//*[@id=\"check\"]")).click();

        // ボタンを押下する。
        driver.findElement(By.xpath("//*[@id=\"submit\"]")).click();
    }
}

そして実行した結果がこちら。
https://cdn-ak.f.st-hatena.com/images/fotolife/c/chivsp/20191103/20191103201953.gif

6 . Seleniumって便利!

以上、さわりではありますが、Seleniumを使用してサイトを動かすことが出来ました。
これにJUnitを組み合わせたりすると、テストも出来ますし、画面キャプチャを取得する機能も、Seleniumにはあります。
もちろん、Javaで実行しているのでテストデータの挿入等もできるので、テストする上で実施しなければいけなかったことはほとんどコードで完結することが出来ます。
WEBシステムの同じ機能をずっとメンテナンスする場合等は一度書いておくと楽ですね。

以上、Seleniumを使ってみようでした。

【C#】Visual Studio 2019 インストール【Windowsフォームアプリケーション】

インストーラのダウンロード

MicrosoftVisual Studio 2019のダウンロードページに飛びます。
ダウンロード | IDE、Code、Team Foundation Server | Visual Studio

Visual Studio 2019」の「Community」の「無料ダウンロード」をクリックすると、インストーラのダウンロードが始まります。
f:id:chivsp:20191026195710p:plain

ダウンロード終了後、インストーラを実行します。
f:id:chivsp:20191026195800p:plain

インストール

ライセンス条項等は適当に読み飛ばして「続行」をクリックします。
f:id:chivsp:20191026195929p:plain

インストーラの準備が完了するとインストール対象の選択ができるので、必要な対象を選んで「インストール」をクリックします。
f:id:chivsp:20191026200125p:plain

インストールが開始されるので、完了するまで待機します。
f:id:chivsp:20191026201117p:plain

サインイン

インストールが完了するとサインインを求められるので、「サインイン」をクリックします。
f:id:chivsp:20191026201406p:plain

アカウントを持ってない場合、「作成してください」をクリックしてアカウントを作成してください。その際の手順は下記ページを参考にしてください。
【C#】Visual Studio 2017 インストール【Windowsフォームアプリケーション】 - 株式会社シベスピ 従業員ブログ

今回はVisual Studio 2017をインストールした際にサインインしてあったため、特に何もせずサインインが行われました。
f:id:chivsp:20191026202548p:plain

下の画面が表示されたらインストール完了です。「コードなしで続行」をクリックして、ライセンスの登録を行います。
f:id:chivsp:20191026202621p:plain

ライセンスの登録

「コードなしで続行」をクリックするとIDEが開くので、右上のアイコンから「アカウントの設定」をクリックします。
f:id:chivsp:20191026203118p:plain

「更新されたライセンスの有無を確認」をクリックします。
f:id:chivsp:20191026210207p:plain

下記の画面になるので、これでインストールはすべて完了です。
f:id:chivsp:20191026210535p:plain

後書き

とっくの昔にリリースされていた2019ですが、書かなきゃいけない気がしたので書いてみました。正直C# 8.0どころか7.0~7.3の機能も使いこなしてないので、インストールする必要はあったのか🤔🤔🤔という感じもします。


記事内容とこれっぽっちも関係はありませんが、今年の夏に富士山に行ってご来光アメイジングしてきました。
f:id:chivsp:20191026193516j:plain

幸いにも高山病の症状もなく初心者向けルートだったこともありサクサク登れました。予想以上に早く山小屋についたので外のベンチに座りながら、登ってくる人達の苦悶の表情を眺めてました。楽しかったです。
ちゃんと募金もしてきました。
f:id:chivsp:20191026194303j:plain

最終的には剣岳や奥穂のジャンダルムとか行きたいです。
富士山以降今日に至るまで雨と予定のブッキング一回しか山に登れず、つらみなIskがお送りしました。

【objective-c】iOSアプリ開発超初心者講座【アプリ作成編】

どうも、松尾です。
以前書いたXcodeのインストール編から1年以上経ってました。
今回はインストールしたXcodeで簡単な雪を降らせるアニメーションアプリを作って行こうかと思います。
プログラミング未経験の方に向けて、難しい説明などは割愛して、アプリ作成する流れを書いて行きます。

用意するもの

mac
Xcode

1.プロジェクト作成

f:id:chivsp:20191023233746p:plain
まず、Xcodeを立ち上げて、「Create a New Xcode Project」をクリック。

f:id:chivsp:20191023235825p:plain
アプリで使うテンプレートを選びます。
今回は、簡単なアプリを作るので、真っ白な画面だけが用意される「Single View app」を選択し「Next」をクリック。

f:id:chivsp:20191024032528p:plain
プロジェクトの名前などを入力します。
ProductName:アプリの名前
OrganizationName:アプリを作る人の名前
OrganizationIdentifier:アプリを作る人のID(※適当で大丈夫ですが、アプリをリリースして売ったりする際は、他の人と被らないようにしないといけないです。)
Language:objective-cを選択
入力できたら、「Next」をクリック。

f:id:chivsp:20191024032729p:plain
プロジェクトの保存先を選び、「create」をクリック。

f:id:chivsp:20191024032810p:plain
すると、プロジェクトが作成されます。

2.Main.storyboard

f:id:chivsp:20191024032937p:plain
次に、左側の一覧にある「Main.storyboard」を選択します。
すると、中央に白い枠が出てきます。これはアプリを起動した際に開かれる画面で、どういうものを配置するのかを決めていきます。
今回は雪を降らせるので、白い背景では雪が映らないため背景を作っていきます。

f:id:chivsp:20191024034720p:plain
白い枠をクリックし、赤枠で囲ったところを選択すると、画面の背景色を指定できるので、それっぽい色に変更します。

f:id:chivsp:20191024035700p:plain
画面的に寂しいので、下に人を配置します。

f:id:chivsp:20191024040506p:plain
「Image View」を選択し、中央の枠にドラッグ&ドロップします。

f:id:chivsp:20191024041457p:plain
人の画像ファイルを直接ドラッグ&ドロップします。
すると、ポップアップが出てくるので「Finish」をクリック。
(一緒に雪の画像も追加しておきます。)

f:id:chivsp:20191024041503p:plain
無事画像が取り込まれました。

f:id:chivsp:20191024041814p:plain
Main.storyboardに戻り、先ほど設置した「Image View」の枠をクリックし、右上の「Image」に追加した画像が表示されているので選択します。

f:id:chivsp:20191024042207p:plain
これで、Main.storyboardでの作業は終了です。

3.ViewController

ViewControllerは表示される画面に色々な制御を加えるものです。
今回でいうと、雪の降るスピードや数などを制御しています。
ViewController.mに以下のコードを書いてみてください。

@interface ViewController ()
{
int snowCount;
double snowSpeed;
NSMutableArray *snowArray;
NSTimer *timer;
}
@end

@implementation ViewController

  • (void)viewDidLoad {

[super viewDidLoad];

snowCount = 0;
snowSpeed = 0.8;
snowArray = [NSMutableArray new];

timer = [NSTimer scheduledTimerWithTimeInterval:0.01
target:self
selector:@selector(snowFall)
userInfo:nil
repeats:YES];
}

  • (void)snowFall

{
if (snowCount >= 20) {
[self fall];
snowCount = 0;
}
snowCount++;

for (int i=0; i<[snowArray count]; i++) {
UIImageView *imageView = snowArray[i];
int randx = arc4random()%2;
imageView.center = CGPointMake(imageView.center.x+randx,
imageView.center.y+snowSpeed);

if (imageView.center.y > self.view.frame.size.height) {
[imageView removeFromSuperview];
[snowArray removeObject:imageView];
}
}
}

  • (void)fall

{
UIImageView *snowimageView = [UIImageView new];
snowimageView.image = [UIImage imageNamed:@"snow.png"
int randH = arc4random()%10;
int randT = arc4random()%10;
if (randH <=5) {randH = 10;}
if (randT <=5) {randT = 10;}
snowimageView.frame = CGRectMake(0, 0, randH, randT);
int rand = arc4random()%320;
snowimageView.center = CGPointMake(rand, -5)
[self.view addSubview:snowimageView];
[snowArray addObject:snowimageView];

}

  • (void)didReceiveMemoryWarning {

[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end

赤で「雪の降るスピード」
水色で「雪の降る間隔」
青で「雪の画像」
緑で「雪のx座標、y座標、幅、高さ」
などを指定しています。

4.実行

f:id:chivsp:20191024055754p:plain
左上の実行ボタンをクリックして、アプリを起動させてみましょう。
右側を選択すると、どの端末で起動するか選べます。iPhoneiPadを持っていたらUSBで繋げば実機に作成したアプリをインストールすることができます。

完成!

f:id:chivsp:20191024061935g:plain
無事雪を降らせることができました!
「3.ViewController」で色付けした箇所をいじって暴風雪にしたり、石を降らせたりしてみて遊んでみてください!

次回また機会があれば、Xcodeの機能やobjective-cの文法などを書ければと思います。

好きな事に対する意欲

最近の出来事で、すごいと感じたことをブログに書こうと思います。

お出かけ編

ハワイから来たお友達に、何回か行ったことある鎌倉なら案内できると思い、鎌倉に行きました。
鎌倉のどこに行こうか相談したところ「長谷寺に行きたい」と言われましたが、私は長谷寺を知りませんでした。
調べてみると意外と有名だった(笑)
なぜ、鎌倉に何度か行ったことのある私が知らない寺をハワイの人が詳しいのだろう??
聞いてみたところ、鎌倉にはもう数十回も来てるそう。。。逆に案内されてしまった(笑)

転職編

ハワイから来たお友達が、転職して日本で仕事をやるとの事で、どんな仕事するのかと聞いてみたところメディア系で、初の仕事は中東での撮影に3週間くらい行くそうです。
日本で仕事したいんじゃなかったのか??
日本で働いていて、今回は出張するだけだから良いとの事。。。なるほど出張(笑)

共通点

「お出かけ編」と「転職編」を踏まえ、なぜハワイのお友達が鎌倉に詳しく日本で働きたいのか?
それは「日本が好きだから」です!
ただ日本が好きだから日本語を勉強し、お金を貯めて日本旅行をして、転職までしたのです。
「好きな日本のためになら何でもできるよ」と言われた時、確かに好きな事に関して調べたり努力するのは苦ではないと思いました。
何かやるべき事があるとき、好きなものに紐づける事さえできれば、出来ないことはないと思います。
私は病院で、軽くでも良いので運動をやりましょうと言われたので、好きなゲームで散歩を始めました(笑)
みなさんもお試しあれ(笑)

ボホール島観光レポート

こんにちは。小橋です。
少し間があいてしまいましたが、社員旅行のオプショナルツアーでボホール島へ行ってまいりましたので、簡単なレポートを作成しました!

★☆セブ島の市内観光をしたチームのレポートはこちら!☆★
chivsp.hatenablog.com

ボホール島観光

セブ島からは高速フェリーで約2時間、ボホール島はフィリピン国内で10番目に大きい島です。
goo.gl

今回のボホール島観光は、タグビララン港到着後、日本語が堪能なガイドさんと一緒に車で次の観光スポットを巡りました。

血盟記念碑

クライオン教会

ターシャの森

ロボック川 ランチクルーズ

チョコレート・ヒル

各スポットの概要

今回巡った各スポットの概要です。

血盟記念碑

スペイン占領時代、争いの終結と友好をお互いの誓い合ったことを記念する碑。
ボホール島の南側の海を臨む高台に位置しています。

f:id:chivsp:20190930215755j:plain
血盟記念碑
スペインの初代総督レガスピとその家臣、ボホール島の酋長だったシカツナを模しており、当時の勇壮な姿がうかがえます。
【血盟】とは、お互いの腕を傷つけ、流れ出た血をワインに注ぎ、飲み干すことで約束を確固不抜のものとするフィリピンの伝統的な慣習だそうです。

クライオン教会

国民の9割がキリスト教徒であるフィリピンは、町ごとに教会が存在します。
クライオン教会はその中でも最古の教会の1つと呼ばれているそうです。
2013年のボホール地震により鐘楼や教会堂に大きなダメージを受けたそうですが、2018年修復が完了し、教会堂や鐘楼の見学をすることができました。

f:id:chivsp:20190930220702j:plain
クライオン教会(外観)
f:id:chivsp:20190930220709j:plain
クライオン教会(教会堂内)

ターシャの森

ターシャは、ボホール島のみに生息するフィリピンメガネザルです。

f:id:chivsp:20190930231258j:plain
ターシャ
小さくてかわいらしいターシャですが、非常に繊細でストレスを感じると自殺してしまいます。
そのため、島外での飼育は難しく、ボホール島に来なければ会うことができません。

ロボック川 ランチクルーズ

ロボック川をクルーズしながら、フィリピン料理のビュッフェランチをいただきました。
キューカンバーモヒートがおいしかったです!

f:id:chivsp:20190930231850j:plain
ロボック川 クルーズ
エメラルドグリーンの水面が美しく、ゆったりとした川の流れがとても気持ちの良い時間でした。

チョコレート・ヒル

チョコレート・ヒルズは円錐形の丘が点在する不思議な地形です。
200段を超える階段を登り、壮観な景色を眺めてきました。

f:id:chivsp:20190930232528j:plain
チョコレート・ヒル
まだほんのり緑色ですが、乾季には丘の草木が枯れて、チョコレート色になるのがチョコレート・ヒルズの由来だそうです。

感想

出発前、乗り物が苦手な私は2時間の船旅に内心不安でいっぱいでした。
でも思い切って行って良かった!と思える時間となり、非常に満足しています。
ちょっと駆け足でしたが、ボホール島の自然と伝統を感じたツアーでした。

K端のプロフィール

はじめまして、K端と申します。

徳島県出身の30歳、未経験で7月からシベスピの研修に参加しました。
先輩社員のみなさんの優しさに支えられてなんとか研修を終えることができ、9月から正社員として入社に至りました。
徳島ではどこに行くにも自家用車での移動が当たり前の生活だったので、研修初日の満員電車に受けた衝撃は凄まじかったです。

シベスピに出会うまで

前職では地域の経済団体の職員として、観光振興や中小企業の経営支援に携わっていました。
このように書いているとお堅い印象を受けるかもしれませんが、町おこしのイベントで着ぐるみを着ることもあれば、観光地視察の名目でご当地のお座敷遊びに興じることもあり、真面目な仕事のかたわらで様々な経験をさせてもらいました。
そんな多岐にわたる業務のうちのひとつとして、社内のホームページの全面刷新を任されたことが一つの転機となり、紆余曲折あってシベスピに出会いました。

好きなこと

1.スピッツのライブに行くこと
いろんなジャンルの音楽を経て、最終的にスピッツにたどり着きました。

2.美味しいものを食べること
美味しい上にコスパがよければ殊更に喜びます。

3.純喫茶でのんびりすること
年季の入った内装の純喫茶には心が躍ります。
東京でもお気に入りを見つけたいです。

4.旅行に行くこと
今年の春に行ったベトナム旅行がとても楽しかったので自分の中で海外旅行熱が高まっていますが、基本的に国内旅行が多いです。
西日本はあらかた巡りました。
東北以北は未踏の地なので、あたたかい季節になったら訪れてみたいです。

一言

好奇心旺盛ですが、飽きっぽかったりもします。
いつでも自分を楽しませたいです。