とりあえずJavaScriptを記述して動作を確認したいって時はFirefoxに搭載のスクラッチパッドが断然便利 ｜https://wp.yat-net.com/name
2013年 04月 05日 とりあえずJavaScriptを記述して動作を確認したいって時はFirefoxに搭載のスクラッチパッドが断然便利 カテゴリ： Firefox タグ：javascriptエディタデバッグ JavaScriptを記述出来るエディタは沢山あるんですが、「とりあえずソースを書いて試したい」って時はFirefoxに標準で付属しているScratchpad（スクラッチパッド）を使っています。 Scratchpad（スクラッチパッド） Firefox 6で搭載されたスクラッチパッド。使ってる人は結構居るかもしれませんが、まだ知らない人も居ると思うのでちょっと紹介しようと思いました。 Firefoxにはブラウジングする機能以外に開発者向けの機能が沢山備わっています。Scratchpad（スクラッチパッド）もその中の一つで、これはJavaScriptのソースを記述・実行・デバッグが
[JS]1.9から仕様が大きく変わったjQueryの複数のバージョンでのテストを簡単にできるスクリプト -version.js
jQueryは1.9から大きく仕様がかわり、プラグイン開発者やウェブ制作者は今まで以上に各バージョンの互換性に苦労するようになりました。 たった一行加えるだけで、jQueryの複数のバージョンでのプラグインやウェブサイトの動作テストを簡単にできるスクリプトを紹介します。 ※jQuery以外のスクリプトにも対応しています。 デモページ version.jsの使い方 使い方は簡単！ テストページに一行加えるだけです。 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <script src="version.js" data-url="google" data-lib="jquery" data-ver="1.5.0"></script> Step 2: スクリプトの実行 あとはjQueryのバージョンをパラメータに付与し、ページをロードするだけです。 http://
jQuery 1.9 のソースマップ対応で圧縮版でもデバッグが簡単になった話
jQuery 1.9 がリリースされました。1.9 の新機能の中ではあまり注目されていませんが、ソースマップに対応したのが地味に便利そうです。 というのも、圧縮版の jquery.min.js を使っていると 何か問題が起きたときにスタックトレースを眺めても jQuery の部分が意味不明 デバッガーで jQuery のソースにステップインしても意味不明 といった理由で、開発中には非圧縮の jquery.js を使うことが多かったわけです。 それが、1.9 からはソースマップに対応したので圧縮版のままでのデバッグが簡単になってます。 超簡単な使い方 ソースマップに対応したブラウザーは現時点では Google Chrome のみなので、Google Chrome の手順を説明します。 (Firefox はソースマップへの対応を計画中らしい) 事前準備を忘れずに Google Chrome で
ウェブサイトの制作に必ず役立つブックマークレットのまとめ
ウェブサイトの制作に役立つ便利なブックマークレットを紹介します。 ブラウザの機能拡張も便利ですが、入れすぎると重くなるのがイヤな人にぴったりです。 レスポンシブの確認はこれが一番便利 コードとアクセシビリティをチェック ページに柔軟なグリッドを表示 デザインの確認がピクセル単位でできる CSSの変更をリフレッシュ無しで確認 要素のスタイルを確認 CSSのセレクタを確認 ページで使用しているカラーを抽出 CSS3をサポートしていないブラウザでの見え方 ページの見出しを抽出 ページの構造が正しいか確認 ページをワイヤーフレーム化 コードをシンタックス化して読みやすく スマフォやタブレットでもコードが見たい レスポンシブの確認はこれが一番便利
『Chrome Developer Tools』の裏ワザまとめ | IDEA*IDEA
ドットインストール代表のライフハックブログ
WordPressテーマ開発向けプラグインを一式管理するプラグイン・Developer
WordPressを提供するAutomattic社が 先日リリースした、テーマ開発者 向けのプラグインを一括管理できる プラグイン、Developerのご紹介。 とくに特別な機能は無いです。 WordPressのプラグインの中には様々なテーマ開発補助のプラグインが存在します。その中で、Automattic社が選定して一括管理出来る様にしたプラグインがDeveloperです。 デバッグとかテストツールとか、WordPressのテーマ開発によく使われる補助プラグインをインストールできる等、一式管理できる、というプラグイン。 管理できるプラグインは以下の通り。 Debug BarDebug Bar CronRewrite Rules InspectorLog Deprecated NoticesVIP ScannerMonster Widget Beta Testerスクリーンショット ↑ プラ
ChromeのデベロッパーツールでCSSの未使用セレクタを調べる方法
Google Chromeのデベロッパーツール で現在閲覧中のページでロードされて いるCSSファイルから未使用のセレクタ を調べる、という方法です。こんなの Web制作者にとって常識だろ、みたい な内容だったらごめんなさい。 今更感あふれる内容ですけど、Chromeのデベロッパーツールで閲覧中のページで読み込まれているCSSからそのページで使用されていないCSSルールを調べる、という方法。 と言うかただの標準機能の紹介です。便利かどうかは使わないと分からないと思うのでテストしてご判断下さい。 手順 F12でデベロッパーツール開いてAudit（監査）っていうタブを選択し、Runで調査ツールを実行します。 ↑ 直ぐに解析は終わると思います。赤い枠の「Remove unused CSS rules」という部分が未使用のCSSルールです。 ↑ ファイルごとに調査結果が出ます。三角のマークをクリッ
正規表現をjsfiddleのようにブラウザで実行、テスト出来るツール・reFiddle
JavaScriptの開発をブラウザ上で 行えるjsfiddleの正規表現版です。 reFiddleはオンラインで正規表現 テストを行えるWebツール。勉強に もいいかもしれませんね。僕も 全然出来ないので学びたい。 愛用しているjsfiddleの正規表現版、みたいなツールです。jsfiddleのように、実行テストを他サイトに表示させたりは出来ませんが、UIも似ているので同じ感覚で利用できそうです。 左側でJavaScript、ruby、.NETから選択してテストしたいコードと、コードテスト用のテキスト等を書けばいいだけ。保存も可能です。 マッチした部分がハイライトされる、というシンプルな作りです。jsfiddle同様、ユーザー登録も可能で、フォークも出来ます。 何より使い慣れているツールとUIが似てるのが嬉しかった。正規表現全然出来ないのでこれで暫く勉強してみる事にします。 reFidd
FacebookのJavaScript SDKをテストできる「JavaScript Test Console」の徹底解説
Facebookのアプリ開発でJavaScript SDKをテストできる「JavaScript Test Console」について紹介します。 JavaScript Test Console １．「JavaScript Test Console」とは 文字通り、Facebook上でJavaScript SDKをテストするためのコンソールで、テキストエリアにFacebookアプリ用のJavaScriptコードを書いて実行させるというものです。 テキストエリアにはアプリ（HTML）の内容を丸ごと記述すればいいようです。その際、JavaScript SDKの読み込みは不要です。 ２．「JavaScript Test Console」にログイン 最初は「Status」が「not_authorized」になっているので、「Login」をクリック。 Rellというアプリのログイン画面が表示されるので「
CSS3をサポートしていないブラウザでどのように見えるか簡単に確認できるブックマークレット -deCSS3
CSS3でスタイルした箇所をサポートしていない古いブラウザ、まぁ主にIEなのですが、でどのように見えるのか簡単に確認できるブックマークレットを紹介します。
IETesterやめてExpression Web SuperPreview - ヲレサイト
IETesterやめてExpression Web SuperPreview 先日ブログをいじった後にIETesterでIE6での表示を確認したらこんなエラーが出ました･･･ IE6のエラーなのかIETesterのエラーなのかどっちだべ？（￣▽￣|||） 手持ちのWindowsXP＋IE6の環境ではちゃんと表示されたので、こりゃIETesterのエラーなんだなと放置しておりました。 ところが最近WindowsXPをインストールし直す機会がありまして、インストール直後に見てみたら本物のIE6でも同じエラーが再現しちゃいました。 ええっ、再インストールする前はエラー無く表示されてたのになんで？とは思ったんですが、この後たんまりとWindows Updateしなくちゃなのでスルー。 Updateが終わった後にもう一度見てみたらきちんと表示されてました。ううむ、IE6のバージョンに依存しているよう
必殺の .apply()フックを打つべし！ 打つべし！（JavaScript おれおれ Advent Calendar 2011 – 17日目） | Ginpen.com
JavaScript おれおれ Advent Calendar 2011 – 17日目 .apply()で成り済ましができたり仕事をスルーして丸投げしたりする事ができますが、さらにもうひとつ、フックを行う事ができます。 フック(hook)というのはフック船長のフック、鉤爪の事で、処理を「ひっかける」ような事です。ある関数が実行される際に、独自のコードを実行させる事ができます。 フック (プログラミング) – Wikipedia フック（Hook）は、プログラム中の特定の箇所に、利用者が独自の処理を追加できるようにする仕組みである。また、フックを利用して独自の処理を追加することを「フックする」という。 あの処理がどこで呼ばれてるかわからないときに 具体例をひとつ。例えばjQueryで「どこかのタイミングで勝手にクラス名が追加されてしまって困っている」という場合を考えます。その場合は .add
コードAとBを一瞬で切り替える複数行コメントの書き方（JavaScript おれおれ Advent Calendar 2011 – 18日目） | Ginpen.com
1行目を書き換えて、スラッシュ/をひとつ消したり加えたりするだけです。 ひとつ目のコードでは1行目と3行目から5行目がコメントになります。 ふたつ目のコードでは1行目から3行目と5行目がコメントになります。 コード整形のSyntaxHighlighterがうまく解釈してくれなくて、コメント色になってませんが……。
タグの閉じ忘れをチェックするブックマークレットが便利。 | バニデザノート
タグの閉じ忘れをチェックするブックマークレットを紹介します。 もう数年使わせてもらってます。 コーディングがほぼ終わった状態で、カラム落ちとか なにか表示がおかしいとき、divタグなどの閉じ忘れってよくあるのですが どのタグ周辺の閉じタグがないのかをワンクリックでチェックしてくれるものです。 使い方は簡単で、こちらのページのインストール項目の「タグ対応をチェック」というリンクをドラッグしてブックマークツールバーに入れるだけ。 あとは、チェックしたいページで さきほどブックマークツールバーに入れたブックマークを押すと 自動でチェックしてくれます！ ご参考にどうぞ。 HTML内タグの閉じ忘れをチェックするツール[ブックマークレット] 関連記事 セリフ体をうまく利用しておしゃれな印象の４サイト 2011/12/26 Fireworksの微妙な色の調節に、「ブレンダー」が便利です。 2011/12
iOSシュミレーター上でのWEBサイト開発に使える「iWebInspector」:phpspot開発日誌
Debugging tool for Safari on iPhone, iPad and PhoneGap apps - Remote Inspector (Firebug) for JavaScript, HTML and CSS iOSシュミレーター上でのWEBサイト開発に使える「iWebInspector」 iPhone用サイトはSafariやChromeでテストして後は実機で動作確認なんていう手順をとっていましたが、iOSシュミレーター上でやるとより状態が再現できてよさそうですね。 更にこのツールを使えば、FirebugやChromeのDeveloperTool風の機能も提供してくれてデバッグに便利そうです。 PhoneGapをAdobeが買収したり、今後はHTMLベースのアプリの躍進が予想され、開発環境周りも整っていきそうですね 関連エントリ 秀逸なiOSアプリケーションアイコ
Win/Mac/Linuxで動作するiPhone/iPadエミュレーター -iBBDemo3
Windows, Mac OS, Linuxで動作するAdobe AirアプリのiPhone/iPadエミュレーター「iBBDemo」が3にバージョンアップしたので紹介します。 iBBDemo3 [ad#ad-2] iBBDemoはiBBDemo2からAdobe AIRベースになり、一時開発が打ち切られましたが、このたびiBBDemo3をリリースした、と作者様より連絡をもらいました。 iBBDemo3の変更点は、バグ修正とviewportメタタグへの対応です。 iBBDemo3のiPadモードで当サイトを表示 iBBDemo3のキーボードショートカット iBBDemo3の主な操作はキーボードショットカットで行います。 iPad Ctrl+1 iPhone Ctrl+2 位置変更 Crtl+矢印キー（右・左） ズームイン Ctrl++ ズームアウト Ctrl+- コンテンツのスクロール マウ
Facebookがテストユーザー作成・編集画面をリリース
Facebookがテストユーザーの作成・編集画面をリリースしました。 これまでのテストユーザーに関する操作はAPIのみの公開でした。そのため、簡単に作成が行える「Facebookテストユーザー作成ツール」を公開しましたが、今後はFacebookの画面からテストユーザーの作成・編集が行えます。 テストユーザーはFacebookアプリを作り、アプリ管理画面から作成・編集するようになっています。Facebookアプリ作成方法については、「FacebookページにMovable TypeやWordPressの最近のブログ記事を表示する」の２項・３項や「Facebookページプロフェッショナルガイド」の96～102ページを参考にしてください。Facebookアプリを登録するのはそれほど難しい作業ではありません。テストユーザーだけを使ってみたい場合は、空のアプリ（＝登録のみ）で大丈夫だと思います。 テ
HTML5 におけるアウトラインに関して簡単解説
HTML5 におけるアウトラインに関して簡単解説 HTML5 で重要なアウトラインに関して、なるべくわかりやすく簡単に解説してみます。 最近、ヨモツネットさんで 「HTML5 でのセクションの誤用にご注意」 なんて記事が出てたり、ちょうど HTML5 Doctor でも 「Document Outlines」 と題してアウトラインの解説記事が上がってたりするので、この 「アウトライン」 について簡単にまとめてみようと思います。解説って言うほど偉そうなものではありませんがなるべくわかりやすく書いてみようかと。 アウトラインを理解することは、HTML5 でマークアップする際にとても重要になりますので覚えておくとよいと思いますよ。 アウトラインとは？ アウトラインとは見出し、フォームタイトル、テーブルタイトル、その他ラベル付けされた要素によって生成される文書構造のこと…なんて書くととても難しそう
JavaScriptのエラーを見つけやすくしてくれるブックマークレット『Zeon.js』 | 100SHIKI
テキストエリア中のJavaScriptを解析し、エラーっぽいところを見つけてくれるのがZeon.jsだ。 使い方は簡単で、同サイトで配布されているブックマークレットを使うだけだ。 そうするとテキストエリアの右下に「Z」マークが現れる。それをクリックすればエラーの詳細が見れる、という仕組みだ。 テキストエリアにJavaScriptを書く、というシーンがあまり思い浮かばないのでテスト用にちょっとしたページを作る必要があるような気もするが、どうしてもデバッグに困ったときに覚えておいてもいいだろう。 もしくはどこぞの教育機関やら研修でも使えそうですな。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSの制作・検証に役立つChromeの機能拡張のまとめ