IDEA * IDEAドットインストール代表のライフハックブログ
長い文書ページでもナビゲーションを付けて分かりやすくできるjQueryプラグイン「jQuery One Page Navigation」。:phpspot開発日誌
長い文書ページでもナビゲーションを付けて分かりやすくできるjQueryプラグイン「jQuery One Page Navigation」。 2010年09月30日- jQuery One Page Navigation Plugin | Trevor Davis 長い文書ページでもナビゲーションを付けて分かりやすくできるjQueryプラグイン「jQuery One Page Navigation」。 このプラグインを使うと、次のように左カラムにページ番号のように表示して、今どこら辺か？というのを分かりやすく表示し、かつ1ページなのに複数ページに分割することが可能。 使いどころは様々ですが、使い方次第で簡単にページの使い勝手を高めることができそうです。 ナビゲーションをクリックすると、指定したページの位置にアニメーションしながらスクロールされます。 更に、単純にスクロールしているだけで、左カ
JSONをツリー表示で編集出来るWebアプリ「JSON Editor」 - 強火で進め
JSON Editor by katamari http://jsoneditor.net/ 昨日、紹介した「JSONLint」の事をtwitterで話したら、自分はこれを2年前から使ってると「JSON Editor」というのを紹介して貰いました。 早速、どんなものかと見てみたら凄いですねコレ、表示はツリー表示に成ってデータの有る所をクリックするとその場で編集出来ちゃいます。ショートカットキーも充実しています。 JSONはもちろん、XMLでも出力出来ちゃいます。 調べてみたところ2年前から有るツールで作者は日本人の方みたいです。 JSON Editor 公開しました - pm11op のブログ http://pm.11op.net/2008/05/json-editor.php これは超便利ですね。これから積極的に使って行こうと思います。 ちなみにAIR版も有るみたいです。 RESTful
Twitter関連のjQueryプラグイン｜Twitter関連｜Web関連特集｜PHP & JavaScript Room
PHP、JavaScript、Ajax、HTML/XHTML、CSS、Webページ埋め込みによる音声・動画配信方法など、実用的なプログラミング・テクニックを解説A jQuery Twitter Ticker 〔TLをティッカー表示〕 Adding Twitter to your site with jQuery Part 2 〔指定したユーザーのタイムラインを取得して表示するjQueryプラグイン〕 Display your latest Twitter update with jQuery 〔あなたの最新のつぶやき1件を取得して表示するjQueryプラグイン〕 How To Create A Twitter jQuery Plugin 〔Twitter jQueryプラグインの作り方〕 jqtwitter 〔指定したユーザーのつぶやきを表示するjQueryプラグイン〕 jQuery –
「○○氏の声」を次々と表示できるjQueryプラグイン「Quovolver」:phpspot開発日誌
Quovolver | a simple jQuery plugin for revolving quotes 「○○氏の声」を次々と表示できるjQueryプラグイン「Quovolver」。 「これは素晴らしい！革命的である」- by. phpspot みたいなものをアニメーションしながら次々表示できるjQueryプラグインです。 商品の説明ページなんかに利用者や著名人の声などとして表示する際に使えそうです。 アニメーションしながら切り替わります。 使い方は、必要なJSを読み込んだ後、要素を複数並べておきます。 例えば次のように。 <blockquote>aaa</blockquote> <blockquote>bbb</blockquote> あとは、$('blockquote').quovolver() のようにするだけです。 関連エントリ 通貨、日付のグローバリゼーションを可能にする
JavaScriptでのテストや開発についてのアウトプット - Block Rockin’ Codes
最近JavaScriptを個人的に勉強しているんですが、そんなJS初心者ながら色々試すなかで気が付いた開発とかTDDとかについて色々思うところをアウトプットしてみようかと思います。 一番多いのは、ClientSideJSで、使ってるのはjQueryとQunitが中心でした。 でもこれからは別のフレームワークや、ServerSideJSなんかも出てきますし、 今読んでる本が終わったら、こっちの本も見てみたいと思っているので、 Test-Driven JavaScript Development: Safari Books Online その前にこれを書いておこうという目的です。自分に付ける一つのTagという感じです。 あまり一貫性に拘らず、垂れ流したいと思います。 Ajax と API 以前こんな記事を書いたように、サーバ側がAPIでデータを提供し、ロジックをクライアント側に固めるタイプの開
どんなHTML要素もカルーセル化してしまえるjQueryプラグイン「CarouFredSel」:phpspot開発日誌
infinite, circular jQuery carousel --- CarouFredSel 2.1.3 どんなHTML要素もカルーセル化してしまえるjQueryプラグイン「CarouFredSel」。 指定した要素以下に<div>や<img>を単に並べるだけでカルーセル化してくれるプラグインです。 少ないスペースで多くのコンテンツを格納するのに便利です。 横だけでなく、縦スクロールもオプションで指定することが出来ます。 ページ下部にexamplesが多数紹介されているので他にも色々な機能があることを確認できます。 関連エントリ 関連アイテムを出す場合等に使えそうなjQueryカルーセル「bxCarousel」 JavaScriptで実装するクルクル回転する3DカルーセルUI実装ライブラリ 無限に回転するカルーセルＵＩ実現用jQueryプラグイン実装チュートリアル
Node.jsを使ったWebベースのJavaScript IDE·Cloud9 IDE MOONGIFT
Cloud9 IDEはJavaScript製のオープンソース・ソフトウェア。Webアプリケーション化が進んでいながらも、なかなかこれといった決め手が出てこないのが開発環境のWebアプリケーションだ。やはりローカルのテキストエディタ以上の環境は出てこないのだろうか。 Webブラウザとは思えないほどリッチなUI 乗り換えるメリットがあれば可能性はあるだろう。ローカルでコーディングしてビルドして配布するといったものは難しい。そうではなくサーバサイドで全てが完結するものが良い。そこで登場したのがCloud9 IDEだ。 Cloud9 IDEはNode.JSで作られたNode.JS用の開発環境だ。JavaScriptとあってWebブラウザとの親和性も高い。基本は2ペインの構成で、左側にファイルやフォルダのブラウザ、右側に選択したファイルの内容が表示される。行番号やハイライトにも対応している。 機能拡
HTML5活用の現時点での落としどころ
HTML5完全準拠をうたったIE（Internet Explorer）の新バージョン「IE9」ベータ版が2010年9月15日に一般公開になった。Webブラウザーシェアの約6割を占めるIEであるが、現バージョンであるIE8は、HTML5対応の点でFirefoxやGoogle Chromeなど主要なライバルWebブラウザーに大きな遅れをとっている。ベータ版とはいえ、HTML5に対応したバージョンがリリースされたことで、HTML5に対する注目度は一気に高まっている（関連記事1）。 HTML5の大きな特徴の一つは、Webアプリケーションのプラットフォームとしての機能強化である。現在のHTML4はHTMLのタグの仕様を規定するものだ。そのためHTML4をベースとしたWebブラウザーでは製品ごとにJavaScriptプログラムの挙動が異なることがあり、それがWebアプリケーション開発者にとって悩みの種
JavaScriptで比較的本気でお絵描きアプリを作ってみた | fladdict
JavaScriptで結構ガチに、お絵描きツールを作ったみました。推奨ブラウざは、IEとOpera以外。 実装期間はポケモン・ホワイトをやりつつ、トータルで1週間ほど。 今後、人生をFlash, iPhone, HTML のどの方向にリソース配分するか？ということで、実験的にHTMLも触ってみるテスト。やってみたら、結構いける感覚。IEさえ無視すれば。 以下、雑感。 Flash と JSの比較 かつてFlashが持っていた、実行速度という究極のアドバンテージはもはやないに等しいようです。 いままで「指先ツール」のような負荷の高い機能はFlashでも大分辛い機能でしたが、現在のJSでは遜色なく動きます。カラーホイールも全部、リアルタイムに計算してグラデーションを生成していますが、無問題。 こうなると疑問になってくるのは、Flashの優位性。 正直、現在WebにおけるFlashのプレゼンスは大
Safari拡張の作り方 - os0x.blog
Safari拡張をいくつか作って大体感覚は掴めたので、ざっくりと拡張の作成手順を解説してみます。 なお、Windows版で作業していますが、Macでもほとんど同じだと思います。 Safari拡張とは 最初に、Safari拡張とはなにか、について。Safari拡張はHTML/CSS/JavaScriptをベースに、ブラウザ側が用意したAPIを使ってブラウザを便利にするモジュールです。通常、JavaScriptだけではクロスドメインの問題など、実現できることに制限がありますが、その点を拡張用に用意されたAPIで補います。そのため、APIが用意されていない部分については対応できないという制限があります。しかし、開発のし易さ、ウェブとの親和性の高さからアイディア次第で便利で強力なツールとなるのがSafari拡張・Chrome拡張です。 なお、現状のAPIは暫定的なもので、ここで紹介するのもあくまで
Web APIって何？
Web APIとJSON Web上ではネットショッピング、ブログ、SNSなどさまざまなサービスが提供されています。これらのサービスの中にはWebブラウザから利用するだけでなく、サービスの機能の一部をプログラムから利用可能なAPI（Web API）として提供しているものもあります。Web開発者はWeb APIを利用したアプリケーションを開発したり、既存のWebサイトにWeb APIを利用した機能を追加することなどが可能です。 なお、Web APIを使用し、複数のサービスの機能を組み合わせたり、独自の機能を追加したサービスを構築することをマッシュアップと呼びます。 これらのWeb APIの多くはXMLで情報を返すものが多いのですが、中にはJSONで情報を返却するWeb APIも存在します。そこで、今回はJSONを使用するWeb APIの利用方法を紹介します。 Ajaxのクロスドメイン制約 しか
構造化テキストの間違ったエスケープ手法について : 404 Blog Not Found
2010年09月22日21:30 カテゴリLightweight Languages 構造化テキストの間違ったエスケープ手法について 昨晩のtwitter XSS祭りは、ふだんもtwitter.comは使わない私には遠くの祭り囃子だったのですが、せっかくの自戒の機会なので。 Kazuho@Cybozu Labs: (Twitter の XSS 脆弱性に関連して) 構造化テキストの正しいエスケープ手法について 正しいアプローチは、全てのルールを同時に適用することです。 これは残念ながら(おそらく)必要条件であっても十分条件ではありません。 こういう(かなりええかげんな)正規表現でtweetをparseしていたとします。 re_http = '(?:https?://[\\x21-\\x7e]+)'; re_user = '(?:[@][0-9A-Za-z_]{1,15})'; re_hash
JavaScript用暗号ライブラリ色々まとめ:phpspot開発日誌
JavaScript Cryptography JavaScript用暗号ライブラリ色々まとめ。 次のように多数のJS用暗号化ライブラリがまとまっていて、JSで暗号化をするような場合にはもうお腹いっぱいと言ってしまいそうな量が紹介されています。 自分で暗号を実装する、というのは時間がかかりますのでこうしたライブラリを活用させて頂いて素早く開発ができそうです。 関連エントリ PHP暗号化ルーチンのサンプル集 PHPで暗号化の際に便利に使えるCrypterクラスが公開 PHPで暗号化・復号化
昨日騒ぎになったTwitterのXSS脆弱性によって実際に受けそうな被害とその対策 - monjudoh’s diary
何が出来るのか どんな脆弱性かの詳細はこちらを参照2010 年 9 月 21 日現在のツイッターのバグ(脆弱性)について 外部JavaScriptを読み込むコードを仕込めたので、 どんなJavaScriptでも実行できる状態でした。 以下、JavaScriptの実行によってTwitter上で出来る事。 セッションハイジャック JavaScriptからcookieを参照できるのでログイン状態のセッションIDも参照できます。 また、任意のJavaScriptが実行できる以上、参照したセッションIDを攻撃者のサーバ等に送信することも出来ます。 攻撃者は奪ったセッションIDをcookieに設定すれば、被害者のアカウントでtweet,direct messageの閲覧・送信が出来ます。 確認してみたところ、ログイン状態のセッションIDはログアウトしても無効にはなりません。 設定→パスワードからパスワ
イヌでもわかるJavaScript講座
このJavaScript講座はプログラミング知識がない人もサンプルをただ埋め込めば使えるように作られています。ステップの段階で少しずつJavaScriptを説明していきますので、各ステップの内容がすべて把握できなくても、あとでわかってくると思います。えっ？と思う個所があっても、それはそのステップの趣旨ではないところですので、その個所はどこかのステップで説明します。深く考え込まずに、各ステップを適当にすすめていってください。 なお、本講座のサンプルを使ってＨＴＭＬファイルがぶっ壊れたり、マシンから煙や火が出ても一切責任を負いません。バックアップはこまめにしましょう。(^^; また、サンプルを無断で使用することを禁じるわけがありません。勝手に許可無く使ってください。
JavaScript対応のIDEをまとめてみた
JavaScriptに対応してるIDEのメモまとめ。 Aptana 有名どころでEclipseのプラグインとしても使えます。 IDEらしくちょっと重たいけど、整形やデバッグやスニペットなど大抵の機能が入ってる。 IDE内でブラウザプレビューができて便利。 最近のバージョンだとFirefoxのプレビュー機能がデフォルトで入ってないので別途プラグインを入れる必要がある。 Aptana Studio 2.0.3－Firefoxプレビュータブ – ゆちの備忘録 WebStorm JavaScript EditorにJavaScript関係の対応について書いてある。 HTMLとかまぜこぜでも補完ができてる。 追記:ちょっと触ってみたら実は凄かった 追記2:使い勝手などをまとめて見ました。 最強のJavaScript IDE 「WebStorm」を使ってみた Komodo IDE デバッグ系機能がない
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery UIのインタラクションを使ってみよう
IDEA * IDEA
HTML5、JavaScript、Android を勉強しよう