めいふの備忘ログ

やったことを忘れないように書きこのしておくのです。

「Javascript の 絵本」のサンプルプログラムを OSX Yosemite で動かしたときのおもいで

　Javascirpt を仕事でさわる機会があったのですが、ワタクシは prototypeとかなにそれおいしいの？　みたいなすごい素人でした。お友達からも「ユーはJavascriptの基礎知識を薄い本で身につけるべき」と言われまして、そこで、ワタクシは応じたのです。

「一番（Javascriptの）薄い本を頼む！」と。

　それからJavascritpの入門書を検索してみると、Amazon.co.jp： JavaScriptの絵本: アンク: 本 がおすすめされていましたので買ってみました。

f:id:meihuno_huno_san:20150730074206p:plain

　今回はこの本でJavascriptの基礎知識を学んだ時の思い出を備忘ログとして残しておきます。具体的には「8章 Ajax の基礎」のミニ辞典のサンプルプログラム（諸藩では154ページから紹介されているやつです）の動かし方について記載するのです。プログラムの初心者にとっては、プログラム言語そのものよりもプログラムを動作させるための手順のことがわからず困ることがあるので、その辺りを中心にまとめておくことにします。

　さて、Ajax とはウェブサーバと非同期にXMLやJSONをやりとりするものだそーで、Google マップのような地図をマウスでぐりぐり操作するようなダイナミックなWebページに一役買っているそうなのです。サンプルプログラムでは、XMLhttpRequestオブジェクトを使ってWebサーバとの通信を行っています。

　このサンプルプログラムを動かす準備ですが、

１）クライアント側の html ファイル と サーバ側のperl スクリプトを準備します
２）Web サーバ を CGIを動作させる設定で動かす
３）html ファイル を公開用ディレクトリに、 perl スクリプトをCGI 用ディレクトリに配置
４）デバッグする

　の流れ進めています。

１）html ファイル と perl スクリプトを準備します

　「Javascriptの絵本」に書いてあるプログラムのソースを写本したのです。eclipse などの IDEでコードを書くとタイポなどを指摘してくれてよいそうですが、ワタクシはemacs でせっせと以下の2ファイルを写本いたしました。
　

　

２）Web サーバを動かす

　OSX でWeb サーバを動かすには xammp や MAMP といったアプリケーションをダウンロードして起動するという手がありますが、Yosemite には もともと apache の 2.4系 が入っているのでこちらを使います。

sudo apachectl start

　ブラウザから、http://localhost へアクセスして、"It works!" と表示されていればWeb サーバはとりあえず動いています。ただ、サンプルプログラムのdictionary.cgi は Web サーバ も CGIを動作させる設定でないと動きません。なので、/private/etc/apache2/httpd.conf の以下を確認します。#などでコメントアウトされていた場合は#をとって設定を有効にします。

LoadModule cgi_module libexec/apache2/mod_cgi.so が有効であること
AddHandler cgi-script .cgi が有効であること

CGI-Executablesの ExecCGIが有効

<Directory "/Library/WebServer/CGI-Executables">
    AllowOverride None
    Options ExecCGI
    Require all granted
</Directory>

　確認が済んだら、apachectl を restart させます。動作確認のために、以下のtmp.cgi を/Library/WebServer/CGI-Executablesに配置します。

#!/usr/bin/perl

print "Content-type: text/html;charset=UTF-8\n\n";
print "\n";
print "<html>\n";
print "<head>\n";
print "<title>テスト</title>\n";
print "</head>\n";
print "<body>\n";
print "これはCGIのテストです。\n";
print "</body>\n";
print "</html>\n";

　http://localhost/cgi-bin/tmp.cgiでアクセスした際に「これはCGIのテストです。」と表示されればWebサーバのCGIの設定はOKです。なお、tmp.cgi や dictionary.cgi には chmod コマンドで ファイルの実行許可を与えておきましょう（ワタクシはよく忘れるのです）。

３）html ファイル を公開用ディレクトリに、 perl スクリプトをCGI 用ディレクトリに配置する

/Library/WebServer/Documents/miniehon.html
/Library/WebServer/CGI-Executables/dictionary.cgi

とそれぞれ配置しておきます。

４）デバッグする

　上記の作業を完璧にこなせばサンプルプログラムは動作して、http://localhost/miniehon.html にアクセスすれば、それっぽいページが表示されているはずですが、写本がミスっていたりして、最初はうまく動かなかったのです。なので、ブラウザのデバッガーを利用してデバッグしたのです（ワタクシめはChromeを使っているので、以下、ブラウザはChromeです）。Chromeの画面で右クリック（トラックパッドの二本指クリック）するとメニューが表示されるので「要素を検証」を選択するのです。

f:id:meihuno_huno_san:20150730120651p:plain

すると、Chromeのデバッガが立ち上がります。

f:id:meihuno_huno_san:20150730121409p:plain

　ワタクシはまず、Consoleを表示させて、console.log(obj)でオブジェクトを表示させてみました。いろいろがんばってサンプルプログラムは無事に動いたのです。ふー、やれやれ。Chorme のデバッガーはよくできていて、ソースコードを見ながらObjectの内容の確認、ブレイクポイントの設定、クライアントとサーバとの通信状況の確認、メモリリーク調査などなど色々できるようなので、ワタクシもがんばって色々と使いこなしていきたいなあと思いました。

「Javascriptの絵本」の次は「Javascript本格入門」を読んでいます。

　Javascriptの絵本を読んで、Javascript界の概要とエッセンスは眺めることができたような気はしております。次のステップとして、今は
Amazon.co.jp： JavaScript本格入門 ～モダンスタイルによる基礎からAjax・ｊQueryまで: 山田 祥寛: 本 でJavascript界のあらましをさらに勉強しているところです。明日もがんばろう。