JavaScript によるカレンダー機能の実装
平成１９年
１月３１日
経営情報学部 経営情報学科
5103010
池本
幸恵
― 目次 ―
第1章
はじめに
第2章
関連研究
第3章
JavaScript について
第4章
カレンダー機能の実装
４．１
設計
４．２
プログラムの例
４．３
スクリーンショット
第5章
考察
第6章
まとめ
参考文献
謝辞
１．
はじめに
今の時代はインターネット上で買い物が出来たり、分からない言葉などを検索出来たり
と色々なことが出来る。
その中でインターネット上にカレンダー機能というものがある。それは JavaScript とい
うプログラムを使っているのである。私は前期に JavaScript の基礎的なことをやっていた
ので、応用的なことが自分の力で出来るかどうかを試してみようと思いこの論文を選んだ
のである。
そして、それを参考にして、同じような物を自分が JavaScript を使ってどこまで作るこ
とが来るか、またその機能はどのようにして作られているのかというのを調べてもっと自
分なりに使いやすく、そして自分にとってわかりやすい機能に出来るかどうかを考えてい
くのが目的である。そのことについて第２章から書いているのである。
まず第２章ではカレンダー機能についての関連研究を、第３章では JavaScript について
のことを、第４章ではカレンダー機能の実装について、第５章では自分の作ったカレンダ
ー機能とインターネット上にある物との比較した考察、工夫した点などを、第６章ではす
べてのまとめを書いている。
２．
関連研究
カレンダー機能とは、インターネット上で自分なりのスケジュール管理が簡単に出来る
システムである。例を挙げると Yahoo!や Google などにあり、その機能を ID などを取得す
ることにより、無料で借りることが出来るのである。そして、いつでもどこからでもイン
ターネットが使えるパソコンがあれば簡単にスケジュールを登録できるので、好きな時好
きな場所で書き込むことが出来るのである。
他にもインターネット上では無くても普通にスケジュール帳や携帯電話、パソコンなど
でもスケジュールを書き込むことは出来るが、もしも壊れたり無くしてしまったり忘れて
しまった場合は、予定を見ることが出来なくなってしまうという困った点がある。しかし、
この機能を使っていれば、スケジュール管理をインターネット上で行っているのでインタ
ーネットを使えるパソコンなどがあれば見ることが出来なくなるという心配はないのであ
る。
またカレンダー機能は、自分だけが見て確認したりするだけにでも使えるし他の人にも
見せたいと思えば公開することも出来るのである。
他には、月ごとの表示だけではなくその日だけを表示したり、週ごとに表示をしたりと
表示の仕方を変えることも出来るのである。
Yahoo と Google のカレンダー機能の違いなどは、Yahoo カレンダーの方は、最初からニ
ュースや天気予報が表示されていて[追加]というところを押すと予定を書き込む為の画面
が出て色々と書き込むことが出来るようになっている。そして予定の一覧なども見られる
ようになっているのである。また天気予報などを表示したくない場合などは設定すれば予
定だけしか書かれていないように出来るようになっている。
Google カレンダーの方は、最初は何も表示されていないので、予定を書かなければ何も
書いていない普通のカレンダーのような状態になっているのである。そして入力する場合
には予定を書きたい場所を押せばまず初めにタイトルを書き込むように表示される。それ
から予定を書き込むようになっている。そしてこちらも予定の一覧が見られるようになっ
ているのである。
見た目を比べると Yahoo カレンダーは Google カレンダーより書き込む場所が多く、アイ
コンなども使えるようになっていて、少し派手というか見やすくなっていて使いやすいよ
うな感じがするのである。
実際使ってみて考えても、使いやすさはどちらかといえば Yahoo カレンダーの方が使い
やすいかもしれない。なぜなら Google カレンダーの方はたまに表示されるのが遅くなるし、
予定の表示される場所が上の方だけなので少し寂しい感じがするからである。そして Yahoo
カレンダーの方は休日や土曜日の色が変えられていて良い感じがするし、ニュースや天気
予報だけでなく他にも占いやテレビ番組も表示することが出来毎回みるのが楽しみになり
そうな感じがするのである。
でもこれは私が使ってみて感じた個人的な意見なのである。だから他の人が使えば違う
ことが感じられて、意見は色々と出るであろう。
【図１】と【図２】は Yahoo カレンダー【図１】と Google カレンダー【図２】をスクリ
ーンショットしたものである。
この２つの図を見比べてもらえればカレンダー機能とはどういうものでどんな感じに表
示されているものなのか、どういう感じに違うのかと見た目的なことだけだが、少しは分
かって貰えると思うのである。
図１ Yahoo!カレンダー
図２
Google カレンダー
３．
JavaScript について
JavaScript とは、ネットスケープ・コミュニケーションズ社の Brendan Eich によって開
発された HTML 埋め込み型のスクリプト言語で原則としてクライアント上で動作するもので
ある。開発された時は LiveScript と呼ばれていたのだが、1995 年に Sun Microsystems 社
が開発したプログラミング言語 Java が大きな注目を浴びたのに便乗し「JavaScript」とい
う名前に変更されたといわれているのである。そして、1996 年にマイクロソフト社の
InternetExplorer3.0 に搭載されるようになると、その手軽さから JavaScript は急速に普
及していき 1997 年、通信に関する標準を策定する国際団体 ECMA（ヨーロッパ電子計算機工
業会）によって JavaScript の中核的な仕様が ECMAScript として標準化され、多くの Web
ブラウザで利用できるようになったのである。
しかし、1990 年代後半第一次ブラウザ戦争で InternetExplorer などが発展したことであ
まりセキュリティ意識が高くなく、脆弱性が次々と発見される。他に Java と名称が似てい
る、初心者でも比較的に容易なプログラムが書けるということにより Java のサブセットや
下位バージョンの様なものという印象を一部の人間に与えた事こともある。このような理
由からブラウザ上での挙動に差異が出てしまい、低機能な言語と捉えられてしまうことに
なるのである。
また 2000 年から 2003 年にかけて、JavaScript2.0 というものを作ろうとした動きがあっ
た。しかしネットスケープ社とマイクロソフト社の対立でまとまらなかったため、アドビ
社の ActionScript2.0 にネットスケープ社の案が引き継がれたのである。
現在の JavaScript は、Google や Amazon などの大手の企業も積極的に利用し始め、高機
能なアプリケーションの１つとして注目を浴びている。しかし、JavaScript による脆弱性
などはまだまだ存在していて本質的には変わっていないのである。
Java と JavaScript の違う点は、 Java はプログラミング言語というものなのでコンパイ
ルしてクラスというものに変換しないと実行できないが、JavaScript はスクリプト言語と
いうものなのでコンパイルしないままで実行できるという点である。
またこの２つは似ているところもある。それは、HTML の他の部分と一緒に読み込まれ、
その後にそのコンピュータ上で動くということである。そしてボタンを押すたびに情報が
ネットワークに流れるというわけではないので、ネットワークを混雑させることがない。
後、マルチプラットフォームに対応しているので、Windows や Macintosh など複数の異なる
種類のコンピュータで使うことが出来るということである。
JavaScript のコーディング例
<html>
<head>
<title></title>
<script language="JavaScript">
<!-function setAdrs(sObj)
{
document.myFORM.action = "mailto:" + sObj.option
[sObj.selectedIndex].value;
↑
送信先のメールアドレスを変更している
}
// -->
</script>
</head>
<body>
<form name="myFORM" method="post" action="mailto: [email protected]"
enctype="text/plain">
<select onChange="setAdrs(this)">
<option value="[email protected]">[email protected]
<option value="[email protected]">[email protected]
<option value="[email protected]">[email protected]
<option value="[email protected]">[email protected]
<option value="[email protected]">[email protected]
↑
メールアドレスの選択を指定している
</select>
<br><br>
<input type="text" name="dai" size="29" value="題名">
<br><br>
<textarea type="text" name="bun" rows="5"></textarea>
<br><br>
<input type="button" value=" 送 信 " onClick="if(confirm(' 送 信 し ま す か ？
'))this.form.submit();">
↑
送信ボタンが押されたら、送信するかを確認する
<br><br>
</body>
</html>
これは、メールを送るときに送りたい人のアドレスを一々何回も入力しなくても選択す
れば送ることが出来るようにすることが出来る便利な JavaScript である。
例では５人までしか選べないようになっているのだが、自分で<option value="○○@○
○○.ne.jp">と同じようにアドレスを足していけば何人でも選べるようにすることが出来
る。一々足していくのは面倒なことだと思うが、これは簡単なコーディング例にしている
ので仕方がないのである。
送信するとき相手を間違えて送ってはいけないので、送信ボタンを押すと一応確認ウィ
ンドウが表示され送信する前にキャンセルが出来るようにする為の JavaScript も簡単なも
のだが加えているのである。
そして、コーディング例の中にある
SetAdrs は、選択されたものを送信先として設定をする関数のことである。
myFORM はメールアドレスと送信の内容を記すフォームを指すフォームのことである。
sObj は指定されたフォームオブジェクトが格納される作業変数のことである。
【図３】がこの JavaScript を Explorer で表示したものである。
図３
コーディング例を Explorer で表示したもの
４．
カレンダー機能の実装
４．１ 設計
1
2
3
4
5
6
7
8
9
10
11
12
項目
13
14
51
16
17
18
19
時間
20
21
22
23
24
25
26
メモ
27
28
29
30
31
登録
図４
削除
戻る
設計図
追加ボタンを押す
項目
1
時間
メモ
追加
登録ボタンを押し
戻るボタンを押す
図５
登録
削除
戻る
概念図
【図４・５】は、自分が作ろうと思っている物の簡単に表したものである。
【図４】は設計図で、【図５】は概念図なのでどちらを説明しても同じようなものになる
ので概念図の方を簡単に説明することにする。
まず初めに自分が予定を入力したい場所の日付のところにある［追加］というボタンを
押す。すると画面が変わり、予定などを入力する画面が表示される。そしてその入力する
方の画面で予定や時間などを書き込み、その後に登録ボタンを押す。そして戻るボタンを
押せば日付が書いてある画面方に項目のところに書いたものが表示されるようになってい
るのである。
そしてカレンダー画面の方に表示されたものだけではわかりづらいと思った時には、そ
の表示されているものを押すと入力した時間やメモなどが表示されるようになっているの
である。
また予定を間違えて入力をしてしまったとき、予定が変わってしまい書き直したいと思
ったときには、カレンダー画面の方に表示されている項目に書いたもの、もしくは追加の
ボタンところを押し入力する画面にして削除ボタンを押せば消えるようになっているし、
書き直してもう一度登録ボタンを押せばカレンダー画面の方は変更されているということ
である。
４．２ プログラムの例
これは一応自分で作ったカレンダー機能のプログラムである。
この JavaScript は、カレンダー画面が表示されている方のプログラムである。
日付が１日分しかないのは途中同じようなプログラムが何度も続くので省略して短いプ
ログラムにしているからである。
ということで本来このカレンダー画面のプログラムはもう少し長いものになのである。
<html>
<head>
<title></title>
</hade>
<body>
<table width="100%" border="0">
<tr>
<td align="center">
<font size=5 color="ff6633">2006 年
12 月</font>
<br><br><br>
<table border="1" cellspacing="1" cellpadding="1" bgcolor="#ffb367">
<tr><td>
<table border="2" cellpadding="2" cellspacing="2">
<tr>
<td align="center" width="90"><b>月</b></td>
<td align="center" width="90"><b>火</b></td>
<td align="center" width="90"><b>水</b></td>
<td align="center" width="90"><b>木</b></td>
<td align="center" width="90"><b>金</b></td>
<td align="center" width="90"><font color="#0000ff"><b>土</b></font></td>
<td align="center" width="90"><font color="#ff0000"><b>日</b></font></td>
</tr>
<tr>
<td height="100" width="90" valign="top" align="left" bgcolor="#ffffff">
1<br>
<a href="1.html">
<script language="javascript">
<!̶
var CookieID = "1";
function getCookie(key) {
if (document.cookie){
index = document.cookie.indexOf(key, 0);
if (index != -1) {
val_start = (document.cookie.indexOf("=", index) + 1);
val_end = document.cookie.indexOf(";", index);
if (val_end == -1){
val_end = document.cookie.length;
}
return(unescape(document.cookie.substring(val_start, val_end)));
↑ 予定を書き込む方にある書き込まれた Cookie をカレンダーの方へ
持ってくるためのプログラム
}
}
return(null);
}
// --></script>
<script language="javascript">
<!̶
var CookieID = "1";
var getname = getCookie(CookieID);
if (getname == null ¦¦ getname == "null") getname = " , ,";
names = getname.split(",");
↑
予定が書き込まれていない場合は何も表示しないように設定している
// --></script>
<script language="JavaScript">
<!̶
document.write( names[0] );
↑
カレンダーの方へ表示されるようにするためのもの
// --></script>
</a>
<br><br>
<a href="1.html">【追加】</a>
</td>
・
・
・省略
・
・
<br><br>
<a href="31.html">【追加】</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
ここからの JavaScript は、【追加】ボタンを押すと入力画面が表示されて予定を書き込む
方のプログラムである。
<html>
<head>
<title>
</title>
<script language="javascript">
<!̶
var CookieID = "1";
↑ ここで Cookie に１つ１つ名前が付けられている
function getCookie
(key) {
↑クッキーからの読み込みようの関数
if (document.cookie){
index = document.cookie.indexOf(key, 0);
if (index != -1) {
val_start = (document.cookie.indexOf("=", index) + 1);
val_end = document.cookie.indexOf(";", index);
if (val_end == -1){
val_end = document.cookie.length;
}
return(unescape(document.cookie.substring(val_start, val_end)));
}
}
return(null);
}
function setCookie
(key,value,expires){
↑クッキーへの書き込み用の関数
var cook_data = "";
cook_data = key + "=" + escape(value);
if (expires){cook_data = cook_data + "; expires=" + expires.toGMTString();}
document.cookie = cook_data;
}
function set_name(set_name_value){
var expires = new Date();
value = set_name_value;
if ( value == "" ) value = "null";
expires.setTime(expires.getTime() + (12 * 30 * 24 * 60 * 60 * 1000));
↑
Cookie が保存されている時間や日にちを設定する
（ JavaScript の時間の単位は 1/1000 秒となっている）
この場合は１年間保存されるように設定されている
setCookie(CookieID,value,expires);
}
function JSset(){
item1 = document.ka1.kou.value;
item2 = document.ka1.time.value;
item3 = document.ka1.memo.value;
↑ フォームに記入された値を配列 item に代入している
set_name(item1+","+item2+","+item3);
document.ka1.submit();
}
function DeleteCookie (key){
↑クッキーの削除用の関数
var value
= "";
var expires = new Date();
expires.setTime(expires.getTime() - 3600);
setCookie(key,value,expires);
location.reload();
↑ 削除ボタンを押すと Cookie に保存されていたものを消すように設定している
}
// --></script>
</head>
<body>
<script language="javascript">
<!̶
var getvalue = getCookie(CookieID);
if (getvalue == null ¦¦ getvalue == "null") getvalue = ",,";
names = getvalue.split(",");
↑
予定が書き込まれていない場合はカレンダー画面のときと同じように
何も表示されないように設定している
// --></script>
<form name="ka1">
<table>
<tr>
<td>
<br>
項目： <input type="text" size="28" name="kou">
<br><br>
時間： <input type="text" size="28" name="time">
<br><br>
メモ： <textarea type="text" name="memo" ></textarea>
<br><br>
↑
画面にフォームを作り入力出来るように設定する
</td>
</tr>
<tr>
<td>
<input type="button" value="登録する" onclick="JSset()">
<input type="button" value="削除する" onclick="DeleteCookie(CookieID)">
<input type="button" value=" 戻る " onclick="history.go(-1)">
↑
ボタンが作られる
「登録する」を押すと Cookie の情報が保存されるプログラムが動く
「削除する」を押すと Cookie の情報が削除されるプログラムが動く
</td>
</tr>
</table>
</form>
<script language="javascript">
<!̶
document.ka1.kou.value = names[0];
document.ka1.time.value = names[1];
document.ka1.memo.value = names[2];
↑
これがないとフォームに書き込んだものが Cookie は保存されているのだが、
画面上には表示されないようになる
// --></script>
</body>
</html>
４．３ スクリーンショット
図６
自分が作ったカレンダー機能
【図６】は自分が JavaScript で作ったカレンダー機能を Explorer で表示させたもので
ある。設計図とは少しだけ違いカレンダーっぽく見えるように月や曜日などを加えたので
ある。
後、少しだけだが、見た目的には Yahoo!の方のカレンダー機能を意識したつもりである。
だから追加のボタンを作りそれを押せば予定を入力する画面が表示され、予定を書き込め
るように設定したのである。
５．
考察
最初は基礎的なことしか JavaScript をしていなかったので、カレンダー機能のプログラ
ムを作るのにどこから始めていけば良いのかがわからなくてカレンダーを作っただけで戸
惑っていて色々本を読んでみたり、調べたりしていたがわからないことだらけだったので
ある。
そしてやっているうちになんとなくだが分かってきたので、プログラムを打ち込んで完
成したと思い予定を何処か１つの場所に書き込もうとしたのだが、書き込みを終えカレン
ダー画面に戻ると、すべてのカレンダーの中にタイトルが表示されるようになっていてど
うすればいいのかと困っていたのである。
しかし Cookie に名前を付けることが出来るということが色々聞いたりしている内に分か
り、どういう風にすればいいのかをインターネットで調べて、１つ１つに名前を付けてプ
ログラムを変更すると、予定を１つ書き込みカレンダー画面に戻ればきちんと１箇所だけ
にタイトルが表示されるようになっていたのである。
しかし、まだ少し可笑しい部分もあり、１度どこかに予定を書き込んでしまうと次に予
定を書き込もうとしても全然書き込みが出来なくなっていたり、削除しようとしても消え
ないでそのまま書き込んだものが残ってしまったり、書き込んだ場所にきちんと表示され
ていても違う場所にも同じ予定が表示されたりするのでそのようにならないように考え直
さなくてはならない場所がいくらかある。
それとこのプログラムでは、この月以外のものは作っていないので次の月の予定を入れ
ることが出来ない。だから他の月も選べることが出来るようにも考え直さなくてはならな
いのである。
自分が作ったカレンダー機能は、インターネット上にあるようなものと比べるとまだま
だ機能やデザインを直さなければならないと思うところがたくさんある。なぜなら、書き
込める機能や、選択が出来る機能などは付けられていないなど色々と使える機能が少ない
からである。
またこのカレンダー機能は、月の表示は出来ていても１日だけや週の表示、時間を選択
することなども出来ないのでそこのことも考え直さなくてはいけないのである。
６．
まとめ
ここまで JavaScript をやってきてわかったことがたくさんある。
それは、Java とは全然違ったプログラムなのだが、共通点などもあること、どういう風
にしてこの JavaScript というプログラムは出来たのか、など色々と知らなかったことがわ
かったのである。また Cookie というものは色々と機能があって、それを使えば情報を記録
したり、１つ１つに名前をつけてわけられたり出来るということもわかった。
そして１つのプログラムを作るのにはとても時間がかかりとても大変だということもわ
かったのである。
結果的にはまだまだプログラムを直さなければいけない所がたくさんあるカレンダー機
能になってしまった。
しかし、色々な JavaScript のプログラムを見たり調べたり聞いたりはしたが、ここまで
自分で作っていけるとは思ってはいなかったので、その事に関しては一応満足しているの
である。
そして時間があればだが、このカレンダー機能にもっと色々なプログラムを足して使い
やすい機能をつけていき、もっと良くて使いやすくインターネット上にあるものよりも良
いと思えるようなカレンダー機能にしたいのである。
その為にはまだまだたくさん意味の分からないプログラムなどがあるので、もう少し
JavaScript のプログラムを色々と詳しく勉強して今まで以上に理解していかなくてはいけ
ないのである。
参考文献
［１］JavaScript 例文活用辞典 技術評論社 古旗一浩
［２］10 日でおぼえる JavaScript 入門教室 株式会社翔泳社 スタジオ・シュヴェータ
［３］詳解 JavaScript 辞典 秀和システム 半場方人
［４］http://www.yahoo.co.jp/
Yahoo! JAPAN
［５］http://www.google.co.jp/
Google 日本
［６］http://www.openspc2.org/JavaScript/
一撃必殺 JavaScript 日本語リファレンス
［７］http://ja.wikipedia.org/wiki/JavaScript
ウィキペディアフリー百科事典
［８］http://www.rfs.jp/sb/javascript/01/01.html
はじめてのプログラミング - JavaScript 講座
［９］http://www.kcat.zaq.ne.jp/tem-tem/index.html
自作ホームページ作成 ∼ホームページつくりま専科∼
［10］http://html.appelle.jp/
ブログでもだいたい使える HTML タグ リファレンス
［11］http://ash.jp/ hasimoto/zakki/new_jsck.htm
JavaScript で cookie を使う話（改訂版）
［12］http://www.tohoho-web.com/www.htm
とほほのＷＷＷ入門
［13］http://www5e.biglobe.ne.jp/ access_r/
ACCESS R - HTML,DHTML,CSS,JavaScript,CGI,アクセス
［14］http://e-words.jp/
IT 用語辞典 e-Words
［15］http://homepage2.nifty.com/yoshi-m/makehp/javascript/source/main.htm
JavaScript ソース集
謝辞
この論文、また JavaScript を使ったカレンダー機能を作成するにあたってプログラムの
分からないところや、きちんと出来ていないところなどその他多くのことにご指導を頂い
た花川先生に感謝いたします。
© Copyright 2024 Paperzz
