CSSのpxとemの違い

  • px(ピクセル)
    ピクセル単位の指定
    環境によって変化しない絶対単位
  • em(エム)
    文字の高さを基準にした単位で1emは1文字分
    MacintoshやWindowsなど使用している環境により大きさが変化する相対単位

font-size:16px;
font-size:16em;
font-size:16pt;
font-size: 120%;
pxは画面表示の1点分
emは1文字
ptは1/72インチ
exは小文字xが基準

pxでfont-sizeを指定するとIEの場合は文字の大きさを変えられなくなる問題がある。
font-sizeをemで指定する場合でもwidthの設定はpxで指定することが多い。

JavaのEUCとUnicodeとUTF-8の変換について

・JavaのString型やchar型の文字コードは16ビットUnicode
・EUC-JPやUTF-8はbyte配列として扱う必要がある!!

つまりEUC-JPからUTF-8に直接変換はできないので
一旦String(Unicode)を経由する
EUC-JPのbyte配列 → String(Unicode) → UTF-8のbyte配列

例)
byte[] eucCode; // EUC-JP
String strChar; // UNICODE
byte[] utf8Code; // UTF8
// EUC→Unicodeデータ
strChar = new String(eucCode, “EUC-JP”);
// Unicode→UTF-8データ
utf8Code = strChar.getBytes(“UTF-8”);

jQueryMobileの概要と注意点

jQueryMobileとは
モバイルWEBアプリやスマートフォンサイト用のフレームワーク

ヘッダー部、コンテンツ部、フッター部で構成される
<div data-role=”page”>
<div data-role=”header” data-theme=”a”></div>
<div data-role=”content”></div>
<div data-role=”footer”></div>
</div>

複数ページも可能
<div data-role=”page1″>
<div data-role=”header” data-theme=”a”></div>
<div data-role=”content”></div>
<div data-role=”footer”></div>
</div>
<div data-role=”page2″>
<div data-role=”header” data-theme=”a”></div>
<div data-role=”content”></div>
<div data-role=”footer”></div>
</div>

ポップアップもある
<a href=”a.html” data-rel=”dialog”></a>

<ここで注意点>
基本的にAjaxでのページ遷移でCSS、jsファイルの読込みを行うHEAD部分は読込まれず、
BODY部分のみ置き換わりエフェクトがかかる
画面のid項目の重複が発生したりして挙動がおかしくなる

下記のような指定をするとAjaxを使用せず通常の遷移となり回避できるがエフェクトはかからなくなる
<a href=”a.html” rel=”external”>
<a href=”a.html” data-ajax=”false”>
<form data-ajax=”false”>

代わりにリンククリック時に自前でAjaxローダーのような表示する
<div id=”shadow”></div>
// リンククリックで背景グレーアウト(css作成)
$(“a”).click(function() {
$(‘#shadow’).show();
});
// ページの読込み後に元に戻す
$(window).load(function(){
$(‘#shadow’).show();
});

// ページローディング
$(document).on(‘mobileinit’, function() {
$.mobile.loader.prototype.options.text = ‘loading’;
$.mobile.loader.prototype.options.textonly = false;
$.mobile.loader.prototype.options.textVisible = true;
$.mobile.loader.prototype.options.theme = ‘a’;
});

6種類のテーマ(data-theme)がある
<div data-role=”header” data-theme=”a”>
デフォルト
a:黒
b:青
c:グレイ
d:ライトクレイ
e:黄色

その他にも
レイアウト用のグリッドや
data-role=”none”でテーマを外すなども可能
<input data-role=”none” type=”text” name=”name” id=”name” value=”” size=12>

フォームのactionはフルパス指定が必要
<form action=”/current-directory/abc” method=”get”>

エフェクトを指定
data-transition=”slide”
他に
slideup
slidedown
pop
fade
fillip
turn
flow
slidefade
none
など

他にもいろいろと用意されているみたい

タブウィジェットはjQuery Mobile 1.4から追加されている

テキストエリアの自動拡張機能(テキスト入力欄が不足すると動的に縦幅を広げる機能)は
jQuery Mobile 1.4からdata-autogrow=”false”で抑制できる。
それ以前の場合は下記のようにmax-heightで可。
<textarea style=”height:500px;max-height:500px;box-shadow:none;” readonly></textarea>

jQuery Mobileのスペースや背景色などデフォルトに戻したい場合
jquery.mobile-xxx.cssを変更する。
スペース部分の除去
/*content area*/
.ui-content { border-width: 0; overflow: visible; overflow-x: hidden; padding: 15px; }
背景色を変更
.ui-body-c {
border: 1px solid #B3B3B3;
color:#000;
text-shadow: 0 1px 0 #fff;
background: #FFF;
}

ボタンの角丸を解除するには「data-corners=”false”」
影を解除するには「data-shadow=”false”」

teratail(テラテイル)とQiita(キータ)

プログラムのことに関するとても有名なサイトを2つ。読み方も覚えておこう。

プログラムなどで困ったことをインターネットで調べてもうまく見つからない場合など

このサイトで質問するとすばやく回答がもらえるらしい。

  • エンジニア向けQ&Aサイト

teratail(テラテイル)

 

いろいろな人達が調査した事などをまとめてくれている。読み物としても勉強になりそう。

  • プログラミングに関する知識を記録・共有するためのサービス

Qiita(キータ)

文字コードとは

【文字コード】とは
文字がコードに割り当てられているもので「■文字集合(キャラクターセット)」と「■文字符号化方式(エンコーディング)」を用いて表す

■文字集合(キャラクターセット)
・文字集合としては主に下記のようなものがある
▼JIS X 0208(JIS 漢字コード)「日本工業規格(JIS)が定める、日本語の文字集合規格」
文字に区と点の番号が割り付けられているもの
▼Unicode「世界中の文字コードを統一したひとつの文字集合で表す規格」
文字にコードポイントと呼ばれる番号が割り付けられているもの
▼ASCII「ASCII(American Standard Code for Infomation Interchange)が定める規格(半角文字、1バイト文字)」
文字集合の番号をそのまま0~127の1バイトで表すもの

■文字符号化方式(エンコーディング)
・JIS X 0208(JIS 漢字コード)の符号化方式としては主に下記のようなものがある
▼「ISO-2022-JP」(JIS)
▼「EUC-JP」(EUC)
▼「Shift_JIS」(SJIS)
※Windows標準の文字コードは「Shift_JIS」ではなく「Windows-31J」

・Unicodeの符号化方式としては主に下記のようなものがある
▼「UTF-8」
▼「UTF-16」
※UTF-16は2バイト単位で文字を処理するためファイルの先頭にバイトオーダーマーク(いわゆるBOM)を置いてそのファイルがどちらのエンディアンで作成されたものなのかを判別する
UTF-8は1バイト単位で処理するのでBOMは不要だが、なぜかBOMを付けることもできるという変なことになっている

【シフトJIS(Shift_JIS)】
日本語の文字集合を符号化する文字符号化方式のうちの一つ
▼MS漢字コード(CP932)
「Shift_JIS」にMicrosoftが独自拡張し「CP932」という管理番号を与えられたもの
さらにIBMが独自拡張した「IBM版CP932」、NECが独自拡張した「NEC版CP932」が現れて混乱が生じた
▼Windows-31J(MS932)
MicrosoftはIBM版CP932とNEC版CP932を統合しWindowsにおける日本語標準コードとし
IANA(インターネットに関連する番号を管理する組織)にWindows-31Jという名前で登録された
上記の混乱したIBM版CP932と区別するために特にJavaの世界ではMS932とも呼ばれる
※「CP932」、「MS932」、「Windows-31J」は同じものをさす
「Shift_JIS」とは異なるが、実際には「Windows-31J」をさす場合に「Shift_JIS」という言葉が使われることがある
プログラミングにおいて、文字コードに「Windows-31J」と指定すべきところを、「Shift_JIS」と指定すると「Windows-31J」で定義されている文字が「Shift_JIS」にはない場合には文字化けが発生する

【HTMLで使用するcharsetの種類】
—————————————————————————
文字符号化スキーム  :キャラクタセット
—————————————————————————
Western(Latin1)       :ISO-8859-1
Japanese(Auto-detect)   :ISO-2022-JP (JIS)
Japanese(EUC)     :EUC-JP (extended unix code)
Japanese(Shift JIS)        :Shift_JIS (MS漢字)
Unicode Text Format-8 :UTF-8
—————————————————————————

JSPのタグライブラリ

JSPを使う機会は少なくなっているようだが、どのようなものがあるのか調べてみた。

【JSP標準アクション】
・アクションタグ
→<jsp:xxxx>
【Strutsタグライブラリ】
・beanライブラリ
→<bean:xxxx>
・htmlライブラリ
→<html:xxxx>
・logicライブラリ
→<logic:xxxx>
【SAStruts(Strutsの資産を生かした形)】
・SAStrutsカスタムタグ
→<s:xxxx>
・SAStrutsファンクション
→<f:xxxx>
【JSTLタグライブラリ】
・coreライブラリ
→<c:xxxx>
・sqlライブラリ
→<sql:xxxx>
・xmlライブラリ
→<x:xxxx>
【Spring MVCタグ】
・formタグ
→<form:xxxx>
・springタグ
→<spring:xxxx>
【EL式(Expression Langage)】
・${xxxx}

忘れがちなEclipseのショートカットキー

インターフェースで親クラスではなく子クラスの実装を開きたい場合
→宣言を開く(Ctrl + クリック)やクイック型階層(Ctrl + T)

リソースファイルを開きたい場合
→リソースを開く(Ctrl + Shift + R)

呼出し元階層を開きたい場合
→呼び出し元階層を開く(Ctrl + Alt + h)

リソースを開いた後にクイックアウトライン
→クイックアウトライン(Ctrl + O)

入力したテキストで検索したい場合
→インクリメンタル検索(Ctrl + J)

エディタを閉じる場合
→エディタを閉じる(Ctrl + W)、すべてのエディタを閉じる(Ctrl + Shift + W)

Javadocコメントを追加する場合
→Javadocコメントの追加(Alt+Shift+J)

スネークケースとキャメルケースを切り替えたい場合
→スネークケースとキャメルケースの切り替え(ctrl + alt + k)

リファクタリングしたい場合
→名前変更(alt + shift + r)

ローカル変数へ代入したい場合
→ローカル変数に代入(Ctrl + 2→l)

対応する括弧に移動したい場合
→Ctrl + Shift + p)

Javaの定数クラスについて

Javaで定数定義はインタフェースとクラスを使う方法があるが、
クラスを用いたほうがよさそう。

public class Constants {

// privateコンストラクタでインスタンス生成を抑止
private Constants(){}

// 定数
public static final String HOGE = “HOGE”;

}

そして、staticインポート機能を使うと冗長な表記を避けれる。

import static constants.Constants.*;

public class Main {

public static void main(String[] args) {

System.out.println(HOGE);

}

}

JavaScriptでif ==(イコール2つ)と if ===(イコール3つ)の違い

==(イコール2つ)は「等価演算子」
===(イコール3つ)は「厳密等価演算子」

つまり

var val1 = 1;
var val2 = “1”;

if(val1 == val2)
だと同じ

if(val1 === val2)
だと異なる

var val1 = 0;
var val2 = “”;

if(val1 == val2)
数値型の0と文字型の空文字だと同じと判断されていまう