れみゅーぶろぐ

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

DELL Latitude E5250の液晶パネルを交換してフルHDにした

液晶パネルが届いた

前回の記事で、ノートパソコンの液晶パネルを交換するためにノリと勢いでそれっぽい液晶パネルを注文しました。

そして5月8日に、注文した液晶(の不在票)が届きました。
注文したのが4月24日なのでちょうど2週間かかった計算になります。中国から発送ならまぁそんなもんか、と思いながら不在票を持って雨の中郵便局に受け取りに行きました。さむかった(小並感)

ブログの更新が遅れたのは、下書きを書いて後日見なおそう〜と思ってサボってたからです。

開封

届いた箱がこちら

f:id:Foolish_OkNCT:20180508205653j:plain

なんかすごい潰れてるのは、中華クオリティなのかよくわかりませんがとりあえず中身は無事でした。プチプチめっちゃいっぱい入ってたし。

f:id:Foolish_OkNCT:20180518003043j:plain

↑プチプチを吐き出した図

プチプチを外すと中から待望の12.5インチフルHDの液晶パネルが姿を表しました。

f:id:Foolish_OkNCT:20180518003116j:plain f:id:Foolish_OkNCT:20180518003134j:plain

保護シート綺麗…剥がしたくない…剥がしたけど…

E5250の分解

というわけで、液晶パネルが届きました。そして液晶パネルを交換するためにはノートパソコンを分解しなければいけません。

一般に、何の資料も無い状態でノートパソコンを分解すると起動しなくなることが知られているため、前回貼り付けたYouTube動画と同じチャンネルの別動画を参考にします。

www.youtube.com

動画貼り付けただけというのも寂しいので、分解中に撮った写真を一部掲載します。

まずは背面のネジを外して裏蓋を開けます。
f:id:Foolish_OkNCT:20180508211418j:plain f:id:Foolish_OkNCT:20180518003829j:plain

次に、色々外しまs…
f:id:Foolish_OkNCT:20180518004529j:plain
外しました

続いて、キーボードの枠を外したり…
f:id:Foolish_OkNCT:20180518004635j:plain

キーボードを外したり…
f:id:Foolish_OkNCT:20180518004728j:plain f:id:Foolish_OkNCT:20180518004736j:plain

表蓋(?)を外したりしました
f:id:Foolish_OkNCT:20180518004809j:plain

そしてこの辺のネジを外すと…
f:id:Foolish_OkNCT:20180518004920j:plain

上が取れます!!!!!
f:id:Foolish_OkNCT:20180518005009j:plain

上が取れました!!!!!!!!!
f:id:Foolish_OkNCT:20180518005021j:plain

次は液晶パネルを覆っている部分を外しま…
f:id:Foolish_OkNCT:20180518005205j:plain
…した

次に、液晶パネルが取り付けられているこの4つのネジを外します。ちなみに、上下のネジの間にあるのはネジではなくはめるための突起です
f:id:Foolish_OkNCT:20180518005530j:plain

そして、液晶パネルの裏のeDPコネクターを取り外します。

これがeDP端子
f:id:Foolish_OkNCT:20180518005846j:plain

テープを剥がして
f:id:Foolish_OkNCT:20180518005936j:plain

青いテープも取って、端子を取り外します!
f:id:Foolish_OkNCT:20180518010002j:plain

これで元の液晶パネルと新しい液晶パネルを交換することができます。

さて、元の液晶パネルの全体を確認することができたところで、購入した液晶パネルとの比較を行うことにしました。

次の2枚の写真をご覧ください

f:id:Foolish_OkNCT:20180518010104j:plainf:id:Foolish_OkNCT:20180518011450j:plain

1枚目が元の液晶パネルで、2枚目が新しい液晶パネルです。

よく見ると、新しい液晶パネルの下の黒い帯みたいな部分(赤丸で囲った部分)が金属のプレートに重なっていることがわかります。このままでは液晶パネルのフレームを重ねてハメこむことができません。

この黒い帯の中には基盤があり切り取ることはできないので、ちゃんとフレームを組み立てるためには「金属のプレートを一部切る」という選択肢しかありません(多分)。そのための工具を急遽Amazonで注文し、この時点ではフレームは組み立てずにとりあえず接続確認だけ行うことにしました。

端子を接続して、分解したのとは逆の順番で今度は組み立てていきました。

そしてACアダプターをつなぎ、恐る恐る電源を入れると…

f:id:Foolish_OkNCT:20180518010557j:plain

なんとすんなりと起動しました!!やったー!!

きちんとフルHDで表示されており、動作も全く問題ありませんでした。まさかここまでスムーズに表示できるとは思っていなかったので良い意味で期待を裏切られ、起動した瞬間には思わず踊ってしまいました(嘘)。

プレートの処理に関してはまた後日投稿しようと思います。

P.S. 分解したノートパソコンを組み立てた結果、ネジが2本ほど余りました。あるある〜

PCの液晶をフルHDにしたい

はじめに

私は普段、DELLのLatitude E5250というノートパソコンを使っています。

持ち運びしやすく、スペックも悪くない(と思っている)のですが、一昔前のノートパソコンにありがちな1366x768という液晶の解像度に少し不満があります。

というのも、私は会社で4Kディスプレイを使っており、「フルHDがウィンドウサイズの基本単位」みたいな環境で開発をしているのでこのノートパソコンを使って作業をすると割とストレスがたまります。 Ubuntuワークスペース機能を使ってかろうじて作業できていますが、そもそも1画面が小さいのでつらいことには変わりません。

そこで、私は思いました。

PCの液晶をフルHDにしたい

したくないですか?私はしたい。

低解像度の画面を使い続けたことによるストレスでPCを破壊する前に、液晶自体をアップグレードして安らかなPC生活を送れるようになりたい。

そもそもそんなことできんの?

という声が聞こえますが、できる場合もあるしできない場合もあるようです。 よくわからないので、とりあえず適合しそうな液晶を調べて、安かったらダメ元で買って交換してみることにします。(もちろん本当はしっかり調査してからの方がいい)

調査フェーズ

まずはじめに、この調査で何を探すのかを明らかにしなければいけません。 私が行いたいのは、 E5250の液晶をフルHDにする ということです。 そしてこれは推測なのですが、E5250に使用されている液晶パネルと同じブランドで同系列の液晶パネルが良いのではないかと思っています。(液晶パネルを設置するためのネジ穴などの位置が同じものが見つかる可能性が高いと思ったため)

よって今回探すのは E5250に使用されている液晶(以下、今の液晶)と同系列のかつフルHDの液晶パネル になります。

さて、今の液晶と同系列の液晶を探すためにもまずは今の液晶の製造元や型番などがわからないといけません。 E5250のディスプレイ部分の分解情報を調べると、以下のYouTubeの動画が見つかりました。

www.youtube.com

動画説明欄にLatitude E5250 LCD Screen: http://ppci.me/c/140/518/lcd+screenというリンクがあり、飛んだ先で以下の商品を見つけます。

www.parts-people.com

これが今の液晶と同じ液晶だと思うので写真を見てみると、型番の書かれたバーコードの写っている写真があります。 上記商品ページから該当画像を引用いたします。

f:id:Foolish_OkNCT:20160621160042j:plain

バーコード上部のHB125WX1-201というのが液晶の型番です。この型番を 液晶界隈のWikipediaとも呼ばれている(大嘘(今考えただけ)) Panelook.com で調べてみます。 そして見つかったのがこちら

http://www.panelook.com/modeldetail.php?id=28426

これでこの液晶の情報がいろいろ掴めました。 上記のページに色々書いてある情報のうち Signal Type が一番重要です。というのも、これは液晶パネルとマザーボードを繋ぐインターフェースの規格なので、今の液晶と違う規格の液晶パネルを買ってしまうと、ダメ元どころか繋ぐことすらできないためです。 *1

これを踏まえたうえで、更に同系列の液晶、つまり同じブランドの液晶を探さなければいけません。

Panelook.comはブランド名部分がリンクになっており、該当ブランドの液晶を調べることができます。

同じブランドで、液晶サイズが12.5、解像度(Resolution)が1920x1080のものを調べると、液晶の候補が絞られました。

見つかった液晶は全て今の液晶と同じインターフェースだったので、その中からStocksがひときわ多かった、つまり流通量が多くその分安いと思われるNV125FHM-N62をAliExpressというガジェットがたくさん流通している中華系通販サイトで探し、購入することにします。*2

探してみると、約50ドルで購入することができるようだったので、勢いで注文しました!!

…そして今にいたり、ブログを書いています。つまり実際に交換までしたわけではありません。

ぶっちゃけ液晶外して交換するだけで動くなんて易しい世界ではないと思うので、半分暴挙みたいなものなのですが、eDP接続だしいけるっしょw(←意味不明)という気持ちで突き進みました。 つまり失敗するかもしれません。

とりあえず液晶が届いて試してみたら成否に関わらず別記事で結果を報告して、
↓この辺にリンクを追記します。

2018年6月14日追記

成功しました! foolish-oknct.hatenablog.com

*1:今の液晶で使われているeDPという規格の他にもlvdsなどがあり、同じeDPでもピン数が違ったりする

*2:AliExpressについての情報や、購入方法については省略します

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 が必要なところ

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