わさっきhb

大学（教育研究）とか ，親馬鹿とか，和歌山とか，とか，とか．

アプリケーション紹介をつくる

computing

大学の自分のWebページを，いろいろと変えています．昨日は，よく更新するHTMLファイルについて，文字コードをEUC-JPからUTF-8にしました．普段はMeadow + html-helper-modeで編集していますが，文字コードの変更でこれを使う*1と，ファイルに埋め込んでいる「Last modified:」の情報も変わってしまいます．
シェルからコマンドを実行しましょう．

for f in $(grep -l UTF-8 *.html); do cat $f | sed -e 's/charset=EUC-JP/charset=UTF-8/' | nkf -w -Lu > utf8-$f; done

とし，中身を確認してから，

for f in utf8-*; do echo $f; mv $f ${f#utf8-}; done

としました．
先週は，自作アプリケーションの紹介ページをつくりました．今年に入ってから開発を進めているzjsとnlmateは，前々から，紹介文をつくり，そこから当雑記にリンクしたいと考えていました．
他にそこに載せる水準のものはないか，と，自分のこれまでのWeb情報を見直してみました．幸いにも2つ，見つかりました．

  • C言語でよく使われる言葉とその読み方を検索できるもの（2006年度後期の情報処理II）
  • 拡張ユークリッドの互除法を解くもの（2009年度前期の情報セキュリティ）

いずれも，ユーザとしてはフォームに入力すれば，瞬時に答えが得られます．裏方はJavaScriptです．前者は，JKL.ParseXMLを使っていて，もともとのページではIEに対応していませんでしたが，JKL.ParseXMLを最新版に差し替えるだけで，動くようになりました．
zjsとnlmateは，そのセンスは別として戦略をもって命名しましたが，見つけてきた2つのアプリケーションにも，同様の名前を与えたいものです．辞書やGoogleを引きながらあれこれと迷って，最終的に，Cglos，Euclid_jsとしました．前者はCのglossary（用語集）です．後者について，「_」を「.」にしたら，prototype.jsのようなライブラリに見えてしまいます*2．
4つのアプリケーション紹介を，ひとつのHTMLファイルに押し込めるにあたり，もう少し，検討しました．前の週のゼミで，現状の洗い出しをしたとき，とくに研究紹介のページが長くて読みづらいという指摘が出ました．これについては，各ページを分割することにしましょう．そしてアプリケーション紹介についても，のちのちはそれぞれ分けて出せるよう，構成しておくとします．
それから，アプリケーションの読み方も，書いておくほうが，親しみをもってくれるのではないかと思いました．世の中に強く影響力を与えるようなソフトウェアなら，FAQなんかをつくって，「発音は何ですか?」「公式にはコレコレです」ってのがQ&Aになるところですが，今回のアプリケーションは到底そこまで及びません．最初っから，英語綴りの名称に添えて，その読み方を，書いておくことにしました．
現時点では，各アプリケーションの出だしだけ取ってくると，次のようになっています．

  • Cglos（シー・グロス）は，C言語でよく使われる言葉とその読み方を知ることのできる，Webアプリケーションです．
  • Euclid_js（ユークリッド・ジェイエス）は，ある整数解を求める問題を，拡張ユークリッド互除法を使って解いてくれます．
  • zjs（ズィー・ジェイ・エス）は，時間に厳格な，学会発表や，大学の卒業研究発表会などで，秒単位で時間を管理するためのアプリケーションです．
  • nlmate（エヌエルメイト）は，「2重ループを自由自在に書けるようになりたい」という人を支援する，小さなソフトウェアです．

残る関門は，スクリーンショットです．4つ中3つは，リンクさせておいて，ブラウザ上ですぐに動かせるわけですが，それでも動作例のカットを載せておくことにします．nlmateは，問題が出たときと，答え合わせのときの，端末の画面がないと，説明文だけではよくわかりません．
それぞれ画像化し，画像縮小でピクセル数を少々減らすとともに，JPEGの品質を70%に下げました．画像ファイルの合計*3は，180Kバイトほど．いきなり来た人に，それだけデータを送らないと読めないというのは，ユーザフレンドリーとは言えません．…
「画像なしページ」と「画像ありページ」を用意しますか．
最初は画像なしページをつくり，なくても一応は読めるような内容なのを確認してから，そのファイルをコピーして，画像情報を貼り付け，画像あり版にしました．相互リンクをしたほうがいいでしょう．その後，別々に管理するのは大変…なので，eRubyを使ってメンテナンスすることにしました．
app0.htmlで，HTMLファイルをつくります．これ単体でもブラウザ上で見ることができます．
次に，Rubyスクリプトファイルを作成します．

require "erb"
e = ERB.new(open("app0.html").read, nil, ">")

としてインスタンスをつくります．ERB#newの引数は，http://doc.okkez.net/static/191/class/ERB.htmlに詳しく書かれています．そして

file1 = "app.html"
file2 = "app+img.html"

img = false
open(file1, "w") do |f_out|
  f_out.print e.result(binding)
end

img = true
open(file2, "w") do |f_out|
  f_out.print e.result(binding)
end

によって，画像なし版と画像あり版を生成します*4．app0.htmlでは，imgの真偽でコードを取捨選択します．一例を挙げます．

<p>
授業や学生指導の中で，作成してきたアプリケーションを紹介します．
<% if img %>
<a href="<%= file1 %>">画像なしは，こちらです．</a>
<% else %>
<a href="<%= file2 %>">画像つきは，こちらです．</a>
<% end %>
</p>

悪戦苦闘の末，リリースと相成りました．
まとめ：

  • 必要は発明の母．「何をしたい」「そのために（最も効率良く達成するには）どうすればいいか」をじゅうぶんに考えてから，実行する．
  • 名前重要．呼方重要．
  • 最終的に見せるのはHTMLと画像であっても，そのプロセスで，非公表のファイルなりコードなりをつくったっていいじゃないか．

*1:ファイルを開いて，C-x C-m f utf-8-unix RET．

*2:Prototype JavaScript framework: a foundation for ambitious web applicationsとそこからのいくつかのページを見ると，「prototype.js」は一切使っておらず，文頭でも文中でも「Prototype」なのですね…．

*3:「wc -c 全ファイル」で求めました．ファイルはバイナリでも問題ありません．

*4:bindingは変数名ではなく組み込み関数です．http://doc.okkez.net/static/191/method/Kernel/m/binding.html