{::options enable_coderay="false"/}
<title>情報処理概論 第13回</title>

## 情報処理概論					第13回 1/11
Introduction to the Information Systems

### 前回の要約
+ jQueryの使い方の基礎を学んだ
+ 練習課題として、jQueryで要素を点滅させるページを作る
  こととし、宿題とした。

### 復習と発展

#### Webページ上でのDOM操作に関する諸技術（おさらいを兼ねて）

* [開発ツールを使う(おさらい)](11_2.html#section)

1. [原始的な方法（非可逆）](11_2.html#section-1)
2. [HTMLの断片から要素（群）を作らせる](11_2.html#html)
3. [ネイティブ関数で丁寧に作る](11_2.html#section-2)
4. [ネイティブ関数で複数要素の操作（とイベント処理）](11_2.html#section-3)

#### 点滅の方法いろいろ

1. CSSで => [ソース](12-8.slim)
   * CSS animation で 対象の opacity属性を変化させている。
2. ネイティブ関数で => [ソース](12-5.slim)
   * 提示したプログラム例では、対象要素の CSS属性「opacity」
    （透明度）の値として、0, 100 を切り替えているが、
   * 他に visibility の値を 'visible', 'hidden' の
     間で切り替えるという方法もあるだろう。
     ![アロー](13_4.png){:.smaller}
3. jQueryで => [ソース](12-6.slim)
   * なお、このソース（を含む、このテーマで提示しているいくつかのプログラム例）で、
     `function () {...}` と書く代わりに `()=>{...}`
     と書く記法（アロー関数）を使っている。  
   * アロー関数はコードの読みやすさを向上させるが、
     動作の微妙な違いにより、jQuery等のライブラリを使うときに
     注意が必要なこともある。

##### 補足：本科目の狙い

+ かつては、 「情報処理」は概ねプログラミングを意味していた。その背景として
  1. プログラムを作らなければコンピュータが使えなかった。
  2. 情報システムが今ほど複雑ではなかった（単体のコンピュータ）。
  3. ソフトウェア資産の流通や共有が行われていなかった。

  |![プログラミング+α](13-5.png)|
  |プログラミング+α|
  {:.smaller}
+ 情報システムのありかたが大きく変貌をとげた今、情報技術の姿も変わってきた。
+ アプリケーションを構築する時に、土台となる技術：
  + 従来はプログラミング言語がその根幹
  + Webベースでのアプリケーション作成が普及してきた（Web技術が土台に浸透）
  + 作成したアプリケーションを運用する技術も必要となってきた（運用技術としてのWeb）
  + （右図のように上と下に浸透してきたイメージ）

  |![道具とのつきあい](13-6.png)|
  |道具とのつきあい|
  {:.tiny}
+ それに加えて、多数の既存ソフトウェア資産が容易にネットで入手可能になった。
  + システムを１から作ることよりも、既存資産の中から
  + 使える道具を見つけ出し、
  + それらを組み合わせる、
  + という技術が重要になってきた。
+ といった状況に対応すべく、Web周辺の（組み合わせて使うことができる）
 　諸技術の修得（もしくは概要を知る）ことをめざしている。

* また、本科目では、あることを実現するために[方法がいくつもある](http://d.hatena.ne.jp/keyword/TMTOWTDI)ことを提示してきた。
* 高校までの情報処理（に限らず）の授業では（大学の授業でも）単一の解を提示されて、
  それに沿って実習を行うケースが多い。
  * これは多分に実施側の事情による
* 諸君は情報処理において複数の技術の中から適切なものを選ぶ方法（や考え方）を知っておくべきである。

|![いくつかの並行する技術](13-1.png)|
|いくつかの並行する技術|
{:.small}
* （一般論として）技術は、いくつかのものが並行して発展してきている。
  * 右上図のように互いに重なり合う部分もあり、また逆にどの技術でも扱えない領域も存在する。
  * が、発展とともに各要素技術がその扱える範囲が広がる。
  * その中で重なる部分について適切なものを選択する技術が必要になるだろう。
  * それができないとしても複数のものがあるということを知っておくことが重要だろう。

## ４ markdown を使ってみる
![コンテンツvsスタイル](13_3.png){:.tiny}
概要：  

* Markdownは、コンテンツとスタイルの分離の１つの有効なアプローチ
* たとえば[こんな書き方](mdSample1.md)
* [軽量マークアップ言語](//www.google.co.jp/search?q=軽量マークアップ)の一種
* HTMLに変換することをここでは想定している（他の変換先もあるが）
* HTMLよりはデザイン力で劣るが、人間がタイピング入力する際の労力が少ないので、
  * 文章作成（ページに埋め込む原稿など）に適している。
* テキストエディタでも作成可能
  * だが本科目では専用エディタを使うことを想定して解説する
* 標準的機能に加えて、処理システム毎の拡張機能（拡張的文法）もある。
  * 方言のようなもので、非互換という問題も生み出してはいる。

  |![方言](14-7.png)|
  |方言|
  {:.tiny}
* なお、この資料集のページもmarkdownで書かれている。
  * たとえばこのページのソースは[このファイル](13.md)。
  * kramdown独自の方言も活用している。
    （ `{: ...}` のようにブレースの中で第一文字が コロンである箇所）
	
#### 実習の流れ

1. 環境整備：　[解説ページ](13_1.html)を参照
2. 実際に使ってみる：
   [「Markdown入門」のページ](4_1.html)を参照

#### 課題
Markdownで簡単なWebページを作ってみる。内容としては、特に限定はしないが、たとえば以下のようなものを想定している。

+ この科目で学んだことのまとめ
+ 自分の紹介
+ その他、自由にテーマを選んで

作ったら、以下の２つのファイルを提出ください。

+ markdownによるソース
+ 変換後のHTMLファイル

#####[補足1](13_2.html)

#####補足2

+ markdownの主なマークは、半角英数字で入力する必要がある（全角文字だと正しく扱われない）
+ 一方、コンテンツ（文章）は、日本語が多く使われるだろう。
+ そのため、日本語変換のオン/オフを（おそらく「半角/全角」キーで）頻繁に行う必要がある。
+ オフにしそこねて 「＃＃」や「１． ２．」などを入力しはじめてしまったとき、
  * それを消して入れ直すのではなく、
  * IMEに変換させる前に半角文字として確定させてしまおう。
  * **F10** ボタンを押す習慣をつけると作業が（Markdown編集の場面にかぎらず）楽になる

<!--
Raspberry
ウェアラブル
markdown オンライン
-->