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>


アプリの画面

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

<h2>SPA(React)のログイン処理の脆弱性について</h2>
<p>railsでログイン処理を作ったときに勉強になったことがあったので書き記したいと思います。</p>
<p><a href="https://github.com/heartcombo/devise">devise</a>と<a href="https://github.com/lynndylanhurley/devise_token_auth">devise_token_auth</a>を使った時のことです。<br>
ログイン時にリクエストが成功した際は<code> access-token,client,uid</code>の3つのheader情報をreact側に返すようにしていました。</p>
<p>そして、その情報をreact側でcookieに保存していました。（webstorageよりcookieの方が安全と聞いていたため）<br>
その時は、react側であらゆるAPIに対してのリクエストをこんな感じで書いていました。</p>
<pre><code>export const client = axios.create({
    baseURL: 〇〇
});
</code></pre>
<pre><code>import Cookies from &quot;js-cookie&quot;

client.get(&quot;/auth/sessions&quot;, { headers: {
    &quot;access-token&quot;: Cookies.get(&quot;_access_token&quot;),
    &quot;client&quot;: Cookies.get(&quot;_client&quot;),
    &quot;uid&quot;: Cookies.get(&quot;_uid&quot;)
  }})
</code></pre>
<p>しかし、この方法ではセキュリティ的に安全とは言えませんでした。<br>
なぜなら、cookieではhttponly属性と言うものがありこれを使うことによりjavascriptを使った攻撃を弾くことができます。（cookieを取得できないようにできる）</p>
<p>ですが、<strong>javascriptでcookieファイルを作り出して、httponly属性を付与すると取得ができないファイルと化してしまうため、必然的にhttponly属性の付与が不可能でした。</strong><br>
(根本的にhttponly属性はサーバー側に付与してもらうのが普通のようです。)<br>
<a href="https://stackoverflow.com/questions/14691654/set-a-cookie-to-httponly-via-javascript">https://stackoverflow.com/questions/14691654/set-a-cookie-to-httponly-via-javascript</a></p>
<p><strong>つまり、フロント側で生成したcookieはhttponlyを付けていないcookieとなるため、webstorageと全く一緒でセキュリティ的リスクがあります。</strong><br>
あとは単純にユーザがブラウザの開発者コンソールから見た時に「このアプリのtoken、httponly付けてないじゃん、、」と思われ、不安を煽ってしまうのもデメリットだと思います。</p>
<p>そのため、apiからhttpolnyを付与したcookieファイルをgetしてcredetialsオプションを付けてあげる必要があります。</p>
<pre><code>export const client = axios.create({
    withCredentials: true,
    baseURL: 〇〇
});
</code></pre>
<p>そしてrails側(API側)でも<code>credentials</code>をオンにすることでクロスドメインでcookieのやりとりをできるようにします。<br>
そうすることによってAPIからhttponly属性を付与したcookieをreactに共有することができました。<br>
ログイン処理のセキュリティリスクは出来るだけ排除したいので気をつけながら開発しましょう！</p>


SPA(React)でログインを実装する時にフロント側のCookieにtokenを保存してはいけない

<p>今回はreact（フロントエンドだけ）でwebページをpdfにして出力する方法をいくつか<br>
紹介していきたいと思います。</p>
<h3>jspdfとhtml2canvasを使って一旦画像に変換してからをpdfにする</h3>
<p>メリットとしては画像なので文字化けや表示がおかしくなることがほとんどありません。<br>
デメリットなのはpdfといっても画像を埋め込んでいるだけなので文字の選択やコピーができません。</p>
<p><a href="https://www.npmjs.com/package/jspdf">jspdf</a><br>
<a href="https://www.npmjs.com/package/html2canvas">html2canvas</a></p>
<p>下記が例のコードです。</p>
<pre><code>import React from &quot;react&quot;;
import &quot;./styles.css&quot;;
import jsPDF from &quot;jspdf&quot;;
import html2canvas from &quot;html2canvas&quot;;

export default function App() {
  const printDocument = () =&gt; {
    const input = document.getElementById(&quot;test&quot;);
    html2canvas(input).then((canvas) =&gt; {
      const imgData = canvas.toDataURL(&quot;image/png&quot;);

      const pdf = new jsPDF();
      pdf.addImage(imgData, &quot;PNG&quot;, 20, 20);
      pdf.save(&quot;download.pdf&quot;);
    });
  };

  return (
    &lt;div className=&quot;App&quot; id=&quot;test&quot;&gt;
      &lt;p&gt;test&lt;/p&gt;
      &lt;button onClick={printDocument}&gt;PDF&lt;/button&gt;
    &lt;/div&gt;
  );
}

</code></pre>
<h3>jspdfでhtmlElementからpdfにする</h3>
<p>文字やcssが消えることが多いです。<br>
使い方によっては上手く運用できるかもしれませんが私の試した限りだとダメでした。</p>
<h3>kendo-reactを使う</h3>
<p><img src="https://storage.googleapis.com/p_6263ddbb8c2f5900186544b5/1da40d4a-ffda-46ee-9d05-1a20fe29c6dc%2Fkendo-react.png" alt="kendo-react.png"><br>
<strong>これが一番綺麗に出力できました。</strong><br>
有料ですが、npmにpackageが公開されているのでお試しに挙動を確認するだけなら一応無料で使えます。<br>
(運用するならちゃんとライセンスを購入しましょう..)</p>
<p><a href="https://www.telerik.com/kendo-react-ui/components/">kendo-reactのURL<br>
</a></p>
<p>下記がpdf出力をする際に使うnpmのpackageです。</p>
<ul>
<li><a href="https://www.npmjs.com/package/@progress/kendo-drawing">@progress/kendo-drawing</a></li>
<li><a href="https://www.npmjs.com/package/@progress/kendo-licensing">@progress/kendo-licensing</a></li>
<li><a href="https://www.npmjs.com/package/@progress/kendo-react-pdf">@progress/kendo-react-pdf</a></li>
</ul>
<h3>googleの印刷機能からpdfを出力をする</h3>
<p>正直これでも問題ないかと思います。<br>
ちゃんと文字をpdf文書の文字もコピーできますし、文字化けの心配もありません。<br>
表示できるページからしかpdf出力できないのは仕様上仕方ないですが微妙ですね....<br>
<img src="https://storage.googleapis.com/p_6263ddbb8c2f5900186544b5/072fce3f-76fd-4757-8f92-4e21140f5ed0%2Fgoogle_pdf.png" alt="google_pdf.png"></p>
<hr>
<p>個人的には有料にはなりますがkendo-reactが一番使いやすく綺麗に文書をコピーできるpdfが出力できたのでおすすめです！</p>
<p>また、実際に詳しいコードが見たい方は<a href="https://codesandbox.io/search?query=&amp;page=1&amp;configure%5BhitsPerPage%5D=12&amp;refinementList%5Btemplate%5D%5B0%5D=create-react-app">codesandbox</a>で検索をすると参考になるプロジェクトがたくさん見つかるのでぜひ試してみてください！</p>


pdfのアイコン

React(フロントエンド)でpdfを出力したい時の方法まとめ

<h2>概要</h2>
<p>Viteというビルドツールの紹介と型チェックを導入する手順の説明です。<br>
(2022年6月6日段階では最新はv2.9.9です)</p>
<p>Viteは .ts ファイルのインポートをサポートしていますが、ファイルのトランスパイルだけを行い、型のチェックは行いません。<br>
Viteでの型チェックは、IDEやビルド時に行われることを前提としています。<br>
これはとても不便ですし、しっかりエラーが出ないとTypescriptのメリットが薄れてしまいます。</p>
<p>そこで困っている人に<a href="https://github.com/fi3ework/vite-plugin-checker">vite-plugin-checker</a>とライブラリがおすすめです。<br>
これを使えばViteでもリアルタイムで型チェックをしてくれますし、Vite自体も従来のビルドツールに比べて、高速で動作するので鬼に金棒です。</p>
<h2>Viteで型チェック導入</h2>
<p>まずはライブラリを導入します。</p>
<pre><code>yarn add vite-plugin-checker -D
</code></pre>
<p>vite.config.tsにコードを記述します。</p>
<pre><code>import checker from 'vite-plugin-checker';

export default defineConfig({
    plugins: [checker({ typescript: true })],
});
</code></pre>
<p>これだけでリアルタイムの型チェックを行ってくれます。<br>
とても便利なのでViteとTypescriptを使いたい人は導入しない手はないでしょう。</p>


#Typescript

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

SPA(React)でログインを実装する時にフロント側のCookieにtokenを保存してはいけない

React(フロントエンド)でpdfを出力したい時の方法まとめ

ViteでTypescriptの型チェックをする方法