Simple, Slowly

ブログを引っ越ししました。http://48.jp

モジュールとコンポーネントとライブラリとプラグインの違いとは

コラム

モジュールとプラグインとライブラリとプラグインの違いがよくわからなかったので、まとめてみました。

それぞれの特徴

それぞれの特徴を理解するために共通点と相違点を考えてみます。

まず、モジュールとコンポーネントですが、一度定義を確認してみましょう。

モジュールとは

機能単位、交換可能な構成部分という意味の英単語。システムへの接合部(インターフェース)が規格化・標準化されていて、容易に追加や削除ができ、ひとまとまりの機能を持った部品のこと。

http://e-words.jp/w/E383A2E382B8E383A5E383BCE383AB.html

コンポーネントとは

何らかの機能を持った、プログラムの部品。ソフトウェアコンポーネントは、それぞれ特定の機能を持っているが、基本的に単体では使用できず、他のプログラムと組み合わせて機能を実現、ないし追加するために用いられる。また、オブジェクトの一種として、特定の機能を持つが単独では意味を持たないようなオブジェクト、と言うこともできる。

http://e-words.jp/w/E383A2E382B8E383A5E383BCE383AB.html

共通点として「部品」というキーワードがあげられています。 モジュールとコンポーネントはプログラムを構成する部品と考えればよさそうです。

相違点として、モジュールは「容易に追加や削除ができ、ひとまとまりの機能を持った部品のこと」とあります。 コンポーネントには、容易に追加や削除ができるとの記述はないので、この点がモジュールとコンポーネントをわける特徴のようです。

次にライブラリです。

ライブラリとは

ある特定の機能を持ったプログラムを、他のプログラムから利用できるように部品化し、複数のプログラム部品を一つのファイルにまとめたもの。ライブラリ自体は単独で実行することはできず、他のプログラムの一部として動作する。

http://e-words.jp/w/E383A9E382A4E38396E383A9E383AA.html

ライブラリもモジュールやコンポーネントと同じく部品とのことです。
特性として、「複数のプログラム部品を一つのファイルにまとめたもの」とあります。

いまいちコンポーネントとの違いがよくわかっていないのですが、ライブラリは、部品をまとめたもののようです。 ということは、部品であるモジュールやコンポーネントを複数まとめて構成されているものがライブラリなのでしょうか。
（* この解釈は僕の推測なので、もし間違っていたら教えてください）

次にプラグインについて考えてみます。

プラグインとは

ITの分野では、ソフトウェアに機能を追加する小さなプログラムのことを指す場合が多い。 多くのソフトウェアには外部のプログラムを追加することで機能を拡張できるような機構を備えており、追加するソフトウェアのことをプラグイン(プラグインソフトウェア)という。ほとんどのプラグインは単体では動作せず、本体のソフトウェアに追加しなければ機能しない。プラグインはソフトウェア製作者が提供する場合もあるが、仕様が公開され、第三者が自由にプラグインを開発・公開できるようになっていることも多い。

http://e-words.jp/w/E38397E383A9E382B0E382A4E383B3.html(http://e-words.jp/w/E38397E383A9E382B0E382A4E383B3.html

プラグインはモジュールやコンポーネント、ライブラリとは少し違って、「小さなプログラム」とあります。
本体のソフトウェアにオプションとして追加するためのソフトウェアですね。
プラグインといえば、ワードプレスのプラグインがイメージしやすいと思います。

まとめてみたものの

それぞれの特徴について考えてみましたが、プロジェクトや人によっても解釈が変わるようです。
いったい誰がこんな紛らわしい概念を考えたのでしょうか。
まあ、そうはいっても無くなることはないので、気になった部分は自分なりに考えてみると何かしら気づきがあるかもしれません。

ブラウザの互換モードはそろそろやめるべきではないか

f:id:sho-yamasaki:20130530140219j:plain

今更ながらという感じがしますが、ブラウザの互換モードはそろそろやめるべきではないかと思います。

なぜ互換モードはやめるべきなのか

互換モードとは古いブラウザでもレイアウトを表示できるようにするための仕組みです。
まだCSSが普及していなかった時代の過去のブラウザとの互換のために、 あえて標準仕様とは異なる解釈で表示するモードのことです。

しかし、現在多く使われているブラウザはCSS標準に準拠した解釈でページを表示するようになっています。
標準モードであれば、多くのブラウザで同じ表示になるのですが、互換モードの場合は一部解釈が異なる場合があります。

例えば、互換モードが原因で発生する問題の一つに、position:fixedの問題があります。
IE7,8で起こる問題のようですが、互換モードの場合、CSSのposition:fixedが正常に解釈されません。

このように、互換モードが原因で起こる問題があるのです。

「IE8とIE7のposition:fixed;にはまる」
http://blog.e-riverstyle.com/2013/04/ie8ie7positionfixed.html

なぜ、互換モードを使うのか

互換モードを使う理由は、IE6に対応するためではないでしょうか。

しかし、IE6のシェアや搭載されているOS（XP）のサポート終了勧告を考えると、メリットは少ないでしょう。
（現時点のIE6のシェアは日本で2.1%であり、IE6自身と搭載されているXP自体のサポートが2014/4で終了します）

サイトのブラウザシェアを考慮しないといけないでしょうが、多くのサイトではIE6のために互換モードを使う必要はないでしょう。

The Internet Explorer 6 Countdown
http://www.ie6countdown.com/

Windows XP/Office 2003 をご利用のお客様へサポート終了の重要なお知らせです | Microsoft
http://www.microsoft.com/ja-jp/windows/lifecycle/xp_eos.aspx

今後は標準モードを

互換モードのメリットはほとんどなく、デメリットのほうが多いのではと感じます。
もう更新しないサイトならともかく、今後も更新していくサイトは標準モードに準拠すべきです。

今後もHTML5の普及が進んでいくでしょうから、DOCTYPEはHTML5を使うとよいでしょう。

BBIQの無線LANの設定でハマったところ

ネットワーク

BBIQの無線LANの設定で思いのほかハマってしまったので、まとめます。

設定に関する情報

  • プロパイダ
    BBIQ

  • プロトコル
    PPPoE

  • 無線LANルーター
    CG-WLRGNXB

ハマったところ

  • PCでPPPoEの設定をしてはいけない
    PCと無線LANルーターどちらでも設定すると、うまく接続ができません。 PPPoEの設定自体は無線LANルーターで設定します。

  • 無線LANルーターのPPPoEブリッジ機能は無効にする
    これを有効にしていると、グローバルIPが割り当てられてしまい、ルーターの設定画面(192.168.1.1)が開けなくなります。 設定画面が開けなくなったときは、ルーターの初期化をすればアクセスできるようになります。

  • ルーターの簡単設定がうまく動かない
    簡単設定ではなく、WANの設定でsession-1などにPPPoEの設定をします。

Jenkinsctlをつくってみた

開発環境

以前、localのJenkins氏がゾンビ化してしまい、困ったことがあったのでコマンドラインから簡単に起動と停止ができるようにしてみました。

https://github.com/shoyan/jenkinsctl

jenkinsctl

Start & Stop Jenkins daemon on Mac OS X

Usage

start jenkins deamon

jenkinsctl start

stop jenkins deamon

jenkinsctl stop

Instllation

  1. Check out jenkinsctl into ~/.jenkinsctl.
    $ git clone git://github.com/shoyan/jenkinsctl.git ~/.jenkinsctl

  2. Add ~/.jenkinsctl/bin to your $PATH for access to the jenkinsctl command-line utility.

$ echo 'export PATH="$HOME/.jenkinsctl/bin:$PATH"' >> ~/.bash_profile
  1. Reload ~/.bash_profile
$ source ~/.bash_profile

sudoつけないとうまく動かないので、内部的にsudo叩いてます。（ちょっといけてない）
root権限が必要な場合って、どこにいれておくのがいいんですかねぇ。

5分でわかるHTML5の新機能

HTML5

f:id:sho-yamasaki:20130530142046j:plain

入門HTML5を読みました。
HTML5の概要を知るには、ボリューム的に丁度よかったです。
1〜3章をざっと読んでおけば、HTML5についてざっくり理解できると思います。

HTML5で追加された機能を備忘録として残しておきます。
各機能についての説明は、HTMLクイックリファレンスがわかり易かったので引用しています。

HTML5で新たに加わった機能

canvas要素

＜canvas＞タグは、図形を描く際に使用します。今までウェブページ上で図形を描くには、PNG・JPEG・GIFなどの画像に置き換えるか、Flashなどのプラグインデータを埋め込むのが一般的でしたが、＜canvas＞を使用することで、標準のHTMLやJavaScriptだけで、グラフやゲームグラフィックスなどの図形をすばやく表示できるようになります。 http://www.htmq.com/html5/canvas.shtml

video要素

＜video＞タグは、動画を再生する際に使用します。＜video＞タグを使用することで、ユーザーにFlashなどのプラグインをインストールしてもらうことなく、標準のHTMLからシンプルに動画を扱えるようになります。 感覚的には＜img＞タグで画像を扱うような感じです。
http://www.htmq.com/html5/video.shtml

inputタイプ

HTML5では、input要素に新しく autocomplete属性・ autofocus属性・ form属性・ formaction属性・ formenctype属性・ formmethod属性・ formnovalidate属性・ formtarget属性・ height属性・ list属性・ max属性・ min属性・ multiple属性・ pattern属性・ placeholder属性・ required属性・ step属性・ width属性 が追加されています。
http://www.htmq.com/html5/input.shtml

Web Storage

Web Storageは、ユーザーのローカル環境（ブラウザ）にデータを保存するための仕組みです。 データの保存・上書き・削除・全クリアなどの操作は、JavaScriptで行うことができます。
http://www.htmq.com/webstorage/

オフラインWebアプリケーション

HTML5では、インターネットに接続していないオフラインの状態でも、 ユーザーがウェブアプリケーション（ウェブサイト）を利用できるようにするための、 キャッシュマニフェストと呼ばれる仕様が追加されています。
http://www.htmq.com/offline/

Geolocation API

Geolocation APIは、ユーザーの位置情報を扱うためのAPIです。 http://www.htmq.com/geolocation/

ドラッグ＆ドロップ

ドラッグ＆ドロップとは、ウェブページ内の要素やローカル環境に保存されたファイルなどのデータを、 マウスで引きずるように移動させて他の場所に置く操作のことです。 HTML5以前にも、mousedownやmouseupなどのイベントで実現することはできましたが、 HTML5ではドラッグ＆ドロップ専用の新しいイベントや新しいメソッド・属性が追加されています。
http://www.htmq.com/dnd/

HTML5の新しい要素

section

＜section＞タグは、ウェブページ内のその部分が、一つのセクションであることを示す際に使用します。
http://www.htmq.com/html5/section.shtml

nav

＜nav＞は、ナビゲーションであることを示す際に使用します。ナビゲーションとは、ウェブサイト内の他のページへのリンクや、ページ内リンクなどのことです。
http://www.htmq.com/html5/nav.shtml

article

＜article＞タグは、内容が単体で完結するセクションであることを示す際に使用します。
http://www.htmq.com/html5/article.shtml

aside

＜aside＞タグは、その部分がウェブページ内における余談・補足情報のセクションであることを示す際に使用します。
http://www.htmq.com/html5/aside.shtml

hgroup

＜hgroup＞はセクションの見出しを表します。小見出しや副題など、見出しが複数の階層にある場合、＜h1＞-＜h6＞などの見出しセットをグループ化してまとめるために使用します。
http://www.htmq.com/html5/hgroup.shtml

header

＜header＞タグは、イントロダクションやナビゲーショングループであることを示す際に使用します。
http://www.htmq.com/html5/header.shtml

footer

＜footer＞タグは、直近のセクションのフッタであることを示す際に使用します。
http://www.htmq.com/html5/footer.shtml

time

＜time＞タグは、日付や時刻を表記する際に、グレゴリオ暦による日付や24時間表記の時刻で正確に示す際に使用します。 http://www.htmq.com/html5/time.shtml

mark

＜mark＞タグは、文書内の該当テキストをハイライトして目立たせる際に使用します。
http://www.htmq.com/html5/mark.shtml

HTML5の機能の検出

HTML5の機能はブラウザによってはサポートしていない場合があります。
それを簡単に検出できるライブラリとして、Modernizr.jsがあります。

Good bye MacPorts

mac

MacPortsからHomebrewに乗り換えました。

面倒くさそうな予感がしていましたが、案外簡単でした。

MacPorts をアンインストール

# port でインストールしていたパッケージ一覧をメモ
$ port installed > port_installed.txt

## MacPorts のアンインストールと関連ディレクトリの削除
$ sudo port -f uninstall installed
$ sudo rm -rf /opt/local/

# MacPorts 関連の環境変数（PATH など）の削除
$ vi ~/.bash_profile # MacPortsのPATHを削除
$ source ~/.bash_profile

Homebrewのインストール

ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)"

Homebrewでインストールしたパッケージが優先されるように設定

$ vi ~/.bash_profile
export PATH=/usr/local/bin:$PATH    ← 追加
# 環境設定を再読み込みして適用
$ source ~/.bash_profile

これで完了です。
あとは、最初にとっておいたportのリストを参考にパッケージを適宜brewでインストール。

rbenvでコンパイルしたRubyがMacPortsでインストールしたパッケージをみていたので、再コンパイルが必要でした。

こちらを参考にさせていただきました。
パッケージ環境の移行－MacPorts のアンインストールと Homebrew のインストール

プロトタイプを使ったコード再利用パターン

javaScript

今年はJavaScriptを勉強しようと思っていまして、ちょこちょこ本などで勉強しています。 おすすめなのが、JavaScriptパターンです。 中上級者向けとのことですが、多くの人におすすめできる良書だと思います。

今回はJavaScriptパターンでも紹介されている、プロトタイプを使ったコード再利用パターンを紹介します。 プロトタイプを使ったコード再利用パターンはよく使われており、JavaScriptの特徴を理解するうえでも重要だと思います。

プロトタイプを使って、親コンストラクタの機能を使用する

コンストラクタ関数Child()が別のコンストラクタParent()からプロパティ(name)を取得できるようにします。

// 親コンストラクタ
function Parent(name) {
    this.name = name || 'Adam';
}

// プロトタイプに機能を追加
Parent.prototype.say = function () {
    return this.name;
}

// 空の子コンストラクタ
function Child(name) {}

// 継承
Child.prototype = new Parent();

var kid = new Child();
console.log(kid.say()); // "Adam"

prototypeプロパティは関数ではなくオブジェクトを指すようにすべきです。こうすることで、new Child()を使ってオブジェクトを作成すると、Parent()インスタンスの機能がプロトタイプを介して得られます。

この方法の欠点
この方法の欠点は、子コンストラクタに渡したパラメータを、親コンストラクタに渡せない点です。

var s = new Child('child');
console.log(s.say()); // "Adam"

これは期待する結果ではありません。
パラメータを渡せるように改良してみます。

子コンストラクタから親コンストラクタにパラメータを渡すようにしたパターン

// 親コンストラクタ
function Parent(name) {
    this.name = name || 'Adam';
}

// プロトタイプに機能を追加
Parent.prototype.say = function () {
    return this.name;
}

// 子コンストラクタ
function Child(name) {
    Parent.apply(this, arguments);
}

// 継承
Child.prototype = new Parent();

var kid = new Child('child');
console.log(kid.say()); // "child"

これで、Childのパラメータを親コンストラクタに渡せるようになりました。

今回の内容は、JavaScriptパターンに詳しく載っています。
さらに詳しく学びたい方は、JavaScriptパターンを一読ください。