textareaをたった一行のコードで拡張してくれる『WMD-editor』 - 100SHIKI ～ 世界のアイデアを日替わりで ～使いどころが微妙に難しいが、便利な人には便利そうなのでご紹介。 WMD-editorはHTMLのtextareaを拡張してくれるJavascript。 これを導入しておけば入力したテキストをリスト形式にしたり、見出しをつけたりといったことが可能になる。 またそのようにして入力されたテキストをリアルタイムにプレビューするタグも用意されている。 インターフェースがリッチなサービスが人気の今、既存のHTMLタグを拡張するこうした仕組みはおもしろいですね。
Rails4.0でangularjsを使ってRESTfulなajaxを実装する - is Neet
長文注意。 angularjsについて今更ながらに触り始めて色々と感動したので纏めておく。 angularjsがどういったフレームワークかは公式のチュートリアルを眺めてたらぼんやりと把握できると思うので今回その辺の話はあまり触れない。 http://angularjs.org/ angularjsのAPIについては公式のドキュメント含めて様々なメディアやブログに取り上げられているが、導入から体系的に語られてるものはあまり無い印象だったので、僕のブログでは導入から具体的な目的に沿った実装方法を紹介していこうと思う。 ちなみに自分のangularjsへの理解も触り始めて一週間程度なのでだいぶ甘い。 angularjsを一週間やってみた感想 最初の2日くらいがだいぶつらい。 飲み込みが早い人ならすぐに使いこなすのかもしれないが、angularjsはdirective, controller, f
Javasciptだけで実現するやたら高機能なグラフ作成ツール『EJSChart』 | 100SHIKI
グラフ作成ツールが人気ですよね。べつやくメソッドも地位を確立しつつあります。 さてそうした流れを受けてご紹介したいのがEJSChart。Javascriptだけで実現できるグラフ作成ツールです。 残念なことにまだ公開前なので全容は不明ですが、やたら高機能らしいです。 ズームやスクロールが可能であるばかりか、マウスイベントを拾ったり、ヒントの表示などもサポートしている模様。ぐっとインタラクティブな表現が可能になりそうですね。 また、グラフの種類も豊富、かつ、XMLによるデータ連携もできるようです。 サイトから推測するに有料かと思われますが、早く試してみたいところですね。
Webアプリ開発者のためのHTML5セキュリティ入門
Enterprise x HTML5 Web Application Conference 2014の発表資料です。
2行追加するだけでWebサイトを高速化するInstantClick.io - atskimura-memo
Before visitors click on a link, they hover over that link. Between these two events, 200 ms to 300 ms usually pass by (test yourself here). 引用：InstantClick — JS library to make your website instant リンクにマウスオーバーしてからクリックするまでには200msから300msほど時間がかかるそうです。実際このテストページでクリックしてみるとMacのトラックパッドだとさらに遅く500msくらいかかってました。 InstantClick.ioはその間に裏でリンク先ページをロードして勝手にリンクをpjax化してしまうという高速化ライブラリです。 やってることはRails4のturbolinksと似てます
自分のサーバーでメッセンジャーを運用できる『ajax im』 | 100SHIKI
なにかと便利なメッセンジャーであるが、自分のサーバーで運用したい、というニーズもあるだろう。そうしたときに便利そうなのがajax imだ。 このサイトではサーバーにインストールする、Ajaxを利用したメッセンジャープログラムをダウンロードすることができる（サーバー側はPHPで動作）。 デモを試してみればわかるが、スタイリッシュなインターフェースと軽快な動作がなかなか小気味良い。 サイトのユーザー向けにちょっとしたツールを提供、といった利用が可能だろう。またソースごとダウンロードできるのでプログラミングの勉強にも最適だ。 便利なツールを自分のサーバーで提供できるようにする。そうした発想は悪くないですね。
jQueryの可能性を知りたいなら・・・『jQuerySTYLE』 | 100SHIKI
最近はよくjQueryを使うのだが、他の人がどんな風に使っているかに興味がある。 もしあなたが同じように思っているならjQuerySTYLEが参考になるだろう。 このサイト、jQueryが使われているサイトのギャラリーである。 また、それぞれのサイトでjQueryのどの機能（Ajaxだとかナビゲーションだとか）が使われているかもアイコンで一目でわかるようになっている。自分の興味にあわせて覗いてみるといいだろう。 自分が使っているものを他の人がどう使っているか。そんなことに気づかせてくれるこうしたサイトはいいですね。
Ajaxを使ったファイルマネージャをPHPで作ろう - ＠IT
JavaScriptとPHPの通信 JavaScriptから見たPHPからのリクエストとPHPから見たJavaScriptからのリクエスト Ajaxを使わずにファイルマネージャを作ろう Ajaxを使わないでPHPファイルマネージャの概要と実装スタイル Ajaxを使ってファイルマネージャを作ろう Ajaxへの改変部分と注意点／ファイルマネージャの制限／Ajaxを用いたオープンソースのPHPアプリケーション／phpFreeChat／自前WebにphpFreeChatをコピーしてみよう JavaScriptはブラウザ上で実行されるインタプリタ言語である。PHPはサーバ上で実行されるインタプリタ言語である。JavaScriptとPHPのメッセージの流れは基本的に＠IT上のほかの記事を参考にしてもらうといいだろう。 ■JavaScriptでの実装例 下記はJavaScriptからサーバ上のURL、「
Ajaxフォトアルバムのフェードイン画像フレームを作ろう －＠IT
本連載では、Ajaxを活用したインタラクティブなWebアプリケーションを、ゼロから開発する。3回の連載で、簡単なWebフォトアルバムを完成させる予定だ。完結した機能を持ったAjaxアプリケーションを作り上げるステップを、具体的に解説していきたい。 JavaScriptと非同期データ送受信を組み合わせた、Webアプリケーション開発スタイルである「Ajax」は、このキーワードが発表されたのが今年初めのことだとは思えないほどの発展を遂げており、日々新しい実験や、それを組み込んだサービスが発表されている。 そろそろ実際にAjaxを活用したWebアプリケーションを開発してみようか、と考えている開発者も多いことだろうが、ではAjaxで何をどう作ったらいいんだろう？ という部分で立ち止まってしまってしまっているのではないだろうか。 そこで本連載では、単なるサンプルではなく、完結した機能を持ったAjaxア
アルファ公開したアドビ「Apollo」を早速使ってみた ― ＠IT
2007/03/19 FlashやHTML（Ajax）、PDFなどWebベースの技術を使ってクライアントアプリケーションを開発できる、米アドビ システムズのウィジェット技術「Apollo」の開発者向けアルファが、3月19日にアドビのWebサイトで公開された。「脱Webブラウザ」を標榜するApolloはどのような技術なのか。アルファ版をダウンロードし、サンプルアプリケーションを試してみた。 アドビが公開したのは、Apollo対応アプリケーションを稼働させるためのランタイムと、Apolloアプリケーションを開発するためのSDK。ApolloはWindows、Linux、Macで稼働するクロスプラットフォームが特徴だが、今回のアルファ版ではWindows版とMac版のみを用意している。Linux版は今後の対応になる。 SDKはFlashやHTML、PDFなどで作成したデータをアプリケーションにま
＠IT：古くて新しいAjaxの真実を見極める
Ajax推進委員会 監修：ゼロベース 2005/8/2 2005年2月半ばから、「Ajax」という言葉がアルファギークたちの間で一気に広まった。「Webインターフェイスの新しい手法」「画期的なWebアプリケーションの仕組み」であるとして開発者たちの人気を集めるAjaxとは何なのか、その真実を見極めてみよう。 Ajaxとは「Asynchronous JavaScript and XML」の略で、Webブラウザでの表示部分を含めたWebアプリケーションの作り方を指す名前だ。具体的にはXML形式のデータをJavaScriptで処理することで、ブラウザのHTTPによるページ遷移とは非同期にサーバとやりとりして「動的に」ページ内容を変更する仕組みを指す。 Ajaxを実現する詳細なコード例は後述するとして、まずはAjaxが実現するWebアプリケーションがどのような動作をするのか、既存のWebアプリケー
＠IT：Ajaxを使ったamazon検索をPHPで作ろう
Ajaxは今年非常にホットな話題の技術である。 ＠ITをはじめ、さまざまなところでもAjaxについての記事が目立つようになってきた。 ここでは、筆者が携わっているPHPかいわいでのAjaxの動きについて紹介していきたい。 Aajaxとは「Asynchronous JavaScript + XML」の略である。JavaScriptはいわずと知れたクライアント（通常ウェブブラウザ）サイドの技術であり、そこからXMLHttpRequestというものを利用し、ページ推移をせずにサーバ／クライアント間でどんどんデータ交換をしていく技術である。これとDHTMLを併用することでいわゆるAjaxになる。 この辺りの詳しい内容はAjax推進委員会による「古くて新しいAjaxの真実を見極める」を参考にするといいだろう。 PHPはサーバサイド技術、前述のとおりAjaxで用いられるJavaScriptはクライアン
Webアプリのユーザビリティを改善しまくるAjax ― ＠IT
Ajax うきうき Watchでは、Ajaxを使ったWebアプリケーションやサービス提供者、ベンダの動向から「うきうきするような」面白いもの、確実に押さえておきたいものを厳選してお届けしていきます。 Ajax、それはWebアプリケーションのユーザビリティを改善する切り札である。古い技術を組み合わせ、魔術のごとく生まれ変わった新しいファッションである。 今回より、なるべく密に、Ajaxの動向をウォッチングしていきたいと思う。 基本的には、新しい話題を中心に、厳選した面白い話題を提供していきたいと思うが、今回だけは初回でもあり、これまでのAjaxに関する話題から面白いもの、確実に押さえておきたいものをピックアップしてみたい。 なお、ここでは主に日本語で読める情報について取り上げていく。ただし、特に重要なものについては、英語の情報を扱う場合がある。 Ajax: Web アプリケーション開発の新し
アドビのAjaxフレームワーク「Spry」を使ってみよう ― ＠IT
先月5月11日、米アドビシステムズが発表したAjaxフレームワーク「Spry」は、最低限のプログラミングでAjaxスタイルのWebページ構築を可能にする、Webデザインフレームワークだ。今回は数あるJavaScriptライブラリの中でもユニークなフレームワークであるSpryを紹介し、実際にSpryを使ったサンプルを解説しながらその機能を探っていきたい。 ■Spry framework for Ajax Ajaxが騒がれた昨年から今年にかけて、Ajaxアプリケーション開発のためのJavaScriptライブラリ、フレームワーク、開発環境などの開発が盛んだ。多くのオープンソースコミュニティがライブラリやフレームワークを公開しており、「Prototype」や「script.aculo.us」といったライブラリはすでにメジャーな位置を占めて多くのアプリケーションで採用されている。 また、いくつかの企
JavaをJavaScriptに変換するグーグルのツールを使ってみよう ― ＠IT
米グーグルが発表したGoogle Web Toolkit。Java言語で作成したクライアントアプリケーションを、JavaScript＋HTMLアプリケーションに変換するという、まったく異なるアプローチを持つAJAXアプリ開発ツールだ。簡単なサンプルを動かしてみよう（編集部） 2006年5月17日、米国Googleが、Google Web Toolkitをリリースしました。早速Webサイトを見ると、『Google Web Toolkit - Build AJAX apps in the Java language』（＝Java言語でAJAXアプリを造る）という、Java開発者にとって非常に刺激的なキャッチで始まっています。 これまでも、BACKBASE Java Edition、ICESOFT ICEFACES、Nexaweb などAJAX＋Javaでの開発に対応するフレームワーク製品または
[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 | コリス
以前、紹介した「Page Scroller」のバージョンアップ版「Page Scroller ver.3」の紹介です。 追記： 2013年10月26日 ver.3.0.9をリリース jQueryの旧版によるXSSに対応しました。 2011年5月4日 デモおよびダウンロードファイルをjQuery1.6に変更しました。 2011年1月31日 ver.3.0.8をリリース 機能を追加しました。 2010年11月19日 ver.3.0.7をリリース ライセンスを変更しました。 2010年11月17日 デモおよびダウンロードファイルをjQuery1.4.4に変更しました。 2010年9月19日 デモおよびダウンロードファイルをjQuery1.4.2に変更しました。 2009年7月6日 対応ブラウザ（IE8, Fx2.5, Chrome2）を更新しました。 2009年2月23日 ver.3.0.6をリ
![[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc54860ba06deaa45382cf2bddc929515def0354/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fshared%2Flogo-2014050501-en.png)
[JS]指定した要素を抽出して、自動でページ内アンカーのナビゲーションを設置するスクリプト -MagicNav.js
ナビゲーションを抽出 ページ内の移動は、アニメーションを伴ってスクロールします。 MagicNav.jsの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="magicnav.js"></script> Step 2: HTML デモではdl要素でFAQが実装されています。 dl, ulなどに限らず、hxの見出しなどでも構いません。 <h3>FAQ</h3> <dl> <div id="commercial" title="commercial"><dt><strong>よくある質問</strong></dt> <dd><p>回答</p></dd
pjaxできれいなURL＋非同期画面遷移！ | ヘッドウォータースのブログ TechNote
こんにちは。荒井です。 Facebookもtwitterもgoogleも画面遷移のときには、非同期で次のページを読み込むような作りになってますね！ これは、ajaxで次のページを読み込むのと同時に「History API」というHTML5の機能を使って、URLを更新することで実現してます。 毎回全部読み直さないから通常の画面遷移よりも早いし、URLが変わるから履歴に残るし、良いことばっかり！！SEO的にも「#!」を使ったやつより良いよっていうのを何かで読みました！！！ これからWebサービスを作るなら、導入したいですね！！！ これpjaxを使えば簡単に導入できるんです！！！よし！！！ PJAX!! pjaxとは、GithubのChris Wanstrathって人が作ってるjqueryプラグインです。 上で説明した、History APIとajaxを使った非同期の画面遷移を簡単に導入すること
[JS]jQueryのプラグイン33+1選 -2009年3月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 jquery.scrollable ホイール・クリック・キーボード操作にも対応した、パネルをスクロールする高性能なスクリプト。 Fi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript時代のJava #kansumiB7 #kansumi
