rjとtとjqコマンドでHTTPレスポンスを試験する - ゆーすけべー日記
Web 開発者は HTTP レスポンスをよく見る。 以前 CDN を導入する際に、キャッシュがヒットしているかどうか、どこのエッジがキャッシュを返しているかを確認するためにヘッダをよく見ていた。また、ヘッダだけではなく、TTFB といったレスポンスタイムも気にしている。とにかく HTTP レスポンスをよく見る。 HTTP レスポンスを確認する３つの方法 Chrome さえあれば DevTools を見て一目瞭然である。 とはいえ、コマンドラインで確認したい時がしばしばある。 GUI を操作するよりも手軽である。 その場合はcurlコマンドを叩けばよい。 これでプロトコル、ステータス、ヘッダが分かる。 また、レスポンスタイムを測りたければ、その名もttfb.shというcurlをラップしたコマンドラインツールがある。 https://github.com/jaygooby/ttfb.sh この
表示速度を飛躍的に向上させるHTML/CSS最新仕様「content-visibility」「Lazy loading」「contain」をコード付き簡単解説
これまではJavaScriptを用いて実装するしかありませんでしたが、ついにimgやiframe要素であればloading="lazy"を付与するだけで、簡単に実装できます。 <!-- 画像に適用する場合 --> <img src="pic.png" alt="画像の詳細" loading="lazy"> <!-- iframeに適用する場合 --> <iframe src="external.html" loading="lazy"></iframe>画面外では読み込みが発生しないので、必要になった時（画面内に要素が入りそうになった時）に読み込みが発生するのでパフォーマンスが向上します。 また画像についてはsrcsetを用いたレスポンシブな画像に対しても指定できますし、picture要素を用いてfallback形式でも記述できます。 <img src="normal.png" srcse
今日からGDPR施行だけど実は何もしてなかったぜというWEB担当者のために書いた - フジイユウジ::ドットネット
こんにちはこんにちは。5月25日ですね。 今日からGDPR施行じゃないですか。 ヤバくない? 何もしてなくない? やっべえな、というWEBサイト担当者/アプリ開発者のためにブログをしたためます。 内容的には「GDPR、何をしたらいいかも何もわからん」という人向けです。これでバッチリ適法、というレベルになるわけではないことは理解して読んでね。 できる限り適切に書いているけれど、この通りにしたら酷い目に遭ったぞなどのクレームは受け付けません(免責)。 あと、プライバシー保護ガチ勢の人はユルい内容に怒らないで欲しい。間違いへのツッコミかあれば歓迎ですが優しくお願います。 長いからこれだけ読んでおくと大丈夫 ① 欧州圏からアクセスできるとかユーザー1人いるとGDPR対象事業者になる、わけじゃない ② プライバシーポリシー更新してるだけで対応済みとしている企業も多い セキュリティコンサル的な会社が専
【2018年春】今チェックしておきたいデザインツール12選
JakeはUIデザインやWeb開発の記事を執筆するライターです。彼の仕事はあらゆるWebや彼自身のポートフォリオで見つけることができます。ツイッター@jakerocheleauから最新のアップデートをフォローできます。 デザイン業界の流れは速く、絶えず新しいツールが誕生しています。そのため、デザイナーとして最先端を走り続けるには、世の中の動向につねに注意する必要があります。 そこで今回は2018年現在、チェックしておきたいデザインツールを厳選してまとめました。これらのツールにはデスクトップのプログラムもありますし、SaaSのアプリやブラウザツールもあります。 いずれにせよ、このリストにはみなさんがチェックしたいと思うものが必ずあるはずです。詰まるところ、素晴らしいデジタルコンテンツを作ることにおいて、あなたのデザインスキルはさまざまな手段の一部に過ぎないのです。 Adobe XD Adob
かなりオススメ！WordPressのローカル環境が簡単に構築できる、Windowsもmac OSも対応の無料ツール -Local | コリス
WordPressのローカル環境を構築するといえば、XAMPPやInstant WordPressを利用している人が多いと思いますが、これらより簡単に、そして一度のインストールで複数の環境を構築でき、PHPなどのバージョンも簡単に変更することができる高性能な無料ツールを紹介します。 サーバーの知識がない人でも簡単に利用でき、あっという間にWordPressのローカル環境が構築できます。 UIも洗練されて使いやすく、かなりオススメです！ ローカルに、WordPressの制作環境を簡単に構築できます。 WordPressの制作環境は、複数構築できます。 サーバーの知識がない人でも、4クリックするだけでOK。 WordPress日本語版にも対応。 ローカルSSLサポート。 SSH/WP-CLIアクセス。 共有可能なURLを作成して、クライアントに見せることも可能。 柔軟な環境オプション。 PHP
Headless Chrome をさわってみた | CYOKODOG
Headless Chromeのリリースをうけて、PhantomJS のメンテナーが開発の終了を宣言したりとか、ちょっと話題になった Headless Chrome について試してたことをメモっておく。 試したやつのリポジトリ：https://github.com/cyokodog/headless-chrome 概要 ヘッドレス（GUIを表示しない状態）で実行できる Chrome の機能 Chromium と Blink が提供する機能をコマンドラインで利用できる Chrome 59 から利用可（2017/06/08時点ではMAC、Linuxのみ） 活用例 ウェブページのテスト 表示・動作テスト、画像やPDFによる画面のスクリーンショット スクレイピング 認証が必要なサイトでも対応 ヘッドレスで起動する --headless フラグと --disable-gpu フラグ（そのうち指定不要
最近のgitを使った開発フローについて - その手の平は尻もつかめるさ
最近のgitを使ったWebアプリケーションのプロジェクトの開発フロー (主にブランチ運用) について記すものです． なお前提としてGitHub Enterpriseを利用しています． git-flow 大上段に構えたもののあまり特殊なことはしていなくて，基本的にgit-flowをそのまま踏襲しています． git-flowについてはしっかりした解説記事がインターネット上に数多く存在しますからそれらを参考にしていただければと思いますが，ざっくり説明すると masterブランチ，developブランチ，releaseブランチ，featureブランチ及びhotfixブランチがある masterブランチは常にリリース可能な状態になっている (すなわち現在本番で稼働しているアプリケーションのコードと等しい) developブランチは開発中の状態で，ステージング環境等に上がっている releaseブラン
Googleが推薦するHTMLとCSSのコーディング方法
2012年7月12日のGoogle ウェブマスター向け公式ブログの記事「HTML と CSS のコーディングガイドライン」で紹介されていた「Google HTML/CSS Style Guide」に書いてあるコーディング方法と感想を紹介します。 Google HTML/CSS Style Guideの日本語翻訳 Google HTML/CSS Style Guideは英語なのでGoogle Chromeで翻訳して確認していたんですが、すでに翻訳してあるサイトがあったのでこちらも参考に両方を見て確認していきました。 Google HTML/CSS Style Guideを翻訳してある記事「Google HTML/CSS Style Guide」を適当に和訳してみたは、かなり助かり参考になりました。 それではGoogle HTML/CSS Style Guideに書いてあるHTMLとCSSのコ
『Google Chrome』のRAM消費を抑える方法 | ライフハッカー・ジャパン
『Google Chrome』は、既存の製品の中でもっとも優れたウェブブラウザと言えるかもしれません。しかし、パソコンのRAMを、まるで感謝祭の七面鳥でも平らげるみたいに消費してしまいます。 パソコンのタスクマネージャーを見たことがある人なら、きっと『Google Chrome』のプロセス数と、それらが独占するメモリ量を見て卒倒しそうになったことがあるでしょう。今回は、なぜ『Google Chrome』がこれほど多くのRAMを使用するのか、どうすればその旺盛な食欲を抑えることができるのかをお教えしましょう。 Google ChromeはこれだけのRAMを一体何に使っているのか？ ウェブの閲覧は、私たちが思う以上に複雑化してしまいました。考えてみてください。私たちがパソコンで行う作業のほとんどは、ブラウザの中で行われます。タブを開いたり、動画を見たり、ほかのプログラムと連携するウェブアプリや
Web制作時に備えておきたい便利なチートシートのまとめ -Bootstrap, WordPress, CSS3, Git, SublimeTextなど
BootstrapやFoundationなど人気のフレームワーク、CSSの各フレームワークの比較、WordPressのテーマ作成やコピペで利用できるコード集、Gitのコマンドやフロー、iOS/Androidのグラフィックガイドライン、ChromeのデベロッパーツールやSublimeTextやEmmetなど、Web制作に役立つ便利なチートシートを紹介します。 紹介している主なチートシート Bootstrap 3, Foundation 5のチーシート CSSの各フレームワークの比較 WordPressのチートシート iOS, Androidのデザイン用のチートシート jQueryのチートシート HTML5, CSS3のチートシート ファビコンのチートシート 検索エンジン最適化2015年版のチートシート Chromeのデベロッパーツールのチートシート SublimeText, Emmetのチー
デザインの原理原則がわかる8つの記事 | creive
デザインをする際に、IllustratorやPhotoshop、Sketchが使えるといった、小手先の技術はもちろん大切ですが、そもそも「良いデザインとは何か」という概念的なことを知っておくのは大切です。 そこで、今回は、ノンデザイナーでも押さえておくべき、デザインの原理原則がわかる8つの記事を簡単な説明とともにご紹介します。 企画書の作成、簡単なモックアップをつくる際にも役立つものばかりです。 配色技法 デザインをしていて「良い配色」が思い浮かばない… なんて時に読むと考えがまとまる記事です。 「良い配色」という、なんとなく持っている概念を、論理的に説明したい時には重宝します。ドミナントカラー、トーンイントーン、カマイユなど7つの配色技法を、具体的な例を用いて説明しつつ、配色によってもたらされる効果を知ることができます。 → 配色に悩んだときに、きっと役立つ7つの配色技法【基本】 配色パ
NginxでHTTPS：ゼロから始めてSSLの評価をA+にするまで Part 2 – 設定、Ciphersuite、パフォーマンス | POSTD
NginxでHTTPS：ゼロから始めてSSLの評価をA+にするまで Part 2 – 設定、Ciphersuite、パフォーマンス 今日のインターネットの世界では、一般的な静的Webサイトも含め、 全てのWebサイト に、強固で安全なHTTPSのセットアップが必要となります。この記事は、Nginxセキュリティをどのようにセットアップするのかに関するシリーズのパート2です。 パート1 は、Webサーバに有効な署名証明書をセットアップする話で終了しました。しかしこれには、最適な設定とは言い難い、デフォルトのNginxの設定を使用していました。 この記事を読み終えれば、SSL Labsのレポートで、A+の評価を獲得できる安全なHTTPSの設定ができます。それだけでなく、追加でいくつかの微調整も行い、パフォーマンスそしてUXも向上させていきます。 ここに掲載した記述やコードの抜粋の他にも、すぐに使
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと
グーグルが日本語Webフォントを提供してた。これはWebフォントの大転換になるかも？ | 初代編集長ブログ―安田英久 | Web担当者Forum
今日は、Webフォントの話題を。日本語Webフォントは、「使いたい、でも重くなるからちょっと」という人が多いと思います。でも、グーグルがクラウド上でWebフォントを提供し始めたことで……。 グーグルが日本語のWebフォントをクラウドで提供開始グーグルが日本語のWebフォントを提供し始めていました。実は、2014年7月からあったらしいのですが、私はつい最近になって知りました。 その名も、「Noto Sans Japanese」。このページの表示も、「Noto Sans Japanese」にしてあります。 Noto Sans Japaneseは、6934文字に削減したサブセット版が提供されており、ウェイト（太さ）が7バリエーション。1ウェイトあたり約4.5Mバイトほどのサイズです。 使い方を簡単に説明すると、CSSで定義ファイルを読み込み、 <style> @import url(http:/
Apache HTTP Server: MPMパラメータ チートシート
こんにちは滝澤です。たまにはapacheネタということで一つ。 Apache HTTP ServerのパラメータチューニングではMaxClientsなどのMPM（マルチ プロセッシング モジュール）関連のディレクティブの設定値を調整することが多いです。本記事ではMPM関連のディレクティブのデフォルト値やディレクティブ間の関係を表にまとめたので紹介します。 注意事項 UNIX系OSにおける説明となります。バージョン2.2系および2.4系の両方について説明します。 関係式においてバージョン2.4系の場合はMaxClientsをMaxRequestWorkersに置き換えて読んでください。 ディレクティブ名には公式サイトのリンクを張っています。公式の説明も確認してください。 デフォルトの欄で括弧付きものはそのディレクティブそのものは設定不可ではあるが、内部的に設定されているデフォルト値を示してい
フロントエンド開発が捗るHTTP通信モニタリングツール「Charles」を使いこなす
はじめに 「Charles」はHTTPのプロキシ・モニタを行えるGUIのツールです。似たようなツールとしてはFidllerが代表的ですが、CharlesはUIや操作性がシンプルです（その分機能は限定的です）。「HTTPをモニタする」というとなんだか取っ付きにくそうに感じるかもしれませんが、Charlesを使うことでその認識は大きく変わります。今回はこのツールのさまざまな使い方をWebフロントエンドの開発視点から紹介していきたいと思います。その便利さから弊社のWebフロントエンド開発チームにはなくてはならないツールとなっています。 Charlesとは Charlesは公式サイトの説明にもある通り、HTTPプロキシ／HTTPモニタを行うツールです。機能を大きく分類するとできることはその2点だけですが、かゆいところに手が届く細かな機能を多く持っています。公式サイトから引用すると、機能としては以下
最近の Web 開発者が使ってるらしいサービス - Qiita
MDN のページのヘッダ部分に、開発者が使っているサービスについてのアンケートがあったので回答してみた。 内容は、開発の上で使える様々なサービスについてだったんだけど、その選択肢が知らないのもいくつかあっておもしろかった。 MDN のアンケートの選択肢にあがるってことは、今こういうサービスがメジャーなんだなーと思ったので貼っておく。 (ただし、 Code Hosting -> Github や IaaS -> AWS みたいな分かりきってるのは省く) ちなみにサーベイは以下。 load-test Loader.io LoadImpact.com Loadstorm.com browsertest SauceLabs BrowserStack W3C validators CrossBrowserTesting Browsera security Nessus WebInspect ? Ne
「Ansibleではじめるサーバ作業の自動化」を発表してきました
2014/10/11 に開催された PHPカンファレンス にて、「Ansibleではじめるサーバ作業の自動化」という発表を行ってきました。 午前中のセッションだったのですが、多くの方にご参加頂き、ありがとうございました。 発表資料 発表資料をslideshareに公開しました。 今回は、これからAnsibleを使ってみようという方を対象として、Ansibleの基本的な内容をメインにしました。また、実際に私自身がPHPプロジェクトで採用した際のユースケースを紹介しています。 発表後、「Ansibleをやってみます！」という意見を頂けたので、このセッションの目的は達成することができました:D このセッションのフィードバックは、joind.in にて受けて付けています。すでにいくつか好評価を頂いていて安心していますが、もし良かったらお願いします。 https://joind.in/talk/vi
AWS で作るシステムのセキュリティ考 - 水深1024m
AWS アカウントを複数人で使ってシステムを作っていく時に、 セキュリティの面からやるべきことについて。 主に Web アプリケーションを想定した内容ですが、特に書いてあることは特殊ではないと思います。 各所の Blog にも記事書かれてますが思っていることをつらつらと書いてみます。 なんか変なこと言ってたらご指摘ください。 参考: AWSのセキュリティが気になるなら読んでおくべきAWSセキュリティのベストプラクティス - yoshidashingo はじめに (AWS アカウントと IAM ユーザ) 前提というか用語の話。 AWS アカウント アカウント作成時のメールアドレス、パスワードでログインして使うユーザ IAM ユーザ AWS アカウントから発行できる、ユーザ名とパスワードでログインして使うユーザ AWS アカウント周り AWS アカウント (ルートユーザ) で作業できないように
Adobe製品の代わりに使える無料アプリ10+
2014年6月27日 Illustrator, Photoshop, 便利ツール PhotoshopやIllustratorなど、Adobeの製品はクリエイターの必需品のひとつとなっています。しかしその値段からなかなか手が出せない…という方も多いのではないでしょうか？今回はAdobe製品の代用として使える無料アプリをいくつか紹介します。金欠の学生さんや、様々な理由から脱Adobeを考えている方の参考になれば幸いです！ ↑私が10年以上利用している会計ソフト！ Photoshopの代わりに GIMP 長年Photoshopの代用として愛され続けているGIMP。Photoshopの拡張子であるpsdファイルが開けることはもちろん、Photoshop用のブラシなども利用可能。画像の編集・加工ツールとしてPhotoshopとほぼ同様の機能を備えています。日本語の公式チュートリアルも充実！私もお金の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
