NetBeansでSparkを使ってサクッとWebアプリケーションを作る①Hello,World!!

書くブログこっちじゃなかったから記事移動しました。 以下へお願いしますm(__)m

• NetBeansでSparkを使ってサクッとWebアプリケーションを作る①Hello,World!! | ながたにの技術メモ

Excelで1年の短さを感じるカレンダーを作る

どこで見たか覚えがないんだけど、「1年はこんなにも短い」的なA4用紙1枚で縦軸のカレンダーが配布されてるのを去年見た。
で、今年使うカレンダーはそれにしようと思ってたんだけど、配布元が分からないし、ググっても(1ページ目に)出てこないから困った。

という訳で、Excelで作った。
VBA使うつもりだったけど、使わなくてもできたため、使用していない。

完成図は以下

ExcelファイルとPDFファイル5年分を適当に置いておくので欲しい人がいれば、持っていけばいいと思う。
あとざっくりとした解説も書いておくので、興味があれば見ればいいと思う。

配布

配布に関する免責事項

• 当サイトで配布するファイルは、個人・法人に関わらず利用者は自由に使用することができます。
• 当サイトの配布物を利用した事によるいかなる損害も作成者(Nagatani)は一切の責任を負いません。すべて自己の責任の上で使用して下さい。
• 感想や要望は一切連絡しないでください。特に要望やバグ修正は一切受け付けません。

PDF - OnePageCalendar20XX.pdf

• 2015年版
• 2016年版
• 2017年版
• 2018年版
• 2019年版
• 2020年版

Excelファイル - OnePageCalendar.xlsx

• OnePageCalendar.xlsx
  • Excel 2010(Win), Excel for Mac 2011 でのみ動作確認しました。他は知らん。

作成法

Excelでカレンダー作るのは何度もやった経験があるんだけど、その都度いろいろ調べながらやってるので、メモ書き程度と言わず結構な勢いで作成法を残しておくことにした。

手順としては以下のとおり。

1. 祝日データをどこかから持ってきて別シートにしておく
2. 年記入欄作成
3. 月表示の作成
4. 各月の1日をDATE関数で求める
5. 2日〜31日のデータを上のセルを参照するように算出する
6. 祝日記入欄を作成
7. 祝日を1で作成したシートから検索して表示させる
8. 条件付き書式で土曜日、日曜日、祝日のスタイルを変える
9. 完成

罫線引いたり、文字サイズ整えたり、セルのサイズ変更にかんしては説明を省くので各々好きなようにやれば良いと思う。

1. 祝日データをどこかから持ってきて別シートにしておく

日本の祝日を日付と祝日の名称一覧をググって、カレンダー作るシートじゃないシート(Holidaysとかって名前にしとく)に貼り付ける。 貼り付ける時は、下図のように、日付をA列、名称をB列とする。

2. 年記入欄作成

A1セルからL1セルまで「結合して中央揃え」する。

生成したい年を整数値で入れておく。例：2015

3. 月表示の作成

A3セルに「1900/1/1」、B3セルに「1900/2/1」と記入する。
A3,B3セルを選択して、「セルの書式設定」をする。

書式を「ユーザー定義」にして、種類を「m"月"」とする。

A3,B3セル選択状態のまま、B3セルの右下の四角をドラッグして、L3セルまで引っ張り離す。 (オートフィル機能っすね。以降はオートフィルと書きます。)

下図のように、12月まで記入される。

4. 各月の1日をDATE関数で求める

A4セルに以下の関数を入力

=DATE($A$1,MONTH(A$3),1)

DATE関数は、年、月、日を整数値で引数として、日付形式の値を生成する関数である。

年は、結合したA1セルから、月は、3行目の月表示セルから取得する。
日付は1を基準として、2日以降は+1していく形式とした。
（普通に全部DATE関数で書いて、IFERRORすればよかったような気もしないでもない。）

A4セルの右下の四角を、3の月を12月まで作成したようにL4セルまでオートフィル。

下図のようになるはず。

日付セルの書式設定はあとでまとめてやる。

5. 2日〜31日のデータを上のセルを参照するように算出して各月にコピー

1月2日を計算させたいA5セルに以下の関数を入力

=IFERROR(IF(MONTH(A4+1)<>MONTH(A$3),"",A4+1),"")

やりたいことは、一つ上のセルの値に+1日したいだけなんだが、現在のセルの月が、月表示セルの月と異なる場合は表示させたくない(2,4,6,9,11月は31日ない)ため、IF文を用いる。
で、2月だけの問題なんだが、一つ上のセルが空欄である場合が発生する。
そのため、更にIFERROR関数を用いてエラーが発生したら空欄セルとするようにした。
(2月の29日以降のセルだけやればよかったんじゃ……って思うでしょ？僕もそう思う。)

とりあえず1月分を作成するので、A5セルから、A34セルまでオートフィル。

下図のように日付じゃなくて整数値で出てくるかもしれないが、後で日付形式になるのでとりあえずは気にしない。

A5セルからA34セルまで選択した状態で、L34までオートフィル。

A4セルからL34セルまで選択して「セルの書式設定」→ユーザー定義で種類を「d」とすると、以下のように日にちだけの表示になる。

曜日が入れたければ種類を「d dddd」とかすれば出るんじゃないかな。(環境により異なるので注意)

6. 祝日記入欄を作成

地道に日にちの間にそれぞれ1行ずつ挿入していく。

そりゃもう地道に31日分全部。

7. 祝日を1で作成したシートから検索して表示させる

空欄になっているはずのA5セルに、以下の関数を記入する。

=IFERROR(VLOOKUP(A4,Holidays!$A$1:$B$116,2,FALSE),"")

VLOOKUP関数はデータの検索を行う場合に用いる。

引数として、
検索データ、検索範囲、データがあった場合に表示させたい値の入った検索範囲内の列番号、データがない場合に近い値で表示するか否か
という感じ。

ここでは、Holidaysシートにある祝日データが記入されている範囲として、A1〜B116まで使用している。 祝日データどれだけ用意するかでこの範囲が変わるため注意されたし。

A5セルからL5セルまでオートフィル。

A5〜L5まで選択して、コピー。
A7セルを選択して貼り付け。以下A65セルまで1つ飛ばしで貼り付けを繰り返す。

以下のように祝日が入るはず。

これでもカレンダーとしては十分機能するが、せっかくなので、土日祝日が色で判断できるようにする。

8. 条件付き書式で土曜日、日曜日、祝日のスタイルを変える

まずは日にちのみのセルに条件付き書式を設定する

A4〜L4セルを選択状態する。

「条件付き書式」→「セルの強調表示ルール」→「その他のルール…」で条件付き書式を追加していく。

条件を追加する手順として、

1. 土曜日のセルを青く
2. 日曜日のセルを赤く
3. 祝日のセルを赤く

ッて感じにしていく。

1. 土曜日のセルを青く

条件付き書式を追加するウィンドウにて、下図のようにスタイルは「クラシック」、「数式を使用して、書式設定するセルを決定」を選んでおく。

条件に以下を入力

=WEEKDAY(A4)=7

WEEKDAY関数は、引数の日付の曜日を以下のような整数値で返す。

日	月	火	水	木	金	土
1	2	3	4	5	6	7

書式は自由に設定する。

2. 日曜日のセルを赤く

条件は以下

=WEEKDAY(A4)=1

3. 祝日のセルを赤く

条件は以下

=A5<>""

祝日を判定する条件は、祝日名称を表示するセルに値が入っているかどうかで判断する。

祝日名称のセルに条件付き書式を設定する。

A5〜L5セルを選択状態する。

A4〜L4セルに設定した条件と同じ3つの条件を追加する。

2日以降にも書式をコピーしていく

A4〜L5セルを選択し、コピー。

A6セルを選択して、「形式を選択して貼り付け」→「書式」を選択して貼り付け。

以下、31日まで繰り返し。

9. 完成

罫線引いたり、文字サイズ変えたりすれば良いと思う。

後は、A4一枚で印刷できるように「印刷範囲の設定」と、「ページ余白の設定」と、縦横「1ページに収まるように設定」すれば出来上がり。

まとめ

この記事書き始めて15分で後悔した。途中から文章が乱れていることを実感した。

寝たい。

Macのターミナルで寿司が降る（マグロ赤身限定）

なんかやっておかないといけない気がした。

お腹が空いたときにどうぞ

$ ruby -e 'C=`stty size`.scan(/\d+/)[1].to_i;S="\xf0\x9f\x8d\xa3";a={};puts "\033[2J";loop{a[rand(C)]=0;a.each{|x,o|;a[x]+=1;print "\033[#{o};#{x}H \033[#{a[x]};#{x}H#{S} \033[0;0H"};$stdout.flush;sleep 0.01}'

BHz2oE2r0t9.gif - Gifzo

逆に腹へってつらい。

参考というか元ネタ：Macのターミナルでビールが降る | SOTA

unicodeの絵文字はこちらを参考にしました。：Emoji unicode characters for use on the web

追記：ネタ被ってた.......orz

Macのターミナルに寿司を降らせる

CSSでFizzBuzzの解答集に載ってしまったので……

id:mon_tinian さんより

• どうしてwebデザイナーに・・・CSSが書けないのか？（またはCSSでFizzBuzz問題） - mon_sat at Co-Edo（半年前の自分への教科書 / 別院）
• 【解答集できました】どうしてwebデザイナーに・・・CSSが書けないのか？（またはCSSでFizzBuzz問題） - mon_sat at Co-Edo（半年前の自分への教科書 / 別院）

CSSでFizzBuzzはやったことなかったので、いろいろ勉強になりました。

そして、解答集の方に私のはてブ（以下ツイートしたの）が載ってしまったのです。

:nth-child(15n)を使わずに::before,::afterで実装する方法を考えたけどfont-sizeで文字消してる関係でリストのマーカーがうまく表示されずに妥協 / “どうしてwebデザイナーに・・・CSSが書けな…” http://t.co/3KdA5wFStO

— ながたには静かに暮らしたい (@Nagatani) 2014, 2月 8

font-size: 0;を使い、かつリストマーカーを消さない方法の妥協案として、:nth-child(15n)を使って書いた方法が以下のとおりです。
解答集には載っていないので、こっちで書いておきます。

---

追記： 2014-02-18 18:19
よくよく考えたら、CSSが冗長だったので、最適化しました。

追記ここまで。

---

display: list-item;を使って、::beforeの擬似要素をリストアイテムとして表示させています。
:nth-child(15n)を使わずに書いた方法だと解答集のとおりなので割愛。

で、いろいろ考えてもやっぱりCSSでHTMLの要素の中身を書き換えるのはなんかアレなので、数字をHTMLに書かず、CSSに全部やらせてみたのが以下の方法。 <li></li>を100個書くのめんどかったのでJavaScriptで書いてます。

Canvasの画像をPNGに変換してimgへ流し込む

はてなブログ、放置しすぎててアレな感じになってたのでちょっと書いておこうかと思う。

Canvas扱う度に毎度Google先生にお世話になってしまうので、メモ。*1

追記

公開してから気付いたけど、DOMにimgオブジェクトあるから、

var img = new Image();

のくだり要らんよなーって思った。

*1:Gist貼り付けもはじめて使った。Github、もっと使っていかないといかんかなーって思う。…思うだけ。

コード貼付けてみる

/**
 * 人生、宇宙、すべての答え
 */
function calculate_answer_to_life_the_universe_and_everything() {
    return 42;
}

色付かないのかー。はてな記法の書き方がマズイのかなぁ。

はてなブログでの初投稿

使い勝手を見たくて、はてなブログを申し込んでみました。 

招待なしで入れるのは1000人限定らしい。
はてなブログご利用申し込みの受け付けを、1000人限定で開始しました - はてなブログ開発ブログ

シンプルで結構書きやすいかも。
はてな記法覚えてないから、見たまま編集ってのも良い感じ。

見たまま編集でソースコードを整形して載せるのって簡単にできるんかなぁ。