JavaScript:月・日・曜日から、年を探索する

イントロダクション

時間が経ってから見ることを考慮していない書類やチラシなどでは、イベントの日付が月・日・曜日でしか書かれていないことがあります。

そのため、今年の話かと思ったら、実は数年前の出来事だった！ということがおこり得ます。


楽しみにしていたイベントが、実は数年前に終わっていたとなると、その落胆はとても大きいです。

そこで、月・日・曜日から、年を探索するプログラムを JavaScript で書いてみました。

JavaScript:iframe:外部のページを埋め込むのではなく、HTMLをそのまま埋め込む、第３の可能性:独自のデータ属性を使用する

イントロダクション

HTML の iframe タグを使用して、外部のページではなく、コンテンツそのものを埋め込む方法として、

(1) srcdoc 属性に対応していない場合のみ、JavaScript で動的に iframe に HTML 文書を追加する
(2) すべてのケースにおいて、JavaScript で動的に iframe に HTML 文書を生成する

という方法があることを、以下のページで解説しました。

JavaScript:iframe:外部のページを埋め込むのではなく、HTMLをそのまま埋め込みたい
http://upa-pc.blogspot.com/2015/03/javascript-iframe-srcdoc.html
Dr.ウーパのコンピュータ備忘録

今回は、それら以外の、第３の方法を考えてみました。
それは、独自のデータ属性を定義して、そのデータ属性の値を用いて、JavaScript で動的に iframe に HTML 文書を生成する方法です。

JavaScript:iframe:外部のページを埋め込むのではなく、HTMLをそのまま埋め込みたい

イントロダクション

HTML の iframe タグを使用すると、ある HTML 文書の中に、別の HTML 文書を埋め込むことができます。

iframe 要素 - HTML | MDN
https://developer.mozilla.org/ja/docs/Web/HTML/Element/iframe

AA(アスキー・アート)だけでアニメーションを作りたい! アニメーション用JavaScript - 誰でも簡単に使えます

イントロダクション

ブログやWebサイトで文章を書いていると、動きのあるものをページ内に挿入したくなる時があります。

しかし、アニメーションを gif や動画で作るには、絵を作るのも編集ソフトを使うのも手間がかかって面倒くさいというときがあります。

そんなとき、文字だけでアニメーションが作れたら、どんなに楽かと思ってしまいます。


ならば作ってしまおう！
ということで、文字だけでアニメーションが作れる JavaScript を作ってみました。

javascript:正規化された(canonical)URLを取得する - サンプルコードと使用例

イントロダクション

Webページの URL をブラウザ側で動的に取得しようとした場合、考慮すべきことがあります。

url:webページの同一性を考える-同じコンテンツでもURLに複数のバリエーションが出来てしまう!
http://upa-pc.blogspot.com/2015/03/url-same-content-or-different.html

javascript:WebページのURLをlocationからではなく、HTML文書中のcanonicalから取得する理由
http://upa-pc.blogspot.com/2015/03/javascript-why-should-get-the-url-from-canonical.html


それを考慮すると、正規化されたURL(link タグの ref 属性に "canonical" が指定されているものの、href 属性の値)を取得したいケースがあります。

ソースコード解説：文字へのスタイルシートの適用結果を、アニメーションで表示するJavaScriptコードジェネレータ

イントロダクション

「文字へのスタイルシートの適用結果を、アニメーションで表示するJavaScriptコードジェネレータ」の JavaScript コードについて解説します。


ソースコードの全文は、以下のページに記載してあります。

ソースコード：文字へのスタイルシートの適用結果を、アニメーションで表示するJavaScriptコードジェネレータ
http://upa-pc.blogspot.com/2015/02/anime-css-code.html

ソースコード：文字へのスタイルシートの適用結果を、アニメーションで表示するJavaScriptコードジェネレータ

イントロダクション

「文字へのスタイルシートの適用結果を、アニメーションで表示するJavaScriptコードジェネレータ」の JavaScript コードを掲載します。

ソースコード解説：スタイル付きテキストを、コピーでブログに張り付け

イントロダクション

スタイルシートによってスタイルを適用した文字を、コピーによってブログに張り付けることのできるサービスのソースコードの解説を記載しました。

スタイル付きテキストを、コピーでブログに張り付けすることのできるサービスを作成しました！
http://upa-pc.blogspot.com/2015/02/css-copy-to-blog.html


そのままのソースコードは、以下のページで公開しています。

ソースコード：スタイル付きテキストを、コピーでブログに張り付け
http://upa-pc.blogspot.com/2015/02/src-css-copy-to-blog-v1.0.html


なお、これは初版(Version1.0)のものであり、今後修正が加わる可能性があります。

ソースコード：スタイル付きテキストを、コピーでブログに張り付け

イントロダクション

スタイルシートによってスタイルを適用した文字を、コピーによってブログに張り付けることのできるサービスを作ってみました！

スタイル付きテキストを、コピーでブログに張り付けすることのできるサービスを作成しました！
http://upa-pc.blogspot.com/2015/02/css-copy-to-blog.html


そのソースコードをここで公開します。
なお、これは初版(Version1.0)のものであり、今後修正が加わる可能性があります。

プログラムソース:コンマ(,)区切りの文字列の要素を、括弧[]でそれぞれ囲む - ver1.1:Blogger特有の問題の修正

これは何？

以下のページで動作させているプログラムのソースコードです。

Dr.ウーパのコンピュータ備忘録: コンマ(,)区切りの文字列の要素を、括弧[]でそれぞれ囲む : Comma Separated Words to Square-Bracket Separated Words
http://upa-pc.blogspot.jp/p/double-quotes-comma-to-square-bracket.html

入力されたコンマ(,)区切りの文字列の要素を、括弧[]でそれぞれ囲んだ結果を出力します。

なお、このソースコードは初版(Ver1.0)のBlogger特有の問題を修正したVer1.1です。
その後、修正が行われていれば、現在動作しているプログラムとは異なっている可能性があります。

Bloggerだとページ中のJavaScriptの一部の文字が自動的にエスケープされてしまう。その時に取った対応

イントロダクション

「コンマ(,)区切りの文字列の要素を、括弧[]でそれぞれ囲むサービスを作りました」で公開したプログラムを、実際に Blogger のページに張り付けて運用してみたところ、一部でうまく動作していないことが分かりました。

どうも、全角のダブルクォーテーション(“”)が入力データに入っていると、ちゃんと変換してくれないようです。

Blogger のページに張り付ける前に、パソコンのローカルの html ファイルでテストした時には同じ条件で正常に動作していました。

プログラムソース解説：コンマ(,)区切りの文字列の要素を、括弧[]でそれぞれ囲む - ver1.0

イントロダクション

コンマ(,)区切りの文字列の要素を、括弧[]でそれぞれ囲むプログラムを作成しました。

コンマ(,)区切りの文字列の要素を、括弧[]でそれぞれ囲むサービスを作りました
http://upa-pc.blogspot.com/2015/02/Make-Comma-Separated-Words-to-Square-Bracket-Separated-Words.html


その時に作成したソースコードを以下のページに記載しています。

プログラムソース:コンマ(,)区切りの文字列の要素を、括弧[]でそれぞれ囲む - ver1.0
http://upa-pc.blogspot.com/2015/02/Src-Comma-Separated-Words-to-Square-Bracket-Separated-v1.0.html

今回は、そのプログラムのソースコードについて、どのような意図でそのようなコードを書いたのか記載します。

プログラムソース:コンマ(,)区切りの文字列の要素を、括弧[]でそれぞれ囲む - ver1.0

これは何？

以下のページで動作させているプログラムのソースコードです。

Dr.ウーパのコンピュータ備忘録: コンマ(,)区切りの文字列の要素を、括弧[]でそれぞれ囲む : Comma Separated Words to Square-Bracket Separated Words
http://upa-pc.blogspot.jp/p/double-quotes-comma-to-square-bracket.html

入力されたコンマ(,)区切りの文字列の要素を、括弧[]でそれぞれ囲んだ結果を出力します。

なお、このソースコードは初版(Ver1.0)であり、現在動作しているプログラムとは異なっている可能性があります。
→ 新しいバージョンがあります。

プログラムソース:コンマ(,)区切りの文字列の要素を、括弧[]でそれぞれ囲む - ver1.1:Blogger特有の問題の修正
http://upa-pc.blogspot.com/2015/02/Src-Comma-Separated-Words-to-Square-Bracket-Separated-v1.1.html

ソースコードをきれいに装飾して、WordやPowerPointでレポートや発表資料を作る:SyntaxHighlighter(3.x)

「SyntaxHighlighter(3.x)で装飾されたソースコードを装飾ごとコピーする」シリーズとして、SyntaxHighlighter(3.x)で装飾されたソースコードを装飾ごとコピーして、各種アプリケーションに張り付けると、どのような結果になるのか見てきました。

「SyntaxHighlighter(3.x)で装飾されたソースコードを装飾ごとコピーする」シリーズ

• Blogger編
• Word編
• Excel編
• PowerPoint編

以上の結果を踏まえて、ソースコードをきれいに装飾したまま、WordやPowerPointでレポートや発表資料を作る場合にはどのようにしたらよいか考えました。