生活情報オンライン

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

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

生活・ライフハック

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

wired.jp

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


結果。。。


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


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


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

電子図書館の利用方法

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


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

１．図書館利用カードを作る
２．電子図書館の利用手続きをする


１．図書館利用カードを作る

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


・豊島区（TRC豊島電子図書館）
・千代田区（千代田Web図書館）


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

２．電子図書館の利用手続きをする

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

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


https://weblibrary-chiyoda.com/

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


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



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


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

Kindle Paperwhite Wi-Fi 、ホワイト

Kindle Paperwhite Wi-Fi 、ホワイト

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

HTML / CSS テクノロジー

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

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


「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

HTML5でCSS/javascript読込

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


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


上記２つは基本的な読み込み方法で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になります。


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

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

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


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

２．進捗状況の数値を取得設定
var atai = $("#progress_id").value;
$("#progress_id").value = 70;
３．進捗状況の最大値を取得設定
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
規格名称：７ビット及び８ビットの情報交換用符号化文字集合
Japanese Industrial Standards


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

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

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

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


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


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

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

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

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

生活・ライフハック

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

斜位って何？

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


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

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

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


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

まとめ

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


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


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



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

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

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

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

テクノロジー HTML / CSS

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のみで上記のことが出来てしまうのです。CSSもjavascriptも必要なくレスポンシブに画像を扱うことが出来る、それが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

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



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


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


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


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

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

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

javascript 即時関数の書き方

テクノロジー プログラミング言語

今回はjavascriptの即時関数を紹介します。


私は最初に即時関数を見たときはその記述方法に驚きました。
しかし、その機能はいたってシンプルで「定義後、即実行」する関数だというだけです。
だんだん見慣れてもきますので、もし即時関数を難しく感じても最初だけなので安心してください。


さっそくですが、実際のコードはこのような感じになります。

即時関数の書き方

(function(){
  //処理...
})();


通常の関数ではロード（定義）された後に呼び出しをされないと実行されませんが、上記のように記載することで「定義後、即実行」という挙動になります。


通常の関数と比較してメリットとよく言われるのが「スコープが閉じている、いわゆるスコープを汚さない」ということです。スコープが閉じていることにより、「他の場所で定義した変数」と同じ名前の変数を定義し使用しても、「他の場所で定義した変数」に影響を与えることはありません。


これは、複数の外部ファイルの読み込みなどで複雑に入り組んでしまい「このアプリでどのような変数を使用しているのか把握できない」ような状況で有用かと思います。


また、即時関数には上記の他にも書き方がありそれぞれ次のように書きます。

引数を指定する場合

引数を指定する場合ではこのように書きます。

(function(val1, val2){
  //処理...
})(1, 2);

関数名を付与する場合

即時関数には、関数名を付与することも出来ます。

(function sokuji_func(){
  //処理...
})();

以上、即時関数の記載方法でした。

追加実験

即時関数には関数名を付与できることを利用して関数定義した場所以外から呼び出せるのか次のコードを書いて試してみました。
結果として、下記のようなエラーが起きてしまい期待していた挙動にはなりませんでした。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
window.onload = function(){
  var sokuji = (function(arg){
    var $p = document.getElementById("p_sokuji");
    $p.style.color = arg;
  })("red");

  var $b = document.getElementById("b_sokuji");
  $b.onclick = function(){
	  sokuji("blue");
  }
}
</script>
</head>
<body>
<p id="p_sokuji">Hello Sokuji Function</p>
<button id="b_sokuji">テスト</button>
</body>
</html>

このようなエラーです。
f:id:somegoro:20170522003943p:plain

ううむ、即時関数を呼び出すにはどのようにしたら良いのでしょうか。
引数なしだったらいけそうな気もします。再度、色々なアプローチで実験してみようと思います。


☆彡追記
この記事について助け舟を出していただきました。 id:KazmaArakaki様、ありがとうございます。とても丁寧な説明でわかりやすかったです。
http://kazmaarakaki.hatenablog.com/entry/2017/05/24/223720kazmaarakaki.hatenablog.com

ということで、上記追加実験のエラーについて解決することが出来ました。即時関数は名前をつけても基本的には呼び出すことは出来ません、その事実は引数なしでも変わりません。しかし唯一、即時関数の中からなら呼び出すことが出来るのです。こういった呼び出し方は「再帰」なんて呼びますよね。それでは実際にソースコードを書いていきます。

文字色をランダムに換える関数

var sokuji = (function(arg){
  // 0～4までの数をランダムで取得
  var ran = Math.floor( Math.random() * 5 );
  // 文字の色を設定
  var $p = document.getElementById("p_sokuji");
  
  if($p.style.color == arg[ran]){
    //今の文字色と同じ色ならば、即時関数を再起的に呼び出す
    sokuji(["red", "blue", "green", "pink", "black"]);
  }
  $p.style.color = arg[ran];

})(["red", "blue", "green", "pink", "black"]);


上記のように即時関数を呼び出すには再帰的に呼び出します。（※動作確認未実施です。これから再追加試験としてやります）


今回の記事は以上です。とても良い勉強になりましたね！

javascript(jQuery)読み込みの仕組みを解説！

テクノロジー プログラミング言語

今回は javascript / jQuery の読み込まれる仕組みを解説します。


window.onload / ready / $(function(){})　など 色々なイベント処理があります。みなさんはフロントエンドの基本であるこれらをきちんと理解しているでしょうか。これらの理解があるかどうかで今後の開発の質が大きく変わってくることかと思います。


例えば、ある要素に対して押下イベントを登録するにしてもDOMツリーが構築されてから登録処理を実施しないとイベント登録はされません。なぜなら登録先の要素が無いために登録処理が空振りに終わってしまうからです。


ではDOMツリーが構築されるタイミングはいつなのか、適切なタイミングで登録するにはどうしたらいいのか。このあたりの理解があやふやな方は是非読んでいってください。


よく使う$(function(){...とは何なのか

jQueryを使うときには、次の式を書きますね。

$(function(){
  //処理...
});

これは次の式の略です。

jQuery(document).ready(function() {
  //処理...
});

この式は他にもこのような記載方法があります。機能はどれも同じです。

$(document).ready(function(){
  //処理...
});

jQuery(function(){
  //処理...
});

これらの式はHTMLがDOMツリーを構築完了した直後に呼ばれる式です。ですので要素に対してのイベント登録は上記の式の中に書けば登録することが出来ます。しかし、CSSレンダリングや画像の読み込みなどはまだ行われていないので、要素や画像の高さを取得することは出来ません。

全体の順番

全体としての順番は次の通りです。


１．Webページの読み込み開始
　　基本的には上から順番にWebページが読み込まれていきます。

　↓

２．HTMLを読み込んでDOMツリーの構築
　　ここでDOMツリーの構築が完了すると次の式たちが実行されます。

$(document).ready(function(){
  //処理...
});

$(function(){
  //処理...
});

　↓

３．CSS、画像、サブフレーム（iframeとか）の読み込み
　　ここで各種コンテンツの読み込みが完了すると次の式が実行されます。

window.onload = function(){
  //処理...
}

こうやって書いても良いです。

$(window).load(function(){
  //処理...
});

　　ここだとCSSレンダリング後なので、要素のheight,widthが取得できます。
　　もちろん画像のheight,widthも取得できます。


ちなみにTips

window.onloadは一度しか呼ばれません。二つ以上書くと最後に書いたもののみ実行されます。

window.onload = function() {
  //処理１...
}

window.onload = function() {
  //処理２...
}

これは、上記のように window.onloadに代入されるので最後に書いたものに上書きされるためです。


すべてのコンテンツの読み込みが完了した時点で処理を複数実施したい場合は次のように書きます。

$(window).on('load', function() {
  //処理１...
});

$(window).on('load', function() {
  //処理２...
});


これをjQueryなしでやるには次のように書きます。

function onload_function1(){
  //処理１...
}

function onload_function2(){
  //処理２...
}

window.addEventListener('load', onload_function1);
window.addEventListener('load', onload_function2);


window.onloadと違い次の式は何回でも記載することが出来るので安心して使いましょう。

$(function(){
  //処理...
});


この式をjQueryを使用せずにjavascriptのみで呼び出すのは次のように書きます。

document.addEventListener( "DOMContentLoaded", completed );

この書き方の対応ブラウザは次通りです。

Chrome Firefox InternetExplorer Safari
1.0～ 1.0～ 9.0～ 3.1～


また、途中で記載した次の式は、jQueryの関数.loadを使用した呼び出し方です。

$(window).load(function() {

これはwindow以外の要素でも使用することが出来ます。指定した要素の読み込み完了した時点で発火するイベントの登録ということですね。

<img src="test.gif" alt="test" id="test">
$( "#test" ).load(function() {
  //処理...
});



これをjavascriptのみで実行するには次のように書きます。

window.addEventListener("load", completed );



いかがでしたでしょうか。
以上、今回は javascript / jQuery の読み込まれる仕組みを解説でした。


改訂新版 jQuery本格入門

改訂新版 jQuery本格入門


Windows10 サービスの起動の仕方

テクノロジー

こんにちは。今回は「Windows10 サービスの起動の仕方」をご紹介します。


Windows10が発売されてから久しいですが、コントロールパネルの配置などユーザーインターフェースに色々と変更がありましたのでお困りの方も多いかと思います。


私自身もサービスを起動方法については毎回のようにWebサイトで調べていましたので、簡単な起動方法を記事にしようと思いました。

Windows10 サービスの起動の仕方

さて、それではさっそく紹介していきます。今回はベーシックな方法を２点ご紹介します。

１．「Windows管理ツール」から起動する方法

Windowsボタンを押下してアプリケーション一覧の中からWindows管理ツールを開きます。その中にある「サービス」を押下します。
f:id:somegoro:20170517002018p:plain


これで次のようにサービスを起動することが出来ます。
f:id:somegoro:20170517002316p:plain


２．「ファイル名を指定して実行」から起動する方法

もう一つの方法は、Windowsボタン＋Rを押下して「ファイル名を指定して実行」ウィンドウを開きます。


そこに「services.msc」と入力してOKボタンを押下します。
f:id:somegoro:20170517002232p:plain



以上、「Windows10 サービスの起動の仕方」を２点ご紹介しました。


あまり使う機会がないので、ついつい忘れてしまいますが作業自体はとても簡単ですね。忘れたら是非また見に来てください。

jQueryでも高速化！メソッドチェーン/連想配列で値を設定

テクノロジー プログラミング言語

先日、jQueryで簡単に値を取得する方法を記載しました。その中で処理を高速化することについて少しだけ言及しました。
somegoro.hatenablog.com

今回はその高速化についての記事です。


jQueryの処理はjavascriptの処理と比較して遅いと一般的に言われています。確かにそのとおりなのですが、書き方を少し工夫するだけでjQueryの処理は飛躍的に速くなるのです。


今回の記事では、高速化するための書き方を2点ご紹介します。
それではご紹介していきます。

高速化１ メソッドチェーンでつなぐ

普通にjQueryの処理で書くとこのようになります。

$(this).css("width", "500px");
$(this).css("height", "300px");


それをこのように書くことが出来ます。

$(this).css("width", "500px")
       .css("height", "300px");

この書き方ですと $(this) へのアクセスが一度で済みます。
ですので、その分の処理が少なくなるので結果として処理時間が短くなる（＝高速で処理できる）と言うことになります。


さらに.cssだけでなく、他のプロパティでもメソッドチェーンで繋ぐことが出来ます。

$(this).css("width", "500px")
       .css("height", "300px")
       .text("設定しました");

記述量も少なくなる上に処理も速くなって一石二鳥ですね。これを使わない手はないです。


高速化２ 連想配列で設定

さて次は連想配列を使って値を設定する方法をご紹介します。
普通にjQueryの処理で書くとこのようになります。

$(this).css("width", "300px");
$(this).css("height", "300px");

それをこのように書くことが出来ます。

$(this).css({
  width: "300px",
  height: "300px"
});

この書き方は高速化１の方法よりも個人的に見た目が好きなので、私はよく使います。
処理速度としてはどうでしょう、こちらの方が体感的には少々速い気がしますがあまり気になる程の差はないように感じます。


今回ご紹介した書き方は、変数でもこのように設定することが出来ます。

var variable_width = 300;
$(this).css("width", variable_width)
       .css("height", "300px");

$(this).css({
  width: variable_width,
  height: "300px"
});

便利で簡単ですね。


以上、jQueryでも処理を高速化する方法２点でした。メソッドチェーンや連想配列はこの他にも様々な場所で活躍しますので、この機会にぜひ覚えていってください。


それではこの辺で。

jQueryクックブック

jQueryクックブック

jQueryでCSSのwidth, height を簡単に取得/設定する方法

テクノロジー プログラミング言語

今回は jQueryで width, height の値を簡単に取得する方法をご紹介します。

今までの取得方法

今まで私は、幅と高さを取得する際に次のように書いていました。

$(this).css("width");
$(this).css("height");

javascriptで取得する方法であるdocument.getElementByIdなどと比較すればこれでも簡単なのですが、もっと簡単に取得できる書き方を先日知りました。

簡単な方法

$(this).width();
$(this).height();

これで取得できます。jQueryの基本的な書き方のようです。ちなみに値を設定するにはそれぞれ次のように書きます。

$(this).width(500);
$(this).height("300px");

単位なしで書くとpx単位での設定になります。もちろんpxを明示的に書いても設定することが出来ます。%, vh, vw なんかも設定できます。簡単ですね。


私が今まで実施していた書き方だと値を設定するには次のように書きます。

$(this).css("width", "500px");
$(this).css("height", "300");

これも単位なしで書くとpx単位での設定になります。これも、もちろんpxを明示的に書いても設定することが出来ます。やはり多少記述が長くなりますね。「塵も積もれば」で、この多少の違いは見過ごせません。


私がよくやっていることは.cssで値を動的に設定することです。

変数で設定

次のように値を変数にすることで動的に値を設定できます。

$(this).css("width", variable_width);

さらに、上記で変数にした部分は関数にすることも出来ます。関数の戻り値で値を設定するのです。

関数の戻り値で設定

次のように値を関数の戻り値で設定することで動的に値を設定できます。

$(this).css("width", function(){
  return variable_width;
});


そして、意外と忘れがちなのが初期化です。

初期化

上記のようにjQueryを使って設定した値を初期化して元のCSSで設定していた値に戻したい。そんなときには次のように書きます。

$(this).css("width", "")

簡単ですね。この初期化の書き方でピンときた方もいるかと思いますが、.cssではCSS上で値を設定しているのではないのですね。HTML上にstyleで設定しているのです。.cssという書き方なのに、面白いですね。


以上、width, height の値を設定する色々な方法でした。なお、今回の処理については処理速度は意識していません。あくまで簡単に値を取得/設定する方法にフォーカスした内容です。


処理速度を意識するならjQueryでなく、javascriptで書いてしまった方が断然速いです。ですので、お手軽プログラミングでなく処理速度に厳密なプログラムを書く際にはjavascriptでゴリゴリ書いていくことをオススメします。


いつか処理速度を意識したjavascriptの記事も書きたいなぁ（´-`）.｡oO

コアjQuery+プラグイン/jQuery UI 開発実践技法 (Programmer's SELECTION)

コアjQuery+プラグイン/jQuery UI 開発実践技法 (Programmer's SELECTION)

Amazon「ほしい物リスト」ボタンを作る方法！あのボタンを自作する！

テクノロジー

今までご紹介したHTML5/CSS3の機能を組み合わせることで綺麗なボタンを自分で作成することが出来ます。


Twitter、Facebook、Amazonなどのあらゆるボタンを自由に作れますので、今回の記事では実際に「Amazon ほしい物リスト」のボタンを作成してみます。

Amazon ほしい物リストボタンの作り方

あのAmazonの象徴的なボタンを作ります。完成イメージは次のとおりです。

そめごろうのほしい物リスト


使用している４つの機能

よく見かけるボタンですよね。
使っている機能は今まで記事にてご紹介した次の４点です。
１．HTML5/CSS3 簡単に「上下中央揃え」にする２つの方法 インライン要素、ブロック要素 - 生活情報オンライン
２．HTML 角を丸くする方法 - 生活情報オンライン
３．HTML5/CSS3 グラデーションのかけかた - 生活情報オンライン
４．HTML リンクを押せる範囲を拡大する方法 - 生活情報オンライン


これらを組み合わせると上記のようなこれぞAmazonなボタンを作成することが出来ます。


上記のボタンはきちんとボタンとしてのジャンプ機能も持ち合わせています。ジャンプ先は本記事の作成者である「そめごろう」のAmazonほしい物リストです。
このジャンプ先を変更することで、ご自分の「ほしい物リスト」へジャンプするボタンも作成することが出来ます。


ブログの隅にこんなボタンがあったら思わずクリックして覗いてみたくなってしまいますね。

ソースコード

それではソースコードをご紹介します。今回ももちろんコピー＆ペーストOKです。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
@charset "utf-8";

.a-button {
  border-color: #a88734 #9c7e31 #846a29;
  border-radius: 3px;
  border-style: solid;
  border-width: 1px;
  display: inline-block;
  font-size: 13px;
}

.a-button:active{
  border-color: #a88734 #9c7e31 #9c7e31;
}

.a-button-text {
  color: #111;
  font-family: "Hiragino Kaku Gothic Pro W3","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  height: 100%;
  line-height: 29px;
  position: absolute;
  text-align: center;
  text-decoration: none;
  width: 100%;
}

.a-button-inner {
  background: rgb(243,208,120);
  background: -webkit-linear-gradient(top,rgba(240,193,75,0.9),rgba(247,223,165,0.9));
  background: linear-gradient(to bottom,rgba(247,223,165,0.9),rgba(240,193,75,0.9));
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset;
  border-radius: 2px;
  display: block;
  height: 29px;
  position: relative;
  width: calc(13em + 20px);
}

.a-button-inner:hover{
  background: -webkit-linear-gradient(top,rgba(240,193,75,1),rgba(247,223,165,1));
  background: linear-gradient(to bottom,rgba(247,223,165,1),rgba(240,193,75,1));
}

.a-button-inner:active {
  box-shadow: 0 1px 3px rgba(0,0,0,.2) inset;
}
</style>
</head>
<body>

<span class="a-button">
  <span class="a-button-inner">
    <a href="http://amzn.asia/ih5VQQG" class="a-button-text">そめごろうのほしい物リスト</a>
  </span>
</span>

</body>
</html>

ちなみに、リンク（ジャンプ先）は上記ソースコードのうちの次の部分です。

<a href="http://amzn.asia/ih5VQQG" class="a-button-text">

この「"http://amzn.asia/ih5VQQG"」をご自分のリンクに変更することで、ご自分のほしいものリストにジャンプするボタンを作成することが出来ます。


なお、リンクの作成方法については次のとおり公式サイトに記載があります。
Amazon.co.jp ヘルプ: ほしい物リストを作成する


上記の公式サイトには図が無いので少々わかりづらいかもしれません。
図を使った説明がお好みの方は、こちらの方の記事が明るいです。
www.sukicomi.net

HTML5/CSS3 簡単に「上下中央揃え」にする２つの方法　インライン要素、ブロック要素

テクノロジー HTML / CSS

HTML5/CSS3ではflexが登場して、上下中央揃えがとても楽になりました。


要点を掴めばこんな風によそ見してても簡単に出来ます。
f:id:somegoro:20170324023808j:plain
ぜひこの記事を読んで、要点を掴んでいってください。


さてそれでは、今回の記事では次の２つの上下中央揃えパターンをご紹介します。
・インライン要素 of ブロック要素
・ブロック要素 of ブロック要素

インライン要素 of ブロック要素


インライン要素

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#parent_block{
  border: 1px solid black;
  height: 100px;
  width: 250px;
  text-align: center;/* 横の位置を中央にする */
}

#child_inline{
  line-height: 100px;/* 行間を指定 */
  border: 1px solid blue;
}
</style>
</head>
<body>
<div id="parent_block">
  <span id="child_inline">インライン要素</span>
</div>
</body>
</html>

インライン要素とブロック要素の境界がわかりやすいように、それぞれ青と黒でボーダーを引いています。

ブロック要素 of ブロック要素



ブロック要素

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#block_parent{
  align-items: center;/* 縦の位置を中央にする */
  border: 1px solid black;
  display: flex;
  justify-content: center;/* 横の位置を中央にする */
  height: 100px;
  width: 250px;
}

#block_child{
  border: 1px solid blue;
}
</style>
</head>
<body>
<div id="block_parent">
  <div id="block_child">ブロック要素</div>
</div>
</body>
</html>

こちらにもブロックとブロックの境界がわかりやすいように、それぞれ青と黒でボーダーを引いています。