JavaScript 今見てるWebサイトのURLからQRコードを作成するブックマークレット

今見てるWebサイトのURLからQRコードを作成するブックマークレットを見よう見まねで書いてみました。

Windows 7にInternet Explorer 10 Release Preview版をインストールしてみた～注意点あるよ！

常日頃Windows8を使っていますが、検証が必要になったのでWindows7にIE10 Release Preview版をインストールしてみました。
インストール方法は検索していただくとして、インストール時の注意点についてメモ。

ところで、Release Previewってなに？

たまに製品名にCPやRP、DPなどがついている場合があります。
あまりマイクロソフト製品に詳しくないのでWindows8のWikiPedia_※等でこれら用語？を調べました。間違い等がありましたら、是非ご指摘ください。
なお、下記リストはWindows8の開発～製品版リリースまで時系列にしています。

• 2011/09 Developer Preview公開 ハードウェア・ソフトウェア開発者向け。
  ドライバなどの開発はこの時期から行われているのでしょうかね？
  メーカさん、お疲れ様ですm(_ _)m
• 2012/02 Consumer Preview公開 DPから改良が加わり、一般ユーザを対象とする版。
• 2012/06 Release Preview公開製品として正式公開される版。
  私はこの版から少しづつ触っていました。
  RC版（Release Candidate）と同じでいいのかな？
• 2012/08 RTM公開
  量産体制に入った版で、ほぼ製品版と同じ（とか）。
  Release To Manufacturingの略であって、Remember The Milkではありません。
• 2012/10 GA公開一般ユーザが入手できる版。
  General Availabilityの略です。

上記を見れば今回のIE10 RP版はまだテスト版である事が分かり、今現在も開発が進んでいる事が何となくですが分かります。
※WikiPediaの情報が必ずしも正しいとは限りませんので、参考程度だと思ってください。

Windows7向けIE10RP版　インストール前にQ&Aを読んでおこう

CP版やRP版（RC版？）などをむやみやたらにインストールすると痛い目にあう可能性があります（実体験）。特にInternet ExplorerやFirefoxで・・・
痛い目に合う前にWindows7向けIE10 RP版のQ&Aを読んでみました。
いくつか気になる点がありましたので、メモしておきます。

• RP版はテスト版であり、最終製品版ではない
• ゆえに、ユーザの期待通りに動作しない事がある
• RP版はトラブルシューティングが自分で実行できる方向けである
• IE9と並行使用はできない（IE10RP版はIE9を上書きインストールするため）
• Windows7 Service Pack 1が必須

Web開発従事者だと「事前に検証をするのでIE10でなければならない！」という場合がありますが、興味本位で試したい！という方はいつでも元の状態に戻せるよう事前にWindows7標準の「バックアップと復元」のバックアップを行ってからインストールしましょう。

IE10 RP版インストール時のエラー内容

Windows7 Home Basic 32bitにIE10をインストールした際に遭遇した、または遭遇する可能性のあるエラー内容を書いておきます。

インストール時に「オペレーティングシステムがサポートされていません」のエラーがでる

Windows7にインストールを行う場合、下記エラーがでる場合があります。

---

オペレーティングシステムがサポートされていません。
このバージョンのInternet Explorerのセットアップでは、ご使用のバージョンのWindowsはサポートされていません。ご使用中のWindowsオペレーティングシステム向けに開発されたバージョンのInternet Explorerを、http://go.microsoft.com/fwlink/?LinkId=242596からダウンロードしてください。

---

これは

• 間違って32bit版に64bit版をインストールしようとしている（またはその逆）
• Windows7にService Pack 1（SP1）が当たっていない

などが考えられます。
お恥ずかしい限りですが、どちらにも引っかかってしまいましたorz

その他：インストールに失敗

MSサポートを見ていたところ、インストール中に「自動的に必須コンポーネントもインストール」するそうですが、一部に障害があるとインストールプロセスが停止するそうです。
この現象はまだ遭遇していませんが、もしそうなった場合は下記リンクにアクセスして対処しましょう。

Windows 7 でインストールに失敗する、Internet Explorer 10 Release Preview 用の必須更新プログラムを取得する方法

Windows7向けIE10RP版ダウンロードサイト

http://windows.microsoft.com/ja-jp/internet-explorer/downloads/ie-10/worldwide-languages

余談：検証時にWindows8のクライアントHyper-Vが役立つね～

みなさんも使っていると思いますが、Windows8 ProではクライアントHyper-Vを使用することができます。
Hyper-Vってなんですか？という方は下記記事を読んでください。

Windows8 クライアントHyper-Vを有効にする手順

マイクロソフトTechnetサブスクリプションを契約している方などは「Windows7をダウンロード→Hyper-V上にインストール→IE10 RP版をインストール」することで今回のような構成を簡単に構築できます。
VMWareやVirtualBoxをわざわざインストールする必要がない！だけでもWindows8 Proを購入してよかったと思っています。

Google+の記事をRSSとして取得するWebサービスを導入してみた

Google+にブログ記事を共有していますが、それだけでなくメモ代わりとしても使っています。
ブログにその内容をのせられないかな～と思い、そうだ！RSS使えばいいじゃん！と思ったまではよかった・・・
Google+はRSSサービスを停止していたんですねorz
そこで、外部Webサービスを利用することで実現しましたのでご紹介。

Google+のRSS化は外部サービスde実現！

調べてみたところ、京都マイプレスさんの記事にやり方が掲載されていたので参考にさせてもらいました。

京都マイプレス

やり方は簡単！

1. URLを準備
   http://gplus.slfeed.net/RSS2/Google+のID ※Web Programmer「Mayuko Nishi」さんが制作されたサービスです
2. BloggerのRSSガジェットにURLを登録
3. 配置
   

Webサービス停止も視野にいれましょう

今回の内容は、Web Programmer「Mayuko Nishi」さんが制作されたサービスです。
Mayuko Nishiさん、開発お疲れ様でした＆ありがとうございますm(_ _)m
外部Webサービスを利用する際、いつも気をつけているのは開発者さんの諸事情でサービスが停止される可能性です。
その点は注意して利用することをオススメします。
そんなことがないよう、末永くサービスを提供していただけると非常に嬉しいです。

余談：RSSサービスが停止されたことを考えてみた

これだけRSSサービスが認知されているのにGoogleはなぜRSSサービスを停止したんだろ？と考えてみました。
予想ですが、RSSサービスの本来の使い方がされていないからなのかなと思いました。
RSSサービスって、Webサイトの更新をいち早く通知できるだと私は思っています。
それ以外の効果もたくさんありますが・・・
本来の使い方ではない＝誤った使い方について。
みなさんは、2chまとめサイトってご存知ですか？
2chまとめサイト全般は他人のブログ記事をRSSで取得し、あたかも自分の記事※のように更新しています。
※全部じゃないけど・・・
これは自動化or半自動化してますので、メンテナンス量が少ない、かつ、多くのユーザを呼び込むことが可能※です。
※だって、様々な情報を定点観察すればいいのでユーザは楽チンですから。
しかも、アフィリエイトや広告などを使って収益化を図っている。
これらの行為は他人のふんどしで相撲をとるってやつです。
Googleはこういった行為を排除したいからRSSサービスを停止したんじゃないかな？と思いました。
それか、RSSはもう古い技術だからいらないんじゃね？と思ったか・・・
できればGoogle+のRSSサービス、復活してほしいな～

Web開発 訪問数・ページビュー数を伸ばすためのSEO下準備

Webサイトやブログの開発を行う上で、リリース後の訪問数やページビュー数は気になるもの。
検索結果やPV数は時間がかかるので、できるだけ早く準備した方がいいです。
リリース直前にやるべき内容・下準備をまとめておきます。
特にBingのサイト登録って忘れちゃうんですよね・・・
なお、本記事はよくあるSEOの内容なので初心者向けだと思ってください。

下準備

1. 検索サイトへWebサイト登録
2. RSSフィードの準備
3. Twitterの準備
4. Google Analyticsの登録
5. 広告の準備（個人向け）

１．検索サイトへWebサイト登録

以前はYahoo・バイドゥもウェブマスターツールを提供していましたが、現在ではGoogle、Bingの2個のみ。

Google ウェブマスターツール

Bing ウェブマスターツール

サイトを認識させるには、

• XMLファイルの設置
• METAタグの挿入
• DNSにCNAMEを追加
• すでにあるGoogle Analyticsアカウントを使う（Googleウェブマスターツールのみ）

があります。
サイトの認証はすぐにできますが、クローラが巡回してくるまで時間がかかるので数日～数週間は我慢しましょう。

２．RSSフィードの準備

Bloggerやアメーバ、FC2、WordPressなど無料のブログシステムを利用していれば最初からRSSフィードが提供されていると思います。
提供されていない場合は、無料のRSSフィードサービスを利用しましょう。
FeedBurnerもpage2rssもtwitterへ自動プッシュする機能があるので便利です！

Google FeedBurner

page2rss

 

３．Twitterの準備

Twitterを使うと何か発言しないといけないのかな？とずっと思っていましたが、今はRSSフィードと同じようにユーザに通知するツールとして考えています。
RTがあるかもしれないので、チェッカーを準備した方がいいかもしれませんが・・・

twitter

Twitterの使い方（ツイナビ）

４．Google Analyticsの準備

サイト訪問者や平均PV数、直帰率、ユーザ環境、ロイヤリティなどをチェックするにはGoogle Analytics一択でしょう。
それ以外に忍者ツールズやFC2アクセス解析などもあります。
最初の頃はGoogle Analyticsの各種データの読み方があまり分かりませんでしたが、最近はちょっとづつ分かって来ました。
よくわからない方はアクセス解析に関する解説ページを見てみましょう。

Google Analytics

アクセス解析の使い方（トータルWebさん）

５．広告の準備（個人向け）

個人Webサイト・ブログであれば、広告を準備した方がいいと思います。
サイトの内容にもよりますが、お小遣い程度は稼げます。
間違っても「アフェリエイトで月10万円稼ぐ！」などを間に受けない方がいいでしょう。
なぜかというと、個人ブログの月間訪問数・PV数などたかが知れているので月1000円稼ぐだけでもかなり大変です！
ソースは私の経験上と、Garbagenews.comさんの記事が書いた海外ブロガーの現状データを見たからです。
月間数千、数万PVの人気記事が出て、サイトが認知されれば話は別だと思います。

海外の平均アクセス数

おススメは下記の2つ。

クリック保証（報酬）型のGoogle Adsense

高料率が期待できる成果報酬型のValueCommerce

Google Adsense

 
効果的な広告について、Google Adsenseのヘルプサイトがあるので一読しておくといいと思います。

目を引く広告スタイル

---

もっとやるべきことがあるでしょうが、下準備では上記で十分かなと思っています。
下準備さえできれば後は

ユーザ視点の魅力的な記事をかくこと

検索されやすい言葉を選んで記事を作る

定期的に記事を書く

記事がなければ、OKWaveなど質問サイトでネタを探す

などをおススメします。

Blogger タイトル横にガジェットを簡単配置する

Bloggerのタイトル横にガジェットを配置したいと思い、いろいろ調べてましたがBlogger記事を多く投稿されているクリボウさんの設置方法が一番簡単そうだったので紹介＆やり方をメモしておきます。

タイトル横にガジェットを配置する方法

レイアウトからガジェットを配置できればよかったんですが、配置できるようにするにはちょっと時間がかかりそうだったので、HTMLの編集機能を使います。

1. テンプレート→HTMLの編集を選択
2. ウィジェットのテンプレートを展開にチェック
3. <!--No header image -->配下の<h1 class=’title’>を探す
   
4. 表示させたい内容をh1タグ内の<b:include name='title'/>の前後どちらかに貼り付ける

配置したHTMLと配置結果はこんな感じ！

配置したHTMLは下記の通りです。

---

※2012.01.27 width:400pxをwidth:350pxへ変更しました。

---

<!--social_marks_start—>
<div style='float: right; width: 350px;'>
<a href='http://feeds.feedburner.com/blogspot/KhQzt' target='_blank'>
<img alt='RSS' border='0' height='26' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfZz-LY9vn1dbCmGXjke3nA6M5DRg_ETxNVDHWhFOfWskxjZz4CfOnuL48ub5mLlMHdAzAfvQNfz1MWwpoZvy_zyOzFMjC3NeODiyhyphenhyphenwuqXGBzrh8dyStNU7yBhCmBsOoJvbcMtr4ecNT_/s1600/1324252443_RSS_02.png' style='background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px' title='RSS' width='26'/>
</a>
<a href='https://twitter.com/#!/nasunotw' target='_blank'>
<img alt='twitter' border='0' height='26' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBU2eu_h4AHVRqKW8nPHNsOy-edMFHneYK1oQNw10VKm5jjp0On-9t7NFraDqbbLDdSvN8BLpkkPvuURPQE8NF4OaNuJrWa0AycfZtUfCi5lv6WC0WsGk17icHC_GypZA7moQz89enhFHa/s1600/1324252430_twitter_02.png' style='background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px' title='twitter' width='26'/>
</a>
<a href='https://plus.google.com/118129099057547285261' target='_blank'>
<img height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuNqYtIQTd8eGZghN_Zt72-gb18giyfSdGkFVrfB50yrjx9e8pVRZpMdOgHko6mdv31j4lvENg2i0aEJMBvaMFz8JqJzm96Ezq9p_6ryBPZMGQJpN7mTiW6sbeMPJrCQ1l0_1ZtzF-qI84/s1600/gplus.png' style='margin-right: 5px;' width='24'/>
</a>
</div>
<!--social_marks_end—>

配置した結果はこんな感じです。

モバイル版も考慮しましょう！

※2012.01.27 追記

モバイル版を考慮してませんでした！すみません

---

<div style='float: right; width: 400px;'>にしてしまうと、HTC DesireHD & Dolphin Brawser HDでみるとガジェットが左に行きすぎています。

見た目が恐ろしく悪いので、先ほどwidth:400pxをwidth: 350pxに変更しました。
モバイル用CSSで制御してもいいと思います。

---

ソーシャルメディアのアイコン配置は人それぞれですが、私はユーザがWebページを見て「あ、登録してるんだ！」と気づいてもらうには画面上部に配置した方が効果的かなと思っています。

窓の杜-大賞2011-でVVAULTが銅賞獲得＆プレゼントがあたった！

先日、窓の杜-大賞2011-の結果が発表されました。

投票したオレガさんのVVAULTは見事銅賞を受賞！おめでとうございます。

それだけでも嬉しいんですが、実は読者プレゼントに当たってしまいました！

せっかくのいただきものですので、プレゼント内容をメモしておきます。

銅賞を獲得した仮想ストレージソフトウェア「VVAULT」

私が書いた記事ですが、VVAULTの使用感などがありますので興味があるかは一度覗いてみてください。

• ストレージ仮想化「vVault」使ってみました
• 仮想ストレージ「VVAULT」を2.1.0にバージョンアップしてみた
• VVAULTとWindows Serverバックアップを使用する時の注意事項※修正しました

当たったプレゼント

当たったプレゼントは２点。

• Razor 構文とASP.NET Webページ
• HTML5ロゴが入ったポーチ

この場を借りて、改めてお礼申し上げます。

Microsoftさん、本当に ありがとうございます。

Razor 構文とASP.NET Webページ

本書は、ASP.NETデベロッパーセンターのスキルアップ用としてWebページ掲載されている内容と同じようです。

Microsoft社の方で製本した感じで、書店で売っているような質感ではありません。

人によってはWeb上で見るから本いらない！という人が多いかもしれませんが、私は本を見て、探して、覚える質なので嬉しいですね。

本書の内容ですが、ASP.NETはほとんど初心者の私。

クラシックASPの開発はかなりしましたので、移行するいいきっかけになりそうです。

このお正月でちょっと触ってみようと思っています。

同じように思っている方は、下記URLからダウンロードしてはいかがですか？

ダウンロード先：Razor 構文と ASP.NET Web ページ

HTML5ロゴが入ったポーチ

HTML5ロゴが入ったポーチは、モバイル用マウスが１個入るぐらいの大きさ。

ちょうどMicrosoft Wireless Mobile Mouse 3500があるので比較の写真を撮ってみました。

ちょうどピッタリ！

散乱している小物を入れてもいいかもしれません。

　

---

こういったプレゼント企画、今年3度目も当たりました！

生まれて初めての快挙！さて、来年はどうなるかな・・・

【Joshinは平成20/22年度製品安全対策優良企業 連続受賞・プライバシーマーク取得企業】ワイヤ... 価格：1,980円（税込、送料別）

余談：Razor構文って何？

Razor構文を知らなかったので自分なりに調べてみました。

@ITのVB Razor構文 基礎文法 総まとめを見るとこう書いています。

Razor構文（Razor syntax）とは、ASP.NET MVCや（WebMatrixで採用されている）ASP.NET WebページなどのWeb開発技術用のビュー・エンジンの1つである「Razorビュー・エンジン」向けの文法のこと

構文はクラシックASPに近いそうで、クラシックASPをずっと使っていた自分には書きやすい？かもしれませんね。

bloggerに自動readmore(もっと読む)を導入して読み込み速度を上げる

このブログですが、最近画像を多用しているせいかトップページの読み込み速度が低下していることに気が付きました。
そこで、一番アクセスがあるトップページの読み込み速度を改善すべく、自動でreadmoreをつけるスクリプトを導入してみました。
導入方法や導入前後でどの程度速度が変わってくるかをメモしておきます。

---

2012.03.02 ページサイズを半減する方法を追記しました。

修正前の状態

Googleウェブマスターツールのサイトパフォーマンスを見ると現在は5sec前後です。
当然、トップページに表示される記事の文字数・画像によって変化はありますが、結構重い・・・

自動readmoreを導入する

トップページの読み込み速度を向上させるため、まずは自動readmoreを導入してみました。
※本当はブログパーツやFlashを使ったアフェリエイトパーツを削除するのが一番効くんでしょうけど・・・
自動readmoreを導入するにあたって、ダルシーさんが書いているダルシーの日記：BloggerでReadMoreを自動でつけるを参考にしています。
ダルシーさん、ナイス記事ありがとう～！！！
1.</head>タグの直前に下記スクリプトを挿入
※ダルシーさんは</head>の後に！と書かれていましたが、XHTMLのお作法にのっとって<script>は<head>内に挿入してみました。

   1: <script type='text/javascript'>

   2: /* readmore */

   3: var thumbnail_mode = "no-float" ;

   4: summary_noimg = 200;

   5: summary_img = 120;

   6: img_thumb_height = 200;

   7: img_thumb_width = 200;

   8: </script>

   9: <script type='text/javascript'>

  10: //<![CDATA[

  11: function removeHtmlTag(strx,chop){

  12: if(strx.indexOf("<")!=-1)

  13: {

  14: var s = strx.split("<");

  15: for(var i=0;i<s.length;i++){

  16: if(s[i].indexOf(">")!=-1){

  17: s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);

  18: }

  19: }

  20: strx = s.join("");

  21: }

  22: chop = (chop < strx.length-1) ? chop : strx.length-2;

  23: while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;

  24: strx = strx.substring(0,chop-1);

  25: return strx+'...';

  26: }

  27:  

  28: function createSummaryAndThumb(pID){

  29: var div = document.getElementById(pID);

  30: var imgtag = "";

  31: var img = div.getElementsByTagName("img");

  32: var summ = summary_noimg;

  33: if(img.length>=1) {

  34: imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';

  35: summ = summary_img;

  36: }

  37:  

  38: var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

  39: div.innerHTML = summary;

  40: }

  41:  

  42: //]]>

  43: /* readmore end */

  44: </script>

2.<data:post.body/>を検索、2つ目の方に下記コードを置換
私が使っているテンプレートには<data:post.body/>は2ヶ所ありました。
そのうち、2つ目の<data:post.body/>を下記コードに置換します。

   1: <!--readmore-->

   2: <b:if cond='data:blog.pageType == &quot;static_page&quot;'>

   3:  <br/>

   4:  <data:post.body/>

   5: <b:else/>

   6:  <b:if cond='data:blog.pageType != &quot;item&quot;'>

   7:   <div expr:id='&quot;summary&quot; + data:post.id'>

   8:    <data:post.body/>

   9:   </div>

  10:   <script type='text/javascript'>

  11:    createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);

  12:   </script>

  13:   <span class='rmlink' style='float:right;padding-top:20px;'>

  14:    <a expr:href='data:post.url'>続きを読む&gt;&gt;</a>

  15:  　</span>

  16: </b:if>

  17: <!--readmore end-->

どの程度高速したかをチェック！

サイトパフォーマンス計測のWebサービス「pingdom:full page test」を使って、どの程度速くなったかを確認してみました。
結果、4.71sec→4.16secと0.5sec速くなりました。
どっちにしても4secかかっている時点で遅いといえば遅い・・・

ページサイズを改善したい方は

※2012.03.02 追記

トップページのページサイズを半減する方法を見つけました。

気になる方は下記記事を見てくださいね。

Blogger 自動ReadMoreを使いつつページサイズを改善する方法

---

サイトパフォーマンスを向上させる対策としては、まずまずの結果。
後はブログパーツなどを見直して、今度は4sec未満を目標にしたいと思います。
余談ですが、www.Apple.comはページサイズが420KB程度で3.5sec前後。
このくらいのパフォーマンスまでもっていきたいな～

bloggerの記事とTwitterを連携させてPV数を向上させよう！

このブログ記事をTwitterと連携させる方法がないか知らべてみました。

勘違いしていたのは、bloggerとTwitterを連携させるのではなく、bloggerのFeedを管理するFeedBurnerとTwitterを連携させる仕様になっています。

FeedBurnerからTwitterと連携する方法

1. まずはFeedBurnerにログイン
2. 顧客支援タブ→Socializeをクリック
3. Add a Twitter Accountボタンをクリックし、Twitterとアプリ連携の処理を実施
4. Socialize機能をActivateし、保存する

ん？連携されないよ・・・それは時間がかかるものです

登録後、すぐには連携できないようです。

12月12日に連携を開始させましたが、開始直後はうんともすんとも動きがない・・・

連携が失敗したのかと思い、再度Twitterと連携させてもだめ・・・

2日ほど経過したところで、自動的に連携し始めました。

もし同じような症状になったら、まずは待ってましょう。

それでもダメなら、再度登録しなおした方がいいかもしれません。

余談：ついでに何かできないか・・・Zenbackがあるよ！

その他でPV数を向上させるため何かできないか調べてみました。

すでに導入してみましたが、SixApart社が個人ブロガー向けソーシャルメディアへの記事シェアを行うブログパーツZenbackを使っています。

自分が思う限りの利点はこんな感じでしょうか。

• パーツを使っているブログに自分の記事のリンクがシェアされ、うまくいけばPVが向上
• 検索結果にZenback経由で自分の記事が表示される

個人ユーザは上記利点が得られ、Zenbackは広告で儲けることができるのでWin-Winの関係が構築されるのかなと・・・

最初はbloggerのHTMLを直接さわってFacebookの「いいねボタン」を表示していましたが、Zenbackの方が簡単に導入できます。

マークダウン表記でHTMLタグをすっきりさせる

HTMLはマークアップ言語ですが、入力するストレスが大きい＆内容の見た目が非常に醜い！
もっとシンプルにしたのがマークダウン表記というものです。

ブラウザ上の表示は同じですが、マークアップとマークダウンの各表記方法の違いはこんなかんじ。

1. マークアップでの記述
   <h1>ここは見出し</h1>
   <strong>ああああ</strong>いいいい
2. マークダウンでの記述
   #ここは見出し
   **ああああ**いいいい

マークダウン表記を使用するにはマークダウン表記をHTMLタグへ変換するシステムとCSSの設定が必須ですが、ブログシステムなど記事を入力するストレス軽減が図れます。
これってかなり楽なはずです。
見出しのクラス名なんだっけ？とか関係ないですからね。

CMSを利用されている人やWebシステムで入力システムを開発されている人は一度検討してみてはどうですか？

もっと詳しい内容はa-blogcmsさんの記事を参考にしてください。

2011.10.22 Update!!!
Markdownで記述した内容をHTMLへ変換するWebサイトがあったので追記しておきます。

Markdown:Dingus

ASPから直接WSHファイルを実行する

asp上からシェルスクリプトを実行したときに役立ちそうな記事があったのでメモ。
デスクトップ上・Web上から手動実行するなど、プログラムを複数作らなくても済むので有効かなと。
こう考えると、aspとかやめてjavaやpythonなどに移行した方が効率いいな・・・

★Windows Script Host入門　第4回　WScriptオブジェクトの詳細（2）

http://www.atmarkit.co.jp/fwin2k/operation/wsh04/wsh04_02.html

overflowでfloatの問題を解決

colissさんのページでoverflowでfloatの問題を解決する記事があったのでメモ。

floatを使った際にwidthとheightがうまくできずに苦しんだことがあったので、非常に助かります。

パーマリンクを制御するクラス「SWFAddress」

Flashを使っていると便利な点もありますが、不便な点も多々あります。

• ブックマークができない
• ブラウザのBack・Forward・Reloadの対応が難しい

今まではブラウザのBack・Forwardを制御する外部クラスstatemanagerを使ってましたが、これよりも使い勝手のいいSWFAddressを教えてもらいました。

SWFObjectを開発された方がSWFAddressを作っているとか。

Google ChromeのMusic Mixerでも使われているくらいなので、出来は非常にいいはずです。

使い方はこちらのサンプルページを参照しましょう。

軽量モーダルウィンドウ「jqModal」

jQueryで使用できる軽量モーダルウィンドウ「jqModal」、なかなかいいですね。

AJAXも使え非常に楽ちんですが、IEで問題が発生しました。

通常は背景が黒（半透明）、その上にモーダルウィンドウが表示されます。

しかし、IEの場合だと背景の下にモーダルウィンドウが出てしまいます。

今のところ、改造・修正が困難なため、背景のCSSを修正して対応しています。

.jqmOverlay{display:none;}

 なんかいい手ないかな～

Webデザインをする際の4原則

違うことを調べている最中に見つけたページがあったのでメモ。

デザインを勉強したことがない人でもデザインできるようになるかもしれない4つの基本原則

jQueryを高速に使うCSS セレクタの書き方

jQueryを高速に使うCSSセレクタの書き方という記事を見つけました。

てっく煮ブログ　jQuery を高速に使う CSS セレクタの書き方 

4番目の「途中までの結果を再利用する」のキャッシュ作戦のところは初めて知ったので助かりました。

$()の第2引数は探す基点を指定することができるので、今まで非効率な記述が一気に簡易に記述することができました。

いや～まだまだ知らない事ばかりだな～

FF上でbuttonタグの処理が激烈に遅い

jQueryを使えば使うほど非常に便利だな～と思わされている今日この頃です。

すでに修正したんですが、Firefox上でbuttonタグをクリックすると処理が激烈に遅い事案がありました。

処理内容に依存しますが、CPUが30～40%程度使用し、結果が反映されるまで約0.5～1.0秒程度かかります。
※時間はfirebugで計測、体感的に1クッションおいて表示され、イラッとします。

おもしろいことに、IE8だとサクサク動作します。
※chromeなど他ブラウザは試してません。

Firefoxのバージョンは3.6.3、jQueryは1.4.4。
記述を変更したり、class属性からid属性に変えたりしてパフォーマンスを上げようと試みましたが意味なし。
結局、buttonタグをaタグに変更することで改善され、現在はサクサク動作します。
もちろん、aタグをボタンらしくスタイルを変更してます。

jQueryのバグなのか分かりませんが、buttonタグを使って処理が重い場合は試してみてください。

キーイベントの取得

キーイベントと何らかのキーイベント後にスキップするやり方を紹介しているブログがあったのでメモ。 

ｅｎｔｅｒで次のform部品にフォーカスを当てる

ID名とCLASS名の取得

★サンプル
<div id="aaa">
<div id="bbb">
<p class="ccc">
<button class="ddd">クリック</button>
</p>
</div>
</div>

★buttonをクリックし、id aaaを取得する
$(this).parent().parent().parent().attr('id');
thisから3個上のdivをparent()で指定し、attrで属性値をとる。

クラスも同じように指定することができます。

Web:: XHTMLでの特殊文字とアンカー

XHTMLで作成したコンテンツのアクセシビリティを確認していたところ、マイナスの評価が・・・

よく見てみると、大多数のマイナス要因がリンクのアンパサンドの記述

XHTMLの仕様を見てみたところ、ソース上はアンパサンドを&と記述しないとダメなようです。

知らんがな、そんなの・・・というわけにはいかないので修正。

アンカーはaタグのname属性が×なので、id属性で指定するそうです。
簡単ですが、下のhogeをクリックするとdivのところに移動します。
<a href="#hoge">hoge</a>
<div id="hoge">aaa</a>

その他にも記述する際の注意点が何個かあったので、詳しく調べたいかたはこちらのページを参考にしてはどうでしょうか？

jQuery:: テーブル操作

jQueryを使ったテーブル操作方法をメモ。

★jQueryでテーブル操作（行追加、削除）
ゆうの音（ね）さんのページが参考になります。

★jQueryでテーブルの2行目のTDの値を取得したい
$("tbody#xxx tr:eq(1) td").text() 
eq以外にgl、ltなどがあります。
詳しくは、こちらのページを参照しましょう。

このやり方だと、いちいちtrにidを指定することなくデータの取得ができます。
追加、削除などするときに楽ちん！