My Calendar
My Calendar (1.0h): カレンダーに画像を添えて印刷
- このページは、JavaScriptプログラム埋め込みのXHTMLで記述しています。ページの体裁はスタイルシートで別途記述しています。
- ページ
- 来訪者のブラウザは、JavaScriptおよびスタイルシートが有効であると想定しています。この場合、ページ記述の一部が表示され、「カレンダーに画像を添えて印刷」の操作が可能となっています。
- ページ全体は、当該埋め込みソフトウェアとスタイルシートの概説で、スタイルシートが無効の場合を想定して記述してあります。
- JavaScriptプログラム
- XHTMLとのインタフェースにDOMを利用しています。
- FileReaderコンストラクタが実装されていないブラウザでは、来訪者保有の画像を扱えないため、処理を断念しています。
- セッションを跨がる情報保持のためにlocalStorageオブジェクトを利用しています。未実装のブラウザでは情報保持は出来ません。
- JavaScript有効時に、表示不要部分を抑止しています。無効時にはこの部分が表示されます。
- 春分、秋分は、天体観測により確定します。当ページが保持しているデータ以降のものは、当ページのデータが保守されない限り、表示に反映できません。
- スタイルシート
- 用紙以外の、印刷時に不要な部分はスタイルシートで抑止しています。
- はじめに
- お好きな画像とカレンダーを印刷用に合成します。
- 画像はあなたのPC上のファイルを処理します。
- おすすめ一括設定
- 初めての方は、まずこれをお試し下さい
- お好みのサイズを選ぶ（例えばハガキ）
- 次に下表で調整を試みる
| 分類 | 手直し要望点 | 調整個所 |
|---|
| 画像 | 変えたい | 「画像」 |
| 納まりが悪い | 「調整」 |
| カレンダー | 年月を変えたい | 「年」「月」 |
| 出す位置を変えたい | 「位置」 |
| スペースを広げたい／狭めたい | 「高さ」 |
| 出し方を変えたい | 「形式」 |
| 祝日の扱いを変えたい | 「祝日」 |
| 印刷用紙 | サイズを変えたい | 「用紙」 |
| 外枠を調整したい | 「余白」 |
| フォント | 文字種を変えたい | 「文字」 |
| 大きさを変えたい | 「大きさ」 |
| 濃さを変えたい | 「太さ」 |
- ここでの設定は、上表の個別設定を一気に設定させるもので、個別に設定するのと相違ありません
- 画像
- 埋め込みたい画像を決定（または、このページにドラッグ＆ドロップ）すると、用紙上に表示されます。
- 「調整」の選択で、最大限の「幅」または「高さ」で埋め込みます。任意のトリミングは出来ません。
- 扱える画像はひとつだけです。
- カレンダー
- 「年」「月」の選択で、表示カレンダーを決定します。
- 「位置」「高さ」「形式」の選択で、表示の位置、スペースおよび形式を決定します。大きさと形式はこの組み合わせのみです。
- 「祝日」の選択で、表示(なし/日本)を決定します。
- 印刷
- 「用紙」でサイズと向きを選択します。
- 「余白」（用紙の内法）を決定します。
- ここでの設定とは別に、用紙サイズ、余白設定など、ブラウザおよびプリンタドライバで同期させて設定する必要があります。
- フォント
- 「文字」で font-family を選択します。
- 「大きさ」で font-size を選択します。
- 「太さ」で font-weight を選択します。
- TIPS
- 初期化するにはボタンを押す
- 画像とカレンダーの位置関係は相互に独立なので、重ね合わせが自由、また分離はカレンダー用スペースを利用者が「高さ」で用意
- 「余白」は画像とカレンダーの双方に影響
- ご注意
- 画像処理にfileオブジェクト、FileReaderコンストラクタを利用しています。これらを未実装のブラウザは画像処理が出来ません（この場合もサーバー上ファイルの「サンプル画像」で処理を試みることは出来ます）。
- dragenter,dragover,dropイヴェントが利用できるブラウザはドラッグ＆ドロップで画像処理が可能です。
- 可能であれば最後の状態を記憶しています。次回来訪時やリロード時には状態が復元されます。（localStorageオブジェクトが利用可能な場合のみ）
- localStorageオブジェクトによる状態の記憶は、クッキーとは違いサーバとの転送が起きず、扱う情報をネットワークに流さずブラウザ内部でのみ処理できるため、セキュリティの保ち易い技術だとされています。