グーグル、より一貫性のあるウェブ作成のための「Web Starter Kit」をリリース | readwrite.jp
先日グーグルは「Web Starter Kit」、さまざまなデバイスとディスプレイ解像度で機能するサイト構築のための開発者向けテンプレートとツール集をリリースした。 最近のインターネット利用者は単に１つのデバイスを持っている訳ではない。彼らはPCでは物理的なキーボードを使い、モバイルではタッチスクリーンで操作する。最近では、スクリーンサイズもデバイスによって様々だ。ユーザーは同じサイトが、アクセスされるデバイスに応じて違った振る舞いをしてくれることを期待している。 こういった機能は、新しく作成するウェブサイトにはあらかじめ組み込まれていないため、開発者はサイトを作るたびに何度も繰り返してそれらを置かなければならない。これは「Boilerplate（ボイラープレート）」（ウェブサイト上でいかなる創作的な業務を行う前に手動で挿入される必要のある基本的なコード集）と呼ばれている。 グーグルのWe
HTML&CSS フロントエンド 何度も読み直したい資料・ツールまとめ - 酒と泪とRubyとRailsと
HTML5/CSS3などのフロントエンドもWeb上の資料が充実しすぎていて、ついつい今までなんとなく作って体系的な知識が不足していました。知れば知るほど奥が深いフロントエンド・コーディングを少し手も効率的にするために、いくつか書籍を購入したり、ネット上の資料を読み込んでみたので、備忘録がてらまとめていきます。 (02/05 20:10) 定期見直し 🎂 [Style Guide]「Google HTML/CSS Style Guide」の和訳 Googleが作ったStyle Guide『Google HTML/CSS Style Guide』を和訳していただいた『Google HTML/CSS Style Guideを適当に和訳してみた』。HTMLのベーシックな書き方から、CSSの書き方まで一貫している。個人的にはCSSのプロパティがアルファベット順というのは合理的だと思う！ 🐰 [S
5人のユーザーでテストすれば十分な理由
手の込んだユーザビリティテストはリソースの無駄づかいだ。最高の結果を得るためには、5人以下のユーザーでテストし、小規模なテストを余裕のある限りたくさんやることだ。 Why You Only Need to Test with 5 Users by Jakob Nielsen on March 19, 2000 ユーザビリティはお金がかかって複雑だ、ユーザビリティテストなんて、よっぽど予算があって、しかも時間的にも余裕があるという、めったにないプロジェクトのために取っておけばいい、と考える人もいるようだ。だが、それは違う。手の込んだユーザビリティテストは確かにリソースの無駄づかいだ。最高の結果を得るためには、多くとも5人のユーザーでテストすれば十分。そのかわり、小規模なテストを余裕のある限りたくさんやることだ。 以前の調査で、Tom Landauerと私は、n人のユーザーでテストしてわかるユ
アイコンを表示させる際にSVGスプライトとPNGのどちらが重いかをテストした動作サンプル
SVGで書いたアイコンとPNGとで、どちらが重いかを調べた動作サンプルがあったので備忘録としてメモします。当然と言えば当然なんですけど、実際に見てみるとなんとも言えない気分になります・・ Codepenで良い動作サンプルがあったのでメモ。 PNG vs SVG for spritesCheck out this Pen! ここに貼り付ける上手く動いて無さそうな・・実際にCodepenで見たほうが良さそうです。尚、使っているSVGはこちら、PNGはこちらです。 サンプルを見た限りでは今あるブラウザではかなりパフォーマンスに影響が出てしまうようですね。SVGは凄く便利ですけど、まだ実用段階としては時期早尚という印象です。使いどころ次第なんでしょうけど・・ 少し仕事が立て込んでるのでメモだけ。サンプルのコードは以下でどうぞ。 PNG vs SVG for sprites
dresscording.com
dresscording.com 2019 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
GIFアニメ生成にImageMagickはオワコン、情強は高速なGraphicsMagickを使う - 海峡
大した話ではないけれど、GIFアニメをコマンドラインから作るならGraphicsMagickが便利なので共有します。 MP4の動画ファイルからGIFアニメを作ろうとすると、まずffmpegで動画を画像に分割してそれからimagemagickでGIFに結合するという方法があります。 % ffmpeg -i hoge.mp4 -r 2 %04d.png % convert *.png hoge.gif複数枚の画像をimagemagickでGIFに結合するのが実は結構時間がかかるため煩わしいことが多いです。場合によっては、数十秒かかったりする。 ImageMagickのfork版であるGraphicsMagickを使うと高速にGIFアニメを生成することができます。 GraphicsMagickのほうが3~4倍速い GraphicsMagickを使えばImageMagickよりも3~4倍高速にGI
手遅れになる前に！Webディレクターがプログラミングを学ぶ時に使いたいサイト10選
プログラミングを「本気」で勉強するのに役立つサイト10選とその解説 | 今年はWebディレクターもコードを書こう！ 『Webディレクターは、コードを書く必要はない？？』 もちろん本業のエンジニアと同等のコードを書く必要はありません。しかし、プログラムの全容や工数を把握し機能の優先順位を付けたり、技術面でエンジニアとのコミュニケーションをする上で、プログラミングを覚えることはプラスになります。 さらに、「こんな実装が出来るなんて凄い！」といった実感を伴った一つ一つのコミュニケーションが、エンジニアからの信頼を獲得する助けになるのです。 どうやってプログラミングを覚えるか？ プログラミングは、毎日のちょっとした勉強の積み重ねで学習する事もできます。 今回はスタートアップで働くWebディレクターの方々に向けて、プログラミングを学べるサイトを10連発でまとめました。 このエントリーでは、
次のレベルまでWEBサイトを引き上げてくれるCSS、javascriptテクニック集
CSSやjavascriptを利用してサイトをよりリッチな表現に変えていくというのは、WEB制作の現場では常に行われていて、様々なスニペットやライブラリが日夜リリースされています。今日紹介するのは次のレベルまでWEBサイトを引き上げてくれるCSS、javascriptテクニック「CSS and JavaScript tools to take your website to the next level」です。 Countable.js 様々なCSSやjavascriptによるテクニックがまとめられていますが、今日はその中からいくつか気になったものを紹介したいと思います。 詳しくは以下 iCheck クリックしたラジオボックスやチェックボックスから、返り値をとれるjavascript。それをキーにして何かを動かしたいときに。 Almost Flat UI フラットデザインUIを簡単に実装で
深夜のツイッターで発生した激荒れFlash朝まで生討論
F-siteセミナー「Flashクリエイターはどこへ行く？～未来への道しるべ」で盛り上がった日の深夜に、さらに追い打ちをかけるかのようにFlashに関する熱い討論が深夜に行われました。 その内容をまとめています。
[JS]ページのデザインに影響を与えないパーフェクトなスクロールバーの超軽量スクリプト -Perfect Scrollbar
Perfect Scrollbar Perfect Scrollbar -GitHub 何をもってパーフェクトなのか Perfect Scrollbarのデモ Perfect Scrollbarの使い方 何をもってパーフェクトなのか このスクロールバーにパーフェクトとつけた理由は、下記の4つだそうです。 ページ上のあらゆる要素にCSSで影響を与えないこと スクロールバーがオリジナルのデザインに影響を与えないこと スクロールバーのデザインは完全にカスタマイズ可能であること コンテンツの大きさが変化したら、スクロールバーの大きさと位置がそれに合わせて変化すること Perfect Scrollbarのデモ デモではあずにゃんの画像をホバーすると、スクロールバーが表示されます。 デモ：領域を拡大 バーの長さが変化していることに注目してください！ Perfect Scrollbarの使い方 Step
全裸で学ぶMVC事始め - ゆーすけべー日記
一般的なWeb Application Framework（WAF）ではMVCという設計及び実装における概念が取り入れられています。 MVCに従ってつくるのが全てではありませんが、 WAFを使うと共に、一度はMVCを用いたWebアプリの開発経験はしておいた方がよいと思います。 MVCはモデル（Model）、ビュー（View）、コントローラ（Controller）の3つの単語を組み合わせた言葉で、 この3つで概念が成り立っています。 クライアントがWebに対してリクエストをした時に、これら3つがそれぞれ連動して結果を返します。 一般的には以下のような処理経路をたどります。 クライアントがWebサイトにリクエスト コントローラがリクエストの処理を行い、モデルとビューを動かす 必要に応じてモデルを呼び出す 結果のデータをビューに渡す ビューがHTML化などをしたものをクライアントに表示する MV
遅すぎる日本のスマホサイトの原因を探る (1/4)
デジタル機器の利用動向で知られるコムスコアの調査によると、2011年12月時点の日本における携帯電話に占めるスマートフォンの割合は16.6%でしたが、2012年6月には23.5%になり、半年で約7ポイントも増加しました。「まだ4人に1人の割合じゃないか」と思う方もおられるでしょう。 しかし、有名な「キャズム理論」によれば、普及率がイノベーターとアーリーアダプターを合わせて16%を超えると、一般大衆が技術を受け入れます。2012年12月時点の普及率はまだわかりませんが、すでに半分を超えていてもおかしくありません。スマートフォン未対応の企業サイトは、「時代遅れ」といっても過言ではないのです。 日本のスマートフォンサイトの問題点 すでにスマートフォン対応を済ませた日本の企業サイトは「マーケットに素早く対応して流石だ！是非、お手本として見習おう」といえるでしょうか？ 先行してスマートフォンに対応し
NAVERまとめに見る遅延ロードのすすめ « NAVER Engineers' Blog
あけましておめでとうございます。NAVERまとめのフロントエンドを担当している縣です。初詣で引いた大吉のおみくじを握りしめながら今年も張り切っていこうと思います。 今回はJavaScriptの遅延ロードの仕組みをNAVERまとめに導入した際のお話を紹介します。 遅延ロードの検討 昨年NAVERまとめのまとめ閲覧ページや、まとめ編集ページでのJavaScriptファイルの読み込みを遅延ロード化する作業をしました。元々はページ読み込み時に全て読み込ませていましたが、JavaScriptファイルが巨大になってきてパース・実行に時間がかかるようになったことから遅延ロードを検討することになりました。 遅延ロードの利点というとJavaScriptファイルの読み込み・実行によるブラウザのレンダリング停止を防ぐのはもちろんですが、どのファイルがいつどこで必要になるかを明確にすることもでき、依存関係を動的
jQuery公式プラグイン・レジストリが公開。GitHubと連携など、今風の仕組みに惚れ惚れ
白石 俊平 ニュース jquery 0 Comment 2013年1月17日、jQuery「公式」のプラグイン・レジストリ（プラグインの集積場）が公開されました！ URLはこちらになります。 http://plugins.jquery.com/ このプラグイン・レジストリの目的は、従来のプラグインサイトでは解決できなかった、「断片化」と「配布」の問題を解決することだそうです。 「断片化」・・・「jQuery プラグインがWeb上の至る所にあり、探すのが面倒」という、現在の状況 「配布」・・・作成したプラグインを配布するためのサイト作成や宣伝に手間がかかる、従来のプラグインサイトでは登録が面倒だった 新しいプラグイン・レジストリは、GitHubと連携することを前提として、こうした問題をエレガントに解決し、従来のプラグインサイトを完全に置き換えるものです。 開発者にとっては、プラグインを公開
NYタイムズも注目！「データ×デザイン」を実現するデータビジュアリゼーション ライブラリ「d3.js デザイン会社 ビートラックス: ブログ
世界中でデータがどんどん増えていく中でデータをうまく扱うことはとても重要になってきています。そんな中、New York Timesが積極的に活用していたり、Githubのwatch数ランキングで上位にランクインしていたりと最近人気急上昇中のデータをビジュアライズする為の「d3.js」というライブラリがあります。 本日はこの「データｘデザイン」をwebサイト上で実現する為のjavascriptライブラリ”d3.js”について紹介したいと思います。 このライブラリを使うことで、今までなかなか難しくてできなかったウェブ上での「データの可視化」が手軽にできるようになり、複雑なデータを直感的に理解できるようなサイトが作りやすくなります。早速ですがこのd3.jsというものがどういうものかをなんとなく感じるには実際に動いているデモを見て頂くのが早いので以下をご覧下さい。 オバマ大統領の国家予算案詳細 (
モバイルファーストは間違いだったのか
最近、海外のスタートアップ界隈では”モバイルファーストは間違いだった”という意見がよくでてきている。 それにたいして、”これからはモバイルだ！モバイルだ！”とずっと言い続けていたTechCrunchのエース記者MG SIEGLERさんとの対談が非常に面白い。 動画はこちら。Mobile First Or Mobile Worst?（英語） この動画で語られている事は興味深すぎるので、出来る限りどんなことを話しているかを紹介するとともに、事の経緯とか、iPhoneアプリを開発している立場として僕の意見も書きまくりたい。 ちなみに、この動画で話しているのは、スタートアップが新規事業を立ち上げる時にスマホアプリから始めるか、それともWebベースのPCサイトから始めるかの話です。 例えばFacebookはWebファーストで、Instagramはモバイルファーストのスタートアップ。 基本的にはサービ
【Web制作などの依頼で「概要」しかわからないのに「とりあえず見積が欲しい」と言われたとき、私はこんなことに気をつけています】｜今村だけがよくわかるブログ
【Web制作などの依頼で「概要」しかわからないのに「とりあえず見積が欲しい」と言われたとき、私はこんなことに気をつけています】 どうもです。いきなりですが、私は毎年この年末から来年の3月末あたりまで、段階的に仕事周りが騒がしくなって来る時期だったりします。決算期の都合もあるんでしょうかねぇ。似たような状況の方も多いのではないかと思います。ほんと、最近依頼が多いです。 ところで、仕事の依頼があるって嬉しいことです。 普段あまり交流のなかった方から突然の依頼や、または、人づてで紹介を受けたりなど。紹介を受けるってことは「仕事ちゃんとしてくれるよ」ってのを認めてもらえた証拠だと思っています。本気でうれしいです。 と、ここで「依頼」についてちょっと掘り下げたいな～と思いました。本題に入る前に、少しだけ前置きにお付き合いくださいますと幸いです。 ・・・「依頼」っていろいろありますね。 「ハマる依頼」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Placehold.it - Quick and simple image placeholders
http://tuqulore.com/blog/demo/
Google Docs的な同時編集ツールを開発できるオープンソース「Firepad」