こんにちは。 Dogecoinのノードの同期が終わるまでの間の時間でブログを書こうと思います。 今回紹介するのはAPWineという、利回りをトークン化して売却できるプロトコルです。 早速概要を見ていきましょう。<h2 id="h9707d3a59a">概要</h2>APWine (<a href="https://apwine.fi" target="_blank" rel="noopener noreferrer">https:&#x2F;&#x2F;apwine.fi</a>, <a href="https://twitter.com/APWineFinance" target="_blank" rel="noopener noreferrer">https:&#x2F;&#x2F;twitter.com&#x2F;APWineFinance</a>)は、”未実現利回りをトークン化し、取引できるプロトコル&quot;です。 DeFi Alliance等からシードラウンドで$1Mの調達を行なっており、トークンの発行を計画しています。（まだトークンは発行されておらず、トークンエコノミーの概要が示されているに留まります） 監査途中であることから、現在はベータ版としてではありますがメインネットでリリースされています。 現時点では、aDAI(Aaveの利子付きトークン)、yyUSD(Yearnの利子付きトークン)、iFarm(Harvest Financeのトークン$FARMの利子付きトークン) の3つがサポートされており、ユーザーはこの3つの利子付きトークンをデポジットすることによって利子部分と元本部分をそれぞれトークン化し、利子部分のみをマーケットで売却することによって先に、向こうN日間の利子を獲得することができます。 （現在はN=30のみ対応だが、将来的にはNの種類が増える） そして、所定の日時が経ったのち、元本部分を表したトークンと引き換えに、元の利子付きトークンが返還されます。<h2 id="ha7c0df1604">詳細な仕組み</h2>大まかな仕組みは上記で説明しましたが、ここからは仕組みを詳しく見ていきましょう。 初めに、ユーザーがコントラクトに対象資産をデポジットすると、Future Yield Tokens (FYT)、APWINE IBTの二つのトークンが発行されます。 FYTは、対象資産から発生する指定期間内での利回りを、APWINE IBTはコントラクトにロックされた対象資産に対する所有権を表します。 そしてFYTを発行したユーザーはそれを市場で売却することで、市場で取引されている価格で将来の利回りを獲得することができ、期間の終了後にAPWINE IBTと原資産を交換することができます。 APWINE IBTと原資産を交換しない場合は、自動でロールオーバーされ、また新しい期間のFYTを取得することができます。 逆にFYTを購入したユーザーは、期間の終了後にFYTと引き換えで、利回りを獲得することができます。 この時、FYTを購入した価格 &lt; 実際に得られた利子であれば購入者の勝ち、FYTを売却した価格 &gt;実際に得られた利子であればFYTの発行・売却者が勝ちとなります。 このように、このプロトコルは金利先物のような性質を持っています。 そのため、発行・償還には触れず、FYTのトレードのみを行なうことももちろん可能です。 また、トークンエコノミーの一部として、発生した利回りの一部はDAOに徴収され、独自トークン保有者に報酬として渡されるような設計になっています。<h2 id="h3bcda3e6b0">最後に</h2>今回はAPWineについてのブログでした。 不定期に気になるプロトコルで注目を浴びていないものがあれば紹介しますので、今後ともよろしくお願いします🤲

利回りをトークン化して売却できるプロトコル、APWineについての記事です。

APWineについて

こんにちは。 今日、HTMLから画像を生成するAPIを作成したので、それについての記事を書いていきます。<h2 id="hcce6a8de97">動機</h2><a href="https://blog.ojisan.io/jsx-preview" target="_blank" rel="noopener noreferrer">https:&#x2F;&#x2F;blog.ojisan.io&#x2F;jsx-preview</a> このブログを見て、サーバーサイドでdom-to-imageのようなことをやるのはどうすればいいかなと思い、学習のために作ってみました。<h2 id="hd4d34ed888">技術</h2>特に真新しい技術は使っていません。 ただ、よく使われるnode-canvasは使っていません。 Node.js上でHeadless Chromeを動かせる<a href="https://github.com/puppeteer/puppeteer" target="_blank" rel="noopener noreferrer">Puppeteer</a>というライブラリを使い、HTMLをChromium上にレンダリングさせて、それのスクリーンショットを撮っているという形です。 そのスクリーンショットをCloud Storageにアップロードして永続化しています。 最初はVercel上にデプロイしようと思いましたが、Vercelの裏側のLambdaではaws-lambda-chromeというライブラリを入れないとHeadless Chromeを動かすことができませんでした。またこのライブラリが相当重く、追加で日本語フォントなどを入れるとVercelのサイズ制限に引っかかりそうだったので、Vercelはやめて、Cloud Functionsにデプロイすることにしました。 お金がないので、nodejs8を使うことで無料で動かしています。 また、独自ドメインでの運用のために、Firebase Hostingも使用しています。 余談ですが、Cloud Functions for Firebaseのnodejs8って、サポートがもうちょっとで終わるからなのか、コンソールからいきなり消えたりしますね。どうやらFirebaseのコンソールから消えても、関数自体が消えているわけではなさそうです。<h2 id="h4d849f4362">使い方</h2>https:&#x2F;&#x2F;ogp.dai.gd&#x2F;api&#x2F;ogp&#x2F; に、POSTリクエストを送ります。 リクエストボディーは以下のような感じです。<pre><code>{
 html:&quot;画像化したいHTML&quot;
}</code></pre>正常に画像への変換に成功すると、以下のようなレスポンスが得られます。<pre><code>{
 success:true,
 URL:&quot;https:&#x2F;&#x2F;storage.googleapis.com&#x2F;create-ogp.appspot.com&#x2F;一意なID.png&quot;
}</code></pre>このURLから、作成された画像を参照することができます。 お読みいただきありがとうございました。

htmlから画像を出力するAPIを作りました。

HTMLを飲ませると画像を返すAPI作った

※この記事は著者(<a href="https://dev.to/burhanuday" target="_blank" rel="noopener noreferrer">@burhanuday</a>さん)に許可を取り、<a href="https://dev.to/burhanuday/using-ant-design-with-nextjs-custom-variables-for-ant-design-57m5" target="_blank" rel="noopener noreferrer">https:&#x2F;&#x2F;dev.to&#x2F;burhanuday&#x2F;using-ant-design-with-nextjs-custom-variables-for-ant-design-57m5</a>を日本語に翻訳したものです。 Next.jsの学習のために新しいプロジェクトを始めましょう。NextjsとAnt Designを利用したプロジェクトをセットアップしたとき、私は最初の問題に直面しました。Ant DesignをNext.jsと共に使うのはかなり簡単ですが、Custom Variableを利用しようとすると厄介なことになります。 Next.jsのの新しいプロジェクトは、次のように作成できます。<pre><code>yarn create next-app app-name</code></pre>もしくは、<pre><code>npx create-next-app app-name</code></pre>このように作成することもできます。 Next.jsプロジェクトの中で、Ant Designを次のようにインストールしましょう。<pre><code>yarn add antd</code></pre>もしくは、<pre><code>npm install antd</code></pre>このように作成することもできます。 プロジェクトのルートディレクトリの中の&quot;styles&quot;フォルダーに、”antd.less”と呼ばれるファイルを作成しましょう。 もし”styles”フォルダーを利用していなければ、新たに作成しましょう。 ”antd.less”は、全てのCustom Variableが置かれる場所です。 antd.less:<pre><code>@import &quot;~antd&#x2F;dist&#x2F;antd.less&quot;;

@primary-color: #000; &#x2F;&#x2F; primary color for all components
@link-color: #1890ff; &#x2F;&#x2F; link color
@success-color: #52c41a; &#x2F;&#x2F; success state color
@warning-color: #faad14; &#x2F;&#x2F; warning state color
@error-color: #f5222d; &#x2F;&#x2F; error state color
@font-size-base: 14px; &#x2F;&#x2F; major text font size
@heading-color: rgba(0, 0, 0, 0.85); &#x2F;&#x2F; heading text color
@text-color: rgba(0, 0, 0, 0.65); &#x2F;&#x2F; major text color
@text-color-secondary: rgba(0, 0, 0, 0.45); &#x2F;&#x2F; secondary text color
@disabled-color: rgba(0, 0, 0, 0.25); &#x2F;&#x2F; disable state color
@border-radius-base: 4px; &#x2F;&#x2F; major border radius
@border-color-base: #d9d9d9; &#x2F;&#x2F; major border color
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); &#x2F;&#x2F; major shadow for layers</code></pre> 上記のCustom Variableはあなたが望むように変更することができます。 詳細を知りたい場合は、Ant Designのカスタマイズに関するドキュメントをご覧ください。 &quot;pages&quot;ディレクトリに&quot;_app.js&quot;と呼ばれるファイルを作り、以下の内容を記載します。 _app.js<pre><code>import React from &quot;react&quot;;
import App from &quot;next&#x2F;app&quot;;

import &quot;..&#x2F;styles&#x2F;antd.less&quot;;

class MyApp extends App {
 render() {
 const { Component, pageProps } = this.props;

 return &lt;Component {...pageProps} &#x2F;&gt;;
 }
}

export default MyApp;</code></pre> &quot;_app.js&quot;内でその他のグローバルスタイルをインポートすることもできます。 現在、このCustom Variableには効果がありません。これを適用させるために、これらのパッケージをインストールする必要があります。<pre><code>yarn add @zeit&#x2F;next-css @zeit&#x2F;next-less @zeit&#x2F;next-sass babel-plugin-import less</code></pre>または、<pre><code>npm install --save @zeit&#x2F;next-css @zeit&#x2F;next-less @zeit&#x2F;next-sass babel-plugin-import less</code></pre>そして、先ほどのCustom Variableを適用させるため、カスタムされたNext.js Configを作成する必要があります。 next.config.js:<pre><code>const withSass = require(&quot;@zeit&#x2F;next-sass&quot;);
const withLess = require(&quot;@zeit&#x2F;next-less&quot;);
const withCSS = require(&quot;@zeit&#x2F;next-css&quot;);

const isProd = process.env.NODE_ENV === &quot;production&quot;;

&#x2F;&#x2F; fix: prevents error when .less files are required by node
if (typeof require !== &quot;undefined&quot;) {
 require.extensions[&quot;.less&quot;] = (file) =&gt; {};
}

module.exports = withCSS({
 cssModules: true,
 cssLoaderOptions: {
 importLoaders: 1,
 localIdentName: &quot;[local]___[hash:base64:5]&quot;,
 },
 ...withLess(
 withSass({
 lessLoaderOptions: {
 javascriptEnabled: true,
 },
 })
 ),
});</code></pre> このConfigを書くことで、プロジェクト内でlessとsassとcss moduleを利用できるようになります。Ant Design用のCustom Variableも適用されるようになります。

Next.jsとAnt Designを利用する際の設定に関する記事です。

Next.jsでAnt Designを利用する(Ant DesignのCustom Variable)

こんにちは。最近は全くブログを更新していませんでした。 今回は、最近作成したURL短縮サービスのAPIの紹介をします。 このAPIを利用して作ったURL短縮サイトはこちらです→<a style="color:#143148" href="https://dai.gd/" target="_blank" rel="noopener noreferrer">dai.gd</a> <h2 id="h9f08ecbe93">このAPIについて</h2>このAPIは、RESTというメジャーなAPIの仕様に基づき作成しました。 そのため、同じURLでも、HTTPのメソッドが異なると違う操作がサーバー内で行われることになります。 つまり、URLは行う操作とは関係がなく、”何に対して”操作を行うのかという部分のみを示すのです。そして、”どのような操作をするのか”という部分はHTTPのメソッドで表すことになります。 今回のURL短縮APIを例に取ると、同じ”&#x2F;shortUrls”というURLでも、HTTPのPOSTを利用してAPIを叩くと、新しい短縮URLが作成され、GETを利用してAPIを叩くと短縮URLに紐付いた元のURLが返ってくるというような感じです。 <h2 id="h4f7b9bb5eb">APIの使い方</h2>単にURL短縮サイトを利用したいだけであれば、<a style="color:#143148;background-color:#ffffff" href="https://dai.gd/" target="_blank" rel="noopener noreferrer">dai.gd</a>のサイトをご利用ください。ここでは、APIの利用方法を説明します。 前提：ホスト名は https:&#x2F;&#x2F;api.dai.gd&#x2F; です。 ①短縮URLを作成したい場合 &#x2F;shortUrls にPOSTメソッドでリクエストを送ってください。 このとき、リクエストボディーには、JSON形式で、 {url:”https:&#x2F;&#x2F;www.dai-blockchain.tech”} のように、urlというフィールドに短縮したいURLを入力してください。 正常に短縮URLが作成された場合、URLと、URLからhttps:&#x2F;&#x2F;dai.gd&#x2F;を除いたid（下記のGETメソッドで利用）と、成功したことを表すメッセージが返ってきます。 ②短縮URLから元のURLを知りたいとき &#x2F;shortUrls にGETメソッドでリクエストを送ってください。 このとき、クエリストリングのidパラメーターに、短縮URLのhttps:&#x2F;&#x2F;dai.gd&#x2F;を除いた部分（https:&#x2F;&#x2F;dai.gd&#x2F;Ms7FuItUd が短縮URLであれば、idパラメータはMs7FuItUd）を含めてください。 例: shortUrls?id=Ms7FuItUd 正常に短縮URLに紐付いた元のURLが見つかった場合、元のURLが返ってきます。 <h2 id="hcd5c8f1d42">エラーメッセージ</h2>①： Bad Request.Please include the URL you want to shorten in the request body. 説明：POSTメソッドで新しい短縮URLを作ろうとした際、bodyのurlフィールドに短縮したいURLが含まれていなかったことを意味します。 解決策：URLを含んで再度リクエストを送ってください。 ②Bad Request. Invalid URL. 説明：POSTメソッドで新しい短縮URLを作ろうとした際、bodyのurlフィールドに存在するURLの形式が正しくなかったことを意味します。 解決策：URLの形式を確認してください。 ③Bad Request. Please include the ID in the query. 説明：GETメソッドで短縮URLに紐付いた元のURLを取得しようとした際、クエリストリングのidパラメーターが存在しなかったことを意味します。 解決策：idパラメーターに短縮URLのID（短縮URLからhttps:&#x2F;&#x2F;dai.gd&#x2F; を覗いた部分）を含めてください。 ④No URL was found that matches the ID you were looking for. 説明：GETメソッドで短縮URLに紐付いた元のURLを取得しようとした際、該当するIDに紐付いたURLが見つからなかったことを意味します。 解決策：正しいIDがクエリストリングのidパラメーターに含まれているかを確認してください。同じ文字でも大文字と小文字は区別されます。 また、数字の0とアルファベットのOや、数字の1とアルファベットの l（エル）とアルファベットの大文字のI（アイ）等は特に間違えやすいので、それらも確認してください。 ⑤Method Not Allowed,Only GET and POST can be used. 説明：サーバーがGET・POST以外のメソッドでリクエストを受けたことを意味します。V1ではGET・POST以外のメソッドを利用することはできません。 解決策：用途に応じて、GETもしくはPOSTを利用してリクエストを行ってください。 <h2 id="hf42cac461b">余談：技術スタック</h2><a style="color:#143148" href="https://dai.gd/" target="_blank" rel="noopener noreferrer">dai.gd</a>のサイトを制作するのにはNext.jsを用い、ホスティングにはnowを使用しています。 また、短縮URLのIDと元のURLはCloud Firestoreに保存しています。 APIはNode.jsで書いており、APIのデプロイにはCloud Functionsを利用しています。また、カスタムドメインとの紐付けのため、Firebase Hostingも利用してます。 このように、このサービスは一切サーバーを持たないサーバーレスの設計となっています。サーバーレスのプラットフォームは初期費用を抑えられ、なおかつ面倒な設定もなく使えるものが多いので、使ってみてはいかがでしょうか。 お読みいただきありがとうございます。

作成したURL短縮サービスについての記事です。