Goro'z Journal: 2016

CSS メモ　リストのインデント

リストのインデントはこうやってやるらしい。
これから試してみる。

li {
padding-left: 1em;
text-indent: -1em;
/*必要であれば以下も*/
list-style-position:inside;
}

よくあるダメコードは別の要素で見かけだけ揃えているもの。それではロボットは意味がわからないことでしょう。SEO的なことを考えるのならば、リストはリストとして作った方がいい。

もっと良さそうなコードを見つけた。
<ul style="list-style-position: outside">
<li>項目その１</li>
<li>項目その２</li>
<li>項目その３</li>
</ul>

参照はここからでした。
http://yume.hacca.jp/koiki/list/indent.htm

ちなみに、Google検索で次のように探すとたくさん出てきますね。
・「CSSのliリストで2行目以降を一文字下げる」
・「html リスト複数行」etc...

CSS Tips 影を付ける

影を付ける

Web’Notes
CSSで影を付けるbox-shadowの使い方
http://webnonotes.com/css/box-shadow/

★CSS3リファレンス
box-shadow …… ボックスに影をつけるhttp://www.htmq.com/css3/box-shadow.shtml

リンクはaタグで書いた方が良さそう

ヨッセンス
[HTML] リンクタグ（aタグ）って何?基本から応用まで紹介!
http://yossense.com/link-tag/

ボタンリンクの場合はボタンを透過させると良いようです。

Black Flag
CSSで透明度／透過度（opacity）の指定をする方法
http://black-flag.net/css/20110513-3045.html

loadingを表示する

難易度が高いがCSSでアニメーションを作成できます。
HTML5でサイトを作ろう
画像を使わないでCSS3で様々なローディング用アニメーションをつくってみよう
http://www.html5-memo.com/webtips/css3-loading/

cssでなくgif画像を使用すると割合簡単にできます。商用でも無料で使用できるgif画像は、次のサイトにあります。
Preloaders world
http://preloaders.net/en/free

無料で商用ダウンロード可能かどうかわかりやすいです。
GIF画像検索サイト
ローディングGIF画像作り方&商用ダウンロード&JQUERY実装記事まとめ
http://gif89a.net/gif-loading/

コーディングの方法がわかりやすいです。
森のコーディング
画面読込中のグルグルまわるローディング画像を出す。jQuery・javascript
http://mori-coding.blog.jp/archives/6760786.html

リファレンス系

W3C公式サイト
W3C html5 reference
https://dev.w3.org/html5/html-author/

リファレンスのような内容がたくさん載っているサイト
w3schools.com
http://www.w3schools.com/

HTML5 Tag Reference
https://reference.hyper-text.org/html5/

自動生成系

テーブルのコード生成をしてくれるサイト。行や列の数字を入力することで、リアルタイム更新の図を完成テーブルを表示しながらコード生成してくれる。
TAG index
テーブルタグ作成ツール
http://www.tagindex.com/tool/table.html

フォント系

フォントが好きなサイト
WPC
http://web-pc.net/price

java(サーバーサイド処理) → HTML(画面側処理) のデータ渡し

java(サーバーサイド処理) → HTML(画面側処理) のデータ渡しについて、

結構前から調べてたのですが、やっと検討が付きました。というか思い出しました。
サーバー側で取得したり加工した「データ」を、どうやって画面側の処理に渡すのだろうかと考えていたのです。

javaの本では大体printでHTMLを出力しているようでしたが、実務を考えるとどうも現実的でないと思っていました。かと言って本には他の方法は見当たらない。

HTMLの本では form でjava側にデータを送ることについてはよく書いてあるのですが、逆方向の java → HTML へのデータ渡しについて書いてある書籍は見つかりませんでした。

javascriptも上記の二つ同様にサーバーサイド処理 → 画面側処理にデータを受け渡す方法は見つかりませんでした。

そこで、WireSharkなどでHTMLとjavaでどのようなデータを処理しているのかを見たり、HttpRequestやHttpResponseなどの仕様を調べてみました。そして辿りついたのが次の方法です。

次の情報を見ていくと詳細がわかります。
jsonデータを受け渡しに使うのですね、他の方法もあるのでしょうが、一つでもわかれば大分道が開けますね。

jQueryからサーブレットを呼び出してデータ取得、、、パラメータも渡してみたんだが。
http://ojorojoro.hateblo.jp/entry/2014/07/03/200931

JSON形式のWeb APIにアクセスするには？
http://www.buildinsider.net/web/jqueryref/034

ajaxでjavascriptとjavaの連携をする
http://pgori.hateblo.jp/entry/2013/05/24/111855

http://pussade8.hatenablog.jp/entry/2015/07/05/220612
(javascript)jQueryのajaxを利用してサーブレットからJSONを受け取る

これらはGoogle検索で「jquery java」とキーワード指定して検索すると出てきます。他にもたくさんのわかりやすい情報があるかと思いますので、気になる方は検索してみると良いかと思います。

HTML formで受けたデータはどのように処理すればいいのか

HTML formで受けたデータはどのように処理すればいいのか

■Getの場合はこうしてしまおう。

・javascriptでクエリ文字列を取得する
http://qiita.com/ma_me/items/03aaebb5dc440b380244

・[JavaScript] JavaScriptでURLのパラメーターを取得する
https://www.ipentec.com/document/document.aspx?page=javascript-get-parameter

■Postの場合はどうしたらいいのだろうか。
HTMLで受け付ける方法を記載してあるものが見つからない。そもそもServer側プログラムに渡すのがセオリーですものね。

PHPだとこんな風にしてデータ取得するようです。

・データの取得
http://akita-nct.jp/~yamamoto/comp/WEB/get_data/index.php

・GETで送られたデータ処理
http://www.phpbook.jp/appli/form/index2.html

ふーむ、やはりjavascriptではPostデータは取得できないようですね。HTMLにPHPを埋め込むしかないようです。

・Javascriptメモ：POSTデータの受信
http://qiita.com/juniskw/items/fb2b2bd6a7a003e5cb26

・フォームからのデータを受け取る方法
http://manabukun.net/kyouzai/php/php11.htm

■詳しい情報
HTTPまわりの情報だとかを詳しく書いてあるサイトを見つけました。ポップなデザインのブログですが今まで見たどのブログよりも詳細に情報が載っています。わからないこともあるのでググって理解します。

・入力された値を送信→受信
http://web-design-felica.hatenablog.com/entry/20150115/p1

・フォームデータを送信する
https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Forms/Sending_and_retrieving_form_data

こちらはMOZILLAのサイトです。さすがに詳しいです。しかし、やはりHTMLでの取得方法は記載していません。

開発現場では軽視されがちな気がするけど、意外と奥が深い　フロントエンドの世界。

※追記
iframeにformデータを送ると受け取ってくれるらしい情報を入手しました。明日職場で試してみようかと思います。postもgetも大丈夫なんだとか聞きました。

jQuery で Toggle ボタン作ってみた。addClass, removeClass, hasClass

jQuery で Toggle ボタン作ってみました。

クラスの操作をjQueryで次のように実施しています。
・クラスの追加　→　addClass
・クラスの削除　→　removeClass
・クラスの確認　→　hasClass

このサンプルで想定したのはテーブルをソートしたときのヘッダです。これと先日アップした次の記事を組み合わせることで簡単にテーブルヘッダが作成できると思います。

Goro's Jornal ボタンのサンプル：https://somegoro.blogspot.jp/2016/11/html-css-button-active-hover-background.html

ではサンプルをどうぞ。コピペ自由です。これで残業を減らして健康的に暮らしてください。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ToggleEvent_jQuery</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script>
$(function(){

$('.tab').on('click', function() {
if($(this).hasClass("active01")){
$(this).removeClass("active01");
$(this).addClass("active02");
}else if($(this).hasClass("active02")){
$(this).removeClass("active02");
$(this).addClass("active01");
}else{
$(this).addClass("active01");
}
/* 兄弟要素の属性を指定 */
$(this).siblings(".tab").removeClass("active01 active02");
});
});
</script>
<style>
.tab {
width:200px;
height:50px;
border: 1px gray solid;
display: flex;
align-items: center;
justify-content: center;
cursor:pointer;
}
.active01 {
background:gray;
}
.active02 {
color: white;
background: black;
}
</style>
</head>
<body>
<div class="tab" id="tab01">タブメニュー</div>
<div class="tab" id="tab02">タブメニュー</div>
<div class="tab" id="tab03">タブメニュー</div>
<div class="tab" id="tab04">タブメニュー</div>
</body>
</html>

text入力で自動入力させる方法　autocomplete HTML5

HTMLでテキスト入力欄を作成するには要素に「input type="text"」と指定しますね。

HTML5ではこのテキスト入力欄に様々な値を自動入力出来るようになりました。この自動入力は要素内に指定されたname属性を見ることで自動入力する値を決定しています。

自動入力（autocomplete）で作成したテキスト入力欄は、一つ自動入力でテキスト入力すると他の自動入力テキストに対しても自動で入力してくれます。

ECサイトなどでお馴染みのものですよね、webサイトが自動入力に対応してくれていると便利なものです。

今回も一通りのサンプルを作成してみました。コピペして使ってください。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample_HTML5</title>
<style>
label {
display: block;
height: 3em;
}
</style>
</head>
<body>
<div class="form_area">
<form action="/" method="post">

<label>autocomplete-organization<br>
<input type="text" name="organization" autocomplete="organization" autofocus="autofocus">
</label>
<label>autocomplete-email<br>
<input type="text" name="email" autocomplete="email">
</label>
<label>autocomplete-name<br>
<input type="text" name="name" autocomplete="name">
</label>
<label>autocomplete-postal-code<br>
<input type="text" name="postal-code" autocomplete="postal-code">
</label>
<label>autocomplete-address-level1<br>
<input type="text" name="address-level1" autocomplete="address-level1" placeholder="東京都">
</label>
<label>autocomplete-address-level2<br>
<input type="text" name="address-level2" autocomplete="address-level2">
</label>
<label>autocomplete-address-line1<br>
<input type="text" name="address-line1" autocomplete="address-line1">
</label>
<label>autocomplete-address-line2<br>
<input type="text" name="address-line2" autocomplete="address-line2">
</label>
<label>autocomplete-on<br>
<input type="text" name="on" autocomplete="on">
</label>
<label>autocomplete-off<br>
<input type="text" name="off" autocomplete="off">
</label>
<label>submit<br>
<input type="submit" value="送信">
</label>
</form>
</div>
</body>
</html>

ボタンのサンプル HTML CSS button :active :hover background: url

一日一善。一日一サンプル。

今日のサンプルです。ボタンを作成してみました。画像でボタンを作る方法の良い勉強になりました。

画像でボタンを作る方法は、たくさんありますが、現時点ではbackground属性でcssに書くのが一般的のようですね。

ボタンの動作は次のようにして指定できます。
・上にカーソルを置いている時　→　 :hover
・クリックしてる最中　→　 :active

また、カーソルの動作も指定できます。（通常ボタンはカーソルを上に置いても変化しません）
・上にカーソルを置いている時　→　cursor: pointer;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample_HTML5</title>
<style>
.button {
height:29px;
width:72px;
background: url('google_submit01.png');
background-repeat: no-repeat;
}
.button:hover {
background: url('google_submit02.png');
background-repeat: no-repeat;
}
.button:active {
background: url('google_submit03.png');
background-repeat: no-repeat;
}
.cursor_sample {
height:29px;
width:72px;
cursor: pointer;
color: white;
background-color: blue;
border: 1px DarkBlue solid;
}
</style>
</head>
<body>
<form action="#" method="post">
<label>image_submit<br>
<input type="image" formmethod="post" src="google_submit01.png" alt="submit">
</label>
</form>
<label>image-button, :hover, :active<br>
<div class="button"></div>
</label>
<label>cursor_sample<br>
<div class="cursor_sample">送信</div>
</label>
</body>
</html>

jQuery もほとんど同じようなものです。次のように記載することでイベントを登録できます。
・ id="****"　→　$('#****').
・ class="****"　→　$('.****').
・ <****>　→　$('****').

実践的に書いてみると次のようになります。コピペして使ってみてください。それぞれのアラートが確認できることでしょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>RegistEvent_jQuery</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script>
$(function(){

$('#id01').on('click', function(){
alert("id_button");
});
$('.class01').on('click', function(){
alert("class_button");
});
$('div').on('click', function(){
alert("div_button");
});

});
</script>
</head>
<body>
<button id="id01">id_button</button>
<button class="class01">class_button</button>
<div>div_button</div>
</body>
</html>

jQuery CDN ダウンロードせずにjQueryを使う方法

jQueryをダウンロードせずに使う方法をご紹介します。
ネットワーク越しに　jQuery　を使わせてもらうのです。このネットワークのことを　jQuery CDN　と言います。

jQuery CDN は本家 jQuery の他、Google、Microsoftで配信されています。今回は本家 jQuery の最新版の使用方法をご紹介します。

こちらのサイトの次の二つのリンクからコピペします。

サイト：https://code.jquery.com/

・ラベル「jQuery Core」　リンク「minified」
・ラベル「jQuery UI」リンク「minified」

そして、次のようにHTMLファイル中に記載します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample_jQuery</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script>
$(function(){

$('#sample').on('click', function(){
alert("hello");
});

});
</script>
</head>
<body>
<button id="sample">Sample_jQuery</button>
</body>
</html>

ボタンをクリックしてみましょう。hello とポップアップされたら jQuery が使用できている証です。

HTML5 のフォーマット基本型のご紹介

HTML5 の書き方の基本形です。コピペして使ってください。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample_HTML5</title>
</head>
<body>
Sample_HTML5
</body>
</html>

javascript 配列、連想配列　「01 そもそもの意味と作り方」

配列、連想配列とは何でしょうか。

IT業界から離れていた二年半で、私はすっかり忘れてしまいました。職場で開発作業が発生しているので、その内これらの知識が必要になることでしょう。ということで、今の内にまとめておきます。

今回の場合、javascriptを想定しています。他の言語でもほとんど変わらない気もしますが、その違いは今はひとまず置いといてjavascriptで考えます。

・配列とは、
多数の値を保管できる変数です。各値にはインデックスという番号が振られます。このインデックスを使用して各値は使用されます。

実際には、こんな感じに使います。
var hairetu = [atai1, atai2, atai3, atai4]
hairetu [0] = "hello"

・連想配列とは、
普通の配列のインデックスに相当するものがキーというものに換わります。キーには名前を設定することができます。

実際には、こんな感じに使います。
var hairetu = [apple : "りんご", orange : "オレンジ", lemon : "レモン", strawberry : "いちご"]
hairetu [apple] = "もも"

さて、ここまでで意味と作り方はわかりました。ではどんなときにその威力を発揮するのでしょうか。それは繰り返し処理のときです。

配列と繰り返し処理は非常に相性が良いです。例えば配列はこんな風にして使います。

for( var i = 0; i < hairetu.length; i++ ) {
処理;
}

では連想配列はどのように使うのでしょうか。for文の後処理である i++ ではキーを回すことはできませんね。でも大丈夫です、きちんと回す方法が用意されています。

今回は少々長くなってしまったので、続きは次回へ。

javascript 値と型を比較するおもしろい演算子【===】

javascript でおもしろい演算子を発見しました。

これはまだ実際には試していないのですが、本に記載してあったのでここにメモしておきます。
明日にでも職場で実験してみようかと思います。

おもしろい演算子それは「値と型を比較する演算子」です。このように書くと、AとBの値と型を比較出来るようです。

A === B

イコールが３つもあります。おもしろいですね。

値の比較や型の比較はよく使いますけど同時に比較しているプログラムは見たことありませんでした。そして、値と型の両方を比較した場面は結構ありますよね。

これで、だいぶソースコードを短く出来るのではないでしょうか。

HTML リダイレクトの方法

Webページのリダイレクトの作り方をご紹介します。

リダイレクトの方法は色々とありますが今回も最も簡単だと思われる「HTML の head タグ内の meta タグに記述する」方法のご紹介です。

実際にはこのように記載します。
<meta http-equiv="refresh" content="1;URL=https://somegoro.blogspot.jp/">

上記のように記載すると、Webページにアクセスした1秒後に私のブログにリダイレクトされます。細かく見ていきましょう。

まず、これでリダイレクトのお願いをします。
http-equiv="refresh"

次に、これで移動するまでの秒数を指定します。
content="＜移動するまでの秒数＞

最後に、移動先のURLを指定します。これは相対パスでも大丈夫です。
URL=＜移動先の URL＞"

以上でリダイレクトが作れました。非常に簡単でしたね。
この方法はHTMLだけで使用できるのでサーバー環境を意識しない作りができるので、どの方法よりも簡単に作ることが出来るかと思います。

HTMLからjavaへデータ渡し

HTMLでWebページを作るのは簡単に出来るけどDBとの連携など処理側はどのように作るの？

と思っているかたは多いのではないでしょうか。私もそうです。久しぶりに仕事でWeb開発をしているのですが、この処理側との連携部分はかなり忘れていました。しかも調べてもあまりヒットしない。

ということで備忘録がてら書いておきます。
今回の記事で書くことは「HTMLからjavaへデータ渡し」です。

javaとの連携はどうやるの？と考えるにあたって、java側からHTMLへのデータ渡しの情報も必要になってくるかと思いますが次回以降の記事に書きます。（調べておきます）

まずはHTML側でデータ入力する部分を作ります。こんな感じに。
<form action="path/test.class" method="post">

このタグに説明すると、このような感じになります。
form このタグ内のものが送信されます。
action="クラス名"ここにjavaのクラス名を書きます。
method="post か get"　データ送信の方法を書きます。

次はjava側です。
先ほどのタグ内で指定したtest.classは「HttpServlet」クラスの機能を持たせておきます。exendsなどで持てば簡単でしょう。

そしてHttpServletクラスの機能である「doPost」「doGet」のメソッドが呼ばれます。どちらが呼ばれるかはformタグ属性のmethodに指定した値に依ります。

以上、「HTMLからjavaへデータ渡し」でした。

javaアプレットが終了に向かっているらしい

javaアプレットが終了に向かっているらしい。だいぶ前の記事だけどこんなものを見つけました。

「さよならJavaアプレット。JDK 9からWebブラウザプラグイン機能を排除」
http://www.atmarkit.co.jp/ait/articles/1601/28/news095.html

主な理由としては、これまでjavaアプレットでやるようなことがHTML5とjavascriptで出来るようになって、Webブラウザがjavaアプレットpluginの導入を推奨しなくなったからだそうです。

なぜ推奨しなくなったかというと、セキュリティの問題です。HTMLとjavascript、javaアプレットを用いてWeb画面を作るなど複数のアーキテクチャを用いると各アーキテクチャ間の歪みが生まれやすいのです。

最近、Web開発をしていなかったのでこういった情報にはすっかり取り残されてしまっていました。
HTML5の普及と共に色々なアーキテクチャが刷新されていますね。これでだいぶ開発が楽になるのではないでしょうか。実に楽しみな展開ですね。

基本設計の仕方。必要な資料は何か。

まずは「ユースケース図」を作成して、顧客の要望を明確にする。

次に実現するためのシステムフローを「アクティビティ図」で記載する。

そして、次のような細かいレベルに落とし込む。
「コミュニケーション図」
「シーケンス図」
「クラス図」
「ER図」

これで製造の準備は整った。

アクティビティ図
アクティビティ図は、システムなどのフローを記述する表記法です。

コミュニケーション図
コミュニケーション図は、オブジェクト間のメッセージのやり取りを示す。シーケンス図とは、異なりオブジェクトを中心に記述します。

シーケンス図
正しい。シーケンス図は、オブジェクト間のメッセージの流れを時系列に表す図です（下図参照）

ユースケース図
ユースケース図は、システムに要求される機能を、ユーザの視点から示したものです。

クラス図
クラス、属性、クラス間の関係からシステムの構造を記述する静的な構造図。リンク、関連、集約、汎化、特化、実現などの関係を表現することができる。

ER図

データベース化の対象となる実体(エンティティ)と実体の持つ属性(アトリビュート)、および実体間の関連(リレーションシップ)を表現する図。
任意のオブジェクトをその関連をデータモデル化することができるが、関係データベースの設計によく利用される。

ガベージコレクションについて解説

Javaで大規模システムを作ると「ガベージコレクション」が大変なことになるとの話を聞いたので調査してみました。以前、大規模システム作ったときにはそんな変な挙動は起きていなかったように思えるけども。実際にはどうなんだろうか。

ガベージコレクション

ガベージコレクションとは、日本語に直訳するとゴミ収集。プログラムが動的に確保したメモリに対して、使用しなくなったものを解放する機能のことです。次に詳細な解説が記載されている記事をご紹介します。

【Java】GCのお勉強

http://sakuramochi702.hatenablog.com/entry/2013/05/31/163350

図解付きでガベージコレクションの仕組みが書かれています。

【Java】GCとfinalizeメソッドの関係

http://sakuramochi702.hatenablog.com/entry/2013/06/03/125052

こちらも図解付きでガベージコレクションの仕組みが書かれています。finalizeメソッドの動作を含めての解説。

APサーバからの応答がなくなった、なぜ？―GCをチューニングしよう―

http://www.atmarkit.co.jp/ait/articles/0211/30/news002.html

ガベージコレクションで長時間の無応答状態が発生しないようにチューニングをしようと言うお話。

ガベージコレクション

https://ja.wikipedia.org/wiki/%E3%82%AC%E3%83%99%E3%83%BC%E3%82%B8%E3%82%B3%E3%83%AC%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3

wikipedia。全体的に説明されています。

これらの記事を読めばざっくりは理解できることでしょう。忘れたときにすぐ見返せるように記事にしておきました。話は変わるけど、リンクが長くなると記事の枠内からはみ出してしまうのは何なんだろうなぁ、文字や画像などリンク以外は上手く記事の枠内に収まるのに。ま、いいか。

それでは。

業務システムの運用フローの書き方

基本的にはフローチャートで記載する。
でも、私はユースケース図が良いと思う。それで、システム境界線内をもう少し詳細に記載していく。

フローチャートだと人間の作業が記載しずらい。かかる日数は把握しやすい。かかる日数を把握したいのならダイアグラムを記載すればいいかな。どこを短縮すれば全体の作業が短くなるか把握することが出来るし。

それらを踏まえて
→費用対効果を考慮して新旧システムを提案する。

【提案するときに考慮すべき項目】
・作業にかかる時間

・作業にかかる人数
　→人物の単価も考慮するかな

・作業にかかる心理的負荷
　→業務の進捗が可視化できていない
　→単純作業の繰り返し

それで開発費用をペイできるのはどのくらいですよとか言おうかな。そこまでは厚かましいだろうか。

設計書がないときは、推測ばかりになって時間がかかるわりに精度の高いものは出来ない。
なので、わからないことは聞いてしまおう。

現場では思いもよらない方法で使用されていることがある。

Web画面作成Tips　jQuery ajax HTML5

Web画面を作成するにあたってのTipsを紹介していくよ。

いちいち調査していると時間がかかるので、このサイト見れば大体はわかるというような記事にしていきたい。私自身がよく使う技術を載せていくけど、私と同じような仕事をしている方は多いでしょうから、多くの方にとって役立つ情報となることでしょう。

そして、Web業界とかIT業界から残業という概念を無くすのがDreamです。ゆくゆくは定時退社という言葉さえ失くしてしまいたい。いつも定時退社だったら、そもそも使わない言葉ですもんね。さぁ、Tipsを使って、今日も定時時刻に帰宅するのだ。若者よ、若い時間は仕事をするよりも合コンをした方が楽しいぞ。合コンをするんだ。そして私もその合コンに参加させてください！

■パレット作成

色の入力欄を作る
http://www.tagindex.com/html5/form/input_color.html

HTML5 input type のブラウザ対応について検証してみた。
https://liginc.co.jp/web/html-css/html/42756

<input type="color"> …… 色の入力欄を作成する
http://www.htmq.com/html5/input_type_color.shtml

■キーイベント取得

jQueryでkeypressイベントをkeyCode付きで発火させる
http://kanonji.info/blog/2014/01/27/jquery%E3%81%A7keypress%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%82%92keycode%E4%BB%98%E3%81%8D%E3%81%A7%E7%99%BA%E7%81%AB%E3%81%95%E3%81%9B%E3%82%8B/

jQuery キーボードによって要素を操作する方法 – キーの取得とその活用に関して
https://zxcvbnmnbvcxz.com/jquery-keybord/

矢印キーを使って移動処理を行ってみる
http://cly7796.net/wp/javascript/examined-the-jquery-of-key-events/

keydown(fn)
http://semooh.jp/jquery/api/events/keydown/fn/

■jQueryのajaxについてのまとめ
http://beck23.hatenablog.com/entry/2014/10/26/002858

この記事は非常にわかりやすくajaxをまとめているよ。今まで見たどんな本よりもわかりやすいかもしれない。

■Web界隈で最近気になるWebサービスとか集めてみた【2016年10月版】
http://brian.hatenablog.jp/entry/recent-updated-favorite-webservice-october-2016

これも凄く良い記事です。優良サービスがまとまって、思わず使ってみたいと思うようなサービスの目白押しです。自分でもこんなオシャレサービスを作りたい。勉強しよう。

■すごく勉強になる記事
jQueryの基本的なことが記載してあります。
http://www.task-notes.com/entry/20140711/1405089000

■HTMLのレイアウトについて
positionについて書かれています。
http://ja.learnlayout.com/position.html

Flash って今どんな状況なの？すると驚きの結果が。。。（準備中）

Flash の状況って今どうなのって思ったので調査してみました。すると驚きの結果が出てきたので記事にしておきます。

一時代を築いたAdobe の Flash ですが、2015年12月の調査結果によると、ウェブサイトでのFlashの採用率は9.6%にまで落ち込んでいます。
引用：http://uxmilk.jp/5784

モバイル環境において flash は終了しているよって記事です。なお、それは Adobe 自身も認めているとのこと。 Adobe 自身はHTML5を推しているいるようです。
引用：http://www.tpc-cs.com/news/no4138.html

memo :

ファイル入出力は一般的には、java でやるよねやっぱり。

ファイル書き込み
引用：http://www.javadrive.jp/start/stream/index7.html

ファイル読み込み
引用：http://www.javadrive.jp/start/stream/index1.html

書き込みについて、
テキスト形式でなくhtml形式で保存すれはWEBページ作るのも大丈夫だね。
あとは書き込みの保存先をWeb上の場所に指定したら皆共有してみれるようになるね。

読み込みについては、
書き込みの保存場所を決めておいて、見るときにはその保存場所を見にいくように指定しておけばいいね。見に行くのにWebページを準備してあげるとそれっぽいかなぁ、それは顧客次第か。Windowsっぽい方がいいといえばjavaデフォルトの読み込み機能になるし。

SWF
Adobe Flashを始めとしたアドビシステムズの製品により作成可能なマルチメディアのファイル形式「Small Web Format」の略で、「スウィフ (swiff)」と発音する。主にベクタ画像やそのアニメーション、動画、音声、ゲームなどの小さなアプリケーションを含んでいる。歴史的経緯により途中「Shockwave Flash」の略として改称されたことがある。
引用：http://www.adobe.com/devnet/swf/pdf/swf_file_format_spec_v10.pdf

HTML（jQuery）からのデータにフラグがついてたら、タグを付与するか。

応用情報技術者試験を雑多に勉強する。～その１～

応用情報技術者試験の勉強をしています。最初はきれいにまとめようと思ったのだけれども、雑多に記載します。

範囲が広くて問われることも細かいため、全体像なんだかよくわからなくなってきてしまったためです。ですので、まずは全体像をつかむために雑多に全体を学んでみようと思います。

これを何周かまわせば全体像が見えてくることでしょう。それでは雑多に書いていきます。

■シュリンクラップ契約とは
ソフトウェアの購入者がソフトウェアのパッケージを開封した時点で使用許諾契約に同意したとみなす契約方式のこと。

・シュリンクラップ契約（Shrink-wrap contract）Shrinkは縮む、小さくする

■AESとは
暗号化方式のひとつ。極めて信頼性が高い。Advanced Encryption Standard。共通鍵暗号方式

・共通鍵暗号方式とは
暗号化と復号に同一の（共通の）鍵を用いる暗号方式の事。または、暗号化鍵から容易に導出可能な値を復号鍵を用いる暗号方式の事。
http://viral-community.com/blog/common-public-key-cryptosystem-1513/
http://itpro.nikkeibp.co.jp/article/COLUMN/20060601/239679/?rt=nocnt
https://ja.wikipedia.org/wiki/%E5%85%B1%E9%80%9A%E9%8D%B5%E6%9A%97%E5%8F%B7

■モジュールの結合度が最も低いデータの受渡し方法
単一のデータ項目を引数で受け渡す方法が、モジュールの結合度が最も低い。

・大域的データで受け渡してはダメ。データ構造で受け渡してはダメ。

・大域的とは、数学用語。大局的ともいう。局所的に対して，全体にわたる性質をいう。

■射影とは
関係データベースにおいて、表の中から特定の列だけを取り出す操作は射影と言う。

・RDBの表操作
選択(selection) → 行の抽出
射影(projection) → 指定した列を抽出
結合(join) → 複数の表を結合して1つの表にする

■SQLインジェクション攻撃とは
Webアプリケーションに問題があるときに悪意のある問合せや操作を行う命令文を入力して、データベースのデータを不正に取得したり改ざんしたりする攻撃のこと。

■ステアリングコミッティとは
大規模なプロジェクトなどでプロジェクトの関係者や代表で構成された組織。プロジェクトに関する利害調整や意思決定を行うために結成される。

■デファクトスタンダードとは
市場争いによって確立された製品などが標準化機関に定められていないにもかかわらず、事実上の業界標準（グローバルスタンダード）となっていること。

■SMIL
動画や音声などのマルチメディアコンテンツのレイアウトや再生のタイミングをXMLフォーマットで記述するためのW3C勧告はSMIL。

■コミュニケーション
売り手側でのマーケティング要素4Pは、買い手側での要素4Cに対応するという考え方がある。
4Pの一つであるプロモーションに対応する4Cの構成要素は、コミュニケーション。

4Pとは、企業が商品・サービスを消費者に売るために考えるべきこと（マーケティング）を列挙したものである。
・Product(製品)
・Price(価格)
・Promotion(販売促進)
・Place(販売ルート)

4Cとは、4Pをベースにして新たに作られたマーケティング理論。消費者（顧客）側の視点を重視したマーケティングの考え方。
・Customer Value(顧客にとっての価値)
・Cost to the Customer(顧客の負担)
・Convenience(入手の容易性)
・Communication(コミュニケーション)

■ワントゥワンマーケティングとは
顧客一人一人のニーズや嗜好に合わせた個別対応から顧客との深い関係を築くことを目的としたマーケティング手法。

■顔認識技術にについて
デジタルカメラのシャッター機能として，「笑顔Jを認識する技術が用いられているものがある。

■損益分岐点とは
利益が０円となる売上高のこと。

■キャッシュフロー計算書とは、
・財務諸表の一つ。
・会計期間における資金の増減、つまり収入と支出を表示したもの。
・営業活動のキャッシュフロー、投資活動のキャッシュフロー、財務活動のキャッシュフローの３種類がある。

・作成目的は、損益計算書とは別の観点から企業の資金状況を開示、すなわち企業の現金創出能力と支払い能力を査定するのに役立つ情報を提供することと、利益の質を評価するのに役立つ情報を提供することにあるとされる。

■財務諸表とは
企業が利害関係者に対して一定期間の経営成績や財務状態等を明らかにするために作成される書類である。一般的には決算書と呼ばれることが多い。日本における会計基準では、次のものが財務諸表に含まれる。

・貸借対照表（B/S）
・損益計算書（P/L）
・キャッシュ・フロー計算書（C/F）
・株主資本等変動計算書（S/S）

■会計期間とは
損益を計算するためには、期間を定める必要がある。これが会計期間である。通常は1年間をひとつの会計期間とする。日本の場合、公共機関に倣って4月1日から翌年の3月31日までを会計期間とする場合が多い。

以上

歓迎会をしていただいた。

先日、会社で歓迎会をしていただいた。管理職￥8000、管理職未満￥5000だったかな、結構高い金額を支払ってくれていて有難い。私は一銭も支払いを求められなかった。一応全員とは話したはず。今思えば翌日にお礼のメールを出すべきだったなぁと思う。

過ぎてしまったことは仕方がないので、今後はメールでお礼を言えるようにしておこう。なぜ今回メールを送れなかったか考えてみると、システム的にメールが非常に送りづらい環境があるからだと思う。どう送りづらいかというと、アドレス帳を自分で作成しなければいけないからというのが大きな要因になっている。会社としてアドレス帳くらい用意してくれればいいのに。

説明ブログ記事　近日公開予定！「Outlookでアドレス帳をエクスポート、インポート」

歓迎会の感想は一言でいうと楽しかった。様々な経歴を歩まれてきた方がいて面白かった。１/３程度は転職組なのだろうか、前職はほとんど転職してくる人がいなかったので新鮮だった。まったくの未経験の人はいないようだったか、スキルは低い人が多いようだった。これも私がなかなかの待遇で雇われた理由のようだ。

なぜこの会社を選んだのかの問いには困った。私はものつくりをしたくてこの会社を選んだのだが、実際に入ってみるとものつくりをしている人はほぼいない。ものつくりは協力会社に任せているのだ。確かに学ぶ能力の低い人物にものつくりを覚えさせるのは大変だ。それよりも管理の方法を覚えさせる方がだいぶ楽。

だから会社は手っ取り早くもうかる方の、管理を覚えさせているのだろう。そして、実際のものつくりはプログラム経験のある協力会社の人物に任せると。短期的に手堅く稼ぐのならば有効な方法だろう。このような会社にものつくりがしたくて入りましたっていうのはリスクが高いと判断し、曖昧な志望動機を話しておいた。

つまり、この会社の方向性と自分のやりたいことはミスマッチしていることとなる。それを偉い人は理解しているようだった。えらい人にその件について質問されたが「大丈夫ですよ、やりたいことやれてます」と言っておいた。しかし、実際のところはやれていないだろう。なぜ「やれてます」などと言ったのか、自分でも謎だ。わがまま言ってはいけないと思ったのだろうか。ファイアされるのを恐れたのかもしれない。

しかし、このまま管理だけの人間になるのは非常につまらないので機会を見つけてなんとかしようと考えている。社内改革なるものを実践していこう。そして転職、または起業または大学に行くのだ。不便に感じたこと、それに対処する方法をリストアップして提案していこう。このとき、間違っても一人で実践しないことが重要だ。会社に属している意味がなくなるし、孤立してしまう可能性が高いからだ。人を巻き込んで提案していこう。

でも実際、提案てどこにすればいいのだろうか。技術を管理している部署があるのだろうか。とはいっても、この会社にフレームワークはないと聞いたので技術を管理している部署があったとしてもとても機能してるとは思えないのだが。

相手の主張に流されない方法　自分の主張を納得させる方法

働くって大変だ。

課題認識出来てないって自覚できない人が見当違いな指示出したり助言したりするから、それは違うよって説明するのが大変。自分ひとりならば、こんな面倒なことにはならないのに。

さらに、上司がその見当違いな指示や助言を支持するもんだから、さらに説得が難しくなる。結局説得しきれなかったものは実施するしかなくなる。無駄だとわかってる作業をするのは実に億劫で嫌になる。

逆に、「相手に納得してもらう技術」の良い勉強機会になるかもしれない。この技術はどのような世界でも大切な技術だと思う。仕事結果で納得してもらう仕事ももちろんあるだろうが、口頭説明で納得させる今回のような件の方が多いと思う。

よし！勉強するいい機会になると思って楽しもう。失敗してもしょうがないと割り切って。失敗しても大丈夫なのは社会人の良いところだ、個人で失敗したら立ちなおすのにとんでもない労力が必要になる（資金的に）。

さて、相手の強引な手法に流されずに説得力を持って自分の主張に納得してもらうという能力を向上させていこうと思うのだが、どうしたらいいのだろうか。実はこの能力、以前の会社でも必要になっていて散々磨いてきたものである。ブランク期間にすっかり忘れてしまった。

以前の会社ではどのように向上させてきたかというと、すごく説明の上手な先輩がいてその方に教えてもらうことで自分の能力を向上させてきた。今でも本当に感謝している。ということで、先輩に教えてもらったことを思い出しながら納得させる技術について整理していきたいと思う。

思い出したことからリストアップしていこう。

納得させる技術

・　出来ないと嘆くのではなく、どうしたら出来るのかを考えよう。

・　ゆっくり話そう。特に人前では早口になりやすいので、さらにゆっくり話す気持ちで。

・　相手の気持ちになって考えよう。

・　事実と自分の考察をきちんと分けて説明しよう。

・　考察には根拠を併せて説明しよう。

・　まず結論を先に言おう。

とりあえず思い出したのはこのくらいかな。

今思えば、自分から発信することばかりなことに気付く。前職では変な指示を出す人は少なかったからなぁ、相手の主張に流されない技術というのはあまり必要でなかったのかもしれない。今回はこの「相手の主張に流されない技術」が非常に重要だ。これも今思いつく限りリストアップしておこう。

相手の主張に流されない技術

・　主張の根拠は何なのか？の姿勢を持つ。

・　主張は事実なのか、意見なのかを意識する。

・　怖がらずに実際に聞いてみる。

こんなものかな。今のスキルが低いのが目に見える感じになりました。これから、伸ばせて行けたらいいかと思います。伸ばすにはどうしたら良いかなぁ、本を読んだり場数を踏んだり色々と方法はありそうですが、一個一個の事象に対して分析していく手法をとっていこうと思います。そうするとブログにも書けるので。

あぁ、それにしても眠くなってきた。自分が何を書いているのか意識がところどころ飛ぶ。

これではまずいので今日は寝ときます。それでは。

bloggerのカスタマイズ方法　すごい方の記事まとめ

先日、bloggerのカスタマイズについてまとまっている記事がないから書きますねと言いました。

bloggerテンプレート『Vaster2』の導入方法

https://somegoro.blogspot.jp/2016/08/bloggervaster2.html

しかし、記事がありました。しかも凄く綺麗にまとめられています。それが、こちらです。

bloggerのテンプレートをカスタマイズする方法

http://toumaswitch.com/blogger-temple-download/

さすがテンプレート自作するくらいあってbloggerに精通している様子が伺えます。見やすいですね。このお方はbloggerのカスタマイズ方法についても記事にしてくれているので、これらの記事を見て私は勉強していこうと思います。

上記の他のカスタマイズ記事は次の３つのようです。

bloggerのカスタマイズに必須な条件分岐タグifのまとめ

http://toumaswitch.com/blogger-ifcond/

[完全版]bloggerのsection、widget、includableについてのまとめ

http://toumaswitch.com/includable-section/

bloggerの新しい独自タグが発表されたので紹介する

http://toumaswitch.com/blogger-add-expressions/

bloggerは独自のタグを採用しているようですね。それがとっつきにくくて利用者の伸びが今ひとつなのかもしれません。面白いおもちゃが増えたという気分で期限を決めずに気が向いたときに学んでいこうと思います。

応用情報技術者試験の対策　午前01 テクノロジ系

何から手をつけるべきかわからないので、とりあえず最初から手をつけていく。勉強していくうちに自分と相性の良い問題を見ることが出来ることでしょう。

まずは１週目なのでおおざっぱに勉強していきます。今回の勉強範囲は次のとおりです。

[午前試験]
テクノロジ系
1. 基礎理論
2. コンピュータシステム
3. 技術要素
4. 開発技術

それでは始めていきます。

1. 基礎理論

進数によるデータ表現

2進数、8進数、16進数いついて
0　←　1ビット
00000000　←　8ビット　＝　1バイト

基数変換

2進数から10進数などへ変換することを基数変換という。
なんでもかんでも10進数にしてから基数変換するのではなく、経由に適した基数がわかるようになると早く解ける。

補数による負数の表現

1の補数とは、元の数に足し合わせるとすべてのビットが1になる数
例：元の数 10001、1の補数 01110

2の補数とは、元の数に足し合わせると桁あふれする（最小の）数
例：元の数 10001、2の補数 01111

2. コンピュータシステム

3. 技術要素

4. 開発技術

bloggerテンプレート『Vaster2』の導入方法

bloggerテンプレート『Vaster2』を導入してみました。

今まではblogger提供のテンプレート使用していたのですけれども、どうも味気ないと感じるようになってきたので気分転換に変更してみました。やはり人が作成したものなので気になるところは多少ありますが自分で作成する手間を考えると十分満足できるものかと思います。

bloggerでデザイン変更するときに、参考になるサイトが少なかったのでまとめておこうと思います。bloggerはデフォルト広告も無く、表示速度も非常に速くて気に入っているので、使用者が増えてより便利なサービスになってくれると嬉しいです。

まずは次のサイトでテンプレートを入手します。※このお方がテンプレートを作成してくれた方です
。

ダウンロード

Vaster2|レスポンシブ対応済みのblogger日本語テンプレート
http://toumaswitch.com/vaster2/

バックアップ取得

次にダウンロードしたテンプレートを自分のブログに適用します。bloggerの設定画面からテンプレートを選択してください。

すると、上記画面が表示されますので、画面右上にある「バックアップ/保存」ボタンをクリックしてください。すると次の画面がポップアップ表示されます。

この画面で、まずは現在の画面のバックアップを取得しておきましょう。「テンプレートをすべてダウンロード」ボタンをクリックしてください。するとバックアップとしてxmlデータを取得することが出来ます。

テンプレート適用

さてそれではお待ちかねのVaster2デザイン適用です。上記ポップアップ画面の「ファイルを選択」ボタンをクリックしてVaster2のデザインテンプレートを選択しましょう。先ほどダウンロードした際にデフォルト名称で保存した場合『Vaster2-TD.xml』として保存されているはずです。

選択してしばらくすると、上記ポップアップ画面の「アップグレード」ボタンがクリックできるようになります。そしたらクリックです。これでデザインテンプレートの適用が出来ました。ブログホーム画面に行って確認してみてください。

ここでひとつ注意点ですが、このままでは上手く表示されていない可能性があります。私自身もレイアウトが崩れていました。これは、あらかじめ自分がカスタマイズした部品や他のテンプレートによる部品が残っているためです。好みに従って部品の削除なりをしていきましょう。

私はとりあえずVaster2のテンプレートどおりにしたかったので、作者の作成したＤＥＭＯサイトを確認しながら部品の削除をしました。デフォルトのテーマカラーは水色ですが、これは自分でプログラム変更することなく変更することが出来ます。テーマカラー選択ができるテンプレートなのです。私はとりあえずは水色でやっていきます。少しピンク系の色があると賑やかで良いなぁなんて思いますので、そのうち足していくかもしれません。

それでは、bloggerテンプレート『Vaster2』の導入方法でした。

面白そうなことしている企業を見つけた。　NICT　宇宙天気予報

おもしろそうな企業を見つけました。この企業では、宇宙天気予報などを行っているようです。

NICT　（https://www.nict.go.jp/）

正式名称は「国立研究開発法人情報通信研究機構」と言うそうです。様々な研究や業務を行っているようですが、私の興味のあるのは次の分野です。

宇宙天気予報磁気嵐による被害の予防を目的として、磁気圏の状態を観測・予報する宇宙天気予報を行っている。また、電離圏世界資料センターとして、世界各地で行われている電離層観測や太陽活動観測などで得られたデータを収集し公開している。wikipediaより（https://ja.wikipedia.org/wiki/%E6%83%85%E5%A0%B1%E9%80%9A%E4%BF%A1%E7%A0%94%E7%A9%B6%E6%A9%9F%E6%A7%8B）

実はこの企業は大学のころに少しだけお世話になっているのです。当時の私は何もわかっていなかったので気にも留めていませんでした。社会に出て色々な仕事を目にするようになって、自分の勉強してきたことは少々特殊で、その特殊な分野に興味があることを気づきました。

その興味のある分野と、この企業の方向性は非常にマッチしている数少ない企業といえるでしょう。ここで私は宇宙天気予報をしたいです。（こちら現在の宇宙天気だそうです⇒http://swc.nict.go.jp/contents/index.php）　そして、その宇宙天気予報がみんなの生活をより豊かで安全なものに出来たら幸せだと思います。研究利用で現在活用しているのは、ゲリラ豪雨の予測を行っているようです（https://www.nict.go.jp/press/2016/08/09-1.html）　気象関係に何かしらの携わりを持っている方ならよくご存じかと思いますが、ゲリラ豪雨は意外にもまだ予測できていないのです。

この転職活動にあたって懸念事項はいくつもあります。まずは大学院を出ていないと研究的側面の強い会社には入が難しいのではないか。官の企業ならなおのこと。あとは論文を書いたことがないのも少々気になります。

まずは、この分野で論文を記載してみることにしましょう。大学院については入らなければならないかも調べておく必要がありますが、今から入るのは骨が折れるしお金を稼げないので厳しい。学校に入り直すくらいなら医学部に行きたいという思いもあります。もし仮に大学院に入る必要があるなら、この企業への入社ではなく関連企業に入社ということでもいいかもしれません。民間企業ならば大学院卒業縛りは無いでしょう。

さて、論文を書くにあたって、知識がなければなりません。大学時代に勉強したことを遡りながら、今の状況を把握していく必要があります。ちょうど気象予報士の資格も取得しようとしていたのでちょうど良いでしょう。

大学時代の勉強は当時よく読んでいた本を再購入して読んでみることにします。絶版になってないと良いですが。業界の今の状況については、ニュートンでも読んで徐々に把握していきます。取り急ぎは、基礎知識として気象予報士の試験勉強をしていきます。１月に試験なのであと半年ですね、計画は情報処理などの他の試験と折り合いを見て計画を立てていこうかと思っています。

それでは。

最悪の失敗を経験した。入社４年目の日記より

今回の記事も、昔の日記を元に記載します。これは新入社員として入社して４年目のころに書いたものです。大学卒業してすぐ入社したので２６歳のころですかね。

～

最悪の失敗をしました。わけのわからん女と関係を持ってしまったのです。もう最悪です。ただただ、気持ちが悪い。病気が怖い。（病気にならないよう防御的なものはしています）おおまかな教訓は、次の２つ。これは今後どんな良い女があらわれても、死守する。

　１．誘われたからといってすぐに関係を持たないこと。
　　（相手の人間性をよく確かめてから）

　２．無理しないでありのままの自分でいること。
　　（過度なリップサービスしない、自分凄い人アピールしない、卑下しない）

忘れないように感想と実際に起きたエピソードを書いておきたい。二度と同じ過ちはしない。

関係を持った次の日に電話したら、相手の態度が豹変。私が何かしらの地雷を踏んでしまったのでしょう。彼女の考えにまったく同意できなかったため、真っ向から反対したのも悪かったのかもしれません。ビジネスでもそうだけど、まずは肯定から入らないとね。

それにしても、人生観がまったく違ったわ。自分の会社や友達の会社はどこだのと社会的地位をひけらかしたり、自分はこんなに頑張ってるだの友達はこんなに凄い仕事で頑張ってるだの。最終的には死ぬんだから、地位も名誉もほどほどに道中楽しもうぜって考えにならないのかな。まったく死を意識できてない。何がしたいの？って感じだわ。もしかして認められたいのか。。。？

あとは大手大正義みたいなね。口ではやりたいことやってれば、大手じゃなくてもいいとか言っていた。だけど後輩が大手だとか、自分が大手に行って道を示したとか。で、大手行けなかった先輩を罵倒したり。とほほだよ。

この日記を書いたことでストレスをだいぶ発散できたので今日は眠る。続きは明日にでも。あの女！

～

要は女の子に振られたって話ですね。最後に書き捨ててますけど続きはありませんでした。情緒的に生きてましたね。ストレスを発散できたようで何よりですが。

ちなみに、この女の子の仕事がお薬関係のお仕事だったんですね。それでお薬業界の現状などを少し聞いて、興味をもったことも今後の人生選択にも影響を与えました。上記の日記にもありますように、当時の私は自分を大きく見せようとしたり相手の機嫌を取るために卑下したりしていました。若いころにはありがちなことでしょうが、相手との距離感がうまく取れていなかったころのように思います。

現在はだいぶ自然体でいることが出来ていると思います。自然体でゆるく楽しく生きていきたいなというのが今の思いです。

前職で考えてたこと（入社３年目～４年目）

昔の日記を漁っていたらおもしろいことが書いてあったので私の備忘録がてら公開しておきます。この日記は新入社員として入社して３年目のころに書いたものです。

～

仕事、相変わらずつらいです。何が辛いのか、上司に言われたこと、自分が言ったことが出来なくて辛いです。

上司も怖いけど、意味なく怒ることはしない。
言っていることも、まあまっとうかと思えるし。

たまに決めつけて話してるけど、違うと言うときちんと聞いてくれはする。
終わったことをぐちぐち言わないのも良いな。

なんか、結構良いな。
書いてみて客観的になれたけど、結構良い上司なのかもしれない。

ただ、レベルが合わないだけで。
おれがレベル低すぎて、それを見込んで仕事してくれる人でないと厳しいということか。

そんな神さまみたいな上司いるんだろうか。
わからないけど、自分に出来ることだけはしっかりとやろう。

今単体試験項目作成中だから、もう少しだ。

～

このころの上司は、技術的な知識は非常に高いのですが伝えるのがおそろしく下手でした。ですので、私には全く伝わらずに苦労した覚えがあります。それに加えて当時の私は素直にわからないと言うことが出来ませんでした。何をすれば良いのか見えてないのに、自分には出来るはずだと思い込んでいたのですね、それでどんどん苦しい状況になっていったのを覚えています。

その状況さえも良いものとして捉えようと努力しているのは上記の記事でわかりますが、アプローチの方法がよくないですね。状況を良いものとして捉えようとするのではなく、状況はそのまま捉えてどうしたら改善できるのかを考えると上手く乗り越えることが出来たのではないかと思います。

結局、このプロジェクトは完遂することが出来ませんでした。周りの人が見かねてはずしてくれました。はずしてくれて本当に感謝したのと無力感を味わったことを覚えています。ちょうどこのころ、システムエンジニアを辞めようと考え始めました。

次にこれは入社４年目に書いた日記です。ちょうど上記の仕事が終了して、違う仕事に配属されて右も左もわからずガムシャラに働いていたころでしょうか。

～

SEとして３年半働いてきたけれど、向いてないわ。きっと。
楽しくないもの。設計にしろ、製造にしろ。

その仕事終わったら達成感はあるけど、
仕事してる最中には楽しくない。

何してるときが楽しいのか、考えてみた。
それを仕事にしようと思う。

夢をかなえるゾウでも言ってたし、
人生一回きりだから、やりたいことやってから死にたいと思う。

■楽しいと感じること
・頼られると楽しい。
・人の手助けが出来たときが楽しい。
・自立出来てるときが楽しい。

逆に嫌な事は何だろうか。

■嫌なこと
・矛盾したこと。
・正直者が馬鹿を見るようなこと。
・媚びること。

ということは、医者か弁護士か！

もう少し！

～

最後のもう少し！は仕事中に日記を書いていたのでしょうか、それともプロジェクト終了まであともう少しだったのでしょうか。詳しくは覚えていませんが、上記の記事からわかるように私自身も伝える能力が低いことがわかります。

このころの仕事ではお客さんに現在の進捗状況とその計画を毎日報告する仕事をしていました。状況報告するために、情報をかき集める毎日だったことを覚えています。それまでお客さんの前に出て仕事をすることはなかったのでギャップ感を感じると共に伝える能力の欠落を実感していました。

当時の上司は、別プロジェクトで同じような業務内容のことをずっとしてきた人でやはりすごかったです。伝える能力がすばらしく高く、勉強させていただきました。しかし、私はもうそのころには気持がシステムエンジニアにはなく、別の業種に向いていたようですね。

応用情報技術者試験の対策　初めに（形式、出題数、範囲、試験時間）

2016年10月16日　応用情報技術者試験　に向けて勉強をしていくことを前回の記事（https://somegoro.blogspot.jp/2016/08/blog-post_30.html）で書きました。

一人で勉強しても味気ないので、ブログで説明しながら自分も学んでいくスタイルにします。今回はその第一回目です。

初めに、試験時間や問題数などの形式を確認してみましょう。ＩＰＡのサイトから引用して記載します。

題形式・出題数（解答数）

	午前	午後
試験時間	9:30～12:00(150分)	13:00～15:30(150分)
出題形式	多肢選択式（四肢択一）	記述式
出題数解答数	出題数：80問解答数：80問	出題数：11問解答数：5問^(*)
(*)平成27年度秋期試験以降

ＩＰＡ：（https://www.jitec.ipa.go.jp/1_11seido/ap.html）

基本情報技術者試験もそうでしたが、かなりの長丁場の戦いですね。休憩挟んで5時間の試験になります。これでは問題に説くことに一生懸命になっていたら集中力が持ちません。ですので、条件反射で回答できる問題をある程度多くしておかねばならないということです。

すなわち、問題を反復して身体に染み込ませることが大切ですね。それでは問題はそのようなものが出てくるのかを見てみましょう。

応用情報技術者試験　出題範囲および　合格点

[午前試験　合格点　６割]
テクノロジ系
1. 基礎理論
2. コンピュータシステム
3. 技術要素
4. 開発技術

マネジメント系
5. プロジェクトマネジメント
6. サービスマネジメント

ストラテジ系
7. システム戦略
8. 経営戦略
9. 企業と法務

[午後試験　合格点　６割]
1. 経営戦略に関すること
2. 情報戦略に関すること
3. 戦略立案・コンサルティングの技法に関すること
4. システムアーキテクチャに関すること
5. サービスマネジメントに関すること
6. プロジェクトマネジメントに関すること
7. ネットワークに関すること
8. データベースに関すること
9. 組込みシステム開発に関すること
10.情報システム開発に関すること
11.プログラミングに関すること
12.情報セキュリティに関すること
13.システム監査に関すること

出題範囲としては基本情報技術者試験と変わりないですね。勉強しやすそうですね。ちなみに、午前試験で６割りに満たないとその時点で不合格確定で、午後試験の採点はされません。これは基本情報技術者試験も同じですね。ですので、まずは午前をパスしないことには何も始まりません。と、同時に午前をクリアできる知識が付いてくれば午後もすんなり通ることでしょう。詳しくはこれから、上記の項目を説明する形式で勉強していきます。

以上。次回へつづく。

これからの受験日程。まず応用情報技術者試験・ＴＯＥＩＣ

さて、前回の記事（https://somegoro.blogspot.jp/2016/08/blog-post_13.html）では試験の受験計画を記載しました。今視野にある試験はこのとおりです。

・応用情報技術者試験
・ＴＯＥＩＣ
・ＰＭＰ
・気象予報士
・情報セキュリティスペシャリスト
・ネットワークスペシャリスト

次回の転職は半年後、４月入社したいと記載しましたが、上記すべての試験を取得するのは半年では厳しいです。というか情報処理試験は半年に一回なので、ストレートで合格しても１年半かかります。まずは応用取得して、その後の情勢を見ながら有用な資格を取得していくのが良いでしょう。

ということは直近で勉強すべきは情報処理と英語。他のＰＭＰ、気象予報士は試験の日程を確認しなければいけません。ＰＭＰに関してはどんな資格なのかも詳しくしりません。ということで今回の記事では、まず上記試験の日程を調査して記載しておきます。

・応用情報技術者試験（2016年10月16日）
・ＴＯＥＩＣ　（2016年10月23日、2016年11月20日）
・ＰＭＰ　（随時　要受験資格）
・気象予報士　（2017年1月29日）
・情報セキュリティスペシャリスト　（2017年4月）
・ネットワークスペシャリスト　（2017年10月）

調査しました。いい感じにばらけてますね。緊張感が続いていい勉強ができそうです。これらの試験のなかでも、気象予報士の試験は以前受験していて強い思い入れがあります。前職で気象予報士の先生に個人教育をしていただいた結果、合格まであと一歩のところまでいったのです。その先生の方のことは大変穏やかな方で品格があり人間的に大好きで尊敬していて、先日の定年退職祝いにも参加させていただきました。

その定年退職祝いの場で話にあがったのが、気象予報士が会社からいなくなってしまったということ。先生が会社で唯一の気象予報士で後継者を教育していたが、とうとう後継者を育てられずに退職になってしまったとのこと。それを聞いたときにバツの悪い気持ちになりました。

その場に来ていた人に聞きましたが、今も気象予報士教育をしているのだが、気象を好きな人はおらず試験に挑戦はしているが取得までにはかなりの時間がかかるだろうとのこと。おそらく今回の試験でも取得できていないでしょう。酔った勢いで次回は絶対合格しますと言っていましたが、勢いで合格できるほど甘いものではありません。能力的に勢いで合格できるほどの記憶力の持ち主ならば前回試験で合格していたはず。その退職祝いが今年の２月のことだったので、今回の試験勉強時間はおよそ半年間でしょうか。

次回の気象予報士試験（2017年1月）で私が合格したら前職に戻って教育を担当しても良いかななんて考えもあります。しかし、どうなんでしょう。自分はそれで良いのだろうか、恩返しとしてある程度は満足するかもしれませんが本当に望んだことなのでしょうか。医者になりたかったのでは？他の医者とは違うアプローチで精神疾患を治療するのではなかったのか。

ううむ。揺らぎます。

考えながら勉強しよう。勉強しないことには全てが絵空事になってしまう。

夏季休暇に入りました。就職活動振り返りと、これからの試験計画

夏季休暇に入った。夏季休暇と言っても一週間ほどの休みで、どこかに出かける予定も今のところ無い。というかお金が無い。

お金がないとこれほどまでに行動が制限されるのかということを今回再確認した。本当に早く就職できて良かった。実際には二月ころから就職活動を始めていたのだが、うまくいかず少々休憩して７月に再開、見事二週間ほどで内定が出た。

そして内定をいただいた会社に８月から勤務している。もう一社内定をくれそうな企業があったのだが、最終面接開始前に他社内定を受諾し最終面接終了直後に選考辞退をした。

主な理由は日程的なものだ。非常に良い企業だと感じていたし、オフィスも綺麗で立地も良い。今でも働きたいと思える企業だ。面接中にも明日にでも働けるように準備すると言ってくれていたが、その日の18時までには他社内定受諾しなければならなかったためだ。最終面接開始が17時。

致し方なかった。もし、その企業が事前に状況を詳しく聞いてきたのならば私は素直にその状況を答えただろう。しかし、転職エージェントに問い合わせるとそのような状況を素直に答えるのは失礼にあたるとのことだった。

ここらへんが本当によくわからない暗黙の了解というものなのだろうか。私は転職エージェントの言う通り、聞かれていないことは答えないことにして入らないことが決まっている最終面接に足を運んだ。

次回の転職活動では転職エージェントは使わないだろう。自分の思いと違う活動になることがわかった。それが良いように作用したことも十分にあったが、今回のように自分の思いとは離れることもあった。非常識だとしても自分の思うように就職活動をしたほうが自分と合った会社に入れるのではないかとも感じだ。

暗黙の了解を守って意味のない活動をするよりも、常識とは違くても意味のある活動をしていきたい。ただし、暗黙の了解とは互いの利害を最も効率よく高めるためのものとして出来たものだろうからないがしろにするつもりはない。できるかぎり従っていく。

今回で転職についての知識はだいぶ蓄えることが出来たので、次回は自分だけで大丈夫だ。案件紹介は転職サイトを利用するかもしれないが。おそらく半年後には転職活動を再開しているのではないだろうか。４月入社がやはり望ましいところだ。

少々転職が早い気もするが、その辺は転職市場との兼ね合いをゆくゆく考えていくとする。まずは自分の能力と実績作っていくことだ。自分の能力を示すものとして資格を取得しようと思う。具体的には次の資格に挑戦する。

■資格
・応用情報技術者試験
・ＴＯＥＩＣ
・ＰＭＰ
・気象予報士
・情報セキュリティスペシャリスト
・ネットワークスペシャリスト

資格によらない能力としては次のものを鍛えていく。
■能力
・こびないこと　（こびた企業はすべからく落ちた）
・嘘つかないこと　（嘘ついた会社はすべからく落ちた）
・遅刻しないこと　（最終面接遅刻して落ちた　ていうか道に迷った）
・余裕を持つこと　（金の余裕、時間の余裕、立場の余裕が人間としての余裕を作り出す）
・自然にお話しできること　（二月のころはまともに話ができなかった　会話体力とでもいうべきか）

こんなものだろうか。

長くなってきたので今回はこのあたりでドロンします。

見積手法の種類

見積もりがうまくいけば、９割がたプロジェクトは成功したようなものだ。

そんな言葉を聞いたことがある。（私の心の叫びか？）見積もりに参加する人はプロジェクト開始当初から参加しているごくわずかな人だけだ。

このほんのわずかな人数での作業が、これから参加する多くのエンジニアの命運を左右する。責任重大だ。だからこそ精度の高い見積もりが求められる。

さて、そんな見積もりだが、方法論は確立しているのだろうか。次の記事ではその方法論を記載している。ずいぶんと色々な手法（方法論）がある。一長一短があるのだろう、システムはどれも似て非なるものなので、色々な種類の見積もり手法があるのは当然とも思える。

しかし困ったもので、経験不足の私にとって、どの手法を用いていいのかわからない。これはだれかに相談だわ。この時点で私の存在する意味は皆無になるのだが、今後のために技術蓄積および経験蓄積として勘弁してもらうことにしよう。

Think IT 　第４回：コスト管理の構造と見積手法
https://thinkit.co.jp/cert/project/1/4/2.htm

見積もりがブレるメカニズム
http://itpro.nikkeibp.co.jp/article/COLUMN/20080901/313837/?rt=nocnt

工程別基準工数比率
http://www.newspt.co.jp/contents/manual/yes/2_mi/3a02.html

ソフトウェア開発見積りの基本的な考え方
https://www.ipa.go.jp/files/000005398.pdf

WEBシステム開発の見積の出し方について考えてみました

http://blog.verygoodtown.com/2013/03/web-system-estimate/

機能設計書を自動生成

NEC、システム構築基盤ソフトにハイブリッド開発手法--機能設計書も自動生成

引用：　http://japan.zdnet.com/article/35054281/

やっぱりＮＥＣはすごいなぁ。勉強になる。富士通も同じようなサービスを展開をしているので、そちらもチェックしてみよう。（富士通：http://japan.zdnet.com/article/35020479/?tag=mcol;relArticles）

最近では設計書を作成しないプロジェクトも多いと聞きます。ですので、こうしたリバースエンジニアリングによるソースコードから設計書を作成したり、要求分析から設計書を自動で生成するサービスは売れるのではないかと予想できますね。

それにしても、ＮＥＣの作成するドキュメントは相変わらず「ダサい＆分かりやすい」だなぁ。好きだなぁ。こういう玄人向けのデザイン。

機能設計書の書き方

機能設計書を私は書いたことがない。

詳細設計書は書いたことあったかな？覚えはない。

いつもは基本設計書からプログラミングしていた。それは基本設計書作成をする人とプログラミングをする人が密接に連携できる環境にあったからだろう。基本設計書を作成した人がそのままプログラミングなんてことも多かった。

なにより、プログラミングする人はプログラムだけでなく、プログラムを組むため必要となる情報は自分で整理して資料を残していた。

しかし、世間ではプログラマーはプログラミングしかしないようだ。しかも誰がプログラムを組んでも同じようになるように設計書を作れということがあるらしい。そんなことするなら、設計書じゃなくてプログラム作ればいいのに。と思ってしまう。

私が働いていた環境では研究という側面もある開発だったからかもしれない。これらのギャップ感は否めないが、柔軟に対応していくより他はない。あまり根詰めずに、楽しんで仕事していこう。わからない部分はできないのだから、聞くまたは根拠に基づく予測で仕事をしていく。

とりあえず先立つものがないことには仕方がないので、機能設計書の書き方をわかりやすく記載してある資料を提示しておく。

サンプル例に見る機能仕様書の基本的な書き方＆読みやすくする7つのテクニック
http://www.atmarkit.co.jp/ait/articles/1502/06/news013.html

デルファイのお勉強０４

前回『https://somegoro.blogspot.jp/2016/08/blog-post_7.html』に引き続き、デルファイのお勉強をしていきます。今回も参考資料は次のサイトを使用させていただきます。

クジラ式 Delphi 資料
http://oto.chu.jp/a.oto.chu.jp/kujira/text/delphi/index.htm

それでは始めましょう。

■ループ処理

・while文でループさせる

while 条件式 do
　　処理;

これは一般的な while の処理って感じですね。他の言語と変わらないでしょう。
条件式が true ならば処理を実行します。false ならば処理を実行せずに終了です。

・for文でループさせる

for 変数 := 初期値 to 終了値 do
処理 ;

これは少々特殊な感じがしますね。初期値を変数に代入して、処理を実行します。
そして、変数が終了値になるまでループを続けます。
終了値になったら、処理を実行して終了します。最後に処理を do することが肝ですね。

・repeat文でループさせる。

repeat
　　処理１ ;
　　処理２ ;
until 条件式;

これは do while みたいな感じですね。まず最初に処理を実行する、その後に条件式によりループするかどうか判定する。

・Breakで、ループ処理から抜ける
・Continueで、ループ処理の頭からやりなおす。
・Exitで、プログラム自体を終了させる。

これらは一般的ですね。どれもループから抜け出す方法です。

■定数

定数は値の変わらない変数のことです。Java で言うところの final 型の変数、C や C++ では定数がありますね。書き方は C や C++ とほとんど同じです。

const
　TEISU = 10;

これで TEISU という名前の定数が出来ました。10 という値は変えることが出来ません。デルファイの変数宣言の仕方とは少々違うんですね。デルファイでいうと条件式に似てますね。

■関数
デルファイにも関数があるようです。２つのタイプの関数があってそれぞれ機能が異なります。

　・procedure　←値を返さない
　・function　←値を返す

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

・procedure

書き方はこのとおりです。これで Kansu_kun01 という名前の関数ができました。戻り値は無く、処理をするだけの関数です。

procedure Kansu_kun01 ( HIKISU_MOJIRETU : String );
　begin
　処理;
　end;

引数はセミコロンでつなぐことで複数指定することが出来ます。さらに呼び出すときには次のようにします。

begin
Kansu_kun01( 'Hello_World' );
Readln;
end.

このとき、呼び出す前に関数を宣言および作成しておかないと、エラーになってしまうようです。

・function

書き方はこのとおりです。これで Kansu_kun01 という名前の関数ができました。戻り値がありますので、処理をして値を返します。おそらく、Result に値を設定することで戻り値として吐き出せるのでしょう。

function Kansu_kun02 ( a : Integer; b : Integer ) : Integer;
　begin
　　Result := a + b;
　end;

var
　test_kekka : Integer;
begin
　test_kekka := Kansu_kun02 ( 1, 2 );
　Writeln ( test_kekkakekka );
　Readln;
end.

こちらも、メイン処理にて関数を呼び出す前に、関数を宣言および作成しておかないと、エラーになってしまうようです。

・メイン関数

メイン関数は関数宣言せずにいきなり begin で始まり、end. で終了します。こんな感じです。

begin
　処理；
end.

上記でも度々登場していますね。

この辺で1000文字を超えてきたので一旦区切ることにします。

それではまた。

デルファイのお勉強０３

前回『https://somegoro.blogspot.jp/2016/08/blog-post_6.html』に引き続き、デルファイのお勉強をしていきます。今回も参考資料は次のサイトを使用させていただきます。

クジラ式 Delphi 資料
http://oto.chu.jp/a.oto.chu.jp/kujira/text/delphi/index.htm

それでは始めましょう。

■型変換について
・IntToStr() は、Integer 型から、String 型に変換する処理。中身にInteger 型を入れれば、String 型で吐き出してくれる。

・FloatToStr()は、 Double型から、String型へ変換する処理。上記と同じ感じ。

・ Delphiには親切なヘルプが付いているらしい。どうやってみるのだろうか。

・Trunc( ) は、少数点以下を切り捨てる処理。

・Round( )は、小数点以下を四捨五入する処理。
・Readln()は、ユーザーから入力を得る処理。中身の変数で入力を受け付ける。

・StrToIntDef( , )は文字列から整数に変換する処理。
二つの引数を指定する。最初に変換対象、次に変換できなかった時に吐き出す値。
すると、今まで変換できなくいとエラーとなって終了になってしまっていたものが、終了にならずに第二引数で指定したものが吐き出される。

■条件分岐について
・if 条件式 then
　　処理０１；
　else
　　処理０２；

条件分岐処理は上記のように記載する。

・条件式は次のとおり
a = b
a > b
a < b
a >= b
a <= b
a <> b

・併せて書くとこんな感じになる

if a = b then
　　処理；

aとbが同値ならば配下処理を行う。
このとき、かっこがないのでわかりづらいけど都合よく次の処理を実行してくれる。
同値でないなら次の処理を飛ばして、その次の処理に行く。
else　もふつうに使用できる。これもかっこは必要なし。
　　
わかりやすく書くとこんな感じになる。（もちろんこれでも正常に機能する）
　　
if ( a = b ) then
　　処理；

・and で、複数の条件式で判定する

このように書くと複数の条件で条件分岐処理を書くことができる。and は、「かつ」という意味です。一般的な言語と変わらないですね。

if ( a = b ) and ( a = c ) then
　　処理；

・or で、複数の条件式で判定する

このように書くと複数の条件で条件分岐処理を書くことができる。or は、「または」という意味です。一般的な言語と変わらないですね。

if ( a = b ) or ( a = c ) then
　　処理；

■ラベル
関数の名前みたいな感じでしょうか。ラベル名の下に処理を書きます。これもカッコなどでは囲わないので改行でまとまりの終了が判断されます。
ラベル名０１
　処理０１；
　処理０２；

ラベル名０２
　処理０１；
　処理０２；

こんな感じで書かれます。私を含め、今時の言語になれた人には違和感を感じますね。

・begin の前に宣言します。

・label NANTOKA_LABEL;
このように終了はセミコロン；です。

・label NANTOKA01_LABEL, NANTOKA02_LABEL;
２つ以上宣言したい場合はカンマ（、）で区切ってこのように宣言することができます。

・goto ラベル名；
これでラベル名の処理が実行されます。

さて、1000文字を超えたので、この辺で区切ろうと思います。

それでは。

登録: 投稿 (Atom)