情報処理概論 第5回 10/31

Introduction to the Information Systems

前回の要約

• DOMの概要と、ブラウザでそれを調べる方法（CSSセレクタの準備として）
• CSSについて学んだ。
  1. CSSを書く場所
     ここはもう一度確認しておきましょう（ここを参照）
  2. CSSセレクタ
     CSSセレクタについては、説明不足な部分があるため、今回のslimの実習と並行して練習を行うことにする。
  3. 属性名と属性値
• 実際にHTMLファイルの中でCSSを使って各要素の表示属性を変えてみた （課題として取り組んだ（要提出））

CSSを学ぶ狙いと時代背景（補足として）

• 文書やページの、個別の要素に表現形式を指示するやり方 （ワープロ初歩で学んだような）を卒業して、 ルールを設定する発想の仕方（右図）を始めよう。
  • 小学校の算数で「鶴亀算」に苦労したは多いかもしれない。
    が、中学に入って方程式を立ててそれを解くことを覚えれば、 鶴亀算はその応用で簡単に解けるようになる。
  • 方程式による解法が、より確実で応用範囲の広い道具であることが（後から）わかった、のと同様に、
  • ワープロ等のオフィス系ソフトをアドホックに使う情報処理技術ではない、 応用範囲の広い技術を、我々は学んでいく必要があるだろう。
• GUIによるパソコン操作を通じて、画面上に表示されている要素を「これ」と指定する 方法は楽である（し、これが情報機器普及の原動力になった）が、
  内在的ルール（操作者がその操作を行う判断基準となった何らかのルール； 意識しているしていないにかかわらず）をコンピュータに伝達できない。
  • コンピュータがその内在的ルールを自動認識できるところまでソフトウェア技術は 進化・熟成していない。
• もちろんHTML（ひいてはWeb技術）の基本としての意味もある。

余談

• GUIに対するCUIという言葉は、昔はなかった （GUI技術が広まるのにつれて使われるようになった用語）。
• ワープロ（に類するWYSIWYG型のソフトウェア）は、
  • 文書や印刷物を作成するプロセス（従来は右図のように分業で行われていた） を一箇所（一人の作業者）で出来るようにした、という点で 社会に対して大きなインパクトを与えた。
  • がその反面、文書を書く人が自分の文章（内容）に専念できない環境 （結果（＝レイアウト、外見）がリアルタイムに見えてしまう）を作り出した、 と考えることもできるだろう。

Webのしくみ （HTMLの周辺技術）

テンプレートを使ってHTMLを作る

テンプレートについて

• テンプレートは画面生成（つまりHTML生成）のための型紙（右図）
  • プログラムでHTMLを生成
  • 値を流しこんだりもする
• 様々な書式のものがある
  • Slim と Jade（最近はPugに改名した）は（文法的に）似ている、 インデントによる構造表現
    
  • markdown(後日紹介します) と 似た部分があるが、 元来の目的は別
• なお、テンプレートという用語は、様々な分野で使われている。
  • ワープロ用語でもある。
  • 事務用品にもある（製図を手描きを行っていた時代には重宝した）。
  • 省略形で日本語としても定着しつつある。
• ここで紹介するWeb技術では、テンプレートという単語が様々な意味でつかわれる傾向があるようだ。
  • テンプレートを表現する言語（SLIM言語がその１つ）
  • それをHTMLに変換するエンジン（このあと導入するslimrbコマンドもその１つ）
  • それを前提に用意された、HTMLを作るための原稿（後述の、SLIM言語で書いたものもそれに含まれる）
• テンプレートエンジンでは（前述のように）プログラムが生成した値をページ内に展開し表示することができる。それを実現する方法は大別すると２つある。
  1. （何かのプログラミング言語で書かれた）プログラムから、テンプレートエンジンを呼び出す。
  2. テンプレート記述の中にプログラムを埋め込んで、必要に応じてプログラミング言語処理系が呼び出されて実行される。
  いずれにしても、テンプレートとプログラミング言語（の処理系）とが密接な関係を持つことが多い（プログラミング言語を選ばないテンプレート系もあるが）。
  • たとえば「ruby テンプレート」のように言語の名前を添えて検索することで、 その言語で使える（または親和性の強い）テンプレートエンジンについての情報が得られる （ただし上記の検索だと Ruby on Rails に関する情報も多い）。
  • このように様々なプログラミング言語のコミュニティでその言語に対応したテンプレートエンジンが（時にはアプリケーションフレームワークの一部品として）開発され使われている。
  • （お察しのように）Slimは、Ruby言語界で有力なテンプレートエンジンの１つ、ということになる。

slim を使うための環境整備

1. rubyの処理系がインストールされていることを前提とします。

   • まだの人は第一回資料などを参照して下さい。

2. コマンドプロンプトを開く(管理者である必要はない筈)。

3. proxyの設定（学内の場合; 詳細は別ページ資料）

   set http_proxy=http://proxy:3128/  
   set https_proxy=http://proxy:3128/  

   • 上記をコピペして使う場合、この各コマンドの末尾に余分な空白が入ると、うまく動作しない場合があるので、 （ドラッグ操作等で）選択を行う範囲に注意されたい。

4. インストール

        gem install slim

   • gem というコマンドは、第三者の作ったソフトウェアやツール（Ruby用）を集積した場所（リポジトリ）から、ソフトウェアを入手（インストール等）するための便利なツール（パッケージマネージャ；多くのプログラミング言語に用意されている）。
   • rubyをインストールした時期によって、SSLでのエラーが発生する人がいるかもしれません。
     その時は、「gem SSL 2016」で検索するか、 経験者による記事（例えばここ）を参照して 対処した上で、4．を再度実行して下さい。
     • このSSLエラーに関する解説を別ページに用意しましたので確認下さい。
     • RubyGemsの位置づけについては本ページの末尾にも補足説明あり。
     • なお、Webアクセスでよく見かける（サイトによっては自動的にHTTPからHTTPSに切り替わる） HTTPSという（Web用語でいう）「スキーム」は、 右図のようにHTTPの土台にSSLを差し挟んで、信頼性を向上させたもの。

   コマンドの動作

   • ruby, gem , slimrb といったコマンドを今般使っているが、

   • こうしたコマンドは、-v オプションをつけるとそのソフトウェアのバージョンを表示する、 というのが概ねお約束事になっている。

   • また、ruby, slimrb コマンドは、CUIでよくあるコマンドのスタイルを継承していて、

     コマンドのパラメータとして入力ファイル名を指定せずコマンドだけで呼び出した場合は そのプログラムで扱うべきソースコード（プログラムやページ記述等）を標準入力から 読み込むという動作をする（左図）。

     • その際は、ソースコードを端末から打鍵するか、エディタ等の画面からコピペで貼り付けることができる。
     • 入力が完了したら、入力終わりを示す操作として、Windowsでは Ctrl-Z Enter を入れることになっていることを覚えておこう（様々な場面で使われます）。

5. 動作確認

   slimrb -v  

   バージョン情報が表示されていればOK

6. 環境変数の設定 日本語文字列はUTF-8を使うことになる
   

   set RUBYOPT=-EUTF-8
   :: 永続的に設定するなら setx RUBYOPT -EUTF-8

7. エディタにプラグインを入れる（と、快適になる）

8. ソースを作成してみる。

   • 中身については次節を参照。 （このファイルをそのまま使ってもいい）。
   • 保存のとき、拡張子は .slim にする。
   • 場所は、自分が決めた場所ならいい。
   • コンテンツに日本語を使うときには、 文字コード（後述）について意識しながらやって下さい。
     • ややこしいと思う人は今日のところは、英語やローマ字だけでもOK。

9. 実行
   前項でファイルを保存した場所からコマンドプロンプトを開いて、
   （エクスプローラのアドレスバーにCMDと入力するなど）

   slimrb -p sample1.slim
                         # 画面に出力（表示）する

   または

   slimrb -p sample1.slim > sample1.html
                       # HTMLファイルに出力（ファルを生成）する

   • ここで、コマンドプロンプトを無造作に（たとえばスタートメニューから）起動して、 すぐに上記のコマンドを入力すると、おそらくうまくいかない （ファイルが見つからない、などのエラーになる）。
   • いまコマンドプロンプトがいる場所（カレントフォルダ； プロンプト文字 ’>’の左に表示されているパス名）がどこなのか確認されたい
     • システムのフォルダ c:\windows\system32 だったり、 ユーザプロファイルフォルダ c:\Users\xxxxx (xxxxx部分は自分のユーザ名) だったりしませんか。
     • さっきソースファイルを保存した場所と同じ？　別の場所？（別の場所だったら ファイル名を指定しても見つからない筈だ）
     • CDコマンドが使える人は、CDで然るべき場所に移動して下さい。
     • 詳しくは、コマンドプロンプトに関するガイド（ネットを探せば沢山あるが、 例えばここも使える）を参照。

書き方の概略

• HTMLは上図のようにタグを対にして書く。
  • これをもっと簡単に書くようにした（そのためにSLIMを使う）。
  • プログラミングの世界では、DRY(Don’t Repeat Yourself) という標語がある。
    同じワードを何度も繰り返さないでいいのが望ましい記法、ということになる。
• 要素の中身を、（HTMLの）タグで囲む代わりに、 slimでは以下のいずれかの場所に書く。
  • 要素名（タグ名）の右に書く。
  • 要素名の次の行以降に、（要素名よりも深く）字下げをして書く。
• 要素（タグ）の中に要素があるという入れ子の関係も、silmでは、 字下げの深さを変えることで表現する。

  	===>
  	===>

  • 逆に言えば、字下げの幅が文書の構造を表現することになるので、
    行の頭に不必要な空白を入れると、 混乱したり変換に失敗したりすることになるので注意。
• 詳しい情報は、以下のようなサイトを参照されたい
  1. 解説記事
  2. 開発者のサイト の、Readme.md
  3. その 解説文の和訳
• なお、slimは、haml, erb などと同様に、
  RAILS（Ruby on Rails ; 今度詳しく話します）など のフレームワークの（MVCモデルのうちの）V=View の部分を担当するため、
  変数や式の値を展開する機能がある（記号 = が使われている部分がそれにあたる）が、
  現時点ではHTMLを楽に記述するための道具として紹介しているので、これについては、軽く読み飛ばしておいていい。

補足

• p タグの中身（パラグラフ）は、p の右に書くか、 右図のように 次の行に 字下げして複数行に渡って書くことができる

  / SLIM
  doctype html
  p  複数行に
     渡ってパラグラフを
     書くことができる

• もしくは | (縦棒、パイプ）を使ってもいい

  / SLIM
  doctype html
  p
   |
      複数行に
      渡ってパラグラフを
      書くことができる

• もちろん右図のように HTML HEAD BODY といったタグを（HTMLの正式な文法に沿って）書いてもいい

ソースのサンプル

doctype html
css:
  h2 {background-color:yellow}
h2 タイトル
p パラグラフ
a href="http://www.google.co.jp" グーグルへのリンク
markdown:
  + markdown も
  + 書けますよ

補足：

• なお、上記のサンプルで、css: や markdown: といった（ コロン ’:’で終わる）疑似タグ）にぶら下がる部分は、
  タグに変換されるのではなく、
  slimが埋め込みエンジンを呼び出して処理を行う。

  • css: javascript: などのセクションは内蔵のエンジンを呼ぶ

  • markdown: は外部エンジンを呼ぶため、プラグイン（例えば（kramdown）を予めインストールしておく必要がある。
    （でないと変換時にエラーが発生するだろう）

    gem install kramdown

  • 上記の例は、当面は markdown: 以下の部分を 削除して変換の確認を行ってみて下さい。

日本語文字コードについて（補足）

別ページ解説も参照のこと。

• Unicode文字セットのエンコーディングの１つがUTF-8
• Windowsは標準でShift_JIS エンコーディングが使われる。
• が、HTML周辺の技術を使うにはUTF-8を使うのが適切なので、
• ３か所で文字コードのことに気を配っておく必要がある（右図）。
  1. 保存するときの文字コード
  2. プログラムが動作する際の文字コード
  3. Webで表示する際の、ブラウザに対する指示

SLIMを使うにあたって

• 先に紹介したRUBYOPT環境変数は、rubyでプログラムを動かす際のオプションを指示する ためのものである。
• slimを使うとき、ファイルをUTF-8 で作るならば、RUBYOPTを指示しておく必要がある。
  • このオプションがないと日本語を含むファイルを変換する時にエラーが発生するかも知れない。
  • 逆に、シフトJISで作るならばこのオプションは不要

パッケージマネージャについて（補足）

• 我々が目にするパッケージマネージャは以下の２つのカテゴリのいずれか （本科目ではその両方を活用するので混同しないように）。
  • 各ＯＳについて、その環境で動作するアプリケーションを管理するソフト：
    Windowsでは（サードパーティ製の）Chocolatey、Linuxでは （ディストリビューション毎に違うが）apt, yum, pacman等
  • プログラミング言語の処理系について、ライブラリやアプリケーションを管理するソフト：
    RubyにGem, Node.jsにNpm 等。
    但し、言語によっては ビルドツールがライブラリ管理を兼ねる（ScalaのSbt, JavaのMaven等）
• パッケージマネージャの殆どはコマンドラインで動かすのが標準的な使い方。 コマンドの使い方はどのパッケージマネージャでも概ね以下のような構成になっている。

課題

• slimをインストールし動作確認まで行う。
• 自分で簡単なSLIMファイルを作って、HTMLに変換してみる。
• できたかどうかをメールで報告（作成したSLIMファイルも添付してください）
  ==>