Emacs & TeX で テキスト主義 ICT を学ぼう!
ヨーロッパ学 ICT II サンプル・ウェブへようこそ!
ヨーロッパ学 ICT 用にカスタマイズした EURO ICT Emacs と EURO ICT TeX を用いて「テキスト主義 ICT」を共に学びましょう!
ICT I では主に Emacs と TeX を扱ってきましたが,ICT II ではWebページを作成するための HTML5 と CSS3 を学びます。HTML と CSS に関しては,Emacs や TeX とは異なり,特別にインストールするものは何もありません。TeX と同じ様に HTML と CSS のソースはいずれもテキストファイルですから Emacs で効率よく編集できます。
HTMLの文字エンコーディング(charset属性)を utf-8 にしておけば,Grüß Gott! Ça va ? Здра́вствуйте! Οὖλέ τε καὶ μέγα χαῖρε! といった多言語混在表記も大丈夫です。
Webブラウザ上で動作するクライアントサイドのプログラミング言語である JavaScript についても紹介します。
JavaScript は動的なWebサイトを構築するために用いられる代表的なスクリプト言語で,初めて触れてみるプログラミング言語としても最適です。JavaScript についても追加のインストールは一切不要です。Emacs 等のテキストエディタを使って書かれたJavaScriptのコードを含むHTMLソースをブラウザで開くだけで,出力やプログラミングの効果を確認できます。
この「トップページ」のメニューからそれぞれのトピックを扱ったページに飛ぶことができます。
各ページとも Responsive Web Design にしてありますので,PC からアクセスした場合と,スマートフォンからアクセスした場合とでは,それぞれ「見え方」が異なります。つまり,クライアント(閲覧者)の使っているデバイスに応じて表示が最適化されるようになっています。
本トップページには Google Maps API (Application Programming Interface) を利用した Google Map(博多駅から福岡大学までのルートマップ)を埋め込んであります。
同様に Dark Sky API で「今日の福岡市城南区の天気」も表示しています。このようなコンテンツは Web Widget(和製英語では「ブログパーツ」)と呼ばれ,機能やデザインの点でWebページにちょっとしたアクセントをつけることができます。
背景画像(薄く EURO ICT Emacs, HTML5, EURO ICT TeX, CSS3 の各文字列が確認できると思います)はブラウザ・ウィンドウの幅に応じて自動的に拡大縮小します。こうした挙動は CSS(responsive.css)で制御しています。
本ページの footer要素(連絡先)の箇所では「コピーレフト」シンボル(コピーライト © の逆向き)を使っています。この記号は今ではユニコードに取り入れられ,実際 U+1f12f というコードポイントを持っていますが,通常用いられるフォントでこのシンボルを含むものはまだ存在しません。では,どうやって出力しているのでしょう? これも CSS で設定してやれば良いのです。TeX ではなく TeX という表記についても同様です。
ヨーロッパ学 ICT II を学べば,皆さんもこうした技能を応用したWebページを自分で作成できるようになります。熱心に,楽しく学んでいってください!!