Webアニメーションを高速化するために知っておくべき10のこと（後編）
Webアニメーションを高速化するために知っておくべき10のこと（後編） 斉藤 祐也（株式会社リッチメディア） 前編から引き続き、後編でも最適化のために知っておきたいレンダリングプロセス、計測方法、そして最適化を妨げるよくあるアクシデントとその回避方法について紹介していきます。 アニメーションを高速化するために知っておきたいレンダリングプロセス ブラウザがどのようにウェブサイトを表示しているのかを知ることは、アニメーションだけに限らず、Webのパフォーマンス全体の高速化を行うために大切なステップです。 イスラエルの開発者であるTali Garsiel氏が公開した『How Browsers Work』は、HTML5 Rocksに転載され、複数の日本語訳も提供されている、ブラウザの内部動作を学ぶために読んでおきたいリソースの1つです。 そのリソースを参考に、レンダリングエンジンのメインフローにつ
Google製。Raspberry PiをWebアプリ開発プラットフォーム化·Coder for Raspberry Pi MOONGIFT
Coder for Raspberry PiはRaspberry Pi用のオープンソース・ソフトウェア（Apache Licnese 2.0）です。 Googleからまた一風変わったプロダクトが生み出されました。最近よく聞くRaspberry PiをWeb開発プラットフォームにしてしまうCoder for Raspberry Piです。 まずSDカードにcoderをインストールします。 インストールしたらcoderを立ち上げて、Webブラウザからアクセスします。最初にパスワードを設定します。 メイン画面で簡易的なチュートリアルが表示されます。 デモのアプリを開きました。これはその結果画面です。 こちらは編集画面。HTML/CSS/JavaScriptそしてNodeの編集ができます。 画像などのメディアをアップロードできます。 2ペインで実行結果の確認もできます。 別なデモ。アステロイドです
Twitter BootstrapでさくさくWeb開発 : アシアルブログ
<div class="container-fluid"> <div class="row-fluid"> <div class="span4"> Span4の中身 </div> <div class="span8"> Span8の中身 </div> </div> </div> Preタグで囲むコード エンジニアの皆さんなら、ブログにコードを書きたいですよね。 Twitter Bootstrapでも、かっこ良くコードを見せる手法を提供しています。 ・codeタグで囲む 赤くなります。 ・preタグで囲む 囲み枠がつき、灰色になります。 ・Preタグ+Google Prettifyを使う preタグのclassに、prettyprint linenums を入れましょう。 これが超かっこいい！！コードを見せるならこれがよさそうですね！ さて、かっこいいGoogle Prettifyですが、こ
Facebookみたいにtextareaの一部を強調する - Qiita
Facebookで人物を補完すると、その人物名の周りに枠が表示されて強調されますよね（gif画像参照）。 これのやり方を解説します。 TL;DR textareaの強調表示は、textareaを透明にして後ろにいい感じの背景を設置してるだけ textareaの中にDOMを入れても表示されない パッと考えるとtextareaの中にDOMツリーを入れるとそれが表示されるんじゃないか、と思うかも知れません が、ぜんぜんそんなことは無くて、そのまま文字列が表示されてしまいます。 ご存知のようにtextareaやinputは、他の要素のように子要素を表示するのではなく、自身のvalue属性の値を画面に表示する働きをします。value属性は文字列を格納するためのものなのでDOMを入れられないわけですね。 強調用のDOMを重ねあわせる textareaにはDOMをそのまま入れられないので、仕方がなく周り
モバイルブラウザでもサクサクに動作する最適化6つのノウハウ
「Webサイト・アプリ高速化テクニック徹底解説」第8回は、モバイルブラウザに向けた最適化について紹介します。 モバイル端末はPCに比べ、CPUやネットワークなどの性能面で劣ることからボトルネックの影響が出やすく、またゲーム開発など突き詰めたチューニングを行う場面では、特殊なノウハウも必要になります。 しかしきちんと最適化を行えば、その効果もその分著しく、比較的低スペックな端末や3G回線であっても、サクサク軽量なサービス提供が可能です。今回の記事では、その勘所をお伝えしたいと思います。 1. ボトルネックを取り除く まずはやってしまいがちなボトルネックの事例について、挙げていきたいと思います。前述のようにモバイル端末では、その性能からPCよりも顕著に、未最適化箇所が体感に影響を及ぼします。 仕事がらそこそこの数のアプリケーションを見てきましたが、モバイル向けに特化したチューニングができていな
フォームでユーザーにヘルプをツールチップで実装するjQueryプラグイン・jQuery FormHelp
割と需要ありそうなので備忘録ついでにご紹介。ツールチップで実装する、テキストのフォームヘルパーです。「こういう具合に入力してね」みたいなのを明示するやつ。 フォームのそれぞれの項目にヘルプを作るスクリプトです。マウスホバーやフォーカスでツールチップを出す、というもの。プラグインで実装するほどのものでも無いかもですけど、これはこれで楽そう。 動作サンプルです。HTMLを普通にマークアップするだけで自由にツールチップ内に実装できるのは楽ですね。 コード 本体とプラグインを読み込みます。 $.formHelp();コールします。 <input id="input-email" type="email"/> <span class="helptext" data-for="#input-email"> <p>ここにツールチップ</p> <hr> HTMLが自由に使えます <ul> <li>One<
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
使うであろう文字だけの、HTML・XHTMLエンティティシート
さっと調べたいときにピピッと見つけられるシートをささっと作ったよ 一般のエンティティシートは読み方すらわからない文字がたくさん配置されていて、探しにくい。 そこで、自分が使ったことのある文字限定でエンティティ文字のシートを作りました。 （はてブコメントでご指摘の通りXMLではなく、XHTMLの間違いです。訂正しました。8/18）
一歩進んだHTML/CSS/JSを目指すために | 1000ch.net
2013/08/01 一歩進んだHTML/CSS/JSを目指すために 「なんとなく書きたくないけど、どう意識してコーディングしていけばいいのかわからない…。」 それを解消するためのツールがありますので、紹介します。 HTMLInspector philipwalton/html-inspector Introducing HTML Inspector こちらはHTMLを解析して悪いところを指摘してくれるツール。 たぶんガイドラインとかそれぞれあると思いますが、基本的にはコレに沿ってもいいかと。 スクリプトを差し込んで、実行すると、指摘事項がconsoleに出力されます。 githubのリポジトリからダウンロードするか、bowerで落としてくるか。 bower install html-inspector 次に、解析したいページに以下のコードを埋め込みます。 <script s
【pickadate.js】シンプルだけど高機能な日付カレンダー編 | DevelopersIO
pickadate.jsというライブラリーの中で、高機能な日付カレンダーを紹介してもらったので試してみました。 アジェンダ ソースのダウンロード 実装してみる。 日本語表記にする いろいろなオプション まとめ ソースのダウンロード まずはこちらのサイトからソースをダウンロードしてきます。ファイルを展開するといろいろファイルはありますが実際に使うファイルは[lib]フォルダ内にあります。 [lib]フォルダ内は以下のファイルになります、今回は日付カレンダー用のjs、cssを使用してみます。 実装してみる それでは実際に表示してみようと思います。今回のデモで使用したファイルになります。 css default.css default.date.css javascript jquery picker.date.js legacy.js app.js←こちらが実際に実行するファイルです。 ind
最近話題になったイケてるWebサービス・アプリ11選（2013年7月編）
こんにちは。 もうすぐ8月ということで、7月中に話題になったwebサービスやアプリを11個ほどご紹介します。 IFTTT IFTTTとは、Webサービスやアプリのアクションを連携させて一連の処理にしてしまうサービスです。 「もし明日が雨だったらGmailにメールを送る」といったことも可能です。サービスの名称は「If this, then that（これをすれば、あれをする）」を略したもの。たとえばスマートフォンでとった写真を自動的にDropboxにアップロード、ブログへ投稿すると自動的にツイートする設定などなど考えられるレシピは無限大。 自分でレシピを投稿したり、他ユーザーの作成したレシピを見ることもできます。エンジニア思考っぽいのサービスですが、どんどん私生活の一部分としてに入り込んできそうですね。 SUVACO（スバコ） ソーシャル・ホームデザイン・サイトです。 家づくり・インテリアに
Web屋ならチェックしておきたい！作業効率が激変するChrome DevToolsの便利な使い方まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Web屋ならチェックしておきたい！作業効率が激変するChrome DevToolsの便利な使い方まとめ こんにちは、デザイナーの王です。 今回の記事では、ChromeのDevTools（デベロッパーツール）について、「多分、周知されていないけど、使わないともったいない！」的な機能を紹介させて頂きたいと思います。 フロントエンジニアにも、デザイナーにも、きっと効率アップに繋がる小技が見つかるはずです。 開発者なら「Chrome Canary」を使おう！ みなさんはChrome Canaryを使っているんでしょうか？一般向けにリリースされている安定版であるChromeより、ほぼ毎日アップデートしている「Canary」ビルトを選ぶ理由があります。 それは、開発者向けの新機能がいち早く利用できるからです！リリースがノロノロしているChromeを使ってたら、いつまでも最新の便利な機能の恩恵が受けられ
HTMLで表組み作るならマークダウンが直感的で超簡単だからオススメ - あなたのスイッチを押すブログ
書き方の簡単な説明 ◇一行目に、列の最上段に記載する項目を記入します。 ◇列を分けるときは「 | 」（縦線／バーティカルバー）を使います。 ◇二行目に、その列のテキストの寄せを決定します（後述）。 ◇三行目から、各項目を書いていきます。 右寄せ・左寄せ・中庸寄せ 対象の列のテキストを右・左・中央に寄せるためには、マークダウンで表組みを作った時の二行目で調整します。 ◇「|:-----|」 列が左寄せになります。 ◇「|-----:|」 列が右寄せになります。 ◇「|:-----:|」 列が中央寄せになります。 簡単な話、寄せたい方向に「 : 」（コロン）を入れれば、それで完了です。真ん中の「 - 」（ハイフン）の数は適当でOK。１つでも構いません。 マークダウンからHTMLへの書き出し マークダウンで書いたテキストをブログ記事に上げても、そのままではもちろん表組みにはなりません。改めてHT
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
ひとりでWeb制作できた！「知識０から学ぶ」すごいスライドやサイト２７
作成：2013/07/22 更新：2014/11/01 Web制作 > 先日、お客さんのところへ提案にいったところ、「サイトを自分でも作りたいので定期的に講習会を開いて欲しい。Wordしか分からない。」と言われました。とはいっても、自分である程度、継続して勉強しておかないと、受講する人は2回目以降の受講内容を理解出来ないし、教える人も基本知識をしっかり身につけておかないと、質問に答えることもできません。 今回はWeb製作をするなら必ず抑えるべきこと、知識「０」から学ぶ、基本的な知識を習得できるスライド・サービス・サイトをまとめました。ディレクションにもOK。メジャーなもの中心です。とはいえ量が膨大になったので、必要な部分だけピックアップして学びましょう。※スライドがないものに関しては、お役立ちリンクをつけてます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ
デザイナーさんの為のjQuery講座 Lv.1 [入門編] | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
暑いですね。 鳥よしです。 あまりにも暑くてネタが切れたので、先日LIGのデザイナーさんとやったjQuery勉強会の備忘録をかかせていただきます。 サボってるわけではないのです。 勉強会の内容を見直してもらえればいいのです。 1.jQueryを使用するために まずは何はともあれ、jQueryを使用するために以下の記述をhead内に書きます。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> これは、jQueryの実ファイルをgoogleさんから参照しているので、ネットにつながっていないと使用できない書き方ですね。 今回は何も考えずサクッと動かしたいのでこれで行きます。 これによってjQueryが使用できるようになります。 2.jQueryの書き方 jQueryの書き
![デザイナーさんの為のjQuery講座 Lv.1 [入門編] | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作](https://cdn-ak-scissors.b.st-hatena.com/image/square/36b3c17f2138ca9bd535315fa23b022ac2679ee6/height=288;version=1;width=512/https%3A%2F%2Fliginc.co.jp%2Fwp-content%2Fuploads%2F2013%2F07%2Fthumbnail6.jpg)
HTMLのアウトライン意識してますか？ - QiitaのSEO事情（前編） - Qiita
「最近Qiitaを検索結果でよく見るようになったなぁ」と感じる人はいませんか？ SEOを頑張ってるWebサービスは数多存在しますが、Qiitaもその中の1つです。 SEOっていうとやれキーワードがどうだこうだ、サイト内リンクがどうだこうだ、という話になってしまいがちですが（そういうのが不要と言っているわけではないですよ）、今回はQiitaがSEOの一環として行なっている数多の取り組みの中で、比較的Web上での言及数の少ない印象のある、HTMLのマークアップについて、外に出せる範囲で、前編と後編に分けて解説したいと思います。 後編はこちら 免責事項的な SEOというのは完全に結果論でしか語ることのできないものです。また時と共に効果的とされるテクニックは変わっていきます。この記事はQiitaの中の人が「効果あるんちゃうか」と試行錯誤しながらあれこれ行なっていることの一部を紹介するものであって、
JavaScriptで`undefined`の代わりに、`void 0`を使ったほうがいい理由 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
今まで平気でundefinedを使ってましたが、underscore.jsのソース読んで、無防備にundefinedを使っちゃいけないなってことを初めて知りました。いやはや、まったくもって面目ない！ 知っている方なら知っていると思いますが、意外と知らない方も多いのでは？という意味でのプチ記事です。 void 演算子 voidは１つの式を取って、常にundefinedを返す演算子です。 例えば void 0 void (0) void 99 void "wow" void {} //すべてundefinedが帰ってくる と、このように、voidはundefinedの代わりとして使えるのが分かりますよね。 上記の理屈で行くと、そんな面倒なことをするまでもなく、undefinedを直接使えば済む話じゃあ？と思いますよね。ところが話はそう簡単ではないようです。 何故なら、なんと、undefined
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
ウェブ制作者のためにメンテナンスと拡張に重点をおいたフロントエンド用の軽量フレームワーク -UIkit