月別アーカイブ：5月 2014 のアーカイブ

5月 2014 に投稿された投稿を表示しています。

2014年5月30日金曜日

Blogger:画像の説明を追加する機能が標準であったなんて...!

いままで Blogger の記事に画像を張った場合、その画像の説明は、その画像の下にセンタリングしたテキストを記載することで行っていました。

Blogger：投稿にはパーマリンクが設定できるが、ページにはパーマリンクが設定できない

Blogger で情報を公開する場合、投稿とページの2種類の形式が選択できます。

Blogger の投稿とページ

投稿は、一般的にブログの記事を投稿する場合に使用します。
投稿として情報を公開すると、情報を公開した月ごとにページがアーカイブされます。
また、その前後の時間に投稿した投稿とひも付されます。

ページは、ブログの中に独立した情報を公開したい場合に使用します。
例えば、ブログの作者情報やサイトマップ、連絡先といった公開した日付に依存しない情報を公開する場合には、ページを使用します。

文長さ計測に文章の解析結果を表示する機能を追加しました

文章を構成する文の長さを計測できる Web サービス「文長さ計測」に、文章の解析結果を表示する機能を追加しました！

span要素に設定した枠線が右側だけ消える現象。原因はbrだった

イントロダクション

HTML を自動的に生成して表示する JavaScript コードを作成した時に気が付いた現象です。

span要素に設定した枠線がなぜか右側だけ消えていました。

Blogger:投稿の数が500件を超えていても、意識しないで投稿一覧を作成出来るようにしました

イントロダクション

記事「Blogger:投稿一覧をdocument.writelnではなく、要素のinnerHTMLに挿入することでページの表示を軽くする」では、記事一覧の作成をdocument.writelnではなく、要素のinnerHTMLに挿入することでページの表示を軽くしました。

今回は、document.writeln から innerHTML へ切り替えたことで、JavaScript の実行タイミングがページ表示中だけではなく、ページ表示後でも動作できるようになったため、投稿の数が500件を超えていても、意識しないで投稿一覧を作成出来るようにしてみます。

Blogger:投稿一覧をdocument.writelnではなく、要素のinnerHTMLに挿入することでページの表示を軽くする

イントロダクション

記事「Blogger:投稿一覧を作成する-10 件ごとにラインを引く」にて作成した記事一覧作成用の JavaScript をしばらく使ってみましたが、ページを表示した直後に下にスクロールしようとすると、スクロールした部分が空白のまま1～2秒程度固まる現象が発生しており、少し重たいように感じました。

現時点の記事総数は 331 件であり、だいぶ記事の数が増えてきたので、記事一覧を作成する処理もだいぶ負荷がかかっているのかなと想像しました。

アニメーションパターン:全てのグラフが増加割合固定でぐーん！と伸びる - HTMLとJavaScriptで単純なアニメーション付きの横向き1棒グラフを作成する

イントロダクション

記事「HTMLとJavaScriptで単純なアニメーション付きの横向き棒グラフを作成する-アニメーションパターン:増加割合固定」では、Webページ上に単純な横向きの棒グラフを JavaScript を使って作成し、全てのグラフの増加割合固定でアニメーションする方法を紹介しました。

今回は、その時のコードを修正して、横向きの棒グラフがぐーん！と伸びるようなアニメーションをするようにしてみます。

アニメーションパターン:全てのグラフが増加量固定でぐーん！と伸びる - HTMLとJavaScriptで単純なアニメーション付きの横向き1棒グラフを作成する

イントロダクション

記事「HTMLとJavaScriptで単純なアニメーション付きの横向き棒グラフを作成する-アニメーションパターン:増加量固定」では、Webページ上に単純な横向きの棒グラフを JavaScript を使って作成し、全てのグラフの増加量固定でアニメーションする方法を紹介しました。

今回は、その時のコードを修正して、横向きの棒グラフがぐーん！と伸びるようなアニメーションをするようにしてみます。

2014年5月29日木曜日

JavaScript で数値の指数部を取得するコードを作ってみました

イントロダクション

記事「HTMLとJavaScriptで単純なアニメーション付きの横向き棒グラフを作成する-アニメーションパターン:増加割合固定」にて、アニメーション処理とグラフ上に表示する数値の有効桁数の計算のために、数値の指数部を取得するコードを作ってみました。

JavaScriptで数値の有効桁数を計算するコードを作ってみました

イントロダクション

記事「HTMLとJavaScriptで単純なアニメーション付きの横向き棒グラフを作成する-アニメーションパターン:増加割合固定」にて、グラフ上に表示する数値の有効桁数の計算のために、数値の有効桁数を計算するコードを作ってみました。

ブログへの記事投稿で記事内容がわかるパーマリンクを設定した方がよい理由

イントロダクション

Blogger をはじめとした多くのブログサービスでは、記事の投稿時にパーマリンクを設定することができます。

パーマリンクとは、記事の URL に使用される文字列のことです。

例えば、この記事をデフォルトのパーマリンク（Blogger では自動パーマリンクと呼ばれています。）で投稿すると、次のような URL になります。

HTMLとJavaScriptで単純なアニメーション付きの横向き棒グラフを作成する-アニメーションパターン:増加割合固定

イントロダクション

記事「HTMLとJavaScriptで単純なアニメーション付きの横向き棒グラフを作成する-アニメーションパターン:増加量固定」では、Webページ上に単純な横向きの棒グラフを JavaScript を使って作成し、棒グラフが増加量固定でアニメーションする方法を紹介しました。

今回は、その時のコードを修正して、横向きの棒グラフが増加割合固定でアニメーションするようにしてみます。

HTMLとJavaScriptで単純なアニメーション付きの横向き棒グラフを作成する-アニメーションパターン:増加量固定

イントロダクション

記事「HTMLとJavaScriptで単純な横向き棒グラフを作成する」では、Webページ上に単純な横向きの棒グラフを JavaScript を使って作成する方法を紹介しました。

今回は、その時のコードを修正して、横向きの棒グラフがアニメーションするようにしてみます。

今回のアニメーションは、横向きの棒グラフの棒の長さを一定の長さで増やしていく動きをさせます。

2014年5月28日水曜日

理解できないものをブラウザのアドレスバーに入れるのは止めよう!!

Chrome ブラウザのアドレスバーに javascript を入れて実行していた時に気が付いたのですが、コピー＆ペーストで javascript:で始まる JavaScript の実行文をブラウザのアドレスバーに入れると、javascript:の部分が消えて、それ以降に続く部分の文字列で検索が実行されるんですね。

Blogger:発見！IMEで日本語入力できなくなるのはリンクを作成・変更した後

以前「Blogger:記事作成中にIMEで日本語入力できなくなった時の対処法」にて、Bloggerのエディタにて投稿を作成しているときに、日本語が入力できなくなる問題について言及しました。

その日本語が入力できなくなる現象の発現パターンの一つが判明したので、ここに記載しておきます。

Blogger:ページの右下に常に表示されるナビゲーションへ「前・次の投稿」への移動リンクを追加

イントロダクション

前回の記事「Blogger:ページの右下に常に表示されるナビゲーションにマウスが乗ったら光るようなエフェクトを設定」では、ナビゲーションの上にマウスが乗ったら光っているように見えるエフェクトを設定しました。

今回はそのナビゲーションを改良し、「前・次の投稿」への移動リンクを追加します。

Blogger:ページの右下に常に表示されるナビゲーションにマウスが乗ったら光るようなエフェクトを設定

イントロダクション

前回の記事「Blogger:ページの右下に常に表示されるナビゲーションへ「ラベル」への移動リンクを追加」では、リンクをクリックするだけでページ内のラベルへ移動できるナビゲーションを、ページの右下に常に表示するようにしました。

今回はそのナビゲーションを改良し、ナビゲーションの上にマウスが乗ったら光っているように見えるエフェクトを設定します。

Blogger:ページの右下に常に表示されるナビゲーションへ「ラベル」への移動リンクを追加

イントロダクション

前回の記事「Blogger:ページの右下に常に表示されるナビゲーションへ「ブログアーカイブ」への移動リンクを追加」では、リンクをクリックするだけでページ内のブログアーカイブへ移動できるナビゲーションを、ページの右下に常に表示するようにしました。

今回はそのナビゲーションを改良し、「ラベル」への移動リンクを追加します。

Blogger:ページの右下に常に表示されるナビゲーションへ「ブログアーカイブ」への移動リンクを追加

イントロダクション

前回の記事「Blogger:ページの右下に常に表示されるナビゲーションへ「人気の投稿」への移動リンクを追加」では、リンクをクリックするだけでページ内の人気の投稿へ移動できるナビゲーションを、ページの右下に常に表示するようにしました。

今回はそのナビゲーションを改良し、「ブログアーカイブ」への移動リンクを追加します。

Blogger:ページの右下に常に表示されるナビゲーションへ「人気の投稿」への移動リンクを追加

イントロダクション

前回の記事「Blogger:ページの右下に常に表示されるナビゲーションへ「新着情報」への移動リンクを追加」では、リンクをクリックするだけでページ内の新着情報へ移動できるナビゲーションを、ページの右下に常に表示するようにしました。

今回はそのナビゲーションを改良し、「人気の投稿」への移動リンクを追加します。

Blogger:ページの右下に常に表示されるナビゲーションへ「新着情報」への移動リンクを追加

イントロダクション

前回の記事「Blogger:ページの右下に常に表示される「ページトップへ」ナビゲーションを作成」では、リンクをクリックするだけでページのトップへ移動できるナビゲーションを、ページの右下に常に表示するようにしました。

今回はそのナビゲーションを改良し、「新着情報」への移動リンクを追加します。

Blogger:ページの右下に常に表示される「ページトップへ」ナビゲーションを作成

イントロダクション

ページを見終わった後でページのトップへ移動するために、ブラウザのスクロールを操作するのは面倒です。

そこで、リンクをクリックするだけでページのトップへ移動できるナビゲーションを、ページの右下に常に表示するようにしました。

2014年5月27日火曜日

HTMLとJavaScriptで単純な縦向き棒グラフを作成する

イントロダクション

前回「HTMLとJavaScriptで単純な横向き棒グラフを作成する」では、単純な横向きの棒グラフを作成しました。

今回は前回のコードを修正し、縦向きの棒グラフを作成したいと思います。

HTMLとJavaScriptで単純な横向き棒グラフを作成する

イントロダクション

Webページ上に棒グラフを動的に表示したいというケースがあると思います。

私も Web サービス「文長さ計測」を作成するうえで、結果を棒グラフで表示するために JavaScript のコードを作成しました。

そこで、今回はその時に作成したコードを紹介したいと思います。

Blogger:ブログアーカイブにて、現在表示している投稿を目立たせる

イントロダクション

ひと月に投稿する記事の数が多くなると、ブログアーカイブでは大量の記事タイトルが並ぶことになります。

その結果、今表示している記事がブログアーカイブのどの位置に対応しているのかわからなくなることがあります。

そこで、Blogger のテンプレートの HTML を修正して、ブログアーカイブにて、現在表示している記事を目立たせるようにしました。

JavaScriptの配列は未知の要素へ設定するだけで自動的に配列が拡張されるので非常に便利!!でも、その感覚で他の言語を使うとバッファオーバーフローのセキュリティホールを生み出すので注意!!

JavaScript の配列の場合、未知の要素へ値を設定するだけで、自動的に配列の要素の数が増加するので非常に便利です。

例えば、次のような使い方ができます。

HTMLとJavaScriptでタブコントロールを作ってみた-タブ:右

イントロダクション

記事「HTMLとJavaScriptでタブコントロールを作ってみた-タブ:左」では、左にタブの一覧が表示されるタブコントロールを HTML と JavaScript で作成してみました。

今回は、そのコードを修正して、右にタブの一覧が表示されるタブコントロールを作成します。

HTMLとJavaScriptでタブコントロールを作ってみた-タブ:左

イントロダクション

記事「HTMLとJavaScriptでタブコントロールを作ってみた-タブ:下」では、下にタブの一覧が表示されるタブコントロールを HTML と JavaScript で作成してみました。

今回は、そのコードを修正して、左にタブの一覧が表示されるタブコントロールを作成します。

HTMLとJavaScriptでタブコントロールを作ってみた-タブ:下

イントロダクション

記事「HTMLとJavaScriptでタブコントロールを作ってみた-タブ:上」では、上にタブの一覧が表示されるタブコントロールを HTML と JavaScript で作成してみました。

今回は、そのコードを修正して、下にタブの一覧が表示されるタブコントロールを作成します。

HTMLとJavaScriptでタブコントロールを作ってみた-タブ:上

イントロダクション

Windows で標準的に用意されているコントロールにタブコントロールがあります。

機械化・コンピュータ化による作業の自動化と新規事業の創成

いままで人が行っていた作業の自動化は、エネルギーを投入された機械によって大幅に進展しました。

農業や工業の分野では、機械の導入により作業が自動化され、大幅に作業が効率化されました。

近年では、単純な機械による自動化のみではなく、手順の埋め込まれた機械によりさらに自動化の適用範囲が広がっています。

手順の埋め込まれた機械は初めは電気的・電子的な回路による固定的な作業手順の埋め込みにしか対応していませんでした。

しかし、電子回路の進歩により、作業手順を簡単・手軽に作成・変更可能なソフトウェアによる機械の制御（コンピュータ化）により、自動化の適用範囲をさらに広げることができるようになりました。

2014年5月26日月曜日

Blogger の HTML 自動修正機能がときには邪魔になる...。どう対策するべきか...？

イントロダクション

前回の記事「CSS:float指定の要素でリンクをクリックできない理由は上に別の要素が被さっていたからだった」で、以下のコードを記載しました。

コード

<span style="float:right;position: relative;z-index: 2;"><a href="javascript:alert('クリック!');">クリックして！</a></span>
<h1 style="width:100%;">タイトル要素</h1>

このコードを、Blogger の投稿の HTML に張り付けました。

※ Blogger の投稿エディタには、見たまま投稿を編集できる機能と、HTML で投稿を編集できる機能があります。

詳しくは、以下の Blogger のヘルプを参照してください。

Blogger の投稿エディタ - Blogger ヘルプ
https://support.google.com/blogger/answer/42239?hl=ja

そして、投稿の編集モードを「HTML」の編集（ブログの本文を HTML で編集できるモード）から、「作成」モード（ブログの本文を見た目通りに編集できるモード）に戻したところ、以下のように HTML が自動修正されていました。

CSS:float指定の要素でリンクをクリックできない理由は上に別の要素が被さっていたからだった

スタイルシートにて、要素に float を追加し、要素の左側、右側に固定するといった方法を良くやります。

その時に、次のような指定を行った時、何故か float を指定した要素のリンクがクリックできなくなるという現象が発生しました。

Blogger:人気の投稿の表示期間をクリックで切り替えられるようにしてみた

イントロダクション

Blogger のガジェットには、そのブログ内で多くのページビューを得ている投稿の一覧を表示する”人気の投稿”があります。

この人気の投稿ガジェットでは、多くのページビューを得ている投稿を抽出するためのページビューの積算期間に応じて、次の 3 種類の積算期間を選択することができます。

全期間
過去 30 日間
過去 7 日間

一つの人気の投稿ガジェットには、一つの積算期間しか設定できませんが、せっかくなので閲覧者が積算期間をその３つの中から選択できるようにしてみました。

ドコモメール（ブラウザ版）を使おうとしたときに電話帳でハマったいくつかの罠

記事「パソコンからドコモメール（ブラウザ版）を使おうとしたときにハマったいくつかの罠」では、パソコンからドコモメール（ブラウザ版）を使えるようにしたときの罠について記載しました。

今度は、ドコモメール（ブラウザ版）にて、電話帳を使えるようにしたときの罠について記載します。

パソコンからドコモメール（ブラウザ版）を使おうとしたときにハマったいくつかの罠

ドコモのキャリアメールが、SPモードメールからドコモメールへ移行したことにより、スマートフォンだけではなく、パソコンでもブラウザを使用してドコモのキャリアメールの送受信を行えるようになりました。

2014年5月25日日曜日

Webサービスリリース!文の長さを計測して度数分布を表示するWebサービス - 文長さ計測

新しい Web サービスをリリースしました!!

文の長さを計測して度数分布を表示するWebサービス
文長さ計測

JavaScriptの条件 (三項) 演算子 (?:) の演算子の優先順位でハマった罠

JavaScript には他の言語(C,C++など）と同じように条件 (三項) 演算子 (?:) を使用できます。

2014年5月24日土曜日

ニコニコ動画で同じ動画を繰り返し見てもおもしろい理由

最近ニコニコ動画で「ご注文はうさぎですか？」を毎日見て楽しんでいます。

１週間ごとに新しい話が１話公開されるので、毎日最新話を見ているため、同じ話を 7 回くらい見ているかもしれません。

テレビを録画したものであれば、1回見た後はもう見ることのないことがほとんどです。
しかし、何故ニコニコ動画であれば、こうも毎日繰り返し見ても楽しめるのでしょうか？

正規表現を使って<noscript>をコメント化を解除-Visual Studio 2010編

イントロダクション

以下の記事にて、<noscript>タグでローカルテストでは不必要なコードを動作させないようにする方法を紹介しました。

ローカル環境でwebページをテストするときに（重要ではない）外部サービスの応答待ちでページの表示が激遅のときの対処
http://upa-pc.blogspot.jp/2014/05/web.html

その後、Web ページを Web サーバにアップロードする際には、<noscript> をコメントアウトして、動かなくしていたコードを動かすようにします。

その後、もう一度ローカル環境でテストする場合に、<noscript> をコメントアウトしていた部分を元に戻したいという場面があります。

その場合には、置換機能でまとめて元に戻すのが手軽で簡単です。

正規表現を使って<noscript>をコメント化-Visual Studio 2010編

イントロダクション

Bloggerの投稿エディタで投稿タイトルを入力するときに注意すること-自動的にエスケープされない

Bloggerの投稿エディタを使用して、ブログに記事を投稿する場合に気を付けることがあります。

2014年5月23日金曜日

マウスを乗せたら画像が上からみょ～んと降りてくる JavaScript を作ってみました

マウスを乗せたら画像が上からみょ～んと降りてくる JavaScript を作って、以下のサイトに適用してみました。

また必要なデータを保存したと勘違いして保存せずに消してしまった!!

さっき Photoshop で作成したデータ（完成版）を保存したと勘違いして、保存せずに消してしまいました! (゜-゜)(゜o゜)＼(^o^)／

完成後の png データは保存したのですが、その画像の各要素を編集可能な構造を保持しているファイル(PSDファイル)を保存し忘れました....。

今後その画像データを再編集することが無ければ問題は無いのですが、再編集することになれば各レイヤー構造やベクターデータ、テキストデータなどが失われているため、どちらかといえば一から作り直さないといけません。
なんてこったい。

慣れ親しんだヘッドホンがついに断線しそう！それまでの経緯と今後

ヘッドホン、断線寸前！！

私が昔から慣れ親しんだヘッドホンが、ついに断線寸前になっていました...！

ローカル環境でwebページをテストするときに（重要ではない）外部サービスの応答待ちでページの表示が激遅のときの対処

イントロダクション

ローカル環境で web ページのテストを行うことはよくあります。
この時に、テスト対象の web ページ内に、外部の web サービスへアクセスする要素(<script>など）（以下、外部要素）が含まれていることがあります。

特に問題なく動作する外部要素もありますが、ものによっては web サーバ上でしか動かず、読み込みがタイムアウトするまでページの表示がそこで止まってしまうものがあります。

ローカル環境で効率的にテスト作業を行う上で、その待ち時間は非常にもったいないものになります。

そこで、私は以下の方法で対処しています。

要素に設定された style を取得する方法 - for ... in ではなく cssText で取るのが良さそう

イントロダクション

要素に設定したスタイルシートを取得する方法を考えてみました。

Webサービスリリース!タグに埋め込まれた style をシンプル化するWebサービス - HTMLのシンプル化 - タグのスタイル版

新しいWebサービスをリリースしました！

タグに埋め込まれた style をシンプル化するWebサービス
HTMLのシンプル化 - タグのスタイル版

2014年5月22日木曜日

iPadの明るさを手軽に調整する方法

夜寝る前に iPad で読書や動画観賞をするってこと、ありますよね？
私はよく寝る前にニコニコ動画を観賞しています。

そのときに部屋を暗くして iPad を見ているのですが、昼間は明るさを 50% くらいにしてあるとちょうどいいのですが、暗い部屋では 0% くらいにしないと眩しいです。

今までは、設定から明るさの変更を行っていたのですが、少し面倒でした。
いろいろと試しているうちに、わずか 2 ステップで明るさを変更できる方法を発見しました！

text-shadowで文字に明るい影を付けると輝いて見える

スタイルシートの text-shadow を使用することで、文字に影を付けることができます。

ニコニコ動画の配信フォーマット

ニコニコ動画の動画配信にて、2014年夏ごろから、H.265/HEVCでのエンコードに対応するようです。

ニコ動が'14年夏からHEVCエンコード対応。2倍の圧縮率でトラフィック緩和へ - AV Watch
http://av.watch.impress.co.jp/docs/news/20140521_649596.html

ちょっと計算したくなった時の電卓とExcelの使い分け

パソコンを使っているときに、ちょっと計算したくなる時がありますよね？
その時に、あなたは電卓と Excel どちらを使いますか？

グーグルの公開したルービックキューブがすごい！まるで実物のルービックキューブを操作しているみたいだ

グーグルのトップページでルービックキューブができるようになっていました。

2014年5月21日水曜日

ウィンドウのサムネイルを最大限に活用するには、ウィンドウを最小化せず重ねるスタイルが最適

Windows のタスクバー上に表示されている各アプリケーションの上にマウスポインターを乗せると、そのアプリケーションのウィンドウをサムネイルとして表示してくれます。

テキスト入力欄(textarea)のあるページは、Chrome/Firefox で見るとサイズ調整出来て便利！(IE/Chrome/Firefox比べ)

ユーザ登録やアンケートフォーム、各種Webアプリケーションでは、以下のようなテキスト入力欄(textarea)が良く使われています。

2014年5月20日火曜日

夜はディスプレイの眩しい光を避けたい！独立したディスプレイのユーザに取れる策は...

イントロダクション

昼間のディスプレイの明るさと、夜間のディスプレイの明るさを同じにしておくと、昼間の明るさがちょうどいい場合、夜間のディスプレイが眩し過ぎる！ということはないですか？

少なくとも私はそのように感じているユーザの一人です。
（そもそも昼間ですら、明るさは 30% くらいを上限とするくらいにしか明るくしていません。）

HTML-canvas:来たるべく canvas 全盛時代に備えて、canvas への入門を始めてみた

イントロダクション

canvas タグを使用すると、ブラウザ上で多様なグラフィクスを表現することができます。
canvas タグ導入以前には手軽には実現できなかったグラフィクス表現も、canvas を使用することで手軽にブラウザ上に表現することができます。

canvas 上に多様なグラフィクスを表現するために使用するのは JavaScript です。
つまり、JavaScript のコード次第で静的な絵から動的な絵、そしてインタラクティブなコンテンツまで様々な用途に活用できます。

2014年5月19日月曜日

Blogger:コメント入力欄を初期状態では非表示にしておき、「コメントを投稿」をクリックしたら表示するようにする

イントロダクション

Blogger のコメント入力欄ですが、初期状態では非表示にしておき、「コメントを投稿」をクリックしたら、コメント入力欄を表示するようにしてみました。

なぜそのようなことをしたかというと、基本的にコメントを投稿してくれるような人は閲覧者全体からするとごく少数であり、ほとんどの人にとっては無駄な情報となっているからです。

Blogger:コメントが無い場合には「0 件のコメント :」を消す

イントロダクション

Blogger のページにて、ページへのコメントが 0 件の場合には、「0 件のコメント :」を消したいと思います。

Blogger:「この投稿へのリンク」を消す-設定編

イントロダクション

Blogger のページにて、バックリンクを作成する機能である「この投稿へのリンク」部を設定を変更することで、消したいと思います。

Blogger:「この投稿へのリンク」を消す-HTML編集編

イントロダクション

Blogger のページにて、バックリンクを作成する機能である「この投稿へのリンク」部をHTMLを編集することで、消したいと思います。

外部サービスが止まっても最低限の動作ができるようなWebページを作る：SyntaxHighlighter編

イントロダクション

以前 SyntaxHighlighter の公式ホスティングサービスへの接続に失敗し、ページが読み込み中のまま表示されないという現象が発生したことがありました。

SyntaxHighlighter:エスケープした<br />のみ HTML のタグとして解釈されてしまう問題の解決策

SyntaxHighlighterにて、エスケープした<br />のみ、HTMLのタグとして解釈され、表示上改行になってしまう問題への対処方法がわかりました。

2014年5月17日土曜日

SyntaxHighlighter で装飾したコードを Chrome でコピーすると文字化けする

イントロダクション

このブログでは、ソースコードを見栄え良く表示するために SyntaxHighlighter を使っています。

SyntaxHighlighter で装飾したコード：

<script type="text/javascript">
<!--
    (function () {
        alert("Hello");
    })();
//-->
</script>

先日、何気なく SyntaxHighlighter で装飾した JavaScript のソースコードを Chrome でコピーして、実際に Blogger のWeb ページのソースに張り付けて動かしてみたところ、なぜか動きませんでした。

Chrome のデバッグ機能でソースコードをトレースしてみると、半角スペースに見えていた部分が、別のものになっていることがわかりました。

2014年5月16日金曜日

Blogger:投稿一覧を作成する-10 件ごとにラインを引く

イントロダクション

前回はラベルへリンクを設定して記事一覧を表示しました。

今回は前回のコードを少し修正し、10 件ごとにラインを引いて記事一覧を表示するように修正します。

Blogger:投稿一覧を作成する-ラベルへリンクを設定

イントロダクション

前回はラベルを付与して記事一覧を表示しました。

今回は前回のコードを少し修正し、ラベルへリンクを設定して記事一覧を表示するように修正します。

Blogger:投稿一覧を作成する-ラベルを付与する

イントロダクション

前回は番号付きリストにて記事一覧を表示しました。

今回は前回のコードを少し修正し、ラベルを付与して記事一覧を表示するように修正します。

Blogger:投稿一覧を作成する-番号付きリストにて記事一覧を表示

イントロダクション

前回は記事にマウスを乗せたら投稿のサマリを表示する投稿一覧を作成しました。

今回は前回のコードを少し修正し、番号付きリストにて記事一覧を表示するように修正します。

Blogger:投稿一覧を作成する-記事にマウスを乗せたら投稿のサマリを表示する

イントロダクション

前回は最もシンプルな投稿一覧を作成しました。

今回は前回のコードを少し修正し、記事にマウスを乗せたら投稿のサマリを表示するように修正します。

Blogger:投稿一覧を作成する-最もシンプル

イントロダクション

Blogger で記事一覧を表示するには、ブログアーカイブを使うくらいしか方法が無いのですが、一覧を見やすいように表示するには少し力不足なところがあります。

そこで、投稿記事一覧を作る方法について検討してみました。

投稿記事一覧を作る方法については、先駆者の方々がいろいろなコードを作成されているので、それを一部（feed取得部）参考にさせていただきました。

JavaScript:特定のクラス名のノードに対してスタイルを設定する

イントロダクション

JavaScript で動的にスタイルを変更したいという場面は良くあると思います。

id を設定した要素に対しては比較的簡単にスタイルの変更ができると思います。
document.getElementById で取得した要素に対して、要素.style.スタイル = "..." で設定するだけです。

しかしながら、特定のクラス名を持つ要素に対して、スタイルの変更をする場合には、一筋縄ではいきません。

Blogger:投稿の本文・ラベルの表示・非表示をコントロールする要素を作ってみた

イントロダクション

Blogger では、トップページや過去の記事の検索、ラベルなどを表示すると、複数の投稿を一つのページの中で一覧表示することができます。

その時に、気になるタイトルの投稿を探したい場合には、投稿の本文やラベルなどの要素は邪魔になることがあります。

そこで、閲覧者が投稿の本文やラベルなどの要素の表示・非表示をコントロールできる要素を JavaScript で作成してみました。

ニコニコ動画：モバイル端末では見れないアニメの回がたまにある

イントロダクション

最近はもっぱらニコニコ動画でアニメは見るようになりました。

寝る前にリラックスした状態で、iPad で見るアニメは格別です。

ニコニコ動画：モバイル端末で見れないアニメの回がたまにある

しかし最近、モバイル端末では見れないアニメの回がある場合があります。

例えば、第5話まではモバイル端末で見れたのに、第6話だけモバイル端末で見れないといった具合です。

LinkStation:データは外付けHDDに自動バックアップ！万が一のために備えよう！

buffalo から発売されている NAS(Network Attached Storage:ネットワーク接続ストレージ）ですが、外付けHDDを接続すると、自動的に外付け HDD にデータをバックアップするように設定することができます。

2014年5月15日木曜日

JavaScript:特定の要素を配下の要素も含めて有効・無効(disabled)を制御する

イントロダクション

フォーム内に配置したボタンやチェックボックス、テキストボックスなどに対して、まとめて有効・無効を制御したいと思いいろいろと調べてみましたが、一行で実行する方法は無いようです。

てっきり、最上位の要素に対して有効・無効を設定したら、その配下の要素もまとめて有効・無効が連動してくれるのかと思っていましたが、違ったようです。(*1)

*1
実際に、最上位の form の disabled の true/false を変更してみましたが、その配下の要素の有効・無効状態には影響がありませんでした。

そこで、指定した id の要素以下のすべての要素の有効・無効を切り替えるコードを作成してみました。

Closure Compiler:コンパイルしたらJavaScriptの実行時にエラーが出るようになった。コードの順番を変えたら正常に動作した

イントロダクション

JavaScriptで記載したソースコードの圧縮・最適化のために、Google Closure Compilerを使用しています。

今回は、Google Closure Compiler でコンパイルする前のソースコードでは正常に動作していたものが、コンパイル後のソースコードでは、実行途中でエラーが出てしまった事例を紹介します。

2台のパソコンを同じ机で使う場合、USB切替機を使うと圧倒的に便利!!

イントロダクション

一つの机で二台のパソコンを扱うとき、マウスやキーボードってどうしてますか？

それぞれのパソコンごとにマウスとキーボードを用意してもいいのですが、それだと机の上に二つずつマウスとキーボードを置いておく必要があり、場所を取ります。

更に、場所を取るだけならまだしも、マウスとキーボードの配置によっては、操作したいパソコンとは別のパソコンのマウスとキーボードを操作してしまい、誤操作で時間をロスするということもあります。

そんなときの一つの解決策として、マウスとキーボードを一つにして、二つのパソコンで共有し、USB切替機で切り替える方法をお勧めします！

リモートデスクトップのクライアントの画面がマルチディスプレイだと作業が捗る!

リモートデスクトップのクライアントの画面がマルチディスプレイの場合、一つの画面で作業をしながら、もう一つの画面でリモートデスクトップの接続先の操作ができるので非常に便利です！

以下の画面では、左側のデスクトップでいろいろな作業をしながら、右側のリモートデスクトップの画面で接続先に対していろいろと操作できます！

私の作業環境(2)

記事「私の作業環境」では、主に使用しているパソコンのスペックを紹介しました。

今回は、使用しているパソコンとその周辺機器の構成を紹介します。

今までに私が出会ったことのあるスマートフォンの不具合(1)-電話がつながらない

イントロダクション

スマートフォンとそれを取り巻く高度な通信機器は、その高度さ・複雑さゆえに不具合を内在する可能性があります。

今回は私が出会った中で強烈な印象を持った不具合を紹介したいと思います。

Blogger:「前の投稿」「次の投稿」に記事のタイトルを付与する! - JavaScript: ブログアーカイブから取得編（前・次の投稿が月を跨ぐ場合にも対応）-バグフィックス

イントロダクション

記事「Blogger:「前の投稿」「次の投稿」に記事のタイトルを付与する! - JavaScript: ブログアーカイブから取得編（前・次の投稿が月を跨ぐ場合にも対応）」で紹介したコードのバグフィックスです。

バグフィックス

URLにハッシュ(#)が含まれている場合に、「前の投稿」「次の投稿」に記事のタイトルが付与されない問題に対処しました。

JavaScript:URLのハッシュ(#)以降を削除する

イントロダクション

JavaScriptで現在のページの URL を取得する場合に、location.href を使用します。
location.href では、URL にハッシュ(#)が含まれている場合には、ハッシュを含んだものを取得します。

従って、ハッシュを含まない URL を取得したい場合には、いろいろな方法により処理を行う必要があります。

方法はいくつかありますが、今回は正規表現による置換により、ハッシュ以降の文字列を削除した URL を生成したいと思います。

2014年5月14日水曜日

Blogger:「前の投稿」「次の投稿」に記事のタイトルを付与する! - JavaScript: ブログアーカイブから取得編（前・次の投稿が月を跨ぐ場合にも対応）

イントロダクション

記事「Blogger:「前の投稿」「次の投稿」に記事のタイトルを付与する! - JavaScript: ブログアーカイブから取得編（前・次の投稿が月を跨ぐ場合は非対応）」では、ブログアーカイブより、前の投稿・次の投稿のタイトルを取得して、前の投稿・次の投稿のナビゲータにタイトルを設定しました。

この時は、現在の投稿の投稿月が、前の投稿・次の投稿と同じ投稿月である必要があり、異なる月の場合には投稿タイトルを取得できませんでした。

そこで、今回は前回のコードを改良し、現在の投稿の投稿月が、前の投稿・次の投稿と異なる月の場合にも投稿タイトルを取得できるようにしました。

Blogger:「次の投稿」のURLをJavaScriptで取得する

イントロダクション

Blogger の投稿に表示されている「次の投稿」の URL を JavaScript で取得してみました。

Blogger:「前の投稿」のURLをJavaScriptで取得する

イントロダクション

Blogger の投稿に表示されている「前の投稿」の URL を JavaScript で取得してみました。

Blogger:「前の投稿」「次の投稿」に記事のタイトルを付与する! - JavaScript: ブログアーカイブから取得編（前・次の投稿が月を跨ぐ場合は非対応）

イントロダクション

記事「Blogger:レイアウト用ページ要素タグを使用して、「前の投稿」「次の投稿」に記事のタイトルを付与する! - 失敗編」では、Blogger のレイアウト用ページ要素タグを使用すれば、「次の投稿」「前の投稿」ナビゲータに、それぞれの記事のタイトルを付与することができるのはないかという考え、実現可能性を検証しましたが ”実現できない” という結論が得られました。

そこで、今回は JavaScript を使用して、動的に「次の投稿」「前の投稿」ナビゲータに、それぞれの記事のタイトルを付与する方法を検討します。

Blogger:レイアウト用ページ要素タグを使用して、「前の投稿」「次の投稿」に記事のタイトルを付与する! - 失敗編

イントロダクション

記事「Bloggerのナビゲータ「次の投稿-ホーム-前の投稿」の並び順に違和感を感じたので左右を交換」では、投稿の下にあるナビゲータ「次の投稿-ホーム-前の投稿」の並び順を「前の投稿-ホーム-次の投稿」に変更しました。

しかしこのナビゲータ、前の投稿や、次の投稿がどんなものかわからないので、あまりクリックしたいとは思わないのではないのでしょうか？

2014年5月13日火曜日

Blogger:全投稿数をカウントして表示するJavaScript

イントロダクション

Blogger へ投稿した記事の数を表示できると便利ですよね。

というわけで、Blogger へ投稿した全投稿数を表示する JavaScript を作成してみました。

Blogger:テンプレートのHTMLのカスタマイズを行うと、上級者向けで追加したCSSの編集がテンプレートのHTMLのカスタマイズでしか行えなくなる

Blogger で独自のスタイルシートを追加する方法には以下の二つがあります。

テンプレート→カスタマイズ→上級者向け→CSSを追加
テンプレート→HTMLの編集

このうち、１．の方法でスタイルシートを追加した後に、テンプレートのHTMLの編集を実行すると、１．で追加したスタイルシートが１．の方法では修正することができなくなります。

最近Screen Capture (by Google)がうまく動かない

Webページの全体のスクリーンキャプチャを撮る時に重宝していた「Screen Capture (by Google)」ですが、最近うまく動いてくれません。

2014年5月12日月曜日

完成コード配布 - 2nd - Bloggerの記事に目次をJavaScriptで自動的に付与する

序章

この記事は「そうだ！Bloggerの記事に目次を付けよう！」から始まる一連の「Bloggerの記事に目次をJavaScriptで自動的に付与する」シリーズの構成記事です。（2nd シリーズ）
記事一覧は「Bloggerの記事に目次をJavaScriptで自動的に付与する - サポートページ」よりどうぞ。

2nd シリーズでは、1st シリーズで作成した目次機能に基本的な機能追加を行います。

今回の目的

2nd シリーズで機能追加を行った目次自動生成プログラムとスタイルシートの配布を行います。

目次にヘルプボタンを追加 - 2nd - Bloggerの記事に目次をJavaScriptで自動的に付与する

序章

今回の目的

2nd シリーズ第５回目の今回は以下の機能を実装します。

目次にヘルプボタンを追加し、ヘルプボタンを押すことで公式サイトへ飛べるようにして目次作成機能の最新情報や様々な情報を得られるようにする。

目次タイトルの名前を変数で与える - 2nd - Bloggerの記事に目次をJavaScriptで自動的に付与する

序章

今回の目的

2nd シリーズ第４回目の今回は以下の機能を実装します。

目次タイトルの名前を”目次”以外の名前にできるように変数で与えるようにする。

目次内のタグをそのまま使うのか削除するのか変数で制御 - 2nd - Bloggerの記事に目次をJavaScriptで自動的に付与する

序章

今回の目的

2nd シリーズ第３回目の今回は以下の機能を実装します。

目次のテキスト内にタグがあった場合に、タグをそのまま使うのか・タグを削除するのかを変数で制御できるようにする

目次の挿入先要素の id を変数として与える - 2nd - Bloggerの記事に目次をJavaScriptで自動的に付与する

序章

今回の目的

2nd シリーズ第２回目の今回は以下の機能を実装します。

目次の挿入先要素の id を変数として与えることで、様々なWebページ作成/Blogサービスにこの目次生成機能を導入できるようにする

目次の挿入先要素の id を正規表現により検出 - 2nd - Bloggerの記事に目次をJavaScriptで自動的に付与する

序章

今回の目的

2nd シリーズ第１回目の今回は以下の機能を実装します。

目次の挿入先要素の id を正規表現により検出することで JavaScript コードの汎用性を高める

2ndシリーズ開始宣言 - 2nd - Bloggerの記事に目次をJavaScriptで自動的に付与する

この記事は「そうだ！Bloggerの記事に目次を付けよう！」から始まる一連の「Bloggerの記事に目次をJavaScriptで自動的に付与する」シリーズの構成記事です。
記事一覧は「Bloggerの記事に目次をJavaScriptで自動的に付与する - サポートページ」よりどうぞ。

2ndシリーズ開始宣言

1stシリーズを通して、Blogger に以下のような基本的な機能を持った目次を設置できるようになりました。

iPadで長時間ニコニコ動画を操作しているとアプリが落ちるのでやっていること

イントロダクション

最近は夜寝る前などに、毎日 iPad でニコニコ動画を見ています。

iPad 用のニコニコ動画のアプリは非常に便利なのですが、たまに動作がおかしくなったかと思うと、アプリ自体が落ちる（強制終了される）ことがあります。

2014年5月11日日曜日

SimCityプレイ中に画面がちらつくと思ったらディスプレイドライバーが応答停止していた

久しぶりに SimCity をプレイしてみました!
その時に、なぜか画面が一時的に真っ黒になる現象が数十分毎に発生しました。

何だろうと思い、イベントビューアを見てみたら、以下のようにディスプレイドライバが応答を停止していた結果でした。

2014年5月7日水曜日

Blogger:でっかくして目立たせよう！ - もっと読む編

イントロダクション

「ナビゲーションをでっかくして目立たせて使ってもらおう！」シリーズは Blogger の各ナビゲーションをでっかくして、使ってもらいたい機能・目立たせたい情報を読者にアピールしようとする一連のシリーズです。

今回は「もっと読む」をでっかくしちゃおうと思います！

Blogger:投稿の周りに太い枠線を設置して一つのパネルのように魅せる

「Blogger の各要素の周りに太い枠線を設置することで、パネルが並んでいるようなデザインにする」シリーズの構成記事です。

投稿の表示エリアの周りに太い枠線を設置して一つのパネルのように魅せてみましょう。

Blogger:インデックスステータスにロボットによりブロック済みが増え続けていくわけ

Blogger でブログを書いている人は気になっている（気になっていた）現象だと思います。

私が Blogger で公開しているブログを、ウェブマスターツールの Google インデックス→インデックスステータスで見てみました。

すると、インデックスに登録されたページの総数とともに、ロボットによりブロック済みのページ数が順調に伸びていました。

2014年5月5日月曜日

HydraVision:休止状態からの復帰時にエラーが表示され、デスクトップ切り替えのショットカットが使えなくなった

HydraVision を使っていて、起こった現象です。

HydraVision にて仮想デスクトップを構築し、休止状態に移行しました。

Blogger:でっかくして目立たせよう！ - 番外編：本文の見出し編

イントロダクション

「ナビゲーションをでっかくして目立たせて使ってもらおう！」シリーズは Blogger の各ナビゲーションをでっかくして、使ってもらいたい機能・目立たせたい情報を読者にアピールしようとする一連のシリーズです。

今回は本文の見出しをでっかくしちゃおうと思います！

Blogger:ナビゲーションをでっかくして目立たせて使ってもらおう！ -人気の投稿編

イントロダクション

「ナビゲーションをでっかくして目立たせて使ってもらおう！」シリーズは Blogger の各ナビゲーションをでっかくして、使ってもらいたい機能・目立たせたい情報を読者にアピールしようとする一連のシリーズです。

今回は人気の投稿ナビゲーションをでっかくしちゃおうと思います！

Blogger:人気の投稿の表示エリアの周りに太い枠線を設置して一つのパネルのように魅せる

「Blogger の各要素の周りに太い枠線を設置することで、パネルが並んでいるようなデザインにする」シリーズの構成記事です。

人気の投稿の表示エリアの周りに太い枠線を設置して一つのパネルのように魅せてみましょう。

Blogger:ナビゲーションをでっかくして目立たせて使ってもらおう！ - 新着情報編

イントロダクション

「ナビゲーションをでっかくして目立たせて使ってもらおう！」シリーズは Blogger の各ナビゲーションをでっかくして、使ってもらいたい機能・目立たせたい情報を読者にアピールしようとする一連のシリーズです。

今回は新着情報ナビゲーションをでっかくしちゃおうと思います！
なお、新着情報は Feed によって表示しています。

Blogger:新着情報の表示エリアの周りに太い枠線を設置して一つのパネルのように魅せる

「Blogger の各要素の周りに太い枠線を設置することで、パネルが並んでいるようなデザインにする」シリーズの構成記事です。

新着情報の表示エリアの周りに太い枠線を設置して一つのパネルのように魅せてみましょう。

なお、新着情報は Feed によって表示しています。

Blogger:zenbackの表示エリアの周りに太い枠線を設置して一つのパネルのように魅せる

「Blogger の各要素の周りに太い枠線を設置することで、パネルが並んでいるようなデザインにする」シリーズの構成記事です。

zenbackの表示エリアの周りに太い枠線を設置して一つのパネルのように魅せてみましょう。

Blogger:ナビゲーションをでっかくして目立たせて使ってもらおう！ - 前の投稿・次の投稿編

イントロダクション

「ナビゲーションをでっかくして目立たせて使ってもらおう！」シリーズは Blogger の各ナビゲーションをでっかくして、使ってもらいたい機能・目立たせたい情報を読者にアピールしようとする一連のシリーズです。

今回は「前の投稿」・「次の投稿」ナビゲーションをでっかくしちゃおうと思います！

2014年5月4日日曜日

Blogger:「ブログのアーカイブ」ガジェットで階層表示にしているときの投稿一覧のデータ生成・表示動作について

イントロダクション

Blogger には「ブログのアーカイブ」ガジェットというものがあります。

HydraVision:休止状態からの復帰時に非表示にしたサイドバーのガジェットがまとまって表示される

HydraVision を使っていて、起こった現象です。

HydraVision にて仮想デスクトップを構築し、サイドバーを非表示にした状態で休止状態に移行しました。

Bloggerのナビゲータ「次の投稿-ホーム-前の投稿」の並び順に違和感を感じたので左右を交換

イントロダクション

Blogger の記事の下部に、次の投稿と前の投稿に移動するナビゲータがあります。

しかしこれ、よくよく並び順を考えると、左側が「次の投稿」で、右側が「前の投稿」って感覚的に逆のように思います。

Blogger:「登録：投稿 ( Atom )」リンクを消す時にハマった罠

記事「Bloggerトップページ改造計画>>更なる快適さと情報の見やすさを求めて...」にて、表示を軽くするためにBloggerの「登録：投稿 ( Atom )」リンクを消しました。

その時にハマった罠があります。

Bloggerトップページ改造計画>>更なる快適さと情報の見やすさを求めて...

最近もいろいろとこのブログが見やすくなるようにと、いろいろな改造を施してきました。

2014年5月3日土曜日

HydraVision を使ってみてわかったこと:壁紙は各デスクトップごとに管理される

HydraVision を実際に使っていてわかったことがあります。

壁紙は各デスクトップごとに管理されます。

HydraVision:ホットキーの割り当ては慎重に! 既存の Windows のホットキーとの重複を避けよう

記事「HydraVision:ホットキーの割り当てでデスクトップの切り替えを手軽に行おう!」では、仮想デスクトップの切り替え操作をホットキーで行えるように設定する方法を紹介しました。

しかしながら、ホットキーの登録には注意事項があります。

HydraVision:ホットキーの割り当てでデスクトップの切り替えを手軽に行おう!

記事「仮想デスクトップを活用して作業を効率化! - HydraVision」では、仮想デスクトップを切り替える方法として、デフォルトで4つの方法があるということを紹介しました。

しかしながら、それらの方法ではデスクトップを切り替えるときにマウスの操作を行わなければならず、多少手間がかかります。

そこで、デスクトップの切り替えの操作をホットキーに登録し、キーボードのキーの組み合わせを押すだけで、デスクトップを切り替えられるように設定してみましょう！

私が HydraVision に出会ったきっかけ

私が HydraVision に出会ったきっかけはたまたま操作したパソコンに HydraVision が入っていたことでした。

HydraVision:休止状態からの復帰時にウィンドウが別のデスクトップと関連付けられてしまう

HydraVision を使っていて、起こった現象です。

HydraVision にて仮想デスクトップを構築し、複数のデスクトップでウィンドウを開いた状態で休止状態に移行しました。

HydraVision:仮想デスクトップの落とし穴-ソフトウェア起動からウィンドウが表示されるまでに仮想デスクトップ間を移動すると危険

HydraVision を使っていて、初期に起こった現象です。

以下の操作を行った結果、立ち上げたはずのウィンドウがどこのデスクトップからも見えなくなりました。

HydraVision を使ってみてわかったこと:クリップボードは各デスクトップごとに管理される

HydraVision を実際に使っていてわかったことがあります。

クリップボードは各デスクトップごとに管理されます。

仮想デスクトップを活用して作業を効率化! - HydraVision

仮想デスクトップ用のソフトウェアはいろいろとありますが、今私が使用しているのは HydraVision というソフトウェアです。

HydraVision は AMD(旧ATI)が提供している仮想デスクトップ構築・管理ソフトウェアです。これは AMD(旧ATI) 製のGPU搭載パソコン向けに提供されています。

仮想デスクトップという言葉で検索すると複数の意味が見つかる

”仮想デスクトップ”という言葉で Google にて検索を行うと、意味の異なる”仮想デスクトップ”の情報が混在して表示されます。

主に以下の 2 つの意味で "仮想デスクトップ" にヒットします。

仮想デスクトップを活用して作業を効率化! - 基礎知識

みなさんは仮想デスクトップという言葉をご存知でしょうか？

Blogger：記事の下部のラベルへ件数を付与するようにした(JavaScript編)

イントロダクション

記事「Blogger：記事の下部のラベルへラベルの件数を付与するようにしたかったが失敗した(テンプレートのHTML編集編)」では、記事の下部のラベルへ件数を付与するようにしようとしたのですが、失敗しました。

今度は JavaScript で記事の下部のラベルへ件数を付与するようにしました。

SyntaxHighlighterで装飾したソースコードを Blogger のエディタで編集するときの注意事項

以下のSyntaxHighlighterで装飾したソースコード(<pre>タグ内にコードを記載）を Blogger のエディタで編集するとします。

Blogger：記事の下部のラベルへラベルの件数を付与するようにしたかったが失敗した(テンプレートのHTML編集編)

イントロダクション

Bloggerの全ラベル表示機能では、ラベル名の後にそのラベルが付与された記事が何件あるのかを表示してくれます。

Bloggerの全ラベル表示機能

その件数表示機能を記事の下部に表示される、その記事に付与したラベルの一覧表示部にも適用したいと思い、Blogger をカスタマイズしてみました。

Blogger：記事のラベルを記事の下部だけではなく上部にも表示できるようにした

イントロダクション

Blogger の記事にラベルを付与することで、同じラベルを付与したページを一覧で表示することができます。
それと同時に、その記事がどういったキーワードを基にして書かれているのかを、読者が把握できるようにする役割もあります。

2014年5月2日金曜日

Windows Vista で起動時間231時間突破記念書き込み

私のメインノートPC(VAIO パーソナルコンピューター type F VGN-FW92DS)の今回の連続起動時間は 231 時間となり、過去の記録を更新し、現時点のベスト記録となりました。

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

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

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

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

SyntaxHighlighter(3.x)で装飾されたソースコードを装飾ごとコピーし、Excel に張り付けて成形する

記事「SyntaxHighlighter(3.x)で装飾されたソースコードを装飾ごとコピーする：Excel編」にて、SyntaxHighlighter(3.x系)で装飾された Web ページ上のソースコードを、装飾も含めてコピーして、Excel へ貼り付けた結果を紹介しました。

その時に、単純に Excel に張り付けただけでは表示が崩れてしまったので、その時に行った表示を成形する方法(5ステップ)を紹介します。

SyntaxHighlighter(3.x)で装飾されたソースコードを装飾ごとコピーする：PowerPoint編

記事「SyntaxHighlighterで装飾されたソースコードを簡単にコピーする方法 (3.x系)」では、SyntaxHighlighter(3.x系)で装飾された Web ページ上のソースコードを、ソースコードとして利用できる形で簡単にコピーする方法を紹介しました。

今回は、SyntaxHighlighter(3.x系)で装飾された Web ページ上のソースコードを、装飾も含めてコピーして、各アプリケーションへ貼り付けるとどうなるかを紹介したいと思います。
今回は Microsoft PowerPoint 2010 に対して貼り付けを行います。

SyntaxHighlighter(3.x)で装飾されたソースコードを装飾ごとコピーする：Excel編

記事「SyntaxHighlighterで装飾されたソースコードを簡単にコピーする方法 (3.x系)」では、SyntaxHighlighter(3.x系)で装飾された Web ページ上のソースコードを、ソースコードとして利用できる形で簡単にコピーする方法を紹介しました。

今回は、SyntaxHighlighter(3.x系)で装飾された Web ページ上のソースコードを、装飾も含めてコピーして、各アプリケーションへ貼り付けるとどうなるかを紹介したいと思います。
今回は Microsoft Excel 2010 に対して貼り付けを行います。

SyntaxHighlighter(3.x)で装飾されたソースコードを装飾ごとコピーする：Word編

記事「SyntaxHighlighterで装飾されたソースコードを簡単にコピーする方法 (3.x系)」では、SyntaxHighlighter(3.x系)で装飾された Web ページ上のソースコードを、ソースコードとして利用できる形で簡単にコピーする方法を紹介しました。

今回は、SyntaxHighlighter(3.x系)で装飾された Web ページ上のソースコードを、装飾も含めてコピーして、各アプリケーションへ貼り付けるとどうなるかを紹介したいと思います。
今回は Microsoft Word 2010 に対して貼り付けを行います。

SyntaxHighlighter(3.x)で装飾されたソースコードを装飾ごとコピーする：Blogger編

記事「SyntaxHighlighterで装飾されたソースコードを簡単にコピーする方法 (3.x系)」では、SyntaxHighlighter(3.x系)で装飾された Web ページ上のソースコードを、ソースコードとして利用できる形で簡単にコピーする方法を紹介しました。

今回は、SyntaxHighlighter(3.x系)で装飾された Web ページ上のソースコードを、装飾も含めてコピーして、各アプリケーションへ貼り付けるとどうなるかを紹介したいと思います。
今回は Blogger に対して貼り付けを行います。

Bloggerのエディタで文字の配置が動かなくなった時の対処法

Blogger のエディタで文章を書いているとき、文字の配置を左寄せ以外の中央寄せや右寄せにしたい場合があります。

LAN内のパソコン間の通信速度をWindows標準の機能で測定する方法：FTPを使用する!

はじめに

パソコンを快適に使用するうえで近年重要になってきているのはネットワークの通信速度です。通信速度が早ければ早いほど、インターネット上のWebページを閲覧したり、いろいろなファイルをダウンロードするのが早くなり、快適に操作することができます。

また、最近は企業内や家庭内にファイルサーバを置いて、そこに各種ファイルを保存しておき、LAN内のパソコンから参照するといった使い方も非常に多くなってきています。

IE脆弱性修正プログラム配布スタート-XPにも対応するMSの神対応(2)

記事「IE脆弱性修正プログラム配布スタート-XPにも対応するMSの神対応」で紹介した Internet Explorer の脆弱性修正プログラムですが、私の Windows Vista にも来ていました!!

IE脆弱性修正プログラム配布スタート-XPにも対応するMSの神対応

ここ数日ほど世間を騒がせていた Internet Explorer の脆弱性問題に対して、ついに Microsoft は修正プログラムの配布をスタートするようです。(*1)

Windows Vista で起動時間200時間突破記念書き込み

私のメインノートPC(VAIO パーソナルコンピューター type F VGN-FW92DS)で、タスクマネージャで起動時間を確認したら200時間を突破していました。

の公開を開始しました!