builder by ZDNet Japanをご愛読頂きありがとうございます。

builder by ZDNet Japanは2022年1月31日にサービスを終了いたします。

長らくのご愛読ありがとうございました。

あなたがプログラムを理解できない10の理由:第1回

たにぐちまこと(H2O Space.)
2008-05-07 16:00:00
  • このエントリーをはてなブックマークに追加

理由2:仕組みを考えない

 例えばWebサイトを見ていて、今まで見たことのない演出がされていた時、あなたは次になにをするだろうか?気にせず次のページを見に行ったり、別のサイトに移動しているようなら、少し習慣を変えてみよう。

 プログラムができる人はそんな時、かならず「どのように作られているのか」を考える。HTMLソースを見たり、画面上をいじり回して、仕組みを解き明かそうとするのだ。丁度、科学好きの子供が、ラジオや時計を分解して遊ぶのと同じように、その「中身」に興味を持つのである。

 例えば、Webページに変わったパーツが表示された時、それを右クリックしてみよう。図1のようなメニューが表示された場合は、Flashで作られている。

図1 Flashのメニューが表示された 図1 Flashのメニューが表示された

 最近ではもしかしたら、図2のようなメニューが出るかも知れない。これは、Microsofot Silverlightで作られたコンテンツである。

図2 Silverlightのメニュー 図2 Silverlightのメニュー

 これが分かれば、Flashで同様のサンプルがないか、ActionScriptでどのようなスクリプトを書いたら、それが実現できるのかを考えるヒントになる。

 さらによいのは、通常のWebブラウザのメニューが表示されたとき。これはJavaScriptなどで作られている証拠だ。

 JavaScriptは、Flashなどと違ってソースプログラムを見られる状態になっている。HTMLソースを見ながら、どんなライブラリを使って、どんなスクリプトを使っているのか拝見させて貰おう。要素の中を見れば、ある程度の情報を得ることができる。

<script type="text/javascript" src="js/prototype/prototype.js"></script>
<script type="text/javascript" src="js/jkl-parsexml.js"></script>

<script type="text/javascript" src="js/spry/includes/SpryEffects.js"></script>
<script type="text/javascript" src="js/spry/widgets/accordion/SpryAccordion.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
window.onload = function() {
init('/gokaku');
}
</script>

 例えば、上記のHTMLソースからは「Prototype」と「Spry」を使い、「index.js」という独自のJavaScriptを作って、ウインドウが表示された時にそれを呼び出していることが分かる。次のようにURLにJavaScriptのファイルを直接指定すれば、ソースを見られることも少なくない。

http://xxx.xxx.xxx/js/index.js

 人の作ったソースプログラムは情報の宝庫である。入門書では得ることのできない実践的なテクニックや、その人なりに工夫したあとなどを見ることができる。

 最初のうちは全く理解できないかも知れないが、辞書を片手に少しずつ解読するのも面白いだろう。もちろん、ソースをそのままコピーして利用するのは、著作権の侵害になる。参考の範囲に留めておきたい。

 さらに、例えばWebブラウザ以外のソフトウェアを使っている時や、駅や映画館などで端末を触っている時、ゲームで遊んでいる時なども、不思議な動きや分かりやすい動きなどがあったら、「これをWebに応用することはできないか、するとしたらどんな技術を使ったらよいのか」を探してみると良いだろう。

 映画館のタッチパネル端末や、Wiiなどのゲーム機には、目を見張るようなインタフェースが存在するものも少なくない。生活の中には優れたプログラムが溢れているので、それをキャッチできるように習慣を変えていくと良いだろう。

ブログの新規登録は、2021年12月22日に終了いたしました。

folllow builer on twitter
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]