Raspberry Pi 3でハマった箇所 その2

exFATはデフォルトで対応していない

NASサーバーとして他端末からファイルアクセスできるようにしたかったため、 余っていたexFATフォーマット済みの、Seagate SSHD 500GBをSATA to USBケーブルで接続しました。
その後、mountを試みるも以下のメッセージが。

$ sudo /dev/sda2 /mnt/sshd1
mount: unknown filesystem type 'exfat

Linuxだと基本的にデフォルトではサポート対象外なんですね。
apt-getでexfat-fuseをインストールして対応しました。

外付けHDDを自動マウントさせる

その後、起動時に自動マウントするために、fstabに設定を書きましたが、reboot後はmountが外れてしまいます。
調べるとこちらの記事が見つかりました。

/etc/fstabのパースがHDD認識と同時またはそれ以前に行われてしまう

とのことで、コメント欄の通り私はcrontabに以下のように設定して、無事自動マウントできるようになりました。

@reboot mount /mnt/sshd1

@rebootなのでOS reboot時だけかと思いきやcron起動時に実行してくれるようです。

Raspberry Pi 3でハマった箇所 その1

先日Raspberry Pi 3を購入しました。
一番の目的は安価なNASサーバーとして活用することなのですが、
軽く調べてみただけでも他に色々試したいことが出てきています。

これじゃあ1機では足りないので、とりあえずマルチブートで運用することにしました。
しかし当然のようにすんなり行くはずもなく、あれこれ調べながらやっています。

BerrybootはFATじゃないと動かない

最初、TranscendのmicroSDXCはSD Formatterを使用したため、exFATでフォーマットされていました。
しかし電源ONにしても画面が映らなかったため、Raspibian単体でやり直すとあっさり起動。
BerrybootのサイトをみるとFAT formattedと指定があったため、 FAT32でフォーマットし直して無事起動できるようになりました。
SD規格外なので若干もやもやしますが...。

Raspberry pi 3の無線は2.4GHzのみ

WiFiで接続しようと思ったら、WiFiリストネットワークに自分のルーター(AtermWG600HP)のSSIDがなぜか出てこない。
Macbook, iPhone, iPadでは全て表示されるのになぜ...と思い、ルーターの設定画面を除くと、2.4GHz通信機能が無効になっていました。 忘れてたのですが、どうせ5GHz帯しか使用しないし、リストに同じようなSSIDが4つも出てくるのが紛らわしいので無効化していたのでした。

マルチブートの場合でも、各OSの固定IPは違うものにした

とりあえずRaspbianとRetropieでマルチブートできるようにしましたが、
サーバーとして利用するので、それぞれのOSでIPは固定化しました。
しかし、設定後2つ目のOSにSSH接続を試した時に以下のような警告がでました。

MacBook-Pro:~ user$ ssh pi@192.168.10.5
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@    WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!     @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY!
Someone could be eavesdropping on you right now (man-in-the-middle attack)!
It is also possible that a host key has just been changed.
The fingerprint for the RSA key sent by the remote host is
2b:cd:cb:1f:5c:c8:bd:88:0f:e1:a5:d0:cf:71:6a:45.
Please contact your system administrator.
Add correct host key in /Users/user/.ssh/known_hosts to get rid of this message.
Offending RSA key in /Users/user/.ssh/known_hosts:13
RSA host key for 192.168.10.5 has changed and you have requested strict checking.
Host key verification failed.

1つ目のOSに接続した際の鍵が残ってるのに、同じIPで別のOSに接続したので鍵が違うと言われたのでしょうか。
この警告無視する設定もあるようですが、固定IPのホストアドレスを一つずらすことにしました。

Electronの勉強会に行ったので感想

参加したのはこちらです。

セキュリティ対策がとにかく大変

開発側がセキュリティに対してそんなにやる気がないということで、 XSS対策ひとつにしてもこんなに大変なのかと思いました。
とにかく、自分のような浅いことしかわからない人は Electronを使うにしろ割り切って用途を限定したほうが(今は)よさそうですね...

社内ツールだったらあり

個人的には、社内のWindowsマシンでちょっとしたお役立ちツール、
本来.NETとかVBSとかbatchで作る系のものを、GUI作りたいしカッコつけてElectronでやろうとしていて、
しかしそれだとクロスプラットフォームな利点を潰してるし結局自己満だなあと思ってました。
でもこの発表を聞いてみると、 むしろ数少ないElectronが使えるケースということがわかったので意外でした。

総じてかなりdisられているのが驚きだったんですが、
僕は少しやる気になれました。

コールバック関数の中でthisを参照

JavaScipt

gist6f69a957f23f034ad03e

forを書くのが嫌で、underscoreの._eachでコールバック関数の中でthisでプロパティの値を取得しようとして失敗したもの。 this.basePathとかやってる部分でundefinedになってしまって、このときは_.eachを諦めてfor構文でやったのですが。

       Setting.prototype.parseFiles = function(jsonFiles) {
        　      var self = this;
            _.each(jsonFiles, function(file) {
                    var propName = file.match(/^.*\\(.*)\.json$/); // ex: one
                        WScript.Echo(Setting.basePath)
                    self[propName[1]] = JSON.parse(includeFile(self.basePath + "\\" + file)); // setting.one
            });
        }

それで、thisを一旦変数に逃がすといけるということを知りました。 基本でした...

JScriptでJSON

JScript

evalは使いたくないので、 結局拡張子を.wsfにして、json2 を読み込むのが楽でした。

<?xml version="1.0" encoding="UTF-8" ?>
<package>
  <job>
    <script language = "JavaScript" src = "lib/json2.js"></script>
    <script language = "JavaScript">
      // 何か
    </script>
  </job>
</package>

エンジニアじゃなくなったのでプログラミングを趣味にしたい

7月中旬から7月末までの2週間, JavaScript勉強会と称して、1対1で主にVue.jsを教えてもらっていました。

失業期間中の短い間でしたが、結果とても有意義な時間を過ごすことができたと思っています。
良かったことは、

  • Git(& Github)がCUIで自然に使えるようになった
  • Vue.jsはまだ初歩段階だけど、公式サイトなどを参照して自分で学習していく流れがつかめるようになった
  • Blog(アウトプット)を書くようになった

といったところです。特に、余暇でもコードに触れるような状態に持って行けたのが、自分にとっては素晴らしい効果になったと考えています。

プログラミングを趣味にしたい

そもそも、趣味とかって、やるぞ！という感じでやるんじゃなくてもっと自然にやるものです。 本職がエンジニア、であってもなくてもTech系Blogなどでアウトプットしてる方たちは、なんか好きでやってるんだなあというのが伝わってきます。

僕はついこの前までIT企業の会社員でしたが、正直こういったことは別段好きという感情もなく、どちらかといえば苦手意識のほうが強かったのです。
そういう所だと(ステレオタイプな言い方ですけど)ナチュラルボーン理系、みたいなやつも入ってくるし、そういった人たちを見ているとやっぱ向いてないなあ等と思っていました。

でも、今回転職が決まって、webとかソフトウェアとはあまり関係ない世界に行くことになりました。
本職では無くなった分プレッシャーもないし、知識の無さに焦らなくても良いし、逆にポジティブな接し方がこれからはできるんじゃないかなと...その第一歩がこの勉強会で踏み出せたような気がします。

実際今回は自分でも意外に楽しくやれたなと感じていて、続けられればこれから一人で学習していくよりもっと早く成長できそうなので、惜しい気持ちもあります。

今後やりたいこと

そこで、今後やりたいことを書いてみましょう。

  • todoじゃなくて別のなにかを作る
    -> 勉強会ではtodomvcと同じようなものを作っていました。 とりあえずネタを思いついたので、(勿論既にネットに同じようなものはたくさんあるものですが...)ちびちび作ろうと思います
  • 他の勉強会に行ってみる
    -> JavaScript系は残念ながら初心者向けのがほとんどないみたいなので、他の言語やフレームワークを触って興味を持てるものがあったら...

勉強会は本当に行かないとダメだなと思ってます。
やはり人と会って、やれる環境を作ってしまった方がモチベーションを保てるだろうと感じます。学生時代一人で勉強なんてできなかったのでなおさらです。

果たして、趣味にすることはできるのでしょうか。
多分、プログラミングを本当に好きになって、純粋に楽しめるようになったらいけるかなと。
まだまだ、自分の中でゲームしたりといった遊びと同じ感覚でやるようになるには時間がかかりそうですが、続けられればいいなと思います。

webpackで画像を読み込む

webpack

前回は画像を扱いましたが、こちらで書いた構成だとエラーになってしまいます。

問題箇所

このCSSの、url指定で読み込んでいる画像でエラーが起きます。 対応するloaderが入っていないと駄目みたいです。

.first-form {
  background: url("../images/freeza-first.jpg");
  width: 400px;
  height: 232px;
}

.second-form {
  background: url("../images/freeza-second.jpg");
  width: 280px;
  height: 300px;
}

.third-form {
  background: url("../images/freeza-third.jpg");
  width: 200px;
  height: 288px;
}

.fourth-form {
  background: url("../images/freeza-fourth.jpg");
  width: 280px;
  height: 460px;
}

その1: url-loaderを使う

jpgを扱う場合、moduleのlordersに下記のように追加すれば利用できます。

  • webpack.config.js
module: {
  loaders: [
      { test: /\.jpg$/, loader: "url-loader?mimetype=image/jpg" }
    ]
  }

無事に画像もエラー無くwebブラウザで表示されますが...

Developper Toolsで確認すると

.first-formの場合、

.first-form {
    background: url(data:image/jpg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAcFBQYFBAcGBQYIBwcIC…J2dcarOm4Pry3onp2eau1hA2HazqJousbZeUP4KBeqEqfSFjgT2NIk2wq1btx55YYzj/K5/9k=);
    width: 400px;
    height: 232px;
}

画像がBASE64エンコードされてしまい、ファイル名がこんな文字列になってしまいます。 data URI schemeというらしいですが、短所も結構あるし、普通のファイルとしても扱いたいところです。

その2: file-loaderを使う

こちらもjpgの例です。

  • webpack.config.js
module: {
  loaders: [
      { test: /\.jpg$/, loader: "file?name=[path][name].[ext]" }
    ]
  }

(file?nameの後の書き方はgithubのExampleにあります)

こうするとwebpackが画像をビルドしてくれますが、プロジェクトのルートディレクトリに画像が出来上がってしまうので、"build"というディレクトリに出力するようにしました。

module: {
  loaders: [
      { test: /\.jpg$/, loader: "file?name=build/[path][name].[ext]" }
    ]
  }

ついでに、 bundle.jsも"build"ディレクトリに出すようにすれば、webpackでビルドされたものがまとまって良い感じになります。

  • webpack.config.js
module.exports = {
  entry: './js/app.js',
  output: {
    path: __dirname,
    filename: 'build/js/bundle.js'
  },
  module: {
    loaders: [
      { test: /\.html$/, loader: 'html?minimize' },
      { test: /\.css$/, loader: "style!css" },
      { test: /\.jpg$/, loader: "file?name=[path][name].[ext]" }
    ]
  }
};