かまえ・みばえ・めばえ: 2月 2014

2014年2月3日月曜日

国産のアイコンにも着目

外国のアイコンがもてはやされていますが、国産のアイコンにも着目しておきましょう。

←64×64px　gif　４KBの「丸に立ち沢瀉（おもだか）」が我が家系の家紋です。
100KB以下なのでこれを使ってみます。

←16×16px　ico（変換ツールにて）・・・何とかわかるか？

家紋のポータルとしては→http://kamon.main.jp/index.htm

2014年2月2日日曜日

#11 forループ

#11 forループ
for文を使ってループ処理を実現するための方法について見ていきます。

JavaScript

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>かまえ・みばえ・めばえ</title>
</head>
<body>
<h1>めばえ</h1>
<script>
for(var　 i　= 0; (i < 10; i++) {
console.log(i)；
}
</script>
</body>
</html>

whileと同じ機能。一行でかけるというのがミソ。カウンターの初期化等に使うそうです。

#10 whileループ

#10 whileループ
ある処理を指定した回数、繰り返すときの方法について学びます。

JavaScript

<!DOCTYPE html>
<html lang="ja">
<head>
　　<meta charset="UTF-8">
　　<title>かまえ・みばえ・めばえ</title>
</head>
<body>
　　 <h1>めばえ</h1>
　　<script>
　　　　vari i=0
　　　　while (i< 10) {
　　　　console.log(i)；
　　　　i++; //i=i+1;
　　　 }
　　</script>
</body>
</html>

どうも具体像が見えてこない。　console.log(i)；を絡めたからだろうか？

JavaScriptコンソールを表示。
横にある「ind・・・」をドラッグ＆ドロップしてブラウザに載せるとコンソール画面に１～10の数字がでるという・・・

単純Favicon作成方法手順

2012年頃には「２万個以上のPNG形式画像のアイコンを見つけることができるPNG Factory」の日本語紹介記事もあったりして、アイコンはレディー・メードの時代になっているようです。

ともあれ、それはそれ、これはこれ。

専門家が使用する高価有償のAdobe・Illustratorでデザインして、Photoshopで縮小・・・という流れが理想なのでしょうが、ここでは、多くの素人でも作れる方法を記録してみます。

無償ソフト（Windouws系）で最も単純なファビコン（16×16px）の作成方法

原図は懐かしい「ペイント」で作成して、ｂｍｐ→ico、またはpngで保存。

補助として、ウェブ上にある最もシンプルな「画像→アイコン変換ツール」を利用する。

という流れに・・・

ちなみに、icoはMicrosoft Windowsにおける画像ファイルフォーマット。したがって、ウィンドウズの定番「ペイント」で開くことができます。

ほかのグラフィックソフトウェアで編集・出力が可能なのは、GIMP、CorelDRAW、IrfanView、Paint.NET（プラグインが必要）とのこと。Jtrimなどでは開きません。

一方、アイコンをドット絵として作成する専用ソフトもあります。「無料アイコン（ico）作成ソフト」

ここで紹介されているソフトは、全て自分のパソコンにダウンロードするモノ。
「アイコン・エディタ」６つと「アイコン・画像変換ソフト」６つの合計12点。国産、海外製といろいろです。

たとえば「Dot Work」ではテキスト入力すると綺麗なドット絵になります。「ペイント」も使い慣れればうまくいきそうです。

Dot Work　　　　　　　　　　　　Paint（Win)

１．ペイントを起動

「ホーム」→「イメージ内サイズ変更」をクリック

「ピクセルで320×320」にして「OK」

「表示」で「ルーラー・グリッド線などにチェックを入れる。

ペイントの100％表示では、グリッドのマス目一つが10pxとなります。

ペイントは800％まで拡大できますので、1pxのグリッドマス目も表示できます。

手間がかかりますが、この１pxでドット描写修正するときめ細やかな画像になりそうです。

２．アイコン画像を作成（10倍のサイズで）

ここでは「文字」をテーマにします。たとえば「MTOS　編集者」。

画面320ｐｘ角に２段にして入力してみます。

文字寸法の目安

文字の１ポイントは約0.353㎜
2・54㎜＝１インチ＝72ポイント
96dpiのデスクトップ画像なら１インチ96ドット
72ポイント＝96px
１ポイント＝0.75px／1.33ポイント＝１px

320pxの幅に４文字入るとすると、72ポイントほどにして「Ａ」ボタンでテキストを入力します。一旦文字を任意の場所に置きます。

「四角形選択」で文字を囲んで、ポイントをつまみほしい寸法に拡大。

位置を整えます。「四角形選択」で何回でも調整できます。

２．アイコン画像を縮小（10％や50％で）

「サイズ変更」でパーセンテージを選んで10％（32×32px）やさらに50％（16×16px）に縮小。

「ファイル」の「名前を付けて保存」でBMPを選択。

「ファイルの種類」に「24ビットビットマップ」を選択。

※ここでファイル名の拡張子を .ico にしてしまいます。

Bloggerでは「アップロードはJPG、GIF、PNG 形式のファイルを使用してください。」とあるのですが、ICOでもアップロードできるようです。

←こちらは32pxのアイコン。何とか認識できますのでデスクトップのアイコンには使えます。

←こちら16pxのアイコン・・・やはりテキスト２段の７文字は小さすぎますね。

←といって漢字の「編」だけでももう一つくっきりしません。

←ひらがなかカタカナの一文字が「ブラウザのタブ」にはよろしいようで。「hei・ico」

◆　ムーバブル・タイプにアップする場合の注意

理由はわかりませんが、上の流れで作成した「hei・ico」をアップロードすると「.bmp」に自動的に変更されてしまいます。

そこで、「画像→アイコン変換ツール」を利用して、さらにicoに変換。これをアップロードすると「.icon」のまま保存されました。

実際にアップした例はこちら（ただし、認証が必要な会員制。ブログの一般公開には矛盾_(._.)_）

2014年2月1日土曜日

＃07 ifと比較演算子

JavaScript

<!DOCTYPE html>
<html lang="ja">
<head>
　　<meta charset="UTF-8">
　　<title>かまえ・みばえ・めばえ</title>
</head>
<body>
　　 <h1>めばえ</h1>
　　<script>
　　　　 var score= 80;
　　　　 if (score >= 70{
　　　 alert("good" );
　　　 }
　　</script>
</body>
</html>

//分岐条件(if)

// 比較演算子

// >= <= < > 大きさを比較してその結果を true（真）または false（偽）で返します。
　　　　　　　　演算子はそれぞれ、より小さい（<）、以下（<=）、より大きい（>）、以上（>=）

// ==等しければ true（真）、さもなくば false（偽） !=等しくなければ true（真）、さもなくば false（偽）