読者です 読者をやめる 読者になる 読者になる

「HTML+CSS入門ハンズオン!ゆるーくWebサイトを作ってみる会」好評でした!

f:id:ms2sato:20170420192349j:plain

TECH DRIVE佐藤です。TECH DRIVE ではブログだけではなくて、勉強会やセミナーも開催しています!
4/18に行われた「HTML+CSS入門ハンズオン!ゆるーくWebサイトを作ってみる会」もその活動の一つです。メンバーの小笠原氏によるハンズオンで、これまでにも何度か開催された実績のある会です。

最初はライブコーディングを交えたデモンストレーションと共にGoogleChromeのデベロッパー・ツールの扱い方をお伝えしました。
その後、会場のみなさんは資料を参考にしながらHTML/CSSを作り込んで行きます。途中でわからないことがあっても、講師が傍まできて一緒に考え、理解が深まるように丁寧にレクチャーをしてくれます。

f:id:ms2sato:20170420194940p:plain

ご参加いただいた方からは
「作り込まれている資料だったので凄いと思った」
「丁寧に説明受けられてわかりやすかった」
などの声をいただけました。

また、こういったセミナーでは「セミナー当日はわかったと思ったんだけど、いざやってみたらよく理解できていなかった」ということはよくあると思います。TECH DRIVEではそういった困りごとにお答えするために「【初心者歓迎】プログラミング相談所【もくもく作業でもOK】」を開いています。わからないことは再度講師に対面で質問できるので、フォローアップも万全です!
次回は 4/25、場所は同じ高田馬場 CASE Shinjukuさんにお借りして開催します。参加されて疑問点のある方も、参加できなかったけれども相談事のある方も奮ってご参加ください。
techdrive.connpass.com

初心者向けにできるだけ噛み砕いてみるオブジェクト指向 vol.3 コードの変更に対応する

はじめに

これまで、vol.0vol.1vol.2とたとえ話が続いているので「で、実際にコードではどうなるの?」と気になってくるのではないかと思います。これから複数回に分けて、実際にコードを書いていきながら確かめていきましょう。今回はコードに起こる変更のイメージを感じていただけたらと思っています。オブジェクトっぽいコードはまだ出てきませんので「こんなの楽勝!」という方は読み飛ばせるかもしれません。

シチュエーション

私は先輩プログラマに依頼されて、システムの一部の処理を書いています。まだ仕様は確定していないそうで、サンプルのコードを書いておき、そこから都合のいい部分を本当のシステムに移植するらしいです。先輩は「移植しやすいように作れよ」と言っていました。

ある規則に則って文字列を加工するのが私の担当箇所です。

ストーリー

お題0: カンマ区切り

「カンマで区切られている文字列を、標準出力に出す」 とりあえずこれを言われたので、下記のようなコードを書いてみました。

# 準備された入力の文字列をカンマ区切りで区切って一行ずつ出力する
str = "りんご,みかん,バナナ,いちご"

# ここの処理を作る
puts str.split(',')

どうやらこれはこれで良さそうです。初歩的な内容で書ける処理でしたね。

お題1: 数字と一緒に出力する

どうやら出力のフォーマットが決まってきた様子で、見やすいように行の先頭にインデクスを付けて出すようです。 というわけで、コードを変えてみました。

# 準備された入力の文字列をカンマ区切りで区切って
# 一行ずつインデクスと一緒に出力する
str = "りんご,みかん,バナナ,いちご"

# ここの処理を作る
str.split(',').each_with_index do |fruit, index|
  puts "#{index}:#{fruit}"
end

each_with_indexがわかれば大丈夫でした。

お題2: カンマとコロンに対応する

今度は入力の文字列のフォーマットも変わる様子です。カンマだけではなくて、コロンで区切られることもあるらしいです。 splitは正規表現にも対応している様子なので、一箇所の変更で済みました。

# 準備された入力の文字列をカンマまたはコロン区切りで区切って
# 一行ずつインデクスと一緒に出力する
str = "りんご:みかん,バナナ:いちご"

# ここの処理を作る
str.split(/[,:]/).each_with_index do |fruit, index|
  puts "#{index}:#{fruit}"
end

先輩によると、入力の文字列のフォーマットと、出力のフォーマットはまだ変更されるかもしれないとのことです。

お題3: HTMLタグとして出力する

出力をHTMLで出せないかと依頼があったので、次はこんなコードを書きました。ちょっとした改変でulタグにできて良かったです。

# 準備された入力の文字列をカンマまたはコロン区切りで区切って
# HTMLのULタグとして出力する
str = "りんご:みかん,バナナ:いちご"

# ここの処理を作る
puts '<ul>'
str.split(/[,:]/).each do |fruit|
  puts "<li>#{fruit}</li>"
end
puts '</ul>'

お題4: 状況によって出し分ける

先のお題はちょっと勘違いをしてしまいました。「HTMLでも出せるように」ということで、出し分けが必要だったんですね。条件分岐をするのだろうと思い、下記のようなコードを書きました。

# 準備された入力の文字列をカンマまたはコロン区切りで区切って
# HTMLのULタグとして出力する
str = "りんご:みかん,バナナ:いちご"
output_type = :ul
# output_type = :indexed # インデクス付きならこちら

fruits = str.split(/[,:]/)

if output_type == :ul
  puts '<ul>'
  fruits.each do |fruit|
    puts "<li>#{fruit}</li>"
  end
  puts '</ul>'
elsif output_type == :indexed
  fruits.each_with_index do |fruit, index|
    puts "#{index}:#{fruit}"
  end
end

先輩はあんまりいい反応ではなくて「これはこれで良いけれど、今後、出力の方法が増えるとif文がずっと続くの?ブツブツ…」みたいな感じなんですね。うーん、どうしたら良いんでしょう。

おしまいに

説明しやすいようにお題の内容はかなり簡単な処理です。本来はもっと複雑な処理の方が恩恵はあるのですが、最初は理解しやすいコードで感覚をつかんでいただければと思い、上記のような内容にしています。 実際の現場でお題4のコードでダメ出しされるのは、出力方法が余程変化するシステムでなければ無いと思います。長くなったので次回から上記のコードをより良い形に変えていきます。

一連のコードは下記から取得できます。

github.com

【セキュリティ対策は大丈夫 ?】SSL証明書の新規発行、更新手順をまとめてみた。【POODLE, RC4, etc.】

こんにちは。TECH DRIVEの齋藤です。

先日、管理しているサイトのSSL証明書の期限が切れそうになっているのに気づき慌てて更新しました。

毎回思うのですがSSLの更新って結構面倒ですよね。
私自身も手順を忘れることがあるのでまとめてみました。

今回は更新でしたが新しくCSR*1を発行するので新規発行と手順にほぼ変わりはないです。

環境

  • OS - Amazon Linux
  • SSL認証局・種別 - COMODO・PositiveSSL
  • Web Server - Apache + OpenSSL
  • 証明書の販売サイト - SSLストア

 ※ 下記手順はCentOS、他の認証局でも使えるかと思います。

AWS Certificate Manager

AWS使っているならACM(AWS Certificate Manager) 使えよって思うかもしれません。

私も最初はACMを使おうと思いました。
ただACM利用には下の条件があります。

f:id:shoheis:20170313115403p:plain

今回設定するインスタンスはElastic Load Balancingを使っていませんでした。
なのでこれから書く手順が必要だったわけです。

バックアップをとる

運用しているサイトでSSL証明書の設定をする時は必ず事前にサーバーや編集するファイルのバックアップをして、いつでも元に戻せるようにしてから作業してください。

発行手順

  1. 証明書の購入(新規 or 更新)とアクティベート
  2. アクティベートに必要なCSRの作成
  3. ホスト証明書の設置
  4. 中間証明書の作成
  5. 中間証明書の設置
  6. SSLの設定
  7. セキュリティのテストと強化

証明書の購入とアクティベート

まずはお使いのSSLを管理しているウェブサイトで証明書を購入しましょう。
購入後は証明書のアクティベート(署名の申請)が必要です。

私はSSLストアというサイトを使っているので、証明書の購入とアクティベートは表の流れになりました。

項目 購入の参考サイト アクティベート
新規証明書の購入 こちら*2の手順7まで 左記「購入の参考サイト」の手順8から
更新用証明書の購入 こちら 新規証明書の「購入の参考サイトの手順8」から

またアクティベートの際にはCSRが必要になります。

CSRの作成

まずはCSR作成に必要なプライベートキーを作成します*3

サーバーに接続し、 /etc/pki/tls/private/ に移動しましょう。

$ cd /etc/pki/tls/private/

新しいプライベートキーを作成します*4

$ sudo openssl genrsa -out private.key 2048

プライベートキーにアクセス制限をかけます*5

$ sudo chown root.root private.key
$ sudo chmod 600 private.key

作成したプライベートキーを使いCSRを作成します。

$ sudo openssl req -new -key private.key -out csr.pem

CSR作成のための情報の入力します(下表はCSRの入力例)。

項目 意味
Country Name 国コード JP
State or Province Name 都道府県名 Tokyo
Locality Name 市区町村名 Chuo-Ku
Organization Name 組織名 Example Corp
Organizational Unit Name 部署名 Example Dept
Common Name コモンネーム*6 www.example.com
Email Address 管理者のメールアドレス someone@example.com

参考

アクティベート時に貼り付けるので作成したCSRの中身をコピーしておきましょう。

CSRが作成できたらそれを使ってアクティベート を完了します。
アクティベートが完了するとSSL認証局からメールが届きます。
メールに添付してある証明書(ウェブの管理画面からでもダウンロードできます)を設置していきましょう。

ホスト証明書の設置

ホスト証明書はCOMODOのPositiveSSLではメールでYour PositiveSSL Certificate となっているファイルです。 「www_example_co_jp.crt」のような名前かと思います。
/etc/pki/tls/certs に移動します。*7

$ cd /etc/pki/tls/certs

ホスト証明書をこのディレクトリにあげて*8、アクセス制限をかけます。

$ sudo chown root.root www_example_co_jp.crt
$ sudo chmod 600 www_example_co_jp.crt

ホスト証明書の設置は以上です。

中間証明書の作成

認証局によっては中間証明書(または、つなげて一つのファイルにする作業)が必要になります*9
つなげる際は順番が大事なようです(このままコピーして使えばOKです、中間証明書の名前は任意です)。

$ cat COMODORSADomainValidationSecureServerCA.crt COMODORSAAddTrustCA.crt > intermediate.crt

中間証明書の設置

再度サーバーに接続後、 /etc/pki/tls/certs に移動します。
中間証明書をこのディレクトリにあげて
ホスト証明書より緩い形ですが、アクセス制限をかけます。

$ sudo chown root.root intermediate.crt
$ sudo chmod 644 intermediate.crt

中間証明書の設置は以上になります。

SSLの設定

mod_ssl の設定ファイル/etc/httpd/conf.d/ssl.conf を編集します。
ssl.conf をエディタで開き、下記の設定を追加しましょう*10

SSLCertificateFile /etc/pki/tls/certs/www_example_co_jp.crt
SSLCACertificateFile /etc/pki/tls/certs/intermediate.crt

念のためhttpdの文法チェックをしておきましょう。

$ apachectl configtest

「Syntax OK」と出たらサーバーを再起動します。

$ sudo service httpd restart

SSLの設定は以上になります。


参考として、別のサイトではSSLの設定を下記のようにしていました。
場合によってはこの書き方をしないと設定できないのかもしれません。

SSLCertificateFile /etc/pki/tls/certs/www_example_co_jp.crt
SSLCertificateKeyFile /etc/pki/tls/private/private.key
SSLCertificateChainFile /etc/pki/tls/certs/intermediate.crt

これで「https」でサイトにアクセスできるようになっているはずです。

セキュリティのテストと強化

デフォルトの状態だとセキュリティが弱い場合があります。Qualys SSL Labs などを使用して現在のセキュリティの強さをチェックしましょう。


Amazon Linuxのデフォルトの設定だと下記の脆弱性に対処できていません。

  • POODLE脆弱性
  • RC4 暗号化方式の脆弱性
  • 前方秘匿性の欠落による脆弱性

私も最初にチェックした時はこのような状態でした(Future Grade やばいですね)。

f:id:shoheis:20170313200218p:plain

上から順に対処していきます*11

POODLE脆弱性

/etc/httpd/conf.d/ssl.conf を編集します。SSLProtocol ディレクティブをコメントアウトします。

# SSLProtocol all -SSLv2

その行のしたに下記を追加します。

SSLProtocol -SSLv2 -SSLv3 +TLSv1 +TLSv1.1 +TLSv1.2
RC4 暗号化方式の脆弱性、前方秘匿性の欠落による脆弱性

「前方秘匿性の欠落による脆弱性」の対処が「RC4 暗号化方式の脆弱性」の対処を含む形になるので、変更は1箇所で大丈夫です。
SSLCipherSuite ディレクティブを探し、コメントアウトされていた場合はそのままの状態でその下に下記を追加します。

SSLCipherSuite ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA256:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA256:AES256-SHA256:AES:!aNULL:!eNULL:!EXPORT:!DES:!RC4:!MD5:!PSK:!aECDH:!EDH-DSS-DES-CBC3-SHA:!EDH-RSA-DES-CBC3-SHA:!KRB5-DES-CBC3-SHA


また再起動の前にはhttpdの文法チェックをしておきましょう。

$ apachectl configtest

「Syntax OK」と出たらサーバーを再起動します。

$ sudo service httpd restart

この状態で再度Qualys SSL Labs でチェックしてみましょう。ランクが上がっているはずです。

f:id:shoheis:20170313200958p:plain

以上でSSL証明書の設定は完了になります。お疲れ様でした!

主な参考サイト

今回は特にAWSのチュートリアルにお世話になりました。セキュリティの強化(特にRC4と前方秘匿性)は前回の更新時にはわからなかったので助かりました。下記サイト以外にも様々なサイトの助けを得ながら設定しました。

*1:認証局に提出する署名リクエストです。作成にはプライベートキーが必要で、セキュリティ上長年同じプライベートキーを利用するのは好ましくないのでそのキーと合わせて再作成します。参考

*2:RapidSSLですがPositiveSSLと手順に変わりはありません。

*3: Amazon Linux をお使いの方かつ新規作成時は既存のホストキー 「/etc/pki/tls/private/localhost.key」 をプライベートキーとして使ってもOKです

*4: よりセキュリティの強いキーの生成方法もあります。参考

*5: すでに private.key の所有者はrootなはずなので chownはやらなくていいのですが念のため書いています

*6:ユーザーがブラウザに入力するウェブアドレス

*7: 元の自己署名ホスト証明書 localhost.crt がある場合はそれを /etc/pki/tls/certs ディレクトリから削除します。

*8: 自分は scp でアップロードしました。 参考

*9:COMODOのPositiveSSLでは必要でした。他の認証局では必要がないかもしれません。適宜調べてみてください。

*10: 更新時に「ホスト証明書や中間証明書、プライベートキー」の「設置場所・ファイル名」が、前回の設定時と変わらない場合はssl.confを編集する必要はありません

*11:詳細はこのページを参考にしてください

ざっくりWebpack入門 Vol.2 babelでES6のトランスパイル

f:id:kabaneshi:20170307123107p:plain

こんにちは。TECH DRIVEの小笠原です。 Vol1につづき、本記事でもWebpackについてご紹介させていただきます。

今回はWebpackを使いES6で書かれたファイルのトランスパイルを行いたいと思います。

前提条件

  • 1.node.jsが導入済みのMac OSであること
  • 2.ES6やbabelが何か理解していること

Webpackについては、Vol1で触れておりますのでこちらに目を通していただければと。 dev.techdrive.top

また、本記事はWebpackでES6のトランスパイルを行うことに重きを置いておりますので、ES6やbabelの詳細に関しては割愛させていただきます。

Webpackの導入

今回はプロダクトが以下のディレクトリ構造であることを前提に進めます。

├── dist  // HTMLから呼び出されるJSファイル   
├── index.html  
├── src  
   └── js-es6 // ES6で書かれたJSファイル   
       └── person.js

まずは、前回同様にpackage.jsonファイルを作成しましょう。

npm init

つづけてWebpackのインストールを行います。

npm install --save-dev webpack

次に今回トランスパイルを行うために必要なloaderを導入します。

loaderについて

現状ES6を使用するには、babel等のトランスパイラが必要になります。
Webpackでは、loaderという機能を通しトランスパイラを使用します。

loaderは複数種類があり、npmとして提供されています。

loaderの導入

それでは、Webpack上でbabelを利用するために必要なloaderをインストールします。

npm install --save-dev babel-loader babel-preset-es2015

次にES6の文法を用いて書いたJSファイルを用意します。

src/js-es6/person.js

module.exports = function() {
    class Person {
        constructor(name) {
            this.name = name;
        }
        hello() {
            alert('My name is ' + this.name);
        }
    }

    var kevin = new Person('kevin')
    kevin.hello();
}

※ ES6の文法(class)を使用するため仰々しい書き方をしていますが、処理自体はブラウザ上でコードが実行された際、アラートダイアログが表示されるシンプルなものです。

設定ファイルの作成

続けてルートディレクトリ直下に設定ファイルを作成し、前回と同じようなノリでトランスパイル対象のファイル情報と出力先の情報等を書いていきます。
今回はloaderを使用するので、前回より設定項目が増えています。

webpack.config.js

module.exports = {
  // トランスパイル起点となるファイル(複数指定可)
  entry: {
    'person': './src/js-es6/person.js',
  },
  // トランスパイルされたファイルの出力先の情報
  output: { 
    path: __dirname + '/dist',  // パス情報
    filename: '[name].js'   // [name]には 、entryで指定したkey名が入る(今回の場合はperson)
  },
  module: {
    loaders: [  // 使用するloaderに関する情報を記載
      { 
        test: /\.js$/,  // トランスパイルを行うファイルの正規表現
        exclude: /node_modules/, // 除外ファイル 
        loader: "babel", // 使用するローダー
        query:{
          presets: ['es2015']
        }
      }
    ]
  }
};

loaderを扱うためmoduleloadersというプロパティを記載しています。
Webpackでは複数のloaderを利用することができるため、loadersの値は配列となり、loader毎に設定情報を記載します。

トランスパイル実行

これでトランスパイルを行うための準備ができました。
webpackコマンドを実行してみましょう。

webpack

dist直下にトランスパイルされたファイルが入っていれば成功です!
試しに出力されたJSファイルをHTMLファイルから呼び出し、期待通り動作することを確認してみましょう。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
</head>
<body>

<script src='./dist/person.js'></script>
</body>
</html>

アラートダイアログで「'My name is kevin」と出力されれば、今回の目的は達成です!

まとめ

いかがでしょうか?今回ご紹介させていただいたloaderという機能は、Webpackの核となる機能といっても過言ではありません。
今回は触れませんでしたが、loaderを使用することでJSファイルからHTML/CSSファイルや画像ファイルを呼び込むことができ、HTML/CSS/JSをまとめたコンポーネントを作成することも可能です。

loaderの詳細に関しては、今後の連載の中でも触れていきますが、まずは入門編として本記事をお役立ていただけたのなら幸いです。

初心者向けにできるだけ噛み砕いてみるオブジェクト指向 vol.2 言葉を整理してみる

はじめに

dev.techdrive.top

上記の続きです。規格化することで様々な恩恵があるということをたとえで書いてみたのですが、読んでくださった方から

「USBケーブルの話が実際のプログラミングでの言葉ともっと繋がっているとよりわかりやすそう」

との意見をいただいたので、当初予定していなかったこの回を挟んでみました。実際考えてみると、このようなブリッジになる回はあったほうが良さそうに感じます。

今回は言葉がたくさん出てきますが、今丸暗記する必要はありません。ただ、今後の説明の中にはこれらの言葉が出てきます(これらの言葉を出さずに説明していくと冗長になって、かえって分かりにくくなってしまうので、積極的に使っていきます)。もしも言葉に混乱してしまったら、ここへ戻ってきていただければイメージが掴みやすくなると思います。というわけで行ってみましょう。

オブジェクト指向の道具たち

クラス

オブジェクト指向という話が出てきた時に、クラスの話が出ないことはほぼないと思います。 クラスは独自に新しい型を作るための仕組みです*1。主に下記の二つが幹になっています。

プロパティ

あるオブジェクトが持っている変数です。 クラスによって複数の変数をまとめて扱える、と考えても大きな間違いではないと思います。構造体という言葉がわかる人には、この性質は構造体と同じ理解でも概ね問題ないでしょう*2。 USBケーブルの話だと、ケーブルの長さやケーブルの色などがプロパティになる可能性が高いです。 インスタンス(後述)が持つ変数なので「インスタンス変数」と呼ばれたりもします。

メソッド

あるオブジェクトが持っている関数です。 プロパティの説明に寄り添えば、クラスによって複数の関数をまとめて扱えるということになります。クラスが持っている機能と言っても良いかもしれません。 USBケーブルの話だと、ケーブルを挿して別のものと繋ぐことができるという「動作」がメソッドになると理解すると良いと思います。

インスタンス

クラスは設計図のようなものなので、実際に使う場合には製品をつくるような実体化が必要になります。 インスタンスは設計図を実体化したものです。当然設計図に書かれた内容の性質をインスタンスが持つことになります。インスタンスのことをオブジェクトという言葉で表現する場合もあります*3

f:id:ms2sato:20170227020045j:plain

参考のコード

参考に、rubyでクラスを使ったコードを書いてみました。

#######################################
# ケーブルのクラス(設計図)を作る
#######################################
class BasicUsbCable 
  def initialize(length)
    @length = length # @length というプロパティを用意しています
  end

  # 長さチェック用のメソッド。
  # 届かせたい距離を distance として与えると、そこに届くかを判断してくれます。
  def reachable?(distance)
    @length > distance # 届くかのチェックは @length が距離よりも長ければ届く
  end

  # 接続用のメソッド。
  # USBDeviceを実装している device を渡せばいい感じにつながります。
  def connect_to(device)
    # 何か動作がいろいろとあるはず
  end
end

#######################################
# 以下は実際にBasicUsbCableを使うところ
#######################################

# 長さ3のケーブルを一つ作る。cable1はインスタンスです。BasicUsbCableクラスで定義した機能を持ちます。
# [クラス名].new するとインスタンス化されます。
cable1 = BasicUsbCable.new(3) 

# cable1に対して長さチェックをするメソッドである reachable? を呼び出します
cable1.reachable?(5) # 5の長さは届かないので false
cable1.reachable?(2) # 2の長さは届くので true

device = GreatSpeaker.new # GreatSpeakerはUSBケーブルで繋げる別のクラス。deviceはインスタンスです。
cable1.connect_to(device) # connect_toで接続する。


# 同じBasicUsbCableから別のケーブルも作れます
cable2 = BasicUsbCable.new(10) # 長さ10のケーブルのインスタンスを cable1とは別に 一つ作る
cable2.connect_to(device) # deviceには二本のケーブルが挿さっている

インターフェース or ダックタイピング

言語(今はその表現で許してください)によってはインターフェースという概念が提供されています。 これは持っているべきメソッド群をまとめた規格を表したものです。前回の内容でもありましたが、インターフェースが一致すると交換可能になります。

インターフェースが言語仕様に無いものの場合「持っているメソッドが(たまたまでも)同じだったら、同じ規格」と決めてしまうことがあります。 「アヒルのようなものはみんなアヒルとみなす」ということからダックタイピングと呼ばれています。

よく言われている機能や概念

道具としては上記のクラスを中心に行っていきますが、クラスの持つ機能や、よりよく作るための 概念として以下のようなものが有名です。

継承

あるクラスをもとにして、別のクラスを作ることです。 すでに完成しているものに対して新しい機能を追加したり、 途中まで作られた半完成品クラスを用意して、中身を入れて完成クラスを作るような方法で使います。 f:id:ms2sato:20170227022238j:plain

ポリモーフィズム(多態)

元々の意味合いとしては「同じ名前で機能の違うメソッドを色々なクラスに定義できる」ということなのですが、これだけだと何が嬉しいのかピンと来ないですよね。少し使いこなせると 「同じインターフェースを実装することで、差し替え可能にできる」というようなメリットを感じることができます。

このことはUSB規格を実装してさえいれば、別のケーブルを持ってきても挿し替えて使えたことと似ています。 f:id:ms2sato:20170227022244j:plain

カプセル化

「中のことをよく知らなくても使える」ように作ることです。 USB規格は「挿せば繋がる」ということを決めているので、USBケーブルの材質や、ケーブルの詳細な仕組みまでわからなくても使えることと似ています。 f:id:ms2sato:20170227022250j:plain

おしまいに

ちょっと色々な言葉が出てきていますが、よく出会う言葉でもあるので一度整理しておくと学習がはかどると思います。ちなみに、これらの基礎を私は多分「憂鬱なプログラマのためのオブジェクト指向開発講座」などで学んだと思うのですが(20年も昔の話なのでもう忘れてしまいましたが)、今の人たちはどんな方法で学ぶのでしょう。良書だったり、良WEBサイトがあったら是非知りたいです。 続き書きました

*1:String型やInteger型を普段使ってプログラミングしているかもしれませんが、これと同じようなものを自分で作れるということですね。

*2:クラスを「構造体に加えてメソッドも保有できるようにしたもの」という理解をする場合もあります

*3:この文章でもプロパティやメソッドの説明で「オブジェクト」と書いてしまいました

【インフラ初心者向け】Dockerで作るRuby on Rails 開発環境 第2回『 DockerfileでRailsの開発環境を作ってみよう(準備編) 』

こんにちは。TECH DRIVEの齋藤です。

前回の 「Docker概要、メリットをざっくりと」

dev.techdrive.top


に続きDockerfileを使ってRuby on Railsの開発環境を作成していきましょう。
前回の章立ての中では1エントリーで「DockerfileでRuby on Railsの開発環境を作成する」ところまで書こうかと思っていたのですが
1エントリーで書ききれなかったことと、その前にDockerfileの基本的な部分を抑えておくためにも準備編を追加しました。

まず、Dockerfileの作成に入る前にDockerの基本用語であるDocker イメージついて触れてみたいと思います。

Docker イメージ

前回の記事でDockerを使えば「コンテナ」と呼ばれる仮想的なマシンが構築できると紹介したかと思います。
「 Docker イメージ」はそのコンテナの雛形になります。Dockerではこの「イメージ」を元にコンテナを生成します。

Docker イメージ の使い方とDockerfileについて

Docker イメージを使用してコンテナを生成し、そのコンテナ内で手作業でOSやミドルウェアの設定をする方法と、
元になるDocker イメージの指定とOSやミドルウェアの設定をファイルにまとめて、それを元にイメージの作成 + コンテナの生成をする方法があります。

f:id:shoheis:20170221015948j:plain

今回ご紹介するDockerfileは後者の方法です。毎回手作業でインフラを構築するのは単純に時間がかかることもありますし、
ミスも必然的に多くなります。Dockerfileを使えば設定はコードとしてファイルにまとめることができコマンドを使って
簡単に設定情報通りのイメージを構築することができます。これでより管理がしやすくなり時間とミスを減らすことにつながるというわけです。

Dockerのインストール

Dockerを動かすためにはインストールが必要です。下記からインストールしておきましょう。

Dockerfileの書き方

ではDockerfileの書き方に簡単に触れてみようと思います。
まずDockerfileという名前のファイルを用意します。Dockerfileには元になるイメージの名前と
その設定情報をコードで書いていきます。コードは「命令 + 引数」という形です。

FROM命令

元になるイメージの指定は「FROM 元になるイメージ名」という形で書きます。
こんな感じです。

FROM centos

このイメージ名は誰が決めているの?置いてある場所は?という疑問があると思います。
イメージ名はイメージを作った人が決めています。置いてある場所はDocker Hubです*1
このFROMの感覚はGitでいうCloneに近い気がします。イメージ名はGitでいうリポジトリ名。DockerHubはGitHubのような感じです*2
ちなみに「centos」は公式のリポジトリとして公開されているイメージ名です。

RUN命令

もうひとつほとんどのDockerfileで使う命令が
「RUN 実行するコマンド」の書き方になります。
こんな感じです。

RUN yum -y install git

「yum -y install 」はよくみるコマンドですね。試しに今回はこの状態でイメージを作成してみましょう。
今のDockerfileの中身はこの状態です。

FROM centos
RUN yum -y install git

Dockerfileからイメージを生成

Dockerfileからイメージを生成するには「docker build」を使います。
Dockerfileを置いたディレクトリで

$ docker build -t sample:1.0 .

と打ってみましょう。イメージが生成されます。ここでの「sample」はイメージ名で「1.0」はタグになります。イメージを作成する時はタグをつけると管理がしやすくなります。
イメージの一覧を確認するためには「docker images」コマンドを使います。

$ docker images

元になるイメージ「centos」と今作ったイメージ「sample」が表示されるはずです。

REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
sample              1.0                 929b83ac4d62        11 seconds ago      315 MB
centos              latest              67591570dd29        2 months ago        192 MB

イメージからコンテナを生成

コンテナの生成+起動には「docker run」を使います。

$ docker run -it --name "test01" sample:1.0 git --version

git version 1.8.3.1 (こんな表示がされるはず)

「--name "test01"」はコンテナ名「test01」をつけるオプション、「sample:1.0」はイメージ名とタグ、「git --version」はコンテナで実行するコマンドです。「-it」オプションを使うと結果をコンソールに表示することができます。
コンテナの一覧は「docker ps」を使います。

$ docker ps -a

「-a」は起動していないコンテナも表示するためのオプションです。

CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS                          PORTS               NAMES
f1a8f40b1113        sample:1.0          "bin/bash"          3 minutes ago       Exited (0) About a minute ago                       test01

「gitがインストールされたcentosのイメージ」のコンテナ「test01」が生成されたのが確認できるはずです。
作成したコンテナを削除してしまいましょう。
削除は「docker rm コンテナ名」です。

$ docker rm test01

今回はDockerfileを使ったRuby on Rails開発環境の構築に入る準備編を書きました。


最後に今回のコマンド一覧を書きます。

$ ls
Dockerfile

$ cat Dockerfile
FROM centos
RUN yum -y install git

$ docker build -t sample:1.0 .
(色々表示される)

$ docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
sample              1.0                 929b83ac4d62        11 seconds ago      315 MB
centos              latest              67591570dd29        2 months ago        192 MB

$ docker run -it --name "test01" sample:1.0 git --version
git version 1.8.3.1

$ docker ps -a
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS                          PORTS               NAMES
f1a8f40b1113        sample:1.0          "bin/bash"          3 minutes ago       Exited (0) About a minute ago                       test01

$ docker rm test01
test01

$ docker ps -a
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS               NAMES

$ docker images ( docker rm コンテナ名 でコンテナは削除されるがイメージは残る)
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
sample              1.0                 929b83ac4d62        26 minutes ago      315 MB
centos              latest              67591570dd29        2 months ago        192 MB

次回は実際にRuby on Rails開発環境の構築とDockerfileのより細かい説明をしていきたいと思います。

*1: Docker Hubだけではないですがここではそう紹介します

*2: GitもGitHubだけではないですよね

ざっくりWebpack入門 Vol.1

こんにちは。TECH DRIVEの小笠原です。
今回は、昨今話題のWebpackについて、自分が学習時に苦労した点などを踏まえ、ご紹介したいと思います。

Vol1の本記事ではWebpackを使ってJavaScriptファイルのモジュール化と依存関係を管理する方法をご紹介します。

Webpackって何者?

モジュールバンドラーと言われるものらしいです。 モジュール(まとまった機能)をバンドルする(束ねる)ツール。
Webpackにおけるモジュールとは、Webサイトを構成するおおよそ全てのファイル(JSはもちろんHTML/CSS/画像ファイルまで)を指します。

f:id:kabaneshi:20170214155041p:plain

何やら壮大なことができそうですが、壮大すぎてよくわからない。
「全てがモジュール?」「画像ファイルもモジュールなの?」等、Webpackに出会った当初この辺りの感覚が中々掴めずに頭を悩ませました。

最初から全ての機能を理解しようとするのは骨が折れそうなので、本連載では少し話を小さくして、毎回Webpackで行える一部の機能をピックアップしながら、少しずつご紹介していきたいと思います。

本記事でやること

冒頭でも触れた通り、Vol1の今回はWebpackでJavaScriptファイルのモジュール化と依存関係を管理する方法について触れていきます。
環境はnpmが導入済みのMac OSを想定しておりますので、予めご了承くださいませ。

モジュール化について

Webpackの話に入る前に少しモジュールについても触れておきます。
複数の処理が無秩序に書かれたコードは可読性が悪かったり、バグの温床になりがちです。
解決策の一つとして、コードを機能単位で分割(部品化)し、名前をつけて管理する方法があります。
上記を実現するための方法の一つがモジュール化です。 (少々乱暴な言い方ですが)

モジュール化を行うメリットとしては、以下のようなことがあります。

  • どこに何が書いてあるのかが把握しやすい
  • 一度書いたコードを再利用しやすい

JSではモジュールをどう実装すべきかを定義したガイドブックのようなものが複数存在します。(CommonJSやAMDなどがこれに当たります)
しかし、現状ブラウザで動作するJSではガイドブックのルールに従い実装されたモジュールを取り扱う機能がないため、Webpack等のツールを導入しこれを実現します。

依存関係の管理について

JSファイルの依存関係についても少し触れておきます。

依存関係の考慮が必要な例として、jQuery等の外部ライブラリの利用が挙げられます。
当然ですが、jQueryの機能を使用して書かれたコードは、jQuery本体のファイルが先に読み込まれている状態でなければ動作しません。
依存関係とはこのように「あるファイルに書かれたコード」が「別のファイルのコード」に依存している状態を指します。

依存関係は、大抵以下のようにHTMLに記載するscriptタグの順番で管理を行います。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>webpack sample</title>

   <script src="./js/common/hoge.js"></script>
   <script src="./js/common/huge.js"></script>
   <script src="./js/main.js"></script>
</head>

scriptタグはasync等の属性を指定しないかぎり、頭から順番に実行が行われ、先頭の処理が完了するまで次のファイルが実行されることはありません。
そのためjQuery等の「依存されるファイル」は頭の方に書きます。

しかし、依存関係の考慮が必要なファイルが増えてきたりHTMLファイルが多い場合等は、scriptタグでの依存関係管理は煩わしさがあります。
以下では、この煩わしさを解消する方法をご紹介します。

Webpackの導入

前置きが長くなってしまいましたが、ここからは実際のコードを用いて説明をしていきたいと思います。
今回はプロダクトが以下のディレクトリ構造であることを前提に進めます。

├── dist  // HTMLから呼び出されるJSファイル   
├── index.html  
├── src  
   └── js // モジュール化されたJSファイル群  
       ├── entry.js  
       ├── main.js  
       └── sub.js  

まずは、ディレクトリ直下で以下のコマンドを実行し、package.jsonファイルを作成しましょう。

npm init

いくつかの質問が続いた後に、package.jsonが作成されていれば成功です。 つづけてWebpackのインストールを行います。

npm install --save-dev webpack

これでWebpackを利用するための準備ができました。

必要なファイルの準備

次にモジュールファイルの準備を行っていきます。
今回は上記で少し触れたCommonJSのルールに従いモジュールの定義や呼び出しを行います。
まずはsrc/js直下に以下の2つのファイルを用意します。

  • src/js/main.js
    main.jsの中身は実行時にアラートダイアログを表示するだけのシンプルな処理です。 module.exportsに代入をしている関数がモジュールとなります。
module.exports = function() {
  alert('Hello world');
}
  • src/js/sub.js
    sub.jeの処理は実行から2秒後にアラートダイアログを表示します。
module.exports = function() {
   setTimeout(function(){ alert('Hello webpack'); }, 2000);
}

次に作成したモジュールを呼び出し、実行するためのファイルを作成します。
CommonJSではrequireという仕組みを通し、exportsに追加したモジュールにアクセスを行いますので、そのように書きます。
src/js/entry.js

// モジュールファイルの呼び出し
var main = require("./main"),
    sub = require("./sub");

// モジュールの実行
main();
sub();

先ほど、依存関係について触れましたが、ここではentry.js内のコードが依存する処理をrequireを使って呼び出しています。
呼び出し元や呼び出し方が違うだけで、これはHTMLから外部のJSファイルを呼び出すのとよく似ています。
Webpackを使用することで、このようにJSファイル内で依存関係を管理できるようになります。

Webpackで使用するファイルについて

ここで、これまで作成をしてきたファイルについて少し整理をしてみたいと思います。

f:id:kabaneshi:20170214173314p:plain

  • 1. モジュール郡
    機能単位で分割されたファイル。
  • 2. エントリーポイント
    分割したモジュールファイルの呼び出しや実行処理を記載するファイル。
    このファイルをビルドすることで、複数のJSファイルが一つに結合される。
  • 3. 実行ファイル
    2のビルド結果。HTMLから呼び出されるファイル。

JSファイルの結合と実行

最後にentry.jsをビルドし、dist直下に出力してみたいと思います。

今回のルートディレクトリ直下で以下のコマンドを実行してください。
webpackコマンドの第一引数にエントリーポイントのファイル情報、第二引数に結合されたファイルの出力情報を渡します。

webpack src/js/entry.js dist/build.js

コマンド実行後、dist直下にbuild.jsが作成されたことを確認してみましょう。

結合ファイルの実行

作成したbuild.jsをHTMLファイルから読み込んだ際に期待した結果になることを確認してみましょう。 ルート直下にindex.htmlファイルを作成します。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
</head>
<body>

<script src='./dist/build.js'></script>
</body>
</html>

index.htmlをブラウザで開いた際に、アラートダイアログとして「Hello world」が表示され、それを閉じた2秒後に「Hello webpack」が表示されれば成功です。

設定ファイルの作成

webpackコマンド実行時にいちいち引数でファイル名を渡すのは、面倒かと思います。
これは、設定ファイルを作成することで解決できます。
ルートディレクトリ直下にwebpack.config.jsというファイルを作成し、以下の内容を記載してください。

webpack.config.js

module.exports = {
     entry: './src/js/entry.js', // ビルド対象のファイル情報
     output: {
          filename: "./dist/build.js" // 出力先のファイル情報
     }
};

上記のようにentoryにエントリーポイントのファイル情報、outputに出力情報を記載することでwebpackコマンドのみでファイルの結合/出力が実行できます。

まとめ

いかがでしょうか?本記事を通して少しでもWebpackの輪郭をつかんで頂けたのなら幸いです。

Vol2ではWebpackのloaderという機能を使いES6のトランスパイルをする方法をご紹介したいと思います。

TECH DRIVEについて

TECH DRIVEは「技術者の成長を加速させる」をキーワードに都内で活動をしているコミュニティです。
TwitterやFacebookにて技術ネタやイベント情報の発信を行っていますので、ご興味があれば、いいねやフォローをお願いいたします。