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

Introduction to the Information Systems スタイルの概念

前回の要約

ルール

CSSを学ぶ狙いと時代背景(補足として)

余談
GUI

Webのしくみ (HTMLの周辺技術)

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

テンプレートについて

テンプレート テンプレート

slim を使うための環境整備

手順 先行手順

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

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

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

    set http_proxy=http://proxy:3128/  
    set https_proxy=http://proxy:3128/  
    • 上記をコピペして使う場合、この各コマンドの末尾に余分な空白が入ると、うまく動作しない場合があるので、 (ドラッグ操作等で)選択を行う範囲に注意されたい。
  4. インストール

         gem install slim

    コマンドの動作

    • 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. ソースを作成してみる

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

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

    または

    slimrb -p sample1.slim > sample1.html
                        # HTMLファイルに出力(ファルを生成)する
書き方の概略
HTML
補足
ソースのサンプル
doctype html
css:
  h2 {background-color:yellow}
h2 タイトル
p パラグラフ
a href="http://www.google.co.jp" グーグルへのリンク
markdown:
  + markdown も
  + 書けますよ
補足:

文字セット概要
日本語文字コードについて(補足)

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

SLIMを使うにあたって

パッケージマネージャについて(補足)

パッケージマネージャ
第1語 第2語 第3語
コマンド名 動作 パッケージ名
(パッケージマネージャの名前) install,update,uninstall 等
パッケージマネージャ2

課題