「Web」の記事 - Crieit

WebエンジニアがPCを買った時に考えたことをまとめてみた

2018-07-21T06:54:52+09:00

5年ほど使っていたPCが何をするにも重くなってしまい、そろそろ限界が近づいてきていたような気がしたので新しいPCを購入しました。Webエンジニアとして仕事で使うので、そのあたりも含めてその際に色々考えたパソコンの選び方を適当にまとめてみました。

2018/7購入の記事です。

PCでやること

ブラウザ操作
プログラミング
開発環境構築

など

重視したところは？

これはもう当たり前の部分なのですが、価格の安さとスペックの高さです。２つなのですがこれセットで一番大事です。どちらが欠けることは許されません。

あとはノートPCであることです。外に持ち運んだりはしませんが、PCを置く位置を簡単に動かせないのは厳しいので必須です。サブディスプレイも使わないので、15インチであることも必須でした。

スペックの高さ

元々使っていたPCは、Galleriaというゲーム用PCです。ゲームをしなくなったのですが、そこそこスペックが良かったのでそのまま仕事用に使っていました。それ以前はマウスコンピュータのデスクトップPCや、Thinkpadの激安なものを買っていました。

昔はWeb開発といえばサクラエディタ等を使ってWinSCPでファイルをアップする、みたいな感じではっきり言って性能などどうでもよかったため、ひたすら安さのみを考えていました。

ただ、現在のWeb開発だとChromeがそもそも重いしそこでSlackをいくつかとTwitterや時にはGoogle Analyticsを常時ひらっきっぱなしにし、プログラミングのためVSCodeもいくつか開いてdocker-composeでDockerコンテナをいくつか立ち上げ、Webpackでホットリロードしたりという感じで、作業中は結構CPUとメモリの稼働率が高いので、性能なんてどうでもいいとは言えなくなってきました。総合して重くなっていくので、何をするにも重い状態になってしまいます。

とにかく最低限のスペックの高さは必要です。

安さ

ソロとはいえ一応経営者なので、お金の節約にはこだわります。本当はケチなだけです。そのため安さは重要です。

あと出費がそのまま家庭にも反映してしまうので、今後子ども達や家族のために使う大切なお金であることを考えると、適当に無駄遣いはできません。スペックが良く、それでいて安い、最善のバランスを考える必要があります。

実際に検討した部分

SSD

SSDは必須でした。そもそもだいたいいつもPCが劣化して遅くなる原因というのがHDDの劣化によるものです。ものにもよると思いますが、今のSSDは性能が劣化しにくいという情報をどこかで見ました。本当かどうかは知りません。ただ、HDDしか使ったことがないので今回はじめて試してみています。さすがにHDDより劣化がひどい、ということはないのではないかと思います。ヘッダを動かしてデータを読み取ったりするとか正直よくよく想像すると信じられないことです。数年後どうなるか楽しみです。

容量は256GBにしました。512GBのものもありましたが、元々使っていたPCが128GBも使い切っていなかったので、おそらく256GBで大丈夫だろうと思います。（ただしスマホアプリやゲーム、デザインの開発環境などを入れると以前も限界近くにいっていたので厳しいかもしれません）

足りなくなった分は外付けのSSDを買えばいいか、と思っています。（追記：この判断は間違いでした。256GBはすぐなくなるので512GBにしておけばよかったです。ちなみに今は1TBに付け替えました。付け替えた方が安い場合もある？）

余談として、最近はSSDとHDDが両方入っているハイブリッドのPCもあるようです。見つけた時はいいかもと思いましたが、よくよく考えると劣化で遅くなるのが嫌だったのと、PCの大きさに影響したり熱の発生率の高さでファンが劣化したりと、色々と面倒なことが考えられる気がしたのでやめました。一時的なリースとかの用途であればそれでも良いのかもしれませんが。

メモリ

4GBは低すぎるし16GBは高すぎるし8GBくらい？　適当です。

追記）Twitterで8GBは少ないので16GBが良いという情報を見かけました。

追記）32GBのものを買って付け替えました。16GBでも良いのかもしれません。Chromeのタブのメモリ解放機能をストップすることができなくなったため、メモリが低すぎると作業に支障が出るようになりました。（付け替えた方が安い場合がある？）

CPU

よくわかりませんが良さそうなのを買いました。というか、SSDとメモリなどのバランスを考えると良さそうなのにするしかなさそうでした。

グラフィックボード

一応ちゃんとしたのが入っているものを買いました。全部CPUに任せるのはつらそうですし、もしまたゲームとかを作る気になったら必要だと思いますので余裕があったらつけておくとメリットがありそうです。

買ったもの

結局下記を買いました。

InfinityEdgeディスプレイを採用したXPS 15インチ9570ハイパフォーマンス4Kノートパソコン | Dell 日本

Dockerを使うためWindowsをPROにし、あとは保証をちょこちょこつけてだいたい20万円弱になりました。

決して安くないというか高い！　と思いましたが、LenovoとかMacBook Proに比べるとむちゃくちゃ安いです。買う気が失せていましたが、そのあたりの価格を見たら急に買う気が蘇りました。Dellはとりあえずラインナップを見てみるのはおすすめです。

そして今回は法人PCとして購入しました。余分なものも入っていないし、WebエンジニアがPCを購入するならどのメーカーにしろ法人PCが良さそうでおすすめです。

実際に使ってみてどうか

この記事を書いている前日に来たので、正直まだ良くわかりません。ただ、どのサイトを見てもスムーズですし明らかに早いです。前のPCはTwitterのタイムラインの上にあるformで投稿しようとするとキーボードを叩く度にカクカクなっていたほどです。Gmailも新しくなって異常なほど開くのに時間がかかっていましたし、Google Analyticsも同様でした。今はどれもぱぱっと開きます。そもそも回線のスピードチェックすら新しいPCの方が速いです。

これがどれくらいの期間維持できるのか、非常に楽しみです。

ちなみに前のPCはLinux MintというUbuntuベースのOSで、多分数年ほどそれだけで使えていました。が、今回はそのままWindowsを使ってみようと思います。

元々別にWindowsが嫌いというわけではなかったし、結局今はDockerも動くしあとはシェルがいい感じに使えればそれで不満はないので、意外といい感じに使っていけるのではないかと思っています。Git Bashが入っているので一応SubsystemのUbuntuを入れなくてもbashも使えますし、そもそも現在はWindows10のデフォルトになっているPowerShellが意外とすごそうなのでちょっと色々試していきたいと思います。

追記

開発の検証記事も書きました。
Windowsで快適なWebシステム開発を行えるか検証中

『THE BINGO』を開発・リリースするまでのTips

2018-07-19T10:38:24+09:00

『THE BINGO』というサービスをリリースしました。
ビンゴ大会が超簡単に開催できる無料のサービスです。

サービスを作るとき、アイデア・設計、デザイン、実装、テスト、リリースと多くの工程があり、どの工程もとても重要且つ、とても大変です。また個人で開発する場合は、全てを一人で担当しなければなりません。

僕自身、THE BINGOは4つ目のサービスで、開発〜リリースまでの型みたいなものが出来てきました（お金になっているサービスはありますが、ヒットしたサービスはひとつもありません...悲）。この記事はTHE BINGOを作るまでの流れをまとめました。サービスを作りたいと思っている人、今まさにサービスを作っている人、そんな方々に少しでも役に立つようなTipsになればと思います。

アイデア・設計

なぜ『THE BINGO』を作ろうと思ったのか？

作った経緯などは、以下の個人のブログにまとめています↓↓

『楽しい』と思うから作る

概要だけ話すと、『ビンゴ大会って何でこんなにレガシーなんだ。自動化してくれ』と、強く思っていました。

おそらく、これを思っているのは自分だけではなく、ビンゴを準備している全ての人が感じていることで、その人たちが当日一般の人たちと同様に楽しめたら、もっとお酒いっぱい飲めるだろうなー。と思ったことが発端です。

どういうサービスか？

THE BINGOは、会員登録とかアプリのダウンロードなどをせずに、本当に簡単にビンゴ大会が開催できるWebサービスです。

ビンゴマシン（親）がビンゴカード（子）のURLをLINEやFacebookやTwitterなどで共有して、ユーザーはそのURLをクリックするだけでビンゴカードを作成することができます。

親：ビンゴマシンにアクセスする
親：ビンゴカードのURLをシェアする
子：ビンゴカードのURLに各々アクセスする
親：ビンゴを回す
子：ビンゴを待つ → 自動で更新される

どういう技術を採用しているか？

THE BINGOには『ビンゴマシン』と『ビンゴカード』があります。
『ビンゴマシン』の方はVue.jsで既に作っていました。

【ビンゴマシン】

『ビンゴカード』の方の実装をどうしようかと悩んでいました...。
『ビンゴマシン』で『STOP』したイベントがトリガーになり『ビンゴカード』に出た目を通知する実装が必要でした。色々と調べた結果以下の方法だと、実装できそうだということがわかりました。

① WebSocket
② ポーリング

実装は可能ですが僕が使っているサーバーが弱小なこともあり、どちらもサーバーのリソースを浪費してしまう可能性がありました。そのためなるべくサーバーには負荷をかけずに実装したいという思いがありました。

その問題を解決する術がFirebaseです。

FirebaseのRealtime Databaseを使うと、データが更新されたとき（ビンゴマシンの『STOP』が押され、目が出た時）に同じデータベースを参照している端末に対して、イベントを起こすことができます（弱小サーバーに負荷がかからない🙌）。

    // ** Initialize Firebase **
    var config = {
        apiKey: "hoge-piyo",
        authDomain: "hoge-piyo.firebaseapp.com",
        databaseURL: "https://hoge-piyo.firebaseio.com",
        projectId: "hoge-piyo",
        storageBucket: "",
        messagingSenderId: "1234567890"
    };
    firebase.initializeApp(config);

    var db = firebase.database();
    var bingoConn = db.ref("/bingo");

    // ** データベースが変更された時の処理 **
    bingoConn.on("value", function (data) {
        console.log(data.val());  // → array[ "1" ]
    });

    array = [];
    array.push("1");

    // ** arrayをFirebaseのデータベースに登録 **
    bingoConn.set({ array });

Firebase側で事前に設定しておく項目もありますが、フロント側の実装はとてもシンプルで簡単です。

デザイン

『THE BINGO』のデザイン・UI（HTML・CSS）は全てSemanticUIというCSSフレームワークを使って作られています。

【SemanticUI Button Sample】

SemanticUI超良いです◎ ボタン、ラベル、アイコン、イメージカード、ナビゲーター...etc 豊富な種類からサイズや幅、色などを簡単に自由にカスタマイズすることができます。グリット機能もかなり優秀で、画面幅に合わせてフレームワーク側でレイアウトをタイムリーに調整してくれます。

エンジニアが個人でサービスを作るときデザインやUIって後回しになりがちですが、僕はかなり重要だと思っています。僕自身エンジニアなのでデザインの領域は得意ではありませんが、CSSフレームワークに完全に乗っかることで、エンジニアがそれなりのものを工数をかけずに作り上げることができます。

以前はBootStrapを使ってデザインをしていたのですが、BootStrapぽっくなってしまうのが嫌で、今はSemanticUIを使っています。

デメリットが一つあるとすればIE9より前のバージョンは使えません(HTML5、CSS3を使用しているため)。個人的意見を言うとIE9はマイクロソフトのサポートも終了しているため、無視していいと思っています。試していませんがSemanticUIの公式ドキュメントではIE10まではサポートしていると書いています。（IE11は使えました◎）

実装・テスト

フロントエンドはVue.jsで開発をしています。
特に難しいことはしていません...。こだわりとしては『ビンゴカードは一人一枚』という、本来の仕様をなるべく再現しています。（1ブラウザで1枚のビンゴカードが生成されます）

【ビンゴカード】

一応ローカルで動くビンゴマシンのソースは公開しています。
※Firebaseとの通信はしていません
Github - vue-bingo_machine

リリース

実装とテストが終わったら、リリース作業です。
この作業が一番手間で時間がかかります。以下の手順で作業を進めます。

ドメイン取得
SSL証明書取得
Apacheの設定
利用規約・プライバシーポリシーの作成
TOPページ・ランディングページの作成
リリース

1.ドメイン取得

僕はさくらサーバーのVPSを使っているので、ドメインもさくらのサービスを利用しました。お名前.comなど類似のサービスはありますが、好きなところでドメインを取得します（お金かかります）

さくらインターネット - ドメイン取得

『the-bingo.jp』というドメインを取得しました。

2.SSL証明書取得

PCとサーバ間の通信を暗号化するために必要な技術です（HTTPS）。これをしていないとブラウザで『保護されていない通信』的なことが表示されるので、マストだと思います（お金かかります）。

初めてやるとかなり面倒くさい作業です...。僕はいつも以下の記事を参考にさせてもらっています🙇

さくらVPSにSSL証明書を導入しHTTPS通信の構築

これを設定すると → https://the-bingo.jpで暗号化した通信ができるようになります。

3.Apacheの設定

具体的には以下の設定をしています。
・ファイルorディレクトリが存在しない(404)ときホームにリダイレクト
・.htmlの拡張子がなくてもページが表示される
・httpでリクエストが来たときhttpsにリダイレクトする

上記の設定をするためにルートに.htaccessファイルを作成し、以下を記述します。

# .htaccess
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L]

RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.html -f
RewriteRule ^(.*)$ $1.html

#↑最終行は必ず改行（らしい）

4.利用規約・プライバシーポリシーの作成

色んなサービスの利用規約などを見て、参考にします。

5.TOPページ・ランディングページの作成

色んなサービスのWebサイトを見て、参考にします。

6.リリース

Twitter、ブログなどを使って告知します！

7.打ち上げ

リリースと打ち上げはセットなので、これはだけは絶対に外せません。
30歳前の独身男性が、金曜日の仕事終わりに吉野家で瓶ビールと牛丼を注文して一人で打ち上げをしました。
（文章を読むだけで切ない...。）

サービスのあれこれ

開発期間

2週間
※アイデアからリリースまで

かかっている金額

項目	金額	備考
ドメイン	3,909円/年
SSL	972円/年
さくらVPS	1,706円/月	他のサービスも乗っている
Firebase	2,800 円/月	Flameプラン：来月は無料プランに切り替える

お金については結構かかってますね...。
この金額くらいは回収できるようなサービスにしたい（広告入れずに）...。

まとめ

個人でユニークなサービスを開発・運営して収益を上げている、オランダ出身のPieter Levels氏（連続していろんなプロダクトを作る人）が以下のような話をしています。

本当にひどいアイデアもよくありますが、そうなっている理由は、問題に集中していないからです。新しいフードデリバリーアプリや、新しいファッションデリバリーアプリを作ろうという話を、よく聞きます。けれど、それはあなたが本当に解決したいと思う問題ではありません。

私のやり方は、自分の生活をよく見ること、そして自分が本当に困っていることが何かを考えることです。日常生活の中で、自分が何かできることや、あるいは欠けている情報など、何でもいいのです。

リリースしてから1週間が経ちました。バズったときのことを考えてFirebaseのFlameプラン（月額25ドル）にしたのですが、全くバズっていませんし、全く流行っておりません...悲。

利用者はまだ多くありませんが、少なくとも僕自身が抱いていた課題は解決できるようにTHE BINGOは開発しました。これは仮説ですが『自分が本当に困っていること』というのは、同じように困っている人がいると思うんです。そういう人たちに刺さるようなサービスを、これからも作っていきたいと思っています。

そして、できれば保守運用していくために、お金をいただけるような仕組みを構築したいと思っています。
これは僕だけではなく、多くの個人開発者の課題ですね。

とか、真面目な話をしてみたんですが、THE BINGOを使って超簡単にその場でビンゴ大会が開催され、会場が盛り上がっているのを想像すると、やっぱり嬉しいですよね。開発者としての一番のモチベーションはユーザーの反応だと僕は思います。

とても小さいサービスですが、ビンゴ大会を主催する機会があるときはぜひ使ってみてください。