Chrome拡張の開発に必要な知識とかの覚書です。 この記事では開発の前に知っておくべきChrome拡張の全容について解説していきます。 「実際に開発しながら学ぶ」形式の解説記事は多く見られるのですが、概念についてちゃんとまとめてある記事は見当たらず、そこらへんの理解で結構苦労した覚えがあるので、そういった人達の手助けになればと思います。 対象 Chrome拡張が作りたい人 Javascriptがまあまあわかる人 Chrome拡張の各概念がいまいちわかってない人 概要 まずはChrome拡張の大まかな構造について説明します。 Chrome拡張はHTMLとCSSとJavascriptで作られています。 必要なhtml,css,jsファイルなどと後述のManifest Fileを一つのフォルダにまとめたものが一つの拡張機能のまとまりとなり、zipで圧縮してアップロードすることでストアで公開する

Help us understand the problem. What is going on with this article?

これからはasync,awaitが読み書きできないと生きていけなそうだったので調べてみました。 ※コード例は一応TypeScriptですが、ほとんどJavaScriptです。 参考: async function - JavaScript | MDN

はじめに: Amazon ES のアクセス制御 Amazon Elasticsearch Service (以降 Amazon ES) は VPC に対応していないため、アクセス制御を設定しないと誰からでもアクセスが可能な状態になってしまいます。Amazon ES のアクセス制御は AWS ユーザ・IAM User/Role・IP アドレス等に対して設定できます。Auto Scaling させている EC2 のアプリケーションサーバから Amazon ES にアクセスするようなケースでは都度 IP を設定するのも困難なため、各 EC2 インスタンスに設定した IAM Role による制御を用いることになります。 課題: AWS 署名付きリクエスト AWS でアクセス制御している API (今回の場合、Amazon ES の API)にリクエストを投げるには、アクセスを許可されたリソースの

はじめに この記事では、プログラムの計算量を求める方法を説明します。プログラミングの初心者向けに、厳密さよりも分かりやすさを優先して説明していきます。 サンプルコードについて この記事のサンプルコードは、C言語（C99）で記述しています。 計算量とは？ 計算量とは、 「そのプログラムがどれくらい速いかを大雑把に表す指標」 です。 もう少し正確に言うと、 「入力サイズの増加に対して、実行時間がどれくらいの割合で増加するかを表す指標」 です。 グラフによる計算量の表現 計算量をグラフで表すと、以下のようになります。 これは、「入力サイズ $n$ が増加するにつれて、実行時間が $n$ に比例して増加する」ということを表しています。 別のグラフも見てみましょう。 これは、「入力サイズ $n$ が増加するにつれて、実行時間が $n^2$ に比例して増加する」ということを表しています。 計算量を求め

Karabiner 使えない対策: Hammerspoon で macOS の修飾キーつきホットキーのキーリマップを実現するMacOSXSierra 背景 http://qiita.com/naoya@github/items/56a34be85710f4ed5531 でも書いたとおり Karabiner が使えない現状、修飾キーつきのホットキーのカスタマイズをどうするかという問題がある。記事を書いた時点では macOS の DefaultKeybidings.dict でショートカットを定義していたが、Hammerspoon を使うことでやりたいことが実現できたので、こちらの方法に移行した。 課題に感じてたこと http://qiita.com/naoya@github/items/56a34be85710f4ed5531#comment-1554604656a7ec49f63d こちら

Webアプリケーション開発についての知見を、自分の経験と知識をベースに整理してみようという試みです。 いわゆるサーバサイドにスコープを絞り、フロントエンドは対象外です。筆者は普段、オブジェクト指向言語で書いているので、本記事でもその前提（Ruby、PHP、Python、Java、Scalaあたりを想定）になっています。 では、本編をどうぞ。 ソフトウェア開発は複雑さとの戦い 『人月の神話』では、ソフトウェアの本質的な困難性について4つの性質をあげている。その中で最初に出てくるのが「複雑性」である。『新人プログラマに知っておいてもらいたい人類がオブジェクト指向を手に入れるまでの軌跡』なんか読んでもらえると、ソフトウェアの複雑性と戦うために、人類が生み出してきた発明の数々が説明されている。 では、複雑さとは何か？もう少し掘り下げて考えてみよう。 複雑さの正体 Webアプリケーションが複雑になる

アメリカ人です。 Hello 👋 この記事の目的 多くの日本人は自分の英語力には自信がないではないでしょうか。残念ながら「英語がわからん」、「英語が全然できない」という声をしょっちゅう聞いています。でも、今まで英語ができて意味がちゃんと伝わる何人かの日本人に会ったがあります。完璧な英語ではないけど(外国人も英語でミスる時もある...)、がんばって話そうとするので充分仕事ができる人たち。そういうがんばる姿勢はオープンソースのプログラムや英語圏のプログラムに手を出すためには一番大事なことだと思います（外国人側もすごく助かります）。日本の文化では「私はできる！」と自慢することは少ない中、この記事を通して、流暢に話せなくても自分のプログラミングの命名の仕方にはちょっとだけでも自信を持たせたいなと思います。完璧じゃなくていいです。Let's go! 合わせて読んでいただきたい 【日本人エンジニア必

概要 開発者にとってはメリットがありそうだけどユーザーにとってはいまいちメリットがよく分からないES6。ひとまずどのくらい開発者にとってメリットがあるのかを実際に把握するため、ES5のReact.jsソースをES6ベースに書き換えてみました。 対象のソースは、投稿[react-router v2.xとcontext]のサンプルソース（https://github.com/kunitak/react-router-1to2）です。 参考 React TutorialをES6で書きなおしてみた - console.blog(self); http://sadah.hatenablog.com/entry/2015/08/03/085828 Babelで理解するEcmaScript6の import / export http://qiita.com/inuscript/items/41168a

JavaScriptは大変難しい言語です。Rubyの難易度を2、Cの難易度を5、C++の難易度を8にすると、JavaScriptの難易度は12ぐらいあると思います。このコーディングガイドはそんなJavaScriptの深みに嵌まらないようにするためのJavaScriptの書き方を規定したものです。初級者1のための物ですので、わかってやっている人に好きにやってください。 このコーディングガイドは絶対に従わなければならないものではありません。私は一切強制はしませんし、初級者が従わなければならないという義務もありません。採用するしないはみなさんの自由です。 禁止編 JavaScriptには安易に使用してはいけない機能があります。下記の機能は、それぞれの機能を使っても良い、または、使うべきであるという理由を説明できない限り、使用してはいけません。 ==、!= ==と!=を使用してはいけません。代わり

（訳者注: これは、JavaScript Stack from Scratchを翻訳し、まとめて読めるように1ファイルにしたものです。元の翻訳と各種ファイルについては、日本語訳forkリポジトリを参照してください。また、原文が活発に更新されているため、訳文も追従して更新されます。ご了承ください。） モダンJavaScriptスタックチュートリアル、ゼロから始めるJavaScript生活へようこそ。 ⚠️️ このチュートリアルのメジャーアップデート版を3月初旬に公開する予定です。ご期待下さい! より詳しく(英語). これはJavaScriptスタックを使い始めるための最短最速のガイドです。このガイドは一般的なプログラミングの知識とJavaScriptの基礎を前提としています。これら全てのツールを一緒につなぎ合わせることにフォーカスしており、各ツールについて可能な限りシンプルな例を提供します。

同情するならサーバーをおくれ お金も無くサーバーを借りるのも一苦労な日々を送っております。RubyなんてVMだけで50MBとかかかるから、512MBの借りてるサーバーだともう大変なんです。Apacheとかも動かしているからメモリが無いんです。四畳半でつつましく暮らしている感じです。 Amazon さんとかサーバー無料チケットとかくれないかなー |ω・`）チラ 動画をディプラして楽しめる仕組みが出来上がったら使わせてあげるから、AWSの無料クーポン1年分とかくれないかなー |ω・）チラ |ω・）チラ Ubuntu はスワップが割り当てられて無いの Rubyにするなよって言われそうなんですが、みんながつくったライブラリーとかそういうエコシステム的なものを活用させていただけることがありがたくて、ほんとみんなありがとう。 つくった処理をcronでまわしてたら、途中で止まってて、コマンドラインで実行

はじめに 初心者による初心者のための記事 React.js公式チュートリアルの和訳風 ES6 さらっと仮想DOM調べてみたよ、ぐらいの人向けです。 JavaScript初心者、ES6初心者、React初心者向けかつ僕がそうです。 なので間違いがあるかもしれません。見つけたら教えて下さい。 公式のチュートリアルはこちらです。 React Tutorial React チュートリアル (和訳) 公式Documentのソース (Markdown) 環境 Mac OSX Node.js v0.12.7 Gulp 3.9.0 React 0.13.3 作るもの 公式のTutorialに沿って、シンプルなコメントボックスをReactで作成します。 次の機能を提供するものです。 すべてのコメントの表示機能 コメント投稿フォーム バックエンドサーバーとの連携 また、次の特徴を持っています。 更新最適化:

Re:dash Advent Calendar 2016 小ネタです。 普段Re:dashを使用して、RDB, BigQuery, Redshiftなどなど複数のデータソースを使用してデータの閲覧や可視化を行ってます。クエリを定期実行したりカスタムのダッシュボードを作成したりできるので重宝しています。 今回はクエリの定期実行とpythonのデータソースを組わせて、複数のクエリの実行結果をSlackに投稿するbotを作成してみました。 pythonデータソースの有効化 pythonのデータソースは、デフォルトで無効化されているので、有効化します。pythonデータソースを有効化しなきゃならないのですが、これを有効にするといろんなことができるようになるので、有効化は慎重に判断してください。 自分の場合、redashのサーバーにパブリックIPをつけずプライベートなセグメントに置いてあり、VPNの

この記事は Retty Advent Calendar 10日目です。 昨日は桑原さん(@kuwahara_yusuke)の TODOは「覚えない！」デキる人ほどやっているTODO管理法「GTD」と、その応用法とは？ でした。 こんにちは！Rettyでエンジニアをしている草山です。 先月はUX向上やSEOのためにフロントエンドの観点で速度改善に取り組んでいました。 簡単にではありますが、そこで得た知見を共有させていただきたいと思います。 調査方法 PageSpeed Insights https://developers.google.com/speed/pagespeed/insights/?hl=ja Googleが提供しているパフォーマンス計測ツールです。 測定した結果をスコア付けしてくれて、改善案も提示してくれるのでとても重宝します。まずはこのツールを使って現状を把握してみました。

AWS Pollyを使ってみた 音声読み上げる人工知能Pollyがリリースされた。普段大量の文章を読まなければならないので、移動中に読めればと考えていたが、このPollyのAPIを使って普段使いできるようにしたいと思い、作った。 仕様 Slackに文章を投稿 Slack BotからAmazon API Gatewayに文章を投げる Amazon API Gatewayを通じて、Lambda(nodejs)経由でPollyで音声処理 Pollyから返って来たBufferの音声ファイルをS3に保存 S3のURLをSlackに投稿 下準備 1. SlackのSlash Commandsを使う まずは、SlackのSlash CommandsをActivateさせて、Tokenを取得。なんのコマンドで呼び出せるようにするか決めておく。例： /emma 2. AWS上にS3のバケットとIAMロールの

目的 IntelliJを複数台の端末に入れていると、キーマップ等を同期したくなります。 この記事ではSetting Repository(GitHub)プラグインを使って同期する方法を共有します。 （基本的には上記GitHubリポジトリのREADMEを読んでそのまま設定するだけです） PyCharm/PhpStorm/RubyMine等のJetBrainsの他製品についても同じように設定を共有できると思います（未確認） 【注】Qiita等で例えばこちらの記事のようにConfiguration pluginを使った同期方法が書いてありますが、現在はDeprecatedのようです。 Setting Repositoryのインストール （製品によっては最初からインストール済の場合もあるようです。ma7ma7pipipiさんよりコメント欄にて教えて頂きました） [Settings] => [Plu

React.jsを使用しているSinatraプロジェクトでPoltergeistを使用したテストを実施した場合に、 自環境では成功するのに Travis CI上で失敗するという事象に出会いました。 Travis上でのエラーログ Capybara::Poltergeist::JavascriptError: One or more errors were raised in the Javascript code on the page. If you don't care about these errors, you can ignore them by setting js_errors: false in your Poltergeist configuration (see documentation for details). TypeError: 'undefined' is

BigQueryのフロントエンド BigQueryを使っていてフロントエンドのアプリケーションは何を使っているのか良く聞かれる。もちろん、BigQueryのwebインターフェイスでクエリを作って、CSVでダウンロードとかも良いと思うのですが、やっぱりちょっと違うなぁと。 どんなものがあるのでしょうか？ BigQueryの公式にはこんなものがありました。 https://cloud.google.com/bigquery/third-party-tools?hl=ja Tableau Googleの中の人も使ってるぐらい良いものです。 私自身も何度か使っているのですが、やっぱり良いです。ただし、複雑なことしたいなぁと思うととんでもなく遅くなったり。 後ほど書きますけど、Viewなんかで回避すれば良いし、ローカル（もしくはサーバ）にキャッシュデータを持っておけばかなり使えます。便利だし、可視化

追記 Re:dashのデータソースとしてGoogle Analyticsが正式に追加されるようです。リリースされた暁には、本記事にあるような面倒な手順を踏む必要はなくなりそう？ re:dashのGoogle Analyticsデータソースを試す 初めに Re:dashはオープンソースで提供されている、ダッシュボードツールです。サーバー構築の手間はかかりますが、超簡単にさまざまなデータソースから、自由にダッシュボードが作れるようになります。 今回は、おなじみGoogle Analyticsの情報を、Re:dashでダッシュボード化する方法を解説します。 追記 twitterを見ていて。 Treasure Dataでは、GAのレポートを突っ込む方法があるようです。 http://blog-jp.treasuredata.com/entry/2016/09/13/163306 Google Bi