レンダリングを妨げるJavaScriptとCSSを削除するためにやったこと - Qiita
概要 「ページの表示速度をあげるため、JavaScriptやCSSファイルがレンダリングを妨害しないようにする」 という目的にたいして調べたことをまとめる。 分析ツール ページ表示速度を測定するために Lighthouse を利用しており、 分析結果の Eliminate render-blocking resources を減らすことがゴール。 Lighthouseは、Chrome検証モードのAuditsタブからも利用できる。 PageSpeed Insights（PSI）はlocalやstaging環境では利用できないが、 PSIの分析エンジンとして Lighthouse を使用しているため、Lighthouse を利用すると参考にしやすいかも。 (Lighthouse と PSI は、以前は異なる仕組みでパフォーマンスを測定していたため、チェックする指標は同一ではなく、同じ指標だった
Webページの高速化/最適化まとめ - Qiita
おはこんばんちは、渋谷でお掃除してる人です。 はじめに 自社サービス、ランディングページ、企業ホームページのようなWebサイト（Webページ）において何が一番大切かと聞かれれば、その答えは表示速度です。 ええ、仰りたいことは大いにわかります。もちろんコンテンツも大事です。 ですが、どれだけコンテンツが良くて魅力的な商品だったとしても、表示されなければ意味がありません。 人間という生き物は、Webページが表示されるまでたったの2秒しか待てません。 ウルトラマンでさえ3分間も待てるこのご時世に、たったの2秒です。 その2秒によって、汗水流して作りあげたみなさんのコンテンツが人目につくこともなく、消えていくのです。 というわけで Webページを高速化する上で大切なことをちょっとだけ紹介します。 この記事を読み終わる頃には、ちょっとだけ高速化に詳しくなって、ちょっとだけPageSpeed Insi
最低限のGit運用フロー - Qiita
masterとreleaseブランチを常駐 何か作業する時はmasterブランチからfeature/[機能・作業名]という名前でブランチを切りそちらで作業する。作業完了後masterへマージ。 一人作業かつ作業規模が小さい場合のみmasterブランチで作業してもよい masterへマージした後featureブランチは削除する。再作業時に都度同名ブランチを作るように master→featureブランチへのマージは適宜おこなう 作業がある程度終わりプレビュー、納品を行う段階に入ったらmaster→releaseへマージする 納品したリビジョンはreleaseブランチよりTagを付ける。release/[YYYYMMDD（公開年月日）]/v[バージョン番号] 一度納品データが完成しTagを付けた後、再修正・再納品が発生した場合、バージョン番号を上げてタグを付け直し古いバージョン番号のタグを削除
flexboxのバグに立ち向かう（flexboxバグまとめ） - Qiita
注）本文中の「コンテナ」「アイテム」について 本文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。 コンテナ display: flexや、wrap指定などをする 複数のアイテムを含む アイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題（Safari） Chrome Safari 潰れてますね。 起きる条件 Safari なぜ コンテンツの最小サイズを尊重してくれない模様 どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定（デフォ値なので、指定がなければそのままでOK） Safari10にて修正済み（つまり、SierraとiOS 10以降では対応不要） 2. align-items:center はみ出す問題 Chrome IE11 はみ出てますね。 起きる条件 IE10-11 f
イメージマップを使ってレスポンシブな画像内の好きな箇所にだけ、属性やクラスを与えたりする - Qiita
画像内に好きな形でイメージマップを作って、一部箇所だけに属性やクラスを与えたり、クリック出来るようにしていきます。また、イメージマップをレスポンシブな画像に対応させていきます。 例えば、下記のようなイメージの各パーツの機能説明をしようと思って、それぞれのボタンにクリックイベントやホバーを付けたい時にどうするか。 恥ずかしながらイメージマップなるものを知らかなかった私は最初、divタグやCSSのposition: absoluteを使ってイメージの上に要素を作っていこうと試みましたが、途方もない作業で詰みました。 調べたところイメージマップなるものがあると知り、利用してみたところ簡単だったので、備忘録もかねてQiitaに初投稿してみます。 イメージマップとは？ １つの画像の中に複数の領域を作って、一般的にはその領域にリンク先を指定し、クリックすればリンク先に飛べるようにするものです。リンクの
GitHubの二段階認証が有効な環境でSourceTreeを使う - Qiita
セキュリティ上の観点からGitHubの2段階認証を有効にしている方はいらっしゃるかと思います。しかし、この設定ではGitの認証が通らないためSourceTreeのアカウント認証がうまく行えない問題が発生します。ここではGitHubの２段階認証を有効にしている環境でも正常にSourceTreeを使えるようにします。要は自分がやらかしたのでメモとして残しているだけです。 1. トークンを発行する 簡単に言うとこのステップでトークンと呼ばれるパスワードの代替となる文字列を発行し、この文字列をSourceTreeで使用します。Googleアカウントでも似たようなものがありますね。 GitHubにログインしてアカウント設定画面を開き、Personal access tokensをクリックします。 Generate new token(新しいトークンを作成)をクリックします。 トークンの作成画面が開き
[Sublime]Sublimeで簡単にファイル比較 - Qiita
以前はWindowsユーザでファイル比較といえばDFをもっぱら利用していた。 Macユーザになってファイル比較する必要が出てきた時にDFのようなシンプルアプリがなかったのでサブライムで代用。 代用とはいいつつ、シンプルな機能およびUIなので非常に気に入っている。 みなさんも是非、試してみてください。 「Command Palettes」から「Package Control:Install Package」を選択 「Sublimerge」を入力してインストール 比較したいファイルを２つ開いた状態で、「Command Palettes」から「Sublimerge:Compare to View…」を選択
![[Sublime]Sublimeで簡単にファイル比較 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/ff1eccbe5856c31fe9d0c10d72ad01fd6dcb6220/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCU3VibGltZSU1RFN1YmxpbWUlRTMlODElQTclRTclQjAlQTElRTUlOEQlOTglRTMlODElQUIlRTMlODMlOTUlRTMlODIlQTElRTMlODIlQTQlRTMlODMlQUIlRTYlQUYlOTQlRTglQkMlODMmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPWVjYjExMWIyMzZjMDU1N2U1ZDc3YjMwMTBmYmQ3ZGRj%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBUYW11Y2hhJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1jMTRlOGI2OGJhZjk2YjUyYWU4Zjg3N2RjZjBlNDY1Mw%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Df6d46a8bd48eeb8e6b0ce5cf39f48326)
世の中の小説作家と編集者は今すぐ Word や G Suite を窓から投げ捨てて Git と GitHub の使い方を覚えるべきだ - Qiita
世の中の小説作家と編集者は今すぐ Word や G Suite を窓から投げ捨てて Git と GitHub の使い方を覚えるべきだGitGitHub小説 タイトルは釣りではありません。 最近、小説の執筆にあたって Git を導入して原稿の進捗履歴を管理しました。めちゃくちゃ便利でした。 GitHub を使って友人と一緒に校正校閲の作業をしました。めちゃくちゃ捗りました。 短編 SF 小説が短期間で完成しました。でも広告が目的ではないのでリンクは貼りません。 Git のことを何も知らない奴が Git と GitHub の使い方を覚えたら便利だったし捗ったので、記事にしてしまおうぜという試みです。 2019年1月4日 追記 本記事は「執筆」および「校正・校閲」の段階における Git と GitHub の有用性を主張する記事です。 「組版」や「デザイン」の段階における Git の有用性について
連続したCSSアニメーションの実装 - Qiita
はじめに keyframesを使ったcssでのアニメーションは、gif画像の埋め込みと比べると読み込み速度も早く、パフォーマンスも良く、動きも滑らかです。 gif のようにどのようなアニメーションでも表現できるわけではありませんが、 1. 出現時のみ強調されたアニメーションが表示される 2. 以降、別のアニメーションがループして表示される といったようなカスタマイズが可能なので、その実装方法を紹介します。 サンプル だいぶ荒いですが、こんなイメージです。 コードは JSFiddle で公開していますので、実際の動作もこちらでご確認ください。 コード説明 ある程度カスタマイズできたほうが便利だと思うので、軽く説明します。 html <div class="container container-open"> <span class="elem-open-1 elem-common">N</s
Macにnvm + Node.jsをインストール - Qiita
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash % Total % Received % Xferd Average Speed Time Time Time Current Dload Upload Total Spent Left Speed 100 10250 100 10250 0 0 4049 0 0:00:02 0:00:02 --:--:-- 4049 => Downloading nvm from git to '/Users/sotoiwa/.nvm' => Cloning into '/Users/sotoiwa/.nvm'... remote: Counting objects: 5891, done. remote: Compressing o
MAMPを利用してVirtual Hostでローカル開発環境構築 - Qiita
目的 サーバーやPHPなどてんでわからないという人のPCに、MAMPを利用し、webアプリケーションのローカル開発環境を構築する。 ローカル環境 Mac OS Sierra (10.12.5) MAMPインストール インストール 以下よりMAMP（無料版）をダウンロード。 MAMP PRO（有料版）も一緒にダウンロードされますが今回は使いません。 .pkgファイルがダウンロードされますので開いてインストーラーを起動します。 インストールが完了すると、/Applications/MAMPというディレクトリが出来ています。 起動 /Applications/MAMP/MAMP.appを開き、MAMPを起動します。 PASSWORDを聞かれますので、普段Macにログインしているパスワードを入力してください。 ※以後、MAMP内のサーバーの起動・停止の際に聞かれます。 上の画像のようなウィンドウが
LP高速化のために5つの画像の遅延読み込みライブラリを比較した - Qiita
ベーシックアドベントカレンダー22日目です。 8日ぶり3回目の@tkhrです。 画像の遅延読み込みライブラリ比較の話です。 LPの高速化のために遅延読み込みを導入します。 対象になるLPは広告からの流入で表示するページになります。 なのでユーザの熱を冷まさせない工夫が必要ですね。 そのための工夫の一つとして今回は画像の遅延読み込みに対応します。 画像ならキャッシュがあるじゃん。と言えるかもしれませんが、広告LPなので初めてのユーザが大半なのでアテにできませんね。 なので遅延読み込みによってファーストビューが表示されるまでの時間を短縮することが狙いとなります。 遅延読み込みとは ページにアクセスした時には画像の読み込みはせず、必要になった時に画像を読み込みます。 必要になった時というのは、その画像が表示される時ですね。 それによってページにアクセスした時の読み込み時間を短縮できるので、ユーザ
sourcetreeでローカル上でgit管理されたプロジェクトをリモートに紐付ける手順 - Qiita
でもいい。 そうではなく、sourcetreeを使う方法もある sourceTreeを起動し、この画面上に、プロジェクトのディレクトリをドラッグアンドドロップする - 保存先のパスなどが自動で入力される。 - git管理するのでチェックを入れる - 今回、すでにリモートのリポジトリは存在しているため、チェックを外す ローカル上にgit管理されたローカルリポジトリ[testproject]が作成される 2 リモート上のリポジトリとローカルを紐付ける - ローカルリポジトリを開き、 右上にある歯車を押下する ロモートタブを押下し、追加を押下する 設定ダイアログが表示されるので、そこにBitBucketのuriを指定する これで、このプロジェクトとbitbucketの紐付けができ、リモートへpushできるようになる
失敗・炎上に名前をつけることで、僕たちはもっと強く、生産的になれる。 - Qiita
TL;DR 起きた失敗、炎上には名前を付けよう。 名前を付けることで似たような問題が見えやすくなる。 名前を付けることで問題に取り組みやすくなる。 名前を付けないと、見過ごされ対策されずに過ちを繰り返す。 「要望真に受けて無事死亡パターン」という名前の力 システム開発において、ユーザ要望を文字通り実装することは、 バッドノウハウであることは、読者諸賢は十二分にご存じかと思う。 しかし、これが意外と撲滅されない。 特に若手やリーダー1年目が良くやらかすから、組織としてごくありふれた失敗事例となる。 そんなある日、 「それってよくあるパターンで、名付けて”要望真に受けて無事死亡パターン”だよね。」 という話をしたら若手から、 「そういうあるあるパターンにキャッチーなネーミングを付けて普及させたら、 失敗も減るんじゃないですかね？」 という素晴らしい提案を受けた。 ジョシュアツリーの法則 これは
「お前らのフリーランスになるメリットは間違っている」というお話 - Qiita
どうも、かずきちです。 何やらエンジニア界隈ではいつの間にか有名人になっているようで。 ◾️Qiita記事 エンジニアで稼ぐために大切な２０のコト WEBサービスで起業したい人に読んで欲しい２０のコト ウェブカツ生を雇わない？転職できない？著作権無断使用の炎上から１年を経て思うところをぶっちゃける。 テックキャンプをウェブカツ!! 顧問が徹底レビューしてぶった切ってみた ■運営サービス一部 http://crazy-wp.com/ フリーランスエンジニアを育成するオンライン最大級のプログラミングスクール「ウェブカツ」 http://webukatu.com/ ■プログラミングスクール「ウェブカツ」の出版本 「小学生からでもプログラミングを楽しく学べる漫画作りたいなー」と思い立ち、外注してウェブカツで漫画本を作りました。KADOKAWAさんより出版しています。 はたらくプログラミング 完全版
Google Homeを使って4歳児とSlackで会話する方法 - Qiita
わたあめに捧ぐ(私信) 私の家では、家族の連絡にSlackを利用しています。 Slackはとても便利なのですが、基本的にテキストベースのコミュニケーションとなるため、 文字入力ができない幼児には使うことができません。 そこで、Google Homeを活用して、文字入力をせずにSlackで会話するシステムを構築してみました。 イメージは以下のとおりです。 このシステムは、大まかに以下の2つで構成されています。 Slackへの投稿をGoogle Homeがしゃべってくれる仕組み Google Homeに話しかけるとSlackに投稿してくれる仕組み 順を追って説明していきます。 1. Slackへの投稿をGoogle Homeで喋らせるBotの作成 以下のソフトウェアを書きました。 https://github.com/ikasamah/go-slack-google-home Google H
闇雲にディズニー映画みたいなアニメーションを GUI に実装するのはもうやめよう - Qiita
はじめに 本稿は UI Design Advent Calendar 2015 – 9日目の GUI アニメーションに関する記事です。 アニメーションの12の基本原則と GUI ディズニーの アニメーションの12の基本原則/12 basic principles of animation というのがありまして、要はこの原則に沿ってアニメーションを制作すればまるでそれが生きているかのような動きをする、平たく言えばディズニーっぽい動きになる、というものです。http://the12principles.tumblr.com がとてもわかりやすいので、うちいくつかを転載しておきます。 SQUASH & STRETCH ANTICIPATION FOLLOW THROUGH & OVERLAPPING ARCS ビデオ解説：The illusion of life これらを見ただけでも、『あー、デ
君たちはそんなにハンバーガーメニューが好きなのかね？
はじめに 本稿は UI Design Advent Calendar 2015 – 8日目のモバイル UI に関する記事です。 まず私はハンバーガーメニューという UI が嫌いです。その理由についてこの記事で説明していきたいと思います。 あの三本線を人はハンバーガーと呼ぶ 最近よく見かけるあの“三本線”のことを海の向こうでは ハンバーガーアイコン とか ハンバーガーメニュー とか言うらしいです。上のがパンで、真ん中のがハンバーグで、下のがパンに見えるからだそうです。にしてもこのただの三本線をハンバーガーと表現するのは少し無理があるような気がします。まあ違和感あれどそこに抗っても仕方がないので、とりあえずこれはハンバーガーと呼称することにします。 ハンバーガーメニューを避けたい理由 真面目にハンバーガーメニューを考察してみます。 1. 何をするのかがわからないアイコン https://dri
iOS ヒューマンインターフェースの原則 - Qiita
はじめに iOS のヒューマンインターフェースを理解するためにはまず UI 設計の原則を定めた聖典 iOS Human Interface Guidelines を読むことから始めなければなりません。ここにはプラットフォームの特徴からデザインの原則、それぞれの部品が何のためにデザインされたのか、どう利用するのか、iOS を構成する UI の基本指針がまとまっています。 よく、『磨りガラス効果がかっこいい』『アニメーションしておくとイケてる』『ボタンは右配置の方が右手で押しやすい』『流行っているから』……などの観点によって UI の設計が決められることがありますが、そういうことではないのです。いや実際かっこいいかわいいだとかの感覚は重要なのですが、見た目が何となくそれっぽいだけでは優れた UI とは言えません。磨りガラスでも何でも必ずそこには意味があります。だからこそ HIG に書かれた思想
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
node.jsのバージョンアップ、バージョン切り替え - Qiita
