本気でやるならonclick属性は避けてライブラリを活用すべき - id:HolyGrailとid:HoryGrailの区別がつかない日記
第1回 そろそろ本気で学びませんか？ | Think IT これ、今この記事書いてる時点で650以上ものブクマがされているんだけれども、あまり内容がよろしくない。 というのも、解説はとても丁寧ですごくよい内容なのだけど、サンプルコードの書き方がどうも古くさい。 onclick属性とか、今時のフロントエンドエンジニアはそんな書き方はしない（と思う）。 なぜonclickをあまり推奨しないのか やっぱり、エンジニアとデザイナーorマークアッパーとの分業の点でHTMLの属性にスクリプトを書いちゃうのはあんまりよろしくない。 たとえばの話だけど関数の名前を変えたかったり、だとか、HTMLを変更したり、っていうときにミスが起こりやすくなってしまう。 これは分業していなくてもどちらにしろ発生してしまうことだと思う。 他にも前に書いたのだけど、aタグとかでonclickしちゃうとhrefにreturn
Lightbox.js のような写真のスライドショーするライブラリ沢山：Goodpic
This shop will be powered by Are you the store owner? Log in here
【レビュー】ドラッグ&ドロップで今風のWebサイトを作ろうぜ - Weeblyを使いこなす (1) Weebly事始め (MYCOMジャーナル)
ドラッグ&ドロップでWebサイトを作成できる「Weebly」 Ajaxを利用して、ブラウザからオンラインでWebサイトを作成できるというサービスはもはや目新しいものではなくなってきた。こういったサービスはいくつも提供されている。例えば、Wikiの編集部分をAjaxを利用したWYSIWYGコンポーネントに置き換えるものもあれば、テキストエディタとWikiの中間のようなスタイルをとっているものもある。また、ポータルサイトにおける一機能としてポートレットを組み合わせて構築できるようになっているものもある。 ここでは、そういったサービスの一つである「Weebly」に注目していく。Weeblyはドラッグ&ドロップでWebサイトを作成できるという、便利なサービスである(図1〜図4)。 図1 Weeblyの公式サイト 図2 Weeblyで作成したWebページの例(1) - テキストと画像を配置 図3 W
吹き出し方式のツールチップテキスト作成JavaScriptライブラリ:phpspot開発日誌
wg:Bubble Tooltips Bubble Tooltips are an easy way to add (via a bit of CSS and javascript) fancy tooltips with a balloon shape to any web page. 吹き出し方式のツールチップテキスト作成JavaScriptライブラリ。 次のような吹き出し方式のツールチップテキストを作成できます。 次のようなJavascriptコードを書いておき、 <script type="text/javascript" src="BubbleTooltips.js"></script> <script type="text/javascript"> window.onload=function(){enableTooltips()}; </script> アンカー<a>タグのt
Niceformでエレガントなフォーム生成:phpspot開発日誌
badboy.media.design :: articles :: Niceforms Web forms. Everybody knows web forms. Each day we have to fill in some information in a web form, be it a simple login to your webmail application, an online purchase or signing up for a website. They are the basic (and pretty much the only) way of gathering information on the web. 配布されているJavascriptのファイルとCSSファイルを読み込むだけで、フォームデザインが早代わり。 HTMLに組み込む例） <scrip
ローディング中のアニメーションGIFを生成する「Load Info - gif generator」
AJAXなどでよくあるあの「読み込み中……」みたいな感じのローディング中アニメーションをGIFアニメとして、好きな色の組み合わせでカスタマイスできるという便利なジェネレータです。現時点で99種類のパターンがあります。 詳細は以下の通り。 Load Info - gif generator http://loadinfo.net/ まずは好きなパターンをクリックして選択 小さなウインドウが開くので、色と背景色（透明も可能）、それから大きさを選んで「generate」をクリック しばらく待つと、完成するので「download」をクリックすれば保存できます。 なお、これが実際に作ったサンプルです。やっぱり背景色はちゃんと指定した方がいいかも。
Bridge Word
This shop will be powered by Are you the store owner? Log in here
AJAXでやってしまう間違い:Geekなぺーじ
「Ajax Mistakes」という面白い記事がありました。 AJAXを使ってWebアプリを作る時に陥りがちな間違いを列挙していました。 以下、要約してみました。 かなり削っているので、詳細は原文をご覧下さい。 AJAXを使うためにAJAXを使う AJAXはカッコイイ技術です。 しかし、AJAXはツールでしかありません。 AJAXはオモチャではありません。 実験的にAJAXを使うために、不必要なところにAJAXを無理矢理使っている場合が多いです。 戻るボタンの動作を妨げる 戻るボタンはWebインターフェースで重要な役割を果たしていますが、JavaScriptとの相性は良くありません。 戻るボタンの機能を維持できない場合があることは、JavaScriptのみで構成されているページをお勧めしない理由の一つです。 ただ、使い勝手の良いサイトというものは、そもそも戻るボタンに依存しなくてもユーザが
50超のCSSやJavaScriptで実装するタブ型ナビゲーション集
HONGKIAT.COMのエントリー「50超のCSSやJavaScriptで実装するタブ型ナビゲーション集」から、当サイトで紹介したことのないものをいくつか紹介します。 50+ Nice Clean CSS Tab-Based Navigation Scripts
マウスが上に来るとくるりんと文字の色を変えるスクリプト「Scrollovers」
リンクなどの文字列の上にマウスが来ると自動的にくるりんと回転する感じで文字の色が変化するというちょっと楽しいエフェクトを加えてくれるスクリプト、それが「scrollovers.js」です。 Firefox 2.0、Internet Explorer 7、Internet Explorer 6、Internet Explorer 5.5、Safari 3 (Windows)、Opera 9で動作確認されているとのことで、個人利用でも商用利用でも無料で使用できます。 論より証拠、デモを見た方が理解できます。 デモとダウンロードは以下から。 Scrollovers - A New Way of Linking http://www.scrollovers.com/ 「scrollovers.js」自体の中身がどうなっているかというのは以下からわかります。 http://www.scrollove
20行で実現できるAjaxタブインタフェース:phpspot開発日誌
Dynamic Ajax Tabs in 20 Lines | 20bits The tabbed document interface is a common solution to the problem of presenting a user with multiple document in one window. 20行で実現できるAjaxタブインタフェース。 次のようなタブインタフェースをたったの２０行で実現可能なようです。 次のようなDIV要素を定義します <div class="tabbed-pane"> <ol class="tabs"> <li><a href="#" class="active" id="pane1">Pane 1</a></li> <li><a href="#" id="pane2">Pane 2</a></li> </ol> </p> <div
JavaScriptでMP3を再生するライブラリの作り方：CodeZine
はじめに JavaScriptでMP3を再生するライブラリ「playmp3.js」の作り方を解説します。MP3の再生にはFlashの機能を利用し、JavaScriptからFlashの関数を呼び出すなど、JavaScriptとFlashの連携方法も併せて紹介します。 Flashファイルの作成には、フリーのFlashコンパイラMTASCを利用しますので、Flashを持ってない人でも応用ライブラリを作成できるでしょう。Flashと連携することでJavaScriptの可能性が広がります。 以下のサイトで、MP3再生のサンプルを試せます。JavaScriptでMP3再生するサンプル 対象読者JavaScriptで効果音やBGMを鳴らしてみたい人JavaScriptとFlashを組み合わせて面白いことをやってみたい人 必要な環境FirefoxまたはIE 6以降フリーのFlashコンパイラ MTASC
Javascriptフレームワーク比較チャート:phpspot開発日誌
Javascript Toolkit Comparison - uPortal 3 - JA-SIG Wiki Javascriptフレームワーク比較チャート。 Prototype、Dojo、Mochikit、Yahoo UI Library、Google Web Toolkit 、jQueryというメジャーなフレームワークの比較図です。 Ajax、Drag&Drop、ビジュアルエフェクト、イベントハンドリング、Ajaxの戻るボタン対応など、機能が一発で比較できます。 →続きを見る 他にも、ドキュメントの豊富さや、開発コミュニティの充実度、ライセンスについても掲載されていて比較に便利。 自分の知らないフレームワークの特徴も大まかに分かるので参考にさせてもらいましょう。 関連エントリ 10個のPHPフレームワーク比較記事 Prototype.jsとjQueryのベンチマーク速度比較
イヌでもわかるJavaScript講座
このJavaScript講座はプログラミング知識がない人もサンプルをただ埋め込めば使えるように作られています。ステップの段階で少しずつJavaScriptを説明していきますので、各ステップの内容がすべて把握できなくても、あとでわかってくると思います。えっ？と思う個所があっても、それはそのステップの趣旨ではないところですので、その個所はどこかのステップで説明します。深く考え込まずに、各ステップを適当にすすめていってください。 なお、本講座のサンプルを使ってＨＴＭＬファイルがぶっ壊れたり、マシンから煙や火が出ても一切責任を負いません。バックアップはこまめにしましょう。(^^; また、サンプルを無断で使用することを禁じるわけがありません。勝手に許可無く使ってください。
Yahoo! UIのTreeViewを使う1 - ［JavaScript］All About
Yahoo! UIのTreeViewを使う1 Ajaxとともに注目の集まっている分野に、JavaScriptのDHTMLなエフェクトを使ったライブラリ群があります。有名なところでは、Dojoやprototype.jsを利用したscript.aculo.us、Rico、あるいは、Yahoo!が提供しているYahoo! User Interface Library(Yahoo! UI)などです。 これらの他にもいろいろあって、現在は群雄割拠という状態ですが、いずれも、アニメーションやウィジェット、ツリーメニューやカラーエフェクト、ドラッグドロップなどのツールをAjaxな機能とともに提供しているのが特徴です。 それぞれのライブラリには、それぞれの特徴があり、使用方法もさまざまですが、今回は、その中からYahoo! UIのTreeViewメニューを取り上げて、使ってみたいと思います。Yaho
Ajax うきうき Watch 第10回歴史年表と地図を効果的に関連付けるAjax
マウスによるドラッグで、東西南北自由な方向に地図スクロールさせる代わりに、MITが作ったTimelineで過去と未来の時間軸を自由に移動してみよう（編集部） Timeline Live Examples, Religion Timelines Live Examples, Dinosaurs 筆者は地図が好きですが、歴史も好きです。そして、この2つは密接な関係があります。例えば、地図に見える不自然な道路や施設などが、なぜ不自然に見えるのかという理由が歴史に埋もれていることがあります。 一例を挙げれば、JR中央線の東中野から立川まで真っすぐの路線が延びている理由は、現在の沿線を見ても分かりませんが、建設当時の状況を見れば一目瞭然です（その辺りはほとんど農地で、土地の既得権でもめることが少なかった）。逆に、歴史の不思議を読み解くために地図は有効な手段となります。 羽村取水堰から四谷大木戸まで続
iPod風の階層的なナビゲーションを実装する面白ＵＩサンプル「ColumNav」:phpspot開発日誌
ColumNav Documentation ColumNav is a hierarchical menu implementation utilizing Bill Scott's Yahoo UI Carousel component. iPod風の階層的なナビゲーションを実装する面白ＵＩサンプル「ColumNav」。 一見、アイコンのついたコンボボックス風ＵＩでiPodライクな次のようなナビゲーションを実装する方法. ファイルをクリックでファイルを表示し、フォルダをクリックでアニメーションしながら階層を移動します。 動きがなめらかでクールな印象を出すことが出来そうです。まさにiPod風。 Ajaxを使って無制限に階層を辿ることが出来たり、なかなか工夫されているようです。 ソースも次のようにクリーンになるので使いやすそう。 <ul id="basketball-list"> <li>
テキストによるプログレスバーを実現するライブラリ ProgressText.js
日頃より楽天のサービスをご利用いただきましてありがとうございます。 サービスをご利用いただいておりますところ大変申し訳ございませんが、現在、緊急メンテナンスを行わせていただいております。 お客様には、緊急のメンテナンスにより、ご迷惑をおかけしており、誠に申し訳ございません。 メンテナンスが終了次第、サービスを復旧いたしますので、 今しばらくお待ちいただけますよう、お願い申し上げます。
CoolTips ― Neat tooltips under the mouse
On May 3rd, we shared that we sold Postmark and DMARC Digests to ActiveCampaign. For some of you reading, this will come as quite the surprise. As you can imagine, this decision was incredibly important and personal, taking nearly a year of soul searching and questioning. First, a few important points: The entire team at Wildbit was offered a position with ActiveCampaign, regardless of whether the
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Shift: Zoho Writer に待ちに待った機能が・・・