パズルの一枚の画像に依るブログ上自動生成

屡参照させていただく ホームページを作る人のネタ帳 の運営者Yamada氏が他にも運営されている海外発情報発信の為のブログ ITquality の2008年4月10日の記事 37の衝撃的jQueryプラグイン での紹介は noupe.com の2008年4月9日の記事 37 More Shocking jQuery Plugins で、当記事中にて紹介されている37のjQueryプラグインの内の一つがBen Nadel氏によるサイト Kinky Solutions 中の記事 jQuery Demo: Creating A Sliding Image Puzzle Plug-In にて公開されている、ページ上に配置した画像にスクリプトを適用すると画像が指定のサイズで分割され、 その内の一ピースが欠けた部分に隣り合うピースが移動可能となることにより構成される、 街でよく見かけるパズルの体裁を取らせることが出来るプラグインです。

当ブログ上でも実装してみた処、巧く動作しましたので、 オリジナルの画像で本アーティクル上に掲載しました。
パズルの正解画面でもある サンプル画像のパズル化する前のオリジナル元画像を下に示します。
高飛び込み
高飛び込み 此処はうさ犬の里、裏山の不思議の森の池

[続きを読む]をクリックすると、 上記元画像が縦に3分割、横に4分割されたスライドパズルになって表示されます。 空白の存在する列の任意のピースをクリックすると、 該当するピースがスライドして移動します。 残念乍、正解画像を得られても特に変化の無い点は如何かご寛恕いただきたいと思います。
投稿日:
カテゴリー: jQuery

仮想化のIT業界に与えるインパクト

未だ不勉強にて仮想化と聞けばただ一台のパソコンを複数台とみて 様々なOSを走らせられることだけだとの思い込みは身の不覚、 流行にも疎く、いくら空気の読めずとも流石にこれだけ仮想化が騒がれて、更には ITproに於ける海外情勢を読み解くの第39回は2008年5月22日の 仮想化は最重要のインフラ技術,ベンダー依存は危険 が如き記事を目にしては、多少なりとも触れざるを得ない事項であると思い至らせしめられ、 扨そうとなり世の中を其の気になり見回して見れば、 抔、有意義なサイトは幾つも見つかるうちに、 就中ZDNet Japanの2007年02月23日の記事は 「仮想化」とは何か? そのメリットは?(日本語字幕版) では
VMwareで製品担当シニアディレクターを務めるDan Chu氏が、仮想化技術の概要と、そのメリットについて解説
と引用させていただけば専門家の動画による解説が閲覧出来、 4分を少し余る程とコンパクトに纏まった音声字幕付きのムービーであることによるわかり易さに加え、 例えば、実際に使用されるサーバーの能力は5~10%であるとか、 サーバー800台は60台しか必要でなくなる抔、 圧倒的とも思える程刺激の強い定量的にデータを説明中に提示され、 ROIについての言及も宜成る哉と得心せしめられざるを得ない、 と云う具合に仮想化のIT業界に与えるインパクトの強烈さを思い知るに恰好な記事になっているように思います。

今迄看過してきた重要な技術、仮想化に関しては己の迂闊を恥じると共に、 ITに従事する者ならば近い将来必ずや、深くにしろ浅きにしろ 関わりを持たざるを得ない様に感じますので、 何処迄可能かは判然しませんが最低限のフォローは自らに施していく積りではいます。
投稿日:
カテゴリー: IT

電光掲示板風タイトル3

RAFAEL ROZENDAAL 氏によるブラウザのタイトル部分に於けるjavascriptを利用した電光掲示板風動的表示機能の次頁繰り送りの順番になれば、未だ矢張り少し淋しいと云う訳で当記事をエントリーするのは ブログタイトルズームアップ 系の当ブログ内アーティクルと同様の行動特性にて、 今暫くは当ブログの特徴として、 トップ頁にては当該機能の実現されるべく実装しておく様、 カテゴリを前回同様「configuration」としての本アーティクルです。

SEO的に不利益を被ることも無いことが証明済み機能は詳細、一連の 電光掲示板風タイトル 関連アーティクルをご参照いただき、宜しければ貴ブログにもご実装なされてみては如何でしょう。

当ブログではRafaël Rozendaal氏によるソースデータに於いて
// you can fiddle with the patterns here...
なる指定の後に下記39行のパターンを続け、アニメーションを実現しています。

入力に応じて高さの変わるテキストエリア

アルファブロガー、此処では自身をJavaScripterとクレジットの小飼弾氏のブログ 404 Blog Not Found の2008年5月20日の記事 javascript - 勝手に添削 - textareaの高さを自動調節 で紹介されていたのが イラストdeブログ開発記textareaのサイズを入力にあわせて調整するJavaScript にて、当記事ではタイトル通りフォームに於けるテキストエリアの高さが改行や削除に合わせて変化する javascriptを開発公開し、興を惹かれた小飼弾氏が更に使い勝手を良くするべく提案された経緯である様で、 また被紹介記事では早速小飼弾氏の提案を受け入れられた旨、記されています。
小飼弾氏は
Firefox 2, Safari 3, Opera 9で動作確認してあります。
とのみ記されてIEの眼中に無いのは流石ですが一般用にIE7でも問題はない様です。

ブログの投稿編集画面はテキストエリアで構成されていますが、 改行が重なるとスクロールバーの操作が編集画面に加わり煩わしく感じることも多いですから、 様々なブログシステムで上手くアレンジして採用されることが望まれる機能の様に感じます。

百聞は一見に如かず、 [続きを読む]をクリックすると当該テキストエリアが見られる様にしておきました。
初期値は「いろはにほへとちりぬるを」となっていますので、 此れを削除したり、文章追加、改行をすると効果をご覧いただけます。
投稿日:
カテゴリー: javascript

テンプレート変更『紫陽花(3カラム)』

本日当ブログのテンプレートを変更しました。
テンプレート変更はポータル型ブログサイトを利用しての自ブログの運営に於いて、 楽しみである許りならず、利点の一つだと思いますので、 如何に季節感に溢れバラエティに富んだ多くのテンプレートの供給されているかも、 システム選択の重要な要素の一つになる様に感じます。

Web担編集部神野恵美氏の手になる2008年5月23日の下記記事 ファーストサーバ、ブログ用オリジナル・テンプレートの無料ダウンロードサイトを公開 を拝見すれば即ち世には普及するブログシステムに合わせたテンプレートの 数多フリーにて提供されることが容易に思い至りますので、 例えば此の際ブログ提供側の企業体力が他に較べ劣り、供給数が足りない場合、 Movable TypeやWord Press抔、 世に普及するブログシステムと同様のテンプレートAPIを用意しておけば、 フリーで流通するテンプレートを使用出来、企業体力の劣等を補填できる様に思います。

2代目に当るは2008年4月13日より、 本日2008年5月25日迄、下図のデザインを利用していましたが、 2008/3/6~2008/4/13テンプレートデザイン 新年度も暫く経ての黄金週間も過ぎ、竹の子は旬とて炊き込みご飯の腹を満たして、 遠州にても凧と屋台の浜松祭りを過ぎ遣れば、 少し物憂い五月病も有りや無しや、 緩やかなる午後の時間をイメージさせる『カフェタイム(3カラム)』テンプレートにもお役御免と退場いただき、 初夏の香りも漂えど、そろそろ梅雨の始まろうと云う時候、 3代目は『紫陽花(3カラム)』テンプレートに道を譲ることと相成りました。

ブログタイトルズームアップ機能を持たせている都合上、 CSSでは最低限の下記部分を適合化の為修正しています。 其の際font-sizeを削除しているのは IE6での2頁目以降での不具合に因る修正です。
.blogtitle{
  font-size:190%;
  font-weight:bold;
  padding:30px 20px 0 150px;
  text-align:right;
  letter-spacing:0;
  color:#999;
  height:50px;
}
font-size:190%;
padding:30px 20px 0 20px;
height:100px;

Descriptionの不要な折り返しを抑える修正が下記になります。
.description{
  color:#FFF;
  font-size:93%;
  padding:0 20px 0 150px;
  text-align:right;
  letter-spacing:0;
}
padding:0 20px 0 100px;

修正は必要最低限に留めたい処なのですが、 テンプレート其の儘では真ん中の本文部分が一段下がってしまっていて、 如何見ても間が抜けているのもですから、該当部分を修正しました。
.blogbody{
  margin:20px 0 20px 0;
  padding:8px;
  border:1px solid #A5B487;
  background:#E7EBDE;
}
margin:0 0 30px 0;

また以前より気にはなっていたのですが、 IE では顕現せずとも標準に沿っているFirefoxやOperaでは問題の出る部分を、 此の機会に修正する為、下記 CSSソースを加えました。
.main ul, .main ol{
  margin:0;
  padding:0;
}

オープンソース化されたPBX~Asterisk

日本におけるAsteriskの先駆けでもあるフリー・エンジニアの高橋隆雄氏によるITproへの連載が 2006年3月31日より継続しており、Asteriskについての有益な情報を齎してくれます。 Asteriskを使う---目次 Asteriskについて当連載の第1回 Asteriskとは何か から引用させていただけば
AsteriskはオープンソースのPBXなのである。これまでPBXは知っているが、Asteriskというものの存在を知らなかった人にはちょっと衝撃的かもしれないが、オープンソース化されたPBXが存在し、それがAsteriskなのである。
此処で門外漢にはPBXとて縁遠いですから「PBXとは」で具々ってみれば と幾つか説明の検索されるのを閲覧するに 電話交換機と捉えて大凡間違いはなさそうで、 当記事次頁に於ける
親子機能を持つコードレス電話はある種のPBXであるため、PBXをわざわざ導入する必要もなかったのである。
が理解を助けてもくれるでしょう、 そのPBXがオープンソース化されたとすれば、 個人的に電話交換機の入手、個人的運用の敷居が低くなることを意味することにになります。
同記事の引用を繰り返せば
PBXといえばプロプライエタリなものしか無いのが当たり前だったが、業界初のオープンソースPBX、Asteriskの登場により今後はオープンソースでPBXというのも当たり前の時代となるかもしれないというほど、影響力のあるソフトウエアがこのAsteriskなのである。
とあり、OSの世界で云えばプロプライエタリなWindowsしかなかった処へ颯爽と登場したLinuxといった感じでしょうか、 此処でも当ブログで屡言及している企業側の論理が通用し辛くなっている現状が伺える様に思います。

時を経て2008年3月18日は第30回の ライン・キー問題が解決する!? では本邦お馴染みの電話機能とAsteriskの関係及び
今やオープンソース・ソフトウエアは,様々な側面で基幹業務やWebサービスに使われており,すでに無視できないどころか必須となっている感がある。Asteriskもいずれ日本国内でも無視できない勢力の一つになるだろう。
と本邦のメーカーに警鐘を鳴らす提起もあり興味深く、 更に2008年4月25日の第31回 あらためて解説,Asteriskとは何か? ではAsteriskの現状での位置付けを解説された上で、 本邦固有の問題、音声プラットフォームとしての可能性を述べられており、 WEB技術者は勿論、IT関係者にも看過出来ない情報を提供されています。

氏に警鐘を鳴らされるは本邦メーカーのみにあらずして、 此れは個人的にもオープンソース化についてプロプラエタリな世界から甘んじて身を転ぜよとも受け取られ、 其の為の努力を惜しまぬ様、自らを戒めたいと感じています。
投稿日:
カテゴリー: IT

情けは他人の為ならず~一般ブロガーネットワークアンケート

当ブログで以前2日連続でお伝えしたのはjavascript関連アーティクルの にて共に記事中でご紹介しているブログ 秋元@サイボウズラボ・プログラマー・ブログ の書き手、秋元裕樹氏こそ押しも押されぬアルファブロガーの命題の真なるを知ったは頃日とて、 果てこれは何時ぞやの、と感じるはdéjà-vuならぬ、 当ブログ2008年4月11日の記事 Life is beautiful に於ける
以前当ブログのカテゴリー「 ブログパーツ 」の「 なかのひと」のアーティクルでご紹介した サイト「 Life is beautiful 」の運営者が実は世界に誇るカリスマプログラマー中島聡氏であり、 Wikipediaの記事にもなっている アルファブロガーであることを知り得たのが頃日であると云う事実は、 コンピュータ・ITでカテゴライズしている当ブログとしては赤面の至りです。
と凡夫の愚行の繰り返しも、己の無知は顧みず主張させていただけば、 然れど此の事こそ当記事の引用を繰り返せば
その記事内容の秀逸さは流石はアルファブロガー、 ネットを漂流していれば、孰れ辿り着く先の一つであるのは、 前回3月26日投稿記事「 なかのひと 」に関して図らずも「 「なかのひと」を使ったアクセス解析の結果を公表してみるテスト 」にトラックバックさせていただいたことにも、示唆されるかに感じています。
が如き、インターネットの旨味、妙味である様に感じます。

又、同氏が同ブログの2008年5月13日の記事で アジャイルメディアネットワーク・読者アンケートのお願い を紹介しているのが、当ブログでは2008年は端午の節句5月5日のアーティクル ブロガーのキャリアパスとしての一オプション にてご紹介した アジャイルメディア・ネットワーク株式会社 其の当社にて、此処にも同様の念を抱かずにはいられません。
記事を引用させていただけば
当ブログも参加している、タレントブログや政治家ブログではない、一般人ブロガーによる広告ネットワークアジャイルメディアネットワーク(AMN)
と、氏も積極的に同社に関与している様子にて、 また屡参照させていただいている小飼弾氏の 404 Blog Not Found でもランダムに入れ替わるヘッドバナーに現れる際がある抔、 思いも掛けぬ新方向からの援護射撃に新奇広告形態にも信頼が高まります。

本日は2008年の5月23日なれば未だ締め切りの来月2日までは日もあり、 新しいネット広告の形に賛意をお持ちの方は下記事に協力し アジャイルメディアネットワーク社/アンケート回答ページ 当該社の情報収集の一助となれば、情けは他人の為ならずとて、 孰れ己の身にも果報の齎されるやも知れません。

中堅・中小企業に於ける財務会計パッケージ

ITProの連載はノークリサーチ代表伊嶋謙二氏の手になる 中堅・中小企業のITアプリ導入実態調査(2008年版) の第4回の記事は 勘定奉行が独走状態の財務会計パッケージ の報告にて中堅・中小企業に於ける財務会計パッケージの導入第一位は勘定奉行と、 件の事件や店頭での状況、自らの周囲を見回して 弥生会計の首位との思い込みから意外な感じを受けましたが、 私の偏見の修正許りに於いてではなく、 財務会計となれば事業及び事業者にはなくてはならない中枢の業務フローのひとつ、 中堅・中小企業の実態をデータから読み取る上でも重要な記事であると考えます。

管見にて記事中から読み取れる中堅・中小企業の会計に於ける実態を挙げさせていただけば、
  1. 中堅と中小の導入に於ける乖離が起きている
  2. 銘柄選定には保守的であり、横並び傾向がある
  3. 大幅なカスタマイズは施されず導入される
  4. パッケージ製品に対する満足度は総じて高い
  5. SaaSは固よりアウトソーシング自体が忌まれている
になろうかと思え、夫々良し悪しは抜きにして、 個人的には感覚的にも宜成る哉と云う感を受けます。
又、此の記事の世に流布すれば上記傾向を以てして、 例えば新規事業を立ち上げる事業主へ財務会計パッケージの導入銘柄の選定に於いて影響を与える抔もあり、 勘定奉行のOBCには追い風となるのかもしれません。

HTMLエンティティ~ブログからもう一歩

ブログの編集画面から投稿されたテキストデータは、 ブログの表示画面ではHTMLという約束事でブラウザにより表示されています。 文字だけ送信したにも関わらず画像が表示されるのは此の約束事によっています。 このHTMLと云うものはホームページ(WEBサイト)を表示抔する際の約束事ですので、 ブログもホームページの一種と云う事になります。 HTMLと云う約束事はその簡易さ簡便さ寛容さにより広く普及し、 インターネットの普及にも大いに貢献しましたが、 それでもホームページを作成する際の敷居は一般向けには下がり切ったとは云えない証拠として、 ブログと云う利便性の高いホームページ作成ツールの普及した、 と云うのもブログ敷衍のひとつの理由に上げられると感じています。

扨、その約束事に於いては特定の目的で使用される文字がある為、 ブログの編集画面で見えている通りには実際のブログ表示画面上では見えない場合がある事に 戸惑われる方もいらっしゃる様です。 今回質問を受けた文字は"<"と">"でした。 先週末は2008年5月16日の金曜日、 浜北ブログ村(夜の部) は此の地二度目のお邪魔の ときわ屋さん カウンターで様々お話し乍の最中の話柄のひとつである、 当問題を齎したは当該ブログ村では最もお忙しい方にて、 其の場で質問に答えること叶いませんでしたので、 当アーティクルを用いて解法の一つをご紹介したいと思います。

此の二種の記号はHTMLに於いては重要なタグを示す為に使用される記号として決められているのですが、 ブログ備え付けのWysiWygエディタを使用していれば、 リンクやイメージ表示の呪文の一部として特に意識せずとも使用していることが多いと思われますので、 いざ、特にブログ画面上に表示させたい場合に、 自分は確かに入力した上、編集画面に戻れば確かに入力されているのに、 肝心要の人様に見ていただく画面に反映されないのが不可思議であると云うことです。 当問題についての解決方法もHTMLには用意されており、 エンティティ というWEB頁に詳しい説明が掲載されていて、此処では言及されていませんが参考書抔では 特にHTML用に用意されたエンティティをHTMLエンティティと呼ぶことも多く思います。

従って当問題の解決方法はブログ編集画面上に於いて
<⇒&#lt;
>⇒&#gt;
と入力し投稿すると云うことになります。

表示文字の問題については文字化けも含め文字コードとの関係も深く、 屡悩まされる方も多いと拝察します。 漢字につきましてもJIS第一水準、第二水準については問題がなくとも、 少し許り範疇を外れれば其の限りにはなく、 最も画数の多い漢字とは? で紹介されている新明解漢和辞典で最も画数の多いとされる33画の も例えばUTF-8文字コードを採用しているブログシステムでは表示されますが、 それ以外では表示されない場合があり、その際 &#40612; と入力すれば の様に表示され、一般に最も多い画数であるとされいている64画の龍四つは見付けられませんでしたが、 三つであれば計算上 ¾を乗じた48画に数えられる &#x9F98; と入力すれば表示されると云う様に、 WEB頁にエンティティ、即ち求める実体の参照をさせることで問題解決に繋がる筈です。
(同ページで同時に紹介されている84画の たいと については流石に用意されていないようです。)
以前2002年8月18日は夏の盛り、私が公開いたしました一コマ漫画では「 扇暍 」と云うタイトルを表示するのに 頁の文字コードをShift_JISに指定しております関係から 「扇&#26253;」として処理しています。

アルファブロガーの小飼弾氏も404 Blog Not Foundの2008年5月8日の記事 perl - Encode 中級 で言及されている部分があります。
EUC-JPやShift_JISで扱えない文字も、HTMLやXMLではCharacter Reference (文字参照;CREF)という方法で表記することが可能です。例えば、☺は&#9786;または&#x263A;と表記すればいいのです。前者はその文字のUnicodeを10進数表記、後者は16進表記したものです。
一般ブロガーには少しハイブローに過ぎる内容ですが、 ブログ毎に背後の機構が異なることが分かる抔、 役立つ部分も多い記事ですので参照されることをお奨めします。

他にもHTML用を含め様々なエンティティが存在し、 実際当アーティクル内でも &#190;&amp; を使用しています。 検索エンジンで「文字実体参照」で検索すれば顔文字にも利用可能な思いも掛けぬエンティティの見つかるかも知れず、 お試しになってみては如何でしょうか。

ホームページ作成浜松Tips謹製~略語辞典

当ブログ2008年5月9日のアーティクル 意外と知られていないSEOに有効なHTMLタグ でご紹介の5つのタグの内、4番目の <acronym>/<abbr> を実践しようとすると中々に手間の掛かるもので煩わしいことこの上なく、 せめてもの省力化にと一度使用した語彙を一アーティクルに纏めておけば、 大概一人の人間の使用する範囲は狭いものですから、 可也の手間は省けるだろうと当アーティクルを投稿するに至りましたので、 極々個人的な略語辞典とはなりますが、 もし当ブログと同様な略語を多用する方の一助にでもなれば幸いにてご利用いただければと思います。 <acronym>
  • <acronym title="Application Program Interface">API</acronym>
  • <acronym title="Application Service Provider">ASP</acronym>
  • <acronym title="Cisco Certified Network Associate">CCNA</acronym>
  • <acronym title="Classless Inter-Domain Routing">CIDR</acronym>
  • <acronym title="Chief Information Officer">CIO</acronym>
  • <acronym title="Cascading Style Sheets">CSS</acronym>
  • <acronym title="DownLoad">DL</acronym>
  • <acronym title="Document Object Model">DOM</acronym>
  • <acronym title="Google App Engine">GAE</acronym>
  • <acronym title="The GNU General Public License">GPL</acronym>
  • <acronym title="Getting Things Done">GTD</acronym>
  • <acronym title="Internet Explorer">IE</acronym>
  • <acronym title="Information-technology Promotion Agency">IPA</acronym>
  • <acronym title="Information Security Management System">ISMS</acronym>
  • <acronym title="Information Technology Skill Standard">ITSS</acronym>
  • <acronym title="Japan Card Data Security Consortium">JCDSC</acronym>

  • :日本カード情報セキュリティ協議会
  • <acronym title="JavaScript Object Notation">JSON</acronym>
  • <acronym title="Landing Page Optimization">LPO</acronym>
  • <acronym title="Mobile Internet Devices">MID</acronym>
  • <acronym title="Private Branch Exchange">PBX</acronym>
  • <acronym title="Payment Card Industry Data Security Standard">PCI DSS</acronym>
  • <acronym title="Return On Investment">ROI</acronym>
  • <acronym title="Software as a Service">SaaS</acronym>
  • <acronym title="Search Engine Optimization">SEO</acronym>
  • <acronym title="Search Engine Marketing">SEM</acronym>
  • <acronym title="Sarbanes-Oxley">SOX</acronym>
  • <acronym title="Uniform Resource Locator">URL</acronym>
  • <acronym title="What You See Is What You Get">WysiWyg</acronym>
<abbr>
  • <abbr title="Hypertext Markup Language">HTML</abbr>
  • <abbr title="Extensible Markup Language">XML</abbr>
タグの概略として2008年5月9日のアーティクルを下に引用しておきます。
<acronym>/<abbr> 略称タグとでも呼ぶべき種類のものだと思います。 2種類あるのは<acronym>については単純な頭文字も連ねたもので、 当アーティクル内でもWysiWygIEで適用しており、 もう一方の<abbr>についてはHTMLXML抔、 頭字語ではない略語に適用されるようです。 >>参照ページ