はてなブログにおけるページ表示速度改善の取り組みについて - Hatena Developer Blog
こんにちは、id:hakobe932です。はてなブログではユーザ体験の改善のために、ページ表示速度を向上させるための様々な取り組みを行っています。このエントリーでは、はてなブログで行っている、ブラウザキャッシュの活用、JavaScriptのページ最下部での読み込み、JavaScriptの圧縮、という3つの取り組みについて解説します。 ブラウザキャッシュの活用 同じ内容のJavaScriptやCSSを、ページを表示するたびにダウンロードすると、余分なHTTPリクエストが発生しますし、読み込み時間がかかります。 ブラウザのキャッシュを利用できれば、余分なリクエストを減らすことができます。はてなブログでは、なるべく長い間ブラウザにキャッシュを保存するために、JavaScriptなどの一部の種類のファイルのレスポンスに、以下のようなヘッダを指定しています。 $ curl -I http://hat
MSYS版のminttyでmsysgitのgit pushしたい - t0mmy.log
目的 MSYS版のminttyでmsysgitのgit pushやgit pullできるようにする。 1番下のmsysgitとMSYSの共存の参考リンクそのまんまで環境を構築したら、 gitのcloneやpushができなかったので。 原因 libcurl.exeが無い SSL certificate problem Cygwin+mintty、Windowsの対話型コンソールアプリを正しく実行できない 確かにipythonが正しく動かないし、gitのコマンドもpushとpullだけ動かない。 対策 libcurl.exeが無い 以下を [GIT_DIR]bin/ から [MINGW_DIR]msys/1.0/bin/([VAGRANT_DIR]embedded/bin/)へコピーした curl-ca-bundle.crt libcurl.exe libcrypto.dll libssl.d
iOSの開発をする上で絶対に使うべき！外せない！webサービス、開発ツール集
by @mixiappwchr iOSで開発する上で見ておくべきサービスやツールをまとめてみました。 ほかにもたくさんあると思いますが、基本的なやつを集めました。 アプリ配布 depolygate https://deploygate.com/?locale=ja 旧TestFlightがオワコンのため、今ではDeployGateを使うしかありません！ まだTestFlight使ってたの？急げ！終了目前のTestFlightから,今すぐにiOSもDeployGateに移行しよう！移行パターンも紹介するよ。 CI Circle CI https://circleci.com/ iOS対応されアプリもクラウドでCI クラッシュログ Crittercism https://www.crittercism.com/ ユーザービリティテスト Repro https://repro.io/ リモートで
iOSでこんなアプリ,こんな機能を作りたかったらこれを見ろ！作りたいアプリに対応するクラス、フレームワーク、ライブラリのまとめ！ - Qiita
画像を表示しようとしたら遅いよ！ 外部データを取ってきて表示するときにまずはまるのが画像の処理だと思います。非同期で必ず処理しましょう。 画像の非同期ロードはライブラリを使った方が早いと思います。 ヘッダーやフッタをつけたいよ！ tableView.tableHeaderView tableView.tableFooterView に突っ込む方法を書いてあるのが多いんですが、今回はもっと簡単な方法としてStoryboardなどでこれらのビューを直接突っ込んで管理できるのでおすすめ。 テーブルビューの上や下にUIViewをドラッグすると UIViewをIB上で直接追加できます。 後はIBでレイアウトをくめばok 使用するクラス、フレームワーク、ライブラリ ビュー UITableViewController https://developer.apple.com/library/ios/doc
Semantic Versioning 2.0.0
english セマンティック バージョニング 2.0.0 概要 バージョン番号 MAJOR.MINOR.PATCH を前提として、 あなたが互換性のない API の変更を行うときに MAJOR バージョンを、 後方互換性のある方法で機能性を追加したときに MINOR バージョンを、 そして、後方互換性のあるバグ フィックスをしたときに PATCH バージョンを、 インクリメントします。 追加のラベルとして、プレリリースとビルド メタデータが MAJOR.MINOR.PATCH フォーマットへの拡張として利用することができます。 序論 ソフトウェア マネジメントの世界には「依存関係地獄」と呼ばれる非常に恐ろしい場所が存在します。 あなたのシステムがより大きくなるほど、あなたのソフトウェアの中へより多くのパッケージを溶け込ませるほど、いつかこの絶望の底にいるあなた自身に気づく、そんな可能性が
iOS実機のSSL通信をプロキシによって傍受したり改ざんする方法 - Qiita
はじめに スマートフォンアプリ開発でAPIを介しWeb/APIサーバーとやりとりをする場合、「httpsを使っていれば通信はユーザーにバレない」なんてことはなく、Webアプリでツールを使ってできるのと同じようにユーザーには通信内容の確認や改竄などができます。 そのため、そのことを前提にアプリやサーバーAPIの設計と実装を行わない場合、アプリ利用者によるゲームスコア結果送信の改竄や、ソーシャルゲームにおけるレイドボスなどへのダメージ操作、ECサイトアプリでの購入操作なども可能になってしまいます。 また、最近自分は「無料で音楽聴き放題!! - ネットラジオ」というアプリをリリースしたのですが、このアプリに導入するスタティックリンクライブラリが不明な外部サーバーへ通信していないか、SSLを使用しているつもりがそうでない通信をしてしまっていないかのチェックをするため、自分はmitmproxyという
レビューフレンドリーな開発のしかた - tomykaira makes love with codes
2013-09-02 レビューフレンドリーな開発のしかた git dev 最近は多くのチームでレビューの習慣が定着してきました。おもにレビュアーとしての仕事を依頼されることもあります。 コミット・ブランチの作りかた一つでこのレビューのしやすさが格段に違ってきます。 自分が普段の開発でこころがけていることをまとめてみます。 前提 レビュイーとレビュアーの間に上下関係があるわけではないですが、レビュイーは多少手数が増えても、レビュアーのことを最大限配慮すべきです。 なぜなら、レビュイーはその機能の開発に集中して取り組んでいますが、レビュアーはすこし見るだけです。 なにかするとしたら、レビュイーがやったほうが時間も手間も少なくなります。 レビュアーはレビュイーよりも、変更について詳しくありません。 レビュイーは開発にいろんな部分を見てまわり、他のモジュールとの関連性や実装のこまかな意図を把握して
開発チームのコミュニケーションツールを吟味してみた - tomykaira makes love with codes
2013-11-08 開発チームのコミュニケーションツールを吟味してみた team チーム開発ではコミュニケーションツールが必須。 いま複数のチームに参加していて(5くらい、すべてリモート)、母体組織がおなじでも違うツールをつかっている部分もあり、考える事があるのでまとめる。 なにが必要か だいたいどんなプロジェクトでもこれらが必要。 なかったらきっと導入してもらう。 例はメジャーなもの、自分が使っているものから採用。 リポジトリ: Github, Bitbucket, gitlab, backlog, 生のリポジトリ タスク管理ツール: Asana, Redmine, Github Issues, backlog 文字チャット: IRC, Skype, Idobata, HipChat (音声、ビデオチャット): Skype, Google Hangout 情報や知見を貯める場所: Wi
CSSポストプロセッサー時代の到来
SassやLESSといったCSSプリプロセッサーは市民権を得たと言って良いと思う。しかしそれらCSSプリプロセッサーは開発という段階にのみ利をもたらすもので、今のところはそれ以上ではない。CSSを実際にユーザーに届けるまでには、開発だけではなくレビューとリリースという段階もある。レビューとリリースも確実性を持って効率的に行うためには、CSSポストプロセッサーと総称されるようなツール群が必要になるだろう。 この文書はFrontrend Advent Calendar 2013の4日目への記事として寄稿した。明日は@hilokiさんがスタコラサッサと書くようだ。 目次 CSSポストプロセッサーとは CSSプリプロセッサーの出力するCSS CSS Lint 開発用とレビュー用、リリース用のCSS CSSポストプロセッサーのユースケース ベンダー拡張プリフィックスの付加 Media Queries
今夜つける HTTPレスポンスヘッダー （セキュリティ編） - うさぎ文学日記
Webサーバーがレスポンスを発行する際に、HTTPレスポンスヘッダーに付けるとセキュリティレベルの向上につながるヘッダーフィールドを紹介します。 囲み内は推奨する設定の一例です。ブラウザによっては対応していないヘッダーフィールドやオプションなどもありますので、クライアントの環境によっては機能しないこともあります。 X-Frame-Options ブラウザが frame または iframe で指定したフレーム内にページを表示することを制御するためのヘッダーフィールドです。主にクリックジャッキングという攻撃を防ぐために用いられます。 X-Frame-Options: SAMEORIGIN DENY フレーム内にページを表示することを禁止（同じサイト内であっても禁止です） SAMEORIGIN 自分自身と生成元が同じフレームの場合にページを表示することを許可（他のサイトに禁止したい場合は主にこ
Kalei - コンパイルレス！JavaScriptで自動生成されるスタイルガイド MOONGIFT
うん、コンパイルレスは確かに手軽ですね。 プログラマーが複数人での開発に際してAPIドキュメントを必要とするのと同様にWebデザイナーであればスタイルガイドが必要になるでしょう。そうしないと意図した使われ方をしなかったり、変更が及ぼす影響範囲が分からなくなります。 CSSのスタイルガイドを生成するソフトウェアは幾つかありますが、通常はスタイルシートを指定してコマンドを実行し、その結果静的なHTMLを出力するものが多かったと思います。それだとWebデザイナーの方にとっては敷居が高くなってしまいます。 そこで使ってみたいのがKalei、クライアントサイドで生成するタイプのスタイルガイドです。インストールは特に不要で、Webサーバ上にKaleiを展開します。 $ git clone git://github.com/kaleistyleguide/kaleistyleguide.git Clon
Macでも無料でIE確認するためのModern.IEが想像以上に快適だった
これまで、MacBook Air 上で制作したWebページを IE 確認する時は、「VirtualBox」や「Parallels Desktop」という仮想PCアプリケーション上で Windows 8 などを起動し、そこで IE を起動して表示確認しています。 私は、 Windows XP – IE8 Windows 7 – IE9 Windows 8 – IE10 のように、なるべく一般的なOSとブラウザーのバージョンで合わせて個別の仮想PCをインストールしていますので、実機で確認するのと比べてもほとんど遜色のない精度でIEでの表示確認をすることができています。 その際、「Windows 8 – IE10」環境は、パフォーマンスが良いと聞いて購入した「Parallels Desktop 7」という仮想PCアプリケーションを使用していました。 しかし、OS X を Mavericks（10
[Grunt]grunt-contrib-jstでjsテンプレートを管理する。 | DevelopersIO
今回はCUIツールのGruntのプラグインgrunt-contrib-jstを使ったjsテンプレートを管理する機会があたので一連の流れをご紹介します。 アジェンダ JavaScript Templates(JST)とは? Grunt-contrib-jstを使ってみる JavaScript Templates(JST)とは? テンプレート部分とデータ部分を関連づけて表示するイメージです。以下の記事がイメージしやすくとても参考になりました。 参考記事:JavaScriptテンプレートエンジンJsRender 基本のキ それではJSTを用いて実際に表示してみたいと思います。今回はサンプルとして、Underscore.jsのテンプレートAPIを使って表示してみます。 使用したライブラリ jquery.js underscore.js backbone.js bootstrap.js bootst
![[Grunt]grunt-contrib-jstでjsテンプレートを管理する。 | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/6f1fde3cff7767965729d2d96d3e31da5b8a643d/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2018%2F11%2Feyecatch_developers.io_1200x630.jpeg)
Apache Benchを使った負荷テストのやり方 | Web活メモ帳
2016/07/11 追記しています 皆さん負荷テストツールって普段使ってますか？ WEBシステムを開発する際には、1人〜十数人で開発をすると思いますが、 受諾案件では要件を満たす開発ばかりしていて速度やパフォーマンスのチューニングを行う事が少ないと思います。 いざ運用が始まって、サーバーが落ちた・・とならないように負荷テストを事前にやっておきましょう。 Apache Benchでのサーバーパフォーマンスのチェック方法をメモしておきますので、どなたかの役に立てれば幸いです。 負荷テストとは 負荷テストって何ですか？という方のために簡単に説明をすると 低い負荷ではシステム上問題が無くても、高負荷での動作だと不具合を起こす現象を回避するためのテストです。 アクセスが集中して落ちてるサイトがありますよね。。 想定されるアクセスがあっても落ちないサイトにするための負荷テストです。 Webサーバーの
JavaScriptフロントエンド開発の昨今
フロントエンドのパラダイムを参考にバックエンド開発を再考する / TypeScript による GraphQL バックエンド開発
Chrome DevToolsを使いこなすための参考サイトまとめ | 1 pixel｜サイバーエージェント公式クリエイターズブログ
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 フロントエンドエンジニアの谷です。 本記事ではGoogle Chromeの開発者ツール、Chrome DevToolsを使いこなすために参考になるサイト、ページの紹介をします。 すでに多くのフロントエンドエンジニアが開発で使っているかもしれませんが、「要素のインスペクタなどの基本的な機能しか使っていない」「UA切り替えくらいしかつかってない」というような方や、そもそもほとんど使ったことがない、という方もこれらを参考にフロントエンド開発を効率化していきましょう！ 基本的な使い方 Chrome DevTools Overview 基本はやはり公式ドキュメ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
svg/svgo: Nodejs-based tool for optimizing SVG vector graphics files.
cakephpでmemcachedを設定（windows8 + php5.4）: 質問回答掲示板 バイバイ知恵袋のブログ
Installing Memcached for PHP 5.3 on Windows 7
github を用いた開発フローテンプレート