Web ページを高速化して ユーザーに価値を届けたい 制作者のための セミナー＆ワークショップ資料公開
Web ページの高速化セミナー WCAN 2018/09/15「Web ページを高速化してユーザーに価値を届けたい制作者のためのセミナー＆ワークショップ」 - WCAN | Doorkeeper 先日、2018年9月15日にひっさびさに WCAN に登壇させていただいて Web パフォーマンスチューニング....のなかでもページロード速度の高速化を中心にセミナーとワークショップを行わせていただきました。 下記はそのときの資料です。今回は Web サイト制作者向けのセミナーとして企画したので、Web アプリ開発勢が好きそうなテクニカルな話はすべて割愛しています。 ウケが良かったような気がするネタ なにがウケるか読みがつかなかったので、とりあえず色々盛り込んでみました。会場では下記のあたりがウケが良かったような....気が...する。 格安 SIM の回線は、大手キャリアのプロパー回線と比べる
Android アプリのアクセシビリティガイドライン概観メモ
ネイティブアプリとアクセシビリティの関係 Web が専門ではありますが、アクセシビリティを通した品質向上を考え始めると、Web だけでは社内のプロダクトの半分あるいはそれ以下程度のカバレッジしかありません。 そこで今回はネイティブアプリ、特に Android のガイドラインについて目を通したメモ。 プラットフォームのガイドライン ネイティブアプリの筆頭たる iOS と Android においては、WCAG 2.0 ほどは詳細化されてこそいないものの、各プラットフォームでガイドラインが提供されています。 Implementing Accessibility | Android Developers Accessibility for Developers - Apple Developer とはいえ、この2つ見比べてみると iOS のドキュメントはそれほど充実していないような印象です。どうも
iOSアプリにおけるアクセシビリティの概観メモ
iOS のアクセシビリティ Android アプリのアクセシビリティガイドライン概観メモ ::ハブろぐ の続きです。前回、iOS のドキュメントをうまく見つけられなかったので Android だけ目を通しましたが iOS も読んでみます。 プログラミングガイド iOSアクセシビリティプログラミングガイド は、幸い日本語が用意されてるので読みやすくて安心です。英語版は PDF でありませんが Accessibility Programming Guide for iOS と About Accessibility Verification on iOS に相当するものと思われます。 なお、英語の情報は Accessibility on iOS - Apple Developer に動画なども合わせてまとまっています。 Apple いわくアクセシビリティは正義 最初に目についたのは「なぜアプリ
HTML5 Conference 2013 レンダリングパフォーマンスお話してきた！
HTML5 Conference 2013 で、僭越ながら1セッション担当させていただきました！やっっったら、奥行きの深い部屋で、後ろのほうの方にはスライド見えづらかったかもしれません。ごめんなさい。部屋の奥行きのわりに、スクリーン小さいという不遇がありました orz ということで、スライドのURL共有とか、イベントの感想とかです。 Rendering Performance 動画 Webフロントエンドのパフォーマンスは、今やページの初期表示を早くすることだけではありません。昨今のHTML/CSS/JavaScriptを駆使したWebコンテンツを、スムーズに動かすには、ブラウザのレンダリング(描画)処理について知る必要があります。このセッションでは、レンダリング上のよくあるボトルネックの見つけ方と対処を中心に、最適化Tipsをお届けします。 ちと粗いのですが、今回の参考URLリストです。
フロントエンドチューニングの箇条殴り書き
普段気をつけてるよリスト "モバイルで、WebViewとブラウザのコンパチで、特にセオリー化されていないデザインモジュールのなか、装飾画像もふんだんに使うぞ系サービス開発" の文脈における、パフォーマンス確保のため気をつけてるよリスト。 よく、パフォーマンス「向上」とか「確保」とか申しますが、メンテナンスコストなどと天秤にかけて、「必要十分」のラインを狙うのが重要だと思う次第。 画像リソース 画像リソースを揃えるときのセオリ。圧縮率とか最適化とか細かいチューニングはあれど、大雑把に下記を守る。そしてImage Optim（or 相当の処理）。 JPEGはプログレッシブで画質60くらい（オレ目安） PNGは差し支えない範囲で色数をきちんと削る 50px未満のサムネイルは@2.0xなリソースにしない 案外、Androidあわせの@1.5xや@1.0xでも大丈夫なことすらある GIFアニメを入れ
grunt-data-uri 作ってnpm登録してみた
cssの中身を正規表現で漁って、データURIに変換するよ君。htmlを対象とした処理は、そのうち追加する。 ahomu/grunt-data-uri DataURIへの変換系タスクで、なかなかちょうどよい使い勝手のものがなかったので自作しました。npmにおいて、名前争奪合戦の様相を呈している、grunt-task系ですがなぜかgrunt-data-uriが空いていました。 もしかして、海外では、画像をDataURIに変換して埋め込む、という手法がdata-uriという呼称伴わずに使われてるのかしら npmデビューしたかったんや！ @t32k 氏が CSSO of grunt plugin | en.t32k.me を作っていたのに触発されまして。npm adduserして、npm publishするだけ。 良いところ 0.3.xはもちろん、開発ブランチ（devel）の0.4.0aでも動く
CSSプリプロセッサのfunctionを拡張してみた (CSS Preprocessor Advent Calendar 8th day)
CSS Preprocessor Advent Calendar 2012の8日目でございます。飛び道具的な好奇心に基づき、functionの拡張について調べてみた次第。 今回は、下記の2つの関数をサンプルとして扱います。どちらも実用的なものではありませんが、あくまでサンプルということで、、、。 reverse - 与えられた文字列を逆順に並べ直して返す randomColor - ランダムなカラーの16進数を返す Sass編 Sass - Syntactically Awesome Stylesheets Module: Sass::Script::FunctionsにあるAdding Custom Functionsを参考にします。じつは、LESSとStylusは使ってたんですが、Sassって使ったことないんですよね...。 sass_add_func.rb Sass::Script:
$.eachのループを途中で止める (軽めのjQuery Advent Calendar 2012 7th day)
$.eachを回して途中で止める $.eachはたとえば複数の要素を示すjQueryオブジェクトをループして、ひとつひとつに対して処理を適用することができます。jQueryプラグインなぞを開くと、かなりの高確率で使用されている人気のAPIです。 そんな$.eachは、return falseでいわゆるbreak（中断）をすることができます。知ってると便利かも、ぐらいの軽いおはなし。 orange pineapple apple たとえばこのようなコードでは、orange・pineapple・appleの順に並んだ要素をループして検査し、pineappleであれば、ループを止めてそうでなければ背景に色をつけています。この例で期待される動作は、最初のorangeだけに色がつくのが正しいです。 実行結果は以下 Iterate by $.each こんな感じになります。期待通りの動作ですね。 do
Gruntfileを整理してタスクの自動化を進めた
(急遽宣伝) FrontrendでGruntします Frontrend（フロントレンド） Vol.3 powered by CyberAgent : ATND Frontrend（フロントレンド）とは サイバーエージェントが主催するフロントエンド系技術セミナーです。 HTML5/CSS3やJavaScriptのトレンドやノウハウ等を惜しみなくお伝えします。 2012/10/21（日）の午後に、FrontrendでGruntのことを紹介させていただく運びになりました！以下の記事は色々と知ってる前提な内容になってしまっているので、ベーシックな所から知りたい方には特にオススメです。 今回のFrontrendはスピード特集ということで、ページパフォーマンスの最適化はもちろん、CSSプリプロセッサの導入や、ガイドラインの運用による業務効率のカイゼンにも踏み込んでスピードを上げていきます！ということで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
