初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます.

Java Script DOMについて 健忘録

DOM = Document Object Model

Objectの集合(tree構造)がHTMLやXMLのDocumentであると考える。
ObjectをNodeと呼ぶ。

DOMはNodeを操作(追加・削除・置換・抽出)をする為のAPIである

要素の集合

両方とも要素の集合

  • NodeList = Static
  • HTMLCollection Object = Dynamic(DOMを操作した場合値が変わることがある)

DOMを操作する場合には、文書ツリーから要素Nodeを取得するところから全ては始まる

戻り値 HTMLElement
document.getElementById()
document.querySelector()
戻り値 HTMLCollection
document.getElementsByTagName()
document.getElementsByClassName()
戻り値 NodeList
document.getElementsByName()
document.querySelectorAll()


document.querySelectorAll()で操作する要素を取得した後
ノードウォーキングで相対的に周りの要素を操作すると効率が良い
そのためには、取得する要素をよく考えてdocument.querySelectorAll()
を使わないとオーバーヘッドが高くなる。


イベントドリブンモデル(イベント駆動型モデル)

イベントをトリガーにして処理を実行すること

イベントに対応して処理内容を定義するコードのかたまり(function)

操作の基本は下記である

  • どの要素で
  • どのイベントを
  • どのように処理するか(関連ずけるか)

1. タグ内の属性として宣言
2. Elementオブジェクトのプロパティとして宣言
3. addEventListenerメソッドを使用して宣言

1.はHTMLタグ内にスクリプトを記述するので好ましくない。
レイアウト定義のHTMLの中にJSを混在させることがよくない

document.addEventListener

jQueryでいう`$(document).ready(fucntion(){});`

document.addEventListener('DOMContentLoaded' ,function() {
  //処理したい内容
},false);

attributesプロパティ

対象とするElementノードの全てのattrリストをNamedNodeMapオブジェクトとして返す
属性値やテキストを取得・設定する

NamedNodeMapオブジェクト

個別のノード名・indexのいずれかでアクセス可
配下ノードの操作が(追加・削除・置換・抽出)

イベントオブジェクト

イベントハンドラー or イベントリスナーにおいて実行される関数のArgumentとして受け取ることのできるオブジェクトです。オブジェクトから、発生したイベントに関わる様々な情報(プロパティ)を知ることができ、またそのイベントを制御するメソッドを活用することができます。

//イベントfuncが起きたElement〇〇の属性値を取得しtestに入れる
function(e) {
}
var test = e.target.getAttribute('〇〇')

JSからのCSS操作

StyleプロパティでのCSS操作は、スタイル定義とスクリプトの混在に繋がるので使用するのは好ましくない。

classNameプロパティを使用する
or
classListプロパティを使用する(IE10以降のため注意)

  • classNameプロパティ

- mouseover・mouseout 各々のイベントにthis.classNameを追加・削除してCSSをコントロールする

  • classNameプロパティ

クリックごとにID’test’をオンオフが出来る

document.addEventListener('DOMContentLoaded' ,function() {
  var test = document.getElementByID('test');

  elem.addEventListener('click' ,function() {
    this.classList.toggle('test');
},false);

Atom JavaScript 自動補完パッケージ ternjs

凄く便利。。。!

公式パッケージサイト
atom.io

JSを管理するディレクトリに.tern-projectを作成しましょう〜
Libsの配列の中に補完したい項目を記述して保存すれば
自動で補完されます。

補完される項目がElemなのかHTMLCollectionなのか・NodeListなのかも
表示されるくらい親切です。

素晴らしいの一言。。

Linux ディレクトリ構成 簡略図

Linux ディレクトリ一覧

|--- bin (Binary):一般ユーザーでも実行可能な基本的なコマンドがある。コマンドのバイナリファイルを表す。
|
|--- sbin (System Binary):rootユーザーのみが実行可能なシステム管理コマンドがある。
|
|--- etc (Et Cetera):システムやコマンドの各種設定ファイル、スクリプトファイルがある
|
|--- dev(Device):ハードディスク、CD-ROM、DVD-ROMなどのデバイスファイルがある
|
|--- lib (Library):共有ライブラリやカーネルモジュールがある
|
|--- mnt (Mount):CD-ROMなどのファイルシステムの一時的なマウントポイント
|
|--- opt (Option):追加パッケージや追加プログラムがインストールされる
|
|--- proc (Process File):カーネル内部の情報にアクセスするための仮想ファイルシステム
|
|--- root rootユーザー専用のディレクトリ
|
|--- boot システム起動に必要なカーネルイメージや設定ファイルがある
|
|--- home 一般ユーザーごとのホームディレクトリ
|
|--- tmp (Temporary):一時的に使用する作業用ファイルがある
|
|--- var (Variable):ログファイル、各種のスプールなど、頻繁に更新されるファイルで、変わりうる情報を扱う
|
|--- usr:一般ユーザーが共有するコマンド、ライブラリ、ドキュメントなどがある
|
|--- lost+found:破損したファイルがある
|

Linuxソフトウェアの概要

プロセス

実行するプログラムの単位

  • 一つのプロセつは1つのメモリ空間を持つ(別のプロセスとの間の変数アクセスは不可)
  • PID(Process ID)・task_struct構造体(task_t型)で管理される
  • 親プロセスが存在する

プロセス作成の仕組み

  1. プロセスはシステムコール fork()で子プロセスを作成(親プロセスになる)
  2. システムコール exec()で新しいプログラムを実行
  3. 子プロセスはexit()で終了
  4. 親プロセスはシステムコール wait()で子プロセスの終了ステータスを取得(監視)


例えばShellで何かコマンドを実行した場合、シェルが親プロセスになり実行したコマンドが子プロセスとして動作する。

スレッド

プロセス内の処理単位を細かくしたもの

IPC

前述で説明した通り、ユーザー空間の各プロセスは、別の仮想空間メモリで動作してる為
お互いのメモリのアクセスは出来ない。
IPCがプロセス同士でアクセスや処理をする場合に、プロセス間の通信を担う。

IPCの種類
シグナル プロセスに対して決まった通知をする。決まった内容しか通知できない。システムの事象を通知するために用いる。
パイプ’ 親子関係があるプロセス間で利用できる。単方向通信のみで双方向通信は不可。
FIFIO 親子関係がないプロセス間で利用される。双方向通信可。
セマフォ プロセス間でデータへのアクセス制限をする場合に用いる。デッドロックの原因になりやすい
メッセージキュー 異なるプロセス同士が1対1で通信する場合に利用される。AからBにデータや処理を依頼する場合に、Aはメッセージを生成してキューを置き、Bに処理を依頼する。
共有メモリ プロセス同士でデータを交換する場合に利用される。メッセージキューより大きなデータのやり取りが可能。
ソケット ネットワークの通信に利用される。同一システム・異なるシステムとのプロセス間通信で利用される。

カーネル

OSの核の部分
システムコールインターフェースをユーザー空間に提供する
ユーザーがファイルを開く場合には、下記の経過をたどっている。
ユーザーからファイルを開くプロセスを実行 > カーネルが提供するopen()が呼び出される > 実行結果が返ってくる

Raspberry Pi 初期設定 健忘録 ログインループ回避

ユーザーpiを別のユーザー名にスムーズに変更する方法

まずはpi以外のユーザーを追加
adduser ユーザー名(ex. tmp)#useraddは使用しない
gpasswd -a tmp sudo
passwd tmp #任意のパスワードを設定

sudo vi /etc/lightdm/lightdm.conf
autologin-user=piをコメントアウト

reboot
tmpでログインしpiのユーザー名を変更
usermod -l pi 変更したいユーザー名
mv /home/pi /home/ユーザー名
usermod -d /home/ユーザー名
groupmod -g pi ユーザー名
sudo visudo #ユーザー名を追加

.bash_profileに.bashrcがある場合に読み込む設定を記述


ちなみにラズパイでのログインループが良くあるみたいですね。

当方もちょっとハマったので解消方法を書いときます。
巷だとNvidiaの不具合と書かれているのが散見されますが

dpkg -l |grep nvidia

で見つからない方は一度試してみてもいいかもです。

一時的に作成したユーザーでCUIだとログイン出来る方で
GUIはログインできない方はこの方法で解消されるかも知れません。

useraddでルートディレクトリがない為、ログイン時に
デスクトップ表示などが出来ず、結果ログインループに
なってしまうことが濃厚だと考えられます。

当方もルートディレクトリのを作成したら解消されました。

Raspberry Piではまったこと健忘録

sshで操作する為、GPUなど不要なものを排除して
最小構成でインストールした場合、GPIOを操作するツールなども
インストールされていません。

WiringPi
git clone git://git.drogon.net/wiringPi
cd wiringPi
./build

これでGPIOが確認できます。

参考にさせて頂きました。
oohito.com
qiita.com

GPIOの状態を確認する
gpio readall
特定のGPIOのモードを変更する
gpio -g mode BCM番号 mode(in,out,alt)
特定のGPIOのin,outの設定
gpio -g write 数字


PyenvでVersionインストール中の下記のエラーが表示されたら
その下のサイトを確認しましょう。

ERROR: The Python ssl extension was not compiled. Missing the OpenSSL lib?

github.com

Shell Script デバッグ コマンドbashdbを使用する

bashdbを使用する

bashdbを使用すると1行1行ソースコードを読み込んだり
カレント行の変数の値を確認したりすることができます。
ブレイクポイントを設定したりそこまで処理を進めたりもできます。

コマンド名 別名 内容
step s 1ステップ実行する
print $変数名 pr $変数名 変数の値を表示する
break 行番号 b 指定した号にブレークポイントを設定する
clear 行番号 d 指定した行に設定されているブレークポイントを削除する
info breakpoints i b 設定されてるブレークポイントの一覧を表示する
continue c 次のブレークポイントまで進める
list l ソースコードを表示する
quit q または exit bashdbを終了する
help h ヘルプメッセージを表示する

Shell Script デバッグ コマンドbatsを使用する

Shell Scriptの静的コード解析でデバックするには
bashのオプションnoexecで行います。

静的コード解析は動作をさせるソースコードを実行せずに
問題があるか確認するデバック方法です。

#!/bin/bash
#noexec シェルオプションを有効にする
set -o noexec 

Shellcheckを使用する

ShellScriptを書く人は御用達の構文チェックサイトShellcheckで
チェックするのが、余計な手間いらずで簡単です。
www.shellcheck.net

batsコマンドを使用する動的テスト

batsコマンドのインストールは各OSのパッケージ管理ソフトで
インストールしてください。
Red-Hat系ならyumDebian系ならapt-get。Macならbrewとか。


テストを行うファイルの拡張子は.shではなく.batsとします。
冒頭にShebangは書かなくて大丈夫です。
Atomでパッケージで動作確認する場合にはShebangが記述されていると
Atombashだと認識してうまく動作しないことがあります。

@test テストの説明 {
  #Statement
  #Statement
}
@test 'True' {
  echo HelloWorld
}

@test 'False' {
  ech HelloWorld
}

#1..2
#ok 1 True
#not ok 2 False

bash 補完機能強化 Bash Completion設定方法

まずは各OSのパッケージ管理ソフトでインストールしましょう
Macbrew install bash-completion
Red-Hat系:yum install bash-completion
Debian系:apt-get install bash-completion

.bash_profile

if [ -f /etc/bash_completion ]; then
    . /etc/bash_completion
fi

書き込み終わったらsourceで読み込みましょう。

これで補完機能が追加できました。