Heap Technology

<h1>忙しい人の救世主！電子レンジ変換アプリが登場</h1>
<p>こんにちは！今日は、お昼休みの時間を効率的に使いたいと思っている方々に朗報です。待望の電子レンジ変換アプリがついにリリースされました！<br>
アプリの詳細はこちら：<a href="https://microwave-oven-conversion.heap-technology.com">電子レンジ変換アプリ</a></p>
<h2>このアプリが生まれた理由</h2>
<p>僕は会社のお昼休みを冷凍食品で済ませることがよくあります。<br>
しかし、いつも同じ疑問が頭をよぎるんです。それは、「この冷凍食品、600Wで5分と書いてあるけど、900Wの電子レンジだと何分でいいんだろう？」ということ。<br>
そんな問題を解決できるアプリがあればいいなと思い、開発に着手しました。</p>
<h2>アプリの特長</h2>
<h3>瞬時の時間変換:</h3>
<p>任意のワット数での調理時間を入力すると、目的のワット数に対応した新しい調理時間を瞬時に計算します。</p>
<h3>直感的なインターフェース:</h3>
<p>シンプルなデザインで、誰でもすぐに使いこなせます。</p>
<h3>複数のワット数設定</h3>
<p>様々なワット数の電子レンジに対応しています。</p>
<h3>完全無料:</h3>
<p>お金は一切かかりません。気軽に使ってください！</p>
<h2>なぜこのアプリが便利なのか？</h2>
<ol>
<li>調理時間の誤算を防ぎ、料理の品質が向上します。</li>
<li>経験不足の料理人でも簡単に調理時間を計算できます。</li>
<li>スマートフォンやタブレットからすぐにアクセスできます</li>
</ol>
<h2>簡単な使い方について</h2>
<ol>
<li>アプリを開き、現在使っている電子レンジのワット数と調理時間を入力します。</li>
<li>「変換」ボタンをクリックすると、新しいワット数と調理時間が表示されます。</li>
<li>それに従って料理をして、美味しく召し上がれ！</li>
</ol>
<h2>最後に</h2>
<p>この電子レンジ変換アプリは、調理時間を手軽に計算できる画期的なツールです。忙しい日々の中で少しでも料理のプロセスをスムーズにしたい方は、ぜひ使ってみてください。それでは、美味しいお昼をお楽しみください！</p>


アプリの画面

【個人開発】電子レンジ変換アプリをリリースした件

<p>今回は個人開発で作ったサービスをバズらせる時にぶち当たる壁について話します。</p>
<h2>なぜ渾身の個人開発アプリに人が集まらないのか</h2>
<p>開発ツールの発展が目紛るしい現在、今更よくあるSNS(twiiterクローンアプリ)とか作ってもwebの深海に一瞬で埋没します。<br>
これはなぜtwiiterやInstagramではなく自分のSNSに人が集められるのかその導線を説明ができないからです。<br>
ある程度既存のサービスより優れていた点があったとしても人口が多く使い慣れたものの方がユーザからすると結果的に便利なことがほとんどです。<br>
そんな中でもユーザを増やせるのは他のアプリケーションと比べてどこかが尖っているからでしょう。</p>
<p>しかし、最新の技術でレッドオーションな分野のアプリを作ろうにも個人でかけれる時間やお金には限りがあるため個人開発には不向きですし、完成しても企業が製品として出してるものと比べれると使える機能が少なくなりお粗末になりがちです。</p>
<h2>ではどうしたらユーザは増やせるのか</h2>
<p>絵の共有サービスを作ることを例として考えてみましょう。<br>
当然ながらサービスを作った時はまだユーザはいません。<br>
この場合は必要なユーザは絵を<strong>投稿してくれるユーザ</strong>です。しかし、まだほとんど絵が投稿されていない段階であなたの作ったサービスに時間をかけて描いた絵を投稿してくれるユーザははたして居るのでしょうか？</p>
<p>この解決策としてはあなたが初期ユーザになればアプリのコンテンツは増え、結果的にそのコンテンツを見るためにユーザは増える可能性があります。ここで問題になるのがそのコンテンツをあなたが投稿し続けられるのかという点です。<br>
良質なコンテンツを投稿できるならそれはあなたに向いているビジネスプランと言えるでしょう。</p>
<h2>有名サービスの例</h2>
<p>超有名な質問サービスの<a href="https://jp.quora.com/">Quora</a>もユーザを増やすために6カ月間、ひたすら自分たちでQ&amp;Aに質問/回答をし続け、コンテンツを増やしていった。ということを施策として話しています。<br>
なのであなたの作るサービスは自分でコンテンツを増やすことが可能かどうかというのがサービスをグロースさせるための一つのポイントだと思います。</p>
<p>長い目で見てサービスを継続運用するためにもランニングコストを極力抑えることにも気をつけましょう。</p>
<h2>最後に</h2>
<p>理屈は抜きにして、リリースしなければ何も始まらないので最低限の機能とデモのコンテンツを入れ、直感的に操作できるように出来ればさっさとリリースしてしまうのも一つの戦略だと思うのでまずは開発を頑張りましょう！</p>


個人開発のWebサービスで初期ユーザを集めるのは中々難しいって話

<h2>CloudIDEのススメ</h2>
<p>CloudIDEを使う際は開発環境を作る必要がないためとても便利です。<br>
手取り早く開発を始めたいときや世界中の人たちのコードを参考にしたい場合は見てみると勉強になります。<br>
今回はそんな便利なCloudIDEのサービスをいくつか紹介していきます。</p>
<h2>codesandbox</h2>
<p><a href="https://codesandbox.io/">codesandbox</a>はWeb上で利用するブラウザIDEの一つで、サイトにアクセスするだけでjavascript関連のフレームワークの開発環境を作ることができます。<br>
codesandboxでは以下のようなライブラリ・フレームワークに対応しています。<br>
※2022年6月30日時点の情報です。<br>
※codesandboxのホームに書いてあるものを載せているので実際には他のものも動くかもしれません</p>
<p>Vanilla,Typescript,React,Vue3,Angular,static,Node HTTP Server,remix-starter,Preact,Next.js,codesandbox-nuxt,Svelte,gatsby-starter-default,GSAP + Bonus Plugins Starter,blitz-js,docusaurus,CxJS.dojo-codesandbox-template,Reason,Adonis,Apollo<br>
Server,Ember,SaraVieira/gridsome-starter-codesandbox,@mdx-deck/basic-template,<br>
MarkoJSnestjs/typescript-starter,quasarframework/quasar-codesandbox,codesandbox-app/sapper-template,styleguidist/example,universal,VuePress,fastify-starter,p5.js</p>
<p><strong>下がcodesandboxです</strong></p>
<iframe src="https://codesandbox.io/s/gallant-pascal-03qr32" title="Plotly All Graph Types" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
<h2>StackBlitz</h2>
<p><a href="https://stackblitz.com/">StackBlitz</a>は、Webアプリケーション用のVisualStudioCodeを利用したオンラインIDEです。<br>
プラットフォームは、デスクトップバージョンと同じように応答性と適応性があります。</p>
<p>StackBlitzでは以下のようなライブラリ・フレームワークに対応しています。<br>
※2022年6月30日時点の情報です。<br>
※StackBlitzのホームに書いてあるものを載せているので実際には他のものも動くかもしれません</p>
<p>Next.js,Node.js,Nuxt3,JavaScript,TypeScript,React,Angular,Vue,RxJS,Solid.js,<br>
NestJS,Express,Koa,Egg.js,Feathers,GraphQL,jsonserver,JSONGraphQLServer,Remix,SvelteKit,preact,lit,Eleventy,Docusaurus,Slidev,Astro Blog,Astro,Docs,Nodeman,Vitest,Vite,Webpack</p>
<p><strong>下がstackblitzです</strong></p>
<iframe src="https://stackblitz.com/edit/react-ts-sravds?file=App.tsx" title="Plotly All Graph Types" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
<p><br/><br/></p>
<p>個人的にはstackblitzはJS界期待の新人の<strong>Solid.js</strong>に対応しているのが大きいですね。</p>
<p>codesandboxもstackblitzもフロントエンドフレームワークだけではなく、<strong>nest.js</strong>などのバックエンドのJSフレームワークも試せるのがかなりの魅了的だと思います。　<br>
バックエンドとフロントエンドの知識を両方つければ一人でアプリケーションの開発ができるようになるので開発ツールとしてだけでなく勉強ツールとしてもCloudIDEはかなり優秀だと思います。</p>
<p>逆にrailsやdjangoなどのフルスタックフレームワークを学びたい人は<a href="https://paiza.cloud/ja/">paiza.cloud</a>を使えば初学者でもつまづかずに勉強を継続できます。</p>


JSフレームワークの勉強はcodesandboxやstackblitzで学べば挫折しない

<h2>概要</h2>
<p>今回はreactのアプリケーションを自分のOSの中でreactを永続化して本番環境で起動したい場合は<a href="https://pm2.keymetrics.io/">pm2</a>と<a href="https://www.npmjs.com/package/serve">serve</a>を組み合わせて使うのが簡単なので説明します。(本番環境で使うことを推奨している訳ではありません)</p>
<h2>他の手段</h2>
<p>githubpageやnetlifyなどのデプロイツールを使わずにsystemdを使ったりnginxなどでbuildしたファイルを指定するのがパフォーマンス的にもいいですがとりあえずで起動したい場合は今回の方法が楽です。</p>
<h2>永続化の手順</h2>
<p>簡単に説明するとpm2は永続化するためのコマンドでserveはbuildしたファイルを公開するためのコマンドです。永続化の手順の説明をします。</p>
<p>手順1<br>
<code>npm install -g serve</code><br>
serveをグローバルにインストール</p>
<p><code> npm install -g pm2</code><br>
pm2をグローバルにインストール</p>
<p>手順2<br>
<code>npm build</code><br>
reactをビルドする</p>
<p>手順3<br>
<code> pm2 serve build 3001 --spa</code><br>
ポート番号を指定して公開</p>
<p>※例ではnpmコマンドを使っていますがyarnを使ってるならyarnコマンドでも大丈夫です。</p>
<p>これでとりあえずは永続化してreactアプリを動かすことができます。</p>


pm2を使って手軽にreactアプリを永続化(デーモン化)したい時の方法

<p><strong>今回はブログを作る際の方法について紹介していきます。　<br>
ブログの技術は大まかに4つの方法に分類されると思う。</strong></p>
<h2><strong>1.Wordpress</strong></h2>
<hr>
<p>WordPressはインターネット上のすべてのサイトのうち、43%の使用率を誇ります。<br>
シェア率がとても高いので困った時も調べれば情報が溢れているため、すぐに解決に向かうのもメリットです。</p>
<h2>2.ノーコード系ツール</h2>
<hr>
<p>初心者におすすめなのが<a href="https://studio.design/ja">STUDIO</a>や<a href="https://ja.wix.com/">Wix</a>などのノーコードツールです。<br>
コーディングやサーバーの設定など一切したくない場合におすすめです。</p>
<h2>3.フルスタックフレームワーク</h2>
<hr>
<p>プログラムを1からゴリゴリ書いて作りたい人におすすめです。<br>
RailsやDjangoなどを使いバックエンドのプログラムを書いて、HTMLなどのマークアップを書くという工程を全部したい人にはいいかもしれませんが、時間的なコストが掛かるので人を選びます。</p>
<h2>4.Jamstack構成</h2>
<hr>
<p>今ならJAmstack構成のブログが技術的にはモダンでパフォーマンスが高いです。<br>
<strong>事前にページを静的なHTMLとして変換しておくことで高いパフォーマンスとSEOを確立出来ます。</strong><br>
フロントエンド領域が得意ならnext.jsやnuxt.jsでブログのUI側を作り、microCMSやnewt等のサービスを使うのが良いと思います。</p>
<br>
<p><strong>方法はたくさんあるのでまずはリリースまでいけるように技術選定をして完成まで頑張りましょう。</strong></p>


ブログを開設するための方法をまとめてみた

<p>個人開発をするときの最適解の技術は日々変わっています。そこで私が思う個人開発を手軽にする技術を紹介していきます。</p>
<h2>1.API部門</h2>
<hr>
<ul>
<li><a href="https://firebase.google.com">Firebase</a><br>
ログイン処理、基本的なAPIはなんでも作れる万能なサービスです。Googleが提供しているのも◎。</li>
<li><a href="https://www.newt.so/">newt</a><br>
コスパ最強の日本のスタートアップが提供するAPIツールです。このサイトもバックエンドはnewtで動いています。</li>
<li><a href="https://microcms.io/">microcms</a><br>
同じく日本のスタートアップ企業のサービスです。ここ一年間でとてもバズッたサービスの一つでしょう。管理しやすいコンソール画面と公式の日本ドキュメントの多さは魅力です。</li>
</ul>
<h2>2.デプロイ先部門</h2>
<hr>
<ul>
<li><a href="https://jp.heroku.com/">heroku</a><br>
無料プランは数分アクセスしなければでサーバーがスリープしますが、監視ツールを使って定期的にページにアクセスをするなど工夫すれば無料の運用も出来ます。<br>
Dockerコンテナごとデプロイできたりして割と便利です。<br>
※追記<br>
どうやらherokuは無料プランは廃止になることが決まったそうです...<br>
<a href="https://forest.watch.impress.co.jp/docs/news/1435422.html">https://forest.watch.impress.co.jp/docs/news/1435422.html</a></li>
<li><a href="https://vercel.com/">vercel</a><br>
next.jsの開発元が出しているので安心してデプロイできます。無料プランだと商用利用ができません。</li>
<li><a href="https://www.netlify.com/">netlify</a><br>
コスパ最強で無料プランで商用利用も可能です。</li>
</ul>
<h2>3.IDE部門</h2>
<hr>
<ul>
<li><a href="https://www.jetbrains.com/ja-jp/">JetBrains</a><br>
IDEはこのシリーズが一強です。</li>
</ul>


#個人開発

【個人開発】電子レンジ変換アプリをリリースした件

個人開発のWebサービスで初期ユーザを集めるのは中々難しいって話

JSフレームワークの勉強はcodesandboxやstackblitzで学べば挫折しない

pm2を使って手軽にreactアプリを永続化(デーモン化)したい時の方法

ブログを開設するための方法をまとめてみた

個人開発が超手軽になる技術をまとめてみた