Web

クラウドアプリケーション

最近は、インターネットを用いたクラウドアプリケーションの形態をしたプログラムが増えています。
クラウドアプリケーションは、ネットワークに繋がなくても使えるような、自分のパソコンだけでは動いていません。ネットワークに繋がった別の「サーバー」と呼ばれる、大型の専用コンピュータと繋がって、インターネットでやり取りしながら、アプリケーションが動きます。
クラウドアプリケーションには、GmailなどのWebメールサービスや、TwitterFacebookなどのSNSのほか、ストレージサービスやスマホを使って最新情報を得るサービスなどもクラウドであると言えます。

不特定多数が参加し、投稿が最新に更新される

Webを使ったサービス、すなわちWebサービスの特徴は、不特定多数が参加して、さまざまな投稿をそれぞれがパソコンやスマホから行い、その情報がサーバーに集約され、常に最新の投稿を見ることができる、といったように、「不特定多数でつながる」ことができる、ということです。
特に、Twitterのように、RailsScalaなどで作られたシステムで、大規模にとても多くの人が参加してその投稿をパソコンで見ることができる、といった具合です。
かつては、2ちゃんねるのような匿名掲示板や、それぞれのブログのような「CGIスクリプト」がこれを実現していましたが、最近はPerl/CGIからPHPへと移行し、さらにRubyPythonなどによる「Webフレームワーク」へと移行しています。

高負荷時の安定動作が鍵

こうしたWebサービスのシステムを開発する上で重要なのは、サーバーが高負荷になった時に、どれだけ安定してサービスを提供できるか、です。
高負荷時の安定的なサービスの提供には、LinuxFreeBSDのようなUNIX系のOSが用いられることが多いです。特にFreeBSDなどは、サーバーが高負荷になった時にも、安定してシステムを提供することができる、ということを売りにしています。
昔は、2ちゃんねるのような掲示板は、レンタルサーバーを利用しており、高負荷になった時によく接続できなくなりました。そのため、read.cgiと呼ばれるサーバー側のスクリプトを実行せず、掲示板のログが書かれたdatファイルをそのまま読み込む「専用ブラウザ」というものが開発されていました。専用ブラウザを使うことで、サーバーの負荷が少なくなるほか、便利な機能がついていたり、スキン機能を使ってかわいらしいデザインで2ちゃんねるを読むことができました。
最近は、クラウドサーバーと呼ばれるWebホストサービスが盛んであり、この分野で標準的になっているのがAmazonAWSです。AWSを使うことで、必要に応じて簡単に仮想サーバーのスケールを拡張することができ、最近ではSNSなどのサーバーに高負荷のために接続できなくなる、ということが稀になりました。

UNIXとネットワーク

UNIXは昔から「ひとつの中央サーバーをみんなで使う」というシステムを作ることがとても得意で、マルチユーザーのタイムシェアリングシステムとして、UNIXBSDのシステムはWindows以前から研究室のワークステーションなどで用いられてきました。コマンドで操作し、Xを使う場合もktermなどで操作することが多かったです。また、どのコンピュータからログインしても、同じ環境を保つことができました。
UNIXはネットワークととても親和性が高く、多くの、しかしコマンドラインのネットワーク操作プログラムが、UNIXで作られました。今のインターネットの基礎を作ったのは、既に化石のようになったUNIXです。
また、UNIX以外のOSでも、さまざまなネットワーク技術が盛んに作られていました。特に、UNIXと同じようにX11やCDEが動くことで有名なDECのOpenVMSでは、当初からクラスタによる利用が想定されており、特に特殊なことをしなくても、ひとつのシステムがダウンした時に別のシステムが代わりを務めてくれる、フェイルオーバーという仕組みが備わっていました。
メインフレームやミニコンの時代までさかのぼると、さらに見えてくるものがあります。DECが開発した、研究室用のメインフレームに比べて小さなコンピュータであるミニコンは、メインフレームの端末として使われることも多かったです。

インターネットの長所と短所

そして、DOSのような16bitのシステムが高性能になって32bit/64bitになった今のパソコンでは、そうしたUNIXやミニコンなどのシステムの「再来」が起きていると思います。世界は、もう一度、ひとつの小さな個人向けのコンピュータではなく、たくさんのコンピュータが繋がって「サービスとして」動くようになりつつあります。
これは、良い点と悪い点があります。
良い点は、UNIXのような過去の資産として培われた技術と、パソコン向けの技術とが化学反応を起こして、たとえばMozilla.orgのような新しい革新が生まれるということです。たとえばAndroidiPhoneなども、インターネットに繋げなければ使い物になりません。小さなAndroidスマホでも、インターネットにつながることでたくさんのことができるようになりました。
逆に、悪い点は、インターネットに過度に依存しすぎる、ということです。インターネット回線がもし何らかの理由で使えなくなれば、何もできなくなってしまいます。
また、インターネットは面白い情報やコミュニケーションがあって楽しいですが、危険な部分もあります。犯罪やハッキングなどの違法サイトやサービスも多い、ということです。また、Web上のアプリケーションは、コミュニケーションを楽しむことができ、開発としても人々に対して自分でサービスを公開できたりすることがありますが、なかなか全てのシステムをオープンソースでフリーにすることができません。このために、一社の営利企業に依存し、その一社のサービス提供がなければ、何もできなくなってしまいます。これはIBMMicrosoftがやっていたベンダーロックインよりもさらに悪く、パスワードが漏れてしまえば誰かに乗っ取られたりすることもありますし、そもそもパスワードやサービスの存在を忘れてしまえば、自分の昔作ったアカウントを削除することもできなくなります。
インターネットの怖い点は、他にもあります。それは個人情報の問題です。自分の隠したいことや言ってほしくないことまで、一度噂が拡散してしまえば、あとでそれを簡単に削除することができません。このため、誰かの悪い噂を拡散すると、その誰かは途方もない辛い思いをします。これが「SNSいじめ」と呼ばれる行為になって、みんなで一人の人をいじめるツイートを拡散させたりすることができるようになったのです。
ただし、僕はインターネットという場所でさまざまなソフトウェア技術が生まれるのは、基本的には良いことではないかと思います。それは、「Microsoft以外の会社が強くなる」からです。今、パソコン向けのOSとして標準のシェアを持っているWindowsでは、IEやMS-Officeのような、Microsoftが作ったソフトウェアが基本となっており、別の会社の作ったソフトウェアはAdobeのような高価で専門的なソフトウェアが多いです。もちろんネット上にフリーソフトもありますが、Webサービスは難しいインストールなどをしなくてもアカウントをメールアドレスを登録して作成すれば、どのパソコンでも簡単に使うことができます。アカウントが必要ないサービスもあります。こうした「MS以外の会社の技術」が増えていくことで、この世界は進歩していくと思います。特にGAFAGoogle, Amazon, Facebook, Apple)などの会社がこれに当たります。

サーバープログラミング

サーバーサイドプログラミングでは、Perl, PHP, Python, Rubyなどの軽量スクリプト言語と呼ばれる言語が良く使われます。これらの動的なプログラム言語から、マークアップ言語であるHTMLを出力し、CSSで飾り付けを行います。
データベースにはMySQL/MariaDBPostgreSQLなどのOSSデータベースが使われることが多いです。もちろんOracle DBなどの商用も使われます。AWSは最近自前のデータベースに移行しましたが、以前はOracle DBを使っていました。
また、WebサイトをホストするWebサーバーには、ApacheやNginxが使われることが多く、ApacheにおけるCGIとしてPerlを実行したり、Apacheモジュールのスレッドを用いてPHPを実行したり、JavaサーブレットコンテナであるTomcatなどを用いてJavaサーブレット/JSPを使うこともあります。
また、サーバーサイドでは、Rails, Django, CakePHP, LaravelなどのWebフレームワークを使います。最近はJavaの亜種であるScalaなどの言語を使うことも増えています。そして、開発の現場では、Dockerを使った仮想サーバを構築し、開発環境と本番環境で、「実際の現場でどう動くかを仮想環境で試す」ことができます。
クライアントサイドではJavaScriptを中心に、jQueryやTypeScriptなどのさまざまなJavaScript用のソフトウェア(JavaScriptフレームワーク)を使うほか、サーバーサイドでJavaScriptを実行できるNode.jsなどがよく使われています。また、Vue.jsやReactやAngularのようなJavaScriptフレームワークが使われることもあります。
クライアントのブラウザはIE, Mozilla, Chrome/WebKitなどのブラウザがありますが、スマホのアプリからサービスを提供することも最近は多く、スマホではJavaやKotlinのような言語を使います。
このように、サーバーサイドにはたくさんのソフトウェア技術があり、熾烈な競争と、時に混迷を極めています。

WebとHTML

Webの大きな特徴として、「HTMLとリンク」が挙げられます。
HTMLでは、出力される文字列に「リンク」を含めることができます。このリンクは、単に別のページの場所を指すだけではなく、Webアプリケーションでは、「トリガ」となって再度同じWebサイトの別のページにアクセスする「新しいアクセスの要求」に使うことができます。
HTMLの文字列は、単に情報を表示するためだけのものではなく、リンクをクリックすることで「次はこんな情報が欲しい」という情報を、Webサービスに伝えることができます。
これは、UNIXのシェルにおける出力とコマンド入力に相当しますが、違うのは、HTMLではページの特定の部分にトリガを伴うリンクを複数表示し、「この中から選んでね」という「自分からアクセス手段を発信する」ことができるのです。
Webサービスでは、PHPRubyなどのスクリプト言語でプログラムを記述しますが、HTMLのリンクタグに「GET」でオプションを指定してどれかのプログラムを動かすことで、Webサーバー側に要求をリクエストすることができます。これは、シェルで言えばコマンドライン引数に当たります。
また、Webは一種の分散システムです。ひとつのWebサーバーに複数のクライアントが接続でき、「POST」でフォーム入力を投稿することで、さまざまなユーザーのメッセージを共有することができ、その投稿はリアルタイムで更新されます。これによって、「最新の情報を不特定多数で自由に閲覧し、自らも発信する」ことができます。
また、HTMLのリンクは、別のWebサイトにアクセスするためにも用いられます。これは一種の「ネットワークとネットワークを繋ぐ地図」であり、たとえて言えばルーターのルーティングテーブルのようなものです。ですが、場所をただ指定してアクセスするだけではなく、「こんな情報があるよ」といった草の根の情報からそのサイトを見つけ出す、「みんなで探る迷宮の地図」のようなものです。それらは、Webサイト管理者とユーザーの「手動によるコンテンツの作成」で行われますが、その処理は上手く「手動と自動のバランスを取ったもの」になります。
こうしたテキスト出力・トリガシステムと、分散共有・地図作成環境を、WebはHTMLというページの形式言語と、WebサーバーというHTMLやHTMLを出力するプログラムを保管するサーバーと、WebブラウザというHTMLを整形して表示しリンクに反応するクライアントだけで、簡単に実現したのがWeb(World Wide Web)です。
ユーザーがHTMLを工夫して書き、工夫してリンクすることで、HTMLは「分かりやすい分散オペレーティング環境」を作り出しました。何度も言うように、Webは極めて手動の分散システムです。Webサイトの運営者が分かりやすいHTMLを書くことが前提となっています。
Webの問題があるとすれば、誰かが一元管理することが極めて難しいということ。犯罪やウィルスのようなWebサイトがあったとしても、それを強制的になくすことが極めて難しいのです。これは、スパムメールを大量に送ることのできるメールシステムと同様、Webの大きな問題です。Webには犯罪があふれています。

HTML

ハイパーテキストとは

ハイパーテキストは、文書と文書を結びつける、「文書を超えた文書」と言う概念のこと。
この時、テキストを結びつけるリンクのことを「ハイパーリンク」と呼ぶ。
World Wide Webの産みの親であるティム・バーナーズ=リーは、ハイパーテキストとインターネットを結び付け、Webサーバー、Webブラウザ、Webページによる「世界中の文書情報を簡単に探索することのできるネットワークシステム」を作り上げた。
HTMLは、このWorld Wide Web(wwwと省略されるか、あるいは単にWeb)において文書を記述するためのマークアップ言語である。TeXなどと同様にマークアップ言語であるため、MS-Wordのように結果を見ながら編集することは基本的に出来ないが、HTMLエディタを使うことで可能である場合もある。

HTMLとCSS

HTMLは、文書の意味情報やリンクの体裁を表現するだけで、スタイルやデザインはCSSあるいはスタイルシートと呼ばれる別のテキストの記述によって行う。
HTMLで文書を書いたら、その情報に基づいてCSSを書く。あるいは、逆にCSSに基づいてHTMLを書く。このことによって、マークアップした記述全体に一気にデザインを設定し、スタイルを変えることが可能になる。CSSはとても優れた仕組みである。

WebサーバとWebブラウザ

HTMLを見るためには、Webブラウザと呼ばれるソフトウェアが必要。WebブラウザはHTMLを整形して、きちんとしたプリントされた出力として画面に表示し、そこで踏まれたリンクなどから別のページをリクエストする。別のページは同じWebサーバ上にある場合もあれば、別のWebサーバ上にある場合もある。
Webサーバは、コンテンツであるWebページをWebブラウザに送受信するための、大きなコンピュータ。このコンピュータはネットワークに繋がった状態で常に起動・実行され続けており、さまざまなクライアントの要求に応じてWebページを送ったり、PHPなどのサーバーサイドの処理を行う。この時、PHPなどからSQLのようなデータベース管理システムが呼ばれることも多く、多くの場合、コミュニケーションサイトの情報はPHPなどを通じてSQLデータベースに保管され、PHPなどを通じてHTMLに整形されて、WebサーバからWebブラウザへ送られる。

サーバーサイドとクライアントサイド

HTML+CSSでは、変数や制御構造を用いたプログラミングはできない。あくまで、HTMLとCSSは文書の体裁とスタイルを記述するだけである。
プログラミングを行いたい場合は、PHPなどのサーバーサイドの言語か、JavaScriptのようなクライアントサイドの言語を用いて行う。
サーバーサイドの言語で書かれた記述は、「Webサーバ側」で行われる。そして、Webサーバは処理を行ってHTMLをネットワークでブラウザに送信する。そして、JavaScriptで書かれた記述は、「クライアントのWebブラウザ側」で行われる。
たとえば、掲示板のようにデータをHTMLに整形し、POSTなどで送られたデータをデータベースやサーバ側のデータファイルに投稿するのは、サーバーサイドで行われる。また、ブラウザ側で豪華なエフェクトをかけてブロックを綺麗に表示したり、インタラクティブな操作の処理(リンクを踏んだ時にAjaxのような処理を行ったり、スクロールした時にコンテンツを動的に読み込んだりする)をブラウザ側で行うのは、クライアントサイドで行われる。
最近は、Webの開発にはWebフレームワークを使うことが多く、PHPの開発でもCakePHPやLaravelなどを使うことが多い。またWikiWordPressの普及などもあって、HTMLを手動で書くことは減ってきている。だが、HTMLの基本を知っておくことはとても役に立つ。

HTMLの簡単な説明

ヘッダ

<!DOCTYPE html>

HTML宣言。

<html>HTML文書全体</html>

HTMLの開始。

<head>ヘッダ要素</head>

ヘッダ。

<title>タイトル</title>

タイトル。ヘッダに含まれる。

<meta>

文章のメタ情報。ヘッダに含まれる。文書自体についての情報を記載する。

<link>

スタイルシートなどのリンク。ヘッダに含まれる。

<link rel="stylesheet" type="text/css" href="../style.css">

のようになる。

テキスト

<body>メインの文章</body>

メインテキストの開始。

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

見出し。h1が一番大きく、数字を上げるほどサイズが小さくなる。

<p>文章の一区切り</p>

段落。CSSでmarginとline-heightを上手く使うことで綺麗な段落付けができる。

テキスト要素

<a href="hoge.html">リンク</a>

リンク。CSSでスタイルを設定する時は

a:link {通常のリンクのスタイル}
a:visited {訪れたことのあるリンクのスタイル}
a:hover {マウスオーバーした時のスタイル}
a:active {クリックしてアクティブにした時のスタイル}

を別々に設定する。

<br>

改行。

<div>div領域</div>

領域(ブロック)。クラスを指定することでスタイルを設定できる。

<span>span領域</span>

領域(インライン)。divと違い、ひとつの大きなブロックではなく、
ブロックの中のテキストの一部のような小さな要素になる。

リストとテーブル

<ul>箇条書きリスト</ul>
<ol>番号付きリスト</ol>
<li>それぞれのリスト項目</li>

リスト。通常はul+liかol+liの組み合わせで使う。
<ul>~</ul>あるいは<ol>~</ol>の中にそれぞれの<li>~</li>を入れて使う。

<table>テーブル全体</table>
<tr>一行の項目</tr>
<th>表題の列</th>
<td>ひとつの列</td>

テーブル(表)。
<table>~</table>の中にそれぞれの<tr>~</tr>(行)を入れ、
trの中にそれぞれの<th>~</th>(表題の列)あるいは<td>~</td>(列)を入れて使う。
colspanとrowspanを設定することでセルを結合できる。

高度な要素

<img src="foo.png">

画像。

<iframe src="bar.html"></iframe>

インラインフレーム。

<script>実行されるスクリプト文</script>

JavaScript
ファイルを指定する場合は

<script type="text/javascript" src="/script.js"></script>

とする。

<!--コメント文-->

コメント文。この中に書かれた内容は書かれていないものとして扱われる。
HTMLのコメントは入れ子にした時に悲惨なことになるので注意が必要。

CSS

セレクタ

CSSセレクタを使うには、まず、HTMLの方で、

<div class="classname">テキスト</div>

とし、CSSの方で、

.classname {
  padding: 10px;
  margin: 30px 0 30px 0;
  border: 1px dashed #9aadbe;
  font-size: 13px;
}

などとしてやります。
領域内の特定の要素にスタイルをかける場合は、スペースを使って

.classname li {
  ...
}

などとします。
複数のクラスを一度に設定する場合は、

.classname1,.classname2 {
  ...
}

とします。
たとえば、以下のようにすることで、特定の領域のリンクの色を変えられます。

.tabs a:link {
  color: #23466e;
}
.tabs a:visited {
  color: #848a96;
}

クラスではなくidの場合は、「.」の代わりに「#」を使います。
pタグやdivタグへの適用の場合は、.classnameのような記述で構いませんが、tableタグのような場合ではタグ指定が必要です。この場合、

table.some_tables {
  padding: 10px;
  margin: 10px 8px 10px 8px;
  border-collapse: collapse;
}

などとします。blockquoteなどについても同様です。

セレクタの便利な使い方

CSSでスタイルを設定できるが、その際にセレクタを使うと便利。

<div class="hot_titles">
<h1>表題1</h1>
<p>テキスト1</p>
<h1>表題2</h1>
<p>テキスト2</p>
</div>

とした上で、

.hot_titles h1 {
  margin: 60px 0 30px 0;
  background: #f9ebd1;
  padding: 15px 15px 15px 15px;
  border-bottom: 2px solid #c3003a;
  font-size: 270%;
  color: #a03c44;
}
.hot_titles h1:before {
  content: url("dog4.png");
  margin-right: 15px;
}

などとすれば、hot_titlesのdiv要素の中にあるすべてのh1要素にスタイルを適用できる。

display

CSSのdisplayにはblock, inline, inline-block, noneを指定できる。
pタグやdivタグなど、左右ぴったりに伸びる領域を作るブロックのタグのデフォルトは

display: block;

aタグやspanタグなど、文字の中に挿入されるインラインのタグのデフォルトは

display: inline;

divタグで領域を作った時、領域の幅は画面の左右いっぱいに作られる。これを、widthで指定したサイズ、あるいは

width: auto;

で幅として必要なだけの幅に自動的に調整して表示したい時は、

display: inline-block;

を指定する。こうすると、左右の幅が自動的に調整されるだけでなく、たくさんの要素があった時にブロックを横に並べることができる。この並び方を上に整列するには

vertical-align: top;

を指定する。
また、右や左に回り込みをする時は

float: right;

やleftを指定する。この時、

clear: right;

やleftやbothを指定することで、複数のブロックが横に並ばないようにすることができる。
また、

display: none;

にすることで、要素を非表示にできる。レスポンシブデザインなどでスマホ向けのページにする時に、余計な要素を非表示にするなどの用途が考えられる。

marginとpadding

marginはその要素の「外側」に出来る間隔のことで、paddingはその要素の「内側」に出来る余白のこと。
borderを指定した場合、borderの外側にmarginができ、borderの内側にpaddingが出来る。

max-widthとmin-width

max-widthとmin-widthは、幅の最大値・最小値。これ以上大きく・小さくなることを制限できる。レスポンシブデザインなどで有効。
div要素だけではなくimg要素などにも適用することができて便利である。たとえば、

.block_box {
  display: inline-block;
  vertical-align: top;
  margin-right: 15px;
  width: 750px;
  max-width: 90%;
}

.titleimage img {
  max-width: 90%;
}

などとできる。

Flexbox

Flexboxは今までmarginやpadding, floatやdisplayで行ってきた「横並びの配置」を綺麗かつシンプルにできるCSS3の機能。
基本的に

<div class="index_container">
<div class="index_box">
    ...
</div>
<div class="index_box">
    ...
</div>
</div>

として、CSS

.index_container{
    display:flex;
    flex-flow: row wrap;
}

.index_box {
    flex: 1 0 50%;
}

とする。

:beforeと:after

疑似要素beforeとafterを使うことで、以下のようにタイトルの前に画像を置いたりなど、疑似的な要素を作ることが出来る。

h1:before {
  content: url("cat2.png");
  margin-right: 15px;
}

CSSでアイコンを作る

beforeとafterやcontent、position:relative;やposition:absolute;、top/left/right/bottomなどを使い、border-*や丸要素のradiusや傾きのtransformを使いこなすことで、CSSだけでアイコンを作ることができる。
普段Adobe Illustratorを使っている僕からすると、backgroundやborderで塗りや線を表現する感じは、イラレに近いところがあるのかもしれないと思う。

position: absoluteとrelative

absoluteは絶対位置、relativeは相対位置で、要素を特定の位置に表示できる。現在の要素の位置に関係なく一番上に要素を載せたい時などに利用する。

position:static;

は、特に位置を設定しない。top、bottom、left、rightの値は適用されない。デフォルトの場合での初期値はこれになる。

position:relative;

は相対位置。top、bottom、left、rightの値だけ、標準の位置よりもずらした場所への配置になる。これは

position:static;

を指定した場合に表示される位置が基準位置となる。

position:absolute;

は絶対位置。通常、親要素に

position:static;

が設定されている場合は、ウィンドウ左上の絶対位置からtop、bottom、left、rightの値だけ、ずらした場所への配置となる。要素がどこにあるかに関係なく、絶対位置に要素を表示することができる。
ただし、子要素に

position:absolute;

が指定されている場合でも、親要素に

position:static;

以外の値が設定されている場合は、親要素の左上が基準位置となる。たとえば、親要素に

position:relative;

が指定され、子要素に

position:absolute;

が指定されている場合は、親要素の値を基準位置とした場所に要素が配置される。
要するに、

position:absolute;

が指定されていると普通は絶対位置になるが、その親要素に

position:relative;

position:absolute;

などが指定されている場合ではそこからの位置になる。

position:fixed;

は、absoluteと同じように絶対位置となるが、スクロールしても位置が固定されたままとなる。
後日注記:良く分からない方は、absoluteを指定する時は親要素にrelativeを指定しておくと表示できる位置を相対的に変えられる(そこからの位置にできる)、と覚えておくといいでしょう。

!important

!importantは、CSSの優先順位を変えられる宣言。通常CSSは後に書いたものの方が優先されるが、!importantを書くことで優先順位を最優先にできる。

pre.prettyprint {
    color: #ffffff;
    border: 1px solid #1d695f !important;
    border-top: 5px solid #1d695f !important;
}

レスポンシブ対応

レスポンシブとは、スマホなどの小ディスプレイのデバイスに共通するHTMLで対応すること。
スマホなどの小ディスプレイサイズのデバイスに対応するには、以下のように記述する。

@media screen and (max-device-width: 480px) {
  .sidebar_profile,.image {
    margin: 10px 0 10px 0;
    padding: 0px;
    float: none;
  }

  .sidebar {
    display:none;
  }
  #main-menu {
    display:none;
  }

  .titleimage {
    display:none;
  }

  .flower {
    display:none;
  }
  
  body {
    padding: 0;
  }
  
  .banner,.banner2{
    padding: 0;
    margin: 0 0 0 0;
    background: #ffffff;
    border: 0;
  }
  
  #toc {
    padding: 0px;
    margin: 10px 0 10px 0;
  }
  #toc ol li {
    margin: 0px;
  }

  .sideiframe {
    width: 100%;
  }
  .sideiframe_profile {
    width: 100%;
  }
}

CSS3

CSS3ではグラデーションや変形、角を丸くする、影のエフェクト、ボックスレイアウト、アニメーションなど、さまざまな視覚効果が追加された。

Sass

SassはプログラムのようにCSSを書くことのできる技術。変数や関数が使え、セレクタをネスト(入れ子にする)できる。

16進数での色の表現

HTMLやCSSでは、#から始まる6桁の16進数で色を表現する。
たとえば、#FF8822では、FFが赤、88が緑、22が青になる。FFが最も色が明るく、00が最も色が暗い。#FFFFFFが白で、#000000が黒。真っ赤にする時は#FF0000とする。

CGI

静的HTMLとの違い

HTMLは、単純にHTMLファイルをダウンロードしてWebブラウザに表示させるだけで、リンクを使って別のページに移動する。
これに対してCGIPHPは、プログラミングとしてのコードをHTML内部に記述したり、HTMLを吐き出すプログラムを作ることで、プログラムを実行した結果をブラウザに表示する。
よって、ただ表示することしか出来ないHTMLとは違い、掲示板やSNSなどの高度な「プログラマブルなWebサイト」を作ることができる。

CGIはステートレス

CGIは、一回の送信と受信で処理が完結される、という特徴を持つ。一回リクエストして、それでHTMLが返ってきたらそこで終わりである。逆に言えば、セッションをまたいで一時的な情報を保持しておくことができない。これを「ステートレス」(状態なし)と言う。
CGIのようにステートレスではなく、状態を保持しておきたい場合は、ソケット通信でサーバーとクライアントを繋ぐプログラムを書く必要があるだろう。Cookieを使って一時的にサイトの情報をローカル環境に保存しておいてそれを確認する、というやり方や、ログイン情報を保持しておきたいだけであればBASIC認証のような機能を使うこともできる。
ただし、これはあくまで一時的な状態をプログラムの中で保持できないということであり、サーバー側でファイル読み書きをしたりして一時的な情報を確保することは可能である。Perlで作られたネットゲームなどでも、プレイヤーの情報などは一時的な専用のファイルやデータベースに保持されている。また、Googleなどがやっているように、ビッグデータをAIが解析する、という方法も最近では良く使われるようになりつつある。最近のWebアプリケーションは、YouTubeのミックスリストのように、機械学習で表示内容を変えるのが主流になりつつある。よって、CGIで必ずしもデータの記録が不可能であるわけでは全くなく、その逆に、クラウドアプリケーションはデータの置き場所をどんどんローカルからリモートに移動させようとしている。これはサービスがどのように運営されているのかをよく確認しなければ危険である。たとえば、Yahoo!のサービスは長期間ログインしていないと勝手に削除される。できるだけ、Googleのような安心できるサービスを使うこと。それもIT能力のひとつである。

Apache

2種類の設定方法(全体とディレクティブ)

Apacheの設定方法は2種類ある。Apache全体での設定と、範囲指定した上での設定(ディレクトリ・ファイル・パス単位等)。

httpd.confの記述例

ポート番号:

Listen 80

管理者のメールアドレス:

ServerAdmin root@localhost

サーバーの名前(ホスト名):

ServerName www.example.com:80

ServerNameを有効:

UseCanonicalName On

ドキュメントの場所:

DocumentRoot "/usr/local/apache2/htdocs"

Apacheをソースからインストールする場合は、DocumentRootを/usr/local/apache2/htdocsなどに設定する。パッケージから導入する場合は/var/www/htmlなどでも良いだろう。

ディレクティブ設定

基本的にこんな感じ:

<Directory "/usr/local/apache2/htdocs">
    # 設定内容
    Options Indexes FollowSymLinks
    AllowOverride None
    Order allow,deny
    Allow from all
</Directory>

nginx

ノンブロッキングI/O

ノンブロッキングI/Oは非同期でひとつのプロセスが複数の接続を処理する方法。
通常のApacheのようなHTTPサーバーでは、プロセスをものすごく大きな数(約一万台)起動させた時に、システムのリソースは、ひとつひとつは微々たるものでも、たくさんあるとさまざまな問題が生じる(指定子の数、メモリ使用量、CPU使用率など)。これをC10K問題と言い、システムの性能が十分あったとしてもレスポンス性能が大きく落ちる。
これに対してNginxでは、ノンブロッキングI/Oという「ひとつのプロセスが複数の接続を処理する」非同期処理を行い、本当に必要な接続だけを処理することで、この問題を解決する。
1プロセスに1接続のブロッキングI/Oが家庭教師だとしたら、1プロセスに複数接続のノンブロッキングI/Oは複数の生徒を見る塾の教師に近い。
ノンブロッキングI/OはNginxの他Node.jsなどで取り入れられている。

1プロセスの中で接続ごとにイベント処理

Nginxでは、1プロセスの中で接続ごとにイベント処理を行う。プロセス・スレッドベースのApacheと違い、接続数が増えてもプロセス数やスレッド数が増えないため、消費メモリが増えない。
1つのメモリ空間で動作するため、スクリプト言語を組み込めないことがある。ただし、プロキシサーバとして利用すればスクリプト言語を呼び出せる。

BASIC認証

BASIC認証

Webサイトのログイン認証には、サーバーのIDとパスワードのログイン機能であるBASIC認証を使います。

BASIC認証を使う

Basic認証を使うには、次の2つのファイルを作成して設置する必要がある。
・ウェブサーバの設定を記述する「.htaccess」ファイル
Basic認証用の「ユーザー名と暗号化されたパスワード」のセットを必要なだけ列挙する「.htpasswd」ファイル

PHPBASIC認証を使う

ちなみに、PHPなら.htaccessを設定しなくても、PHPの関数として自由に認証をかけることが出来ます。

Cookie(クッキー)とは

Cookie(クッキー)とは、Webサイトがブラウザに保存するユーザーの個人にまつわる情報のこと。
たとえば、一度ログインしたWebサイトに再度アクセスするとログインする必要が無かったり、ショッピングサイトで購入したい商品のカートの設定が残ったりするのは、Cookieの仕組みのため。
Cookieの正体はとても小さなテキストファイル。

自分のWebサイトでCookieを扱いたい場合、js-cookieを使うとCookieを手軽に操作出来る。

jQueryでjs-cookieを使う

たとえば、jQueryとともにjs-cookieを使う場合、まず

<script src="/js.cookie.js"></script>

でjs.cookie.jsを読み込む。
Cookieの取得は

  var sizevar = Cookies.get('cookieFontSize');
  if (sizevar== 'xbig') {
    $("body").css("fontSize","200%"); 
  }
  else if (sizevar== 'big') {
    $("body").css("fontSize","150%"); 
  }
  else if (sizevar== 'normal') {
    $("body").css("fontSize","100%"); 
  }
  else if (sizevar== 'small') {
    $("body").css("fontSize","14px"); 
  }
  else if (sizevar== 'xsmall') {
    $("body").css("fontSize","13px"); 
  }
  
  var familyvar = Cookies.get('cookieFontFamily');
  if (familyvar == 'mincho') {
    $("body").addClass('font_mincho');
    $("body").removeClass('font_gothic');
  }
  else if (familyvar== 'gothic') {
    $("body").addClass('font_gothic');
    $("body").removeClass('font_mincho');
  }

Cookieの設定や削除は

  $("button.xbig").click(function(){
    $("body").css("fontSize","200%"); 
    Cookies.set('cookieFontSize', 'xbig', { expires: 7 });
  });
  $("button.big").click(function(){
    $("body").css("fontSize","150%"); 
    Cookies.set('cookieFontSize', 'big', { expires: 7 });
  });
  $("button.normal").click(function(){
    $("body").css("fontSize","100%"); 
    Cookies.set('cookieFontSize', 'normal', { expires: 7 });
  });
  $("button.small").click(function(){
    $("body").css("fontSize","14px"); 
    Cookies.set('cookieFontSize', 'small', { expires: 7 });
  });
  $("button.xsmall").click(function(){
    $("body").css("fontSize","13px"); 
    Cookies.set('cookieFontSize', 'xsmall', { expires: 7 });
  });
  
  $("button.bt_mincho").click(function(){
    $("body").addClass('font_mincho');
    $("body").removeClass('font_gothic');
    Cookies.set('cookieFontFamily', 'mincho', { expires: 7 });
  });
  $("button.bt_gothic").click(function(){
    $("body").addClass('font_gothic');
    $("body").removeClass('font_mincho');
    Cookies.set('cookieFontFamily', 'gothic', { expires: 7 });
  });
  $("button.bt_clean").click(function(){
    $("body").css("fontSize","14px"); 
    $("body").removeClass('font_mincho');
    $("body").removeClass('font_gothic');
    Cookies.remove('cookieFontSize');
    Cookies.remove('cookieFontFamily');
  });

のようにする。

簡単な説明

Web

HTML/CSS

  • HTML/CSS
    • HTML, CSS
      • セレクタ(IDとクラス)
      • display
        • inline, block, inline-block, noneなどを使い分ける
      • 絶対位置と相対位置
      • フレックスボックス
        • 画面を分割して綺麗に並べられる
      • グリッド
    • XML, JSON

Apache

Apacheの設定はサーバ全体あるいはディレクティブ単位で行う
動的WebサイトはCGIで実行するかモジュールとして実行する

Nginx, Node.js

NginxやNode.jsでは、Apacheのようにプロセス・スレッドベースではなく、ひとつのプロセスが一度にたくさんの相手と接続を行いながら、非同期のイベント駆動で必要な時に必要な相手に必要な処理を行う。メモリの使用量が少なく高速。

CGI

CGIはリクエストのたびにプロセスを起動するためオーバーヘッドが大きい。これに対してApacheのモジュールとして動くPHPアプリケーションサーバとして動くJavaサーブレットはスレッドベースであるためオーバーヘッドが少なくCGIよりも性能が高い。

ステートレス、ステートフル

CGIはステートレス(状態の情報がない)が、クッキーやセッションを使うことでスレートフルな状態の情報を扱える

FastCGI

Perlのような言語でも、CGIではなくFastCGIを使うことでオーバーヘッドの問題を解決できる。FastCGIは常にメモリに常駐する。

WordPress

企業のホームページなどを作るのであれば、HTMLで作るよりもWordPressで作った方が楽
掲示板を作るならbbPressを使う
ブログライクな管理画面から簡単に管理できる
環境構築はXAMPPを使うと簡単

HTML/CSS

セレクタ

IDには「#」を、クラスには「.」をつけて、「そのクラスの適用されている部分のタグ」だけを指定できる
IDはJavaScriptやDOMなどから「この場所にHTMLを入れ込み表示せよ」などといった命令をするためにも使う

セレクタの包括関係(.section h3など)

「sectionクラスのdivタグの中のh3タグ」といった指定が可能
ページによってh3タイトルの見た目をdivで囲うだけで簡単に変えられたりする

絶対位置と相対位置

絶対位置に表示することで、画面の特定の場所に要素を表示できる
親要素に相対位置が設定されていれば、絶対位置でもそこからの相対的な位置になる

XML, JSON

XMLはHTMLとよく似たマークアップ言語
JSONは最近流行しているシンプルなデータ記述フォーマット。PythonJavaScriptとも相性がいい。
Ajaxを実現するためにはXMLあるいはJSONを使う

検索エンジン

DuckDuckGo

DuckDuckGoGoogleが個人情報を集めたり閲覧者の情報をトラッキングしていることから、「ユーザーの情報を集めない」検索エンジンとして、最近Googleに批判的な人に人気の検索エンジン

検索エンジンを作る

検索エンジンを作る上で必要なのは、データベースの高い並列性と、クロールの正確性と網羅性、ランキングの計算アルゴリズムなどではないかと思う

ツイッター

ツイッター用語
  • ツイート
    • ツイートとは「つぶやき」のことで、自分で今思っていることを発言する
  • タイムライン
    • タイムラインはツイートが表示される場所。基本的に自分のツイートとフォローしたアカウントのツイートが表示される
  • フォロー
    • アカウントをフォローすると、そのアカウントのツイートがタイムラインに表示されるようになる
  • フォロワー
    • 自分のことをフォローしてくれる人のことをフォロワーという
  • リツイート、拡散
    • 自分の好きだと思うツイートがあれば、リツイートすることで、それを自分のフォロワーに拡散できる
  • インフルエンサー
    • インフルエンサーとは、絶大な影響力を持っていて、発言や行動が人々に大きな影響力があるようなアカウントのこと
  • バズる
    • ツイートをみんなで広めていくことをバズると言う
  • ディスる
    • ディスるとは侮辱という意味。みんなでツイートを批判したり、炎上させたりすることのことを言う
  • エモい
    • エモいとは「エモーショナル」の略で、感動するとか、心の底からこみあげてくる喜びのようなことを言う。キモいとは逆に肯定的な表現として使う
  • wwwおよび草
    • wwwは笑っている様子を表す。wは「笑い」のこと。wwwが草や芝のように見えることから「草」も笑いの表現として表す。海外ではこれは通用せず、アメリカではlolが同じ意味になる。
Togetter

ツイッターの面白いツイートをまとめてくれるサービス
ツイッターではツイートを見るために基本的にアカウントをフォローする必要があるため、友達以外の人が何を言っているのか知る手段が少ない
Togetterを使うことでツイッターで流行っていることを知れる

YouTube

著作権の問題

Google著作権管理団体にお金を払っているので、YouTube著作権のある音楽を公開しても犯罪には問われない
YouTube以外の場所で公開する際には気をつける必要がある
また、再生回数に応じてお金が入ることから、最近は歌手本人が公開している動画の方が多くなってきている
音楽はミックスリストなどを使うことでアルバムのように連続して聴くことができる