PhantomJSのリモートデバッギング的なアレ
Remote Debugging Remote debugging permits inspection of the script and web page via another WebKit-based browser (Safari and Chrome). Troubleshooting · ariya/phantomjs Wiki PhantomJSにおける地獄のconsoleデバッグよりも、場合によってはマシかもしれないリモートデバッグのメモ。 phantomjs --remote-debugger-port=9000 test.js --remote-debugger-port オプションで、ポート番号を指定するとリモートデバッガにアクセスできる。上記の例であれば、http://localhost:9000 で開ける。 手順 --remote-debugger-port:9
背景色をrgbaとrgbで2重指定するときのIE地雷
はじめに結論 CSSで背景に透過色を指定する際に，本来のrgbaとIE6-8用のrgbを2重で書いたりしますが，うっかりハマるポイントがあるので紹介． 結論から言うと背景プロパティは，background-colorではなく，backgroundを利用しましょう，ということになります． Goodパーツ こう書くことを鉄の掟としておけば，特にハマることはないとおもいます．きっと． .someClass { background: rgb(128,128,128); /* または background-color: rgb(128,128,128); */ background: rgba(128,128,128,0.8); } 両方ともbackground指定にしておけば覚えやすくて安全ですが，rgb側はbackground-colorでも大丈夫です． Badパーツ こうやるとIE6-8で背
Sublime Text 2を使ってみたら思ったより良い
Sublime Text 2（Mac版） 使ってみたら思ったより良かったので、設定メモを残しながらブログにしてみる。 Sublime Text - Download 特徴 Vimキーバインドに対応 拡張がPythonで書かれてる PyよりRuby、VimよりEmacsな自分とは縁遠かったはずなのですが…。 入力補完が優秀（WebStormほどではないにせよ） デフォルトのショートカットがわりと自然（個人の感想です） 画面のスプリットができる 設定画面をもたないが、JSONをいじれば徹底してカスタマイズできる パッケージを入れて機能を増やせる 右サイドのミニマップおもしろい Goto Anythingべんり（個人の感想です） 海外では結構な人気らしく、たしかにパッケージも豊富でよいです。 同意 テキストエディタの挙動とvimの挙動がうまいこと両立しててなんちゃってvim使いの僕には嬉しいです
モバイル用に:targetや:checkedでつくるPure HTML5/CSS3なアコーディオンについて（追記 :checked版でAndroid4.x対応の改良コード）
Pure HTML5/CSS3のロマン ただしモバイルデバイスに限る。 しばしば話題にあがるHTML5/CSS3による気合戦法のアコーディオン（ないしクリッカブルなパーツ）を、モバイルデバイスでの動作をiOSおよびAndroidを中心に記述・検証してみました。 今のところメジャーなのは、:target戦法と:checked戦法だと思うので、それぞれ試しています。これらの擬似クラスを使って、状態制御を行いつつセレクタで表示状態のスタイルを適用します。 :target戦法 :target擬似クラス+アンカーリンクで状態を制御しながら、子要素としてコンテンツを表示させる方法。わりと手軽に使えるので、使い所さえ選べば良いのかも。 サンプル コード全体 <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name=
LESS.jsでブラウザ上からlessファイルの更新をwatchして変更を自動で反映する
LESSファイルの更新を監視＆反映 お手軽にLESSを使うときは、HTMLにLESS.jsを直接読み込んで、オンブラウザで実行すると便利です。リモートに仕込みをする必要もありませんし、ローカルでコンパイルしてからアップロードするといった手間からも解放されます。 そいで今回は、あまり知られていない（と思われる）ブラウザ上のLESS.jsでlessファイルの更新をwatchする方法について。 後日の追記 以下に色々書いてありますが、lessファイルにLast-Modifiedヘッダが付いてるとwatchしても、developmentでもlocalStorageにキャッシュされたり、XHR監視されても反映されなかったりうまく動かない。 nginxであれば、例えばadd_header Last-Modified "";等の記述を加える必要が。HTTPヘッダ関わらず、フロント側のみで、ちゃんと適用さ
jQuery Mobileをマジメに使うならやっておくべきローカライズとかの設定
jQuery Mobileつかってますか？ jQueryでキャラを立てたいわけじゃないんですが...，たびたびのjQueryネタです．なんだかんだで需要が高く，最近は実案件で触る機会があったので情報を残します． いくらお手軽でも，まじめに使うならこれぐらいはやっておかないとダメじゃないかと思う設定のポイントを軽く紹介．Loading...とかデフォルト英語なラベルの変更とかです． 設定の初期化 デフォルトの文字表示やクラス名等の設定を変更するときは，Configuring Defaultsによると，jQuery本体とjQuery Mobileの間に初期化スクリプトを挿入します． <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <script type="text/javascript"> $(docume
node.jsとsocket.ioを使って接続する実装サンプルと，ポートの設定周りをごく基本的に
インスパイアされて試してみた node.js+socket.ioを使ったライブコーディングwebアプリを作ってる - すぎゃーんメモに影響されて，ちょうどnode.jsを触っていたので，自分もnode.js+socket.ioを試してみました． コードや設定は別途調べて自分なりに書いてみたり．なかなか勉強になりまして，ちょっと分かってきました．試してみたらワクワクしてきますね！ リアルタイムな実装が，こんな簡単にできるなんてすごい， 今回は，それらのごくごく基本的な実装と設定周りをまとめました．サンプルコードは，socket.ioを動かすところまでを最小限に記述しています． node.jsを動作させ始めるまでの道のりはnode.js用の環境作り - ディレクトリ構成とnginxの設定から起動テストまでとか，node.jsとnpmのインストールをしたメモとかを． サーバーサイドの実装と設定
node.js用の環境作り - ディレクトリ構成とnginxの設定から起動テストまで
開発環境を設定してみる 前回の，node.jsとnpmのインストールをしたメモ（CentOS さくらのVPS）でnode.jsとnpmをインストールしましたが，まだ環境設定ができてなかったので今回も引き続き下準備． (仮に) /hogehoge/public/dev/ で開発することに．環境のディレクトリ構成とか，サーバー設定についてあまり参考になる記事を見つけられなかったので，以下適当に設定をしてみた．サーバーは，nginxを使います． ディレクトリ構成の予定 /hogehoge/public/dev/server.js : 8124をlistenするHTTPサーバー的なJSファイル．． /hogehoge/public/dev/app/ : その他lib的に，nodeで実行するJSを設置する． /hogehoge/public/dev/www/ : 公開ディレクトリとして，CSSやクラ
jQuery.each における continue, break 相当の処理
jQuery.eachでは return true / false で、cotinue, break相当の処理 $.each(function() { if ( flg ) { // continue に相当する return true; } else { // break に相当する return false; } }); またメモエントリー。どっちがtrueで、どっちがfalseかウロ覚えになる度に、Google先生に訊くのも何なので。 ちなみに、最近ほんの少しずつ試させていただいてる uupaa.js では、何かしら return すればcontinueのような感じの挙動。こちらは、凝った事するなら普通にfor文書こうぜ、っていう話かしら。 jQueryのeachは、PHPのforeach的な趣きだし、foreachを賢くするためにコストを支払う必要も無い気もしつつ。それだけjQue
jQueryのfilterを拡張する方法
filterに任意のメソッドを拡張する方法 .filter() – jQuery API Quick Tip: Dissecting jQuery – Filters を参考に、jQueryのfilterを拡張します。簡単です。 拡張コード // 書き方1 jQuery.expr.filters.isFloatUnit = function( elem ) { return elem.className.match(/(image|map|youtube|eximage)-(left|right)/); } // 書き方2 $.extend( jQuery.expr[':'], { isFloatUnit: function( elem ) { return elem.className.match(/(image|map|youtube|eximage)-(left|right)/);
iPadやiPhoneなど、デバイスごとに最適化したCSSを読み込む Media Queries
iPhoneとかiPadとか、デバイスに応じて最適化する @tee_suzuki さんに、Media Queries なる実装が存在すると聞いて、早速トライしてみました。Media Queries自体はCSS3の実装の一環のようです。media属性の中に、デバイスの種類や解像度、向きなどの条件文を記述することで、適用するCSSを分岐させる仕組み。 こんな感じのものをheader要素へ width: 〜480pxの端末のときには iphone.css width: 481〜1024の端末が縦（portrait）のときには ipad-portrait.css width: 481〜1024の端末が横（landscape）のときには ipad-landscape.css width: 1025〜の端末のときにはpc.css Media Queries デモ ためしに、Media Queriesを
skipfishで脆弱性チェック
Webアプリケーション向けセキュリティスキャナ (さらさらっとメモ書き的に公開しようと思ってたら、3週間ぐらい公開ボタン押すの忘れてた....) このテのツールは手を出したことがなかったので、これを機に試してみた。Googleさんが言うなら間違いない！！とはいえ、セキュリティスキャナとしては正確性よりも速度と簡便さを重視だとか。 グーグル、ウェブアプリの脆弱性検査ツール「skipfish」を公開:ニュース - CNET Japan skipfish - Project Hosting on Google Code 入れてみよう 何も考えずにmakeすると /Users/*****/*****/skipfish% make cc -L/usr/local/lib/ -L/opt/local/lib skipfish.c -o skipfish -O3 -Wno-format -Wall -f
manifestファイルとかの続き
制約というか仕様というか HTML5的にmanifestファイルをゴニョった ( HTML )の続き そもそもアプリケーションキャッシュって何よ、って話ですがブラウザが勝手にするキャッシュの超強いヤツと捉えればOKです。強すぎて、ミスったときに消しづらいです。HTML5からの実装です。 manifestの指定はドメイン単位で効果があるので、サブドメイン含めてドメインが異なれば効果がありません。Safariは問答無用に適用されますが、Firefox3.6の場合だと「This website ( ayumusato.com ) is asking to store data on your computer for offline use. Allow | Never for This Site | Not Now」と洋風に訊いてくれます。不具合ありそうならここで拒否ればOKなわけですね。 い
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
