サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
衆院選
cyokodog.hatenadiary.org
パソコン崩壊 先日、雷の影響で約10年間連れ添ったパソコンがとうとう壊れてしまいました。 ここ数日は奥さんが衝動買いして埃をかぶってたVistaのノートPCをひっぱりだして、環境設定にいそしむ毎日です。電源系の故障なのでハードディスクは無事でしたが、３ヶ月前にもディスプレイが雷の影響で壊れたりとなにかと家電製品にトラブルの多い我が家、クラウドを活用したデータバックアップ環境などを真面目に考え始めようかなと思ってます。 Markdown記法でGoogle Sitesっぽく管理したい そんな訳で心機一転、安心して使用できるインフラ環境を整えるべく無料ストレージのサービス内容を調べてはGoogle SitesやGoogle Driveなどにメモしてるんですが、メモの量が増えるにつれ前々から感じていたこれらサービスがWYGWYG変換出力するヘンテコHTMLに対する違和感が気になりはじめました。 も
なにやら意味の分かりづらいタイトルですが、「可変幅＋固定幅なマルチカラムレイアウト」とは、ネガティブマージンを使って、メインコンテンツを可変幅、サイドバーを固定幅にするここのブログのようなレイアウトの事を指してます。詳しくは以下をご覧ください。 みんな大好きリキッドレイアウト〜固定幅＋リキッドレイアウトに挑戦〜 - SetucoCMSプロジェクト ネガティブマージンの理解を深め、活用するテクニック集 - コリス ただこのレイアウトの場合、いわゆるカラム落ちなどを利用した今はやりの（？）レスポンシブなレイアウトにすることができません・・・という訳で jQuery の力でこれを可能にするプラグインを作ってみました。 使い方 準備 jquery.exresponsive.css、jquery.js、jquery.exresponsive.js を読み込みます。 <link rel="styles
かゆいとこだらけの Ex Flex Fixed (サイドメニューなどを一定の範囲でのみ position:fixed させる jQuery Ex Flex Fixed)を作り直しました。 改善内容 fixed 要素の幅を自動調整するようにした リキッドレイアウト(可変幅)でちゃんと表示するようにした fixed 要素がコンテナからはみ出ないようにした fixed 要素がウィンドウ高さに収まらない状態でのスクロール時の表示を見やすくした 動的にレイアウトサイズが変更されても、ちゃんと表示されるようにした カラム高さを揃えるプラグインと併用できるようにした という訳で半年も放置しておいてあれですが、ちょくちょく問い合わせもあるので、ご利用の際には新バージョンでどうぞ。 動作確認 以下のレイアウトのデモページで、新旧それぞれのバージョンの動作を確認してみます。 <div class="heade
更新履歴 2012-04-27 Ver 0.2.0 再実装し、もろもろ痒いとこを解消しました。詳しくは下記エントリをどうぞ。 一定範囲で position:fixed させる Ex Flex Fixed がかゆいとこだらけだったので作り直しました 2012-02-09 Ver 0.1.3.1 Firefox の場合、watchPosition パラメータ が true でスクロール状態で画面更新すると固定位置がずれる不具合を修正しました。 IE の場合、水平方向非固定処理が有効にならないケースがある不具合を修正しました。 2011-12-31 Ver 0.1.3 固定表示する要素の位置が変化するケースにも対応しました。Demo 2011-11-05 Ver 0.1.2 IEで、固定表示する要素のmarginがautoの場合、正しく処理されない不具合を修正しました 2011-10-06 Ve
更新履歴 2011-10-20 Ver 0.1.3 Ver 0.1.2の fastIframe パラメータ関連の不具合を修正しました。fastIframe パラメータ未定義の旧 colorbox にも対応してます。 2011-10-13 Ver 0.1.2 ColorBox1.3.18に対応しました。 2011-10-08 Ver 0.1.1 jQuery1.6.4に対応しました。 LightBox 系プラグイン の中でも人気の高い jQuery ColorBox をフォームの入力画面用にカスタマイズしてみました。仕事柄、画像の表示を主目的とする LightBox 系のプラグインを使用することはあまりないのですが、iframe に対応してるものも多く、登録系の画面が主となる業務アプリでも使えそうだなぁと思い ColorBox をベースにちょっと作ってみました。（ちなみにオリジナル の co
タイトルからも想像できますが、地味な jQuery プラグインです。毎度、似たような記述をするのが面倒だったのでプラグイン化してみました。 機能概要 INPUT もしくは TEXTAREA 要素のキー入力で、大文字のみに入力制限したり、キー入力を漢字モードにすることができます。 実装方法 実装は非常に単純で、対象要素に対し CSS の text-transform と ime-mode を当ててるだけです。ただ、text-transform については、見た目は大文字になりますが、内部的には実際入力した値を保持してしまうので、対象要素の blur イベント内で toUpperCase() して大文字変換しています。 ちなみに ime-mode は IE と Firefox3 以降でしか対応してないので、漢字入力モードはその他ブラウザでは適用されません。 使い方 jquery.js、jque
jQuery Ex Alert Dialogs の更新履歴 2011-06-07 Ver 0.1.2 各種パラメータの指定、API オブジェクトの取得をできるようにしました。 毎度ながら地味なネタですが、FORM 要素で登録確認のダイアログを表示する際、jQuery Alert Dialogs で代替えする方法について書いてみたいと思います。ちなみに jQuery Alert Dialogs とは、独自デザインなダイアログを表示してくれる jQuery プラグインです。 alert等のウィンドウ内ダイアログを実現するjQueryプラグイン「jQuery Alert Dialogs」- PHPSPOT confirm 関数で登録確認ダイアログを表示する FORM の SUBMIT ボタンクリック時に、登録確認のダイアログを表示させる場合、通常以下のような書き方で confirm 関数を使用す
先日、現物とドキュメントの乖離に嫌気がさし、テーブル定義書の和名や説明文を、ＤＢのメタ情報として保存できるようにする Web アプリを作りました。（オラクルのデータディクショナリを利用してます） テーブル定義書イメージな画面から Ajax + In-Place-Editor で直接編集できるようにしたのですが、編集量が多い時など、キー操作による上下左右のフォーカス移動ができないとどうにも不便だったので、これを可能にする jQuery プラグインを書いてみました。 機能概要 テーブル要素内の INPUT、TEXTAREA、SELECT、A のいづれかの要素にフォーカスした状態で、[Shift] + 移動したい方向の[矢印キー]の入力で、セルを跨いだフォーカス移動ができます。 Opera の空間ナビゲーション機能 Opera にはもともと テーブル要素に限定せず、同様のキー操作でフォーカス移動
ブラウザのウィンドウサイズが変更された時に、何らかの処理を行いたい場合、jQuery では resize() メソッドで window オブジェクトに対し処理を割り当てます。 $( window ).resize(function(){ /* 行ないたい処理 */ }); 一方、div 要素などの普通の HTML 要素に対し、resize() メソッドで割り当てた処理は起動されることはありません。resize() メソッドではウィンドウのサイズ変更しか検出することができないようです。 今回作成した jQuery プラグイン exResize を使用すると、div 要素等の普通の HTML 要素においても、サイズ変更を検出し、割り当てた処理を実行させることができるようになります。 機能概要 以下の基本機能があります。 div 要素等の普通の HTML 要素に対するリサイズイベントの割り当て
先日、select 要素の値を矢印キーで変更してたら jQuery の change イベントが起動しないという事象に遭遇しました。例のごとくまた IE6 固有の問題かと思ってたのですが、念のため調べてみると Opera 以外はほとんどのブラウザで再現してしまいました。 という訳で select 要素で正しく change イベントを起動させる jQuery プラグインを作ってみました。 矢印キー change イベント対応ブラウザの調査 select 要素の値を矢印キーで変更した場合に、change イベントが正しく起動されるブラウザを、jQuery のバージョン別に調べてみました。結果は以下の通り。 jQuery 1.3.2 jQuery 1.4.2 jQuery 1.4.3rc2 IE6 ○ × × IE7 ○ × × IE8 ○ × × Firefox 3.6.10 × × × S
すっかり月一ペースのエントリになってしまってますが、そろそろ９月も終わりなので実務も兼ねたネタを１つ… 今やってる業務は、２ヶ月程前に引き継いで担当になってしまった新システム（Webアプリ）の設計で、外注分の帳票出力機能の設計をやっているところです。今のところ以下のような前提条件があります。 エクセルで出力 IE 内の VBScript（ActiveX）で帳票生成処理を完結させる（社内標準が Offece2000 から Offece2010 になろうとしてる関係もあり･･･） １つのブックにいろいろなパターンのシートを含める（動的に生成するグラフやオートシェイプを含んだシートとか） 年に１、２回の確率で帳票レイアウトが変更されていく可能性が高い VBScript から グラフやオートシェイプを直接いじるのは結構面倒なのですが、エクセル内で定義した特定のマクロを引数付きで起動することもできる
先日「jQuery の紹介」と題して、職場（情報システム部門）向けのプレゼン資料を作成する機会がありました。うちの職場では「新技術紹介」という名目で、隔週でプレゼンを行うという決まりがありやむなく作ったものです。（資料の内容自体は、大量にブクマした記事から jQuery の紹介文の部分だけをコピペして作った手抜き資料ですが･･･） はじめはパワーポインタで作ってた資料ですが、jQuery の紹介で jQuery のプレゼンツール使わないのもどうかなと思いプラグインを探しはじめましたが、例のごとくなかなか IE6 にもやさしいやつを見つけられずに･･･（会社の標準ブラウザは未だに IE6 なんです） そんな訳で、結局自前で作ることになった jQuery ベースのプレゼンツールを紹介致します。 機能概要 html モードとプレゼンモード html モード（普通の html ページの表示）とプレ
更新履歴 2011-09-29 Ver 0.1.3 に更新 垂直方向へのスクロール状態でのメニュー表示位置ずれ不具合を修正しました。 2010-12-01 Ver 0.1.2 に更新 ドロップダウンメニューの保持を示すマーカー（»）の表示位置の調整処理を補正しました。 2010-11-17 Ver 0.1.1 に更新 メニューが画面の端で展開された際に、ウィンドウの表示枠からはみ出て隠れてしまわないように、表示位置を補正をするようにしました。Demo 先日、イントラの WEB ページで 10 年以上使用してる Java アプレット製のドロップダウンメニューを JavaScript でリニューアルしたいという相談を受けました。jQuery のプラグイン使えば簡単かなと思い安請け合いしたのですが、なかなかしっくりくるプラグインを見つけることができませんでした。具体的には水平/垂直の両方向に対応
更新履歴 2011-07-05 Ver 0.1.5.1 リスト編集モードで値未入力時のラベル表示不具合等を修正しました 2011-06-20 Ver 0.1.5 表示テキストの整形処理を記述できる replaceLabel パラメータを追加しました。 2011-04-29 Ver 0.1.4.1 編集値の変換処理の不具合を修正しました 2011-04-21 Ver 0.1.4 リスト編集モード等の機能追加をしました jQuery exInPlace Editor にリスト編集モード等の機能追加をしました - Cyokodog::Diary 2010-07-17 Ver 0.1.3 editorType パラメータを textarea にし元テキストに br もしくは p が含まれた場合、textarea 内で改行に置換されない不具合を修正しました 2010-07-16 Ver 0.1.2
更新履歴 2011-09-29 Ver 0.1.4 に更新 jQuery 1.6.2 に対応しました 2010-06-10 Ver 0.1.3 に更新 getTargets, getTarget メソッドを追加しました 2010-06-04 Ver 0.1.2 に更新 IE6 で実行時にタイミングにより表示されてたエラー警告を、表示されないように修正しました。 2010-06-01 Ver 0.1.1 に更新 IE で正常に動作しない不具合を修正しました。 社内アプリも Ajax 的な UI なものが増えるにつれて、１画面にたくさんの機能を詰め込みたいという要望を受ける事が多くなりました。素直に作るとプログラムも肥大化し保守も大変になるので、機能単位に画面を分けて作成し、それぞれの画面を iframe で１つの画面に読み込むといった方法で対応したりしてます（iGoogle 的な感じ）。 そ
前々から GAE/J で何か作ってみたいと思ってたのですが、あまりネタも思いつかなかったので、とりあえず jQuery Plugin のまとめサイトを作ってみました。 jQuery Plugins - jQuery.Doc 機能紹介 見たまんまなので、特に説明は要らないかと思いますが一応.. 1)カテゴリ プラグインのカテゴリのリンクです。リンクのクリックで対象のプラグインのリストが名前順で表示されます。 New Plugin をクリックした時のみ データの登録日付、名前順で表示されます。 2)プラグイン名 プラグインのプロジェクトサイトにリンクしてます。 3)日本の国旗 和製プラグインの場合に日本国旗のアイコンが表示されます。 4)製作者名 twitter のアカウント、もしくは、はてな ID が確認できたプラグインのみ製作者名が表示されます。 5)非対応ブラウザ 非対応ブラウザを赤字の
更新履歴 2011-06-20 Ver 0.1.1 パスにブランクが含まれてると、FTP に失敗する不具合を修正しました。 Gumblar がはやってるさなかに不謹慎な気もしますが、仕事でちょっと必要だったもので... ActiveX ということで IE でしか使えませんが IE オンリーな会社のイントラアプリや HTA アプリ向けになら使ってもいいかなと...（ダメ？） ちなみに HTA についてはこちらが詳しいです。 HTAでフォームを利用したサンプルを作る - IT PRO JavaScriptでかんたんHTAアプリに挑戦 - てっく煮ブログ 使い方 プラグインの読み込み jQuery と jQuery.exActiveXFTP.js を読み込みます。 <script type="text/javascript" src="jquery.js"></script> <script t
時間もネタも無いのですが、最低でも一ヶ月一エントリはしときたいので、前回(CSS1 のみで質感のあるボタンを表現してみる)と同じような内容になりますが書いときます。 今回は CSS1 のみで質感のあるウィンドウを表現してみます。また応用として、ダイアログウィンドウを表示するプラグイン jQuery Alert Dialogs に、今回定義する CSS を当てて、見た目を変えてみます。 CSS 定義とマークアップ ブラック系のウィンドウを２種類定義してみました。html を以下のようにマークアップします。（サンプルでは dl を使ってますが div でも OK です） <dl class="ex-window-bk1"> <dt class="ex-window-head"><span>Window</span></dt> <dd class="ex-window-body"> <p>CSS
CSS3 を駆使すると、とてもリッチなボタンパーツが表現できるようです。 CSSグラデーションのちょっとしたテクニック #2 - hail2u.net CSSの実装状況で変わるボックスのデザイン方法 - 3.5ping.org 悲しいことに勤務先の PC の標準ブラウザは IE6。近いうちに IE8 へのアップグレードを予定してますが、残念ながら IE8 では CSS2.1 までしか対応してないようです。 上記のリンク先のサンプルには遠く及びませんが、先日、PC の中身を整理してたら IE6 で質感のあるボタンを作ろうと試行錯誤してた頃の html ファイルが見つかりました。会社で CSS3 が使えるようになるのも当分先になりそうですので、備忘録としてこちらに残しておきたいと思います。 li 要素と a 要素でボタンを表現 li と a 要素に CSS を当てることで、以下のようなボタンを
以下のような丸囲い数字や半角カナを、他の文字に変換する jQuery プラグインを書いてみました。 フォーム要素などでこれらの値が入力されるケースが良くあるのですが、環境によっては文字化けやトラブルの要因になるので、登録処理を行う前に代替の文字に強制変換するといった使い方をしています。 使い方 jquery.js 、jquery.exreplace.js を読み込み、変換対象の要素に対し exReplace() メソッドを実行すると、表のとおりの変換処理を行います。パラメータを指定することで、変換対象の文字を限定することができます。 Demo 保存ボタンを押した時点で変換したい場合は、保存ボタンの click イベント内で exReplace() メソッドを実行します。 jQuery(function($){ $('#save_btn').click(function(){ $('inpu
jQuery UI の $.widget を使用しプラグイン定義を行うと、jQuery らしい一貫性のあるプラグイン API が使えるようになります（関連記事）但し「ui.core.js（13.6KB）が必須」「API メソッド実行の記述が冗長になる」といった条件がついてしまいます。 今回はこれらの問題を解決しつつ、jQuery UI のような柔軟性の高いプラグイン API を定義する方法について考えてみました。 jQuery UI と jQuery TOOLS のプラグイン API jQuery UI では、プラグイン API のメソッドを実行するには、プラグインメソッドの引数に API メソッド名を指定するかたちで実行します。そのためメソッド実行の記述が少々冗長になります。 //jQuery オブジェクトが返えされる var dialogs = $('#sample1,#sample2
jQuery UI の tabs や accordion といったウィジェット系プラグインでは、専用のプラグイン定義関数 $.widget でプラグイン定義することで、一環性のあるプラグイン API を利用者に提供しています。 今回は、$.widget を使ったプラグインの定義方法について調べてみました。 ui.core.js の入手 $.widget は jQuery UI の ui.core.js というソースファイル内に定義されてます。 公式サイト（http://jqueryui.com/download）よりプラグイン一式をダウンロードし、zip ファイルを解凍すると、以下パスに ui.core.js があるので、これを読み込み $.widget を使用できるようにします。 jquery-ui-1.7.2.custom/development-bundle/ui/ui.core.j
更新履歴 2010-06-02 jQuery.exTable.js を Ver 0.1.2 に更新 jQuery 1.3 以上のバージョンで正常動作しない不具合を修正しました。 サンプルを含む zip ファイルでダウンロードできるようにしました。 2010-01-21 jQuery.exTable.js を Ver 0.1.1 に更新 セルの内包要素の膨張、table 要素の margin 設定等によるレイアウト崩れ抑止処理を追加しました ヘッダ・ボディ・フッタ内のテーブル要素を取得するゲッターメソッドを追加しました 記事中のソースを修正しました だいぶ前に書いた「tableのヘッダを固定させる簡易scriptをサクっと作ってみた」というエントリに、「サンプルソースを参考にフッタも固定しようとしたけどうまくいかない」というコメントを先日頂きました。今にして見ると、前回、前々回のエントリで書
jQuery の標準 API が DOM 操作等のコア機能に特化しているのに対し、プラグインとして提供される機能には、ウィジェット生成処理をはじめとした拡張機能的なものが多々あります。 また、このようなプラグインの中には内部的に生成した要素やメソッドに対し、外部から参照、実行が可能な API を用意し、プラグインに柔軟性や拡張性を持たせてるものもあります。 前回のエントリ（jQuery プラグインの定義パターンについて調べてみた）同様、公開されてるプラグインのソースを参照し、どのようなプラグイン API の定義パターンがあるか調べてみました。 ColorBox のプラグイン API を実際に使ってみる 定義パターンを見る前に、画像ギャラリー系プラグイン ColorBox の提供するプラグイン API を使用し、どんなことができるのか試してみます。 ColorBox は、画像ファイルにリンク
jQuery のプラグインの定義手法については、いろいろな記述の仕方が考えられるかと思います。今回、実際に公開されているソースを参照して、どのような定義パターンがあるのかを調べてみました。 jQuery 標準 API の定義構造のおさらい まず、jQuery が標準で提供している各種 API が、どうのような構造で定義されてるかおさらいしてみます。 $ や jQuery はグローバル変数、つまり window オブジェクトのプロパティ名であり、その実体は関数オブジェクトです。 window.$ = window.jQuery = function(){ ... } jQuery が提供する API には 関数 API と メソッド API があり、関数 API は jQuery 関数オブジェクト（以降 jQuery セレクタと記述します）が持つ、関数オブジェクトのことを指します。 jQue
画面上の変更したいデータや文章をクリックすると、画面遷移をせずその部分のみが編集可能状態になるユーザインターフェースのことを Edit-In-Place あるいは In-Place-Editor と呼ぶそうです。 jQueryでEdit-In-Place（その場編集）を実現するためのプラグイン＆チュートリアルいろいろ - IDEA*IDEA inplace edit で始める DOM スクリプティング - 脱エンタープライズ志向 今回は jQuery による In-Place-Editor の実装方法について考えてみます。 In-Place-Editor の効果的な使い方 登録文書を承認ワークフローでまわすようなシステムの場合、同一文書に対し複数ユーザが修正や加筆をするというケースがよくあります。その際起こる問題として「データ編集中に他者に更新を先越され、登録処理で排他エラーになってしまっ
exTAB.js は、見出し要素ベースなタブ UI を生成する jQuery プラグインです。 前回のエントリ（アウトラインの付いたタブ UI の CSS の記述方法を調べてみた - Cyokodog::Diary）で調べたタブデザインを簡単に適用できるようにした他、以下のような機能拡張を行いました。 実行方法の簡素化 パラメータによる各種スタイルの設定 見出し要素(h1 - h6)以外にも、DL、UL、任意の要素でタブ UI の生成が可能 Ajax によるパネル内コンテンツの取得と表示 実行方法の簡素化 以前の仕様では、「タブ化する要素」「タブの挿入先基準位置をもつ要素」の２つを指定する必要がありましたが、「タブ化する要素」のみの指定で動作するようにしました。タブの挿入先はデフォルトではパネル要素の上になります。 $('h3').exTAB(); パラメータを指定することで任意の場所にタ
以下のようなアウトライン付きタブ UI の CSS の書き方が分からなかったので調べてみました。 シンプルなアウトラインのタブ UI まず、タブ、タブを束ねるタブグループ、タブに対応するパネルを用意します。タブの底辺を除き、タブとパネルにはアウトラインを引いておきます。 次に、タブグループの底辺、各タブの左辺にネガティブマージンをかけ隣接するアウトラインを重ね合わせるようにします。 アクティブタブとパネルの接合部のラインを消すために、z-index でアクティブタブを前面に持ってきます。この時 z-index を有効にするためにタブとパネルの position を relative にします。 こんな感じになります。 Demo ソース <head> <style> /* Step.1 */ ul.tabs{ margin:0; padding:0; } ul.tabs li{ margin
以前、exFixed という jQuery プラグインを作成しました。IE6 で position:fixed を実現するプラグインで、特徴として IE6 でもガタつかない position:fixed が可能 クロスブラウザで fixed 要素に対し、位置移動、リサイズ等の動的な変更が可能（素のanimate メソッド等も併用可） といった事が挙げられます。 IE6 position:fixed の諸問題を解決する jQuery.exFixed.js IE6 position:fixed / exFixed.js を動的な位置移動やリサイズ処理に対応させてみた 今回、このプラグインをご利用下さった方々からのフィードバックを元に、機能拡張と不具合修正を行いました。 機能拡張 これまでは IE6 でもモダンブラウザの position:fixed と同レベルの扱いが出来ることを目指してました
次のページ
このページを最初にブックマークしてみませんか？
『Cyokodog :: Diary』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
