はてなブックマーク

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに Charlesというデバッグプロキシを使うとHTTPリクエストやレスポンスにブレークポイントを設定して手軽に書き換えたりできて非常に便利。 とうことでCharlesのブレークポイントの具体的な使い方について。 Charlesの概要、セットアップ、基本知識とかはこちら。 俺的フロントエンドエンジニア三種の神器に認定したCharlesについて 〜その1〜 Charlesの素敵なところ 俺的フロントエンドエンジニア三種の神器に認定したCharlesについて 〜その2〜 インストールと設定 俺的フロントエンドエンジニア三種の神器に認定

はじめに ※この記事は全ての動作確認をエミュレータで行うことを推奨しているわけではありません。 スマホサイトの動作確認は言わずもがな実機で確認することが最も信頼できる方法です。 しかし、スマホサイトが対応しなければならない全てのブラウザを対象に、日常的に、尚且つ気軽に動作確認をするのは経験上難しい状況が多かったように思います。 社内で検証端末の管理簿をつけて運用している会社も多いのではないでしょうか？ こういった場合、ちょっとした実機確認がしたい時にお目当ての端末が既に貸し出されていて、リリース前だからしばらく使わせて欲しいんだよーねー、なんて言われたらストレスフルですよね。 日常はエミュレータである程度の精度の高い動作確認を行いつつ、しかるべきタイミングで実機で動作確認をすると言ったワークフローであれば生産性も向上しそうだし、何より開発者のストレスが軽減されるのではないかなーと思いこの記

ここ数日、TypeScript+Angularの書き味を試しているのですが、staticなメンバを持つinterfaceを作ったろと下記のような感じで書いてみました。 すると、staticキーワードに対してこんなエラーメッセージが。 Property or signature expected. （確認したTypeScrptバージョンはv1.5-betaです） 対応していないんだろうなとは思いましたが諦めきれずにぐぐってみると、stackoverflowの２年前のスレッドでstaticなメンバを持つinterfaceみたいなものを実現する方法が紹介されていました。 How to define static property in TypeScript interface この回答 方法としてはinstanceメンバを定義したinterfaceと、staticメンバとして扱うinstance

Webページで日本語のWebフォントを使いたいんだけどフォントファイルのサイズが大きくて諦めたなんて経験ないですか？ 例えばIPAゴシックだと6.2MBほどのファイルサイズがあるので、さすがにそのままWebフォントとして使うのには抵抗がありますよね。 じゃあ使いたい文字だけ引っこ抜いてフォントファイルを再構築すればいいじゃね？という考え方を元にした手法としてフォントのサブセット化というものがあります。 fontminはWebフォントフレンドリーなフォントのサブセット化をサポートするツールです。 nodeモジュールであり、CLIもサポートしているのでビルドプロセスに組込みやすいという点ではフロントエンダーには嬉しいところではないでしょうか。 出来ること 具体的に出来ることは下記になります。 フォントファイルを指定した文字でサブセット化したフォントファイルに変換 出力できる形式はwoff、tt

はじめに シリーズ第2回。第一回はこちら。 俺的フロントエンドエンジニア三種の神器に認定したCharlesについて 〜その1〜 Charlesの素敵なところ ということで今回はCharlesのインストールと最初にやっておくべき設定を自分なりにまとめてみる。 Window、Linuxの手順は割愛。 検証した環境は以下。 Charles 3.9.3 OSX 10.10 (Yosemite) Java7 (1.7.0_25) Javaはバージョン7以上を入れたほうが良い。 Mac版のダウンロードファイルは2種類あり、JavaSEバージョン7以上向けのものはSSL Proxyがより良く動くと書かれているため。 （SNIをサポートするかしないかの差っぽいが） また、自分の環境だとバージョン7以上向けのCharlesでないと動作しなかった。 Java7以上をインストール ターミナルを開いてjava -

Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up

はじめに 昨今のWebブラウザはどのような機能があるのか把握するのも大変なほど多機能で便利ですよね。 Webブラウザの機能を把握してうまく使いこなせること（とくに開発者ツール）が、フロントエンドエンジニアの前提スキルになってきてるのかなぁと感じる今日この頃です。 ということで自分のデフォルトの開発用ブラウザはChromeなのですが、これを覚えて捗ったなぁということをメモしていこうと思います。 思い浮かんだら追記していこうと思っているのでストックして頂けると幸いです。 基本系 キーボードショートカットを覚える Chromeのキーボードショートカットの一覧 キーボードで出来ることはなるべくキーボードでやるけれども、マウスやトラックパッドでやったほうが速い場合は臨機応変に切替えることを心がけています。 Chrome Canaryを使う Chromeの開発者向けプレビュー版 Chrome Cana

はじめに 個人的にまず最初に覚えたほうがいいんじゃなかなーと思ったことを順に説明する。 バックナンバー 俺的フロントエンドエンジニア三種の神器に認定したCharlesについて 〜その1〜 Charlesの素敵なところ 俺的フロントエンドエンジニア三種の神器に認定したCharlesについて 〜その2〜 インストールと設定 セッション 一連のWebトラフィックの記録単位のようなもの。 複数作ることが出来てタブで切り替えることができる。 アクティヴにできるのはひとつだけでアクティブなセッションはタブのタイトルに*が付き判別できる。 新規にセッションを作成すると作成したセッションが自動的にアクティヴになる。 既存のセッションを再開した場合は記録を停止して、再開したいタブを選択して記録を開始する。 ファイルにも保存することが出来るのでバグ報告の参考資料として共有するのにも便利かと思う。 また、全ての

個人的にフロントエンドエンジニア三種の神器の一つとして認定した。 特にハイブリッドアプリ（いわゆるガワネイティヴ）のデバッグですごく重宝している。 でもちょっと癖のあるUIで取っ付きにところもあり、こいつの魅力を伝えることを妨げる一因にもなっているように思える。 ということで、フロントエンジニア目線で何回かに分けてCharlesの使い方を紹介していこうと思う。 もちろんフロントエンジニアじゃなくても便利に使えるツールなので知らなければ何が出来るかくらいはちょっと見て欲しい。 SSLに対応したMITM(Man In The Middle)プロキシサーバーであるところ ブラウザなどのクライアントとインターネットの中間者となり、その間に流れてくるデータ、つまりHTTPリクエスト、レスポンスの内容を記録したり変更することが出来る。 また、CAとしての役割も果たすことができるためSSLの通信内容も復

概要 今年からフロントエンドエンジニアにシフトチェンジして5ヶ月がたち、これがないと仕事にならんわレベルのツールを整理がてらに晒していこうと思う。 スペック的にはJava歴が10年くらい。 割とツール好きで、できればキーボード（カーソルキー以外）だけですべての操作を完結したいと思っている。 そんなおっさんがお送りします。 5ヶ月間のお仕事内容 PC/タブレット向けのAngularJSを使ったフロントエンド開発 HTML/CSS(SASS)/Javascript PCはIE8~、Chrome。モバイル端末はiPad、Nexus7 職場での開発環境 mac mini (2011) 19インチのシングルモニタ GUI系ツール Sublime Text 2 プログラマ向けのテキストエディタ。 これがないと仕事にならない。 以下、必須なPackage。 Vintage vimっぽいキーバインドにする