月別: 2016年3月

Tumblr でプログラミングに関する面白い投稿があったので紹介！

/ shundroid

tumblrに プログラミングに関するジョークがありました。
すごく「たしかに」「あるある」と思えたので、紹介します。

1つ目:

https://nandof.tumblr.com/post/140329227580/sometimes-you-just-gotta-drop-this

sudo rm -rf /* というコマンドについてです。
絵を見ると大体想像できると思いますが、絶対にやってはいけないコマンドです。
意味は、

  • sudo ・・ 管理者権限で動かす
  • rm ・・削除するコマンド
  • -rf の r ・・ディレクトリを再帰的に削除（ディレクトリの中のファイル・ディレクトリも削除）する
  • -rf の f ・・確認せずに削除
  • /* ・・ / （ルートディレクトリ）を消す。コメントアウトじゃないよ！

です。
つまり、「管理者権限でルートディレクトリの中身を再帰的に確認せず消しちゃう」という
超やってはいけない（けどやりたくなる）コマンドです。

絵だとコマンドの意味がわかりやすくて、勉強にもなります。

コアラがポイッと簡単に灯油を投げて、めっちゃおっきいことが起こっているのも、
「簡単に危険なコマンドが打てる」ということに当てはめられるし、
火がついた後、コアラの顔が逆光で薄暗くなるのも妙にリアルです。

2つ目:

https://nandof.tumblr.com/post/140539367115/when-debugging-code

コードをデバッグするときによくあること。
まさに絵のとおり、
バグを必死に探していると見つからないけれど、
別のバグを探しているとさっき探していたバグが見つかることがよくあります。

動物たちの表情が一定なところや、
意志でなく、叩かれたことで動いている様子が機械っぽいですよね。

3つ目:

https://nandof.tumblr.com/post/124963799770/entering-the-bios

BIOS を起動するときの感じです。
ぼくのPCの場合、BIOS を起動するとき、
電源ボタンを押してから Windows の表示が出るまで、ファンクションキー（何番か忘れた）を連打します。
この時の気持ちが、まさにこの Gif アニメの通りでした。

他にも、#programming joke とかで調べると出てきます。
以上、tumblr からでしたー！

【Rx.js】画像を非同期に読み込むサンプルコード

/ shundroid

こんにちはー。

非同期の処理をいい感じに使える js のライブラリないかなーと探していたら、
Rx.js というのを見つけたので、それを使ったサンプル？を紹介します。

Rx.js とは？

.NET 向けの Reactive Extensions を js 用に移植したもの。
ぼくは、最初 .NET の方を使っていて、
「それの js 版があったらいいな～」と思っていたらピンポイントであったという感じですー。

コードの概要

では、今回書いてみるコードの概要を紹介します。

  1. ３つの画像が配列になっている
  2. それらを非同期で読むが、１つ読み終わったら次を読むという条件。
  3. １つ読み終わった後と全部読み終わった後にコールバックする

全部いっぺんに非同期で読めばいいと思うかもしれませんが、
画像がウエーブみたいになって読み込まれていくようにしたかったんです。

【Before】Rx.js を使わない場合のコード

var images = ["1.png", "2.png", "3.png"];
function loadImages(oneByOne, finished) {
  var index = 0;
  var loadImage = (name) => {
    var elem = document.createElement("image");
    elem.src = name;
    elem.onload = function() {
      oneByOne(index);
      if (index >= images.length - 1) {
        finished();
      } else {
        loadImage(images[++index]);
      }
    }
  };
  loadImage(images[index]);
}
function main() {
  loadImages((index) => {
    console.log(index + "個目を読み込みました");
  }, () => {
    console.log("読み込み完了");
  });
}

このコードを、Rx.js を使って、シンプルにしてみます。

【After】Rx.js の降臨

// 読み込むとき、ES6 ( + browserify) だと便利
import Rx from "rx"; // ES6 modules

var images = ["1.png", "2.png", "3.png"];
function loadImages() {
  return Rx.Observable.create(loadImagesObservable);
}
function loadImagesObservable(observer) {
  var index = 0;
  var loadImage = (name) => {
    var elem = document.createElement("image");
    elem.src = name;
    elem.onload = function() {
      observer.onNext(index);
      if (index >= images.length - 1) {
        observer.onCompleted();
      } else {
        loadImage(images[++index]);
      }
    }
  };
  loadImage(images[index]);
  return function() { };
}
function main() {
  var subscription = loadImages().subscribe((index) => {
    console.log(index + "個目を読み込みました");
  }, err => {
    console.log("Observe Error: " + err);
  }, () => {
    console.log("読み込み完了");
  });
}
  • １つ読み終わった時 -> observer.onNext
  • 全部読み終わった時 -> observer.onCompleted

に当てはめました。

Rx.js を使うメリット

キャンセル時の処理を追加できる

上のコードでは書いていませんが、
subscription.dispose でキャンセルでき、
loadImagesObservable の返り値の関数で、dispose された時の処理を追加できるので、
そこで読み込みの処理を停止するように書けば、簡単にできます！

キャンセル時の処理を書いた例： Gist

filter ができる

loadImages().subscribe(...) を、loadImages().filter(...).subscribe(...) にすれば、
フィルターを通すことも簡単にできます。

フィルターを使った例として、「5回に1回、○個目を読み込みましたと表示」するようにしてみます。

// function main() 内を変更
function main() {
  var subscription = loadImages().filter(index => index % 5 === 0).subscribe((index) => {
    console.log(index + "個目を読み込みました");
  }, err => {
    console.log("Observe Error: " + err);
  }, () => {
    console.log("読み込み完了");
  });
}

フィルターを利用した例の全コード： Gist

参考

 株式会社LIG 
「RxJS」初心者入門 - JavaScriptの非同期処理の常識を変えるライブラリ | 株式会社LIG
http://liginc.co.jp/web/js/151272
こんにちは、王です。 みなさん、「RxJS」をご存知でしょうか？ すごく大雑把に言うと、RxJSとは非同期処理（マウスクリックなどのイベントベースの処理も含める）をす...

追記

2016-04-07 : Rx.js を使ったメリットを中心とするように記事の内容を全面改訂。

Visual Studio Code の言語を変えたい時【Insiders も書くよ】

/ shundroid

追記！！ 2016/03/31
Version 0.10.13 から、言語の変更が可能となりました。
下の手順2 の、引数付きで起動（英語）にした状態で、
Ctrl + Shift + P から「Configure Language」、
locale.json が開くので、そこで言語を変更できます。
参考 : https://github.com/Microsoft/vscode-docs/blob/vnext/release-notes/latest.md#localization

こんにちはー。

ついに、VSCode が、日本語に対応したっぽいです！！
リリースノートを見ると、v0.10.10 で、There is support for localization and accessibility. と書いてあります。

しかし、今回はあえて英語に戻したいと思います。
同時に、日本語・フランス語にする方法も書きます。
Insiders の場合の方法も書くよ☆

英語に戻したい理由

  • 日本語だと、Ctrl+Shift+P で呼び出せる、コマンドパレットの項目も日本語で打ちにくい
  • 今まで頑張って覚えた機能はすべて英語 -> 水の泡・・
  • 英語の勉強がしたい

手順1: VSCode のパスを見つける

ぱぱっとやり方をいうと、引数を付けて起動するのですが、
アプリがどこにあるのかわからないと出来無いので、探しましょう。

インストール先は、デフォルトで 64bit だと、C:\Program Files (x86)、
32 bit だと、C:\Program Files かな？

Visual Studio Code（通常版） の場合:

アイコンが青ければこちらです。

<インストール先>\Microsoft VS Code\Code.exe
僕の場合: C:\Program Files (x86)\Microsoft VS Code\Code.exe

Visual Studio Code – Insiders の場合：

アイコンが緑のほうです。

<インストール先>\Microsoft VS Code Insiders\Code - Insiders.exe
僕の場合: C:\Program Files (x86)\Microsoft VS Code Insiders\Code - Insiders.exe

手順2: 引数付きで起動する

まず、英語に戻してみます。
コマンドプロンプトとか Cygwin とかで、次のようにして起動します。

"<手順1 VSCodeのパス>" --locale=en

僕の場合:

"C:\Program Files (x86)\Microsoft VS Code Insiders\Code - Insiders.exe" --locale=en

vscode-changed-lang
英語で起動したぞ！

オプションは、次のような形式です。

--locale=言語

言語は、
– 日本語: ja
– フランス語: fr

という感じで指定ができます！

手順3: ショートカットを作る

普段から bash で起動している人はいいですが、
そうでない人にはこのままだと使いにくいので、ショートカットを作ってみましょう。
先ほど 手順1 で確認した、
Code.exe (Code – Insiders.exe) が入っているフォルダをエクスプローラーで開きます。

右クリックで、「ショートカットの作成」。
普通に開くと、エクスプローラーの権限の問題で、デスクトップにショートカットが作成されます。

作成されたショートカットを右クリックで、「プロパティ」。
「リンク先」を、先ほど 手順2 で打ったパスと引数にします。
(僕の場合: "C:\Program Files (x86)\Microsoft VS Code Insiders\Code - Insiders.exe" --locale=en)

vscode-shortcut-lang-option

OK を押してウィンドウを閉じ、ショートカットを開くと、先ほどのようになるはずです。

手順4: Open With Code で開いた時も、設定した言語にする

今の状態だと、ショートカットで開いた時のみ、言語が反映されます。
今度は、ファイルを右クリック -> Open With Code ( – Insiders ) で開いた時の言語も変更しましょう。

レジストリの変更になります。
変更は自己責任で行ってください。よろしくおねがいします。

Win + R で、「regedit」と入力し、レジストリ エディターを開きます。
※ 途中、UAC が表示される場合があります。

Visual Studio Code (通常版) の場合

アイコンが青ければこちらです。

左のビューで、「HKEY_CLASSES_ROOT\*\shell\VSCode\command」とたどります。
(既定) のデータを修正します。(“%1” の前に、locale オプションを設定します)

"<インストール先>\Microsoft VS Code Insiders\Code - Insiders.exe" --locale=en "%1"

"%1" を忘れずに！
(僕の場合: "C:\Program Files (x86)\Microsoft VS Code\Code.exe" --locale=en "%1")

これで、ファイルを右クリックした時の設定は終わりました。

次に、フォルダを右クリックした時の設定です。
左のビューで、「HKEY_CLASSES_ROOT\Directory\shell\VSCode\command」とたどります。
(既定) のデータを修正します。(“%V” の前に、locale オプションを設定します)

"<インストール先>\Microsoft VS Code\Code.exe" --locale=en "%V"

“%V“です！間違えないように！

これで OK です！

Visual Studio Code – Insiders の場合

アイコンが緑のほうです。

左のビューで、「HKEY_CLASSES_ROOT\*\shell\VSCodeInsiders\command」とたどります。
(既定) のデータを修正します。(“%1” の前に、locale オプションを設定します)

"<インストール先>\Microsoft VS Code Insiders\Code - Insiders.exe" --locale=en "%1"

"%1" を忘れずに！
(僕の場合: "C:\Program Files (x86)\Microsoft VS Code Insiders\Code - Insiders.exe" --locale=en "%1")

これで、ファイルを右クリックした時の設定は終わりました。

次に、フォルダを右クリックした時の設定です。
左のビューで、「HKEY_CLASSES_ROOT\Directory\shell\VSCodeInsiders\command」とたどります。
(既定) のデータを修正します。(“%V” の前に、locale オプションを設定します)

"<インストール先>\Microsoft VS Code Insiders\Code - Insiders.exe" --locale=en "%V"

“%V“です！間違えないように！

これで OK です！

参考

 ＠IT 
Windowsのエクスプローラーの右クリックメニューを編集して整理する
http://www.atmarkit.co.jp/ait/articles/0511/19/news016.html
ソフトウェアをインストールすると、エクスプローラの右クリック・メニューに勝手に項目が追加登録されることがある。レジストリの編集によって、右クリック・メニュー...

レジストリのパス

Sphero.js で、指定した時間だけ orb.roll をしたい

/ shundroid

しばらく投稿してなくてすみません。

Cities Skylines にハマっていました。
え？ 動かないんじゃないのだって？
VAIO の設定で、CPU を静かさ優先 -> パフォーマンス優先にしたら、なんとか動きました。
こんなに違うんだ・・
その代わり、パソコンがあったかい～☆し、めっちゃうなっています。
めっちゃ重いけど、めっちゃ面白いです。

さて、今回は、Sphero を Node.js から動かせるというすぐれもの、
Sphero.js に関する Tips ですー。
内容はタイトルの通り！

コード

var sphero = require("sphero");
var orb = sphero("xxx");

orb.connect(function() {
  function a() {
    orb.color("blue");
    orb.roll(100, 0);
    setTimeout(b, 100);
  }
  function b() {
    orb.color("red");
    orb.roll(0, 0);
    setTimeout(c, 100);
  }
  function c() {
    orb.color("green");
    orb.roll(100, 180);
    setTimeout(d, 100);
  }
  function d() {
    orb.color("yellow");
    orb.roll(0, 180);
    setTimeout(a, 100);
  }
  orb.color("black");
  setTimeout(a, 1000);
});

コードの解説

0.1 秒毎に、orb.roll を動かす or 止めると、
色を変えています。

最初は正常に動くのですが、だんだん遅れて、
最終的には止まってしまいました。

これでは、正確に 0.1 秒動くことができなくなってしまいます。

解決法

orb.roll で Sphero を動かす前に orb.ping をして、
通信ができるかどうか確認するとできました。

止まる前は orb.ping はしません。
してしまうと、0.1 秒後に止まると出来無いからです。

止まるときに通信できてなくて、
遅れてしまったらもうしょうがないですが・・

ぼくが試した感じでは、
そういうトラブルはなかったです。

Cities Skylines やりたいけど重すぎるよ・・

/ shundroid

Cities Skylines、めっちゃ面白いです！！
↓の記事でも紹介しました。

 asterisk.js 
Cities: Skylines がセールだったから買ってみた
http://polaris-bear.lolipop.jp/shunroom/451
やっとクリスマスプレゼントが買えました！！Cities: Skylines です。Steam で、旧正月セールが行われています。Cities: Skylinesも、60%Off で売られていたので、買い...

しかし、人口が 7000 人（少なっ！）になって、
もう使いものにならないくらい重くなってしまいました。

cs-my-city
スクリーンショット撮るの苦労した・・
（街は、俺塚 orz さんの動画を参考に作っています）

うぅぅ・・。
多分これぐらいの時から面白くなっていくと思うのに・・。

メモリは 12GB、CPU は、Core i5-3340M 2.70GHz、
GPU は、Intel HD Graphics 4000 （うそでしょ）でした。

benchmark-gpu
ここのサイトのベンチマークで、
推奨である nVIDIA GeForce GTX 660 (2GB) とも、大違いです。

そりゃー動かないわな・・って感じのスペックですが、
Simcity は、ぬるぬる動いたんですよ・・

↑の記事で紹介した、設定をすべて最小にするですが、
それやっていると、街を作っている気分になれません・・。

マップが広いから仕方がないか・・

そろそろデスクトップパソコンがほしいです。
ノートパソコンのGPUを変えるという方法もありますが、
結構お高く、持ち運ぶので、
落としちゃったとき、悲しいだろうな・・というのもあります。

暗号化はなぜ大切なのか

/ shundroid

この前、Mozilla Japanの記事で、
暗号化の大切さがわかるビデオが紹介されましたので、
共有したいと思います。

最近、Apple に対して、米国政府が、
セキュリティ保護をぬけ出すバックドアを作るなどと命令したことで、
暗号化の話題が広がっているように感じます。

データが暗号化されずに送信される場合、
他の人に知られたくない個人情報や、
サプライズも、すべて第三者にわかってしまいます。

暗号化の重要さが、改めてわかりました。

ログイン情報を入力するときなどは、
プロトコルが「https」になっていて、鍵のアイコンが付いているか、
確認してから送信するようにしましょう。