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

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(後日紹介します) と 似た部分があるが、元来の目的は別

slim を使うための環境整備

1. rubyの処理系がインストールされていることを前提とします。
   • まだの人は第一回資料などを参照して下さい。
2. コマンドプロンプトを開く(管理者である必要はない筈)

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

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

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

4. インストール

    gem install slim  
   

   • rubyをインストールした時期によって、SSLでのエラーが発生する人がいるかもしれません。 その時は、「gem SSL 2016」で検索するか、 経験者による記事 （例えばここ） を参照して対処した上で、3．を再度実行して下さい。
   • このSSLエラーに関する解説を別ページに用意しましたので確認下さい。
   • RubyGemsの位置づけについては本ページの末尾にも補足説明あり。
   • なお、Webアクセスでよく見かける（サイトによっては自動的にHTTPからHTTPSに切り替わる） HTTPSという（Web用語でいう）「スキーム」は、 右図のようにHTTPの土台にSSLを差し挟んで、信頼性を向上させたもの。

5. 動作確認

    slimrb -v  
   

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

   ===> 今日はここまでとし（各自でここまで実施して下さい）、

   以下は来週、続きをやります。

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

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

7. エディタにプラグインを入れる（と、快適になる）
8. ソースを作成してみる。拡張子は .slim

9. 実行

    slimrb -p sample1.slim
   

   または

    slimrb -p sample1.slim > sample1.htm
   

（以下は次回にまわします）

書き方の概略

ソースのサンプル

（以下の補足説明は読んでおいて下さい）

日本語文字コードについて（補足）(別ページ)

SLIMを使うにあたって

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

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

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

　課題

• slimをインストールし動作確認までを行っておいて下さい。
• できたかどうかをメールで報告