EExt Japan - Sencha Touch登場 - モバイル用HTML5フレームワーク
Ext CoreはダイナミックなWebサイト構築に最適な軽量かつ高機能なクロスブラウザー対応のJavaScriptライブラリです。その特徴は： ファイルサイズがコンパクトな約25kb (ext-core.jsをgzip圧縮した場合) 柔軟かつ利用しやすいオープンソースライセンスのMITライセンス Ext開発メンバーにより執筆された体系的かつ網羅的な75ページのマニュアル これまでのExt JSを同じ使い慣れた直感的なAPI Ext JS 2.2 Ext JSはリッチインターネットアプリケーション開発のためのクロスブラウザ対応JavaScriptライブラリです。 高性能でカスタマイズ可能なユーザーインターフェイス 優れた設計、文書が豊富、拡張性の高いコンポーネントモデル 商用ランセンスとオープンソースライセンスが利用できます Ext JS 3.0とExt GWT 2.0が
横に長くなりがちなテキストも自動でサイズ調整してレイアウトを崩させないjQueryプラグイン「Shorten」:phpspot開発日誌
横に長くなりがちなテキストも自動でサイズ調整してレイアウトを崩させないjQueryプラグイン「Shorten」 2010年12月14日- Shorten - A jQuery Plugin for Truncating Styled Text 横に長くなりがちなテキストも自動でサイズ調整してレイアウトを崩させないjQueryプラグイン「Shorten」。 ブロック要素に長いテキストがあって、折り返されないような場合、レイアウトが崩れてしまいますが、このプラグインを使えば、次のように、長いテキストも最後を ... more のように短くすることが出来ます。 $(element).shorten() メソッドを呼ぶだけですが、width で、収めたいサイズを、tail で、続きへのリンクを設定できたりします。 .shorten({width: 400, tail: '<a href="">..
iPhoneのようにフリック操作でスクロールできるjQueryプラグインつくった - テクメモ
iPhoneやAndroid風にマウスでフリックスクロールできるようにするjQueryプラグインつくりました。 ページ末端を過ぎると戻るような動作を再現しています。ページ区切りを設定するとiPhoneのホーム画面のようなUIも実現できます。 現在はアルファ版として公開中。 デモ デモ（ページ全体） ダウンロード コードサンプル ページ一部をフリックできるようにする場合。 $('.selector').flickable(); ページ全体をフリックできるようにする場合。 $(window).flickable(); ページ区切りを作る場合。sectionオプションでセレクタか要素を指定します。 $('.selector').flickable({ section: '.content' }); オプションの取り方などを含め、jQuery UIと同じような実装にしています。 詳しくは、http
Delicious画像APIが過負荷で繋がりにくい場合のJavaScriptで対応方法 | Creazy!
以前に、ボクが作って公開したDeliciousのブックマーク数を画像で表示するAPIですが、 ・Delicious2.0 の被ブックマーク数画像取得APIを作りました [C!] ありがたい事にものすごいアクセスが来ているため Delicious API への接続数上限を超える事が多いらしく正しい値を返さない事が多いです。 現在、Delicious のサポートに ban を解いてほしい旨の連絡は入れてみたのですが、少し時間をくれという返事を頂いております。ですので、もしブログに貼りたいだけでしたらJSONをJavaScriptで呼び出してブックマーク数を表示する方法がありますのでそちらを試して欲しいと思っています。 JavaScriptからDeliciousのJSON APIを取得してブックマーク数を表示する Delicious APIではブックマーク数を調べたいURLをMD5ハッシュに変換
指定位置までスクロールするとレイヤーをにょきっと表示して注意を引くjQueryプラグイン m5noticeDisplay :: 5509
指定位置までスクロールしたときにレイヤーを表示させることができます。 ブログを読み終わったあとに注意を引きたいレイヤーを表示して、ソーシャルサービス等への投稿などを促す効果も簡単に実装できます。（レイヤーの中身は別途必要です） 元ネタは、長谷川恭久さんのcouldから。「いかがでしたか？」というレイヤーが出てくるのですが同じような効果を簡単に実装できます。 上からにょきっと表示する以外にも、指定レイヤーをフェードやスライドで表示させたりできます。 動作サンプル a (上からにょきっと 動作サンプル b (フェード 必要なファイルを読み込む jQueryとm5noticeDisplay.jsを読み込みます。 任意の要素に対して実行する トリガーとする要素に対して実行します。トリガーとなる要素が画面内に入る直前あたりで注目させたいレイヤーを表示します。 HTML via: World Wide
【ハウツー】HTML＋CSS＋JavaScriptでiPhone/Androidアプリ開発「PhoneGap」 (1) HTML＋CSS＋ＪavaScriptでiPhone/Androidアプリを開発 - PhoneGapとは | エンタープライズ | マイコミジャーナル
Notobiは11月1日(米国時間)、PhoneGapの最新版であるPhoneGap 0.9.2をリリースした。PhoneGapはクロスプラットフォーム・モバイルアプリケーションの開発フレームワーク。デベロッパはHTML＋CSS＋JavaScriptを用いて、iPhone/Android/BlackBerry/Symbian/Palmのネイティブアプリケーションを開発できる。各デバイスのモーションセンサやカメラ、GPSにはPhoneGapにて提供されているJavaScript APIをもちいて操作する。同ライブラリはThe "New" BSD LicenseおよびThe MIT Licenseのデュアルライセンスのもとで公開されているオープンソースソフトウェア。 PhoneGapでのスマートフォン別機能対応表 - PhoneGap Supported Featuresより抜粋 iPhone
JavaScriptでEPUBビューアーを自作してみた (1/7)
iPadのiBooksやSONY Reader、Nookなど、多くの電子書籍リーダーがサポートしているEPUB形式はXHTML+CSSがベースになっているので、誰でも自由にビューアーを作成できます。今回のJavaScriptラボは、Webブラウザー上でEPUBデータを表示するオリジナルのビューアーアプリを作ってみましょう。 ビューアーといっても、EPUB形式をきちんと解析して処理するには手間がかかりますので、今回はEPUBに含まれるXHTMLを表示するだけのシンプルなアプリです。それでも、著作権保護機能がかかっている場合を除けばほとんどのEPUBデータを表示できます。 今回のサンプルはHTML5 File APIを使っているので、Firefox 3.6以降でのみ動作します（一部をのぞく）。また、FirefoxのデバッガーであるFirebugを利用しますので、事前にインストールしておいてくだ
カッコよく動くポップアップでより分かりやすくメッセージを表示出来る「JQUERY BUBBLE POPUP」:phpspot開発日誌
カッコよく動くポップアップでより分かりやすくメッセージを表示出来る「JQUERY BUBBLE POPUP」 2010年11月29日- JQUERY BUBBLE POPUP v.2.3.1 - display animated and shadowed "bubble" popups with few lines of code in jQuery カッコよく動くポップアップでより分かりやすくメッセージを表示出来る「JQUERY BUBBLE POPUP」 カーソルを合わせた際に、単にポップアップするのではなく、ポップアップ自体がフェードインアニメーションしながら動きをもって表示されることでより、利用者の注意をひくことができそうです。 見た目も影付きでカッコいいのが特徴です。 デザインは選べます。 何かにカーソルを合わせた時だけじゃなくて最初から特定のエレメント上に表示しておくこともでき
JavaScriptで画面サイズを取得する | かえラボBlog
screen.width 画面幅 ： screen.height 画面高 ： screen.availWidth 有効画面幅 ： screen.availHeight 有効画面高 ： window.innerWidth 表示領域幅 ： （IE非対応） window.innerHeight 表示領域高 ： （IE非対応） window.outerWidth ウィンドウ幅 ： （IE非対応） window.outerHeight ウィンドウ高 ： （IE非対応） $(window).width() 表示領域幅 ： $(window).height() 表示領域高 ： document.documentElement.clientWidth 表示領域幅 ： document.documentElement.clientHeight
Ajaxやタブ切替には必須かも？ブラウザの「戻る」「進む」を有効にするjQueryのhashchangeプラグイン :: 5509
Ajaxやタブ切替には必須かも？ブラウザの「戻る」「進む」を有効にするjQueryのhashchangeプラグイン Ajaxやタブクリックなどのイベントでもブラウザの「戻る」「進む」を有効にすることができるjQueryのhashchange eventというプラグインを紹介します。同じような効果を得られるスクリプトより断然使いやすいのでおすすめです。 使い方はとても簡単で windowにhashchangeイベントをbindするだけです。 $(window) .hashchange(function() { Hoge(location.hash.replace('#', '')); }); // ハッシュフラグメントが変わったときにHoge()を実行する $(window).hashchange(); // Windowロード時に実行できる Ben Alman » jQuery hashc
JavaScript初級者から中級者になろう
JavaScript。「ジャヴァスクリプト」と読みます。主にWebページに動きを与えるものです。 現在では結構多くのページに使われていますが、その多くはとてもレベルが低く不適切なものです。もっと質の高いJavaScriptを使える人が増えるといいなという思いから、このページを作りました。 初級者の基礎知識 本文を理解するにはJavaScriptの知識がそれなりに要るので、JavaScriptがそもそもあまり分からない人は、この辺を読んでみましょう。 基礎第一回 基礎第二回 基礎第三回 基礎第四回 基礎第五回 基礎第六回 第一章 オブジェクト オブジェクトとは オブジェクトの実体 配列のコピー オブジェクトと関数 第二章 DOMの基礎 HTMLと木構造 DOMとは 基本的な操作とテキストノード 木構造の操作：ノードの除去 木構造の操作：ノードの追加 木構造の操作：さまざまな機能 木構造の操作
画像表示に関連するJQueryプラグイン15＋1個紹介
JQuery便利ですね。Javascriptを最近始めたので今まで触る機会が有りませんでしたが、実に素敵ライブラリです。今回は画像表示系に絞って、プラグインを紹介したいと思います。 （プロトタイプ.jsをはるか昔に触ったことがありますが、つらい記憶しかございません。良い時代になったものです。ヘッダ絵は可愛かったから貼った。他意はない。）
Xlune::Blog
可変グリッドレイアウトjQueryプラグイン(jquery.vgrid.js) なんだか可変グリッドレイアウトがまた流行ってる（？）ようなので、jQueryプラグイン書いてみた。 一通りブラウザで表示確認ぐらいはしたけど、テストは十分じゃありません。 Demo Demo Index 利用方法はデモのソースを確認してください。(ウィンドウリサイズして動きも確認してね) Download github zip file 利用には、jQuery本体とjquery.easingプラグインが必要です。別途読み込んでください。 更新情報 v0.1.8 (20120421) display属性で、グリッド要素の表示/非表示を切り替えれるように修正しました。 demo009を追加 v0.1.7 (20111110) 複数の可変ボックスを指定すると、開始位置がおかしくなるバグを修正しました。 demo008
マンガで分かる JavaScriptプログラミング講座
はじめに 「マンガでわかるJavaScript」は、難しそうに思えるプログラムを、簡単そうに見えるマンガで解説するという初心者向けの入門講座です。 架空の高校生たちに教える形式で、プログラムの基礎から応用を、解説していきます。一通りのマンガを読めば、かなり実践的なところまで、プログラムを書けるようにしていきます。 （マンガは、左上から右下へと読みます） プログラムというと、けっこう大変そうに思えますが、この講座のテーマは「面倒くさいことを楽にする」です。面倒臭がりで、手抜き大好きの女子高生を主人公にして、楽しくプログラムを学んでいくことにします。 主な対象読者は「これからプログラムを学んでみたい人」「Webの世界に関わっていてJavaScriptを学んでみたい人」「昔JavaScriptを触っていたけど最新のトレンドが分からないので改めて学んでみたい人」などです。初心者だけでなく、Webデ
DD_belatedPNGを使ってる場合でもスマートロールオーバーが動くようにする - orangain flavor
はじめに DD_belatedPNGを利用すると、IE6でPNGファイルを透過させることが出来ます。 DD_belatedPNGはITキヲスク | IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」で解説されているように、簡単にそして高速に透過PNGを表示できるという特徴があります。 しかし、ITキヲスク | IE6用透過png対応策、DD_belatedPNGの使用法と注意点で解説されていますが、次のような問題点があります。 ここで、img要素に使用する際のいくつかの注意点を。 ただimg要素にpng画像を使うだけなら、上記で何の問題もありません。 しかし、png画像のimg要素にロールオーバーを設定したい場合、少し注意とコツが必要なんです。 たとえば、png画像のimg要素を<a>要素で囲んでリンクボタンとして、img要素をロールオーバーさせたい場
１個目のselectで２個目のselectの内容を簡単に変えられるjQueryプラグイン「Doubleselect」:phpspot開発日誌
１個目のselectで２個目のselectの内容を簡単に変えられるjQueryプラグイン「Doubleselect」 2010年05月26日- jQuery Doubleselect Plugin １個目のselectで２個目のselectの内容を簡単に変えられるjQueryプラグイン「Doubleselect」。 次のように、１個目のSelectボックスの内容によって２個目のselectボックスの内容が容易に切り替えるようなUIが簡単に実現できてしまうプラグインです。 １個目が野菜(Vegetables)の場合は、tomato, potato, asparagus が表示されます。 １個目をフルーツ(Fruits)にすると、apple, orange, kiwi, melon になります。 いざ実装しようとすると面度臭そうなのですが、jQueryプラグインによって、比較的簡単に実装できま
iPhoneとWebサービスの連携手法
最近、iMovatwitterというiPhoneアプリを出しました。 iPhoneのブラウザは携帯電話のようにGPSやデジカメとインテグレーションすることを考えられていないので、GPSを使った「イマココ」や、デジカメと連携する「写ツ」をiPhoneで使うためにアプリ側で吸収しました。 このアプリでやりたかったことの一つが、UIWebViewというブラウザコントロールとWebサービス/アプリとの連携でした。 UIWebViewというのは、SafariをiPhoneアプリ内に組み込むコントロールです。 丁度、Flash PlayerをHTMLに組み込むようにWebブラウザをiPhoneアプリ上に表示することができます。 このiPhoneアプリ上のWebブラウザとWebサービスの主な連携ポイントとしては、大きく３つあります。 １．iPhoneアプリからWebページを制御する ２．Webページのメ
入力最大値に達したら自動で次の要素に移動させられるjQueryプラグイン「Autotabindex」:phpspot開発日誌
入力最大値に達したら自動で次の要素に移動させられるjQueryプラグイン「Autotabindex」 2010年05月24日- Autotabindex Example 入力最大値に達したら自動で次の要素に移動させられるjQueryプラグイン「Autotabindex」。 例えば、携帯番号を入力する場合など、一定の文字数以上になった場合に、TABキーを押すなどせずとも、次のフィールドにカーソルを合わせることができます。 TABキーを知らないライトユーザーな方々はマウスでいちいち移動していたりもしますが、このプラグインでユーザビリティを上げられそうです。 JavaScript で１から実装するとなると、少し面倒な上に、要素ごとにonkeydownを入れたりしてコードが汚くなったりしますが、jQueryプラグインなので１行で次のように初期化できます。 $(document).ready(fun
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
noupe - THE magazine for webworkers and site owners
フォームのテキストエリアをより使いやすくするテクニック集