[B! javascript] levaのブックマーク

iPhone SafariでCarousel風のUIを実現するjQuery Plugin「jCarousel」作りました - くらげだらけ

iPhone・iPadのWebアプリケーション開発を相変わらず研究しています。最近のiPhone・iPad Webアプリケーション開発と言えば﹁Sencha Touch﹂ですね。リリースされてから何だかんだ言い訳して、ガッツリ勉強することから逃げていますが、まぁそろそろ︵本当に︶ガッツリ研究していこうと思います。と、冒頭でSencha Touchの話になりましたが、今回はjQueryのプラグインです。 jQueryのiPhone Webアプリケーション開発と言えば﹁jQTouch﹂ですが、Sencha Touchに比べると用意されているUIもイベントなんかも少ないんですよね。HTMLを書き書きするだけでサクサク作れちゃうところはいいのですが、もうちょっとSencha TouchみたいにいろんなUIを使いたいところです。そこで、jQueryでもCarousel風のUIをサクサクッと作れ

leva 2010/10/21

高さの算出が何かおかしかったのですが、うまく使えました。癖の少ないいいプラグインだと思いました。

リンク

jQuery Mobile

jQuery Mobile is no longer supported To read more about the status of the jQuery Mobile project, see the announcement blog post. A Touch-Optimized Web Framework jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices. Seriously cross-platform with HTML5 jQuery Mobile framework takes the "w

leva 2010/08/14

iOSに限らず、多くのプラットフォームをサポートするのが特徴かな

リンク

Regex Tester – RegexPal

RegexPal is a tool to learn, build, & test Regular Expressions (RegEx / RegExp). Results update in real-time as you type. Roll over a match or expression for details. Save & share expressions with others. Explore the Library for help & examples. Undo & Redo with {{getCtrlKey()}}-Z / Y. Search for & rate Community patterns.

leva 2009/06/24

正規表現のお手軽テスト。マニュアルより試行錯誤が大事

リンク

suggest.js - 入力補完ライブラリ

Japanese / English JavaScriptで入力補完を手軽に行うためのライブラリです。 (︻お知らせ︼ver2.0からprototype.jsを必要としなくなりました) 下記のような機能を持っています。入力内容をもとに検索を行い、補完候補を表示します。(Google Suggestぽく) Ajaxでは無く、初回画面表示時のみデータの読み込みを行い、それ以降は、クライアント側で対象データから検索します。したがって、入力内容に変化があってもサーバ側にアクセスすることはありません。検索は、前方一致/部分一致、大文字と小文字の区別あり/なしといったように、オプションで簡単に指定できます。また、その他にも様々なオプションが指定可能です。検索結果の表示上限を指定できます。(デフォルト上限20件) 補完候補はキーボードの上下と、マウスにて選択できます。また、キーボードで選択中にES

leva 2009/06/16

EFOに使えそう、というか組み込んでみるか

リンク

プログレスバー.js - JavaScript ライブラリー - HTML5.JP

上記タグは次の点に注意してください。必ずdiv要素を用意してください。divではない要素ではブログレスバーは表示されません。id属性は必須です。id属性値をセットしてください。 HTMLのhead要素内に、次のJavaScriptコードを記述してください。 <script type="text/javascript" src="../html5jp/progress.js"></script> <script type="text/javascript"> window.onload = function() { var p = { to: 50 }; var o = new html5jp.progress("sample1", p); o.draw(); }; </script> このサンプルは、html5jpフォルダが一階層上に存在しているものとしてscript要素のsrc属性を

leva 2009/05/25

ウェブでプログレスバーってあんまり見ないけども、適切にサーバの処理状況や読み込み状況がゲットできるようになるのならThrobberの代替として受け入れられるのではと

リンク

jCart - Free PHP/Ajax shopping cart downloaded over 77,000 times

Notice: Undefined index: jcart in /home/eofgxrgc8nga/public_html/jcart/jcart/jcart.php on line 588 Notice: Undefined index: ajax in /home/eofgxrgc8nga/public_html/jcart/jcart/config-loader.php on line 29 Notice: Undefined index: js in /home/eofgxrgc8nga/public_html/jcart/includes/header.php on line 6 Notice: Undefined index: js in /home/eofgxrgc8nga/public_html/jcart/includes/header.php on line 11

leva 2009/05/03

Amazonもこれくらい直感的にフォームを作ってほしいわ。普段の買い物は物を入れる度に買い物かごを確認するわけないんだし

リンク

SlideSubmit v.1 | BenPlum.com

I hate CHATCHPAs! Why should I have to enter a random string of characters to prove I'm human? Why isn't there be a better way to submit forms and still protect your inbox from being flooded with junk from nasty net 'bots? SlideSubmit is a new way to submit forms I developed in an attempt to do away with all those silly CATCHPAs. Take a test drive below, if you like what you see you can download

leva 2009/02/13

最後にボタンをスライドして送信するbotspam除け。人間とbotの区別はやはり人間が自然にできる（している）作業で行うに限る

リンク

2008-12-12

どうやら1次すら通らなかったという本当に大した体たらくな感じです。がまぁ色々書ける様になったので、色々書き書き(応募に関わらず書いても良かったのか知らないんですけどw)。実際に私が応募する時に出した提案テーマに関する説明のpdfを上げておきました。 pdf注意！！ http://ranha.kerox.info/ranha_youth.pdf3番までが直接の該当部分なので、そこんとこを読んでもらえると良いと思います。 pdfにも書いているのですが、簡単につらつらと。そもそも、このお話自体はちょっと前にはてダでも実は書きました。ブラウザというプラットフォームの為の基礎技術〜ブラウザ間通信〜 - Yet Another Ranha 実はこれは結構ネタでやったのですが、ちょと考えてみると色々と面白かったのでその後もポツポツと続けていて、そんな所に未踏ユースの話もあったので出してみたという感

leva 2008/12/12

サーバ負荷を軽減させるための技術開発って事かな。面白そうな感じはするけど、ユーザニーズがやっぱ曖昧な感じが。結局帯域消費はネット全体が負担するわけでニコニコ憲章に反しちゃうとかも気になる

リンク

jQueryでブロック要素の高さを揃えてみる - 徒書

ブロックレベル要素の高さを揃えるheightLine.js[to-R]を見て不満に思ったのは、高さを揃える要素を取得するために固定のclass名を使っていることでした。これだと既存のHTML文書に適用するためには、script要素を加えるだけでなく、それ用のclass名も書き加えなければなりません。どうせJavaScriptを使うのであれば、既存のHTMLの構造を生かしつつスクリプト側で目的の要素を取得できたほうがいいのではと思いました。というわけでまたも自分なりに書き換えてみるシリーズなのですが、今回は要素取得の柔軟さに着目してjQueryを使ってみることにしました。できたものは以下です。 jquery.flatheights.js 動作サンプル jQueryの$関数ではCSSセレクタの書式で要素を取得できるので、例えば﹁"box1"というclass名を持つ要素﹂を集めるのであれば

leva 2008/12/08

呼び出し方が直感的で使いやすいですね。早速、使わせていただきます

javascript

リンク

jQueryのプラグイン100選 -2008年総集編 | コリス

seekAttention 注目箇所だけハイライトのアニメーションで強調。スクロール・ドラッグなど操作関連のjQueryのプラグイン

leva 2008/12/04

単に見栄えをよくするためにエフェクトをかけるのではなく、ユーザのメンタルモデルに近づけるために必要な時に必要なものを利用したい / 表描画ライブラリなんてあるのね。見出し生成はなかなか面白そう

リンク

Attack Lab - Wellness, Health and Fitness for Women

Nobody wants to deal with the fact that wrinkling is part of the natural process of aging. Because they looked their best during their early and late 20’s, they would do all that’s possible to maintain such an appearance. However, being exposed to stressful situations as well as environmental hazards doesn’t exactly help their cause.

leva 2008/11/30

Markdownは記法を意識せずにかけるのが良いよね。使用可能なタグを制限するなど微調整が必要だけど、コメント欄などそこそこの長さのユーザ入力で使えそう

リンク

誰が AutoPagerize を提供すべきか: Days on the Moon

はてなブックマークがリニューアルしました。新しいはてなブックマークの個人ページにはページ自動ロード機能、通称AutoPagerize 機能 (そう呼んでいる人がどれだけいるかは知りませんが) がついています。さて、AutoPagerize のような一般の Web ページにも適用しうる機能は誰が提供すべきでしょうか。ページの製作者でしょうか?ユーザー側が (ブラウザの拡張機能も含む) ユーザースクリプトとして導入すべきでしょうか?はたまたブラウザ側の仕事でしょうか?Twitter 上でそのことに関するやり取りがあったので少しまとめてみました。 hotchpotch bbeta ってデフォルトでAutoPagerize ついてるんだ。変なボタン押すと有効になるっぽい(haihai sakura sakura) (2008-11-10 11:50) os0x はてなブックマークβ の

leva 2008/11/25

twitterの@列記だけだと議論の視覚化は困難という話‥ではなく / 理由を知りたい、私はそう思わないが感覚的には一般的かどうかの違いかな→「文書内容をじかにいじるものをブラウザが提供し（略）少々抵抗を感じます」

リンク

被はてブランキングと、そのブックマークレット - IT戦記

お知らせはてな側の負荷が高そうなので、公開を中止いたします。はてなの皆様、大変ご迷惑おかけいたしました。

leva 2008/11/25

0%で止まったまま動かないけど？ / コメント率も出せると面白いかな / はてブサーバへの負荷が気にかかります

リンク

東京大学附属図書館、OPACから大学生協在庫をリレー検索できるブックマークレットを試行公開

東京大学では、﹁図書系のためのアプリケーション開発講習会﹂と題して、情報基盤センターが図書系職員向けの講習会を主催しています。その成果の1つとして、東京大学附属図書館のOPACからISBNを取り出し、東京大学生協の在庫を検索できる、ウェブブラウザ用﹁リレー検索ブックマークレット﹂を試行公開しています。またこのほかにも、各種のアプリケーション、講習会資料リストが公開されています。東大OPACから東大生協在庫検索へのリレー検索ブックマークレット https://mbc.dl.itc.u-tokyo.ac.jp/UT-OPAC2COOP/ ﹁図書系のためのアプリケーション開発講習会﹂成果 https://mbc.dl.itc.u-tokyo.ac.jp/products.html ”﹁図書系のためのアプリケーション開発講習会﹂” 講習会資料リスト https://mbc.dl.itc.u-t

leva 2008/11/25

とりあえず大学生協書籍部の在庫検索ができる点につっこませてほしい

リンク

テーブル行を手動でソートするスクリプト - Archiva

前回のサンプルを踏み台に、テーブル行を並び替えるスクリプトを作ってみる。というかコレが本当にやりたかったこと。詳しい動きは... 任意の行を選択する (選択行をマーキング) 別の行を選択する 2.の直前に1.の行を移動するまあ暫くやってみれば解ると思う。てきと～にプチプチ・ソートと名付けよう。並び替えるときに同時に<input>タグのvalueも再設定してたりするんだけど、これに意味があって、まあ要するに表示メニューの並び替えを変更/登録するWebアプリのために作ったスクリプトなんだ。なかなかウケは良いですよ？ Webでのドラッグ＆ドロップは労力に見合うほどの効果があるか疑問だった、って判断しただけですけどね！ p.s.: ちょっと追記。使いやすいドラッグ＆ドロップの設計はたいへんだ、ということ。もちろんこのスクリプトの動作も解りにくい。けど、ツールチップを表示するとか選択後のclass

leva 2008/11/22

んー、なんてか並び替え操作のアフォーダンスがないので、初見では並び替え方がわかりませんでした。ドラッグ&ドロップのがより直感的な気もするんですが / （追）C/Pでベストなものを選んだと言うことですね。

javascript

リンク

javascript で wait処理 - 新みのる日記

Javascriptではwait処理はない。でも、ある処理Aが完了した後に、処理Bをして欲しい場合が往々にしてある。例えば、以下のような処理。 var a = func1(); func2(a); 通常の場合だと、この処理はfunc1 → func2と処理される。だけどfunc1の中で、setTimeoutやsetIntervalが利用されてると、うまくいかないケースがある。例えば、以下のケースを実行すると var a = 0; function func1(){ if( a < 10){ a++; alert("hoge" + a); setTimeout("func1()", 500); } else{ alert("END"); return a } } function func2(val){ alert ("call func2: " + val); } var val

leva 2008/11/21

なるほど、確かに他のがいやに冗長に見えてくる

javascript

リンク

http://typeface.neocracy.org/

leva 2008/10/28

font-family: WebFont; が類似技術だと思うけど、使いどころが難しいな

リンク

Safari4 と IE8 で実装された DOM Storage とは何か - IT戦記

はじめに皆様 JavaScript のスピード競争が激化し、 ECMAScript 3.1 の仕様の策定が進むなど、激動の JavaScript 時代をいかがお過ごしでしょうか。さて今日は、今、ちまたで大ブレイクの兆しを見せている DOM Storage という仕様を紹介したいと思います。 DOM Storage とは何かまず、 DOM Storage とはどんなものなのでしょうか。とても簡単に言ってしまえば、とてもたくさんのデータが保存できてサーバーに自動で送られない Cookie みたいなものです。さらに、 Cookie とは違って JavaScript からとても扱い易く作られています。では、この DOMStorage の具体的なソースコードを見てみましょう。 <!DOCTYPE html> <html> <head><title>DOMStorage の使い方</tit

leva 2008/09/25

ログイン情報のひも付け無しでウェブアプリを体験してもらう際に、キャッシュを持たせて高速化を図るような用途に使えるのかな。OperaやiPhoneが扱えないから、あくまで補助的な技術になるだろうけど使ってはみたいね

リンク

あと１％離脱を減らすフォームのテクニック (ユーザビリティ実践メモ)

資料請求や申し込みフォームにおけるユーザの離脱を防ぐ方法はこれまでにもご紹介してきましたが、今回は「さらに一歩」改善するためのテクニックをご紹介いたします。例えばECサイトのフォームでは支払い方法や配送方法など、ユーザに様々なオプションを選ばせることがよくあります。選択肢が多いことは利便性にも繋がりますが、一方でそれが離脱の原因になっている可能性もあります。ユーザはフォームが縦に長かったり入力欄が多く見えると、「入力が面倒そう」と思い離脱の可能性が増えます。以下は改善例です。支払い方法を選択するラジオボタンをクリックしてみてください。選択したオプションに関連した情報だけを出す、言い換えると「要らないものは隠してしまう」のです。クレジット決済をしたいと思っているユーザには、銀行振り込みや代金引換の注意書きは不要ですから、余計な情報を隠すことでフォームが簡単に見え、離脱を減らすことが

leva 2008/09/17

下手にプログラミングに足突っ込んでいると、少し面倒だなと知らぬ間にこういう手段を隅にやってしまってるときがあって、反省させられる

リンク

Firefox 3.1のHTML 5対応を検証--Drag and drop API - builder by ZDNet Japan

HTML 5のドラッグ＆ドロップAPI HTML 5では新たにDrag and drop APIが追加される。これによって、オブジェクトがドラッグ／ドロップされた際に発生するイベントを処理する標準の方法が提供されることになる。 Firefox 3でもドラッグ＆ドロップに関するイベントがサポートされているが、Forefox 3.1ではHTML 5のAPIがサポートされ、標準的な方法でドラッグ＆ドロップが処理できるようになる予定だ。 HTML 5のDrag and drop APIでは、オブジェクトがドラッグおよびドロップされた際のイベントを表すDragEventインタフェースが定義される。DragEventはドラッグの開始元から送出されるものと、ドラッグのターゲットから送出されるものがあり、それぞれ表1、表2に示すイベントがある。表1 ドラッグの開始元のエレメントから送出されるイベントイ

leva 2008/09/02

こういうAPIをXHTMLでも手軽に使えないかな

リンク

はてなブックマーク

タグ

関連タグで絞り込む (27)

javascriptに関するlevaのブックマーク (82)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第1週）

月間はてなブックマーク数ランキング（2024年6月）

今週のはてなブックマーク数ランキング（2024年6月第5週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス