« 2006年10月 | メイン | 2006年12月 »

2006年11月30日

JavaScript 初心者が MochiKit にさわってみました!
このエントリーをブックマークに追加 このエントリーをlivedoorクリップに追加

naoya です。今回は、1 人のエンジニアがフォト蔵リニューアルを通して学んだことの後編をエントリする予定だったのですが、今日の勉強会で Mochikit の入門編について説明したので、その資料を公開します。
MochiKit は、開発版の 1.4 系のすべてのコンポーネントをさわってみたときの資料で、デモとソースコード付きです。

MochiKit をさわってみた


※この資料は、Firefox でのみしか閲覧できないので注意してください。

JavaScript プログラミング、楽しいですね!

2006年11月29日

WEBアプリのテストに必須なツール7種
このエントリーをブックマークに追加 このエントリーをlivedoorクリップに追加

こんにちは!やまもと@テスト番長です。

前回satoさんの書いたエントリーが好評のようですね。
自分は実は美術系出身です。なので「デザインセンスのある人からみた~」というエントリーでも続けて書いちゃおうかなと一瞬思いましたが、世の中にはWEBデザインのプロの方もいらっしゃることだし、控えておきましょう。
センスってのも考え込むと難しいですしね。
個人的には、WEBデザインの美醜って「使いやすさ」とかなり直結な気がしてます。

さて、今回は僕が普段テストに使っているツールでもご紹介してみようかと思います。

Selenium
一年前くらいに登場した無償の自動実行ツールです。
有償の自動実行ツールは以前からありましたが、
ベンチャーが購入するには高価なものなので
大手以外にはあまり導入されていなかったであろう類のツールです。
テストシナリオにそってブラウザを自動で操作してくれます。
リグレッションテストを行うのに有効ですが、シナリオの維持コストなどもあるので
使い所は選ばねばなりません。


Live Http headers (Firefox) / ieHttpHeaders (IE)
ヘッダーでやり取りされていることを観察する機会は結構あるものです。
テスターの方のPCはブラウザを各種インストールしてあるかと思いますので
ここは両方インストールしておきましょう。


プロキシツール
ログ取得・フィルタリングや携帯コンテンツ開発でのUserAgent偽装などの為に用意しておきましょう。世の中には色々なツールが存在するのでお好みで。
UserAgent偽装はFirefoxのUser Agent Switcherあたりで事足りるカモ知れません。
自分は今Proxomitronが入ってます。古いですね。でも好きなソフトです。


VMware
一台のPC上で仮想的にOSを切り替え、環境依存の問題が無いかテストすることができます。
ちょっと古めの環境を飼っておくと、いざというとき役に立つことが出来て男前になれます。


携帯シミュレータ
携帯コンテンツ開発ではシミュレータの使用が便利です。
Imode用のIモードHTMLシミュレータがおススメです。
一応各社出しているのですが、マトモに使えるのはドコモのものだけです。


Apache JMeter
無償の負荷テストツールです。
サービスに負荷をかけ、パフォーマンスを計測することが出来ます。
負荷をかける前の段階でも軽くスレッドセーフのチェックをするのに使ったりします。

使用に当たってひとつ頭に入れておくべきことがありまして
JMeterはJAVAで出来ている為にウィンドウズクライアントで実行するとあまりパフォーマンスが出ず
50スレッド程度(マシンパワーによります)で頭打ちになるのですが、
試験結果には現れない(ものすごくパフォーマンスが出ているように見える)ので注意が必要です。


BTS(バグトラッキングシステム)
広義のテストツールとして、テストを行う上でBTSは欠かせない道具です。
MANTISTracなど各種ありますが、どれを採用するか迷った時はBugzillaをお勧めします。
比較的古いBTS故か、後発のBTSがデータインポートを受け付けているケースが多く見られます。


どれもWEBアプリのテスターとして生きていくには必須な
使い方を覚えておいて損のないものばかりです。
もしまだ使ったことのないものがあれば、ぜひ試してみてくださいね。

そのほかにもセキュリティチェック用のツールやらニッチな用途のツールやらあるのですが、それはまたの機会にご紹介したいと思います。

みなさんお使いの良いツールがあれば是非教えてください。
ではでは。

2006年11月27日

デザインセンスの無い人がwebサイトを作成する際に参考にしているサイト
このエントリーをブックマークに追加 このエントリーをlivedoorクリップに追加

こんにちは satoです。

いくら面白くて、高機能なwebサイトを作成しても、デザインがダサいとサイトの魅力や開発意欲は半減です。

僕もまったくデザインセンスが全く無いのですが、新しい物を作成する際には以下のサイトを参考にしています。

(1)Color Scheme Generator 2

デザインの大まかな配色等を決めるのに使用することがあります。 真似するだけで、Coolなサイトに見えるような気がします。


(2)Color Palette Generator


ロゴ等の画像を指定すると、その画像に合ったカラースキームを
教えてくれます。


(3)Web 2.0 Colour Palette


有名なサイトのカラースキームの一覧があります。


(4)pmob.co.uk


CSSや画面分割などのさまざまなサンプルや解説があります。


(5)logopond


さまざまなロゴのサンプルがあります。ロゴを作成する際のヒントになるかもしれません。

受け売りですが新しいwebサイトを作成する際にはまず、名前から決めるのがよさそうです。
デザインが名前から受ける影響が大きいためです。

皆様の助けになれば幸いです。

2006年11月22日

JavaScriptのバグを退治する3つの手法
このエントリーをブックマークに追加 このエントリーをlivedoorクリップに追加

こんにちは、さかとくです。今日は、世界中のプログラマーを悩ませているバグを退治する方法について考えてみたいと思います。今回は、特に、JavaScriptのバグを退治する方法にスポットを当ててみたいと思います。

そもそも、バグ(Bug)とは、正しくプログラムが動かない状態、不具合のある状態です。
書き間違いや、なんらかの勘違いが原因であることが多いです。簡単なつづりミスならば、構文エラー(Syntax Error)によって、すぐに間違いが見つかります。しかし、簡単にバグの原因が特定できないことも多くあります。そんなときはどうしたら良いでしょうか?

以下の3点から考えてみます。

・具体的なデバッグ方法
・バグを予防する
・精神論


具体的なデバッグの方法

どんな天才的なプログラマーでも、間違いの1つや2つは犯してしまうものです。一度もバグに遭遇せずプログラムを完成させることはできません。「うまく動かない!どうしたら良いだろうか?」と慌てる前に、プログラムのどの部分が間違っているのか、特定することが一番大切です。

よくプログラミングの掲示板に「どうしてもバグが取れないんです。ソースをちょっと見てください。」と、長い長いソースがコピペされているを見ます。こういうのは、間違いなく「自分で何とかしろ!」と突っ込まれることになります。

とにかく、まずは、どの部分で処理が間違っているのか、ブレークポイントを設定したり、変数の値を確認してみましょう。JavaScriptなら、FireFoxのアドオンであるFireBugを利用することで、ブレークポイントを設定したり、変数の内容を見ることができます。※FireBugは便利すぎるので、使わないのはもったいないです。

また、IEでデバッグが必要なら、Visual Studioをインストールすると、Visual InterDev というのが入るので、これでステップ実行させることができます。(IEのオプションの詳細設定で、「スクリプトのデバッグを使用しない」をオフにしておきます。)

これらの、デバッガーを使うまでもない時は、alert("xxx") で変数の内容を確認したり、document.writeln("xxx") で処理の一連の流れを表示させるのが定石でしょう。

JavaScriptでよくはまるのが、メソッドが存在すると思って呼んでいるのに、綴りミスだったり、オブジェクト違いでメソッドが存在しなかったという場合です。怪しいと思うメソッドが存在するか、以下のようにしてチェックしてみましょう。

alert( object.method );

また、オブジェクトの内容を再帰的に表示したい場合がよくあります。そのときは、PHPのprint_r()に似た関数を作って使っています。


<script type="text/javascript"><!--
function print_r(obj) {
var count_obj = 0;
    function _output(str) {
       document.writeln(str + "<br/>");
    }
    function _print_r(obj, name, level) {
     var s = "";
        if (obj == undefined || level > 4) return;
        for (var i = 0; i < level; i++) { s += " | "; }
        s += " - " + name + ":" + typeof(obj) + "=" + obj;
        _output(s);
        if (name == "document" || typeof(obj) != "object") return;
        for ( key in obj ) {
        if (count_obj++ > 150) return;
         _print_r(obj[key], key, level + 1);
        }
    }
   _print_r(obj, "*", 0);
}
//-->
</script>

これなら、print_r( obj ); とやるとオブジェクトのプロパティ一覧を確認できます。

print_r.gif


バグを予防する

また、バグの原因を作らないようにするのも、最大のデバッグ方法だと言えます。プログラムをユニット単位に分割し、ユニットテストを行いながらプログラムを作ります。完成してからデバッグするよりも、テストファーストでテストをしながら作る方が、結果的には、短時間で完成することが多いようです。

JavaScriptの、ユニットテストライブラリ「JsTrester」や「JsUnit」を利用してみるのも良いでしょうか。

ただ、私はそれほど大きなプログラムをJavaScriptで組まないので、もっと単純に C言語にあるような assert() 関数を作っておいて、ファイルごとにテスト項目を作ってテストするようにしています。


精神論

また、時には、どうしてもバグの原因が分からず、精神論で勝負しないといけないこともあります。プログラミングに煮詰まってしまったら、一度、その場を離れて冷静になって考えなおしてみましょう。

煮詰まったときの対処方法として、私が一番効果があると思っているのは、プログラムの内容を誰か他の人に聞いてもらうことです。職場の同僚や友達に、とにかく処理の内容を聞いてもらうのです。

相手がプログラマーなら、プログラムの矛盾を指摘してくれたりするので、一番良いのですが、全くの素人だとしても、「ここがこうなって、こうなって…」と丁寧に説明していくうちに、怪しい点を見つけることができるでしょう。

他の方法としては、プログラムのソースコードを声を出して読んで見るのも、効果があるようです。このとき、ただ読むだけでなく、処理の流れごとにコメントを書き加えながら読んでいくと矛盾点を見つけることができます。

そして、究極の方法ですが「眠る」のが一番です。原因がつかめずムキになってパソコンに噛り付いているよりも、睡眠をとって、脳を休ませると、良い解決が見つかります。無駄な時間を浪費することもなくなります。私はよく夢の中でデバッグをしていることがあり、バグの原因を特定したところで目が覚めたこともあります。

それから、部屋をぐるぐる歩き回って考えるというのもよく聞きます。階段を上ったり降りたり、トイレに篭ってみたり、コンビニに飲み物を買いに行くなどなど、その人それぞれの効果的な方法があると思います。こうした方法は、他の人から見ると「奇行」なので変態扱いされることが多いのですが、なるべくカッコよくデバッグしたいものです。

頑張らないこと

とにかく、頑張ってプログラミングしていると、バグを作りこみがちです。

難しくてトリッキーなプログラムを作るのはバグの元凶となります。自分の能力や理解を超えた処理が必要なら、既存のライブラリを使いましょう。

若いころ、自動車の免許を取りに行ったとき、事故を起こさない最大の対処方法は、車に乗らないことだと言われました。プログラミングにおいても、時には自分で作らないことも大切だと思います。

また、誰が見ても、処理の内容が分かるプログラムを書きましょう。ちょっとダサくて冗長でも、バグに悩んで時間を浪費するよりは、ずっと良いはずです。力を抜いて頑張らないで作ることが大切だと思います。

朝Hackしよう
このエントリーをブックマークに追加 このエントリーをlivedoorクリップに追加

尾藤正人です。

最近All Aboutの「大人の早起き」が最近のトレンド!?という記事を読んで早寝早起き生活を始めました。 まだ1週間程ですが、早寝早起き生活を始めてからすこぶる調子がよくなっています。

プログラマは夜型生活よりも、早起き型の方が効率が良いのではないのか、というのが現在の僕の中での有力な説になってます。 そこで、実際に早寝早起き生活を始めてみて、どのようなメリットがあるのか書いてみたいと思います。

計画的に睡眠がとれるようになった

早く寝るように気をつけることで計画的に十分な睡眠時間を確保できるようになりました。 睡眠時間は効率よく作業するのに大変重要です。

先週末、ウノウで開発合宿に行ったのですが、開発合宿でも僕は早寝早起きしてました。 ほとんどの人が遅くまでがんばっているんですが、「遅くまで起きる」->「十分な睡眠時間をとらずに朝ご飯」->「疲れてるので午前中寝る」というパターンにはまってしまうと、睡眠時間を連続してとれないで十分に休むことができないのに、睡眠時間は僕とほとんど変わらないという現象になっていました。 十分な睡眠時間と計画的に睡眠するのは重要なことだと改めて認識しました。

睡眠をとった後の方が作業の効率が良い

仕事から帰ってきて、いろいろやろうと思っても、疲れててあまり作業が捗りません。 早寝早起きすれば睡眠とった後なので、疲れもとれて作業効率アップです。

朝の時間帯の方が割り込みが少ない

朝は活動する人が少ないせいか、外からの割り込みが少ないので作業に集中することができます。 僕は家にいるときは大抵テレビをつけているのですが、深夜番組みるよりも、めざにゅーで杉崎美香の爽やかな笑顔をみる方がいい気分になれて一石二鳥です。

まとめ

早寝早起きすると作業効率大幅アップです。プログラマはみんなで朝Hackしましょう!!

参考までに僕のスケジュールを紹介しておきます。

  • 22:00 就寝
  • 4:00 起床
  • 4:00 - 4:30 シャワーを浴びて目を覚ます
  • 4:30 - 7:30 自由時間(ハムスターと遊んだりとか)
  • 7:30 出発
  • 8:00 - 9:30 カフェで読書
  • 10:00 出勤

早起き生活を始めてから、朝の時間帯のカフェはかなり混むというのがわかりました。 世の中では早起き生活を実践している人は潜在的にかなり多そうです。 自分がこの業界にいたから気づかなかっただけでしょうか。

2006年11月21日

VMwareとCentOSでウェブ開発の環境をさっさと整える手順書(前編)
このエントリーをブックマークに追加 このエントリーをlivedoorクリップに追加

最近オイルヒーター,ガスファンヒーター,石油ファンヒーターのどれを買おうか悩みつつPHPのフレームワークはSymfonyにかなり転がりそうなjokagiです. 私が遅いので気を遣ってkomagataさんが先に書いてくださいました. ナイスフォローありがとうございます.

さて今回は,先日参加した開発合宿をはじめ最近何度かLinux環境を用意する必要性が連続したので,その辺りの作業を手短にする手順を紹介します. 慣れれば最低限の環境は10分程度,全部で30分あれば十分ウェブ開発に必要な環境を用意できるようになります.

とりあえずLinuxはCentOSでバージョン4.4用にServerCDというのがあるので,それとVMware Serverを使います.

まずVMware ServerのインストールとCentOSのisoイメージを下記リンクあたりからダウンロードしてください. VMware Serverはライセンスを入力しなければいけないので仕様ライセンスの取得も忘れずに. また,VMware Serverを用いた運用についてはライセンスの内容を十分確認してください.

VMware ServerのインストールはWindowsの場合だと一般的なWindwosアプリケーションと同様です. Linuxの場合,Red Hat系ならRPMがあるので「rpm -ihv <ファイル名>」ですぐインストールができます(ただしvmware-config.plを実行し,最低限の動作設定をする必要がありますが). 一応Administator権限が必要だと思いますので,権限のあるアカウントでインストール作業を行ってください(多分再起動が必要なので注意してください)

次にGuestOSの作成を行います. とりあえずこんな感じで作成しました.

基本的にデフォルト.種類はLinuxでRed Hat Enterprise Linux 4を選ぶ
CentOSはRed Hat Enterprise Linuxをベースに作成されているので,ここではRed Hat Enterprise Linux 4を選択するといいでしょう.
仮想ディスクサイズは20GB,容量確保は動的でで2GBスプリットは行わない
20GBにはあまり根拠はありません.大体5~10GB前後あればいいかもしれません. 容量を最初から確保しないのは,私は沢山GuestOSを作成するので(以前は20~30は常時持っていて大体10は同時に使用していた)HDDもう1個用意をケチっています. 2GB分割をしないのはファイルが増えるのがいやなだけだったりします.
ネットワークはNATインターフェースを選ぶ
Bridgeを選ばないのには理由があり,Bridgeは有効なネットワークインターフェースが存在しなければ何もネットワークが起動しなくなるからです. NATインターフェースなら少なくともHostOS上からは常にアクセスができるようになります. また,外部からアクセスさせた場合はrouteコマンドなどでパケットがこちらに飛ぶようにして貰えばいいだけなのでそんなに面倒な話ではありません.
CDは仮想CDで先ほどダウンロードしたisoを指定する
CDやDVDはいちいち焼く必要はありません. 限りある時間や資源の無駄遣いです. エコで行こう.

後はこれで一般的な手順でanaconda(インストーラー)を進めていきます.

個人的にはこの辺で若干標準ではない操作と設定をします.

  • 画面左下の「Hide Help」で左のヘルプを隠す(まず読まないヘルプエリアが消えるので編集画面が広くなる)
  • キーボードはUS Internationalにします.開発者は英語キーボードがいいですよ.超お勧めです.
  • ファイアウォールとSELinuxは無効にする.やる気があるなら後で調整しましょう.
  • インストールするロケールはEnglish(USA)もチェックします.半分気分的なものですが.
  • 「インストールするソフトウェアパッケージをカスタマイズ」を選び,次の画面で「最小」を選ぶ

キモは最小を選ぶことです. 実際に使用する時期が後になればなるほどパッケージをインストールした環境を構築していてもアップデートが出てきて再度アップデートする必要が出てきがちです. じゃー最初から入れなきゃいいじゃん!!ってことで必要なものは後でyumでインストールする方が手っ取り早いです. さてこれでインストールするとおおよそ手元のノート(おおよそスペックはDELL製 XPS M1210,Core 2 Duo,nVidia,メモリ1GB,7200rpm HDD)5分未満でインストールできました. インストールができたらとっとと再起動します. このときこのGuestOSのディスク容量はおおよそ850MB前後でした. コンパクトでいいですね. うまく圧縮できればぎりぎり800MBのメディアならCDにも入るかもしれません.

ちなみに再起動したときはVMwareのロゴがでてきたころにGuestOSの電源を落とし,イメージをコピーしておきます. これで何度でもやり直せます.やり直したいときは5分でも面倒くさいですから.

ちなみに実は後でいろいろパッケージを追加します.その追加されたイメージをコピーしておいてもいいですが,個人的にはコンパクトさ重視でこの状態を保存しておきました.

さてやっとLinuxをちゃんと起動します. ここでrootでログインし,まずネットワークの設定を行います. VMware ServerのNATはインストール時に存在しないネットワークアドレスを探し,見つかったらそれをNAT用のネットワークアドレスにします. 今回私の環境では192.168.112.0/24がそれに当たりました.

VMware ServerのNATネットワークは最後の8ビットのうち1をHost OSのNAT側インターフェースとして,2をゲートウェイとして,128~254をDHCP用に割り当てるようで,それ以外なら固定IPアドレスとして使用することができます. 私はよく5~10あたり(つまり例えば今回なら192.168.112.5~192.168.112.10)に固定IPアドレスで設定し,サーバーとして使用します. 設定はエディタでやってもいいですコマンドnetconfigもお手軽です.ただしコマンドnetconfigはコンソールベースだと文字化けする場合があるので,LANG=Cを付けて起動しましょう.

# /usr/sbin/netconfig

今回開発サーバー用のIPアドレスは192.168.112.10ということにしたので,netconfigを用いると大体こんな感じになります.

[root@tjokagi ~]# /bin/cat /etc/sysconfig/network-scripts/ifcfg-eth0
# Advanced Micro Devices [AMD] 79c970 [PCnet32 LANCE]
DEVICE=eth0
ONBOOT=yes
BOOTPROTO=static
IPADDR=192.168.112.10
NETMASK=255.255.255.0
GATEWAY=192.168.112.2
HWADDR=00:0C:29:2C:C6:3E
[root@tjokagi ~]# /bin/cat /etc/resolv.conf
; generated by /sbin/dhclient-script
search localdomain
nameserver 192.168.112.2

若干この設定に関する補足を下記にしておきましょう.

ifcgh-eth0のHWADDRは削除するかコメントアウトするほうがいいかもしれない
HWADDRはインターフェースのMACアドレスが入るのですが,通常ネットワークインターフェースにはMACアドレスが付加されていますが,VMware Serverは使用上設定ファイルのパスをベースにMACアドレスを生成します. つまりフォルダーを移動するとMACアドレスが変化する可能性が出てきます(一応GuestOS起動時にどうするか確認してくる). 設定ファイル上のHWADDRはインターフェースのMACアドレスが入るのですが,これと実際のMACアドレスが不一致だった場合,インターフェースが起動しません. この原因に気づかなければずっとインターフェースが起動できなくなってしまいます.
resolv.confのsearchやdefaultdomainの設定をどうするか
個人的にサーバーを指定するときにいわゆるホスト名には必ずFQDNを指定するようにしています(jokagi.example.comなど) これをホスト名だけで指定する方はresolv.confにsearchやdomainの値を適切に指定する必要があるでしょう.

次にサービスの設定をします. コマンドsetupでCUIを使って設定もできますが,個人的にはchkconfigを用いてCLIで設定するが好みです. 厳密にやると面倒なのですが,基本的に外からアクセスされることのないウェブ開発として準備していたので最低限のもののみ停止します. 下記は「cups」「isdn」「kudzu」gpm」「smartd」「pcmcia」のサービスを停止します.

# for SERVICE in cups isdn kudzu gpm smartd pcmcia; \
  do /sbin/chkconfig ${SERVICE} off; done
 (実際は1行です)

次に必要そうなパッケージをガンガンいれていきます.

# /usr/bin/yum update
# /usr/bin/yum install httpd postfix openldap-servers postgresql-server mysql-server
# /usr/bin/yum install php php-{mbstring,pgsql,mysql,ldap,imap}
# /usr/bin/yum install emacs rpm-build gcc

1回目のyumはまずシステム全体のアップデートを行います. これは少し時間がかかるかもしれません.

2回目のyumはサーバー系のインストールです. 自分が必要だと思う分だけインストールしましょう.

3回目のyumはphpで必要なRPMをインストールしました. 個人的に「PEARはRPMで管理するべからず」と考えているので,後々http://go-pear.org/から別途インストールします.

最後のyumは単にメインのエディタにemacsを使っているから入れています. のちに自分で準備したPHPのRPMをビルドするためにとりあえず最低限の開発関連のパッケージをインストールしています(今入れてもどうせ後でもっとたくさん入れないといけないんだけど).

次にuseraddで一般ユーザーを作成し,ウェブ開発用のグループを作成します. 作成した一般ユーザーにはパスワードもちゃんと付け,vigrを用いてwebに所属させます. 作成した一般ユーザーはsshの公開鍵をちゃんと入れておき,パスワードログインはしないようにしましょう.

# /usr/sbin/useradd jokagi
# /bin/passwd
# /usr/sbin/groupadd web
# /usr/sbin/vigr

ここでなぜわざわざ新しいグループを作るかというと,共同作業などを行う場合,ディレクトリに特殊なパーミッションしていして作成すると共用ディレクトリのようなものを実現できるため,この作業はその下準備とします.

# mkdir /home/web
# chmod g+s /home/web
# chgrp web /home/web

これでグループwebに追加されているか阿吽とが/home/web配下でファイルやディレクトリを作成するとそのファイルやディレクトリのオーナーグループはwebになります. umaskを0002にしておけばグループでの読み書きが可能になるので実質共用フォルダーのようなものが実現できるようになります.

次に,またvigrを用いて今度は先ほど作成したユーザーをグループwheelに所属させ,visudoを用いてsudoの設定をします. sudoの設定でwheelはsudo経由でrootになれるようにし,sudoを併用することにより一般ユーザーをrootに直接ログインしないでいい環境にします.

# /usr/sbin/vigr    (「wheel:」で始まる行の右にカンマ区切りで先ほど作成したユーザーを追加)
# /sbin/visudo      (「# %wheel」で始まる行にある行頭の「#」を削除する)

「# %wheel」と書いている行は「NOPASSWD:」という文字列を含む行の方の行頭の「#」をはずすとsudoをするたびにパスワードが聞かれなくなります. これを使うか使わないかは運用方針と好みになりますね.

# su - jokagi
$ mkdir -p ~/.ssh
$ chmod go-rwx ~/.ssh
$ vi ~/.ssh/authorized_keys2
$ chmod go-rwx ~/.ssh/authorized_keys2

ssh関連はパーミッションなども意識して動作するので,しっかり設定してあげてください. 最後にsshd(sshサーバー)の設定をします. 今回はrootへはssh経由でログインできないようにし,パスワードでのログインも禁止します.

# /usr/bin/vi /etc/sshd_config

編集のポイントは下記のようになり,編集が終了したらsshdを再起動します.

  • PermitRootLogin no
  • PasswordAuthentication no
# /sbin/service sshd restart

これでLinuxにログインする上で最低限のことができました. だいたいここまでで慣れれば合計10~15分で設定できます. Windows上に(Linux上でも動くみたいですが)httpdなどを用意するXAMPPなどもありますが,この程度の時間で最低限のインストールができるなら(おそらくより本番環境に近い)Linuxをさっさと入れる方が最終的には近道になるという考えもあります. 特に複数の案件を同時にこなしたい!!といったときは,開発環境をきっちりわけて持っておく方がより確実な開発環境になります.こういった場合VMwareならGuestOSのイメージを必要分持てばいいだけですが,XAMPPでは中々難しいでしょう. 今となっては仮想技術のようなものは他にはcoLinuxやXenなどもありますが,それなりに沢山のバリエーションのOSやディストリビューションを使用する目的でVMwareを(バージョン1がリリースされる前から)用いていた身には他の環境に移るモチベーションを中々持つことができずにいます.

さて手短にとかいう出だしの割りに長くなったので今回はここで終わります. 次回はここからhttpdの設定などを行います.って肝心なところだろ!!とも思いますがご了承ください. httpdの設定などはなるべくメンテナンス性などを意識した開発環境の構築などを紹介したいと思います. 興味がでてきた方は首を長くして話半分で期待してください.

今回の結論としては子供がいる家庭で暖房器具は何にするのが最適かというお話でした. もしいいアドバイスがあるかたは私のブログなどにでも適当なエントリにコメントをいただければと思います. それではあでゅー

2006年11月20日

デフォルト派のためのソフト選び
このエントリーをブックマークに追加 このエントリーをlivedoorクリップに追加

komagataです。

前回このブログに投稿してからデフォルト派を勝手に自称していますが、デフォルト以外にインストールしているソフトについて紹介します。

インストールしているソフト:

  • Firefox
    Firebugが便利過ぎてどうしてもアンインストールができません。IEの意味不明なjavascriptエラーが憎いです。
    憎いエラー
    憎いエラー posted from フォト蔵
  • Putty
    Windows標準のtelnet.exeではどうしてもssh接続ができません。泣く泣くインストールするほかありません。(ちなみにパティと読むらしいです)
    telnet.exe
    telnet.exe posted from フォト蔵
  • gvim
    メモ帳とワードパットはそれぞれ、LFが使えない、UTF-8が使えないという問題でどうしても他のエディタを入れるしかありません。お前等なんで力を合わせないんだ。
  • coLinux
    開発者には便利過ぎます。
  • iTunes
    Windows Media Playerで我慢できるように訓練したいところです。

インストールソフトを減らす僕の基本的な戦略はこの二つです。

  • 極力Webサービスを使う
    最近も メーラー → 会社ドメインのGmail、 IRC → Lingr という移行を行ってソフトが減りました。
  • coLinuxを使う
    以前もご紹介したコレを使ったり、cofsやsamba、webdavなどを使うとWindowsの一部であるかのようになって便利です。結局coLinuxにソフトをインストールすることになるのですが、使っているイメージを持ち運べるのでそれほど苦にはなりません。

また、ソフト以外ですが、コレを行ってCapslockにCTRLに割り当てています。(XKeymacsはこの機能しか使っていないことに気付いて削除しました)

他にもインストールソフトを減らすテクニックやサービスがあったら教えてください。

2006年11月16日

携帯サイト作成時の注意点(au編)
このエントリーをブックマークに追加 このエントリーをlivedoorクリップに追加

こんばんは。harukです。

前回のSoftBank編に続き、今回はau編です。

なお、HDMLに関しては扱ったことがないため、含まれていません。

  • mailtoに半角カタカナは使えない
    半角カタカナを受け付けない端末があり、その端末ではメーラが起動してくれません。
  • テキストボックスに改行が入力できる
    auはテキストボックスでもtextareaと同じように改行が普通に入力できます。
    テキストボックスだからといって安心はできません。
  • お気に入りに追加するリンクが使える
    以下のようなタグで簡単にお気に入りに追加させることができます。
    <a href="device:home/bookmark?url=URL&title=タイトル">お気に入りに追加</a>
    ※URLエンコードが必要です。
    device:は他にも色々あるみたいです。調べればすぐ見つかります。
  • cookieが使える
    ということは、他キャリアは使えません。
  • キャッシュコントロール
    http://www.au.kddi.com/ezfactory/tec/spec/wap_tag11.html
    細かいルールが出ています。
    設定をうまく行わないと、2ページ目を表示させようとしてもキャッシュされている1ページ目が表示される。
    ということになったりします。

SoftBankに比べるとそれほど困るものはありません。

しかし、メール送信を行う際には他のキャリアとは違うことがあります。

  • サイトから送信するメールの改行はLF
    万が一、CR+LFだった場合には、改行が2つになる端末もありますので強制的にLFにしましょう。
  • メールフィルターで拒否した場合のエラーメールが返ってこない
    http://www.au.kddi.com/notice/meiwaku/email/index.html
    メールフィルターでブロックした場合の送信元への拒否通知 (エラーメール) の返信有無を設定できます。 初期値は「返信しない」に設定されます。
    こうなると、どうやってメールアドレスの管理をすればいいのでしょうか。
    管理するいい方法をぜひ教えてください。
  • SPFレコードが設定されていない場合もエラーメールが来ない
    http://www.au.kddi.com/notice/manner/jyushin_policy/error_mail.html
    2006年9月下旬から送信ドメイン認証技術「SPF」を利用し、DNSで公開されたSPFレコードにより送信ドメインが認証できないメールに対して、あて先不明のエラーメールを返送しない機能をEZwebに導入致します。 また、2006年度内にSPFを利用したメールフィルター機能を提供する予定です。
    こちらはあて先不明の場合です。

サイトからメールを送信する場合は、

メールアドレスの管理は全キャリアで必要ですので、気をつけましょう。


見てのとおり、けっこうあっさりとしたものになってしまいましたが、

少しでもお役に立てれば幸いです。

2006年11月14日

SBO(Social Bookmark Optimization)に関するほにゃらら
このエントリーをブックマークに追加 このエントリーをlivedoorクリップに追加

女性に愛されるプログラマーの7つの要素を見て、モテ系エンジニアになるためがんばってるKeitaです。

ラボブログでは、はてなブックマークの登録リンクと被ブックマーク数の表示をしています。 おかげさまで、一部のブログはかなりの数の被ブックマーク数を獲得しています。 しかし、私の書いた記事は残念ながら300を超えたことがありません。

それはそれで悔しいので、もちろん内容を充実するのが一番いい方法ではありますが、ちょっとしたコツで被ブックマーク数が増えるのではないかと思い、簡単ではありますが社内の人のアドバイスや統計情報を下にそのコツを洗い出してみようかと思います。

さて、このエントリに関する注意事項を先に何点かあげさせていただきます。

  • ウノウ社員は、はてブの件数ばかり気にしてるわけではありません。
    投稿したあと、リロード繰り返してしらべてるわけじゃありません。本当です。
  • 統計情報および内容は本物ですがネタです。
  • 仕事はちゃんとしてます。

まず、基本事項として社内の聞き込み調査の結果次のようなことに注意するといいという話を聞きました。

  • 注目を集めるようなタイトルをつける
    これは、内容が伴わなければ恥ずかしいだけになってしまうのですが重要な要素となるようです。
  • まとめ記事は人気がある
    まとめ記事系の被ブックマークは、人気が高いようです。 実はSBOとはまったく関係ないのですが僕個人としてはできるだけ、一次情報源になるように注意しています。自分オリジナルの内容で勝負することは大切だと思います。実際のところは、やはりまとめ記事などのほうが人気は高いようです。
  • 長文にする
    文章を長めにすると。[あとで読む]系のブックマークが増えるような気がします。

そのほかに、何が重要になるかなと、考えたときに投稿時間によっても、多少ブックマーク数が上下するのかなと考えました。 たとえば、投稿されたタイミングによって、はてなの注目エントリーに乗りやすいなどはきっとあるのではと予想してみました。

と、いうわけで、時間による統計をとってみました。

無料でここまでできる!OS毎のセキュリティ対策まとめの統計です。

sbo_graph_small.gif
[クリックで拡大]

意外と時間による差は小さく午前1時から6時くらいまでは静かで、その他はわりと万遍なく伸びている感じです。

それでも無理やり傾向を読み取ってみると、19時に記事を投稿してから最初のころは、RSSリーダー系にクロールされないためブックマーク数は比較的伸びが少なく、その日の23時~1時くらいまででちょこちょこっと伸びを見せます。 その後、午前中の9時~11時くらいまでが一番ブックマークされてます。

ということで、9時~11時の間にブックマークされることを見込んで、なおかつ、RSSリーダー系にクロールされる時間を見込み、前日の深夜もしくは8時前に投稿するのが望ましい形なのかもしれません。

ところで、ウノウでは社員を募集していますが、それとは別に僕も素敵な技術系に理解ある彼女を募集しています。

2006年11月13日

Dojo 0.4の新機能を使っていろいろ遊んでみました
このエントリーをブックマークに追加 このエントリーをlivedoorクリップに追加

こんにちは。できないのではなく「つくらない派」のhideです。

以前、「Dojoで簡単にクロスドメインAjaxを実現」というエントリを書きましたが、その後、新機能が追加されたDojo 0.4がリリースされました。0.4になって、JSONPを簡単に扱う方法は、dojo.io.bind() を dojo.io.ScriptSrcTransport.bind() を使うように変更しないと動作しなくなったので注意してください。

追加された機能は次の通りです。

・グラフ描画機能の追加
・各種ウィジェットの追加
・SVG/VMLのベクター描画ライブラリ(GFX)の追加
・FireBugと連携したデバック機能の改善
・名前空間のサポート
・i18nサポート

そして、Dojo 0.4を使っていろいろ遊んでみたサンプルがこれです。HTMLとJavaScriptのコードを書いただけで、サーバサイドのプログラムは1行も書いていません。グラフの描画もDojoのChartingライブラリを使って行っています。

dojo04s.png

Dojoで遊んでみたサンプル


上部のDockみたいな部分を簡単に説明すると、次のような感じです。FisheyeList widgetというのがこれで、基本的にdivタグの属性としてプロパティを書いておくだけです。FisheyeListItemがアイコン一つ一つに対応して、iconsrcで画像ファイル名、onClickでクリックした際の動作を指定します。

<div dojoType="FisheyeList"
    	itemWidth="50" itemHeight="50"
    	itemMaxWidth="100" itemMaxHeight="100"
    	orientation="horizontal"
    	effectUnits="2"
    	itemPadding="10"
    	attachEdge="top"
    	labelEdge="bottom"
    	enableCrappySvgSupport="false">
        
    	<div dojoType="FisheyeListItem" onClick="load_app('mypane1');"
             iconsrc="images/icon_comment.png">
    	</div>
    	<div dojoType="FisheyeListItem" onClick="load_app('mypane2');"
             iconsrc="images/icon_calendar.png">
    	</div>
    	<div dojoType="FisheyeListItem" onClick="load_app('mypane3');"
             iconsrc="images/icon_graph.png">
    	</div>
    	<div dojoType="FisheyeListItem" onClick="alert('Monkey!');"
             iconsrc="images/icon_monkey.png">
    	</div>
    	<div dojoType="FisheyeListItem" onClick="load_app('mypane4');"
             iconsrc="images/icon_info.png">
    	</div>
    </div>
</div>


少々動作が重いのが難点ですが、これだけ簡単にこのレベルのアプリケーションが書けると夢が広がります。次の開発合宿では、あんなのやこんなのを作ってみたいですね。

【サイト研究】第7回 Traineo - みんなでダイエットして男前なエンジニアになろう! - (11/2)
このエントリーをブックマークに追加 このエントリーをlivedoorクリップに追加

akano です。

先に紅一点 sasha のエントリで「女性にモテるエンジニア」の条件とありますが、私 akano もここゥン年ほど彼女がおりませぬ。現状として学生に占める男子率が90%を越える工科単科大学の院に所属しており、女性エンジニアが一人しかいない会社でアルバイトしており、4月からの就職先も今までとほぼ変わらない環境ときては、まぁ、しばらくは、絶望かな、と苦しい言い訳も口にしてしまうというもんです。とりあえずは身近にいる人々を見習ってせいぜい「男前エンジニア」にはなろうと精進を続ける日々でございます。

まぁ環境のせいばかりにしてもしょうがないので、週末とかは結構外に出て行ったりとかしていて職場や学校以外では女性に会う機会もなきにしもあらずなのでそのときに男前っぷりをアピールしたいのですが、どうも自分のお腹が気になりまして積極的に出れないウノウ No.2 の巨漢でございます。

そんなあなたに今回ご紹介するのが、この Traineo です。「Fitness & Weight Loss Community」と銘打っているこのサイトは、「ダイエットするモチベーションをみんなで保とう」というコミュニティサイトです。
さて、そのサイトには一体どういう仕組みがあるのかというと、

・目標体重と減量期間を入力することにより、「一日に何キロ落とせば良いか(何キロカロリー摂取したらどれくらい運動すべきか)」を教えれくれる
・毎日の成果が簡単にグラフになって表示される(グラフにされるだけでもダイエット効果ありますよね)
・何人かのモチベータ(友達)を巻き込み、彼らとメッセージを交換したりできる
・コミュニティでダイエット情報の交換ができる

というわけで使ってみました。

最近の流行でしょうか。Ajax を駆使しており、画面遷移が最小限になっているのは嬉しいです。また、そのエフェクトもかっこ良く作ってあるのでかなり気持ちがよかったです。
また目立つ広告等は見受けられませんでしたが、サイト上でオフィシャルグッズを販売しておりそれを収入にしているようです。どれくらいの利率があるのか気になります。

今後は、血圧測定器や体重/体脂肪計などをUSB接続するようになり、これらの情報をより有機的にからめるようになり、必要に応じて専門医と共有したりするのでしょうか。個人情報保護のガイドラインやセキュリティの問題が解決されるのでしたらこれは当然来るべき未来なのかもしれません。

それでは皆さんも

   Happy Shaping !!

1102_1st posted from フォト蔵
1102_2nd posted from フォト蔵

2006年11月11日

女性に愛されるプログラマーの7つの要素
このエントリーをブックマークに追加 このエントリーをlivedoorクリップに追加

Sashaです。

最近ウノウでは、独り身なプログラマーにどうやったら彼女が出来るか、そんな話題がなぜか流行ってます。

私から見れば、「男前なプログラマー」であることと、「女性に愛されるプログラマー」であることはちょっと違っていて、例えば、「男前なプログラマー」というのは、

・なんせ仕事がばりばりデキて、しかも早い!
・おいしい仕事じゃなくても責任感を持ってできる。
・技術の向上に常に余念がない。
・作り出したもの完成させるプライドを持っている。
・穏やかにチームワークが出来る。
・仕事のやり方に無駄がない。
・仕事にビジネスマインドがある。
・ありがとうがいえる。

と、こんな感じです。はっきり言って、ウノウのスーパープログラマーたちは全員そろいも揃って、「男前なプログラマー」の条件を超楽々クリアしています。

「男前」であることって、「彼女がいる・いない」ことよりはるかに大事だと思うんですが、それでも、やっぱり女の人にモテたいというのはグローバルな悩みなんですね、きっと。

そこで、ウノウ開発チームの紅一点のわたくし、「女性に愛されるプログラマーの、7つの要素」と題したこのエントリーを、愛すべき同僚たちへ捧げます!

一言断っておきますが、このリストは4人のウノウ・プログラマーに緊急インタビューした上で、そのインタビュー結果をまったく無視して私の独断と偏見でまとめたものです。なので謳っていることには実際の人物像はまったくからんでおりません。


人の目を見てほめることが出来る

人を褒めるというのは、プログラマーじゃなくても日本人男性一般的に苦手なのではないでしょうか。特に、プログラマーの肩書きを持つ人は一般的に気持ちを口頭で表現することが苦手な人たちです。だからこそ、職業に似合わず堂々と人を褒めることが出来るプログラマーは、女性を惹きつけるはず。たぶん。

アナログな趣味を持つ

ぜーんぜんプログラマーっぽくないのに、デキるプログラマーは、男性プログラマーから見てもかっこいいと聞きました。そのプログラマーっぽくない基準のひとつが、アナログマインドです。週に一回は、頭をスイッチして、アナログでものを考えて見ましょう。ノートに鉛筆で、誰にもブックマークされない日記を書いたり、フィルムカメラで写真を撮ってみたり・・・。このバランス感覚と意外性が、素敵だと思います。

スポーツを愛する

朝から晩までPCに向かっていて、体を動かさないプログラマーたちは、健康を損ないがちです。体の何処にも異常を感じなくても、歳以上に老けて見られる、というのは危険信号。若さを保つにはスポーツが一番です。どんな女の子だって、若々しい男性がいいに決まってます。ジムに通ったり、自転車や歩きで職場に行ったりするのもいいですね。女の子と、スキーやボード、テニスやゴルフが楽しめたら、一石二鳥ですね。

下手でも絵が描ける

アートなんて、そんな仰々しいものはよくわかりません。でも、見たままのもの、あるいは頭の中にあるものを、さらには心の中にあるものを描くことが出来るって、すごい魅力的。レストランでご飯を待っているときに、シャイなために無口になってしまったとしても、紙ナプキンに下手でも絵を描いてみたりして見たらいいかも。

おいしいものが好き・お料理好き

基本的に女の子は食いしん坊です。食いしん坊なんですけど、男性よりも食う!なんてことを認めたがらないのです。食べたいんですけど、一人で食べるって、つまんない。おいしいね!って言って、一緒に食事を楽しめる人っていいと思います。さらに、「女性は料理が作れるべきだ」という、日本の女性の多くが感じる「のしかかる期待」感を覆すような、料理好きもモテ値は高いと思います。さっそく、同僚の女性にご飯でも作って、本番に向けて腕を磨いておきましょうw

文章が上手である

ラブレターを書く、ということでは全くありません。文章をちゃんと書ける語彙のあるプログラマーは、仕事にも哲学があります。信念があります。なおかつ、上手な文章というのはもちろんわかりやすい文章ということでもあります。自分の職業や趣味の話を、「プログラマー=PCのことを知ってる人」という認識程度の女の子たちに説明してあげることを想定して普段から文章を書いていれば、合コンでついつい「正規表現」とか「デフォルト」とかNGワードを連発してしまう恐怖感も和らぐはずです。

お母さん、おばあちゃん思い

どんな女性も、歳をとります。とりたくないので一生懸命スポーツをして健康的な生活をしたとしても(してないけど)、それでもいつかはシワシワのおばあちゃんになります。お母さんに優しい人、おばあちゃんにやさしい人、というのは、女性に対して普遍の愛情を注ぐことのできる人で、絶対的な安心感を与えます。それに、お母さんとか、おばあちゃんとかって、一般的にプログラマーと趣味の世界(オタクな世界)を共有できる人種ではありません。そんな女性たちと話がちゃんと出来て、楽しませる、幸せにすることができるプログラマーは、絶対にモテるはず。家族の中の偉大な女性を、まずはハッピーにしてみましょう。

======
こうして今周りを見渡してみると、我が愛すべき同僚さんたち、みんないずれかの要素を持ち合わせている気がします。あ、ちなみに、一つでもカバーしていたら「愛される」条件クリアですね。ということは、あと必要なのは出会いと、気長に待つ余裕でしょうかね。

さて、えらそうに独断と偏見を堂々と会社のブログに投げた私は、「自分はどうなのさ」と突っ込まれないうちに、さっさと退散いたします。また次回!

2006年11月 9日

1人のエンジニアがフォト蔵リニューアルを通して学んだこと(前編)
このエントリーをブックマークに追加 このエントリーをlivedoorクリップに追加

naoyaです。
いつも技術系の記事が多いのですが、今日はすこし別のテーマでエントリしたいと思います。
僕は入社してからフォト蔵チームで、フォト蔵のバグ修正や機能拡張を行ってきました。
現在、フォト蔵は11月1日にサイトデザインの大幅なリニューアルを行い、現在は試用期間中です。僕もフォト蔵チームで、フォト蔵をオープンして以来3回目となるサイトデザインのリニューアルに設計当初から参加できる貴重なチャンスを得ることができました。
なので、今回はフォト蔵のリニューアルを通して体験したこと、学べた、感じたことについて書きたいと思います。

フォト蔵のリニューアル開始時(2006年7月下旬頃)は、次のような人員体制でした。
・リーダー:1人
・デザイナー:1人
・エンジニア:1人(僕)


第一章:リニューアル開始


リニューアルにあたっての最初の作業は、美人デザイナーsashaさんがサイトデザインのモックアップ画を Photoshopを使って作るところから始まりました。このとき僕は実際の作業がなかったためあまり参加できませんでしたが、リーダーとsashaさんとの間で念入りにリニューアル前のサイトデザインの問題点、フォト蔵ユーザからいただいた貴重なたくさんの意見、今後のフォト蔵の方向性、などをもとにリニューアル後のデザインコンセプトを固めていったようです。モックアップの作成途中には、僕もsashaさんとモックアップ画を見ながら、いろいろと議論しました。
このとき感じたのは、僕はエンジニアなのでプロトタイプのプログラムを作る、いわゆるプロトタイピング開発をした方が早いと感じていましたが、振り返ってみると最初はデザイン画を作っていった方が結果的にはよかったです。どうしても最初エンジニアが設計してしまうと技術的な問題にフォーカスしがちになってしまい、本来のサイトデザインをリニューアルする意義が薄れてしまうこともあると思います。今回のフォト蔵リニューアルでは、デザイナーがあまり技術的な問題を考えずに(僕は当初から技術的な問題ばかり気にしていましたが・・・)、サイトデザインを作れたことがよかったと思います。
モックアップ画を作る作業とはいっても、現在のフォト蔵すべてのページを作るわけにはいかなかったので、一番使われるメインページを中心に合計11枚のモックアップ画が出来上がりました。


第二章:実装開始


モックアップ画ができたところで、いよいよ実装を開始することになりました。ウノウではソースコードをSVNで管理しているのですが、サイトデザインのリニューアルにあって専用のブランチを作ることになりました。理由は、トランクの方はすでに本番サーバで稼働しているため安定動作させないといけないことと、リニューアル中でもバグ修正など緊急案件に対応することがあるためです。ブランチを作る作業は、リーダーから僕に一任されました。僕はSVNでブランチを作って開発することが初めてだったので、トランクの変更を定期的にブランチに反映させる作業がなかなかうまくいかずに、何度かブランチを作り直しました。このときにSVNでの作業が簡単になるようにいくつか専用のシェルスクリプトを作成しました。
このときちょうどアルバイトのひらっちが1人増えてトランク側の作業を担当してくれることになったので、僕は定期的にトランクの変更をブランチに変更させる作業をしながら、リニューアルにあたっての基盤作りを行いました。
基盤作りとき特に気をつけたのは、リニューアル後も前のサイトデザインにすぐに切り替えられるようにしたことです。具体的には、サイトデザインを決定するPHPのグローバルフラグを追加することで実現しました。このときは、リニューアル時に試用期間を設けることまで考えていませんでしたが、この下地があったので、すぐに試用期間を設けることができました。

基盤作りが一通り済んだところで、リーダーと僕で基盤となるソースコードを見ながらペアプログラミングを行い改良点などを指摘してもらいました。一通りの基盤ができたところで、いよいよリニューアルのページ作成にとりかかりました。ページ作成にとりかかるときにsashaさんと相談して僕はPHPのロジックやビュー側のソースコード変更、sashaさんはCSSの作成と担当を明確に分けました。明確に分けた理由は、特にCSSの方ですがIDやクラス名などが人それぞれで命名規則が違ってくるので、最初から二人でCSSを変更するときもsashaさん一人に任せて命名規則をあわせた方が、今後のメンテナンスもしやすいと思ったためです。
あわせて、ページの作成順序も相談して一番使われるページがフォト蔵には5ページあるので、まずはそのページを一通り作ってから、メインページからリンクしているページを順番に作成していくことにしました。このときの作業ルーチンは、次のような感じでした。

僕:メインページをある程度作る
 ↓
sashaさん:メインページのCSSを定義してデザイン調整する(必要であれば、ビューのソースコードも変更する)
 ↓
僕:その間に別のメインページを作成する、デザイン調整中ロジックコードの変更が必要な場合は随時対応する
 ↓
sashaさん:別のメインページを作成する
 ↓
(※この繰り返し)

こうして5つのメインページがある程度できてきましたが、最初の頃は担当は明確に分けたもののあまり分業はあまりできず、二人で何度もページのこの部分はどうするかといった内容を常に細かく確認していました。このとき、僕は作業効率がすこし悪いと感じてはいたのですが、最初のこそは意思統一が重要だと思ったので、思ったことはすぐに相談したりしました。振り返ってみると、僕はすぐに思ったことをsashaさんに相談したのでデザイン調整の作業を中断させて作業効率を落としていたと思うので、1日の中で15分くらいで十分だと思うので毎日問題点や進捗を確認する打ち合わせをした方がよかったと思います。


こうして、フォト蔵のリニューアルは進んでいったのですが、この後のことは次回の後編に書きたいと思います。


# フォト蔵は、11月14日まで新デザインのお試し期間中ですので、ぜひともフォト蔵の新デザインを体験してください!!!

2006年11月 7日

無料でここまでできる!OS毎のセキュリティ対策まとめ
このエントリーをブックマークに追加 このエントリーをlivedoorクリップに追加

こんにちは sato です。

個人情報が流出する事件が多発していまが、みなさんはどうしていますか?
今回は僕が家で使用しているツールについて紹介したいと思います。

ウィルス対策

AVG Anti-Virusの Freeを使っています。これでウィルスサーチや
メールの添付ファイルチェックなど、大抵のことはやってくれます。
使用しはじめて、半年以上経ちますがまだウィルスに感染したことはありません。

Windows,Linuxは
http://free.grisoft.com/doc/avg-anti-virus-free/lng/us/tpl/v5よりDLすることができます。

以下のサイトに使用方法が詳しく書いてあるので、参照させていただきました。
http://eazyfox.homelinux.org/SecuTool/AVG7/AVG701.html

Mac用には clamxav というウィルス対策ソフトがあるようです。
http://www.clamxav.com/


暗号化ディスクの使用

PCなどを紛失してしまった場合、暗号化ディスクにデータを保存していないと
データが流出する可能性が高いので、メールの内容やブラウザのキャッシュ、秘密鍵等
は暗号化ディスクに保存しています。

Windowsでは PGPDiskを使用しています。
マウント時に毎回パスフレーズをいれることでファイルをドライブに見せかけてくれるソフトです。

使用方法は以下のサイトを参照しました。
http://www.cla-ri.net/pgp/658jindex.html

このほかにもも
TVD やTrueCrypt などがあるようです。

ウノウはThinkpadユーザが多いのですが、最近のThinkpadには標準で
PrivateDiskというソフトウェアがついているそうです。
このソフトが非常に使いやすいそうなので、Thinkpadユーザは是非使用しましょう!

Macには標準で FileVaultというソフトウェが標準でついているようです。

Linuxでは FUSE(Filesystem in Userspace)が入っている環境であれば
encfs というものが使用できます。
暗号化ディスクをファイルシステムとしてマウントできるようになります。

fedora5, fedora6などであれば yum install fuse fuse-encfs等で
簡単に導入することができます。
使用方法を以下のサイトを参照しました。
http://www.hop-penchan.org/yogawa/tool/encfs/encfs.html


パーソナルファイアウォールの設定

WindowsXPではコントロールパネル → Windowsファイアウォールで設定するこが
できますので、最低限有効にしておきます。

Linuxでは iptablesなどを使用して、利用しないポートは閉じておきます

Macではシステム環境設定→共有 からファイアウォールが設定できます。

大切なのは日々のアップデートなどを捕捉してきちんとアップデートをすること、させることだと思います。

FreeBSD環境の情報をお待ちしております!

2006年11月 2日

JavaScriptからMP3ファイルを再生する方法
このエントリーをブックマークに追加 このエントリーをlivedoorクリップに追加

酒徳です。このごろは、食べ物が美味しい季節です。おかげで、ダイエット宣言しているのに、さっぱり体重が落ちません。困ったものです。

さて、今回は、JavaScriptから任意のタイミングでMP3を再生する方法について書いてみようと思います。

Webを見ていると、マウスで画像をクリックするとピコッ音が鳴るサイトがあります。「どうやって実現しているのだろうか?」と思ってソースを見てみると、Flashだったりします。そして、「そうか、Flashなら簡単に鳴らせて当然だよなぁ」と思います。

しかし、Flashは、JavaScriptほど手軽ではありません。Flash開発のための環境を整えて、コンパイルして・・・と意外と労力がかかります。たかだか、「ピコッ」と効果音を鳴らしたいだけのために、そんな苦労をするのは、割に合いません。

そこで、先日私が作ったのが、soundapi.js です。このライブラリを使うと、以下のような感じで手軽にMP3ファイルを再生できます。
<!-- soundapi.setup -->
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript" src="soundapi.js"></script>
<!-- sample -->
<a href="javascript:soundapi.playFile('pi.mp3')">play</a>

上の数行が、ライブラリをインクルードしている部分です。そして、最後の一行がJavaScriptでMP3ファイルを再生しています。

soundapi.playFile(ファイル名)だけでMP3が再生できるので簡単です!

ライブラリの仕組みは極めて単純で、まず、soundapi.jsを取り込むと、音声再生用の1pxのサイズのFlashファイルを画面の端に表示します。そして、soundapi.playFile(ファイル名)で、JavaScriptからFlashの関数を呼びだします。(JavaScriptからFlashの関数を呼ぶのには、Flash8で導入された、External APIと機能を利用しました。)

以下に soundapi.js を置いておきますので、興味のある方は使ってみてください!

→soundapi.zipをダウンロード

※利用上の注意ですが、Flashのセキュリティの関係で、ローカル環境では音が再生されない場合があります。そんな時は、Flash Playerの設定を変更するか、Webにアップして試してみてください。

2006年11月 1日

配列操作でE_NOTICE対策を簡単に行う方法
このエントリーをブックマークに追加 このエントリーをlivedoorクリップに追加

こんにちはjokagiです. もう日が変わりそうではありますが,本日はフォト蔵リニューアルお試しが始まりました!! アカウントを持っている人も持っていない人も新しく掲載する写真を用意してぜひぜひお試しください.

ってことで前フリとは関係ないのですが,今回はjokagiが以前常用していた関数を紹介します.

配列の要素を扱うときどうしていますか?

フォームを受け取るときによくあるパターンに下記のようなコードがあります.

if ($_GET['id'] && $_GET['passwd']) {
    login($_GET['id'], $_GET['passwd']);
} else {
    error_function();
}

しかしこのコードは問題があり,PHPの警告をきっちり出力するようにしていると,下記のような警告が出てくる場合があります.

Notice:  Undefined index:  id in /home/.../index.php on line 3
Notice: Undefined index: passwd in /home/.../index.php on line 3

これは未定義な配列要素を使用しているということで,URLにパラメーターidやpasswdを付加しなかった場合に出力されます. 一般的にこのような警告がでるPHPスクリプトのできはよくないということで,回避するために下記のようなコードを書く場合が多いです.

if (isset($_GET['id']) && $_GET['id'] &&
  isset($_GET['passwd']) && $_GET['passwd']) {
    do_login($_GET['id'], $_GET['passwd']);
} else {
    error_function();
}

これはisset()を用い,配列要素があるかどうか調べつつ処理を行うといった感じです. しかしこれでは2つの配列要素を扱うだけなのに可読性が下がってしまいます. ってことでまずこういう関数を用意します.

/**
 *  配列から値を取り出す
 *
 *  配列から値を取り出します。もし連想キーが存在しない場合、
 *  第3引数の値を返します。
 *
 *  @param array $array 値を取得したい配列
 *  @param mixed $key 配列から値を取得したい連想キー
 *  @return mixed 配列から取り出した値、$keyが存在しなければ
 *                $defaultを返す
 */
function array_get_value($array, $key, $default = NULL)
{
    return isset($array[$key]) ? $array[$key]: $default;
}

array_get_value()は見てすぐわかる感じですが,配列に指定要素があればそれを,なければ 第3引数の$default(省略時はNULL)を返す関数です. 個人的にはこんな使い方をよくやっていた気がします.

$first_name = array_get_value($user_info, 'first_name', 'ごんべ');
$last_name = array_get_value($user_info, 'last_name', 'ななし');

この関数を用意すると下記のように書き直すことができます.関数名は好みに応じて短くしたりしてもいいかもしれません.

if (array_get_value($_GET['id']) && array_get_value($_GET['passwd'])) {
    do_login($_GET['id'], $_GET['passwd']);
}

//  関数名を短くした雰囲気
if (avg($_GET['id']) && avg($_GET['passwd'])) {
    do_login($_GET['id'], $_GET['passwd']);
} else {
    error_function();
}

実際はid=0などこのままでは値があると認識してくれないのでもう少し修正する必要がありますね. 最近の流行のようにちゃんと===や!==でチェックしよう!!ってことでもうちょっとアレンジして第3引数の型に応じて取得した配列値の型変換を行うようにしてみました.

/**
 *  配列から値を取り出す
 *
 *  配列から値を取り出します。もし連想キーが存在しない場合、
 *  第3引数の値を返します。array_get_value()と異なるのは
 *  取得した値を第3引数の型に変換します。
 *
 *  @param array $array 値を取得したい配列
 *  @param mixed $key 配列から値を取得したい連想キー
 *  @return mixed 配列から取り出した値、$keyが存在しなければ
 *                $defaultを返す
 */
function array_get_value2($array, $key, $default = NULL)
{
    if (isset($array[$key])) {
        $result = $array[$key];

        $type = gettype($default);
        switch ($type) {
        case 'double':
            //  一応マニュアル推奨の値に変換しておく
            $type = 'float';
        case 'boolean':
        case 'integer':
        case 'string':
        case 'array':
            settype($result, $type);
            break;

        default:
            //  objectなどその他の型は変換しない
        }
    } else {
        $result = $default;
    }
    return $result;
}

array_get_value2()を使えば,例えば配列の値が「"0"(文字列型の0)」でも第3引数に「0(数値型の0)」を指定することで0が取得できるようになります. これで安心して===などで比較ができます. 文章で読んでもよく分からない方はarray_get_value()とarray_get_value2()の簡単な実行例を下記に出しておきますので参考にしてください.

<?php

/**
 *  配列から値を取り出す
 *
 *  配列から値を取り出します。もし連想キーが存在しない場合、
 *  第3引数の値を返します。
 *
 *  @param array $array 値を取得したい配列
 *  @param mixed $key 配列から値を取得したい連想キー
 *  @return mixed 配列から取り出した値、$keyが存在しなければ
 *                $defaultを返す
 */
function array_get_value($array$key$default NULL)
{
    return isset($array[$key]) ? $array[$key]: $default;
}

/**
 *  配列から値を取り出す
 *
 *  配列から値を取り出します。もし連想キーが存在しない場合、
 *  第3引数の値を返します。array_get_value()と異なるのは
 *  取得した値を第3引数の型に変換します。
 *
 *  @param array $array 値を取得したい配列
 *  @param mixed $key 配列から値を取得したい連想キー
 *  @return mixed 配列から取り出した値、$keyが存在しなければ
 *                $defaultを返す
 */
function array_get_value2($array$key$default NULL)
{
    if (isset($array[$key])) {
        $result $array[$key];

        $type gettype($default);
        switch ($type) {
        case 'double':
            $type 'float';
        case 'boolean':
        case 'integer':
        case 'string':
        case 'array':
            settype($result$type);
            break;

        default:
        }
    } else {
        $result $default;
    }
    return $result;
}

ini_set('display_errors''on');
error_reporting(E_ALL);

$array = array('foo'=>'foo'100=>100'20.2'=>'20.2');

echo '<pre>';
echo "<strong>\$array</strong>\n";
var_dump($array);
echo '</pre><hr /><pre>';

echo "<strong>\$array['foo']</strong>\n";
var_dump($array['foo']);
echo "<strong>\$array['bar']</strong>\n";
var_dump($array['bar']);
echo '</pre><hr /><pre>';

echo "<strong>array_get_value(\$array, 'foo');</strong>\n";
var_dump(array_get_value($array'foo'));
echo "<strong>array_get_value(\$array, 'bar');</strong>\n";
var_dump(array_get_value($array'bar'));
echo '</pre><hr /><pre>';

echo "<strong>array_get_value2(\$array, 'foo');</strong>\n";
var_dump(array_get_value2($array'foo'));
echo "<strong>array_get_value2(\$array, 'bar');</strong>\n";
var_dump(array_get_value2($array'bar'));
echo "<strong>array_get_value2(\$array, '100');</strong>\n";
var_dump(array_get_value2($array'100'));
echo "<strong>array_get_value2(\$array, '20.2');</strong>\n";
var_dump(array_get_value2($array'20.2'));
echo "<strong>array_get_value2(\$array, '20.2', '');</strong>\n";
var_dump(array_get_value2($array'20.2'''));
echo "<strong>array_get_value2(\$array, '20.2', 0);</strong>\n";
var_dump(array_get_value2($array'20.2'0));
echo "<strong>array_get_value2(\$array, '20.2', 0.0);</strong>\n";
var_dump(array_get_value2($array'20.2'0.0));

echo "</pre><hr />\n";
?>

$array
array(3) {
  ["foo"]=>
  string(3) "foo"
  [100]=>
  int(100)
  ["20.2"]=>
  string(4) "20.2"
}

$array['foo']
string(3) "foo"
$array['bar']

Notice: Undefined index: bar in /home/.../index.php on line 3
NULL

array_get_value($array, 'foo');
string(3) "foo"
array_get_value($array, 'bar');
NULL

array_get_value2($array, 'foo');
string(3) "foo"
array_get_value2($array, 'bar');
NULL
array_get_value2($array, '100');
int(100)
array_get_value2($array, '20.2');
string(4) "20.2"
array_get_value2($array, '20.2', '');
string(4) "20.2"
array_get_value2($array, '20.2', 0);
int(20)
array_get_value2($array, '20.2', 0.0);
float(20.2)

大体雰囲気はつかめたでしょうか? 結果的に第3引数を使用してarray_get_value2()を用いるとこういう風に記述することができます.

$id = array_get_value2($_GET, 'id', 0);
$passwd = array_get_value2($_GET,'passwd', '');
if ($id !== 0 && $passwd !== '') {
    do_login($id, $passwd);
} else {
    error_function();
}

array_get_value()はisset()し,かつ値をチェックするという手間を1回ですませる実装ができるようになります. しかし欠点もあります. それは,最初のコードではtypoなどが存在した場合,配列から値が取れなかったときにPHPのE_NOTICEが発生し,ミスを発見することができますが,array_get_value()を用いるとE_NOTICEが発生しなくなるため,この問題に気づきづらくなるという諸刃の剣の状態になることがあります.

最後に実はarray_get_value()はかなりの頻度で使用しましたが,array_get_value2()相当までの実装はまだ実運用で使用したことはありません(苦笑) もしご興味がある方はガツガツ使って不都合などあれば教えていただければと思います.