れみゅーぶろぐ

某(元)高専生が多彩なジャンルにわたって書くブログ。非常に真面目なブログであると自負しております(要出典)。Twitter:@_remew_

svgのviewBoxの指定を勘違いしてた

本文

svgというベクタ画像形式のファイルは、HTMLに直接埋め込むことができます。

<!doctype html>
<html>
  <head><title>svg example</title></head>

  <body>
    <!-- svgで日本国旗(正方形版)を描画する -->
    <svg width="100" height="100" viewBox="0 0 100 100">
      <rect x="0" y="0" width="100" height="100" fill="white"/>
      <circle cx="50" cy="50" r="25" fill="red"/>
    </svg>
  </body>
</html>

svgタグにwidth height viewBoxというアトリビュートを指定しています。

widthheightはそのまんま表示する幅と高さなのですが、viewBoxに関しては認識を間違っていました。

viewBox="a b c d"は以下のような意味を持ちます

  • 表示領域の左上の座標は(a, b)
  • 表示領域の右下の座標は(a + c, b + d)

つまり、viewBox="top-left-x top-left-y width height"というわけなのですが、勘違いしてviewBox="top-left-x top-left-y bottom-right-x bottom-right-y"だと思っていました。 その結果、次のようなsvgを書いて「表示されない〜😭」と30分ほどわめいていました。

<!doctype html>
<html>
  <head><title>svg example</title></head>

  <body>
    <!-- 中央から右下方向に縦横50の正方形を描画するつもり -->
    <!-- しかし、表示されている画像の右下の座標は(0, 0)なので表示されない😭 -->
    <svg width="100" height="100" viewBox="-100 -100 100 100">
      <rect x="0" y="0" width="50" height="50" fill="red"/>
    </svg>
  </body>
</html>

viewBox="-100 -100 200 200"にしたらちゃんと表示されました😂😂😂

最近ちゃんとドキュメント読め案件が多いのでつらい

参考URL

viewBox - SVG | MDN

node-devを用いてVirtualBox上のNodeアプリを自動再起動する方法

Qiitaにも書いてます

はじめに&結論

node-devというツールがあります。

これを使えば、Node.js製のアプリのソースコードに変更があった際に自動再起動してくれる優れものです。Express.jsKoa.jsを使ったAPIサーバー開発時に有用なツールです。 まぁ他にもpm2とかnodemonとかあるっぽいですが、とりあえずまずはこれを試してみようと思ったわけです。

簡単な使い方としては次のような感じです。

yarn add -D node-dev # ローカルにインストール
npx node-dev index.js # これ以降、ファイルを編集すると自動再起動する

このツールをVirtualBox上で動いているNode.js製サーバーに対して使って、ホスト側で編集をする!という開発スタイルを取ってみようかと思ったら、なんと自動再起動してくれないではありませんか。

ググったら、GitHubで次のようなIssueが見つかりました。

Using node-dev in a shared folder in a virtualbox guest #87

ははーんなるほどね、VirtualBoxがファイルの更新イベントを発火してくれないわけね、なるほど(多分)。

下の方でpollingがどうのって話をしているので、リポジトリのトップのREADMEを表示してpollで検索したら解決策が見つかりました。

--pollオプションをつければVirtualBox上でも自動再起動ができるようです。 2つ注意しないといけないのは、実行するファイル名より前に--pollオプションをつけないといけないというところと、--pollオプションはCPUを食うようです。

npx node-dev index.js --poll # NG
npx node-dev --poll index.js # OK

以上です。

console.log('ISUCONに参加して予選敗退しました')

はじめに

10月22日にISUCON7に「console.log」というチーム名で参加しました。 チームのメンバーは

の2名でした

ちなみにISUCONというのは、詳しくはこちらを見ていただきたいのですが、運営が用意したWebアプリケーションの速度改善を行う大会です。

Iikanjini Speed Up CONtest(いいかんじにスピードアップコンテスト)

略して「ISUCON」です。

本当は10月21日参加の予定だったのですが、運営側のトラブルで次の日に移動したいチームはしても良いということになったので、台風やら友人とのご飯の予定やらを鑑みて22日に移動しました。

前日までにやったこと

椅子に座っていました(椅子コンなので)

あとは使用する言語をJavaScript(Node.js)に決めました。理由は僕が参考実装のある言語の中でJavaScriptしか書けないからです。

当日やったこと

とりあえずベンチマークを動かす

初期スコアは0だと思っていました。なのでこの時点で既に正の整数点が叩きだされてもう優勝した気分でした(嘘です)

初期スコア: 6293

sshの設定

やるだけ(ただし事前に鍵の作成をしていなかったので余計な時間がかかった(ぽんこつ))

使用実装をNode.jsに切り替え

予定通り、Node実装に切り替えました。

nvmをインストール

サーバーに置いてあったNode.jsが確か6.xでした。

async/awaitを使いたかったので最新版にするためにnvmをインストールして、Node.js v8.x.x(最新版)をインストールしました。

pm2でデーモン化&自動起動設定

ここでだいぶハマってつらい気持ちになりました。

pm2というNode.jsアプリをデーモン化したり、自動起動設定ができたりするツールがあるのですが、アプリケーションへの環境変数の渡し方でハマってアプリがDBに接続できなくなってその解決に時間がそこそこ取られてしまいました…

メモによると1時間くらい潰してしまったみたいです。

なんかここまでで1時間半〜2時間くらい過ぎていて絶望しかなかった

アイコンを静的ファイル化

アプリケーション眺めてたらアイコンをDBに保存したりアプリから返していて流石にこれはISUCON素人の僕でもわかる改善できそうな点だったので、さっさとnginxから返すようにしました(ただしキャッシュとかはうまくできていなかった)

さっさと、とか言いながら割と時間かかっていて実装力のNASAを感じてつらいきもちになっていた

ER図を表示したかった

DataGripという、JetBrains社のデータベース管理ソフト(?)で簡易的なER図を表示しようと思ったのですが、接続設定に失敗しまくってfail2banにはじき出されたりして泣いていました。

結局、MySQLの外部からの接続を許可する設定だかなんだかを数文字修正すればいいだけだったのに、かなり時間取られてほんとにアホかな?と思ったなどした。あとfail2banをbanした

しんでいた

20時前まで、「もう…どうすればいいのかわからん…」と言いながら何もせず椅子に座っていました(椅子CONなので)

その間、りんちゃんはN+1問題を解決しようとしてうんうん唸っていました。残念ながら解決できず、最終的には2人で椅子に座っていました。

DBにインデックスを貼る

突然もぞもぞと動き出してDataGripでぽちぽちして適当なカラムにインデックスを貼りました。

一応、アプリケーションでwhere句に使われているが、Primaryキーじゃなかったりするカラムに貼ったので、効果はあったみたいでスコアが伸びました

最後の悪足掻き

りんちゃんと一緒にNginxやMySQLの設定ファイルをいじって悪足掻きをしました。

ベンチマーク通すたびに1万点くらい前後していて、祈りながら無限回ベンチマーク通して、チーム内本日最高の39086点を叩きだして2人で騒いだのですが、調子に乗った僕が「これもっかい通したら4万ワンチャンあるのでは…?」と寝言を言ってエンキューしたら27000点くらいになってしかもあと数分で終了!

ギリギリ最後に神頼みでベンチマークに投げたらそれが最終スコアになって、結果は30095点でした。

再起動確認は最初の方にやっておいたので大丈夫だと高をくくっていたらやっぱり大丈夫でした。

反省とか感想とか

とにかくあらゆるオペレーションでつまづいていたので、事前準備が足りなさすぎた。sshの鍵くらい事前に作れよってあとから思いました。

まぁぶっちゃけ「つまづいた」って言ってた部分がスムーズに言っても、どうやら今回の問題の鍵であったCache-Control: publicにはそもそも思い至りすらしなかったと思うので、基礎知識も足りていないことを実感。

個人的にはIconsを静的ファイルにして配信できたので、一番最初のハードル(?)は超えられたのかなという気がしていますがまぁそれも測定した結果ではなく感覚でやったものなのでけわしい。

しかし、Iconsを静的ファイルにしてDBに保存するのをやめたせいで、せっかくの3台構成が活かせず、フロントエンドが1台だけになってしまいました。他のチームのWrite upを見ると、頭良い方法がたくさん挙がっていて、各位頭良いなぁと思って鬱になりました(なっていない)

推測するな、計測せよ

これが全然できてませんでした。

来年また開催されるとしたら、参加したいなぁと思っています。次に出場するときは、今年の反省を活かせるようにがんばります…

来年の自分へ

  • sshの鍵は絶対事前に用意しろ、大会始まってからssh-keygenとか遅すぎ
  • nginx.confとかmy.cnfとかも事前に用意しておいたほうがいい
  • アプリの仕様をちゃんと理解しよう
  • ボトルネックの計測方法勉強して
  • SQL勉強して
  • ちゃんとチームメンバー(りんちゃん)とおはなしして

最後に一つ

async/awaitはいいぞ

iPhoneからSoftEtherVPNに接続しようとして3年位ハマってたのが解決した話

おれの3年間・・・

3年間色々あったなぁ、iPhoneからVPNに接続しようとして何度失敗しただろう。今日、やっと接続することに成功したので、メモ。

今までやってたこと

VPN Server 側での L2TP/IPsec 機能の有効化方法 - SoftEther VPN プロジェクト

iPhone / iPod Touch / iPad からの接続方法 - SoftEther VPN プロジェクト

とりあえず↑の2つをやって、でもいざ接続しようとしたら

L2TP-VPNサーバが応答しませんでした。もう一度接続してください。

みたいなメッセージが出てきて毎回つらい思いをしながら諦めてました。

解決法

サーバーのポート500と4500を開ける

以上です。Ubuntuで行ったコマンドにすると、

$ sudo ufw allow 500
$ sudo ufw allow 4500

の2行です。

感想

無知ってつらい

参考

SoftEther VPN User Forum • View topic - iPhoneでSoftetherVPNにL2TP/IPsecで接続できない

自宅PCにL2TP/VPNでアクセスする「SoftEther VPN」(2) 設定編 | TeraDas-テラダス

Ergodoxを買ってUbuntuでキーマップ変更した

過ぎし1月6日、Ergodox EZでErgodoxを注文しました。

1月17か18日くらいに届いたので、なるほどなァといった気持ち。

触ってみると面白い、こりゃいいぞ

それからしばらく放置して、いざキーマップ変えようと思ったら情報がいい感じに見つからなかったので泣いてた

ので、書きます

環境

Ubuntu 16.04 以下略

手順列挙していきます

依存パッケージとかなんかたくさんインストールする

$ sudo apt-get install build-essential \
     gcc unzip wget zip gcc-avr binutils-avr \
     avr-libc dfu-programmer dfu-util \
     gcc-arm-none-eabi binutils-arm-none-eabi \
     libnewlib-arm-none-eabi git diffutils libusb-dev

teensy_loader_cliをインストールしたい

$ git clone https://github.com/PaulStoffregen/teensy_loader_cli.git
$ cd teensy_loader_cli
$ make

コンパイルされた teensy_loader_cli をパスの通ったところにコピー

/usr/bin/teensy_loader_cliシンボリックリンクを貼りました

キーマップのリポジトリをフォークしてクローンそいや

https://github.com/qmk/qmk_firmwareをfork

$ git clone [forkしたリポジトリ]

git submoduleをがんばる

$ cd リポジトリルート/keyboards/ergodox
$ git submodule sync --recursive
$ git submodule update --init --recursive

キーマップの編集

$ cd リポジトリルート/keyboards/ergodox/keymaps
$ cp -R default [あたらしいキーマップの名前]
$ vim [あたらしいキーマップの名前]

make

$ cd .. # リポジトリルート/keyboards/ergodox にいるはず
$ make clean && make keymap=[あたらしいキーマップの名前]
$ cd ../.. # リポジトリルートにいるはず
$ sudo make teensy keymap=[あたらしいキーマップの名前]

ここで、ErgodoxのRESETボタン(LEDの右側にある穴)を押す

LEDがピカピカしたら新しいキーマップが有効になってるはずです。

ハマったところ

  • teensy_loader_clisudo apt-get install で手に入らなかったこと
  • ところどころ sudo が必要なところ

あとはゴリゴリキーマップを変更していくだけですね(白目

あけましておめでとうございます

時差かな?

時差です(震え声)

2016年が終わって約1ヶ月経ちましたが、あけおめ記事を書かないと他の記事を書いてはいけないという呪いにかかっているので書きます。

2017年の目標

  • 健康であれ
  • 英語力を上げたい
  • プライベートで何かしらのWebサービスを作りたい
  • 読書

健康であれ

健康は大事ですからね

英語力を上げたい

仕事柄英語が読めると得なので・・・

TOEIC換算でどれくらいとか言えたら良いのですが、高専在学時代の点数を覚えていないので無理(ヘタレ)

年末に自分で「まぁ少しは英語力上がったな」と思えたら嬉しいかな~くらいの気持ちの目標

プライベートでWebそいや

✨デキるエンジニア✨は何かしら作ってるという噂を耳にしたのでという建前

本音は、やっぱり「これ自分ひとりで作ったんすよ~w」みたいなドヤ顔がしたいというのが大きいので頑張る。

読書

語彙力を上げたいので読書したい。技術書とかではなく、小説を読みたい。

目指せ1年で20冊

ちなみに去年は0冊です。

2017年も

よろしくお願いします。

「バイオハザード: ザ・ファイナル」を見た感想

バイオハザード: ザ・ファイナルを見てきた

公式サイトはこちらです

※本記事はできるだけネタバレをしないよう心がけていますが、その分かなり簡素な感想になっています。後日ネタバレを含んだ感想も執筆する予定です。ちなみにWikipediaは中盤までのネタバレがそこそこあるので注意><

バイオハザード: ザ・ファイナルについて

バイオハザード: ザ・ファイナル」とは、有名なゾンビゲームを実写映画化したバイオハザードシリーズの最新作(6作目)にして最終作となる作品です。

ファッションモデルのローラさんも出演するということで、Twitterなどでもかなり期待度が高かった気がします(主観)。

簡素な感想!w

ダジャレです。

SF・アクション映画としてはとても面白い作品でした!
例えば・・・

アンブレラ社のオーバーテクノロジー

SF好きにはこういう近未来的テクノロジーが出てくる作品はワクワクすると思います!シリーズ全体的にアンブレラ社は超技術生み出しまくりなんですが、やっぱり近未来テクノロジーの描写はワクワクが収まらないですよほんとかっこいい。

アリス(主人公)と敵の対決のアクション

バイオハザードがホラー映画だったのは2までと言われていますが[要出典]、その分3以降はアクションに力が入っていました。
今作でもアリスのイケイケアクションは健在で、戦闘時のアリスはかっこよすぎて泣きそうになります(?)
思わず真似したくなります

暗がりで襲ってくるゾンビ

バイオハザードがホラー映画だったのは2までと言われていますが[要出典](2回目)、今作ではホラー感が少し多くなっていた気がします。
3から5までは「とりあえずグロテスクなクリーチャー出しとけばええやろw」的な雰囲気があり、今作でもグロテスクなクリーチャーは出てくるのですが、暗い場所で襲ってくるのはホラー感があって良かったです(小並感)

しかし・・・

バイオハザード5の続編として見るとイマイチな面がありました。
例えば、5のラストには驚愕のシーンがあったのですが、6はその直後からではありませんでした・・・
直後からになるのを楽しみにしていたのですが!残念です!

アリスの過去について

今まで謎なようで「あぁそういうもんなのかなぁ」と思ってスルーしていたアリスの過去について明らかになります!開始5分くらいで予想できてしまったけどね!!!あれは構成が悪い💢

あとローラさん目当てで見に行くのはオススメしません!なぜかって?HAHAHA(察して)

まとめ

  • バイオハザードシリーズを今まで見た人は見たほうが良いと思います、一応物語は完結したので。
  • 5分でオチがわかります(?)
  • アクション映画として楽しもう!w