カレンダー付き日記 (2005-11-12)

↑これはHP素材として使えます。使用になりたい方はご連絡ください。

2005-11-12に作ったカレンダー付き日記のFLASHです。

同じ階層にあるdataフォルダのテキストデータを分割して日記っぽく表示させます。

・テキストデータはHTMLタグが使用可能です。

　　＊使用可能タグ

　　　　・<a>

　　　　・<b>

　　　　・<font>

　　　　・<i>

　　　　・<p>

　　　　・<u>

　　　　・<img>

・画像データも読み込み可能です。

・自動的に表示している年月のカレンダーを作成してくれます。

・一番古いテキストデータの一番最後に　&lust_txt=true　と書いておく必要があります。

・何も記事のない月にも　txt_array=　と書いたテキストデータをおいておく必要があります。

・表示させる記事はFLASHをロードした月の記事を表示させるので、未来分も　txt_array=　と書いたテキストデータを置いておくとよいと思います。

・テキストデータの内容のフォーマットは

txt_array= 記事名

$ 西暦-月-日

$ 内容

| 記事名

$ 西暦-月-日

$ 内容

| 記事名

$ 西暦-月-日

$ 内容

・

・

・

のように記述します。赤い文字は確実に書く必要があります。黒い文字の部分をいろいろ変更します。

カレンダー付き日記のプログラムは以下のとおりになっています

＜1フレーム目(first_data)のフレームアクション＞

//-----------------------------↓日付データの初期設定↓---------------------------------------------
//今日のデータの取得
today_date = new Date();
nowDay = today_date.getDate();
nowWeek = today_date.getDay();
nowMonth = today_date.getMonth()+1;
nowYear = today_date.getFullYear();
lust_year = today_date.getFullYear();
lust_month = today_date.getMonth()+1;
//月の1日の位置決め
searchDay = 1;
searchWeek = nowWeek-(nowDay-searchDay)%7;
if (searchWeek<0) {
　searchWeek += 7;
}
first_day_space = searchWeek;

<スクロールバーのムービークリップアクション>

onClipEvent (load) {
　//初期のスクロールバーの座標を取得
　bar_s = getBounds(_root);
}
on (press) {
　//スクロールバーのドラッグ可能範囲 X方向はそのまま、Y方向は最初の座標(+1はよくわからんけどきれいにならんかったから修正)から最後の座標-そのときのスクロールバーの長さ(これをすることで、編集中のサイズの間を移動できるように　なる)。
　startDrag(this, false, bar_s.xMin, bar_s.yMin+1, bar_s.xMin, bar_s.yMax-_height+1);
}
on (release) {
　stopDrag();
}
onClipEvent (mouseMove) {
　//マウスが動くたびにスクロールバーの位置を更新。フレームレートによらなくなるのでスムーズな動きになる。
　updateAfterEvent(mouse);
　_parent.txt_box3.scroll = (_root.scl_bar._y-bar_s.yMin+1)/(bar_s.yMax-bar_s.yMin-_height)*_parent.mscl+1;
}

<クレジットの矢印ボタンのムービークリップアクション>

on (release) {
　credit.prevFrame();
　creditpage.prevFrame();
}

<前の月へ移動するボタンのムービークリップアクション>

on (press) {
　//1月の時は次に読み込むテキストデータが1年前の12月だから、それを修正
　if (_parent.nowMonth == 1) {
　　_parent.nowYear -= 1;
　　_parent.nowMonth = 12;
　} else {
　　_parent.nowMonth -= 1;
　}
　//前の月の1日の位置を取得
　serch_first_day = (_parent.first_day_space-eval("_parent.m"+(_parent.nowMonth)))%7;
　if (serch_first_day<0) {
　　serch_first_day += 7;
　}
　_parent.first_day_space = serch_first_day;
　_parent.gotoAndPlay("load");
}

<次の月へ移動するボタンのムービークリップアクション>

on (press) {
　//次の月の1日の位置を取得
　serch_first_day = (_parent.first_day_space+eval("_parent.m"+(_parent.nowMonth)))%7;
　//12月の時は次に読み込むテキストデータが1年後の1月だから、それを修正
　if (_parent.nowMonth == 12) {
　　_parent.nowYear += 1;
　　_parent.nowMonth = 1;
　} else {
　　_parent.nowMonth += 1;
　}
　_parent.first_day_space = serch_first_day;
　_parent.gotoAndPlay("load");
}

<10フレーム目(load)のフレームアクション>

//-----------------------------↓カレンダーの設定↓---------------------------------------------
// それぞれの月が何日あるか
m1 = 31;
m2 = 28;
m3 = 31;
m4 = 30;
m5 = 31;
m6 = 30;
m7 = 31;
m8 = 31;
m9 = 30;
m10 = 31;
m11 = 30;
m12 = 31;
//うるう年による2月の月の日数の調整。
//うるう年の2月は29日、平年の2月は28日とする。
//うるう年は西暦の年が4で割り切れる年とする。
//ただし年が100で割り切れる年は平年とする。
//また年が400で割り切れる年はうるう年とする。
if (nowYear%4 == 0) {
　m2 = 29;
}
if (nowYear%100 == 0) {
　m2 = 28;
}
if (nowYear%400 == 0) {
　m2 = 29;
}
//今月は何日あるか
//eval(変数)は変数の値を戻り値とする？
mcount = eval("m"+nowMonth);
//-----------------------------↓日付ボタンを更新する↓---------------------------------------------
//日付ボタンを更新するために日付ボタンを一度全部消す
for (var i = 1; i<35; i++) {
　removeMovieClip("btn"+i);
}
//-----------------------------↓テキストデータの設定↓---------------------------------------------
//テキストがロードし終わるまで止めとく
stop();
//日本語を表示できるようにする
System.useCodepage = true;
//テキストデータが
if (nowYear+"-"+nowMonth == lust_year+"-"+lust_month) {
　next_month._visible = false;
　or_now = "true";
　} else {
　next_month._visible = true;
　or_now = "false";
}
lust_txt = "false";
//テキストデータを読み込む
loadVariables("data/"+nowYear+"/"+nowMonth+".txt", this);
//テキストデータを読み込んだ後の処理
onData = function () {
　if (txt_array != undefined) {
　　if (lust_txt == "true") {
　　　prev_month._visible = false;
　　} else {
　　　prev_month._visible = true;
　　}
　　//ウィンドウズのテキストデータを読み込むと改行コードが\r\nと変換されて、2行の改行になってしまうから\rの改行コードを消す
　　//txt_arrayの値を\rで分割した配列に変換して分割した配列の値を結合させる。結合させる部分を空文字？に置き換える。
　　txt_array = txt_array.split("\r").join("");
　　txt_array = txt_array.split("|");
　　//txt2のそれぞれの配列にtxtの値を$で分割した配列を入れる
　　//txt2[0] = txt[0].split("$");
　　//txt2[1] = txt[1].split("$");
　　//・・・
　　//txt2[txt.length-1] = txt[txt.length-1].split("$");
　　//↑と同じ
　　txt2 = new Array();
　　for (var i = 0; i<txt_array.length; i++) {
　　　txt2[i] = txt_array[i].split("$");
　　}
　　//こっからは日記データのソート？見たいな感じをつくる(ソートとか言葉は聴いたけどどんなんか知らんけど、整列とかで使うソートの感じっぽいのでソートとか言ってみるｗ)
　　//i番目のtxt_arrayのデータ(txt_array[i])の日付データ(txt3[i][2])を取得し、txt_array[i]を配列txt_aのtxt3[i][2]番目に代入する
　　txt3 = new Array();
　　//txt_aはその日のデータ、txt_bはその日のデータを分割したものを格納させます
　　txt_a = new Array();
　　txt_b = new Array();
　　for (var i = 0; i<=txt_array.length; i++) {
　　　txt3[i] = txt2[i][1].split("-");
　　　txt3[i][2] = txt3[i][2].split("\n").join("");
　　　day_num = txt3[i][2];
　　　txt_a[day_num] = txt_array[i];
　　　txt_b[day_num] = txt_a[day_num].split("$");
　　}
　　//ここまで処理が終わったらメインヘ移行
　　gotoAndStop("main");
　}
};

<日のボタンのムービークリップアクション>

onClipEvent (load) {
　//オリジナルの日付ボタンをその月の日数分コピーする
　if (_name == "btn_org") {
　　maxnum = _parent.mcount;
　　for (num=1; num<=maxnum; num++) {
　　　this.duplicateMovieClip("btn"+num, 10+num, {i:num, day:1});
　　}
　　_visible = false;
　}
　//コピーが終わってから各ボタンで実行する処理
　this.init();
　function init() {
　　//なんもデータのない日は薄くしてボタン機能をなくす。データのある日はそのまま。
　　if (_parent.txt_b[i][0] == undefined) {
　　　_alpha = 50;
　　　enabled = false;
　　} else {
　　　_alpha = 100;
　　　enabled = true;
　　}
　　//ボタンの位置を決定する jは1日目の位置
　　var j = i+_root.first_day_space;
　　//aは週の改行の数。10週にしてるのはテキトーな値をいれてるだけ。
　　for (var a = 1; a<10; a++) {
　　　if (1+7*(a-1)<=j && j<1+7*a) {
　　　　line = a;
　　　　marg = j-7*(a-1);
　　　}
　　　/*
　　　↑は↓のを省略したやつ
　　　if (1+7*(1-1)<=i && i<1+7*1) {
　　　line = 1;
　　　marg = i-7*(1-1);
　　　} else if (1+7*(2-1)<=i && i<=1+7*2) {
　　　line = 2;
　　　marg = i-7*(2-1);
　　　}・・・と続いて
　　　・・・}
　　　*/
　　}
　　//ボタンに表示する日付の変数
　　day = i;
　　_x = marg*(3+_width);
　　_y = line*(3+_height)+30;
　}
}
on (release) {
　//最新記事かどうか判定
　if (_parent.or_now == "true") {
　　if (i == _parent.recent_txt) {
　　　new_info = "<font color='#ff0000'>【最新記事】</font>";
　　} else {
　　　new_info = "";
　　}
　} else {
　　new_info = "";
　}
　//それぞれのテキストボックスにテキストを読み込ませる
　_parent.txt_box1.htmlText = "<b><font size='12'>"+new_info+_parent.txt_b[i][0]+"</font></b>";
　_parent.txt_box2.htmlText = "<font size='10'>"+_parent.txt_b[i][1]+"</font>";
　_parent.txt_box3.htmlText = "<font size='11'>"+_parent.txt_b[i][2]+"<b>【最終行】</b></font>";
　//メインのテキストのスクロールを一番上に戻す
　_parent.scl_bar._y = _parent.scl_bar.bar_s.yMin;
　_parent.txt_box3.scroll = 1;
}

<20フレーム目(main)のフレームアクション>

//そのつきの最新のテキストの番号
recent_txt = txt_a.length-1;
//年-日付のテキストボックスの設定
Date_box = _root.Date;
Date_box.text = nowYear+"-"+nowMonth;
//タイトル部分のテキストボックスの設定
txt_box1 = _root.title;
txt_box1.multiline = false;
txt_box1.wordWrap = false;
txt_box1.selectable = false;
txt_box1.border = false;
txt_box1.html = true;
if (or_now == "true") {
　new_info = "<font color='#ff0000'>【最新記事】</font>";
} else {
　new_info = "";
}
txt_box1.htmlText = "<b><font size='12'>"+new_info+""+txt_b[recent_txt][0]+"</font></b>";
//日付部分のテキストボックスの設定
txt_box2 = _root.days;
txt_box2.multiline = false;
txt_box2.wordWrap = false;
txt_box2.selectable = false;
txt_box2.border = false;
txt_box2.html = true;
txt_box2.htmlText = "<font size='10'>"+txt_b[recent_txt][1]+"</font>";
//メイン部分のテキストボックスの設定
txt_box3 = _root.main;
//メイン部分のテキストラインの量(txt_box3.bottomScrollだと毎回ロードするたびに変わっちゃうのでちょいやだですが、20にしてます。)
line_num = 20;
txt_box3.multiline = true;
txt_box3.wordWrap = true;
txt_box3.selectable = false;
txt_box3.border = true;
txt_box3.html = true;
txt_box3.htmlText = "<font size='11'>"+txt_b[recent_txt][2]+"<b>【最終行】</b></font>";
//画像とか入ってるといろいろ面倒なので毎フレームで、最大スクロール値を取得して、スクロールバーに適用
onEnterFrame = function () {
　mscl = txt_box3.maxscroll;
　bar_scale = line_num/(line_num-1+mscl)*100;
　if (100>bar_scale) {
　　scl_bar._yscale = bar_scale;
　} else {
　　scl_bar._yscale = 100;
　}
};
//なんにも書いてない月の設定。
if (txt_b[recent_txt][0] == undefined) {
　txt_box1.htmlText = "<b><font size='12'>記事無し</font></b>";
　txt_box2.htmlText = "";
　txt_box3.htmlText = "";
}

今回は「自動的に」をコンセプトにいろいろ作ってみました。

「自動的に」の定義はよくわかりませんけど、あるデータを読み込んだらあとは勝手にやってくれるってのが作りたかったわけでありやす。

こっちのほうがプログラム的にきれいにできた?てか定数が少ないだけかな・・・

まぁそれはいいとして、とにかく今回はいろいろ勉強になった。1番勉強になったのは、配列とか構造体の使い方だとおもう。あと、カレンダーの仕組みの一部。いろんなフラッシュの仕様上の問題。ちょっとわかったことを思い出せる限り書いてみると

・読み込んだテキストデータをある文字分割して配列に変換する。

・ある文字で分割した部分をある文字に置き換えて結合する。→テキストデータの中のいらん文字を削除できる。

・ウィンドウズの仕様で改行コードが \r\n になってる。(↑の技をつかって2連続改行を回避)

・ textBottomはテキストボックスをロードしたときにそのテキストボックスのなかにある行数に固定される。(テキストボックスの大きさではない)

・配列の番号が 01,02,03 とかになってると 配列[01] とかでも指定できない。01,02,03,・・・,09,10,11となってる場合は 10 以降が指定可能。

・restrictはテキスト入力のときだけ適用される。(変数とかだと無視される。ってかたぶんテキスト入力に適用するアクションスクリプトだとおもうｗ)

ほかのも一緒にいろいろやってて知ったことも書いてみる

・音は同時に再生できる量に限界があるっぽい。再生の限界量の状態である１つの音が再生されるのがおわったらまた１つ再生可能になったぽい。

・パブリッシュ設定のＨＴＭＬのウィンドウモードを透明処理にしたら動きかスムーズになる。結構変わる。ＨＰNEXTFRAME(！)に掲載されてますた。

こんな感じかな。

で、自動的っぽくなってるのは、

・表示してる月のカレンダーを作ってくれる。

・テキストデータを書いたら、勝手に分割してタイトル、日付、内容に分割して、それぞれのテキストボックスに代入してくれる。

・一番最後に書いたデータであるかどうかを判別して、【最新記事】をかつけてくれる。

・行数に応じてスクロールバーのサイズを変更する。

とか。まぁ、微妙ですかね。

自分で作ると、しょぼく感じてしょうがないっす。

プログラミングっぽいことがしたくなったのでつくったんですが、結構自分的にプログラミングっぽいのでもういいです。こんな感じでいいです。

(追記)

今回はほとんどをプログラムで済ませたので、ＧＵＩ？インターフェイス？ようわかりまへんけど、見た目の部分は変更しやすかったどす。

いや、そのためにほとんどをプログラムでやったってのもあるんですけど。

ってことで、いろいろ見た目変更したやつうｐしますた。自分ではどれがいいのやらよくわからんのでとりあえず全部うｐ　(・∀・)ｱﾋｬ

今回製作したファイル

・calendar.fla

・calendar.swf(「右クリック→対象をファイルに保存(A)...」で保存できます)

・data.zip(テキストデータ集です)

FLASHへ