WEB用語の基礎知識（社内用）

1月17日から、２人の新人が入社しました。
うちの会社は、WEB初心者の私が入社できたように、高いスキルを求めていません。
今回もイラレ、フォトショップはでき、サイト修正ぐらいはできるスキルの人たちです。

自分が入社した時のレベルより上のスキルは持っているようですが、業務としはほぼ未経験なので、先輩面してすこし教えなければと思いました。
そこで、１年半という少ない経験で得た、うちの会社でしか通用しないであろうWEB製作に関する用語の基礎知識（これを知っていればうちの会社ではやっていける!!）をまとめました。

※あくまで社内用ですので、きちんとした意味などを知りたい方はWEB用語辞典などを参照してください。

World Wide Web / Bull3t

HTML4とXHTML1.0
時代はHTML5ですが、これまでのクライアントのサイトは当然HTML4.0かXHTML1.0で製作されています。
入社したて頃、そもそもHTMLに種類があること自体知りませんでした。今でもその違いがよくわかっていません。

ソース先頭の違い

HTML4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

XHTML1.0
<?xml version="1.0" encoding="shift_jis"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">

参考までに
HTML5
<!DOCTYPE html>
<meta charset=“UTF-8”>

過去記事でも少しだけHTML5について書いていますが、CSS3とセットと考えているのですが、IE6～8が未対応なので二の足踏んでます。

タグの違い
終了タグがない単独のタグ、「改行タグ」や「イメージタグ」などの>の前に、XHTMLだと半角スペースと/が入ります。

HTML4
<br>
<img src="photo.jpg">

XHTML1.0
<br />　←半角スペース/
<img src="photo.jpg" />　←半角スペース/

SSIと.shtml
セカンドページ以降のヘッダやメニュー、フッタなど共通する部分をssiファイルにすることにより、修正がある場合、例えばメニューが１項目増えた時など１つのファイルの修正で全ページに反映させることができる優れものの機能です。



上記のタグを、サイトのメニューなど繰り返し使われる箇所に貼り付けておくと、指定したファイル（メニュー）を置き換えて出力してくれます。
ただし、SSIに対応したサーバであること、拡張子が.shtmlであることが前提です。
過去記事に便利なSSI機能で少しだけ詳しく書いてます。
また、拡張子を.htmlから変更できない場合は、.htaccess（.htmlでSSIを使う方法）もあります。

Movable Type(MT)
Movable Type（MT）はSix Apart社のブログやサイト構築ができるCMSツール。

うちの会社では、クライアントのサイトに設置し、TOPページにブログまたはTOPICSとして、新着エントリーを表示、TOPページの更新頻度を高めることが目的として利用しています。
ただ、契約しているサーバーから簡単インストール（バージョンが3と4のみ）できます。
※現在は、バージョン4から5にアップデートされています。

関連記事
Movable Type　について
Movable Type３にカレンダーを設置
Movable Type３の2カラム表示
Movable Type４の移動
Movable Type４：管理画面のカスタマイズ
Movable Type 4のダッシュボードをiPhone用インターフェイスに
MT4で新規エントリーに「NEW!!」マークを表示させる
Movable Type４をiPhone用で表示
MultiBlogの再構築トリガー
Movable Type4.2の文字編集パレット
Movable Type 5の前に。。。

CGI
CGIとは、Webサーバが、Webブラウザからの要求に応じて、プログラムを起動するための仕組み。従来、Webサーバは蓄積してある文書をただ送出するだけであったが、CGIを使うことによって、プログラムの処理結果に基づいて動的に文書を生成し、送出することができるようになった。現在ではほとんどのWebサーバソフトがCGIに対応している。CGIはどのような開発言語でも使用できるが、実際にはPerlなどがよく使われる傾向にある。
（引用：IT用語辞典　e-Words）

使用箇所は、TOPページのアクセスカウンターメールフォームで使用しています。
※アクセスカウンターは、ログ解析ツールがサーバに標準設置、またはGoogleアナリティクスを設置しているので必要があるのか疑問です。実際に報告書に記載の訪問数と、カウンター表示の数字の違いでクライアントが誤解し、結果契約解除になったり、TOPのカウンターを削除してくれとクライアントから言われ外したこともあります。

話がそれましたが、CGIのファイルには1行目にParlのパスを記述します。

#!/usr/bin/perl または #!/usr/local/bin/perl
これは使用するサーバによって違います。

また、メールフォームを送る場合、sendmailのパスも必要なので、
$sendmail = '/usr/lib/sendmail'
こちらも、使用するサーバによって違いますので、確認してください。

設定後、FTPソフトを使用し、アップします。
その後アップしたCGIプログラムのパーミッション設定をします。

パーミッションとは...
コンピュータのハードディスクなどに保存されているファイルやディレクトリに対するユーザのアクセス権のこと。一般に、UNIXシステムにおけるアクセス権を指す言葉として用いられる。
（引用：IT用語辞典　e-Words）

こちらは実際にFTPソフトからアップしたCGIファイルですが、赤枠の中に属性とあり、rwx r-x r-xやrw-　rw-　rw-といった記号があります。
これがアクセス権を記号化したもので、左から「所有者の権限」、「所有グループの権限」、「その他のユーザーの権限」となります。
では、rwxの記号の意味は、
r･･･読み出し権限
W･･･書き込み権限
x･･･実行権限
となり、さらに許可する場合を数字で表します。
r･･･許可⇒4　不可⇒0
W･･･許可⇒2　不可⇒0
x･･･許可⇒1　不可⇒0

ということで、上記のファイル（index.cgi）の属性を見てみます。

すると、755となっているのが確認できます。
以上のように使用するCGIファイルなどはマニュアル等でアクセス権限を設定し、正常に作動するか確認します。

まだまだあるのですが、書き始めて1週間たっても進まないので、いったんアップします。
続きはまたの機会に。

「ここでき！」

Googleの画像検索で色から選べるパレットを使ってみた。

少し前に、プロジェクターで、Googleの画像検索した画面を壁に映し、さまざまな服の色を変えてファッションショーのように楽しんでいるテレビＣＭを見ました。
ということで、Googleの画像検索時に左下に出てくる色のパレットを使って検索してみました。

風景や人物、何でもいいのですが、車好きの自分としてはこのパレットを活かせる車、つまりカラーバリエーションが豊富な車種がいいので、ポルシェを検索してみました。

まずは普通に「PORSCHE911」と検索。
赤や黒、シルバーに白や黄色。いろいろな色のポルシェの画像が検索されました。

ここで左下にあるカラーパレットで赤を選択。
お～見事に赤いポルシェが表示されました。
み～ど～り～の中を走り抜けていく真っ赤なポルシェ♪と聞こえてきそうなぐらい（古いな～）カッコいいですね。

続いてオレンジ。
オレンジというかやまぶき色のポルシェ。この色もいいですね。

続いてイエロー。
黄色といえば、かつて世界最速を記録したRUF CTRがイエローバードと呼ばれたやまぶき色に近いイエローはとても好きです。

続いてグリーン。
グリーンも、古くはナローポルシェといわれる70年代からあるカラーでフロッグアイといわれる丸めのヘッドライトにグリーンはまさに蛙！

続いてブルー。
あまり上位にブルーの911が少ないですが、スカイブルーから紺色まで幅広くあります。
私も10年以上前に乗っていた88年式の911カレラは、ライトブルーのメタリックでした。

続いてホワイト。
白いボディーは高級感もありますが、レーシーなイメージになるのがポルシェのような気がします。

続いてグレー。
996あたりからシルバーのイメージが前面に出てきたように感じるのは私だけでしょうか。
個人的にも好きな色ですが、世界的に見てもシルバーの車が多いので、いまや無難なカラーのような気がします。

最後はブラック。
検索結果に白やシルバーも混じっているのですが、ブラックといえば湾岸ミッドナイトのブラックバード。
悪魔のZのライバルである黒い911ターボは、漫画でも実車でも存在感はあります。

以上、暇つぶしにはもってこいの色パレットでの検索は、思いのほか楽しめました。
きっとあなたのお気に入りの色が見つかるはず...

「ここでき！」

Ｃ言語のプログラミングを少しやってみた。

プログラムの基礎Ｃ言語を始めてみよう
最近、田口元の「ひとりで作るネットサービス」探訪というサイトを見る機会があり、WEBアプリやサービスをひとりで作っている人たちの記事を見て、自分でもできたらいいなと思い、プログラミングを少し勉強してみようと思いました。
ただプログラミングといってもいろいろあり、phpやJAVA、RubyやPython、iPhoenアプリ開発のObjective-Cなど何から手をつけていいやら。。。
最終的に、基本となるＣ言語からしてみようと思い、昨年の春に買った日経ソフトウエアに「C/C++基礎から学習ブック」という付録が付いていたのを引っ張り出してきて読み返すことにしました。

日経ソフトウエア 2010年 03月号 [雑誌]/著者不明

￥1,180
Amazon.co.jp

コンパイラの準備
Ｃに限らずプログラミングを言語を勉強する時は、実際に作って動かすことが理解を早める近道とのこと。
準備としてコンパイラというソフトウェアが必要です。
コンパイラとは、作成したプログラムを実行可能な形式（実行プログラム）に変換するソフトで、この作業を「コンパイル」と呼ぶそうです。
この学習ブックではc/c++用コンパイラとして、「Borland C++ Compiler5.5」(BCC5.5)というソフトを使うのですが、昨年春にやった時にうまく行かなかったので、代わりにマイクロソフトの「Visual C++ 2008」を使用しました。
この「Visual C++ 2008」の使い方はプロジェクトとして作成する方法と、コマンドラインから作成する二通りの方法があり、今回はコマンドラインからの作成を選択しました。
まず、初期設定として
1.コマンドプロンプトを起動。
2.VC++をインストールしたディレクトリ下にあるbinディレクトリに移動。
3.binディレクトリ内のvcvars32.BATを実行。
これで準備OK。

プログラムを動かしてみる
プログラムを作成し実行する流れは
（１）テキストエディタでプログラムを記述、保存時の拡張子は「.c」
（２）コンパイラを使ってコンパイルし実行プログラムを作成。拡張子は「.exe」
（３）実行プログラムを実行。

（１）テキストエディタでプログラムを記述
下記コードを入力し、ファイル名を「hello.c」で保存。

#include <stdio.h>

main()
{
printf("Hello c programming!\n");
return 0;
}

（２）コンパイラを使ってコンパイルし実行プログラムを作成
コマンドプロンプトを開き、hello.cを保存しているディレクトリまで移動。
「cl hello.c」と入力しenterを押すとコンパイルされ「hello.exe」が作成される。

（３）実行プログラムを実行
続いて「hello」と入力し、enterを押すと、「Hello c programming!」と表示されました。

「ここでき！」

明けましておめでとうございます

長かったような短かった年末年始休暇も終わり、4日から仕事が始まりました。

今年は静岡県三島市の親戚宅に元旦からおじゃましました。
途中で箱根神社に初詣に行く予定が寝坊したので、東名ー小田厚ー箱根新道ー1号線で三島市まで行きました。
夜帰る予定が結局泊まることになり、翌日10時頃出発し、箱根神社へ向かうため1号線を登り箱根峠を越えた所で渋滞発生。
この日は箱根駅伝の往路、まだ時間があるから大丈夫かなと思いましたがダメでした。
諦めてとりあえず横浜へ帰りました。
途中海老名サービスエリアで昼食をとり、大倉山の熊野神社へ向かいました。
しかし、ここも人が多くて時間がかかりそうなので、諦めて家に帰りました。

翌日3日、再度熊野神社に向かいました。
前日ほど混んでいないものの、入場制限がかかってましたが、30分程で境内に入れました。

お参りして、恒例のおみくじは、

「小吉」

仕事運は、あせらずじっくりと攻めること...

ん～(￣^￣) ....微妙。

まぁ落ち着いてじっくり仕事と向き合おう！

iPhoneからの投稿

Linuxコマンドをランダムに美女が紹介してくれるウェブサイト「美女Linux」が公開されました

12月24日のクリスマスイブにIT関連の教育・研修を行う株式会社Linuxジャパンより、Linuxコマンドをランダムに美女が紹介してくれるウェブサイト「美女Linux」を公開いたしました。

社長の水口さんには、以前仕事でお世話になっており、最近のブログでは｢表参道で撮影」や「美女Linux」などのキーワードが多く、なにをやっているのだろう？と社内でも話題になっていました。(＾～＾)
が、ついにうわさの「美女Linux」が公開されました。

クリスマスイブに公開と告知されていたのですが、仕事が忙しくすっかり忘れていたのですが、はてぶを見てたら、

んっ！美女LINUX？　あ～今日公開だ！
さっそくサイトを拝見。

美女がlinuxコマンドのボードを持ってる画像が多数。画像をクリックするとコマンドの説明があります。
「美女Linuxは”Linuxコマンドをもっと素敵で身近に”をキャッチフレーズとして、手書きのボードを持った美女がLinuxコマンドをランダムに紹介していきます。さらにその美女の画像とプロフィールで親しみやすさがでており、難しく思われがちなLinuxコマンドを楽しく習得していただくことが可能となります。」
と説明のとおり、むづかしいコマンドもこれならたのしく覚えられそう。:*:・(￣∀￣)・:*:

さらには、ブログパーツがあるので、さっそく貼り付けることに。
ソースは
<script type="text/javascript" src="http://bijo-linux.com/bp/js/bijo8.js"></script>
これだけ。

アメブロでの設定方法は
１．マイページのサイドバーの設定－プラグインの追加－フリープラグインに上記のソースを貼り付ける。