生活情報オンライン

ITエンジニアが役立つ情報を発信します。

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

Javaで画面遷移する方法

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


基本的な方法は次の2つ。
1.リダイレクト(Redirect)
2.フォワード(Forward)

1.リダイレクト

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

2.フォワード

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

番外編

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

まとめ

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


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


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

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

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

つくって覚えるJava Servlet入門

つくって覚えるJava Servlet入門

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

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

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

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


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

下向き矢印

下向き矢印はこんな感じになります。
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>


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


今回の記事は以上です。

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

「飛び越え線」の書き方

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


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


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

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

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


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


使う図形は「丸」「四角」「棒線」の3つです。
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


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

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

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


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


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


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


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

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

ギザギザの吹き出し

前回の記事で、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>

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

今回の記事では、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>

Java「Class / method」の作り方 in Eclipse

Javaで「Class」と「method」を作ってみましょう。


前回JavaHello Worldを表示してみました。今回はそこから拡張して「Class / method」を作成してみます。
somegoro.hatenablog.com

Classの作成

前回クラスを作成したときと同様にパッケージを右クリックして「新規」→「クラス」を選択します。すると、新規クラスについて設定する画面が出てきます。
f:id:somegoro:20170923214452p:plain
名前のテキストボックスに自分が設定したいクラス名を指定して「完了」ボタンをクリックします。


ファイルが作成されました。この中に指定したクラス名でクラスが作成されています。
f:id:somegoro:20170923214440p:plain


クラスの内容は、最初は最低限のことしか書かれていません。ですので、クラスの中身(処理)を書いていきます。クラスの書き方は次のとおりです。

アクセス修飾子 class クラス名 {

//フィールドを記述

//メソッドを記述

}

フィールドはクラスが持つ変数のことです。次にメソッドについて見ていきます。

methodの作成

作成されたクラスの中にメソッドを書いてみましょう。ここでは、「10回挨拶するメソッド」を書いてみます。メソッドの書き方は次のとおりです。

修飾子 戻り値の型 名前 (引数1の型 引数1の名前, 引数2の型 引数2の名前,...)

この際、引数については任意の項目です。引数が無ければ書く必要はありません。それでは実際のコードを書きます。

public class SayHello {

  //10回挨拶するメソッド
  void sayHello10(){
    for(int i = 0; i < 10; i++){
      System.out.println(i + " : Hello world !");
    }
  }

}



それでは、作成した「10回挨拶するメソッド」をmainメソッドから呼び出してみましょう。mainメソッドの中を次のように変更します。

public class HelloWorld {
  public static void main(String[] args){
    
    SayHello a = new SayHello();
    a.sayHello10();

  }
}



ソースコードの記述は完了です。実行してみましょう。
Eclipseの「実行」ボタンをクリックします。コンソールに挨拶分が表示されました。
f:id:somegoro:20170923220246p:plain



以上、Java「Class / method」を作ってみる記事でした。

Java「Hello World」in Eclipse

今回の記事ではJava言語で「Hello World」を出力する方法をご紹介します。実際の業務に役立つように、業務でよく使うであろう統合開発環境の「Eclipse」を使用します。これが基本であり、システム開発はここから始まります。実際の業務では既存システムの改修作業になることが多いです。

プロジェクトの作成

Eclipseを開いて左上のファイルマークをクリックします。ポップアップで出てきた「Javaプロジェクト」を選択します。
f:id:somegoro:20170922001939p:plain


プロジェクト名を入力します。完了ボタンがアクティブになるので、クリックします。
f:id:somegoro:20170922001959p:plain

クラスの作成

Javaプロジェクトのフォルダ構成が作成されました。「src」フォルダを右クリックします。
f:id:somegoro:20170922002024p:plain


ポップアップで出てきた「新規」→「クラス」をクリックします。
f:id:somegoro:20170922002052p:plain


「名前」を入力し「完了」ボタンをクリックします。
f:id:somegoro:20170922002100p:plain


Javaファイルが出来ました。
f:id:somegoro:20170923203443p:plain


ソースコードを次のものに変更します。

public class HelloWorld {
  public static void main(String[] args){
    System.out.println("Hello world !");
  }
}


実行

Javaファイルを右クリックします。「実行」「Javaアプリケーション」をクリックします。
f:id:somegoro:20170922002142p:plain


コンソールに「Hello world !」が出力されました。
f:id:somegoro:20170922002155p:plain



以上、Javaで「Hello World」でした。(画像が多すぎるのも見にくいものかな。。。)

図書館で電子書籍を借りられると聞いてキンドル買った結果

表題のとおり、次のWebサイトを見たことを契機に胸を躍らせてキンドルを購入しました。

wired.jp

なんと!このWebサイトによると地元の図書館で電子書籍を借りられるというではありませんか、ネットに繋がっている端末ならいつなんどきでも。本が大好きな私は、それならば、ということでキンドルを購入してみました。電子書籍は以前から気になっていてすでに調査済で後はアマゾンで決定ボタンをポチっとするだけの状態だったのです。翌日に「Kindle Paperwhite」が来ました。さっそく図書館で電子書籍を借りようと試みる。。。


結果。。。


電子書籍借りられません!


こんなにしっかりとしたWebサイトなのに!と、モヤモヤしながらも色々と調査した結果、私の環境では図書館で電子書籍を借りることは出来ないのだということがわかりました。どういうことかというと、このWebサイトの記事を書いた人は外国人の方のようなんですよね。どこの国のお方かは存じませんが、アメリカなどは電子書籍が借りられる図書館が多いようです。


日本は最近増えてきたようですがまだまだ少なく、次のような状況です。
電子図書館について | 電子書籍の情報をまとめてみる

電子図書館の利用方法

結果的に私は電子図書館を利用することが出来ませんでした。しかし試行錯誤の結果、電子図書館の利用方法を把握することが出来たのでご紹介します。


電子図書館を利用する方法は次の簡単2ステップです。しかし条件が揃わないと利用することは出来ません。

1.図書館利用カードを作る
2.電子図書館の利用手続きをする


1.図書館利用カードを作る

まず、電子図書館で図書を借りようにもその地区の図書館利用カードがないと利用することが出来ません。ここは電子でない図書館と同様です。ですので、図書館利用カードを作れることが利用するための第一条件になります。上記の中から、東京23区外居住・通勤の私でも利用カードが作れる図書館をインターネットで探したところ、居住区・通学通勤地区でなくとも利用カードを作れるのは次の二つの地区でした。


・豊島区(TRC豊島電子図書館)
・千代田区(千代田Web図書館)


太っ腹ですね。ありがたいです。

2.電子図書館の利用手続きをする

さてさて、利用カードを作ってからどんな手続きをすればいいのか上記2つの図書館の利用案内を見てみましょう。
TRC豊島電子図書館の利用について | TRC豊島電子図書館

豊島区内に在住・在学・在勤の方で、豊島区立図書館の利用カードを
お持ちの方はお申込みいただけます。


https://weblibrary-chiyoda.com/

②利用対象者について
千代田区に在住・在勤・在学(小学生以上、社会人大学院生を含む)で千代田区立図書館利用登録済みの方です。


ということで、東京都内で電子図書を図書館で借りようと思ったら「豊島区内 / 千代田区に在住・在学・在勤」してないといけないのですね。これに該当する方は無事に電子図書館を利用することが出来ます。図書館利用カードを発行してもらったら、そのカードと身分証、上記に該当していることを証明できるものを持って図書館の受付に行きましょう。そうすれば見事、IDとパスワードを発行してもらえるので電子図書館に入る(ログインする)ことが出来ます。



ということで、私は電子図書館を利用することは出来ません。勘違いから購入したキンドルですが、せっかくなので満喫しようと思います。


私が購入したの「Kindle Paperwhite white-color」です。インターネットごしの写真で見たときには灰色のkindleマークが目立つかなと思ったのですが、ちょうど良いバランスで主張しすぎなくてオシャレです。そして何より軽い小さい!のに見やすい!不思議!これからのKindleライフが楽しみです。

Kindle Paperwhite Wi-Fi 、ホワイト

Kindle Paperwhite Wi-Fi 、ホワイト

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

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

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


「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>

HTML5でCSS/javascript読込「外部ファイル読込」と「インライン」

f:id:somegoro:20170917040519j:plain

HTML5CSS/javascript読込

最近のマイブームは図書館で本を片っ端から読んでいくことです。仕事終わりから閉館までなので1日2時間程度しか居られないのですが、毎日読み込んでいることで早く深く読めるようになった気がします。「仕事を辞めて本を読むことに集中したらどれだけの知見を蓄えることが出来るのだろうか」という謎の向上心がちらついています。


さて、今回の記事では「読込」は「読込」でも「HTMLでCSS/javascriptの読み込み」についてご紹介します。
・外部ファイル読込
・HTMLファイル中に記述(インライン)


上記2つは基本的な読み込み方法でHTML文書のhead要素配下に記述します。この読み込み方法がHTML5ではとても簡単になりました。実際にコードを見ていきます。

外部ファイル読込

HTML4.01

<link href="sample.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="sample.js"></script>


type属性はMINEタイプを記述するところです。HTML4.01の頃は記述が必須だったんですね。HTML5では次のように省略して書くことが出来ます。


HTML5

<link href="sample.css" rel="stylesheet">
<script src="sample.js"></script>


このとおりtype属性が省略されていますね。
HTML5ではstyle要素と記述すると初期値としてCSSのMINEタイプとして扱ってくれるのです。script要素も同様にMINEタイプに何も記述しないと初期値としてjavascriptのMINEタイプとして扱ってくれます。


HTMLファイル中に記述

HTML4.01

<style type="text/css">
#sample {
  width: 100%;
}
</style>
<script type="text/javascript">
function sample(){
  console.log("sample");
}
</script>


HTMLファイル中に記述も外部ファイル読込のときと同様です。要素からMINEタイプを自動で認識してくれます。


HTML5

<style>
#sample {
  width: 100%;
}
</style>
<script>
function sample(){
  console.log("sample");
}
</script>


ちなみに

link要素、script要素には様々な属性があります。代表的な属性の意味をそれぞれ見てみましょう。

link要素
属性
意味
href これは必須です。
URLを指定することでリソースとして扱うことができます。
rel これも必須です。
Relationの意味ですね。ドキュメントとリソースとの関係を指定しています。
media これは任意の属性です。
メディアを指定しています。スマホ用、印刷用など用途ごとに指定出来ます。
type これはHTML5で任意になったMIMEタイプを指定する属性ですね。
(何も記載が無いとtext/cssが設定されます)


script要素
属性
意味
src これは必須です。
URLを指定することでリソースとして扱うことができます。
async これは任意の属性です。
非同期で読み込んで、読込次第実行します。そのため実行順序は担保されません。
defer これは任意の属性です。
この属性を使用するにはsrc属性が必須です。HTMLを読み込んだ時点で実行開始します。
type これはHTML5で任意になったMIMEタイプを指定する属性ですね。
(何も記載が無いとtext/javascriptが設定されます)
charset これは任意の属性です。
文字エンコーディングを指定します。最近ではUTF-8ですよね。


以上、HTMLでCSS/javascriptの読み込みについてのご紹介でした。


次は「文字エンコーディング」と「async / defer」について深堀した記事を書こうと思います。

progress要素の4つの状態とmeter要素との使い分け

今回の記事ではHTML5プログレスバーのご紹介をします。


プログレスバーは進捗の達成率を表します。Adobeの調査によると使い時は10秒以上かかる長い処理の間に表示するのが適しています。


10秒以上画面が固まるのは退屈ですもんね。
f:id:somegoro:20170912022155j:plain
(個人的には5秒程度でも進捗率のわかるアニメーションを出してほしいですし、自分がWebシステム作るときには出しちゃうと思います。)

progress要素の4つの状態

HTML5では簡単にプログレスバーが実装できるようになりました。
プログレスバーは次の4つの状態が用意されています。
・読み込み中
・最小値
・進行中
・最大値


さっそく表示させていきましょう。あわせてコードも載せていきます。


・読み込み中

<progress></progress>

・最小値

<progress value="0" max="100"></progress>

・進行中

<progress value="50" max="100"></progress>

・最大値

<progress value="100" max="100"></progress>


これらのプログレスバーは進行状況を示す際に使用します。
進捗数値ををvalue属性に指定、最大値をmax属性に最大値を指定します。最小値は記載不要で0になります。


また「進捗数値の取得/設定」および「最大値を取得/設定」は3ステップで実現出来ます。

1.まずはプログレスバーにidを付けます。
<progress id="progress_id" value="0" max="100"></progress>

(classでも要素でも出来ますが、ここではidにします。)


そして、個別に実施したいことを書きます。

2.進捗状況の数値を取得設定
var atai = $("#progress_id").value;
$("#progress_id").value = 70;
3.進捗状況の最大値を取得設定
var atai = $("#progress_id").max;
$("#progress_id").max = 100;


これらは非同期処理を使用することで動的に設定することも出来ます。
上記コードを応用してsetIntervalなどで非同期処理を実装してみます。


上記のソースです。

<progress id="progress_id" value="0" max="100"></progress>

<script>
$(window).on('load', function() {
  var $progress = document.getElementById("progress_id");
  
  var id = setInterval(function(){
    if($progress.value > 99){
      $progress.value = 0;
    }
    $progress.value += 1;
  }, 100);
});
</script>


さて、上記で説明したとおりprogressは進捗状況を表すものであり、電池容量やディスク使用量の表示に使用することは想定されていません。
電池容量やディスク使用量の表示には、meter要素を使いましょう。

meter要素の使い方

meter要素では、progress要素にはなかったバーの色付けをすることが出来ます。
こちらもサンプルを置いておきます。

<meter value="0"   min="0" low="20" optimum="50" high="80" max="100"></meter>

<meter value="10"  min="0" low="20" optimum="50" high="80" max="100"></meter>

<meter value="50"  min="0" low="20" optimum="50" high="80" max="100"></meter>

<meter value="90"  min="0" low="20" optimum="50" high="80" max="100"></meter>

<meter value="100" min="0" low="20" optimum="50" high="80" max="100"></meter>


meter要素もHTML5から新たに追加された要素です。
progress要素との違いは、min属性で最小値を設定。low属性で低いレベルを設定。optimum属性で最適値を設定。high属性で高いレベルを設定です。


以上、HTML5で追加されたオブジェクトの紹介でした。

意外と使う!読めない記号の読み方をご紹介

f:id:somegoro:20170827031703j:plain
今回の記事では「記号の読み方」をご紹介します。日常にあふれている記号ですが、意外と読めないものも多いですよね。


システム開発の現場でも記号はよく使用します。自分で使ってる分には読めなくとも問題ないのですが、人に伝えるとき「あれ、くにゃっとした括弧」とか「コロンだかセミコロンだか忘れたけど下がちょろっと出てる方」という読み方で伝えていては時間がかかってしまって困りますよね。


実はこれらの記号の読み方は日本工業規格で定められているものがあるのです。(日本工業規格とは通称でJIS規格と呼ばれています。以後、通称で呼びます。)

規格番号:JISX0201
規格名称:7ビット及び8ビットの情報交換用符号化文字集合
Japanese Industrial Standards


しかし、正確にJIS規格の呼び方で読んでいる人は少ないように感じます。例として、@←これを単価記号と呼ぶ人はなかなかいないことでしょう。ですので、よく使われる記号の「伝わる読み方」をまとめてご紹介します。また、よく使われる記号だけれどもJIS規格には定義されていない記号も加えておきました。

よく使われる記号とその読み方

JIS規格にある読み方を日本語通用名称の列に記載しています。伝わる読み方は通称の列に記載します。JIS規格にある読み方で伝わる読み方の場合は、伝わる読み方の列に何も記載していません。

記号 日本語通用名称 通称
! 感嘆符 びっくりマーク
" 引用符 ダブルクォーテーション
' アポストロフィ クォーテーション
# 番号記号 ハッシュ、シャープ※厳密にはシャープとは形が違う
$ ドル記号 ドル
アンパサンド アンド
~ (無し) チルダ
^ アクサンシルコンフレックス ハット
縦線 パイプライン
` アクサングラーブ バッククオート
() 小括弧  
[] 大括弧  
{} 中括弧  
: コロン  
; セミコロン  
アステリスク アスタリスク
, コンマ カンマ
@ 単価記号 アットマーク
? 疑問符 エスチョン
/ 斜線 スラッシュ
句点  
読点(とうてん)  
中点(なかてん)  
長音符号  
濁点  
半濁点  
(無し) バックスラッシュ


バックスラッシュなどはJIS規格では円マークとして登録されています。システム開発の現場を経験した方は、ユニックス系OSで円マークを打刻してバックスラッシュを出した経験があるかと思います。詳しくは次の記事がわかりやすいです。
円マークとバックスラッシュ | anopara


以上、記号の読み方のご紹介でした。

しらべ図鑑マナペディア マークと記号

しらべ図鑑マナペディア マークと記号

斜位って何!?あなたの頑固な眼精疲労、頭痛、肩こりの原因かも。。

f:id:somegoro:20170819034334j:plain
こんにちは。今日はあなたの頑固な眼精疲労、頭痛、肩こりの原因になっているかもしれない「斜位」についてご紹介します。

斜位って何?

私は先日テレビで聞いて初めて斜位という言葉を知ったのですが、わりと知られている現象のようですね。次のサイトに丁寧に詳しく記載されています。
斜視と斜位 | 目の健康について | 目とメガネに関する情報 | セイコーオプティカルプロダクツ株式会社
時間の無い方のためにざっくり言うと斜位」とは、デフォルト状態の黒目の位置が上下左右いずれかにずれているのを、筋肉で目標の位置に補正している状態の目のことを指します。


そして、日本人の多くは「斜位」なんだそうです。(日本人の多くはシャイすなわち恥ずかしがり屋と世界的に言われているようですが、ここでは恥ずかしがり屋って旨ではないですよ。ちなみに私は極度の恥ずかしがり屋です。高校生のときに告白されて付き合った子と初めてのデートで一言も話せずに、翌日フラれました!!)

あなたはどの程度の斜位なのか

斜位」は眼鏡で矯正したり、手術、トレーニングなどで改善されるようです。しかし、放置しておくと眼精疲労、頭痛、肩こりを招くことがあるようですね。前日にピッチング練習をしたわけでもないのに肩がこっている!そんな方は目の筋肉が常に頑張っているからかもしれません。自分がどれくらいの「斜位」なのか確認してみると良いかと思います。


さて、そこで「斜位」のチェック方法です。次の方法が最もお手軽ですね。詳しく調べたいときは眼科に行くと精密検査をしてくれるようです。
pp-syashisyai.com
斜位チェックの結果はいかがでしたしょうか。私もやってみましたが、ほんのわずかに左目が外向いているようでした。そもそも完璧に目標を向いている人が少ないようなので、あまりナーバスになる必要はないかと思います。

まとめ

もし上記チェック方法で大きく黒目が動く方は眼科に行ってみましょう。斜位は成人してからも矯正が可能と言われています。


これは似て非なる「斜視」と違うところですね。「斜視」は成人してからの矯正は難しいとされています。見た目は矯正できても機能は矯正できないようです。これは「両方の目で見たものを脳で一つにまとめる機能」が9歳前後で完成するためです。斜視自体は知名度が高いですが、このように子供のうちに矯正すべきとはあまり知られていないですよね。


以上、眼精疲労、頭痛、肩こりの隠れた原因になっているかもしれない「斜位」についてのお話しでした。



最後まで読んでいただきありがとうございます。目が疲れましたね、こちら私も愛用しているオススメ品です。

めぐりズム 蒸気でホットアイマスク 無香料 14枚入

めぐりズム 蒸気でホットアイマスク 無香料 14枚入

picture要素が便利らしい / HTML5.1

HTML5.1からpictureという要素が使用可能になりました。今まで知らなかったのですが、これがなかなか便利らしいというので調べてまとめてみることにします。

ブラウザの対応状況

さて、HTML5.1から使用可能とのことでしたがブラウザの対応状況はどのような状況なのでしょうか。「Can I use...」で確認してみましょう。

Can I use...の使い方はこちらの記事をどうぞ

somegoro.hatenablog.com



f:id:somegoro:20170709033552p:plain

ふむ。。ここに表示されている全てのブラウザは対応済のようですね。HTML5.1が勧告されたのは2016年11月1日なのですが各社対応が早いものですね。


ではpicture要素を使うと何が出来るのか。

ピクセル密度に合わせた画像を自動で選択

picture要素を使うとデバイスピクセル密度を自動で認識して、それに合わせて画像を選択できるようになります。例を出すと、ピクセル密度AだったらB画像、ピクセル密度CだったらD画像ということができるようになります。


これだけだったら別に何も驚きはなく、今までもCSSあるいはjavascriptで出来ていたじゃないかと思われると思います。しかし、picture要素を使うとHTMLのみで上記のことが出来てしまうのです。CSSjavascriptも必要なくレスポンシブに画像を扱うことが出来る、それがpicture要素の革新的なことなのですね。


それでは使い方を見ていきます。

picture要素の使い方

picture要素の使い方はとてもシンプルです。今回は詳細にわかりやすく記載されているサイトを見つけましたので、そちらのリンクを貼らせていただきます。
picture要素 レスポンシブイメージ(画像内容の最適化) - TAG index


以上、picture要素のまとめでした。

バッチファイル処理の初歩

f:id:somegoro:20170609001832p:plain
先月から入っている仕事がついにリリースを迎えています。約一か月間、寝不足になりながらも頑張りました。


さて、そめごろうとしては久しぶりにシステム導入のフェーズになります。前職ではよく参加していたフェーズなのですが、現職ではアプリケーション開発をメインで実施していたのでシステム導入はなかなかありませんでした。


ということで、システムについての知識があやふやになってきているので円滑に業務を遂行するためのお勉強記事を書きます。今回はシステム導入の基本作業である「バッチファイル処理について」の記事を書きます。


拡張子は.batまたは.cmd

基本中の基本ですね。テキストにバッチ処理を書いたら拡張子は.batまたは.cmdで保存しましょう。私は基本的に.batで保存しますが、職場では.cmdで保存する人が多いです。文字数も同じですし、どちらもで構わないでしょう。

環境変数でPATHに追加

システムのプロパティにある環境変数でPATHに追加すると、コマンドプロンプトからファイル名指定だけで実行できるようになります。いわゆるパス通ってるからですね。この設定をしていないと常にフルパス指定しなければバッチファイルは実行できません。

help で説明を見よう

help set でsetについての説明を見ることが出来ます。
help if でifのかなり参考になる説明を見ることが出来ます。少し慣れてきて細かな仕様が知りたいときにはネットで検索するのもいいけど確実な情報はここを確認することで取得できます。


ちなみにhelpの説明を終了するにはEscキーを押下します。コマンドプロンプト自体を終了するにはhelpを終了させてからexitで出来ます。

ラベル定義

:label3 これでラベルを定義することが出来ます。ラベルとは関数のようなものです。バッチファイルには関数がありません。そして、

goto label3
または
call label3

でlabel3ラベルに移動することが出来ます。

バッチファイルから他のバッチファイルを呼び出す

バッチファイルは他のバッチファイルを呼び出すことも出来ます。それにはバッチファイル名を記載すればいいだけです。しかしこの方法ではバッチファイルを呼び出した後に戻ってこないでそのまま終了してしまいます。


なのでそうならないようにcallを使用して他のバッチファイルを呼び出します。callで呼ばれたバッチファイルはexit 0とすることで戻り値を返せます。この例では0を返しています。バッチ処理を終了させるならexit /b です。そして、if errorlevel 0 これで戻り値に0が返ってきたか確認できます。


基本はこんな感じでしょうか。以下によく使用するコマンドを羅列していきます。

start sample.bat

別プロセスを起動して実行する。プロセスたくさん作ってパフォーマンス試験するときなどに便利そうですね。

pause

続行するには何かキーを押してください . . .

echo Hello

Helloと出力します。おなじみのテストコマンドです。

echo off

これ以降はecho表示させない。必要な表示を見逃さないためには大事な処理です。

@

この行はecho表示させない。

@echo off

この行はecho表示させない。これ以降はecho表示させない。

echo.

改行する。

set arg=atai

スクリプト実行中のみに有効な環境変数を定義する。

echo %arg%

変数の中身を参照する。

rem または ::

コメントアウト

mkdir

ディレクトリを作成する。

xcopy

コピーする。

%0

このバッチファイルのパス

cls

画面をクリアする。

ping localhost -n 5 > nul

5秒待つ(バッチファイルにはsleepやwaitは存在しない!)



以上、「バッチファイル処理の初歩」でした。


今回ご紹介したものだけでもかなり便利なバッチファイルを作成することが出来ると思います。しかし、バッチファイルにはまだまだおもしろい機能がありますよ。追ってご紹介していきます。


それでは今回の記事はこの辺で。


[改訂新版]Windowsコマンドプロンプトポケットリファレンス

[改訂新版]Windowsコマンドプロンプトポケットリファレンス

  • 作者:山近 慶一
  • 出版社/メーカー: 技術評論社
  • 発売日: 2016/03/04
  • メディア: 単行本(ソフトカバー)