ファイル編集したら即ブラウザー再読込させる LiveReloadX を作った
Web 開発してると、ソースを編集して、ブラウザーをリロードして、という作業の繰り返しになりがちだ。ソースを編集したら、自動でブラウザーをリロードしてくれるような夢のツールがあれば便利そうだ。 この分野では CodeKit や LiveReload などが有名なんだけど、もれなく有料だったり GUI だったりする。そこで、LiveReload のオープンソースな部分を参考にしつつ、コマンドラインで使える LiveReloadX というものを作ってみた。 特長はこんなところ。 Node.js を使ってるので Windows/Mac/Linux 問わずに動かせる 開発環境のブラウザーだけでなくスマートフォンのブラウザーもリロードできる 無料 インストール方法 インストールは超簡単！ Node.js をインストールする。 コマンドラインで npm install -g livereloadx を
SyncFileSystem APIの仕様ドラフトを和訳してみました
SyncFileSystem APIの仕様ドラフトを和訳してみました Written on Feb 26, 2013. Posted in Chrome extension 時代はそろそろ「オフラインファースト」になる模様ですが、そのためにはブラウザが情報をオフラインで扱うことを可能にする機能が充実してくれないといけません。いろんなAPIを組み合わせて駆使していけば、現状でもできないことはないです。しかし、もちろん僕らは手軽にオフライン対応Webアプリを作りたいですよね？同期処理や競合など、自分で面倒見たくは誰しもないはずです。 SyncFileSystem APIはそんな僕らの要求に応えてくれるかもしれないと考えています。まだChrome Canaryでしか試せませんが、その仕様のドラフトはすでに公開されていますので、和訳してみました。 元の仕様のドラフトは、以下にあります。 SyncF
「Webサイト改善は図を描きなさい！」 〜 SiteCatalyst達人から教わった分析フレームワーク-Six Apart ブログ｜オウンドメディア運営者のための実践的情報とコミュニティ
TOP > 「Webサイト改善は図を描きなさい！」 〜 SiteCatalyst達人から教わった分析フレームワーク こんにちは。マーケティング担当の伊藤大地です。 先日、米AdobeでWeb解析ツール「SiteCatalyst」のプロダクトマネージャープログラムマネージャー（初出時、役職を誤って表記しておりました。お詫びし、訂正いたします）を務めていらっしゃる清水誠さんが、一時帰国された折に弊社に遊びに来てくださいました。たっぷり2時間、最新Webマーケティング事情やWeb解析についてお話を伺いした中から、WebのKPI測定・改善サイクルとそのノウハウについて、エッセンスをお伝えしたいと思います。 清水さんが提唱されているWeb改善のフレームワーク「コンセプトダイアグラム」という手法は、主に3つのプロセスから成り立っています。 ユーザー視点でサイトを図解し、コンセプトを明確にする サイトの
サイトの表示時間短縮で判明した人類の「ニュータイプ化」 | 地政学を英国で学んだ
今日の横浜北部は快晴でしたがけっこう冷え込んだような。 さて、テクノロジーと人間の関係について興味を持っている私としては非常に興味のある、ネットの表示速度に関する記事です。 やはりネットユーザーたちは「サイボーグ化」しているんですな。ガンダム用語では「ニュータイプ」ということになりますが・・・・。 ＝＝＝＝＝ 気ぜわしいネットユーザーにとっては、まばたきの瞬間でも遅すぎる by スティーブ・ロアー ●「ちょっと待って」（wait a second）というのは長すぎる。 ●グーグルのエンジニアが最近発見したのは、人間にはウェブページを見るとき、まばたきの瞬間の時間でさえ待たされるのにもがまんできない、ということ。つまり「１秒」では長すぎるのだ。 ●これほどの短時間でも、人々のウェブサイトを検索しようという気が減退するというのだ。 ●グーグルのあるエンジニアによれば、「潜在意識の中で、人間とい
文字でクールなモザイクのシンボルを作成し、画像を埋め込める「Word Mosaic」
いったい何に使うんだと言われてしまえばそれで終わりなのですがｗ ネタ的におもしろく、日本語も通るのでご紹介。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! クールなモザイクシンボルを作成、埋め込みで共有できる「Word Mosaic」「Word Mosaic」は、クールなモザイクのシンボルを文字や記号から作れるサービス、作成したアイコンをブログやサイトへ埋め込むことも可能で、できあがりもなかなかのものです。もちろん日本語も反映。 こんなものができあがります 作り方はカンタン ↑テキストと背景の色を選び、フォントを選択、そしてシンボル、変換するテキストを指定して、オレンジ色のボタンを押せば作成完了です。あとは画像の共有方法をTwitter や ＜ ＞（埋め込み）などから選べばOKです。 ユーザー投
Inside Yahoo!メール 第2話「分析！迷惑メール」 (Yahoo! JAPAN Tech Blog)
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、ソーシャルネット開発部の島貫 和也です。 本連載では、今まであまり触れられてこなかったYahoo!メールの迷惑メール対策と、電子メールに関連する情報をご紹介しています。今回は前回に引き続き、Yahoo!メールで実施している Botnet の分析と対策について、その取り組みの一部をご紹介させていただきます。 ご注意 出典元の説明のため、いくつか外部リンクがあります。リンク先については保証しておりませんのでご了承ください。 この記事の性質上、迷惑メールの性質や送信手法について触れている箇所がありますが、電子メールやコンピュータの不正利用を助長する意図のものではありません。読み物としてお楽しみください。 はじめに 前回の記事
Adobe® BrowserLab
Adobe BrowserLab requires Adobe Flash Player version 10.0.0 or higher and Javascript enabled in your browser. Click the button below to download and install the latest version of Flash Player now Adobe BrowserLab An easier, faster solution for cross-browser testing Preview and test your webpages on leading browsers and operating systems - on demand. Adobe BrowserLab makes it easier and faster t
tokuhirom blog
Blog Search when-present<#else>when-missing. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)?? ---- ---- FTL stack trace ("~" means nesting-related): - Failed at: ${entry.path} [in template "__entry.ftlh" at line 3, column 25] - Reached through: #include "__entry.ftlh" [in template "entry.ftlh" at
商用可！WEB制作用途に特化したアイコンを6200個以上をまとめた「The Best Icons Always」
TOP > WebDesign > 商用可！WEB制作用途に特化したアイコンを6200個以上をまとめた「The Best Icons Always」 WEBの制作には書かせないアイコン。デザイン感を統一させて用いれば、全体のクオリティを押し上げてくれます。今日紹介するのはWEB制作で使えるアイコンに特化したまとめサイト「WebIconSets.com- The Best Icons Always at Your Fingertips」を紹介したいと思います。 それぞれのアイコンセットごとにまとめられていて、それぞれかなりの数が収録されています。アイコンの総数は全部で6200個以上となっています。今日は紹介されているセットの中からいくつかピックアップして紹介したいと思います。 詳しくは以下 ■FamFamFam Silk: 700+ icons in PNG format (16×1
デザインを魅力的なものにする、シンプルな10個のテクニック
デザインを魅力的なものにする、シンプルな10個のテクニックをSmashing Magazineから紹介します。 10 Simple and Impressive Design Techniques 以下、その意訳です。 手間のかかるデザインテクニックは高度な効果を与えることができますが、間違ったところに使用してしまうと、意図したフォーカスとは異なり、ユーザーの気をそらすだけになってしまうことがあります。 これらのテクニックは、効果的に見せるために必要なデザインかもしれません。しかし、よりシンプルなテクニックでも充分な効果を与えることができます。 シンプルなテクニックやエフェクトというのは、デザインの基本です。 「less is more」の考えを元に、デザインの概観とパフォーマンスを劇的に改善できる非常にシンプルで印象的な10のデザインテクニックを紹介します。 1. Add Contras
REST信者が激論で分裂の危機？ 「恋愛はGETかPUTか」“べき等”かどうかがカギ - bogusnews
美しいWebサービス設計に欠かせない思想として注目されている「REST（Representational State Transfer）」。HTTPプロトコルに「リソース指向アーキテクチャ」という考え方を導入し、「なんでもRESTで表現できる」として熱心にこの思想の普及につとめている人々は「RESTafarians」＝REST信者として尊敬を集めているが、いま彼らが分裂の危機に瀕している。REST論壇を真っ二つに分ける激論が勃発したのだ。議論の火種となったのは 「恋愛は“GET”で表すべきか、“PUT”で表すべきか」 というもの。 リソースへのアクセスメソッドをGETにするかPUTにするかは、REST信者にとっては美しいWebサービスを設計するうえでもっとも重要な問題だ。ここで「恋愛はGET」と主張して譲らないのが、業界でRESTエヴェンジェリストとして知られる株式会社リコーの山本陽平氏。
プログラマが1ヶ月でWebデザイナーに転身する方法 - やねうらおブログ(移転しました)
サイトを構築していると、プログラマはWebデザイナーと共同作業をしなければならない。 しかし高度なRIAを実現しようとすると思っているようにWebデザイナーに素材を作成してもらうだけでもとても骨の折れる作業だ。 そこで、一層、「すべてのプログラマはWebデザイナーになればいいんじゃね？」と思った。 今回は、私の実体験に基づき、「プログラマが1ヶ月でWebデザイナーに転身する方法」というのを考えてみた。 ■ HTML,CSSを覚えよう まず、HTMLとCSS。いくら私でもW3C( http://www.w3.org/ )のすべてに目を通せとは言わない。 ブラウザ間で挙動が違うのでそれぞれのタグがどのブラウザで使えるのか一覧がまず欲しい。手軽なのは詳解HTML & CSS & JavaScript辞典。このハンドブックは見やすいのでお勧め。また、よく使うタグに関してはすべて覚えよう。覚えている
JavaScriptとCSSを圧縮してパフォーマンス、Juicer登場 | エンタープライズ | マイコミジャーナル
Juicer - a CSS and JavaScript packaging tool Webページの表示パフォーマンスはWebデベロッパにとって常に最大の関心事だ。ページのロード時間はそのままユーザの満足度に直結する。ファイルサイズは小さく、そしてリクエスト回数は最小であることが望ましい。JavaScriptもCSSもできればファイルは1つづつだけで、なるべく小さい方がいい。 これまでJavaScriptのミニファイアや検証ツール、CSSのミニファイアツールはいくつも登場している。ここではChristian Johansen氏が新しく公開したJuicerに注目したい。Juicer自身はRubyで開発されている。Juicerを利用するにはRuby、RubyGemsが必要なほかYUI CompressorとJava、それにJsLintが必要になる。JavaScriptとCSSのパッキングツ
UI-patterns.com
User Interface Design patterns are recurring solutions that solve common design problems. Design patterns are standard reference points for the experienced user interface designer. Product Insights at your fingertips. Our confidence-boosting product tools for business growth are practical guides and strategies that will immediately amplify the expertise of you and your team.
CSSのセレクタをインタラクティブに確認できる超絶便利ブックマークレット『SelectorGadget』 | 100SHIKI
CSSのセレクタをインタラクティブに確認できる超絶便利ブックマークレット『SelectorGadget』 February 27th, 2009 Posted in その他 Write comment かなりマニアックではあるが、その筋の人にはすっごく便利なのでは。 SelectorGadgetではCSSのセレクタを書くためのブックマークレットを配布している。CSSのセレクタは慣れるまで書くのが大変である。 しかしこれを使えば「タイトルだけを指定するCSSセレクタ」「このテーブルのこの列だけを指定するセレクタ」なんてのをインタラクティブに指定しながら確認していくことができる。 使い方は簡単で、まずはブックマークを好きなページで起動する。すると右下にセレクタ表示用のボックスが現れる。 次にセレクタに含めたいDOMをクリックする。するとそこが緑になり、さらにそのセレクタにマッチするDOMが黄色
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webアプリケーションは難しい
Google Similar Images
IBM Developer
IDEA * IDEA
サービス終了のお知らせ