生活情報オンライン

ソフトウェアエンジニアが役立つ情報を発信します。

eclipse の画面上部(ヘッダー)にあるフォルダ名を表示しない設定

eclipse のデフォルト設定では、次の画像のように「画面上部(ヘッダー)にフォルダ名」が表示されています。

f:id:somegoro:20180115092523p:plain


今回の記事では、eclipse の画面上部(ヘッダー)にあるフォルダ名を表示しないように設定します。設定をすると次のように表示されなくなります。

f:id:somegoro:20180115092547p:plain


この表示を消すことで、PC画面を動画配信するときなどに有効かと思います。具体的には「ユーザー名が入ったフォルダ名を表示したくない」などのときに、この設定をすると良いかと思います。


それでは、設定方法の手順に入ります。

設定方法

「ウィンドウ」から「設定」をクリックして、設定画面を開きます。
f:id:somegoro:20180115092731p:plain


デフォルトでは次のような設定になっているかと思います。
f:id:somegoro:20180115092451p:plain


そうしましたら「ウィンドウ・タイトルにワークスペース・パスを表示」のチェックを外します。外したら「OK」をクリックして設定完了です。
f:id:somegoro:20180115092649p:plain


するとこのようになります。

f:id:somegoro:20180115092547p:plain

これで、eclipse の画面上部(ヘッダー)にフォルダ名が表示されなくなりました。

AWSについて意味のわかる言葉で書く。クラウドの種類,インスタンス,ストレージ,VPC,DB,AZ

AWSについて調べた

公開したいWebサービスを作ったので、AWSで借りようかと思っています。憧れのクラウドデビューです。(実際には2年くらい前にテスト環境を作ったことがありますが一度しかしなかったのですっかり忘れてしまっています)


そのため、AWSの勉強をしているのですが機能が盛り沢山で勉強することが多いですね。まだまだ初歩しか勉強していませんが、今回は忘れないように勉強した内容記事に残しておこうと思います。ついでに、当ブログもはてなブログからWordPressに移行しようと考えています。

クラウドについて

システム構成はクラウドとオンプレミスに大別される。私は今までオンプレミスのシステム開発しかしたことが無い。官公庁系のシステム開発がメインだったからということもあるかと思う。しかし、今後は民間のシステム開発が多くなる見通しかつ時代の流れとしてクラウドが増えてくると予想している。なので、今クラウドについて勉強することは自分のサービスを公開できるだけでなく業務上でのメリットも大きい。

オンプレミス

自社内でシステムの全てを賄う。私がずっとやってきた方法。とにかく人的・時間的・金銭的リソースが莫大にかかる。作業者が頑張れば、使用者が無茶を言ったり知識が無くても何とかなることがメリットとして上げられる。

クラウド

システムの一部を外部リソースを使用してシステムを構築する。私にとっては未知の領域。適切なインフラが整ってきた現在では、適切な知識を用いることで人的・時間的・金銭的リソースを大幅にカットできる。このことから今後さらに需要が高まると見られる。今まで大企業しか請負えなかったシステム開発もクラウドサービスを上手く使用すれば零細企業でも請け負える可能性を持つ希望の星。これでシステム開発の闇「ゼネコン体質」を駆逐したい。性質としては、パブリッククラウドとプライベートクラウドに大別される。


・パブリッククラウド
一般的にクラウドと呼ばれる。
 
・プライベートクラウド
クラウド管理部門が大量のコンピュータリソースを持ち、ユーザ部門がそれをクラウドとして使う。つまり、自社内でクラウドを作って管理、使用をすること。私の中では「オンプレミス」との違いが不明。

AWSについて

2017年現在、クラウドといえばAWSという認識が広まっている。もちろんクラウドサービスシェア1位。2位以下のクラウドリソースを全て足してもAWSのクラウドリソースには遠く及ばないと、巷ではまことしやかにささやかれている。Amazonの在庫管理システムから発展した。ここからはAWSのサービスについて記載していく。

インスタンス

クラウド上のサーバーのようなもののこと。メモリ、コア、ストレージ、OSを選択できるのが一般的。インスタンスは自分の持ち物ではない。借りているだけ。だから、壊れたら破棄(返却)してまた新しいインスタンスを借りれば良い。
代表的なものはAmazon EC2

オブジェクトストレージ(クラウドストレージ)

クラウド上の巨大なハードディスク、容量無限と考えて差し支えない。保存されるデータはファイルではなくオブジェクトと呼ばれる。オブジェクトはインターネット上で公開することもできる。HTTPアクセスさせるようにすればWebサーバーのようにしても使用できる。
代表的なものはAmazon S3

企業イントラとクラウドを接続する方法

インターネットVPNという技術を使う。VPNとは、仮想プライベートネットワークのこと。企業イントラとクラウドをVPN接続する。通信データが暗号化されているので、外部から傍受されても通信内容は読み取れないのでセキュリティー上は安心して使用できる。
しかし、インターネットの通信速度が遅いとこの接続方法では遅くなる。インターネットの通信速度は得てして安定しないので、このままでは懸案事項となる。この問題の解決策として、WANサービスを利用する等が考えられる。
代表的なものはAmazon VPC

データベース

一般的なクラウドではデータベースも用意されている。基本的にはインスタンスと同様の考え方で、必要だったら借りて不要になったら返却すれば良い。バッチ当ての間隔、バックアップの間隔、データの世代管理も管理画面で選択するだけで実施出来る。バッチファイルやバックアップを置く場所は見えないところで自動化されているので考えなくて大丈夫。
代表的なものはAmazon RDS

アベイラビリティゾーン(AZ)

直訳で使用可能な領域。AWSでは仮想化されたデータベースセンターにユーザーの使用可能な領域が割り当てられるため、自分が使用しているリソースが物理的にどれなのか把握できない。わかることは、リソースは物理的なデータセンターとして11個あること。これはAmazonから公表されている。これらの物理的なデータセンターを組み合わせて仮想化されたデータベースセンターいわゆるAZを作っている。
AZはAWSのサービス


以上、AWSについて調べたことを意味のわかる言葉で書いた記事でした。

HTML5/CSS3 様々なリストの作り方

リストの作り方

情報を整理して伝えるにはリスト形式が便利ですね。今回の記事では、様々なリストの作り方をご紹介します。リストは次のように3つのタイプに大別することが出来ます。

・順序の関係ないリスト(Unordered list)
・順序の関係あるリスト(Ordered list)
・定義型リスト(description list)

それではそれぞれのリストについて詳しく見ていきましょう。

順序の関係ないリスト(Unordered list)

順序の関係ないリストの中でも、3つのタイプに分類することが出来ます。

・デフォルトの場合
・ネストした場合
・type指定した場合

それでは詳しく見ていきます。

デフォルトの場合

  • 最初のリスト
  • 真中のリスト
  • 最後のリスト

<ul>
  <li>最初のリスト</li>
  <li>真中のリスト</li>
  <li>最後のリスト</li>
</ul>


ネストした場合

ネストするとこんな感じになります。リストがインデントされて白抜きになるんですね。

  • 最初のリスト
    • 最初のリスト
    • 真中のリスト
    • 最後のリスト
  • 真中のリスト
  • 最後のリスト

<ul>
  <li>最初のリスト</li>
  <ul>
    <li>最初のリスト</li>
    <li>真中のリスト</li>
    <li>最後のリスト</li>
  </ul>
  <li>真中のリスト</li>
  <li>最後のリスト</li>
</ul>


type指定した場合

type="disc"ではこのようになります。デフォルトと同じですね。

  • 最初のリスト
  • 真中のリスト
  • 最後のリスト

<ul type="disc">
  <li>最初のリスト</li>
  <li>真中のリスト</li>
  <li>最後のリスト</li>
</ul>


type="circle"ではこのようになります。ネストしたときと同じになります。

  • 最初のリスト
  • 真中のリスト
  • 最後のリスト

<ul type="circle">
  <li>最初のリスト</li>
  <li>真中のリスト</li>
  <li>最後のリスト</li>
</ul>


type="square"ではこのようになります。リストスタイルが四角になりますね。

  • 最初のリスト
  • 真中のリスト
  • 最後のリスト

<ul type="square">
  <li>最初のリスト</li>
  <li>真中のリスト</li>
  <li>最後のリスト</li>
</ul>

上記のtypeはulに指定しましたが、liにも個別に指定することも出来ます。つまり、順序の関係ないリスト(ul)に関わらず「順序の関係あるリスト」や「定義リスト」のliにも指定すことが出来るのです。

順序の関係あるリスト(Ordered list)

順序の関係あるリストの中で4つに分類することが出来ます。

・デフォルトの場合
・ネスト指定した場合
・type指定した場合
・value指定した場合

それぞれ見ていきましょう。

デフォルトの場合

  1. 最初のリスト
  2. 真中のリスト
  3. 最後のリスト

<ul>
  <li>最初のリスト</li>
  <li>真中のリスト</li>
  <li>最後のリスト</li>
</ul>


ネスト指定した場合

ネストするとこんな感じになります。リストがインデントされますね。数字の階層化はされません。

  1. 最初のリスト
    1. 最初のリスト
    2. 真中のリスト
    3. 最後のリスト
  2. 真中のリスト
  3. 最後のリスト

<ul>
  <li>最初のリスト</li>
  <ul>
    <li>最初のリスト</li>
    <li>真中のリスト</li>
    <li>最後のリスト</li>
  </ul>
  <li>真中のリスト</li>
  <li>最後のリスト</li>
</ul>


type指定した場合

文字の属性を指定することも出来ます。
type="a"ではこのようになります。

  1. 最初のリスト
  2. 真中のリスト
  3. 最後のリスト

<ol type="a">
  <li>最初のリスト</li>
  <li>真中のリスト</li>
  <li>最後のリスト</li>
</ol>


type="A"ではこのようになります。

  1. 最初のリスト
  2. 真中のリスト
  3. 最後のリスト

<ol type="A">
  <li>最初のリスト</li>
  <li>真中のリスト</li>
  <li>最後のリスト</li>
</ol>


type="i"ではこのようになります。

  1. 最初のリスト
  2. 真中のリスト
  3. 最後のリスト

<ol type="i">
  <li>最初のリスト</li>
  <li>真中のリスト</li>
  <li>最後のリスト</li>
</ol>


type="I"ではこのようになります。

  1. 最初のリスト
  2. 真中のリスト
  3. 最後のリスト

<ol type="I">
  <li>最初のリスト</li>
  <li>真中のリスト</li>
  <li>最後のリスト</li>
</ol>

上記のtypeはolに指定しましたが、liにも個別に指定することも出来ます。つまり、順序の関係あるリスト(ol)に関わらず「順序の関係ないリスト」や「定義リスト」のliにも指定すことが出来るのです。

value指定した場合

順番も指定できます。
・value

  1. リスト1
  2. リスト2
  3. リスト3
  4. リスト4
  5. リスト5

<ol>
  <li value="5">リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
  <li>リスト4</li>
  <li>リスト5</li>
</ol>


定義型リスト(description list)

定義1
定義1の説明文1
定義1の説明文2
定義2
定義2の説明文1
定義2の説明文2

<dl>
  <dt>定義1</dt>
  <dd>定義1の説明文1</dd>
  <dd>定義1の説明文2</dd>
  <dt>定義2</dt>
  <dd>定義2の説明文1</dd>
  <dd>定義2の説明文2</dd>
</dl>


アレンジを加えたリスト

次にアレンジを加えたリストを2つご紹介します。まずはランキングを構成するリストの作り方。

タヌキ
キリン
キツネ

<style>
dt.sample:before {
  counter-increment:sample;
  content:counter(sample) "位 ";
}
div.div_reset {
  counter-reset:sample;
}
</style>
<div class="div_reset">
<dl>
  <dt class="sample">タヌキ</dt>
  <dt class="sample">キリン</dt>
  <dt class="sample">キツネ</dt>
</dl>



次に章立てを構成するリストの作り方。

  1. item
  2. item
    1. item
    2. item
    3. item

<style>
#original_count ol {
/* ol要素にsectionカウンタを生成 */
  list-style-type: none;
  counter-reset: section;
}

#original_count li {
/*  list-style-type: none;*/
}

#original_count li:before {
/* section カウンタをインクリメントする */
  counter-increment: section;
/* "." で区切られた section カウンタのインスタンスの値を付加 */
  content: "第" counters(section, "-") "章 ";

}
</style>
<div id="original_count">
<ol>
  <li>item</li>
  <li>item
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ol>
  </li>
</ol>
</div>



以上、「HTML5/CSS3 様々なリストの作り方」でした。

SBI証券 で iDeCo に加入してみた。プロに運用してもらってお金を増やす!

SBI証券 で iDeCo に加入

SBI証券で口座開設して iDeCo に加入してみました。
f:id:somegoro:20171221205215p:plain
画像:SBI証券のiDeCo 公式サイトより引用

お金を増やしたい

まず、やりたかったこと。ずばり、お金を増やしたいと思いました。特に使いたい用途はありません。ビットコインに沸く世間に影響を受けて、簡単にお金が増えるなら私もお金を増やしたいと思いました。お金を増やす方法は今まで労働するしか考え方がなかったのですが、今回はビットコイン投資に習って投資をしてみます。


選択したのは「iDeCo」です。

iDeCo とは

iDeCo とは、個人型確定拠出年金のことです。企業型の確定拠出年金は知名度が高いですが、実は個人型もあるのです。私はこのお方のブログで iDeCo の存在を知りました。
個人型確定拠出年金iDeCo(イデコ)で億り人を目指してみたいと思います - ぺぷしのーげん 詳しくは次の公式サイトをどうぞ。注意事項としては60歳以上でないと預けたお金を受け取れないということですね。まぁ年金て文字が付いてますので、それはそうなりますよね。
www.ideco-koushiki.jp


以前は加入できる人が限られた制度だったようですが、2017年(今年)の1月から加入できる人の範囲が広がったようですね。厚生労働省も推しています。
www.mhlw.go.jp


そんな iDeCo に加入しようと思ったのですが、私が持っている口座のジャパンネット銀行では加入できる仕組みが無いということが判明しました。そこで、Webで iDeCo について調査してみると、どうやら SBI証券 が iDeCo 界隈の覇者的な位置についていると。しかも、SBI証券なら「加入時の手数料」「資産運用の際の手数料」が無料!※国民年金基金連合会には手数料を支払う必要があります。これはどこで iDeCo に加入しても同様に支払う必要があります。

プロに資産運用してもらう

ということで、SBI証券で iDeCo に入ることにしました。iDeCo では投資する商品を自分で選択するのですが、SBI証券は商品ラインナップも豊富なので自由度が高いです。まぁこの辺の投資話は私は詳しくないので、プロのおススメ商品にしようかと思います。プロの投資家に資産運用を任せると銀行に預けているときとは比べ物にならないくらい利益が出ます。素晴らしい能力ですね。さらに、iDeCo は非課税対象に入るので、節税対策にもなります。運用損が出ても、普通に税金を徴収される金額よりも少なければトータルでプラスになりますね。


以上、「SBI証券 で iDeCo に加入してみた」でした。

データベースとプログラムを繋ぐ仕組みを解説してみる

データベースとプログラムを繋ぐ仕組みの解説

今回の記事ではデータベースとプログラムを繋ぐ仕組みを解説します。まずは、さらっと前回までのおさらいをしましょう。

データベースとは

初回の記事では基本的な知識である次の2点について学びました。
・データベースとは
・DBMSの機能とは
www.early2home.com


データベースを操作するために

その次の記事でデータベースを操作する3つのデータベース言語要素を学びました。
・データ定義言語 (DDL)
・データ操作言語 (DML)
・データ制御言語 (DCL)
www.early2home.com

さて、上記2つの記事で「データベースとは何なのか」「どのようにして操作するのか」がわかりました。ここまでの知識で、データベースを操作するツールを使って手動でデータベースを操作することが出来ます。ここで代表的なツールをあげておきましょう。

Oracle SQL Developer

Oracleが作成しているもの。無料。日本語に対応している。急速にまともな日本語になってきており今や英語が出来ない人でも解読可能な状態にある。GUIで操作できる。データベースがOracleならこれ使っておけば間違いない。他のデータベースも設定すれば操作できるようになる
Oracle SQL Developer 製品概要

A5:SQL Mk-2

こちらも日本語に対応している。こちらの日本語は完璧、なんてったって日本人が作成したのだから!すごい!ありがとう!もちろん無料、ありがとう。特徴としてはとにかく対応しているデータベースが多く、データベースがOracleでない場合は私はこちらを使用している。特筆すべきはデータベースからER図を作成することが出来ること。設計書を書かずに進められた炎上しているプロジェクトにアサインされたときにとても便利。
A5:SQL Mk-2 - フリーの汎用SQL開発ツール/ER図ツール .. 松原正和


データベースとプログラムを繋ぐ仕組み

ここまでで前回までの記事のおさらいが完了です。今回の記事の本題である「データベースとプログラムを繋ぐ仕組み」の解説に入ります。


まず、データベースとプログラムをなぜ繋ぐのでしょうか。それは、データの操作を自動化したいからです。データの操作を自動化すると、今まで手動で行ってきたことがとても簡単になります。実際のWebシステムの運用では操作ツールを使用して手動でデータベースの操作を行うのではなく、データベースとプログラムを繋いでデータベースの操作を自動化していることが多いです。


データベースとプログラムをつなぐ仕組みを図で書くとこのようになります。今回はプログラムをjavaとして書いています。
f:id:somegoro:20171220034928p:plain


上記の図にあるように、javaプログラムをデータベースに接続するにはJDBCと呼ばれるAPIが必要です。JDBCには次のとおり3つの種類があります。それぞれの役割を説明します。

JDBC API

javaプログラムから呼ばれる。JDBCドライバ・マネージャに接続する。

JDBCドライバ・マネージャ

接続したいデータベースに対して適切なJDBCドライバを選択し接続する。

JDBCドライバ

データベースに接続する。データベースごとにJDBCドライバは異なる。


この3つのJDBCはどのように手に入れたらいいか。「JDBC API」「JDBCドライバ・マネージャ」は java EE jdk に含まれています。「JDBCドライバ」はデータベースをインストールすると、インストールしたデータベース用のJDBCドライバが一緒についてきます。

実際に使って確認してみよう

具体的には実際にデータベースをインストールしてプログラムと接続してみるとよくわかることでしょう。先日の記事でMicrosoft SQL Serverを無料でインストールする方法を書きましたが、今やOracleも無料でインストールすることが出来ますので、どちらでも好きな方で確認してみるといいでしょう。


Microsoft SQL Serverのダウンロード・インストールの手順は上記のとおりに先日の記事で書きました。Oracleデータベースのダウンロード・インストールの手順は次の記事がわかりやすいと思います。
www.reclog.net

以上、データベースとプログラムをつなぐ仕組みの解説でした。

クラウドの利用形態(IaaS、PaaS、SaaS)について調べてみた

クラウドの利用形態

AWS、Azureという言葉を聞くようになって久しいですね。今更ながらクラウドの利用形態について調べてみました。クラウドの利用形態は次の3つに大別されます。それぞれ詳しくみていきます。
・IaaS
・PaaS
・SaaS

「IaaS」イァース

Infrastructure as a Service の略称です。
インフラまで提供してくれます。OS、ハードウェア、ネットワークまで提供してくれます。
例: Amazon EC2(Amazon Elastic Compute Cloud)、GCE(Google Compute Engine)

「PaaS」パース

Platform as a Service の略称です。
プラットフォームまで提供してくれます。OSだけでなくデータベース(ソフトウェア)、ランタイムなどのミドルウェアまで提供してくれます。
例: Google App Engine、Windows Azure、AWS(Amazon Web Service)

「SaaS」サース

Software as a Service の略称です。
実サービスとなるソフトウェアまで提供してくれます。要は全部提供してくれます。
例: Googleスプレッドシート、Gmail


表にするとこのようになります。

IaaS PaaS SaaS
Application - -
Middle Ware -
OS
Hard Ware
Network


以上、クラウドの利用形態についての記事でした。記事を書きながらある程度 理解できたのでAWSを使ってみようかと思います。そして、さらに理解を深めて次のような認定試験を受けようかと思います。

認定試験

AWS認定試験

aws.amazon.com


GCP認定試験

cloud.google.com

超便利!HTML5/CSS3の検証なら、W3Cドキュメント検証サイト!

W3Cドキュメント検証サイト

私は驚きました。なんて便利なんだ、と。W3Cのドキュメント検証サイトが便利で感動したので紹介します。
validator.w3.org


このサービスでは、URLを入力するだけでそのWebサイトがW3Cの標準規格に沿ってコーディングされているか確認することが出来ます。このサービスではHTMLの規格をチェックするだけでなく、XHTML、SMIL、MathML、CSSに対しても標準規格に沿っているか検証してくれます。また、リンクが張られている場合にはリンクが切れているかも確認することが出来ます。

はてなブログを検証してみる

なんて便利なんでしょう。これを使えばW3Cの規格に準拠し適切なWebサイトが作成できているかが一瞬でわかってしまいます。さっそく「はてなブログ」を検証してみました。まずはトップページ、どうだ。
f:id:somegoro:20171217231507p:plain

なんと、51個もの指摘が出てしまいました。そのうち15個ほどは同様の指摘内容でh1要素の使い方に問題があるようですね。これだけ明確に指摘してくれれば直すのはそれほど時間がかからなそうです。

便利なオプションの使い方

さらにオプションを付けることで、指摘箇所をよりわかりやすく表示することが出来ます。次の画像の下のほうにあるように「Show source」「Show outline」にチェックを付けてみましょう。その他のオプションは任意です。付けても付けなくてもいいですが、今回はきっちり全部のオプションを付けてさらに「Character Encoding」「Document Type」も設定します。設定できたらCheckボタンをクリックします。
f:id:somegoro:20171217233107p:plain


すると、前回までは指摘内容だけの表示だったのが今回はソースコードを含めた指摘内容を表示してくれるようになります。これは「Show source」のオプションを付けたためです。これでさらに指摘箇所が分かりやすくなりましたね。
f:id:somegoro:20171217233747p:plain


さらに画面下の方へスクロールしていくとアウトラインが表示されています。これは「Show outline」のオプションを付けたためです。これは必要な人とそうでない人が別れそうですが、このアウトラインがあると全体を俯瞰して見ることが出来ますね。
f:id:somegoro:20171217233855p:plain


以上、W3Cドキュメント検証サイトのご紹介でした。

文字列を整数に変換 Integer.parseIntの使い方 Java

paizaのスキルチェックやってて面白かったのでメモとして記事を残しておきます。
paiza.jp


Javaで文字列を整数に変換するのに重宝する「Integer.parseInt」。こんな感じに書くと、文字列が整数に変換に変換されます。

String str_val = "20171215";
int i_val = Integer.parseInt(str_val);


しかし、整数に変換できない文字列が入力されると「例外が返却」されます。ですので、実践では try の中に書く必要があります。


こんな感じでtryの中に書きます。

String str_val = "20171215";
int i_val = 0;
try {
	i_val = Integer.parseInt(str_val);

} catch (NumberFormatException e) {
	return false;
}


「実践では」と書きましたが、一人でシステム開発をしているとこのあたりは気付きにくいところかもしれません。何が入力されるかあらかじめ把握していることが多いからです。私はしばらく一人でのシステム開発が続いたのでここに気付かずpaizaのスキルチェックでエラーが出て気付きました。paiza良いサービスですね。


詳細はOracleの公式サイト(parseInt)にあります。


以上、「Integer.parseInt」の使い方でした。

シークレットウィンドウとしてブラウザを開く方法 Google Chromeの場合

シークレットウィンドウとしてブラウザを開く方法

Google Chromeをシークレットウィンドウとして開く方法をご紹介します。


シークレットウィンドウとしてGoogle Chromeを開くと、次の情報がChromeに記憶(保存)されません。

・閲覧内容
・Cookie
・サイトのデータ
・フォームへの入力情報


また、すでにChromeに保存されている上記の情報も保存されていないものとして動作してくれます。


ですので、Webシステム開発の試験の際や、何度も同じ広告が出てわずらわしいとき、何かしらの動作確認をしたいときなどに有用です。


それでは実際に方法をご紹介します。


ブラウザ右上の「点が3つ縦に並んでいる場所」をクリックします。ポップアップが出てくるので「シークレットウィンドウを開く」をクリックします。
f:id:somegoro:20171204083957p:plain


このようにシークレットウィンドウが開かれます。Google Chromeの場合は周りが黒いのが特徴ですね。
f:id:somegoro:20171204084005p:plain


Google Chromeの他にも「Microsoft Edge」「Mozilla Firefox」など標準的なブラウザはこの「シークレットウィンドウとして開く」機能を備えています。


以上、「シークレットウィンドウとしてブラウザを開く方法 Google Chromeの場合」でした。

Tomcatのインストール方法 Java で Hello World ! を表示する(1/2)

Tomcatのインストール方法

Tomcatをインストールしてブラウザに「Hello World !」と表示させます。

ダウンロード

まずはTomcatの公式サイトにアクセスします。
f:id:somegoro:20171203124547p:plain
画面左側に各バージョンのDownloadサイトがリストで並んでいます。今回はTomcat 9をインストールすることにします。リストの中の「Tomcat 9」リンクをクリックします。


f:id:somegoro:20171203124615p:plain
画面の下の方へスクロールして「32-bit/64-bit Windows Service Installer」のリンクをクリックします。ダウンロード場所は任意で大丈夫です。これでダウンロード作業は完了です。

インストール

ダウンロードしたインストーラー「apache-tomcat-9.0.2.exe」をダブルクリックします。
f:id:somegoro:20171203124637p:plain
「Next」をクリックします。


f:id:somegoro:20171203124646p:plain
「I Agree」をクリックします。


f:id:somegoro:20171203124655p:plain
プルダウン、チェックボックスともに変更しなくて大丈夫です。「Next」をクリックします。


f:id:somegoro:20171203124724p:plain
ここも変更しなくて大丈夫です。「Next」をクリックします。


次にJREの設定をします。JREとはJava Runtime Environmentの略でJava実行環境のことです。この設定でJavaアプリケーションを動かせるようになります。JREをまだインストールしていない場合はインストールしましょう。「Next」をクリックします。
f:id:somegoro:20171203130240p:plain


Tomcatをインストールする場所を選択します。これは任意ですが特に変更する必要もないので今回はデフォルトのまま「Install」をクリックします。
f:id:somegoro:20171203130249p:plain
インストールが始まるので完了するまでしばし待ちます。


インストールが完了すると「Tomcatを起動して終了するか、起動しないで終了するか」聞かれます。動作確認のため、起動して終了にします。チェックボックスにチェックが付いたままの状態で「Finish」をクリックします。
f:id:somegoro:20171203130305p:plain


起動開始しますのでしばし待ちます。
f:id:somegoro:20171203130319p:plain
起動中画面が消えたら起動完了しているはずなので、確認しに行きます。「http://localhost:8080」にアクセスしてください。


無事に起動完了するとこのような画面が表示されます。
f:id:somegoro:20171203130606p:plain
これでインストールは完了です。
このままではTomcatの管理画面にアクセスできないので次から設定をしていきます。

設定

まずはTomcatの管理画面にアクセスできないことを確認します。次の画面の「Server Status」をクリックします。
f:id:somegoro:20171203130606p:plain


認証を求められるのでユーザー名を「admin」、パスワードを「admin」として「OK」をクリックします。ログインできずに再度認証を求められたら、Tomcatの管理画面にアクセスできないことの確認は成功です。
f:id:somegoro:20171203130619p:plain
ひとまずは「キャンセル」をクリックします。


401 Unauthorized とタイトル表示されたエラー画面になりますが気にしないで画面を閉じてください。
f:id:somegoro:20171203173855p:plain


確認作業が完了したので、ここから設定に入っていきます。
先ほど認証エラーになったのは、有効なユーザーが存在しないためです。ですので、設定を追加して有効なユーザーを作成します。


次のファイルを管理者権限で開きます。管理者権限で開かないと編集ができません。
「C:\Program Files\Apache Software Foundation\Tomcat 9.0\conf\tomcat-users.xml」


管理者権限で「tomcat-users.xml」ファイルを開いたら、一番最後の行を次のように変更します。

</tomcat-users>

  ↓

  <role rolename="manager-gui"/>
  <user username="admin" password="admin" roles="manager-gui"/>
</tomcat-users>

変更を適用するため、Tomcatを再起動しましょう。次の実行ファイルをダブルクリックします。
「C:\Program Files (x86)\Apache Software Foundation\Tomcat 9.0\bin\tomcat9w.exe」


「Stop」をクリックしてTomcatを停止します。
f:id:somegoro:20171204071344p:plain


「Start」をクリックしてTomcatを起動します。
f:id:somegoro:20171204071334p:plain

これでTomcat管理画面にアクセスできるユーザーが追加されました。


確認していきます。再度「http://localhost:8080」にアクセスしてください。前回と同様に「Server Status」をクリックします。
f:id:somegoro:20171203130606p:plain


ユーザー名を「admin」、パスワードを「admin」として「OK」をクリックします。
f:id:somegoro:20171203130619p:plain


このとき、認証画面が表示されずにログインしてしまう場合はシークレットウィンドウでブラウザを開きましょう。
somegoro.hatenablog.com


ログインに成功すると次の画面が表示されます。
f:id:somegoro:20171203130635p:plain


これでTomcatの設定は完了です。


長くなってきたので、今回の記事はここまでとします。
次はHello World ! と表示するアプリケーションを作成していきます。

待ち時間のローディングサンプル3

可愛い系サイトに合いそうなローディングサンプルです。前回までのローディングサンプルに続き、こちらもHTML5 / CSS3 のみで作成しています。
somegoro.hatenablog.com
somegoro.hatenablog.com
画像やjavascriptは使用していませんので、とっても簡単にアプリに取り込むことが出来ます。










<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="sample3.css">
</head>
<body>
<div class="load-container load-animation">
  <div class="loader"></div>
</div>
</body>
</html>
@charset "utf-8";

.load-container {
    width: 200px;
    height: 200px;
    background: rgba(33, 150, 243, 1);
    position: absolute;
}
.loader {
  margin: calc((200px - 14px) / 2) auto;
  font-size: 14px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  position: relative;
  animation: load-animation 1.1s infinite ease;
  transform: translateZ(0);
}

@keyframes load-animation {
  0%,
  100% {
    box-shadow:  0.00em -2.60em 0em 0em rgba(255, 255, 255, 1.0),
                 1.80em -1.80em 0em 0em rgba(255, 255, 255, 0.2),
                 2.50em  0.00em 0em 0em rgba(255, 255, 255, 0.2),
                 1.75em  1.75em 0em 0em rgba(255, 255, 255, 0.2),
                 0.00em  2.50em 0em 0em rgba(255, 255, 255, 0.2),
                -1.80em  1.80em 0em 0em rgba(255, 255, 255, 0.2),
                -2.60em  0.00em 0em 0em rgba(255, 255, 255, 0.5),
                -1.80em -1.80em 0em 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow:  0.00em -2.60em 0em 0em rgba(255, 255, 255, 0.7),
                 1.80em -1.80em 0em 0em rgba(255, 255, 255, 1.0),
                 2.50em  0.00em 0em 0em rgba(255, 255, 255, 0.2),
                 1.75em  1.75em 0em 0em rgba(255, 255, 255, 0.2),
                 0.00em  2.50em 0em 0em rgba(255, 255, 255, 0.2),
                -1.80em  1.80em 0em 0em rgba(255, 255, 255, 0.2),
                -2.60em  0.00em 0em 0em rgba(255, 255, 255, 0.2),
                -1.80em -1.80em 0em 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow:  0.00em -2.60em 0em 0em rgba(255, 255, 255, 0.5),
                 1.80em -1.80em 0em 0em rgba(255, 255, 255, 0.7),
                 2.50em  0.00em 0em 0em rgba(255, 255, 255, 1.0),
                 1.75em  1.75em 0em 0em rgba(255, 255, 255, 0.2),
                 0.00em  2.50em 0em 0em rgba(255, 255, 255, 0.2),
                -1.80em  1.80em 0em 0em rgba(255, 255, 255, 0.2),
                -2.60em  0.00em 0em 0em rgba(255, 255, 255, 0.2),
                -1.80em -1.80em 0em 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow:  0.00em -2.60em 0em 0em rgba(255, 255, 255, 0.2),
                 1.80em -1.80em 0em 0em rgba(255, 255, 255, 0.5),
                 2.50em  0.00em 0em 0em rgba(255, 255, 255, 0.7),
                 1.75em  1.75em 0em 0em rgba(255, 255, 255, 1.0),
                 0.00em  2.50em 0em 0em rgba(255, 255, 255, 0.2),
                -1.80em  1.80em 0em 0em rgba(255, 255, 255, 0.2),
                -2.60em  0.00em 0em 0em rgba(255, 255, 255, 0.2),
                -1.80em -1.80em 0em 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow:  0.00em -2.60em 0em 0em rgba(255, 255, 255, 0.2),
                 1.80em -1.80em 0em 0em rgba(255, 255, 255, 0.2),
                 2.50em  0.00em 0em 0em rgba(255, 255, 255, 0.5),
                 1.75em  1.75em 0em 0em rgba(255, 255, 255, 0.7),
                 0.00em  2.50em 0em 0em rgba(255, 255, 255, 1.0),
                -1.80em  1.80em 0em 0em rgba(255, 255, 255, 0.2),
                -2.60em  0.00em 0em 0em rgba(255, 255, 255, 0.2),
                -1.80em -1.80em 0em 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow:  0.00em -2.60em 0em 0em rgba(255, 255, 255, 0.2),
                 1.80em -1.80em 0em 0em rgba(255, 255, 255, 0.2),
                 2.50em  0.00em 0em 0em rgba(255, 255, 255, 0.2),
                 1.75em  1.75em 0em 0em rgba(255, 255, 255, 0.5),
                 0.00em  2.50em 0em 0em rgba(255, 255, 255, 0.7),
                -1.80em  1.80em 0em 0em rgba(255, 255, 255, 1.0),
                -2.60em  0.00em 0em 0em rgba(255, 255, 255, 0.2),
                -1.80em -1.80em 0em 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow:  0.00em -2.60em 0em 0em rgba(255, 255, 255, 0.2),
                 1.80em -1.80em 0em 0em rgba(255, 255, 255, 0.2),
                 2.50em  0.00em 0em 0em rgba(255, 255, 255, 0.2),
                 1.75em  1.75em 0em 0em rgba(255, 255, 255, 0.2),
                 0.00em  2.50em 0em 0em rgba(255, 255, 255, 0.5),
                -1.80em  1.80em 0em 0em rgba(255, 255, 255, 0.7),
                -2.60em  0.00em 0em 0em rgba(255, 255, 255, 1.0),
                -1.80em -1.80em 0em 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow:  0.00em -2.60em 0em 0em rgba(255, 255, 255, 0.2),
                 1.80em -1.80em 0em 0em rgba(255, 255, 255, 0.2),
                 2.50em  0.00em 0em 0em rgba(255, 255, 255, 0.2),
                 1.75em  1.75em 0em 0em rgba(255, 255, 255, 0.2),
                 0.00em  2.50em 0em 0em rgba(255, 255, 255, 0.2),
                -1.80em  1.80em 0em 0em rgba(255, 255, 255, 0.5),
                -2.60em  0.00em 0em 0em rgba(255, 255, 255, 0.7),
                -1.80em -1.80em 0em 0em rgba(255, 255, 255, 1.0);
  }
}

待ち時間のローディングサンプル2

何にでも合いそうなローディングサンプルです。前回のローディングサンプルに続き、こちらもHTML5 / CSS3 のみで作成しています。
somegoro.hatenablog.com
画像やjavascriptは使用していませんので、とっても簡単にアプリに取り込むことが出来ます。










<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="sample2.css">
</head>
<body>
<div class="load-container load-animation">
  <div class="loader"></div>
</div>
</body>
</html>
@charset "utf-8";

.load-container {
    width: 200px;
    height: 200px;
    background: rgba(33, 150, 243, 1);
    position: absolute;
}
.loader {
  margin: calc((200px - 100px) / 2) auto;/* (parent width - width) / 2 */
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(to right, white 10%, transparent 42%);
  animation: load-animation 1.4s infinite linear;
  transform: translateZ(0);
}
.loader:before {
  width: 50%;
  height: 50%;
  background: white;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}
.loader:after {
  background: rgba(33, 150, 243, 1);
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
@keyframes load-animation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

待ち時間のローディングサンプル1

Windows10っぽいサンプルです。HTML5 / CSS3 のみで作成しています。画像やjavascriptは使用していませんので、とっても簡単にアプリに取り込むことが出来ます。










<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample</title>
<link rel="stylesheet" href="sample.css">
</head>
<body>
<div class="load-container load-animation">
  <div class="loader"></div>
</div>
</body>
</html>
@charset "utf-8";

.load-container {
    width: 200px;
    height: 200px;
    background: rgba(33, 150, 243, 1);
    position: absolute;
}
.loader,
.loader:before,
.loader:after {
  background: #ffffff;
  animation: load-animation 1s infinite ease-in-out;
  width: 11px;
  height: 44px;
}
.loader {
  color: #ffffff;
  margin: calc(50% - 22px) auto;
  transform: translateZ(0);
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  position: absolute;
  content: "";
}
.loader:before {
  left: -16.5px;
  animation-delay: -0.32s;
}
.loader:after {
  left: 16.5px;
}
@keyframes load-animation {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 44px;
  }
  40% {
    box-shadow: 0 -22px;
    height: 55px;
  }
}

保険とは何か。その精神とは。

f:id:somegoro:20171024012245j:plain

保険の精神

ドイツの保険学者「アルフレッド・マーネス」は保険の精神として、こんな言葉を残しました。

万人のための一人、一人のための万人

この言葉は、保険の精神として多くの保険学者が引用しました。

保険とは

保険とは、事故や災難が発生した者に金銭を給付することで財産や生命を守るための制度です。その金銭は、多数の者によって出し合われます。そして、自分が事故や災難にあった際には金銭を受け取るのです。


人類の長い歴史の中で育まれた合理的な防衛手段ですね。

保険の種類

保険は次の二つに大別することが出来ます。
・公営保険
・民営保険


「公営保険」は国が政策や福祉として実施する保険です。「民営保険」は民間の保険会社や損害保険会社が販売する保険です。


今回は民間の会社が販売する「民営保険」について掘り下げていきます。

民営保険

民営保険はその保険の定義によって、1~3の分野に分類されます。

[第1分野] 生命保険

人の生死に関して保険金が支払われます。

・定期保険
・終身保険
・個人年金保険
・養老保険など


[第2分野] 損害保険

偶然の事故による損害について保険金が支払われます。

・自動車保険
・火災保険
・海上保険
・賠償責任保険など


[第3分野] 明確に区分できない保険

一定の偶然の事故によって生じる損害について保険金が支払われます。

・医療保険
・がん保険
・介護保険
・傷害保険
・所得補償保険など



以上、「保険とは何か」でした。


詳しいことについては、次のサイトがとても詳しく書いています。業界の変遷なども書いてあって複雑で面白いですね。
生命保険協会
日本損害保険協会 | SONPO
一般社団法人 日本損害保険代理業協会


保険 ドリルダウン告知って何?

f:id:somegoro:20171023021453j:plain

ドリルダウン告知

「ドリルダウン告知」とは何でしょうか。この言葉は馴染みのない人が多いかと思います。私もこの記事を書くまで馴染みはありませんでした。この土日に最近盛り上がっているフィンテックの記事をネットサーフィンしていたら、突然「ドリルダウン告知」という言葉が出てきたので調べた次第です。


さて、その「ドリルダウン告知」ですが、明治安田生命のサイトでは次のように説明されています。

お客さまに選択いただいた傷病名や治療内容(初診・最終受診時期や投薬の有無等)に応じて、申込手続きに必要な質問を画面に表示し、お客さまに選択いただく仕組みです

申込手続きの電子化を開始|明治安田生命保険相互会社


具体例として次のような告知の仕組みです。

・告知が必要な「傷病名」を選択
  ↓
・治療内容(初診時期、最終受診時期、投薬の有無等)を選択
  ↓
・上記回答に基づいて提示された「必要な質問事項」を選択


「ドリルダウン」と「告知」を合わせたものですね。保険に加入する際に、膨大な手続きをしなくて済むようにこのような仕組みが使われるようになりました。まだよくわからない人のために、それぞれの言葉を詳しく見ていきましょう。

ドリルダウン

ドリルダウンという言葉は「マーケティング用語」「IT用語」で使用される言葉のようです。次の記事がわかりやすいです。

ドリルダウンとは、データの集計レベルを1つずつ掘り下げて集計項目をさらに詳細にする操作のこと。またはその機能。例えば、国別に見ていたデータを都道府県別に集計し直すなどの操作がこれに当たる。売上分析に用いる場合には、まず全体の売上から地域を選択し、次に営業店舗を選択、更に売上品目、製品名……といった具合にドリルダウンを繰り返してデータを絞り込むことがよく行われる。

ドリルダウン|シナジーマーケティング株式会社

告知

告知とは、保険に加入する人が「健康状態」「病歴」「職業等」を保険会社に報告することです。これは保険に入るにあたって必須の手順です。告知をしなかったり虚位があると、告知義務違反として保険契約を解除されてしまいます。私は最初、保険会社から保険に加入する人に対して注意事項などを連絡することが告知かと思っていたのですが逆ですね。方向としては「保険に加入する人」→「保険会社」です。

まとめ

いかがでしょうか。ドリルダウン告知について、理解が深まりましたか?ドリルダウン告知の導入で有名なのが、明治安田生命(※1)や大同生命(※2)のようです。また、保険関連で強いシェアやノウハウを持つベンダーは「IBM」「NTTデータ」のようですね。どちらも大きな企業です。保険会社自体が大きな組織だからというのも関係があるのでしょう。


※1.日本IBM、明治安田生命の成長戦略を支える新契約引受査定の高度化を支援
※2.大同生命保険様がミュンヘン再保険グループと自動引受査定ソリューションの契約締結