Reactをes6で使う場合のbindの問題 - Qiitaes6でReact.Componentを作成した場合 イベントハンドラでthisがundefinedになる es5のReact.createClassを使った場合は、 イベントハンドラが自動でbindされるので大丈夫だった es6 save(e){ this.props // undefined になる } render (){ return ( <button onClick={this.save} />保存</button> ); }
onMeasureとonLayoutについて理解する - Qiita
androidで厄介なレイアウト回り、onMeasureとonLayoutを理解し、オーバーライドするとより理想のレイアウトに近づけます。 結構挙動が難しいので、長くなってしまいますがこれらの概要です。 （※おおざっぱな流れで細かい部分は違いますが、イメージはつかめると思います） そもそもこの2つは？ AndroidではView生成時や、Viewの内容が更新される（TextView#setText()等)で、 View自体の再レイアウトが必要なときに２つが呼び出されます。 以下のようなイメージです。 親ViewのonMeasureが呼び出される 親Viewが子Viewのmeasureを呼び、幅高さを計測させる (2)の情報をもとに、親Viewが自分自身の幅高さを設定する 親ViewのonLayoutが呼び出される 親Viewが子Viewのlayoutを呼び、子Viewの場所を確定させる こ
AbemaTV の番組表リニューアルに伴うパフォーマンス改善 - Qiita
以前の番組表 ↓↓↓ AbemaTV 新番組表 大きく変わったところ チャンネルが横スクロールですべて見れるようになった サイドバーにチャンネル一覧ができた 日付切り替えがセレクトボックスからカレンダー表示になった etc. 今まではチャンネルが 5ch 毎に区切られていたので、わざわざページを切り替えて見ないといけなかったのを、横スクロールですべてのチャンネルが一覧で見られるようになりました。 さらにチャンネル毎の番組表にもアクセスしやすくなり、日付の切り替えもしやすくなったかと思います。 このリリースによって、ユーザービリティが少しでも向上していれば幸いです。 しかし、便利になった反面、このリリースに至るまでに、パフォーマンス面で様々なところで問題になりました。 今回は実際にリニューアル中に課題となった箇所と解決方法の一部を紹介します。 AbemaTV 以外であまり参考にならないかもし
AndroidStudioで覚えておくべきデバッグTIPS - Qiita
前口上 AndroidStudioのデバッガは非常に高機能でちゃんと使いこなせば人生が捗ります。 教わらないと意外に知らない機能もあると思うので紹介したいと思います。 基本 ブレークポイントはる 行番号の辺りをポチッと押すとその行にブレークポイントはれます。基本ですね。 デバッガを実行中のプロセスにアタッチする 虫マークでビルドしなおさなくても、その2つ右隣の アイコンをクリックすると既に実行中（デバッグ実行じゃなくて普通のRunでよい）のプロセスにアタッチできます。 アタッチ可能なデバイスを選択します。 デバイスが2つ表示されていますが下の方には当該アプリを入れてないので選択できません。 なので予めアタッチしたいデバイスで当該アプリをRunしておいてください。 止まる あとは普通にアプリを動かすとブレークポイントはったところで止まります。 ブレークポイントで止まったらAndroidStu
SSR無しでReactアプリをOGPとかに対応させる (自力prerendering編) - Qiita
個人的にはServer side renderingはアーキテクチャ的に好きじゃないけどOpen Graph Protocolとかツイッターカードとかには対応したいなってことで、試みその1です。 追記 2017/6/3 - Netlify編を書きました。 2017/6/9 - CSRのもう1つの問題である初期ロードが遅い問題に対応するためにCode-Splittingを導入する記事を書きました。 2017/7/23 - Lambda@Edge編を書きました。 Prerenderとは Prerenderはその名の通り事前にレンダリングして静的ファイルにすることです。静的ファイルになればWebサーバとかS3とかに置いて配信できるのでCDNの恩恵を受けたりOGPの対応ができたりします。PrerenderはPrerender.ioみたいなサービスを使うのがベターな気がしますが、今回はとりあえず自前
SEO嫌いにお送りするSEO策。これでもうSEOについてしばらく考えなくて良いぜ！！ - Qiita
SEO好きですか？私は嫌いです。そんな事に取り組むよりも仕組みやコンテンツの改善に取り組みたいです。今回はそんなSEO嫌いにお送りする、SEO対策集です。やってられないSEOは１日で終わらせてもっと生産的な仕事に集中しましょう！ まずは結論から 下記をテンプレートにしていただければ良いです。google検索表示もfacebook表示も上手くいきます。twittercardの表示だけは公式サイト（日本語）より申請がいるのでそれだけしておきましょう。 <title>Qiita - プログラマの技術情報共有サービス</title> <meta content="Qiita - XXX" name="title"> <meta content="ブログ記事詳細. 120字以内を心がけよう。その中でも最初の４０字は大事。" name="description"> <meta content='キーワ
[Rails] ActiveSupport::Concern の存在理由 - Qiita
Railsにおいて共通した処理を切り出すために ActiveSupport::Concern がよく使われています。 しかし、Rubyには元から mix-in という処理を切り出す機能があります。 では、ActiveSupport::Concern の存在理由は何でしょうか。 mix-inの複雑な記述を省略できる Rubyの mix-in は通常以下のようなルールで記述します 切り出した機能を module として作成 共通メソッドを module 内に記述 クラスメソッドや組み込み先クラスの内部処理を module に入れたい場合は特殊なメソッドを使う必要がある ActiveSupport::Concern はこの3番目にある 特殊なメソッド の記述を簡単にしてくれます。 具体的にConcernあり/なし の例を見てみましょう。 （具体例コードは ActiveSupport::Conce
![[Rails] ActiveSupport::Concern の存在理由 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/1fcb797541f4585115618bdf39d65c5a41be1ab5/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCUmFpbHMlNUQlMjBBY3RpdmVTdXBwb3J0JTNBJTNBQ29uY2VybiUyMCVFMyU4MSVBRSVFNSVBRCU5OCVFNSU5QyVBOCVFNyU5MCU4NiVFNyU5NCVCMSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9MTI3YzljNDQ1Mjc1MWY4NDU3OGVkZWI0NmRiNDBjMzU%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBjYXN0YW5lYWkmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTBiMmRjNjcxMzFiZWRiODA1ZjY0YzU5MWFhODMyOWM5%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3De02fc7c40d8d1b67ad20bcc6df161862)
超捗る！AtomでRubyを書く前にいれておいたほうがいいパッケージ5選 + α - Qiita
autocomplete-rubyで設定されているRsenseのパスはデフォルトで~/.gem/ruby/2.3.0/bin/rsenseとなっています。 このパスが正しくないとautocomplete-rubyが正しく動作せず、以下のようにError starting rsenseというエラーが表示されます。 正しく動作しない場合はgem environmentを実行し、GEM PATHSのパスを設定ファイルに書きます。 もしくはwhich rsenseを実行するとrsenseのパスがわかります。 rsenseのインストールはgem install rsenseで行います。 例えば自分の場合は/Users/nishina/.rbenv/versions/2.3.0/bin/rsenseでした。 2.文法チェックをしてくれる linter-rubocop インストール方法 まずはlinte
【古い記事】Babelにおける import / export - Qiita
2016-01-31追記 この記事を最初に書いた頃は他に何も情報がありませんでしたが、今ではよりだいぶわかりやすい資料が出揃ってきました。しっかりとしたimport/exportの仕様をもっと知りたい場合は下記を参照することを推奨します https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import http://www.slideshare.net/teppeis/effective-es6 http://uehaj.hatenablog.com/entry/2015/11/07/001848 2015/12/05追記 コメント欄より Babel v6 から Babel 公式の transform である transform-es2015-modules-commonjs を使った場合 ES
CORSまとめ - Qiita
今更ですが、CORS (Cross-Origin Resource Sharing)を色々試していたら、思っていた以上に色々パターンがあることに気づいたので、改めてその扱い方についてまとめてみました。 そもそも 現在のWebブラウザでは、あるWebサイトが持つ情報が別の悪意あるWebサイトに悪用されるのを防ぐために、Same-Origin Policy(日本語では同一生成元ポリシー)が適用されます。 例えば、あるWebサイト https://guiltysite.com をブラウザで表示している時に、このWebページからXMLHttpRequest(以下、XHR)やFetch APIで別のWebサイト https://innocentsite.net からHTTP(S)でデータを読み込もうとすると、エラーになる、というわけです。 しかし、アクセス元が悪意あるWebサイトならともかく、データ
ディープラーニングを用いたエロ画像の収集と自動化 - Qiita
はじめに エロ画像は最高です。 エロ画像さえあれば、誰でも自由にエッチなことができます。たとえ彼女がいないブサメンであっても、一人で性的に興奮することができます。そこに確かな満足を覚えて、幸せに浸ることができます。どんな嗜好も思いのままです。 故に我々人類にとって、エロ画像を集めることは、フンコロガシが糞を転がすのと同じように、種としての習性と称しても過言ではない行いなのではないかと思います。 しかしながら、我々は霊長類の長たる生き物です。かれこれ数万年に渡って同じように糞を転がし続けているフンコロガシと同じではいけません。より効率的に、より意欲的にエロ画像を収集してこその人類です。 ただ、そうは言ってもエロ画像の収集は非常に大変です。様々なサイトを巡り、十分に吟味した上で、フィッティングのあった品々を、確たるスキームに合わせて収集、構造化してゆく必要があるのです。日によって必要な一枚が異
Reactを使うとなぜjQueryが要らなくなるのか - Qiita
はじめに React（通称 React.js1）を全く知らない、あるいは幾つか記事を見たけどなんなのかピンと来ていない、という人のために書いています。 「jQuery くらいしか知らない」くらいの人に具体的に雰囲気を知ってもらうのが目的であり、すでにやる気がある人向けのチュートリアルではありません。やる気が出れば日本語版ドキュメントを読んで手を動かせばあっという間なので、そこまでの興味が出ることを目標にしています。 以降では ES2015 (ES6) の文法（アロー関数とか）を使っています。この部分が怪しい人は先にアロー関数と const 文だけでも知ってから先に進んでください。 以下の説明中、このアイコンで表すのは（2023 年現在から見た）『昔話』です。新しく自分のコードを書く際には本来知らなくていいことですが、古い記事を見たときに混同しないための参考情報として書いてあります。この記事
Vue.jsを使った大規模開発に必要なもの - Qiita
初めに 正直JS界隈のエコシステムは難しいです。わからないことが目白押しです。 今までVue.jsをブラウザ上でなんのエコシステムも使わずに使ってきましたが、 規模が大きくなるとしんどくなるのは明らかなので Vue.jsガイド：大規模アプリケーションの構築を参考にwebpackを使ったりnpmを使って、 それっぽい環境を作って一からコードを書いてみました。 （編注：上記リンクはv1.0当時のものです。v2.0のガイドは単一ファイルコンポーネント、プロダクション環境への配信のヒント、ルーティング、状態管理、単体テスト、サーバサイドレンダリングなどをご覧ください。） 前提 Vue.jsガイド：大規模アプリケーションの構築の指示に従い構築するだけですが、この時点で以下の様な選択肢がある模様です。 プリプロセッサ？の違い Webpack(こっちだけ触ります) Browserify ルーティング オ
AtomのVue.js関係プラグインまとめ - Qiita
AtomのVue.js関係のプラグインをまとめてみました。 language-vue-component vue用のシンタックスハイライトが追加される https://atom.io/packages/language-vue-component vue-autocomplete vue componet用の入力の自動補完 https://atom.io/packages/vue-autocomplete vue-snippets vue用のスニペットが追加される https://atom.io/packages/vue-snippets vue-hyperclick vue componetから定義元へジャンプできる ＊hyperclickとjs-hyperclickとlanguage-vue-componentがインストールされている必要がある https://atom.io/pack
ElectronでVue.jsを始める - Qiita
今回は、EletronをVue.jsでどうやって使うか、セットアップをするかを記事に書いていきたいと思います。 このアドベントカレンダーの23日目の、@nakajmgさんと内容が少し被ってしまいそうで申し訳ない気持ちでこの記事を書かせていただきます！ 最新のやり方 2017年度版の記事を、 @1ntegrale9 さんが書いてくださったので是非ご覧ください！ 2017年度版 electron-vueで始めるVue.js 前提 Node.jsが入っていることを前提にかいています！ インストール まずは、npmから vue-cli をインストールします。インストール後、 vue コマンドが使えれば成功です。 vue-cliは、Vue.jsの公式のCLIでいい感じのテンプレートを使用してプロジェクトを始めることができます。 プロジェクトの作成 今回は electron-vue（日本語ドキュメント
米googleの研究者が開発したWord2Vecで自然言語処理(独自データ) - Qiita
「Word2Vec」は、米グーグルの研究者であるトマス・ミコロフ氏らが提案した手法であり、いくつかの問題について従来のアルゴリズムよりも飛躍的な精度向上を可能にした自然言語処理の手法。 Word2Vecは、その名前の表す通り、単語をベクトル化して表現するする定量化手法である。例えば日本人が日常的に使う語彙数は数万から数十万といわれるが、Word2Vecでは各単語を200次元くらいの空間内におけるベクトルとして表現する。 その結果、今まで分からなかったり精度を向上するのが難しかった単語同士の類似度や、単語間での加算・減算などができるようになり、単語の「意味」を捉えられるようになった。 というわけで、かなり興味深いないようなので、早速実践してみることにします。 1.環境構築 subversionを使ってWord2Vecのソースコードをcheckoutする。 mkdir ~/word2vec_t
とりあえずLINE BOT APIでオウムを作ってみた - Qiita
LINEBOT API公開記念でただ同じ事を返すだけのボットを作ってみた。 アカウントや設定とかは、 https://developers.line.me から適当にやってください。 まず最初にハマるところは、Callback URLです。どうやらポート番号も必要なので、https://example.com:443/callbackなどのように443を指定してください。 LINE_CHANNEL_ID, LINE_CHANNEL_SECRET, LINE_CHANNEL_MIDは適当な物を指定して下記を実行すると「オウム返しBot」の出来上がり。 APIを呼ぶにはWhitelistにIPを登録する必要があるので、Herokuなどで動かす事はできません。 【追記】 LINE BOT をとりあえずタダで Heroku で動かすを見ると、Fixieっていうアドオンを使えばHerokuでも行ける
CRI Atom Craftで音声データを作成する - Qiita
このエントリは、「ADX2 LE」のサウンドオーサリングツール「CRI Atom Craft」を使って、初期設定からシンプルな音声データを作成するまでを解説したものです。 UnityやCocos2d-xなどへのランタイム側の組み込みについては、別途の資料をご確認ください。 cocos2d-x + ADX2でインタラクティブミュージックに挑戦する（前編) ADX2 LEの使い方 for Unity(さくっと導入する手順) ：作成中 「ADX2 LE」に関する最新情報は下記ブログも合わせてごらん下さい。 えるいー便り 「ADX2 LE」について 「ADX2 LE」は、ＣＲＩ・ミドルウェアが配布しているゲーム・アプリ開発向け無償サウンドミドルウェアです。 個人のUnityやCocos2d-xを使ったスマートフォンアプリ開発者と、PCゲーム開発者向けに配布されています。 独自のサウンド圧縮コーデッ
非同期や並列処理にも役立つRxJavaの使い方 - Qiita
なぜRxJava? RxJavaは様々な特性を併せ持ったライブラリですが、簡単にまとめると以下のような機能に分類されます。 List処理の抽象化・ストリーム化 Optional Future/Promise Data Binding Event Bus Android開発でRxJavaをチームに導入した話 Java 8ではStream APIやOptionalが導入されていますが、Androidや業務要件などそのAPIを使えない環境も存在します。 また、非同期や並列などそもそもJavaで扱いにくい処理を、統一されたインターフェイスで簡潔に記述できるなどのメリットも多く、その基本的な機能を試してみたので紹介します。 なお、ここに記載する内容はRxJavaの使い方が中心で、RxJava自体の概念やFRPなどについては、他にも多くの方々紹介してくださっていますので、そちらをご覧いただければと思い
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UniRxと戯れる #4 WWWでmp3ファイルの読み込み完了を監視する - Qiita
