ツリー型折畳みメニュー/Simple Tree Menu

PHPSPOT開発日記の2008年7月9日の記事 JavaScriptを使ったULリストをツリー風に表示するサンプル「Simple Tree Menu」 でのタイトルに偽り無き紹介は Dynamic Drive にて公開されるMenu & Navigationのjavascriptでの実装の一つなる Simple Tree Menu にて、紹介通り頗る有用性に富んだ機能に思い、 当ブログにも関連ファイル
  1. simpletreemenu.js
  2. simpletree.css
  3. 画像ファイル
    1. list.gif
    2. open.gif
    3. closed.gif
をダウンロード、 当ページのチュートリアルの通り、実装させていただきました。
投稿日:
カテゴリー: javascript

電光掲示板風タイトル最終形(おみくじ版)

ブログタイトルズームアップ 系の当ブログ内アーティクルと並列して当ブログに実装してお馴染みの Rafaël Rozendaal 氏によるサイト RAFAEL ROZENDAAL でのブラウザのタイトル部分に於けるjavascriptを利用した電光掲示板風動的表示機能が、 実装頁の次頁繰り送りの再度巡り来たるによって、 今回は此れでお仕舞い、然様ならとすべく、タイトルには最終形を冠し、 従来はサイトタイトルを表示した部分を 御神籤 としてトップページでは当アーティクルの消え去る迄、 当アーティクルに直接アクセスの方には向後、 提供させていただくことに致しました。
お御籤の結果は 大吉・中吉・小吉・吉・末吉・凶・大凶 の七種類、 特にアクセスに関連した制限は設けていませんので、 納得のいかれる迄、頁を更新して、好ましい結果をお持ち下さい。

一連の 電光掲示板風タイトル に続き、トップ頁表示の際当該機能の実現されるべく為の実装の本アーティクルは、 タイトルが変更されるもjavascriptによるクライアント側での動的な表示になる上では、 2008年4月18日の 電光掲示板風タイトル でご紹介の通り、 SEO 的には問題の無かるべき本機能となれば、 貴ブログでもご実装の試みは面白からんかに …と今迄申し上げてきたのですが、 当機能に於いて明らかに欠点と思われる事項を今更乍発見致しましたので、 此処にご報告申し上げ、ご使用に関してのご注意に供したいと思いますのは、 ブラウザのお気に入りに登録の際は動的と云えど、 登録する其の時に表示されるタイトルが適用されますので、 当ブログの従来の機能で云えば
「★★★ホームページ作成浜松Tips★★★」
のタイミングで登録されれば文句無しなのですが、そうは問屋が卸さず、 大抵は
「★★★★★★★★★★★★」
抔、訳の分からない状態で登録され、 登録した方が、
「はて?登録した筈なのだか?」
と訝しがる事態を招いてしまいます。 ですので、ブログ抔であれば「追記」部分に実装する等で頁単体に適用し、 ブログ全体に適用するのは好ましくないように思い、 お薦めは取り下げると共に、 当ブログでも長らく親しんでいただいた当 電光掲示板風タイトル 機能も此のアーティクルを最後にすれば、 20記事のエントリを重ね当実装頁の次頁繰り送りの時期に消え去るてぇ寸法にしようと思っております。

prototype 本と jQuery 本

Ajax ライブラリの普及に依り様々開発される中でも、 最早両巨頭、双璧と云った感のあるprototype と jQuery は、 好奇心も手伝っての関連書籍を具々って見ればWEBにて屡、 洋書では見掛けるものの不勉強の身の上としては邦訳版の待たれていた処に、 数ヶ月前に書肆店頭にて目にするや否やレジに運び乍、 結局は雑務に紛れ積読と化した prototype 本が、 prototype.jsパーフェクトリファレンス―Ajax実践プログラミング にて、一瞥したのみにも其の有用なのは感じられ、 早く実践しようと気許り焦れば光陰矢の如しとて、 数か月を唯消光するのみ、 正しく少年老い易く学成り難しを其の儘体現しおる現在、 毫も試すことなければ成長もなき情けなき次第。
扠も其の時間を上記書籍掲載の試行にこそ当たれとは云わば云え、 書肆に当て所も無く出掛けては店内を徘徊するは最早我が習性なるに従い 今日も今日とて棚から棚へと渡り歩くは、 何時か来た道、あの道、小道がとて不図、 目に付いたる書籍こそ jQueryで作る Ajaxアプリケーション なれ、prototype に遅れること数箇月の jQuery 待望の一冊は赫灼たる装丁も眩しきに目も眩み、 操られる如くレジに運びたるは何時ぞやの既視感か、 家路を辿る手に実在せる数千円分の紙の束とインクの重み、 此方は是非積読儘と成らぬ様、 気を引き締めて机上に置いたものを横目に見乍、 さてどうなりますことやらの経緯は後のお楽しみと、 なりますことやらもどうなりますやら。
投稿日:
カテゴリー: javascript

アニメでわかるソートアルゴリズム

秋元氏のサイボウズラボ・プログラマー・ブログの2008年6月23日の記事 各ソート技法をアニメーションで表示するAnimated Sorting Algorithm Demo で取り上げられ、紹介されているのが
ソートアルゴリズムの可視化というテーマ
に基く David R. Martin 氏の手になる WEB サイト Animated Sorting Algorithm Demo の javascript で実装されるアニメーションは、 動画の本領発揮と云うべきか、 曖昧模糊とした儘のソートアルゴリズムの理解促進に実に役立つ様に感じます。
秋元氏の訳をお借りすれば
それぞれのソートアルゴリズムがどのようなものか見せるというだけでなく、ソートのアルゴリズムに「常にこれが最適」というものはない、というのを示すのも目的
との意識の高い狙いも、 下賤な話、情報処理試験についてアルゴリズムについて学べども、 抽象的な参考文献の説明文に図解を見た処で、 もう一つ実感の無い儘に、出題アルゴリズムの虫食い穴を埋めたりする方も多いかに拝察する処、 此のサイトの存在は力強い援軍に成り得るのではないでしょうか。
各アルゴリズムについての詳述もリンクを辿ればなされており、 実際にスクリプトも掲載されておる抔、痒い箇所に手が届く作りになっています。
当ページと、秋元氏の紹介されている他の類似目的サイト Sorting Algorithms での java アプレットによる実装のアニメーションと合わせ見れば、 可也理解の進むのは疑い無いかに感じますが、 くれぐれも当ブログ筆者の様に、只動きの格好良さに惹かれたアルゴリズムの選択は、 強力な魅力を有す当該アニメーションの威力の余す処にて、 紛う方無き錯誤にあらば控えられたが良かるべく存知候。
投稿日:
カテゴリー: javascript

フェードイン、アウトする吹き出しjavascript

PHPSPOT開発日誌の2008年6月9日のブログ記事 アニメーションする2KBの軽量ツールチップJS で紹介されていたのは LEIGEBER web development blog の2008年6月4日の記事 Fading JavaScript Tooltips 2kb にて公開されている僅か2kBの容量でフェードイン、フェードアウトするツールチップを実現するjavascriptの、 開発者によるデモ を参照すれば小洒落た感じで、HTMLソース上の表示場所其の物に表示ソースを画像迄含めて表記可能である様なれば、 早速当ブログでも実装させていただきましたのが、下にて、 アーティクルに直接アクセスされている方以外は、 タイトル若しくは[続きを読む]をクリックしてご覧いただきたいと思います。
PHPSPOT開発日誌ではソースが整っている為参考にし易い旨、 記述されておりますので、ご自身でjavascriptを作成される方にも役に立つかも知れません。
投稿日:
カテゴリー: javascript

タブ切り替え機能スクロール型

当ブログ2008年5月6日のアーティクル jQuery UI を利用したタブ切り替え機能 でご紹介したのは当記事中から引用すれば
Yahoo!やiGoogle、Livedoor、goo抔、各ポータルにより挙って採用されているとなれば、其のインターフェースの有効性抔、実証済みとも云えるタブ切り替え機能です。
とのホームページ上でのタブに依る表示切り替え機能にて、 秋元@サイボウズラボ・プログラマー・ブログ の2008年5月28日の記事 スクロールするタブをYUIベースで実現したライブラリ に紹介されているのがjQueryではなくYahoo UI ライブラリをベースに Reid Burke 氏により開発されたBSDライセンスで公開されるUIScrollTabView.jsにて Reid Burke’s YUI Addons が其の公開記事になり、サンプルとして が閲覧可能です。

当ブログでも本UIを利用させていただき、 [続きを読む]以下に実装してみましたので、 直接記事にアクセスされていない方はクリックして進んで見て下さい。
タブをクリックして表示をタブに該当する記事に切り替えるお馴染みの機能ですが、 本実装では縦に重なる記事をスライドで表示を切り替えています。
投稿日:
カテゴリー: javascript

中島氏によるアニメーション用javascriptライブラリ

一度見捨てられたかのjavascriptの復権はGoogleMapの登場以来凄まじく、 今回参考、利用させていただいたのは中島聡氏のアニメーションライブラリianime.jsを javascriptで作成され、オープンソースとして公開もされており、 当ライブラリを利用したアニメーションの氏のブログ Life is beatiful に掲載の記事が にて、本来ライブラリを利用するのであれば、 新規動作のアニメーションを作成せねばならない処、恥ずかし乍技量拙く、 中島氏の記述されているスクリプト略其の儘、無理矢理当アーティクルにくっ付けたものですから、 可也無理な表示になっていますが、アニメーションの面白さは折り紙付きです。
上記記事中では
「フラッシュで作る」というのも一つの方法ではあるのだが、このくらい軽いアニメーションはJavascriptでするべきだと最近は考えているので試みているしだいである。
と云う発言をされており、今後益々フラッシュの領域をAjaxの旗の下に javascriptが侵食して行き、 となれば真のフラッシュ使いは埒外にせよ、 私も含めたインチキ臭いバッタもんフラッシュ使いは淘汰されていく未来を予感させられます。

2008年4月16日リリースのWindows版 Firefox 2.0.0.14ではタイトル文字が表示されないようですが、 IE7では問題無く動作します。

当該URLに直接アクセスされた方にはご覧いただけたと思いますが、 トップページから等、そうでない方は当アーティクルタイトルをクリックするか、 若しくは#moreにリンクされる為望ましくはありませんが、[続きを読む]をクリックすると 動作するアニメーションサンプルをご覧いただけ、其のサンプル用に使用した元画像は下に表示するものです。
クリスマススキー クリスマススキー 甘い香り漂う純白のゲレンデでクリスマススキー

今は当ブログではタイトル表示の特徴としてjQueryに依るタイトル拡大機能を据えていますが、 テンプレート変更に耐え得る様に実装すること可能であれば孰れ、 此れを出来たら新タイトルアニメーションとしたいものと考えています。
投稿日:
カテゴリー: javascript

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

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

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

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

電光掲示板風タイトル

当ブログ2008年03月25日のアーティクルでご紹介は Rafaël Rozendaal 氏のストレス解消や癒し系フラッシュサイトにて、 氏の手になる様々なコンテンツ毎に独立したドメインの各フラッシュは 孰れも逸品、粒揃いの出来なれば大いに楽しませて貰えるのですが、 当該アーティクルでも言及は
タイトル文字が増減してネオンのように動いているのも細かいけど粋に思います。
という部分が気になっていたものですから、氏の頁のソースを拝見した処、 javascriptで実装されており、
// Set your messages below -- follow the pattern.
// To add more messages, just add more elements to the array.
// Set the number of repetitions (how many times the arrow
// cycle repeats with each message).
// DO NOT EDIT BELOW THIS LINE.
// you can fiddle with the patterns here...
の様にコメントアウト部分を抜き出して見れば此れが揮っていて、特に最終行の 「此処を好きにいじられるよ」抔、全くサイト閲覧者が利用すること前提で書かれておりましたので、 お言葉に甘えて、当アーティクルにも実装してみました。
お使いのブラウザの左上タイトル表示部分や、 タブブラウザであり複数頁を開いていれば当該タブ部分が 標題の如く電光掲示板風に動いているのが見られるのではないでしょうか。

タイトルが変更されることで対検索エンジンの頁構造的に不安を感じる方も居られるかもしれませんが、 javascriptで動的に実装されておりますので、GoogleやYahoo!のクローラーが読み取るのは HTMLソースに記述されている<title>部分であり、 実際、Rafaël Rozendaalのサイト RAFAEL ROZENDAAL は具々ってみれば、 HTMLソース通り<title>RAFAEL ROZENDAAL</title> で表示されますから、面白いと思われた方もご自分のブログに実装されてSEO的問題は無いと思います。

javascript宣言書式付帯事項覚書

javascript仕様のスクリプト宣言についての書式では、 割とうろ覚えの儘であったり、 意味も判らず呪文的に使用しているのですが、 改めて一般にはどの様な仕様として普及しているのかについて調べてみました。

引用サイト:XHTML文書におけるJavaScriptの注意点
  • スクリプト言語は<head>内のMETAタグで指定するのが正式である。
    <meta http-equiv="content-script-type" content="text/javascript" />
  • language属性ではなく、type属性を使用する。
    <script type="text/javascript" src="URL"></script>
    <script type="text/javascript">
    <!--
    // -->
    </script>

引用サイト:JavaScript コラム: 『コメントに関するコラム』
  • スクリプトをコメントアウトする
    //………;

    /* ………;
    ………; */

    「//」は、その後に続く1行、「/* ~ */」は、囲んでいる範囲がコメントになります。
  • JavaScriptが無効なブラウザでエラーを出さないようにする
    <SCRIPT>
    <!--
    ………
    // -->
    </SCRIPT>

    「//(JavaScriptのコメントアウト)」を付けるのを忘れないように。

上記2サイトから個人的に必要な部分を引用させていただいています。
上は ~ XHTML文書と外部スタイルシートの作り方 ~ さんの一コンテンツで、 外にも実践的なXHTML文書とCSSの外部スタイルシートの作り方の情報があり、 下は「Web覚書トップ」さんの JavaScript コラム の一コンテンツで多少時間は経っていますが、外にも幾つかJavaScriptについての情報があります。
投稿日:
カテゴリー: javascript