jQuery

HTML5 Form Validationサンプル（Bootstrap 4.0 + Constraint Validation API）

by

フォームのバリデーションを自前で実装せざるを得ない場合に使える Constraint Validation API のサンプルを作った。
ついでに Bootstrap 4.0の Forms Validation との連携もしてみた。

See the Pen Bootstrap 4.0 + Constraint Validation API Sample (ja) by Tenderfeel (@Tenderfeel) on CodePen.

続きを読む

[JS] Google Visualization API がなかなか便利な件

by

Google Spreadsheetを愛用していて、ゲームの攻略データなんかを纏めていると「この中身をそのままサイトにできないものか…」と思ってたんだけど、
普通のエクスポートでCSV形式だとドメインの呪縛を受けてしまってJSだけでは難しい。
そこで適当に検索してたら結構前からあるらしいGoogle Visualization APIが使えると知って飛びついてみたら、
なかなか便利な感じだったので簡単なサンプルを書いてみた。

悪魔図鑑 (Google Visualization API + backbone.js test) – jsdo.it – share JavaScript, HTML5 and CSS

続きを読む

prototype.js vs jquery vs mootools vs YUI vs Dojo

by

prototype.js、jquery 、mootools、YUI 、DojoAdobeSpry、Dojo、
MicrosoftAjax、YUI、Rico、MochiKit、Ext、Alfax、script.aclo.us…
実際使ってるのから名前は聞いたことある程度のものまで、色々と出てきて便利なのはいいんだけど、
正直どれ使えばいいのか分からない…(´д｀)という時もある。自分は大抵mootoolsだけどｗ
選ぶ時の参考になるかもしれないAjaxフレームワークのベンチマーク記事の紹介。

まずPeter Velichkov’s Blogの
MooTools vs JQuery vs Prototype vs YUI vs Dojo Comparison Revisedでは
タイトルに挙げたprototype.js、jquery、mootools、YUI、Dojoのベンチマークをグラフにして比較しています。
単純に速度だけの計測なので、サクサク感で選びたいときの参考になる。

続きを読む

[Ajax]prototype、jQuery、mootoolsのプラグイン仕様比較

by

Ajaxフレームワークのプラグインの仕様比較と作成方法について。
個人的によく使うprototype、jQuery、mootoolsのプラグインテンプレートとサンプルソースをそれぞれ載せてます。

短いソースならベタ書きでも悪くはないけど、使いまわしが効いたり、衝突が起きなかったりと
大掛かりなものになればなるほどメリットはあるので、よく使うなら覚えておいて損はないと思う。
でもプラグインを作ること自体はそう難しくなくても、理解するのが大変なんだよな。
どれか１つ把握してたら応用で他のも作れるようになるはず。ソースは私。

なお、適当に書いたサンプルソースは全て
「IDで指定した要素の文字色をオプションで指定した色に変える」という内容です。
また、あえてメソッドを動作させるようにしています。

ソースの説明書き加えた

mootools (ver1.2)

まず個人的に一番気に入ってるmootoolsから。
mootoolsのプラグインは特に決まった書式などは無く、Classで作成されているものが多いです。
Classという名前の通りPHPやJAVA等のクラスとほぼ同じ仕様なのでとっつきやすいと思われる。

続きを読む

[js]Ajax.Requestと405 Method Not Allowed

by

405エラーは主に、POSTメソッドの使用が許されていない場所で、POSTメソッドを使用した場合に返される。
さくらインターネット等、CGIやSSI等のダイナミックコンテンツにしかPOSTメソッドが容認されていない場合に、
AjaxでXMLHttpRequestメソッド使った時にタイプがPOSTだと405 Method Not Allowedになる。

CGIでも.htaccessにAddHandler cgi-script .cgi などが記述されておらず、
CGIとして設定されていない状態でPOSTで送ると同じエラーになる。

Apache1.3系は静的ファイルにPOSTが使えない。
Apache2系はPOSTもGETも同じ挙動。

解決策
XMLHttpRequestメソッドのタイプをPOSTからGETに変更

※.htaccessでAddHandler server-parsed .htmlとするのは良くない。

続きを読む

[jQuery]サムネイルクリックで画像変更（+effect）

by

前にmootools1.2で作ったのと似たものをjQueryでも書いたので晒します。
このスクリプトは画像切り替えだけです。

動作にはjQuery1.2.6が必要です。

続きを読む

[JS]マウスオーバーでリンク画像の透明度とか変更

by

マウスオーバーの画像作るのﾒﾝﾄﾞｸｾｰと思ったときに、画像１枚でごまかせるから便利。
普通のロールオーバーよりも凝ったことも出来るので手抜きに見えない所が良いですｗ
難点はjavascriptオフで効果がなくなることですが、
javascriptを意識的にオフしてる人というのは限られてるので大丈夫だと思います。

prototype＆script.aculo.us、jQuery、mootoolsでそれぞれ書いてみた。

続きを読む

[WP]AutoExternalLinkプラグインをjQuery版にする

by

AutoExternalLinkプラグインはprototypeが使われてます。
前回書いた[WP]AutoExternalLinkプラグイン修正は、prototypeを使ったVicuna用の改造方法でしたが、
今回はリクエストにお答えしてjQuery版に変更する方法を解説します。
ついでにwp_enqueue_script()への対応方法も載せてます。

プラグイン作者はinoccoさん、jsソースはFsikiさんが作られたものです。
この記事では改造部分のみ掲載しており、変更後のソースそのものは配布してません。

続きを読む