Spica*

プログラミングの話。

ルータ変更記: Aterm WG1200HS -> Buffalo WSR-2533DHP2

経緯

  • Aterm WG1200HSを使っていた
  • 比較的新しい機器、具体的にはPixel 3や、MacBook Pro(2018) with TouchbarでWi-Fiがブチブチ切れる問題が発生していた
  • 「これはあかんなー」みたいな感じ
  • なのでルーターを買い換えた
  • ちなみにWSR-A2533DHP2 っていうのもある。型番にAがついてる。Amazonではこれが人気。
    • WSR-2533DHP2との違いは「バンドステアリングLite」という機能がついているかどうか
    • これは、Wi-Fi SSIDを一つにして、そこにつないでおくと、電波状況に応じて5GHzと2.4GHzを切り替えてくれる機能
    • この機能が切り替わるときに瞬断が発生する可能性があるのではないかと思い、買わなかった
      • 家せまいし必要なさそうっていう理由もあった
    • ちなみにこの機能がない、僕が購入したやつは、価格も3,000円ほど安い

速度

Googleのインターネット速度計測を使用。

  • Aterm WG1200HS
    • #1: download: 49.6, upload: 91.7
    • #2: download: 45.3, upload: 92.1
    • #3: download: 36.1, upload: 91.8
  • Buffalo WSR-2533DHP2
    • #1: download: 81.0, upload: 91.7
    • #2: download: 90.7, upload: 91.6
    • #3: download: 86.9, upload: 91.6

まぁ、発売時期ぜんぜん違うし、価格も倍違うので…って感じはある。

機能的な部分

  • あんまり使い倒さないので、Atermでも十分だった
  • AtermよりもBuffaloのほうが、専門用語みたいなのは少なくて印象は良かった
    • 例えばAtermプロテクション機能とだけ書かれた、Wi-Fi 2.4GHzのみの設定なんか全然なんなのかよくわからなかった
    • ヘルプついてないし
  • マニアックなところでいうとsyslog機能はBuffaloの方にだけあった
    • macのsyslog有効にして、ルータの情報とって障害追求して遊ぶのもアリ?

Hello, Flutter! (各種フレームワーク間比較)

Getting Startedの記事ではありません。各種フレームワーク間のアーキテクチャを元に良し悪しを考えた記事です。

Flutter 1.0 is out!!

Flutterがついに1.0になったようです!

とはいえ、僕はFlutterを追いかけてはいなかったので、「お前が言うな」とか言われそうですが。

僕がFlutterを気になっている理由

僕がFlutterが気になっているのは、クロスプラットフォームアプリ開発ツール、という点だけではありません。それ以上に UIの描画を自前で行う というコンセプトがあるのが僕的に重要な点になっています。(ちなみに僕はあまりTwitterを見たりしていないので、流行りには疎めです)

クロスプラットフォーム開発のフレームワークというのは、今までにもたくさんありました。僕はAndroid/iOSのネイティブアプリ開発者ですが、ionic(当時は2.0でした)やvue.jsといったフレームワークも扱ったことがあります。それゆえに、OSのデザインとしての制約に関しては無視できない部分があり、ずっと"ちゃんと"クロスプラットフォームで良いアプリを作ることのできないむず痒い気持ちを抱えています。

ionicの事例

例えばionic。ionicはCordovaを基礎としたフレームワークで、Cordova上でAngularを動作させることでクロスプラットフォーム開発を行うフレームワークです。各プラットフォームに合わせた美しいコンポーネントが用意されており、少しのHTMLを書くだけで簡単にAndroid/iOSに合わせたデザインが適用できます。そしてLive Reload機能もあるため、ソースコードを変更するとすぐに画面に結果が反映される。まさに高速に開発できるフレームワークです。

僕はこのフレームワークを採用するのを過去に渋ったことがあります。ionicが心配だったのではありません。問題は、Cordovaがベースとなっている点でした。

Cordovaはご存知でしょうか。ネイティブアプリ上にWebViewを一枚表示し、そのWebViewとネイティブアプリ(AndroidだとJava, iOSだとObjective-Cソースコードを書く部分)間の共通インターフェイスを提供することでクロスプラットフォームを実現するフレームワークです。

このアーキテクチャには、決定的に問題のある点が一点ありました。ネイティブAnroidアプリ開発者はおそらくご存知でしょう。Androidは現在フォアグラウンドにあるアプリを快適に動かすために、「アプリをバックグラウンドに移した後、端末のメモリが不足した場合、現在フォアグラウンドにあるアプリ以外のアプリのActivityやプロセスを状況に応じて殺す」という仕組みがあります。これはOSのデザインの一部であり、設定によってなんとかViewを殺さないようにする、といったことは不可能です。

ionicはCordovaの仕組みに加えてAngularをWebView上で動作させるため、大量のメモリを食います。ここで、ionicアプリからIntentで端末にプリインストールされているカメラアプリを起動してみましょう。どうなるでしょうか。カメラはご存知のように大量にメモリを食います。Nexus 5Xのようなメモリの少ない端末や、Pixel 3のように大量のCPU/メモリを使用するカメラアプリの場合は、バックグラウンドプロセスをすぐに殺しにかかるでしょう。そして元のionicアプリに戻ったときには、Angularの動くWebViewは既に殺されており、アプリは最初からになります。当然、WebView上の画面のスタックはクリアされ、それを復元する術はフレームワーク側にはありません(僕の触った時点では少なくともそうだった)。

また、Cordovaには罠が多く、プラグイン制作に関しては多くの人がStackoverflowにお世話になったことでしょう。configがわかりにくく、プラグインのアンインストールに関しては多く人が一度はハマるところと思います。gitignoreがフレームワーク的に意識されていないのも、なにか心の中にひっかかったものを感じ続ける要因です。

また、UIのタッチレスポンスが遅い問題もあります。WebViewなので仕方がないでしょう。

こういった理由より、採用を渋っていました。結局のところ採用はしたのですが、上記の問題は杞憂ではありませんでした。

React Nativeの事例

React Native at Airbnbの記事を覚えているでしょうか。もし見ていなかった場合、ぜひ確認してみて下さい。

ちなみに僕はReactは良いものと思っています。disるつもりは毛頭ありません(ついでに髪の話でもありません!)。WebサイドではReactを少し使った経験があり、とても使いやすかったことを覚えています(React Native自体は使ったことがありません)。伝えたいのはionicと同じく、仕組みの話です。

React NativeはJavaScript Coreをバンドルして動作します(iOSはそうではないようですが)。それを使うことでJavaScriptでロジックを書くことを実現しています。JavaScriptはWebの進化によって多くの便利な仕組み(AltJSやテストツールなど)があり、高速に動作するので、とても良い言語と今でも思っています。

問題はUIの作り方です。React NativeはJavaScriptを経由して書くプラットフォームに存在するViewを利用してUIを描画します。つまり、同じコードでもプラットフォーム独自のUIの制約に縛られてしまうのです。例えば見た目を変えようとしても全く一緒にするには多くのコードを書くことになり、深いことをしようとするとネイティブプラグインを導入せざるを得なくなることもあるでしょう。この問題は、Airbnbの記事にも書いてあります("共通のデザイン言語システム(DLS)"の項目や"ジェスチャー"の項目)。

この問題はどうしても完全に解決はできないでしょう。Webの開発者がネイティブアプリを作るためのフレームワークなのに、結局JavaObjective-Cを覚えなければならなくなることが発生してしまう。これはアーキテクチャの問題です。

Xamarin

Xamarinもアーキテクチャとして、React Nativeと同じ問題を抱えていると考えています。C#よりXamarinの用意したインターフェイスの仕組みを通して、ネイティブのViewを生成して操作します。使用している言語やツールの問題ではありません。

Unity

React NativeやXamarinの問題がUIと言いました。UIを独自に作成する機能を持つ、Unityだったら問題ないのでは、と考えたこともあります。2Dだけでなく3Dも表現できる。表現力ではピカイチです。

しかしこの場合標準のUIコンポーネントが用意されていない、というのが問題です。全く同じ画面をAndroid/iOSで用意してあげる(まさにゲームのような)のであれば良いかもしれません。しかし、各OSを使用しているユーザは、ゲーム以外でその挙動を期待することはおそらく無いでしょう。また、dot-per-dotの美しいUIにしたい場合、viewportの設定など考えることが増えるのではないかという懸念もあります。

Flutter

話を戻します。僕はFlutterはここまでの各種問題をほとんど解決しているのではないかと思っています。 各問題に関して列挙しながら書きます。

  • Cordovaの懸念
    • Activityの復帰の問題
      • この記事を書きながら調べてみましたが、これは解決していませんでしたGoogle製なのに、このissueがfixになっていないのは残念でした。
      • ただし問題ではないかも、と思っています。このコメントで依頼されているように、常に今の状態を永続化しておけば、問題にはならないかもしれません。この問題は、僕は真っ先に調べるつもりです。
    • プラグインについて
      • Cordovaのプラグイン管理の仕組みは対応は半ば無理やりのようなものでした。まだ確認していませんが、問題がないことを祈っています。
    • タッチの遅さ
      • こちらも確認していませんが、そんな致命的な問題を残すとは考えにくいので、心配していません。
  • React Native, Xamarinの懸念
    • FlutterにはSkiaが入っており、UIを独自に描画する仕組みになっています。最悪、Widgetsを自分で作る場合でも、複数解像度を意識だけしておけば、DartだけできれいなUIが作れることでしょう。それぞれのOS向けに何かをしなければならない、といったことは起きないと確信しています。
  • Unity
    • FlutterにはUIコンポーネントが存在しているので、最初から独自にUIを作り上げる必要はありません。Material/Cupertinoが自動で振り分けられるという認識でいます。

Flutterについても、どうしても懸念として残ってしまう問題もあります。ionic以外に共通していますが、VMを内包しているのでフレームワーク側のバグでクラッシュしてしまうことがありえます。その場合、アプリ制作者である僕らは、issueに助けを求めるしか方法がありません。自分で直すのは、多くの場合人や時間的な都合で困難でしょう。

まとめ

いろいろ書きましたが、実はほとんどアーキテクチャしか意識しておらず、コードを書いていません。なので、面倒な部分も実は多いかもしれないな、と感じているところもあります。

もっとちゃんとFlutterのDocumentationを読んだ上で、業務でのこのフレームワークの使用を慎重に判断していこうと考えています!

モカエキスプレスを購入したので調べた内容のメモ

ふと、カリタのコーヒーミルを1年以上使ったなと思い出したので、また別の抽出方法を試したくて、モカエキスプレスを買った。買ってまだ数日だけど、調べたことメモしておく

名前について

モカエキスプレスという名前は商品名のようで、ビアレッティの公式ページにmoka expressの記述がある。ただ、一般名称は少し違って、英語だと モカポットになっている。日本だと、マキネッタ(macchinetta)という名前が一般名称の様子なんだけど、ググっててもこの名前使われたり使われなかったりしてて、いまいち統一されてない感じがする。海外サイト当たってみたけど、少なくともあんまり海外でよく使われている言葉ではなさそう。一応macchinetta - Wiktionaryとか伊英辞書には coffee maker と出てくるので、通じないものではないのかも?

関係ないけど、

  • オーストラリアメルボルンには、Macchinettaというお店もある様子。
  • 最近NTTが、Webアプリを作りやすくするMacchinettaフレームワークというのを出したらしく、語源探るのさらにややこしくなってる感はある…。多分日本向けの堅牢なフレームワークなので、大きな古き良き会社向けのものっていう雰囲気。

仕組み

http://www.bialetti.com/images/mokaillustration.jpg

ビアレッティの商品ページのMore Detailsに、上記の分解画像がある。簡単に言うと、⑧バスケット(Funnel)にコーヒーを入れ、⑨タンク(Heating Vessel)に水を入れた後、組み立てて直火で加熱すると、④上部(Coffee Collector)にコーヒーが入るようになってる。日本語名は説明書のものなので、半分公式名だと思ってはいる…ものの、発売元がストリックス デザインというところになってて、そこの説明書のようなのでよく分からない。(分かりやすいけど「上部」って…。)

https://upload.wikimedia.org/wikipedia/commons/d/dd/Moka_Animation.gif

Coffee Collectorに集まる仕組み自体は、Moka pot - Wikipediaにある上記の画像がめっちゃ分かりやすいw

細かい作り方についてメモ

なんか初めて買う時に知っておくことがあったので、それに関していろいろメモしておく。個人の感想です。

購入すべきもの

僕は下記を購入した。

ビアレッティのモカエキスプレスは、1, 3, 6, 9, 12カップがある。各カップ毎のml換算は、ビアレッティの商品ページのMore Detailsにある(3カップだと200ml)。僕は夫婦で飲むので、3カップにした。結果的には正解だったと思う。

気をつけないといけないのは、モカエキスプレスは直火式なので、IHには対応していない。説明書には 使える熱源は、ガスコンロ・電気コンロ・ハロゲンヒーター とある。オール電化だと買ってからガスバーナー買う必要が出てしまうかも。

あと、アルミかステンレスかは意見が分かれる様子だけど、アルミを買った。Amazonに「アルミは健康への害がある」というレビューが上がってたけど、安全の閾値の話で賛否両論のようで、一概には危険とは言えない様子(害ある派問題ない派)。個人的には害がある、というのは気にしすぎかなと。医学的に有害と認められた例がほぼ無いのでは。

ガスコンロの場合、ガスバーナープレートはほぼ必須。モカエキスプレス意外と直径が小さくて、ガスコンロには乗らない。お湯沸かすようの所でも乗らない。僕は東彼セラミックスのガスバーナープレートを買ったけど、どれでも良いかと思ってる。

安い コーヒー豆をリストアップしている理由は、最初モカエキスプレスを買った後は、説明書によると「コーヒーを入れて捨てる」工程を3回程度繰り返さなければならないため。説明書では「慣らし作業」としか書かれていないけど、これはどうやら、容器の金属臭を防ぐためらしい(モカエキスプレス - Wikipediaより)。良いコーヒーは高いので、慣らしで良いコーヒーを使いたくないなあ、というのが本音。ただ、余っても同じ豆でドリップとの違いを試したかったのもある。

コーヒーミルは、豆の粗さを調整するために使う。モカエキスプレスでは、基本的に極細挽きを使用する様子(UCCのサイトより)。ただ、極細挽きだと目詰りする(こことかこことか、他にも。)という情報があり、やらないほうが良いのか?

作り方

www.youtube.com

  • タンクに水を入れる
    • 安全弁(Valve)の下まで入れる。モカエキスプレスのタンク自体にも線が書かれているので、どこまで入れるべきかは分かる
  • コーヒーをバスケットに入れる
    • すりきり手前が基本
    • 押さえつけないほうが良いらしい?(使い方の項目)
    • 豆は細挽き。ただ、上記動画、極細挽きにも見えるんだけどどうなん?
    • 僕はコーヒーミルで、一番締めた状態から3目盛りくらいゆるくした状態で挽いているけど、いろいろ試すつもり
  • タンクと上部の間がネジのようになっているので、しっかりと締める
    • 一度締めすぎるのもアレかなと思ってちょっと緩めにしたらコーヒー一滴漏れてきて焦った
    • パッキン(Gasket)は消耗するので、半年目処に交換、とのこと(説明書より)
  • 火を付けて、コーヒーが上部に上がってくるまで待つ
    • コーヒー上がってきたらすぐ火は止めること
    • 大体3-4分くらい。時間は調べて、タイマーかけるようにしたら良いかも
    • 火の強さは弱。火は強くないほうがおいしい気がする
    • 一度中火程度でやったら、持ちての付け根の部分が若干溶けた…。
  • 終わったらコップに入れる
    • 中細挽きで入れた時、結構下に粉が溜まることがあったが、細挽きにしたらあまりわからなくなった。理由はまだ不明。これから調べる

いろいろ調べるの楽しい。美味しい淹れ方もっと調べたいな。

(2018-03-26: 誤字脱字及び推敲)

WebGLメモ

wgld.org | WebGL |を見ながら勉強中

  • OpenGLは手前に行くほどZの値はプラスになる
  • 座標変換は三種類ある
    • モデル変換
      • 位置
      • 拡大縮小
      • 回転
    • ビュー変換
      • カメラの位置
      • カメラの向き
    • プロジェクション変換
      • ディスプレイ縦横比率
      • 視野角
  • 固定機能パイプラインはない
    • 座標変換を行ってくれる仕組みのこと
  • シェーダは座標変換を記述するための仕組み
  • シェーダは2種類
    • 頂点シェーダ
    • フラグメントシェーダ(ピクセルシェーダ)
  • 行列(Matrix)
    • 正方行列
      • "行"と"列"が同じ要素数の行列
    • 掛ける順序によって結果が変わる
  • ポリゴン
    • 三点を結んでできた三角形のこと

仕様

Firefox Quantumで、「新しいタブ」の背景に好きな画像を使う

Chromeは仕事、趣味や調べ物のときはFirefox Quantum使うようにしてるんだけど、about:homeがシンプルで寂しいので壁紙付けたかった。ので調べた。

https://github.com/Aris-t2/CustomCSSforFx

…という素晴らしいプロジェクトがあるので、これのDocumentationとサンプルを読んで書く感じ。

  • about:support を開く
  • プロファイルフォルダーの行のFinderに表示を押す
  • プロファイルフォルダの中に入る
  • そのフォルダの中に chrome というフォルダを作り、その下を下記のような階層にする
.
├── css
│   └── aboutnewtab
│       └── appearance.css
├── img
│   └── mywallpaper.jpg
└── userContent.css
  • userContent.css
@import url(./css/aboutnewtab/appearance.css);
  • appearance.css
@-moz-document url(about:newtab), url(about:home) {
    body {
        background: url('../../img/mywallpaper.jpg') center/cover no-repeat fixed !important;
    }
}

f:id:esperia:20171216234025p:plain

さみしくない!ほくほく。

GitbucketをUbuntuに入れる

自分用リポジトリが欲しかったので。

環境

  • Ubuntu 16.04.3 LTS (Xenial Xerus) on AWS
  • nginx version: nginx/1.10.3 (Ubuntu)
$ cat /etc/os-release
NAME="Ubuntu"
VERSION="16.04.3 LTS (Xenial Xerus)"
(省略)

手順

## javaインストール
$ sudo apt install openjdk-8-jre-headless
$ java -version
openjdk version "1.8.0_151"
OpenJDK Runtime Environment (build 1.8.0_151-8u151-b12-0ubuntu0.16.04.2-b12)
OpenJDK 64-Bit Server VM (build 25.151-b12, mixed mode)

## 普通に手順進めていく
$ sudo groupadd -g 555 gitbucket
$ sudo useradd \
  -g gitbucket --no-user-group \
  --home-dir /opt/gitbucket --no-create-home \
  --shell /usr/sbin/nologin \
  --system --uid 555 gitbucket

## 勝手にディレクトリできないので作って、ファイルのダウンロードもしておく
$ sudo mkdir -p /opt/gitbucket
$ sudo curl -o /opt/gitbucket/gitbucket.war -L https://github.com/gitbucket/gitbucket/releases/download/4.19.2/gitbucket.war
$ sudo chown -R gitbucket:gitbucket /opt/gitbucket

## ファイルを作る。内容は後述
$ sudo vim /etc/systemd/system/gitbucket.service

## 起動
$ sudo chown root:root /etc/systemd/system/gitbucket.service
$ sudo chmod 644 /etc/systemd/system/gitbucket.service
$ sudo systemctl daemon-reload
$ sudo systemctl start gitbucket.service
$ sudo systemctl enable gitbucket.service

## 起動確認
$ curl localhost:8100

gitbucket.serviceこれを少し編集して使った。公式repoの中はちゃんと探してない。そこにもあるんだろうか

[Unit]
Description=Git hosting service

[Service]
User=gitbucket
ExecStart=/usr/bin/java -jar /opt/gitbucket/gitbucket.war --port=8100 --host=127.0.0.1 --gitbucket.home=/opt/gitbucket

[Install]
WantedBy=multi-user.target

起動確認までできたら、次は外から見えるようにReverse Proxyの設定をする

Reverse Proxy

$ sudo vim /etc/nginx/sites-available/gitbucket
$ sudo ln -s /etc/nginx/sites-available/gitbucket /etc/nginx/sites-enabled/
$ sudo systemctl restart nginx

Reverse Proxyの設定、僕はほとんど同じにしました。 server_nameproxy_pass のポートを変えただけ。

ついでにDBをMySQL使うように設定しておく

$ mysql -uroot -p
> create database gitbucket;
> grant all privileges on `gitbucket`.* to gitbucket@localhost identified by 'testPassword';
> flush privileges; 
> quit

$ sudo vim /opt/gitbucket/database.conf
db {
  url = "jdbc:mysql://localhost/gitbucket?useUnicode=true&characterEncoding=utf8"
  user = "gitbucket"
  password = "testPassword"
}

$ sudo systemctl restart gitbucket.service

余談

ちなみに僕の環境はt2.nanoなので、よくメモリ足りなくなるため、スワップファイルも作ってます。途中でメモリ足りない系エラーでるならこれやると吉かもしれない

AWS Amazon Linux スワップファイル作成によりSwap領域のサイズを増やす - Qiita

DTI使ってみたけど、やめてAWSにしてみようと思う

要件

  • node, php with nginx, java が使いたい

なぜ

検索したらヒットしたけど、php-fpm等がインストールできないらしい。 僕の場合 yum install openssl-devel したら発生。つまり openssl-devel パッケージを入れることが出来ないので、phpコンパイルが通らない

Error: systemd conflicts with initscripts-9.49.17-1.el7_0.1.x86_64
 You could try using --skip-broken to work around the problem
 You could try running: rpm -Va --nofiles --nodigest

頑張ってもいいけど、時間がもったいない気がするのでやめよかなと思っている

以下メモ

契約の流れ

  • 登録は簡単、住所氏名クレジットカード番号を入れるとすぐに利用できた
  • 支払いは、月の途中だと月末までの日数払いになるっぽい。僕の場合は2017/11/23に契約したので134円だった

解約の流れ

プランの解約と退会がそれぞれある。両方やっておいたほうがいい 退会は少し面倒。たらい回しにされるのでページを探すのにはちょっと苦労した。退会はメールフォームからの問い合わせになる。

解約できたらまた書く