Webページをその場で編集できるWebサービス「Copybar」 | バシャログ。
久しぶりに見た深キョンが、尋常じゃなく美人になってた事にドキドキの止まらないLatinです。 今回は面白いな～と感じたWebサービスのご紹介。 WebページにJavaScriptを組み込むだけで、いつでもどこでも誰にでも、Webページの編集・上書きが出来る「Copybar」というWebサービス。 用途は色々考えられそうですね。 例えばオンラインドキュメントとして少人数で進捗を共有したり、簡易掲示板にしたり、工夫すれば様々なシーンで使えそうですね。 実はまだ詳しく検証はしていないのですが、 簡易CMSとして実用できるんじゃないのか？と淡い期待を抱いております。 利用するにはアカウント登録が必要ですが、ぜひ試してみてください。 https://copybar.io/
どれ使おう？モーダルウィンドウ（Lightbox 風スクリプト）を集めてみました | バシャログ。
この間の春の嵐はすごかったですね。いろいろ飛ばされないように必死だった kimoto です。帰りの電車は久々に足が浮くほどの超満員を経験しました。 さて、ちょっとモーダルウインドウを調べる機会があったのでまとめてみます。 基本的に、全て jQuery で動くものになっています。 最新の情報ってわけではないですが、場面ごとに選べるものを集めてみたのでお試しくださいませ。 超シンプルな軽量スクリプト leanModal leanModal leanModal はとにかく軽量です。デモを触ってみると、その軽さがわかると思います。 ただし、軽さを徹底的に追求した結果なのか、IE6 には対応していないとのこと。 また、イメージギャラリーなどとしては使えないとのことです。 ちょっとした文章を表示するだけの場合などはこれで十分ですね。 そこそこ軽量、そこそこ機能的 Simple Modal Simple
IE6でも透過PNGを使う | バシャログ。
いまだ小沢健二コンサートの余韻が冷めない sakai です。 普段は透過 PNG を使わずにデザイン・コーディングをしているのですが、先日どうしても透過 PNG を使いたいシーンがありました。 透過 PNG は大変便利ですが、IE6 が対応していないのがネックです。 というわけで、IE6 でも透過 PNG を使用できるようになる JavaScript のライブラリを色々試してみました。（今さらですが！） 有名どころの「jquery.pngFix.js」から使ってみましたが、これは背景画像に透過 PNG を使うとちゃんと表示されなくて断念。 「IE7.js」もところどころ挙動が怪しいしなあ… と困ったりしつつ、最終的には「DD_belatedPNG.js」に行き着きました。 DD_belatedPNG 透過 PNG を背景画像に指定したり、ポジションをいじったりしても挙動が安定しているのでと
【Flash】jsflでコマンドを作ってみよう！ | バシャログ。
「BLUFF」というボードゲームで全く勝てないminamiです。 Flashには単純作業を自動化できるコマンドという機能があります。 意外と知られていないのですがとても便利なので使ってみましょう！ ヒストリパネルからコマンドを作ってみる 一番簡単なコマンドの作り方は「ヒストリ」パネルの履歴から作る方法です。 ウインドウ→他のパネル→ヒストリ を選ぶと開くことができます。デフォルトのショートカットはCtrl+F10です。 ヒストリパネルにはFlash内で行った動作が一つづつ履歴として保存されていきます。 例えば矩形ツールで四角を描くと下のように記録されます。 この状態で右下のアイコンを押すと、「コマンドとして保存」というダイアログがでます。 適当な名前で保存します。 するとコマンドに「矩形」コマンドが追加されました！ 実行するたびに矩形が描かれれます。 jsflでコマンドを作ってみる。 さて
jQuery を使ったイメージギャラリー25コ | バシャログ。
大雨やら地震やら、天災が続きますね。取り急ぎ乾パンを買うべきか悩んでるkimotoです。最近の乾パンはうまいと言うし。 さて今回は、jQuery を使ったイメージギャラリーが25コ紹介されていたので便乗してご紹介。 説明文付きギャラリー Create an Image Rotator with Description (CSS/jQuery) デモページ 右側のサムネイルをクリックすると、説明文と共にイメージが表示されます。 「Hide」ボタンで説明文を隠す事もできます。 自動でスクロールするイメージギャラリー jQuery Image Gallery/News Slider with Caption デモページ 一定時間で、自動で画像がスクロールします。 下部のリンクにより、手動で動かす事もできます。 オンマウスで少し拡大するサムネイル Fancy Thumbnail Hover Eff
なんでもイケるlightwindow.js サンプル | WSGスタッフブログ
<script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="js/lightWindow.js"></script> <link rel="stylesheet" href="css/lightWindow.css" type="text/css" media="screen" /> 画像を表示 <a href="http://c-brains.jp/blog/wsg/images/070604_nagai.jpg" class="lWOn" title="山下町の公園" author="撮影者"
明日使える！？CakePHP Hack：SQLデバッグ表示をシンタックスハイライト | バシャログ。
こんにちは、iPhoneをついに手に入れてテンションが一段落した？tanakaです。本日は、CakePHPで開発するとき、ちょっと気分がよくなるHackをご紹介いたします。 CakePHPを使うときは、セッション1回で実行されたSQL文が一覧できるデバッグレベル2(Configure::write('debug', 2);)で開発することがあると思います。SQL文が一覧できるのは便利ですが、ちょっと味気ないと思いませんか？本日は、そう思った私が、そのSQL文に色を付けるためにやってみた方法をご紹介いたします。cakeのコアの部分も少しだけ変更することになるので、取り扱いには十分ご注意ください。(CakePHP1.2を例に説明いたします) 目次 google-code-prettifyを配置 APP/app_controller.phpを修正 APP/views/layouts/defaul
tableの行と列を固定してスクロール！！Super Tables | バシャログ。
6月に入り、欧州サッカーの移籍情報が気になってしょうがないishidaです。 WEB制作に携わっていると、表組みだらけのWEBサイトの担当に 長い人生に一度や二度はなる（?）と思います。 tableによる表組みは、行や列が増えすぎるとコンテンツからはみ出したりして 見栄えが悪くなりますよね。 そんな迷える子羊たちを助けてくれるjavascriptライブラリ Super Tables を今回ご紹介いたします。 まずは以下のサンプルをご覧くださいませ。 Super Tables サンプルデモ サンプルのような感じで、ヘッダー部分を固定したり、列を固定できます。 Super Tables 設置方法 配布ページよりデータをダウンロードし、利用したいhtmlのhead要素などでファイルを読み込みます。 <link rel="stylesheet" href="superTables.css" typ
デザイナー・コーダー必見！使えるform関連jQueryプラグインの数々 | バシャログ。
こんばんは、最近ホルモン焼きにハマっているishidaです。 WEBサイト制作時、formは必ずといってもいいぐらい存在します。 お問い合わせフォームや会員登録フォームなどがすぐに思いつきますよね。 デザインをがっつりフォーム部分で作り込んでも、CSSのみでは、 実現できなかったりすることもよくあります。 そんなクセのあるformを、よりリッチに！かつ操作性を向上！できるjQueryプラグインの数々をご紹介します。 デザイナーの方は、フォームのデザインの参考に。 コーダーの方は、ページ作成時間の短縮に手助けになればと思います。 jQuery plugin: Validation フォームの入力チェック（バリデーション）が簡単にできるプラグイン。 エラーメッセージはlocalizationディレクトリ内に18言語用意されています。 日本語用は別途作成し、使用することが可能です。 jQuery
レキシカル変数を意識した jQuery プログラミング | バシャログ。
こんにちは、ktanakaです。今日はjQueryを利用したら無意識に使っているかもしれないレキシカル変数についてとりあげます。まず、jQueryを利用したコードを示し、それをレキシカル変数を利用したコードに書き直します。 jQuery で click して toggle するコード とりあえず、レキシカル変数とは何か？という話は置いて、 jQuery を利用したコードを示します。 index.html <html> <head> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="program.js"></script> </head> <body> <p><input type="button" id="trigger" value
人気の「JavaScript ライブラリの紹介エントリー」 9 選 詰め合わせ | バシャログ。
JavaScript などを駆使したリッチな UI の需要も、ますます高まってきていると思います。 その証拠に、当バシャログでも、その手の記事が人気を集めています。 そこで今回は、そのようなエントリーをまとめてみます。ここ半年ほど物で、全 9 エントリーです。 それではどうぞ。 使いやすい lightbox 系スクリプト by sakai（2008/11/6） lightbox 系のスクリプトはとにかくたくさんありますが、その中でも比較的新し目で使い勝手の良いものをご紹介しています。 Fancy Box → デモ この系統のはどんどん出てきますね。 Sexy LightBox 2 残念ながら、この「sexy-lightbox-2」はこのエントリ執筆現在、サーバに繋がりませんでした。 ヴァーチャルツアーが簡単に作れる jQuery virtual tour by nakayama（2008/
jQueryプラグインでクールなプルダウンメニュー | バシャログ。
お仕事で JavaScript によるプルダウンメニューを実装する必要があり、色々試してみて一番お手軽だったのが「droppy」です。 「droppy」 は jQuery のプラグインです。 パッケージをダウンロードすると色々とファイルが入っていますが、必要なのは src ├ javascripts │ └ jquery.droppy.js └ stylesheets └ droppy.css の 2 ファイルです。 プルダウンメニューの実装は、HTML に以下のコードを貼りつけて CSS を適用すればオッケーです。 ■JavaScript … 外部ファイル化がお勧め <script type='text/javascript'> $(function() { $('#nav').droppy(); }); </script> ■HTML … とてもシンプル <ul id='nav'> <
PDTからNetBeansに移行する3ステップ | バシャログ。
こんにちは、長らく使ってきた PDT1.0.3 と最近サヨナラしたinoueです。 新しいパートナーに選んだのは、 PDT2.0 ではなく NetBeans6.5。 だって、重たすぎて使い物にならないんですもの、PDT.2.0。 そこへいくとNetBeans6.5は起動もコード補完も快適。 しかも最初からSubversionプラグインもDBツールも標準で入っているし。ステキ。 てなわけで、PDTからNetBeansへの移行方法と、使い始めるために必要な設定を簡単にご紹介します。 1. インストール Java6 または Java5のJDKまたはJREがインストール済みであることが、PHP用NetBeansインストールの前提条件です。 これまでEclipse使っていたPCならば、入っているはずです。 NetBeans IDE 6.5 ダウンロード より、PHP開発向けのパッケージをダウンロード
簡単に画像やコンテンツをスライドできるjQueryプラグイン Easy Image or Content Slider | バシャログ。
Easy Sliderは、エリアを固定したまま左右上下に画像やコンテンツをスライドできるｊQueryプラグインです。 まずは下のデモをご覧ください。 サンプルデモ 設置方法 配布ページよりデータ一式をダウンロードし、easySliderを利用したいhtmlのhead要素などで以下のファイルおよび処理を読み込みます。 <script src="jquery-1.2.6.min.js" type="text/javascript"></script> <script src="easySlider.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider(); }); </script> 表示する部分は以下で
Flashで動画を再生しよう！第 5 回 動画を公開！ | バシャログ。
集中連載「Flashで動画を再生しよう！」の最終回です。 今回は SWFObject1.5 を使ったコンテンツの埋め込み方法を紹介したいと思います。 SWFObject とは JavaScript を用いて swf ファイルを埋め込むライブラリです。 現在 SWFObject を使って swf ファイル埋め込むのが主流になってきています。 SWFObject を使う利点は以下があげられます。 InternetExplorer の Active Content Update 問題に対応 Flash プラグインのバージョン検出ができる Flash でパブリッシュ生成したタグよりシンプル 但し SWFObject を使う注意として、JavaScript をオフにしてるユーザーは見れないという点があります。 この場合は、代替表示で対応するようにします。 STEP1 SWFObject をサイトから
最近「おぉ～」と思った jQuery | バシャログ。
今回は私が最近「おぉ～！」と思った jQuery のプラグインを紹介したいと思います。 ■s3Slider jQuery plugin http://www.serie3.info/s3slider/ 自動車のサイトなどのトップに使える打ち出し画像を切り替えるプラグイン。 Flashを使わなくてもここまでできるとは… 驚きです。 ■Transformie http://paulbakaus.com/?p=11&language=en IEでボックス要素を 45 度傾けることが出来るプラグイン。対象ブラウザが IE のみなので、使いどころが少々難しいです。 ■SexyLightBox http://www.coders.me/ejemplos/sexy-lightbox/ 表示がセクシーな LightBox。色っぽいっす。 ■apple 風のメニュー作成 http://phpspot.org
使いやすい lightbox 系スクリプト | バシャログ。
lightbox 系のスクリプトで、使い勝手が良く最近話題のものを 2 つご紹介します。 FancyBox http://fancy.klade.lv/ FancyBox は、jQuery のプラグインです。 非常にシンプルなスクリプトで、簡単に導入することができます。 また、CSS が（この手のスクリプトにしては）比較的きれいに分離されていますので、デザインのカスタマイズがやりやすくて良いです。 Sexy LightBox 2 http://www.coders.me/ejemplos/sexy-lightbox-2/ Sexy LightBox 2 は Mootools のプラグインです。 こちらも導入は簡単で、Fancy Box ほどではありませんが CSS もいじりやすいです。 また、Ajax コンテンツなど、多くの形式に対応しているのが特長です。
サイトやブログを AutoPagerize に対応させよう！ | バシャログ。
Firefox のアドオンの中でも人気の高い Greasemonkey。これは、Javascript を登録することで、ユーザ側で見るページをカスタマイズできる拡張機能です。 そして、その Javascript も様々なものが公開されています。 その一つに、AutoPagerize という、とても便利なスクリプトがあります。 例えばこれをインストールした状態でGoogle検索を行うと、2ページ目、3ページ目のリンクをクリックしなくても、次のページがどんどんと表示されます。これは想像以上に便利ですので、未体験の方は是非試してみてください。 Greasemonkey がインストールされた状態で、このページの「Install this script」をクリックすれば、インストールできます。 インストールされたら、とりあえず Google で検索してみてください。その快適さを理解してもらえると思い
TinyMCE を IE で動かす | バシャログ。
こんにちは。夏休みをいただいて実家に帰っていた tanaka です。今日はちょっとしたエラー回避の話です。ブラウザで動くWYSIWYGエディタのTinyMCEについてです。 TinyMCE を IE で動かすと頻繁にエラーになります… WYSIWYGエディタのTinyMCEとFCKEditorを試してみたところ、少し使っただけですが、TinyMCEの方が動作が軽快のように感じました。そこでボタンをカスタマイズして挙動を調べていたところ、IE7, IE6で頻繁にエラーが発生して処理が中断されてしまいました。そのときのコードは以下のようなものです。 <script> //<
おすすめ書籍：DOM Scripting 標準ガイドブック | バシャログ。
クライアントサイトの JavaScript プログラミングで知識として身につけておく必要があるのが DOM の知識です。本日は、HTML と CSS の基礎的な知識は押さえていて、JavaScript & DOM を覚えて気の利いた振る舞いを付け加えたいと考えている方に 1 冊の本をお薦めします。(現在2/3程読み終わっています) おすすめポイントと、ちょっと…と思ったところ この本の何がおすすめなのか、リストにまとめます。 画像ギャラリーを作りながら、最低限の DOM API を覚えることができる Web を使いにくくしないためのスクリプティング作法が身につく JavaScript の歴史的経緯もふまえている 最低限の JavaScript 構文は最初で覚えることができる 一方で、冗長な部分も少ないですがあります。 序盤の JavaScript の構文については、JavaScript を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
