Firebase側で画像のサイズを変えることはできますがFirebase側への通信量を抑えたいと思ったのでブラウザ上でサイズを小さくすることにしたことのまとめです。 プロフィール画像を想定していて画像の最大幅がある程度は分かっていた流れがあります。 成果物 アップロードされた画像は canvas の drawImage() でリサイズされたものです。 ソースコード App.js import { useState } from "react"; import "./styles.css"; const uploadToFirestore = () => { console.log("画像をuploadしました"); //ダミー処理 }; const App = () => { const [uploadImg, setUploadImg] = useState(""); const handleUploadImg = (e) => { if (!e.currentTarget.files || e.currentTarget.files.length === 0) return; const fileReader = new FileReader(); const file = e.currentTarget.files[0]; if (file.type !== "image/jpeg" && file.type !== "image/png") return; fileReader.onloadend = () => { const fileImage = new Image(); fileImage.onload = () => { const uploadWidth = fileImage.width, uploadHeight = fileImage.height; const wantWidth = uploadWidth < 200 ? uploadWidth : 200, resizeRatio = uploadWidth / wantWidth, wantHeight = uploadHeight / resizeRatio; const canvas = document.createElement("canvas"); canvas.width = wantWidth; canvas.height = wantHeight; let ctx = canvas.getContext("2d"); ctx.drawImage(fileImage, 0, 0, wantWidth, wantHeight); ctx.canvas.toBlob( async (blob) => { const resizedImageFile = new File([blob], file.name, { type: file.type, lastModified: Date.now() }); const blobToUrl = URL.createObjectURL(blob); //blobをimgのsrc属性で使える形へ変換 setUploadImg(blobToUrl); //リサイズした画像を表示 uploadToFirestore(resizedImageFile); //resizedImageFileをFirestoreへ }, file.type, 1 ); }; fileImage.src = fileReader.result; }; fileReader.readAsDataURL(file); }; return ( <div className="App"> <h1>React画像アップロード</h1> <input type="file" onChange={(e) => handleUploadImg(e)} /> <div style={{ margin: "10px" }}> <img src={uploadImg} alt="アップロード画像" /> </div> </div> ); }; export default App; codesandbox URL: https://codesandbox.io/s/react-img-size-change-canvas-n1iln?file=/src/App.js:0-1967 コード解説 概要 ・FileReaderインスタンスでアップロードした画像を取り出す ・Imageインスタンスを呼び出しcanvasメソッドを使ってリサイズする ・fileImage.onloadの中身のコードについて FileReaderインスタンスでアップロードした画像を取り出す App.js // 省略 const fileReader = new FileReader(); const file = e.currentTarget.files[0]; // 省略 fileReader.readAsDataURL(file); FileReaderインスタンスであるfileReaderの中のreadAsDataURL(file)を読むことでfileReder.onloadを発火させます。 ここの詳細については前回の記事、Reactで画像アップロード機能を実装してローカルファイルを読み込ませるで書いています。 Imageインスタンスを呼び出しcanvasメソッドを使ってリサイズする App.js // 省略 const fileImage = new Image(); fileImage.onload = () => { // 省略 } fileImage.src = fileReader.result; // 省略 } ImageインスタンスであるfileImageのsrcに画像データ（blobデータ）を代入するとonloadが走ります。 ちなみにfileReader.resultの中身を imgタグ の src属性 に入れても読み込むことができます。 fileImage.onloadの中身のコードについて App.js // 省略 fileImage.onload = () => { //読み込んだ画像からサイズを取り出す const uploadWidth = fileImage.width, uploadHeight = fileImage.height; //幅200を超える画像は全て200へリサイズする。そうでない場合はリサイズしない。wnatWidthはリサイズしたいサイズのこと。 const wantWidth = uploadWidth < 200 ? uploadWidth : 200, resizeRatio = uploadWidth / wantWidth, wantHeight = uploadHeight / resizeRatio; //canvasメソッドを使ってサイズ指定してdrawImage(略)でレンダリング const canvas = document.createElement("canvas"); canvas.width = wantWidth; canvas.height = wantHeight; let ctx = canvas.getContext("2d"); ctx.drawImage(fileImage, 0, 0, wantWidth, wantHeight); 　　　　 //canvasデータをblobデータへ変換し、受け取った結果を元にイメージファイルであるresizedImageFile変数を作る ctx.canvas.toBlob( async (blob) => { const resizedImageFile = new File([blob], file.name, { type: file.type, lastModified: Date.now() }); const blobToUrl = URL.createObjectURL(blob); //blobをimgのsrc属性で使える形へ変換 setUploadImg(blobToUrl); //リサイズした画像を表示 uploadToFirestore(resizedImageFile); //resizedImageFileをFirestoreへ }, file.type, 1 ); }; // 省略 コードへ注釈を入れていますがそのままの通りになります。

こんにちは！ LIFULLエンジニアの吉永です。 本日は最近あまり関わらなくなったのであまりキャッチアップできていなかったフロントエンド開発技術についてインプットした内容を備忘録として記載していきます。 本記事の概要 私自身、jQueryを用いたフロントエンド開発はなんとなく実装イメージが湧くのですが、Vue.jsで同じことを実現しようとすると都度検索してということが多いので、jQueryとVue.jsで同じことを実現する際のコードの対比を記していこうと思います。 なので、対象読者はjQuery経験者でこれからVue.jsに入門しようとしている人となります。 また、私自身jQuery経験者ではありますが、ベストプラクティスを知っているかと言われると自信がないので、有識者の方から見たらおかしな実装になっている箇所も多々あるかと思いますし、Vue.jsに関しては初心者なので、もっとひどいかもしれません・・・ツッコミどころ満載な内容になってしまっているかもしれませんが、ご容赦くださいませ。 なお、Vue.jsに関しては現在個人的に学習中の教材がバージョン2系になっているので、2系でのコードになっています。 2系と3系では結構変わっているという噂は聞いているのですが、ひとまず教材を読破するまでは教材ベースのバージョンで進めていき、後々3系についてはキャッチアップしようと思ってます。 筆者のフロントエンドスキルと知識について HTML/CSS/JSについては基礎的な部分は習得済みで、PSD/AI/XDなどのデザイン原本ファイルを元にしたWebページのコーディングは概ねできる。 JSに関してはjQueryを用いたフロントエンド開発を数年前に経験済みで、当時はBootstrap+jQueryの組み合わせで制作していた。 Angularはメジャーバージョンが2から4に上がる際に当時関わっていたプロジェクトにて仕様変更部分が既存プロジェクトにどんな影響があるか？どのような改修が必要か？などをレポートにまとめたことがあるが、2017年頃の話なのでまったく記憶にない。 React/Vue.jsもプライベートで簡単なチュートリアルはやってみたが、業務で使うことがなかったので、まったく継続しなかったので、こちらもほとんど記憶にない。 本記事を執筆した理由 上記で記載したように、jQueryを使ってフロントエンド開発を行っていたので、最近のモダンなフロントエンド技術のキャッチアップができていないので、キャッチアップした内容をアウトプットすることで継続させたいから。 業務では主にバックエンド開発を行っているが、LINEアプリでWebページを表示させる際に使用するLIFFについて開発に携わったり、コードレビューに参加したりすることが機会として増えてきたから。 私の所属しているチームではフロントエンド開発にNuxt.jsを採用しているので、まずはNuxt.jsの根幹を成すVue.jsの基礎から体系だって学びなおそうと思ったから。 Hello World See the Pen Hello World by Yuta Yoshinaga (@yuta-yoshinaga) on CodePen. もはやコードにすべきか迷うくらいの初歩ですが、何にしてもまずはHello Worldからということで、作ってみました。 Vue.jsでは対象となるエレメントをVueオブジェクトのelプロパティでセレクタ指定して紐づけています。 そうして紐づけたVueオブジェクトにdataプロパティにmessageというプロパティを宣言し、値にローカル変数のhelloを割り当てて初期化しています。 html側ではマスタッシュ構文と呼ばれる構文でVueオブジェクトのdataプロパティ内のmessageを参照して画面に出力しています。 データバインディング v-bind See the Pen データバインディング v-bind by Yuta Yoshinaga (@yuta-yoshinaga) on CodePen. 続いてinputタグのvalue属性へのデータバインディングです。 先ほどのpタグ内への単純な出力ではマスタッシュ構文を用いましたが、value属性の場合は少し書き方が変わります。 v-bindというディレクティブを使用して、inputタグのvalue属性にバインディングしています。 また、valueの内容にはマスタッシュ構文ではなくVueオブジェクトのプロパティ名そのものを使用する必要があります。 表示・非表示制御 v-if See the Pen 表示・非表示制御 by Yuta Yoshinaga (@yuta-yoshinaga) on CodePen. 次は条件に応じてエレメントの表示・非表示を制御する例です。 html側でv-ifというディレクティブを用いると、評価対象のプロパティがtrueなら表示、falseなら非表示という制御ができます。 なおv-ifでfalseの場合にはエレメント自体が削除されます。 表示・非表示制御 v-show See the Pen 表示・非表示制御 v-show by Yuta Yoshinaga (@yuta-yoshinaga) on CodePen. 対して、v-showでは対象のエレメントはDOM上に残り、CSSのdisplayにて非表示にしています。 頻繁に表示非表示を切り替えるなどの際にはv-show、ページ読み込み時のみに表示するか非表示にするかを決めて以降は制御されないようなものはv-ifなどの使い分けをすると良さそうです。 反復処理 v-for See the Pen 反復処理 v-for by Yuta Yoshinaga (@yuta-yoshinaga) on CodePen. 次はリスト表示などのように複数データを反復処理にて出力する例です。 v-forというディレクティブを使用し、使い方は良くあるforeachのような形で、v-for="{リストから取り出した単一のデータ} in {リストデータ}"のようにして記述します。そしてマスタッシュ構文では取り出した単一のデータを記述します。 イベント処理 v-on See the Pen ボタンクリック v-on by Yuta Yoshinaga (@yuta-yoshinaga) on CodePen. 最後にイベント処理で、その中でも最も使用頻度が高いであろう、ボタンクリック時の実装です。 個人的にはこの部分がjQueryから乗り換える際に一番メリットを感じられる部分かなと思っていて、jQueryのコードは規約を厳しくしておかないと、様々な個所にイベントハンドラ処理が実装されてしまい、このエレメントに対するイベント処理ってどこに実装されてるんだ？とか、実装してあるであろう個所を直しても謎の力が作用して何故か上書きされてしまう、などの辛みを覚えた方は多いのではないかと思います。 Vue.jsではVueオブジェクトと紐づけられたコード内にmethodsというプロパティにイベントハンドラを実装し、v-onディレクティブでボタンクリック時に呼び出す関数をhtml側で定義しています。 このようにすることで、html側からJS側への風通しも良くなり、jQueryに比べると格段にメンテナンスがしやすくなっているのではないかなと思っています。 最後に いかがでしたでしょうか？ Vue.jsとjQueryを対比させて、jQuery経験者がVue.jsに入門する際の参考になればと思い本記事を執筆しました。 今回は初回の記事なので、基本中の基本とも言える部分に留まっており申し訳ないのですが、私と同じようなバックエンド寄りの開発者の方の参考になれば幸いです。 次回のテーマは未定ですが、またある程度インプット出来たら、アウトプットできればと思っています。 最終的にはNuxt.jsまで・・・(上手くまとまるかな・・・) それではまた次の記事でお会いしましょう！

WYSIWYG（ウィジウィグ）とは 「What You See Is What You Get」の略 入力画面と出力画面が一致する様に表現する技術 よく使用されるライブラリ Draft.js 公式サイト 特徴 Facebook製 Reactベースで作られているため、簡単かつ堅牢な仕組みで実装可能 Twitter、Wantedly等で使用されている データの入出力方法 入力: JSONで保存可能 出力: draft-js-export-html を使用することで保存データ（JSON）をHTMLへ変換可能 Quill 公式サイト 特徴 PC・タブレット・スマートフォンに対応 Slack、salesforce、LinkedIn等で使用されている データの入出力方法 入力・出力共にJSONを使用可能

はじめに ページの離脱直前に確認ダイアログを出すなど、そのページから遷移しようとすることをトリガーに処理を書く際はbeforeunloadイベントを使用するメジャーなやり方がありますが、ページの読み込み時( jQueryの$(document).readyが動くタイミング )にブラウザバックでこの画面に遷移してきたどうかを判定して処理したいケースがあり、無事実現できたのでご紹介します。（とてもレアケースだとは思いますが…） どんなケースで必要だったか気になる方に向けて使用した際の用途にも触れておきます。Bootstrapのtagsinputというプラグインを導入してフォーム画面のinputへの入力がタグ化されるようにしていたため、ブラウザバック時のフォーム復元には別途処理を実装する必要がありました。 復元するための入力値はsessionStorageに保存していたので、同一タブでブックマークからフォームを再度開いた際は入力値を復元したくなく、どうしてもブラウザバックで遷移してきたかどうかの情報を取得する必要がありました…。 実行環境 jQuery 3.5.1 遷移元の種類を判定する方法 $(document).ready(function () { if (window.performance.navigation.type == 2) { //ブラウザバックで遷移してきた際に動かす処理 } }); なんと、window.performance.navigation.typeにどうやって今いるページにたどり着いたのかを数値として持っています。 実際、Chromeの開発者ツールから実行してみてもこの通り 値を持っていることがわかります。 PerformanceNavigation.type - Web API | MDN Mozillaのドキュメントを見ると、数値の意味は下記の通り設定されているようです。 値 定数名 意味 0 TYPE_NAVIGATE リンク、ブックマーク、フォーム送信、スクリプト、またはアドレスバーに URL を入力してページにアクセスしました。 1 TYPE_RELOAD このページには、[再読み込み] ボタンをクリックするか、Location.reload() メソッドを介してアクセスしました。 2 TYPE_BACK_FORWARD このページには履歴をたどってアクセスしました。 255 TYPE_RESERVED その他の方法。 サンプルコードにはブラウザバックをべた書きで"2"と書きましたが、window.performance.navigation.TYPE_BACK_FORWARDとすることでもこの数値は取れました。 補足 PerformanceNavigation.typeのドキュメントによると、新しいPerformanceNavigationTimingの使用が推奨されています。 このインターフェイスは Navigation Timing Level 2 仕様では非推奨です。 代わりに PerformanceNavigationTiming インターフェイスを使用してください。 PerformanceNavigation.type - Web API | MDN PerformanceNavigationTiming - Web API | MDN 新しい仕様では、メソッド経由でナビゲーションタイプを取得するようです。 ただし、PerformanceNavigationTimingのドキュメントには「実験的な機能」との記載があり、IEとSafariには完全非対応とのことなので要件に合わせて使い分けるのがよさそうです。 今回は、全ブラウザ対応で安定しているPerformanceNavigation.typeを使用しました。 参考リンク 下記質問への回答を参考にさせていただきました。

本記事 本記事は筆者がJavaScriptを学習している中で学んだことを記したものです。 備忘録的な位置付けですので、間違い等あるかもしれませんが、よろしくお願いします。 モダンJavaScriptとは 仮想DOMを用いるライブラリ/フレームワークを使用している、npm/yarn等のパッケージマネージャーを使用している、ES2015(ES6)以降の記法を使用している。webpack等のモジュールパンドラーを使用していること。Babel等のトランスパイラを使用していること。 JavaScriptとは ・Webブラウザ上(HTMLやCSSで構成される)で複雑な動きをするためのもの。 仮想DOMとは DOMとはdocument object modelの略。HTMLなどを解釈して木構造で表現したもの。JavaScript上でかそうDOMを使用して差分を抽出して変更分のみDOMで操作する。 npm/yarn等のパッケージマネージャー かつて、JavaScript開発では一つのJSファイルに全てを記述していた。 それを大きな処理ごとに分割して使う様になった。 しかし、読み込む順番等を意識しないとエラーが出てしまっていた。。。 現在では、npm/yarn等のパッケージマネージャーを使用して開発している。 Node.jsが裏で動いている際に、それぞれの依存関係を整理してくれる。 ESとは ECMAScriptの略。JavaScriptの標準規格のこと。毎年一回発表されている。ES5=2009、ES6＝2015 （機能追加が多くされた。） ex)let,constアローファンクション、Class構文、分割代入...etc モジュールバンドラーとトランスパイラ モジュールバンドラーとは、複数のファイルを一つにまとめるもの。上で述べた通り、JSは分けて開発した方が良いが、本番では分かれる必要がなく、最終的に一つに纏めていい感じにしてくれるの。 トランスパイラは,新しいJavaScriptの記法を古い記法に変換してくれるもの。 ブラウザによっては使用できない機能ががあることがあり、先程の様な処理をしてくれる。どのブラウザ上でも動く様にしてくれる。 アロー関数の注意点 １.引数が一つの時、引数の()の省略ができる. ※prrettier等の自動整形ツールを使用していると保存する際に()がつく。 2.中が単一式の場合、以下の様な書き方ができる。

多くの人が高給のためにプログラミング業界を選びますが、世界で最も収益性の高いプログラミング言語は何か知っていますか？ 1）Java 「Javaは時代遅れですか？」と尋ねるかもしれません。もちろん、そうではありません。 なぜJavaはまだ人気があるのですか？Javaは最も古く、堅牢なプログラミング言語の1つです。また、主にAndroidアプリケーション開発に使用されるオブジェクト指向言語です。これが、今日でも使用されている主な理由の1つです。しかし、Kotlin（Android開発にも適しています）のようなプログラミング言語の出現により、Javaの人気は低下しています。 ただし、Javaは依然として最も高額なプログラミング言語の1つであり、かなりの需要があります。Indeedによると、ソフトウェア開発会社はJava開発者に興味があり、毎年10万ドル以上の給料を支払う。 2）Swift Swift iOSアプリケーション開発は現在非常に人気があります。Swiftは非常に安定したプログラミング言語であり、勉強する価値があります。Javaに比べて、習得しやすいです。YouTubeには、学習に役立つリソースがたくさんあり、それを使ったプログラミングも楽しいものです。今Swiftの自由開発者であると、或いは関する仕事を従業すると、年給11.5万ドルに達する可能もあります。 3）SQL SQLまたはSequelは構造的な検索言語です。実際にはプログラミング言語ではないと思う人がいます。SQLは主にデータの管理とインタラクティブに用いられる。ですから、SQLはプログラミングに欠かせないスキルであり、どのタイプのWeb開発（バックエンドまたはフルスタック）でも、データを管理するためにそれを学ぶ必要があります。統計によると、SQL開発者の平均年収は9万ドルを超えています。 4）JavaScript これは不思議なプログラミング言語で、一部の人はそれが一番いいと思っています。JavaScriptは非常に人気のある言語です。GitHubをチェックすると、JavaScriptをサポートする新しいフレームワークが常に表示されます。さらに、すべてのブラウザはJavaScriptをサポートします。したがって、JavaScriptを習得することは、ソフトウェア開発に把握しなければならないスキルの一つであると言えます。JavaScript開発者は、9万ドルから11.3万ドルの範囲の収入を得ることができます。 5）Python GoogleトレンドとPyPI人気指数によると、Pythonは世界で最も人気のあるプログラミング言語の1つであり、確かに最も高額なプログラミング言語の1つです。GoogleはPythonで構築され、YouTubeもPythonで開発されました。 Pythonの驚くべき点は、汎用プログラミング言語であり、幅広いアプリケーションを構築するために使われています。更に人工知能に活躍しています。自動運転車、ウォルマートの自動精算、多くの自動化とマシン学習（ML）アプリはPythonを通じて開発されました。これはこの言語をより重要にし、急速に普及させます。さらに、Pythonは他のすべての言語よりも習得が容易であり、初心者にも優しいです。 また、複雑なアプリケーションを比較的簡単かつ迅速に構築することもできます。米国では、Python開発者の平均給与は約7.8万ドルですが、経験豊富な開発者は12.2万ドルにもなります。

単語をfor文を用いて接続 言語: Javascript const mySports = ["野球" , "サッカー" ,"テニス"] let text = "私の好きなスポーツは" for (let i = 0; i < mySports.length ; i++){ text += mySports[i] if (i !=mySports.length - 1){ text +="と" } } text += "です。" console.log(text) 上記のコードで重要な点 ・リストの長さを取得するメソッドはリスト.length ・for 文のなかにif文を用いて場合わけする点

for (let number=1;number<=100 ;number++) { console.log(number); }

デフォルト引数 https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Functions#default_parameters 論理演算子 https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#logical_operators coffee coffee の存在チェック http://coffeescript.org/#existential-operator CoffeeScriptの exsitential operator mdn読む。

前置き 前回 フィルタでfalsyな要素はSymbol('ignore')を返すようにする。 function const APPS = { ignore: Symbol('ignore'), filterMap: (array, func) => { const arr = array.slice(); const res = []; for (let i=0,len=arr.length; i<len; i++) { const v = func(arr[i], i, arr); if (v!==APPS.ignore) res.push(v); } return res; } }; const arr = [...Array(10).keys()]; const chunk = APPS.filterMap(arr, (x,i,a) => i%3===0 ? a.slice(i,i+3) : APPS.ignore); console.log( chunk ); //[[0, 1, 2], [3, 4, 5], [6, 7, 8], [9]] これもdefinePropertyを使って設定したほうが良かったかも？ const APPS = { ignore: Symbol('ignore') }; Object.defineProperties(APPS, { ignore: { writable: false, }, filterMap: { value: (array, fn) => { const arr = array.slice(); const res = []; for (let i=0,len=arr.length; i<len; i++) { const v = fn(arr[i], i, arr); if (v!==APPS.ignore) res.push(v); } return res; }, }, }); Array.prototype if (!Array.prototype.filterMap && !this.ignore) { Object.defineProperty(Array.prototype, 'filterMap', { value: function(fn) { const arr = this; const res = []; for (let i=0,len=arr.length; i<len; i++) { const v = fn(arr[i], i, arr); if (v!==ignore) res.push(v); } return res; }, }); const ignore = Symbol('ignore'); Object.defineProperty(this, 'ignore', { get() { return ignore; } }); }; const arr = [...Array(10).keys()]; const chunk = arr.filterMap((x,i,a) => i%3===0 ? a.slice(i,i+3) : ignore); console.log( chunk ); //[[0, 1, 2], [3, 4, 5], [6, 7, 8], [9]] ignoreをthis.ignoreではなくArray内部に留めたかったけど、しっくりこなかった。

javascriptは上の処理が終わってなくても次の処理が始まるので、順番にしたい場合はインデントつける。

Todoリストを作成しました！ ProgateでのJavaScript学習が落ち着いたので、思い切ってTodoリストを作成しました！ 学習したとはいっても、まだガッツリ出来るというわけではないので、 参考物を確認しながら、作成するにあたっての考え方、組み方などを理解出来るようにすることを 目標として作成を行いました。 作成したい内容にマッチしたものを参考にしました 日付の表示・並び替えといった機能も実装したいな〜と考えていましたが、 初めての作成ということなので、 ① 記入したものを表示、削除が出来る ② タスクの内容をローカルストレージに残すことが出来る といったシンプルなTodoリストを作成することに決めました。 上記の内容に当てはまったのが、以下のサイトで紹介されているTodoリストでした。 こちらを参考に、作成を行いました。 基本、手順通りに作成 私の場合、参考サイトを探す前に雛形は作成済みだったので、 JavaScriptの記述、動きなどを参考にしました。 タスク追加・削除のシンプルなTodoリストを作成するため、参考サイト内にある 検索機能は除外しました。 スムーズに出来ました 手順通りに作成を行ったから、というのもありますが 最初からシンプルなTodoリストを作成する予定だったので、とてもスムーズに作成することが出来ました。 ですが、まだまだJavaScriptへの理解力は乏しいので、引き続き個人制作で学習を頑張りたいと思います。?

Dexieで部分一致で検索する方法。 // 記述例 async function search_todo(word) { // Dexieの標準検索には前方一致しかないため、filterを使用して絞り込みをかける。 const todos = await db.table.filter(function (todo) { // javascriptの部分一致検索方法で判定してやる。 return todo.title.indexOf(word) > -1; }).toArray(); return await todos; } 参照元: https://github.com/dfahlander/Dexie.js/issues/146 以上

はじめに NotionのAPIが利用できるようになったので、さっそくJavascript SDKを利用して、データベースにデータを追加してみたいと思います。 事前準備 ①： integrationを作成しトークンを取得 https://www.notion.so/my-integrations にアクセスし、integration作成画面に遷移 Nameを入力しSubmit トークンが表示されるのでコピーして控えておく ②： データベースを作成し①のintegrationを招待 データーベースを作成（/table fullと入力すれば作成されるかと思います） ①のIntegrationsを招待する URL（デスクトップアプリの場合はShare→Copy Linkで取得できます）から下記の Database ID 部分を控えておく https://www.notion.so/myworkspace/a8aec43384f447ed84390e8e42c2e089?v=... |--------- Database ID --------| SDKなどをインストール npm i @notionhq/client typescript ts-node 実装 まずは index.ts ファイルを作成 touch index.ts そして作成したファイルに以下を記述 import { Client } from "@notionhq/client"; const notion = new Client({ auth: process.env.NOTION_TOKEN, }); (async () => { await notion.request({ path: 'pages', method: "post", body:{ "parent": { "database_id": process.env.DATABASE_ID }, "properties": { "Name": [ { "text": { "content" : "test" } } ], } } }) })(); 最後にファイルを実行すればデータが追加されるかと思います。 NOTION_TOKEN=①のトークン DATABASE_ID=②のデータベースID ./node_modules/.bin/ts-node index.ts 最後に 今回はデータベースにテキストを追加するという簡単な例でしたが、公式のExampleをみるとGithub issuesとの同期なども行うことができるようです。 引き続き色々試してみたいと思います！

スマホの画面上のURLが書いてある部分のせいで、heightを100vhにしても意図したデザインにならない問題を解決する方法の備忘録 解決方法は、javascriptのwindow.innerHeightを使用すること var windowHeight=window.innerHeight; document.getElementById('section').style.height=windowHeight+'px'; として、100vhでsectionの高さを設定するのではなく、window.innerHeightを使用することで、 アドレスバーの下から画面最下部の大きさで１画面となる。 こちらの記事がとてもわかりやすいです。 https://877.design/smartphone-height/