--/-- --

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

07/30 2011

Sortable (jQuery UI)の順序をクッキーに記録・再現させる方法

jQuery UIのsortableはリスト等の順序をAjaxに並び替えるために大変便利です。そして、Methodsの中でtoArrayを使えば、すべてリストのIDを順番に配列に吐き出してくれるので、並び替えたリストの順序を記録してCookieやDBにAjaxで保存することができます。しかし、クッキーやデータベースから呼び出したリスト順序の記録をリスト表示に再現するためのMethodsはありません。そこでjavascript関数を作成してみました。

スポンサーサイト

続きをよむ
09/04 2010

vdsフリーでvdsSpeakFinishCallbackを克服する!

 合成音声による聖書の音読を1日1章読む無料ブログソフトDTリスニングでお世話になっているのがWeb合成音声配信システムvoice delivery systemです。ウェブ上でテキストを合成音声読み上げしてくれるAPIです。1ヶ月5万字まで読み上げてくれる無料版があります。これほど優れた技術を無料で提供してくださるので、本当に感謝なことです。

 さて、vdsの無料版には、プログラム上、ちょっと困った点があります。それはvdsSpeakFinishCallback関数が使えないという点です。文章の読み上げが終了した時に呼び出される関数なのですが、有償版のみ使用ができることになっています。長文の読み上げには結構重要な関数なのです。といいますのも、vdsは読み込んだテキストをリアルタイムで音声にしてflashで再生する仕組みなので、その仕組み上、長文を一回ですべて読み込ませるとパンクしてしまいます。1000文字以内に細切れにしていく必要があるわけですが、そのときに「前の文章を読み終えたので、続けて次の文章を読んでください」という指示をプログラムしなければなりません。そのときに文章を読み終えたことを告げてくれるvdsSpeakFinishCallback関数をどうしても使いたくなるのです。これが使えればデモのような、読み上げの進行に合わせて、読み上げ部分を視覚的に示すようなことができるようになります。

 でもなんとかして無償版のまま文章を継続して読み続けたい!デモのようなことができるようになりたい!しかもvdsSpeakFinishCallback関数を利用せずに成し遂げたい!そんな願いを、音声の出力中であるか否かを調べるisSpeakingメソッド(無料版でも仕えるメソッド)のみを使ってやってみました・・・

続きをよむ
05/30 2010

最初の子要素を追加するDOMメソッド

jQueryなどのライブラリーにより、ほとんど意識しなくなりつつあるDOM(Document Object Model)ですが、基本を押さえておくことはやはり重要ですね。

ある要素の子要素を追加する、しかも最初の子要素として追加する場合、jQueryならば「$(要素).prepend(子要素)」となります。
<body>
    <p>文章1</p>
  <p>文章2</p>
</body>
例えば、上記のHTMLの中のBodyタグ直下に「<h1>タイトル</h1>」という要素を追加したい場合、jQueryでは以下のように記します。
$(document.body).prepend('<h1>タイトル</h1>')
そうすると以下のようにHTMLはダイナミックに変わります。
<body>
  <h1>タイトル</h1>
    <p>文章1</p>
  <p>文章2</p>
</body>
 jQueryなどのライブラリーを使わない場合、「子要素を追加する」というのはちょっとした工夫が必要です。といいますのも、DOMそのものには子要素(子ノード)を一番最後に追加する「appendChild」はあるのですが、一番最初に追加する「prependChild」というメソッドがないからです。ではその方法は・・・

続きをよむ
02/01 2010

Ajax!『戻る』ボタンで履歴を辿る、クッキー(Cookie)で。

 ウェブページがページ遷移することなく動的に変化するAjaxは、GoogleMapsによって瞬く間に広まりました。私もその影響を強く受けた一人で、昨年11月末よりサービスを開始したクラウド型聖書検索・並列表示サイド『DT Works』では、ページを全く移動することなく各種聖書を自由自在に開いて検索でき、ウェブページであることを忘れて、ソフトウェアを使用している感覚になってしまいます。

 Ajaxなウェブページで頭を悩ませることがあります。それは「ブラウザの『戻る』ボタンを押すと、全く別のサイトに飛んでしまって、1つ前の動作に戻れない」ということです。現行のブラウザの履歴機能は、複数のウェブページを行き来することを前提としているため、同一ページ内でのAjaxなイベント変化には対応していません。さらに悲劇なのは、別サイトに飛んでしまった後に、もう一度戻ってくると、Ajaxの初期画面に戻ってしまうことです。なんらかの仕組みを取り入れなければ、Ajaxなページは利用者に混乱をもたらします。

 この課題の解決策としては、「URLのアンカー・ハッシュを利用する方法」が広く活用されています・・・

続きをよむ
08/28 2009

JqueryでAjax!CGIを通過後、ページ遷移なくHTMLを変化させる方法

ブログでコメントを記入したり、お問い合わせフォームに記入する場合、【送信】ボタンを押すと、通常はページが遷移します。でも、ウェブサイトのデザインによっては、CGIプログラムを稼動させながらも、イベント発生後に新しいページに飛ぶことなく、入力ページに戻ってきてほしい場合があります。それは技術的に言えば、Ajaxを駆使するということです。幸い、JQueryを使用すれば、かなりスマートに実装できます。

続きをよむ
このページのTOPへ
聖書リスニング
DTメンバー募集(無料!)

Devotion Timeのメルマガメンバーになりませんか!メンバー限定企画もあり!ご希望の方はメールアドレスを入力して下さい。(さらに詳しく >>)

Profile

ブロガー: 西原智彦
1972年広島生まれ。ロボットが好きで工学修士に(1996)。聖書に惚れ込み、実践神学修士に(2005)。(さらに詳しく >>)

カテゴリ
お問い合わせフォーム

個人的な感想、ご質問にどうぞ

お名前(ハンドルネームOKです):
メールアドレス:
件名:
本文:

Copyright © Devotion Time All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。