フジワラ＠CLOCKの投稿 - Crieit

画像分類	無料	有料
トレーニング	40 ノード時間まで無料（1 回限り）	*ノード時間あたり USD $3.15
デプロイメントとオンライン（個別）予測	40 ノード時間まで無料（1 回限り）	**ノード時間あたり USD $1.25
will	will	will

画像分類	無料	有料
トレーニング	毎月最初のモデル 10 個については、アカウントごとに 1 ノード時間まで無料です。	以後のトレーニング時間については、1 時間あたり USD $20.00 の料金が発生します。

※ 無料枠のプロモーションクレジットについてはGCPの管理画面からも確認することが可能です。

しばらく経って悲劇は起こった...

月末になりGoogleCloudPlatformをの金額が気になり確認してみました...。

...？

桁が一桁増えている...？？

...小計 ¥129,306円

ちょっとまってくれ。確認したときは確かに¥7,944円だったぞ...。すぐさま動かしていたプロジェクトを削除しました。

月末合計費用（予測）のグラフが凄まじいことに...😭（最初は何かのバグかと思った）

GCPサポートセンターに連絡

Google Cloud Platform の課金に関するサポート

その日にすぐ、これまでの経緯をまとめてGCPのサポートセンターにメールをすると、その日に連絡がきました。

プロジェクト「◎◎◎-◎◎◎」のAutoMLモデルが削除されてから48時間後、最終的な金額が確定されます。請求情報が更新され次第、担当部署に11月分請求金額の調整依頼を提出致します。進捗につきまして、11月26日 (火) に改めてご連絡させていただきます。

指定の11月26日（火）に連絡がなかったので催促をしました。

弊社担当部署に金額調整依頼を提出させていただきましたが、調整金額は高額になっているため、承認されるには長時間を要する可能性がございます。進捗につきまして、11月29日 (金)に改めてご連絡させていただきます。

このときは祈ることしかできませんでした🙏

祈りの結果...

後日GCPのサポートセンターから連絡がありました...。

弊社にて適用可能な金額調整は一度限りに対応になっております。今後はご利用頂きますGCPリソース全てに対してのご利用料金が発生いたしますので、ご留意願います。

料金表を確認したところ、調整金額が反映されていました😭
Google社の方々、本当にありがとうございます🙇‍♂️

最初に気づいてから、金額調整をしていただくまでの2週間は精神的に疲弊していました...。本当にありがとうございました。

今回の原因

今回は AutoML Image Object Detection Online Prediction に対して12万円の請求が発生してしまいました。

マシンラーニングが終わった後にデプロイするかどうかをチェックすることができます。今回はどんなモデルが作られたのかを試したかったこともあり、チェックをつけてデプロイをしました。デプロイするとGPUノードを1つ使い続けるのです。これが今回の原因です。

上にも書いていますが、デプロイ後に確認が終わったら「デプロイの解除を行う必要があります。」

完全に見落としていました...。

再発防止策

公式のドキュメントを読もう

再発防止策としては、まずは「とりあえずやってみよう」ではなく、最初にドキュメントを読むことが大切だと思いました（当たり前）。そして、どんな仕組みなのか？料金体系はどうなっているのか？を公式ドキュメントを理解を深めることが大切です。（自分への戒め）

過去の失敗から学ぼう

料金体系が複雑でクラウド破産しそうなサービスを使う場合は、過去に失敗した人のブログや記事などを調べておくことによって、注意する点などがまとめられています。そういうったブログやQiitaの記事をまとめて読み、つまずきやすいポイントを事前に学んでおくのは有効かと思います。

AutoMLで破産しないように気をつけたいポイント

※ この方と同じ失敗をしてしまいました...😭

GCPの「予算とアラート」を使おう

GCPには「予算とアラート」という機能があります。アッパーの金額を決めて、指定した金額の割合に達したときのメールで通知をしてくれる機能があります。この機能を活用して、沢山メールが送るように設定しましょう。（金額に達したらサービスをストップする機能欲しいですね🙏もしくはさくらクラウドのような定額のサービスも切望🙏）

↑予算の設定

↑予算割合の設定

まとめ

AutoMLはGoogleCloudPlatformの中でも特に料金が高く設定されているサービスです。そのため、使用する際は事前にしっかいと調べた上で使いましょう！

参考🙇‍♂️

AutoMLで破産しないように気をつけたいポイント

Cloud AutoML Vision が本当にノンプログラミングで使えるのか試してみた

AutoML Visionをためしてみた

「ウォーリーを探せ！」のウォーリーを最短4.45秒で見つけて指し示すロボットが開発される

今年個人で作ったサービスについて

2018-12-02T02:06:43+09:00

2018年はわりと真面目に個人開発に取り組んだ1年でした。個人開発のスタートを踏み出すことができた年という意味でも『個人開発元年』と呼ぶことに決めました（勝手に）。

このアドベントカレンダーでは、2018年に作ったサービスや、個人開発を通じて感じたことなどを振り返ってみたいと思います。

1. 今年作ったサービスについて

1. OFFICE CLOCK

概要：LINEとWebで勤怠管理ができるサービス
開発期間：4ヶ月と少し
リンク：https://offieclock.work

このサービスは僕が作ったWebサービスの処女作です。かなり初々しさの残るプロダクトでツッコミどころは沢山ありましたが、そんなところもいとおしく感じていました。完全に親バカ的思考です...。

このサービスを作ろうと思ったきっかけは、2017年に『HATARA CLOCK』というLINEで勤怠管理ができるLINEbotをリリースしました。ユーザーが徐々に増えていき、要望も多くなりLINEのタイムライン上だけでは完結できなくなってきたのがきっかけで、ブラウザで編集したり、ファイル出力ができる『OFFICE CLOCK』を開発する流れになりました。

-- ✂︎ --

このサービスを開発する時に感じていたことや、実践したことなどのTipsをQiitaに投稿したところ、多くの反響があり、ありがたいことにQiitaやTwitterのフォロワーが少しだけ増えました。

独りでWebサービスを開発・リリースするまでのTips

このサービスをきっかけに、色々な人に出会うことができた一年でした。自分の運用しているサービスの中では一番思い入れのあるサービスです。

2. BLOCK CLOCK

概要：25分間の集中タイムにSNSをブロックするクローム拡張
開発期間：2週間
リンク：https://tech-portfolio.org/block_clock/

2018年の4月はフリーランスでの仕事が全て無くなってしまい1ヶ月お休みだったので、その1ヶ月を使って開発したサービスです。
1ヶ月あったので、沢山インプットする予定だったのですが、Twitterのタイムラインと共に、貴重な1日の時間も流れていることに気がつきました。

TwitterとかFacebookのSNSってWeb系エンジニアの宿敵だと思うんです。SNSやっている時間があったら、もっと進捗上がったはずだ...。と反省することが多々ありました。これが仕事だったら本当にマズいと思うんですよね...。

このSNS問題を本気で解決するために、色々とサービスを探したんですが『SNSブロック』と『タイマー（ポモドーロ）』のサービスがなかなか見つからなかったので、クローム拡張のAPIを使い自作したのが経緯になります。

開発に集中するためのChrome拡張を作りました！

リリースした後にQiitaやはてぶやTwitterで沢山のフィードバックをいただいたのですが、SNS問題については共感の声が多く自分だけではなく、多くの人が悩んでいた課題だったのが印象的でした。

-- ✂︎ --

このクローム拡張は海外向けにリリースをしてみようと思い、英語作ってプロダクトハントなどにも投稿してみました。

https://www.producthunt.com/posts/block-clock

プロダクトハントに登録して、日本から海外向けにリリースしたらどうなるのか試してみたのですが、プロダクトハントでは投稿する時間や、投稿する前の準備が色々と必要で、それを怠るとVoteされず、上位に食い込めない仕組みになっているそうで、それを理解できておらず、あまり伸びることもなく終わってしまいました（そもそもクローム拡張のサービスなので、ニッチというのもありますが...）。

3. THE BINGO

概要：超簡単にビンゴ大会が開催できるWebサービス
開発期間：2週間
リンク：https://the-bingo.jp

結婚式の二次会とか、忘年会とかで開催するビンゴ大会って未だにアナログですよね。しかも皆んなお酒飲んでるし、出た目がわからなくて、どうでもよくなって、景品のダイソンを逃している...。みたいなことって、結構あったりすると思うんですよね。僕は過去に何度もあったんです。

そしてビンゴ大会を開催する幹事の労力が半端ないんですよね。カードを配ったり、ビンゴマシーンを回しながら、司会と進行をしてビンゴ大会を進める、ビンゴが出たら景品も配らないといけないし...。やることが多すぎて当日は全然楽しめない。僕は過去に何度もあったんです。

その課題をなんとかしたいなーという思いから、THE BINGOを開発しました。結婚式の二次会のビンゴがもっと簡単にできるようになればいいなと。準備は面倒ですが、実際やったら面白いですし！

THE BINGOは全然流行っていないのですが、最近は月に2回ほど20〜50人の団体がどこかでビンゴ大会をしています（今日も30名の団体がTHE BINGOを使ってくれていました...🙏）。このサービスについては忘年会や結婚式の二次会とかに需要はあるはずなので、ゆっくりと育てていきたいと思っています。

どういう風にマネタイズするかは考え中です...。
いいアイデアがあればアドバイスください...🙏

-- ✂︎ --

『THE BINGO』は全てSemanticUIのCSSフレームワークに乗っかって作られています。Googleで『SemanticUI』を調べると、Qiitaに書いた記事が本家のページの次に出てくるようになりました。QiitaのSEO対策は本当にすごい...。

また、Googleで『THE BINGO』を検索すると、Crieitで書いた記事が最上位にヒットします。QiitaもCrieitもしっかりとSEO対策もされているので、サービスのリリースが後は、両サービスに開発手法や、技術等のTipsなどを残しておくというのはとても有効だと思います。

https://crieit.net/posts/THE-BINGO-Tips

4. OFFICE CLOCK - リニューアル

概要：リニューアル
開発期間：1ヶ月と少し
リンク：https://offieclock.work

『OFFICE CLOCK』『BLOCK CLOCK』『THE BINGO』の3つのサービスをリリースしてみて、流行ったサービスは一つもありませんでしたが、『OFFICE CLOCK』だけは徐々にユーザーも増え、法人からのお問い合わせも来るようになってきました。

『新しいサービスを作る』ということは今年チャレンジできたので、『既存のサービスをスケールさせる』ことを来年はやってみようと思い『OFFICE CLOCK』をリニューアルする流れになりました。前のバージョンがスマホに対応していなかったので、デザイン周りをリプレイスして、要望が多かった機能を追加しました。

リプレイス後にユーザーインタビューをすると『改悪だ』『前回のほうが見やすかった』『あの機能を残して欲しかった』等の意見があり、リニューアルが成功したとは言い難い結果となってしまいました...。でもあれですね、この酷評は伸びしろですね。粛々と育てていこうと思っています。

意見をいただけるのはとてもうれしいことなので、どんどん使って頂いて、フィードバックいただければうれしいと思っております！要望や改善はロードマップで確認することもできます。

[アンケート]
https://goo.gl/forms/0CSVb2GLb96HAjWA2

[ロードマップ]
https://trello.com/b/4ch8BRyP/officeclock

そして管理機能を追加して、今年中のリリースを目指して絶賛開発中です。

2. 技術的要素について

個人開発で用いた技術については、下のアドベントカレンダーに2018/12/20日の枠で書きます！
https://crieit.net/advent-calendars/2018/technology

3. サービスを作るときに大切だと思うこと

自分のサービスに共通していること

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

https://blog.notsobad.jp/entry/2018/02/17/092358

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

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

Pieter Levels氏のこの言葉にとても共感しました。

今年作った3つのサービス『OFFICE CLOCK』『BLOCK CLOCK』『THE BINGO』に共通していることは、『自分が本当に困っていること』を解決するためのサービスを作っています。というか、結果的にそういう風な作り方をしていました。自分が困っていることは、他の人も困っている確率が高いと思うので、そういった人たちに刺さるんじゃないかと...。刺さらなくても自分の困っていることは解決できているはずなので、自分だけは使うサービスになるんしゃないかと思うんですよね。

実際に僕は毎月の勤務表は『OFFICE CLOCK』で作成して提出していますし、開発に集中したいときは『BLOCK CLOCK』をONにしてSNSをシャットダウンして集中力を高めていますし、11月にあった結婚式の二次会では『THE BINGO』を使ってビンゴ大会を開催して、一番最初にビンゴになってしまい電動歯ブラシをゲットしてとても気まずい感じになりました...。

これは完全に自給自足個人開発者です。自分が欲しいものは自分で作る、そして使う...。2019年は脱・自給自足個人開発者です。せっかく作ったサービスなので、もっといろんな人に知ってもらって使ってもらいたいですね。

モチベーションの維持について

モチベーションって中々湧いてこないですよね。湧いてきても維持するのが難しい...。僕はモチベーションに頼らずに、朝の2時間は個人の作業時間を設けるということを習慣化しています。モチベーションが低い日も、天候が悪い日も、飲みすぎた次の日も6時に起きて、7時30分にはパソコンを開いている状態を作る、ということを心がけていました。もちろん実践できない日もありますが、習慣化すればモチベーションに頼らずに自然と作業することができるます。

2018年はモチベーションに頼らずに、朝早く起きて作業する習慣が作れたのはとても良かったと思っています。

健康の維持について

どうしてもモチベーションが上がらないときってありますよね。どうも調子良くない...モヤモヤする...。っていうとき。そういうとき僕はランニングをします🏃💨 運動した後にはドーパミンがでるので集中力が高くなり作業の効率が格段に上がります。少し詰まったなーと感じるときや、集中力が切れてしまったときは汗をかいて運動することにしています。最近は筋肉エンジニアの方も増えてきていますが、エンジニアの人が体を動かすことはとても良いことだと思うので、健康の維持のためにも、運動はオススメです！

僕は25歳からランニングを始めて、月に100.0km走る生活を3年ほど続けていました🏃💨 ここ最近は仕事が忙しくなってしまったのと、他のことに時間をつかってしまっているため月に50.0km程度しか走れていませんが、走ることで作業中の集中力が高くなるので欠かせなくなっています。

4. 運営者ギルドについて

個人開発をスタートしてから、個人開発者のSlackコミュニティ『運営者ギルド（ギルド）』に参加するようになりました。ギルドでは100人以上がそれぞれ自分のプロダクトを開発・運用しており、様々な技術や知見を共有できるSlackのコミュニティです。

これまでの『個人開発』は独りでの開発でしたが、このコミュニティができたことにより、『個人開発』は独りの開発では無くなったと思います。色んなメンバーが集まって、フィードバックをくれたり、詰まったところを丁寧にアドバイスをくれたりしています。これまで独りで悩んでいた部分を、メンバーから意見をもらい開発ができる場ができました。

僕もこのコミュニティの人たちから恩恵をもらいながら、この一年開発することができました。メンバーの皆さんには本当に感謝しています🙇 本当にありがとうございます！

そしてこのCrieitを運営しているdalaさんにもアドバイスをいただいたり、僕のサービスをシェアしもらったり色々とお世話になりました。dalaさんも素晴らしいエンジニアの一人で大変尊敬していますので、今後ともよろしくお願い致します。まだお会いしたことはありませんが、機会があれば飲みに行きましょう🍻🍻

5 . 2019年の豊富

来年は以下のことを取り組みたいと思っています。

個人サービスを収益化する
- 法人化
- サブスクリプションの仕組みを構築
バズ系のサービスを作る
健康な身体を維持する

2019年も頑張ります！

『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プラン：来月は無料プランに切り替える

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

まとめ

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

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

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

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

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

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

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

もう絶対にやめられない。ホットリロード開発環境を手に入れる。

2018-07-16T07:53:17+09:00

ホットリロードとは？

ローカル開発環境（http://localost:8080/）でフロント側の開発しているとき、僕は今まで
①ファイル編集 → ②保存 → ③ブラウザでcommand + R...を繰り返し確認していました。

が、ホットリロードを取り入れると、①ファイル編集 → ②保存した瞬間に、編集したファイルを読み直してストレスなく開発を進めることができます（最近知りました...orz）。これは知っているのと、知っていないのでは開発のスピードが全然違ってくるので、一度試してみる価値はあるかもしれません...。

とても簡単に構築することができるのでぜひ試してみて下さい。

ホットリロードの環境構築

ホットリロードにはvueのcliでもなく、React Hot Loaderでもなく、npmの『live-server』というプラグインを使います（おそらくこれが一番簡単）

※npmコマンドは事実行できる環境にしておいてください

以下のコマンドをターミナルで実行します。

$ npm install -g live-server

$ cd <開発のディレクトリ>

$ live-server .

確認

[http://127.0.0.1:8080/](http://127.0.0.1:8080/)

or

[http://localost:8080/](http://localost:8080/)

このコマンドででホットリロードで開発できるローカル開発環境が手に入るので、ぜひ試してみてください！

MacにWindowsOSを入れて動かしてみる

2018-06-04T15:12:19+09:00

タイトルを見て『WindowsPC使えばいいじゃん』と思った方...。
その通りなんです。

WindowsPCを使えばいいんです...！

しかし、それだと、この記事が終了してしまうので、せっかくなのでやってみましょう！
MacOSにWindowsOSを入れて動かしてみます。
正確にはMacにあるVirtualBoxにWindowsOSを入れて動かしてみます。

なぜMacにWindowsOSを入れたいのか？

MacでWebアプリケーションを開発しているときに、IEやedgeといったマイクロソフトが提供している
ブラウザでテストをしなければならない場面がありました。

シミュレーターで表示した場合と、WindowsのPCで表示した場合で異なる結果になることが多々ありました。
結局『WindowsOSでIEを開かないと意味がない』という結論になりました。

WindowsPCも渡されていますが、テストのためだけに電源を入れるのって億劫ですよね...。
なのでVirtualBoxにWindowsOSを入れて、テストの時だけ立ち上げてIEとedgeで確認をしたいというのが、発端になります。

1.VirtualBoxをインストール

まずはVirtualBoxをインストールします。（VirtualBoxはLinuxを利用したOSの一つであり無償で利用できます）

https://www.virtualbox.org/wiki/Downloads

2.WindowsOSのvirtual machinesをインストール

実はテスト用のバーチャルマシンをマイクロソフトが提供しています。
※かなり重厚なため覚悟したほうがいいです...。
https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/#downloads

3.VirtualBoxを立ち上げてOSファイルをインポートする

『ファイル』 → 『インポート』から先ほどインストールしたファイルをインポートします。

4.インポートしたOSを起動する

インポートしたバージョンのOSが左に出てくるので起動します。

4.IE、edge起動！

MacでWindowsOSが立ち上がりました！
edgeとIEを確認してみます。

edge確認

IE確認

まとめ

かなり面倒くさいし、PCにも負荷をかけるのでWindowsPCを確保して確認するのが一番いいと思います。

参考↓↓
http://www.wegirls.tech/entry/2017/03/07/195733