2016-03-10

SSH keyを作成してGithubに登録する

Github

メモがてら残しておく。

新しくSSH keyを作成する

$ ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

保存パス

Enter a file in which to save the key (/Users/you/.ssh/id_rsa): [Press enter]

パスフレーズの設定(任意)

Enter passphrase (empty for no passphrase): [Type a passphrase]
Enter same passphrase again: [Type passphrase again]

SSH keyをssh-agentに追加

$ eval "$(ssh-agent -s)"
Agent pid 59566
$ ssh-add ~/.ssh/id_rsa

SSH keyをGithubに登録する

クリップボードにコピー

$ pbcopy < ~/.ssh/id_rsa.pub

Githubのパーソナル設定からSSH keyを登録する。まずページ右上のSettingsをクリックする。

keyフィールドにペースト

クリックすると、最後にGithubのパスワードが聞かれるので入力すると、完了。

SSH接続をテストする

$ ssh -T git@github.com

2016-03-09

Babelを使うとアロー関数内のthisがundefinedになる

フレームワーク開発環境 javascript

ややこしい問題に直面したので、メモしておく。

問題

次のように、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).each(() => {
  console.log(this); /* Window {} */
});

$(arr).each(function() {
  console.log(this); /* Number {} */
});

$(arr).each((idx, value) => {
  console.log(value); /* 1 */
});

アロー関数のthisはwindowオブジェクトを指し、無名関数では要素を指す。

これをBabelに通すと、自動的に"use strict"モードになり、スクリプトを実行した結果は次のように変わる。

/* "use strict" */
var arr = [1];

$(arr).each(() => {
  console.log(this); /* undefined */
})

$(arr).each(function() {
  console.log(this); /* 1 */
})

$(arr).each((idx, value) => {
  console.log(value); /* 1 */
});

"use strict"モードが適用され、非"use strict"モードのアロー関数ではwindowオブジェクトにbindされていたthisが、undefinedになっている。

each関数内でのthisは要素を指すが、アロー関数内のthisはそのコンテキストのthisに等しい。つまり、this === windowオブジェクトが成り立つ。加えて、"use strict"モードにおいては、このようなthisはundefinedになるため、今回のような問題が発生する。

まとめ

まとめると、jQueryのコールバック関数で注意すべき点としては:

無名関数内では、thisは要素を指す。
アロー関数では、thisはそのコンテキストのthisに等しい。

これに加えて、Babelを用いると、"use strict"モードが適用され、今回のように、windowオブジェクトを指していたアロー関数内のthisはundefinedになる。

解決策

この結果を踏まえると、今回の解決策としては、

そもそもアロー関数をやめる
要素の値である引数を使う

/* アロー関数をやめる */
$("item > title").each(function() {
  let title = $(this).text();
  console.log(title);
});

/* 要素の値である引数を使う */
/* 第一引数がインデックス、第二引数が要素の値 */
$("item > title").each((idx, value) => {
  let title = $(value).text();
  console.log(title);
});

多分あっているとは思うが、理解がふわふわしている。

2016-03-07

Atomエディターからはてなブログに投稿できるようになりました。

エディタ coffeescript

Atomエディターからはてなブログに投稿できるようになりました

はてなブログからのお知らせ風に。

以前から開発していたAtomパッケージ、hatena-blog-entry-postを更新しました。

ダウンロード数がほぼないので継続して開発するモチベーションはありませんが、今回はなんとか自分が楽したい気持ちから更新しました。

今回追加した大きな特徴は次の2つ

カテゴリーエディター
画像アップローダー

カテゴリーエディター

カテゴリーを追加できるようにしました。また、カテゴリーアイテムをクリックすることで、アイテムの最後尾をリストから削除することができます。

画像アップローダー

Hatena IDとAPI Keyを使って、はてなフォトライフへ画像をアップロード、エディターにURLを挿入します。

フォーム右上のクラウドアイコンをクリックしてダイアログを開いて、画像を選択すれば、フォトライフへアップロードできます。

次に向けて

気が向いたら下記の機能を改善・追加する。

SelectListViewをカテゴリーエディターに使用したかったが、うまく動作しなかった。今はTextEditorViewで対応。
ブログのエントリーリストを作って、投稿済みのエントリーも編集できるように。
ダウンロード数が少ない。

2016-03-05

文系大学生がプログラミングを始めて4ヶ月経って思うこと

月記

ライブラリ作ったりエディター作ったり、インプットよりアウトプットのほうが多い一ヶ月間だった。Reactしかビューライブラリを学習していないので、実際のところReactの何が良いのか実感していない。時間があれば他のビューライブラリもやっておこう。

ElectronとReact-Reduxではてなブログに投稿できるマークダウンエディタ作った

フレームワーク

Electron Markdown Editor powered by React-Redux

いまのところ特徴としてはこんな感じ

はてなブログエントリーの投稿

はてなブログエントリーリストの取得

Evernoteとの連携とか画像アップロード機能とかいろいろやりたい。あとキャッチーなネーミングがほしい。

コンポーネントが複雑であればあるほどReduxの真の力がより発揮される。楽しい

ちなみにMITライセンス

electron-react-markdown-editor

2016-02-19

Electronから簡単にGithub OAuth認証するライブラリ作った

フレームワーク github

github.com

前に作ったelectron-oauth-twitterの応用｡このライブラリを使えば簡単にGithubのアクセストークンを取得できます｡

uraway.hatenablog.com

インストール

npm install electron-oauth-github

使い方

アプリを登録
Client ID と Client Secretを取得します
Client ID, Client Secret とscopesを設定します｡ exampleを参考にしてください｡

var dialog = require('electron').dialog;

var OauthGithub = require('electron-oauth-github');

var github = new OauthGithub({
  id: '****',
  secret: '****',
  scopes: ['user:email', 'notifications'],
});

github.startRequest(function(access_token, err) {
  if (err) {
    console.error(err);
  }

  dialog.showErrorBox('Satus', 'access_token: ' + access_token);
});

これでアクセストークンが取得できます｡あとはGithub APIを見ながらアクセストークンをつけてリクエストを送るだけ｡

2016-02-16

Electronから簡単にTwitter OAuth認証するためのライブラリ作った

electron-authentication-hatenaをベースにElectronのライブラリを作成しました｡

このライブラリを使えば､　Electronアプリから簡単にOAuth認証することができます｡

github.com

インストール

npm install electron-oauth-twitter

使い方

アプリを登録し､　Consumer Key (API Key) と Consumer Secret (API Secret)を取得します｡
アプリセッティング内のCallback URLをなんでもいいので設定しておきます｡　Callback URLを設定しないとPIN Basedになります｡

次の例のように使用すると､　アクセストークンが取得できます｡

var dialog = require('electron').dialog;

var OauthTwitter = require('electron-oauth-twitter');

var twitter = new OauthTwitter({
  key: '****',
  secret: '****',
});

twitter.startRequest().then(function(result) {
  var accessToken = result.oauth_access_token;
  var accessTokenSecret = result.oauth_access_token_secret;
  dialog.showErrorBox('Status', 'Token: ' + accessToken + '\nSecret: ' + accessTokenSecret);
}).catch(function(error) {
  console.error(error, error.stack);
});