モバイル開発に役立つJSデバッグ術
Mercari Advent Calendar 2017 13日目は フロントエンドチームの @sottar が web アプリの開発（特にモバイル開発）で役立つ Chrome DevTools の便利な機能を紹介します。 はじめに メルカリでは PC からのアクセスよりもモバイルからのアクセスが多いため、web アプリもモバイルからのアクセスを意識したコードを書く必要があります。 しかしモバイル向けのコードを書く際に、毎回実機を接続して確認するのは面倒です。そこで最近のブラウザに付属している開発者ツールにはモバイル向けのコンテンツの開発に役立つ機能が搭載されているため、その機能を使いこなすことでモバイル向けの開発をしつつ、開発のスピードを上げる事が可能です。 そこで本日は Chrome DevTools 内にある、特にモバイルデバイス向けのコンテンツ開発に役立つ機能を紹介します。 Dev
当初の懸念どおりブラウザのプッシュ通知は邪悪に使われはじめている。実装側はクリックまで購読確認を待つべき。 - mizchi's blog
追記: 2019/11/12 2年経ったけど体験が悪化し続けた結果、 Firefox がこの記事の通りになりましたね… www.fxsitecompat.dev プッシュ通知、ネイティブアプリの機能郡をWebに持ち込むPWA技術の売りの一つだが、当初から懸念されていたとおり、非常にノイジーなものとなってしまっている。自分も気づけばあらゆるサイトの購読確認を、無意識で拒否を押すようになってしまった。 hagex.hatenadiary.jp 少し前の記事。最近はどこかで wordpress のプラグインになったのか、目にする機会が非常に多くなり、非常にストレスフル。最初は技術的な目新しさからか、ある程度容認していたが、さすがにこの状況が悪化する一方で、本気でやばいんじゃないかと思っている。とくに初見のブログの記事を読む前に、購読確認が出るのが最悪の体験となっている。 そもそもプッシュ配信とは
Chromeデベロッパーツールを自分色に染める
[links] We Are JavaScripters!@10th https://wajs.connpass.com/event/63502/ Vue.js devtools https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=ja Chrome DevTools概念図 https://developer.chrome.com/extensions/devtools jumtech/web_tool_detector | GitHub https://github.com/jumtech/web_tool_detector Chromeデベロッパーツールに独自機能を追加する6つのステップ | PLAID engineer blog http://tech
Chrome DevToolsを使ってJavaScriptのメモリリークを検出し、解消する - 人生dat落ち
JavaScriptを書いていたらブラウザがくっそ重くなる症状に出くわした。あぁ、噂のメモリリークですわ。 先人の知恵に頼るマン。それっぽい記事が見つかる。 javascriptのメモリリーク対策(随時更新) - Qiita Shibu’s Diary: JavaScriptのメモリリークを10倍速で発見する Taming The Unicorn: Easing JavaScript Memory Profiling In Chrome DevTools Writing Fast, Memory-Efficient JavaScript - Smashing Magazine angularjs - How to catch memory leaks in an Angular application? - Stack Overflow 上の記事はProfiles + Take Heap
GitHub の Issue リンクをリッチにする Chrome 拡張 - おなか周りの脂肪がやばい
どうもこんにちは、今日は便利な Chrome 拡張のご紹介です。 これは GitHub 上の issue link （#666 とかっていうやつ）を情報量の多い、見やすいバッジに変換してくれる拡張です。 親イシューにいくつかイシューをまとめて管理したいときに、イシューの状態（open/close や assignee ）が一目でわかってとても便利。 Chrome 拡張の permission の関係で GitHub 用と GitHub Enterprise 用の二つをご用意しております GitHub Issue Badges - Chrome ウェブストア permission が https://github.com のみ GitHub Issue Badges (for Enterprise) - Chrome ウェブストア permission が https://*/* になってい
Qiitaをより便利にするChrome拡張機能をつくりました - Qiita
筆者が「Qiitaにこういう機能があったらもっと使いやすいのに」 と思っていた機能をChrome拡張機能として実装しました。 ぜひインストールしてみてください。 Q Acceleratorと名付けました。 Qiitaでの活動を加速させるもの、といった感じです。 ※Accelerator（アクセラレーター）は「加速装置」「加速器」などの意味があります。 2017/03/03 時点ユーザー数 910ユーザーの方が使われています。 TL;DR インストールはChrome ウェブストアから https://chrome.google.com/webstore/detail/mheleidccioamimekojienbdfclcbaan/ 現在(2018/4/29)提供している機能 行番号を表示 記事の更新時間を表示 コピーアイコンを表示 自動いいね/自動ストック ヘッダー固定機能 新規投稿時のテ
ZenHubとは - Qiita
2015/12/03追記：待望のFirefox対応をしました！今日現在は、 https://www.zenhub.io/firefox からアドオンをインストールすることができます！ また、Firefox版の公開を記念して、初月割引や、ZenHubグッズ（！）がもらえるプロモーションコードがあるので、ZenHubを使ってみようか迷っていた方は、プロモーションコードを利用するとお得に始めることができます。 ZenHub公式ブログの記事はこちら https://www.zenhub.io/blog/firefox-fans-can-now-use-zenhub-with-their-favourite-browser/ 2015/07/01追記：このエントリー中のスクリーンショットは、古いバージョンのZenHubのものです。追記時点での最新の機能についてはZenHub2.0についてを参照してく
Chrome 43でUpgrade Insecure Requestsに対応してた - ASnoKaze blog
Upgrade Insecure Requests W3Cの仕様でUpgrade Insecure Requestsというものがある。 サブリソースのhttp://へのリクエストを自動でhttps://のものに変更する（下のデモサイトの例が分かりやすい。 指定方法としては以下の二通りである。 HTTPレスポンスヘッダで指定する Content-Security-Policy: upgrade-insecure-requests もしくはmetaタグで指定する <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> 試してみる デモサイトが公開されている https://googlechrome.github.io/samples/csp-upgrade-insecure-requests
Adobe製のJavaScriptデバッガTheseusがすごい - Qiita
この前、研究室の先生に教えてもらったAdobe製のJavaScriptデバッガTheseusがかなり便利なのでご紹介します。 Theseusとは Theseusは、AdobeとMITの共同研究から生まれたJavaScriptのデバッガです（→学会論文）。ChromeとNode.jsの上で動きます。具体的に何をしてくれるのかをざっくり言うと、関数のコールを追跡して、BracketsというAdobe製のエディタに下画像のような感じで表示してくれます。 Theseusのすごいところは、コールバックの実行まで追跡してくれることです。もちろん、エラーが起きた箇所もすぐに見ることができます。また、デバッグをするとき、気になる箇所にconsole.logを挟むことがあると思いますが、Theseusを使えばその必要もありません。関数の横に表示されているコール回数をクリックすれば、その関数の実行ログを表示し
一週間自宅のみでリモートワークしてみたけど働き過ぎた - mizchi's blog
Increments社は元々月曜日がリモートワークの日なんだけど、今週と来週は実験的にリモートワークすることになっている。 家を出てオシャレなカフェで作業したがる人も多いだけど、自分はあんまり外にでる理由がなければ家から出たくないタイプの人間なのと、今週前半は雨が降ってたというのもあって、昼飯買いに行く以外は完全に家で作業していた。 結果 正直なところ、自分はサボりぐせがある人間だと思っていたのだけど、目の前にしかかりのものが放置されるのが我慢できない凝り性でもあって、今回は凝り性な部分が勝ってしまい、完全に仕事しすぎた。 仕事しすぎたので進捗は最高に進んでいるんだけど、夜中まで働いてしまって、午前中はボッーとしている、みたいなことが多くて、オフィスに出る日だったら完全に駄目な感じだった。リモートなので朝ボーっとしているのがクリティカルになることはなかった気がする。 結果として今週めっちゃ
ただのWebエンジニアがスマホサイトを開発するにあたって知っておきたいこと - Qiita
今更だけど、スマホサイト開発未経験のエンジニアが、スマホサイトを開発して気づいたことやハマったことなどの雑多なまとめです。 対象はiOS, Androidです。 シェア率(日本) 最近の動向など 2014年4月のスマートフォン販売シェア、日本ではiOSがトップ、欧州ではWindows Phoneのシェアが各国で増加（Kantar調査） | juggly.cn Apple、2014年第1四半期において日本スマートフォン市場のシェアを36.6％獲得！ドコモ版iPhoneで大躍進 | gori.me（ゴリミー） 2013年第4四半期 国内携帯電話出荷台数ベンダー別 シェア 2013年第4四半期および2013年 国内携帯電話・スマートフォン市場規模を発表 より iOS, Android共に半々くらいのシェア率で考えれば良さげ。 Androidシェア(世界) iOSのOSは基本的には最新のバージョン
モバイルアプリ・Web開発にオススメの Chrome 拡張機能 10選 - Tech Blog
カップル専用アプリPairyでおなじみ株式会社TIMERSのCTOの椎名アマドです。 先日うちの社員と話してて自分が普段使ってるChrome拡張機能をしれっと紹介したら、 「生産性が上がる」とだいぶ好評価でした。 なので今回は、モバイルアプリやスマートフォンWeb開発などに役立ってる、Chromeの拡張機能を紹介します。 使う使わないでかなり生産性が変わってくるものもあるので、是非活用してみてください。 API開発に最適 JSONView オススメ度：★★★★★ JSONで来たレスポンスを、綺麗に最適化して表示してくれます。 わかりやすく色分けハイライトされてたり、配列を畳むことが出来たりと、 APIを絡めた開発では必需品です。 Postman - REST Client オススメ度：★★★★★ REST リクエストをその場で作成して送信できるクライアントツールです。 GET/POST/D
定番SSHクライアント「Google Chrome」
はじめに こんにちは。KMC2回生のtyageです。 京都もほんとに寒くなってきて鍋が捗りますね。簡単だし美味しいあったまるし、最高ですね。 この記事はKMCアドベントカレンダー2013の17日目の記事で、 昨日は1回生のnona65537君によるSSH の二段階認証についてでした。 今日はGoogle ChromeというSSHクライアントの紹介なのですが、12日間続いたKMCアドベントカレンダーのサブプロジェクトであるSSHアドベントカレンダーもこれで最後になります。 最後がこれでいいのか？とも思うのですが、今までの内容がハードだったという方に向けて優しい内容となっておりますので、安心して御覧ください。 定番SSHクライアント「Google Chrome」 Google Chrome（もしくはChromium）と聞いて「あっ、SSHクライアントのことか！」と思われた方には少し物足りないか
Firefoxはもう限界！Chromeへ完全移行したお勧めの拡張の紹介
※今回はFirefoxユーザーへの記事です。 本当にね、Firefoxが好きでず～っと使ってた。 でもね、もう限界です。 WordPressで画像をUPすれば固まる。 1PassWordのパスワードは読み込まない。 それがもう最近は頻繁。 もういいっ！Chromeへ移行してやる とはいうモノの、今まで何度もChromeは挫折。 何よりも「ブックマーク」が無いのが違和感、使いにくい。 でも、最近はFirefoxでもブックマーク代わりは専ら「Speed Dial」。 そして、いつの間にか（僕が知らんかっただけだけど）Chromeに「Speed Dial2」が・・・！ イケる。。これならいける。 前のChromeのSpeedDialはFirefoxのに比べて残念な子だったけど、 Speed Dial2は出来る！ ていうか、Firefoxのより出来る。。 そして、その他のFIrefoxで欠かせない
共有アカウント管理の神サービス「Mitro」 - Hacking My Way 〜 itogのhack日記
これはずっと待ち望んでたー！ あらゆるサービスでパスワードが必要な昨今、同じパスワードを使いまわすことの危険性はわかっているとはいえ、毎回違うパスワードを考え、覚えておくのは難しいものです。 こうした問題は、パスワードの生成、管理をするツールを使うことで解決することができます。有料でよければ1password、無料ならKeyPassXがそれぞれマルチプラットフォームで使えて便利です。 さて、個人のパスワードであればこれでOKなのですが、まだ課題がありました。企業やグループで共有するパスワードの管理です。例えば開発用のTwitterアカウントを共有するといった用途が考えられますね。 これまではオフラインで見せたりして伝え、ローカルに保存する時は暗号化して、といったようなルールで乗り切るしかなかったのですが、安全性と利便性のバランスや、個々の意識やリテラシの違いまで含めて管理することは事実上は
iMac／Macbook Proに入れてるアプリの中で『これだけは絶対必要だろ！』って思えた物全部！ | バンクーバーのうぇぶ屋
どうもー！！最近2011年春モデルのMacbook Proが重量的な意味で重すぎて、もうぼちぼちAirにしたいセナです。 まー、もしAir買ったらまたどうせアプリ入れ直すだろうし、必要な物だけチョイスして整理して入れたいし「あのアプリは必要だ、あのアプリは要らない」とか、たぶんそんな試行錯誤だけで1日以上を費やすかもしれない… オマケに、どうせ近い未来また新しい機種なり何なりが出て、同じ事を繰り返すことになるのは目に見えて居る… 僕、面倒くさいの大嫌いなので、これはなんとかして時間節約出来んもんかと思ったわけです。 と、いうわけで。今日は2013/08時点で「いや、これは自分的に天地がひっくり返ってもとりあえず必要でしょ。」ってアプリを全部一箇所にまとめておくことにしました。 まぁ、必要になるかはさっぱり分かりませんが、こんな記事でもとりあえず書いておけば将来の僕が「ビバ俺！」ってなってる
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
Chromeデベロッパーダッシュボードで公開鍵を確認できるけど何のため？
Chromeデベロッパーダッシュボードで公開鍵を確認できるけど何のため？ Written on Jun 19, 2013. Posted in Chrome extension ちょっと前に僕がリリースしている拡張機能をバージョンアップしようとして、Chromeデベロッパーダッシュボードを開きました。そこには見慣れないリンク「詳細」がありました。 押してみると、アイテムIDや公開鍵が表示されました。 ここで「おぉ、なんと便利な！」と思った方は、下を読まなくてもいいです。僕は最初「え、公開鍵なんて表示されても、何に使うんだ？利用用途ないだろおい」と思ってしまいました。でも、理由なく単に「特に意味ないけど出してみました、てへっ」なんてことはないと思うので、G+のコミュニティにて聞いてみました。 「What is this?」 http://goo.gl/z7aAW そこでの返事を要約すると、以
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Engadget | Technology News & Reviews
地図で見る、国別最も使われているブラウザ
