2017-12-27

AZを説明していく

AWSについて調べた

公開したいWebサービスを作ったので、AWSでサーバを借りようかと思っています。憧れのクラウドデビューです。（実際には２年くらい前にテスト環境を作ったことがありますが、どんな感じだったかすっかり忘れてしまっています）

そのため、AWSの勉強をしているのですが機能が盛り沢山で勉強することが多いですね。まだまだ初歩しか勉強していませんが、今回は忘れないように勉強した内容を記事に残しておこうと思います。ついでに、当ブログもはてなブログから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について調べたことを意味のわかる言葉で書いた記事でした。

2017-12-20

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

テクノロジープログラミング言語

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

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

データベースとは

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

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

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

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

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には次のとおり３つの種類があります。それぞれの役割を説明します。

JDBC API

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

JDBCドライバ・マネージャ

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

JDBCドライバ

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

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

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

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

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

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

2017-12-18

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

テクノロジー

クラウドの利用形態

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

2017-12-17

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

HTML / CSS テクノロジー

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

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

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

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

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

なんと、５１個もの指摘が出てしまいました。そのうち１５個ほどは同様の指摘内容で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ドキュメント検証サイトのご紹介でした。

類似サービス

Wow... いっぱいありました。
Another HTML-lint gateway
DirtyMarkup Formatter - HTML, CSS, & JavaScript Beautifier
Another HTML Lint - Gateway

2017-12-04

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

テクノロジー

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

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

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

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

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

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

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

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

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

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

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

2017-12-04

Tomcatのインストール方法　Java で Hello World ! を表示する（１/２）

テクノロジープログラミング言語

本記事を書いた頃よりだいぶTomcatへの理解が深まりましたので、本記事の内容を書き直しました。最新版記事 Tomcat9のインストール方法 on Windows10

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 ! と表示するアプリケーションを作成していきます。

最新版記事はこちら
www.early2home.com

2017-11-06

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

HTML / CSS テクノロジー

今回の記事では可愛い系サイトに合いそうなローディングサンプルのご紹介です。前回のローディングサンプルに続き、こちらもHTML5 / CSS3 のみで作成しています。
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);
  }
}

2017-11-06

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

HTML / CSS テクノロジー

何にでも合いそうなローディングサンプルです。前回のローディングサンプルに続き、こちらも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);
  }
}

2017-11-06

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

HTML / CSS テクノロジー

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;
  }
}

2017-10-12

Javaで画面遷移(リダイレクトとフォワード) HTML5 / CSS3

テクノロジープログラミング言語

Javaで画面遷移する方法

Javaで画面遷移するにはどのようにすればいいのか。

基本的な方法は次の２つ。
１．リダイレクト（Redirect）
２．フォワード（Forward）

１．リダイレクト

サーバ移転などの時や別システムにするときに使用する。
指定されたURLに処理を飛ばすだけなので、情報を連携することが出来ない。
URLは変更される。遷移先のHTMLがJavaを使用している場合、Java→HTML→Java→HTMLの順で処理されて表示されるのでパフォーマンスが悪い。

２．フォワード

サーバ内の画面遷移や別システムにするときに使用する。
サーバ側で遷移処理を行うため、情報を連携することが出来る。
URLが変更されない。遷移先のHTMLがJavaを使用しようといまいとJava→HTMLで表示されるのでパフォーマンスが良い。

番外編

サーバーサイドを考慮しない遷移なら、javascriptでGETで送信して「location.href」や「location.search」で遷移するのはよくやるし簡単。（※それについても今度記事で紹介します）

まとめ

Webシステムの多くはサーバーサイド処理が必要なので、Webシステム開発をするなら上記二つの画面遷移を覚えておくと良い。次回の記事では、細かなソースコードの処理を紹介する。

ざっと今ネットを調査したところ、次の記事がわかりやすい。
cartman0.hatenablog.com

最後に私の読んでみたい本をご紹介する。サーバサイドJavaの本は読んだことが無く、もっぱら実践で学習しています。

Javaサーブレットプログラミング (Help for server‐side Java developers)

作者: ジェイソンハンター,ウイリアムクロフォード,Jason Hunter,William Crawford,中田秀基
出版社/メーカー: オライリー・ジャパン
発売日: 2002/01
メディア: 単行本
クリック: 4回
この商品を含むブログ (2件) を見る

つくって覚えるJava Servlet入門

作者: オフィス加減
出版社/メーカー: アスキー・メディアワークス
発売日: 2011/06/02
メディア: 単行本（ソフトカバー）
クリック: 9回
この商品を含むブログを見る

独習Javaサーバサイド編第2版

作者: 山田祥寛
出版社/メーカー: 翔泳社
発売日: 2013/01/29
メディア: 大型本
購入: 1人クリック: 1回
この商品を含むブログを見る

2017-10-05

HTML5/CSS3のみで「下向き矢印」「右向き矢印」を作る方法

HTML / CSS テクノロジー

先日の記事で吹き出しをHTML5/CSS3を作りました。
somegoro.hatenablog.com

今回はそれを応用して、矢印を２パターン作ってみます。

下向き矢印

下向き矢印はこんな感じになります。
f:id:somegoro:20171005013737p:plain

ソースコードです。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.formBalloon {
  padding-bottom: 13px;
  display: block;
}
.formBalloon .formBalloonContent {
  border-radius: 3px 3px 0px 0px;
  width: 20px;
  height: 50px;
  position: relative;
  background: #101177;
  left: 20px;
}
.formBalloon .formBalloonArrow{
  border: 30px solid transparent;
  border-top: 30px solid #101177;
  position: absolute;
  height: 0;
  width: 0;
  z-index: 1;
}
.balloonMsg {
  padding-bottom: 1px;
  display: block;
  line-height: 1.4;
  text-indent: 0;
}
</style>
</head>
<body>
<div class="formBalloon" style="position: absolute; z-index: 2;">
  <div class="formBalloonContent"></div>
  <div class="formBalloonArrow"></div>
</div>
</body>
</html>

右向き矢印

右向き矢印は、こんな感じになります。

ソースコードです。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.formBalloon .formBalloonContent {
  width: 100px;
  height: 60px;
  background: #101177;
  display: inline-block;
}
.formBalloon .formBalloonArrow{
  border: 30px solid transparent;
  border-left: 30px solid #101177;
  position: absolute;
  height: 0;
  width: 0;
  display: inline-block;
}
</style>
</head>
<body>
<div class="formBalloon">
  <div class="formBalloonContent"></div>
  <div class="formBalloonArrow"></div>
</div>
</body>
</html>

簡単に作ることが出来ました。右向き矢印はさらに応用することでガイドみたいなものも作れそうですね。

今回の記事は以上です。

2017-10-04

設計書 Tips 飛び越え線の書き方２つ in Excel

テクノロジー

「飛び越え線」の書き方

線が交差したときに見やすくする「飛び越え線」の書き方をご紹介します。
f:id:somegoro:20171004004939p:plain

設計書を書くときなどは何かと線が多くなりますよね。Microsoft製品のVisioなら「飛び越え線」があるのですがExcelはありません。

ですので、簡単に作成する方法を２つご紹介します。

方法１　丸・四角・棒線を使った方法

まずは準備です。配置から「枠線に合わせる」を選択します。これで図形を組み合わせやすくなります。
f:id:somegoro:20171004004342p:plain

次に全ての列の「列幅」を設定してセルを正方形にします。Excel2016ではデフォルトのフォントが游ゴシックなので行幅が2.5（25ピクセル）です。ですので、列幅も2.5（25ピクセル）に指定してセルを正方形にします。セルを正方形にすることで図形が作りやすくなります。
f:id:somegoro:20171004004502p:plain

使う図形は「丸」「四角」「棒線」の３つです。
f:id:somegoro:20171004004704p:plain

丸の中に棒を縦に入れます。
f:id:somegoro:20171004004748p:plain

丸の下半分に四角を被せます。
f:id:somegoro:20171004004832p:plain

四角の枠線を白にします。これで完成です。
f:id:somegoro:20171004010027p:plain

実際に交差した線に飛び越え線として配置します。
f:id:somegoro:20171004004939p:plain

方法２　アーチを使った方法

さてもう一つの方法をご紹介します。

使う図形は「アーチ」「棒線」の２つです。

図形から「アーチ」を選択します。
f:id:somegoro:20171004005018p:plain

挿入したアーチを極限まで細くして、棒線のような太さにします。上記と同様に交差した線に飛び越え線として配置し、横線を新たな白い棒線を被せます。
f:id:somegoro:20171004005104p:plain

これで完成です。アーチを使った方法の方が手順は短いですが手動での微調整が入ります。どちらが便利かは好みですかね。

以上、飛び越え線の書き方２つ in Excel でした。

2017-10-03

HTML5/CSS3 だけで「キレイな」吹き出しを作る方法

HTML / CSS テクノロジー

ギザギザの吹き出し

前回の記事で、HTML5/CSS3 だけで吹き出しを作る方法をご紹介しました。
somegoro.hatenablog.com

しかし、公開した後になってだんだんと気になってきてしまったのです。ここのギザギザが。。。
f:id:somegoro:20171003005147p:plain

これは線（border）を重ねて三角に見せていることが原因です。

キレイなの吹き出し

ここのギザギザをなんとか滑らかに出来ないか試行錯誤してみました。
すると、こんなに滑らかにすることが出来ました。
f:id:somegoro:20171003005218p:plain

さらに、副作用としてソースコードも簡潔でキレイになりました。難点は前回のように影を付けられないということです。付けるとこんな感じになります。
f:id:somegoro:20171003004406p:plain

もうちょっと頑張って、少し大き目の三角を下に配置して影らしい色を付ければ出来ると思います。ここではソースコードの簡潔さを優先して影を全部取っ払ってしまいます。

f:id:somegoro:20171003004632p:plain

ほら、キレイな吹き出しが出来ました。

ソースコードです。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.formBalloon {
    padding-bottom: 13px;
    display: block;
}
.formBalloon .formBalloonContent {
    border-radius: 3px;
    padding: 6px 5px;
    width: auto;
    position: relative;
    color: #fff;
    background: #101177;
    font-size: 12px;
    min-width: 210px;
}
.formBalloon .formBalloonArrow{
  border: 8px solid transparent;
  border-top: 8px solid #101177;
  position: absolute;
  height: 0;
  left: 20px;
  width: 0;
  z-index: 1;
}
.balloonMsg {
    padding-bottom: 1px;
    display: block;
    line-height: 1.4;
    text-indent: 0;
}
</style>
</head>
<body>
<div class="formBalloon" style="position: absolute; z-index: 2;">
  <div class="formBalloonContent">
    <span class="balloonMsg"> ここに吹出に入れたい文章を入力してください。<br>吹出内の文章は複数行にすることもできます。</span>
  </div>
   <div class="formBalloonArrow"></div>
</div>
</body>
</html>

2017-10-02

HTML5/CSS3 だけで「吹き出し」を作る方法

HTML / CSS テクノロジー

今回の記事では、HTML5/CSS3 だけで「吹き出し」を作る方法をご紹介します。

記事下にあるソースコードをコピー＆ペーストすると、このような「吹き出し」が出来ます。画像を使うよりも軽量かつサイズ操作が簡単なのでおススメです。

ここに吹出に入れたい文章を入力してください。
吹出内の文章は複数行にすることもできます。

上記の吹き出しにも書いてあるように、span要素の balloonMsgクラスに表示させたい文字を入力するだけでサイズ操作が自動で行われます。

それではソースコードの公開です。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>吹き出し</title>
<style>
.formBalloon {
    padding-bottom: 13px;
    display: block;
}
.formBalloon .formBalloonContent {
    border-radius: 3px;
    padding: 6px 5px;
    width: auto;
    position: relative;
    color: #fff;
    background: #101177;
    font-size: 12px;
    box-shadow: 0px 0px 6px #888;
    -moz-box-shadow: 0px 0px 6px #888;
    min-width: 210px;
}
.formBalloon .formBalloonArrow {
    width: 15px;
    height: 15px;
    position: absolute;
    bottom: 0;
    left: 20px;
    z-index: 1;
}
.formBalloon .formBalloonArrow div {
    margin: 0 auto;
    display: block;
    height: 1px;
    background: #101177;
    box-shadow: 0px 2px 3px #888;
    -moz-box-shadow: 0px 2px 3px #888;
}
.formBalloon .formBalloonArrow .line10 {
    width: 19px;
}
.formBalloon .formBalloonArrow .line9 {
    width: 17px;
}
.formBalloon .formBalloonArrow .line8 {
    width: 15px;
}
.formBalloon .formBalloonArrow .line7 {
    width: 13px;
}
.formBalloon .formBalloonArrow .line6 {
    width: 11px;
}
.formBalloon .formBalloonArrow .line5 {
    width: 9px;
}
.formBalloon .formBalloonArrow .line4 {
    width: 7px;
}
.formBalloon .formBalloonArrow .line3 {
    width: 5px;
}
.formBalloon .formBalloonArrow .line2 {
    width: 3px;
}
.formBalloon .formBalloonArrow .line1 {
    width: 1px;
}
.balloonMsg {
    padding-bottom: 1px;
    display: block;
    line-height: 1.4;
    text-indent: 0;
}
</style>
</head>
<body>
<div class="formBalloon" style="position: absolute; z-index: 2;">
  <div class="formBalloonContent">
    <span class="balloonMsg">
      ここに吹出に入れたい文章を入力してください。<br>
      吹出内の文章は複数行にすることもできます。
    </span>
  </div>
  <div class="formBalloonArrow">
    <div class="line10"></div>
    <div class="line9"></div>
    <div class="line8"></div>
    <div class="line7"></div>
    <div class="line6"></div>
    <div class="line5"></div>
    <div class="line4"></div>
    <div class="line3"></div>
    <div class="line2"></div>
    <div class="line1"></div>
  </div>
</div>
</body>
</html>

2017-09-18

直下の要素のみスタイル指定する方法　HTML5/CSS3

HTML / CSS テクノロジー

直下の要素のみスタイル指定する方法

たまに使いどころが出てくる「直下の要素のみスタイル指定」したいケースへの対応です。

「idがparentの要素」の直下である「div要素」のみ背景色をつけています。

#parent > div {
  background-color:#4CAF50;
}

全体のソースはこんな感じです。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div,p {
  background-color:white;
  margin: 2px;
  border: 1px solid;
  height: 4rem;
  width: 4rem;
}
#parent {
  border: 1px solid;
  height: 20rem;
  width: 20rem;
}
#parent > div {
  background-color:#4CAF50;
}
.children{
  height: 2rem;
  width: 2rem;
}
</style>
</head>
<body>
<div id="parent">
  <div>
    <div class="children"></div>
  </div>
  <div>
    <div class="children"></div>
  </div>
  <div>
    <div class="children"></div>
  </div>
  <p></p>
</div>
</body>
</html>

AWSについて調べた

クラウドについて

オンプレミス

AWSについて

オブジェクトストレージ（クラウドストレージ）

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

データベース

アベイラビリティゾーン（AZ）

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

データベースとは

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

Oracle SQL Developer

A5:SQL Mk-2

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

JDBCドライバ・マネージャ

JDBCドライバ

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

クラウドの利用形態

「IaaS」イァース

「PaaS」パース

「SaaS」サース

認定試験

AWS認定試験

GCP認定試験

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

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

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

類似サービス

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

Tomcatのインストール方法

ダウンロード

インストール

設定

Javaで画面遷移する方法

１．リダイレクト

２．フォワード

番外編

まとめ

下向き矢印

右向き矢印

「飛び越え線」の書き方

方法１ 丸・四角・棒線を使った方法

方法２ アーチを使った方法

ギザギザの吹き出し

キレイなの吹き出し

直下の要素のみスタイル指定する方法

方法１　丸・四角・棒線を使った方法

方法２　アーチを使った方法