ChatGPTとNotionの組み合わせ方は相変わらず頭をひねる要素でしょう。Notion上でChatGPTを使うか、ChatGPTからNotionに流し込むか、の2択にて、利便性を考えると個人的にはNotionAIとの相乗効果で前者を選びたいなぁと思っていました。ただNotionAPIでの以下の制約があって中々手間がかかります。 連続したブロック間に新規ブロックをはさみこめない 既存ブロック内テキストに追加する場合、追加テキストの判別をしたい場合は追加テキストを別途保存管理する必要がある もっとシンプルにできないかなと考えていたところ、NotionにChatGPTの結果を流し込む拡張がリリースされていました。 ChatGPTの結果を元にNotionAIで加工もありかと思い、触ってみました。 初期設定 まずはNotion上に保存用DBを作成しておきます。URL保存用にURLのプロパティが必

先日プラグインを作成してみた記事を公開しましたが、その記事のコメントで tyruさん からご指摘いただいた(とてもありがたいです)、プラグインのインストール場所と方法について整理しておきます。 分類 そもそも自分で書いたVim スクリプトをVimに読んでもらうためには次の３つが考えられると思います。 プラグインとして配置する パッケージとして配置する プラグインマネージャーを使用して配置する ここではデバッグのことを考えて自力で配置する方法「1. プラグインとして配置する」「2. パッケージとして配置する」に限定して説明していきます。なので、「3. プラグインマネージャーを使用して配置する」に関しては書きません(プラグインマネージャーのリファレンスを読んだ方がわかると思います。私は dein.vim 使っています) 前提 プラグインのリポジトリは plugin と autoload の２つ

Webサイトを形作っている言語「HTML」「CSS」「JS」。 この3言語を身につけるためには、まずはフワッとでもコード*1を読めるようになることが先決と思う。人のコードを読める（インプット）と、自分でゼロから書く（アウトプット）ときの引き出しになる。 書ける前に読む！*2と、いうことでコードを読むために理解しておくといいHTML、CSS、JSの基本書式をまとめる。 第２回は「HTMLの基本」編。Webサイトの文書構造を司る「HTML」の書式を理解する！ 連載一覧： 【Webの基礎知識】書ける前に読む！HTML、CSS、JSの書式-1 【HTMLの基本】書ける前に読む！HTML、CSS、JSの書式-2（←いまココ） 【CSSの基本】書ける前に読む！HTML、CSS、JSの書式-3 【JSの基本-前編】書ける前に読む！HTML、CSS、JSの書式-4 【JSの基本-後編】書ける前に読む！HT

こんにちは、CX事業本部 IoT事業部の若槻です。 最近、モバイルのネイティブアプリケーションを作れないか？と問われる場面がちょくちょくあるのですが、わたしは今のところフロントエンドフレームワークだとReactの開発経験しかなく、そろそろネイティブアプリにも手を広げねばと思っている今日この頃でした。 いきなりAndroidやiOSの習得に取り掛かっても良いのですが、バニラReactの経験者ならまずはReact Nativeであればファーストステップとしては敷居が低いだろうと考え、今回はReact Native for Webに入門してみました。 React Nativeとは React Nativeとは、Reactを使用してAndroidやiOSアプリケーションを構築できるオープンソースフレームワークです。Reactと同じくMeta社により作成され、公開されています。 Core Compo

GoogleはProgressive Web App(PWA)という新しいテクノロジーを提供しました。 PWAテクノロジーは市場に出回ってからしばらく経ちますが、その人気はここ数年で急上昇しております。 PWA開発の基本と定義を見ていきましょう。 PWAとは？ PWAで構築する理由 ReactでPWA Webアプリ作成 Manifest.json アプリのビルド Service Workerの登録 最後に PWAとは？ PWA（Progressive Web App）は、Webアプリケーションとネイティブアプリケーションの利点を組み合わせたアプリケーションであり、ハードウェア機能を含めたクロスプラットフォームアプリを提供します。 PWAは、ネイティブアプリよりも開発とサポートが迅速で、低コストであるため、注目されています。 この技術は、モバイルアプリとWebサイトの両方で最高のユーザーエク

XMLHttpRequest オブジェクトを使用することで Ajax を使った非同期通信を行うことができます。ここでは Ajax による非同期通信を行うために XMLHttpRequest オブジェクトの作成し、サーバへリクエストを送信したあと、サーバからレスポンスを受信するまでの方法について解説します。

HUGOでは、記事ファイルを軽量マークアップ言語であるMarkdown形式で作成します。しかし、Markdownの表現力には限りがあるため、HTMLに頼りたくなる場合があります。 とはいえ、何度も同じようなHTMLを記述するのは面倒＆ HTMLタグを記述することでファイルの可読性が落ちてしまいます。 この問題を解決するため、HUGOには、Shortcode（以下、ショートコード）という機能があります。 Markdownファイル内で{{< ショートコード名 >}}と記述すると、コンテンツ内にショートコードとして定義したテンプレートファイルのHTMLの内容を埋め込ます。 HUGOには、TwitterツイートやGistコードの埋め込みなど、ビルドインのショートコードが用意されています。 一方で独自にショートコードを作成できるので、この記事ではテンプレートファイルの作成方法を説明します。 リンクを

HUGO v0.109.0で追加された、HUGOテンプレートからSassに変数を渡す機能を試した。 HUGOにおけるSassの標準ライブラリであるLibSassでも利用できるが、if構文を使いたかったため、この記事ではDartSassを使用する。 要約 テンプレート：toCSSのvarsオプションに、変数を定義したmapを渡す {{- $vars := ( dict "color1" "#1fb6ff" "color2" "#7e5bef" ) -}} {{- $opts := ( dict "transpiler" "dartsass" "vars" $vars ) -}} {{- $style := resources.Get "scss/main.scss" | toCSS $opts | fingerprint -}}

今年は40歳になりまして、もういい加減健康とかにも気を使っていかないとなと思ったので、今年のテーマは「健康」でした。 結果として、 体重16kg落とした 筋トレ始めて4kg増えた。トレーニング器具を買った。 会社で筋トレ仲間を集めて合トレしている って感じですね。 何やったか振り返ってみます。 健康 今年の1月に体重が歴代ハイスコアを記録してしまったので、本気でやばいと思ってダイエットを始めました。 具体的には、最初にKPIを体重に設定して、BMIが22を切るようにしました。 30分間ランニングを毎日実施してたのと、食事制限、糖質を少なめにしてました。具体的には昼食以外は炭水化物・糖質は取らないようにしていました。10月で16kg減できました。去年の自分の JSConf.jp 動画でのキャプチャと今年を比較すると多少痩せてることがわかりやすいかもですね。 去年の自分 今年の自分 ただこれだ

サービスが大きくなってくると、フォームに入力できる項目が多くなってきます。そうすると、長さや範囲などの単純なバリデーションだけでなく、項目間のチェックを行う必要がでてきます。また、状態遷移などを扱うようになると、現在DBに登録されている値と入力値を見比べる必要も出てきます。 それらをいっぺんにチェックしようとすると、コードがごちゃごちゃしやすく、バグが生まれやすくなります。ここではバリデーションをいくつかのステップに分けて実行する方法を提案します。 (注: どちらかというと、サーバーサイドでのバリデーションを想定しています) サンプルアプリ:会議室予約システム 例として、会議室予約システムを考えましょう。 入力項目は、 会議名 会議室 参加人数 開始日時 終了日時 です。 バリデーション このサンプルアプリケーションのバリデーションは以下です。 会議名は必須で3文字以上256文字以下 会議

Not your computer? Use a private browsing window to sign in. Learn more

::: message info これは[フィヨルドブートキャンプ Advent Calendar 2022 Part.1](https://adventar.org/calendars/7760)の25日目の記事です。 昨日の記事は:@shujiwatanabe:shujiwatanabeさんの[質問しながら出来るようにしていく](https://shu91327.hatenablog.com/entry/2022/12/24/091025)と:@saeyama:saeyamaさんの[Rails/Vue 編集時に画像をD&Dで入れ替えした時のActive Storageの保存方法](https://saeyama.hatenablog.com/entry/2022/12/24/000123)でした。 ::: ↓こういうのを職人が丹精込めて一つ一つ手作りする時代は終わりました。 ```sh