はてなブックマーク

VSCodeからはてなブログに投稿できる拡張作りました 作りました marketplace.visualstudio.com 気に入ったらスターください github.com 前に作ったAtom版はこっち github.com 下準備 使用には以下の3つが必要です Hatena ID Blog ID API Key Blog IDとAPI Keyははてなブログ詳細設定のページから確認できます。Blog IDはルートエンドポイントに次のように埋め込まれてます。API Keyは公開しないでくださいね https://blog.hatena.ne.jp/{はてなID}/{ブログID}/atom プラグインダウンロード後に、Code > Preferences > Settings からこれらを設定します。 エントリの投稿 コマンドパレットからHatenablogger: Post or Upda

参考: https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch2.md https://anond.hatelabo.jp/20070622101313 https://developer.mozilla.org/ja/docs/Web/JavaScript/Closures https://developer.mozilla.org/ja/docs/Web/JavaScript/Memory_Managements https://ja.wikipedia.org/wiki/%E3%82%AC%E3%83%99%E3%83%BC%E3%82%B8%E3%82%B3%E3%83%AC%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3 レキシカルスコープ スコープ

この記事のタイトルの意味を理解できるように、プログラマーに必要不可欠な、gitとそれを用いたソースコード管理サービスgithubについてまとめます。 Gitは分散型バージョン管理システム バージョン管理システムには集中型と分散型がありますが、gitは後者のシステムを採用しています。 集中型では、一つのネットワーク上のrepository（貯蔵庫・倉庫）を共有し、そこにソースコードを保管します。チームメンバーそれぞれがファイルをコピーし、手元で編集、commitすることでソースコードを更新していきます。 それに対し、分散型では、ネットワーク上のremote repositoryを自分のマシンにlocal repositoryとして丸々コピー（clone）します。一度cloneしていれば、ネットワークに繋がっていなくてもlocal repository内でソースコードを更新することができます。

自分が使っていたところだけを簡単に。詳しくはhttps://webpack.js.org/guides/migrating 以下、webpack.config.jsの変更点: resolve.extenstions 空の文字列は必要なくなったので削除する。ちなみにデフォルトでは.js、.jsonがresolveされている。 // v1 resolve: { extensions: ["", ".js", ".json"], }, // v2 resolve: { extensions: [".js", ".json"], }, 拡張子を指定することで./fooがjsファイルならばrequire("./foo")が可能になる。 module.loadersとmodule.rules module.loaderのシンタックスはまだサポートされているが、module.rulesにかえるほうが望ま

yarn https://yarnpkg.com/ FacebookとExponent, Google, Tildeとの共同チームによって生まれた新しいパッケージマネージャー Yarn pulls packages from registry.yarnpkg.com, which allows them to run experiments with the Yarn client. This is a proxy that pulls packages from the official npm registry, much like npmjs.cf. http://blog.npmjs.org/post/151660845210/hello-yarn 新しいレジストリも作るのかと一瞬思ったけど、どうやらそうではなく、npmレジストリを利用するための新しいクライアントのようだ。よかった

参考 https://git-lfs.github.com/ https://github.com/github/git-lfs Git Large File Storage (Git LFS) とは、大容量ファイルを扱うためのGit拡張。オーディオ・ビデオ・データセット・グラフィクスといったファイルをリモートサーバーに格納し、テクストポインタとしてGitで管理することができる。 環境 OS X El Capitan Version 10.11.6 git version 2.10.0 インストール $ brew install git-lfs $ git lfs install 使ってみる 新規プロジェクトの場合 まずはバイナリファイルを用意し、これを管理することにする: $ touch README.md $ ls > large.bin git-lfsで管理するファイルのパターンを設

word2vec 2014年から2015年辺りに流行った、単語をベクトル化して評価する手法。 有名なのは、 king – man + woman = queen 学習データとなるコーパスを準備する 無料かつ簡単に手に入るWikipediaのdumpファイルから持ってきます。 https://dumps.wikimedia.org/jawiki/latest/ の jawiki-latest-pages-articles.xml.bz2 をダウンロードします。 xmlファイルのままでは使えないので、 これをwp2txtを使ってplain.txtに変換します: $ gem install wp2txt $ wp2txt jawiki-latest-pages-articles.xml.bz2 ファイルが大量に作成されるので、次のように連結します: $ cat jawiki-latest-pag

2017/04/26 curl部分に間違いがあったので修正、ついでにログインの必要な動作を追記 目標 Rails v5.0.0 から追加されたapiオプションを使い、ユーザーの作成と認証機能を実装したベーシックな Rails API を作る rails new まずはプロジェクトを作成します $ rails new devise-api --api --skip-bundle Gemfile に次の gem を追加し, bundle install gem 'devise' gem 'active_model_serializers' devise devise を立ち上げます $ rails generate devise:install create config/initializers/devise.rb create config/locales/devise.en.yml Us

http://www.html5rocks.com/en/tutorials/cors/#disqus_thread Author Monsur Hossain ほとんどこちらの要約 導入 aaaa.comにはbbbb.comがアクセスしたいデータがあるとしよう。このクロスドメインリクエストは従来same-origin -policy によって禁止されている。解決法としては次の3つ。 JSONP カスタムプロキシ Cross-Origin Resource Sharing (CORS) JSONPはセキュリティ面に問題があり、カスタムプロキシはセットアップと保守が面倒。ここでは、W3Cの仕様であるCORSを選択する。 CROSリクエストを行うことで、レスポンスに特別なヘッダが付与され、クロスドメインのデータにアクセスすることができるようになる。 CORSリクエストの作成 以下JavaScr

問題と原因 Railsのサーバーやコンソール実行時次のような警告が出る場合: $ rails server Array values in the parameter are deprecated. Please use a String or nil. An Array was passed in from bin/rails:3:in `load' . . . この場合原因はbin/springの11行目にある: Gem.paths = { "GEM_PATH" => [Bundler.bundle_path.to_s, *Gem.path].uniq } 解決策 bin/springのこの11行目を次のように修正するか: Gem.paths = { 'GEM_PATH' => [Bundler.bundle_path.to_s, *Gem.path].uniq.join(File::

ややこしい問題に直面したので、メモしておく。 問題 次のように、jQueryでコールバック関数にアロー関数を用いたスクリプトを記述する。 $("item > title").each(() => { let title = $(this).text(); console.log(title); }); このES6の構文ををBabelでES5へトランスパイルすると... $("item > title").each(function(idx) { var title = $(undefined).text(); console.log(title); }); アロー関数の内のthisがundefinedになってしまう。 問題は、どうやらトランスパイル前後の、each関数でのthisの扱いの違いによるもののようだ。 以下、シンプルな例を考えてみる。 var arr = [1]; $(arr).

node.jsを使って、webサーバーを立てるまで方法をメモしておきます。 参考： MEANスタックで始めるWebアプリ開発入門（2）：いまさら聞けないNode.jsの基礎知識とnpm、Gulpのインストール (1/2) - ＠IT Node.js入門 (全16回) - プログラミングならドットインストール いまいちポートやらhttpモジュールやらわからないので後々勉強しておきます。 [Node.js] Webサーバ＋アプリ構築が速すぎる件 〜 JSおくのほそ道 #004 - Qiita 変更が楽なので、別ファイルにport,hostを設定しましょう。 //server.js var http = require('http'); //httpモジュールのインポート var server = http.createServer(); var settings = require('./se

uraway.hatenablog.com 前に作ったTodoListをアップデートしてみました。 主な変更はチェック機能と削除機能の追加です。 入力されたvalueをTodoListのデータの一つであるtextで取得できず苦労しました。 最初からデータのtextも、valueと名付けていればこんな苦労はなかった 次は何を追加しようか。 See the Pen todo list with ES6 by uraway (@uraway) on CodePen. コードを見ればわかるように、データが保存できるようにはコーディングしていないので、このまま実装はできません。 React.jsのチュートリアルにそこらへんも書いてあったと思うので、また勉強しておきます。

Processing のコーディングを快適にするために、Atom を使ってみる。 Processing とは ビジュアルアートを学ぶためのオープンソースのプログラミング言語であり、開発環境。Java でビルドされており、その構文は Java をシンプルにしたもの。 エディタも備わっているが、より快適にコーディングするために、Atom に Processing 用のパッケージを導入してみる。 インストールするパッケージ一覧 processing processing-autocomplete processing-language これらのパッケージをインストールする。 $ apm install processing processing-autocomplete processing-language Processing の導入 まずは、こちらから Processing の開発環境をダ

復活＆＆再開！ 病名は詳しくは知らないですが、先週の水曜日、木曜日あたりに感染性の胃腸炎にかかってしまい、４日間ダウンしていました。 睡眠不足で免疫力が低下していたところに来たみたいです。 もう完全に調子が戻ったので、壊れない程度に勉強を再開していきます。 一ヶ月と少し経って 色々と手を出しては詰まりつつ、少しずつは進めているかな？ 将来的には… 短期的には、次はReact-native！ 長期的にはどこかの大学院でコンピューターサイエンスを学びたい。 でも今はネットの勉強で十分いっぱいいっぱい。 足りないもの 時間・・・こんなにも足りないか、と思うほど。勉強しても勉強してもしたりない、時間がない。全てが新しく目に触れるものなので、詳しくやっていると時間がいくらあっても終わらない。ブラックボックスすぎても気持ち悪いから、あっちこっちのウェブサイトを参照する。それこそ、ネットの海に無限に知識

uraway.hatenablog.com 毎日記録を書くのは僕には無理なので、１ヶ月毎に学習内容をまとめてみることにします。全くプログラミングのできない文系でも、この期間にこれだけのことができるようになると参考になればと思います。 この１ヶ月で学んだこと・成果物 git オープンソフトウェアライセンス Python React 開発環境 Atom Package The Fuck マークダウン記法 CoffeeScript TOEICを300点あげるには 次の１ヶ月でやること この１ヶ月で学んだこと・成果物 git gitでの開発、コントリビューションについての方法の基礎段階。これを理解していないとOSS開発はできませんでした。 uraway.hatenablog.com オープンソフトウェアライセンス コントリビューションするとき注意すべきライセンスについて。重要な３つのライセンスだけ

React Hot Loader + Browsersync React Hot Loader を使えば、エディタを保存した時点で、React コンポーネントの変更が検知され、ブラウザの更新が自動で行われます。さらに、React Hot Loader はHotModuleReplacementPlugin(HMR) を使用しているため、更新時にページの全読み込みが発生せず、state が保持されたまま React コンポーネントの変更した箇所のみが部分更新されるため、いちいち手動でブラウザをリロードする手間が省けることに加え、チェック毎に state を変える必要がなくなります。 通常はデベロップメントサーバーに webpack-dev-server を使うことで、このホットリローディング機能を使うことができるのですが、今回は Browsersync を使って、クロスブラウジングとさらなる

まずはコマンドの紹介。 atom -d dev modeでAtomが起動し、~/.atom/dev/packages/にあるパッケージが優先的に読み込まれるので、同名のパッケージがある時に便利。 apm link your-package パッケージを/.atom/packages/に入れる。普通にAtomを起動すれば、そのパッケージが使える状態になっているはず。-dオプションをつけると/.atom/dev/packages/入れることができる。 これを踏まえて、すでにインストール済みのパッケージ(/.atom/packages/にあるパッケージ)を開発したいなら、フォーク、クローン後に apm link your-developing-package -d atom -d　your-developing-package で良さそう。 もちろんyour-developing-package

Webpack + React + ES6 Webpack + React + ES6の最小構成を考えてみる。 この記事は明石家サンタを見ながら書かれました。 (注: 2016/9/25 内容を大幅に改定、WebpackやReactの最新版に対応) 関連した過去記事 Webpack入門編 uraway.hatenablog.com Gulp + Browserifyを用いた環境ビルド uraway.hatenablog.com React Tutorial uraway.hatenablog.com プロジェクトセットアップ $ npm init インストール webpackとreactをまずはインストール。 dev serverのグローバルインストールにはsudoコマンドが必要かも。 $ npm install --save react react-dom $ npm install -

フロントエンド開発入門編 Constructing the Object Model | Web Fundamentals - Google Developers こちらのサイトをまとめてみました。リンク先の画像、ソースコードを使用しています。 オブジェクトモデルの構築 ウェブページをレンダリング（描画）する前に、ブラウザはDOMとCSSOMの構築を行います。ではそのDOM、CSSOMとはなんでしょうか？ Contents Document Object Model (DOM) CSS Object Model (CSSOM) TL;DR Bytes → characters → tokens → nodes → object model. HTMLマークアップはDocument Object Model (DOM)に、CSSマークアップはCSS Object Model (CSSOM)に

Actions Actionsはアプリからstoreにデータを送る情報のペイロード。storeに対する唯一のソースだ。 新しいtodo itemを追加することを表すactionの例を示す。 const ADD_TODO = 'ADD_TODO' { type: ADD_TODO, text: 'Build my first Redux app' } actionsはプレーンなJavaScriptオブジェクトであり、必ずtypeプロパティを持つ。typeは基本的に文字列の定数で定義される。アプリが大規模になれば、別のモジュールに入れて管理すると良い。 import { ADD_TODO, REMOVE_TODO } from '../actionTypes' 完了したtodoにチェックをつけるactionを追加する。配列にtodoを格納しているので、indexで特定のtodoを参照する。 {

Redux/ˈriːdʌks/ 以下全訳ではなく、要約です。自分なりにReduxについて分かりやすい言葉でまとめておきます。適当な日本語訳がない場合や、日本語に訳すとわかりにくくなると判断した語はそのまま使っています。誤訳・分かりにくいところがありましたらコメントでフィードバックをください。 Motivation Three Principles Single Source Of Truth (SSOT)) State is read-only Changes are made with pure functions Prior Art Ecosystem Tutorials and Articles Motivation JavaScriptのシングルページアプリケーションではサーバーレスポンスやキャッシュしたデータ、あるいはサーバーにまだ渡していないローカルに作られたデータそれぞれのs

ライセンス 2012年のものですが、興味深い記事を見つけました。 GitHub needs to take open source seriously | InfoWorld GitHubに存在する全プロジェクトのうち、半数はライセンスの定義がなされていない、ということです。 このことがどういった問題を引き起こすのか。記事には次のように書かれています。 You don't have to include a copyright statement for your creative work to be under copyright. In any country that's a signatory to the Berne Convention, copyright -- or stronger -- is the default as soon as something is cr

Mecabで形態素解析し、マルコフ連鎖を使って文章を要約するJavascriptプログラムを組んでみました。ロジックはこちらがわかりやすかったです。コードはJS+Node.jsによるWebクローラー/ネットエージェント開発テクニック を参考にしました。 では実際に動かしてみましょう。以下のニュースのテクストを要約します。 ノキア大変身、世界で攻勢 携帯端末から通信インフラへ （朝日新聞デジタル） - Yahoo!ニュース 軽減税率 何をもめているのか(2015年11月29日(日)掲載) - Yahoo!ニュース 朝食に菓子パン「ＯＫ」 まず毎日食べる習慣を 名古屋 （朝日新聞デジタル） - Yahoo!ニュース エリクソンは今月、米通信機器大手と覚書を結ぶなど先手を打っていることが肝要。 そもそも軽減税率（時事通信）対象範囲を生鮮食品」なら年２３２５％前後となり、スウェーデンのエリクソンな