Goro'z Journal: 11月 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の普及と共に色々なアーキテクチャが刷新されていますね。これでだいぶ開発が楽になるのではないでしょうか。実に楽しみな展開ですね。

登録: 投稿 (Atom)

Goro'z Journal