閲覧中のウェブページ全体を単一のhtmlファイルとしてダウンロード＆注釈付けも可能な「SingleFile」レビュー
ウェブブラウザで閲覧中のウェブサイトをページ中の画像も含めて保存したいと思ったときに、HTMLファイルと画像ファイル・スタイルシートが別フォルダになることなく、単一のHTMLファイルとして保存できるブラウザ拡張機能が「SingleFile」です。 SingleFile – Firefox (ja) 向け拡張機能を入手 https://addons.mozilla.org/ja/firefox/addon/single-file/ SingleFile - Chrome ウェブストア https://chrome.google.com/webstore/detail/singlefile/mpiodijhokgodhhofbcjdecpffjipkle SingleFile - Microsoft Edge Addons https://microsoftedge.microsoft.com
HTMLとCSSのファイルを解析し、未使用のCSSをお掃除してくれる便利なツール -DropCSS
CSSファイルを軽量化するには、最適化・軽量化などの便利ツールがありますが、未使用のCSSを掃除することも重要です。HTMLとCSSのファイルを解析し、未使用のCSS（CSS4までサポート）を掃除してくれるツールを紹介します。 DropCSS -GitHub DropCSSの特徴 DropCSSの使い方 DropCSSのパフォーマンス DropCSSの特徴 DropCSSは未使用のCSSを掃除してくれる、わずか60行のスクリプトです。 HTMLとCSSを入力として受け取り、使用されたCSSのみを出力として返します。 対象となるセレクタはcss-selectのおかげで、実質的に考えられるすべてのセレクタの削除が達成されます。 参考: サポートされているセレクタ CSSTreeを使用すると、特別な処理を行わなくても、メディアクエリを他のすべてのブロックと同じように透過的に処理および削除できます
無料でHTML5を使った広告やアニメーションが直感的に作れる「Google Web Designer」ベータ版でアニメーションを作ってみました
iOSはFlashに対応していないため、これまでウェブデザインには限界がありましたが、そんなウェブデザインの幅を広げるであろう、動くHTML5広告を制作できるツール「Google Web Designer」ベータ版がGoogleから公開されました。非常に直感的に使えるツールとなっており、アニメーションやイメージギャラリーも簡単に作れるということなので、実際にアニメーションなどを作ってみました。 Google Web Designer http://www.google.com/webdesigner/ 実際に作成したアニメーションは以下のような感じです（動いていない場合はブラウザを更新して再読み込みすれば再度動きます）。 まずは「Download Web Designer Beta」をクリック。 利用規約が表示されるので、「Agree and Download」をクリックしてダウンロードを
サイト作成にLiveReloadはあると捗る
LiveReloadはhtmlやcssを保存した時に自動でブラウザをオートリロードしてくれるソフトです。 MacではSassなどのコンパイラーとしてわりとメジャーなソフトなのですが、Win版もあります。 以前のバージョンでは当方環境のWindows7(64bit)ではうまく動かず一旦アンイストールしていたのですが、先日アップデートがありWindows版は大幅なUI変更が行われました。 なので試しにインストールしなおしたら、問題なく動作し快適です。これは捗ります。 WindowsにはこういったオートリロードのGUIツールが無かったので愛用しそうです。導入も簡単。LIVERELOAD Windows版は現在アルファバージョンで今のところ無料で使えます。 ダウンロードはこちらから「On Windows:」の「Download an alpha version」で。 以前はMac版のようなUIだっ
JavaScriptエディタ「Scripted」をVMware/SpringSourceがオープンソースで公開
VMwareのSpringSourceが、JavaScript/HTML5対応のエディタ「Scripted」をオープンソースで公開しました。 Scripted自身がHTML5/JavaScriptで記述されているためWebブラウザ上でエディタとして動作し、HTML/CSS/JavaScriptのシンタックスハイライト、JSLintによる文法チェック、エディタのカスタマイズ機能などを備えています。エディタ部分の機能はEclipse Orionを再利用したとのこと。 Scriptedの全体画面。右側に別ファイルを表示しているところ。
HTML5、CSS3、JavaScriptがリアルタイム編集できる！軽量HTMLエディタ「Liveweave」 - Chrome Life
みなさんは、HTMLやCSSのコーディングには何を使っていますか？ デザイナーの方であればDreamweaverをメインで使っている人が多いと思います。 デベロッパーの場合は、自分の好きなテキストエディターを使いこなしているでしょう。 しかし、実際にはコーディングをしながら見た目や動きを確認するためにブラウザを横でたちあげてデバッグしながら作業を進めていくと思います。 コードを修正→ファイルの保存→ブラウザで更新→確認 この手順を繰り返すのですが、これがなかなか面倒です。 できれば、コードを修正したタイミングですぐに確認できるとベストですよね。 そこで今回ご紹介するのが、HTML5、CSS3、JavaScriptをリアルタイムに編集して確認ができる軽量HTMLエディタ「Liveweave」です。 「Liveweave」は、ブラウザ上で動作するHTMLエディタです。 コーディングエリアとレン
Netsphere Laboratories: rb2html - Ruby, Java, C...
(2004.10.31 ページを分離。) description / 概要 rb2htmlは，ソースコードをHTMLに整形します。行番号を付し，キーワード，文字列などに色を付けます（ハイライト）。 対応言語： Ruby Java JavaScript C++ / Objective-C Python Haskell HTML/XML CSS コマンドラインから実行する方法と、プログラムに組み込んで使う方法があります。 samples / サンプル rb2html サンプル downloads / ダウンロード ダウンロード how to use / 使い方 インストール 今のところ、インストーラはありません。 rb2htmlディレクトリを /usr/lib/ruby/site_ruby/1.8 にコピーしてください。 rb2html.rbファイルを /usr/local/bin など実行パ
@あれこれ-2011年11月 - JURIA @Wiki
[2011-11-16]Markdown への期待 &bookmark_hatena(show=none) [2011-11-16] Markdown への期待 &bookmark_hatena(show=none) と言うわけで(G+ の続き)、 Posterous も対応してるし 、ってことで 今更ながら Markdown 記法対応エディタを探してみた。 参考： Markdown とは？(Wikipedia) Windows 用デスクトップアプリは意外に少ない。 (Mac 用とかオンラインビューア・エディタの方が多い) 以下、テキストエディタとしての機能についての詳細は割愛。 ■ ResophNotes v.1.2.3 (Portable) Simplenote + iPhone + Windows で同期が可能なエディタとして人気だけど、 Simplenote を利用しなくても Ma
ResophNotesで快適ライティング - 緑ナ日々
Simplenoteとの同期 以前のエントリーでも書いていますが、強力すぎるのでもう一度。 SimplenoteはWeb上のテキストエディタ、ブラウザやiPhoneなどから作成、編集が可能。そのSimplenoteには今までWindows用のクライアントがなかったのですがResophNotesがその穴を埋めてくれました。 養老孟司氏は仕事とは道に開いている穴を埋めるようなものだと書いていましたがまさしくぽっかり空いていた穴を埋めてくれた。 ブラウザ版ではタイトルリストはスクロールできずボタンを押すごとに更新されるようになっているためリストのチェックがちょっと面倒。さらにエディタ部分のサイズが制限されるので前後部分をチェックしたいときはスクロールを使う必要がある。ちょっとしたことだけど書いている時は小さな手間が面倒に感じることは多い。 ブラウザを使っての作業だと寄り道リスクやリンクを貼ったり
Notational Velocity ALTはSimpleNoteと同期できてMarkDownのプレビューが可能 - 緑ナ日々
WindowsではSimpleNoteと同期できて、MarkDownのプレビューが可能なResophNoteを使っています。 Simplenoteと同期が可能なWindowsクライアントResophNotes - 緑ナ日々 Macでもと思い、Simplenoteの公式ページでNotational Velocityを発見。これでMacでもSimplenoteがつかえると喜んで使っていました。でもMarkDownのプレビューができない。できればMacでもプレビューしたい。 で探してみたところ、発見。 Notational Velocity ALT - 感じ通信 どうやらNotational Velocityの改造版の様、喜び勇んで速攻インストール。 使い心地はNotational Velocityと全く変わらずでサクサク動く。プレビューもショートカットでオンオフできて書いてはチェック、書いては
MarkdownPad - The Markdown Editor for Windows
Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML). The goal for Markdown's formatting syntax is to be as readable as possible. A Markdown-formatted document should be publishable as-is, as plain text, without looking like it's been marked up with tags
W3CのValidatorをサイト全体にかけてサイトマップも作ってくれるツール「W3Clove」:phpspot開発日誌
W3CのValidatorをサイト全体にかけてサイトマップも作ってくれるツール「W3Clove」 2011年12月07日- W3Clove :: site-wide markup validation tool W3C Validator の結果を一括で得られ、サイトマップのXMLも生成してくれる便利なサービスのご紹介です 最初にトップページのURLを入力すると、サイトをクロールしてくれるのでしばらく待ちます。 まっていると結果が次のように出ます。 OKなものはグリーンデ表示され、赤でエラー、オレンジで警告といった具合に分かりやすくW3C Validatorの結果が閲覧できます サイト全体で多く見られたエラーのサマリも見ることができ、どこを集中的に改善すればいいのかが分かりやすいです 関連エントリ スマフォ上で動くブラウザベースアプリ開発に役立ちそうなデバッグツール「Socketbug」
ページを直接編集できるHTML5ベースのWYSIWYGエディタ「Mercury Editor」:phpspot開発日誌
Mercury Editor - Home ページを直接編集できるHTML5ベースのWYSIWYGエディタ「Mercury Editor」。 起動するとページの上部にツールバーが現れて、ページをそのままWYSIWYGで編集することが可能です。 リンクや動画、画像、テーブルなどの挿入、テキストフォーマットがツールバーから行え、そのまま保存することが出来る仕組みのよう。 編集画面。ページ内のコンテンツ領域のみを編集させることが出来ます。 サーバに保存するにはサーバ側での保存処理が必要みたいで、ここら辺はRailsを使って動かすみたいです。 対応ブラウザは以下。 Chrome 10+ Safari 5+ Firefox 4+ 関連エントリ 軽量でデザインが良いWYSIWYGエディタ実装jQueryプラグイン「CLEditor」 まだまだあったJavaScript製のWYSIWYGエディタコンプリ
ふつうのユーザが知らないHTML5コーディングツール10選 - YAMAGUCHI::weblog
はじめに こんにちは、Python界の情弱です。今日はChrome+HTML5 Conferenceのお手伝いに来てます。いままで全く触れてこなかった世界ですが、結構HTML5はXMLのようにセマンティクスに重点を置いてるんですね。CSS3も動的なエフェクトを簡単にかけられるようになってるし、とてもいいですね。 さて、YouTube Live Streamのお手伝いしながらRSS見てたら、ちょうど今日のテーマに沿ったエントリがdiggで紹介されてたので、翻訳しました。 10 Excellent HTML5 coding Tools Many Users Don’t Know About 10 Excellent HTML5 coding Tools Many Users Don’t Know About （オリジナル） HTML5はウェブサイトの作成方法を根本から変えることになるでしょう。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【大賞候補】閲覧ページを単一のHTMLとして保存するChrome拡張「シングルHTMLダウンローダー」【窓の杜大賞ノミネート作品】
OSSとして公開されているHTML5製のCSSスプライト作成ツール・「Stitches 」
広告のHTML5化加速か、Googleがインタラクティブ広告制作ツール「Google Web Designer」を無料提供 【増田 @maskin】 | TechWave（テックウェーブ）
Adobe、HTML/CSS/JavaScriptでできた次世代コードエディター「Brackets」を発表
リアルタイムプレビューにも対応、“Markdown”専用のエディター「MarkdownPad」NOT SUPPORTED
mdlab.jp