ASCII.jp：Web制作会社が作った！超使えるJavaScriptライブラリ
「Webサイトを作るときに本当によく使う機能を、自分で作らずにさくっと実装したい」――。そんなワガママな願望をかなえてくれる JavaScriptライブラリが登場した。ミツエーリンクスが今月オープンソースとして公開した「MJL（MITSUE-LINKS JavaScript Library）」は、Webサイト制作に必須の“最小限の機能”に絞ったJavaScriptライブラリだ。 昨今相次いで公開されている、リッチなUIを実現するJavaScript/Ajaxライブラリとは異なり、MJLの機能はとてもシンプルだ。もともとWeb制作会社であるミツエーリンクスが「自社標準ライブラリ」として作成したものだけあって、汎用性・実用性を重視したライブラリになっている。 具体的な機能は以下の6つ。確かにどれもよく使いそうなものばかりだ。 画像のロールオーバー Flashオブジェクト埋め込みの機能拡張 新規
App Store登録もOK！JavaScriptで作るiPhoneアプリ
Webアプリケーションは、傾きセンサやGPSからの情報取得やバイブレータ動作などのOSの機能の利用に制限があります。また、オフラインでの動作ができません。 開発の容易さは、若干主観めいてしまいますが、コンパイルが必要でメモリ管理も必要なネイティブアプリに比べて、Webブラウザでリロードするだけで最新のコードをテストできて、基本的にメモリ管理も不要なWebアプリケーションに軍配が上がります。 ネイティブアプリケーションの最大のメリットは、「App Storeでの配布ができる」ことで、多くのユーザーが集まるApp Storeでアプリケーションを配布でき、さらには課金もできてしまう点です。 ローカルWebアプリという第3の選択肢 前段の機能比較表に「ローカルWebアプリケーション」という項目があります。これは、Safariでオンライン中に所得したHTML、CSS、画像データなどを保存して、オフラ
jQueryやPHPを使った便利な仕組みのチュートリアル集:phpspot開発日誌
9lessons: jQuery and Ajax best 9lessons. jQueryやPHPを使った便利な仕組みのチュートリアル集。 9lessonsというサイトがあって色々便利な仕組みのチュートリアルが公開されています。 Twitter Like More Button with jQuery and Ajax. 「もっと読む」をajaxで実現するサンプル Exactly Twitter like Follow and Remove buttons with jQuery and Ajax Twitter風のフォロー、削除ボタンを実現するサンプル Delete a Record with animation fade-out effect using jQuery and Ajax. 行を削除してフェードアウトアニメーションをさせるサンプル jQuery Username Av
suzunari – CodeRepos::Share – Trac
suzunari ブログパーツフレームワーク suzunari Download http://svn.coderepos.org/share/lang/javascript/blogparts_framework_suzunari/suzunari.js Compressed: http://svn.coderepos.org/share/lang/javascript/blogparts_framework_suzunari/suzunari.min.js svn co http://svn.coderepos.org/share/lang/javascript/blogparts_framework_suzunari/ License Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license
jQuery + PHPのショッピングカートシステム·jCart MOONGIFT
個人的に何となくEコマースというシステムは大げさなものに見えて仕方がない。ちょっとした商店のレベルで、まるでデパート並みの仰々しさがシステムから溢れている。もっとシンプルに買い物できれば良いと思ってしまう。 jQueryを使って作られたショッピングカートシステム シンプルに買い物するための仕組みに、JavaScriptは欠かせない（スムーズという点において）。そこで試してみたいのがjCartだ。 今回紹介するオープンソース・ソフトウェアはjCart、jQuery + PHPで構築されたショッピングカートシステムだ。 jCartはjQueryを使っており、商品をクリックするだけで同じ画面にあるショッピングカートに商品がポストされる。同じ商品をクリックすれば数量が増え、商品数を変えればその場で金額も変更される。 removeを押せばすぐに消える 各商品の横にあるremoveをクリックすればショ
フォームデザインを完成させるjQuery plugin「jqtransform」
今まで様々なjQueryを使ったプラグインを紹介してきましたが、今日紹介する「jqtransform」は今まで紹介した物と少し違っていて、フォームのデザイン補助してくれると言うものです。 CSSなどでデザインせず、普通にフォームを制作した場合上記のように利用OSに準拠したプルダウンメニューやボタンなどが表示されます。このプラグインを使えば上機能なありきたりなフォームデザインを施す事が可能です。変更後のデザインは以下の通り 詳しくは以下 デザインだけでなくプルダウンもアニメーションがついていたりと細かな部分も配慮されています。実装方法は簡単、jQueryとプラグインを読み込んで、フォームにクラス指定をしてあげるだけになっています。デザインはCSSで制御しているみたいなので、個別のカスタマイズできるようになっていますので、使い勝手が良いかと思います。これならDemoで表示されているデザインが気
シンプルにリッチなテキストエリア·Sanskrit MOONGIFT
テキストエリアをWYSIWYGエディタに変えるものといえばFCKEditorなどが有名だ。FCKEditorは確かに便利だが、完成度が高すぎるためにカスタマイズしづらく（設定は変更できるが）、何より動作が重たくなっている。 シンプルながらカスタマイズも容易なリッチテキストエディタ 実際にユーザが使う機能はそれほど多くない。もっとシンプルに必要最低限に仕上げたのがSanskritだ。 今回紹介するフリーウェアはSanskrit、テキストエリアをシンプルなWYSIWYGエディタにするソフトウェアだ。ソースコードは公開されているがライセンスは明記されていなかったのでご注意いただきたい。 Sanskritで使える装飾は太字、斜体、下線、打ち消し線、リンクとなっている。これらはTextileの構文に則っており、実際の出力もTextile形式になっている。Sanskritは言わば記法の入力補助とTex
文字を光らせるGlowイフェクトをJavaScriptで·jQuery Glow MOONGIFT
ユーザに何かのアクションを起こさせようとする時にマウスオーバーでボタンを点滅させたり、色を変えるようなアクションを行うことがある。文字の色を変えるくらいなら簡単だが、ボタンを作成したりするのは面倒に感じてしまう。 光り輝く文字は相当目立つ だがユーザビリティを高くするには必要なことだ。開発者にとって楽で、かつユーザにとっても使いやすいサービスを目指してjQuery Glowを使ってみよう。 今回紹介するオープンソース・ソフトウェアはjQuery Glow、GlowイフェクトをJavaScriptで実現するjQueryプラグインだ。 Glowイフェクトとは文字の背後から光を当てて周囲が輝くようなイフェクトのことだ。jQuery Glowを使うとJavaScriptだけで実現できる。マウスオーバーした際に使えば、目立たせることができ、クリックを促せるようになるだろう。 こちらは緑 色は自由に設
長文を分割＆横スクロールで見やすくする·bookreader.js MOONGIFT
Webの発達で日本語であっても横に読まれることが当たり前になりつつある。コンピュータ上では縦に際限なく伸びていくので、縦書きは読みづらいのだろう。だが横向きに書かれていても長文であると見がたくなるのは変わらない。 長文をブラウザ上で読むならこれ 特に小説やコラムなど長文を載せているサイトの場合はそうだ。コンピュータは元々書籍に比べると長文を読むのに適していない上に、レイアウトも読みづらいのでは大変だ。そこで試したいのがbookreader.jsだ。 今回紹介するオープンソース・ソフトウェアはbookreader.js、長文を読みやすくするJavaScriptライブラリだ。 bookreader.jsは専用のJavaScriptとCSSファイルによって縦に続く長文を一定の長さで区切り、続きを右側に表示してくれるスクリプトが。スクロールは矢印キーか画面に表示される矢印のボタンで行う。 次期バー
意外性が心地よいJSメニューのWebデザイン (1/5)
JavaScriptライブラリでリッチなUIを手軽に作れるようになったのはいいけど、最近ではそれもすっかりマンネリ気味。そろそろ、ほかのWebデザイナーとは違うデザインを取り込んで何とか差をつけたい――。そんなときは、国内のデザイン誌やブログではなく、海外サイトに目を向けてみてはどうでしょうか。たとえば、優れたWebサイトを紹介している「dzineblog」というブログなら、海外のWebデザインのトレンドをいち早くチェックできます。 そのdzineblogの膨大なコンテンツの中から、今回注目するのが、「10 Websites That use JavaScript Animation Effectively!!」という少し前のエントリー。JavaScriptによるアニメーションエフェクトを上手に使っているサイトを取り上げており、その中から、「Playground Blues」をピックアップ
gauge.js (javascript programmable gauge)
gauge.js 1.4 allows you to add gauges (with shading and reflection) to your webpages. It uses unobtrusive javascript to keep your code clean. It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. On older browsers, it'll degrade and your visitors won't notice a thing. Shows some of the things gauge.js does. 8 inbuilt colors available (if are more colors required - t
5分で実装可能なページの文字サイズ変更＋クッキーに保存サンプル:phpspot開発日誌
A Simple jQuery Stylesheet Switcher 5分で実装可能なページの文字サイズ変更＋クッキーに保存サンプルが公開。 ページで、小・中・大のように文字サイズを変えられるようにしておくと便利ですね。 asahi.com の導入例 実装方法が、微妙に面倒という場合もこのサンプルを使えば簡単に実装できる筈です。 文字サイズに限らず、CSSを丸ごと変えてしまえるので、スタイルを変更して保存ということも簡単に出来ます。 デモページ HTMLは、次のように、href は # ですが、rel属性に付け替えたいcssを指定しておきます。 <ul id="nav"> <li><a href="#" rel="/path/to/style1.css">Default CSS</a></li> <li><a href="#" rel="/path/to/style2.css">Larg
ついにここまで。iPhone向けWebギャラリー·JAIPHO MOONGIFT
iPhone/iPod Touchは先進的ではあるが、市場の大きさはまだまだ小さい。なのでソフトウェアやWebサイトを提供してもターゲットになるユーザ数はまだまだ少ないのが実情だ。だが、それでも人を魅了し、新たなソフトウェアが登場する。 iPhone向けのWebギャラリー 逆に言えばまだ市場が小さいうちに参入しておけば、後々受けられる恩恵も大きそうだ。そこでJAIPHOを紹介しよう。 今回紹介するオープンソース・ソフトウェアはJAIPHO、iPhone/iPod Touch向けのWebギャラリーソフトウェアだ。 ニッチだ。非常にニッチ過ぎる。Webギャラリー、かつiPhone/iPod Touch向けのオープンソース・ソフトウェアなのだ。動作は画像とHTMLそしてJavaScriptファイルとなっており、サーバサイドのプログラミング言語は不要だ。 サムネイル一覧 ソフトウェアとしてはニッチ
jQueryを使ったFlashばりにクールなギャラリー「GalleryView」:phpspot開発日誌
jQuery GalleryView - by Jack Anderson jQueryを使ったFlashばりにクールなギャラリー「GalleryView」が公開されています。 初期化に以下の数行を書けばＯＫみたい。 $('#photos').galleryView({ panel_width: 800, panel_height: 300, frame_width: 100, frame_height: 100 }); 動かしているHTMLのなかなか分かりやすいです。 関連エントリ 訪問者驚きの手めくり風、画像ギャラリー作成サンプル 滑らかに画像が切り替わる超絶クールFlash写真ギャラリー「imagin」 色々な画像の見せ方を演出できる画像ギャラリー集
メンテナンスフリー！郵便番号から住所を返すライブラリ·ajaxzip3 MOONGIFT
Webシステムを開発している中で郵便番号を入力したら自動的に住所を補完して欲しいという要望は多々ある。実装はそれほど難しいものではない。厄介なのはメンテナンスだろう。市区町村の統廃合によってデータが変わった場合の対応だ。 郵便番号から住所に変換する便利なライブラリ 郵便局から配布されているCSVを都度取り込むという方法もあるが、非常に面倒だ。そこで使ってみたいのがajaxzip3だ。 今回紹介するオープンソース・ソフトウェアはajaxzip3、Ajaxを使って住所を取得するライブラリだ。 ajaxzip3の面白い所はライブラリをGoogle Code上にアップロードしてそのまま利用できてしまう点だ。規約上どうなのかという問題はあるが、そのまま使うと自分でメンテナンスする必要が全くなくなってしまう。自分のサーバであってもajaxzip3を外部のSubversionリポジトリからアップロードす
技術系サイトに必需品！ ソースコードは鮮やかに JavaScriptもPHPもHTMLもOK！「Syntax Highlighter」の使い方
Webプログラミング/Webデザインのネタを扱うブログやWebサイトを運営していると、HTMLやCSSなどのソースコードを掲載することが多くあります。そんなときにぜひ活用したいのが、ソースコードを読みやすく表示してくれるJavaScriptライブラリです。今回は、そのうちの1つ、「Syntax Highlighter」の使い方を紹介しましょう。 多くの言語の構文強調表示に対応した「Syntax Highlighter」 HTMLなど各種言語のソースコードをWebページの中で表示するのは、HTMLのpre要素を使えば簡単です。ただ、ソースコードをそのまま表示すると、見た目が分かりやすくはありません。そこで、タグなど言語の特定キーワードに色を付けて、他の部分よりも強調して表示することで見やすくしましょう。 こういった「構文強調表示」を行なうJavaScriptは、いくつか公開されていますが、そ
プログラマが1ヶ月でWebデザイナーに転身する方法 - やねうらおブログ(移転しました)
サイトを構築していると、プログラマはWebデザイナーと共同作業をしなければならない。 しかし高度なRIAを実現しようとすると思っているようにWebデザイナーに素材を作成してもらうだけでもとても骨の折れる作業だ。 そこで、一層、「すべてのプログラマはWebデザイナーになればいいんじゃね？」と思った。 今回は、私の実体験に基づき、「プログラマが1ヶ月でWebデザイナーに転身する方法」というのを考えてみた。 ■ HTML,CSSを覚えよう まず、HTMLとCSS。いくら私でもW3C( http://www.w3.org/ )のすべてに目を通せとは言わない。 ブラウザ間で挙動が違うのでそれぞれのタグがどのブラウザで使えるのか一覧がまず欲しい。手軽なのは詳解HTML & CSS & JavaScript辞典。このハンドブックは見やすいのでお勧め。また、よく使うタグに関してはすべて覚えよう。覚えている
JavaScriptとjQueryでデスクトップアプリに負けない操作性のWebアプリケーションを作る
はじめに 近ごろのブラウザは、パフォーマンスの面でも開発ツールや互換性の面でも大きく向上しています。大部分のWebサイトは依然としてページパラダイムに固執し、自らのコンテンツを新聞や書籍と同じような感じで表現していますが、今日のブラウザは伝統的なデスクトップアプリケーションに引けを取らない高度に対話的なアプリケーションをサポートすることができます。 これまでのアプリケーション開発の歴史では、複雑な対話や高度に視覚的な対話を実現しようとする開発者は、ユーザーのPC上に置かれるデスクトップアプリケーションとして実装するか、Flashのようなブラウザプラグインの上に構築されるアプリケーションとして実装するかの選択を強いられました。今日のJavaScriptは、こうした高度なアプリケーションもサポートできるほど進歩を遂げています。パワフルなJavaScriptライブラリが提供する抽象層は、ブラウザ
GoogleマップやFacebook風など、自由にカスタマイズできるツールチップ「BeautyTips」:phpspot開発日誌
GoogleマップやFacebook風など、自由にカスタマイズできるツールチップ「BeautyTips」 2009年03月03日- BeautyTips Demo Page GoogleマップやFacebook風など、自由にカスタマイズできるツールチップ「BeautyTips」が公開されました。 Google Map 風がなかなか面白いです。Google Mapじゃないけどページ内にGooglemap風の吹き出しを表示できます。 次のような角丸＆枠付＆半透明という高度なツールチップを作ることも可能です。 以下のようなFacebookスタイルも実現できます。 エレメントの上下左右に表示することが出来るみたい。 関連エントリ JavaScriptを使わずCSSのみでシンプルなツールチップ実装 ツールチップを作るのならこれかもという多機能jQueryプラグイン「Simpletip」 カスタマイズ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...