Webフロントエンド パフォーマンス改善ハンドブックを公開しました - dwango on GitHub
パフォーマンス改善ハンドブック ウェブページにおけるパフォーマンスに関する問題の見つけ方や考え方の事例をまとめた Webフロントエンド パフォーマンス改善ハンドブックを公開しました。 URL: https://dwango-js.github.io/performance-handbook/ このハンドブックでは過去に行ったWebフロントエンドのパフォーマンス改善の事例を中心に紹介しています。 注意点としてWebフロントエンドは常に変化しているため、現在の最適な解決方法を提案するものではありません。 また、アプリケーションによっても最適な解決方法は異なります。 今回の事例ではViewライブラリにReactを用い、映像再生プレイヤーなどある程度複雑な機能を持ったウェブアプリケーションのWebフロントエンドを扱います。 具体的にはニコニコ生放送（以下「生放送」）で行った事例を中心に書かれていま
カクヨムでの縦組み表示の実装と、縦書きWebの将来に向けて (builderscon tokyo 2018) - Hatena Developer Blog
こんにちは、Webアプリケーションエンジニアのid:nanto_viです。先日開催されたbuilderscon tokyo 2018において「カクヨムでの縦組み表示の実装と、縦書きWebの将来に向けて」という発表を行いました。Webブラウザ上で、小説を縦組みで読むという機能に関するものです。その発表資料に補足と質疑応答の内容を加えて公開します。 なお、当日は資料を単一のHTMLファイルに切り出して、それをFirefoxで開き200%にズームした画面を映しながらプレゼンテーションしました。 カクヨムでの縦組み表示の実装と、縦書きWebの将来に向けて 自己紹介 nanto_vi (TOYAMA Nao) 株式会社はてな Webアプリケーションエンジニア Perl, TypeScript カクヨム KADOKAWA × はてな による小説投稿サイト 2016年2月正式オープン 縦組み表示 補足
明日から使える?! PATHでXSSする技術/ Shibuya.XSS techtalk #7
Shibuya.XSS techtalk #7 の資料です。
グーグル、“ページ表示が遅い”を解消する「AMP」プロジェクト--7秒が1秒に短縮
Googleはこのほど、2015年10月に公表したオープンソースプロジェクト「Accelerated Mobile Pages（AMP）」の日本語版導入ガイドをウェブサイト管理者向けに公開した。 このAMP（アンプ）と呼ばれるプロジェクトは、スマートフォンで閲覧するモバイルサイトの表示速度を従来のサイトよりも高速化させることを目的としたもので、すでに世界各国のニュースサイトなどがこのプロジェクトに参加し、AMPへの対応を準備しているという。 プロジェクトの目的と具体的な内容について、Google日本法人 プロダクトパートナーシップ本部 ストラテジック パートナー デベロップメントのマネージャであるダンカン・ライト氏、そして同じくプロダクトパートナーシップ本部 出版コンテンツ アジア太平洋統括部長の佐藤陽一氏に聞いた。 ページ表示の遅さによるユーザーの閲覧断念を解消したい --まず、このAM
Material Design Lite
Material Design Lite Material Design Lite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible. Get started now. Templates The MDL components are created with CSS, JavaScript, and HTML. You can use the compone
Chrome 43からDOMの属性がJSのプロトタイプチェーンに移行します - Qiita
Chrome 43およびそれ以降のバージョンにおいて、DOMの属性（値）がJavaScriptのプロトタイプチェーンに移行されます。これにより、突っ込んだことをやっていた場合に、今まで動作していたコードが動かないということが発生する可能性がありますので、事前に変更内容を知り、対策をしておくことが求められます。HTML5Rockの更新情報として掲載されていましたので、さっそく日本語訳をしてみました。心当たりがある方は、ぜひ以下の内容を読んでいただいて、コードの修正などに取り込んでいただければと思います。 原文: http://updates.html5rocks.com/2015/04/DOM-attributes-now-on-the-prototype DOM属性は今後プロトタイプチェーンに Chromeチームは、最近「DOM属性をプロトタイプチェーンに移動しています」とアナウンスしてい
Gin Web Framework
Gin Gonic The fastest full-featured web framework for Golang. Crystal clear. Performance and productivity can work together Gin is a web framework written in Golang. It features a martini-like API with much better performance, up to 40 times faster. If you need performance and good productivity, you will love Gin. Low Overhead Powerful API You can add global, per-group, and per-route middlewares,
モバイルサイトのナビゲーションメニューは画面下に置くべき
2014年2月19日 スマートフォン, ユーザビリティ スマートフォンを使ってWebサイトを閲覧する人、どんどん増えてきています。モバイルブラウザーのシェアを見ても、そのユーザー数は無視できないものとなっています。サイトによってはデスクトップで閲覧する層より多いところもあるかもしれませんね。私がWebサイトの制作依頼を受けた際、モバイル対応は必須としてきましたが、モバイルユーザビリティについて再考してみたので、今回はナビゲーションメニューについて簡単に記事にしてみます。 ↑私が10年以上利用している会計ソフト！ よく見かけるWebサイトのナビゲーションメニュー 人気Webサイトギャラリー「The Best Designs」に掲載されている多くのWebサイトはメニューアイコンをロゴとともに画面上部に掲載しているのをよく見かけます。よく見かけるからと言ってこの場所に設置するのが本当に使いやすい
2014ブレイク確実！JavaベースのポータブルなWebフレームワーク Dropwizard - yojikのlog
最近Dropwizardというフレームワークが海外のJavaおよびJVMベース言語界隈で流行り始めている感しがします。 Thought Works Technology Reader でも Traialに入ってきています。 http://dropwizard.codahale.com/ このフレームワークはYammerのバックエンドWebサービスを提供するために作られたフレームワークで、アプリケーション開発者からみると、 JaxRSベースのREST提供フレームワーク ORM Jettyベースの組み込みWebサーバ Metricsを収集するためのライブラリ、管理ツール等 といった機能があります。 ここらへんまでは普通のフレームワークと基本的には違いが無く、むしろWebサービスに特化しているため物足りなく感じるのですが、特筆すべきは、このフレームワークが推奨するデプロイ・運用方法にあります。
脆弱性報告制度 << mixi Developer Center (ミクシィ デベロッパーセンター)
株式会社ミクシィは、お客様に安心してご利用いただけるサービスを提供するため、脆弱性に関する報告の重要性を認識しております。より安全なサービスの実現を目指し、脆弱性報告に対して、正当な対価をお支払いすることを目標に、脆弱性報告制度を開始しましたので、ご案内いたします。 概要 弊社のサービスにおいて、脆弱性を発見した場合に、窓口にご報告いただき、その重要度によって、報酬をお支払いする制度です。 対象 本制度は、株式会社ミクシィとその子会社がリリースした、ウェブアプリケーションおよびクライアントアプリケーションの脆弱性を対象とします。 ただし、次に該当するものは含まれません。 既に公表されている脆弱性 弊社にとって既知の脆弱性 報告されてから修正が完了する前に公表された脆弱性 攻撃が成立する可能性が著しく低いと考えられる脆弱性 原理的に修正が不可能な脆弱性 本制度の期間外に報告された脆弱性 窓口
CSSフレームワークは良くないと思った理由 - Librabuch
もっと挑発的なタイトルにして冒頭で「このタイトルは釣りです」とか書こうとか思ったけど、各方面からの報復が怖いので止めた（←どこから）。 本日、お仕事で初めてCSSフレームワークを使う機会があってその仕様的なものを初めて見たのだけれども、かなりショックというか思うところがあったのでエントリにすることにした。 CSSフレームワークとは おそらくTwitter Bootstrapが最も有名かつ実際に利用されている、と思われる。 マルチカラムレイアウトとか、角丸でお洒落なメールフォームとか、アコーディオンなメニューとかのデザインがあらかじめ良く設計されよく作り込まれていて、HTMLの制作者はclass属性にちょちょいと記載するだけでお手軽に「今風」なセンスでWebデザインを組み立てられるというもの。フレームワークという呼び名には疑義もあるようだけれど、海外でもそう呼ばれているので今回はCSSフレー
日本のスマホサイトは2年間でこんなに変わった (1/4)
スマートフォンやタブレット端末といった、いわゆる「スマートデバイス」を意識したWebサイト制作はもはや常識となっている。各企業のWebサイトは、次のような方法でスマートデバイスに対応していることがほとんどだろう。 スマートフォン向け専用サイトを構築する レスポンシブWebデザインで Webサイトを構築する viewportを調整する Web Professionalでは、2011年2月、有名企業のWebサイトがスマートフォンにどのように対応しているかを紹介した。 これらのサイトは、2年経ってどのような変化を遂げたのか。本記事では、取り上げたサイトに再び訪れ、サイトデザインのトレンドがどう移り変わったのかを観察。日本のスマホサイトの「BEFORE & AFTER」を紹介しよう。 半数以上のサイトがリニューアル まず、調査したサイト数に対してリニューアルしたサイトと、大きくは変化していないサイ
「中国嫁日記」の希有馬さん「これからマンガブログはじめようと思ってる人に伝えたいことがあるのです」
井上純一（希有馬）新連載『逆資本論』の同志募集中 @KEUMAYA よし！！ コミケのサークルカット終わった！ これで微妙な原稿ラッシュ終了！ 嫁日記三巻の作業に戻れる！！ やったー！！ http://t.co/2uj4fc8P 2013-02-19 20:42:53 井上純一（希有馬屋）『逆資本論』発売中 @KEUMAYA 井上純一（希有馬）TRPGデザイナー。漫画家。玩具会社「銀十字社」代表取締役 代表作：スタンダードTRPGシリーズ（SRS）『アルシャードセイヴァー』、『エンゼルギア』、『天羅万象』他。最近は『中国嫁日記』のジンサン。 blog.livedoor.jp/keumaya-china/ リンク p.twipple.jp 希有馬（井上純一or弌）さんの写真をもっとよく見るにはURLをクリック！！ 「希有馬（井上純一or弌）さん@KEUMAYA: よし！！ コミケのサークルカ
要素を変化させる、CSS3「transform」のおさらい
今回は、指定した要素を変化させる「transform」を詳しく見ていきたいと思います。 指定後の画像を見てもいまいちどのような変化があるかわかりづらいと思うので、前回の記事CSSアニメーションの初歩をおさらいで紹介した、animationを使って 変化の状態を見ながら確認しようと思います。今回も説明のベンダープレフィックスは省略していますが、動作はFirefoxとChromeの最新で確認しています。 また、このプロパティは3Dの指定もありますが、今回は平面の2D指定のみだけにします。 rorate 要素の回転を指定します。 transform: rotate();・・・XとYを同時に指定 transform: rotateX(); transform: rotateY(); transform: rotate();（角度の変更） #img01 img { animation: animat
WEB屋にとって便利なジェネレーター色々！最近のオススメも、昔から使ってきた物もまとめてご紹介！ | バンクーバーのうぇぶ屋
WEB屋を名乗って仕事をする以上、作業効率を考える事は必要最低限の努力だと言うお話は何度かこのブログでもさせて頂いてきました。 まぁしかし、ぶっちゃけ何が自分にとって作業効率に繋がるかはやってみないと分からないですよね。作業時間の見直しをするだけで効率化に繋がるかもしれないですし、ツールをもっと使いこなすことだったりするでしょうし、コミュニケーションを円滑にすることで作業効率につなげたりと、何が一番効率化に直結するかは人それぞれだと思います。 ただ、何度かこのサイトでもWEBサイトを作る上で便利そうなジェネレーターの存在を共有させて頂いてきましたが、こういうツールは知ってるのと知らないのとでやはり大きな差が出てくることはやっぱり多いと思います。特に最近はWEBに強いクライアントの存在も目立ってきて、自分だけじゃなく、お客さんにとっても、もしかしたらプラスになるジェネレーターの類も多いんじゃ
mixiにお詫びするなど3年8ヶ月遅いわ！ - やまもといちろうBLOG（ブログ）
こんなことをしているから馬鹿だと思われるんだよ。 今回の件に関するお詫びと反省、生じてしまった誤解へのご説明 http://www.littleshotaro.com/archives/1788 何でお詫びするんだよ。何で反省するんだよ。お前らは間違ったことは言ってない、批判されようがスパム送られようが内容証明が届こうが、突っ張ってmixiを全力で叩いてこそ新時代を切り拓く存在になる資格を得ると何度言えば分かるんだ。戦え、戦えよmixiと。バーカって書けよ。潰れろと言えよ。あれだけ盛り上がっていたサービスを、わずか4年足らずで残念なビジネスの代名詞にしてしまったカスどもの葬送歌を高らかに奏でてこそ新参ウェブサービスのあり方だと言ってるだろ。mixiに思いやりの気持ちなんて持つ必要ねえよ。株主であるわたくしが思いやられてるぐらいだわ。損してるんだぞ畜生。柄にもなく銘柄に思い入れを持った挙句が
超エンジニアミーティング〜Happy Hacking!〜 in ニコニコ超会議
webのクリエイティブを支えているのは誰か？ Webの未来を創るのは誰か？ もちろんそれはプログラマーである。超エンジニアミーティングではプログラマをクリエイターと定義し、もの作りの楽しさについて徹底的に語り合う。まだ世界にないものを発明するのはもちろん、車輪の再発明も、実装してみたも、速度改善も、コーディングは楽しい。さあ、今すぐ幸せなプログラミングを始めよう。 企画名称 超エンジニアミーティング 日時 4/28(土)11:00～18:00、4/29(日)11:20～16:30 ※当日は混雑が予想されますので、十分な時間的余裕をもってご来場ください。 場所 幕張メッセ 国際展示場6ホール http://www.m-messe.co.jp/ 主催 株式会社ドワンゴ 価格 超会議チケット(前売り1000円、当日1500円) 詳細 ニコニコ超会議 http://
自分のサービスをわかりやすく説明するために最も重要なこと2つ : けんすう日記
自分の製品の説明は難しい 僕が代表をやっている会社は、nanapiというサイトをやっていたりします。これはいわゆるHowtoサイトで「○○のやり方」みたいなのをひたすら集めて提供しているサービスなのですね。 書いているのは、僕ら社内＋nanapiワークスというクラウドソーシング＋CGMだったりします。 訪問者数も900万人くらいになって、そこそこの規模になってきたのですが、最近問い合わせが多いのが「うちのサービスの使い方もここに載せたい！」というものです。 nanapiとしてはHowtoのデータベースが充実するのが一番のユーザー価値だと思っているので、利益重視というより、記事が増えるなら、という形で、実費＋αくらいで受託的に僕らが書いてたりするのですが、そのノウハウを外に出すと、書ける人も増えて、その製品を使おうとするユーザーさんも増えて、いいことが多いかなあ、と思うので、ノウハウを共有し
フォーム自動入力(x-autocompletetype)の実験
※ご注意： ウイルスバスターがインストールされている環境だと、この記事は読めないようです (→参考画像) (x-autocompletetypeとは？) Webサイトのフォームにワンクリックで個人情報を自動入力してくれる便利機能。ブラウザに、あらかじめ名前やメールアドレスや住所やクレジットカード番号などの情報を設定しておく。 アンケートサイトとかに超便利 入力が苦手なオカンも便利 とにかくべんり Google Chrome のみ対応してる (2012年4月4日時点)。 便利すぎて今後、他のブラウザも追随必至。 (ユーザーが自動入力を使うには) Google Chrome 設定 → 個人設定 → 自動入力設定の管理 → 住所氏名メールアドレス等を入れておく (Webページ側での自動入力の設定) inputにx-autocompletetype属性をつけて、値を email とか sname
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
プロとしての行為 Act as Proffesional
